Skip to content

[Fix] 모임 카드 태그 없을 때도 카드 레이아웃 공간 유지 #172

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
claudia99503 merged 4 commits into from
Dec 12, 2025
Merged

[Fix] 모임 카드 태그 없을 때도 카드 레이아웃 공간 유지 #172

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2576b2c
fix: 카드 버튼 세로 위치 정렬
claudia99503 Dec 12, 2025
8eac9d6
fix: 태그 없을 때도 카드 레이아웃 공간 유지
claudia99503 Dec 12, 2025
5872e7f
fix: Tailwind 기본 값 사용
claudia99503 Dec 12, 2025
332cbe8
fix: Tailwind 기본 값 사용
claudia99503 Dec 12, 2025
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
6 changes: 2 additions & 4 deletions src/components/shared/card/card-tags/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,9 @@ type CardTagsProps = {
};

export const CardTags = ({ tags }: CardTagsProps) => {
if (!tags?.length) return null;

return (
<div className='mt-1 flex gap-1 overflow-hidden'>
{tags.map((tag) => (
<div className='mt-1 flex min-h-5 gap-1 overflow-hidden'>
{tags?.map((tag) => (
<span
key={tag.id}
className='bg-mint-100 text-text-2xs-medium text-mint-700 inline-flex shrink-0 items-center rounded-full px-2 py-0.5'
Expand Down
46 changes: 25 additions & 21 deletions src/components/shared/card/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,15 +71,17 @@ const Card = ({
onClick={onClick}
>
<div className='flex min-w-0 gap-4'>
<div className='flex flex-col'>
<CardThumbnail
hasThumbnail={hasThumbnail}
thumbnail={thumbnail}
title={title}
onError={() => setImageError(true)}
/>

<CardProfile nickName={nickName} profileImage={profileImage} />
<div className='flex flex-col justify-between'>
Copy link
Member

@HopeFullee HopeFullee Dec 12, 2025

Choose a reason for hiding this comment

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

Suggested change
<div className='flex flex-col justify-between'>
<div className='flex-col-between'>

제가 만든 TW util 보시면 flex-center / flex-between / flex-col-center / flex-col-between 있습니다.
styles/layout.css 가서 보세용

<div>
<CardThumbnail
hasThumbnail={hasThumbnail}
thumbnail={thumbnail}
title={title}
onError={() => setImageError(true)}
/>

<CardProfile nickName={nickName} profileImage={profileImage} />
</div>

{shouldShowButtons && (
<Button
Expand All @@ -96,21 +98,23 @@ const Card = ({
)}
</div>

<div className='flex min-w-0 flex-1 flex-col'>
<h3 className='text-text-md-semibold w-full truncate text-gray-900'>{title}</h3>
<div className='flex min-w-0 flex-1 flex-col justify-between'>
Copy link
Member

@HopeFullee HopeFullee Dec 12, 2025

Choose a reason for hiding this comment

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

Suggested change
<div className='flex min-w-0 flex-1 flex-col justify-between'>
<div className='flex-col-between min-w-0 flex-1'>

여기두 제가 만든거 쓰면 훨신 짧아지쥬?

<div>
<h3 className='text-text-md-semibold w-full truncate text-gray-900'>{title}</h3>

<CardTags tags={cardTags} />
<CardTags tags={cardTags} />

<div className='mt-[13px] flex flex-col gap-1'>
<CardInfoRow iconId='map-pin-1' label={location} />
<CardInfoRow iconId='calendar-1' label={dateTime} />
</div>
<div className='mt-3.25 flex flex-col gap-1'>
<CardInfoRow iconId='map-pin-1' label={location} />
<CardInfoRow iconId='calendar-1' label={dateTime} />
</div>

<CardParticipationRow
maxParticipants={maxParticipants}
participantCount={participantCount}
progress={progress}
/>
<CardParticipationRow
maxParticipants={maxParticipants}
participantCount={participantCount}
progress={progress}
/>
</div>

{shouldShowButtons && (
<Button
Expand Down