전남대 FE_이도현 4주차 과제

.eslintrc.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 module.exports = {
   env: {
     browser: true,
@@ -13,7 +15,8 @@ module.exports = {
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
-    project: './tsconfig.json',
+    project: path.resolve(__dirname, './tsconfig.json'),
+    tsconfigRootDir: path.resolve(__dirname),
     ecmaFeatures: {
       jsx: true,
     },

README.md

@@ -1 +1,67 @@
 # 카카오 테크 캠퍼스 - 프론트엔드 카카오 선물하기 편
+
+## step1
+
+1. 폼 로직 구현(상품 상세 페이지, 결제 페이지)
+
+- [o] Chakra UI를 이용해 사용자 상세 페이지와 결제 페이지 UI 구현
+
+2. 상세 페이지
+
+- [o] oas.yaml 파일에 기술된 엔드포인트를 사용해 상품 정보와 옵션 데이터 불러움
+
+3. 리다이렉트
+
+- [o] 존재하지 않는 상품을 조회할 경우 메인페이지로 리다이렉트
+- [o] 비로그인 시 로그인 페이지로 리다이렉트
+
+## step2
+
+1. 상품 상세 페이지
+
+- [o] gitOrderLimit을 초과한경우 상품 선택 불가능하게 구현
+
+2. 결제 페이지
+
+- [o] 카드 메시지 - 입력 필수, 100자 이내
+- [o] 현금 영수증 - 번호 입력 확인, 숫자만 입력하도록 안내
+
+## step3
+
+- [o] 기존에 만든 form/input을 react-hook-form으로 변경
+- [o] validate를 react-hook-form 기능 활용
+
+## step4
+
+질문 1. 제어 컴포넌트와 비제어 컴포넌트의 차이가 무엇이고 제어 컴포넌트로 Form을 만들어야 하는 경우가 있다면 어떤 경우인지 예시와 함께 설명해주세요.
+
+- 제어 컴포넌트 : React의 state를 사용하여 입력 값의 상태를 직접 관리합니다.
+
+  - 사용자 입력에 따라 컴포넌트의 state가 변경되고, 이 state가 입력 필드의 값으로 반영됩니다.
+  - 입력 데이터의 유효성을 실시간으로 검증하거나, 입력 값에 따라 다른 컴포넌트의 동작을 제어할 때 유용합니다.
+
+- 비제어 컴포넌트 : DOM 자체가 입력 값의 상태를 관리합니다.
+
+  - React는 ref를 사용하여 필요할 때 입력 값을 직접 DOM에서 가져옵니다.
+
+- 질문 2. input type의 종류와 각각 어떤 특징을 가지고 있는지 설명해 주세요.
+
+  - text: 기본적인 텍스트 데이터 입력에 사용됩니다
+  - password: 비밀번호 입력에 사용되며 입력 값이 화면에 보이지 않고 별표(\*\*\*\*)로 표시됩니다.
+  - email: 이메일 주소 입력을 위해 사용되며, 유효한 이메일 형식인지 자동으로 검증합니다.
+  - number: 숫자 입력에 사용되며, 브라우저는 숫자를 입력하기 위한 인터페이스를 제공합니다.
+  - date: 날짜 선택기를 제공하여 사용자가 날짜를 선택할 수 있게 합니다.
+  - checkbox: 체크박스를 표시하며, 하나 이상의 옵션을 선택할 수 있습니다.
+  - radio: 라디오 버튼을 표시하며, 여러 옵션 중 하나만 선택할 수 있습니다.
+  - file: 파일 선택기를 제공하여 사용자가 파일을 업로드할 수 있게 합니다.
+  - submit: 폼을 제출하는 버튼을 생성합니다.
+
+- 질문 3. label tag는 어떤 역할을 하며 label로 input field를 감싸면 어떻게 동작하는지 설명해 주세요.
+  - 폼 UI에서 입력 필드의 설명을 제공합니다.
+  - 이는 스크린 리더가 입력 필드의 용도를 사용자에게 명확하게 알려줄 수 있도록 돕는 역할을 합니다.
+  - 작동방식
+    1. Label을 입력 필드로 감싸는 경우
+    - <label> 태그 내에 <input> 요소를 위치시킬 경우, 사용자가 라벨을 클릭하면 자동으로 연결된 <input> 요소에 포커스가 맞춰짐
+    2. for 속성을 사용하는 경우
+    - <label>의 for 속성은 해당 라벨이 설명하는 입력 필드의 ID를 명시함
+    - 이 경우, 라벨을 클리갛면 해당 ID를 가진 <input> 요소에 자동 포커스