본 저장소는 FE 카카오 선물하기 4주차 과제 (2024-07-15 ~ 2024-07-19)를 위한 상품 주문 구현을 담고 있습니다. 상세한 학습 내용은 Notion 노트에서 확인할 수 있습니다.
- 제공된 코드를 기반으로 시작합니다.
- 참고 링크를 활용하여 상품 상세 페이지와 주문 폼 UI를 chakra-ui로 구현합니다. (직접 구현 또는 다른 UI 라이브러리 사용 가능)
oas.yaml
파일의/api/v1/products/{productId}/detail
,/api/v1/products/{productId}/options
API를 참고하여 데이터를 불러옵니다.- 존재하지 않는 상품은 메인 페이지로 리다이렉트합니다.
- 비로그인 상태에서 "나에게 선물하기" 클릭 시 로그인 페이지로 이동합니다.
- React의
form
,ref
,state
만 사용하여 폼을 구현합니다. (React Hook Form 등의 라이브러리 사용 X)
- 상품 옵션 선택 시
giftOrderLimit
을 초과할 수 없도록 제한합니다. - 주문 폼의 유효성을 검사합니다. (4주차 미션 결과물 참고)
- 카드 메시지 미입력 시 안내 메시지 표시
- 카드 메시지 100자 초과 시 안내 메시지 표시
- 현금영수증 체크 시 현금영수증 번호 입력 여부 확인
- 현금영수증 번호는 숫자만 입력 가능하도록 제한
- 기존 폼을 React Hook Form으로 변경하고 유효성 검사 로직을 개선합니다. (zod 사용 가능)
-
질문 1: 제어 컴포넌트 vs. 비제어 컴포넌트의 차이점, 제어 컴포넌트 사용 시나리오
-
질문 2: 다양한 input type의 종류와 특징
-
질문 3: label 태그의 역할, input field를 label로 감쌀 때의 동작 방식