전남대 FE_이도현

.eslintrc.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 module.exports = {
   env: {
     browser: true,
@@ -12,8 +14,10 @@ module.exports = {
     'plugin:storybook/recommended',
   ],
   parser: '@typescript-eslint/parser',
+  ignorePatterns: ['__mocks__/*'],
   parserOptions: {
-    project: './tsconfig.json',
+    project: path.resolve(__dirname, './tsconfig.json'),
+    tsconfigRootDir: path.resolve(__dirname),
     ecmaFeatures: {
       jsx: true,
     },
@@ -50,7 +54,12 @@ module.exports = {
     ],
     '@typescript-eslint/no-use-before-define': ['off'],
   },
-  ignorePatterns: ['**/build/**/*', '.eslintrc.js', 'craco.config.js'],
+  ignorePatterns: [
+    '**/build/**/*',
+    '.eslintrc.js',
+    'craco.config.js',
+    'public/mockServiceWorker.js',
+  ],
   settings: {
     'import/resolver': {
       typescript: {},

README.md

@@ -1 +1,61 @@
 # 카카오 테크 캠퍼스 - 프론트엔드 카카오 선물하기 편
+
+## step1
+
+1. [o] 테스트 기반 환경 구축
+
+- Jest 설치 및 설정
+- React Testing Library 설치 및 설정
+- MSW(Mock Service Worker) 설치 및 설정
+
+2. [p] Mock API 동작
+
+- 상세 API 설정
+- 옵션 API 설정
+
+3. [0] 상품 상세 페이지 단위 테스트
+
+- 주요 컴포넌트 단위 테스트 작성
+- 각 컴포넌트의 주요 기능 및 상태 변화 테스트
+
+4. [x] 결제하기 페이지 통합 테스트
+
+- 현금영수증 checkbox 테스트
+- 폼 검증 로직 테스트
+
+## step2
+
+1. [o] 로그인 기능 구현
+
+2. [o] 회원가입 기능 구현
+
+- 회원가입을 하면 로그인이 되도록
+- 로그인 화면 하단에 배치
+
+3. [o] 상품 상세 페이지
+
+- 관심 등록 버튼 구현
+- 관심 등록 시 "관심 등록 완료" 메시지
+
+4. [o] 나의 계정 페이지
+
+- 관심 목록 리스트 구현
+- API는 노션의 response 데이터 사용
+- 관심 삭제 구현
+
+## step3
+
+- 질문 1. Test code를 작성해보면서 좋았던 점과 아쉬웠던 점에 대해 말해주세요.
+
+  - 테스트 코드를 작성하면서 코드의 신뢰성이 높아지고 기능을 추가할 때 동작이 잘 되는지 확인이 간편할 것이라는 생각이 들었습니다.
+  - 아쉬운 점은 테스트 코드를 작성하는 데 생각보다 더 많은 시간과 노력이 필요했고 특히 처음 작성한다면 코드 작성보다 테스트 작성에 시간이 더 많이 걸릴 수도 있겠다고 생각했습니다.
+
+- 질문 2. 스스로 생각했을 때 좋은 컴포넌트란 무엇인지 본인만의 기준을 세우고 설명해 주세요.
+
+  - 제가 생각했을 때 좋은 컴포넌트란 재사용이 가능해야하고 테스트가 용이해야 한다고 생각합니다.
+  - 독립적으로 동작이 가능하고 일반적인 원칙을 따르며 유연한 컴포넌트가 좋은 컴포넌트라고 생각합니다.
+
+- 질문 3. 스스로 생각했을 때 공통 컴포넌트를 만들 때 가장 중요한 요소 2개를 선택하고 이유와 함께 설명해주세요.
+
+  1. 독립성 : 재사용 가능하고 독립적으로 동작 가능해야한다고 생각합니다. 다른 컴포넌트와 통합이 쉬우며 재사용성이 높아야 좋다고 생각합니다.
+  2. 접근성 : 다양한 사용자가 애플리케이션을 더욱 쉽게 사용하기 위해 접근성 높은 컴포넌트를 만들어야 한다고 생각합니다.

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

babel.config.js

@@ -0,0 +1,12 @@
+module.exports = {
+  presets: [
+    '@babel/preset-env',
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+      },
+    ],
+    '@babel/preset-typescript',
+  ],
+};

craco.config.js

@@ -6,4 +6,12 @@ module.exports = {
       '@': path.resolve(__dirname, 'src'),
     },
   },
+  jest: {
+    configure: {
+      moduleNameMapper: {
+        '^@/(.*)$': '<rootDir>/src/$1',
+      },
+      setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+    },
+  },
 };

jest.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+  transform: {
+    '^.+\\.[t|j]sx?$': 'babel-jest',
+  },
+  moduleNameMapper: {
+    '\\.css$': '<rootDir>/__mocks__/styleMock.js',
+    '^@/(.*)$': '<rootDir>/src/$1',
+  },
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.ts'],
+};