React Product Order

개요

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

---

상품 주문 프로세스

0단계 - 기본 코드 준비

---

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

• UI 프레임워크: chakra-ui 또는 직접 구현한 UI 컴포넌트만 사용 (외부 라이브러리 사용 금지)

• 폼 상태 관리: React 기본 기능 (form, ref, state)으로 폼 상태 관리 (외부 라이브러리 사용 금지)

• 상품 상세 페이지 (@/pages/ProductDetail)

  • /components/features/Theme/ThemeGoodsSection 또는 /components/features/Home/GoodsRankingSection/List에서 상품 ID (productId)를 전달받아 페이지 이동
  • 유효하지 않은 productId일 경우 메인 페이지 (/)로 리다이렉트
  • 상품 정보 표시
    • /v1/products/{productId}/detail API 호출하여 데이터 불러오기
      • 상품 ID (id)
      • 상품명 (name)
      • 이미지 URL (imageURL)
      • 브랜드 정보 (brand)
      • 기본 가격 (basicPrice)
  • 상품 옵션 선택
    • /v1/products/{productId}/options API 호출하여 데이터 불러오기
      • 옵션 목록 (optionId, optionName, optionPrice, subOptions)
  • "나에게 선물하기" 버튼
    • 로그인 상태: 주문 결제 페이지 (@/pages/Payment)로 이동하며, productId 전달
    • 비로그인 상태: 로그인 페이지 (@/pages/Login)로 이동

• 상품 결제 페이지(@/pages/Payment)

  • "선물과 함께 보낼 메세지" 입력란
  • /v1/products/{productId}/detail API 호출하여 주문 상품 정보 표시 (이미지, 브랜드, 이름)
  • 결제 정보 입력 (현금영수증, 소득공제 등)
  • 최종 결제 금액 표시
  • "결제하기" 버튼 (클릭 시 "주문이 완료되었습니다" 알림)

---

2단계 - 유효성 검사 구현

• 상품 상세 페이지 (@/pages/ProductDetail)

  • 상품 옵션 선택
    • 상품 옵션을 선택할 때, giftOrderLimit을 초과할 수 없도록 제한

• 상품 결제 페이지 (@/pages/Payment)

  • 카드 메시지
    • 카드 메시지를 입력하지 않은 경우, 안내 메시지를 표시
    • 카드 메시지가 100자를 초과할 경우, 안내 메시지를 표시
  • 현금영수증
    • 현금영수증 체크 시, 현금영수증 번호 입력 여부를 확인
    • 현금영수증 번호는 숫자만 입력 가능하도록 제한

---

3단계 - React Hook Form 리팩터링

• 기존 폼을 React Hook Form으로 변경
• [xs] 폼 필드와 유효성 검사를 관리

---

4단계 - 질문 답변

• 질문 1. 제어 컴포넌트와 비제어 컴포넌트의 차이가 무엇이고 제어 컴포넌트로 Form을 만들어야 하는 경우가 있다면 어떤 경우인지 예시와 함께 설명해주세요.

  • 제어 컴포넌트: React에서 컴포넌트의 상태로 입력 값을 관리하는 방식입니다. 입력 필드의 값은 React 상태에 의해 제어되며, onChange 이벤트 핸들러를 사용하여 상태를 업데이트합니다.

  • 비제어 컴포넌트: 비제어 컴포넌트는 DOM 요소 자체에서 입력 값을 관리하는 방식입니다. ref를 사용하여 입력 필드에 접근하고 값을 읽어옵니다.

  • 제어 컴포넌트는 다음과 같은 경우에 사용됩니다.:

    • 실시간 검증: 사용자가 입력할 때마다 유효성을 검사하고, 에러 메시지를 즉시 보여주어야 하는 경우
    • 동적 폼: 사용자가 입력하는 데이터에 따라 다른 입력 필드를 동적으로 추가하거나 변경해야 하는 경우
    • 입력 값 동기화: 입력 값이 다른 상태나 UI와 실시간으로 동기화되어야 하는 경우

• 질문 2. input type의 종류와 각각 어떤 특징을 가지고 있는지 설명해 주세요.

  1. text: 일반적인 텍스트 입력을 받습니다.
  2. password: 입력된 텍스트를 가려서 표시합니다. 주로 비밀번호 입력에 사용됩니다.
  3. email: 이메일 주소 입력을 받습니다. 브라우저는 입력된 값이 유효한 이메일 형식인지 확인합니다.
  4. number: 숫자 입력을 받습니다. 숫자 키패드를 제공하며, 입력 값이 숫자인지 확인합니다.
  5. tel: 전화번호 입력을 받습니다. 전화번호 형식을 확인하지는 않지만, 모바일 장치에서 전화번호 키패드를 제공합니다.
  6. url: URL 입력을 받습니다. 브라우저는 입력된 값이 유효한 URL 형식인지 확인합니다.
  7. date: 날짜 입력을 받습니다. 브라우저에서 날짜 선택 UI를 제공합니다.
  8. time: 시간 입력을 받습니다. 브라우저에서 시간 선택 UI를 제공합니다.
  9. datetime-local: 날짜와 시간(로컬 시간) 입력을 받습니다.
  10. checkbox: 체크박스 입력을 받습니다. 여러 값을 선택할 수 있습니다.
  11. radio: 라디오 버튼 입력을 받습니다. 그룹 내에서 하나의 값만 선택할 수 있습니다.
  12. file: 파일 업로드 입력을 받습니다. 파일 선택 대화 상자를 제공합니다.
  13. range: 범위 슬라이더 입력을 받습니다. 최소값과 최대값 사이의 숫자를 선택할 수 있습니다.
  14. color: 색상 입력을 받습니다. 색상 선택 UI를 제공합니다.
  15. hidden: 화면에 보이지 않는 입력을 받습니다. 주로 폼 데이터에 추가적인 정보를 포함시킬 때 사용됩니다.

• 질문 3. label tag는 어떤 역할을 하며 label로 input field를 감싸면 어떻게 동작하는지 설명해 주세요.

  • label 태그의 역할: label 태그는 폼 요소의 설명을 제공하는데 사용됩니다. label 태그는 접근성을 높여주며, 사용자가 폼 요소와 상호작용하기 쉽게 만들어줍니다. label 태그를 사용하면 화면 리더기와 같은 접근성 도구가 폼 요소의 목적을 더 잘 이해할 수 있습니다.
  • label로 input 필드를 감쌀 때의 동작: label 태그를 input 필드 주위에 감싸면, 사용자가 label을 클릭할 때 자동으로 해당 input 필드가 포커스됩니다. 이는 사용자가 작은 클릭 영역을 정확히 클릭하지 않아도 쉽게 입력 필드를 선택할 수 있게 합니다.