Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ff1451 wants to merge 3 commits into from
Closed

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3d7b8ec
refactor: 색상 토큰 파일 분리
ff1451 Mar 6, 2026
4a28ffc
refactor: 타이포그래피 스타일 파일 분리
ff1451 Mar 6, 2026
53f527b
refactor: 피그마 타이포그래피 네이밍으로 클래스 정렬
ff1451 Mar 6, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/common/ToggleSwitch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ function ToggleSwitch({
)}
<span
className={twMerge(
isHorizontal ? 'text-sub2 transition-colors' : 'text-xs leading-3.5 font-medium',
isHorizontal ? 'Sub2 transition-colors' : 'text-xs leading-3.5 font-medium',
enabled ? 'text-indigo-700' : 'text-indigo-300'
)}
>
Expand Down
4 changes: 2 additions & 2 deletions src/components/layout/Header/components/InfoHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ function InfoHeader() {
return (
<header className="fixed top-0 right-0 left-0 z-30 flex items-center bg-white px-3 py-2">
<div className="flex flex-1 flex-col">
<div className="text-h3 text-indigo-700">{myInfo.universityName}</div>
<div className="text-cap1 text-indigo-300">
<div className="H3 text-indigo-700">{myInfo.universityName}</div>
<div className="Caption1 text-indigo-300">
{myInfo.name} {myInfo.studentNumber}
</div>
</div>
Expand Down
2 changes: 2 additions & 0 deletions src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
@import 'tailwindcss';

@import './styles/font.css';
@import './styles/colors.css';
@import './styles/typography.css';
@import './styles/theme.css';

:root {
Expand Down
23 changes: 9 additions & 14 deletions src/pages/Auth/SignUp/ConfirmStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,31 +70,26 @@ function ConfirmStep() {
color="text-red-500"
>
<div className="flex flex-col gap-1">
<label className="text-sub2 text-indigo-300">학교명</label>
<label className="Sub2 text-indigo-300">학교명</label>
<input
type="text"
value={universityName}
disabled
className="bg-indigo-5 text-sub1 rounded-lg p-2 disabled:text-indigo-200"
className="bg-indigo-5 Sub1 rounded-lg p-2 disabled:text-indigo-200"
/>
</div>
<div className="flex flex-col gap-1">
<label className="text-sub2 text-indigo-300">학번</label>
<label className="Sub2 text-indigo-300">학번</label>
<input
type="text"
value={studentId}
disabled
className="bg-indigo-5 text-sub1 rounded-lg p-2 disabled:text-indigo-200"
className="bg-indigo-5 Sub1 rounded-lg p-2 disabled:text-indigo-200"
/>
</div>
<div className="flex flex-col gap-1">
<label className="text-sub2 text-indigo-300">이름</label>
<input
type="text"
value={name}
disabled
className="bg-indigo-5 text-sub1 rounded-lg p-2 disabled:text-indigo-200"
/>
<label className="Sub2 text-indigo-300">이름</label>
<input type="text" value={name} disabled className="bg-indigo-5 Sub1 rounded-lg p-2 disabled:text-indigo-200" />
</div>
{error && (
<div className="mt-2 text-sm text-red-500">
Expand All @@ -107,20 +102,20 @@ function ConfirmStep() {
)}
<BottomModal isOpen={isInquiryModalOpen} onClose={closeInquiryModal}>
<div className="flex flex-col gap-10 px-8 pt-7 pb-4">
<div className="text-h3 text-center whitespace-pre-wrap">
<div className="H3 text-center whitespace-pre-wrap">
이미 등록된 학번입니다{'\n'}
문의를 통해 문제를 해결해주세요
</div>
<textarea
value={inquiryContent}
onChange={(e) => setInquiryContent(e.target.value)}
placeholder="문의 내용을 입력해주세요"
className="text-sub2 min-h-32 w-full resize-none rounded-lg border-2 border-indigo-200 p-4 placeholder:text-indigo-300"
className="Sub2 min-h-32 w-full resize-none rounded-lg border-2 border-indigo-200 p-4 placeholder:text-indigo-300"
/>
<button
onClick={handleInquirySubmit}
disabled={isInquiryPending || !inquiryContent.trim()}
className="bg-primary text-h3 w-full rounded-lg py-3.5 text-center text-white disabled:opacity-50"
className="bg-primary H3 w-full rounded-lg py-3.5 text-center text-white disabled:opacity-50"
>
{isInquiryPending ? '전송 중...' : '문의하기'}
</button>
Expand Down
6 changes: 3 additions & 3 deletions src/pages/Auth/SignUp/FinishStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@ function FinishStep() {
<div className="flex flex-col items-center text-center">
<CheckInCircleIcon className="mt-15" />

<div className="text-d2 mt-8">환영합니다!</div>
<div className="D2 mt-8">환영합니다!</div>

<div>
<div className="text-h1 my-3">{myInfo.name}님</div>
<div className="text-h5 text-indigo-300">
<div className="H1 my-3">{myInfo.name}님</div>
<div className="H5 text-indigo-300">
<div>KONECT 가입이 완료되었습니다.</div>
<div>동아리 활동을 시작해보세요!</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Auth/SignUp/NameStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ function NameStep() {
setName(value);
}}
placeholder="ex) 홍길동"
className="text-h3 mt-5 w-full border-b-2 border-indigo-400 py-4 text-indigo-300"
className="H3 mt-5 w-full border-b-2 border-indigo-400 py-4 text-indigo-300"
/>
</StepLayout>
);
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Auth/SignUp/StudentIdStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ function StudentIdStep() {
setStudentId(value);
}}
placeholder="ex) 2022136039"
className="text-h3 mt-5 w-full border-b-2 border-indigo-400 py-4 text-indigo-300"
className="H3 mt-5 w-full border-b-2 border-indigo-400 py-4 text-indigo-300"
/>
</StepLayout>
);
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Auth/SignUp/TermStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ function TermStep() {
return (
<div className="flex flex-1 flex-col justify-between px-8 py-5" style={{ marginBottom: 'calc(32px + var(--sab))' }}>
<div className="flex flex-col gap-2 text-center">
<div className="text-d2">서비스 이용 동의</div>
<div className="D2">서비스 이용 동의</div>
<div className="font-semibold text-indigo-300">원활한 서비스 이용을 위해 동의해주세요</div>

<div className="mt-10 flex w-full flex-col gap-3">
Expand Down
16 changes: 7 additions & 9 deletions src/pages/Auth/SignUp/UniversityStep.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import { useGetUniversityList } from './hooks/useUniversity';
function UniversityCard({ label, onClick }: { label: string; onClick: () => void }) {
return (
<Card onClick={onClick} className="border-indigo-75 flex w-full flex-row items-center justify-between">
<div className="text-sub2">{label}</div>
<div className="Sub2">{label}</div>
<RightArrowIcon />
</Card>
);
Expand Down Expand Up @@ -65,7 +65,7 @@ function UniversityStep() {
value={universityName}
placeholder="학교를 입력해주세요.."
onChange={(e) => setUniversityName(e.target.value)}
className="text-h3 mt-5 w-full border-b-2 border-indigo-400 py-4 text-indigo-300 placeholder:text-indigo-300"
className="H3 mt-5 w-full border-b-2 border-indigo-400 py-4 text-indigo-300 placeholder:text-indigo-300"
/>
<div className="mt-7 flex flex-col gap-2">
{filteredUniversities.map((university) => (
Expand All @@ -76,32 +76,30 @@ function UniversityStep() {
/>
))}

{hasNoSearchResult && (
<div className="text-sub3 px-1 pt-2 text-indigo-300">{`'${trimmed}' 검색 결과가 없어요`}</div>
)}
{hasNoSearchResult && <div className="Sub3 px-1 pt-2 text-indigo-300">{`'${trimmed}' 검색 결과가 없어요`}</div>}

<button
type="button"
onClick={openInquiryModal}
className="text-sub3 mt-2 w-fit self-end px-1 text-indigo-300 underline underline-offset-4 transition-colors hover:text-indigo-400"
className="Sub3 mt-2 w-fit self-end px-1 text-indigo-300 underline underline-offset-4 transition-colors hover:text-indigo-400"
>
자신의 학교가 목록에 없나요?
</button>
</div>

<BottomModal isOpen={isInquiryModalOpen} onClose={closeInquiryModal}>
<div className="flex flex-col gap-10 px-8 pt-7 pb-4">
<div className="text-h3 text-center">학교 문의</div>
<div className="H3 text-center">학교 문의</div>
<textarea
value={inquiryContent}
onChange={(e) => setInquiryContent(e.target.value)}
placeholder="추가를 원하는 학교 이름을 정확히 입력해주세요"
className="text-sub2 min-h-32 w-full resize-none rounded-lg border-2 border-indigo-200 p-4 placeholder:text-indigo-300"
className="Sub2 min-h-32 w-full resize-none rounded-lg border-2 border-indigo-200 p-4 placeholder:text-indigo-300"
/>
<button
onClick={handleInquirySubmit}
disabled={isPending || !inquiryContent.trim()}
className="bg-primary text-h3 w-full rounded-lg py-3.5 text-center text-white disabled:opacity-50"
className="bg-primary H3 w-full rounded-lg py-3.5 text-center text-white disabled:opacity-50"
>
{isPending ? '전송 중...' : '문의하기'}
</button>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/Auth/SignUp/components/AgreementArrow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ function AgreementRow({ checked, onChange, label, route, RightIcon, CheckIcon }:
onChange={(e) => onChange(e.target.checked)}
/>
<CheckIcon className="text-indigo-100 peer-checked:text-black" />
<span className="text-sub2 text-indigo-100 peer-checked:text-black">{label}</span>
<span className="Sub2 text-indigo-100 peer-checked:text-black">{label}</span>
</label>

{RightIcon ? (
Expand All @@ -45,7 +45,7 @@ function AgreementAllRow({ checked, onChange, label, BigCheckIcon }: AgreementAl
<label className="flex cursor-pointer items-center gap-3">
<input type="checkbox" className="peer sr-only" checked={checked} onChange={(e) => onChange(e.target.checked)} />
<BigCheckIcon className="text-indigo-100 peer-checked:text-black" />
<span className="text-h3 text-indigo-100 peer-checked:text-black">{label}</span>
<span className="H3 text-indigo-100 peer-checked:text-black">{label}</span>
</label>
);
}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Auth/SignUp/components/StepLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ function StepLayout({
return (
<div className="flex flex-1 flex-col justify-between px-8 py-5" style={{ marginBottom: 'calc(32px + var(--sab))' }}>
<div className="flex flex-col gap-2">
<div className="text-d2">{title}</div>
<div className="D2">{title}</div>
<div className={`${color} text-sm leading-5 font-medium whitespace-pre-line`}>{description}</div>

{children}
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Chat/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ function ChatListPage() {
<div className="flex items-center gap-2">
<div className="text-sm leading-4 font-bold text-indigo-700">{room.roomName}</div>

{isGroup && <span className="bg-primary text-cap2 rounded px-1.5 py-0.5 text-white">단체</span>}
{isGroup && <span className="bg-primary Caption2 rounded px-1.5 py-0.5 text-white">단체</span>}
{room.isMuted && (
<span className="text-xs text-gray-400">
<BellOfIcon className="h-4 w-4" />
Expand Down
4 changes: 1 addition & 3 deletions src/pages/Club/Application/clubFeePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,9 +108,7 @@ function ClubFeePage() {
className="border-indigo-75 hover:bg-indigo-25 flex h-52 w-36 flex-col items-center justify-center gap-2.5 rounded-xl border transition-colors"
>
<ImageIcon />
<p className="text-sub4 text-center whitespace-pre-line text-indigo-100">
{'이미지를 \n 추가해주세요'}
</p>
<p className="Sub4 text-center whitespace-pre-line text-indigo-100">{'이미지를 \n 추가해주세요'}</p>
</button>
)}
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/pages/Club/Application/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,20 +75,20 @@ function ApplicationPage() {
</form>
<BottomModal isOpen={isConfirmOpen} onClose={closeConfirm}>
<div className="flex flex-col gap-10 px-8 pt-7 pb-4">
<div className="text-h3 text-center whitespace-pre-wrap">지원서를 제출하시겠어요?</div>
<div className="H3 text-center whitespace-pre-wrap">지원서를 제출하시겠어요?</div>
<div>
<button
type="button"
onClick={handleConfirm}
disabled={isPending}
className="bg-primary text-h3 w-full rounded-lg py-3.5 text-center text-white disabled:opacity-50"
className="bg-primary H3 w-full rounded-lg py-3.5 text-center text-white disabled:opacity-50"
>
제출하기
</button>
<button
type="button"
onClick={closeConfirm}
className="text-h3 w-full rounded-lg py-3.5 text-center text-indigo-400"
className="H3 w-full rounded-lg py-3.5 text-center text-indigo-400"
>
취소
</button>
Expand Down
8 changes: 4 additions & 4 deletions src/pages/Club/ClubDetail/components/ClubIntro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ function ClubIntro({ clubDetail }: ClubIntroProps) {
return (
<>
<Card>
<div className="text-h3 text-indigo-700">동아리 소개</div>
<div className="text-sub2 mt-1.5 whitespace-pre-line text-indigo-300">{clubDetail.introduce}</div>
<div className="H3 text-indigo-700">동아리 소개</div>
<div className="Sub2 mt-1.5 whitespace-pre-line text-indigo-300">{clubDetail.introduce}</div>
</Card>
<Card>
<div className="text-sm leading-4 font-bold text-indigo-700">위치 및 회원 수</div>
Expand Down Expand Up @@ -53,15 +53,15 @@ function ClubIntro({ clubDetail }: ClubIntroProps) {
</div>
</Card>
<Card>
<div className="text-body3 flex flex-col items-center gap-1 text-indigo-300">
<div className="Body3 flex flex-col items-center gap-1 text-indigo-300">
<div>동아리에 대해 궁금한 점이 있으신가요?</div>
<div>편하게 문의해주세요!</div>
</div>
<button
type="button"
onClick={handleInquireClick}
disabled={isCreatingChatRoom}
className="bg-primary text-body3 flex items-center justify-center gap-1 rounded-sm py-3 text-white"
className="bg-primary Body3 flex items-center justify-center gap-1 rounded-sm py-3 text-white"
>
<PaperPlaneIcon className="text-white" />
{isCreatingChatRoom ? '이동 중...' : '문의하기'}
Expand Down
6 changes: 3 additions & 3 deletions src/pages/Club/ClubDetail/components/ClubRecruitment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,20 +92,20 @@ function ClubRecruitment({ clubId, isMember }: ClubRecruitProps) {
</Card>
<BottomModal isOpen={isConfirmOpen} onClose={closeConfirm}>
<div className="flex flex-col gap-10 px-8 pt-7 pb-4">
<div className="text-h3 text-center whitespace-pre-wrap">동아리에 지원하시겠어요?</div>
<div className="H3 text-center whitespace-pre-wrap">동아리에 지원하시겠어요?</div>
<div>
<button
type="button"
onClick={handleApply}
disabled={isPending}
className="bg-primary text-h3 w-full rounded-lg py-3.5 text-center text-white disabled:opacity-50"
className="bg-primary H3 w-full rounded-lg py-3.5 text-center text-white disabled:opacity-50"
>
지원하기
</button>
<button
type="button"
onClick={closeConfirm}
className="text-h3 w-full rounded-lg py-3.5 text-center text-indigo-400"
className="H3 w-full rounded-lg py-3.5 text-center text-indigo-400"
>
취소
</button>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/Club/ClubDetail/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,8 +56,8 @@ function ClubDetail() {
/>
<div className="flex min-w-0 flex-col gap-1">
<div className="text-xl leading-5.5 font-black">{clubDetail.name}</div>
<div className="text-body3">{clubDetail.categoryName}</div>
<div className="text-sub2 truncate">{clubDetail.description}</div>
<div className="Body3">{clubDetail.categoryName}</div>
<div className="Sub2 truncate">{clubDetail.description}</div>
</div>
</div>
<div className="flex items-center gap-3 bg-white px-3">
Expand Down
8 changes: 4 additions & 4 deletions src/pages/Club/ClubList/components/ClubCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,12 +68,12 @@ function ClubCard({ club }: ClubCardProps) {
<div className="min-w-0 flex-1">
<div className="flex items-center justify-between">
<div className="flex items-center gap-1">
<div className="text-h3 text-indigo-700">{club.name}</div>
<div className="text-cap1 text-indigo-300">{club.categoryName}</div>
<div className="H3 text-indigo-700">{club.name}</div>
<div className="Caption1 text-indigo-300">{club.categoryName}</div>
</div>
{clubTag && (
<div
className="text-cap1 flex items-center gap-0.5 rounded-full px-3 py-1"
className="Caption1 flex items-center gap-0.5 rounded-full px-3 py-1"
style={{
backgroundColor: clubTag.bgColor,
color: clubTag.textColor,
Expand All @@ -84,7 +84,7 @@ function ClubCard({ club }: ClubCardProps) {
</div>
)}
</div>
<div className="text-sub2 truncate text-indigo-300">{club.description}</div>
<div className="Sub2 truncate text-indigo-300">{club.description}</div>
</div>
</Link>
);
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Club/ClubList/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ function ClubList() {
<div className="pb-15">
<SearchBar isButton />
<div className="bg-background mt-13 flex flex-col gap-2 px-3 pt-2 pb-4">
<div className="text-sub2 text-indigo-300">
<div className="Sub2 text-indigo-300">
총 <span className="text-black">{totalCount}개</span>의 동아리
</div>

Expand Down
2 changes: 1 addition & 1 deletion src/pages/Club/ClubSearch/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ function ClubSearch() {
<div className="py-6 text-center text-xs text-indigo-300">검색어를 입력해서 동아리를 검색해보세요.</div>
) : (
<>
<div className="text-cap2 text-indigo-300">
<div className="Caption2 text-indigo-300">
총 <span className="font-bold text-black">{totalCount}개</span>의 동아리
</div>

Expand Down
4 changes: 2 additions & 2 deletions src/pages/Home/components/CouncilNoticeCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,10 @@ function CouncilNoticeCard({
className="bg-indigo-0 border-indigo-5 block rounded-lg border-b px-3 py-3"
>
<div className="flex items-center gap-1">
<div className="text-h3 leading-[15px] font-semibold text-indigo-700">{title}</div>
<div className="H3 leading-[15px] font-semibold text-indigo-700">{title}</div>
{!isRead && <div className="h-1 w-1 rounded-full bg-[#ff4e4e]" />}
</div>
<div className="text-sub2 text-indigo-300">{createdAt}</div>
<div className="Sub2 text-indigo-300">{createdAt}</div>
</Link>
);
}
Expand Down
6 changes: 3 additions & 3 deletions src/pages/Home/components/SimpleAppliedClubCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,14 @@ function SimpleAppliedClubCard({ club }: SimpleAppliedClubCardProps) {
<div className="min-w-0 flex-1">
<div className="flex items-center justify-between">
<div className="flex w-full items-center justify-between gap-1">
<div className="text-h3 text-indigo-700">{club.name}</div>
<div className="text-cap1 flex items-center gap-0.5 rounded-full bg-[#E8EBEFE5] px-3 py-1 text-[#5A6B7F]">
<div className="H3 text-indigo-700">{club.name}</div>
<div className="Caption1 flex items-center gap-0.5 rounded-full bg-[#E8EBEFE5] px-3 py-1 text-[#5A6B7F]">
<CircleWarningIcon />
승인 대기 중
</div>
</div>
</div>
<div className="text-sub2 mt-1 text-indigo-300">지원일: {formatIsoDateToYYYYMMDD(club.appliedAt)}</div>
<div className="Sub2 mt-1 text-indigo-300">지원일: {formatIsoDateToYYYYMMDD(club.appliedAt)}</div>
</div>
</Link>
);
Expand Down
Loading