개발 ‐ 리뷰 페이지 섹션 변경 - ConSeat/frontend GitHub Wiki
리뷰 페이지에 섹션이 추가되거나 변경될 경우 아래를 모두 변경해주세요!
1. review step 상수 변경
아래 STEP 순서로 섹션이 렌더링됩니다.
const REVIEW_STEPS = {
CONCERT_SELECT: 0,
SEAT_INFO_SELECT: 1,
FEATURES_INFO_SELECT: 2,
IMAGE_UPLOAD: 3,
DISTANCE_INFO_SELECT: 4,
OBSTRUCTIONS_SELECT: 5,
REVIEW_INPUT: 6,
SUBMIT: 7,
} as const;
2. ReviewForm 순서 변경
- STEP에 따라 렌더링되므로 그대로 둬도 UI에는 변경이 없지만 DX를 위해 STEP 순서대로 변경해주세요!
3. ReviewContainer 순서 변경
- state과 reducer가 정의된 컴포넌트입니다. 이곳도 DX를 위해 STEP 순서대로 변경해주세요.
- 추가된 데이터가 있다면
createInitReviewData
와ReviewData
타입도 변경해주세요.
4. getInvalidFields 변경
getInvalidFields
함수는 제일 처음 섹션부터 유효성 검사를 해서invalids
배열에 유효하지 않은 섹션을 넣는 함수입니다.- submit 버튼을 눌렀을 때 유효하지 않은 섹션이 존재한다면 이 버튼과 가장 멀리 떨어진, 즉 유효하지 않은 섹션들 중 가장 첫 번째 섹션으로 자동 스크롤이 되게 구현이 되어 있습니다. 따라서 STEP 순서에 맞게 이 함수를 변경해주세요!
5. useAutoScroll 훅
- 이 훅은 다음 섹션이 열릴 때 자동 스크롤을 해주는 훅입니다.
- 새로운 섹션이 추가되거나 순서가 바뀌면 자동 스크롤 기획도 바뀌므로 꼭 확인하고 기획에 맞게 변경해주세요!
참고
"없음" 데이터는 프론트에서 { id: -1, name: '없음' }
이렇게 임의로 넣은 값이고 서버에서 받은 데이터에는 "없음"이 없습니다.
사용자가 "없음"을 선택하였다면 서버에 데이터를 보내기 전에 [-1]을 []로 변경한 후 보내면 됩니다!