From 5de10662a7b16d9c2007fb08050ed480866f7eae Mon Sep 17 00:00:00 2001 From: leedano Date: Thu, 9 Apr 2026 18:13:10 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat(design):=20HNS=C2=B7=EC=82=AC=EA=B1=B4?= =?UTF-8?q?=EC=82=AC=EA=B3=A0=C2=B7=ED=99=95=EC=82=B0=EC=98=88=EC=B8=A1?= =?UTF-8?q?=C2=B7SCAT=C2=B7=EA=B8=B0=EC=83=81=20=ED=83=AD=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=8B=9C=EC=8A=A4=ED=85=9C=20=ED=86=A0?= =?UTF-8?q?=ED=81=B0=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/RELEASE-NOTES.md | 2 + .../src/common/components/map/MapView.tsx | 6 +- frontend/src/common/styles/components.css | 16 + .../src/tabs/hns/components/HNSLeftPanel.tsx | 2 +- .../src/tabs/hns/components/HNSRightPanel.tsx | 6 +- frontend/src/tabs/hns/components/HNSView.tsx | 88 ++- .../components/DischargeZonePanel.tsx | 100 ++-- .../components/IncidentsLeftPanel.tsx | 32 +- .../components/IncidentsRightPanel.tsx | 130 ++-- .../incidents/components/IncidentsView.tsx | 553 +++++++++++------- .../tabs/prediction/components/LeftPanel.tsx | 2 +- .../prediction/components/OilSpillView.tsx | 278 +++++---- .../tabs/prediction/components/RightPanel.tsx | 6 +- .../src/tabs/scat/components/PreScatView.tsx | 92 ++- .../tabs/scat/components/ScatLeftPanel.tsx | 8 +- frontend/src/tabs/scat/components/ScatMap.tsx | 2 +- .../tabs/scat/components/ScatRightPanel.tsx | 4 +- .../weather/components/WeatherMapControls.tsx | 2 +- .../weather/components/WeatherMapOverlay.tsx | 39 +- .../weather/components/WeatherRightPanel.tsx | 154 ++--- .../tabs/weather/components/WeatherView.tsx | 46 +- 21 files changed, 917 insertions(+), 651 deletions(-) diff --git a/docs/RELEASE-NOTES.md b/docs/RELEASE-NOTES.md index 5bb6047..d88decc 100644 --- a/docs/RELEASE-NOTES.md +++ b/docs/RELEASE-NOTES.md @@ -4,6 +4,8 @@ ## [Unreleased] +## [2026-04-09] + ### 추가 - 디자인 시스템 Float 카탈로그 추가 (Modal / Dropdown / Overlay / Toast) - 디자인 시스템 폰트/색상 토큰을 전 탭 컴포넌트에 전면 적용 (admin, aerial, assets, board, hns, incidents, prediction, reports, rescue, scat, weather) diff --git a/frontend/src/common/components/map/MapView.tsx b/frontend/src/common/components/map/MapView.tsx index 9ab297a..578ed71 100755 --- a/frontend/src/common/components/map/MapView.tsx +++ b/frontend/src/common/components/map/MapView.tsx @@ -1458,19 +1458,19 @@ function MapControls({ center, zoom }: { center: [number, number]; zoom: number
diff --git a/frontend/src/common/styles/components.css b/frontend/src/common/styles/components.css index 0bd81c1..38faee2 100644 --- a/frontend/src/common/styles/components.css +++ b/frontend/src/common/styles/components.css @@ -30,6 +30,22 @@ background: transparent; } + /* ═══ Incidents 사고 팝업 ✕ 버튼 — 라이트 지도 기준 검은색 고정 ═══ */ + .incident-popup .maplibregl-popup-close-button { + color: #1a1d21; + background: transparent; + width: 16px; + height: 16px; + font-size: 16px; + line-height: 16px; + top: 6px; + right: 6px; + } + .incident-popup .maplibregl-popup-close-button:hover { + color: #000; + background: transparent; + } + /* ═══ Scrollbar ═══ */ .scrollbar-thin { scrollbar-width: thin; diff --git a/frontend/src/tabs/hns/components/HNSLeftPanel.tsx b/frontend/src/tabs/hns/components/HNSLeftPanel.tsx index 97d3094..82b7a9d 100755 --- a/frontend/src/tabs/hns/components/HNSLeftPanel.tsx +++ b/frontend/src/tabs/hns/components/HNSLeftPanel.tsx @@ -219,7 +219,7 @@ export function HNSLeftPanel({ }; return ( -
+
{/* Scrollable Content */}
-
+
+
📊
예측 실행 후 결과가 표시됩니다
@@ -58,7 +58,7 @@ export function HNSRightPanel({ : 'ALOHA'; return ( -
+
{/* Header */}
diff --git a/frontend/src/tabs/hns/components/HNSView.tsx b/frontend/src/tabs/hns/components/HNSView.tsx index bfe59fb..4a49115 100755 --- a/frontend/src/tabs/hns/components/HNSView.tsx +++ b/frontend/src/tabs/hns/components/HNSView.tsx @@ -262,6 +262,8 @@ function DispersionTimeSlider({ export function HNSView() { const { activeSubTab, setActiveSubTab } = useSubMenu('hns'); const { user } = useAuthStore(); + const [leftCollapsed, setLeftCollapsed] = useState(false); + const [rightCollapsed, setRightCollapsed] = useState(false); const [incidentCoord, setIncidentCoord] = useState<{ lon: number; lat: number } | null>(null); const [isSelectingLocation, setIsSelectingLocation] = useState(false); const [isRunningPrediction, setIsRunningPrediction] = useState(false); @@ -890,22 +892,66 @@ export function HNSView() {
{/* Left Panel - 분석 목록일 때는 숨김 */} {activeSubTab === 'analysis' && ( - setIsSelectingLocation(true)} - onRunPrediction={handleRunPrediction} - isRunningPrediction={isRunningPrediction} - onParamsChange={handleParamsChange} - onReset={handleReset} - loadedParams={loadedParams} - /> +
+ setIsSelectingLocation(true)} + onRunPrediction={handleRunPrediction} + isRunningPrediction={isRunningPrediction} + onParamsChange={handleParamsChange} + onReset={handleReset} + loadedParams={loadedParams} + /> +
)} {/* Center - Map/Content Area */}
+ {/* Left panel toggle button */} + {activeSubTab === 'analysis' && ( + + )} + + {/* Right panel toggle button */} + {activeSubTab === 'analysis' && ( + + )} + {activeSubTab === 'list' ? ( @@ -942,14 +988,16 @@ export function HNSView() { {/* Right Panel - 분석 목록일 때는 숨김 */} {activeSubTab === 'analysis' && ( - setRecalcModalOpen(true)} - onOpenReport={handleOpenReport} - onSave={handleSave} - /> +
+ setRecalcModalOpen(true)} + onOpenReport={handleOpenReport} + onSave={handleSave} + /> +
)} {/* HNS 재계산 모달 */} diff --git a/frontend/src/tabs/incidents/components/DischargeZonePanel.tsx b/frontend/src/tabs/incidents/components/DischargeZonePanel.tsx index d47f56a..6afccdd 100644 --- a/frontend/src/tabs/incidents/components/DischargeZonePanel.tsx +++ b/frontend/src/tabs/incidents/components/DischargeZonePanel.tsx @@ -1,4 +1,7 @@ import { useState } from 'react'; +import { DndContext } from '@dnd-kit/core'; +import { useDraggable } from '@dnd-kit/core'; +import type { DragEndEvent } from '@dnd-kit/core'; /** * 해양환경관리법 제22조 기반 선박 발생 오염물 배출 규정 @@ -100,33 +103,30 @@ const RULES: DischargeRule[] = [ ]; const ZONE_LABELS = ['~3해리', '3~12해리', '12~25해리', '25~50해리', '50해리+']; -const ZONE_COLORS = ['#ef4444', '#f97316', '#eab308', '#22c55e', '#64748b']; +const ZONE_COLORS = [ + 'var(--color-danger)', + 'var(--color-warning)', + 'var(--color-caution)', + 'var(--color-success)', + 'var(--fg-disabled)', +]; function StatusBadge({ status }: { status: Status }) { if (status === 'forbidden') return ( 배출불가 ); - if (status === 'allowed') - return ( - - 배출가능 - - ); return ( - - 조건부 + + {status === 'allowed' ? '배출가능' : '조건부'} ); } @@ -139,15 +139,36 @@ interface DischargeZonePanelProps { onClose: () => void; } -export function DischargeZonePanel({ +export function DischargeZonePanel(props: DischargeZonePanelProps) { + const [offset, setOffset] = useState({ x: 0, y: 0 }); + + function handleDragEnd(event: DragEndEvent) { + setOffset((prev) => ({ x: prev.x + event.delta.x, y: prev.y + event.delta.y })); + } + + return ( + + + + ); +} + +function DraggablePanel({ lat, lon, distanceNm, zoneIndex, onClose, -}: DischargeZonePanelProps) { + offset, +}: DischargeZonePanelProps & { offset: { x: number; y: number } }) { const zoneIdx = zoneIndex; const [expandedCat, setExpandedCat] = useState(null); + const { attributes, listeners, setNodeRef, transform } = useDraggable({ + id: 'discharge-panel', + }); + + const tx = offset.x + (transform?.x ?? 0); + const ty = offset.y + (transform?.y ?? 0); const categories = [...new Set(RULES.map((r) => r.category))]; @@ -161,22 +182,33 @@ export function DischargeZonePanel({ border: '1px solid var(--stroke-default)', boxShadow: '0 16px 48px rgba(0,0,0,0.5)', backdropFilter: 'blur(12px)', + transform: `translate(${tx}px, ${ty}px)`, }} > - {/* Header */} + {/* Header — drag handle */}
-
🚢 오염물 배출 규정
+
🚢 오염물 배출 규정
해양환경관리법 제22조
- + e.stopPropagation()} + className="text-title-3 cursor-pointer text-fg-sub hover:text-fg" + style={{ pointerEvents: 'all' }} + > ✕
@@ -194,10 +226,7 @@ export function DischargeZonePanel({
영해기선 거리 - + {distanceNm.toFixed(1)} NM
@@ -206,12 +235,10 @@ export function DischargeZonePanel({ {ZONE_LABELS.map((label, i) => (
r.category === cat); const isExpanded = expandedCat === cat; const allForbidden = catRules.every((r) => r.zones[zoneIdx] === 'forbidden'); - const allAllowed = catRules.every((r) => r.zones[zoneIdx] === 'allowed'); - const summaryColor = allForbidden ? '#ef4444' : allAllowed ? '#22c55e' : '#eab308'; + const summaryColor = allForbidden ? 'var(--color-danger)' : 'var(--fg-sub)'; return (
@@ -245,11 +271,11 @@ export function DischargeZonePanel({
- {cat} + {cat}
- - {allForbidden ? '전체 불가' : allAllowed ? '전체 가능' : '항목별 상이'} + + {allForbidden ? '전체 불가' : '허용'} {isExpanded ? '▾' : '▸'}
@@ -268,7 +294,7 @@ export function DischargeZonePanel({ borderRadius: 4, }} > - {rule.item} + {rule.item}
))} diff --git a/frontend/src/tabs/incidents/components/IncidentsLeftPanel.tsx b/frontend/src/tabs/incidents/components/IncidentsLeftPanel.tsx index ef73bcc..cfe263f 100755 --- a/frontend/src/tabs/incidents/components/IncidentsLeftPanel.tsx +++ b/frontend/src/tabs/incidents/components/IncidentsLeftPanel.tsx @@ -250,11 +250,11 @@ export function IncidentsLeftPanel({ /> {(inc.mediaCount ?? 0) > 0 && ( )}
diff --git a/frontend/src/tabs/incidents/components/IncidentsRightPanel.tsx b/frontend/src/tabs/incidents/components/IncidentsRightPanel.tsx index 9b10f34..c23570a 100755 --- a/frontend/src/tabs/incidents/components/IncidentsRightPanel.tsx +++ b/frontend/src/tabs/incidents/components/IncidentsRightPanel.tsx @@ -50,31 +50,8 @@ interface AnalysisItem { checked: boolean; } -/* ── 카테고리별 고유 색상 (목록 순서 인덱스 기반 — 중복 없음) ── */ -const CATEGORY_PALETTE: [number, number, number][] = [ - [239, 68, 68], // red - [249, 115, 22], // orange - [234, 179, 8], // yellow - [132, 204, 22], // lime - [20, 184, 166], // teal - [6, 182, 212], // cyan - [59, 130, 246], // blue - [99, 102, 241], // indigo - [168, 85, 247], // purple - [236, 72, 153], // pink - [244, 63, 94], // rose - [16, 185, 129], // emerald - [14, 165, 233], // sky - [139, 92, 246], // violet - [217, 119, 6], // amber - [45, 212, 191], // turquoise -]; - -function getCategoryColor(index: number): [number, number, number] { - return CATEGORY_PALETTE[index % CATEGORY_PALETTE.length]; -} - -/* ── 카테고리 → 이모지 매핑 (prediction LeftPanel의 CATEGORY_ICON_MAP 기반) ── */ +/* ── 카테고리 → 이모지 매핑 (prediction LeftPanel의 CATEGORY_ICON_MAP 기반, 미사용 보존) ── */ +// eslint-disable-next-line @typescript-eslint/no-unused-vars const CATEGORY_ICON: Record = { 어장정보: '🐟', 양식장: '🦪', @@ -140,8 +117,20 @@ function getActiveModels(p: PredictionAnalysis): string { /* ── HNS/구난 섹션 (미개발, 고정 구조만 유지) ────── */ const STATIC_SECTIONS = [ - { key: 'hns', icon: '🧪', title: 'HNS 대기확산', color: '#a855f7', colorRgb: '168,85,247' }, - { key: 'rsc', icon: '🚨', title: '긴급구난', color: '#06b6d4', colorRgb: '6,182,212' }, + { + key: 'hns', + icon: '🧪', + title: 'HNS 대기확산', + color: 'var(--color-accent)', + colorRgb: '6,182,212', + }, + { + key: 'rsc', + icon: '🚨', + title: '긴급구난', + color: 'var(--color-accent)', + colorRgb: '6,182,212', + }, ]; /* ── Component ───────────────────────────────────── */ @@ -292,7 +281,7 @@ export function IncidentsRightPanel({ key: 'oil', icon: '🛢', title: '유출유 확산예측', - color: '#f97316', + color: 'var(--color-accent)', colorRgb: '249,115,22', totalLabel: `전체 ${predItems.length}건`, items: predItems.map((p) => { @@ -310,7 +299,7 @@ export function IncidentsRightPanel({ if (!incident) { return ( -
+
📊
좌측에서 사고를 선택하면 @@ -327,7 +316,7 @@ export function IncidentsRightPanel({
🔬 통합분석 조회
- 선택: {incident.name} + 선택: {incident.name}
@@ -344,22 +333,19 @@ export function IncidentsRightPanel({
- {sec.icon} - - {sec.title} - + {/* {sec.icon} */} + {sec.title}
@@ -374,8 +360,7 @@ export function IncidentsRightPanel({ className="flex items-center gap-1.5" style={{ padding: '5px 8px', - background: `rgba(${sec.colorRgb},0.06)`, - border: `1px solid rgba(${sec.colorRgb},0.15)`, + border: '1px solid var(--stroke-default)', borderRadius: '4px', }} > @@ -415,22 +400,19 @@ export function IncidentsRightPanel({
- {sec.icon} - - {sec.title} - + {/* {sec.icon} */} + {sec.title}
준비 중입니다
@@ -443,8 +425,8 @@ export function IncidentsRightPanel({ {/* 민감자원 */}
- 🐟 - 민감자원 + {/* 🐟 */} + 민감자원
{sensCategories.length === 0 ? ( @@ -452,38 +434,33 @@ export function IncidentsRightPanel({ 해당 사고 영역의 민감자원이 없습니다
) : ( - sensCategories.map((cat, i) => { - const icon = CATEGORY_ICON[cat.category] ?? '🌊'; + sensCategories.map((cat) => { const areaLabel = cat.totalArea != null ? `${cat.totalArea.toLocaleString('ko-KR', { maximumFractionDigits: 0 })}ha` : `${cat.count}개소`; - const [r, g, b] = getCategoryColor(i); - const hex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`; return ( @@ -496,10 +473,9 @@ export function IncidentsRightPanel({ {/* 근처 방제자원 */}
- 🛡 - 근처 방제자원 + 근처 방제자원 {nearbyOrgs.length > 0 && ( - + {nearbyOrgs.length}개 )} @@ -519,21 +495,18 @@ export function IncidentsRightPanel({ 반경 내 방제자원 없음
) : ( -
+
{nearbyOrgs.map((org) => (
{org.orgTp} @@ -544,7 +517,7 @@ export function IncidentsRightPanel({ {org.totalAssets > 0 ? ` · 장비 ${org.totalAssets}개` : ''}
- + {org.distanceNm.toFixed(1)} nm
@@ -553,10 +526,10 @@ export function IncidentsRightPanel({ )} {/* Radius slider */} -
+
탐색 반경 - + {nearbyRadius} nm
@@ -572,7 +545,7 @@ export function IncidentsRightPanel({ height: '4px', background: 'var(--stroke-default)', borderRadius: '2px', - accentColor: '#f59e0b', + accentColor: 'var(--color-accent)', }} />
@@ -605,7 +578,8 @@ export function IncidentsRightPanel({ color: isActive ? 'var(--color-accent)' : 'var(--fg-disabled)', }} > - {v.icon} {v.label} + {/* {v.icon} */} + {v.label} ); })} @@ -627,9 +601,7 @@ export function IncidentsRightPanel({ className="w-full text-label-2 font-bold cursor-pointer" style={{ padding: '8px', - background: analysisActive - ? 'linear-gradient(135deg,rgba(239,68,68,0.15),rgba(239,68,68,0.1))' - : 'linear-gradient(135deg,rgba(6,182,212,0.15),rgba(59,130,246,0.1))', + background: analysisActive ? 'rgba(239,68,68,0.1)' : 'rgba(6,182,212,0.1)', border: analysisActive ? '1px solid rgba(239,68,68,0.3)' : '1px solid rgba(6,182,212,0.3)', diff --git a/frontend/src/tabs/incidents/components/IncidentsView.tsx b/frontend/src/tabs/incidents/components/IncidentsView.tsx index 9d6837b..705a8db 100755 --- a/frontend/src/tabs/incidents/components/IncidentsView.tsx +++ b/frontend/src/tabs/incidents/components/IncidentsView.tsx @@ -137,6 +137,8 @@ export function IncidentsView() { const [hoverInfo, setHoverInfo] = useState(null); const [dischargeMode, setDischargeMode] = useState(false); + const [leftCollapsed, setLeftCollapsed] = useState(false); + const [rightCollapsed, setRightCollapsed] = useState(false); const [dischargeInfo, setDischargeInfo] = useState<{ lat: number; lon: number; @@ -195,12 +197,17 @@ export function IncidentsView() { if (sections.length === 0) return; const tags: { icon: string; label: string; color: string }[] = []; sections.forEach((s) => { - if (s.key === 'oil') tags.push({ icon: '🛢', label: '유출유', color: '#f97316' }); - if (s.key === 'hns') tags.push({ icon: '🧪', label: 'HNS', color: '#a855f7' }); - if (s.key === 'rsc') tags.push({ icon: '🚨', label: '구난', color: '#06b6d4' }); + if (s.key === 'oil') + tags.push({ icon: '🛢', label: '유출유', color: 'var(--color-warning)' }); + if (s.key === 'hns') tags.push({ icon: '🧪', label: 'HNS', color: 'var(--color-tertiary)' }); + if (s.key === 'rsc') tags.push({ icon: '🚨', label: '구난', color: 'var(--color-accent)' }); }); if (sensitiveCount > 0) - tags.push({ icon: '🐟', label: `민감자원 ${sensitiveCount}건`, color: '#22c55e' }); + tags.push({ + icon: '🐟', + label: `민감자원 ${sensitiveCount}건`, + color: 'var(--color-success)', + }); setAnalysisTags(tags); setAnalysisActive(true); }; @@ -573,11 +580,13 @@ export function IncidentsView() { return (
{/* Left Panel */} - +
+ +
{/* Center - Map + Analysis Views */}
@@ -588,7 +597,8 @@ export function IncidentsView() { style={{ height: 36, padding: '0 16px', - background: 'linear-gradient(90deg,rgba(6,182,212,0.06),var(--bg-surface))', + background: + 'linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 6%, transparent), var(--bg-surface))', }} >
@@ -601,8 +611,8 @@ export function IncidentsView() { className="text-caption font-semibold rounded-md" style={{ padding: '2px 8px', - background: `${t.color}18`, - border: `1px solid ${t.color}40`, + background: `color-mix(in srgb, ${t.color} 18%, transparent)`, + border: `1px solid color-mix(in srgb, ${t.color} 40%, transparent)`, color: t.color, }} > @@ -625,10 +635,13 @@ export function IncidentsView() { className="text-caption font-semibold cursor-pointer rounded-sm" style={{ padding: '3px 10px', - background: viewMode === v.mode ? 'rgba(6,182,212,0.12)' : 'var(--bg-card)', + background: + viewMode === v.mode + ? 'color-mix(in srgb, var(--color-accent) 12%, transparent)' + : 'var(--bg-card)', border: viewMode === v.mode - ? '1px solid rgba(6,182,212,0.3)' + ? '1px solid color-mix(in srgb, var(--color-accent) 30%, transparent)' : '1px solid var(--stroke-default)', color: viewMode === v.mode ? 'var(--color-accent)' : 'var(--fg-disabled)', }} @@ -641,8 +654,8 @@ export function IncidentsView() { className="text-caption font-semibold cursor-pointer rounded-sm" style={{ padding: '3px 8px', - background: 'rgba(239,68,68,0.06)', - border: '1px solid rgba(239,68,68,0.2)', + background: 'color-mix(in srgb, var(--color-danger) 6%, transparent)', + border: '1px solid color-mix(in srgb, var(--color-danger) 20%, transparent)', color: 'var(--color-danger)', }} > @@ -654,6 +667,44 @@ export function IncidentsView() { {/* Map / Analysis Content Area */}
+ {/* Left panel toggle button */} + + + {/* Right panel toggle button */} + + {/* Default Map (visible when not in analysis or in overlay mode) */} {(!analysisActive || viewMode === 'overlay') && (
@@ -691,12 +742,13 @@ export function IncidentsView() { onClose={() => setIncidentPopup(null)} closeButton={true} closeOnClick={false} + className="incident-popup" >
-
+
{incidentPopup.incident.name}
-
+
상태: {getStatusLabel(incidentPopup.incident.status)}
일시: {incidentPopup.incident.date} {incidentPopup.incident.time} @@ -706,7 +758,7 @@ export function IncidentsView() {
원인: {incidentPopup.incident.causeType}
)} {incidentPopup.incident.prediction && ( -
+
{incidentPopup.incident.prediction}
)} @@ -750,7 +802,7 @@ export function IncidentsView() { width: 180, height: 120, background: - 'radial-gradient(ellipse, rgba(249,115,22,0.35) 0%, rgba(249,115,22,0.1) 50%, transparent 70%)', + 'radial-gradient(ellipse, color-mix(in srgb, var(--color-warning) 35%, transparent) 0%, color-mix(in srgb, var(--color-warning) 10%, transparent) 50%, transparent 70%)', borderRadius: '50%', transform: 'rotate(-15deg)', }} @@ -765,7 +817,7 @@ export function IncidentsView() { width: 150, height: 100, background: - 'radial-gradient(ellipse, rgba(168,85,247,0.3) 0%, rgba(168,85,247,0.08) 50%, transparent 70%)', + 'radial-gradient(ellipse, color-mix(in srgb, var(--color-tertiary) 30%, transparent) 0%, color-mix(in srgb, var(--color-tertiary) 8%, transparent) 50%, transparent 70%)', borderRadius: '50%', transform: 'rotate(20deg)', }} @@ -779,7 +831,8 @@ export function IncidentsView() { left: '42%', width: 200, height: 200, - border: '2px dashed rgba(6,182,212,0.4)', + border: + '2px dashed color-mix(in srgb, var(--color-accent) 40%, transparent)', borderRadius: '50%', }} /> @@ -796,18 +849,16 @@ export function IncidentsView() { className="absolute z-[500] cursor-pointer rounded-md text-caption font-bold font-korean" style={{ top: 10, - right: dischargeMode ? 340 : 180, + right: 180, padding: '6px 10px', - background: dischargeMode ? 'rgba(6,182,212,0.15)' : 'rgba(13,17,23,0.88)', - border: dischargeMode - ? '1px solid rgba(6,182,212,0.4)' - : '1px solid var(--stroke-default)', - color: dischargeMode ? '#22d3ee' : 'var(--fg-disabled)', + background: 'var(--bg-base)', + border: '1px solid var(--stroke-default)', + color: dischargeMode ? 'var(--color-accent)' : 'var(--fg-disabled)', backdropFilter: 'blur(8px)', - transition: 'all 0.2s', + transition: 'color 0.2s', }} > - 🚢 배출규정 {dischargeMode ? 'ON' : 'OFF'} + 배출규정 {dischargeMode ? 'ON' : 'OFF'} {/* 오염물 배출 규정 패널 */} @@ -830,9 +881,9 @@ export function IncidentsView() { left: '50%', transform: 'translate(-50%, -50%)', padding: '12px 20px', - background: 'rgba(13,17,23,0.9)', - border: '1px solid rgba(6,182,212,0.3)', - color: '#22d3ee', + background: 'var(--bg-base)', + border: '1px solid color-mix(in srgb, var(--color-accent) 30%, transparent)', + color: 'var(--color-accent)', backdropFilter: 'blur(8px)', pointerEvents: 'none', }} @@ -845,14 +896,14 @@ export function IncidentsView() {
-
- AIS Live + /> */} + AIS Live MarineTraffic
-
- 선박 20 -
-
- 사고 6 -
-
- 방제선 2 -
+
선박 20
+
사고 6
+
방제선 2
@@ -881,29 +926,29 @@ export function IncidentsView() {
사고 상태
-
+
{[ - { c: '#ef4444', l: '대응중' }, - { c: '#f59e0b', l: '조사중' }, - { c: '#6b7280', l: '종료' }, + { c: 'var(--color-danger)', l: '대응중' }, + { c: 'var(--color-warning)', l: '조사중' }, + { c: 'var(--fg-disabled)', l: '종료' }, ].map((s) => ( -
+
{s.l}
))}
AIS 선박
-
+
{VESSEL_LEGEND.map((vl) => ( -
+
- {vl.type} + {vl.type}
))}
@@ -993,11 +1038,15 @@ export function IncidentsView() { className="flex items-center shrink-0 border-b border-stroke" style={{ height: 28, - background: 'linear-gradient(90deg,rgba(249,115,22,0.08),var(--bg-surface))', + background: + 'linear-gradient(90deg, color-mix(in srgb, var(--color-warning) 8%, transparent), var(--bg-surface))', padding: '0 10px', }} > - + 🛢 유출유 확산예측
@@ -1006,7 +1055,7 @@ export function IncidentsView() { style={{ padding: 10 }} >
@@ -1016,11 +1065,15 @@ export function IncidentsView() { className="flex items-center shrink-0 border-b border-stroke" style={{ height: 28, - background: 'linear-gradient(90deg,rgba(168,85,247,0.08),var(--bg-surface))', + background: + 'linear-gradient(90deg, color-mix(in srgb, var(--color-tertiary) 8%, transparent), var(--bg-surface))', padding: '0 10px', }} > - + 🧪 HNS 대기확산
@@ -1029,7 +1082,7 @@ export function IncidentsView() { style={{ padding: 10 }} >
@@ -1039,7 +1092,8 @@ export function IncidentsView() { className="flex items-center shrink-0 border-b border-stroke" style={{ height: 28, - background: 'linear-gradient(90deg,rgba(6,182,212,0.08),var(--bg-surface))', + background: + 'linear-gradient(90deg, color-mix(in srgb, var(--color-accent) 8%, transparent), var(--bg-surface))', padding: '0 10px', }} > @@ -1050,7 +1104,7 @@ export function IncidentsView() { style={{ padding: 10 }} >
@@ -1074,8 +1128,8 @@ export function IncidentsView() { className="cursor-pointer rounded text-caption font-semibold" style={{ padding: '4px 12px', - background: 'rgba(59,130,246,0.1)', - border: '1px solid rgba(59,130,246,0.2)', + background: 'color-mix(in srgb, var(--color-info) 10%, transparent)', + border: '1px solid color-mix(in srgb, var(--color-info) 20%, transparent)', color: 'var(--color-info)', }} > @@ -1085,9 +1139,9 @@ export function IncidentsView() { className="cursor-pointer rounded text-caption font-semibold" style={{ padding: '4px 12px', - background: 'rgba(168,85,247,0.1)', - border: '1px solid rgba(168,85,247,0.2)', - color: '#a78bfa', + background: 'color-mix(in srgb, var(--color-tertiary) 10%, transparent)', + border: '1px solid color-mix(in srgb, var(--color-tertiary) 20%, transparent)', + color: 'var(--color-tertiary)', }} > 🔗 R&D 연계 @@ -1098,17 +1152,19 @@ export function IncidentsView() {
{/* Right Panel */} - +
+ +
); } @@ -1145,11 +1201,11 @@ function SplitPanelContent({ model: 'KOSPS + OpenDrift · BUNKER-C 150kL', items: [ { label: '예측 시간', value: '72시간 (3일)' }, - { label: '최대 확산거리', value: '12.3 NM', color: '#f97316' }, - { label: '해안 도달 시간', value: '18시간 후', color: '#ef4444' }, + { label: '최대 확산거리', value: '12.3 NM', color: 'var(--color-warning)' }, + { label: '해안 도달 시간', value: '18시간 후', color: 'var(--color-danger)' }, { label: '영향 해안선', value: '27.5 km' }, { label: '풍화율', value: '32.4%' }, - { label: '잔존유량', value: '101.4 kL', color: '#f97316' }, + { label: '잔존유량', value: '101.4 kL', color: 'var(--color-warning)' }, ], summary: '여수항 남동쪽 방향 확산, 18시간 후 돌산도 해안 도달 예상. 조류 영향으로 남서쪽 이동.', @@ -1158,12 +1214,12 @@ function SplitPanelContent({ title: 'HNS 대기확산 결과', model: 'ALOHA + PHAST · 톨루엔 5톤', items: [ - { label: 'IDLH 범위', value: '1.2 km', color: '#ef4444' }, - { label: 'ERPG-2 범위', value: '2.8 km', color: '#f97316' }, - { label: 'ERPG-1 범위', value: '5.1 km', color: '#eab308' }, + { label: 'IDLH 범위', value: '1.2 km', color: 'var(--color-danger)' }, + { label: 'ERPG-2 범위', value: '2.8 km', color: 'var(--color-warning)' }, + { label: 'ERPG-1 범위', value: '5.1 km', color: 'var(--color-caution)' }, { label: '풍향', value: 'SW → NE 방향' }, { label: '대기 안정도', value: 'D등급 (중립)' }, - { label: '영향 인구', value: '약 2,400명', color: '#ef4444' }, + { label: '영향 인구', value: '약 2,400명', color: 'var(--color-danger)' }, ], summary: '남서풍에 의해 북동쪽 내륙 방향 확산. IDLH 1.2km 이내 즉시 대피 필요.', }, @@ -1171,12 +1227,12 @@ function SplitPanelContent({ title: '긴급구난 SAR 결과', model: 'SAROPS · Monte Carlo 10,000회 시뮬레이션', items: [ - { label: '95% 확률 범위', value: '8.5 NM²', color: '#06b6d4' }, + { label: '95% 확률 범위', value: '8.5 NM²', color: 'var(--color-accent)' }, { label: '최적 탐색 경로', value: 'Sector Search' }, { label: '예상 표류 속도', value: '1.8 kn' }, { label: '표류 방향', value: 'NE (045°)' }, - { label: '생존 가능 시간', value: '36시간', color: '#ef4444' }, - { label: '필요 자산', value: '헬기 2 + 경비정 3', color: '#f97316' }, + { label: '생존 가능 시간', value: '36시간', color: 'var(--color-danger)' }, + { label: '필요 자산', value: '헬기 2 + 경비정 3', color: 'var(--color-warning)' }, ], summary: '북동쪽 방향 표류 예상. 06:00 기준 최적 탐색 패턴: 섹터탐색(Sector Search).', }, @@ -1190,8 +1246,8 @@ function SplitPanelContent({ className="rounded-sm" style={{ padding: '10px 12px', - background: `${tag.color}08`, - border: `1px solid ${tag.color}20`, + background: `color-mix(in srgb, ${tag.color} 8%, transparent)`, + border: `1px solid color-mix(in srgb, ${tag.color} 20%, transparent)`, }} >
@@ -1219,7 +1275,7 @@ function SplitPanelContent({ {item.label} {item.value} @@ -1231,8 +1287,8 @@ function SplitPanelContent({ className="rounded-sm text-caption text-fg-sub" style={{ padding: '8px 10px', - background: `${tag.color}06`, - border: `1px solid ${tag.color}15`, + background: `color-mix(in srgb, ${tag.color} 6%, transparent)`, + border: `1px solid color-mix(in srgb, ${tag.color} 15%, transparent)`, lineHeight: 1.6, }} > @@ -1262,8 +1318,10 @@ function VesselPopupPanel({ onClose: () => void; onDetail: () => void; }) { - const statusColor = v.status.includes('사고') ? '#ef4444' : '#22c55e'; - const statusBg = v.status.includes('사고') ? 'rgba(239,68,68,0.15)' : 'rgba(34,197,94,0.1)'; + const statusColor = v.status.includes('사고') ? 'var(--color-danger)' : 'var(--color-success)'; + const statusBg = v.status.includes('사고') + ? 'color-mix(in srgb, var(--color-danger) 15%, transparent)' + : 'color-mix(in srgb, var(--color-success) 10%, transparent)'; return (
@@ -1288,8 +1346,8 @@ function VesselPopupPanel({ alignItems: 'center', gap: 8, padding: '10px 14px', - background: 'var(--bg-elevated)', - borderBottom: '1px solid var(--stroke-default)', + background: 'rgba(22,27,34,0.97)', + borderBottom: '1px solid rgba(48,54,61,0.8)', }} >
-
+
{v.name}
-
MMSI: {v.mmsi}
+
+ MMSI: {v.mmsi} +
- + ✕
{/* Ship Image */}
🚢 @@ -1324,14 +1392,14 @@ function VesselPopupPanel({ {/* Tags */}
{v.typS} @@ -1341,7 +1409,7 @@ function VesselPopupPanel({ style={{ padding: '2px 8px', background: statusBg, - border: `1px solid ${statusColor}40`, + border: `1px solid color-mix(in srgb, ${statusColor} 40%, transparent)`, color: statusColor, }} > @@ -1361,12 +1429,20 @@ function VesselPopupPanel({ }} >
- 출항지 - {v.depart} + + 출항지 + + + {v.depart} +
- 입항지 - {v.arrive} + + 입항지 + + + {v.arrive} +
@@ -1376,31 +1452,34 @@ function VesselPopupPanel({
+ )} + + {/* Right panel toggle button */} + {activeSubTab === 'analysis' && ( + + )} + {activeSubTab === 'list' ? ( { - if (!selectedAnalysis) { - alert('선택된 사고가 없습니다.\n분석 목록에서 사고를 선택해주세요.'); - return; +
+ { + if (!selectedAnalysis) { + alert('선택된 사고가 없습니다.\n분석 목록에서 사고를 선택해주세요.'); + return; + } + setRecalcModalOpen(true); + }} + onOpenReport={handleOpenReport} + detail={analysisDetail} + summary={ + stepSummariesByModel[windHydrModel]?.[currentStep] ?? + summaryByModel[windHydrModel] ?? + simulationSummary } - setRecalcModalOpen(true); - }} - onOpenReport={handleOpenReport} - detail={analysisDetail} - summary={ - stepSummariesByModel[windHydrModel]?.[currentStep] ?? - summaryByModel[windHydrModel] ?? - simulationSummary - } - boomBlockedVolume={boomBlockedVolume} - displayControls={displayControls} - onDisplayControlsChange={setDisplayControls} - windHydrModel={windHydrModel} - windHydrModelOptions={windHydrModelOptions} - onWindHydrModelChange={setWindHydrModel} - analysisTab={analysisTab} - onSwitchAnalysisTab={setAnalysisTab} - drawAnalysisMode={drawAnalysisMode} - analysisPolygonPoints={analysisPolygonPoints} - circleRadiusNm={circleRadiusNm} - onCircleRadiusChange={setCircleRadiusNm} - analysisResult={analysisResult} - incidentCoord={incidentCoord} - centerPoints={centerPoints} - predictionTime={predictionTime} - onStartPolygonDraw={handleStartPolygonDraw} - onRunPolygonAnalysis={handleRunPolygonAnalysis} - onRunCircleAnalysis={handleRunCircleAnalysis} - onCancelAnalysis={handleCancelAnalysis} - onClearAnalysis={handleClearAnalysis} - /> + boomBlockedVolume={boomBlockedVolume} + displayControls={displayControls} + onDisplayControlsChange={setDisplayControls} + windHydrModel={windHydrModel} + windHydrModelOptions={windHydrModelOptions} + onWindHydrModelChange={setWindHydrModel} + analysisTab={analysisTab} + onSwitchAnalysisTab={setAnalysisTab} + drawAnalysisMode={drawAnalysisMode} + analysisPolygonPoints={analysisPolygonPoints} + circleRadiusNm={circleRadiusNm} + onCircleRadiusChange={setCircleRadiusNm} + analysisResult={analysisResult} + incidentCoord={incidentCoord} + centerPoints={centerPoints} + predictionTime={predictionTime} + onStartPolygonDraw={handleStartPolygonDraw} + onRunPolygonAnalysis={handleRunPolygonAnalysis} + onRunCircleAnalysis={handleRunCircleAnalysis} + onCancelAnalysis={handleCancelAnalysis} + onClearAnalysis={handleClearAnalysis} + /> +
)} {/* 확산 예측 실행 중 로딩 오버레이 */} diff --git a/frontend/src/tabs/prediction/components/RightPanel.tsx b/frontend/src/tabs/prediction/components/RightPanel.tsx index 483c862..0109d13 100755 --- a/frontend/src/tabs/prediction/components/RightPanel.tsx +++ b/frontend/src/tabs/prediction/components/RightPanel.tsx @@ -117,7 +117,7 @@ export function RightPanel({ }, [incidentCoord, centerPoints, summary, predictionTime]); return ( -
+
{/* Tab Header */}
diff --git a/frontend/src/tabs/scat/components/PreScatView.tsx b/frontend/src/tabs/scat/components/PreScatView.tsx index d7a0ec1..56808a8 100755 --- a/frontend/src/tabs/scat/components/PreScatView.tsx +++ b/frontend/src/tabs/scat/components/PreScatView.tsx @@ -16,6 +16,8 @@ import ScatRightPanel from './ScatRightPanel'; // ═══ Main PreScatView ═══ export function PreScatView() { + const [leftCollapsed, setLeftCollapsed] = useState(false); + const [rightCollapsed, setRightCollapsed] = useState(false); const [segments, setSegments] = useState([]); const [zones, setZones] = useState([]); const [jurisdictions, setJurisdictions] = useState([]); @@ -199,29 +201,70 @@ export function PreScatView() { return (
- + {/* Left Panel */} +
+ +
+ +
+ {/* Left panel toggle button */} + + + {/* Right panel toggle button */} + -
*/}
- + {/* Right Panel */} +
+ +
{popupData && ( diff --git a/frontend/src/tabs/scat/components/ScatLeftPanel.tsx b/frontend/src/tabs/scat/components/ScatLeftPanel.tsx index 7cdc25d..0e8b725 100644 --- a/frontend/src/tabs/scat/components/ScatLeftPanel.tsx +++ b/frontend/src/tabs/scat/components/ScatLeftPanel.tsx @@ -156,7 +156,7 @@ function ScatLeftPanel({ }, []); return ( -
+
{/* Filters */}
@@ -269,7 +269,11 @@ function ScatLeftPanel({ rowCount={filtered.length} rowHeight={88} overscanCount={5} - style={{ height: listHeight }} + style={{ + height: listHeight, + scrollbarWidth: 'thin', + scrollbarColor: 'var(--stroke-default) transparent', + }} rowComponent={SegRow} rowProps={{ filtered, diff --git a/frontend/src/tabs/scat/components/ScatMap.tsx b/frontend/src/tabs/scat/components/ScatMap.tsx index e96525a..9fb5227 100644 --- a/frontend/src/tabs/scat/components/ScatMap.tsx +++ b/frontend/src/tabs/scat/components/ScatMap.tsx @@ -310,7 +310,7 @@ function ScatMap({
{/* Right info cards */} -
+
{/* ESI Legend */}
diff --git a/frontend/src/tabs/scat/components/ScatRightPanel.tsx b/frontend/src/tabs/scat/components/ScatRightPanel.tsx index 331b1c9..ee8b25b 100644 --- a/frontend/src/tabs/scat/components/ScatRightPanel.tsx +++ b/frontend/src/tabs/scat/components/ScatRightPanel.tsx @@ -23,7 +23,7 @@ export default function ScatRightPanel({ if (!detail && !loading) { return ( -
+
🏖️
좌측 목록에서 구간을 @@ -37,7 +37,7 @@ export default function ScatRightPanel({ } return ( -
+
{/* 헤더 */}
{detail ? ( diff --git a/frontend/src/tabs/weather/components/WeatherMapControls.tsx b/frontend/src/tabs/weather/components/WeatherMapControls.tsx index 9d6714f..fac20c1 100644 --- a/frontend/src/tabs/weather/components/WeatherMapControls.tsx +++ b/frontend/src/tabs/weather/components/WeatherMapControls.tsx @@ -33,7 +33,7 @@ export function WeatherMapControls({ center, zoom }: WeatherMapControlsProps) {
diff --git a/frontend/src/tabs/weather/components/WeatherMapOverlay.tsx b/frontend/src/tabs/weather/components/WeatherMapOverlay.tsx index 28175dd..5d9b442 100755 --- a/frontend/src/tabs/weather/components/WeatherMapOverlay.tsx +++ b/frontend/src/tabs/weather/components/WeatherMapOverlay.tsx @@ -33,26 +33,26 @@ interface WeatherMapOverlayProps { selectedStationId: string | null; } -// 풍속에 따른 hex 색상 반환 +// 풍속에 따른 색상 반환 function getWindHexColor(speed: number, isSelected: boolean): string { - if (isSelected) return '#06b6d4'; - if (speed > 10) return '#ef4444'; - if (speed > 7) return '#f59e0b'; - return '#3b82f6'; + if (isSelected) return 'var(--color-accent)'; + if (speed > 10) return 'var(--color-danger)'; + if (speed > 7) return 'var(--color-caution)'; + return 'var(--color-info)'; } -// 파고에 따른 hex 색상 반환 +// 파고에 따른 색상 반환 function getWaveHexColor(height: number): string { - if (height > 2.5) return '#ef4444'; - if (height > 1.5) return '#f59e0b'; - return '#3b82f6'; + if (height > 2.5) return 'var(--color-danger)'; + if (height > 1.5) return 'var(--color-caution)'; + return 'var(--color-info)'; } -// 수온에 따른 hex 색상 반환 +// 수온에 따른 색상 반환 function getTempHexColor(temp: number): string { - if (temp > 8) return '#ef4444'; - if (temp > 6) return '#f59e0b'; - return '#3b82f6'; + if (temp > 8) return 'var(--color-danger)'; + if (temp > 6) return 'var(--color-caution)'; + return 'var(--color-info)'; } /** @@ -91,15 +91,17 @@ export function WeatherMapOverlay({ width={24} height={24} viewBox="0 0 24 24" - style={{ filter: 'drop-shadow(0 2px 4px rgba(0,0,0,0.3))' }} + style={{ filter: 'drop-shadow(0 2px 6px rgba(0,0,0,0.5))' }} > - {/* 위쪽이 바람 방향을 나타내는 삼각형 */} - + {/* 흰 외곽선 레이어 */} + + {/* 색상 레이어 */} +
{station.wind.speed.toFixed(1)} @@ -205,7 +207,6 @@ export function useWeatherDeckLayers( onStationClick: (station: WeatherStation) => void, ): Layer[] { return useMemo(() => { - // eslint-disable-next-line @typescript-eslint/no-explicit-any const result: Layer[] = []; // 파고 분포 ScatterplotLayer (Circle 대체, 반경 = 파고 * 15km) diff --git a/frontend/src/tabs/weather/components/WeatherRightPanel.tsx b/frontend/src/tabs/weather/components/WeatherRightPanel.tsx index d7950b2..7d73638 100755 --- a/frontend/src/tabs/weather/components/WeatherRightPanel.tsx +++ b/frontend/src/tabs/weather/components/WeatherRightPanel.tsx @@ -1,3 +1,5 @@ +import { useState } from 'react'; + interface WeatherData { stationName: string; location: { lat: number; lon: number }; @@ -46,20 +48,14 @@ interface WeatherRightPanelProps { weatherData: WeatherData | null; } -/** 풍속 등급 색상 */ -function windColor(speed: number): string { - if (speed >= 14) return '#ef4444'; - if (speed >= 10) return '#f97316'; - if (speed >= 6) return '#eab308'; - return '#22c55e'; +/** 풍속 텍스트 색상 (2단계 — danger | accent) */ +function windTextColor(speed: number): string { + return speed >= 10 ? 'var(--color-danger)' : 'var(--color-accent)'; } -/** 파고 등급 색상 */ -function waveColor(height: number): string { - if (height >= 3) return '#ef4444'; - if (height >= 2) return '#f97316'; - if (height >= 1) return '#eab308'; - return '#22c55e'; +/** 파고 텍스트 색상 (2단계 — danger | accent) */ +function waveTextColor(height: number): string { + return height >= 2 ? 'var(--color-danger)' : 'var(--color-accent)'; } /** 풍향 텍스트 */ @@ -86,13 +82,38 @@ function windDirText(deg: number): string { } export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) { + const [collapsed, setCollapsed] = useState(false); + + if (collapsed) { + return ( +
+ +
+ ); + } + if (!weatherData) { return (
-
+

지도에서 해양 지점을 클릭하세요

+
); @@ -109,18 +130,30 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
{/* 헤더 */}
-
- - 📍 {weatherData.stationName} - - - 기상예보관 - +
+
+
+ + 📍 {weatherData.stationName} + + + 기상예보관 + +
+

+ {weatherData.location.lat.toFixed(2)}°N, {weatherData.location.lon.toFixed(2)}°E ·{' '} + {weatherData.currentTime} +

+
+
-

- {weatherData.location.lat.toFixed(2)}°N, {weatherData.location.lon.toFixed(2)}°E ·{' '} - {weatherData.currentTime} -

{/* 스크롤 콘텐츠 */} @@ -131,13 +164,13 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) { {/* ── 핵심 지표 3칸 카드 ── */}
-
+
{wSpd.toFixed(1)}
풍속 (m/s)
-
+
{wHgt.toFixed(1)}
파고 (m)
@@ -152,9 +185,7 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) { {/* ── 바람 상세 ── */}
-
- 🌬️ 바람 현황 -
+
🌬️ 바람 현황
{/* 풍향 컴파스 */}
@@ -202,11 +233,11 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) { y1="25" x2={25 + 14 * Math.sin((wind.direction * Math.PI) / 180)} y2={25 - 14 * Math.cos((wind.direction * Math.PI) / 180)} - stroke={windColor(wSpd)} + stroke="var(--color-accent)" strokeWidth="2" strokeLinecap="round" /> - +
@@ -222,19 +253,13 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
1k 최고 - + {Number(wind.speed_1k).toFixed(1)}
3k 평균 - + {Number(wind.speed_3k).toFixed(1)}
@@ -248,11 +273,8 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) {
@@ -263,24 +285,20 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) { {/* ── 파도 상세 ── */}
-
🌊 파도
+
🌊 파도
-
- {wHgt.toFixed(1)}m -
+
{wHgt.toFixed(1)}m
유의파고
-
+
{wave.maxHeight.toFixed(1)}m
최고파고
-
- {wave.period}s -
+
{wave.period}s
주기
@@ -295,7 +313,7 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) { className="h-full rounded-full transition-all" style={{ width: `${Math.min((wHgt / 5) * 100, 100)}%`, - background: waveColor(wHgt), + background: 'var(--color-accent)', }} />
@@ -307,14 +325,10 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) { {/* ── 수온/공기 ── */}
-
- 🌡️ 수온 · 공기 -
+
🌡️ 수온 · 공기
-
- {wTemp.toFixed(1)}° -
+
{wTemp.toFixed(1)}°
수온
@@ -332,9 +346,7 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) { {/* ── 시간별 예보 ── */}
-
- ⏰ 시간별 예보 -
+
⏰ 시간별 예보
{forecast.map((f, i) => (
-
- ☀️ 천문 · 조석 -
+
☀️ 천문 · 조석
{[ { icon: '🌅', label: '일출', value: astronomy.sunrise }, @@ -381,17 +391,21 @@ export function WeatherRightPanel({ weatherData }: WeatherRightPanelProps) { {/* ── 날씨 특보 ── */} {alert && (
-
- 🚨 날씨 특보 -
+
🚨 날씨 특보
주의 diff --git a/frontend/src/tabs/weather/components/WeatherView.tsx b/frontend/src/tabs/weather/components/WeatherView.tsx index 834b510..058a7e4 100755 --- a/frontend/src/tabs/weather/components/WeatherView.tsx +++ b/frontend/src/tabs/weather/components/WeatherView.tsx @@ -90,7 +90,6 @@ const WEATHER_MAP_CENTER: [number, number] = [127.8, 36.5]; // [lng, lat] const WEATHER_MAP_ZOOM = 7; // deck.gl 오버레이 컴포넌트 (MapLibre 컨트롤로 등록) -// eslint-disable-next-line @typescript-eslint/no-explicit-any function DeckGLOverlay({ layers }: { layers: Layer[] }) { const overlay = useControl(() => new MapboxOverlay({ interleaved: true })); overlay.setProps({ layers }); @@ -178,7 +177,7 @@ function WeatherMapInner({ {/* 핀 꼬리 */}
{/* 좌표 라벨 */} -
+
{clickedLocation.lat.toFixed(3)}°N {clickedLocation.lon.toFixed(3)}°E
@@ -295,7 +294,7 @@ export function WeatherView() { {/* Main Map Area */}
{/* Tab Navigation */} -
+
{(['0', '3', '6', '9'] as TimeOffset[]).map((offset) => ( {/* Divider */} @@ -87,7 +83,7 @@ export function TopBar({ activeTab, onTabChange }: TopBarProps) { onClick={handleClick} title={tab.label} className={` - px-2.5 xl:px-4 py-2 text-title-4 font-bold transition-all duration-200 + px-2.5 xl:px-4 py-2 text-title-2 font-bold transition-all duration-200 font-korean tracking-navigation border-b-2 border-transparent ${isIncident ? 'ml-1' : ''} ${isMonitor ? 'ml-1 flex items-center gap-1.5' : ''} @@ -127,7 +123,7 @@ export function TopBar({ activeTab, onTabChange }: TopBarProps) { {/* Right Section */}
{/* Status Badge */} - {/*
+ {/*
사고 진행중
*/} diff --git a/frontend/src/common/components/map/BacktrackReplayBar.tsx b/frontend/src/common/components/map/BacktrackReplayBar.tsx index 246fa18..dfe63cc 100755 --- a/frontend/src/common/components/map/BacktrackReplayBar.tsx +++ b/frontend/src/common/components/map/BacktrackReplayBar.tsx @@ -141,7 +141,7 @@ export function BacktrackReplayBar({ className="w-2 h-2 rounded-full bg-color-tertiary" style={{ boxShadow: '0 0 8px rgba(168,85,247,0.5)' }} /> - 역추적 리플레이 + 역추적 리플레이
@@ -180,7 +180,7 @@ export function BacktrackReplayBar({ {/* Play/Pause */} @@ -1575,7 +1578,7 @@ function MapLegend({ className="flex items-center gap-1.5 mt-2 rounded" style={{ padding: '6px', background: 'rgba(168,85,247,0.08)' }} > -
🧭
+
🧭
풍향 (방사형)
@@ -1888,7 +1891,9 @@ function BacktrackReplayBar({ minWidth: '340px', }} > -
{progress.toFixed(0)}%
+
+ {progress.toFixed(0)}% +
{ {/* ── 섹션 1: 헤더 ── */}

Components @@ -244,7 +244,7 @@ export const ButtonContent = ({ theme }: ButtonContentProps) => {

- + 텍스트 + 아이콘 버튼
@@ -298,7 +298,7 @@ export const ButtonContent = ({ theme }: ButtonContentProps) => {
- + 아이콘 전용 버튼
@@ -339,7 +339,7 @@ export const ButtonContent = ({ theme }: ButtonContentProps) => {
{/* 라벨 */} {size.label} @@ -349,7 +349,7 @@ export const ButtonContent = ({ theme }: ButtonContentProps) => {
-

+

모든 컬러 토큰은{' '} Property-Role-Variant 3계층 구조를 따릅니다. Property는 색상이 적용되는 CSS 속성, Role은 의미 기반 역할, Variant는 상태 @@ -551,17 +551,17 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => { }} > {row.prop}

-
+
{row.desc}
- + {row.example}
@@ -581,7 +581,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => { style={{ border: `1px solid ${dividerColor}` }} >
{ }} > {row.name} - + {row.desc}
@@ -626,7 +626,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => { style={{ border: `1px solid ${dividerColor}` }} >
{ }} > {row.name} - + {row.desc}
@@ -672,7 +672,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {

Semantic Tokens

-

+

용도에 따라 의미를 부여한 토큰. 테마 전환 시 값이 변경됩니다.

@@ -745,7 +745,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => { }, ].map((group) => (
-

+

{group.title}

{ > {/* 헤더 */}
{ }} > {tk.legacy} {tk.name} - + {tk.desc} - + {tk.value}
@@ -804,7 +804,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => { flexShrink: 0, }} /> - + {hexToRgb(tk.value)}
@@ -823,7 +823,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {

Palette Tokens

-

+

fg · bg · stroke 모든 맥락에서 사용되는 색상 원본. Property 접두사 없이{' '} --color-* @@ -836,7 +836,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => { style={{ border: `1px solid ${dividerColor}` }} >

{ backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa', }} > - + {tk.legacy} {tk.name} - + {tk.value}
@@ -905,11 +908,11 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => { flexShrink: 0, }} /> - + {hexToRgb(tk.value)}
- + {tk.desc}
@@ -925,7 +928,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {

Non-color Tokens

-

+

타이포그래피, 라운딩 등 색상 외 토큰.

@@ -934,7 +937,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => { style={{ border: `1px solid ${dividerColor}` }} >
{ backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa', }} > - + {tk.legacy} {tk.name} { > {tk.category} - + {tk.desc}
@@ -1015,7 +1021,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {

프라이머리 색상(primary color)

-

+

Primary 색상은 해양 방제 시스템의 핵심 인터랙션 요소에 사용됩니다. Cyan~Blue 그라디언트가 주요 액션 버튼과 강조 요소에 적용됩니다.

@@ -1023,7 +1029,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
{/* Light Mode */}
-

+

Light Mode

{ {/* Dark Mode */}
-

+

Dark Mode

{

세컨더리 색상(secondary color)

-

+

Secondary 색상은 UI의 배경과 구조적 요소에 사용됩니다. Navy 계열로 다크 모드의 깊이감과 계층 구조를 표현합니다.

@@ -1075,7 +1081,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {
{/* Light Mode */}
-

+

Light Mode

{ {/* Dark Mode */}
-

+

Dark Mode

{

그레이 색상(gray color) / 네추럴, 중립 색상

-

+

Gray 색상은 주로 배경, 텍스트, 구분 선에 사용되며, 시각적 집중을 방해하지 않고 콘텐츠에 초점을 맞추도록 도와주는 중립적인 색상이다.

-

+

표준형 스타일의 그레이 색상은 주요 색상과 선명한 모드에서의 조화를 고려해 블루 그레이 계열을 사용한다.

@@ -1141,7 +1147,7 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {

Transparent

-

+

투명도와 음영을 활용하여 정보의 집중도를 조절합니다. 배경의 음영 처리는 투명도 65%를 사용합니다.

@@ -1174,12 +1180,12 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => {

Primitive

-

+

UI 전반에서 사용하는 기본 색조 팔레트. 테마와 무관하게 고정된 값입니다.

@@ -1214,17 +1220,17 @@ export const ColorPaletteContent = ({ theme }: ColorPaletteContentProps) => { /> {/* 토큰명 */} {token.name} {/* HEX + RGB */}
-
+
{token.hex}
-
+
{hexToRgb(token.hex)}
diff --git a/frontend/src/pages/design/ComponentsContent.tsx b/frontend/src/pages/design/ComponentsContent.tsx index 663231e..efa2d6c 100644 --- a/frontend/src/pages/design/ComponentsContent.tsx +++ b/frontend/src/pages/design/ComponentsContent.tsx @@ -13,7 +13,7 @@ export const ComponentsContent = () => { > 시스템 컴포넌트 카탈로그 -

+

WING-OPS 해상 물류를 위한 시각적 아이덴티티 시스템입니다. 정밀도와 미션 크리티컬한 운영을 위해 설계된 고밀도 산업용 인터페이스입니다.

diff --git a/frontend/src/pages/design/ComponentsOverview.tsx b/frontend/src/pages/design/ComponentsOverview.tsx index 731664a..ce1a119 100644 --- a/frontend/src/pages/design/ComponentsOverview.tsx +++ b/frontend/src/pages/design/ComponentsOverview.tsx @@ -256,7 +256,7 @@ const ComponentsOverview = ({ theme, onNavigate }: ComponentsOverviewProps) => { {/* ── 헤더 영역 ── */}
Components @@ -264,7 +264,7 @@ const ComponentsOverview = ({ theme, onNavigate }: ComponentsOverviewProps) => {

Overview

-

+

재사용 가능한 UI 컴포넌트 카탈로그입니다.

@@ -307,7 +307,10 @@ const ComponentsOverview = ({ theme, onNavigate }: ComponentsOverviewProps) => { {/* 카드 라벨 */}
- + {card.label}
diff --git a/frontend/src/pages/design/DesignContent.tsx b/frontend/src/pages/design/DesignContent.tsx index 69c9b36..007c8a8 100644 --- a/frontend/src/pages/design/DesignContent.tsx +++ b/frontend/src/pages/design/DesignContent.tsx @@ -154,7 +154,7 @@ export const DesignContent = ({ theme }: DesignContentProps) => { style={{ backgroundColor: t.textAccent, boxShadow: t.systemActiveShadow }} /> System Active @@ -192,11 +192,14 @@ export const DesignContent = ({ theme }: DesignContentProps) => { /> {/* 정보 */}
- + {item.token} {item.hex} @@ -233,7 +236,7 @@ export const DesignContent = ({ theme }: DesignContentProps) => { {item.token} {item.hex} @@ -263,7 +266,7 @@ export const DesignContent = ({ theme }: DesignContentProps) => { {item.token} {item.sampleText} - + {item.desc}
@@ -297,7 +300,7 @@ export const DesignContent = ({ theme }: DesignContentProps) => { />
{item.name} @@ -435,7 +438,7 @@ export const DesignContent = ({ theme }: DesignContentProps) => {
{/* radius-sm */}
- + {t.radiusSmLabel}
{ Small Elements

Applied to tactical buttons, search inputs, and micro-cards for a precise, sharp @@ -463,7 +466,7 @@ export const DesignContent = ({ theme }: DesignContentProps) => {

{/* radius-md */}
- + {t.radiusMdLabel}
{ Structural Panels

Applied to telemetry cards, floating modals, and primary operational panels to diff --git a/frontend/src/pages/design/FloatContent.tsx b/frontend/src/pages/design/FloatContent.tsx index 020fac6..bfca117 100644 --- a/frontend/src/pages/design/FloatContent.tsx +++ b/frontend/src/pages/design/FloatContent.tsx @@ -50,7 +50,10 @@ export const FloatContent = ({ theme }: FloatContentProps) => {

Float

-

+

화면 위에 떠서 표시되는 UI 패턴 카탈로그 — Modal, Dropdown, Overlay, Toast

@@ -70,7 +73,7 @@ export const FloatContent = ({ theme }: FloatContentProps) => { }} > {label} diff --git a/frontend/src/pages/design/FoundationsOverview.tsx b/frontend/src/pages/design/FoundationsOverview.tsx index 1837f0b..ef03049 100644 --- a/frontend/src/pages/design/FoundationsOverview.tsx +++ b/frontend/src/pages/design/FoundationsOverview.tsx @@ -174,7 +174,7 @@ const FoundationsOverview = ({ theme, onNavigate }: FoundationsOverviewProps) => {/* ── 헤더 영역 ── */}
Foundations @@ -182,7 +182,7 @@ const FoundationsOverview = ({ theme, onNavigate }: FoundationsOverviewProps) =>

Overview

-

+

디자인의 기반이 되는 핵심 요소 사용 기준입니다.

@@ -225,7 +225,10 @@ const FoundationsOverview = ({ theme, onNavigate }: FoundationsOverviewProps) => {/* 카드 라벨 */}
- + {card.label}
diff --git a/frontend/src/pages/design/LayoutContent.tsx b/frontend/src/pages/design/LayoutContent.tsx index 82035d8..0a180f1 100644 --- a/frontend/src/pages/design/LayoutContent.tsx +++ b/frontend/src/pages/design/LayoutContent.tsx @@ -324,7 +324,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {

Layout

-

+

WING-OPS는 데스크톱 전용 고정 뷰포트 애플리케이션입니다. 화면 전체를 채우는 고정 레이아웃(100vh)으로, flex 기반의 패널 구조를 사용합니다. KRDS 가이드라인을 기반으로 xlarge / xxlarge 구간에 최적화되어 있습니다. @@ -364,7 +364,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {

Breakpoint

-

+

화면 크기에 따라 반응형 레이아웃을 사용하여 환경에 최적화된 구조로 표시됩니다. WING-OPS 사용 구간(xl, 2xl)은 cyan으로 강조되어 있습니다.

@@ -499,7 +499,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => { borderColor: isDark ? 'rgba(76,215,246,0.45)' : 'rgba(6,182,212,0.40)', }} /> - + WING-OPS 사용 중
@@ -511,7 +511,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => { borderColor: isDark ? 'rgba(140,144,159,0.25)' : 'rgba(148,163,184,0.30)', }} /> - + 미지원 (1280px 미만)
@@ -525,7 +525,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {

Grid

-

+

컬럼, 마진, 거터로 구성된 그리드 시스템입니다. 데스크톱 전용으로 xl / 2xl 두 구간만 지원합니다.

@@ -548,7 +548,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => { style={{ borderColor: isDark ? 'rgba(66,71,84,0.20)' : '#e2e8f0' }} >
- + Breakpoint {
- + Width - + {spec.width}
@@ -683,7 +683,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => { ⚠ - + 1280px 미만 미지원 — Mobile / Tablet 구간(xs / s / md / lg)은 데스크톱 전용 운영 정책에 따라 지원하지 않습니다. @@ -696,7 +696,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {

App Shell

-

+

WING-OPS 애플리케이션의 기본 레이아웃 구조와 KRDS Sub-page 영역 매핑입니다.

@@ -720,7 +720,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => { }} >
- + TopBar {

Spacing

-

+

UI 요소 간의 간격과 여백을 정의하여 콘텐츠의 위계와 가독성을 조율합니다. Tailwind spacing 토큰과 직결되며, 막대 길이는 실제 px 비율입니다.

@@ -1000,7 +1000,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {

4pt Grid

-

+

모든 여백과 간격을 4point 단위로 설정해 규칙성을 확보합니다. 컴팩트한 컴포넌트의 경우, 2의 배수 단위를 제한적으로 사용합니다.

@@ -1048,7 +1048,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => { > {item.label} - + {item.text}
@@ -1145,7 +1145,10 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => { minWidth: '180px', }} > - + 카드 타이틀 @@ -1185,7 +1188,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => { 디자인 시스템 진실 소스
-

+

UI 요소의 레이어 스택 순서입니다. 높은 z-index가 위에 표시되며, 이 값은 디자인 시스템의 이상적 설계 값으로 실제 코드는 이 값에 맞춰 정정되어야 합니다.

@@ -1216,7 +1219,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => { className="w-2 h-2 rounded-full shrink-0" style={{ backgroundColor: layer.color }} /> - + {layer.name} @@ -1234,7 +1237,7 @@ export const LayoutContent = ({ theme }: LayoutContentProps) => {

Reference

-

+

App Shell CSS 클래스와 KRDS Grid 규칙 비교 — 코드 작성 시 참조용입니다.

diff --git a/frontend/src/pages/design/RadiusContent.tsx b/frontend/src/pages/design/RadiusContent.tsx index 0f34e49..04d3e89 100644 --- a/frontend/src/pages/design/RadiusContent.tsx +++ b/frontend/src/pages/design/RadiusContent.tsx @@ -70,17 +70,17 @@ export const RadiusContent = ({ theme }: RadiusContentProps) => {

Radius

-

+

Radius는 컴포넌트 혹은 콘텐츠 모서리의 둥글기를 표현합니다.

-

+

Radius는 UI 구성 요소의 모서리를 둥글게 처리하여 부드럽고 현대적인 느낌을 제공합니다. 일관된 Radius 값은 브랜드 아이덴티티를 강화하고, 사용자 경험을 향상시키며, 다양한 화면과 컨텍스트에서 시각적 일관성을 유지하는 데 중요한 역할을 합니다.

  • @@ -203,7 +203,7 @@ export const RadiusContent = ({ theme }: RadiusContentProps) => {

    컴포넌트 매핑

    -

    +

    wing.css 컴포넌트 클래스에 적용된 Radius 토큰입니다.

@@ -233,7 +233,7 @@ export const RadiusContent = ({ theme }: RadiusContentProps) => { {/* 정보 */}
- + {item.className}
diff --git a/frontend/src/pages/design/TextFieldContent.tsx b/frontend/src/pages/design/TextFieldContent.tsx index 9ec4386..2891f0a 100644 --- a/frontend/src/pages/design/TextFieldContent.tsx +++ b/frontend/src/pages/design/TextFieldContent.tsx @@ -207,7 +207,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => { {/* ── 섹션 1: 헤더 ── */}

Components @@ -225,7 +225,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {

Input Field

-

+

단일 행 텍스트를 입력받는 필드입니다.

@@ -246,7 +246,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => { {/* Prefix label */}
Prefix @@ -272,7 +272,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => { {/* Input label */}
Input @@ -295,7 +295,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => { {/* Suffix label */}
Suffix @@ -377,7 +377,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => { {/* Suffix 텍스트 */} 원 @@ -402,7 +402,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => { }} > Container @@ -437,7 +437,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => { style={{ width: '1px', height: '10px', backgroundColor: annotationColor }} /> Clear Button @@ -468,7 +468,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => { Container
-

+

입력 필드의 외곽 영역입니다. 테두리, 곡률, 내부 여백을 정의합니다.

@@ -519,13 +519,13 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
-

+

height: 44px (Medium)

-

+

padding: 12px (좌우)

-

+

border-radius: 6px

@@ -543,14 +543,14 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => { Placeholder
-

+

값이 입력되지 않았을 때 표시되는 안내 텍스트입니다. 입력 시 사라집니다.

{/* 플레이스홀더 있는 필드 */}
- + 플레이스홀더 있음
{ {/* 빈 필드 (플레이스홀더 없음) */}
- + 플레이스홀더 없음
{ Label
-

+

입력 필드의 용도를 설명하는 텍스트입니다. 필수 항목은 * 표시로 구분합니다.

{/* 일반 라벨 */}
- + 이름
{ {/* 필수 라벨 */}
- + 이메일 *
{ Input Text
-

+

사용자가 실제로 입력한 텍스트입니다. 플레이스홀더보다 진한 색상으로 표시됩니다.

@@ -673,7 +679,10 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => { > 홍길동
-
+
font-size: 14px color: textPrimary font-weight: 400 @@ -692,14 +701,14 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => { Clear Icon
-

+

입력값이 있을 때 표시되는 초기화 버튼입니다. 클릭 시 입력값을 삭제합니다.

{/* 텍스트 입력 + Clear 아이콘 표시 */}
- + 입력값 있음 (Clear 표시)
{ {/* 빈 상태 (Clear 미표시) */}
- + 입력값 없음 (Clear 미표시)
{ Helper Text
-

+

입력 필드 하단에 표시되는 보조 텍스트입니다. 안내 또는 에러 메시지로 사용됩니다.

@@ -787,7 +796,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => { > 비밀번호
- + 영문, 숫자 포함 8자 이상
@@ -807,7 +816,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => { > 비밀번호
- + 필수 입력 항목입니다.
@@ -828,7 +837,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
{/* 왼쪽: State 라벨 + 뱃지 */}
- + State {

Text Area

-

+

여러 줄의 텍스트를 입력받는 필드입니다.

@@ -911,7 +920,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => { {/* Input Area label */}
Input Area @@ -933,7 +942,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => { {/* Placeholder label */}
Placeholder @@ -955,7 +964,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => { {/* Character Counter label */}
Character Counter @@ -1042,7 +1051,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => { }} > Container @@ -1075,7 +1084,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => { style={{ width: '1px', height: '10px', backgroundColor: annotationColor }} /> Resize Handle @@ -1103,7 +1112,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => { Container
-

+

텍스트 영역의 외곽 컨테이너입니다. 기본 높이 112px이며 사용자가 리사이즈할 수 있습니다.

@@ -1154,16 +1163,16 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
-

+

height: 112px (default)

-

+

padding: 12px

-

+

border-radius: 6px

-

+

resize: vertical

@@ -1181,14 +1190,14 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => { Placeholder
-

+

값이 입력되지 않았을 때 표시되는 안내 텍스트입니다.

{/* 플레이스홀더 있는 TextArea */}
- + 플레이스홀더 있음
{ {/* 빈 TextArea */}
- + 플레이스홀더 없음
{ Label
-

+

텍스트 영역의 용도를 설명하는 라벨입니다.

{/* 기본 라벨 */}
- + 내용
{ {/* 필수(*) 라벨 */}
- + 비고 *
{ Input Text
-

+

사용자가 입력한 여러 줄의 텍스트입니다.

@@ -1316,7 +1331,10 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => { > {'오늘 점검 내용을 기록합니다.\n상세 내용은 아래와 같습니다.'}
-
+
font-size: 14px color: textPrimary line-height: 1.6 @@ -1335,14 +1353,14 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => { Clear Icon
-

+

입력값 초기화 버튼입니다. 텍스트 영역 우상단에 표시됩니다.

{/* 텍스트 있는 상태 (Clear 표시) */}
- + 입력값 있음 (Clear 표시)
{ {/* 빈 상태 (Clear 미표시) */}
- + 입력값 없음 (Clear 미표시)
{ Helper Text
-

+

텍스트 영역 하단의 도움말 또는 에러 메시지입니다.

@@ -1434,10 +1452,10 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => { 내용을 입력하세요
- + 상세 내용을 입력해 주세요 - + 0/500
@@ -1459,7 +1477,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => { > 내용을 입력하세요
- + 필수 입력 항목입니다.
@@ -1480,7 +1498,7 @@ export const TextFieldContent = ({ theme }: TextFieldContentProps) => {
{/* 왼쪽: State 라벨 + 뱃지 */}
- + State {

Typography

-

+

WING-OPS 인터페이스에서 사용되는 타이포그래피 체계입니다. 폰트 패밀리, 크기, 두께를 토큰과 컴포넌트 클래스로 정의하여 시각적 계층 구조와 일관성을 유지합니다.

-

+

개요

  • @@ -337,7 +337,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {

    글꼴

    -

    +

    사용자의 디바이스 환경을 고려하여, 시스템 폰트와 웹 폰트를 조합하여 사용합니다. 한국어 UI에 최적화된 폰트 스택으로 다양한 기기에서 일관된 가독성을 보장합니다.

    @@ -352,7 +352,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => { }} > 
                 font-family
@@ -390,7 +390,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {
{ > {font.stack}
-

{font.usage}

+

{font.usage}

Regular @@ -421,7 +421,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {

타입 스케일

-

+

Display, Heading, Body, Navigation, Label의 5가지 용도 카테고리에 맞게 조합하여 사용합니다.

@@ -434,7 +434,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {

{category.name}

-

+

{category.description}

@@ -445,7 +445,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => { style={{ border: `1px solid ${isDark ? 'rgba(66,71,84,0.20)' : '#e2e8f0'}` }} >
{ backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa', }} > - + {row.token} - + {row.px} - + {row.weight} {`${(row.lineHeight * 100).toFixed(0)}%`} - + {row.letterSpacing} { >
{row.token} @@ -533,7 +536,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => { {row.sample}
-
+
{row.role}
@@ -551,7 +554,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {

폰트 두께 토큰

-

+

기본 두께 Regular(400), 강조 Bold(700). Medium(500)은 레이블과 소제목, Thin(300)은 장식적 대형 텍스트에 사용합니다.

@@ -561,7 +564,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => { style={{ border: `1px solid ${isDark ? 'rgba(66,71,84,0.20)' : '#e2e8f0'}` }} >
{ backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa', }} > - + {row.token} - + {row.value} - + {row.name} {row.preview} @@ -632,7 +638,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {

줄 높이 토큰

-

+

대형 텍스트는 타이트하게(1.3), 본문은 여유롭게(1.6). 가독성과 공간 효율의 균형을 맞춥니다.

@@ -642,7 +648,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => { style={{ border: `1px solid ${isDark ? 'rgba(66,71,84,0.20)' : '#e2e8f0'}` }} >
{ backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa', }} > - + {row.token} - + {row.value} - + {row.pct} - + {row.desc}
@@ -700,7 +709,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => {

자간 토큰

-

+

카테고리별로 자간을 정의합니다. Display는 넓게, Body는 기본값을 사용합니다.

@@ -709,7 +718,7 @@ export const TypographyContent = ({ theme }: TypographyContentProps) => { style={{ border: `1px solid ${isDark ? 'rgba(66,71,84,0.20)' : '#e2e8f0'}` }} >
{ backgroundColor: isDark ? 'rgba(255,255,255,0.02)' : '#fafafa', }} > - + {row.token} - + {row.value} { > {row.tw} - + {row.category}
diff --git a/frontend/src/pages/design/components/ButtonCatalogSection.tsx b/frontend/src/pages/design/components/ButtonCatalogSection.tsx index bd8fe8d..f4ef9e4 100644 --- a/frontend/src/pages/design/components/ButtonCatalogSection.tsx +++ b/frontend/src/pages/design/components/ButtonCatalogSection.tsx @@ -167,7 +167,7 @@ export const ButtonCatalogSection = () => {
제어 인터페이스: 버튼 @@ -185,7 +185,7 @@ export const ButtonCatalogSection = () => { className="pt-px pr-2 pb-[17.5px] pl-2 flex flex-col gap-0 items-start justify-start flex-1 min-w-0 relative" >
{header} @@ -207,7 +207,7 @@ export const ButtonCatalogSection = () => { > {/* 버튼 유형 레이블 */}
-
+
{row.label}
diff --git a/frontend/src/pages/design/components/CardSection.tsx b/frontend/src/pages/design/components/CardSection.tsx index 4d6118c..17d1627 100644 --- a/frontend/src/pages/design/components/CardSection.tsx +++ b/frontend/src/pages/design/components/CardSection.tsx @@ -129,7 +129,7 @@ export const CardSection = () => {
24.8
-
+
노트 (knots)
diff --git a/frontend/src/pages/design/components/IconBadgeSection.tsx b/frontend/src/pages/design/components/IconBadgeSection.tsx index 87c1953..bb947a9 100644 --- a/frontend/src/pages/design/components/IconBadgeSection.tsx +++ b/frontend/src/pages/design/components/IconBadgeSection.tsx @@ -61,7 +61,7 @@ export const IconBadgeSection = () => {
마이크로 컨트롤: 아이콘 버튼 @@ -113,7 +113,7 @@ export const IconBadgeSection = () => {
마이크로 컨트롤: 아이콘 버튼 diff --git a/frontend/src/pages/design/float/FloatDropdownContent.tsx b/frontend/src/pages/design/float/FloatDropdownContent.tsx index 9a3792e..2391c4d 100644 --- a/frontend/src/pages/design/float/FloatDropdownContent.tsx +++ b/frontend/src/pages/design/float/FloatDropdownContent.tsx @@ -36,10 +36,10 @@ export const FloatDropdownContent = ({ theme }: FloatDropdownContentProps) => {

Dropdown

-

+

트리거 요소에{' '} { 로 부착되는 선택 목록. 5개 이상의 선택지가 있는 단일 선택에 사용한다. 프로젝트 공통 컴포넌트는{' '} { >

- + 유출 유형 {
- + 예측 알고리즘 {
-

+

위 컴포넌트는{' '} @common/components/ui/ComboBox @@ -373,7 +373,7 @@ export const FloatDropdownContent = ({ theme }: FloatDropdownContentProps) => {

- + {row.desc}
@@ -423,10 +423,16 @@ export const FloatDropdownContent = ({ theme }: FloatDropdownContentProps) => { : t.cardBorder, }} > - + {item.title} - + {item.desc}
diff --git a/frontend/src/pages/design/float/FloatModalContent.tsx b/frontend/src/pages/design/float/FloatModalContent.tsx index 5eed471..0557b78 100644 --- a/frontend/src/pages/design/float/FloatModalContent.tsx +++ b/frontend/src/pages/design/float/FloatModalContent.tsx @@ -88,9 +88,9 @@ export const FloatModalContent = ({ theme }: FloatModalContentProps) => {

Modal

-

+

{ ))}

- + {SIZE_CONFIG[activeSize].desc}
@@ -166,7 +166,7 @@ export const FloatModalContent = ({ theme }: FloatModalContentProps) => {
@@ -480,7 +483,7 @@ export const FloatModalContent = ({ theme }: FloatModalContentProps) => { }} >
- + {item.component}
@@ -496,7 +499,7 @@ export const FloatModalContent = ({ theme }: FloatModalContentProps) => {
- + {item.trigger}
@@ -533,7 +536,10 @@ export const FloatModalContent = ({ theme }: FloatModalContentProps) => { className="flex items-center justify-between px-5 py-4 border-b border-solid shrink-0" style={{ borderColor: modalBorder }} > - + Modal Preview — {SIZE_CONFIG[activeSize].label} ({SIZE_CONFIG[activeSize].width})
-

+

이 모달은{' '} { className="rounded border border-solid px-3 py-2.5" style={{ borderColor: t.cardBorder }} > - + {label}

@@ -582,7 +588,7 @@ export const FloatModalContent = ({ theme }: FloatModalContentProps) => {
-

+

삭제된 데이터는 복구할 수 없습니다. 계속 진행하시겠습니까?

@@ -641,7 +650,7 @@ export const FloatModalContent = ({ theme }: FloatModalContentProps) => {
- + {row.overlay}
- + {row.modal}
@@ -284,7 +284,7 @@ export const FloatOverlayContent = ({ theme }: FloatOverlayContentProps) => { className="rounded-lg border border-solid p-5 flex flex-col gap-4" style={{ backgroundColor: t.cardBg, borderColor: t.cardBorder }} > -

+

ScatPopup은 지도 마커에 앵커된 컨텍스트 팝업이다. Modal(fixed 뷰포트 중앙)과 달리 마커 위치에서 동적으로 좌표를 계산하며, 지도 패닝·줌 시 위치가 함께 업데이트된다. @@ -307,7 +307,7 @@ export const FloatOverlayContent = ({ theme }: FloatOverlayContentProps) => { {item.label} - + {item.value} @@ -323,7 +323,7 @@ export const FloatOverlayContent = ({ theme }: FloatOverlayContentProps) => { borderColor: 'rgba(234,179,8,0.25)', }} > - + 주의: ScatPopup은 MapLibre GL JS의 Popup/Marker 컴포넌트가 아닌 React DOM으로 구현됨. 지도 컨테이너 내부에 position: absolute로 렌더링된다. @@ -377,7 +377,7 @@ export const FloatOverlayContent = ({ theme }: FloatOverlayContentProps) => { }} >

- + {item.component}
@@ -413,7 +413,10 @@ export const FloatOverlayContent = ({ theme }: FloatOverlayContentProps) => {
- + {item.desc}
diff --git a/frontend/src/pages/design/float/FloatToastContent.tsx b/frontend/src/pages/design/float/FloatToastContent.tsx index 05aea63..1f14fb1 100644 --- a/frontend/src/pages/design/float/FloatToastContent.tsx +++ b/frontend/src/pages/design/float/FloatToastContent.tsx @@ -84,10 +84,10 @@ export const FloatToastContent = ({ theme }: FloatToastContentProps) => { 미구현 — 설계 사양
-

+

화면을 차단하지 않는 비파괴적 알림. { 에 위치하며 일정 시간 후 자동으로 사라진다. 현재 프로젝트에서는{' '} { className="rounded-lg border border-solid p-5 flex flex-col gap-4" style={{ backgroundColor: t.cardBg, borderColor: t.cardBorder }} > -

+

버튼 클릭 시 화면 우하단에 Toast가 표시됩니다. 3초 후 자동으로 사라집니다.

@@ -280,7 +280,7 @@ export const FloatToastContent = ({ theme }: FloatToastContentProps) => { {cfg.icon} - + {cfg.label}
@@ -311,7 +311,7 @@ export const FloatToastContent = ({ theme }: FloatToastContentProps) => { className="rounded-lg border border-solid p-5 flex flex-col gap-4" style={{ backgroundColor: t.cardBg, borderColor: t.cardBorder }} > -

+

Toast는 앱 어디서든 호출해야 하므로 Zustand store + useToast hook{' '} 패턴을 권장한다. ToastContainer는 App.tsx 최상위에 한 번만 렌더링한다.

@@ -387,7 +387,7 @@ export const FloatToastContent = ({ theme }: FloatToastContentProps) => { {cfg.icon} - + {toast.message} @@ -162,7 +162,7 @@ export default function BoardMgmtPanel({ initialCategory = '' }: BoardMgmtPanelP @@ -170,7 +170,7 @@ export default function BoardMgmtPanel({ initialCategory = '' }: BoardMgmtPanelP {/* 테이블 */}
- +
diff --git a/frontend/src/tabs/admin/components/CollectHrPanel.tsx b/frontend/src/tabs/admin/components/CollectHrPanel.tsx index b943d1d..5cd324e 100644 --- a/frontend/src/tabs/admin/components/CollectHrPanel.tsx +++ b/frontend/src/tabs/admin/components/CollectHrPanel.tsx @@ -211,7 +211,7 @@ const HEADERS = [ function HrTable({ rows, loading }: { rows: HrCollectItem[]; loading: boolean }) { return (
-
@@ -222,7 +222,7 @@ export default function BoardMgmtPanel({ initialCategory = '' }: BoardMgmtPanelP @@ -234,7 +234,7 @@ export default function BoardMgmtPanel({ initialCategory = '' }: BoardMgmtPanelP diff --git a/frontend/src/tabs/admin/components/CleanupEquipPanel.tsx b/frontend/src/tabs/admin/components/CleanupEquipPanel.tsx index ba1793a..0f60686 100644 --- a/frontend/src/tabs/admin/components/CleanupEquipPanel.tsx +++ b/frontend/src/tabs/admin/components/CleanupEquipPanel.tsx @@ -99,13 +99,15 @@ function CleanupEquipPanel() {

방제장비 현황

-

총 {filtered.length}개 기관

+

+ 총 {filtered.length}개 기관 +

{typeOptions.map((t) => ( @@ -129,7 +131,7 @@ function CleanupEquipPanel() {
조회된 기관이 없습니다.
+
{HEADERS.map((h) => ( @@ -317,10 +317,10 @@ export default function CollectHrPanel() {
{/* 헤더 */}
-

인사정보 수집 현황

+

인사정보 수집 현황

{lastUpdate && ( - + 갱신:{' '} {lastUpdate.toLocaleTimeString('ko-KR', { hour: '2-digit', @@ -332,7 +332,7 @@ export default function CollectHrPanel() {
diff --git a/frontend/src/tabs/admin/components/DispersingZonePanel.tsx b/frontend/src/tabs/admin/components/DispersingZonePanel.tsx index 4f07252..884bd7b 100644 --- a/frontend/src/tabs/admin/components/DispersingZonePanel.tsx +++ b/frontend/src/tabs/admin/components/DispersingZonePanel.tsx @@ -130,7 +130,9 @@ const DispersingZonePanel = () => { onClick={() => handleToggleExpand(zone)} > - {info.label} + + {info.label} + {/* 토글 스위치 */} @@ -487,7 +487,7 @@ const LayerPanel = () => { {/* 오류 메시지 */} {error && ( -
+
{error}
)} @@ -495,7 +495,7 @@ const LayerPanel = () => { {/* 테이블 영역 */}
{loading ? ( -
+
불러오는 중...
) : ( @@ -539,7 +539,7 @@ const LayerPanel = () => {
@@ -551,15 +551,15 @@ const LayerPanel = () => { className="border-b border-stroke hover:bg-[rgba(255,255,255,0.02)] transition-colors" > {/* 번호 */} - {/* 레이어코드 */} {/* 레이어명 */} - + {/* 레이어전체명 */} - {/* 정렬순서 */} - {/* 등록일시 */} @@ -614,13 +614,13 @@ const LayerPanel = () => {
diff --git a/frontend/src/tabs/admin/components/MapBasePanel.tsx b/frontend/src/tabs/admin/components/MapBasePanel.tsx index 50efd74..539f26f 100644 --- a/frontend/src/tabs/admin/components/MapBasePanel.tsx +++ b/frontend/src/tabs/admin/components/MapBasePanel.tsx @@ -78,7 +78,7 @@ function MapBaseModal({
{/* 모달 헤더 */}
-

+

{isEdit ? '지도 수정' : '지도 등록'}

@@ -123,7 +123,7 @@ function MapBaseModal({ onChange={(e) => setField('mapKey', e.target.value)} placeholder="고유 식별 키 (영문/숫자)" disabled={isEdit} - className="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 font-mono disabled:opacity-50 disabled:cursor-not-allowed" + className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-mono disabled:opacity-50 disabled:cursor-not-allowed" />
@@ -135,7 +135,7 @@ function MapBaseModal({
데이터가 없습니다. + {(page - 1) * PAGE_SIZE + idx + 1} {item.layerCd}{item.layerNm}{item.layerNm} + {item.layerFullNm} @@ -575,7 +575,7 @@ const LayerPanel = () => { {item.wmsLayerNm ?? -} + {item.sortOrd}
+
@@ -433,7 +433,7 @@ function MapBasePanel() {
번호 @@ -441,7 +441,7 @@ function MapBasePanel() { @@ -452,7 +452,7 @@ function MapBasePanel() {
{!loading && items.length === 0 && ( -
+
등록된 지도가 없습니다.
)} @@ -464,7 +464,7 @@ function MapBasePanel() { @@ -476,7 +476,7 @@ function MapBasePanel() { diff --git a/frontend/src/tabs/admin/components/MenusPanel.tsx b/frontend/src/tabs/admin/components/MenusPanel.tsx index dc9786c..d9e603b 100644 --- a/frontend/src/tabs/admin/components/MenusPanel.tsx +++ b/frontend/src/tabs/admin/components/MenusPanel.tsx @@ -124,7 +124,7 @@ function MenusPanel() { if (loading) { return (
-
메뉴 설정을 불러오는 중...
+
메뉴 설정을 불러오는 중...
); } @@ -136,14 +136,14 @@ function MenusPanel() {

메뉴 관리

-

+

메뉴 표시 여부, 순서, 라벨, 아이콘을 관리합니다

@@ -815,7 +815,7 @@ function UserPermTab({ roles, permTree, rolePerms }: UserPermTabProps) { onFocus={() => setShowDropdown(true)} placeholder={loadingUsers ? '불러오는 중...' : '이름, 계정, 조직으로 검색...'} disabled={loadingUsers} - className="w-full max-w-sm 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 font-korean disabled:opacity-50" + className="w-full max-w-sm px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean disabled:opacity-50" /> {showDropdown && filteredUsers.length > 0 && (
@@ -826,7 +826,7 @@ function UserPermTab({ roles, permTree, rolePerms }: UserPermTabProps) { className="w-full px-3 py-2 text-left hover:bg-bg-surface-hover transition-colors flex items-center gap-2" >
-
+
{user.name} {user.rank && ( @@ -848,7 +848,7 @@ function UserPermTab({ roles, permTree, rolePerms }: UserPermTabProps) {
)} {showDropdown && !loadingUsers && filteredUsers.length === 0 && searchQuery && ( -
+
검색 결과 없음
)} @@ -954,13 +954,13 @@ function UserPermTab({ roles, permTree, rolePerms }: UserPermTabProps) {
) : ( -
+
역할을 하나 이상 할당하면 유효 권한이 표시됩니다
)} ) : ( -
+
사용자를 선택하세요
)} @@ -1180,7 +1180,7 @@ function PermissionsPanel() { if (loading) { return ( -
+
불러오는 중...
); @@ -1194,7 +1194,7 @@ function PermissionsPanel() { style={{ flexShrink: 0 }} >
-

권한 관리

+

권한 관리

역할별 리소스 × CRUD 권한 설정

@@ -1203,7 +1203,7 @@ function PermissionsPanel() {
@@ -168,7 +168,7 @@ const SensitiveLayerPanel = ({ categoryCode, title }: SensitiveLayerPanelProps) {/* 오류 메시지 */} {error && ( -
+
{error}
)} @@ -176,7 +176,7 @@ const SensitiveLayerPanel = ({ categoryCode, title }: SensitiveLayerPanelProps) {/* 테이블 영역 */}
{loading ? ( -
+
불러오는 중...
) : ( @@ -217,7 +217,7 @@ const SensitiveLayerPanel = ({ categoryCode, title }: SensitiveLayerPanelProps) 데이터가 없습니다. @@ -228,12 +228,12 @@ const SensitiveLayerPanel = ({ categoryCode, title }: SensitiveLayerPanelProps) key={item.layerCd} className="border-b border-stroke hover:bg-[rgba(255,255,255,0.02)] transition-colors" > - + {(page - 1) * PAGE_SIZE + idx + 1} {item.layerCd} - {item.layerNm} - + {item.layerNm} + {item.layerFullNm} @@ -246,7 +246,7 @@ const SensitiveLayerPanel = ({ categoryCode, title }: SensitiveLayerPanelProps) {item.wmsLayerNm ?? -} - + {item.sortOrd} diff --git a/frontend/src/tabs/admin/components/SettingsPanel.tsx b/frontend/src/tabs/admin/components/SettingsPanel.tsx index bd09b68..36e8923 100644 --- a/frontend/src/tabs/admin/components/SettingsPanel.tsx +++ b/frontend/src/tabs/admin/components/SettingsPanel.tsx @@ -54,7 +54,7 @@ function SettingsPanel() { if (loading) { return ( -
+
불러오는 중...
); @@ -64,7 +64,7 @@ function SettingsPanel() {

시스템 설정

-

+

사용자 등록 및 권한 관련 시스템 설정을 관리합니다

@@ -74,7 +74,7 @@ function SettingsPanel() { {/* 사용자 등록 설정 */}
-

사용자 등록 설정

+

사용자 등록 설정

신규 사용자 등록 시 적용되는 정책을 설정합니다

@@ -140,7 +140,7 @@ function SettingsPanel() { {/* OAuth 설정 */}
-

Google OAuth 설정

+

Google OAuth 설정

Google 계정 로그인 시 자동 승인할 이메일 도메인을 설정합니다

@@ -162,7 +162,7 @@ function SettingsPanel() { value={oauthDomainInput} onChange={(e) => setOauthDomainInput(e.target.value)} placeholder="gcsc.co.kr, example.com" - className="flex-1 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 font-mono" + className="flex-1 px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-mono" /> - + {idx + 1} {isEditing ? ( @@ -152,14 +152,14 @@ function SortableMenuItem({ diff --git a/frontend/src/tabs/admin/components/UsersPanel.tsx b/frontend/src/tabs/admin/components/UsersPanel.tsx index a3bb490..5a57d34 100644 --- a/frontend/src/tabs/admin/components/UsersPanel.tsx +++ b/frontend/src/tabs/admin/components/UsersPanel.tsx @@ -87,7 +87,7 @@ function RegisterModal({ allRoles, allOrgs, onClose, onSuccess }: RegisterModalP
{/* 헤더 */}
-

사용자 등록

+

사용자 등록

@@ -129,7 +129,7 @@ function RegisterModal({ allRoles, allOrgs, onClose, onSuccess }: RegisterModalP value={password} onChange={(e) => setPassword(e.target.value)} placeholder="초기 비밀번호" - className="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 font-mono" + className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-mono" />
@@ -143,7 +143,7 @@ function RegisterModal({ allRoles, allOrgs, onClose, onSuccess }: RegisterModalP value={name} onChange={(e) => setName(e.target.value)} placeholder="실명" - className="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 font-korean" + className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean" />
@@ -157,7 +157,7 @@ function RegisterModal({ allRoles, allOrgs, onClose, onSuccess }: RegisterModalP value={rank} onChange={(e) => setRank(e.target.value)} placeholder="예: 팀장, 주임 등" - className="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 font-korean" + className="w-full px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-korean" />
@@ -169,7 +169,7 @@ function RegisterModal({ allRoles, allOrgs, onClose, onSuccess }: RegisterModalP setOrgSn(e.target.value !== '' ? Number(e.target.value) : '')} - className="w-full px-3 py-1.5 text-xs bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean" + className="w-full px-3 py-1.5 text-caption bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean" > {allOrgs.map((org) => ( @@ -427,7 +427,7 @@ function UserDetailModal({ user, allOrgs, onClose, onUpdated }: UserDetailModalP value={newPassword} onChange={(e) => setNewPassword(e.target.value)} placeholder="새 비밀번호 입력" - className="w-full px-3 py-1.5 text-xs bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-mono" + className="w-full px-3 py-1.5 text-caption bg-bg-elevated border border-stroke rounded-md text-fg placeholder-fg-disabled focus:border-color-accent focus:outline-none font-mono" />
@@ -680,7 +680,7 @@ function UsersPanel() {

사용자 관리

-

+

총 {filteredUsers.length}명

@@ -698,7 +698,7 @@ function UsersPanel() { setOrgFilter(e.target.value); setCurrentPage(1); }} - className="px-3 py-2 text-xs bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean" + className="px-3 py-2 text-caption bg-bg-elevated border border-stroke rounded-md text-fg focus:border-color-accent focus:outline-none font-korean" > {allOrgs.map((org) => ( @@ -711,7 +711,7 @@ function UsersPanel() { @@ -110,7 +110,7 @@ function VesselMaterialsPanel() { setDate(e.target.value)} - className="px-2 py-1 text-xs rounded bg-bg-elevated border border-stroke-1 text-fg" + className="px-2 py-1 text-caption rounded bg-bg-elevated border border-stroke-1 text-fg" /> @@ -163,7 +163,7 @@ export default function VesselSignalPanel() {
{loading ? (
- 로딩 중... + 로딩 중...
) : (
diff --git a/frontend/src/tabs/aerial/components/CctvView.tsx b/frontend/src/tabs/aerial/components/CctvView.tsx index 93ec81e..1cb1474 100644 --- a/frontend/src/tabs/aerial/components/CctvView.tsx +++ b/frontend/src/tabs/aerial/components/CctvView.tsx @@ -589,7 +589,7 @@ export function CctvView() { {/* 헤더 */}
-
+
-
+
{selectedCamera ? `📹 ${selectedCamera.cameraNm}` : '📹 카메라를 선택하세요'}
{selectedCamera?.sttsCd === 'LIVE' && ( @@ -966,7 +966,7 @@ export function CctvView() {
{/* 출처 헤더 */}
- {group.icon} + {group.icon} {group.label} diff --git a/frontend/src/tabs/aerial/components/MediaManagement.tsx b/frontend/src/tabs/aerial/components/MediaManagement.tsx index 1fa4469..b5f281c 100644 --- a/frontend/src/tabs/aerial/components/MediaManagement.tsx +++ b/frontend/src/tabs/aerial/components/MediaManagement.tsx @@ -421,7 +421,7 @@ export function MediaManagement() {
📥
-
다운로드 완료
+
다운로드 완료
총 {downloadResult.total}건 선택
@@ -441,7 +441,7 @@ export function MediaManagement() {
@@ -475,7 +475,7 @@ export function MediaManagement() {
-
-
-