Feat[#85]: 리뷰 작성 모달 컴포넌트 구현, TextField 글자 수 에러 처리 추가

[designsoo]

관련 문서

• issue: Feat: 리뷰/별점 등록 모달 UI 및 기능 구현 #85
• close Feat: 리뷰/별점 등록 모달 UI 및 기능 구현 #85

유형

• 기능 구현
• UI 구현
• 리팩토링
• 버그 해결
• 문서 업데이트
• 기타( )

작업 내용

• 체험 완료 후 리뷰를 작성할 수 있는 모달 컴포넌트를 구현했습니다.
• 글자 수가 최소 5자 미만일 경우 에러 처리가 되도록 구현했습니다.
• 별점을 클릭하지 않았을 경우 에러 처리가 되도록 구현했습니다.
• zod를 적용하여 입력값을 유효성 검사하고 있습니다.
• 별점과 텍스트 영역에 대한 정규식 패턴 및 에러 메시지를 상수로 지정하였습니다.
• TextField에서 줄바꿈을 제외한 문자열의 길이를 설정했습니다.
• TextField에서 더 이상 필요하지 않은 onChange 이벤트 및 useState를 삭제했습니다.

설명

📌 기능

• 리뷰 별점을 클릭할 때마다 각 별에 대해 1점씩 추가됩니다.
• 리뷰 별점을 선택하지 않으면 제출되지 않습니다.
• 텍스트 영역에 5자 미만의 텍스트가 있는 경우 제출되지 않습니다.

📌 UI

• 별점 및 리뷰 에러 처리 UI 구현
• 반응형 구현

📌 Props

• reservationId: 예약 카드 id를 전달합니다.
• title: 예약된 모집의 제목입니다.
• date: 예약된 날짜와 시간입니다.
• handleModalClose: 리뷰 모달 창을 닫는 데 사용되는 함수입니다.

type ReviewModalContentProps = {
  reservationId: number;
  title: string;
  date: string;
  handleModalClose: (arg: string) => void;
};

📌 사용하기

• 상위 컴포넌트에서 MyReservationDate를 조립한 후 ReviewModalContent 컴포넌트에 전달해야 합니다.
  다음은 상위 컴포넌트에서 조립하여 전달하는 예시입니다.

const MyReservationDate = `${date} | ${startTime}-${endTime}`;

  import { CommonModal } from '@/components/commons/modals';
  import ReviewModalContent from '@/components/mypage/MyReservations/ReviewModalContent';

  <CommonModal
        openModal={multiState.submitReviewModal}
        onClose={() => handleCommonModal('submitReviewModal')}
        title='리뷰 등록'
        renderContent={
          <ReviewModalContent
            reservationId={id}
            title={title}
            date={MyReservationDate}
            handleModalClose={toggleClick}
          />
        }
   />

스크린샷

🎥 모션 영상

default.mov

📸 디바이스별 스크린샷

리뷰 요구사항

• 리액트 쿼리를 바로 사용할 수 있도록 적용하였습니다. 타입 에러가 발생하는 곳이 있어서 주석 처리한 상태로 올렸습니다. 지워야 할까요?
• data, id 사용하는 부분이 없어서(API 연결이 안 되어 있음) 콘솔에 출력하였습니다.

[CheeseB]

LGTM

[grapefruit13]

LGTM