경북대 FE_이은경 4주차 step3~4

README.md

@@ -1 +1,58 @@
 # 카카오 테크 캠퍼스 - 프론트엔드 카카오 선물하기 편
+
+## Step1
+
+- 결과 링크를 참고하여 상세 페이지 및 상품 결제 페이지의 UI를 구현
+  - 이 과정에서 UI를 chakra-ui 사용해서 구현 (단, 직접 구현해도 무방하나 다른 UI 라이브러리 사용은 금지)
+  - 이번 과제는 Form을 다루는 것이 중점이기 때문에 UI 구현에 어려움을 겪는다면 임의로 변경가능
+- 상세 페이지에서 청부된 oas.yaml 파일의 /api/v1/products/{productId}/detail, /api/v1/products/{productId}/options 를 참고해서 API를 구현
+- 없는 상품의 경우 메인 페이지로 연결되도록 한다
+- 나에게 선물하기 버튼 클릭 시 로그인이 되어있지 않다면 로그인 페이지로 이동
+- React Hook Form 등의 라이브러리를 사용하지 않으며 React의 form, ref, state만 사용하여 구현
+
+---
+
+## Step2
+
+- [x] 상품 상세 페이지에서 상품의 개수를 option API의 giftOrderLimit을 초과한 경우 선택이 불가하도록
+- [x] 결제 페이지의 Form의 validation 하기
+  - [x] 카드 메시지를 입력하지 않으면 메시지를 입력하라고 안내
+  - [x] 카드 메시지가 100글자가 넘어가면 100자 이내로 입력하라고 안내
+  - [x] 현금 영수증 checkboc 클릭 시 현금영수증 번호가 입력되었는지 확인
+  - [x] 현금 영수증 입력은 숫자만 입력하도록 안내
+
+---
+
+## Step3
+
+- 기존에 만든 form/ input 을 react-hook-form으로 변경
+- validate 또한 react-hook-form 기능을 적극적으로 활용 (이 과정에서 zod을 사용해도 됨!)
+
+---
+
+## Step4
+
+### 4주차 질문
+
+- 1. 제어 컴포넌트와 비제어 컴포넌트의 차이가 무엇이고 제어 컴포넌트로 Form을 만들어야 하는 경우가 있다면 어떤 경우인지 예시와 함께 설명해주세요.
+- 제어 컴포넌트 (Controlled Component)
+  제어 컴포넌트는 React 컴포넌트의 상태(state)가 폼 요소의 값을 관리합니다. 폼 요소의 값이 컴포넌트의 상태에 의해 제어됩니다.
+
+예시로는
+폼 데이터를 실시간으로 검증하거나 포맷팅해야 할 때
+폼 요소의 값에 따라 동적으로 UI를 변경해야 할 때
+폼 제출 전에 데이터를 가공하거나 확인해야 할 때
+
+- 비제어 컴포넌트 (Uncontrolled Component)
+  이 경우는 폼 요소가 자체적으로 상태를 관리합니다. React의 ref를 사용하여 DOM 요소에 직접 접근하여 값을 가져옵니다.
+
+- 2. input type의 종류와 각각 어떤 특징을 가지고 있는지 설명해 주세요.
+     text : 텍스트 입력
+     password: 입력된 텍스트가 보이지 않도록 마스킹
+     tel: 전화번호 입력. 전화번호 형식의 검증은 없지만, 모바일 기기에서는 전화번호 키패드가 표시됨.
+     hidden: 사용자에게 보이지 않는 숨겨진 입력. 폼 데이터에 포함됨
+
+- 3. label tag는 어떤 역할을 하며 label로 input field를 감싸면 어떻게 동작하는지 설명해 주세요.
+     label 태그는 HTML 폼에서 input, textarea 등의 폼 요소에 대한 설명을 제공하는 역할을 합니다. 사용자가 입력 필드를 쉽게 이해하고 접근할 수 있도록 돕습니다.
+     for 속성 사용: label 태그의 for 속성이 입력 필드의 id 속성과 일치하면, label을 클릭할 때 해당 입력 필드가 포커스를 받습니다.
+     입력 필드를 감쌈: label 태그가 입력 필드를 감싸고 있으면, label의 어느 부분을 클릭해도 내부의 입력 필드가 포커스를 받습니다.