공동
•
프로젝트 추가 기능 기획
•
공통 컴포넌트 작업
•
컨벤션 설정
•
README.md 작성
•
프로젝트 관리
간단 스타일
•
역할 팀 리더
◦
전체적인 프로젝트 총괄
◦
프로젝트 디자인 및 기능 개발
◦
데이터 수집 및 가공
•
UI/기능
◦
게시글 상세페이지
◦
게시글 삭제, 신고
◦
게시글 상세페이지
◦
게시글 삭제, 신고
◦
댓글 게시, 삭제, 신고
◦
검색 페이지 및 기본 기능
◦
직관일정 페이지 및 기능
◦
일정추가 페이지 및 기능
◦
에러 (404) 페이지
◦
모달/바텀시트 기능
◦
좋아요 기능
◦
로그아웃
◦
스켈레톤 UI
◦
무한 스크롤 기능
디테일 스타일
프로젝트 역할
•
프로젝트 총괄
◦
프로젝트 기획
▪
아이디어를 모아서 계획 구체화
▪
추가 기능를 이용하기 위한 API 명세 작성
◦
커뮤니케이션
▪
프로젝트 기간동안 20회의 회의, 리팩토링 기간동안 10회의 회의 진행
▪
회의, Issue, PR를 통해 진행 상황과 목표 공유
◦
프로젝트 초기 설정 작업
▪
폴더 트리 구성
▪
ESLint / Prettier 설정 및 적용
▪
GlobalStyle 적용
▪
Router 기본 설계 및 구축
▪
CommonAPI를 통해 기본 api 설정
◦
Netlify를 통한 프로젝트 배포
•
프로젝트 디자인
◦
전반적인 UI 디자인
•
데이터 수집 및 가공
◦
웹 크롤링을 통한 필요한 데이터 수집 (스포츠 팀 정보, 경기 일정 정보, 선수 정보)
◦
데이터 가공 및 서버 등록 (스포츠 팀 가입, 경기 일정 게시글 등록)
UI 개발
•
Header, SearchBox, FeedFilter, SelectFilter 공통 컴포넌트 제작
•
Comment, List (경기 List, 유저 List, 직관일정 List), GamePost, Skeleton 관련 컴포넌트 제작
•
일정 추가, 에러, 직관일정, 게시물 상세, 검색 페이지 제작
기능 개발
•
홈피드
◦
데이터 로드
▪
react-query를 이용한 usePost Hooks를 사용해 페이지 변경 시에도 피드 데이터 유지
◦
피드 필터
▪
팔로우 중인 팀의 과거와 현재 경기 일정 게시물만 필터링하여 피드 로드
▪
SelectFilter “일정 피드만” 선택시 경기 일정 게시물만 필터링 하여 피드 로드
•
검색
•
게시물
◦
게시물 삭제, 신고 기능: usePost Hooks 내에서 react-query의 useMutation과 QueryClient invalidateQueries 메서드를 사용해 서버에서 변경된 데이터를 바로 화면에 적용
◦
댓글 추가, 삭제, 신고 기능: useComment Hooks 내에서 react-query 메서드 사용해 서버에서 변경된 데이터 바로 적용
◦
좋아요 기능: useLike Hooks를 사용해 좋아요 수와 상태 업데이트
•
경기 일정 게시물
◦
현재의 경기 일정의 경우 weatherAPI를 가져와 게시물 정보에 날씨 정보를 저장하고 날씨 포스트
◦
과거의 경기 일정의 경우 저장된 날씨 정보를 포스트
◦
좋아요 기능: 경기 일정의 경우 좋아요를 할 시 직관 일정 추가
•
일정추가 / 직관일정
◦
일정 추가/삭제 시 중복된 경기일정을 모두 좋아요 활성화/비활성화 시키고 해당 일정을 직관 일정으로 등록/삭제
•
모달 / 바텀시트
◦
스타일 충돌을 방지하기 위해 createPortal를 사용해 모달 / 바텀시트 렌더링
◦
전역에서 사용하기 위한 Recoil과 재사용성을 위한 useModal과 useBottomSheet Hooks 사용해 모달 / 바텀시트의 상태 업데이트
리팩토링
•
fetch에서 axios로 변경
◦
공통된 설정을 위해 axios instance 사용 (baseURL, Content-Type)
◦
로컬에서 token 정보 추가시 자동으로 Authorization 설정
•
useAuth로 모든 Recoil에서 관리하는 유저 정보 업데이트
•
서버 데이터 관리는 react-query로 변경
◦
서버 데이터와 로컬 데이터를 통합하여 일관성 유지
◦
중복된 요청을 줄여 사용자 경험 최적화
•
반복되는 작업은 custom Hooks을 사용해 관리
•
PrivateRouter를 설정해 로그인 여부에 따른 Router 설정
사용 라이브러리
axios | 네트워크 요청을 할때 전역적으로 에러 처리와 설정 처리를 하기 위해서 사용 |
classnames | CSS 클래스를 동적으로 조작하고 조합할 때 사용 |
react-intersection-observer | 효율적으로 뷰포트 내의 요소의 가시성 상태 변화을 감지해서 무한 스크롤링하기 위해서 사용 |
styled-components | 스타일을 보다 쉽게 관리하고 다시 재사용하기 위해서 사용 |
styled-reset | 일관된 브라우저 스타일을 제거해서 CSS 초기화를 쉽게 적용하기 위해 사용 |
react-query | 자동 캐싱과 데이터 리패칭을 통해 서버 사이드 데이터 관리를 하기 위해 사용 |
