[refactor] 디자인 토큰 분리 및 타이포그래피 클래스 정렬

[ff1451]

✨ 요약

• Figma 기반 색상 토큰을 src/styles/colors.css로 분리했습니다.
• 모바일 타이포그래피 토큰/유틸리티를 src/styles/typography.css로 분리하고, theme.css는 색상/브레이크포인트 중심으로 정리했습니다.
• 타이포그래피 클래스명을 Figma 네이밍(D1, H1, Sub1, Body1, Caption1)으로 맞추고 전체 사용처를 일괄 치환했습니다.
• 전역 스타일 import 순서에 colors.css, typography.css를 추가했습니다.

🧩 커밋 단위

• refactor: 색상 토큰 파일 분리
• refactor: 타이포그래피 스타일 파일 분리
• refactor: 피그마 타이포그래피 네이밍으로 클래스 정렬

✅ 검증

• pnpm lint 통과

😎 해결한 이슈(close #160)

• close [refactor] 디자인 토큰 분리 및 타이포그래피 네이밍 정렬 #160

Summary by CodeRabbit

릴리스 노트

• 스타일
  • 타이포그래피 및 색상 시스템을 표준화하여 애플리케이션 전체의 UI 일관성을 개선했습니다.

[coderabbitai]

Warning

Rate limit exceeded

@ff1451 has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 13 minutes and 36 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

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.

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: d09212c5-ba0f-434f-8602-1a09362bc6c3

📥 Commits

Reviewing files that changed from the base of the PR and between 53f527b and 3231bdb.

📒 Files selected for processing (7)

• src/pages/Auth/SignUp/FinishStep.tsx
• src/pages/Club/ClubDetail/components/ClubIntro.tsx
• src/pages/Home/components/SimpleAppliedClubCard.tsx
• src/pages/Home/index.tsx
• src/pages/Manager/components/TimePicker/index.tsx
• src/pages/User/MyPage/components/UserInfoCard.tsx
• src/styles/typography.css

Walkthrough

디자인 시스템 기준으로 색상/타이포그래피 토큰을 분리하고, 기존 text-h3 형식의 타이포그래피 클래스를 Figma 네이밍(H3, Sub1, Body1 등)으로 통일하는 대규모 리팩터링입니다.

Changes

Cohort / File(s)	Summary
CSS 토큰 분리 및 재정의 src/index.css, src/styles/colors.css, src/styles/typography.css, src/styles/theme.css	색상 팔레트를 colors.css로 분리 (85줄), 타이포그래피 정의를 typography.css로 이관 (165줄). theme.css에서 기존 타이포 클래스 및 폰트웨이트 정의 제거 (165줄).
SignUp 페이지 컴포넌트 src/pages/Auth/SignUp/ConfirmStep.tsx, FinishStep.tsx, NameStep.tsx, StudentIdStep.tsx, TermStep.tsx, UniversityStep.tsx, src/pages/Auth/SignUp/components/AgreementArrow.tsx, StepLayout.tsx	타이포그래피 클래스명 통일: text-d2→D2, text-h1/h3/h5→H1/H3/H5, text-sub1/sub2/sub3/sub4→Sub1/Sub2/Sub3/Sub4, text-cap1→Caption1
Club 페이지 컴포넌트 src/pages/Club/Application/clubFeePage.tsx, index.tsx, src/pages/Club/ClubDetail/components/ClubIntro.tsx, ClubRecruitment.tsx, src/pages/Club/ClubDetail/index.tsx, src/pages/Club/ClubList/components/ClubCard.tsx, src/pages/Club/ClubList/index.tsx, src/pages/Club/ClubSearch/index.tsx	타이포그래피 클래스명 변경: text-body3→Body3, text-sub2/sub4→Sub2/Sub4, text-h3→H3, text-cap1/cap2→Caption1/Caption2
Home/Chat 페이지 src/pages/Home/components/CouncilNoticeCard.tsx, SimpleAppliedClubCard.tsx, SimpleClubCard.tsx, src/pages/Home/index.tsx, src/pages/Chat/index.tsx	헤딩/라벨 스타일링 통일: text-h3→H3, text-sub2→Sub2, text-cap1/cap2→Caption1/Caption2
Manager 페이지 src/pages/Manager/ManagedAccount/index.tsx, ManagedApplicationDetail/index.tsx, ManagedApplicationList/index.tsx, ManagedClubDetail/index.tsx, ManagedClubList/index.tsx, ManagedClubProfile/index.tsx, ManagedMemberApplicationDetail/index.tsx, ManagedMemberList/index.tsx, ManagedRecruitmentForm/index.tsx, ManagedRecruitmentWrite/index.tsx, src/pages/Manager/components/TimePicker/index.tsx	타이포그래피 토큰 일괄 변경: text-h3/h4→H3/H4, text-body2/body3→Body2/Body3, text-sub2/sub3/sub4→Sub2/Sub3/Sub4, text-cap1→Caption1
User 페이지 src/pages/User/MyPage/components/UserInfoCard.tsx, src/pages/User/MyPage/index.tsx, src/pages/User/Profile/index.tsx	헤더/버튼/라벨 스타일 정렬: text-h2/h3→H2/H3, text-body3→Body3, text-sub2→Sub2
공용 컴포넌트 src/components/common/ToggleSwitch.tsx, src/components/layout/Header/components/InfoHeader.tsx	라벨 클래스명 변경: text-sub2→Sub2, text-cap1/h3→Caption1/H3

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

40개 이상의 파일에서 동일한 패턴의 클래스 변경이 반복되므로 검토 효율은 높지만, CSS 파일 구조 변경(colors.css 신규 추가, theme.css 대규모 삭제)과 모든 클래스 변경이 올바르게 적용되었는지 일관성 검증이 필요합니다.

Possibly related PRs

• develop → main 배포 #125: 동일한 ToggleSwitch, InfoHeader 컴포넌트 클래스 수정으로 직접 연관
• [refactor] 관리자 페이지 및 마이페이지 UI 수정 및 리팩토링 #117: CSS/타이포그래피 토큰 조정 및 ToggleSwitch 라벨 클래스 변경으로 중복 수정
• develop-> main #135: ClubRecruitment 컴포넌트 타이포그래피 클래스 업데이트 관련

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 주요 변경사항(디자인 토큰 분리 및 타이포그래피 클래스 정렬)을 명확하고 간결하게 요약하고 있습니다.
Linked Issues check	✅ Passed	PR의 모든 변경사항이 #160 이슈의 목표(색상/타이포그래피 토큰 분리, 클래스명 정렬, lint 검증)를 완전히 충족합니다.
Out of Scope Changes check	✅ Passed	전체 변경사항이 토큰 분리와 타이포그래피 클래스명 일괄 치환으로 일관되며, 기능 로직이나 동작 변화가 없어 범위 내입니다.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch 160-refactor-design-token-typography-alignment

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 4

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/pages/Manager/components/TimePicker/index.tsx (1)

171-183: ⚠️ Potential issue | 🟡 Minor

선택 상태를 보조기기에도 노출해주세요.

현재 선택 여부가 색상/굵기로만 표현돼서 스크린리더가 현재 시간을 파악하기 어렵습니다. 최소한 각 버튼에 aria-pressed={isSelected}를 넣거나, 리스트 패턴으로 가져갈 거면 선택 상태(aria-selected)를 함께 노출해주세요.

As per coding guidelines, '동적 className 조합, 접근성(aria-*, role, 키보드 탐색), Props 타입 일관성을 우선 확인하는지'.

Also applies to: 199-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` around lines 171 - 183,
The buttons that render hours (the button in the hour mapping that calls
setDraftHour and scrollToItem with hourRef/hourOptions and uses pad2) do not
expose selection to assistive tech; add aria-pressed={isSelected} on that button
(or aria-selected and appropriate role="option" if you adopt the listbox
pattern) so screen readers can detect the selected state; mirror the same change
for the minutes block (the analogous buttons that call
setDraftMinute/scrollToItem with minute refs/options) and verify role/keyboard
handling is consistent with the chosen pattern.

🧹 Nitpick comments (3)

src/pages/Home/components/SimpleAppliedClubCard.tsx (1)

21-21: 배지 색상은 토큰으로 빼는 편이 좋습니다.

Line 21의 bg-[#E8EBEFE5], text-[#5A6B7F]는 이번 PR의 색상 토큰 분리 방향과 어긋납니다. 이 값들도 src/styles/colors.css 기반 토큰 클래스로 맞춰두는 게 유지보수에 안전합니다.

🤖 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, In
SimpleAppliedClubCard replace the hardcoded utility classes bg-[`#E8EBEFE5`] and
text-[`#5A6B7F`] in the className on the badge div with the project's color token
classes from src/styles/colors.css; locate the badge inside the
SimpleAppliedClubCard component and change those inline hex utilities to the
corresponding token-based classes (use the bg-... and text-... token names
defined in colors.css) so the badge uses the centralized color tokens instead of
literal hex values.

src/pages/Club/ClubDetail/components/ClubIntro.tsx (1)

30-50: 일부 타이포그래피가 시맨틱 토큰으로 변환되지 않음.

Lines 30, 35-36, 42-43, 48-50에서 text-sm, text-[10px] 등 raw Tailwind 클래스가 여전히 사용되고 있습니다. 향후 일관성을 위해 이 부분도 시맨틱 토큰으로 변환을 고려해 주세요.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/Club/ClubDetail/components/ClubIntro.tsx` around lines 30 - 50, The
JSX in the ClubIntro component uses raw Tailwind utility classes (e.g.,
"text-sm", "text-[10px]", "leading-3", "leading-3.5", "font-medium",
"font-semibold", "text-indigo-700", "text-indigo-300") for the
memberCount/location/president blocks; replace these raw utilities with your
project's semantic token classes (for example map text sizes to tokens like
text-body-sm/text-caption, leading values to tokenized leading classes, font
weights to token-regular/token-semibold, and color utilities to
text-primary/text-muted) so all className values in the elements around
memberCount, location, and presidentName follow the token naming convention used
elsewhere in the app.

src/pages/Home/index.tsx (1)

235-236: raw hex 대신 색상 토큰으로 통일해주세요

이번 PR 목적이 색상 토큰 분리인데, 여기 두 링크만 text-[#3182F6]를 그대로 남겨서 토큰 체계가 끊깁니다. colors.css에 정의한 semantic color class로 맞추는 편이 유지보수에 좋습니다.

Also applies to: 249-250

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/Home/index.tsx` around lines 235 - 236, Replace the raw hex class
text-[`#3182F6`] in the Home component's JSX Link elements with the project's
semantic color token defined in colors.css (e.g., use the semantic class used
for links like "text-primary" or "text-link"); update both occurrences where
className contains "Sub2 text-[`#3182F6`]" (the Link elements around the "다가오는 일정"
section and the other occurrence noted) so they use the semantic class instead
of the raw hex.

🤖 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/Auth/SignUp/FinishStep.tsx`:
- Around line 27-29: The component directly accesses myInfo.name and may crash
on first render; update the FinishStep component to guard rendering when myInfo
is null/undefined (e.g., early return or conditional render) and/or use safe
access (optional chaining) for myInfo.name; ensure this matches the existing
handleStart null-check logic so the UI renders a fallback or nothing until
myInfo is available.

In `@src/pages/Manager/components/TimePicker/index.tsx`:
- Around line 219-221: The selected-time badge (the div containing "선택 시간
{formatTime(draftHour, draftMinute)}" in the TimePicker component) isn’t
announced to assistive tech when the time changes; add accessibility attributes
to make it a live region by giving that badge aria-live="polite" and
aria-atomic="true" (so the full updated string from formatTime(draftHour,
draftMinute) is read), ensuring you add the attributes to the same div with the
className "bg-indigo-0 Body2 rounded-full border border-indigo-50 px-4 py-1.5
text-indigo-700" without changing visual styling or behavior.
- Around line 178-180: The .Body2 typography rule in typography.css includes a
fixed font-weight which overrides the conditional Tailwind utilities in the
TimePicker component (see className usage with twMerge, isSelected, and
'Body2'); remove font-weight from the .Body2 rule in your typography layer (or
create a separate weight-less variant like .Body2-unstyled) and update the
component to use that variant so the conditional 'font-bold' / 'font-medium'
utilities (applied in the className/twMerge around isSelected) can take effect;
alternatively, if you cannot change typography.css, create and apply a small
utility class (e.g., Body2WeightOverride) applied alongside 'Body2' in the
className to allow Tailwind weight utilities to win.

In `@src/pages/User/MyPage/components/UserInfoCard.tsx`:
- Around line 121-130: In UserInfoCard, the two <button> elements that call
handleButtonClick (the one showing myInfo.studyTime and the one linking to
'/council?tab=notice') are missing explicit type attributes and may trigger form
submit; update both button elements to include type="button" to prevent
unintended form submission while preserving existing onClick behavior.

---

Outside diff comments:
In `@src/pages/Manager/components/TimePicker/index.tsx`:
- Around line 171-183: The buttons that render hours (the button in the hour
mapping that calls setDraftHour and scrollToItem with hourRef/hourOptions and
uses pad2) do not expose selection to assistive tech; add
aria-pressed={isSelected} on that button (or aria-selected and appropriate
role="option" if you adopt the listbox pattern) so screen readers can detect the
selected state; mirror the same change for the minutes block (the analogous
buttons that call setDraftMinute/scrollToItem with minute refs/options) and
verify role/keyboard handling is consistent with the chosen pattern.

---

Nitpick comments:
In `@src/pages/Club/ClubDetail/components/ClubIntro.tsx`:
- Around line 30-50: The JSX in the ClubIntro component uses raw Tailwind
utility classes (e.g., "text-sm", "text-[10px]", "leading-3", "leading-3.5",
"font-medium", "font-semibold", "text-indigo-700", "text-indigo-300") for the
memberCount/location/president blocks; replace these raw utilities with your
project's semantic token classes (for example map text sizes to tokens like
text-body-sm/text-caption, leading values to tokenized leading classes, font
weights to token-regular/token-semibold, and color utilities to
text-primary/text-muted) so all className values in the elements around
memberCount, location, and presidentName follow the token naming convention used
elsewhere in the app.

In `@src/pages/Home/components/SimpleAppliedClubCard.tsx`:
- Line 21: In SimpleAppliedClubCard replace the hardcoded utility classes
bg-[`#E8EBEFE5`] and text-[`#5A6B7F`] in the className on the badge div with the
project's color token classes from src/styles/colors.css; locate the badge
inside the SimpleAppliedClubCard component and change those inline hex utilities
to the corresponding token-based classes (use the bg-... and text-... token
names defined in colors.css) so the badge uses the centralized color tokens
instead of literal hex values.

In `@src/pages/Home/index.tsx`:
- Around line 235-236: Replace the raw hex class text-[`#3182F6`] in the Home
component's JSX Link elements with the project's semantic color token defined in
colors.css (e.g., use the semantic class used for links like "text-primary" or
"text-link"); update both occurrences where className contains "Sub2
text-[`#3182F6`]" (the Link elements around the "다가오는 일정" section and the other
occurrence noted) so they use the semantic class instead of the raw hex.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: a4ed6d1c-2bf3-4270-a2b3-be8d7648a025

