개발 ‐ 리뷰 페이지 섹션 변경 - 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]을 []로 변경한 후 보내면 됩니다!