강원대 FE_허윤수 5주차 과제 STEP3 #43
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
- 세부 기능요구사항은 각 스텝마다 정리할 예정
강원대 FE_허윤수 5주차 과제 STEP0
- 상세 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를 활용한 비동기 로직 검증
Step1 test
- 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 상태 코드) 반환 - 개발 및 테스트 목적으로 다양한 시나리오 지원
강원대 FE_허윤수 5주차 과제 STEP2-login
- SVG 기반의 HeartIcon 컴포넌트 생성 - 색상, 크기 등을 props로 커스터마이징 가능하도록 구현 - 기본 스타일 설정 (테두리만 있는 하트 모양)
- WishButton 컴포넌트 추가 - 위시리스트 추가 버튼을 OptionSection에 통합 - 임시 handleWishClick 함수 구현 (알림 표시) - HeartIcon 사용하여 버튼 디자인 개선
- Chakra UI를 활용한 위시 목록 리스트 UI 구현 - 위시 목록 조회, 추가, 삭제 API 연동 - 마이 페이지에 위시 목록 기능 통합 - 페이지네이션 및 에러 처리 구현
- useQuery와 useMutation 호출 시 객체 형태로 옵션 전달 - queryClient.invalidateQueries 호출 방식 수정 - TypeScript 타입 오류 해결
- 정렬 매개변수(sort)를 활용하여 위시리스트 정렬 로직 구현 - ESLint 경고 해결: 사용되지 않는 변수 제거 - 모의 API의 페이지네이션 로직에 정렬 기능 통합
- Chakra UI Tabs를 사용하여 계정 정보, 위시리스트, 주문 내역 섹션 생성 - 위시리스트 조회 및 삭제 기능을 MyAccount 컴포넌트에 통합 - 로딩 상태 및 에러 처리 로직 포함 - 계정 정보 및 주문 내역을 위한 플레이스홀더 추가
강원대 FE_허윤수 5주차 과제 STEP2-wish
danmin20
requested changes
Jul 28, 2024
| @@ -8,7 +8,19 @@ import { breakpoints } from '@/styles/variants'; | |||
| type Props = ProductDetailRequestParams; | |||
|
|
|||
| export const GoodsDetailHeader = ({ productId }: Props) => { | |||
There was a problem hiding this comment.
페이지 단위로만 쓰이는 컴포넌트라면, pages.Goods/Detail 하위에 components로 넣어도 좋을 것 같아요~ 최상위에는 공통으로 쓰이는 컴포넌트를 묶어놓고요.
| const cardBg = useColorModeValue('white', 'gray.800'); | ||
| const cardBorder = useColorModeValue('gray.200', 'gray.700'); | ||
|
|
||
| const handleRemove = (wishId: number) => { |
There was a problem hiding this comment.
수정/삭제시에는 confirm창을 띄우는 것도 좋은 UX인 것 같아요~
| } | ||
| }, [location, navigate]); |
There was a problem hiding this comment.
큰 상관은 없을 것으로 보이지만, location으로 넣는 것 보다는 location.state?.successMessage을 넣는 게 더 정확한 참조일 것 같아요~
| const [password, setPassword] = useState(''); | ||
| const navigate = useNavigate(); | ||
|
|
||
| const { mutate: register, isPending } = useGetRegister({ |
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.
이번 PR에서는 5주차 과제의 STEP3를 완료하였습니다.
감사합니다.