[Fix/472] Card 내 Tag/Divider 시각 통일 및 토큰 적용#473
Conversation
📝 WalkthroughWalkthrough이 PR은 여러 카드 컴포넌트의 Tag 및 구분자 스타일을 디자인 시스템에 맞게 일관적으로 수정합니다. 주요 변경 사항은 Tag의 배경색을 컬러토큰으로 교체하고, 패딩 및 구분자(점) 스타일을 개선하는 것입니다. 기능적 로직 변경은 없습니다. Changes
Sequence Diagram(s)(해당 변경은 UI 스타일 개선에 한정되어 있으며, 제어 흐름이나 기능적 상호작용에는 영향을 주지 않으므로 시퀀스 다이어그램 생략) Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Assessment against linked issues
Assessment against linked issues: Out-of-scope changes(해당 PR에서는 모든 변경이 이슈 #472의 요구사항과 직접적으로 연관되어 있으므로, 범위를 벗어난 변경사항이 없습니다.) Possibly related PRs
Suggested reviewers
Note 🔌 MCP (Model Context Protocol) integration is now available in Early Access!Pro users can now connect to remote MCP servers under the Integrations page to get reviews and chat conversations that understand additional development context. ✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
✅ Vitest Test Results📉 Coverage Warnings
🎉 All tests passed!Great job! All 177 tests are working correctly across 22 test files. 🔗 Quick Actions
🤖 Generated by GitHub Actions at 2025-08-08T10:23:24.297Z |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (9)
src/components/Home/HomeCareerPostCard.tsx (1)
56-57: 시각 분리자(span)에 접근성 속성 추가 제안의미 없는 장식 요소이므로 스크린리더에서 무시되도록 aria-hidden을 추가하는 것을 권장합니다.
적용 diff:
- <span className="w-0.5 h-0.5 bg-neutral-500 rounded-full mx-1"></span> + <span aria-hidden="true" className="w-0.5 h-0.5 bg-neutral-500 rounded-full mx-1"></span>src/components/PostSearch/PostCardList.tsx (2)
80-84: items-center만 추가되어 효과 미적용 — flex 추가 권장부모 p 엘리먼트에 flex가 없어 items-center가 효과가 없습니다. 의도대로라면 flex를 함께 추가하세요.
적용 diff:
- <p className="pt-[0.125rem] pb-2 caption-12-regular text-text-alternative whitespace-normal items-center"> + <p className="pt-[0.125rem] pb-2 caption-12-regular text-text-alternative whitespace-normal flex items-center">
82-82: 시각 분리자(span)에 접근성 속성 추가장식 목적이므로 aria-hidden 추가를 권장합니다.
적용 diff:
- <span className="inline-block w-0.5 h-0.5 bg-neutral-500 rounded-full mx-1 align-middle"></span> + <span aria-hidden="true" className="inline-block w-0.5 h-0.5 bg-neutral-500 rounded-full mx-1 align-middle"></span>src/components/Home/HomePostCard.tsx (1)
65-65: 시각 분리자(span)에 접근성 속성 추가장식 요소인 점 분리자에 aria-hidden을 추가하면 스크린리더 노이즈를 줄일 수 있습니다.
적용 diff:
- <span className="w-0.5 h-0.5 bg-neutral-500 rounded-full mx-1"></span> + <span aria-hidden="true" className="w-0.5 h-0.5 bg-neutral-500 rounded-full mx-1"></span>src/components/Common/JobPostingCard.tsx (3)
103-105: 시각 분리자(span)에 접근성 속성 추가장식 요소인 점 분리자에 aria-hidden 추가 권장.
적용 diff:
- <span className="w-0.5 h-0.5 bg-neutral-500 rounded-full mx-1"></span> + <span aria-hidden="true" className="w-0.5 h-0.5 bg-neutral-500 rounded-full mx-1"></span>
126-129: 불필요한 Tailwind 유틸 제거 제안(items-center)span에 items-center는 효과가 없습니다(자체가 flex 컨테이너가 아님). align-middle만으로 충분하며, 필요 시 inline-flex를 고려하세요.
적용 diff:
- <span className="body-14-regular text-text-normal whitespace-normal items-center align-middle"> + <span className="body-14-regular text-text-normal whitespace-normal align-middle">
142-149: 불필요한 Tailwind 유틸 제거 제안(items-center)위와 동일하게 span에서 items-center는 무의미합니다.
적용 diff:
- <span className="body-14-regular text-text-normal whitespace-normal items-center align-middle"> + <span className="body-14-regular text-text-normal whitespace-normal align-middle">src/components/PostSearch/CareerCardList.tsx (2)
52-52: Tag 좌우 패딩 수치 정밀도 보정 제안 (0.313rem → 0.3125rem 또는 5px)
px-[0.313rem]은 약 5.008px로 렌더링되어 불필요한 서브픽셀(반올림) 이슈가 생길 수 있습니다. 디자인 스펙이 정확히 5px라면 아래처럼 0.3125rem(=5px)로 맞추는 것을 권장합니다.- padding="px-[0.313rem] py-[0.188rem]" + padding="px-[0.3125rem] py-[0.188rem]"
75-85: dot 구분자 공통 컴포넌트화 제안 (재사용·일관성·a11y 기본값 확보)여러 카드/리스트에서 점 구분자를 반복 사용하므로
DotDivider(size, color, margin, a11y 기본 속성 내장)로 추출하면 유지보수와 일관성 향상에 도움이 됩니다.
📜 Review details
Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/components/Common/EmployeeCard/EmployeeCard.tsx(1 hunks)src/components/Common/JobPostingCard.tsx(5 hunks)src/components/Home/HomeCareerPostCard.tsx(1 hunks)src/components/Home/HomePostCard.tsx(2 hunks)src/components/PostSearch/CareerCardList.tsx(2 hunks)src/components/PostSearch/PostCardList.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (2)
src/components/PostSearch/PostCardList.tsx (1)
src/components/Common/JobPostingCard.tsx (1)
JobPostingCard(190-199)
src/components/PostSearch/CareerCardList.tsx (1)
src/constants/postSearch.ts (1)
CAREER_CATEGORY(201-207)
🔇 Additional comments (9)
src/components/Home/HomeCareerPostCard.tsx (1)
63-65: Tag 텍스트 컬러 토큰 적합성 확인 요청bg-status-blue-100 배경에 text-text-success(보통 성공/그린 톤) 조합이 디자인 시스템 의도와 대비 기준(AA) 모두 충족하는지 확인이 필요합니다. 의도된 팔레트라면 OK, 아니라면 블루 계열 텍스트(예: text-status-blue-700)나 일반 텍스트 토큰으로 조정이 필요할 수 있습니다.
src/components/Home/HomePostCard.tsx (1)
80-83: Tag 텍스트 컬러 토큰 적합성 확인 요청bg-status-blue-100 + text-text-success 조합이 DS 가이드와 색 대비 기준을 충족하는지 확인 부탁드립니다. 의도된 조합이 아니라면 블루 계열 텍스트 토큰으로의 조정이 필요할 수 있습니다.
src/components/Common/JobPostingCard.tsx (2)
62-65: 마감(Tag) 배경색 레드 고정 — 상태별 색상 매핑 검토 요청상시모집/마감임박/마감 등 상태가 다양한데 bg-status-red-100이 항상 적용됩니다. DS 의도대로 상태별 색상(예: 상시=중립/블루, 임박=경고/레드, 마감=디스에이블드 등)로 분기해야 하는지 확인 부탁드립니다. 현재 변경은 토큰 전환은 맞지만 의미론적 색상 매핑이 누락되었을 수 있습니다.
182-185: Tag 텍스트 컬러 토큰 적합성 확인 요청bg-status-blue-100와 text-text-success 조합이 의도 및 대비 기준을 충족하는지 확인 바랍니다. 의도 불일치 시 블루 계열 텍스트 토큰 또는 일반 텍스트 토큰으로 조정 제안.
src/components/Common/EmployeeCard/EmployeeCard.tsx (2)
49-55: Tag 패딩 스펙 업데이트는 적절 — 텍스트 컬러 토큰 적합성 확인 요청패딩 스펙은 통일성 측면에서 👍. 다만 bg-status-blue-100 + text-text-success 조합이 DS 의도와 대비 기준에 부합하는지 확인 부탁드립니다.
58-64: Visa Tag 패딩 스펙 통일 👍세로/가로 패딩 조정이 다른 컴포넌트와 일관적입니다.
src/components/PostSearch/CareerCardList.tsx (3)
56-58: 컬러/타이포 토큰 적용 LGTM
bg-status-red-100,caption-11-semibold로의 전환 좋습니다. 디자인 토큰 일관성 측면에서 적절합니다.
75-75: dotDivider 컨테이너를 flex로 변경한 점 LGTM
flex items-center로 변경하여 점 구분자의 수직 정렬과 크기 적용을 보장한 점 적절합니다.
81-81: 두 번째 정보 라인의 flex 적용도 LGTM동일한 정렬/줄바꿈 특성 확보에 유효합니다.
MrMirror21
left a comment
MrMirror21
left a comment
There was a problem hiding this comment.
수고하셨습니다! 제가 누락했던 컬러 토큰 적용해주셔서 감사해요 👍
2 participants
Related issue 🛠
Work Description ✏️
기존 카드 컴포넌트(JobPostingCard 등) 내에서 사용되는 Tag와 Divider 스타일이 일관되지 않아, 다음 기준에 맞춰 통합 및 개선하였습니다. (일부 Tag의 배경색상이 렌더되지 않은 이슈 존재)
<JobPostingCard.Visa />와<JobPostingCard.WorkDayInfo />에align-middle을 추가하였습니다.inline-block속성이 추가되어 있습니다.Uncompleted Tasks 😅
N/A
To Reviewers 📢
Summary by CodeRabbit