| {
|
{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) => {
/>
@@ -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 ;
+ case 'dropdown':
+ return ;
+ case 'overlay':
+ return ;
+ case 'toast':
+ return ;
+ }
+ };
+
+ return (
+
+ {/* 서브탭 헤더 */}
+
+
+
+
+ Float
+
+
+ 화면 위에 떠서 표시되는 UI 패턴 카탈로그 — Modal, Dropdown, Overlay, Toast
+
+
+
+ {/* 서브탭 바 */}
+
+
+
+
+ {/* 서브탭 콘텐츠 */}
+ {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) => (
+
+ ))}
+
+
+ {SIZE_CONFIG[activeSize].desc}
+
+
+
+ {/* 버튼 그룹 */}
+
+
+
+
+
+
+
+ {/* ── 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})
+
+
+
+
+
+ 이 모달은{' '}
+
+ fixed inset-0, z-[9999]
+ {' '}
+ 백드롭 위에 렌더링됩니다. 백드롭 클릭 또는 닫기 버튼으로 닫을 수 있습니다.
+
+
+ {['파라미터 입력 필드', '선택 항목', '추가 설정값'].map((label) => (
+
+
+ {label}
+
+
+ ))}
+
+
+
+
+
+
+
+
+ )}
+
+ {/* ── 실제 Confirm 렌더링 ── */}
+ {isConfirmOpen && (
+
+
+
+
+ ⚠
+
+ 항목을 삭제하시겠습니까?
+
+
+
+
+
+ 삭제된 데이터는 복구할 수 없습니다. 계속 진행하시겠습니까?
+
+
+
+
+
+
+
+
+ )}
+
+ {/* ── 개요 ── */}
+
+
+ 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}
+
+
+
+ ))}
+
+
+
+ {/* ── 개요 ── */}
+
+
+
+ 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 (
+
+ );
+ })}
+
+ {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 => )}\n ',
+ 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}
+
+
+
+ {/* 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) => {
|