Merge pull request 'feat: Tailwind CSS v4 + @wing/ui 디자인 시스템' (#21 ) from feature/tailwind-design-system into develop

Reviewed-on: #21
fix: 폰트 크기 복원 + 라이트 모드 대비 + CSS 변수 전환
2026-02-17 06:46:49 +09:00 · 2026-02-17 06:41:27 +09:00 · 2026-02-17 06:22:49 +09:00 · 2026-02-17 06:18:57 +09:00 · 2026-02-17 06:15:32 +09:00 · 2026-02-17 06:12:02 +09:00
--- a/apps/web/index.html
+++ b/apps/web/index.html
@ -4,6 +4,9 @@
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
    <title>WING 조업감시 데모</title>
  </head>
  <body>
--- a/apps/web/package.json
+++ b/apps/web/package.json
@ -12,21 +12,23 @@
  "dependencies": {
    "@deck.gl/aggregation-layers": "^9.2.7",
    "@deck.gl/core": "^9.2.7",
+    "@deck.gl/extensions": "^9.2.7",
    "@deck.gl/geo-layers": "^9.2.7",
    "@deck.gl/layers": "^9.2.7",
    "@deck.gl/mapbox": "^9.2.7",
    "@maptiler/weather": "^3.1.1",
    "@react-oauth/google": "^0.13.4",
+    "@stomp/stompjs": "^7.2.1",
+    "@wing/ui": "*",
    "maplibre-gl": "^5.18.0",
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
    "react-router": "^7.13.0",
-    "@deck.gl/extensions": "^9.2.7",
-    "@stomp/stompjs": "^7.2.1",
    "zustand": "^5.0.8"
  },
  "devDependencies": {
    "@eslint/js": "^9.39.1",
+    "@tailwindcss/vite": "^4.1.18",
    "@types/node": "^24.10.1",
    "@types/react": "^19.2.7",
    "@types/react-dom": "^19.2.3",
@ -35,6 +37,7 @@
    "eslint-plugin-react-hooks": "^7.0.1",
    "eslint-plugin-react-refresh": "^0.4.24",
    "globals": "^16.5.0",
+    "tailwindcss": "^4.1.18",
    "typescript": "~5.9.3",
    "typescript-eslint": "^8.48.0",
    "vite": "^7.3.1"
--- a/apps/web/src/app/styles.css
+++ b/apps/web/src/app/styles.css
@ -1,12 +1,13 @@
 /* ── Wing Fleet Dashboard – Style Entry Point ─────────────────── */

-@import "./styles/base.css";
-@import "./styles/layout.css";
+@import "tailwindcss";
+@import "@wing/ui/theme/tokens.css";
+@source "../../../../packages/ui/src/**/*.{ts,tsx}";

-/* Components */
-@import "./styles/components/topbar.css";
+@import "./styles/base.css";
+
+/* Components (layout/topbar/toggles → inline Tailwind + @wing/ui) */
@import "./styles/components/panels.css";
-@import "./styles/components/toggles.css";
@import "./styles/components/speed.css";
@import "./styles/components/vessel-list.css";
@import "./styles/components/ais-list.css";
--- a/apps/web/src/app/styles/base.css
+++ b/apps/web/src/app/styles/base.css
@ -1,23 +1,6 @@
-@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;600;700;800;900&display=swap");
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-:root {
-  --bg: #020617;
-  --panel: #0f172a;
-  --card: #1e293b;
-  --border: #1e3a5f;
-  --text: #e2e8f0;
-  --muted: #64748b;
-  --accent: #3b82f6;
-
-  --crit: #ef4444;
-  --high: #f59e0b;
-}
+/* Google Fonts: loaded via index.html <link> */
+/* CSS Reset: handled by Tailwind preflight */
+/* CSS Variables: defined in @wing/ui/theme/tokens.css */

 html,
 body {
--- a/apps/web/src/app/styles/components/ais-list.css
+++ b/apps/web/src/app/styles/components/ais-list.css
@ -5,13 +5,13 @@
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
-  background: rgba(30, 41, 59, 0.75);
+  background: var(--wing-card-alpha);
  color: var(--text);
  outline: none;
 }

 .ais-q::placeholder {
-  color: rgba(100, 116, 139, 0.9);
+  color: var(--wing-muted);
 }

 .ais-mode {
@ -55,8 +55,8 @@
 }

 .ais-row:hover {
-  background: rgba(30, 41, 59, 0.6);
-  border-color: rgba(30, 58, 95, 0.8);
+  background: var(--wing-card-alpha);
+  border-color: var(--wing-border);
 }

 .ais-row.sel {
@ -118,8 +118,8 @@

 .ais-badge.pn {
  color: var(--muted);
-  background: rgba(30, 41, 59, 0.55);
-  border-color: rgba(30, 58, 95, 0.9);
+  background: var(--wing-card-alpha);
+  border-color: var(--wing-border);
  font-weight: 700;
 }

@ -155,5 +155,5 @@

 .ais-ts {
  font-size: 9px;
-  color: rgba(100, 116, 139, 0.9);
+  color: var(--wing-muted);
 }
--- a/apps/web/src/app/styles/components/alarms.css
+++ b/apps/web/src/app/styles/components/alarms.css
@ -36,7 +36,7 @@
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid var(--border);
-  background: rgba(30, 41, 59, 0.55);
+  background: var(--wing-card-alpha);
  color: var(--text);
  font-size: 8px;
  font-weight: 700;
@ -58,7 +58,7 @@
  padding: 6px;
  border-radius: 10px;
  border: 1px solid var(--border);
-  background: rgba(15, 23, 42, 0.98);
+  background: var(--wing-glass-dense);
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.55);
 }

@ -90,6 +90,6 @@

 .alarm-filter__sep {
  height: 1px;
-  background: rgba(30, 58, 95, 0.85);
+  background: var(--wing-border);
  margin: 4px 0;
 }
--- a/apps/web/src/app/styles/components/auth.css
+++ b/apps/web/src/app/styles/components/auth.css
@ -5,7 +5,7 @@
  display: flex;
  align-items: center;
  justify-content: center;
-  background: linear-gradient(135deg, #020617 0%, #0f172a 50%, #020617 100%);
+  background: linear-gradient(135deg, var(--wing-bg) 0%, var(--wing-surface) 50%, var(--wing-bg) 100%);
 }

 .auth-card {
--- a/apps/web/src/app/styles/components/map-panels.css
+++ b/apps/web/src/app/styles/components/map-panels.css
@ -5,7 +5,7 @@
  bottom: 44px;
  right: 12px;
  z-index: 800;
-  background: rgba(15, 23, 42, 0.92);
+  background: var(--wing-glass);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 8px;
@ -41,7 +41,7 @@
  top: 12px;
  right: 12px;
  z-index: 800;
-  background: rgba(15, 23, 42, 0.95);
+  background: var(--wing-glass-dense);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 8px;
@ -54,7 +54,7 @@
  justify-content: space-between;
  font-size: 10px;
  padding: 2px 0;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
+  border-bottom: 1px solid var(--wing-subtle);
 }

 .map-info .il {
@ -72,13 +72,13 @@
  display: flex;
  align-items: center;
  justify-content: center;
-  background: rgba(2, 6, 23, 0.42);
+  background: var(--wing-overlay);
  pointer-events: auto;
 }

 .map-loader-overlay__panel {
  width: min(72vw, 320px);
-  background: rgba(15, 23, 42, 0.94);
+  background: var(--wing-glass-dense);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
@ -185,7 +185,7 @@

 .maplibregl-ctrl-group {
  border: 1px solid var(--border) !important;
-  background: rgba(15, 23, 42, 0.92) !important;
+  background: var(--wing-glass) !important;
  backdrop-filter: blur(8px);
 }

@ -197,14 +197,20 @@
  border-top: 1px solid var(--border) !important;
 }

-.maplibregl-ctrl-group button span {
+:root .maplibregl-ctrl-group button span,
+[data-theme='dark'] .maplibregl-ctrl-group button span {
  filter: invert(1);
  opacity: 0.9;
 }

+[data-theme='light'] .maplibregl-ctrl-group button span {
+  filter: none;
+  opacity: 0.7;
+}
+
 .maplibregl-ctrl-attrib {
  font-size: 10px !important;
-  background: rgba(15, 23, 42, 0.75) !important;
+  background: var(--wing-glass) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px;
--- a/apps/web/src/app/styles/components/map-settings.css
+++ b/apps/web/src/app/styles/components/map-settings.css
@ -9,7 +9,7 @@
  height: 29px;
  border-radius: 4px;
  border: 1px solid var(--border);
-  background: rgba(15, 23, 42, 0.92);
+  background: var(--wing-glass);
  backdrop-filter: blur(8px);
  color: var(--muted);
  cursor: pointer;
@ -37,7 +37,7 @@
  top: 10px;
  left: 48px;
  z-index: 850;
-  background: rgba(15, 23, 42, 0.95);
+  background: var(--wing-glass-dense);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 8px;
@ -148,7 +148,7 @@
  bottom: 44px;
  left: 10px;
  z-index: 800;
-  background: rgba(15, 23, 42, 0.92);
+  background: var(--wing-glass);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 8px;
--- a/apps/web/src/app/styles/components/relations.css
+++ b/apps/web/src/app/styles/components/relations.css
@ -53,7 +53,7 @@

 /* Fleet network */
 .fleet-card {
-  background: rgba(30, 41, 59, 0.8);
+  background: var(--wing-card-alpha);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
--- a/apps/web/src/app/styles/components/toggles.css
+++ b/apps/web/src/app/styles/components/toggles.css
@ -1,75 +0,0 @@
-/* Type grid */
-.tg {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 3px;
-}
-
-.tb {
-  background: var(--card);
-  border: 1px solid transparent;
-  border-radius: 5px;
-  padding: 4px;
-  cursor: pointer;
-  text-align: center;
-  transition: all 0.15s;
-  user-select: none;
-}
-
-.tb:hover {
-  border-color: var(--border);
-}
-
-.tb.on {
-  border-color: var(--accent);
-  background: rgba(59, 130, 246, 0.1);
-}
-
-.tb .c {
-  font-size: 11px;
-  font-weight: 800;
-}
-
-.tb .n {
-  font-size: 8px;
-  color: var(--muted);
-}
-
-/* Toggles */
-.tog {
-  display: flex;
-  gap: 3px;
-  flex-wrap: wrap;
-  margin-bottom: 6px;
-}
-
-.tog.tog-map {
-  /* Keep "지도 표시 설정" buttons in a predictable 2-row layout (4 columns). */
-  gap: 4px;
-}
-
-.tog.tog-map .tog-btn {
-  flex: 1 1 calc(25% - 4px);
-  text-align: center;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.tog-btn {
-  font-size: 8px;
-  padding: 2px 6px;
-  border-radius: 3px;
-  border: 1px solid var(--border);
-  background: var(--card);
-  color: var(--muted);
-  cursor: pointer;
-  transition: all 0.15s;
-  user-select: none;
-}
-
-.tog-btn.on {
-  background: var(--accent);
-  color: #fff;
-  border-color: var(--accent);
-}
--- a/apps/web/src/app/styles/components/topbar.css
+++ b/apps/web/src/app/styles/components/topbar.css
@ -1,84 +0,0 @@
-.topbar {
-  grid-column: 1/-1;
-  background: var(--panel);
-  border-bottom: 1px solid var(--border);
-  display: flex;
-  align-items: center;
-  padding: 0 14px;
-  gap: 10px;
-  z-index: 1000;
-}
-
-.topbar .logo {
-  font-size: 14px;
-  font-weight: 800;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  white-space: nowrap;
-}
-
-.topbar .logo span {
-  color: var(--accent);
-}
-
-.topbar .stats {
-  display: flex;
-  gap: 14px;
-  margin-left: auto;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-}
-
-.topbar .stat {
-  font-size: 10px;
-  color: var(--muted);
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.topbar .stat b {
-  color: var(--text);
-  font-size: 12px;
-}
-
-.topbar .time {
-  font-size: 10px;
-  color: var(--accent);
-  font-weight: 600;
-  margin-left: 10px;
-  white-space: nowrap;
-}
-
-.topbar-user {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-left: 10px;
-  flex-shrink: 0;
-}
-
-.topbar-user__name {
-  font-size: 10px;
-  color: var(--text);
-  font-weight: 500;
-  white-space: nowrap;
-}
-
-.topbar-user__logout {
-  font-size: 9px;
-  color: var(--muted);
-  background: none;
-  border: 1px solid var(--border);
-  border-radius: 3px;
-  padding: 2px 6px;
-  cursor: pointer;
-  transition: all 0.15s;
-  white-space: nowrap;
-}
-
-.topbar-user__logout:hover {
-  color: var(--text);
-  border-color: var(--accent);
-}
--- a/apps/web/src/app/styles/components/weather-overlay.css
+++ b/apps/web/src/app/styles/components/weather-overlay.css
@ -9,7 +9,7 @@
  height: 29px;
  border-radius: 4px;
  border: 1px solid var(--border);
-  background: rgba(15, 23, 42, 0.92);
+  background: var(--wing-glass);
  backdrop-filter: blur(8px);
  color: var(--muted);
  cursor: pointer;
@ -73,7 +73,7 @@
 }

 .wo-panel {
-  background: rgba(15, 23, 42, 0.95);
+  background: var(--wing-glass-dense);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 8px;
@ -123,7 +123,7 @@
  padding: 6px 4px;
  border-radius: 6px;
  border: 1px solid var(--border);
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--wing-subtle);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
@ -329,7 +329,7 @@

 /* ── Weather Legend ── */
 .wo-legend {
-  background: rgba(15, 23, 42, 0.85);
+  background: var(--wing-glass);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 6px;
--- a/apps/web/src/app/styles/components/weather.css
+++ b/apps/web/src/app/styles/components/weather.css
@ -9,7 +9,7 @@
  height: 29px;
  border-radius: 4px;
  border: 1px solid var(--border);
-  background: rgba(15, 23, 42, 0.92);
+  background: var(--wing-glass);
  backdrop-filter: blur(8px);
  color: var(--muted);
  cursor: pointer;
@ -37,7 +37,7 @@
  top: 130px;
  left: 48px;
  z-index: 850;
-  background: rgba(15, 23, 42, 0.95);
+  background: var(--wing-glass-dense);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border);
  border-radius: 8px;
@ -87,7 +87,7 @@
  padding: 6px 8px;
  margin-bottom: 6px;
  border-radius: 0 4px 4px 0;
-  background: rgba(255, 255, 255, 0.03);
+  background: var(--wing-subtle);
  transition: background 0.15s;
 }

--- a/apps/web/src/app/styles/layout.css
+++ b/apps/web/src/app/styles/layout.css
@ -1,30 +0,0 @@
-.app {
-  display: grid;
-  grid-template-columns: 310px 1fr;
-  grid-template-rows: 44px 1fr;
-  height: 100vh;
-}
-
-.sidebar {
-  background: var(--panel);
-  border-right: 1px solid var(--border);
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-}
-
-.map-area {
-  position: relative;
-  background: #010610;
-}
-
-@media (max-width: 920px) {
-  .app {
-    grid-template-columns: 1fr;
-    grid-template-rows: 44px 1fr;
-  }
-
-  .sidebar {
-    display: none;
-  }
-}
--- a/apps/web/src/features/map3dSettings/Map3DSettingsToggles.tsx
+++ b/apps/web/src/features/map3dSettings/Map3DSettingsToggles.tsx
@ -1,3 +1,4 @@
+import { ToggleButton } from '@wing/ui';
 import type { Map3DSettings } from "../../widgets/map3d/Map3D";

 type Props = {
@ -13,11 +14,11 @@ export function Map3DSettingsToggles({ value, onToggle }: Props) {
  ];

  return (
-    <div className="tog">
+    <div className="flex flex-wrap gap-0.75 mb-1.5">
      {items.map((t) => (
-        <div key={t.id} className={`tog-btn ${value[t.id] ? "on" : ""}`} onClick={() => onToggle(t.id)}>
+        <ToggleButton key={t.id} on={value[t.id]} onClick={() => onToggle(t.id)}>
          {t.label}
-        </div>
+        </ToggleButton>
      ))}
    </div>
  );
--- a/apps/web/src/features/mapSettings/MapSettingsPanel.tsx
+++ b/apps/web/src/features/mapSettings/MapSettingsPanel.tsx
@ -146,8 +146,7 @@ export function MapSettingsPanel({ value, onChange }: MapSettingsPanelProps) {
            <div className="ms-label" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
              수심 구간 색상
              <span
-                className={`tog-btn${autoGradient ? ' on' : ''}`}
-                style={{ fontSize: 8, padding: '1px 5px', marginLeft: 8 }}
+                className={`ml-2 cursor-pointer rounded border px-1.5 py-px text-[8px] transition-all duration-150 select-none ${autoGradient ? 'border-wing-accent bg-wing-accent text-white' : 'border-wing-border bg-wing-card text-wing-muted'}`}
                onClick={toggleAutoGradient}
                title="최소/최대 색상 기준으로 중간 구간을 자동 보간합니다"
              >
@ -176,11 +175,11 @@ export function MapSettingsPanel({ value, onChange }: MapSettingsPanelProps) {
          {/* ── Depth font size ───────────────────────────── */}
          <div className="ms-section">
            <div className="ms-label">수심 폰트 크기</div>
-            <div className="tog" style={{ gap: 3 }}>
+            <div className="flex flex-wrap gap-0.75">
              {FONT_SIZES.map((fs) => (
                <div
                  key={fs.value}
-                  className={`tog-btn${value.depthFontSize === fs.value ? ' on' : ''}`}
+                  className={`cursor-pointer rounded border px-1.5 py-0.5 text-[8px] transition-all duration-150 select-none ${value.depthFontSize === fs.value ? 'border-wing-accent bg-wing-accent text-white' : 'border-wing-border bg-wing-card text-wing-muted'}`}
                  onClick={() => update('depthFontSize', fs.value)}
                >
                  {fs.label}
--- a/apps/web/src/features/mapToggles/MapToggles.tsx
+++ b/apps/web/src/features/mapToggles/MapToggles.tsx
@ -1,3 +1,5 @@
+import { ToggleButton } from '@wing/ui';
+
 export type MapToggleState = {
  pairLines: boolean;
  pairRange: boolean;
@ -27,11 +29,16 @@ export function MapToggles({ value, onToggle }: Props) {
  ];

  return (
-    <div className="tog tog-map">
+    <div className="flex flex-wrap gap-1">
      {items.map((t) => (
-        <div key={t.id} className={`tog-btn ${value[t.id] ? "on" : ""}`} onClick={() => onToggle(t.id)}>
+        <ToggleButton
+          key={t.id}
+          on={value[t.id]}
+          onClick={() => onToggle(t.id)}
+          className="flex-[1_1_calc(25%-4px)] overflow-hidden text-center text-ellipsis whitespace-nowrap"
+        >
          {t.label}
-        </div>
+        </ToggleButton>
      ))}
    </div>
  );
--- a/apps/web/src/features/typeFilter/TypeFilterGrid.tsx
+++ b/apps/web/src/features/typeFilter/TypeFilterGrid.tsx
@ -9,26 +9,26 @@ type Props = {
  onToggleAll: () => void;
 };

+const TB = "cursor-pointer rounded-[5px] border p-1 text-center transition-all duration-150 select-none";
+const TB_ON = "border-wing-accent bg-wing-accent/10";
+const TB_OFF = "border-transparent bg-wing-card hover:border-wing-border";
+
 export function TypeFilterGrid({ enabled, totalCount, countsByType, onToggle, onToggleAll }: Props) {
  const allOn = VESSEL_TYPE_ORDER.every((c) => enabled[c]);

  return (
-    <div className="tg">
-      <div className={`tb ${allOn ? "on" : ""}`} onClick={onToggleAll} style={{ gridColumn: "1/-1" }}>
-        <div className="c" style={{ color: "var(--accent)" }}>
-          전체
-        </div>
-        <div className="n">{totalCount}척</div>
+    <div className="grid grid-cols-3 gap-0.75">
+      <div className={`col-span-full ${TB} ${allOn ? TB_ON : TB_OFF}`} onClick={onToggleAll}>
+        <div className="text-[11px] font-extrabold text-wing-accent">전체</div>
+        <div className="text-[8px] text-wing-muted">{totalCount}척</div>
      </div>
      {VESSEL_TYPE_ORDER.map((code) => {
        const t = VESSEL_TYPES[code];
        const cnt = countsByType[code] ?? 0;
        return (
-          <div key={code} className={`tb ${enabled[code] ? "on" : ""}`} onClick={() => onToggle(code)}>
-            <div className="c" style={{ color: t.color }}>
-              {code}
-            </div>
-            <div className="n">{cnt}척</div>
+          <div key={code} className={`${TB} ${enabled[code] ? TB_ON : TB_OFF}`} onClick={() => onToggle(code)}>
+            <div className="text-[11px] font-extrabold" style={{ color: t.color }}>{code}</div>
+            <div className="text-[8px] text-wing-muted">{cnt}척</div>
          </div>
        );
      })}
--- a/apps/web/src/pages/dashboard/DashboardPage.tsx
+++ b/apps/web/src/pages/dashboard/DashboardPage.tsx
@ -1,5 +1,6 @@
 import { useCallback, useMemo } from "react";
 import { useAuth } from "../../shared/auth";
+import { useTheme } from "../../shared/hooks";
 import { useAisTargetPolling } from "../../features/aisPolling/useAisTargetPolling";
 import type { DerivedLegacyVessel } from "../../features/legacyDashboard/model/types";
 import { LEGACY_ALARM_KINDS } from "../../features/legacyDashboard/model/types";
@ -58,6 +59,7 @@ function useLegacyIndex(data: LegacyVesselDataset | null) {

 export function DashboardPage() {
  const { user, logout } = useAuth();
+  const { theme, toggleTheme } = useTheme();
  const uid = user?.id ?? null;

  // ── Data fetching ──
@ -245,7 +247,7 @@ export function DashboardPage() {

  // ── Render ──
  return (
-    <div className="app">
+    <div className="grid h-screen grid-cols-[310px_1fr] grid-rows-[44px_1fr] max-md:grid-cols-[1fr]">
      <Topbar
        total={legacyVesselsAll.length}
        fishing={fishingCount}
@ -259,6 +261,8 @@ export function DashboardPage() {
        onLogoClick={onLogoClick}
        userName={user?.name}
        onLogout={logout}
+        theme={theme}
+        onToggleTheme={toggleTheme}
      />

      <DashboardSidebar
@ -285,7 +289,7 @@ export function DashboardPage() {
        legacyIndex={legacyIndex}
      />

-      <div className="map-area">
+      <div className="relative bg-[#010610]">
        {showMapLoader ? (
          <div className="map-loader-overlay" role="status" aria-live="polite">
            <div className="map-loader-overlay__panel">
--- a/apps/web/src/pages/dashboard/DashboardSidebar.tsx
+++ b/apps/web/src/pages/dashboard/DashboardSidebar.tsx
@ -1,3 +1,4 @@
+import { ToggleButton } from '@wing/ui';
 import type { AisTarget } from '../../entities/aisTarget/model/types';
 import type { LegacyVesselIndex } from '../../entities/legacyVessel/lib';
 import type { LegacyVesselDataset, LegacyVesselInfo } from '../../entities/legacyVessel/model/types';
@ -94,12 +95,12 @@ export function DashboardSidebar({
  } = state;

  return (
-    <div className="sidebar">
+    <div className="flex flex-col overflow-y-auto border-r border-wing-border bg-wing-surface max-md:hidden">
      <div className="sb">
        <div className="sb-t">업종 필터</div>
-        <div className="tog">
-          <div
-            className={`tog-btn ${showTargets ? 'on' : ''}`}
+        <div className="flex flex-wrap gap-0.75 mb-1.5">
+          <ToggleButton
+            on={showTargets}
            onClick={() => {
              setShowTargets((v) => {
                const next = !v;
@ -110,10 +111,10 @@ export function DashboardSidebar({
            title="레거시(CN permit) 대상 선박 표시"
          >
            대상 선박
-          </div>
-          <div className={`tog-btn ${showOthers ? 'on' : ''}`} onClick={() => setShowOthers((v) => !v)} title="대상 외 AIS 선박 표시">
+          </ToggleButton>
+          <ToggleButton on={showOthers} onClick={() => setShowOthers((v) => !v)} title="대상 외 AIS 선박 표시">
            기타 AIS
-          </div>
+          </ToggleButton>
        </div>
        <TypeFilterGrid
          enabled={typeEnabled}
@ -138,14 +139,15 @@ export function DashboardSidebar({
        <div className="sb-t" style={{ display: 'flex', alignItems: 'center' }}>
          지도 표시 설정
          <div style={{ flex: 1 }} />
-          <div
-            className={`tog-btn ${projection === 'globe' ? 'on' : ''}${isProjectionToggleDisabled ? ' disabled' : ''}`}
+          <ToggleButton
+            on={projection === 'globe'}
            onClick={isProjectionToggleDisabled ? undefined : () => setProjection((p) => (p === 'globe' ? 'mercator' : 'globe'))}
            title={isProjectionToggleDisabled ? '3D 모드 준비 중...' : '3D 지구본 투영: 드래그로 회전, 휠로 확대/축소'}
-            style={{ fontSize: 9, padding: '2px 8px', opacity: isProjectionToggleDisabled ? 0.4 : 1, cursor: isProjectionToggleDisabled ? 'not-allowed' : 'pointer' }}
+            className="px-2 py-0.5 text-[9px]"
+            style={{ opacity: isProjectionToggleDisabled ? 0.4 : 1, cursor: isProjectionToggleDisabled ? 'not-allowed' : 'pointer' }}
          >
            3D
-          </div>
+          </ToggleButton>
        </div>
        <MapToggles value={overlays} onToggle={(k) => setOverlays((prev) => ({ ...prev, [k]: !prev[k] }))} />
      </div>
--- a/apps/web/src/shared/hooks/index.ts
+++ b/apps/web/src/shared/hooks/index.ts
@ -1 +1,2 @@
 export { usePersistedState } from './usePersistedState';
+export { useTheme } from './useTheme';
--- a/apps/web/src/shared/hooks/useTheme.ts
+++ b/apps/web/src/shared/hooks/useTheme.ts
@ -0,0 +1,47 @@
+import { useState, useEffect, useCallback } from 'react';
+
+type Theme = 'dark' | 'light';
+
+const STORAGE_KEY = 'wing:theme';
+const DEFAULT_THEME: Theme = 'dark';
+
+function readTheme(): Theme {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw === 'light' || raw === 'dark') return raw;
+  } catch {
+    // storage unavailable
+  }
+  return DEFAULT_THEME;
+}
+
+function applyTheme(theme: Theme) {
+  document.documentElement.dataset.theme = theme;
+}
+
+export function useTheme() {
+  const [theme, setThemeState] = useState<Theme>(() => {
+    const t = readTheme();
+    applyTheme(t);
+    return t;
+  });
+
+  useEffect(() => {
+    applyTheme(theme);
+  }, [theme]);
+
+  const setTheme = useCallback((t: Theme) => {
+    setThemeState(t);
+    try {
+      localStorage.setItem(STORAGE_KEY, t);
+    } catch {
+      // quota exceeded or unavailable
+    }
+  }, []);
+
+  const toggleTheme = useCallback(() => {
+    setTheme(theme === 'dark' ? 'light' : 'dark');
+  }, [theme, setTheme]);
+
+  return { theme, setTheme, toggleTheme } as const;
+}
--- a/apps/web/src/widgets/topbar/Topbar.tsx
+++ b/apps/web/src/widgets/topbar/Topbar.tsx
@ -11,49 +11,69 @@ type Props = {
  onLogoClick?: () => void;
  userName?: string;
  onLogout?: () => void;
+  theme?: "dark" | "light";
+  onToggleTheme?: () => void;
 };

-export function Topbar({ total, fishing, transit, pairLinks, alarms, pollingStatus, lastFetchMinutes, clock, adminMode, onLogoClick, userName, onLogout }: Props) {
+export function Topbar({ total, fishing, transit, pairLinks, alarms, pollingStatus, lastFetchMinutes, clock, adminMode, onLogoClick, userName, onLogout, theme, onToggleTheme }: Props) {
  const statusColor =
    pollingStatus === "ready" ? "#22C55E" : pollingStatus === "loading" ? "#F59E0B" : pollingStatus === "error" ? "#EF4444" : "var(--muted)";
  return (
-    <div className="topbar">
-      <div className="logo" onClick={onLogoClick} style={{ cursor: onLogoClick ? "pointer" : undefined }} title={adminMode ? "ADMIN" : undefined}>
-        🛰 <span>WING</span> 조업감시·선단연관 {adminMode ? <span style={{ fontSize: 10, color: "#F59E0B" }}>(ADMIN)</span> : null}
+    <div className="col-span-full flex items-center gap-2.5 border-b border-wing-border bg-wing-surface px-3.5 z-[1000]">
+      <div
+        className="flex items-center gap-1.5 whitespace-nowrap text-sm font-extrabold"
+        onClick={onLogoClick}
+        style={{ cursor: onLogoClick ? "pointer" : undefined }}
+        title={adminMode ? "ADMIN" : undefined}
+      >
+        🛰 <span className="text-wing-accent">WING</span> 조업감시·선단연관{" "}
+        {adminMode ? <span className="text-[10px] text-wing-warning">(ADMIN)</span> : null}
      </div>
-      <div className="stats">
-        <div className="stat">
+      <div className="ml-auto flex flex-wrap justify-end gap-3.5">
+        <div className="flex items-center gap-1 text-[10px] text-wing-muted">
          DATA <b style={{ color: "#22C55E" }}>API</b>
        </div>
-        <div className="stat">
+        <div className="flex items-center gap-1 text-[10px] text-wing-muted">
          POLL{" "}
          <b style={{ color: statusColor }}>
            {pollingStatus.toUpperCase()}
            {lastFetchMinutes ? `(${lastFetchMinutes}m)` : ""}
          </b>
        </div>
-        <div className="stat">
-          전체 <b>{total}</b>척
+        <div className="flex items-center gap-1 text-[10px] text-wing-muted">
+          전체 <b className="text-xs text-wing-text">{total}</b>척
        </div>
-        <div className="stat">
+        <div className="flex items-center gap-1 text-[10px] text-wing-muted">
          조업 <b style={{ color: "#22C55E" }}>{fishing}</b>
        </div>
-        <div className="stat">
+        <div className="flex items-center gap-1 text-[10px] text-wing-muted">
          항해 <b style={{ color: "#3B82F6" }}>{transit}</b>
        </div>
-        <div className="stat">
+        <div className="flex items-center gap-1 text-[10px] text-wing-muted">
          쌍연결 <b style={{ color: "#F59E0B" }}>{pairLinks}</b>
        </div>
-        <div className="stat">
+        <div className="flex items-center gap-1 text-[10px] text-wing-muted">
          경고 <b style={{ color: "#EF4444" }}>{alarms}</b>
        </div>
      </div>
-      <div className="time">{clock}</div>
+      <div className="ml-2.5 whitespace-nowrap text-[10px] font-semibold text-wing-accent">{clock}</div>
+      {onToggleTheme && (
+        <button
+          className="ml-1 cursor-pointer rounded border border-wing-border bg-transparent px-1.5 py-0.5 text-[9px] text-wing-muted transition-all duration-150 hover:border-wing-accent hover:text-wing-text"
+          onClick={onToggleTheme}
+          title={theme === "dark" ? "라이트 모드로 전환" : "다크 모드로 전환"}
+        >
+          {theme === "dark" ? "Light" : "Dark"}
+        </button>
+      )}
      {userName && (
-        <div className="topbar-user">
-          <span className="topbar-user__name">{userName}</span>
+        <div className="ml-2.5 flex shrink-0 items-center gap-2">
+          <span className="whitespace-nowrap text-[10px] font-medium text-wing-text">{userName}</span>
          {onLogout && (
-            <button className="topbar-user__logout" onClick={onLogout}>
+            <button
+              className="cursor-pointer whitespace-nowrap rounded border border-wing-border bg-transparent px-1.5 py-0.5 text-[9px] text-wing-muted transition-all duration-150 hover:border-wing-accent hover:text-wing-text"
+              onClick={onLogout}
+            >
              로그아웃
            </button>
          )}
--- a/apps/web/vite.config.ts
+++ b/apps/web/vite.config.ts
@ -1,3 +1,4 @@
+import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";
 import { fileURLToPath } from "node:url";
 import { defineConfig, loadEnv } from "vite";
@ -15,7 +16,7 @@ export default defineConfig(({ mode }) => {
  const snpApiTarget = env.VITE_SNP_API_TARGET || process.env.VITE_SNP_API_TARGET || "http://211.208.115.83:8041";

  return {
-    plugins: [react()],
+    plugins: [tailwindcss(), react()],
    resolve: {
      alias: {
        // deck.gl (via loaders.gl) contains a few Node-only helper modules.
--- a/package-lock.json
+++ b/package-lock.json
@ -6,7 +6,8 @@
    "": {
      "name": "wing-fleet-dashboard",
      "workspaces": [
-        "apps/*"
+        "apps/*",
+        "packages/*"
      ],
      "devDependencies": {
        "xlsx": "^0.18.5"
@ -38,6 +39,7 @@
        "@maptiler/weather": "^3.1.1",
        "@react-oauth/google": "^0.13.4",
        "@stomp/stompjs": "^7.2.1",
+        "@wing/ui": "*",
        "maplibre-gl": "^5.18.0",
        "react": "^19.2.0",
        "react-dom": "^19.2.0",
@ -46,6 +48,7 @@
      },
      "devDependencies": {
        "@eslint/js": "^9.39.1",
+        "@tailwindcss/vite": "^4.1.18",
        "@types/node": "^24.10.1",
        "@types/react": "^19.2.7",
        "@types/react-dom": "^19.2.3",
@ -54,6 +57,7 @@
        "eslint-plugin-react-hooks": "^7.0.1",
        "eslint-plugin-react-refresh": "^0.4.24",
        "globals": "^16.5.0",
+        "tailwindcss": "^4.1.18",
        "typescript": "~5.9.3",
        "typescript-eslint": "^8.48.0",
        "vite": "^7.3.1"
@ -2473,6 +2477,278 @@
      "integrity": "sha512-nKMLoFfJhrQAqkvvKd1vLq/cVBGCMwPRCD0LqW7UT1fecRx9C3GoKEIR2CYwVuErGeZu8w0kFkl2rlhPlqHVgQ==",
      "license": "Apache-2.0"
    },
+    "node_modules/@tailwindcss/node": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/node/-/node-4.1.18.tgz",
+      "integrity": "sha512-DoR7U1P7iYhw16qJ49fgXUlry1t4CpXeErJHnQ44JgTSKMaZUdf17cfn5mHchfJ4KRBZRFA/Coo+MUF5+gOaCQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.4",
+        "enhanced-resolve": "^5.18.3",
+        "jiti": "^2.6.1",
+        "lightningcss": "1.30.2",
+        "magic-string": "^0.30.21",
+        "source-map-js": "^1.2.1",
+        "tailwindcss": "4.1.18"
+      }
+    },
+    "node_modules/@tailwindcss/oxide": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide/-/oxide-4.1.18.tgz",
+      "integrity": "sha512-EgCR5tTS5bUSKQgzeMClT6iCY3ToqE1y+ZB0AKldj809QXk1Y+3jB0upOYZrn9aGIzPtUsP7sX4QQ4XtjBB95A==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10"
+      },
+      "optionalDependencies": {
+        "@tailwindcss/oxide-android-arm64": "4.1.18",
+        "@tailwindcss/oxide-darwin-arm64": "4.1.18",
+        "@tailwindcss/oxide-darwin-x64": "4.1.18",
+        "@tailwindcss/oxide-freebsd-x64": "4.1.18",
+        "@tailwindcss/oxide-linux-arm-gnueabihf": "4.1.18",
+        "@tailwindcss/oxide-linux-arm64-gnu": "4.1.18",
+        "@tailwindcss/oxide-linux-arm64-musl": "4.1.18",
+        "@tailwindcss/oxide-linux-x64-gnu": "4.1.18",
+        "@tailwindcss/oxide-linux-x64-musl": "4.1.18",
+        "@tailwindcss/oxide-wasm32-wasi": "4.1.18",
+        "@tailwindcss/oxide-win32-arm64-msvc": "4.1.18",
+        "@tailwindcss/oxide-win32-x64-msvc": "4.1.18"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-android-arm64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-android-arm64/-/oxide-android-arm64-4.1.18.tgz",
+      "integrity": "sha512-dJHz7+Ugr9U/diKJA0W6N/6/cjI+ZTAoxPf9Iz9BFRF2GzEX8IvXxFIi/dZBloVJX/MZGvRuFA9rqwdiIEZQ0Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-arm64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-arm64/-/oxide-darwin-arm64-4.1.18.tgz",
+      "integrity": "sha512-Gc2q4Qhs660bhjyBSKgq6BYvwDz4G+BuyJ5H1xfhmDR3D8HnHCmT/BSkvSL0vQLy/nkMLY20PQ2OoYMO15Jd0A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-darwin-x64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-darwin-x64/-/oxide-darwin-x64-4.1.18.tgz",
+      "integrity": "sha512-FL5oxr2xQsFrc3X9o1fjHKBYBMD1QZNyc1Xzw/h5Qu4XnEBi3dZn96HcHm41c/euGV+GRiXFfh2hUCyKi/e+yw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-freebsd-x64": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-freebsd-x64/-/oxide-freebsd-x64-4.1.18.tgz",
+      "integrity": "sha512-Fj+RHgu5bDodmV1dM9yAxlfJwkkWvLiRjbhuO2LEtwtlYlBgiAT4x/j5wQr1tC3SANAgD+0YcmWVrj8R9trVMA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm-gnueabihf": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm-gnueabihf/-/oxide-linux-arm-gnueabihf-4.1.18.tgz",
+      "integrity": "sha512-Fp+Wzk/Ws4dZn+LV2Nqx3IilnhH51YZoRaYHQsVq3RQvEl+71VGKFpkfHrLM/Li+kt5c0DJe/bHXK1eHgDmdiA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-gnu": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-gnu/-/oxide-linux-arm64-gnu-4.1.18.tgz",
+      "integrity": "sha512-S0n3jboLysNbh55Vrt7pk9wgpyTTPD0fdQeh7wQfMqLPM/Hrxi+dVsLsPrycQjGKEQk85Kgbx+6+QnYNiHalnw==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-arm64-musl": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-arm64-musl/-/oxide-linux-arm64-musl-4.1.18.tgz",
+      "integrity": "sha512-1px92582HkPQlaaCkdRcio71p8bc8i/ap5807tPRDK/uw953cauQBT8c5tVGkOwrHMfc2Yh6UuxaH4vtTjGvHg==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-gnu": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-gnu/-/oxide-linux-x64-gnu-4.1.18.tgz",
+      "integrity": "sha512-v3gyT0ivkfBLoZGF9LyHmts0Isc8jHZyVcbzio6Wpzifg/+5ZJpDiRiUhDLkcr7f/r38SWNe7ucxmGW3j3Kb/g==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-linux-x64-musl": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-linux-x64-musl/-/oxide-linux-x64-musl-4.1.18.tgz",
+      "integrity": "sha512-bhJ2y2OQNlcRwwgOAGMY0xTFStt4/wyU6pvI6LSuZpRgKQwxTec0/3Scu91O8ir7qCR3AuepQKLU/kX99FouqQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-wasm32-wasi": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-wasm32-wasi/-/oxide-wasm32-wasi-4.1.18.tgz",
+      "integrity": "sha512-LffYTvPjODiP6PT16oNeUQJzNVyJl1cjIebq/rWWBF+3eDst5JGEFSc5cWxyRCJ0Mxl+KyIkqRxk1XPEs9x8TA==",
+      "bundleDependencies": [
+        "@napi-rs/wasm-runtime",
+        "@emnapi/core",
+        "@emnapi/runtime",
+        "@tybys/wasm-util",
+        "@emnapi/wasi-threads",
+        "tslib"
+      ],
+      "cpu": [
+        "wasm32"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "@emnapi/core": "^1.7.1",
+        "@emnapi/runtime": "^1.7.1",
+        "@emnapi/wasi-threads": "^1.1.0",
+        "@napi-rs/wasm-runtime": "^1.1.0",
+        "@tybys/wasm-util": "^0.10.1",
+        "tslib": "^2.4.0"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-arm64-msvc": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-arm64-msvc/-/oxide-win32-arm64-msvc-4.1.18.tgz",
+      "integrity": "sha512-HjSA7mr9HmC8fu6bdsZvZ+dhjyGCLdotjVOgLA2vEqxEBZaQo9YTX4kwgEvPCpRh8o4uWc4J/wEoFzhEmjvPbA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/oxide-win32-x64-msvc": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/oxide-win32-x64-msvc/-/oxide-win32-x64-msvc-4.1.18.tgz",
+      "integrity": "sha512-bJWbyYpUlqamC8dpR7pfjA0I7vdF6t5VpUGMWRkXVE3AXgIZjYUYAK7II1GNaxR8J1SSrSrppRar8G++JekE3Q==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@tailwindcss/vite": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.18.tgz",
+      "integrity": "sha512-jVA+/UpKL1vRLg6Hkao5jldawNmRo7mQYrZtNHMIVpLfLhDml5nMRUo/8MwoX2vNXvnaXNNMedrMfMugAVX1nA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@tailwindcss/node": "4.1.18",
+        "@tailwindcss/oxide": "4.1.18",
+        "tailwindcss": "4.1.18"
+      },
+      "peerDependencies": {
+        "vite": "^5.2.0 || ^6 || ^7"
+      }
+    },
    "node_modules/@turf/boolean-clockwise": {
      "version": "5.1.5",
      "resolved": "https://registry.npmjs.org/@turf/boolean-clockwise/-/boolean-clockwise-5.1.5.tgz",
@ -2970,6 +3246,10 @@
      "resolved": "apps/api",
      "link": true
    },
+    "node_modules/@wing/ui": {
+      "resolved": "packages/ui",
+      "link": true
+    },
    "node_modules/@wing/web": {
      "resolved": "apps/web",
      "link": true
@ -3315,6 +3595,15 @@
        "node": "*"
      }
    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/codepage": {
      "version": "1.15.0",
      "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz",
@ -3487,6 +3776,16 @@
        "node": ">=6"
      }
    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=8"
+      }
+    },
    "node_modules/draco3d": {
      "version": "1.5.7",
      "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.5.7.tgz",
@ -3506,6 +3805,20 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/enhanced-resolve": {
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.19.0.tgz",
+      "integrity": "sha512-phv3E1Xl4tQOShqSte26C7Fl84EwUdZsyOuSSk9qtAGyyQs2s3jJzComh+Abf4g187lUUAvH+H26omrqia2aGg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.3.0"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
    "node_modules/esbuild": {
      "version": "0.27.3",
      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.27.3.tgz",
@ -4174,6 +4487,13 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "dev": true,
+      "license": "ISC"
+    },
    "node_modules/h3-js": {
      "version": "4.4.0",
      "resolved": "https://registry.npmjs.org/h3-js/-/h3-js-4.4.0.tgz",
@ -4350,6 +4670,16 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/jiti": {
+      "version": "2.6.1",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
+      "integrity": "sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "jiti": "lib/jiti-cli.mjs"
+      }
+    },
    "node_modules/js-base64": {
      "version": "3.7.8",
      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-3.7.8.tgz",
@ -4548,6 +4878,267 @@
      ],
      "license": "MIT"
    },
+    "node_modules/lightningcss": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.2.tgz",
+      "integrity": "sha512-utfs7Pr5uJyyvDETitgsaqSyjCb2qNRAtuqUeWIAKztsOYdcACf2KtARYXg2pSvhkt+9NfoaNY7fxjl6nuMjIQ==",
+      "dev": true,
+      "license": "MPL-2.0",
+      "dependencies": {
+        "detect-libc": "^2.0.3"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "lightningcss-android-arm64": "1.30.2",
+        "lightningcss-darwin-arm64": "1.30.2",
+        "lightningcss-darwin-x64": "1.30.2",
+        "lightningcss-freebsd-x64": "1.30.2",
+        "lightningcss-linux-arm-gnueabihf": "1.30.2",
+        "lightningcss-linux-arm64-gnu": "1.30.2",
+        "lightningcss-linux-arm64-musl": "1.30.2",
+        "lightningcss-linux-x64-gnu": "1.30.2",
+        "lightningcss-linux-x64-musl": "1.30.2",
+        "lightningcss-win32-arm64-msvc": "1.30.2",
+        "lightningcss-win32-x64-msvc": "1.30.2"
+      }
+    },
+    "node_modules/lightningcss-android-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-android-arm64/-/lightningcss-android-arm64-1.30.2.tgz",
+      "integrity": "sha512-BH9sEdOCahSgmkVhBLeU7Hc9DWeZ1Eb6wNS6Da8igvUwAe0sqROHddIlvU06q3WyXVEOYDZ6ykBZQnjTbmo4+A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-arm64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-arm64/-/lightningcss-darwin-arm64-1.30.2.tgz",
+      "integrity": "sha512-ylTcDJBN3Hp21TdhRT5zBOIi73P6/W0qwvlFEk22fkdXchtNTOU4Qc37SkzV+EKYxLouZ6M4LG9NfZ1qkhhBWA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-darwin-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-darwin-x64/-/lightningcss-darwin-x64-1.30.2.tgz",
+      "integrity": "sha512-oBZgKchomuDYxr7ilwLcyms6BCyLn0z8J0+ZZmfpjwg9fRVZIR5/GMXd7r9RH94iDhld3UmSjBM6nXWM2TfZTQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-freebsd-x64": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-freebsd-x64/-/lightningcss-freebsd-x64-1.30.2.tgz",
+      "integrity": "sha512-c2bH6xTrf4BDpK8MoGG4Bd6zAMZDAXS569UxCAGcA7IKbHNMlhGQ89eRmvpIUGfKWNVdbhSbkQaWhEoMGmGslA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm-gnueabihf": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm-gnueabihf/-/lightningcss-linux-arm-gnueabihf-1.30.2.tgz",
+      "integrity": "sha512-eVdpxh4wYcm0PofJIZVuYuLiqBIakQ9uFZmipf6LF/HRj5Bgm0eb3qL/mr1smyXIS1twwOxNWndd8z0E374hiA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-gnu/-/lightningcss-linux-arm64-gnu-1.30.2.tgz",
+      "integrity": "sha512-UK65WJAbwIJbiBFXpxrbTNArtfuznvxAJw4Q2ZGlU8kPeDIWEX1dg3rn2veBVUylA2Ezg89ktszWbaQnxD/e3A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-arm64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-arm64-musl/-/lightningcss-linux-arm64-musl-1.30.2.tgz",
+      "integrity": "sha512-5Vh9dGeblpTxWHpOx8iauV02popZDsCYMPIgiuw97OJ5uaDsL86cnqSFs5LZkG3ghHoX5isLgWzMs+eD1YzrnA==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-gnu": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-gnu/-/lightningcss-linux-x64-gnu-1.30.2.tgz",
+      "integrity": "sha512-Cfd46gdmj1vQ+lR6VRTTadNHu6ALuw2pKR9lYq4FnhvgBc4zWY1EtZcAc6EffShbb1MFrIPfLDXD6Xprbnni4w==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-linux-x64-musl": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-linux-x64-musl/-/lightningcss-linux-x64-musl-1.30.2.tgz",
+      "integrity": "sha512-XJaLUUFXb6/QG2lGIW6aIk6jKdtjtcffUT0NKvIqhSBY3hh9Ch+1LCeH80dR9q9LBjG3ewbDjnumefsLsP6aiA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-arm64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-arm64-msvc/-/lightningcss-win32-arm64-msvc-1.30.2.tgz",
+      "integrity": "sha512-FZn+vaj7zLv//D/192WFFVA0RgHawIcHqLX9xuWiQt7P0PtdFEVaxgF9rjM/IRYHQXNnk61/H/gb2Ei+kUQ4xQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/lightningcss-win32-x64-msvc": {
+      "version": "1.30.2",
+      "resolved": "https://registry.npmjs.org/lightningcss-win32-x64-msvc/-/lightningcss-win32-x64-msvc-1.30.2.tgz",
+      "integrity": "sha512-5g1yc73p+iAkid5phb4oVFMB45417DkRevRbt/El/gKXJk4jid+vPFF/AXbxn05Aky8PapwzZrdJShv5C0avjw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MPL-2.0",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
    "node_modules/locate-path": {
      "version": "6.0.0",
      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@ -4603,6 +5194,16 @@
      "integrity": "sha512-VKlnoJRFrB8SdJhlVKvW5vI1gGwcZ+mvChEXcSX6r2xDNc/Q2FD9esfBmGCuPZdrJ1feO+YcVFd2PTk0c137Gw==",
      "license": "BSD-2-Clause"
    },
+    "node_modules/magic-string": {
+      "version": "0.30.21",
+      "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.21.tgz",
+      "integrity": "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.5"
+      }
+    },
    "node_modules/maplibre-gl": {
      "version": "5.18.0",
      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-5.18.0.tgz",
@ -5469,6 +6070,37 @@
        "node": ">=8"
      }
    },
+    "node_modules/tailwind-merge": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.1.tgz",
+      "integrity": "sha512-2OA0rFqWOkITEAOFWSBSApYkDeH9t2B3XSJuI4YztKBzK3mX0737A2qtxDZ7xkw9Zfh0bWl+r34sF3HXV+Ig7Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "4.1.18",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz",
+      "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/tapable": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.0.tgz",
+      "integrity": "sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
    "node_modules/texture-compressor": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/texture-compressor/-/texture-compressor-1.0.2.tgz",
@ -5967,6 +6599,18 @@
          "optional": true
        }
      }
+    },
+    "packages/ui": {
+      "name": "@wing/ui",
+      "version": "0.0.0",
+      "dependencies": {
+        "clsx": "^2.1.1",
+        "tailwind-merge": "^3.3.0"
+      },
+      "peerDependencies": {
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
+      }
    }
  }
 }
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "wing-fleet-dashboard",
  "private": true,
-  "workspaces": ["apps/*"],
+  "workspaces": ["apps/*", "packages/*"],
  "scripts": {
    "dev": "npm run dev:web & npm run dev:api",
    "dev:web": "npm -w @wing/web run dev",
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@ -0,0 +1,18 @@
+{
+  "name": "@wing/ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "exports": {
+    ".": "./src/index.ts",
+    "./theme/tokens.css": "./src/theme/tokens.css"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.3.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  }
+}
--- a/packages/ui/src/components/Badge.tsx
+++ b/packages/ui/src/components/Badge.tsx
@ -0,0 +1,27 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { cn } from '../utils/cn.ts';
+
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: 'default' | 'accent' | 'danger' | 'warning' | 'success' | 'muted';
+  children: ReactNode;
+}
+
+export function Badge({ variant = 'default', className, children, ...props }: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center rounded-[5px] border px-1.5 py-px text-[8px] font-extrabold leading-none tracking-wide',
+        variant === 'default' && 'border-white/8 bg-wing-muted/22 text-white',
+        variant === 'accent' && 'border-wing-accent/70 bg-wing-accent/22 text-white',
+        variant === 'danger' && 'border-wing-danger/70 bg-wing-danger/22 text-white',
+        variant === 'warning' && 'border-wing-warning/70 bg-wing-warning/22 text-white',
+        variant === 'success' && 'border-wing-success/70 bg-wing-success/22 text-white',
+        variant === 'muted' && 'border-wing-border/90 bg-wing-card/55 text-wing-muted font-bold',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </span>
+  );
+}
--- a/packages/ui/src/components/Button.tsx
+++ b/packages/ui/src/components/Button.tsx
@ -0,0 +1,30 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import { cn } from '../utils/cn.ts';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: 'ghost' | 'primary' | 'danger';
+  size?: 'sm' | 'md';
+  children: ReactNode;
+}
+
+export function Button({ variant = 'ghost', size = 'sm', className, children, ...props }: ButtonProps) {
+  return (
+    <button
+      className={cn(
+        'cursor-pointer rounded border transition-all duration-150 select-none whitespace-nowrap',
+        size === 'sm' && 'px-1.5 py-0.5 text-[9px]',
+        size === 'md' && 'px-2.5 py-1.5 text-xs rounded-lg',
+        variant === 'ghost' &&
+          'border-wing-border bg-transparent text-wing-muted hover:text-wing-text hover:border-wing-accent',
+        variant === 'primary' &&
+          'border-wing-accent bg-wing-accent text-white hover:brightness-110',
+        variant === 'danger' &&
+          'border-wing-danger bg-transparent text-wing-danger hover:bg-wing-danger/10',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
--- a/packages/ui/src/components/IconButton.tsx
+++ b/packages/ui/src/components/IconButton.tsx
@ -0,0 +1,27 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import { cn } from '../utils/cn.ts';
+
+interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  active?: boolean;
+  size?: 'sm' | 'md';
+  children: ReactNode;
+}
+
+export function IconButton({ active, size = 'md', className, children, ...props }: IconButtonProps) {
+  return (
+    <button
+      className={cn(
+        'flex shrink-0 cursor-pointer items-center justify-center rounded border p-0 transition-all duration-150 select-none',
+        'border-wing-border bg-wing-glass text-wing-muted backdrop-blur-lg',
+        'hover:text-wing-text hover:border-wing-accent',
+        size === 'sm' && 'h-[22px] w-[22px] rounded text-sm',
+        size === 'md' && 'h-[29px] w-[29px] rounded text-base',
+        active && 'text-wing-accent border-wing-accent',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
--- a/packages/ui/src/components/ListItem.tsx
+++ b/packages/ui/src/components/ListItem.tsx
@ -0,0 +1,26 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { cn } from '../utils/cn.ts';
+
+interface ListItemProps extends HTMLAttributes<HTMLDivElement> {
+  selected?: boolean;
+  highlighted?: boolean;
+  children: ReactNode;
+}
+
+export function ListItem({ selected, highlighted, className, children, ...props }: ListItemProps) {
+  return (
+    <div
+      className={cn(
+        'flex cursor-pointer items-center gap-1.5 rounded px-1.5 py-1 text-[10px] transition-colors duration-100 select-none',
+        'hover:bg-wing-card',
+        selected && 'bg-[rgba(14,234,255,0.16)] border-[rgba(14,234,255,0.55)]',
+        highlighted && !selected && 'bg-[rgba(245,158,11,0.16)] border border-[rgba(245,158,11,0.4)]',
+        selected && highlighted && 'bg-gradient-to-r from-[rgba(14,234,255,0.16)] to-[rgba(245,158,11,0.16)] border-[rgba(14,234,255,0.7)]',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
--- a/packages/ui/src/components/Panel.tsx
+++ b/packages/ui/src/components/Panel.tsx
@ -0,0 +1,24 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { cn } from '../utils/cn.ts';
+
+interface PanelProps extends HTMLAttributes<HTMLDivElement> {
+  glass?: boolean;
+  children: ReactNode;
+}
+
+export function Panel({ glass = true, className, children, ...props }: PanelProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-lg border border-wing-border p-3',
+        glass
+          ? 'bg-wing-glass backdrop-blur-lg'
+          : 'bg-wing-surface',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
--- a/packages/ui/src/components/Section.tsx
+++ b/packages/ui/src/components/Section.tsx
@ -0,0 +1,29 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+import { cn } from '../utils/cn.ts';
+
+interface SectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+  title: ReactNode;
+  actions?: ReactNode;
+  defaultOpen?: boolean;
+  children: ReactNode;
+}
+
+export function Section({ title, actions, defaultOpen = true, className, children, ...props }: SectionProps) {
+  return (
+    <details open={defaultOpen || undefined} className={cn('border-b border-wing-border', className)} {...props}>
+      <summary className="flex cursor-pointer list-none items-center justify-between gap-2 px-3 py-2.5 select-none [&::-webkit-details-marker]:hidden">
+        <span className="text-[9px] font-bold uppercase tracking-[1.5px] text-wing-muted">
+          {title}
+        </span>
+        {actions && (
+          <span onClick={(e) => e.preventDefault()} className="flex items-center gap-1.5">
+            {actions}
+          </span>
+        )}
+      </summary>
+      <div className="px-3 pb-2.5">
+        {children}
+      </div>
+    </details>
+  );
+}
--- a/packages/ui/src/components/TextInput.tsx
+++ b/packages/ui/src/components/TextInput.tsx
@ -0,0 +1,18 @@
+import type { InputHTMLAttributes } from 'react';
+import { cn } from '../utils/cn.ts';
+
+type TextInputProps = InputHTMLAttributes<HTMLInputElement>;
+
+export function TextInput({ className, ...props }: TextInputProps) {
+  return (
+    <input
+      className={cn(
+        'flex-1 rounded-md border border-wing-border bg-wing-card/75 px-2 py-1.5 text-[10px] text-wing-text outline-none',
+        'placeholder:text-wing-muted/90',
+        'focus:border-wing-accent',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
--- a/packages/ui/src/components/ToggleButton.tsx
+++ b/packages/ui/src/components/ToggleButton.tsx
@ -0,0 +1,24 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+import { cn } from '../utils/cn.ts';
+
+interface ToggleButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  on?: boolean;
+  children: ReactNode;
+}
+
+export function ToggleButton({ on, className, children, ...props }: ToggleButtonProps) {
+  return (
+    <button
+      className={cn(
+        'cursor-pointer rounded border px-1.5 py-0.5 text-[8px] transition-all duration-150 select-none',
+        on
+          ? 'border-wing-accent bg-wing-accent text-white'
+          : 'border-wing-border bg-wing-card text-wing-muted',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </button>
+  );
+}
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@ -0,0 +1,8 @@
+export { Button } from './Button.tsx';
+export { IconButton } from './IconButton.tsx';
+export { ToggleButton } from './ToggleButton.tsx';
+export { Badge } from './Badge.tsx';
+export { Panel } from './Panel.tsx';
+export { Section } from './Section.tsx';
+export { ListItem } from './ListItem.tsx';
+export { TextInput } from './TextInput.tsx';
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@ -0,0 +1,2 @@
+export { cn } from './utils/cn.ts';
+export * from './components/index.ts';
--- a/packages/ui/src/theme/tokens.css
+++ b/packages/ui/src/theme/tokens.css
@ -0,0 +1,79 @@
+/* ── Wing Design Tokens ──────────────────────────────────────────── */
+
+/* Dark theme (default) */
+:root,
+[data-theme='dark'] {
+  --wing-bg: #020617;
+  --wing-surface: #0f172a;
+  --wing-card: #1e293b;
+  --wing-border: #1e3a5f;
+  --wing-text: #e2e8f0;
+  --wing-muted: #64748b;
+  --wing-accent: #3b82f6;
+  --wing-danger: #ef4444;
+  --wing-warning: #f59e0b;
+  --wing-success: #22c55e;
+  --wing-glass: rgba(15, 23, 42, 0.92);
+  --wing-glass-dense: rgba(15, 23, 42, 0.95);
+  --wing-overlay: rgba(2, 6, 23, 0.42);
+  --wing-card-alpha: rgba(30, 41, 59, 0.55);
+  --wing-subtle: rgba(255, 255, 255, 0.03);
+
+  /* Legacy aliases (backward compatibility) */
+  --bg: var(--wing-bg);
+  --panel: var(--wing-surface);
+  --card: var(--wing-card);
+  --border: var(--wing-border);
+  --text: var(--wing-text);
+  --muted: var(--wing-muted);
+  --accent: var(--wing-accent);
+  --crit: var(--wing-danger);
+  --high: var(--wing-warning);
+}
+
+/* Light theme */
+[data-theme='light'] {
+  --wing-bg: #e2e8f0;
+  --wing-surface: #ffffff;
+  --wing-card: #f1f5f9;
+  --wing-border: #94a3b8;
+  --wing-text: #0f172a;
+  --wing-muted: #64748b;
+  --wing-accent: #2563eb;
+  --wing-danger: #dc2626;
+  --wing-warning: #d97706;
+  --wing-success: #16a34a;
+  --wing-glass: rgba(255, 255, 255, 0.92);
+  --wing-glass-dense: rgba(255, 255, 255, 0.95);
+  --wing-overlay: rgba(0, 0, 0, 0.25);
+  --wing-card-alpha: rgba(226, 232, 240, 0.6);
+  --wing-subtle: rgba(0, 0, 0, 0.03);
+
+  --bg: var(--wing-bg);
+  --panel: var(--wing-surface);
+  --card: var(--wing-card);
+  --border: var(--wing-border);
+  --text: var(--wing-text);
+  --muted: var(--wing-muted);
+  --accent: var(--wing-accent);
+  --crit: var(--wing-danger);
+  --high: var(--wing-warning);
+}
+
+/* ── Tailwind Theme Mapping ──────────────────────────────────────── */
+
+@theme {
+  --color-wing-bg: var(--wing-bg);
+  --color-wing-surface: var(--wing-surface);
+  --color-wing-card: var(--wing-card);
+  --color-wing-border: var(--wing-border);
+  --color-wing-text: var(--wing-text);
+  --color-wing-muted: var(--wing-muted);
+  --color-wing-accent: var(--wing-accent);
+  --color-wing-danger: var(--wing-danger);
+  --color-wing-warning: var(--wing-warning);
+  --color-wing-success: var(--wing-success);
+  --color-wing-glass: var(--wing-glass);
+
+  --font-sans: 'Noto Sans KR', sans-serif;
+}
--- a/packages/ui/src/utils/cn.ts
+++ b/packages/ui/src/utils/cn.ts
@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}
작성자	SHA1	메시지	날짜
htlee	255c082436	Merge pull request 'feat: Tailwind CSS v4 + @wing/ui 디자인 시스템' (#21 ) from feature/tailwind-design-system into develop Reviewed-on: #21	2026-02-17 06:46:49 +09:00
htlee	40229a75c0	fix: 폰트 크기 복원 + 라이트 모드 대비 + CSS 변수 전환 - @theme에서 --text-xs/sm 오버라이드 제거 (Tailwind 기본값 복원) - 라이트 모드: bg #e2e8f0, border #94a3b8로 영역 대비 강화 - 새 토큰: --wing-glass-dense, --wing-overlay, --wing-card-alpha, --wing-subtle - 8개 CSS 파일의 하드코딩된 rgba 값을 CSS 변수로 전환 - MapLibre 컨트롤 아이콘 라이트 모드 대응 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-17 06:41:27 +09:00
htlee	a132c7eaf8	feat: useTheme 훅 + 테마 토글 버튼 구현 - useTheme: localStorage 기반 다크/라이트 테마 전환 - data-theme 속성으로 CSS 변수 자동 전환 - Topbar에 Light/Dark 토글 버튼 추가 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-17 06:22:49 +09:00
htlee	2adcbc9a93	refactor: toggles CSS를 Tailwind + @wing/ui로 전환 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-17 06:18:57 +09:00
htlee	e9a41c6663	refactor: base/layout/topbar CSS를 Tailwind로 전환 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-17 06:15:32 +09:00
htlee	6167a0ebd8	feat(ui): @wing/ui 기본 컴포넌트 8개 구현 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-17 06:12:02 +09:00
htlee	a4859f54bc	chore: Tailwind CSS v4 + @wing/ui 패키지 인프라 구축 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-02-17 06:10:04 +09:00