Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughJobPins 컴포넌트는 Balloon 기반 UI에서 Card 기반 그리드로 전환되었습니다. Card 컴포넌트의 북마크 타입이 기본값과 저장 변형으로 분리되어 조건부 렌더링 로직이 추가되었고, 새로운 메모 아이콘이 도입되었습니다. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
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. Comment |
|
✅ Storybook chromatic 배포 확인: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@apps/client/src/pages/jobPins/JobPins.tsx`:
- Around line 16-27: The inner scrollable list div in JobPins.tsx (the element
currently rendered with class string containing "scrollbar-hide mt-[2.6rem] flex
h-screen flex-wrap ... overflow-y-auto") is fixed to h-screen causing double
scroll; replace the height utility with flexible sizing by removing "h-screen"
and adding "flex-1 min-h-0" so the list takes the remaining space in the parent
flex-col and its overflow-y-auto works correctly.
ℹ️ Review info
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
packages/design-system/src/icons/source/ic_memo.svgis excluded by!**/*.svg
📒 Files selected for processing (5)
apps/client/src/pages/jobPins/JobPins.tsxpackages/design-system/src/components/card/Card.stories.tsxpackages/design-system/src/components/card/Card.tsxpackages/design-system/src/components/card/MyBookmarkCard.tsxpackages/design-system/src/icons/iconNames.ts
Comment on lines
+16
to
+27
| <div className="flex h-screen flex-col pl-[8rem] pr-[5rem] pt-[5.2rem]"> | ||
| <div className="flex items-center gap-[1.2rem]"> | ||
| <p className="head3">관심 직무 핀</p> | ||
| <p className="head3 text-main500">기획자</p> | ||
| </div> | ||
| <p className="body3-r text-font-gray-3 mt-[0.8rem]"> | ||
| 같은 직무의 사람들이 저장한 아티클을 살펴봐요. 선택한 직무를 기준으로 | ||
| 최신 핀이 업데이트 돼요! | ||
| </p> | ||
|
|
||
| <div className="text-sm opacity-90">도토리 1개를 모았어요!</div> | ||
| </Balloon> | ||
| <Balloon variant="gray" side="left"> | ||
| <Icon name="ic_info" size={16} /> | ||
| <div className="text-sm opacity-90">도토리 1개를 모았어요!</div> | ||
| </Balloon> | ||
| <Balloon variant="main" side="bottom"> | ||
| <div className="flex items-center gap-3"> | ||
| {/* 캐릭터 이미지 */} | ||
| <Icon name="chippi_profile" size={40} /> | ||
| <div className="scrollbar-hide mt-[2.6rem] flex h-screen flex-wrap content-start gap-[1.6rem] overflow-y-auto scroll-smooth"> | ||
| {MOCK_JOB_PINS.map((pin) => ( |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
wc -l apps/client/src/pages/jobPins/JobPins.tsxRepository: Pinback-Team/pinback-client
Length of output: 115
🏁 Script executed:
cat -n apps/client/src/pages/jobPins/JobPins.tsxRepository: Pinback-Team/pinback-client
Length of output: 1776
카드 리스트의 이중 스크롤 문제
부모 컨테이너는 h-screen의 flex-col 레이아웃이며, 내부 리스트 컨테이너도 h-screen으로 고정되어 있습니다. 헤더와 푸터의 높이까지 추가되면 전체 콘텐츠가 뷰포트를 초과하여 페이지와 리스트 모두에서 스크롤이 발생합니다. Flex 레이아웃에서 리스트는 flex-1 min-h-0으로 변경하여 남은 높이를 자동으로 차지하도록 조정해야 합니다.
🔧 제안 변경
- <div className="scrollbar-hide mt-[2.6rem] flex h-screen flex-wrap content-start gap-[1.6rem] overflow-y-auto scroll-smooth">
+ <div className="scrollbar-hide mt-[2.6rem] flex flex-1 min-h-0 flex-wrap content-start gap-[1.6rem] overflow-y-auto scroll-smooth">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| <div className="flex h-screen flex-col pl-[8rem] pr-[5rem] pt-[5.2rem]"> | |
| <div className="flex items-center gap-[1.2rem]"> | |
| <p className="head3">관심 직무 핀</p> | |
| <p className="head3 text-main500">기획자</p> | |
| </div> | |
| <p className="body3-r text-font-gray-3 mt-[0.8rem]"> | |
| 같은 직무의 사람들이 저장한 아티클을 살펴봐요. 선택한 직무를 기준으로 | |
| 최신 핀이 업데이트 돼요! | |
| </p> | |
| <div className="text-sm opacity-90">도토리 1개를 모았어요!</div> | |
| </Balloon> | |
| <Balloon variant="gray" side="left"> | |
| <Icon name="ic_info" size={16} /> | |
| <div className="text-sm opacity-90">도토리 1개를 모았어요!</div> | |
| </Balloon> | |
| <Balloon variant="main" side="bottom"> | |
| <div className="flex items-center gap-3"> | |
| {/* 캐릭터 이미지 */} | |
| <Icon name="chippi_profile" size={40} /> | |
| <div className="scrollbar-hide mt-[2.6rem] flex h-screen flex-wrap content-start gap-[1.6rem] overflow-y-auto scroll-smooth"> | |
| {MOCK_JOB_PINS.map((pin) => ( | |
| <div className="flex h-screen flex-col pl-[8rem] pr-[5rem] pt-[5.2rem]"> | |
| <div className="flex items-center gap-[1.2rem]"> | |
| <p className="head3">관심 직무 핀</p> | |
| <p className="head3 text-main500">기획자</p> | |
| </div> | |
| <p className="body3-r text-font-gray-3 mt-[0.8rem]"> | |
| 같은 직무의 사람들이 저장한 아티클을 살펴봐요. 선택한 직무를 기준으로 | |
| 최신 핀이 업데이트 돼요! | |
| </p> | |
| <div className="scrollbar-hide mt-[2.6rem] flex flex-1 min-h-0 flex-wrap content-start gap-[1.6rem] overflow-y-auto scroll-smooth"> | |
| {MOCK_JOB_PINS.map((pin) => ( |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@apps/client/src/pages/jobPins/JobPins.tsx` around lines 16 - 27, The inner
scrollable list div in JobPins.tsx (the element currently rendered with class
string containing "scrollbar-hide mt-[2.6rem] flex h-screen flex-wrap ...
overflow-y-auto") is fixed to h-screen causing double scroll; replace the height
utility with flexible sizing by removing "h-screen" and adding "flex-1 min-h-0"
so the list takes the remaining space in the parent flex-col and its
overflow-y-auto works correctly.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
📌 Related Issues
📄 Tasks
⭐ PR Point (To Reviewer)
관심 직무 페이지 mock data 임시로 사용해서 구현했고, myBookmark 컴포넌트에 save variant 추가했습니다.
📷 Screenshot
Summary by CodeRabbit
릴리스 노트