충남대 FE_강병현 4주차 과제 Step4

[kang-kibong]

안녕하세요. 카테캠 프론트엔드 파트 수강 중인 충남대학교 강병현입니다. 😊

죄송하게도, 금일 step3, 4 구현과 이전 step에서 코드리뷰 주신 내용을 기반으로 늦게나마 리팩토링을 진행하였습니다.

4주차 과제는 다음과 같이 진행해보았습니다.

👨🏻‍💻 해결 과정

1️⃣ 1단계 - 상품 상세 페이지 & 상품 결제하기 Form 구현하기

• QuantitySelector 컴포넌트: chakra-ui의 Number Input 컴포넌트를 활용하여, 상품 수량을 선택할 수 있도록 구현했습니다.
• useProductData hooks: react-query를 사용해 상품 상세 페이지에서 detail과 option API를 호출하도록 구현했으며, 이를 통해 Product 페이지 내부에서 데이터를 관리할 수 있도록 했습니다.
• Controlled 컴포넌트: React state를 활용하여 Form을 구현했습니다.

2️⃣ 2단계 - Validation 구현하기

• validatePayment 함수: Payment 컴포넌트에서 사용자가 입력한 state를 인자로 받아 유효성 검사를 진행하도록 구현했습니다.

3️⃣ 3단계 - React Hook Form를 사용하여 기존의 Form 리팩터링

• Uncontrolled 컴포넌트: react-hook-form의 useForm을 활용하여 기존의 Controlled 컴포넌트 대신 Uncontrolled 컴포넌트를 사용해 상품 상세 페이지에서 상품 수량 입력을 구현했습니다.
• FormProvider: Order 페이지에서의 form 상태 관리를 react-hook-form의 FormProvider를 통해 전역적으로 관리하여 props drilling을 최소화하도록 구현했습니다.

🛠️ 코드 리뷰 반영

📄 요구 사항

• ThemeItem 스토리 수정 및 전체 스토리 수정
• common/Layout/Container 컴포넌트 csstype 패키지 적용
• Code Spell Checker extension을 통한 오타 수정
• 현금영수증 체크시 select, input 태그 toggle
• ReceiptForm 컴포넌트에서 form submit event로 처리
• ThemeCategory 컴포넌트에서 LocationState 타입 단언

[kang-kibong]

🚀 Storybook 배포링크

[taehwanno]

step4 고생하셨습니다.

[taehwanno]

#74 병합 후 충돌 발생하고 있어서 해결되면 병합하도록 하겠습니다.