경북대 FE_정서현 5주차 과제 Step2 / 3

.babelrc

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"]
+}

.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
   parser: '@typescript-eslint/parser',
   parserOptions: {
     project: './tsconfig.json',
+    tsconfigRootDir: __dirname,
     ecmaFeatures: {
       jsx: true,
     },

README.md

@@ -1 +1,49 @@
 # 카카오 테크 캠퍼스 - 프론트엔드 카카오 선물하기 편
+
+#### ✓ 0단계 - 기본 코드 준비
+
+- [x] 기능을 구현하기 전 README.md 에 구현할 기능 목록 추가
+
+<br>
+
+#### ✓ 1단계 - Form 부분 테스트 코드 작성하기
+
+- [x] Jest와 React Testing Library 를 사용하여 테스트 기반 환경을 구축
+
+- [x] MSW를 사용하여 Mock API가 동작하도록 구현 (상세 API / 옵션 API)
+
+- [x] 단위 테스트로 작성하면 좋을 테스트가 있다면 단위테스트 코드를 작성
+
+- [x] 상품 상세 페이지와 관련된 통합 테스트 코드를 작성
+
+- [x] 결제하기 페이지의 Form과 관련된 통합 테스트 코드를 작성
+
+- [x] 현금영수증 Checkbox가 false인 경우 현금영수증 종류, 현금영수증 번호 field 가 비활성화 되어있는지 확인하는 테스트 코드를 작성 (만약 true인 경우 현금영수증 종류, 번호 field에 값이 입력되게 함)
+
+- [x] form의 validation 로직이 정상 동작하는지 확인하는 테스트 코드를 작성
+
+<br>
+
+#### ✓ 2단계 - 로그인, 관심 상품 등록 / 삭제, 관심 목록 구현
+
+- [x] 로그인 기능을 구현
+
+- [x] 회원가입 화면을 만들고, 회원가입 기능이 동작되게 구현 (회원가입을 하면 로그인이 된 상태)
+
+- [x] 상품 상세 페이지에서 관심 등록 버튼 구현
+
+- [x] 상품 상세 페이지에서 관심 버튼을 클릭 했을 때 관심 추가 기능 구현
+
+- [x] 마이 페이지에서 관심 목록 리스트 기능 구현
+
+- [x] 관심 목록 리스트에서 관심 삭제 기능 구현
+
+<br>
+
+#### ✓ 3단계 - 질문의 답변을 README에 작성
+
+- [x] 1. Test code를 작성해보면서 좋았던 점과 아쉬웠던 점에 대해 말해주세요.
+
+- [x] 2. 스스로 생각했을 때 좋은 컴포넌트란 무엇인지 본인만의 기준을 세우고 설명해 주세요.
+
+- [x] 3. 스스로 생각했을 때 공통 컴포넌트를 만들 때 가장 중요한 요소 2개를 선택하고 이유와 함께 설명해주세요.

craco.config.js

@@ -1,6 +1,13 @@
 const path = require('path');
 
 module.exports = {
+  jest: {
+    configure: {
+      moduleNameMapper: {
+        '^@/(.*)$': '<rootDir>/src/$1',
+      },
+    },
+  },
   webpack: {
     alias: {
       '@': path.resolve(__dirname, 'src'),