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/#75] Carousel 컴포넌트 구현 #78

Merged
merged 3 commits into from
Jan 14, 2025
Merged

[Feat/#75] Carousel 컴포넌트 구현 #78

merged 3 commits into from
Jan 14, 2025

Conversation

chaeneey
Copy link
Collaborator

📌 관련 이슈번호

체크리스트

  • 🎋 base 브랜치를 develop 브랜치로 설정했나요?
  • 🖌️ PR 제목은 형식에 맞게 잘 작성했나요?
  • 🏗️ 빌드는 성공했나요? (yarn build)
  • 🧹 불필요한 코드는 제거했나요? e.g. console.log
  • 🙇‍♂️ 리뷰어를 지정했나요?
  • 🏷️ 라벨은 등록했나요?

✅ Key Changes

이번 PR에서 작업한 내용을 간략히 설명해주세요

  1. Carousel 컴포넌트 만들었습니다.
  • designs: 이미지와 좋아요 상태를 같이 보내주는 데이터를 받습니다.

아래와 같은 형태의 데이터가 들어올 예정이고, 해당 데이터를 돌면서 이미지와 좋아요 상태를 보여줍니다.

const designs = [
  {
    cakeId: 1,
    cakeImageUrl: '../public/example-img.png',
    isLiked: true,
  },
  {
    cakeId: 2,
    cakeImageUrl: '../public/example-img.png',
    isLiked: true,
  },
  {
    cakeId: 10,
    cakeImageUrl: '../public/example-img.png',
    isLiked: false,
  },
];

📢 To Reviewers

📸 스크린샷 or 실행영상

2025-01-15.3.20.10.mov

@chaeneey chaeneey self-assigned this Jan 14, 2025
youtheyeon
youtheyeon approved these changes Jan 14, 2025
View reviewed changes
Copy link
Collaborator

@youtheyeon youtheyeon left a comment

Choose a reason for hiding this comment

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

코드를 짠 사람을 닮아 깔끔한 코드네요 수고하셨습니당 💛

src/pages/designList/components/Carousel.tsx Outdated

const Carousel = ({ designs }: CarouselProps) => {
return (
<div className={container}>
Copy link
Collaborator

Choose a reason for hiding this comment

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

다양한 시멘틱 태그 사용을 위해 container를 ul 태그로 하고 map으로 돌려지는 div 태그를 li 태그로 하는 건 어떨지.. 제안해봅니당👏

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

좋은 생각이네용 ~!! 반영하겠습니다!

zzz-myam
zzz-myam approved these changes Jan 14, 2025
View reviewed changes
Copy link
Collaborator

@zzz-myam zzz-myam left a comment

Choose a reason for hiding this comment

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

깔끔한 코드 넘 최고!!! 고생하셨습니다 :)

thisishwarang
thisishwarang reviewed Jan 14, 2025
View reviewed changes
src/pages/designList/components/Carousel.tsx
})}
<li className={moreButtonStyle}>
<IcCircleArrowRight42 width="3.5rem" height="3.5rem" />
<span className={moreTextStyle}>더보기</span>
Copy link
Collaborator

Choose a reason for hiding this comment

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

여기서 더보기 클릭시 해당 store 상세페이지로 이동해야 하므로
prop으로 storeId를 전달받고, navigate 해주는 handle함수까지 만들면 좋을 것 같습니다!

thisishwarang
thisishwarang reviewed Jan 14, 2025
View reviewed changes
Copy link
Collaborator

@thisishwarang thisishwarang left a comment

Choose a reason for hiding this comment

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

고생하셨습니다!!

@thisishwarang thisishwarang merged commit 1a2650f into develop Jan 14, 2025
3 checks passed
@thisishwarang thisishwarang deleted the feat/#75/carousel-component branch January 14, 2025 21:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@zzz-myam zzz-myam zzz-myam approved these changes

@youtheyeon youtheyeon youtheyeon approved these changes

@thisishwarang thisishwarang thisishwarang approved these changes

Assignees

@chaeneey chaeneey

Labels
✨ feature 기능 개발 🥨 채연
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[Feat] Carousel 컴포넌트 만들기
4 participants
@chaeneey @thisishwarang @youtheyeon @zzz-myam