Skip to content

refactor(fe): 타이포 스케일 토큰 등록, text-[Npx] 임의값을 이름으로 치환 #117

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

Merged
seongbin9786 merged 1 commit into from
Jul 19, 2026
Merged

refactor(fe): 타이포 스케일 토큰 등록, text-[Npx] 임의값을 이름으로 치환 #117

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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 frontend/src/components/auth/name-onboarding.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export function NameOnboarding({
<br />
부르면 좋을까요?
</h1>
<p className="mt-4 max-w-xs text-[15px] font-medium leading-6 text-muted-foreground">
<p className="mt-4 max-w-xs text-body font-medium leading-6 text-muted-foreground">
이름과 관계 기록은 이 브라우저의 나만의 공간에 연결돼요.
</p>

Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/home/relation-force-map.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -511,7 +511,7 @@ function CategoryClusterGraph({
<span
key={category.label}
data-amp-mask
className="absolute -translate-x-1/2 -translate-y-1/2 rounded-full bg-white/80 px-2 py-1 text-[11px] font-black text-zinc-700 shadow-[0_8px_18px_rgba(24,24,27,0.06)] dark:bg-zinc-950/82 dark:text-zinc-200 dark:shadow-[0_8px_18px_rgba(0,0,0,0.28)]"
className="absolute -translate-x-1/2 -translate-y-1/2 rounded-full bg-white/80 px-2 py-1 text-caption font-black text-zinc-700 shadow-[0_8px_18px_rgba(24,24,27,0.06)] dark:bg-zinc-950/82 dark:text-zinc-200 dark:shadow-[0_8px_18px_rgba(0,0,0,0.28)]"
style={{
left: `${position.x}%`,
top: `${position.y + radius.labelOffset}%`,
Expand Down Expand Up @@ -735,7 +735,7 @@ function PersonNode({
</span>
) : null}
{showLastMeet && person.intimacy.daysSinceLastMeet != null ? (
<span className="mt-1 text-[11px] leading-none font-medium text-zinc-500 dark:text-zinc-400">
<span className="mt-1 text-caption leading-none font-medium text-zinc-500 dark:text-zinc-400">
{formatDaysSinceLastMeet(person.intimacy.daysSinceLastMeet)}
</span>
) : null}
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/person/person-fields.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export function ListField({
<span
key={item}
className={cn(
'inline-flex h-7 max-w-full items-center gap-1 rounded-md px-2.5 text-[13px] font-bold',
'inline-flex h-7 max-w-full items-center gap-1 rounded-md px-2.5 text-label font-bold',
chipToneClass,
)}
>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/settings/relation-tag-color-picker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export function RelationTagColorPicker({
{selectedOption?.label ?? normalized}
</span>
</div>
<span className="inline-flex h-8 shrink-0 items-center gap-1.5 rounded-full border border-border bg-background px-2.5 text-[11px] font-extrabold text-muted-foreground">
<span className="inline-flex h-8 shrink-0 items-center gap-1.5 rounded-full border border-border bg-background px-2.5 text-caption font-extrabold text-muted-foreground">
<Palette className="size-3.5" />
변경
</span>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/settings/settings-navigation-item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function SettingsNavigationItem({
onClick={onClick}
className="flex min-h-14 w-full items-center justify-between gap-4 px-4 py-3.5 text-left transition-colors hover:bg-muted/70"
>
<span className="text-[15px] font-extrabold text-foreground">
<span className="text-body font-extrabold text-foreground">
{label}
</span>
<ChevronRight className="size-5 shrink-0 text-muted-foreground" />
Expand Down
6 changes: 3 additions & 3 deletions frontend/src/components/timeline/activity-flow-chart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ export function ActivityFlowChart({
<button
type="button"
onClick={() => setMenuOpen((open) => !open)}
className="inline-flex h-8 items-center gap-1 rounded-full border border-border bg-background px-3 text-[11px] font-extrabold text-foreground"
className="inline-flex h-8 items-center gap-1 rounded-full border border-border bg-background px-3 text-caption font-extrabold text-foreground"
aria-expanded={menuOpen}
aria-haspopup="listbox"
>
Expand Down Expand Up @@ -137,7 +137,7 @@ export function ActivityFlowChart({
onSelectPoint?.(null)
}}
className={cn(
'flex w-full px-3 py-1.5 text-left text-[11px] font-bold',
'flex w-full px-3 py-1.5 text-left text-caption font-bold',
period === option.value
? 'bg-primary text-primary-foreground'
: 'text-foreground hover:bg-muted',
Expand Down Expand Up @@ -177,7 +177,7 @@ export function ActivityFlowChart({
/>
<span
data-amp-mask
className="min-w-0 flex-1 truncate text-[11px] font-extrabold text-muted-foreground"
className="min-w-0 flex-1 truncate text-caption font-extrabold text-muted-foreground"
>
{lane.label}
</span>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/timeline/timeline-feed.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export function TimelineFeed<T extends TimelineFeedItem>({
: 'top-[max(2.5rem,env(safe-area-inset-top))] -mx-5 px-5',
)}
>
<p className="inline-flex h-7 min-w-[4.375rem] items-center justify-center rounded-full bg-muted px-3 text-[11px] leading-tight font-extrabold text-muted-foreground">
<p className="inline-flex h-7 min-w-[4.375rem] items-center justify-center rounded-full bg-muted px-3 text-caption leading-tight font-extrabold text-muted-foreground">
{group.year}
</p>
</div>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/timeline/timeline-filters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export function TimelineCategoryFilters({

return (
<section className="mb-4">
<p className="mb-2 text-[11px] font-extrabold text-muted-foreground">
<p className="mb-2 text-caption font-extrabold text-muted-foreground">
카테고리
</p>
<div className="flex flex-wrap gap-2">
Expand Down Expand Up @@ -55,7 +55,7 @@ export function TimelinePersonFilters({
}) {
return (
<section className="mb-3">
<p className="mb-2 text-[11px] font-extrabold text-muted-foreground">
<p className="mb-2 text-caption font-extrabold text-muted-foreground">
사람
</p>
<div className="flex flex-wrap gap-2">
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/components/ui/empty-state.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ function EmptyStateTitle({ className, ...props }: React.ComponentProps<'p'>) {
return (
<p
data-slot="empty-state-title"
className={cn('text-[15px] font-extrabold text-foreground', className)}
className={cn('text-body font-extrabold text-foreground', className)}
{...props}
/>
)
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/ui/list-group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import { cn } from '@/lib/utils'

export function ListGroupLabel({ children }: { children: React.ReactNode }) {
return (
<p className="mb-2 px-3 text-[11px] font-extrabold tracking-wide text-muted-foreground uppercase">
<p className="mb-2 px-3 text-caption font-extrabold tracking-wide text-muted-foreground uppercase">
{children}
</p>
)
Expand Down Expand Up @@ -51,7 +51,7 @@ export function ListGroupItem({

export function ListGroupFooter({ children }: { children: React.ReactNode }) {
return (
<p className="mt-2 px-3 text-[11px] font-medium leading-relaxed text-muted-foreground">
<p className="mt-2 px-3 text-caption font-medium leading-relaxed text-muted-foreground">
{children}
</p>
)
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/components/ui/segmented-control.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export function SegmentedControl<T extends string>({
<ToggleGroupPrimitive.Item
key={option.value}
value={option.value}
className="flex flex-1 items-center justify-center rounded-lg py-2.5 text-[13px] font-extrabold text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none"
className="flex flex-1 items-center justify-center rounded-lg py-2.5 text-label font-extrabold text-muted-foreground transition-colors hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-none"
>
{option.label}
</ToggleGroupPrimitive.Item>
Expand All @@ -52,7 +52,7 @@ export function SegmentedControl<T extends string>({
{options.map((option) => (
<span
key={option.value}
className="flex flex-1 items-center justify-center py-2.5 text-[13px] font-extrabold"
className="flex flex-1 items-center justify-center py-2.5 text-label font-extrabold"
>
{option.label}
</span>
Expand Down
10 changes: 5 additions & 5 deletions frontend/src/components/ui/tag-chip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { coloredTagStyle } from '@/lib/relation-tag-colors'
// 고정하는 계약이라 값을 바꾸지 않는다. TagChip 자체는 아래 cva에서 높이·표면·
// 채움색을 축으로 분해해 재조립한다.
export const tagChipBaseClass =
'inline-flex h-7 w-fit shrink-0 items-center justify-center gap-1.5 rounded-full border border-transparent px-3.5 text-[13px] leading-none font-bold whitespace-nowrap transition-colors'
'inline-flex h-7 w-fit shrink-0 items-center justify-center gap-1.5 rounded-full border border-transparent px-3.5 text-label leading-none font-bold whitespace-nowrap transition-colors'

const tagChipVariants = cva(
'group/tag-chip inline-flex w-fit shrink-0 items-center justify-center gap-1.5 rounded-full border border-transparent leading-none whitespace-nowrap transition-colors',
Expand All @@ -20,10 +20,10 @@ const tagChipVariants = cva(
// 함께 움직여 한 축으로 묶는다.
size: {
xs: 'h-5 px-2 text-[10px] font-bold',
sm: 'h-6 px-2 text-[11px] font-bold',
default: 'h-7 px-3.5 text-[13px] font-bold',
lg: 'h-8 px-2.5 text-[13px] font-bold',
xl: 'h-9 w-auto max-w-full shrink justify-start px-1.5 pr-3 text-[13px] font-extrabold',
sm: 'h-6 px-2 text-caption font-bold',
default: 'h-7 px-3.5 text-label font-bold',
lg: 'h-8 px-2.5 text-label font-bold',
xl: 'h-9 w-auto max-w-full shrink justify-start px-1.5 pr-3 text-label font-extrabold',
},
// 쉬는 상태(비선택)의 표면색. selected면 tone이 이 색을 덮는다.
surface: {
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/stackflow/activities/event-detail-activity.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export const EventDetailActivity: ActivityComponentType<'EventDetail'> = ({
<button
type="button"
onClick={() => push('Record', { eventId: String(id) })}
className="text-right text-[15px] font-extrabold"
className="text-right text-body font-extrabold"
>
수정
</button>
Expand Down Expand Up @@ -136,7 +136,7 @@ export const EventDetailActivity: ActivityComponentType<'EventDetail'> = ({
{memo ? (
<p
data-amp-mask
className="mt-4 whitespace-pre-wrap text-[15px] leading-relaxed text-foreground"
className="mt-4 whitespace-pre-wrap text-body leading-relaxed text-foreground"
>
{memo}
</p>
Expand Down
12 changes: 5 additions & 7 deletions frontend/src/stackflow/activities/person/person-profile-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ export function PersonProfileView({
{recentEvents.length > 0 ? (
<section>
<div className="mb-2 flex items-center justify-between px-3">
<p className="text-[11px] font-extrabold tracking-wide text-muted-foreground uppercase">
<p className="text-caption font-extrabold tracking-wide text-muted-foreground uppercase">
최근 함께한 일
</p>
<button
Expand Down Expand Up @@ -230,7 +230,7 @@ export function PersonProfileView({
<button
type="button"
onClick={() => push('Record', { personId })}
className="flex w-full items-center justify-between py-3.5 text-[15px] font-extrabold text-foreground transition-colors active:opacity-70"
className="flex w-full items-center justify-between py-3.5 text-body font-extrabold text-foreground transition-colors active:opacity-70"
>
상황 기록 작성
<ChevronRight className="size-5 text-muted-foreground" />
Expand All @@ -240,7 +240,7 @@ export function PersonProfileView({
<button
type="button"
onClick={() => push('PersonEdit', { personId })}
className="flex w-full items-center justify-between py-3.5 text-[15px] font-extrabold text-foreground transition-colors active:opacity-70"
className="flex w-full items-center justify-between py-3.5 text-body font-extrabold text-foreground transition-colors active:opacity-70"
>
프로필 수정
<ChevronRight className="size-5 text-muted-foreground" />
Expand All @@ -251,7 +251,7 @@ export function PersonProfileView({
type="button"
onClick={() => del.setOpen(true)}
disabled={del.pending}
className="flex w-full items-center justify-between py-3.5 text-left text-[15px] font-extrabold text-destructive transition-colors active:opacity-70 disabled:opacity-60"
className="flex w-full items-center justify-between py-3.5 text-left text-body font-extrabold text-destructive transition-colors active:opacity-70 disabled:opacity-60"
>
인물 삭제
<ChevronRight className="size-5 text-destructive/70" />
Expand Down Expand Up @@ -361,9 +361,7 @@ function Stat({ label, value }: { label: string; value: string }) {
return (
<div>
<dt className="text-xs font-bold text-muted-foreground">{label}</dt>
<dd className="mt-1 text-[15px] font-extrabold text-foreground">
{value}
</dd>
<dd className="mt-1 text-body font-extrabold text-foreground">{value}</dd>
</div>
)
}
4 changes: 2 additions & 2 deletions frontend/src/stackflow/activities/person/person-timeline-view.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,15 +147,15 @@ export function PersonTimelineView({ personId }: { personId: string }) {
<p className="text-base font-extrabold">
{person.stats.recordCount}개
</p>
<p className="text-[11px] font-medium text-muted-foreground">
<p className="text-caption font-medium text-muted-foreground">
함께한 기록
</p>
</div>
<div>
<p className="text-base font-extrabold">
{person.stats.lastMetRelative ?? '기록 없음'}
</p>
<p className="text-[11px] font-medium text-muted-foreground">
<p className="text-caption font-medium text-muted-foreground">
마지막 만남
</p>
</div>
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/stackflow/activities/record-activity.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ const EMOTION_TEXT = [
]

const bigChipBase =
'inline-flex h-11 items-center justify-center rounded-full border px-5 text-[15px] whitespace-nowrap transition-colors'
'inline-flex h-11 items-center justify-center rounded-full border px-5 text-body whitespace-nowrap transition-colors'
// 선택 채움은 순검정 대신 살짝 연한 잉크(눈부심 완화).
const neutralChipClass = cn(
bigChipBase,
Expand Down Expand Up @@ -628,7 +628,7 @@ export const RecordActivity: ActivityComponentType<'Record'> = ({ params }) => {
style={letterPaperStyle}
className="font-hand min-h-[148px] resize-none border-0 bg-transparent p-0 text-lg leading-7 tracking-tight shadow-none focus-visible:ring-0 md:text-lg"
/>
<span className="pointer-events-none absolute right-3 bottom-2 text-[11px] tabular-nums text-muted-foreground/70">
<span className="pointer-events-none absolute right-3 bottom-2 text-caption tabular-nums text-muted-foreground/70">
{what.length}/{MEMO_MAX}
</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/stackflow/activities/settings/home-settings-activity.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const HomeSettingsActivity: ActivityComponentType<
<ActivityShell layout="fixed">
<SettingsPageHeader title="홈 설정" onBack={() => pop()} />
<div className="min-h-0 flex-1 overflow-y-auto pb-8">
<p className="mb-1 text-[15px] font-extrabold text-foreground">
<p className="mb-1 text-body font-extrabold text-foreground">
기본으로 보여줄 기간
</p>
<p className="mb-4 text-xs font-medium text-muted-foreground">
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/stackflow/activities/settings/tag-type-panel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ export function TagTypePanel({
{description}
</p>
</div>
<span className="shrink-0 text-[11px] font-bold text-muted-foreground">
<span className="shrink-0 text-caption font-bold text-muted-foreground">
{chips.length}개
</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion frontend/src/stackflow/components/stack-tab-bar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export function StackTabBar({ activeTab }: { activeTab: MainTab }) {
type="button"
onClick={() => replaceStep({ tab: item.tab })}
className={cn(
'flex flex-col items-center gap-1 text-[11px] font-bold',
'flex flex-col items-center gap-1 text-caption font-bold',
activeTab === item.tab
? 'text-foreground'
: 'text-muted-foreground',
Expand Down
4 changes: 2 additions & 2 deletions frontend/src/stackflow/tabs/home-tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,13 +120,13 @@ export function HomeTab() {
>
<p className="text-sm font-extrabold text-foreground">
1년 전 오늘
<span className="ml-2 text-[11px] font-bold text-muted-foreground">
<span className="ml-2 text-caption font-bold text-muted-foreground">
{throwback.occurredDate}
</span>
</p>
<p
data-amp-mask
className="mt-1 line-clamp-2 text-[13px] font-medium text-muted-foreground"
className="mt-1 line-clamp-2 text-label font-medium text-muted-foreground"
>
{throwback.title ?? `작년 이맘때 ${throwback.personName}`}
</p>
Expand Down
8 changes: 4 additions & 4 deletions frontend/src/stackflow/tabs/people-tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export function PeopleTab() {
<button
type="button"
onClick={() => push('PersonNew', {})}
className="inline-flex shrink-0 items-center gap-1.5 rounded-full bg-primary px-4 py-2 text-[13px] font-extrabold text-primary-foreground"
className="inline-flex shrink-0 items-center gap-1.5 rounded-full bg-primary px-4 py-2 text-label font-extrabold text-primary-foreground"
>
<Plus className="size-4" />
추가
Expand All @@ -111,7 +111,7 @@ export function PeopleTab() {
value={query}
onChange={(e) => handleQueryChange(e.target.value)}
placeholder="이름·관계 유형 검색"
className="h-10 border-0 bg-transparent pl-8 text-[15px] shadow-none focus-visible:ring-0"
className="h-10 border-0 bg-transparent pl-8 text-body shadow-none focus-visible:ring-0"
/>
</ListGroupInset>
</ListGroupItem>
Expand Down Expand Up @@ -234,7 +234,7 @@ function PersonListItem({
<div className="min-w-0 flex-1">
<p
data-amp-mask
className="truncate text-[15px] font-extrabold text-foreground"
className="truncate text-body font-extrabold text-foreground"
>
{displayName}
</p>
Expand Down Expand Up @@ -273,7 +273,7 @@ function PersonListItem({
</div>
<p
className={cn(
'mt-1 text-[11px] font-bold',
'mt-1 text-caption font-bold',
lastMetLabel === '기록 없음'
? 'text-muted-foreground/70'
: 'text-muted-foreground',
Expand Down
Loading
Loading