feat(deepfield): three.js + 다크 토큰 + 쇼케이스 8슬롯 데이터

app/globals.css

@@ -49,6 +49,14 @@
   --jsm-accent-hover: #1e40af;  /* blue-800 */
   --jsm-accent-soft: #dbeafe;   /* blue-100 뱃지 배경 */
 
+  /* === Deep Field dark tokens (2026-06 랜딩 경험) — 라이트 토큰과 공존 === */
+  --jsm-dark-bg: #070d1a;
+  --jsm-dark-surface: rgba(255, 255, 255, 0.03);
+  --jsm-dark-line: rgba(148, 163, 184, 0.14);
+  --jsm-dark-ink: #f8fafc;
+  --jsm-dark-soft: #94a3b8;
+  --jsm-accent-bright: #60a5fa;
+
   /* 기존 kx 변수 재매핑 (잔여 참조 호환용) */
   --kx-surface: var(--jsm-bg);
   --kx-surface-low: var(--jsm-surface-alt);

lib/showcase.ts

@@ -0,0 +1,22 @@
+/** Deep Field 쇼케이스 8슬롯 — 단일 소스.
+ *  href가 있는 슬롯만 클릭 가능 (샘플 리뉴얼 완료 시 href 추가). */
+export interface ShowcaseSlot {
+  slug: string;
+  label: string;       // 모노스페이스 컨셉 라벨 (영문)
+  title: string;       // 카드 타이틀 (한글)
+  desc: string;        // 한 줄 설명
+  palette: [string, string]; // 카드 고유 그래디언트 월드 [from, to]
+  accent: string;      // 카드 포인트 컬러
+  href?: string;       // 리뉴얼 완료된 샘플의 데모 링크
+}
+
+export const SHOWCASE_SLOTS: ShowcaseSlot[] = [
+  { slug: 'corporate', label: 'corporate',  title: '기업 브랜드 사이트',  desc: '신뢰를 첫인상으로 — 브랜드 스토리와 IR까지', palette: ['#13203a', '#0d2c54'], accent: '#60a5fa' },
+  { slug: 'shopping',  label: 'commerce',   title: '커머스 스토어',       desc: '탐색부터 결제까지 끊김 없는 구매 동선',        palette: ['#1a1430', '#341a4f'], accent: '#c4b5fd' },
+  { slug: 'dashboard', label: 'dashboard',  title: '데이터 대시보드',     desc: '실시간 지표를 한눈에 — 의사결정용 화면',        palette: ['#0f2922', '#14503c'], accent: '#6ee7b7' },
+  { slug: 'bakery',    label: 'local shop', title: '로컬 매장 사이트',    desc: '예약·주문이 자연스러운 동네 가게의 얼굴',       palette: ['#2b1a10', '#4f2d14'], accent: '#fdba74' },
+  { slug: 'portfolio', label: 'portfolio',  title: '포트폴리오',          desc: '작업물이 주인공이 되는 미니멀 갤러리',          palette: ['#101418', '#23272d'], accent: '#e2e8f0' },
+  { slug: 'game',      label: 'game',       title: '게임 프로모션',       desc: '세계관에 빠져들게 하는 런칭 페이지',            palette: ['#250f23', '#4a1342'], accent: '#f0abfc' },
+  { slug: 'interior',  label: 'interior',   title: '인테리어 스튜디오',   desc: '공간의 톤을 그대로 옮긴 쇼룸',                  palette: ['#1f2218', '#3a4028'], accent: '#d9f99d' },
+  { slug: 'reading',   label: 'editorial',  title: '에디토리얼·매거진',   desc: '읽는 경험을 설계한 콘텐츠 사이트',              palette: ['#101b2b', '#1f3a5f'], accent: '#93c5fd' },
+];

package-lock.json

@@ -28,13 +28,15 @@
         "remark-gfm": "^4.0.0",
         "resend": "^6.9.1",
         "solarlunar": "^2.0.7",
-        "tailwind-merge": "^3.5.0"
+        "tailwind-merge": "^3.5.0",
+        "three": "^0.184.0"
       },
       "devDependencies": {
         "@tailwindcss/postcss": "^4",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
+        "@types/three": "^0.184.1",
         "eslint": "^9",
         "eslint-config-next": "16.1.6",
         "tailwindcss": "^4",
@@ -324,6 +326,13 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@dimforge/rapier3d-compat": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz",
+      "integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/@emnapi/core": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
@@ -2149,6 +2158,13 @@
         "tailwindcss": "4.1.18"
       }
     },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "23.1.3",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@tybys/wasm-util": {
       "version": "0.10.2",
       "resolved": "https://registry.npmjs.org/@tybys/wasm-util/-/wasm-util-0.10.2.tgz",
@@ -2280,12 +2296,41 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz",
+      "integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@types/three": {
+      "version": "0.184.1",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.184.1.tgz",
+      "integrity": "sha512-6q4VdiqVsrTRqmk62/BnlcAvIrnDM0zf2ZDVKI5kZiniWrSaOHaQzmbp+BNzoggc/8tgW412pL//wZIxu2PPTA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@dimforge/rapier3d-compat": "~0.12.0",
+        "@tweenjs/tween.js": "~23.1.3",
+        "@types/stats.js": "*",
+        "@types/webxr": ">=0.5.17",
+        "fflate": "~0.8.2",
+        "meshoptimizer": "~1.1.1"
+      }
+    },
     "node_modules/@types/unist": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
       "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
       "license": "MIT"
     },
+    "node_modules/@types/webxr": {
+      "version": "0.5.24",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.24.tgz",
+      "integrity": "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/ws": {
       "version": "8.18.1",
       "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
@@ -4963,6 +5008,13 @@
         "node": "^12.20 || >= 14.13"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.3.tgz",
+      "integrity": "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -7192,6 +7244,13 @@
         "node": ">= 8"
       }
     },
+    "node_modules/meshoptimizer": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-1.1.1.tgz",
+      "integrity": "sha512-oRFNWJRDA/WTrVj7NWvqa5HqE1t9MYDj2VaWirQCzCCrAd2GHrqR/sQezCxiWATPNlKTcRaPRHPJwIRoPBAp5g==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/micromark": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.2.tgz",
@@ -9744,6 +9803,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/three": {
+      "version": "0.184.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.184.0.tgz",
+      "integrity": "sha512-wtTRjG92pM5eUg/KuUnHsqSAlPM296brTOcLgMRqEeylYTh/CdtvKUvCyyCQTzFuStieWxvZb8mVTMvdPyUpxg==",
+      "license": "MIT"
+    },
     "node_modules/tinybench": {
       "version": "2.9.0",
       "resolved": "https://registry.npmjs.org/tinybench/-/tinybench-2.9.0.tgz",

package.json

@@ -30,13 +30,15 @@
     "remark-gfm": "^4.0.0",
     "resend": "^6.9.1",
     "solarlunar": "^2.0.7",
-    "tailwind-merge": "^3.5.0"
+    "tailwind-merge": "^3.5.0",
+    "three": "^0.184.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",
     "@types/node": "^20",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@types/three": "^0.184.1",
     "eslint": "^9",
     "eslint-config-next": "16.1.6",
     "tailwindcss": "^4",