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

[ff1451]

develop 브랜치를 기준으로 PR을 다시 생성했습니다: #162

이 PR(#161)은 base 브랜치를 main으로 잘못 지정해 닫습니다.

Summary by CodeRabbit

Release Notes

• Style

  • 사용자 인터페이스 전체에 걸쳐 타이포그래피 스타일과 색상 토큰을 개선하여 더욱 일관되고 현대적인 디자인을 구현했습니다.

• Refactor

  • 애플리케이션의 디자인 시스템을 현대화하여 모든 페이지에서 시각적 일관성을 강화했습니다.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 04c373f3-4580-4e16-b0da-2649b39da26e

📥 Commits

Reviewing files that changed from the base of the PR and between da8ccf5 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

---

Walkthrough

디자인 시스템 토큰을 별도 CSS 파일로 분리하고, 타이포그래피 유틸리티 클래스명을 text-h3 → H3 형식으로 통일하는 대규모 리팩토링입니다. 40개 이상의 컴포넌트 파일에서 클래스명을 일괄 치환하였으며, 기능 로직은 변경되지 않았습니다.

Changes

Cohort / File(s)	Summary
디자인 토큰 시스템 src/index.css, src/styles/colors.css, src/styles/typography.css, src/styles/theme.css	색상 팔레트와 타이포그래피 토큰을 별도 파일로 분리. theme.css에서 165줄의 타이포 정의 제거, typography.css에 D1-D2, H1-H5, Sub1-Sub4, Body1-Body3, Caption1-Caption2 등 새로운 유틸리티 클래스 추가(165줄).
인증/가입 페이지 컴포넌트 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/StepLayout.tsx, src/pages/Auth/SignUp/components/AgreementArrow.tsx	text-h3 → H3, text-sub2 → Sub2, text-cap1 → Caption1 등 타이포 클래스명 통일. 구조와 로직은 변경 없음.
클럽 관련 페이지 src/pages/Club/ClubList/components/ClubCard.tsx, src/pages/Club/ClubList/index.tsx, src/pages/Club/ClubSearch/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/Application/clubFeePage.tsx, src/pages/Club/Application/index.tsx	text-h3, text-body3, text-cap1, text-sub2 등의 클래스를 대문자 토큰(H3, Body3, Caption1, Sub2)으로 변경. 렌더링 로직 유지.
홈 페이지 컴포넌트 src/pages/Home/index.tsx, src/pages/Home/components/CouncilNoticeCard.tsx, src/pages/Home/components/SimpleAppliedClubCard.tsx, src/pages/Home/components/SimpleClubCard.tsx	타이포 클래스명을 새 토큰으로 치환(예: text-h3 → H3, text-cap2-strong → Caption2-strong). 데이터 흐름과 조건부 렌더링 변경 없음.
매니저 페이지 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	프로필 헤더, 섹션 제목, 모달 텍스트 등의 타이포 클래스를 일괄 변경(H4, Sub4, Body2, Caption1 등). sectionTitleStyle 상수값 1개 변경(text-h3 → H3). 상태 관리와 데이터 흐름 변경 없음.
사용자 페이지 src/pages/User/MyPage/index.tsx, src/pages/User/MyPage/components/UserInfoCard.tsx, src/pages/User/Profile/index.tsx	매니저 이름, 카운트, 라벨 등의 타이포 클래스명을 H2, Body3, H3 등으로 변경. 마크업 구조 유지.
Chat 페이지 src/pages/Chat/index.tsx	배지 스타일 클래스를 text-cap2 → Caption2로 변경.
공용 컴포넌트 src/components/common/ToggleSwitch.tsx, src/components/layout/Header/components/InfoHeader.tsx	레이블 스팬의 클래스를 text-sub2 → Sub2, text-h3 → H3으로 변경. 컴포넌트 API 변경 없음.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• develop-> main #135: TimePicker 컴포넌트 구현 PR와 동일 파일 수정으로 코드 레벨 연관
• refactor: 버튼 위치 수정 및 에러 메시지 출력 변경 #159: ManagedClubProfile 파일 수정 — API 에러 렌더링 변경과 함께 클래스명 리팩토링
• develop → main 배포 #125: ToggleSwitch.tsx, InfoHeader.tsx 도입 당시 추가된 파일들을 현재 PR에서 클래스명 통일

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 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.}