From bd40f803fb2b5bfc5ccb6da9408907047304b20e Mon Sep 17 00:00:00 2001
From: Seongbin Kim <seongbin9786@gmail.com>
Date: Sun, 19 Jul 2026 17:04:35 +0900
Subject: [PATCH] =?UTF-8?q?refactor(fe):=20=EA=B7=B8=EB=A6=BC=EC=9E=90?=
 =?UTF-8?q?=EB=A5=BC=20elevation=20=ED=86=A0=ED=81=B0=EC=9C=BC=EB=A1=9C,?=
 =?UTF-8?q?=20=EA=B4=80=EA=B3=84=20=EC=A7=80=EB=8F=84=20=EB=AC=B4=EC=B1=84?=
 =?UTF-8?q?=EC=83=89=20=EB=A6=AC=ED=84=B0=EB=9F=B4=EC=9D=84=20=EC=8B=9C?=
 =?UTF-8?q?=EB=A7=A8=ED=8B=B1=20=ED=86=A0=ED=81=B0=EC=9C=BC=EB=A1=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

styles.css에 elevation 1~4 단계 토큰을 라이트/다크 각각 정의하고 @theme inline에
shadow-e1~e4 유틸을 등록했다. 테마별로 자동 전환되므로 dark:shadow-[...] 중복을 제거한다.
관계 지도에서 반복되던 무채색 zinc/white 리터럴을 background/foreground/muted 등
시맨틱 토큰으로 치환해 dark: 짝을 없앴다.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../components/home/relation-force-map.tsx    | 31 +++++++++++--------
 .../timeline/timeline-event-card.tsx          |  2 +-
 .../src/components/timeline/timeline-feed.tsx |  2 +-
 frontend/src/stackflow/tabs/home-tab.tsx      |  2 +-
 frontend/src/styles.css                       | 13 ++++++++
 5 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/home/relation-force-map.tsx b/frontend/src/components/home/relation-force-map.tsx
index 0d643de..131d3f5 100644
--- a/frontend/src/components/home/relation-force-map.tsx
+++ b/frontend/src/components/home/relation-force-map.tsx
@@ -289,12 +289,12 @@ export function RelationForceMap({
       }}
     >
       <div
-        className="absolute top-2 right-3 z-30 flex items-center gap-1 rounded-full bg-white/82 p-1 shadow-[0_10px_24px_rgba(24,24,27,0.08)] backdrop-blur-sm dark:bg-zinc-950/82 dark:shadow-[0_10px_24px_rgba(0,0,0,0.34)]"
+        className="absolute top-2 right-3 z-30 flex items-center gap-1 rounded-full bg-background/82 p-1 shadow-e3 backdrop-blur-sm"
         onPointerDown={(event) => event.stopPropagation()}
       >
         <button
           type="button"
-          className="grid size-8 place-items-center rounded-full text-zinc-600 transition-colors hover:bg-zinc-100 hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-white"
+          className="grid size-8 place-items-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
           onClick={() => zoomBy(-ZOOM_STEP)}
           aria-label="축소"
         >
