Skip to content

kakao-tech-campus-2nd-step2/react-product-order

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Repository files navigation

React Product Order

개요

본 저장소는 FE 카카오 선물하기 4주차 과제 (2024-07-15 ~ 2024-07-19)를 위한 상품 주문 구현을 담고 있습니다. 상세한 학습 내용은 Notion 노트에서 확인할 수 있습니다.


상품 주문 프로세스

0단계 - 기본 코드 준비

  • 제공된 코드를 기반으로 시작합니다.

1단계 - 상품 페이지 & 주문 폼 구현

  • 참고 링크를 활용하여 상품 상세 페이지와 주문 폼 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)

2단계 - 유효성 검사 구현

  • 상품 옵션 선택 시 giftOrderLimit을 초과할 수 없도록 제한합니다.
  • 주문 폼의 유효성을 검사합니다. (4주차 미션 결과물 참고)
    • 카드 메시지 미입력 시 안내 메시지 표시
    • 카드 메시지 100자 초과 시 안내 메시지 표시
    • 현금영수증 체크 시 현금영수증 번호 입력 여부 확인
    • 현금영수증 번호는 숫자만 입력 가능하도록 제한

3단계 - React Hook Form 리팩터링

  • 기존 폼을 React Hook Form으로 변경하고 유효성 검사 로직을 개선합니다. (zod 사용 가능)

4단계 - 질문 답변

  • 질문 1: 제어 컴포넌트 vs. 비제어 컴포넌트의 차이점, 제어 컴포넌트 사용 시나리오

  • 질문 2: 다양한 input type의 종류와 특징

  • 질문 3: label 태그의 역할, input field를 label로 감쌀 때의 동작 방식

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published