프롱이 파트에서 해야할 일들
프론트에서 해야하는 일을 자유롭게 추가 수정 해주세요
1주차
기획
- UI 기능 명세서 작성
- 소셜 로그인 및 회원가입 방식 탐색
개발
- 개발환경 설정(cra-typescript, material UI)
- 개발진행을 우선순위로 두고 리스크 있는것은 보류하는 방향으로 진행 예정
- 노드 버젼 맞추기, npm or yarn
- v14.17.6으로 통일
- CRA, material UI
- lint 룰 설정(다들 간단하게 하신 편인가요....?)
- prettier 와 병용되는 룰 탐색
typescript lint룰 찾기
- 상태관리 툴(context API? Redux? recoil?)
- context API
- AJAX 통신(fetch, axios)
- repo 세팅 (PR 템플릿, 이슈 템플릿, 코드리뷰 규칙, Jira 연결 등등)
- 프백 통합 Jira 연동 repo는 프/백 포지션별 생성 관리
- 디렉토리 구조
- git branch 전략
- 커밋 컨벤션
- 컴포넌트 및 기능 분류
- 필수 react Hook고려
- API 데이터 셋(필드, 타입 등등)
- 더미 데이터 작성
- 기타 라이브러리(formik, axios-hook 등등)
회원정보 >> 대시보드
결제수단 등록
로그인
회원가입
ID/PW 찾기
가입한 파티 상세정보 >> 서비스 계정 정보
다른 회원 상세정보 확인 >> 후기 등
2주차
3주차
API 붙이기
메인페이지 (코비)
서비스 파티 목록 (도르)
결제 (도르)
마이파티 상세
api로 파티정보 불러오기
카드 클릭시 공유계정 정보 가져오기
디자인변경에 맞춰 마크업 수정
충전 : 논의 필요
마이페이지 (낸시)
더보기 !
파티생성 (낸시, 코비)
전체 OTT 서비스 조회 API 연동 (코비)
전체 규칙 조회 API 연동 (낸시)
파티 가입 신청 API 연동 (코비, 낸시)
특정 상황에서 401 error 발생 백이랑 논의
쿼리스트링 ottId로 수정
로그인
마이페이지 (리뷰중, 리팩토링 필요)
userContext
header (젠)
header컴포넌트 authContext 적용해서 상태별 랜더링 구현
header 파티찾기 모달 ottList context 적용
마이페이지 (낸시)
결제페이지 (도르)
마이파티 상세페이지 (코비)
충전페이지 (선착순: 낸시 접수😎)
파티 시작일 당일은 선택안됨 다음날부터 선택가능
프라이빗, 퍼블릭 라우터 나눠서 적용하는것도 고려
4주차
백로그
TypeScript 적용
MUI 걷어내기?
알람
채팅
온도(사용자평가시스템)
결제 (프롱이 구합니다.)
리팩토링 및 우선순위 낮은 TODO
MyPartySummary 컴포넌트 avatar → ottLogo로 변경 적용
priceToString Util함수 필요한 곳에 적용하기
파티 진행여부 (대기, 진행, 종료) 분류함수 util로 분리
PartyMemberList 컴포넌트
partyMemberCapacity 에 따라 유동적으로 적용 되게메인 carousel 자동 재생
메인 carousel 숫자 flip count
메인 carousel 대기인원이 0명이면 어떤 내용 보여줄지?!
마이파티 상세에서 ott서비스 바로가기 링크와 계정 텍스트 카피 기능있으면 좋을거같다...
파태생성 각 step의 이벤트들을 받아서 handler함수가 쌓여있는데 뭔가 hook같은걸로 정리할수없을까?
자세하게 보기
useReducer와 contextAPI를 잘 쓰면 깔끔한 상태관리 가능할지도 참고 강의
rules.value.rules 가 반복되다보니 자쳇 헷갈릴수도 있을것 같아서 맨앞의 rules를 rulesApiState같이 api상태임을 명시하는 변수명을 사용해도 좋을 것 같아요!
searchParam을 사용하기 위해서라면 useSearchParam을 사용하면 좀더 편할것 같아요! 여기을 참고하시면 좋을 것 같습니다.
여기 의존성 배열에 handleSelectedOtt 와 location.search 도 넣어주라는 lint 에러가 발생하네요 근데 아마 handleSelectedOtt를 useCallback으로 감싸지 않은 채로 의존성배열에 넣어주면 무한루프가 발생할수도 있어서 전부 의존성 처리 해주지 않을 거라면 차라리 안넣는게 나을 수도 있을것 같습니다.
urrent도 좋지만 좀 더 명확한 변수명을 사용해도 좋을것 같아요! 에를 들면 currentParty같은 식으로요!
nextStep() activeNextStepButton 함수이름 더명확하게
const handleStartDate 네이밍 일관성 핸들러의 경우 변수 네이밍을
handle + 동작 + 대상 또는 handle + 대상 + 동작