refactor: use Iconoir library instead of svg files#140
Conversation
📝 WalkthroughWalkthrough로컬 SVG 아이콘들을 iconoir-react 라이브러리 아이콘으로 교체하고, 일부 아이콘에 color 속성을 추가했습니다. 또한 package.json에서 iconoir-react 버전을 ^7.11.0으로 상향했습니다. 로직, 데이터 흐름, 공개 API는 변경되지 않았습니다. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (6)
src/pages/createGroup/components/MemberCard.tsx (1)
32-32: 아이콘을 클릭 가능 요소로 사용 시 버튼 시맨틱/접근성 보완 필요SVG에 onClick만 부여하면 키보드 접근(Enter/Space)과 포커스 스타일이 누락됩니다. 버튼으로 감싸고 aria-label과 포커스 링을 추가해 주세요. 또한 높이도 지정해 비율을 확실히 유지하세요.
- <Xmark color="rgb(110, 110, 115)" onClick={onCloseClick} className="w-6" /> + <button + type="button" + onClick={onCloseClick} + aria-label="닫기" + className="w-6 h-6 flex items-center justify-center rounded focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary cursor-pointer" + > + <Xmark color="rgb(110, 110, 115)" className="w-6 h-6" aria-hidden="true" /> + </button>추가로, 프로젝트 전역 스타일을 통일하려면 IconoirProvider로 기본 color/size를 설정하는 것도 고려해 주세요.
src/pages/manage/pages/members/sections/memberManagement/MemberTableRow.tsx (1)
65-67: 대통령(그룹장) 표식 아이콘의 접근성 레이블 추가 제안아이콘이 의미 전달용이라면 스크린 리더에 노출되도록 aria-label/title을 넣어 주세요. 반대로 순수 장식이면 aria-hidden을 권장합니다.
- {member.name} {isThisMemberPresident && <Crown color="rgb(235, 85, 40)" />} + {member.name} {isThisMemberPresident && ( + <Crown + color="rgb(235, 85, 40)" + aria-label={t("role.president")} + title={t("role.president")} + /> + )}또한 하드코딩된 rgb 대신 테마 토큰(예: Tailwind 색상/변수)을 사용하면 다크모드와 일관성을 유지하기 쉽습니다.
src/pages/detail/tabs/members/GroupMembersTab.tsx (1)
34-34: 장식 아이콘에 aria-hidden 및 명시적 크기 지정 권장해당 아이콘은 정보 텍스트(인원수) 앞의 장식으로 보입니다. 스크린 리더 노이즈를 줄이고 크기를 명시하세요.
- <UserCircle color="rgb(110, 110, 115)" /> + <UserCircle color="rgb(110, 110, 115)" className="w-5 h-5" aria-hidden="true" />src/pages/main/GroupItem.tsx (3)
42-44: Crown 색상 지정은 충분하며 stroke- 클래스는 의미가 약합니다*Iconoir 아이콘은 stroke="currentColor"이므로 stroke-* 클래스보다 color(또는 text-*)가 유효합니다. 현재 color prop이 있으니 stroke-*는 제거하세요. 필요 시 접근성 레이블도 추가하세요.
- <Crown color="rgb(235, 85, 40)" className="ml-1 inline stroke-dark dark:stroke-d_white" /> + <Crown color="rgb(235, 85, 40)" className="ml-1 inline" aria-hidden="true" />
49-51: Settings 아이콘에 fill- 클래스는 효과가 거의 없습니다*아이콘은 기본적으로 fill="none"입니다. 색상은 color prop 또는 text-* 클래스로 지정하세요. 둘 중 하나로 일관화하는 것을 권장합니다.
- <Settings color="rgb(110, 110, 115)" className="fill-greyDark mr-2" /> + <Settings color="rgb(110, 110, 115)" className="mr-2" aria-hidden="true" />추가로, a 태그 내부에 React Router의 Link를 중첩하는 것은 중첩된 인터랙티브 요소로 HTML/접근성 측면에서 바람직하지 않습니다. 상위 컨테이너를 div로 바꾸고 각각을 별도 링크로 두거나, 전체를 Link로 대체하는 구조를 고려해 주세요.
54-55: NavArrowRight 색상 지정은 text- 사용 권장*stroke-* 대신 text-*가 currentColor에 직접 반영됩니다. 아이콘이 장식이면 aria-hidden 추가도 권장합니다.
- <NavArrowRight className="h-[30px] stroke-dark dark:stroke-d_white" /> + <NavArrowRight className="w-[30px] h-[30px] text-dark dark:text-d_white" aria-hidden="true" />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (9)
package.json(1 hunks)src/components/navbar/Navbar.tsx(2 hunks)src/components/pagination/Pagination.tsx(2 hunks)src/components/select/Select.tsx(2 hunks)src/pages/createGroup/components/MemberCard.tsx(2 hunks)src/pages/detail/tabs/members/GroupMembersTab.tsx(2 hunks)src/pages/main/GroupItem.tsx(2 hunks)src/pages/manage/ManageLayout.tsx(2 hunks)src/pages/manage/pages/members/sections/memberManagement/MemberTableRow.tsx(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
src/components/select/Select.tsx (1)
src/utils/clsx/index.ts (1)
cn(5-5)
🔇 Additional comments (5)
package.json (1)
23-23: 아이콘 의존성 업그레이드 확인Line [23]의 iconoir-react 버전을 7.11.0으로 올린 변경 확인했습니다. 이번 PR에서 사용하는 새 아이콘들이 이 버전에 포함되어 있고 호환성 문제도 없어 보입니다. Based on learnings
src/components/select/Select.tsx (1)
1-1: Select 아이콘 교체 적합Line [1]과 Line [100]에서 NavArrowRight로 교체하면서 기존
IconVariants와rotate-90처리를 그대로 유지해 드롭다운 화살표 동작이 이전과 동일하게 보장됩니다. 문제 없습니다.Also applies to: 100-100
src/components/navbar/Navbar.tsx (1)
2-2: Navbar 아이콘 교체 정상 작동Line [2]와 Line [64]에서 ProfileCircle을 적용하면서 Tailwind 클래스와 지정된 색상(
rgb(235, 85, 40))이 요구사항과 맞아 기존 버튼 배치와 시각 일관성이 유지됩니다.Also applies to: 64-64
src/pages/manage/ManageLayout.tsx (1)
1-1: ManageLayout 뒤로가기 아이콘 정상Line [65]에서 NavArrowRight로 교체하면서
scale-x-[-1]회전을 유지해 기존 좌향 화살표 표현과 동일한 시각 결과를 제공합니다.Also applies to: 65-65
src/components/pagination/Pagination.tsx (1)
5-5: Pagination 아이콘 교체 확인Line [55]-[72]에서 NavArrowRight로 교체하면서
rotate-180,fill-none,stroke-*클래스가 그대로라 좌우 이동 버튼의 시각/상태 표현이 기존과 동일하게 유지됩니다.Also applies to: 55-72
2paperstar
changed the title
| className="hidden items-center justify-center gap-2 md:flex" | ||
| > | ||
| <AccountIcon className="flex h-6" /> | ||
| <ProfileCircle color="rgb(235, 85, 40)" className="flex h-6" /> |
There was a problem hiding this comment.
color를 하드 코딩하지 말고, css에 있는 토큰을 사용해주세요. 아마 className에서 text-primary 를 사용하면 될 거예요
| </div> | ||
|
|
||
| <Close onClick={onCloseClick} className="w-6" /> | ||
| <Xmark color="rgb(110, 110, 115)" onClick={onCloseClick} className="w-6" /> |
| <div className="flex flex-col items-center"> | ||
| <div className="flex gap-1.5 mt-6"> | ||
| <UserCircle /> | ||
| <UserCircle color="rgb(110, 110, 115)" /> |
|
|
||
| {isAdmin && ( | ||
| <Crown className="ml-1 inline stroke-dark dark:stroke-d_white" /> | ||
| <Crown color="rgb(235, 85, 40)" className="ml-1 inline stroke-dark dark:stroke-d_white" /> |
| {isAdmin && ( | ||
| <Link to={`/manage/${group.uuid}/groupinfo`}> | ||
| <Settings className="fill-greyDark mr-2" /> | ||
| <Settings color="rgb(110, 110, 115)" className="fill-greyDark mr-2" /> |
| <th className={cn(cellStyle, "text-greyDark")}> | ||
| <div className="flex items-center gap-2"> | ||
| {member.name} {isThisMemberPresident && <Crown />} | ||
| {member.name} {isThisMemberPresident && <Crown color="rgb(235, 85, 40)" />} |
rhseung
left a comment
rhseung
left a comment
There was a problem hiding this comment.
variables.css와 tailwind.config.js를 확인해서 하드 코딩된 색 대신 컬러 토큰을 사용해보세요
2 participants
#105
account.svg(주황색) > ProfileCircle
crown.svg(주황) > Crown
close.svg(회색) > Xmark
settings.svg(회색) > Settings
arrow-right.svg(흰색) > NavArrowRight
user-circle.svg(회색)> UserCircle
아래는 \assets\src\icons 폴더 내에 대체하지 않은 파일들입니다.
fire-activated.svg, default-profile > Solid 버전이 iconoir에 없음
group-profile-default.svg, search-no-results.svg, notion.svg > 해당 아이콘이 iconoir에 없음
check.svg, share.svg, fire.svg > svg 파일 확인 실패
//흰색
//주황색 rgb(235, 85, 40)
//회색 rgb(110, 110, 115)
Summary by CodeRabbit
스타일
작업(Chores)