{
{input.required ? (
{
) : (
{
{screen.notes && screen.notes.length > 0 && (
유의사항
@@ -1544,7 +1550,7 @@ const UserManualPopup = ({ isOpen, onClose }: UserManualPopupProps) => {
style={{ background: '#f59e0b' }}
/>
{note}
@@ -1590,7 +1596,7 @@ const UserManualPopup = ({ isOpen, onClose }: UserManualPopupProps) => {
/>
setLightboxSrc(null)}
- className="absolute top-2 right-2 w-8 h-8 rounded flex items-center justify-center text-[13px] font-bold"
+ className="absolute top-2 right-2 w-8 h-8 rounded flex items-center justify-center text-title-4 font-bold"
style={{
background: 'rgba(15,23,41,0.85)',
color: '#94a3b8',
diff --git a/frontend/src/common/store/mapStore.ts b/frontend/src/common/store/mapStore.ts
index 09cf81a..6cbfdee 100644
--- a/frontend/src/common/store/mapStore.ts
+++ b/frontend/src/common/store/mapStore.ts
@@ -1,6 +1,6 @@
-import { create } from 'zustand'
-import { api } from '../services/api'
-import { haversineDistance, polygonAreaKm2 } from '../utils/geo'
+import { create } from 'zustand';
+import { api } from '../services/api';
+import { haversineDistance, polygonAreaKm2 } from '../utils/geo';
export interface MapTypeItem {
mapKey: string;
@@ -46,11 +46,11 @@ interface MapState {
}
const DEFAULT_MAP_TYPES: MapTypeItem[] = [
- { mapKey: 's57', mapNm: 'S-57 전자해도', mapLevelCd: 'S-57' },
- { mapKey: 's101', mapNm: 'S-101 전자해도', mapLevelCd: 'S-101' },
- { mapKey: 'threeD', mapNm: '3D 지도', mapLevelCd: '3D' },
- { mapKey: 'satellite', mapNm: '위성 영상', mapLevelCd: 'SAT' },
-]
+ { mapKey: 's57', mapNm: 'S-57 전자해도', mapLevelCd: 'S-57' },
+ { mapKey: 's101', mapNm: 'S-101 전자해도', mapLevelCd: 'S-101' },
+ { mapKey: 'threeD', mapNm: '3D 지도', mapLevelCd: '3D' },
+ { mapKey: 'satellite', mapNm: '위성 영상', mapLevelCd: 'SAT' },
+];
let measureIdCounter = 0;
@@ -67,17 +67,17 @@ export const useMapStore = create((set, get) => ({
}),
loadMapTypes: async () => {
try {
- const res = await api.get('/map-base/active')
- const types = res.data
- const current = get().mapToggles
- const newToggles: Partial = {}
+ const res = await api.get('/map-base/active');
+ const types = res.data;
+ const current = get().mapToggles;
+ const newToggles: Partial = {};
for (const t of types) {
if (t.mapKey in current) {
- newToggles[t.mapKey as keyof MapToggles] = current[t.mapKey as keyof MapToggles] ?? false
+ newToggles[t.mapKey as keyof MapToggles] = current[t.mapKey as keyof MapToggles] ?? false;
}
}
// 모든 토글 기본 off (기본지도 표시)
- set({ mapTypes: types, mapToggles: { ...current, ...newToggles } })
+ set({ mapTypes: types, mapToggles: { ...current, ...newToggles } });
} catch {
// API 실패 시 fallback 유지
}
@@ -88,8 +88,7 @@ export const useMapStore = create((set, get) => ({
measureInProgress: [],
measurements: [],
- setMeasureMode: (mode) =>
- set({ measureMode: mode, measureInProgress: [] }),
+ setMeasureMode: (mode) => set({ measureMode: mode, measureInProgress: [] }),
addMeasurePoint: (pt) => {
const { measureMode, measureInProgress } = get();
@@ -99,7 +98,10 @@ export const useMapStore = create((set, get) => ({
const dist = haversineDistance(next[0], next[1]);
const id = `measure-${++measureIdCounter}`;
set((s) => ({
- measurements: [...s.measurements, { id, mode: 'distance', points: [next[0], next[1]], value: dist }],
+ measurements: [
+ ...s.measurements,
+ { id, mode: 'distance', points: [next[0], next[1]], value: dist },
+ ],
measureInProgress: [],
}));
} else {
@@ -116,7 +118,10 @@ export const useMapStore = create((set, get) => ({
const area = polygonAreaKm2(measureInProgress);
const id = `measure-${++measureIdCounter}`;
set((s) => ({
- measurements: [...s.measurements, { id, mode: 'area', points: [...measureInProgress], value: area }],
+ measurements: [
+ ...s.measurements,
+ { id, mode: 'area', points: [...measureInProgress], value: area },
+ ],
measureInProgress: [],
}));
},
@@ -124,6 +129,5 @@ export const useMapStore = create((set, get) => ({
removeMeasurement: (id) =>
set((s) => ({ measurements: s.measurements.filter((m) => m.id !== id) })),
- clearAllMeasurements: () =>
- set({ measurements: [], measureInProgress: [], measureMode: null }),
-}))
+ clearAllMeasurements: () => set({ measurements: [], measureInProgress: [], measureMode: null }),
+}));
diff --git a/frontend/src/common/styles/base.css b/frontend/src/common/styles/base.css
index a57e18b..127a0a7 100644
--- a/frontend/src/common/styles/base.css
+++ b/frontend/src/common/styles/base.css
@@ -77,6 +77,7 @@
--font-size-heading-2: 1.5rem;
--font-size-heading-3: 1.375rem;
--font-size-title-1: 1.125rem;
+ --font-size-subtitle: 0.9375rem;
--font-size-title-2: 1rem;
--font-size-title-3: 0.875rem;
--font-size-title-4: 0.8125rem;
diff --git a/frontend/src/common/styles/wing.css b/frontend/src/common/styles/wing.css
index 91f69de..c480347 100644
--- a/frontend/src/common/styles/wing.css
+++ b/frontend/src/common/styles/wing.css
@@ -41,34 +41,34 @@
}
.wing-section-header {
- @apply text-[13px] font-bold font-korean mb-2;
+ @apply text-title-4 font-bold font-korean mb-2;
}
.wing-section-desc {
- @apply text-[10px] font-korean leading-relaxed;
+ @apply text-caption font-korean leading-relaxed;
color: var(--fg-disabled);
}
/* ── Typography ── */
.wing-title {
- @apply text-[15px] font-bold font-korean;
+ @apply text-subtitle font-bold font-korean;
}
.wing-subtitle {
- @apply text-[10px] font-korean mt-0.5;
+ @apply text-caption font-korean mt-0.5;
color: var(--fg-disabled);
}
.wing-label {
- @apply text-[11px] font-semibold font-korean;
+ @apply text-label-2 font-semibold font-korean;
}
.wing-value {
- @apply text-[11px] font-mono font-semibold;
+ @apply text-label-2 font-mono font-semibold;
}
.wing-meta {
- @apply text-[9px] font-korean;
+ @apply text-caption font-korean;
color: var(--fg-disabled);
}
@@ -83,12 +83,12 @@
/* ── Badge ── */
.wing-badge {
- @apply inline-flex items-center px-2 py-0.5 rounded text-[9px] font-bold font-korean;
+ @apply inline-flex items-center px-2 py-0.5 rounded text-caption font-bold font-korean;
}
/* ── Button ── */
.wing-btn {
- @apply px-3 py-1.5 rounded-sm text-[11px] font-semibold cursor-pointer font-korean border-none;
+ @apply px-3 py-1.5 rounded-sm text-label-2 font-semibold cursor-pointer font-korean border-none;
transition: all 0.15s;
}
@@ -134,7 +134,7 @@
/* ── Input ── */
.wing-input {
- @apply w-full rounded-sm text-[11px] font-korean outline-none;
+ @apply w-full rounded-sm text-label-2 font-korean outline-none;
padding: 6px 10px;
background: var(--bg-base);
border: 1px solid var(--stroke-default);
@@ -151,7 +151,7 @@
/* ── Table ── */
.wing-table {
- @apply w-full text-[10px] font-korean;
+ @apply w-full text-caption font-korean;
border-collapse: collapse;
}
@@ -232,11 +232,11 @@
}
.wing-kv-label {
- @apply text-[10px] font-korean;
+ @apply text-caption font-korean;
color: var(--fg-disabled);
}
.wing-kv-value {
- @apply text-[11px] font-semibold font-mono;
+ @apply text-label-2 font-semibold font-mono;
}
}
diff --git a/frontend/src/pages/design/ComponentsContent.tsx b/frontend/src/pages/design/ComponentsContent.tsx
index 14eaeb4..663231e 100644
--- a/frontend/src/pages/design/ComponentsContent.tsx
+++ b/frontend/src/pages/design/ComponentsContent.tsx
@@ -30,13 +30,13 @@ export const ComponentsContent = () => {
style={{ opacity: 0.4 }}
>
© 2024 WING-OPS 해상 시스템
전술 네비게이터 쉘 v2.4
diff --git a/frontend/src/pages/design/ComponentsOverview.tsx b/frontend/src/pages/design/ComponentsOverview.tsx
index 744dc5c..731664a 100644
--- a/frontend/src/pages/design/ComponentsOverview.tsx
+++ b/frontend/src/pages/design/ComponentsOverview.tsx
@@ -29,13 +29,12 @@ const ButtonsThumbnail = ({ isDark }: { isDark: boolean }) => {
{buttons.map(({ label, bg, border, color }) => (
@@ -112,6 +111,109 @@ const TextInputsThumbnail = ({ isDark }: { isDark: boolean }) => {
);
};
+const FloatThumbnail = ({ isDark }: { isDark: boolean }) => {
+ const backdropBg = isDark ? 'rgba(0,0,0,0.40)' : 'rgba(0,0,0,0.18)';
+ const dialogBg = isDark ? '#1a2236' : '#ffffff';
+ const dialogBorder = isDark ? 'rgba(66,71,84,0.30)' : '#e2e8f0';
+ const accent = isDark ? '#4cd7f6' : '#06b6d4';
+ const lineBg = isDark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)';
+ const successGreen = '#22c55e';
+
+ return (
+
+ {/* 미니 모달 */}
+
+ {/* 미니 드롭다운 */}
+
+ {/* 미니 토스트 */}
+
+
+ );
+};
+
// ---------- 카드 정의 ----------
const OVERVIEW_CARDS: OverviewCard[] = [
@@ -125,6 +227,11 @@ const OVERVIEW_CARDS: OverviewCard[] = [
label: 'Text Field',
thumbnail: (isDark) =>
,
},
+ {
+ id: 'float',
+ label: 'Float',
+ thumbnail: (isDark) =>
,
+ },
];
// ---------- Props ----------
diff --git a/frontend/src/pages/design/DesignContent.tsx b/frontend/src/pages/design/DesignContent.tsx
index fa984c0..69c9b36 100644
--- a/frontend/src/pages/design/DesignContent.tsx
+++ b/frontend/src/pages/design/DesignContent.tsx
@@ -32,7 +32,7 @@ const SectionTitle = ({ num, title, sub, rightNode, theme }: SectionTitleProps)
{sub}
@@ -46,7 +46,7 @@ const TYPO_ROWS: TypoRow[] = [
{
size: '9px / Meta',
sampleNode: (t) => (
-
+
메타정보 Meta info
),
@@ -55,7 +55,7 @@ const TYPO_ROWS: TypoRow[] = [
{
size: '10px / Table',
sampleNode: (t) => (
-
+
테이블 데이터 Table data
),
@@ -68,7 +68,7 @@ const TYPO_ROWS: TypoRow[] = [
className="inline-flex items-center rounded-md border border-solid py-2 px-4"
style={{ backgroundColor: t.typoActionBg, borderColor: t.typoActionBorder }}
>
-
+
입력/버튼 Input/Button text
@@ -78,7 +78,7 @@ const TYPO_ROWS: TypoRow[] = [
{
size: '13px / Header',
sampleNode: (t) => (
-
+
섹션 헤더 Section Header
),
@@ -87,7 +87,7 @@ const TYPO_ROWS: TypoRow[] = [
{
size: '15px / Title',
sampleNode: (t) => (
-
+
패널 타이틀 Panel Title
),
@@ -97,10 +97,10 @@ const TYPO_ROWS: TypoRow[] = [
size: 'Data / Mono',
sampleNode: (t) => (
-
+
1,234.56 km²
-
+
35° 06' 12" N
@@ -202,7 +202,7 @@ export const DesignContent = ({ theme }: DesignContentProps) => {
{item.hex}
{item.desc}
@@ -229,7 +229,7 @@ export const DesignContent = ({ theme }: DesignContentProps) => {
boxShadow: t.borderCardShadow,
}}
>
-
+
{item.token}
{
>
{t.textTokens.map((item) => (
-
+
{item.token}
{item.sampleText}
@@ -302,7 +302,7 @@ export const DesignContent = ({ theme }: DesignContentProps) => {
>
{item.name}
-
+
{item.token} / {item.color}
@@ -316,7 +316,7 @@ export const DesignContent = ({ theme }: DesignContentProps) => {
}}
>
{item.badge}
@@ -348,12 +348,12 @@ export const DesignContent = ({ theme }: DesignContentProps) => {
}}
/>
{item.label}
-
+
{item.hex}
@@ -370,7 +370,7 @@ export const DesignContent = ({ theme }: DesignContentProps) => {
rightNode={
PretendardGOV
@@ -391,7 +391,7 @@ export const DesignContent = ({ theme }: DesignContentProps) => {
style={{ textAlign: i === 2 ? 'right' : 'left', borderColor: t.tableRowBorder }}
>
{col}
@@ -412,7 +412,7 @@ export const DesignContent = ({ theme }: DesignContentProps) => {
>
{/* Size */}
-
+
{row.size}
@@ -420,7 +420,7 @@ export const DesignContent = ({ theme }: DesignContentProps) => {
{row.sampleNode(t)}
{/* Properties */}
-
+
{row.properties}
@@ -447,7 +447,7 @@ export const DesignContent = ({ theme }: DesignContentProps) => {
}}
>
Small Elements
@@ -475,7 +475,7 @@ export const DesignContent = ({ theme }: DesignContentProps) => {
}}
>
Structural Panels
@@ -503,7 +503,7 @@ export const DesignContent = ({ theme }: DesignContentProps) => {
{['Precision Engineering', 'Safety Compliant', 'Optimized v8.42'].map((label) => (
{label}
@@ -513,13 +513,13 @@ export const DesignContent = ({ theme }: DesignContentProps) => {
{/* 우측 */}
Generated for Terminal:
1440x900_PR_MKT
diff --git a/frontend/src/pages/design/DesignHeader.tsx b/frontend/src/pages/design/DesignHeader.tsx
index 3e6bc84..3205f65 100644
--- a/frontend/src/pages/design/DesignHeader.tsx
+++ b/frontend/src/pages/design/DesignHeader.tsx
@@ -50,10 +50,10 @@ export const DesignHeader = ({
}}
>
- Design System v1.0
+ Design System v1.1
diff --git a/frontend/src/pages/design/DesignPage.tsx b/frontend/src/pages/design/DesignPage.tsx
index e6c085b..365f1a7 100644
--- a/frontend/src/pages/design/DesignPage.tsx
+++ b/frontend/src/pages/design/DesignPage.tsx
@@ -13,6 +13,7 @@ import FoundationsOverview from './FoundationsOverview';
import ComponentsOverview from './ComponentsOverview';
import { ButtonContent } from './ButtonContent';
import { TextFieldContent } from './TextFieldContent';
+import { FloatContent } from './FloatContent';
import { getTheme } from './designTheme';
import type { ThemeMode } from './designTheme';
@@ -69,6 +70,8 @@ export const DesignPage = () => {
return
;
case 'text-field':
return
;
+ case 'float':
+ return
;
default:
return
;
}
diff --git a/frontend/src/pages/design/DesignSidebar.tsx b/frontend/src/pages/design/DesignSidebar.tsx
index b953cf0..0135c95 100644
--- a/frontend/src/pages/design/DesignSidebar.tsx
+++ b/frontend/src/pages/design/DesignSidebar.tsx
@@ -2,7 +2,7 @@ import type { DesignTheme } from './designTheme';
import type { DesignTab } from './DesignHeader';
export type FoundationsMenuItemId = 'overview' | 'color' | 'typography' | 'radius' | 'layout';
-export type ComponentsMenuItemId = 'overview' | 'buttons' | 'text-field';
+export type ComponentsMenuItemId = 'overview' | 'buttons' | 'text-field' | 'float';
export type MenuItemId = FoundationsMenuItemId | ComponentsMenuItemId;
interface MenuItem {
@@ -22,6 +22,7 @@ const COMPONENTS_MENU: MenuItem[] = [
{ id: 'overview', label: 'Overview' },
{ id: 'buttons', label: 'Buttons' },
{ id: 'text-field', label: 'Text Field' },
+ { id: 'float', label: 'Float' },
];
const SIDEBAR_CONFIG: Record
= {
diff --git a/frontend/src/pages/design/FloatContent.tsx b/frontend/src/pages/design/FloatContent.tsx
new file mode 100644
index 0000000..020fac6
--- /dev/null
+++ b/frontend/src/pages/design/FloatContent.tsx
@@ -0,0 +1,100 @@
+// FloatContent.tsx — Float 서브탭 래퍼
+
+import { useState } from 'react';
+import type { DesignTheme } from './designTheme';
+import { FloatModalContent } from './float/FloatModalContent';
+import { FloatDropdownContent } from './float/FloatDropdownContent';
+import { FloatOverlayContent } from './float/FloatOverlayContent';
+import { FloatToastContent } from './float/FloatToastContent';
+
+type FloatSubTab = 'modal' | 'dropdown' | 'overlay' | 'toast';
+
+const SUB_TABS: { id: FloatSubTab; label: string; desc: string }[] = [
+ { id: 'modal', label: 'Modal', desc: 'Dialog · Confirm' },
+ { id: 'dropdown', label: 'Dropdown', desc: 'ComboBox · Select' },
+ { id: 'overlay', label: 'Overlay', desc: 'Map Layer · Popup' },
+ { id: 'toast', label: 'Toast', desc: 'Notification · Alert' },
+];
+
+interface FloatContentProps {
+ theme: DesignTheme;
+}
+
+export const FloatContent = ({ theme }: FloatContentProps) => {
+ const [activeSubTab, setActiveSubTab] = useState('modal');
+ const t = theme;
+ const isDark = t.mode === 'dark';
+
+ const renderSubContent = () => {
+ switch (activeSubTab) {
+ case 'modal':
+ return
+ {/* 서브탭 헤더 */}
+
+
+
+
+ Float
+
+
+ 화면 위에 떠서 표시되는 UI 패턴 카탈로그 — Modal, Dropdown, Overlay, Toast
+
+
+
+ {/* 서브탭 바 */}
+
+ {SUB_TABS.map(({ id, label, desc }) => {
+ const isActive = activeSubTab === id;
+ return (
+ setActiveSubTab(id)}
+ className="flex flex-col items-start px-4 pb-3 pt-1 cursor-pointer bg-transparent relative"
+ style={{
+ borderBottom: isActive ? `2px solid ${t.textAccent}` : '2px solid transparent',
+ }}
+ >
+
+ {label}
+
+
+ {desc}
+
+
+ );
+ })}
+
+
+
+
+ {/* 서브탭 콘텐츠 */}
+
{renderSubContent()}
+
{/* ── 섹션 1: 헤더 + 개요 ── */}
@@ -151,192 +324,346 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {
Layout
-
+
WING-OPS는 데스크톱 전용 고정 뷰포트 애플리케이션입니다. 화면 전체를 채우는 고정
- 레이아웃(100vh)으로, flex 기반의 패널 구조를 사용합니다.
+ 레이아웃(100vh)으로, flex 기반의 패널 구조를 사용합니다. KRDS 가이드라인을 기반으로
+ xlarge / xxlarge 구간에 최적화되어 있습니다.
-
- 뷰포트 고정:{' '}
-
- body {'{'} height: 100vh; overflow: hidden {'}'}
-
-
- 레이아웃 수단: flex (2,243회) > grid (~120회) — flex가 주요 레이아웃 수단
- Tailwind CSS 기본 breakpoints/spacing을 사용하며, 커스텀 오버라이드 없음
-
-
-
- {/* ── 섹션 2: Breakpoints ── */}
-
-
-
- Breakpoints
-
-
- Tailwind CSS 기본 breakpoints를 사용합니다. 현재 프로젝트는 데스크톱 전용으로,{' '}
- xl: 접두사만 제한적으로
- 사용합니다.
-
-
-
-
-
- {(['Name', 'Prefix', 'Min Width', 'Status', 'Note'] as const).map((col) => (
-
-
- {col}
-
-
- ))}
-
-
- {BREAKPOINTS.map((bp, idx) => (
+
+ {[
+ { label: 'Viewport', value: '100vh fixed', desc: 'overflow: hidden' },
+ { label: 'Layout', value: 'flex 기반', desc: 'grid 보조' },
+ { label: 'Min Width', value: '1280px', desc: 'xl: 이상' },
+ ].map((item) => (
-
-
- {bp.name}
-
-
-
-
- {bp.prefix}
-
-
-
-
- {bp.minWidth}
-
-
-
-
- {bp.inUse ? '사용 중' : '미사용'}
-
-
-
-
- {bp.note || '-'}
-
-
+
+ {item.label}
+
+
+ {item.value}
+
+
+ {item.desc}
+
))}
- {/* ── 섹션 3: Device Grid & Spacing ── */}
-
+ {/* ── 섹션 2: Breakpoint 타임라인 ── */}
+
- Device Grid & Spacing
+ Breakpoint
- 디바이스별 그리드 구성과 여백 패턴입니다. 현재 Desktop만 지원합니다.
+ 화면 크기에 따라 반응형 레이아웃을 사용하여 환경에 최적화된 구조로 표시됩니다. WING-OPS
+ 사용 구간(xl, 2xl)은 cyan으로 강조되어 있습니다.
-
+ {/* 타임라인 다이어그램 */}
+
+ {/* 가로축 마커 (분기점 라벨) */}
+
+ {TIMELINE_MARKERS.map((px) => (
+
+
+ {px}
+
+
+ ))}
+
+
+ {/* 분기점 점선 + tier 막대 컨테이너 */}
+
+ {/* 수직 점선 */}
+ {TIMELINE_MARKERS.map((px) => (
+
+ ))}
+
+ {/* tier 막대들 */}
+
+ {BREAKPOINTS.map((bp) => {
+ const startPct = toPercent(bp.minWidth);
+ const endPct = bp.maxWidth ? toPercent(bp.maxWidth) : 100;
+ const widthPct = endPct - startPct;
+ const barColor = bp.inUse ? accentTint : dimBg;
+ const labelColor = bp.inUse ? t.textAccent : dimText;
+
+ return (
+
+ {/* 컬럼 그리드 미니 */}
+
+ {Array.from({ length: bp.columns }).map((_, i) => (
+
+ ))}
+
+
+ {bp.krdsName}
+
+ {bp.inUse && (
+
+ in use
+
+ )}
+
+ {bp.columns} cols
+
+
+ );
+ })}
+
+
+
+ {/* 범례 */}
+
+
+
+
+
+ 미지원 (1280px 미만)
+
+
+
+
+
+
+ {/* ── 섹션 3: Grid 시각화 카드 ── */}
+
+
+
+ Grid
+
+
+ 컬럼, 마진, 거터로 구성된 그리드 시스템입니다. 데스크톱 전용으로 xl / 2xl 두 구간만
+ 지원합니다.
+
+
+
+
{DEVICE_SPECS.map((spec) => (
-
-
- {spec.device}
-
- {!spec.supported && (
+ {/* 카드 헤더 */}
+
+
+
+ Breakpoint
+
- 미지원
+ {spec.prefix}
- )}
+
+
+
+ Width
+
+
+ {spec.width}
+
+
-
+ {/* 시각화 영역 */}
+
+ {/* 컬럼 위 어노테이션 (margin / gutter) */}
+
+ {Array.from({ length: spec.columns + 1 }).map((_, idx) => {
+ const isEdge = idx === 0 || idx === spec.columns;
+ return (
+
+ {isEdge ? (spec.prefix === '2xl' ? '32' : '24') : '24'}
+
+ );
+ })}
+
+
+ {/* 컬럼 막대 시각화 */}
+
+ {Array.from({ length: spec.columns }).map((_, i) => (
+
+ ))}
+
+
+ {/* 가짜 TopBar mockup */}
+
+
+ WING-OPS
+
+
+ {['예측', 'HNS', '구조', '관리'].map((label) => (
+
+ {label}
+
+ ))}
+
+
+
+
+ {/* 카드 푸터 — Grid 정보 */}
+
{[
- { label: 'Width', value: spec.width },
- { label: 'Columns', value: spec.columns },
+ { label: 'Columns', value: `${spec.columns}` },
{ label: 'Gutter', value: spec.gutter },
{ label: 'Margin', value: spec.margin },
- ].map((row) => (
-
+ ].map((info) => (
+
- {row.label}
+ {info.label}
-
- {row.value}
+
+ {info.value}
))}
@@ -344,19 +671,201 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {
))}
+
+ {/* 미지원 안내 */}
+
+
+ ⚠
+
+
+ 1280px 미만 미지원 — Mobile / Tablet
+ 구간(xs / s / md / lg)은 데스크톱 전용 운영 정책에 따라 지원하지 않습니다.
+
+
- {/* ── 섹션 4: Spacing Scale ── */}
-
+ {/* ── 섹션 4: App Shell + KRDS Region 매핑 ── */}
+
- Spacing Scale
+ App Shell
- Tailwind CSS 기본 spacing 스케일입니다. gap, padding, margin에 동일하게 적용됩니다.
+ WING-OPS 애플리케이션의 기본 레이아웃 구조와 KRDS Sub-page 영역 매핑입니다.
+ {/* 다이어그램 */}
+
+ {/* TopBar */}
+
+
+
+ TopBar
+
+
+ KRDS · Header
+
+
+
+ h-[52px] / shrink-0
+
+
+
+ {/* SubMenuBar */}
+
+
+
+ SubMenuBar
+
+
+ KRDS · Sub Navigation
+
+
+
+ shrink-0 / 조건부
+
+
+
+ {/* Content Area */}
+
+ {/* Sidebar */}
+
+
+ Sidebar
+
+
+ KRDS · Left Menu
+
+
+ flex-col / border-r
+
+
+
+ {/* Main Content */}
+
+
+ Content
+
+
+ KRDS · Main Contents
+
+
+ flex-1 / overflow-y-auto
+
+
+
+ {/* Right Panel (조건부) */}
+
+
+ Right Panel
+
+
+ KRDS · Right Menu
+
+
+ 조건부 렌더
+
+
+
+
+ {/* Footer 안내 */}
+
+
+ KRDS · Footer
+
+
+ 풀스크린 앱 — 미사용
+
+
+
+
+ {/* 매핑 표 (다이어그램 부속) */}
{
- {(['Scale', 'REM', 'PX', 'Preview', '용도'] as const).map((col) => (
-
+ {(['KRDS Region', 'WING-OPS Component', 'Implementation'] as const).map((col) => (
+
{col}
@@ -384,53 +893,32 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {
))}
-
- {SPACING_TOKENS.map((token, idx) => (
+ {SUB_PAGE_MAPPINGS.map((row, idx) => (
-
-
- {token.className}
-
-
-
-
- {token.rem}
-
-
-
-
- {token.px}
-
-
-
+
-
-
- {token.usage}
+
+
+ {row.wingOpsComponent}
+
+
+
+
+ {row.implementation}
@@ -438,14 +926,268 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {
- {/* ── 섹션 5: Z-Index Layers ── */}
-
+ {/* ── 섹션 5: Spacing Scale 막대 시각화 ── */}
+
- Z-Index Layers
+ Spacing
- UI 요소의 레이어 스택 순서입니다. 높은 z-index가 위에 표시됩니다.
+ UI 요소 간의 간격과 여백을 정의하여 콘텐츠의 위계와 가독성을 조율합니다. Tailwind
+ spacing 토큰과 직결되며, 막대 길이는 실제 px 비율입니다.
+
+
+
+
+ {SPACING_TOKENS.map((token) => {
+ const widthPct = (token.px / SPACING_MAX_PX) * 100;
+ return (
+
+ {/* 토큰 배지 */}
+
+ {token.className}
+
+ {/* px 값 */}
+
+ {token.px}px
+
+ {/* 막대 시각화 */}
+
+ {/* 사용처 */}
+
+ {token.usage}
+
+
+ );
+ })}
+
+
+
+ {/* ── 섹션 6: 4pt Grid 원칙 + Multiplier ── */}
+
+
+
+ 4pt Grid
+
+
+ 모든 여백과 간격을 4point 단위로 설정해 규칙성을 확보합니다. 컴팩트한 컴포넌트의 경우,
+ 2의 배수 단위를 제한적으로 사용합니다.
+
+
+
+
+ {/* Part A — 원칙 카드 */}
+
+
+ Principles
+
+
+ {[
+ {
+ label: '기본',
+ text: '4px base — 모든 spacing은 4의 배수',
+ example: '4 / 8 / 12 / 16 / 20 / 24 / 32',
+ },
+ {
+ label: '권장',
+ text: '8pt 배수 우선 — gap-2, p-4, gap-6',
+ example: '8 / 16 / 24 / 32 / 64',
+ },
+ {
+ label: '예외',
+ text: '컴팩트 컴포넌트만 4px / 12px 사용',
+ example: 'gap-1, gap-3, p-1.5',
+ },
+ ].map((item) => (
+
+
+
+ {item.label}
+
+
+ {item.text}
+
+
+
+ {item.example}
+
+
+ ))}
+
+
+
+ {/* Part B — Multiplier 어노테이션 시각화 */}
+
+
+ Multiplier Annotation
+
+
+ {/* 어노테이션 — top */}
+
+
+ {CARD_ANNOTATIONS[0].multiplier}={CARD_ANNOTATIONS[0].px}
+
+
+ {/* 어노테이션 — left */}
+
+
+ {CARD_ANNOTATIONS[1].multiplier}={CARD_ANNOTATIONS[1].px}
+
+
+ {/* 어노테이션 — right */}
+
+
+ {CARD_ANNOTATIONS[2].multiplier}={CARD_ANNOTATIONS[2].px}
+
+
+ {/* 어노테이션 — bottom */}
+
+
+ {CARD_ANNOTATIONS[3].multiplier}={CARD_ANNOTATIONS[3].px}
+
+
+
+ {/* 실제 카드 mockup */}
+
+
+ 카드 타이틀
+
+
+ 본문 내용 예시
+
+
+
+ Action
+
+
+
+
+
+ 어노테이션은 spacing 값의 4px 배수 multiplier를 표시합니다.
+
+
+
+
+
+ {/* ── 섹션 7: Z-Index Layers ── */}
+
+
+
+
+ Z-Index Layers
+
+
+ 디자인 시스템 진실 소스
+
+
+
+ UI 요소의 레이어 스택 순서입니다. 높은 z-index가 위에 표시되며, 이 값은 디자인 시스템의
+ 이상적 설계 값으로 실제 코드는 이 값에 맞춰 정정되어야 합니다.
@@ -456,19 +1198,16 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {
className="flex flex-row items-stretch"
style={{ marginLeft: `${idx * 16}px` }}
>
- {/* z-index 라벨 */}
-
+
{layer.zIndex}
-
- {/* 레이어 바 */}
{
{layer.name}
-
+
{layer.description}
@@ -489,130 +1228,127 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {
- {/* ── 섹션 6: App Shell 구조 ── */}
-
+ {/* ── 섹션 8: CSS 클래스 + KRDS Grid Rules 통합 ── */}
+
- App Shell 구조
+ Reference
- WING-OPS 애플리케이션의 기본 레이아웃 구조입니다.
+ App Shell CSS 클래스와 KRDS Grid 규칙 비교 — 코드 작성 시 참조용입니다.
- {/* 레이아웃 다이어그램 */}
-
- {/* TopBar */}
+
+ {/* CSS 클래스 */}
-
- TopBar
-
-
- h-[52px] / shrink-0
-
-
-
- {/* SubMenuBar */}
-
-
- SubMenuBar
-
-
- shrink-0 / 조건부 렌더
-
-
-
- {/* Content Area */}
-
- {/* Sidebar */}
-
- Sidebar
-
-
- 가변 너비
-
-
-
- {/* Main Content */}
-
-
- Content
-
-
- flex-1 / overflow-y-auto
-
-
-
-
-
- {/* wing.css 레이아웃 클래스 */}
-
-
- 레이아웃 클래스
-
- {SHELL_CLASSES.map((cls) => (
-
- {cls.className}
-
-
- {cls.role}
-
-
- {cls.styles}
+ CSS Classes
- ))}
+ {SHELL_CLASSES.map((cls, idx) => (
+
+
+
+ {cls.className}
+
+
+ {cls.role}
+
+
+
+ {cls.styles}
+
+
+ ))}
+
+
+ {/* KRDS Grid Rules */}
+
+
+
+ KRDS vs WING-OPS
+
+
+ {GRID_RULES.map((rule, idx) => (
+
+
+ {rule.name}
+
+
+
+ KRDS:
+
+
+ {rule.krds}
+
+
+
+
+ WING:
+
+
+ {rule.wingOps}
+
+
+
+ {rule.note}
+
+
+ ))}
+
diff --git a/frontend/src/pages/design/RadiusContent.tsx b/frontend/src/pages/design/RadiusContent.tsx
index 769a4dd..0f34e49 100644
--- a/frontend/src/pages/design/RadiusContent.tsx
+++ b/frontend/src/pages/design/RadiusContent.tsx
@@ -118,7 +118,7 @@ export const RadiusContent = ({ theme }: RadiusContentProps) => {
{(['이름', '값', 'Preview'] as const).map((col) => (
{col}
@@ -153,7 +153,7 @@ export const RadiusContent = ({ theme }: RadiusContentProps) => {
{token.isCustom && (
{
{/* 값 */}
-
+
{token.value}
diff --git a/frontend/src/pages/design/TypographyContent.tsx b/frontend/src/pages/design/TypographyContent.tsx
index c2b336b..f91e7e3 100644
--- a/frontend/src/pages/design/TypographyContent.tsx
+++ b/frontend/src/pages/design/TypographyContent.tsx
@@ -378,7 +378,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {
>
{font.name}
{
{font.usage}
- Regular
+ Regular
{font.sampleText}
- Bold
+ Bold
{font.sampleText}
@@ -484,7 +484,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {
{row.letterSpacing}
{
>
{row.token}
-
+
{row.size} · {row.weight} · {row.lineHeight}
@@ -767,7 +767,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {
{row.value}
-
@@ -33,7 +33,7 @@ const buttonRows: ButtonRow[] = [
boxShadow: '0px 0px 12px 0px rgba(6, 182, 212, 0.4)',
}}
>
-
@@ -43,7 +43,7 @@ const buttonRows: ButtonRow[] = [
className="bg-[#334155] rounded-md pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative"
style={{ opacity: 0.5 }}
>
-
@@ -53,21 +53,21 @@ const buttonRows: ButtonRow[] = [
label: '세컨더리 (솔리드)',
defaultBtn: (
-
),
hoverBtn: (
-
),
disabledBtn: (
-
@@ -77,21 +77,21 @@ const buttonRows: ButtonRow[] = [
label: '아웃라인 (고스트)',
defaultBtn: (
-
),
hoverBtn: (
-
),
disabledBtn: (
-
@@ -102,7 +102,7 @@ const buttonRows: ButtonRow[] = [
defaultBtn: (
-
@@ -113,7 +113,7 @@ const buttonRows: ButtonRow[] = [
style={{ boxShadow: '0px 0px 8px 0px rgba(59, 130, 246, 0.2)' }}
>
-
@@ -125,7 +125,7 @@ const buttonRows: ButtonRow[] = [
src={pdfFileDisabledIcon}
alt="PDF 아이콘 (비활성)"
/>
-
@@ -135,7 +135,7 @@ const buttonRows: ButtonRow[] = [
label: '경고 (삭제)',
defaultBtn: (
-
@@ -145,14 +145,14 @@ const buttonRows: ButtonRow[] = [
className="bg-[rgba(239,68,68,0.20)] rounded-md border border-solid border-[rgba(239,68,68,0.50)] pt-1.5 pr-3 pb-[7px] pl-3 flex flex-row gap-0 items-center justify-center shrink-0 relative"
style={{ boxShadow: '0px 0px 8px 0px rgba(239, 68, 68, 0.15)' }}
>
-
),
disabledBtn: (
-
diff --git a/frontend/src/pages/design/components/CardSection.tsx b/frontend/src/pages/design/components/CardSection.tsx
index e14a0fe..4d6118c 100644
--- a/frontend/src/pages/design/components/CardSection.tsx
+++ b/frontend/src/pages/design/components/CardSection.tsx
@@ -32,7 +32,7 @@ export const CardSection = () => {
{/* 카드 헤더 */}
활성 물류 현황
@@ -55,12 +55,12 @@ export const CardSection = () => {
-
-
@@ -78,7 +78,7 @@ export const CardSection = () => {
'linear-gradient(97.29deg, rgba(6, 182, 212, 1) 0%, rgba(59, 130, 246, 1) 100%)',
}}
>
-
@@ -108,7 +108,7 @@ export const CardSection = () => {
실시간 텔레메트리
@@ -139,14 +139,14 @@ export const CardSection = () => {
{/* 정상 가동중 뱃지 */}
-
{/* 대응팀 배치 아웃라인 버튼 */}
-
diff --git a/frontend/src/pages/design/components/IconBadgeSection.tsx b/frontend/src/pages/design/components/IconBadgeSection.tsx
index c9368d0..87c1953 100644
--- a/frontend/src/pages/design/components/IconBadgeSection.tsx
+++ b/frontend/src/pages/design/components/IconBadgeSection.tsx
@@ -85,7 +85,7 @@ export const IconBadgeSection = () => {
{btn.label}
@@ -97,7 +97,7 @@ export const IconBadgeSection = () => {
{/* 카드 푸터 */}
-
+
Standard dimensions: 36x36px with radius-md (6px)
@@ -127,7 +127,7 @@ export const IconBadgeSection = () => {
Operational Status
@@ -141,7 +141,7 @@ export const IconBadgeSection = () => {
style={{ backgroundColor: badge.bg }}
>
{badge.label}
@@ -155,7 +155,7 @@ export const IconBadgeSection = () => {
Data Classification
@@ -174,7 +174,7 @@ export const IconBadgeSection = () => {
>
{tag.label}
diff --git a/frontend/src/pages/design/designTheme.ts b/frontend/src/pages/design/designTheme.ts
index 5fa1987..79920ba 100644
--- a/frontend/src/pages/design/designTheme.ts
+++ b/frontend/src/pages/design/designTheme.ts
@@ -321,21 +321,21 @@ export const DARK_THEME: DesignTheme = {
{
token: 'text-1',
sampleText: '주요 텍스트 Primary Text',
- sampleClass: 'text-[#edf0f7] font-korean text-[15px] font-bold',
+ sampleClass: 'text-[#edf0f7] font-korean text-subtitle font-bold',
desc: 'Headings, active values, and primary labels.',
descColor: 'rgba(237,240,247,0.60)',
},
{
token: 'text-2',
sampleText: '보조 텍스트 Secondary Text',
- sampleClass: 'text-[#c0c8dc] font-korean text-[15px] font-medium',
+ sampleClass: 'text-[#c0c8dc] font-korean text-subtitle font-medium',
desc: 'Supporting labels and secondary information.',
descColor: 'rgba(192,200,220,0.60)',
},
{
token: 'text-3',
sampleText: '비활성 텍스트 Muted Text',
- sampleClass: 'text-[#9ba3b8] font-korean text-[15px]',
+ sampleClass: 'text-[#9ba3b8] font-korean text-subtitle',
desc: 'Disabled states, placeholders, and captions.',
descColor: 'rgba(155,163,184,0.60)',
},
@@ -353,7 +353,7 @@ export const LIGHT_THEME: DesignTheme = {
headerBg: '#ffffff',
headerBorder: '#e2e8f0',
- textPrimary: '#0f172a',
+ textPrimary: '#000000',
textSecondary: '#64748b',
textMuted: '#94a3b8',
textAccent: '#06b6d4',
@@ -498,21 +498,21 @@ export const LIGHT_THEME: DesignTheme = {
{
token: 'text-1',
sampleText: '주요 텍스트 Primary Text',
- sampleClass: 'text-[#0f172a] font-korean text-[15px] font-bold',
+ sampleClass: 'text-[#0f172a] font-korean text-subtitle font-bold',
desc: 'Headings, active values, and primary labels.',
descColor: '#64748b',
},
{
token: 'text-2',
sampleText: '보조 텍스트 Secondary Text',
- sampleClass: 'text-[#475569] font-korean text-[15px] font-medium',
+ sampleClass: 'text-[#475569] font-korean text-subtitle font-medium',
desc: 'Supporting labels and secondary information.',
descColor: '#64748b',
},
{
token: 'text-3',
sampleText: '비활성 텍스트 Muted Text',
- sampleClass: 'text-[#94a3b8] font-korean text-[15px]',
+ sampleClass: 'text-[#94a3b8] font-korean text-subtitle',
desc: 'Disabled states, placeholders, and captions.',
descColor: '#94a3b8',
},
diff --git a/frontend/src/pages/design/float/FloatDropdownContent.tsx b/frontend/src/pages/design/float/FloatDropdownContent.tsx
new file mode 100644
index 0000000..9a3792e
--- /dev/null
+++ b/frontend/src/pages/design/float/FloatDropdownContent.tsx
@@ -0,0 +1,440 @@
+// FloatDropdownContent.tsx — Dropdown/ComboBox 카탈로그
+
+import { useState } from 'react';
+import type { DesignTheme } from '../designTheme';
+import { ComboBox } from '@common/components/ui/ComboBox';
+
+interface FloatDropdownContentProps {
+ theme: DesignTheme;
+}
+
+const DEMO_OPTIONS = [
+ { value: 'option1', label: '연속 유출 (Continuous)' },
+ { value: 'option2', label: '순간 유출 (Instantaneous)' },
+ { value: 'option3', label: '밀도가스 유출 (Dense Gas)' },
+ { value: 'option4', label: '수중 유출 (Subsurface)' },
+ { value: 'option5', label: '증발 유출 (Evaporative)' },
+];
+
+const ALGORITHM_OPTIONS = [
+ { value: 'slick', label: 'Slick Formation Model' },
+ { value: 'gnome', label: 'GNOME (NOAA)' },
+ { value: 'medslik', label: 'MEDSLIK-II' },
+];
+
+export const FloatDropdownContent = ({ theme }: FloatDropdownContentProps) => {
+ const t = theme;
+ const isDark = t.mode === 'dark';
+
+ const [demoValue, setDemoValue] = useState('option1');
+ const [algoValue, setAlgoValue] = useState('slick');
+
+ return (
+
+ {/* ── 개요 ── */}
+
+
+ Dropdown
+
+
+ 트리거 요소에{' '}
+
+ position: absolute
+
+ 로 부착되는 선택 목록. 5개 이상의 선택지가 있는 단일 선택에 사용한다. 프로젝트 공통
+ 컴포넌트는{' '}
+
+ ComboBox
+
+ 다.
+
+
+
+ {/* ── Live Preview ── */}
+
+
+
+ Live Preview
+
+
+ interactive
+
+
+
+
+
+
+ 유출 유형
+
+
+ 선택값: {DEMO_OPTIONS.find((o) => o.value === demoValue)?.label}
+
+
+
+
+ 예측 알고리즘
+
+
+ 선택값: {ALGORITHM_OPTIONS.find((o) => o.value === algoValue)?.label}
+
+
+
+
+ 위 컴포넌트는{' '}
+
+ @common/components/ui/ComboBox
+
+ 를 직접 렌더링합니다. 외부 클릭 시 자동으로 닫힙니다.
+
+
+
+
+ {/* ── Anatomy ── */}
+
+
+ Anatomy
+
+
+ {/* 구조 다이어그램 */}
+
+
+ Structure
+
+
+ {/* 트리거 */}
+
+
+ 선택된 옵션
+
+
+ ▼
+
+
+ {/* 리스트 */}
+
+ {['옵션 A (선택됨)', '옵션 B', '옵션 C', '옵션 D'].map((opt, i) => (
+
+
+ {opt}
+
+
+ ))}
+
+
+
+
+ {/* 위치 지정 규칙 */}
+
+
+ Position Rules
+
+
+ {[
+ { label: 'trigger', rule: 'position: relative', desc: '드롭다운 기준점' },
+ {
+ label: 'list',
+ rule: 'position: absolute, top: calc(100% + 2px)',
+ desc: '트리거 바로 아래',
+ },
+ { label: 'z-index', rule: 'z-[1000]', desc: '모달(9999) 아래, 일반 UI 위' },
+ { label: 'max-height', rule: '200px + overflow-y: auto', desc: '스크롤 한계' },
+ { label: 'animation', rule: 'fadeSlideDown 0.15s ease-out', desc: '부드러운 등장' },
+ ].map((item) => (
+
+
+ {item.label}
+
+
+
+ {item.rule}
+
+
+ {item.desc}
+
+
+
+ ))}
+
+
+
+
+
+ {/* ── 상태 ── */}
+
+
+ 상태
+
+
+ {[
+ {
+ label: 'Default',
+ desc: '닫힘, 값 미선택',
+ borderColor: isDark ? 'rgba(66,71,84,0.40)' : '#e2e8f0',
+ textColor: t.textMuted,
+ },
+ {
+ label: 'Open',
+ desc: '리스트 표시 중',
+ borderColor: t.textAccent,
+ textColor: t.textAccent,
+ },
+ {
+ label: 'Selected',
+ desc: '값 선택됨',
+ borderColor: isDark ? 'rgba(66,71,84,0.40)' : '#e2e8f0',
+ textColor: t.textPrimary,
+ },
+ {
+ label: 'Disabled',
+ desc: '비활성',
+ borderColor: isDark ? 'rgba(66,71,84,0.20)' : '#f1f5f9',
+ textColor: isDark ? 'rgba(140,144,159,0.40)' : '#cbd5e1',
+ },
+ ].map((state) => (
+
+
+ {state.label}
+
+
+
+ {state.label === 'Selected' ? '연속 유출' : '선택하세요'}
+
+
+ {state.label === 'Open' ? '▲' : '▼'}
+
+
+
+ {state.desc}
+
+
+ ))}
+
+
+
+ {/* ── Props 테이블 ── */}
+
+
+ Props (ComboBox)
+
+
+
+ {['Prop', 'Type', 'Required', 'Description'].map((col) => (
+
+
+ {col}
+
+
+ ))}
+
+ {[
+ { prop: 'value', type: 'string | number', required: 'Y', desc: '현재 선택값' },
+ {
+ prop: 'onChange',
+ type: '(value: string) => void',
+ required: 'Y',
+ desc: '선택 변경 콜백',
+ },
+ {
+ prop: 'options',
+ type: 'ComboBoxOption[]',
+ required: 'Y',
+ desc: '{ value, label } 배열',
+ },
+ { prop: 'placeholder', type: 'string', required: 'N', desc: '미선택 상태 표시 텍스트' },
+ { prop: 'className', type: 'string', required: 'N', desc: '트리거 추가 스타일' },
+ ].map((row, idx) => (
+
+
+
+ {row.prop}
+
+
+
+
+ {row.type}
+
+
+
+
+ {row.required}
+
+
+
+
+ {row.desc}
+
+
+
+ ))}
+
+
+
+ {/* ── 사용 가이드라인 ── */}
+
+
+ 사용 가이드라인
+
+
+ {[
+ {
+ title: 'clickOutside 처리 필수',
+ desc: 'useEffect + mousedown 이벤트로 외부 클릭 감지. ComboBox 내부에 구현됨.',
+ type: 'rule',
+ },
+ {
+ title: '5개 이상 선택지',
+ desc: '4개 이하는 Radio 버튼 또는 버튼 그룹으로 대체. 너무 많은 옵션은 검색 필터 추가 고려.',
+ type: 'rule',
+ },
+ {
+ title: '모달 내부 사용 시',
+ desc: '모달 z-index(9999) 내부에 있으면 드롭다운 z-[1000]이 자연스럽게 모달 위에 렌더링됨.',
+ type: 'info',
+ },
+ {
+ title: '너비 상속',
+ desc: '드롭다운 리스트는 트리거와 동일한 너비. left: 0, right: 0으로 너비 상속.',
+ type: 'info',
+ },
+ ].map((item) => (
+
+
+ {item.title}
+
+
+ {item.desc}
+
+
+ ))}
+
+
+
+ );
+};
+
+export default FloatDropdownContent;
diff --git a/frontend/src/pages/design/float/FloatModalContent.tsx b/frontend/src/pages/design/float/FloatModalContent.tsx
new file mode 100644
index 0000000..5eed471
--- /dev/null
+++ b/frontend/src/pages/design/float/FloatModalContent.tsx
@@ -0,0 +1,668 @@
+// FloatModalContent.tsx — Modal + Confirm 카탈로그
+
+import { useState } from 'react';
+import type { DesignTheme } from '../designTheme';
+
+interface FloatModalContentProps {
+ theme: DesignTheme;
+}
+
+type ModalSize = 'sm' | 'md' | 'lg' | 'full';
+
+const SIZE_CONFIG: Record
= {
+ sm: { label: 'Small', width: '380px', desc: '입력 폼, 간단한 확인' },
+ md: { label: 'Medium', width: '520px', desc: '상세 파라미터, 재계산' },
+ lg: { label: 'Large', width: '720px', desc: '복잡한 폼, 미디어 뷰어' },
+ full: { label: 'Full', width: '95vw', desc: '매뉴얼, 전체 화면 콘텐츠' },
+};
+
+const MODAL_INVENTORY = [
+ {
+ component: 'HNSRecalcModal',
+ zIndex: 'z-[9999]',
+ trigger: '버튼 클릭',
+ source: 'tabs/hns/components/',
+ },
+ {
+ component: 'RecalcModal',
+ zIndex: 'z-[9999]',
+ trigger: '재계산 버튼',
+ source: 'tabs/prediction/components/',
+ },
+ {
+ component: 'BacktrackModal',
+ zIndex: 'z-[9999]',
+ trigger: '역추적 분석',
+ source: 'tabs/prediction/components/',
+ },
+ {
+ component: 'MediaModal',
+ zIndex: 'z-[10000]',
+ trigger: '미디어 클릭',
+ source: 'tabs/incidents/components/',
+ },
+ {
+ component: 'SimulationErrorModal',
+ zIndex: 'z-50 ⚠️',
+ trigger: '오류 발생',
+ source: 'tabs/prediction/components/',
+ },
+ {
+ component: 'TemplateFormEditor',
+ zIndex: 'z-50 ⚠️',
+ trigger: '템플릿 편집',
+ source: 'tabs/reports/components/',
+ },
+ {
+ component: 'Admin 모달 (Layer/Map/Perm)',
+ zIndex: 'z-50 ⚠️',
+ trigger: '관리 작업',
+ source: 'tabs/admin/components/',
+ },
+ {
+ component: 'UserManualPopup',
+ zIndex: 'z-[9999]',
+ trigger: '도움말 버튼',
+ source: 'common/components/ui/',
+ },
+];
+
+export const FloatModalContent = ({ theme }: FloatModalContentProps) => {
+ const t = theme;
+ const isDark = t.mode === 'dark';
+
+ const [isModalOpen, setIsModalOpen] = useState(false);
+ const [activeSize, setActiveSize] = useState('md');
+ const [isConfirmOpen, setIsConfirmOpen] = useState(false);
+
+ const overlayBg = isDark ? 'rgba(0,0,0,0.65)' : 'rgba(0,0,0,0.45)';
+ const modalBg = isDark ? '#1b1f2c' : '#ffffff';
+ const modalBorder = isDark ? 'rgba(66,71,84,0.30)' : '#e2e8f0';
+ const modalWidth = activeSize === 'full' ? '95vw' : SIZE_CONFIG[activeSize].width;
+ const modalHeight = activeSize === 'full' ? '92vh' : 'auto';
+
+ return (
+
+ {/* ── 개요 ── */}
+
+
+ Modal
+
+
+
+ fixed inset-0
+ {' '}
+ 백드롭 위에 중앙 정렬된 다이얼로그. 사용자 확인·입력이 필요한 중요 작업에 사용한다.
+ 크기(size)와 용도(variant)로 변형하며, Confirm 은 Modal의 서브컴포넌트다.
+
+
+
+ {/* ── Live Preview ── */}
+
+
+
+ Live Preview
+
+
+ interactive
+
+
+
+ {/* 컨트롤 */}
+
+ {/* 사이즈 선택 */}
+
+
+ Size Variant
+
+
+ {(Object.keys(SIZE_CONFIG) as ModalSize[]).map((size) => (
+ setActiveSize(size)}
+ className="px-3 py-1.5 rounded border border-solid font-mono text-caption transition-colors"
+ style={{
+ backgroundColor:
+ activeSize === size
+ ? isDark
+ ? 'rgba(76,215,246,0.15)'
+ : 'rgba(6,182,212,0.10)'
+ : 'transparent',
+ borderColor: activeSize === size ? t.textAccent : t.cardBorder,
+ color: activeSize === size ? t.textAccent : t.textMuted,
+ }}
+ >
+ {SIZE_CONFIG[size].label}
+ {SIZE_CONFIG[size].width}
+
+ ))}
+
+
+ {SIZE_CONFIG[activeSize].desc}
+
+
+
+ {/* 버튼 그룹 */}
+
+ setIsModalOpen(true)}
+ className="px-4 py-2 rounded border border-solid font-korean text-sm font-medium transition-opacity hover:opacity-80"
+ style={{
+ backgroundColor: isDark ? 'rgba(76,215,246,0.15)' : 'rgba(6,182,212,0.12)',
+ borderColor: t.textAccent,
+ color: t.textAccent,
+ }}
+ >
+ 모달 열기
+
+ setIsConfirmOpen(true)}
+ className="px-4 py-2 rounded border border-solid font-korean text-sm font-medium transition-opacity hover:opacity-80"
+ style={{
+ backgroundColor: isDark ? 'rgba(239,68,68,0.10)' : 'rgba(239,68,68,0.06)',
+ borderColor: 'rgba(239,68,68,0.40)',
+ color: '#ef4444',
+ }}
+ >
+ Confirm (삭제 확인)
+
+
+
+
+
+ {/* ── Confirm 서브컴포넌트 ── */}
+
+
+ Confirm — Modal 서브컴포넌트
+
+
+
+ Confirm은 독립 컴포넌트가 아닌 Modal의 variant 다. 타이틀 + 단문 메시지
+ + 취소/확인 2버튼 구성. 파괴적 작업(삭제, 초기화) 전 사용자 의도를 확인한다.
+
+
+
+ ⚠️ window.confirm 대체 — admin, board 4건에서 OS 레벨 confirm 사용 중 → 커스텀
+ ConfirmDialog로 전환 필요
+
+
+
+ {[
+ { label: 'variant', value: '"confirm"', desc: 'Modal 컴포넌트의 prop으로 전달' },
+ { label: 'title', value: '"항목을 삭제하시겠습니까?"', desc: '액션을 명확히 서술' },
+ {
+ label: 'message',
+ value: '"삭제된 데이터는 복구할 수 없습니다."',
+ desc: '부가 설명 (선택)',
+ },
+ { label: 'onConfirm', value: '() => handleDelete()', desc: '확인 버튼 콜백' },
+ ].map((row) => (
+
+
+ {row.label}
+
+
+ {row.value}
+
+
+ {row.desc}
+
+
+ ))}
+
+
+
+
+ {/* ── Anatomy ── */}
+
+
+ Anatomy
+
+
+ {/* 구조 다이어그램 */}
+
+
+ Structure
+
+
+
+
+
+ 다이얼로그 타이틀
+
+
+
+ ✕
+
+
+
+
+ {[75, 100, 60].map((w, i) => (
+
+ ))}
+
+
+
+
+ 취소
+
+
+
+
+ 확인
+
+
+
+
+
+
+
+ {/* CSS 클래스 레퍼런스 */}
+
+
+ CSS Classes
+
+
+ {[
+ {
+ cls: '.wing-overlay',
+ styles: 'fixed inset-0, z-index: 10000',
+ desc: '백드롭 오버레이',
+ },
+ {
+ cls: '.wing-modal',
+ styles: 'rounded-xl, bg-surface, border + shadow',
+ desc: '다이얼로그 컨테이너',
+ },
+ {
+ cls: '.wing-modal-header',
+ styles: 'flex justify-between, px-5, py-[14px], border-b',
+ desc: '헤더 (타이틀 + 닫기)',
+ },
+ ].map((item) => (
+
+
+
+ {item.cls}
+
+
+ {item.desc}
+
+
+
+ {item.styles}
+
+
+ ))}
+
+
+
+
+
+ {/* ── Z-Index 규칙 ── */}
+
+
+ Z-Index 규칙
+
+
+ {[
+ {
+ range: 'z-[9999]',
+ status: '표준',
+ desc: '일반 Modal — 표준값, 신규 Modal은 이 값 사용',
+ color: '#22c55e',
+ },
+ {
+ range: 'z-[10000]',
+ status: '허용',
+ desc: '모달 위 모달 (MediaModal, IncidentsView) — 필요 시만',
+ color: '#eab308',
+ },
+ {
+ range: 'z-50',
+ status: '비표준 ⚠️',
+ desc: 'SimulationErrorModal, Admin 모달, TemplateFormEditor — z-[9999]로 통일 필요',
+ color: '#ef4444',
+ },
+ ].map((row) => (
+
+
+ {row.range}
+
+
+ {row.status}
+
+
+ {row.desc}
+
+
+ ))}
+
+
+
+ {/* ── 인벤토리 ── */}
+
+
+ 현재 사용 사례
+
+
+
+ {['Component', 'Z-Index', 'Trigger', 'Source'].map((col) => (
+
+
+ {col}
+
+
+ ))}
+
+ {MODAL_INVENTORY.map((item, idx) => (
+
+
+
+ {item.component}
+
+
+
+
+ {item.zIndex}
+
+
+
+
+ {item.trigger}
+
+
+
+
+ {item.source}
+
+
+
+ ))}
+
+
+
+ {/* ── 실제 Modal 렌더링 ── */}
+ {isModalOpen && (
+
{
+ if (e.target === e.currentTarget) setIsModalOpen(false);
+ }}
+ >
+
+
+
+ Modal Preview — {SIZE_CONFIG[activeSize].label} ({SIZE_CONFIG[activeSize].width})
+
+ setIsModalOpen(false)}
+ className="w-7 h-7 rounded flex items-center justify-center hover:opacity-70 transition-opacity"
+ style={{ backgroundColor: isDark ? 'rgba(66,71,84,0.25)' : '#f1f5f9' }}
+ >
+
+ ✕
+
+
+
+
+
+ 이 모달은{' '}
+
+ fixed inset-0, z-[9999]
+ {' '}
+ 백드롭 위에 렌더링됩니다. 백드롭 클릭 또는 닫기 버튼으로 닫을 수 있습니다.
+
+
+ {['파라미터 입력 필드', '선택 항목', '추가 설정값'].map((label) => (
+
+
+ {label}
+
+
+ ))}
+
+
+
+ setIsModalOpen(false)}
+ className="px-4 py-2 rounded border border-solid font-korean text-sm transition-opacity hover:opacity-70"
+ style={{ borderColor: t.cardBorder, color: t.textMuted }}
+ >
+ 취소
+
+ setIsModalOpen(false)}
+ className="px-4 py-2 rounded font-korean text-sm font-medium transition-opacity hover:opacity-80"
+ style={{
+ backgroundColor: isDark ? 'rgba(76,215,246,0.18)' : 'rgba(6,182,212,0.14)',
+ color: t.textAccent,
+ }}
+ >
+ 확인
+
+
+
+
+ )}
+
+ {/* ── 실제 Confirm 렌더링 ── */}
+ {isConfirmOpen && (
+
+
+
+
+ ⚠
+
+ 항목을 삭제하시겠습니까?
+
+
+
+
+
+ 삭제된 데이터는 복구할 수 없습니다. 계속 진행하시겠습니까?
+
+
+
+ setIsConfirmOpen(false)}
+ className="px-4 py-2 rounded border border-solid font-korean text-sm transition-opacity hover:opacity-70"
+ style={{ borderColor: t.cardBorder, color: t.textMuted }}
+ >
+ 취소
+
+ setIsConfirmOpen(false)}
+ className="px-4 py-2 rounded font-korean text-sm font-medium transition-opacity hover:opacity-80"
+ style={{
+ backgroundColor: isDark ? 'rgba(239,68,68,0.18)' : 'rgba(239,68,68,0.12)',
+ color: '#ef4444',
+ }}
+ >
+ 삭제
+
+
+
+
+ )}
+
+ {/* ── 개요 ── */}
+
+
+ Overlay
+
+
+ 지도 컨테이너 위에
+
+ position: absolute
+
+ 로 레이어되는 UI. 백드롭 없이 지도 위에 기능 UI를 표시한다. Modal과 달리 화면 상호작용을
+ 차단하지 않으며, 지도 컨테이너의 크기 변화에 반응한다.
+
+
+
+ {/* ── Overlay vs Modal 비교 ── */}
+
+
+ Overlay vs Modal
+
+
+
+ {['속성', 'Overlay', 'Modal'].map((col) => (
+
+
+ {col}
+
+
+ ))}
+
+ {[
+ { attr: 'position', overlay: 'absolute (지도 기준)', modal: 'fixed (뷰포트 기준)' },
+ { attr: '백드롭', overlay: '없음', modal: 'rgba(0,0,0,0.65) + blur' },
+ { attr: '클릭 차단', overlay: 'pointer-events: none (일반)', modal: '전체 화면 차단' },
+ { attr: 'z-index', overlay: 'z-40 (지도 UI 위)', modal: 'z-[9999] (최상위)' },
+ { attr: '크기 기준', overlay: '지도 컨테이너 = 100%', modal: '고정 너비 (380~720px)' },
+ {
+ attr: '닫기 방식',
+ overlay: '기능 비활성화 시 사라짐',
+ modal: '닫기 버튼 / 백드롭 클릭',
+ },
+ ].map((row, idx) => (
+
+
+
+ {row.attr}
+
+
+
+
+ {row.overlay}
+
+
+
+
+ {row.modal}
+
+
+
+ ))}
+
+
+
+ {/* ── 지도 목업 다이어그램 ── */}
+
+
+ Overlay 배치 다이어그램
+
+
+
+ 지도 컨테이너 기준 절대 위치
+
+
+ {/* 지도 목업 */}
+
+ {/* 격자 배경 (지도 모사) */}
+
+
+ {/* 지도 레이블 */}
+
+
+ MapView (position: relative)
+
+
+
+ {/* OilDetectionOverlay — 전체 영역 */}
+
+
+
+ OilDetectionOverlay — inset-0, z-[15], pointer-events:none
+
+
+
+
+ {/* MeasureOverlay 마커 */}
+
+
+
+
+ 지우기
+
+
+
+
+ MeasureOverlay — Marker 위치
+
+
+
+
+ {/* BacktrackReplayBar — 하단 중앙 */}
+
+
+ ◀◀
+
+
+ ▶
+
+
+
+ ▶▶
+
+
+
+
+ BacktrackReplayBar — bottom-3 center, z-40
+
+
+
+
+
+
+ {/* ── Map Popup 서브패턴 ── */}
+
+
+ Map Popup — 위치 앵커드 패턴
+
+
+
+ ScatPopup 은 지도 마커에 앵커된 컨텍스트 팝업이다. Modal(fixed 뷰포트
+ 중앙)과 달리 마커 위치에서 동적으로 좌표를 계산하며, 지도 패닝·줌 시 위치가 함께
+ 업데이트된다.
+
+
+ {[
+ {
+ label: '위치 계산',
+ value: 'map.project(lngLat)',
+ desc: '지도 좌표 → 픽셀 좌표 변환',
+ },
+ { label: '위치 업데이트', value: 'map.on("move")', desc: '패닝/줌 시 재계산' },
+ { label: 'z-index', value: 'z-[9999]', desc: '다른 오버레이 위' },
+ ].map((item) => (
+
+
+ {item.label}
+
+
+ {item.value}
+
+
+ {item.desc}
+
+
+ ))}
+
+
+
+ 주의: ScatPopup은 MapLibre GL JS의 Popup/Marker 컴포넌트가 아닌 React DOM으로 구현됨.
+ 지도 컨테이너 내부에 position: absolute로 렌더링된다.
+
+
+
+
+ Source:
+
+
+ tabs/scat/components/ScatPopup.tsx
+
+
+
+
+
+ {/* ── 사용 사례 목록 ── */}
+
+
+ 현재 사용 사례
+
+
+
+ {['Component', 'Position', 'Z-Index', 'Events', 'Description'].map((col) => (
+
+
+ {col}
+
+
+ ))}
+
+ {OVERLAY_CASES.map((item, idx) => (
+
+
+
+ {item.component}
+
+
+
+
+ {item.position}
+
+
+
+
+ {item.zIndex}
+
+
+
+
+ {item.pointerEvents}
+
+
+
+
+ {item.desc}
+
+
+
+ ))}
+
+
+
=
+ {
+ success: { color: '#22c55e', bg: 'rgba(34,197,94,0.12)', icon: '✓', label: 'Success' },
+ error: { color: '#ef4444', bg: 'rgba(239,68,68,0.12)', icon: '✕', label: 'Error' },
+ info: { color: '#06b6d4', bg: 'rgba(6,182,212,0.12)', icon: 'ℹ', label: 'Info' },
+ warning: { color: '#eab308', bg: 'rgba(234,179,8,0.12)', icon: '⚠', label: 'Warning' },
+ };
+
+const DEMO_MESSAGES: Record = {
+ success: '저장이 완료되었습니다.',
+ error: '요청 처리 중 오류가 발생했습니다.',
+ info: '시뮬레이션이 시작되었습니다.',
+ warning: '미저장 변경사항이 있습니다.',
+};
+
+const TOAST_DURATION = 3000;
+
+let toastIdCounter = 0;
+
+export const FloatToastContent = ({ theme }: FloatToastContentProps) => {
+ const t = theme;
+ const isDark = t.mode === 'dark';
+ const [toasts, setToasts] = useState([]);
+
+ const addToast = (type: ToastType) => {
+ const id = ++toastIdCounter;
+ setToasts((prev) => [...prev, { id, type, message: DEMO_MESSAGES[type], progress: 100 }]);
+ };
+
+ const removeToast = (id: number) => {
+ setToasts((prev) => prev.filter((t) => t.id !== id));
+ };
+
+ useEffect(() => {
+ if (toasts.length === 0) return;
+
+ const interval = setInterval(() => {
+ setToasts((prev) =>
+ prev
+ .map((toast) => ({ ...toast, progress: toast.progress - 100 / (TOAST_DURATION / 100) }))
+ .filter((toast) => toast.progress > 0),
+ );
+ }, 100);
+
+ return () => clearInterval(interval);
+ }, [toasts.length]);
+
+ const toastBg = isDark ? '#1b1f2c' : '#ffffff';
+ const toastBorder = isDark ? 'rgba(66,71,84,0.30)' : '#e2e8f0';
+
+ return (
+
+ {/* ── 개요 ── */}
+
+
+
+ Toast
+
+
+ 미구현 — 설계 사양
+
+
+
+ 화면을 차단하지 않는 비파괴적 알림.
+
+ fixed bottom-right
+
+ 에 위치하며 일정 시간 후 자동으로 사라진다. 현재 프로젝트에서는{' '}
+
+ window.alert
+
+ 또는 console.log로 대체하고 있으며 커스텀 구현이 필요하다.
+
+
+
+ {/* ── Live Preview ── */}
+
+
+
+ Live Preview
+
+
+ interactive
+
+
+
+
+ 버튼 클릭 시 화면 우하단에 Toast가 표시됩니다. 3초 후 자동으로 사라집니다.
+
+
+ {(Object.keys(TOAST_CONFIG) as ToastType[]).map((type) => {
+ const cfg = TOAST_CONFIG[type];
+ return (
+ addToast(type)}
+ className="px-4 py-2 rounded border border-solid font-mono text-caption font-medium transition-opacity hover:opacity-80"
+ style={{
+ backgroundColor: cfg.bg,
+ borderColor: `${cfg.color}40`,
+ color: cfg.color,
+ }}
+ >
+ {cfg.icon} {cfg.label}
+
+ );
+ })}
+
+ {toasts.length > 0 && (
+
+ 활성 Toast: {toasts.length}개 — 우측 하단을 확인하세요
+
+ )}
+
+
+
+ {/* ── Anatomy ── */}
+
+
+ Anatomy
+
+
+ {/* 구조 목업 */}
+
+
+ Structure
+
+
+ {/* 성공 Toast 목업 */}
+
+ {(['success', 'info', 'error'] as ToastType[]).map((type, i) => {
+ const cfg = TOAST_CONFIG[type];
+ return (
+
+
+ {cfg.icon}
+
+
+ {DEMO_MESSAGES[type].slice(0, 14)}…
+
+
+ );
+ })}
+
+
+
+
+ {/* 위치 규칙 */}
+
+
+ Position Rules
+
+
+ {[
+ { label: 'position', value: 'fixed', desc: '뷰포트 기준 고정' },
+ { label: 'bottom', value: '24px', desc: '화면 하단에서 24px' },
+ { label: 'right', value: '24px', desc: '화면 우측에서 24px' },
+ { label: 'z-index', value: 'z-60', desc: '콘텐츠 위, Modal(9999) 아래' },
+ { label: 'width', value: '320px (고정)', desc: '일정한 너비 유지' },
+ { label: 'gap', value: '8px (스택)', desc: '복수 Toast 간격' },
+ ].map((item) => (
+
+
+ {item.label}
+
+
+ {item.value}
+
+
+ {item.desc}
+
+
+ ))}
+
+
+
+
+
+ {/* ── 타입별 색상 ── */}
+
+
+ 타입별 색상
+
+
+ {(Object.entries(TOAST_CONFIG) as [ToastType, (typeof TOAST_CONFIG)[ToastType]][]).map(
+ ([type, cfg]) => (
+
+
+
+ {cfg.icon}
+
+
+ {cfg.label}
+
+
+
+ {cfg.color}
+
+
+ {type === 'success' && '저장 완료, 복사 완료, 전송 성공'}
+ {type === 'error' && 'API 오류, 저장 실패, 권한 없음'}
+ {type === 'info' && '작업 시작, 업데이트 알림'}
+ {type === 'warning' && '미저장 변경, 만료 임박'}
+
+
+ ),
+ )}
+
+
+
+ {/* ── 구현 패턴 제안 ── */}
+
+
+ 구현 패턴 제안 — useToast Hook
+
+
+
+ Toast는 앱 어디서든 호출해야 하므로 Zustand store + useToast hook {' '}
+ 패턴을 권장한다. ToastContainer는 App.tsx 최상위에 한 번만 렌더링한다.
+
+
+ {[
+ {
+ title: 'toastStore.ts',
+ code: 'const useToastStore = create
()\naddToast(type, message, duration?)\nremoveToast(id)',
+ desc: 'Zustand store — Toast 큐 관리',
+ },
+ {
+ title: 'useToast.ts',
+ code: 'const { success, error, info, warning } = useToast()\nsuccess("저장 완료") // duration 기본값 3000ms',
+ desc: '컴포넌트에서 호출하는 hook',
+ },
+ {
+ title: 'ToastContainer.tsx',
+ code: '\n {toasts.map(t =>
',
+ desc: 'App.tsx 최상위에 배치',
+ },
+ ].map((item) => (
+
+
+
+ {item.title}
+
+
+ {item.desc}
+
+
+
+ {item.code}
+
+
+
+
+
+ {/* ── 실제 Toast 렌더링 (fixed 위치) ── */}
+ {toasts.length > 0 && (
+
+ {toasts.map((toast) => {
+ const cfg = TOAST_CONFIG[toast.type];
+ return (
+
+
+
+ {cfg.icon}
+
+
+ {toast.message}
+
+ removeToast(toast.id)}
+ className="w-5 h-5 rounded flex items-center justify-center shrink-0 hover:opacity-70 transition-opacity"
+ style={{ color: t.textMuted }}
+ >
+ ✕
+
+
+ {/* Progress bar */}
+
+
+ );
+ })}
+
+ )}
+
🚧
{label}
-
해당 기능은 준비 중입니다.
+
해당 기능은 준비 중입니다.
);
diff --git a/frontend/src/tabs/admin/components/AdminSidebar.tsx b/frontend/src/tabs/admin/components/AdminSidebar.tsx
index f0ed856..8c69a62 100644
--- a/frontend/src/tabs/admin/components/AdminSidebar.tsx
+++ b/frontend/src/tabs/admin/components/AdminSidebar.tsx
@@ -37,7 +37,7 @@ const AdminSidebar = ({ activeMenu, onSelect }: AdminSidebarProps) => {
onSelect(item.id)}
- className="w-full text-left px-3 py-1.5 text-[11px] font-korean transition-colors cursor-pointer rounded-[3px]"
+ className="w-full text-left px-3 py-1.5 text-label-2 font-korean transition-colors cursor-pointer rounded-[3px]"
style={{
paddingLeft: `${12 + depth * 14}px`,
background: isActive ? 'rgba(6,182,212,.12)' : 'transparent',
@@ -65,7 +65,7 @@ const AdminSidebar = ({ activeMenu, onSelect }: AdminSidebarProps) => {
if (firstLeaf) onSelect(firstLeaf.id);
}
}}
- className="w-full flex items-center justify-between px-3 py-1.5 text-[11px] font-korean transition-colors cursor-pointer rounded-[3px]"
+ className="w-full flex items-center justify-between px-3 py-1.5 text-label-2 font-korean transition-colors cursor-pointer rounded-[3px]"
style={{
paddingLeft: `${12 + depth * 14}px`,
color: hasActiveChild ? 'var(--color-accent)' : 'var(--fg-sub)',
@@ -74,7 +74,7 @@ const AdminSidebar = ({ activeMenu, onSelect }: AdminSidebarProps) => {
>
{item.label}
▶
@@ -123,7 +123,7 @@ const AdminSidebar = ({ activeMenu, onSelect }: AdminSidebarProps) => {
{/* 섹션 헤더 */}
toggle(section.id)}
- className="w-full flex items-center gap-2 px-3 py-2 rounded-md text-[11px] font-bold font-korean transition-colors cursor-pointer"
+ className="w-full flex items-center gap-2 px-3 py-2 rounded-md text-label-2 font-bold font-korean transition-colors cursor-pointer"
style={{
background: hasActiveChild ? 'rgba(6,182,212,.08)' : 'transparent',
color: hasActiveChild ? 'var(--color-accent)' : 'var(--fg-default)',
@@ -132,7 +132,7 @@ const AdminSidebar = ({ activeMenu, onSelect }: AdminSidebarProps) => {
{section.icon}
{section.label}
▶
diff --git a/frontend/src/tabs/admin/components/AssetUploadPanel.tsx b/frontend/src/tabs/admin/components/AssetUploadPanel.tsx
index 7d0cfa2..6de8a45 100644
--- a/frontend/src/tabs/admin/components/AssetUploadPanel.tsx
+++ b/frontend/src/tabs/admin/components/AssetUploadPanel.tsx
@@ -130,7 +130,7 @@ function AssetUploadPanel() {
className={`rounded-lg border-2 border-dashed py-8 text-center cursor-pointer transition-colors ${
dragging
? 'border-color-accent bg-[rgba(6,182,212,0.05)]'
- : 'border-stroke hover:border-color-accent/50 bg-bg-elevated'
+ : 'border-stroke hover:border-[rgba(6,182,212,0.5)] bg-bg-elevated'
}`}
>
📁
@@ -143,7 +143,7 @@ function AssetUploadPanel() {
파일을 드래그하거나 클릭하여 업로드
-
+
엑셀(.xlsx), CSV 파일 지원 · 최대 10MB
-
+
자산 분류
-
+
대상 관할
-
+
업로드 방식
@@ -271,7 +271,7 @@ function AssetUploadPanel() {
{p.role}
-
@@ -287,7 +287,7 @@ function AssetUploadPanel() {
{uploadHistory.length === 0 ? (
-
+
이력이 없습니다.
) : (
@@ -298,12 +298,12 @@ function AssetUploadPanel() {
>
{h.fileNm}
-
+
{formatDate(h.regDtm)} · {h.uploaderNm} · {h.uploadCnt.toLocaleString()}건
완료
diff --git a/frontend/src/tabs/admin/components/BoardMgmtPanel.tsx b/frontend/src/tabs/admin/components/BoardMgmtPanel.tsx
index 1c0a334..a5ce0c7 100644
--- a/frontend/src/tabs/admin/components/BoardMgmtPanel.tsx
+++ b/frontend/src/tabs/admin/components/BoardMgmtPanel.tsx
@@ -273,7 +273,7 @@ function PostRow({ post, checked, onToggle }: PostRowProps) {
{post.sn}
- {post.pinnedYn === 'Y' && [고정] }
+ {post.pinnedYn === 'Y' && [고정] }
{post.title}
{post.authorName}
diff --git a/frontend/src/tabs/admin/components/CleanupEquipPanel.tsx b/frontend/src/tabs/admin/components/CleanupEquipPanel.tsx
index 1f942a7..ba1793a 100644
--- a/frontend/src/tabs/admin/components/CleanupEquipPanel.tsx
+++ b/frontend/src/tabs/admin/components/CleanupEquipPanel.tsx
@@ -167,47 +167,47 @@ function CleanupEquipPanel() {
-
+
번호
-
+
유형
-
+
관할청
-
+
기관명
-
+
주소
방제선
유회수기
이송펌프
방제차량
살포장치
-
+
총자산
@@ -228,51 +228,51 @@ function CleanupEquipPanel() {
key={org.id}
className="border-b border-stroke hover:bg-[rgba(255,255,255,0.02)] transition-colors"
>
-
+
{(safePage - 1) * PAGE_SIZE + idx + 1}
{org.type}
-
+
{regionShort(org.jurisdiction)}
-
+
{org.name}
-
+
{org.address}
{org.vessel > 0 ? org.vessel : — }
{org.skimmer > 0 ? org.skimmer : — }
{org.pump > 0 ? org.pump : — }
{org.vehicle > 0 ? org.vehicle : — }
{org.sprayer > 0 ? org.sprayer : — }
-
+
{org.totalAssets.toLocaleString()}
@@ -286,7 +286,7 @@ function CleanupEquipPanel() {
{/* 합계 */}
{!loading && filtered.length > 0 && (
-
+
합계 ({filtered.length}개 기관)
{[
@@ -301,15 +301,15 @@ function CleanupEquipPanel() {
return (
{t.label}
{t.value.toLocaleString()}
{t.unit}
@@ -323,7 +323,7 @@ function CleanupEquipPanel() {
{/* 페이지네이션 */}
{!loading && filtered.length > 0 && (
-
+
{(safePage - 1) * PAGE_SIZE + 1}–{Math.min(safePage * PAGE_SIZE, filtered.length)} /
전체 {filtered.length}개
@@ -331,7 +331,7 @@ function CleanupEquipPanel() {
setCurrentPage((p) => Math.max(1, p - 1))}
disabled={safePage === 1}
- className="px-2.5 py-1 text-[11px] border border-stroke rounded text-fg-sub hover:border-color-accent hover:text-color-accent disabled:opacity-40 transition-colors"
+ className="px-2.5 py-1 text-label-2 border border-stroke rounded text-fg-sub hover:border-color-accent hover:text-color-accent disabled:opacity-40 transition-colors"
>
<
@@ -339,7 +339,7 @@ function CleanupEquipPanel() {
setCurrentPage(p)}
- className="px-2.5 py-1 text-[11px] border rounded transition-colors"
+ className="px-2.5 py-1 text-label-2 border rounded transition-colors"
style={
p === safePage
? {
@@ -356,7 +356,7 @@ function CleanupEquipPanel() {
setCurrentPage((p) => Math.min(totalPages, p + 1))}
disabled={safePage === totalPages}
- className="px-2.5 py-1 text-[11px] border border-stroke rounded text-fg-sub hover:border-color-accent hover:text-color-accent disabled:opacity-40 transition-colors"
+ className="px-2.5 py-1 text-label-2 border border-stroke rounded text-fg-sub hover:border-color-accent hover:text-color-accent disabled:opacity-40 transition-colors"
>
>
diff --git a/frontend/src/tabs/admin/components/CollectHrPanel.tsx b/frontend/src/tabs/admin/components/CollectHrPanel.tsx
index b23c93c..b943d1d 100644
--- a/frontend/src/tabs/admin/components/CollectHrPanel.tsx
+++ b/frontend/src/tabs/admin/components/CollectHrPanel.tsx
@@ -256,7 +256,7 @@ function HrTable({ rows, loading }: { rows: HrCollectItem[]; loading: boolean })
{row.jobName}
{row.clctDate ?? '-'}
{status.label}
diff --git a/frontend/src/tabs/admin/components/DispersingZonePanel.tsx b/frontend/src/tabs/admin/components/DispersingZonePanel.tsx
index ccc4882..4f07252 100644
--- a/frontend/src/tabs/admin/components/DispersingZonePanel.tsx
+++ b/frontend/src/tabs/admin/components/DispersingZonePanel.tsx
@@ -149,7 +149,7 @@ const DispersingZonePanel = () => {
/>
{/* 펼침 화살표 */}
- {isExpanded ? '▲' : '▼'}
+ {isExpanded ? '▲' : '▼'}
{/* 펼침 영역 */}
@@ -159,10 +159,10 @@ const DispersingZonePanel = () => {
{info.rows.map((row) => (
-
+
{row.key}
-
+
{row.value}
@@ -196,11 +196,11 @@ const DispersingZonePanel = () => {
사용고려해역
+ 사용고려해역
사용제한해역
+ 사용제한해역
@@ -210,7 +210,7 @@ const DispersingZonePanel = () => {
{/* 헤더 */}
유처리제 제한구역
-
해양환경관리법 기준
+
해양환경관리법 기준
{/* 구역 카드 목록 */}
diff --git a/frontend/src/tabs/admin/components/LayerPanel.tsx b/frontend/src/tabs/admin/components/LayerPanel.tsx
index a01ef15..cb6c322 100644
--- a/frontend/src/tabs/admin/components/LayerPanel.tsx
+++ b/frontend/src/tabs/admin/components/LayerPanel.tsx
@@ -187,7 +187,7 @@ const LayerFormModal = ({ mode, initialData, onClose, onSaved }: LayerFormModalP
const inputCls =
'w-full px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none';
- const labelCls = 'block text-[11px] font-semibold text-fg-sub font-korean mb-1.5';
+ const labelCls = 'block text-label-2 font-semibold text-fg-sub font-korean mb-1.5';
return (
@@ -321,7 +321,7 @@ const LayerFormModal = ({ mode, initialData, onClose, onSaved }: LayerFormModalP
{/* 에러 */}
{formError && (
-
{formError}
+
{formError}
)}
{/* 버튼 */}
@@ -502,34 +502,34 @@ const LayerPanel = () => {
-
+
번호
-
+
레이어코드
-
+
레이어명
-
+
레이어전체명
-
+
레벨
-
+
WMS레이어명
-
+
정렬
-
+
등록일시
-
+
사용여부
-
+
액션
@@ -555,7 +555,7 @@ const LayerPanel = () => {
{(page - 1) * PAGE_SIZE + idx + 1}
{/* 레이어코드 */}
- {item.layerCd}
+ {item.layerCd}
{/* 레이어명 */}
{item.layerNm}
{/* 레이어전체명 */}
@@ -566,12 +566,12 @@ const LayerPanel = () => {
{/* 레벨 */}
-
+
{item.layerLevel}
{/* WMS레이어명 */}
-
+
{item.wmsLayerNm ?? - }
{/* 정렬순서 */}
@@ -579,7 +579,7 @@ const LayerPanel = () => {
{item.sortOrd}
{/* 등록일시 */}
-
+
{item.regDtm ?? '-'}
{/* 사용여부 토글 */}
@@ -598,7 +598,7 @@ const LayerPanel = () => {
item.useYn === 'Y' && item.parentUseYn !== 'N'
? 'bg-color-accent'
: item.useYn === 'Y' && item.parentUseYn === 'N'
- ? 'bg-color-accent/40'
+ ? 'bg-[rgba(6,182,212,0.4)]'
: 'bg-[rgba(255,255,255,0.08)] border border-stroke'
}`}
>
@@ -637,27 +637,27 @@ const LayerPanel = () => {
{/* 페이지네이션 */}
{!loading && totalPages > 1 && (
-
+
{(page - 1) * PAGE_SIZE + 1}–{Math.min(page * PAGE_SIZE, total)} / {total}개
setPage((p) => Math.max(1, p - 1))}
disabled={page === 1}
- className="px-2.5 py-1 text-[11px] border border-stroke text-fg-disabled rounded hover:bg-[rgba(255,255,255,0.04)] disabled:opacity-40 transition-all font-korean"
+ className="px-2.5 py-1 text-label-2 border border-stroke text-fg-disabled rounded hover:bg-[rgba(255,255,255,0.04)] disabled:opacity-40 transition-all font-korean"
>
이전
{buildPageButtons().map((btn, i) =>
btn === 'ellipsis' ? (
-
+
…
) : (
setPage(btn)}
- className={`px-2.5 py-1 text-[11px] rounded transition-all ${
+ className={`px-2.5 py-1 text-label-2 rounded transition-all ${
page === btn
? 'bg-color-accent text-bg-0 font-semibold shadow-[0_0_8px_rgba(6,182,212,0.25)]'
: 'border border-stroke text-fg-disabled hover:bg-[rgba(255,255,255,0.04)]'
@@ -670,7 +670,7 @@ const LayerPanel = () => {
setPage((p) => Math.min(totalPages, p + 1))}
disabled={page === totalPages}
- className="px-2.5 py-1 text-[11px] border border-stroke text-fg-disabled rounded hover:bg-[rgba(255,255,255,0.04)] disabled:opacity-40 transition-all font-korean"
+ className="px-2.5 py-1 text-label-2 border border-stroke text-fg-disabled rounded hover:bg-[rgba(255,255,255,0.04)] disabled:opacity-40 transition-all font-korean"
>
다음
diff --git a/frontend/src/tabs/admin/components/MapBasePanel.tsx b/frontend/src/tabs/admin/components/MapBasePanel.tsx
index 2adb14f..50efd74 100644
--- a/frontend/src/tabs/admin/components/MapBasePanel.tsx
+++ b/frontend/src/tabs/admin/components/MapBasePanel.tsx
@@ -100,7 +100,7 @@ function MapBaseModal({