[refactor] semantic typography 클래스 정리#170
Merged
Conversation
Contributor
|
Warning Rate limit exceeded
⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (7)
Walkthrough기존 대문자 타이포그래피 유틸리티 클래스(H3, Sub2 등)를 새로운 text-* 시맨틱 클래스명으로 광범위하게 교체합니다. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~12 minutes 근거: 동일한 패턴의 반복적 클래스명 치환으로 구성되어 있으며, 로직 변경이 전혀 없습니다. 다만 파일 수가 많으므로 일관성 검증이 필요합니다. 기본 alias가 Possibly related PRs
🚥 Pre-merge checks | ✅ 4✅ Passed checks (4 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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/styles/typography.css (1)
165-189: 🛠️ Refactor suggestion | 🟠 Majorcaption 계열 alias 이름은
text-cap*쪽으로 맞춰주세요.이번 PR에서 public alias를
text-caption*로 열어두면, 문서화된text-cap1/text-cap2와 네이밍이 갈립니다. 지금 같이 바뀐 사용처들도 이 이름을 따라가고 있어서, 여기서 맞추지 않으면 다음 정리 때 한 번 더 손보게 됩니다. 최소한text-cap*alias는 같이 제공하고, 가능하면 사용처도 그 기준으로 맞추는 편이 좋겠습니다.예시
- .text-caption1, + .text-cap1, + .text-caption1, .Caption1 { font-size: var(--Caption1); line-height: var(--leading-cap1); font-weight: var(--font-weight-regular); } - .text-caption1-strong, + .text-cap1-strong, + .text-caption1-strong, .Caption1-strong { font-size: var(--Caption1); line-height: var(--leading-cap1); font-weight: var(--font-weight-semibold); } - .text-caption2, + .text-cap2, + .text-caption2, .Caption2 { font-size: var(--Caption2); line-height: var(--leading-cap2); font-weight: var(--font-weight-regular); } - .text-caption2-strong, + .text-cap2-strong, + .text-caption2-strong, .Caption2-strong { font-size: var(--Caption2); line-height: var(--leading-cap2); font-weight: var(--font-weight-semibold); }Based on learnings,
Use typography tokens (\text-h1` through `text-h5`, `text-sub1` through `text-sub4`, `text-body1` through `text-body3`, `text-cap1` through `text-cap2`) from `src/styles/theme.css``.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/styles/typography.css` around lines 165 - 189, The caption class aliases (.text-caption1, .text-caption1-strong, .text-caption2, .text-caption2-strong and their PascalCase variants) should also expose the shorter token names used across the codebase; add matching alias selectors for .text-cap1, .text-cap1-strong, .text-cap2, and .text-cap2-strong (and their .Caption variants if desired) that reuse the same declarations (font-size: var(--Caption1/2), line-height: var(--leading-cap1/2), font-weight: var(--font-weight-regular/semibold)) so the public API matches documented tokens like text-cap1/text-cap2.
🧹 Nitpick comments (6)
src/pages/Manager/components/TimePicker/index.tsx (1)
2-2: 선택 사항:twMerge대신cn()유틸리티 사용 권장코딩 가이드라인에 따르면 Tailwind 클래스 병합 시
src/utils/ts/cn.ts의cn()유틸리티를 사용해야 합니다. 현재 PR 범위 밖이지만, 추후 리팩토링 시 고려해 주세요.-import { twMerge } from 'tailwind-merge'; +import { cn } from '@/utils/ts/cn';- className={twMerge( + className={cn(Also applies to: 179-182, 208-211
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/Manager/components/TimePicker/index.tsx` at line 2, The file imports and uses twMerge for merging Tailwind classes; per guidelines, replace twMerge with the project's cn() utility: remove the twMerge import and instead import cn from src/utils/ts/cn.ts, then change all twMerge(...) calls inside the TimePicker component (and other occurrences in this file) to cn(...), preserving the same arguments and any conditional class logic so behavior and typing remain the same.src/pages/Chat/index.tsx (1)
47-47:text-caption2대신 공식 토큰명으로 통일해주세요.호환 alias를 남겨두더라도, 새 사용처는 canonical 이름으로 고정하는 편이 좋습니다. 지금 형태면
cap/caption네이밍이 다시 섞입니다.Based on learnings: Use typography tokens (`text-h1` through `text-h5`, `text-sub1` through `text-sub4`, `text-body1` through `text-body3`, `text-cap1` through `text-cap2`) from `src/styles/theme.css`.제안 수정
- {isGroup && <span className="bg-primary text-caption2 rounded px-1.5 py-0.5 text-white">단체</span>} + {isGroup && <span className="bg-primary text-cap2 rounded px-1.5 py-0.5 text-white">단체</span>}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/Chat/index.tsx` at line 47, The span uses the deprecated/alias token "text-caption2"; change it to the canonical typography token "text-cap2" in the Chat component JSX (the element rendering the 단체 badge where isGroup is checked) so the className reads "bg-primary text-cap2 rounded px-1.5 py-0.5 text-white"; leave any alias definitions in CSS if desired but update new usages to the canonical token name.src/pages/User/MyPage/components/UserInfoCard.tsx (1)
2-2:cn()유틸리티 사용 권장 (optional)
twMerge대신cn()유틸리티(@/utils/ts/cn.ts) 사용이 코딩 가이드라인에서 권장됩니다. 이 PR 범위 외이므로 추후 리팩터링 시 고려해주세요.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/User/MyPage/components/UserInfoCard.tsx` at line 2, The file imports and uses twMerge in UserInfoCard.tsx; please replace usage of the twMerge import with the project's cn() utility: remove the "twMerge" import, import cn instead, and update all calls that currently use twMerge(...) to use cn(...). Target the import statement and any occurrences of twMerge in the UserInfoCard component (e.g., className composition sites) so the component uses cn() consistently; this is optional refactor to align with coding guidelines.src/pages/Manager/ManagedRecruitmentWrite/index.tsx (1)
253-253:text-caption1도 canonical token과 맞춰주세요.
text-caption1를 화면 코드에 직접 퍼뜨리면text-cap1/text-caption1이 동시에 남습니다. caption 네이밍을 바꿀 계획이면 가이드와 토큰 명세까지 같이 맞추고, 아니라면 여기서는text-cap1로 유지하는 편이 깔끔합니다.♻️ 제안
- <span className="text-caption1 bg-indigo-5 rounded-full px-2 py-1 text-center text-indigo-600"> + <span className="text-cap1 bg-indigo-5 rounded-full px-2 py-1 text-center text-indigo-600"> ... - <span className="text-caption1 rounded-full bg-red-50 px-2 py-1 text-center text-red-500"> + <span className="text-cap1 rounded-full bg-red-50 px-2 py-1 text-center text-red-500">As per coding guidelines, use typography tokens (
text-h1throughtext-h5,text-sub1throughtext-sub4,text-body1throughtext-body3,text-cap1throughtext-cap2) fromsrc/styles/theme.css.Also applies to: 298-300
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/Manager/ManagedRecruitmentWrite/index.tsx` at line 253, The span in the ManagedRecruitmentWrite component uses the non-canonical class "text-caption1"; update it to the canonical token "text-cap1" (and replace any other occurrences of "text-caption1" in this file, e.g., the ones around the same block referenced at lines ~298-300) so the component uses the standardized typography tokens from theme.css; search for "text-caption1" in ManagedRecruitmentWrite and replace with "text-cap1" to keep naming consistent with the design tokens.src/pages/Schedule/index.tsx (1)
116-116:text-caption2를 새 표준으로 쓸 거면 가이드도 같이 정리해주세요.현재 저장소 규칙은 caption 계열을
text-cap2로 정의하고 있어서, 여기서text-caption2를 쓰기 시작하면 토큰 네이밍이 다시 두 벌로 나뉩니다. 코드에서는text-cap2로 맞추거나, 이번 PR에서 typography 가이드/토큰 명세를 함께 갱신하는 편이 더 일관됩니다.♻️ 제안
- <ul className="text-caption2 flex shrink-0 gap-3 overflow-x-auto px-6 py-3 font-medium text-[`#4B5563`]"> + <ul className="text-cap2 flex shrink-0 gap-3 overflow-x-auto px-6 py-3 font-medium text-[`#4B5563`]">As per coding guidelines, use typography tokens (
text-h1throughtext-h5,text-sub1throughtext-sub4,text-body1throughtext-body3,text-cap1throughtext-cap2) fromsrc/styles/theme.css.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/Schedule/index.tsx` at line 116, The component is using a nonstandard typography token "text-caption2" in the UL's className; to follow the repo tokens in src/styles/theme.css, replace "text-caption2" with the established "text-cap2" in the Schedule component (the UL with className currently containing text-caption2) so the code uses the canonical token, or if you intentionally want a new token, add and document "text-caption2" in the typography guide and update theme.css accordingly—prefer the former (switch to text-cap2) for consistency.src/pages/Home/components/SimpleAppliedClubCard.tsx (1)
21-21:text-caption1대신 표준 토큰명으로 맞춰주세요.이번 PR 목적이 타이포 네이밍 통일이라 여기만
captionalias를 쓰면 규칙이 다시 갈립니다. 가능하면theme.css기준 토큰명으로 통일하는 편이 좋습니다.As per coding guidelines, "Use typography tokens (`text-h1` through `text-h5`, `text-sub1` through `text-sub4`, `text-body1` through `text-body3`, `text-cap1` through `text-cap2`) from `src/styles/theme.css`."♻️ 제안 수정
- <div className="text-caption1 text-text-500 bg-text-100/90 flex items-center gap-0.5 rounded-full px-3 py-1"> + <div className="text-cap1 text-text-500 bg-text-100/90 flex items-center gap-0.5 rounded-full px-3 py-1">🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/pages/Home/components/SimpleAppliedClubCard.tsx` at line 21, Replace the non-standard typography token "text-caption1" in the SimpleAppliedClubCard component with the project's standard token from theme.css (e.g., one of text-cap1 or text-cap2) so the class string on the div with className "text-caption1 text-text-500 bg-text-100/90 ..." uses the canonical token; update the className to the appropriate token (pick text-cap1 or text-cap2 to match sizing/visuals) and run a quick visual check to confirm spacing remains correct.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/pages/Home/index.tsx`:
- Line 127: The Link in the Home component uses w-full but Link renders an
inline <a>, so the width class won't apply; update the Link in
src/pages/Home/index.tsx (the Link to="/clubs" element) to include a display
utility like "block" or "flex" in its className (e.g., add "block" or "flex"
alongside "w-full bg-primary ...") so the full-width background and click area
take effect.
---
Outside diff comments:
In `@src/styles/typography.css`:
- Around line 165-189: The caption class aliases (.text-caption1,
.text-caption1-strong, .text-caption2, .text-caption2-strong and their
PascalCase variants) should also expose the shorter token names used across the
codebase; add matching alias selectors for .text-cap1, .text-cap1-strong,
.text-cap2, and .text-cap2-strong (and their .Caption variants if desired) that
reuse the same declarations (font-size: var(--Caption1/2), line-height:
var(--leading-cap1/2), font-weight: var(--font-weight-regular/semibold)) so the
public API matches documented tokens like text-cap1/text-cap2.
---
Nitpick comments:
In `@src/pages/Chat/index.tsx`:
- Line 47: The span uses the deprecated/alias token "text-caption2"; change it
to the canonical typography token "text-cap2" in the Chat component JSX (the
element rendering the 단체 badge where isGroup is checked) so the className reads
"bg-primary text-cap2 rounded px-1.5 py-0.5 text-white"; leave any alias
definitions in CSS if desired but update new usages to the canonical token name.
In `@src/pages/Home/components/SimpleAppliedClubCard.tsx`:
- Line 21: Replace the non-standard typography token "text-caption1" in the
SimpleAppliedClubCard component with the project's standard token from theme.css
(e.g., one of text-cap1 or text-cap2) so the class string on the div with
className "text-caption1 text-text-500 bg-text-100/90 ..." uses the canonical
token; update the className to the appropriate token (pick text-cap1 or
text-cap2 to match sizing/visuals) and run a quick visual check to confirm
spacing remains correct.
In `@src/pages/Manager/components/TimePicker/index.tsx`:
- Line 2: The file imports and uses twMerge for merging Tailwind classes; per
guidelines, replace twMerge with the project's cn() utility: remove the twMerge
import and instead import cn from src/utils/ts/cn.ts, then change all
twMerge(...) calls inside the TimePicker component (and other occurrences in
this file) to cn(...), preserving the same arguments and any conditional class
logic so behavior and typing remain the same.
In `@src/pages/Manager/ManagedRecruitmentWrite/index.tsx`:
- Line 253: The span in the ManagedRecruitmentWrite component uses the
non-canonical class "text-caption1"; update it to the canonical token
"text-cap1" (and replace any other occurrences of "text-caption1" in this file,
e.g., the ones around the same block referenced at lines ~298-300) so the
component uses the standardized typography tokens from theme.css; search for
"text-caption1" in ManagedRecruitmentWrite and replace with "text-cap1" to keep
naming consistent with the design tokens.
In `@src/pages/Schedule/index.tsx`:
- Line 116: The component is using a nonstandard typography token
"text-caption2" in the UL's className; to follow the repo tokens in
src/styles/theme.css, replace "text-caption2" with the established "text-cap2"
in the Schedule component (the UL with className currently containing
text-caption2) so the code uses the canonical token, or if you intentionally
want a new token, add and document "text-caption2" in the typography guide and
update theme.css accordingly—prefer the former (switch to text-cap2) for
consistency.
In `@src/pages/User/MyPage/components/UserInfoCard.tsx`:
- Line 2: The file imports and uses twMerge in UserInfoCard.tsx; please replace
usage of the twMerge import with the project's cn() utility: remove the
"twMerge" import, import cn instead, and update all calls that currently use
twMerge(...) to use cn(...). Target the import statement and any occurrences of
twMerge in the UserInfoCard component (e.g., className composition sites) so the
component uses cn() consistently; this is optional refactor to align with coding
guidelines.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: aa18b75b-817a-490b-a4e0-a3ecb6097f55
📒 Files selected for processing (41)
src/components/common/ToggleSwitch.tsxsrc/components/layout/Header/components/InfoHeader.tsxsrc/main.tsxsrc/pages/Auth/SignUp/ConfirmStep.tsxsrc/pages/Auth/SignUp/FinishStep.tsxsrc/pages/Auth/SignUp/NameStep.tsxsrc/pages/Auth/SignUp/StudentIdStep.tsxsrc/pages/Auth/SignUp/TermStep.tsxsrc/pages/Auth/SignUp/UniversityStep.tsxsrc/pages/Auth/SignUp/components/AgreementArrow.tsxsrc/pages/Auth/SignUp/components/StepLayout.tsxsrc/pages/Chat/index.tsxsrc/pages/Club/Application/clubFeePage.tsxsrc/pages/Club/Application/index.tsxsrc/pages/Club/ClubDetail/components/ClubIntro.tsxsrc/pages/Club/ClubDetail/components/ClubRecruitment.tsxsrc/pages/Club/ClubDetail/index.tsxsrc/pages/Club/ClubList/components/ClubCard.tsxsrc/pages/Club/ClubList/index.tsxsrc/pages/Club/ClubSearch/index.tsxsrc/pages/Home/components/CouncilNoticeCard.tsxsrc/pages/Home/components/SimpleAppliedClubCard.tsxsrc/pages/Home/components/SimpleClubCard.tsxsrc/pages/Home/index.tsxsrc/pages/Manager/ManagedAccount/index.tsxsrc/pages/Manager/ManagedApplicationDetail/index.tsxsrc/pages/Manager/ManagedApplicationList/index.tsxsrc/pages/Manager/ManagedClubDetail/index.tsxsrc/pages/Manager/ManagedClubList/index.tsxsrc/pages/Manager/ManagedClubProfile/index.tsxsrc/pages/Manager/ManagedMemberApplicationDetail/index.tsxsrc/pages/Manager/ManagedMemberList/index.tsxsrc/pages/Manager/ManagedRecruitmentForm/index.tsxsrc/pages/Manager/ManagedRecruitmentWrite/index.tsxsrc/pages/Manager/components/TimePicker/index.tsxsrc/pages/Schedule/components/CalendarWeekRow.tsxsrc/pages/Schedule/index.tsxsrc/pages/User/MyPage/components/UserInfoCard.tsxsrc/pages/User/MyPage/index.tsxsrc/pages/User/Profile/index.tsxsrc/styles/typography.css
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
1 participant
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.
✨ 요약
😎 해결한 이슈
Summary by CodeRabbit
릴리스 노트
새로운 기능
스타일