Skip to content

Fix: BaseCard height 조절#314

Open
jjangminii wants to merge 1 commit intodevelopfrom
fix/#313/card-component-detail
Open

Fix: BaseCard height 조절#314
jjangminii wants to merge 1 commit intodevelopfrom
fix/#313/card-component-detail

Conversation

@jjangminii
Copy link
Collaborator

@jjangminii jjangminii commented Mar 11, 2026

📌 Related Issues

관련된 Issue를 태그해주세요. (e.g. - close #25)

📄 Tasks

image
  • 북마크의 카드 컴포넌트에서 높이값이 다 다른 것을 확인하고, 북마크 카드 컴포넌트에 있던 height 고정값을 auto로 변경하였습니다.

⭐ PR Point (To Reviewer)

📷 Screenshot

Summary by CodeRabbit

릴리스 노트

  • 스타일
    • 북마크 카드의 높이가 고정값에서 자동 조정으로 변경되었습니다. 카드가 콘텐츠 크기에 맞게 유연하게 표시됩니다.

@jjangminii jjangminii self-assigned this Mar 11, 2026
@jjangminii jjangminii linked an issue Mar 11, 2026 that may be closed by this pull request
@vercel
Copy link

vercel bot commented Mar 11, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
pinback-client-client Ready Ready Preview, Comment Mar 11, 2026 0:32am
pinback-client-landing Ready Ready Preview, Comment Mar 11, 2026 0:32am

@github-actions github-actions bot added the fix 버그 수정하라 러브버그 label Mar 11, 2026
@coderabbitai
Copy link

coderabbitai bot commented Mar 11, 2026

Walkthrough

MyBookmarkCard 컴포넌트의 BaseCard 컨테이너 스타일을 수정했습니다. 고정 높이 클래스인 h-[33.8rem]을 자동 높이 h-auto로 변경하여 카드가 콘텐츠 크기에 따라 유동적으로 조정되도록 개선했습니다.

Changes

Cohort / File(s) Summary
BookmarkCard 스타일 수정
packages/design-system/src/components/card/MyBookmarkCard.tsx
BaseCard 컨테이너의 높이를 고정값에서 자동 높이로 변경. 카드 레이아웃이 콘텐츠 크기에 따라 유동적으로 조정되도록 수정.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~2분

Possibly related PRs

Suggested labels

fix

Suggested reviewers

  • jllee000
  • constantly-dev

Poem

🐰 카드가 자유롭게 신축하니,
콘텐츠만큼 크기도 맞춰지고,
고정된 틀을 벗어나 더 유연해졌네!
간단하지만 효과적인 수정이야,
레이아웃의 자유로움을 찾았어! ✨

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Title check ✅ Passed PR 제목은 'Fix: BaseCard height 조절'로 변경 사항의 핵심(BaseCard 높이를 고정값에서 auto로 변경)을 명확하게 설명합니다.
Linked Issues check ✅ Passed PR의 코드 변경(BaseCard 높이 auto 조정)은 이슈 #313 요구사항(카드 컴포넌트 상세 수정, 북마크 카테고리 카드 레이아웃)을 만족합니다.
Out of Scope Changes check ✅ Passed 변경 사항은 MyBookmarkCard의 BaseCard 높이 조정만 포함되어 있으며, 이슈 #313의 카드 컴포넌트 레이아웃 수정 범위 내입니다.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Description check ✅ Passed PR 설명이 템플릿의 필수 섹션을 대부분 포함하고 있으며, 변경사항이 명확하게 설명되어 있습니다.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
  • 📝 Generate docstrings (stacked PR)
  • 📝 Generate docstrings (commit on current branch)
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch fix/#313/card-component-detail

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions
Copy link

✅ Storybook chromatic 배포 확인:
🐿️ storybook

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

🧹 Nitpick comments (1)
packages/design-system/src/components/card/MyBookmarkCard.tsx (1)

67-73: 콘텐츠 영역 높이 고정과 h-auto 조합 검토

content 단락은 h-[4.2rem]으로 고정되어 있고 line-clamp-2가 적용되어 있어 내용이 없어도 동일한 높이를 차지합니다. 하지만 Chip 컴포넌트(line 71-73)는 조건부로 렌더링되어 카드 전체 높이에 영향을 줍니다.

h-auto 변경 의도가 콘텐츠에 따른 유연한 높이 조절이라면, Chip이 없을 때도 동일한 공간을 확보하는 placeholder를 추가하거나, 최소 높이를 지정하는 것이 레이아웃 일관성에 도움이 됩니다.

♻️ Chip 영역 높이 일관성 유지 제안
-        {category && categoryColor && (
-          <Chip category={category} color={categoryColor as ChipColor} />
-        )}
+        <div className="min-h-[2.4rem]">
+          {category && categoryColor && (
+            <Chip category={category} color={categoryColor as ChipColor} />
+          )}
+        </div>
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/design-system/src/components/card/MyBookmarkCard.tsx` around lines
67 - 73, The paragraph for the content in MyBookmarkCard currently uses a fixed
height (h-[4.2rem]) together with line-clamp-2 which makes the card reserve
space even when content is empty, while the Chip (rendered when category &&
categoryColor) changes the card height; to fix, change the content block to use
a flexible height (e.g., replace h-[4.2rem] with h-auto and add a min-h
equivalent to preserve baseline spacing) or render a placeholder/empty Chip
container when category is missing so the Chip area always reserves the same
height; update the <p> with content and the conditional rendering of Chip in
MyBookmarkCard to implement one of these approaches so card heights remain
consistent.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/design-system/src/components/card/MyBookmarkCard.tsx`:
- Around line 67-73: The paragraph for the content in MyBookmarkCard currently
uses a fixed height (h-[4.2rem]) together with line-clamp-2 which makes the card
reserve space even when content is empty, while the Chip (rendered when category
&& categoryColor) changes the card height; to fix, change the content block to
use a flexible height (e.g., replace h-[4.2rem] with h-auto and add a min-h
equivalent to preserve baseline spacing) or render a placeholder/empty Chip
container when category is missing so the Chip area always reserves the same
height; update the <p> with content and the conditional rendering of Chip in
MyBookmarkCard to implement one of these approaches so card heights remain
consistent.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 3afa0bec-8031-4039-855f-395cc22709ca

📥 Commits

Reviewing files that changed from the base of the PR and between 2661dd0 and ef9bc91.

📒 Files selected for processing (1)
  • packages/design-system/src/components/card/MyBookmarkCard.tsx

Copy link
Member

@constantly-dev constantly-dev left a comment

Choose a reason for hiding this comment

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

수고하셨습니다! 코멘트 확인해주세요!!


return (
<BaseCard onClick={onClick} className="h-[33.8rem]">
<BaseCard onClick={onClick} className="h-auto">
Copy link
Member

Choose a reason for hiding this comment

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

이렇게 되었을때 메모 내용이 길고 짧은 등의 컨텐츠 차이로 인해 같은 리마인드 카드인데 높이가 다른 경우가 생길 가능성은 없나요?? 그렇게 됐을때 같은 북마크 페이지에서 카드 높이가 달라질 수 있을 것 같은데, 그런 가능성은 없는지 궁금합니다.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

메모 내용에 대해서 h-[4.2rem] 로 높이 명시해있어서 해당 이슈에 대해서는 문제 없을 것 같습니다.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

fix 버그 수정하라 러브버그

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Fix] 카드 컴포넌트 디테이 수정

2 participants