feat: Develop

src/design-system/tokens.ts

@@ -2,7 +2,6 @@
 
 
 
-import { px } from 'framer-motion';
 
 
 
@@ -460,6 +459,79 @@ export const fontSize = {
   '6xl': '3.75rem',
 } as const;
 
+// ─── 역할 기반 타이포그래피 (앞으로 이것만 쓸 것) ──────────────────────────
+export const typographyRole = {
+  display: {
+    fontSize: 'clamp(32px, 5vw, 56px)',
+    fontWeight: 700,
+    letterSpacing: '-0.03em',
+    lineHeight: 1.2,
+  },
+  sectionTitle: {
+    fontSize: 'clamp(22px, 2.6vw, 30px)',
+    fontWeight: 700,
+    letterSpacing: '-0.02em',
+    lineHeight: 1.3,
+  },
+  cardTitle: {
+    fontSize: 'clamp(16px, 1.4vw, 18px)',
+    fontWeight: 600,
+    letterSpacing: '-0.01em',
+    lineHeight: 1.4,
+  },
+  body: {
+    fontSize: '15px',
+    fontWeight: 400,
+    lineHeight: 1.7,
+  },
+  bodySm: {
+    fontSize: '14px',
+    fontWeight: 400,
+    lineHeight: 1.6,
+  },
+  caption: {
+    fontSize: '13px',
+    fontWeight: 400,
+    lineHeight: 1.5,
+  },
+  label: {
+    fontSize: '12px',
+    fontWeight: 500,
+    letterSpacing: '0.02em',
+    lineHeight: 1.4,
+  },
+  eyebrow: {
+    fontSize: '12px',
+    fontWeight: 500,
+    letterSpacing: '0.12em',
+    lineHeight: 1.4,
+  },
+  numeric: {
+    fontSize: 'clamp(28px, 4vw, 44px)',
+    fontWeight: 700,
+    letterSpacing: '-0.03em',
+    fontVariantNumeric: 'tabular-nums' as const,
+  },
+} as const;
+
+// ─── 레이아웃 간격 토큰 ────────────────────────────────────────────────────
+export const spacingLayout = {
+  pageX:      'clamp(20px, 5vw, 40px)',
+  pageTop:    'clamp(48px, 8vh, 80px)',
+  sectionGap: 'clamp(56px, 9vh, 96px)',
+  cardPadding:'clamp(16px, 2vw, 20px)',
+  cardGap:    'clamp(12px, 1.5vw, 16px)',
+} as const;
+
+// ─── 미디어 쿼리 헬퍼 ─────────────────────────────────────────────────────
+export const mq = {
+  mobile:   '@media (max-width: 767px)',
+  tablet:   '@media (min-width: 768px) and (max-width: 1023px)',
+  laptop:   '@media (min-width: 1024px)',
+  desktop:  '@media (min-width: 1280px)',
+  tabletSm: '@media (min-width: 640px)',  // sorimaru/core-ui 640px 대응
+} as const;
+
 
 
 export const fluidHeading = {
@@ -533,8 +605,7 @@ export const createTheme = (mode: ColorMode) => {
         p1: '18px', p2: '16px', p3: '14px', p4: '12px',
         headline: '18px', headlineCaps: '14px', inputField: '16px',
       },
-
-
+      role: typographyRole,
       fontWeight: { thin: 100, light: 300, regular: 400, medium: 500, bold: 700 },
       lineHeight:  { tight: 1.25, normal: 1.6, loose: 1.8 },
     },
