Skip to content

메인카드 카테고리 추가 및 높이수정 #217

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

Merged
Taeil08 merged 1 commit into from
Aug 2, 2025
Merged

메인카드 카테고리 추가 및 높이수정 #217

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion apps/what-today/src/pages/main/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,7 @@ export default function MainPage() {
<MemoizedMainCard
key={`${item.id}-${currentPage}-${index}`}
bannerImageUrl={item.bannerImageUrl}
category={item.category}
price={item.price}
rating={item.rating}
reviewCount={item.reviewCount}
Expand All @@ -159,7 +160,7 @@ export default function MainPage() {
{/* 인기 체험 */}
<div className='flex flex-col gap-20'>
<h2 className='title-text'>🔥 인기 체험</h2>
<div className='-mx-15 flex'>
<div className='flex'>
<Carousel items={popularActivities} itemsPerPage={4} onClick={(id) => navigate(`/activities/${id}`)} />
</div>
</div>
Expand Down
4 changes: 3 additions & 1 deletion packages/design-system/src/components/Carousel/Carousel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default function Carousel({ items, itemsPerPage: initialItemsPerPage = 4,

return (
<div className='relative w-full overflow-visible'>
<div className='relative mx-auto flex max-w-6xl items-center justify-center'>
<div className='relative mx-auto flex items-center justify-center'>
{/* 왼쪽 버튼 */}
<NavigationButton direction='left' disabled={page === 0} onClick={handlePrev} />

Expand All @@ -50,6 +50,7 @@ export default function Carousel({ items, itemsPerPage: initialItemsPerPage = 4,
>
<MainCard.Root
bannerImageUrl={item.bannerImageUrl}
category={item.category}
price={item.price}
rating={item.rating}
reviewCount={item.reviewCount}
Expand Down Expand Up @@ -77,6 +78,7 @@ export default function Carousel({ items, itemsPerPage: initialItemsPerPage = 4,
<MainCard.Root
key={item.id}
bannerImageUrl={item.bannerImageUrl}
category={item.category}
className='w-265 shrink-0'
price={item.price}
rating={item.rating}
Expand Down
1 change: 1 addition & 0 deletions packages/design-system/src/components/Carousel/types/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,4 +28,5 @@ export interface CarouselProps {
rating: number;
reviewCount: number;
bannerImageUrl: string;
category: string;
}
27 changes: 16 additions & 11 deletions packages/design-system/src/components/MainCard/Content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default function MainCardContent({
priceClassName,
iconColor = '#FFC23D',
}: Props) {
const { title, price, rating, reviewCount } = useMainCardContext();
const { title, price, rating, reviewCount, category } = useMainCardContext();

return (
<div className='absolute bottom-0 left-0 w-full'>
Expand All @@ -28,18 +28,23 @@ export default function MainCardContent({
className,
)}
>
<div className='flex flex-col gap-4'>
<h3 className={twMerge('body-text line-clamp-1 truncate font-bold', titleClassName)}>{title}</h3>
<div className='caption-text flex items-center gap-2'>
<StarIcon filled className='size-15' color={iconColor} />
<span className={twMerge('', ratingClassName)}>{rating}</span>
<div className='text-gray-400'>({reviewCount.toLocaleString()})</div>
<div className='flex flex-col gap-20'>
<div className='flex flex-col gap-2'>
<span className='caption-text text-gray-400'>{category}</span>
<h3 className={twMerge('body-text line-clamp-1 truncate font-bold', titleClassName)}>{title}</h3>
<div className='caption-text flex items-center gap-2'>
<StarIcon filled className='size-15' color={iconColor} />
<span className={twMerge('', ratingClassName)}>{rating}</span>
<div className='text-gray-400'>({reviewCount.toLocaleString()})</div>
</div>
</div>
<div>
<p className={twMerge('body-text font-bold', priceClassName)}>
₩ {price.toLocaleString()}
<span className='font-normal text-gray-400'> /인</span>
</p>
</div>
</div>
<p className={twMerge('body-text font-bold', priceClassName)}>
₩ {price.toLocaleString()}
<span className='font-normal text-gray-400'> /인</span>
</p>
</div>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion packages/design-system/src/components/MainCard/Image.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default function MainCardImage({ className }: { className?: string }) {
<div className={twMerge('w-full rounded-xl border border-gray-50', className)}>
<img
alt={`${title} 체험 이미지`}
className='h-260 w-full rounded-xl object-cover md:h-366 lg:h-300'
className='h-260 w-full rounded-xl object-cover md:h-366 lg:h-340'
loading='lazy'
src={bannerImageUrl}
/>
Expand Down
3 changes: 2 additions & 1 deletion packages/design-system/src/components/MainCard/MainCardRoot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,11 @@ export default function MainCardRoot({
reviewCount,
children,
className,
category,
onClick,
}: MainCardProps) {
return (
<MainCardContext.Provider value={{ title, price, bannerImageUrl, rating, reviewCount, onClick }}>
<MainCardContext.Provider value={{ title, price, bannerImageUrl, rating, reviewCount, category, onClick }}>
<div className='rounded-xl'>
<div
className={twMerge(
Expand Down
1 change: 1 addition & 0 deletions packages/design-system/src/components/MainCard/types/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export interface MainCardContextType {
bannerImageUrl: string;
rating: number;
reviewCount: number;
category: string;
onClick?: () => void;
}

Expand Down
31 changes: 23 additions & 8 deletions packages/design-system/src/pages/MainCardDoc.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import DocTemplate, { DocCode } from '../layouts/DocTemplate';

/* Playground는 편집 가능한 코드 블록입니다. */
/* Playground에서 사용할 예시 코드를 작성해주세요. */
const code = `<MainCard
const code = `<MainCard.Root
title='스카이다이빙'
price={200000}
bannerImageUrl='https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1000&q=80'
Expand All @@ -15,7 +15,7 @@ const code = `<MainCard
>
<MainCard.Image />
<MainCard.Content />
</MainCard>`;
</MainCard.Root>`;

export default function MainCardDoc() {
return (
Expand Down Expand Up @@ -59,24 +59,26 @@ Main에서 쓰이는 인기체험 모든체험 Card입니다.
</div>
<h3 className='text-2xl'>기본 MainCard 예시 입니다.</h3>
<DocCode
code={` <MainCard
code={` <MainCard.Root
title='스카이다이빙'
price={200000}
bannerImageUrl='https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1000&q=80'
rating={4.8}
reviewCount={121}
category="식음료"
className='w-[265px]'
>
<MainCard.Image />
<MainCard.Content />
</MainCard>`}
</MainCard.Root>`}
/>

<h3 className='text-2xl'>커스텀 MainCard 예시 입니다.</h3>

<div>
<div className='flex gap-20'>
<MainCard.Root
bannerImageUrl='https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1000&q=80'
category='식음료'
className='w-[265px]'
price={200000}
rating={4.8}
Expand All @@ -85,22 +87,35 @@ Main에서 쓰이는 인기체험 모든체험 Card입니다.
>
<MainCard.Image className='rounded-t-3xl brightness-90 contrast-125' />
<MainCard.Content
className='rounded-b-3xl border-t border-white/10 bg-gradient-to-t from-black/60 to-transparent px-16 py-12 shadow-xl'
className='rounded-b-3xl border-t border-white/10 bg-gradient-to-t from-black/60 to-transparent px-16 py-12 text-white shadow-xl'
Copy link
Contributor

@MyungJiwoo MyungJiwoo Aug 2, 2025

Choose a reason for hiding this comment

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

잉? shadow-xl이 어디 들어가있나요..?

iconColor='#FFD700' // 골드 컬러
priceClassName='text-pink-400 font-bold text-lg'
ratingClassName='text-emerald-300 font-semibold'
titleClassName='text-white font-extrabold tracking-wider drop-shadow-[0_2px_2px_rgba(0,0,0,0.7)]'
/>
</MainCard.Root>
<MainCard.Root
bannerImageUrl='https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1000&q=80'
category='식음료'
className='w-[265px]'
price={200000}
rating={4.8}
reviewCount={121}
title='스카이다이빙'
>
<MainCard.Image className='rounded-t-3xl brightness-90 contrast-125' />
<MainCard.Content />
</MainCard.Root>
</div>

<DocCode
code={` <MainCard
code={` <MainCard.Root
bannerImageUrl='https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1000&q=80'
className='w-[265px]'
price={200000}
rating={4.8}
reviewCount={121}
category="식음료"
title='스카이다이빙'
>
<MainCard.Image className='rounded-t-3xl brightness-90 contrast-125' />
Expand All @@ -111,7 +126,7 @@ Main에서 쓰이는 인기체험 모든체험 Card입니다.
ratingClassName='text-emerald-300 font-semibold'
priceClassName='text-pink-400 font-bold text-lg'
/>
</MainCard>`}
</MainCard.Root>`}
/>
</>
);
Expand Down