📥 Commits

Reviewing files that changed from the base of the PR and between d915eca and 53f527b.

📒 Files selected for processing (41)

• src/components/common/ToggleSwitch.tsx
• src/components/layout/Header/components/InfoHeader.tsx
• src/index.css
• src/pages/Auth/SignUp/ConfirmStep.tsx
• src/pages/Auth/SignUp/FinishStep.tsx
• src/pages/Auth/SignUp/NameStep.tsx
• src/pages/Auth/SignUp/StudentIdStep.tsx
• src/pages/Auth/SignUp/TermStep.tsx
• src/pages/Auth/SignUp/UniversityStep.tsx
• src/pages/Auth/SignUp/components/AgreementArrow.tsx
• src/pages/Auth/SignUp/components/StepLayout.tsx
• src/pages/Chat/index.tsx
• src/pages/Club/Application/clubFeePage.tsx
• src/pages/Club/Application/index.tsx
• src/pages/Club/ClubDetail/components/ClubIntro.tsx
• src/pages/Club/ClubDetail/components/ClubRecruitment.tsx
• src/pages/Club/ClubDetail/index.tsx
• src/pages/Club/ClubList/components/ClubCard.tsx
• src/pages/Club/ClubList/index.tsx
• src/pages/Club/ClubSearch/index.tsx
• src/pages/Home/components/CouncilNoticeCard.tsx
• src/pages/Home/components/SimpleAppliedClubCard.tsx
• src/pages/Home/components/SimpleClubCard.tsx
• src/pages/Home/index.tsx
• src/pages/Manager/ManagedAccount/index.tsx
• src/pages/Manager/ManagedApplicationDetail/index.tsx
• src/pages/Manager/ManagedApplicationList/index.tsx
• src/pages/Manager/ManagedClubDetail/index.tsx
• src/pages/Manager/ManagedClubList/index.tsx
• src/pages/Manager/ManagedClubProfile/index.tsx
• src/pages/Manager/ManagedMemberApplicationDetail/index.tsx
• src/pages/Manager/ManagedMemberList/index.tsx
• src/pages/Manager/ManagedRecruitmentForm/index.tsx
• src/pages/Manager/ManagedRecruitmentWrite/index.tsx
• src/pages/Manager/components/TimePicker/index.tsx
• src/pages/User/MyPage/components/UserInfoCard.tsx
• src/pages/User/MyPage/index.tsx
• src/pages/User/Profile/index.tsx
• src/styles/colors.css
• src/styles/theme.css
• src/styles/typography.css

💤 Files with no reviewable changes (1)

• src/styles/theme.css