@@ -543,6 +614,7 @@ export const createTheme = (mode: ColorMode) => {
       0: '0',       1: '0.25rem', 2: '0.5rem',  3: '0.75rem',
       4: '1rem',    5: '1.25rem', 6: '1.5rem',  8: '2rem',
       10: '2.5rem', 12: '3rem',  16: '4rem',   20: '5rem', 24: '6rem',
+      layout: spacingLayout,
     },
 
     borderRadius: {

src/features/hanok-archive/HanokArchive.tsx

@@ -4,7 +4,7 @@ import React, { useEffect, useState } from 'react';
 import dynamic from 'next/dynamic';
 import styled from '@emotion/styled';
 import { Global, css } from '@emotion/react';
-import { meok, lightPalette, surface, fontSize } from '@/design-system/tokens';
+import { meok, lightPalette, surface, typographyRole, spacingLayout, mq } from '@/design-system/tokens';
 import HanokGrid from '@/features/hanok-archive/sections/HanokGrid';
 import HanokStayAccordion from '@/features/hanok-archive/sections/HanokStayAccordion';
 import HanokMap from '@/features/hanok-archive/sections/HanokMap';
@@ -60,9 +60,9 @@ const PageInner = styled.div`
   width: 100%;
   margin: 0;
   padding-top: 76px;
-  padding-bottom: clamp(64px, 8vh, 120px);
+  padding-bottom: ${spacingLayout.sectionGap};
 
-  @media (max-width: 767px) {
+  ${mq.mobile} {
     padding-top: 20px;
   }
 `;
@@ -71,16 +71,15 @@ const SectionContainer = styled.div`
   margin: 0 auto;
   width: min(calc(100% - 40px), 1140px);
   max-width: 1140px;
-  padding: clamp(28px, 4vw, 48px) 0;
+  padding: ${spacingLayout.sectionGap} 0;
 
-  @media (max-width: 1024px) {
+  @media (max-width: 1023px) {
     width: calc(100% - 28px);
-    padding: clamp(24px, 4vw, 40px) 0;
+    padding: ${spacingLayout.sectionGap} 0;
   }
 
-  @media (max-width: 640px) {
+  ${mq.mobile} {
     width: calc(100% - 24px);
-    padding: clamp(20px, 4vw, 32px) 0;
   }
 `;
 
@@ -106,12 +105,12 @@ const paperGround = css`
 
 
 const ChapterBreak = styled.div`
-  padding-top: clamp(80px, 9vh, 124px);
+  padding-top: ${spacingLayout.sectionGap};
 `;
 
 
 const ArchiveSection = styled.div`
-  padding-top: clamp(64px, 7vh, 92px);
+  padding-top: ${spacingLayout.sectionGap};
 `;
 
 const IntroStage = styled.div`
@@ -126,12 +125,12 @@ const IntroStage = styled.div`
   align-items: center;
   justify-content: center;
 
-  @media (max-width: 1024px) {
+  @media (max-width: 1023px) {
     width: calc(100% - 28px);
     margin: 0 auto;
   }
 
-  @media (max-width: 640px) {
+  ${mq.mobile} {
     width: calc(100% - 24px);
     margin: 0 auto;
     border-radius: 18px;
@@ -183,7 +182,7 @@ const Lead = styled.p`
 `;
 
 const SourceNote = styled.p`
-  font-size: ${fontSize.xs};
+  font-size: ${typographyRole.label.fontSize};
   color: ${meok[500]};
   margin: 0;
 

src/features/hanok-archive/components/ArchiveNav.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import styled from '@emotion/styled';
 import Link from 'next/link';
 import type { SectionId } from '@/features/hanok-archive/types';
-import { lightPalette, meok , fontSize } from '@/design-system/tokens';
+import { lightPalette, meok, typographyRole } from '@/design-system/tokens';
 
 const Nav = styled.nav`
   position: sticky;
@@ -23,7 +23,7 @@ const Nav = styled.nav`
 `;
 
 const LogoLink = styled(Link)`
-  font-size: ${fontSize.base};
+  font-size: ${typographyRole.body.fontSize};
   font-weight: 500;
   color: ${meok[900]};
   text-decoration: none;
@@ -50,7 +50,7 @@ const MenuList = styled.ul`
 const MenuItem = styled.li``;
 
 const MenuAnchor = styled.a<{ $active: boolean }>`
-  font-size: ${fontSize.sm};
+  font-size: ${typographyRole.bodySm.fontSize};
   font-weight: ${({ $active }) => ($active ? 500 : 400)};
   color: ${({ $active }) => ($active ? meok[900] : meok[700])};
   text-decoration: none;

src/features/hanok-archive/components/FilterBar.tsx

@@ -5,7 +5,7 @@ import styled from '@emotion/styled';
 import { motion } from 'framer-motion';
 import { HugeiconsIcon } from '@hugeicons/react'
 import { Cancel01Icon, ChevronDownIcon, RotateCcwIcon, Search01Icon, Tag01Icon } from '@hugeicons/core-free-icons'
-import { meok, palette, surface , fontSize } from '@/design-system/tokens';
+import { meok, palette, surface, typographyRole } from '@/design-system/tokens';
 import { STAY_TYPE, type Village } from '@/features/hanok-archive/types';
 import { filterLabel } from '@/features/hanok-archive/filterLabels';
 
@@ -89,7 +89,7 @@ const SearchInput = styled.input`
   outline: none;
   background: none;
   font-family: inherit;
-  font-size: ${fontSize.sm};
+  font-size: ${typographyRole.bodySm.fontSize};
   color: ${meok[900]};
 
   &::placeholder {
@@ -163,7 +163,7 @@ const RegionSelectControl = styled.div`
 `;
 
 const RegionSelectValue = styled.span`
-  font-size: ${fontSize.sm};
+  font-size: ${typographyRole.bodySm.fontSize};
   line-height: 1;
   white-space: nowrap;
 `;
@@ -185,7 +185,7 @@ const RegionSelect = styled.select`
   height: 42px;
   opacity: 0;
   font-family: inherit;
-  font-size: ${fontSize.sm};
+  font-size: ${typographyRole.bodySm.fontSize};
   cursor: pointer;
 `;
 
@@ -222,7 +222,7 @@ const Segment = styled.button<{ $active: boolean }>`
   background: transparent;
   border: none;
   padding: 9px 22px;
-  font-size: ${fontSize.sm};
+  font-size: ${typographyRole.bodySm.fontSize};
   font-weight: ${({ $active }) => ($active ? 700 : 400)};
   color: ${({ $active }) => ($active ? '#ffffff' : meok[700])};
   cursor: pointer;
@@ -273,7 +273,7 @@ const BadgeHeader = styled.div`
   display: flex;
   align-items: center;
   gap: 6px;
-  font-size: ${fontSize.xs};
+  font-size: ${typographyRole.label.fontSize};
   font-weight: 600;
   letter-spacing: 0.04em;
   color: ${meok[700]};
@@ -314,7 +314,7 @@ const BadgeChip = styled.button<{ $active: boolean; $variant?: 'cheongrok' | 'ju
     return `linear-gradient(135deg, ${palette.juhong[500]} 0%, ${palette.juhong[700]} 100%)`;
   }};
   color: ${({ $active }) => ($active ? '#ffffff' : meok[700])};
-  font-size: ${fontSize.xs};
+  font-size: ${typographyRole.label.fontSize};
   font-weight: ${({ $active }) => ($active ? 600 : 400)};
   padding: 6px 14px;
   border-radius: 9999px;
@@ -342,7 +342,7 @@ const BadgeChip = styled.button<{ $active: boolean; $variant?: 'cheongrok' | 'ju
 const ResetBtn = styled.button`
   background: transparent;
   color: ${meok[500]};
-  font-size: ${fontSize.xs};
+  font-size: ${typographyRole.label.fontSize};
   font-weight: 500;
   padding: 4px 10px;
   border-radius: 9999px;

src/features/hanok-archive/components/HanokArchiveIntroHeading.tsx

@@ -2,12 +2,12 @@
 
 import React from 'react';
 import styled from '@emotion/styled';
-import { fontSize, lightPalette, meok } from '@/design-system/tokens';
+import { lightPalette, meok, typographyRole } from '@/design-system/tokens';
 
 const Kicker = styled.p`
   margin: 0 0 16px;
   color: ${meok[500]};
-  font-size: ${fontSize.xs};
+  font-size: ${typographyRole.label.fontSize};
   font-weight: 600;
   letter-spacing: 0.02em;
 
@@ -18,6 +18,7 @@ const Kicker = styled.p`
 
 
 const Title = styled.h1`
+  /* ponytail: 예외 — Dohyun 폰트 아카이브 인트로 타이틀, 브랜드 감성 의도적 크기 */
   --section-heading-size: clamp(24px,3.2vw,36px);
   width: fit-content;
   margin: 0 0 14px;