충남대 FE_강병현 5주차 과제 Step3

.eslintrc

@@ -0,0 +1,70 @@
+{
+  "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": "off",
+    "jsx-a11y/label-has-associated-control": [ 2, {
+    "some": [ "nesting", "id" ]
+    }],
+    "react-hooks/exhaustive-deps": "off",
+    "no-alert": "off",
+    "react/jsx-no-useless-fragment": "off",
+    "react/no-unstable-nested-components": "off",
+    "react/button-has-type": "off",
+    "react-hooks/rules-of-hooks": "off",
+    "no-const-assign": "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"],
+          ["@mocks", "./src/mocks"]
+        ],
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  }
+}

.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,36 @@
-# 카카오 테크 캠퍼스 - 프론트엔드 카카오 선물하기 편
+# 5️⃣ 5주차 로그인 및 관심목록 (with. 테스트코드)
+## 🎯 1단계 - Form 부분 테스트 코드 작성하기
+### ✅ 기능 목록
+- [x] MSW를 사용하여 Mock API가 동작하도록 구현
+  - [x] 상품 상세 API 동작
+  - [x] 상품 옵션 API 동작
+- [x] 단위 테스트 진행
+- [x] 상품 상세페이지 통합 테스트 구현
+- [x] 결제 페이지의 Form관련한 통합 테스트 코드 구현 
+  - [x] 현금영수증 Checkbox가 false인 경우 현금영수증 종류, 현금영수증 번호 field가 비활성화 되어있는지 확인하는 테스트 코드 구현 (만약 true인 경우 현금영수증 종류, 번호 field에 값이 입력 되어야 함)
+  - [x] form의 validation 로직이 정상 동작하는지 확인하는 테스트 코드 구현
+
+## 🔐 2단계 - 로그인, 관심 상품 등록 / 삭제, 관심 목록 구현
+### ✅ 기능 목록
+- [x] 회원가입 구현
+  - [x] 회원가입 기능이 동작되게 구현
+  - [x] 회원가입을 하면 로그인 되도록 구현
+- [x] 상품 상세 페이지 관심 등록 버튼 구현
+  - [x] 상품 상세 페이지에서 관심 버튼을 클릭 했을 때 관심 추가 동작
+  - [x] 관심 등록 성공 시 Alert로 "관심 등록 완료" 메시지를 노출
+  - [] 나의 계정 페이지에서 관심 목록 리스트를 만들어요.
+- [x] 관심 목록 리스트
+  - [x] 관심 목록 API는 카카오테크 선물하기 API 노션의 response 데이터를 사용하여 렌더링
+  - [x] 관심 삭제 기능 구현
+
+## 🤔 3단계 - 질문의 답변을 README에 작성
+### 질문 1. Test code를 작성해보면서 좋았던 점과 아쉬웠던 점에 대해 말해주세요.
+테스트 코드를 작성하면서 좋았던 점은 코드의 안정성을 높일 수 있었고, 버그를 사전에 발견하여 수정할 수 있었다는 것입니다. 또한 리팩토링 시 코드의 의도와 동작을 유지할 수 있어 자신감 또한 생겼습니다. 아쉬웠던 점은 테스트 코드 작성이 추가적인 시간과 노력이 필요하며, 모든 경로를 커버하는 테스트를 작성하는 것이 쉽지 않았다는 것입니다.
+
+### 질문 2. 스스로 생각했을 때 좋은 컴포넌트란 무엇인지 본인만의 기준을 세우고 설명해 주세요.
+재사용성이 높고, 단일 책임 원칙을 따르며, 명확한 인터페이스를 가지고 있어야 한다고 느꼈습니다.
+독립적으로 테스트가 가능하게 구현해야 하기 떄문에 초반에 이를 고려하여 구현하면 코드의 가독성을 높이고, 버그 발생 가능성을 줄이며, 개발 생산성을 향상시킬 수 있을 것 같습니다.
+
+
+### 질문 3. 스스로 생각했을 때 공통 컴포넌트를 만들 때 가장 중요한 요소 2개를 선택하고 이유와 함께 설명해주세요.
+가장 중요한 요소는 재사용성과 확장성입니다. 재사용성 높은 컴포넌트는 다양한 상황에서 일관된 방식으로 사용될 수 있어 개발 효율성을 높입니다. 확장성은 컴포넌트가 변화하는 요구사항에 맞게 쉽게 수정될 수 있게 하여, 미래의 유지보수와 기능 추가를 용이하게 합니다.

craco.config.js

@@ -3,7 +3,35 @@ 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'),
+      '@mocks': path.resolve(__dirname, 'src/mocks'),
+      '@internalTypes': path.resolve(__dirname, 'src/types'),
+      '@apis': path.resolve(__dirname, 'src/apis'),
+    },
+  },
+  jest: {
+    configure: {
+      moduleNameMapper: {
+        '^axios$': 'axios/dist/node/axios.cjs',
+        '^@/(.*)$': '<rootDir>/src/$1',
+        '^@apis/(.*)$': '<rootDir>/src/apis/$1',
+        '^@assets/(.*)$': '<rootDir>/src/assets/$1',
+        '^@components/(.*)$': '<rootDir>/src/components/$1',
+        '^@context/(.*)$': '<rootDir>/src/context/$1',
+        '^@mocks/(.*)$': '<rootDir>/src/mocks/$1',
+        '^@pages/(.*)$': '<rootDir>/src/pages/$1',
+        '^@routes/(.*)$': '<rootDir>/src/routes/$1',
+        '^@types/(.*)$': '<rootDir>/src/types/$1',
+        '^@utils/(.*)$': '<rootDir>/src/utils/$1',
+        '^@hooks/(.*)$': '<rootDir>/src/hooks/$1',
+      },
     },
   },
 };