@@ -302,7 +302,7 @@ export function RelationForceMap({
         </button>
         <button
           type="button"
-          className="grid size-8 place-items-center rounded-full text-zinc-600 transition-colors hover:bg-zinc-100 hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-white"
+          className="grid size-8 place-items-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
           onClick={resetViewport}
           aria-label="원래 크기"
         >
@@ -310,7 +310,7 @@ export function RelationForceMap({
         </button>
         <button
           type="button"
-          className="grid size-8 place-items-center rounded-full text-zinc-600 transition-colors hover:bg-zinc-100 hover:text-zinc-950 dark:text-zinc-300 dark:hover:bg-zinc-800 dark:hover:text-white"
+          className="grid size-8 place-items-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
           onClick={() => zoomBy(ZOOM_STEP)}
           aria-label="확대"
         >
@@ -319,11 +319,12 @@ export function RelationForceMap({
       </div>
 
       <div className="absolute inset-x-0 bottom-12 z-20 flex justify-center px-4">
-        <div className="flex max-w-[80%] items-center justify-center gap-2 overflow-hidden rounded-full bg-zinc-100/78 px-2.5 py-1.5 shadow-[0_8px_18px_rgba(24,24,27,0.05)] backdrop-blur-sm dark:bg-zinc-900/78 dark:shadow-[0_8px_18px_rgba(0,0,0,0.24)]">
+        <div className="flex max-w-[80%] items-center justify-center gap-2 overflow-hidden rounded-full bg-muted/78 px-2.5 py-1.5 shadow-e2 backdrop-blur-sm">
           {categories.map((category) => (
             <span
               key={category.label}
               data-amp-mask
+              // text-zinc-700/200은 foreground와 muted-foreground 사이 값이라 전용 토큰 나오기 전까지 손튜닝 값으로 둔다
               className="inline-flex min-w-0 items-center gap-1 text-[10px] font-bold text-zinc-700 dark:text-zinc-200"
             >
               <span
@@ -387,10 +388,11 @@ export function RelationForceMap({
               onClick={() => setActiveGraphIndex(index)}
               aria-label={`그래프 ${index + 1}`}
             >
+              {/* 비활성 도트 bg-zinc-300/700은 전용 토큰 나오기 전까지 손튜닝 값으로 둔다 */}
               <span
                 className={`block size-2.5 rounded-full transition-colors ${
                   activeGraphIndex === index
-                    ? 'bg-zinc-950 dark:bg-zinc-50'
+                    ? 'bg-foreground'
                     : 'bg-zinc-300 dark:bg-zinc-700'
                 }`}
               />
@@ -421,11 +423,11 @@ function OrbitGraph({
     <>
       <OrbitBackground />
       <div className="absolute top-1/2 left-1/2 z-20 flex -translate-x-1/2 -translate-y-[38px] flex-col items-center">
-        <div className="grid size-[76px] place-items-center rounded-full bg-white shadow-[0_0_0_1px_rgba(24,24,27,0.04),0_0_44px_rgba(255,198,109,0.58),0_0_82px_rgba(255,220,156,0.32)] dark:bg-zinc-950 dark:shadow-[0_0_0_1px_rgba(255,255,255,0.08),0_0_46px_rgba(255,198,109,0.34),0_0_84px_rgba(255,220,156,0.18)]">
+        <div className="grid size-[76px] place-items-center rounded-full bg-background shadow-[0_0_0_1px_rgba(24,24,27,0.04),0_0_44px_rgba(255,198,109,0.58),0_0_82px_rgba(255,220,156,0.32)] dark:shadow-[0_0_0_1px_rgba(255,255,255,0.08),0_0_46px_rgba(255,198,109,0.34),0_0_84px_rgba(255,220,156,0.18)]">
           <img
             src={imageSrc}
             alt={`${me.name} 프로필`}
-            className="size-[62px] rounded-full object-cover shadow-[0_10px_20px_rgba(24,24,27,0.14)] dark:shadow-[0_10px_20px_rgba(0,0,0,0.28)]"
+            className="size-[62px] rounded-full object-cover shadow-e3"
             onError={(event) => {
               const target = event.currentTarget
               if (target.dataset.fallback === '1') return
@@ -441,7 +443,7 @@ function OrbitGraph({
         </div>
         <span
           data-amp-mask
-          className="mt-1.5 max-w-24 truncate rounded-full bg-background/88 px-2 py-1 text-[12px] leading-none font-black text-zinc-950 shadow-[0_4px_12px_rgba(24,24,27,0.08)] backdrop-blur-sm dark:text-zinc-50"
+          className="mt-1.5 max-w-24 truncate rounded-full bg-background/88 px-2 py-1 text-[12px] leading-none font-black text-foreground shadow-e1 backdrop-blur-sm"
         >
           {me.name}
         </span>
@@ -511,7 +513,8 @@ 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-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)]"
+            // text-zinc-700/200은 foreground와 muted-foreground 사이 값이라 전용 토큰 나오기 전까지 손튜닝 값으로 둔다
+            className="absolute -translate-x-1/2 -translate-y-1/2 rounded-full bg-background/80 px-2 py-1 text-caption font-black text-zinc-700 shadow-e2 dark:text-zinc-200"
             style={{
               left: `${position.x}%`,
               top: `${position.y + radius.labelOffset}%`,
@@ -554,6 +557,7 @@ function RecentFlowGraph({
         preserveAspectRatio="none"
         aria-hidden
       >
+        {/* flow-path stroke는 모드별 알파를 손으로 맞춘 값이라 전용 토큰 나오기 전까지 유지한다 */}
         <path
           d={path}
           fill="none"
@@ -604,6 +608,7 @@ function OrbitBackground() {
         </radialGradient>
       </defs>
       <ellipse cx="50" cy="50" rx="34" ry="23" fill="url(#relationCoreGlow)" />
+      {/* 궤도선 stroke-stone은 따뜻한 색감으로 손튜닝한 값이라 무채색 토큰으로 치환하지 않는다 */}
       <ellipse
         cx="50"
         cy="50"
@@ -694,7 +699,7 @@ function PersonNode({
       aria-label={`${displayName} 상세`}
     >
       <span
-        className="relative grid place-items-center rounded-full border-[3px] bg-white shadow-[0_8px_20px_rgba(24,24,27,0.1)] ring-1 ring-zinc-200/70 dark:bg-zinc-950 dark:shadow-[0_8px_20px_rgba(0,0,0,0.32)] dark:ring-white/10"
+        className="relative grid place-items-center rounded-full border-[3px] bg-background shadow-e2 ring-1 ring-border"
         style={{
           width: `${nodeSize}px`,
           height: `${nodeSize}px`,
@@ -723,7 +728,7 @@ function PersonNode({
       {showText ? (
         <span
           data-amp-mask
-          className="mt-1.5 flex max-w-full items-center gap-1 rounded-full bg-background/86 px-1.5 py-0.5 text-[12px] leading-none font-black text-zinc-950 shadow-[0_4px_12px_rgba(24,24,27,0.06)] backdrop-blur-sm dark:text-zinc-50"
+          className="mt-1.5 flex max-w-full items-center gap-1 rounded-full bg-background/86 px-1.5 py-0.5 text-[12px] leading-none font-black text-foreground shadow-e1 backdrop-blur-sm"
         >
           <span className="min-w-0 truncate">{displayName}</span>
           <span
@@ -735,7 +740,7 @@ function PersonNode({
         </span>
       ) : null}
       {showLastMeet && person.intimacy.daysSinceLastMeet != null ? (
-        <span className="mt-1 text-caption leading-none font-medium text-zinc-500 dark:text-zinc-400">
+        <span className="mt-1 text-caption leading-none font-medium text-muted-foreground">
           {formatDaysSinceLastMeet(person.intimacy.daysSinceLastMeet)}
         </span>
       ) : null}
diff --git a/frontend/src/components/timeline/timeline-event-card.tsx b/frontend/src/components/timeline/timeline-event-card.tsx
index 1cc97f2..764ef9d 100644
--- a/frontend/src/components/timeline/timeline-event-card.tsx
+++ b/frontend/src/components/timeline/timeline-event-card.tsx
@@ -100,7 +100,7 @@ export function TimelineEventCard({
       onClick={() => onSelect(item.id)}
       className="block min-w-0 flex-1 text-left"
     >
-      <Card className="relative overflow-hidden py-0 shadow-[0_10px_30px_rgba(0,0,0,0.045)] transition-all hover:-translate-y-0.5 hover:bg-muted/20 hover:shadow-[0_14px_36px_rgba(0,0,0,0.07)]">
+      <Card className="relative overflow-hidden py-0 shadow-e3 transition-all hover:-translate-y-0.5 hover:bg-muted/20 hover:shadow-e4">
         <CardContent className="p-4">
           <div className="flex items-start gap-2">
             <h3
diff --git a/frontend/src/components/timeline/timeline-feed.tsx b/frontend/src/components/timeline/timeline-feed.tsx
index c9783fc..0886445 100644
--- a/frontend/src/components/timeline/timeline-feed.tsx
+++ b/frontend/src/components/timeline/timeline-feed.tsx
@@ -54,7 +54,7 @@ export function TimelineFeed<T extends TimelineFeedItem>({
             return (
               <div key={item.id} className="mb-4 flex min-w-0 gap-3">
                 <div className="flex w-[4.375rem] shrink-0 flex-col items-center">
-                  <div className="flex size-10 flex-col items-center justify-center rounded-full border border-foreground bg-card text-[10px] leading-none font-extrabold shadow-[0_5px_16px_rgba(0,0,0,0.08)]">
+                  <div className="flex size-10 flex-col items-center justify-center rounded-full border border-foreground bg-card text-[10px] leading-none font-extrabold shadow-e1">
                     <span>{month}</span>
                     <span>{day}</span>
                   </div>
diff --git a/frontend/src/stackflow/tabs/home-tab.tsx b/frontend/src/stackflow/tabs/home-tab.tsx
index 43507ea..0158cf1 100644
--- a/frontend/src/stackflow/tabs/home-tab.tsx
+++ b/frontend/src/stackflow/tabs/home-tab.tsx
@@ -106,7 +106,7 @@ export function HomeTab() {
               if (throwbackExiting) setThrowbackDismissed(true)
             }}
           >
-            <Card className="relative flex min-h-[82px] flex-row items-center gap-3 rounded-lg border border-border bg-card p-3.5 pr-10 text-card-foreground shadow-[0_18px_42px_rgba(24,24,27,0.14)] dark:shadow-[0_18px_42px_rgba(0,0,0,0.38)]">
+            <Card className="relative flex min-h-[82px] flex-row items-center gap-3 rounded-lg border border-border bg-card p-3.5 pr-10 text-card-foreground shadow-e4">
               <div className="flex size-11 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground">
                 <Clock3 className="size-5" />
               </div>
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 3c08daa..9f87569 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -42,6 +42,11 @@
   --border: oklch(0.922 0 0);
   --input: oklch(0.922 0 0);
   --ring: oklch(0.708 0 0);
+  /* elevation 단계 토큰, 라이트/다크 각각 정의해 dark:shadow 중복을 없앤다. */
+  --elevation-1: 0 4px 12px rgba(24, 24, 27, 0.07);
+  --elevation-2: 0 8px 18px rgba(24, 24, 27, 0.06);
+  --elevation-3: 0 10px 24px rgba(24, 24, 27, 0.08);
+  --elevation-4: 0 18px 42px rgba(24, 24, 27, 0.12);
   --font-sans: 'Pretendard', ui-sans-serif, system-ui, sans-serif;
 }
 
@@ -65,6 +70,10 @@
   --border: oklch(1 0 0 / 10%);
   --input: oklch(1 0 0 / 15%);
   --ring: oklch(0.556 0 0);
+  --elevation-1: 0 4px 12px rgba(0, 0, 0, 0.3);
+  --elevation-2: 0 8px 18px rgba(0, 0, 0, 0.26);
+  --elevation-3: 0 10px 24px rgba(0, 0, 0, 0.32);
+  --elevation-4: 0 18px 42px rgba(0, 0, 0, 0.38);
 }
 
 @theme inline {
@@ -90,6 +99,10 @@
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);
+  --shadow-e1: var(--elevation-1);
+  --shadow-e2: var(--elevation-2);
+  --shadow-e3: var(--elevation-3);
+  --shadow-e4: var(--elevation-4);
   --font-sans: var(--font-sans);
   --font-hand: 'Onglip Eunbyeol', var(--font-sans);
   /* 앱 고유 타이포 스케일. font-size만 지정해 기존 text-[Npx] 임의값과 렌더가 동일하다