Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feat: 케로셀 구현 외 #139

Merged
merged 9 commits into from
Oct 15, 2024
Merged

Feat: 케로셀 구현 외 #139

merged 9 commits into from
Oct 15, 2024

Conversation

luminox93
Copy link
Contributor

💡 작업 내용

  • AuctionDetails / PreAuctionDetails에 Carousel을 구현하였습니다.
  • 경매 전환 시, 좋아요 클릭 시 query 무효화 되도록 수정하였습니다.
  • queryKeys에 있던 오타를 수정하였습니다.

💡 자세한 설명

[Carousel 구현]

  1. AuctionDetails / PreAuctionsDetails에서 imageUrls을 받아 Carousel 구현
  2. 경매 상세정보 / 사전 경매 상세정보에서 imageUrls이 전달되는 형식이 달라 이를 parsing하기 위해 useImageUrls hook 생성
  3. useImageUrls 훅에서 props로 입력받은 데이터를 검사하여 데이터가 string으로 구성되어 있을 경우 key / imageUrl 그대로 전달
  4. Object일 경우 Objectd에서 imageId와 ImageUrl을 추출하여 return
  5. Object일 경우이면서 key값이 존재하지 않을 경우를 대비하여 key값에 idx+1이 할당되도록 수정
  6. useImageUrls hook을 통해 parsing된 데이터를 ImageItem에 전달하여 Carousel 아이템 생성
  7. ImageItem을 ImageList에 children으로 전달하여 Carousel 구현

[queries]

  1. useConvertToAuction 쿼리에서 onSuccess시 아래 4개의 query를 무효화 하도록 수정
    image
  2. 좋아요 클릭시 useLikeAuctionItem 에서 PRE_AUCTION_HEART_LIST, PRE_AUCTION_DETAILS 를 무효화 하도록 수정
  3. LIST를 LOST로 작성한 오타 수정

📗 참고 자료 (선택)

📢 리뷰 요구 사항 (선택)

  1. queries 부분에서 불필요한 부분이 있다고 생각되면 수정 요망

🚩 후속 작업 (선택)

✅ 셀프 체크리스트

  • PR 제목을 형식에 맞게 작성했나요?
  • 브랜치 전략에 맞는 브랜치에 PR을 올리고 있나요? (master/main이 아닙니다.)
  • 이슈는 close 했나요?
  • Reviewers, Labels, Projects를 등록했나요?
  • 작업 도중 문서 수정이 필요한 경우 잘 수정했나요?
  • 테스트는 잘 통과했나요?
  • 불필요한 코드는 제거했나요?

closes #이슈번호

@luminox93
fix: 오타 및 코드 수정
a2edfcd 
1. 시작가에 원원이라고 표기되는 오류 수정
2. 판매자가 경매 상세페이지에 들어갈 경우 메뉴 버튼이 보이는 버그 수정
@luminox93
fix: queries 수정
c4f9e81 
1. useConvertToAuction 쿼리에서 auction list도 무효화 하도록 변경
2.useLikeAuctionItem 쿼리에서 사전 경매에서 하트를 누른 리스트를 무효화 하도록 변경
3. useDeletePreAuction 쿼리에서 실행 시 사전 경매 리스크를 무효화하도록 변경
4. auction list의 오탈자 수정
@luminox93
feat: useImageUrl Hooks 생성
d8272cf 
1. 상세 조회 / 사전 경매 상세 조회의 api가 달라 데이터 파싱 hooks 생성
2. images가 단순 배열인 경우 key에 idx+1의 값, imageUrl에 url을 담아서 return
3. images가 Object일 경우 image.imageUrl을 파싱하여 imageUrl에 담아 전송
@luminox93
feat: imageItem 컴포넌트 생성
47d212a 
1. useImageUrls hook을 통해 return된 데이터를 담을 ImageItem 컴포넌트 생성
2. img를 불러오는데 실패했을 경우를 대시해서 alt에 productName 삽입
@luminox93
feat: ImageList 컴포넌트 생성
b403ef8 
1. 케로셀을 랜더링할 ImageList 컴포넌트 생성
2. useImageUrls hook을 사용하여 AuctionDetail/PreAuctionDetail 모두 동일한 방법으로 사용 가능하게 설계
3. key값 중복을 방지하고자 productId{id번호}_{img.key}값으로 설정
@luminox93
fix: ImageList 도입
af25006 
1. AuctionDetail / PreAuctionDetail 페이지에서 ImageList 도입하여 케로셀 구현
@luminox93
fix: useImageUrls 수정
466659c 
1. 이미지 정보가 Object로 넘어올 경우 key 값에 imageId를 할당하도록 수정
@luminox93
fix: 오류 수정
0920f78 
1. useImageUrls에서 obejct 타입 데이터를 받을 시 key값이 존재하지 않을 경우 idx+1 값을 사용하도록 수정
2. 기타 오타 수정
@luminox93 luminox93 added ✨feature 구현, 개선 사항 관련 부분 👩🏻‍💻frontend 프론트엔드 작업 🪄refactor 리팩토링 labels Oct 14, 2024
CLOUDoort
CLOUDoort reviewed Oct 15, 2024
View reviewed changes
Copy link
Contributor

@CLOUDoort CLOUDoort left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

확인했습니다.

src/components/details/ImageList.tsx Outdated Show resolved Hide resolved
@luminox93
fix: 중복 수정
87d3259 
ImageItem에 CarouselItem이 이미 존재하여 ImageList의 CarouselItem 제거
aquaman122
aquaman122 approved these changes Oct 15, 2024
View reviewed changes
Copy link
Contributor

@aquaman122 aquaman122 left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

확인했습니다!👍

@CLOUDoort CLOUDoort merged commit 105f836 into dev Oct 15, 2024
@aquaman122 aquaman122 deleted the feat/detail branch October 22, 2024 10:16
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@CLOUDoort CLOUDoort CLOUDoort approved these changes

@aquaman122 aquaman122 aquaman122 approved these changes

Assignees
No one assigned
Labels
✨feature 구현, 개선 사항 관련 부분 👩🏻‍💻frontend 프론트엔드 작업 🪄refactor 리팩토링
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@luminox93 @aquaman122 @CLOUDoort