강원대 FE_허윤수 4주차 과제 STEP1 #26
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
added 30 commits
July 17, 2024 05:02
- 상세 요구사항은 각 단계에서 정리 할 예정
…n routes configuration
- API 응답 데이터 구조 변경에 따른 상품 상세 정보 접근 방식 수정 (productDetail.detail) - 상품 및 옵션 정보 로딩 상태 및 에러 처리 로직 추가
- React Query 활용 방식 개선: 데이터 fetching 함수 분리 및 경로 함수 추가
- enabled 옵션 추가를 통해 productId 값 유효성 검사 후 쿼리 실행하여 불필요한 API 호출 방지
added 12 commits
July 17, 2024 21:46
- '@/components/common/Button'에서 가져온 커스텀 버튼 컴포넌트를 사용하여 결제 버튼 대체
- '@/components/common/Form/Input/UnderlineTextField'에서 가져온 커스텀 입력 필드 컴포넌트를 사용하여 영수증 번호 입력 필드 대체
- 결제 페이지 레이아웃을 2열 구조로 수정하여 선물 메시지 및 선물 내역을 좌측에, 결제 정보를 우측에 배치 - 각 섹션에 borderWidth, padding, borderRadius, background, boxShadow 스타일 적용
This was referenced Jul 19, 2024
Merged
danmin20
requested changes
Jul 19, 2024
Comment on lines
18
to
25
| interface ProductDetail { | ||
| productDetailInfo: { | ||
| announcements: Announcement[]; | ||
| }; | ||
| productDescription: { | ||
| displayImage: string; | ||
| }; | ||
| } |
There was a problem hiding this comment.
ProductDetailData 타입에 정의되어 있는 것들이랑 겹치는 것 같아요. 동일한 필드는 재활용할 수 있게 써보는 건 어떨까요? Pick을 써서 필드를 가져와 써도 좋을 것 같고요~
There was a problem hiding this comment.
추가로, interface와 type을 혼용하신 이유가 있으실까요?
src/pages/Payment/index.tsx
Outdated
Comment on lines
20
to
23
| const [message, setMessage] = useState(''); | ||
| const [receipt, setReceipt] = useState(false); | ||
| const [receiptType, setReceiptType] = useState('personal'); | ||
| const [receiptNumber, setReceiptNumber] = useState(''); |
There was a problem hiding this comment.
입력 값들이 많은 화면이라면, form을 사용해보는 것도 좋을 것 같아요!
|
컨플릭트 해결 후 직접 머지해주셔도 될 것 같아요~ |
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.
멘토님 안녕하세요!
피드백을 위해 시간을 내주셔서 감사합니다!
질문 사항
/v1/products/{productId}/optionsAPI 호출이 성공하고 데이터가 정상적으로 수신되는 것을 확인했습니다. @/components/features/ProductDetail/ProductOptions 컴포넌트의 로직을 살펴보았으나, API 응답 데이터를 화면에 렌더링하는 부분에서 문제가 발생하는 것으로 추측됩니다.productDetailData?.detail로 데이터를 불러왔으나,productOptionsData의 경우productOptionsData.options로 설정하려고 했을 때 타입에 맞지 않는다고 나옵니다. 여러 타입 정의를 다시 세워봤지만 정확한 방법을 모르겠습니다.상품 상세 페이지 (@/pages/ProductDetail)에서 주문 결제 페이지 (@/pages/Payment)로 이동하며,productId를 전달하는 과정에서 문제가 발생합니다.@/pages/ProductDetail에서 다음과 같이 설정하였으나, 메인 화면으로 돌아가는 현상이 발생합니다. 이 부분에서 어디가 잘못되었는지 조언 부탁드립니다.1단계 - 상품 상세 페이지 & 상품 결제하기 폼 구현
UI 프레임워크:
chakra-ui또는 직접 구현한 UI 컴포넌트만 사용 (외부 라이브러리 사용 금지)폼 상태 관리: React 기본 기능 (
form,ref,state)으로 폼 상태 관리 (외부 라이브러리 사용 금지)상품 상세 페이지 (
@/pages/ProductDetail):/components/features/Theme/ThemeGoodsSection또는/components/features/Home/GoodsRankingSection/List에서 상품 ID (productId)를 전달받아 페이지 이동/v1/products/{productId}/detailAPI 호출하여 데이터 불러오기/v1/products/{productId}/optionsAPI 호출하여 데이터 불러오기optionId,optionName,optionPrice,subOptions)@/pages/Payment)로 이동하며, productId 전달@/pages/Login)로 이동상품 결제 페이지(
@/pages/Payment):/v1/products/{productId}/detailAPI 호출하여 주문 상품 정보 표시 (이미지, 브랜드, 이름)