강원대 FE_허윤수 5주차 과제 STEP2-login #39
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
- 세부 기능요구사항은 각 스텝마다 정리할 예정
- 상세 API 관련 productDetail.mock.ts 파일 추가 - 제품 상세 정보를 모킹하는 핸들러 정의 - 옵션 API 관련 productOptions.mock.ts 파일 추가 - 제품 옵션 정보를 모킹하는 핸들러 정의 - MSW 설정 파일 setupMockWorker.ts 업데이트 - productDetail.mock.ts와 productOptions.mock.ts 핸들러를 MSW 설정에 추가 - 기존 categoriesMockHandler와 productsMockHandler와 함께 worker 설정
- getProductOptionsPath 함수 사용하여 제품 옵션 API 엔드포인트 정의 - productOptionsMockHandler를 통해 제품 옵션 API 요청 모킹 - productId에 따라 응답 데이터 분기 처리 - 존재하지 않는 productId에 대해 404 에러 응답 추가
- getProductDetailPath 함수 사용하여 제품 상세 정보 API 엔드포인트 정의 - productDetailMockHandler를 통해 제품 상세 정보 API 요청 모킹 - productId에 따라 응답 데이터 분기 처리 - 존재하지 않는 productId에 대해 404 에러 응답 추가
- 프로젝트 전체에 ESLint 룰 적용 - src 디렉토리의 .ts, .tsx, .js, .jsx 파일에 대해 lint 스크립트 추가 - lint:fix 스크립트 추가하여 자동으로 코드 스타일 수정 가능 - Prettier 설정 추가하여 코드 포맷팅 일관성 유지 - 관련 종속성 및 플러그인 설치
- useGetCategories 훅에서 실제 API 호출 대신 categories.mock.ts의 모킹 데이터 사용 - CATEGORIES_RESPONSE_DATA와 getCategoriesPath를 categories.mock.ts로 이동 및 정의 - getCategories 함수가 모킹 데이터를 반환하도록 수정 - MSW 핸들러 정의 및 설정 추가
- 사용되지 않는 pageParam 변수 제거 - useGetProducts 훅에서 queryFn 수정 - ESLint 오류 해결
- productDetail.mock.ts에서 핸들러 경로를 '/api/products/:productId'로 정확히 설정 - useGetProductDetail.ts에서 요청된 productId를 사용하여 모킹 데이터 반환
GoodsDetailHeader 컴포넌트에서 detail 데이터가 null인 경우 로딩 메시지를 표시하도록 수정하여 예외 처리 개선
…omponent - 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.
… 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.
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.
- 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.
- useGetProductDetail 훅을 사용하여 제품 상세 정보를 가져오는 기능 구현 - getProductDetail 함수를 통해 실제 API 호출 로직 구현 - productDetailMockHandler를 사용하여 MSW 환경에서 API 응답 모킹 - 타입 안정성을 위해 ProductDetailResponseData 타입 및 zod 스키마 정의 - getProductDetailPath 함수를 별도 파일로 분리
제품 상세 정보 조회 기능 구현 MSW를 사용하여 제품 상세 정보 API 모킹
step1-msw에 대한 브랜치 구분
useGetProducts 훅의 getProducts 함수에 대한 단위 테스트를 추가했습니다. PRODUCTS_MOCK_DATA를 모킹하여 함수가 예상된 데이터를 반환하는지 검증했습니다.
getProductDetail 함수가 예상된 제품 상세 데이터를 반환하는지 확인하는 단위 테스트를 추가했습니다. axios를 모킹하여 실제 HTTP 요청을 보내지 않고 테스트할 수 있도록 했습니다.
CashReceiptFields 컴포넌트의 렌더링 및 사용자 상호작용 테스트 추가 @testing-library/react 및 userEvent를 사용하여 테스트 구현 react-hook-form 연동 테스트는 별도로 분리하여 작성 예정
MessageCardFields 컴포넌트 렌더링 및 사용자 입력 테스트 추가 @testing-library/react 및 userEvent를 사용하여 테스트 구현 react-hook-form 연동 테스트는 별도로 분리하여 작성 예정
- React Query를 사용한 카테고리 데이터 fetching 테스트 - 모의 데이터와 실제 반환 데이터 비교 검증 - TypeScript 타입 오류 수정 및 타입 안정성 개선
- React Query를 사용한 상품 데이터 fetching 테스트 구현 - 초기 데이터 로딩 및 반환 데이터 검증 - 페이지네이션 기능 테스트 추가 - 모의 데이터와 실제 반환 데이터 비교 검증
- MSW를 사용한 API 요청 모킹 설정 - 상품 상세 정보 fetching 성공 케이스 테스트 - API 에러 응답 처리 테스트 - React Query와 Suspense를 활용한 비동기 로직 검증
MSW(Mock Service Worker)를 사용하여 API 요청을 모의합니다. React Query의 QueryClient를 생성합니다. QueryClientProvider로 훅을 감싸는 래퍼 컴포넌트를 만듭니다. renderHook을 사용하여 useGetProductOptions 훅을 렌더링합니다. waitFor를 사용하여 쿼리가 성공적으로 완료될 때까지 기다립니다. 반환된 데이터가 모의 데이터와 일치하는지 확인합니다. productId가 제공되지 않았을 때 쿼리가 실행되지 않는지 확인합니다.
added 14 commits
July 26, 2024 02:42
- 현금영수증 신청 체크박스 상태에 따른 필드 활성화/비활성화 테스트 구현 - 체크박스가 활성화된 경우 필드 값 입력 및 유효성 검증 테스트 구현
- 메시지 카드 텍스트 필드 필수 입력 및 최대 길이 초과 입력 검증 테스트 구현 - 정상 입력 시 폼 제출 및 값 전달 확인 테스트 구현
- useLogin 훅을 사용하여 로그인 API 연동 - 로그인 페이지에서 아이디와 비밀번호 입력 기능 구현 - 로그인 요청 중 로딩 상태를 표시하고 버튼 비활성화 처리 - 로그인 성공 시 세션 저장소에 토큰 저장 및 리다이렉트 - 로그인 실패 시 오류 메시지 알림 처리
- ESLint 경고(@typescript-eslint/no-var-requires) 해결을 위해 require 문을 동적 import로 변경 - 개발 환경에서만 MSW를 초기화하도록 조건부 로직 추가 - MSW 초기화 로직을 async 함수로 분리하여 코드 가독성 및 유지보수성 향상 - MSW 초기화 시 콘솔 로그 추가로 개발 편의성 증대
…esponse - 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
- 모든 상품 ID에 대해 동적으로 옵션 생성 - 랜덤한 수의 옵션(1-3개)을 반환하도록 수정 - 항상 성공 응답(200 상태 코드) 반환 - 개발 및 테스트 목적으로 다양한 시나리오 지원
danmin20
requested changes
Jul 28, 2024
src/api/hooks/useGetProductDetail.ts
Outdated
Comment on lines
21
to
27
| const response = await fetch(`${BASE_URL}/api/products/${productId}`); | ||
|
|
||
| export const getProductDetail = async (params: ProductDetailRequestParams) => { | ||
| const response = await fetchInstance.get<GoodsDetailResponseData>( | ||
| getProductDetailPath(params.productId), | ||
| ); | ||
| if (!response.ok) { | ||
| throw new Error('Failed to fetch product detail'); | ||
| } | ||
|
|
||
| return response.data; | ||
| return response.json(); |
| return response.json(); | ||
| }; | ||
|
|
||
| export const useGetRegister = ( |
Comment on lines
+13
to
+23
| if (isLoading) { | ||
| return <div>Loading...</div>; | ||
| } | ||
|
|
||
| if (error) { | ||
| return <div>Error: {error.message}</div>; | ||
| } | ||
|
|
||
| if (!detail) { | ||
| return <div>No data available</div>; | ||
| } |
There was a problem hiding this comment.
suspense나 error boundary에 대해서도 같이 알아보시면 좋을 것 같아요~
|
컨플릭트 해결 후 머지해주시면 될 것 같아요~ |
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.
안녕하세요, 멘토님!
피드백을 위해 소중한 시간 내주셔서 정말 감사드립니다.
이번에 2단계 구현에서 해야 할 작업이 많아 두 번에 나누어 PR을 올릴 예정입니다.
현재 겪고 있는 문제는 로그인 후 새로고침하면 로그인 버튼이 "내 계정" 버튼으로 바뀌지만, 새로고침을 하지 않으면 바뀌지 않는 현상입니다. 이 문제를 어떻게 해결할 수 있을지 피드백을 부탁드립니다. 🥲
2단계 - 로그인 및 회원가입
다시 한 번 피드백을 주셔서 감사드리며, 좋은 하루 되세요!