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

.eslintrc

@@ -0,0 +1,64 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": ["react-app", "eslint:recommended", "plugin:import/typescript", "airbnb", "prettier"],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "rules": {
+    "no-var": "error",
+    "no-multiple-empty-lines": "error",
+    "no-console": ["error", { "allow": ["warn", "error", "info"] }],
+    "eqeqeq": "error",
+    "dot-notation": "error",
+    "import/extensions": ["error", "ignorePackages", {
+      "js": "never",
+      "jsx": "never",
+      "ts": "never",
+      "tsx": "never"
+    }],
+    "react/jsx-props-no-spreading": "off",
+    "import/prefer-default-export": "off",
+    "react/jsx-filename-extension": ["error", { "extensions": [".tsx"] }],
+    "import/no-extraneous-dependencies": "off",
+    "import/no-unresolved": "off",
+    "react/require-default-props": "off",
+    "no-use-before-define": "off",
+    "@typescript-eslint/no-use-before-define": ["error", { "variables": false , "functions": false,"classes": false}],
+    "react/prop-types": "off",
+    "import/no-cycle": "off",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "error",
+    "jsx-a11y/label-has-associated-control": [ 2, {
+    "some": [ "nesting", "id" ]
+    }],
+    "react-hooks/exhaustive-deps": "off",
+    "no-alert": "off"
+  },
+  "settings": {
+    "import/resolver": {
+      "alias": {
+        "map": [
+          ["@", "./src"],
+          ["@components", "./src/components"],
+          ["@assets", "./src/assets"],
+          ["@hooks", "./src/hooks"],
+          ["@pages", "./src/pages"],
+          ["@routes", "./src/routes"],
+          ["@utils", "./src/utils"],
+          ["@context", "./src/context"],
+          ["@internalTypes", "./src/types"],
+          ["@apis", "./src/apis"]
+        ],
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  }
+}

.github/workflows/chromatic.yml

@@ -0,0 +1,28 @@
+# Workflow name
+name: 'Chromatic Deployment'
+
+# Event for the workflow
+on: push
+
+# List of jobs
+jobs:
+  test:
+    # Operating System
+    runs-on: ubuntu-latest
+    # Job steps
+    steps:
+      - uses: actions/checkout@v1
+      - run: yarn
+        #👇 Adds Chromatic as a step in the workflow
+      - uses: chromaui/action@v1
+        # Options required for Chromatic's GitHub Action
+        with:
+          #👇 Chromatic projectToken, see https://storybook.js.org/tutorials/intro-to-storybook/react/ko/deploy/ to obtain it
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+
+      - name: Create comment PR
+        uses: thollander/actions-comment-pull-request@v1
+        env:
+          TOKEN: ${{ secrets.TOKEN }}
+        with:
+          message: "🚀storybook: ${{ steps.chromatic.outputs.storybookUrl }}"

.gitignore

@@ -13,6 +13,7 @@
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local
@@ -22,4 +23,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
+.eslintcache
 .yaml
+
+*storybook.log

.husky/pre-commit

@@ -0,0 +1 @@
+npx lint-staged

.prettierrc

@@ -1,8 +1,9 @@
 {
   "singleQuote": true,
+  "parser": "typescript",
   "semi": true,
+  "useTabs": false,
   "tabWidth": 2,
-  "trailingComma": "all",
-  "printWidth": 100,
+  "printWidth": 120,
   "arrowParens": "always"
 }

.storybook/main.ts

@@ -1,36 +1,31 @@
 import type { StorybookConfig } from '@storybook/react-webpack5';
 import TsconfigPathsPlugin from 'tsconfig-paths-webpack-plugin';
-import path from 'path';
 
 const config: StorybookConfig = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
     '@storybook/preset-create-react-app',
     '@storybook/addon-onboarding',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@chromatic-com/storybook',
     '@storybook/addon-interactions',
   ],
-  webpackFinal: async (config) => {
-    config.resolve?.plugins?.push(
-      new TsconfigPathsPlugin({
-        configFile: path.resolve(__dirname, '../tsconfig.json'),
-      }),
-    );
-
-    return config;
-  },
   framework: {
     name: '@storybook/react-webpack5',
-    options: {
-      builder: {
-        useSWC: true,
-      },
-    },
-  },
-  docs: {
-    autodocs: 'tag',
+    options: {},
   },
   staticDirs: ['../public'],
+  webpackFinal: async (config) => {
+    if (config.resolve) {
+      config.resolve.plugins = [
+        ...(config.resolve.plugins || []),
+        new TsconfigPathsPlugin({
+          extensions: config.resolve.extensions,
+        }),
+      ];
+    }
+    return config;
+  },
 };
 export default config;

.storybook/preview.ts

@@ -1,9 +1,7 @@
 import type { Preview } from '@storybook/react';
-import '@/styles';
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,

README.md

