강원대 FE 이채연 6주차 과제 - step1-2 #114
Open
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* docs: 전체 기능요구사항 정리 - 세부 기능요구사항은 각 스텝마다 정리할 예정 * docs: step0 기능요구사항 구현 * docs: step1 구현 요구사항 정리 * feat: MSW를 사용한 상세 및 옵션 API 모킹 핸들러 추가 - 상세 API 관련 productDetail.mock.ts 파일 추가 - 제품 상세 정보를 모킹하는 핸들러 정의 - 옵션 API 관련 productOptions.mock.ts 파일 추가 - 제품 옵션 정보를 모킹하는 핸들러 정의 - MSW 설정 파일 setupMockWorker.ts 업데이트 - productDetail.mock.ts와 productOptions.mock.ts 핸들러를 MSW 설정에 추가 - 기존 categoriesMockHandler와 productsMockHandler와 함께 worker 설정 * feat: 제품 옵션 API 모킹 핸들러 추가 - getProductOptionsPath 함수 사용하여 제품 옵션 API 엔드포인트 정의 - productOptionsMockHandler를 통해 제품 옵션 API 요청 모킹 - productId에 따라 응답 데이터 분기 처리 - 존재하지 않는 productId에 대해 404 에러 응답 추가 * feat: 제품 상세 정보 API 모킹 핸들러 추가 - getProductDetailPath 함수 사용하여 제품 상세 정보 API 엔드포인트 정의 - productDetailMockHandler를 통해 제품 상세 정보 API 요청 모킹 - productId에 따라 응답 데이터 분기 처리 - 존재하지 않는 productId에 대해 404 에러 응답 추가 * chore: ESLint 룰 적용 및 설정 추가 - 프로젝트 전체에 ESLint 룰 적용 - src 디렉토리의 .ts, .tsx, .js, .jsx 파일에 대해 lint 스크립트 추가 - lint:fix 스크립트 추가하여 자동으로 코드 스타일 수정 가능 - Prettier 설정 추가하여 코드 포맷팅 일관성 유지 - 관련 종속성 및 플러그인 설치 * refactor: useGetCategorys 대신 categories.mock.ts를 사용하여 카테고리 데이터 모킹 - useGetCategories 훅에서 실제 API 호출 대신 categories.mock.ts의 모킹 데이터 사용 - CATEGORIES_RESPONSE_DATA와 getCategoriesPath를 categories.mock.ts로 이동 및 정의 - getCategories 함수가 모킹 데이터를 반환하도록 수정 - MSW 핸들러 정의 및 설정 추가 * refactor: useGetProducts에서 pageParam 사용 제거 - 사용되지 않는 pageParam 변수 제거 - useGetProducts 훅에서 queryFn 수정 - ESLint 오류 해결 * fix: 제품 상세 정보 API 호출에서 핸들러 경로와 요청 경로 일치 문제 해결 - productDetail.mock.ts에서 핸들러 경로를 '/api/products/:productId'로 정확히 설정 - useGetProductDetail.ts에서 요청된 productId를 사용하여 모킹 데이터 반환 * feat: 상품 상세 정보 및 옵션 조회 API 모킹 데이터 개선 * fix: 상품 상세 헤더 컴포넌트 null 체크 추가 GoodsDetailHeader 컴포넌트에서 detail 데이터가 null인 경우 로딩 메시지를 표시하도록 수정하여 예외 처리 개선 * fix: handle undefined price and add error handling in OptionSection component - Added default value for price to avoid TypeScript errors when detail.price is undefined. - Refactored totalPrice calculation to ensure safety and correct default value. - Included error handling for product detail and options fetching. - Displayed user-friendly messages for loading and error states. * fix: handle null detail and remove unused error variable in GoodsInfo component - Added null checks for detail to prevent runtime errors when detail is not available. - Removed unused 'error' variable from destructuring as it is not utilized in the component. - Provided fallback UI for loading state to enhance user experience. * fix: handle 'detail' possibly being null Add null check for 'detail' to prevent TypeScript error when calculating total price. Use optional chaining and nullish coalescing operator to ensure 'detail' is safely accessed. * feat: Implement product options data fetching and mocking - Added `getProductOptionsPath` function to construct API URL for product options. - Created `getProductOptions` function to fetch product options from the server. - Developed `useGetProductOptions` custom hook using `useSuspenseQuery` for data fetching. - Implemented MSW mock handler for product options: - Added mock data for productId '1'. - Returned empty array for other productIds. * ix: 상품 옵션 계산 로직 수정 및 타입 오류 해결 * feat: 제품 상세 정보 조회 기능 구현 및 MSW 핸들러 추가 - useGetProductDetail 훅을 사용하여 제품 상세 정보를 가져오는 기능 구현 - getProductDetail 함수를 통해 실제 API 호출 로직 구현 - productDetailMockHandler를 사용하여 MSW 환경에서 API 응답 모킹 - 타입 안정성을 위해 ProductDetailResponseData 타입 및 zod 스키마 정의 - getProductDetailPath 함수를 별도 파일로 분리 * feat: 제품 상세 정보 API 모킹 및 useSuspenseQuery 훅 추가 제품 상세 정보 조회 기능 구현 MSW를 사용하여 제품 상세 정보 API 모킹 * docs: step1 msw에 대한 브랜치 전환 * test: useGetProducts 테스트 추가 useGetProducts 훅의 getProducts 함수에 대한 단위 테스트를 추가했습니다. PRODUCTS_MOCK_DATA를 모킹하여 함수가 예상된 데이터를 반환하는지 검증했습니다. * test: getProductDetail 함수에 대한 단위 테스트 추가 getProductDetail 함수가 예상된 제품 상세 데이터를 반환하는지 확인하는 단위 테스트를 추가했습니다. axios를 모킹하여 실제 HTTP 요청을 보내지 않고 테스트할 수 있도록 했습니다. * feat: 현금영수증 입력 컴포넌트(CashReceiptFields) 단위 테스트 추가 CashReceiptFields 컴포넌트의 렌더링 및 사용자 상호작용 테스트 추가 @testing-library/react 및 userEvent를 사용하여 테스트 구현 react-hook-form 연동 테스트는 별도로 분리하여 작성 예정 * feat(components/order): 메시지 카드 입력 컴포넌트(MessageCardFields) 단위 테스트 추가 MessageCardFields 컴포넌트 렌더링 및 사용자 입력 테스트 추가 @testing-library/react 및 userEvent를 사용하여 테스트 구현 react-hook-form 연동 테스트는 별도로 분리하여 작성 예정 * docs: 단위 테스트 구현 목록 * test: useGetCategories 훅에 대한 통합 테스트 추가 - React Query를 사용한 카테고리 데이터 fetching 테스트 - 모의 데이터와 실제 반환 데이터 비교 검증 - TypeScript 타입 오류 수정 및 타입 안정성 개선 * test: useGetProducts 훅에 대한 통합 테스트 추가 - React Query를 사용한 상품 데이터 fetching 테스트 구현 - 초기 데이터 로딩 및 반환 데이터 검증 - 페이지네이션 기능 테스트 추가 - 모의 데이터와 실제 반환 데이터 비교 검증 * test: useGetProductDetail 훅 통합 테스트 구현 - MSW를 사용한 API 요청 모킹 설정 - 상품 상세 정보 fetching 성공 케이스 테스트 - API 에러 응답 처리 테스트 - React Query와 Suspense를 활용한 비동기 로직 검증 * test: useGetProductOptions 훅 통합 테스트 구현 MSW(Mock Service Worker)를 사용하여 API 요청을 모의합니다. React Query의 QueryClient를 생성합니다. QueryClientProvider로 훅을 감싸는 래퍼 컴포넌트를 만듭니다. renderHook을 사용하여 useGetProductOptions 훅을 렌더링합니다. waitFor를 사용하여 쿼리가 성공적으로 완료될 때까지 기다립니다. 반환된 데이터가 모의 데이터와 일치하는지 확인합니다. productId가 제공되지 않았을 때 쿼리가 실행되지 않는지 확인합니다. * docs: mock 통합 테스트 구현 * feat: 현금영수증 입력 컴포넌트 통합 테스트 추가 - 현금영수증 신청 체크박스 상태에 따른 필드 활성화/비활성화 테스트 구현 - 체크박스가 활성화된 경우 필드 값 입력 및 유효성 검증 테스트 구현 * test: 메시지 카드 입력 컴포넌트 통합 테스트 추가 - 메시지 카드 텍스트 필드 필수 입력 및 최대 길이 초과 입력 검증 테스트 구현 - 정상 입력 시 폼 제출 및 값 전달 확인 테스트 구현 * docs: step2 구현 목록 정리 * fix: Remove req * feat: 로그인 기능 추가 - useLogin 훅을 사용하여 로그인 API 연동 - 로그인 페이지에서 아이디와 비밀번호 입력 기능 구현 - 로그인 요청 중 로딩 상태를 표시하고 버튼 비활성화 처리 - 로그인 성공 시 세션 저장소에 토큰 저장 및 리다이렉트 - 로그인 실패 시 오류 메시지 알림 처리 * feat(login): 회원가입 버튼 UI 구현 * feat(router): 회원가입 페이지 라우팅 설정 및 컴포넌트 추가 * feat(signup): 회원가입 UI 구현 * feat(api): 회원가입 요청을 처리하는 useRegister 훅 생성 * fest: 타입스크립트 환경에서 MSW 초기화 코드 리팩터링 - ESLint 경고(@typescript-eslint/no-var-requires) 해결을 위해 require 문을 동적 import로 변경 - 개발 환경에서만 MSW를 초기화하도록 조건부 로직 추가 - MSW 초기화 로직을 async 함수로 분리하여 코드 가독성 및 유지보수성 향상 - MSW 초기화 시 콘솔 로그 추가로 개발 편의성 증대 * feat(auth): implement login functionality and always return success response - Update MSW handler to always return a successful login response - Modify LoginPage component to handle successful login and navigate to home - Remove error handling for login failures as it's no longer needed - Ensure proper token storage upon successful login - Update useLogin hook usage in LoginPage * feat(mock): 상품 옵션 API 모의 응답 개선 - 모든 상품 ID에 대해 동적으로 옵션 생성 - 랜덤한 수의 옵션(1-3개)을 반환하도록 수정 - 항상 성공 응답(200 상태 코드) 반환 - 개발 및 테스트 목적으로 다양한 시나리오 지원 * fix: lint 룰 적용 * docs: step2 기능 요구사항 정리 * feat: HeartIcon 컴포넌트 추가 - SVG 기반의 HeartIcon 컴포넌트 생성 - 색상, 크기 등을 props로 커스터마이징 가능하도록 구현 - 기본 스타일 설정 (테두리만 있는 하트 모양) * feat: OptionSection에 위시리스트 추가 버튼 구현 - WishButton 컴포넌트 추가 - 위시리스트 추가 버튼을 OptionSection에 통합 - 임시 handleWishClick 함수 구현 (알림 표시) - HeartIcon 사용하여 버튼 디자인 개선 * feat: WishList 컴포넌트를 만들어 UI를 구현 * feat: API 호출을 위한 훅을 만들고, 이를 사용하여 위시 목록을 관리함 * feat: 마이 페이지 위시 목록 기능 구현 - Chakra UI를 활용한 위시 목록 리스트 UI 구현 - 위시 목록 조회, 추가, 삭제 API 연동 - 마이 페이지에 위시 목록 기능 통합 - 페이지네이션 및 에러 처리 구현 * refactor: React Query 훅 사용 방식 업데이트 - useQuery와 useMutation 호출 시 객체 형태로 옵션 전달 - queryClient.invalidateQueries 호출 방식 수정 - TypeScript 타입 오류 해결 * refactor: 위시리스트 모의 API에 정렬 기능 추가 - 정렬 매개변수(sort)를 활용하여 위시리스트 정렬 로직 구현 - ESLint 경고 해결: 사용되지 않는 변수 제거 - 모의 API의 페이지네이션 로직에 정렬 기능 통합 * feat: MyAccount 컴포넌트에 위시리스트 기능 통합 - Chakra UI Tabs를 사용하여 계정 정보, 위시리스트, 주문 내역 섹션 생성 - 위시리스트 조회 및 삭제 기능을 MyAccount 컴포넌트에 통합 - 로딩 상태 및 에러 처리 로직 포함 - 계정 정보 및 주문 내역을 위한 플레이스홀더 추가 * style: 카드에 그림자, 호버 시 확대 효과 등을 추가 * refactor: 파일명 리팩토링 * refactor: lint 룰 적용 * feat:useLogin 훅 테스트 환경 --------- Co-authored-by: yuni <[email protected]>
|
https://codus1718.github.io/react-deploy/ |
|
안녕하세요 멘토님. "Error: Unexpected token '<', "<!DOCTYPE "... is not valid JSON" 이 오류가 계속 나는데, 구글링했더니, 분명 코드 어디에서 JSON이 아니라 HTML을 반환하고있어서 그렇다고 하던데 며칠을 찾아도 찾지 못했습니다..
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
안녕하세요 코치님..
사실 저번 merge한 pr과 크게 달라지지 않았습니다..
홈페이지가 mock데이터로도 돌아가지 않아서 그 오류를 찾고 고치려고 했는데 그 오류를 여태 고치지 못했습니다..
아마 재제출 대상일것 같아서 다시 push해보았습니다.