전남대 FE_임지환 5주차 과제

README.md

@@ -1 +1,69 @@
-# 카카오 테크 캠퍼스 - 프론트엔드 카카오 선물하기 편
+# 🚀 1단계 - Form 부분 테스트 코드 작성하기
+
+## 기능 요구 사항
+
+- [ ] Jest와 React Testing Libaray를 사용하여 테스트 기반 환경을 구축해요.
+- [ ]MSW를 사용하여 Mock API가 동작하도록 해요. (상세 API / 옵션 API)
+- [ ]단위 테스트로 작성하면 좋을 테스트가 있다면 단위테스트 코드를 작성해요.
+- [ ]상품 상세 페이지와 관련된 통합 테스트 코드를 작성해요.
+- [ ]결제하기 페이지의 Form과 관련된 통합 테스트 코드를 작성해요.
+- [ ]현금영수증 Checkbox가 false인 경우 현금영수증 종류, 현금영수증 번호 field가 비활성화 되어있는지 확인하는 테스트 코드를 작성해요. (만약 true인 경우 현금영수증 종류, 번호 field에 값이 입력 되어야 해요)
+- [ ]form의 validation 로직이 정상 동작하는지 확인하는 테스트 코드를 작성해요.
+- [ ]본인만의 기준으로 일관된 코드를 작성해주세요.
+- [ ]기능 단위로 나누어 커밋을 해주세요.
+
+# 🚀 2단계 - 로그인, 관심 상품 등록 / 삭제, 관심 목록 구현
+
+## 기능 요구 사항
+
+- [ ] 로그인 기능을 구현해요.
+- [ ] 회원가입 화면을 만들고, 회원가입 기능이 동작되게 구현해요. (회원가입을 하면 로그인이 되게 해요.)
+- [ ] 회원가입 버튼은 로그인 화면 하단에 배치해요. 로그인 화면을 그대로 사용해도 괜찮아요.
+- [ ] 상품 상세 페이지에서 관심 등록 버튼을 만들어요.
+- [ ] 상품 상세 페이지에서 관심 버튼을 클릭 했을 때 관심 추가 동작되게 해요.
+- [ ] 관심 등록 성공 시 Alert로 "관심 등록 완료" 메시지를 노출해요.
+- [ ] 나의 계정 페이지에서 관심 목록 리스트를 만들어요.
+- [ ] 관심 목록 리스트는 chakra UI를 사용하여 자유롭게 만들어주세요.
+- [ ] 관심 목록 API는 카카오테크 선물하기 API 노션의 response 데이터를 사용해요.
+- [ ] 관심 목록 리스트에서 관심 삭제가 가능하게 해요.
+- [ ] 관심 삭제 시 목록에서 사라져요.
+- [ ] 본인만의 기준으로 일관된 코드를 작성해주세요.
+- [ ] 기능 단위로 나누어 커밋을 해주세요.
+
+# 🚀 3단계 - 질문의 답변을 README에 작성
+
+## 📝 Requirements
+
+## 5주차 질문
+
+### - 질문 1. Test code를 작성해보면서 좋았던 점과 아쉬웠던 점에 대해 말해주세요.
+
+**좋았던 점:**
+
+- 테스트 코드를 작성함으로써 코드의 신뢰성을 높일 수 있었습니다. 덕분에 기능이 의도한 대로 동작하는지 확인할 수 있었고, 코드 수정 시 발생할 수 있는 예기치 않은 버그를 사전에 방지할 수 있었습니다.
+- 테스트 코드 사용법과 중요성을 스스로 느껴볼 수 있어서 좋았습니다.
+
+**아쉬웠던 점:**
+
+- 테스트 환경을 설정하고 Mock 데이터를 구성하는 과정이 다소 복잡하고 시간이 많이 소요되었습니다.
+
+### - 질문 2. 스스로 생각했을 때 좋은 컴포넌트란 무엇인지 본인만의 기준을 세우고 설명해 주세요.
+
+**좋은 컴포넌트의 기준:**
+
+- **재사용성:** 여러 곳에서 쉽게 재사용할 수 있도록 설계된 컴포넌트가 좋습니다.
+- **단일 책임 원칙:** 컴포넌트는 하나의 책임만을 가져야 합니다. 즉, 하나의 컴포넌트는 하나의 기능만 수행하도록 설계되어야 하며, 이는 유지보수성을 높이고 테스트를 용이하게 만듭니다.
+- **명확한 인터페이스:** 컴포넌트의 props와 상태 관리가 명확하고 일관되게 정의되어야 합니다. 이는 컴포넌트를 사용하는 다른 개발자들이 쉽게 이해하고 사용할 수 있게 합니다.
+- **테스트 가능성:** 컴포넌트는 쉽게 테스트할 수 있어야 합니다.
+
+### - 질문 3. 스스로 생각했을 때 공통 컴포넌트를 만들 때 가장 중요한 요소 2개를 선택하고 이유와 함께 설명해주세요.
+
+**1. 재사용성:**
+공통 컴포넌트는 다양한 상황에서 재사용할 수 있도록 설계되어야 합니다. 이를 위해서는 범용적이고 유연한 구조를 가져야 하며, 특정 기능에 너무 종속적이지 않아야 합니다.
+
+**이유:** 재사용 가능한 컴포넌트는 개발 시간과 유지보수 비용을 절감할 수 있으며, 코드의 일관성을 높여줍니다.
+
+**2. 확장성:**
+공통 컴포넌트는 요구사항이 변경되거나 기능이 추가될 때 쉽게 확장할 수 있어야 합니다. 이를 위해 컴포넌트는 최소한의 변경으로 새로운 기능을 추가할 수 있도록 설계되어야 합니다.
+
+**이유:** 확장 가능한 컴포넌트는 프로젝트의 규모가 커지더라도 안정적으로 유지될 수 있으며, 개발자들이 새로운 요구사항에 빠르게 대응할 수 있게 합니다.

craco.config.js

@@ -1,9 +1,13 @@
-const path = require('path');
+const CracoAlias = require('craco-alias');
 
 module.exports = {
-  webpack: {
-    alias: {
-      '@': path.resolve(__dirname, 'src'),
+  plugins: [
+    {
+      plugin: CracoAlias,
+      options: {
+        source: 'tsconfig',
+        tsConfigPath: 'tsconfig.paths.json',
+      },
     },
-  },
+  ],
 };

jest.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
+};