🐣

승연

배승연

프로젝트 관리

•

기획 단계

◦

요구사항 정리 문서 작성

◦

기능 분담 문서 작성 및 프로젝트 진행 상황 관리

•

개발 단계

◦

효율적인 협업을 위한 브랜치 전략, 협업 시나리오 설립 후 팀 내 전파

◦

GitHub 이슈 템플릿, PR 템플릿 제작 및 등록

◦

소모적인 커뮤니케이션을 줄이기 위해 협업 메신저(Discord)와 GitHub 알림 연동

•

테스트 단계

◦

버그 리포트 도입 및 작성법 전파

디자인

•

가져도댕냥 로고, 마스코트 캐릭터, 광고 이미지 등 디자인 에셋 제작

•

집사생활 메인, 산책 난이도, 동물병원 페이지 Figma 시안 제작

화면 개발

•

애니메이션, 로딩, 검색, 팔로우, 모달, 메인 레이아웃 컴포넌트 제작

•

이메일 로그인, 팔로우 페이지, 집사생활 메인, 산책 난이도, 동물병원 페이지 퍼블리싱

•

여러 페이지에서 반복 사용 되는 레이아웃을 재사용 가능하도록 컨텐츠 레이아웃 컴포넌트로 분리

기능 개발

•

로그인 기능 구현 (API 명세에 따름)

◦

정규표현식으로 이메일 및 비밀번호 유효성 검증

◦

유효성 검증을 통과해야 로그인 버튼이 활성화 되도록 구현

◦

localStorage에 토큰 저장

•

로그아웃 기능 구현

◦

localStorage에 저장된 토큰 삭제

•

팔로우 / 팔로잉 페이지 기능 구현

◦

팔로우 / 팔로잉 목록 데이터를 받아 화면에 표시하는 기능 구현 (API 명세에 따름)

◦

팔로우 / 언팔로우 기능 구현 (API 명세에 따름)

•

집사생활 메인 페이지 기능 구현

◦

Swiper 라이브러리를 이용한 페이지네이션 캐러셀 구현

◦

추천글 API가 따로 주어지지 않음에 따라, 오늘의 추천글 기능을 구현하기 위해 API 가공

▪

피드 게시글과 내 게시글 데이터를 동시에 요청한 후 응답 받은 두 종류의 데이터를 결합

▪

결합한 데이터를 좋아요+댓글이 많은 순 → 댓글이 많은 순 → 최신 순으로 정렬

◦

사용자가 많은 양의 게시글을 편리하게 볼 수 있도록 무한스크롤 적용

▪

가장 하단에 있는 요소가 화면 바닥에 닿으면 피드 게시글, 내 게시글을 각각 10개씩 요청

•

산책 난이도 페이지 기능 구현

◦

행정구, 날씨, 미세먼지 조회 기능 (API 명세에 따름)

▪

Geolocation API를 이용해 사용자의 현재 좌표를 가져옴

▪

Kakao 좌표로 행정구역 정보 받기 API를 이용해 행정구역 정보를 받아옴

▪

OpenWeatherMap API를 이용해 날씨, 미세먼지 정보를 받아옴

◦

산책 난이도 책정 기능

▪

날씨, 기온, 공기 질 정보를 이용해 산책 난이도를 어려움 / 보통 / 쉬움으로 책정

•

동물병원 페이지 기능 구현

◦

Kakao 키워드로 장소 검색하기 API를 이용해 근처 동물병원 정보를 가까운 순으로 받아옴 (API 명세에 따름)

◦

거리 필터(1km, 5km, 10km) 적용

◦

사용자가 원하는 정보만 선별적으로 볼 수 있도록 더보기 버튼 적용

▪

더보기 버튼을 누르면 10개 데이터를 추가로 요청

기타

•

폴더 트리 및 기본 파일 구성을 포함한 프로젝트 초기 세팅 작업

◦

팀 컨벤션에 맞춰 ESLint & Prettier 적용

◦

수월한 퍼블리싱 작업을 위해 메인 레이아웃 적용

•

라우터 제작

◦

서비스 전체 라우터 설계 및 구축

◦

사용자 인증 여부에 따른 라우터 접근제한 기능 구현

•

재사용 가능한 코드는 Custom Hook으로 분리

◦

useInput : input 요소 관련 Hook (유효성 검사, 포커스 이벤트, 블러 이벤트 등)

◦

useCurrentLocation : 사용자 좌표를 가져오는 Hook

•

전역에서 필요한 데이터는 Context 객체로 관리

◦

AuthContext : 사용자 인증 정보를 저장하는 객체

◦

UserLocationContext : 사용자 위치를 저장하는 객체

•

Postman을 이용한 API 테스트 방법 및 Axios를 이용한 서버 통신 방법을 팀 내 전파