@@ -1 +1,60 @@
-# 카카오 테크 캠퍼스 - 프론트엔드 카카오 선물하기 편
+# 4️⃣ 4주차 상품 주문하기
+## 📡 1단계 - 상품 상세 페이지 & 상품 결제하기 Form 구현하기
+### ✅ 기능 목록
+- [x] chakra-ui 설치
+- [x] 상품 상세페이지 UI 구현
+- [x] 상품 결제페이지 UI 구현
+- [x] `/api/v1/products/{productId}/detail`에 대한 API 구현
+- [x] `/api/v1/products/{productId}/options`에 대한 API 구현
+- [x] 없는 상품의 경우 메인 페이지로 리다이렉트
+- [x] 나에게 선물하기 버튼 클릭 시 로그인이 되어있지 않다면 로그인 페이지로 리다이렉트
+
+## 👓 2단계 - validation 구현하기
+### ✅ 기능 목록
+- [x] 상품 상세 페이지에서 상품의 개수를 option API의 giftOrderLimit을 초과할 경우 선택 불가능하게 구현
+- [x] 결제 페이지 Form validation 구현
+  - [x] 카드 메시지를 입력하지 않으면 메시지 입력하도록 안내
+  - [x] 카드 메시지가 100글자 넘을 경우 100자 이내로 입력하도록 안내
+  - [x] 현금 영수증 checkbox 클릭시 현금영수증 번호가 입력되었는지 확인
+  - [x] 현금 영수증 입력은 숫자만 입력하도록 안내
+
+## ⚒️ 3단계 - React Hook Form를 사용하여 기존의 form을 리팩터링 해요.
+- [x] 기존에 만든 form / input을 react-hook-form으로 변경
+- [x] validate 또한 react-hook-form 기능을 활용 (이 과정에서 zod를 사용해도 좋음.)
+
+
+## 🤔 4단계 - 질문의 답변을 README에 작성
+### 질문 1. 제어 컴포넌트와 비제어 컴포넌트의 차이가 무엇이고 제어 컴포넌트로 
+제어 컴포넌트는 React의 state를 통해 입력값을 관리하고 제어하는 방식으로, 입력값의 실시간 업데이트와 유효성 검사가 필요할 때 사용됩니다.\n
+제어 컴포넌트 사용의 예시로서는 실시간 폼 유효성 검사에 사용하기 적합합니다.\n
+비제어 컴포넌트는 DOM 요소 자체에 값을 저장하며, 기본 HTML 폼 요소와 같이 동작합니다. 사용의 예시로서는 주로 파일 업로드 입력하기에 적합합니다.
+
+### 질문 2. input type의 종류와 각각 어떤 특징을 가지고 있는지 설명해 주세요.
+text 타입은 일반 문자열 입력을 위해 사용되며, 이름이나 주소 입력과 같은 경우에 적합합니다.
+password 타입은 입력한 텍스트를 숨김 처리하여 비밀번호와 같은 민감한 정보를 보호합니다.
+email 타입은 이메일 형식의 입력값을 검증하여, 사용자가 올바른 이메일 주소를 입력했는지 확인합니다.
+number 타입은 숫자만 입력할 수 있도록 하며, min, max, step 속성을 통해 입력값의 범위와 증감 단위를 설정할 수 있습니다.
+date 타입은 달력 UI를 제공하여 사용자가 쉽게 날짜를 선택할 수 있게 합니다.
+checkbox 타입은 다중 선택이 가능하며, 여러 항목을 선택할 수 있는 경우에 사용됩니다.
+반면 radio 타입은 단일 선택만 가능하며, 같은 그룹 내에서 하나의 옵션만 선택할 수 있도록 합니다.
+file 타입은 사용자가 로컬 파일 시스템에서 파일을 선택할 수 있게 하며, accept 속성을 통해 허용하는 파일 타입을 지정할 수 있습니다.
+submit 타입은 폼 제출 버튼으로, 클릭 시 폼 데이터를 서버에 전송합니다.
+reset 타입은 폼 초기화 버튼으로, 클릭 시 폼의 모든 입력값을 초기 상태로 되돌립니다.
+tel 타입은 전화번호 입력에 사용되며, 일부 모바일 키보드는 전화번호 입력에 최적화된 키보드를 표시합니다.
+url 타입은 URL 형식의 입력값을 검증하며,
+search 타입은 검색 입력 필드로, 검색어 입력에 최적화된 스타일이 적용될 수 있습니다.
+color 타입은 색상 선택 입력으로, 색상 선택 UI를 제공하여 사용자가 색상을 선택할 수 있습니다.
+range 타입은 범위 슬라이더 입력으로, 숫자 범위를 슬라이더로 조정할 수 있습니다.
+
+### 질문 3. label tag는 어떤 역할을 하며 label로 input field를 감싸면 어떻게 동작하는지 설명해 주세요.
+label 태그는 폼 요소와 연결되어 사용자 접근성이 향상됩니다.
+label로 input 필드를 감싸거나 for 속성을 사용해 연결하면, label을 클릭했을 때 해당 input이 포커스되도록 동작합니다.
+
+## 🛠️ 코드 리뷰 반영
+### 📄 요구 사항
+- [x] ThemeItem 스토리 수정 및 전체 스토리 수정 
+- [x] common/Layout/Container 컴포넌트 csstype 패키지 적용
+- [x] `Code Spell Checker` extension을 통한 오타 수정
+- [x] 현금영수증 체크시 select, input 태그 toggle
+- [x] ReceiptForm 컴포넌트에서 form submit event로 처리
+- [x] ThemeCategory 컴포넌트에서 LocationState 타입 단언

craco.config.js

@@ -3,7 +3,16 @@ const path = require('path');
 module.exports = {
   webpack: {
     alias: {
-      '@': path.resolve(__dirname, 'src'),
+      '@': path.resolve(__dirname, 'src/'),
+      '@components': path.resolve(__dirname, 'src/components'),
+      '@assets': path.resolve(__dirname, 'src/assets'),
+      '@hooks': path.resolve(__dirname, 'src/hooks'),
+      '@pages': path.resolve(__dirname, 'src/pages'),
+      '@routes': path.resolve(__dirname, 'src/routes'),
+      '@utils': path.resolve(__dirname, 'src/utils'),
+      '@context': path.resolve(__dirname, 'src/context'),
+      '@internalTypes': path.resolve(__dirname, 'src/types'),
+      '@apis': path.resolve(__dirname, 'src/apis'),
     },
   },
 };