[Feat/468] 카드 컴포넌트 레이아웃 및 태그 스타일 수정#468
Conversation
- 이미지와 컨텐츠 영역 래핑 구조 추가 - 이미지 사이즈 조정 - 이미지 border 오버레이 처리 및 색상 opacity 적용
- 제목 영역 line-clamp-2 적용 및 1줄 대응을 위한 max-height 조정 - 구분선 w-px divider 구조로 변경
- 이미지 및 전체 레이아웃 구조 통일 - 텍스트 영역 구조 통일
isRounded 가 false일 시 rounded-md, true일 시 rounded-lg 가 통합 적용되도록 수정 (Tag 컴포넌트가 사용된 모든 코드 확인완료함)
|
Caution Review failedThe pull request is closed. 📝 WalkthroughWalkthrough이 변경 사항들은 여러 카드형 UI 컴포넌트의 스타일과 레이아웃을 개선하는 데 집중되어 있습니다. 주요 변경점은 패딩, 폰트 스타일, 테두리 반경, 이미지 컨테이너 구조, 텍스트 정렬 및 태그 스타일링의 일관성 향상입니다. 기능적 로직이나 이벤트 처리에는 변화가 없습니다. Changes
Sequence Diagram(s)(생성할 만한 주요 제어 흐름 변화가 없으므로 생략합니다.) Estimated code review effort🎯 3 (Moderate) | ⏱️ ~15–20 minutes Possibly related PRs
Suggested labels
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: .coderabbit.yml 📒 Files selected for processing (8)
✨ 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-07T11:17:51.950Z |
![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
📜 Review details
Configuration used: .coderabbit.yml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
src/components/Application/ApplicationPostCard.tsx(1 hunks)src/components/Common/EmployeeCard/EmployeeCard.tsx(1 hunks)src/components/Common/JobPostingCard.tsx(7 hunks)src/components/Common/Tag.tsx(1 hunks)src/components/Employer/ApplicantList/EmployerApplicantCard.tsx(1 hunks)src/components/Home/HomeCareerPostCard.tsx(1 hunks)src/components/Home/HomePostCard.tsx(1 hunks)
🔇 Additional comments (17)
src/components/Common/Tag.tsx (1)
30-30: 태그 컴포넌트의 둥근 모서리 스타일이 적절히 개선되었습니다.
rounded/rounded-sm에서rounded-lg/rounded-md로의 변경으로 더 일관된 디자인 시스템을 제공합니다.src/components/Employer/ApplicantList/EmployerApplicantCard.tsx (1)
13-64: 상태 표시 태그들의 스타일이 일관되게 개선되었습니다.모든 지원 상태에서 패딩(
px-[5px] py-[3px])과 폰트 스타일(caption-11-semibold)이 통일되어 더 나은 시각적 일관성을 제공합니다.src/components/Application/ApplicationPostCard.tsx (1)
11-62: 지원서 상태 태그의 스타일 통일이 잘 적용되었습니다.모든 지원 단계에서 동일한 패딩과 폰트 스타일을 적용하여 UI 일관성을 향상시켰습니다.
src/components/Home/HomeCareerPostCard.tsx (2)
29-29: 카드 너비가 픽셀 기반으로 표준화되었습니다.rem 기반에서 고정 픽셀(152px)로 변경하여 다른 카드 컴포넌트들과 일관성을 유지합니다.
61-72: 태그 영역의 스타일이 디자인 시스템에 맞게 개선되었습니다.패딩과 폰트 스타일 변경(
caption-11-semibold,py-[3px] px-[5px])으로 다른 컴포넌트들과 일관성을 유지합니다.src/components/Common/EmployeeCard/EmployeeCard.tsx (2)
73-73: 세로형 직원 카드의 너비가 표준화되었습니다.다른 카드 컴포넌트들과 동일한 152px 너비로 통일되어 일관된 레이아웃을 제공합니다.
104-112: 태그 스타일링이 잘 표준화되었습니다.옵셔널 체이닝 사용과 함께 패딩(
py-[3px] px-[5px])과 폰트 스타일(caption-11-semibold)이 다른 컴포넌트들과 일관되게 적용되었습니다.src/components/Home/HomePostCard.tsx (4)
38-38: 카드 컨테이너 너비 표준화 승인rem 기반에서 고정 픽셀 너비(152px)로 변경하여 다양한 폰트 크기 설정에서도 일관된 카드 크기를 보장합니다. 디자인 시스템 통일성 측면에서 적절한 변경사항입니다.
41-56: 이미지 컨테이너 구조 개선 승인이미지 컨테이너가 상대/절대 위치를 활용한 오버레이 테두리 구조로 개선되었습니다.
shrink-0클래스로 이미지 크기 일관성을 보장하고, 고정 픽셀 크기(114px)로 레이아웃 안정성을 확보했습니다. 시각적 완성도는 향상되었으나 DOM 구조가 복잡해진 점을 고려하시기 바랍니다.
57-67: 텍스트 구조 및 스타일링 개선 승인텍스트 블록이 더 명확한 계층 구조로 재구성되었고, 제목의 텍스트 색상이 강화되어 시각적 계층이 개선되었습니다. 회사명과 주소 구분자를 span 요소의 배경색으로 구현한 방식이 기존 테두리 방식보다 깔끔합니다.
68-94: 태그 스타일링 통일 승인태그 컴포넌트의 패딩과 폰트 스타일이 일관되게 업데이트되었습니다.
caption-11-semibold로 변경하여 가독성을 향상시키고, 패딩 증가로 터치 영역을 개선했습니다. 두 태그 모두 동일한 스타일 규칙을 적용하여 일관성을 유지했습니다.src/components/Common/JobPostingCard.tsx (6)
59-59: 마감일 태그 스타일 통일 승인태그의 패딩과 폰트 스타일이 다른 카드 컴포넌트와 일관성 있게 업데이트되었습니다. 픽셀 기반 명시적 패딩 값과
caption-11-semibold폰트 스타일로 디자인 시스템 통일성을 확보했습니다.Also applies to: 64-64
82-82: 헤더 정렬 개선 승인컨테이너 정렬을
items-start로 변경하고 북마크 아이콘에 상단 마진을 추가하여 텍스트와의 시각적 균형을 개선했습니다. 제목 텍스트와 아이콘의 정렬이 더욱 자연스러워졌습니다.Also applies to: 86-86
101-101: 회사 정보 표시 개선 승인타이포그래피를
body-14-regular로 업그레이드하여 가독성을 향상시켰고, 구분자를 라인에서 둥근 점(dot)으로 변경하여 더욱 모던한 디자인을 적용했습니다. Flex 정렬로 수직 중앙 정렬도 개선되었습니다.Also applies to: 103-103
126-126: 비자 정보 타이포그래피 통일 승인다른 정보 요소들과 일관성 있게
body-14-regular타이포그래피로 업그레이드하여 전체적인 정보 계층 구조를 개선했습니다.
142-142: 근무일 정보 타이포그래피 통일 승인정보 컴포넌트들의 일관된 타이포그래피 업그레이드로 전체적인 시각적 통일성과 가독성을 향상시켰습니다.
164-164: 태그 리스트 스타일링 개선 승인태그 패딩이 명시적 픽셀 값으로 업데이트되고 폰트 굵기가 증가하여 가독성이 향상되었습니다. 두 번째 태그의 배경색을 반투명 파란색으로 변경하여 시각적 차별화를 구현한 점이 우수합니다. 전체적으로 태그의 시각적 prominence가 개선되었습니다.
Also applies to: 169-169, 179-179, 182-184
| <div className="relative w-[152px] h-[114px] overflow-hidden rounded-lg shrink-0"> | ||
| <div | ||
| className="absolute inset-0 bg-cover bg-center" | ||
| style={{ | ||
| backgroundImage: `url(${cardData.profile_img_url})`, | ||
| }} | ||
| /> | ||
| <div className="absolute inset-0 border border-[#8F919D1A] rounded-lg pointer-events-none" /> | ||
| </div> | ||
| ) : ( | ||
| <div className="flex items-center justify-center w-full h-full text-white bg-gradient-to-r from-purple-500 to-pink-500"> | ||
| No Image | ||
| <div className="relative w-[152px] h-[114px] bg-surface-secondary flex items-center justify-center rounded-lg shrink-0"> | ||
| <div className="absolute inset-0 border border-[#8F919D1A] rounded-lg pointer-events-none" /> | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
이미지 렌더링 방식 개선과 접근성 고려가 필요합니다.
background-image 방식으로 변경하여 더 나은 스타일 제어가 가능하지만, 접근성을 위한 적절한 대안 텍스트 제공이 필요합니다.
접근성 개선을 위해 다음과 같이 수정하세요:
<div className="relative w-[152px] h-[114px] overflow-hidden rounded-lg shrink-0">
<div
className="absolute inset-0 bg-cover bg-center"
style={{
backgroundImage: `url(${cardData.profile_img_url})`,
}}
+ role="img"
+ aria-label={`${cardData.name}의 프로필 이미지`}
/>
<div className="absolute inset-0 border border-[#8F919D1A] rounded-lg pointer-events-none" />
</div>📝 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.
| <div className="relative w-[152px] h-[114px] overflow-hidden rounded-lg shrink-0"> | |
| <div | |
| className="absolute inset-0 bg-cover bg-center" | |
| style={{ | |
| backgroundImage: `url(${cardData.profile_img_url})`, | |
| }} | |
| /> | |
| <div className="absolute inset-0 border border-[#8F919D1A] rounded-lg pointer-events-none" /> | |
| </div> | |
| ) : ( | |
| <div className="flex items-center justify-center w-full h-full text-white bg-gradient-to-r from-purple-500 to-pink-500"> | |
| No Image | |
| <div className="relative w-[152px] h-[114px] bg-surface-secondary flex items-center justify-center rounded-lg shrink-0"> | |
| <div className="absolute inset-0 border border-[#8F919D1A] rounded-lg pointer-events-none" /> | |
| </div> | |
| )} | |
| <div className="relative w-[152px] h-[114px] overflow-hidden rounded-lg shrink-0"> | |
| <div | |
| className="absolute inset-0 bg-cover bg-center" | |
| style={{ | |
| backgroundImage: `url(${cardData.profile_img_url})`, | |
| }} | |
| role="img" | |
| aria-label={`${cardData.name}의 프로필 이미지`} | |
| /> | |
| <div className="absolute inset-0 border border-[#8F919D1A] rounded-lg pointer-events-none" /> | |
| </div> |
🤖 Prompt for AI Agents
In src/components/Common/EmployeeCard/EmployeeCard.tsx around lines 78 to 91,
the profile image is rendered using a background-image style which lacks
accessibility support. To fix this, replace the background-image div with an img
element that includes an appropriate alt attribute for screen readers. This
change ensures the image is accessible while maintaining the existing styles and
layout.
| {careerData.img_urls && careerData.img_urls.length > 0 ? ( | ||
| <div className="relative w-[152px] h-[114px] overflow-hidden rounded-lg shrink-0"> | ||
| <div | ||
| className="absolute inset-0 bg-cover bg-center" | ||
| style={{ | ||
| backgroundImage: `url(${careerData.img_urls[0]})`, | ||
| }} | ||
| /> | ||
| <div className="absolute inset-0 border border-[#8F919D1A] rounded-lg pointer-events-none" /> | ||
| </div> | ||
| ) : ( | ||
| <div className="relative w-[152px] h-[114px] bg-surface-secondary flex items-center justify-center rounded-lg shrink-0"> | ||
| <div className="absolute inset-0 border border-[#8F919D1A] rounded-lg pointer-events-none" /> | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
🛠️ Refactor suggestion
이미지 컨테이너 구조가 개선되었지만 접근성을 고려해주세요.
background-image 방식으로 변경하여 더 나은 스타일링 제어가 가능하지만, 스크린 리더 사용자를 위한 alt 텍스트가 누락되었습니다.
다음과 같이 접근성을 개선할 수 있습니다:
<div className="relative w-[152px] h-[114px] overflow-hidden rounded-lg shrink-0">
<div
className="absolute inset-0 bg-cover bg-center"
style={{
backgroundImage: `url(${careerData.img_urls[0]})`,
}}
+ role="img"
+ aria-label={`${careerData.title} 커리어 이미지`}
/>
<div className="absolute inset-0 border border-[#8F919D1A] rounded-lg pointer-events-none" />
</div>📝 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.
| {careerData.img_urls && careerData.img_urls.length > 0 ? ( | |
| <div className="relative w-[152px] h-[114px] overflow-hidden rounded-lg shrink-0"> | |
| <div | |
| className="absolute inset-0 bg-cover bg-center" | |
| style={{ | |
| backgroundImage: `url(${careerData.img_urls[0]})`, | |
| }} | |
| /> | |
| <div className="absolute inset-0 border border-[#8F919D1A] rounded-lg pointer-events-none" /> | |
| </div> | |
| ) : ( | |
| <div className="relative w-[152px] h-[114px] bg-surface-secondary flex items-center justify-center rounded-lg shrink-0"> | |
| <div className="absolute inset-0 border border-[#8F919D1A] rounded-lg pointer-events-none" /> | |
| </div> | |
| )} | |
| {careerData.img_urls && careerData.img_urls.length > 0 ? ( | |
| <div className="relative w-[152px] h-[114px] overflow-hidden rounded-lg shrink-0"> | |
| <div | |
| className="absolute inset-0 bg-cover bg-center" | |
| style={{ | |
| backgroundImage: `url(${careerData.img_urls[0]})`, | |
| }} | |
| role="img" | |
| aria-label={`${careerData.title} 커리어 이미지`} | |
| /> | |
| <div className="absolute inset-0 border border-[#8F919D1A] rounded-lg pointer-events-none" /> | |
| </div> | |
| ) : ( | |
| <div className="relative w-[152px] h-[114px] bg-surface-secondary flex items-center justify-center rounded-lg shrink-0"> | |
| <div className="absolute inset-0 border border-[#8F919D1A] rounded-lg pointer-events-none" /> | |
| </div> | |
| )} |
🤖 Prompt for AI Agents
In src/components/Home/HomeCareerPostCard.tsx around lines 33 to 47, the image
container uses a background-image style which lacks alt text for screen readers,
reducing accessibility. To fix this, replace the background-image div with an
img element or add an aria-label or role="img" with descriptive text on the
container div to provide meaningful alternative text for screen readers,
ensuring the image content is accessible.
MrMirror21
added
📄 Docs
2 participants
Related issue 🛠
Work Description ✏️
카드 컴포넌트 간 레이아웃 불일치 및 태그 스타일 상이 이슈가 있어, 전체 카드 UI를 기준에 맞춰 통일했습니다.
(카드 컴포넌트 레이아웃 구조를 통일하고, Tag 스타일 조정 및 적용)
• HomePostCard, HomeCareerPostCard, EmployeeCard : 이미지 및 텍스트 정렬, 레이아웃 통일
• EmployeeCard: 상단 정보 정렬 및 padding 수정
• Tag: rounded 값 및 spacing 일괄 정비 (디자인 시스템 반영)
Uncompleted Tasks 😅
N/A
To Reviewers 📢
Summary by CodeRabbit
Style
Refactor