Merge pull request 'feat(design): Stitch MCP 디자인 시스템 카탈로그 + 관리자 패널 추가' (#120) from feature/stitch-mcp into develop
This commit is contained in:
커밋
e50b3304c2
@ -19,6 +19,8 @@
|
|||||||
- react-router-dom 도입, BrowserRouter 래핑
|
- react-router-dom 도입, BrowserRouter 래핑
|
||||||
- SVG 아이콘 에셋 19종 추가
|
- SVG 아이콘 에셋 19종 추가
|
||||||
- @/ path alias 추가
|
- @/ path alias 추가
|
||||||
|
- 디자인: Components 탭 추가 (Button, TextField, Overview 페이지)
|
||||||
|
- 관리자: 수거인력 패널 및 선박모니터링 패널 추가
|
||||||
- 레이어: 레이어 데이터 테이블 매핑 구현 + 어장 팝업 수정
|
- 레이어: 레이어 데이터 테이블 매핑 구현 + 어장 팝업 수정
|
||||||
- 확산예측: 예측 실행 시 기상정보(풍속·풍향·기압·파고·수온·기온·염분 등) ACDNT_WEATHER 테이블에 자동 저장
|
- 확산예측: 예측 실행 시 기상정보(풍속·풍향·기압·파고·수온·기온·염분 등) ACDNT_WEATHER 테이블에 자동 저장
|
||||||
- DB: ACDNT_WEATHER 테이블에 구조화된 기상 수치 컬럼 19개 추가 (025 마이그레이션)
|
- DB: ACDNT_WEATHER 테이블에 구조화된 기상 수치 컬럼 19개 추가 (025 마이그레이션)
|
||||||
@ -30,6 +32,7 @@
|
|||||||
- 관리자: 방제장비 현황 패널에 장비 타입 필터 및 조건부 컬럼 강조 스타일 추가
|
- 관리자: 방제장비 현황 패널에 장비 타입 필터 및 조건부 컬럼 강조 스타일 추가
|
||||||
|
|
||||||
### 변경
|
### 변경
|
||||||
|
- 디자인: 색상 팔레트 컨텐츠 개선 + base.css 확장
|
||||||
- SCAT 지도 하드코딩 제주 해안선 제거, 인접 구간 기반 동적 방향 계산으로 전환
|
- SCAT 지도 하드코딩 제주 해안선 제거, 인접 구간 기반 동적 방향 계산으로 전환
|
||||||
- 예측: 분석 API를 예측 서비스로 통합 (analysisRouter 제거)
|
- 예측: 분석 API를 예측 서비스로 통합 (analysisRouter 제거)
|
||||||
- 예측: 예측 API 확장 (predictionRouter/Service, LeftPanel/RightPanel 연동)
|
- 예측: 예측 API 확장 (predictionRouter/Service, LeftPanel/RightPanel 연동)
|
||||||
|
|||||||
@ -23,6 +23,84 @@
|
|||||||
--fM: JetBrains Mono, monospace;
|
--fM: JetBrains Mono, monospace;
|
||||||
--rS: 6px;
|
--rS: 6px;
|
||||||
--rM: 8px;
|
--rM: 8px;
|
||||||
|
|
||||||
|
/* === Design Token System === */
|
||||||
|
|
||||||
|
/* Static */
|
||||||
|
--static-black: #131415;
|
||||||
|
--static-white: #ffffff;
|
||||||
|
|
||||||
|
/* Gray */
|
||||||
|
--gray-100: #f1f5f9;
|
||||||
|
--gray-200: #e2e8f0;
|
||||||
|
--gray-300: #cbd5e1;
|
||||||
|
--gray-400: #94a3b8;
|
||||||
|
--gray-500: #64748b;
|
||||||
|
--gray-600: #475569;
|
||||||
|
--gray-700: #334155;
|
||||||
|
--gray-800: #1e293b;
|
||||||
|
--gray-900: #0f172a;
|
||||||
|
--gray-1000: #020617;
|
||||||
|
|
||||||
|
/* Blue */
|
||||||
|
--blue-100: #dbeafe;
|
||||||
|
--blue-200: #bfdbfe;
|
||||||
|
--blue-300: #93c5fd;
|
||||||
|
--blue-400: #60a5fa;
|
||||||
|
--blue-500: #3b82f6;
|
||||||
|
--blue-600: #2563eb;
|
||||||
|
--blue-700: #1d4ed8;
|
||||||
|
--blue-800: #1e40af;
|
||||||
|
--blue-900: #1e3a8a;
|
||||||
|
--blue-1000: #172554;
|
||||||
|
|
||||||
|
/* Green */
|
||||||
|
--green-100: #dcfce7;
|
||||||
|
--green-200: #bbf7d0;
|
||||||
|
--green-300: #86efac;
|
||||||
|
--green-400: #4ade80;
|
||||||
|
--green-500: #22c55e;
|
||||||
|
--green-600: #16a34a;
|
||||||
|
--green-700: #15803d;
|
||||||
|
--green-800: #166534;
|
||||||
|
--green-900: #14532d;
|
||||||
|
--green-1000: #052e16;
|
||||||
|
|
||||||
|
/* Yellow */
|
||||||
|
--yellow-100: #fef9c3;
|
||||||
|
--yellow-200: #fef08a;
|
||||||
|
--yellow-300: #fde047;
|
||||||
|
--yellow-400: #facc15;
|
||||||
|
--yellow-500: #eab308;
|
||||||
|
--yellow-600: #ca8a04;
|
||||||
|
--yellow-700: #a16207;
|
||||||
|
--yellow-800: #854d0e;
|
||||||
|
--yellow-900: #713f12;
|
||||||
|
--yellow-1000: #422006;
|
||||||
|
|
||||||
|
/* Red */
|
||||||
|
--red-100: #fee2e2;
|
||||||
|
--red-200: #fecaca;
|
||||||
|
--red-300: #fca5a5;
|
||||||
|
--red-400: #f87171;
|
||||||
|
--red-500: #ef4444;
|
||||||
|
--red-600: #dc2626;
|
||||||
|
--red-700: #b91c1c;
|
||||||
|
--red-800: #991b1b;
|
||||||
|
--red-900: #7f1d1d;
|
||||||
|
--red-1000: #450a0a;
|
||||||
|
|
||||||
|
/* Purple */
|
||||||
|
--purple-100: #f3e8ff;
|
||||||
|
--purple-200: #e9d5ff;
|
||||||
|
--purple-300: #d8b4fe;
|
||||||
|
--purple-400: #c084fc;
|
||||||
|
--purple-500: #a855f7;
|
||||||
|
--purple-600: #9333ea;
|
||||||
|
--purple-700: #7e22ce;
|
||||||
|
--purple-800: #6b21a8;
|
||||||
|
--purple-900: #581c87;
|
||||||
|
--purple-1000: #3b0764;
|
||||||
}
|
}
|
||||||
|
|
||||||
* {
|
* {
|
||||||
|
|||||||
741
frontend/src/pages/design/ButtonContent.tsx
Normal file
741
frontend/src/pages/design/ButtonContent.tsx
Normal file
@ -0,0 +1,741 @@
|
|||||||
|
// ButtonContent.tsx — WING-OPS Button 컴포넌트 상세 페이지 (다크/라이트 테마 지원)
|
||||||
|
|
||||||
|
import type { DesignTheme } from './designTheme';
|
||||||
|
|
||||||
|
// ---------- 타입 ----------
|
||||||
|
|
||||||
|
interface ButtonSizeRow {
|
||||||
|
label: string;
|
||||||
|
heightClass: string;
|
||||||
|
heightPx: number;
|
||||||
|
px: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ButtonVariantStyle {
|
||||||
|
bg: string;
|
||||||
|
text: string;
|
||||||
|
border?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ButtonStateRow {
|
||||||
|
state: string;
|
||||||
|
accent: ButtonVariantStyle;
|
||||||
|
primary: ButtonVariantStyle;
|
||||||
|
secondary: ButtonVariantStyle;
|
||||||
|
tertiary: ButtonVariantStyle;
|
||||||
|
tertiaryFilled: ButtonVariantStyle;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------- 데이터 ----------
|
||||||
|
|
||||||
|
const BUTTON_SIZES: ButtonSizeRow[] = [
|
||||||
|
{ label: 'XLarge (56)', heightClass: 'h-14', heightPx: 56, px: 24 },
|
||||||
|
{ label: 'Large (48)', heightClass: 'h-12', heightPx: 48, px: 20 },
|
||||||
|
{ label: 'Medium (44)', heightClass: 'h-11', heightPx: 44, px: 16 },
|
||||||
|
{ label: 'Small (32)', heightClass: 'h-8', heightPx: 32, px: 12 },
|
||||||
|
{ label: 'XSmall (24)', heightClass: 'h-6', heightPx: 24, px: 8 },
|
||||||
|
];
|
||||||
|
|
||||||
|
const VARIANTS = ['Accent', 'Primary', 'Secondary', 'Tertiary', 'Tertiary (filled)'] as const;
|
||||||
|
|
||||||
|
const getDarkStateRows = (): ButtonStateRow[] => [
|
||||||
|
{
|
||||||
|
state: 'Default',
|
||||||
|
accent: { bg: '#ef4444', text: '#fff' },
|
||||||
|
primary: { bg: '#1a1a2e', text: '#fff' },
|
||||||
|
secondary: { bg: '#6b7280', text: '#fff' },
|
||||||
|
tertiary: { bg: 'transparent', text: '#c2c6d6', border: '#6b7280' },
|
||||||
|
tertiaryFilled: { bg: '#374151', text: '#c2c6d6' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
state: 'Hover',
|
||||||
|
accent: { bg: '#dc2626', text: '#fff' },
|
||||||
|
primary: { bg: '#2d2d44', text: '#fff' },
|
||||||
|
secondary: { bg: '#7c8393', text: '#fff' },
|
||||||
|
tertiary: { bg: 'rgba(255,255,255,0.05)', text: '#c2c6d6', border: '#9ca3af' },
|
||||||
|
tertiaryFilled: { bg: '#4b5563', text: '#c2c6d6' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
state: 'Pressed',
|
||||||
|
accent: { bg: '#b91c1c', text: '#fff' },
|
||||||
|
primary: { bg: '#3d3d5c', text: '#fff' },
|
||||||
|
secondary: { bg: '#9ca3af', text: '#fff' },
|
||||||
|
tertiary: { bg: 'rgba(255,255,255,0.1)', text: '#c2c6d6', border: '#9ca3af' },
|
||||||
|
tertiaryFilled: { bg: '#6b7280', text: '#c2c6d6' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
state: 'Disabled',
|
||||||
|
accent: { bg: 'rgba(239,68,68,0.3)', text: 'rgba(255,255,255,0.5)' },
|
||||||
|
primary: { bg: 'rgba(26,26,46,0.5)', text: 'rgba(255,255,255,0.4)' },
|
||||||
|
secondary: { bg: 'rgba(107,114,128,0.3)', text: 'rgba(255,255,255,0.4)' },
|
||||||
|
tertiary: { bg: 'transparent', text: 'rgba(255,255,255,0.3)', border: 'rgba(107,114,128,0.3)' },
|
||||||
|
tertiaryFilled: { bg: 'rgba(55,65,81,0.3)', text: 'rgba(255,255,255,0.3)' },
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const getLightStateRows = (): ButtonStateRow[] => [
|
||||||
|
{
|
||||||
|
state: 'Default',
|
||||||
|
accent: { bg: '#ef4444', text: '#fff' },
|
||||||
|
primary: { bg: '#1a1a2e', text: '#fff' },
|
||||||
|
secondary: { bg: '#d1d5db', text: '#374151' },
|
||||||
|
tertiary: { bg: 'transparent', text: '#374151', border: '#d1d5db' },
|
||||||
|
tertiaryFilled: { bg: '#e5e7eb', text: '#374151' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
state: 'Hover',
|
||||||
|
accent: { bg: '#dc2626', text: '#fff' },
|
||||||
|
primary: { bg: '#2d2d44', text: '#fff' },
|
||||||
|
secondary: { bg: '#bcc0c7', text: '#374151' },
|
||||||
|
tertiary: { bg: 'rgba(0,0,0,0.03)', text: '#374151', border: '#9ca3af' },
|
||||||
|
tertiaryFilled: { bg: '#d1d5db', text: '#374151' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
state: 'Pressed',
|
||||||
|
accent: { bg: '#b91c1c', text: '#fff' },
|
||||||
|
primary: { bg: '#3d3d5c', text: '#fff' },
|
||||||
|
secondary: { bg: '#9ca3af', text: '#374151' },
|
||||||
|
tertiary: { bg: 'rgba(0,0,0,0.06)', text: '#374151', border: '#6b7280' },
|
||||||
|
tertiaryFilled: { bg: '#bcc0c7', text: '#374151' },
|
||||||
|
},
|
||||||
|
{
|
||||||
|
state: 'Disabled',
|
||||||
|
accent: { bg: 'rgba(239,68,68,0.3)', text: 'rgba(255,255,255,0.5)' },
|
||||||
|
primary: { bg: 'rgba(26,26,46,0.3)', text: 'rgba(255,255,255,0.5)' },
|
||||||
|
secondary: { bg: 'rgba(209,213,219,0.5)', text: 'rgba(55,65,81,0.4)' },
|
||||||
|
tertiary: { bg: 'transparent', text: 'rgba(55,65,81,0.3)', border: 'rgba(209,213,219,0.5)' },
|
||||||
|
tertiaryFilled: { bg: 'rgba(229,231,235,0.5)', text: 'rgba(55,65,81,0.3)' },
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// ---------- Props ----------
|
||||||
|
|
||||||
|
interface ButtonContentProps {
|
||||||
|
theme: DesignTheme;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------- 헬퍼 ----------
|
||||||
|
|
||||||
|
function getVariantStyle(row: ButtonStateRow, variantIndex: number): ButtonVariantStyle {
|
||||||
|
const keys: (keyof Omit<ButtonStateRow, 'state'>)[] = [
|
||||||
|
'accent',
|
||||||
|
'primary',
|
||||||
|
'secondary',
|
||||||
|
'tertiary',
|
||||||
|
'tertiaryFilled',
|
||||||
|
];
|
||||||
|
return row[keys[variantIndex]];
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------- 컴포넌트 ----------
|
||||||
|
|
||||||
|
export const ButtonContent = ({ theme }: ButtonContentProps) => {
|
||||||
|
const t = theme;
|
||||||
|
const isDark = t.mode === 'dark';
|
||||||
|
|
||||||
|
const sectionCardBg = isDark ? 'rgba(255,255,255,0.03)' : '#f5f5f5';
|
||||||
|
const dividerColor = isDark ? 'rgba(255,255,255,0.08)' : '#e5e7eb';
|
||||||
|
const badgeBg = isDark ? '#4a5568' : '#6b7280';
|
||||||
|
const annotationColor = isDark ? '#f87171' : '#ef4444';
|
||||||
|
const buttonDarkBg = isDark ? '#e2e8f0' : '#1a1a2e';
|
||||||
|
const buttonDarkText = isDark ? '#1a1a2e' : '#fff';
|
||||||
|
|
||||||
|
const stateRows = isDark ? getDarkStateRows() : getLightStateRows();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="p-12" style={{ color: t.textPrimary }}>
|
||||||
|
<div style={{ maxWidth: '64rem' }}>
|
||||||
|
|
||||||
|
{/* ── 섹션 1: 헤더 ── */}
|
||||||
|
<div
|
||||||
|
className="pb-10 mb-12 border-b border-solid"
|
||||||
|
style={{ borderColor: dividerColor }}
|
||||||
|
>
|
||||||
|
<p
|
||||||
|
className="font-mono text-sm uppercase tracking-widest mb-3"
|
||||||
|
style={{ color: t.textAccent }}
|
||||||
|
>
|
||||||
|
Components
|
||||||
|
</p>
|
||||||
|
<h1
|
||||||
|
className="text-4xl font-bold mb-4"
|
||||||
|
style={{ color: t.textPrimary }}
|
||||||
|
>
|
||||||
|
Button
|
||||||
|
</h1>
|
||||||
|
<p
|
||||||
|
className="text-lg mb-1"
|
||||||
|
style={{ color: t.textSecondary }}
|
||||||
|
>
|
||||||
|
사용자의 의도를 명확하게 전달하고, 행동을 유도합니다.
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
className="text-lg"
|
||||||
|
style={{ color: t.textSecondary }}
|
||||||
|
>
|
||||||
|
버튼의 형태와 색은 우선순위를 시각적으로 구분합니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── 섹션 2: Anatomy ── */}
|
||||||
|
<div className="mb-16">
|
||||||
|
<h2
|
||||||
|
className="text-2xl font-bold mb-8"
|
||||||
|
style={{ color: t.textPrimary }}
|
||||||
|
>
|
||||||
|
Anatomy
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* Anatomy 카드 */}
|
||||||
|
<div
|
||||||
|
className="rounded-xl p-10 mb-8"
|
||||||
|
style={{ backgroundColor: sectionCardBg }}
|
||||||
|
>
|
||||||
|
<div className="flex flex-row items-start gap-16 justify-center">
|
||||||
|
|
||||||
|
{/* 왼쪽: 텍스트 + 아이콘 버튼 */}
|
||||||
|
<div className="flex flex-col items-center gap-6">
|
||||||
|
<div className="relative">
|
||||||
|
{/* 버튼 본체 */}
|
||||||
|
<div
|
||||||
|
className="relative inline-flex items-center gap-2 px-5 rounded-md"
|
||||||
|
style={{
|
||||||
|
height: '44px',
|
||||||
|
backgroundColor: buttonDarkBg,
|
||||||
|
color: buttonDarkText,
|
||||||
|
fontSize: '14px',
|
||||||
|
fontWeight: 600,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Container 번호 — 테두리 점선 */}
|
||||||
|
<span
|
||||||
|
className="absolute inset-0 rounded-md pointer-events-none"
|
||||||
|
style={{
|
||||||
|
border: `1.5px dashed ${isDark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.20)'}`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<span>레이블</span>
|
||||||
|
<span className="font-bold">+</span>
|
||||||
|
|
||||||
|
{/* 번호 뱃지 — Container (1) */}
|
||||||
|
<span
|
||||||
|
className="absolute flex items-center justify-center rounded-full text-white font-bold"
|
||||||
|
style={{
|
||||||
|
width: '22px',
|
||||||
|
height: '22px',
|
||||||
|
fontSize: '10px',
|
||||||
|
backgroundColor: badgeBg,
|
||||||
|
top: '-12px',
|
||||||
|
left: '-12px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
1
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{/* 번호 뱃지 — Label (2) */}
|
||||||
|
<span
|
||||||
|
className="absolute flex items-center justify-center rounded-full text-white font-bold"
|
||||||
|
style={{
|
||||||
|
width: '22px',
|
||||||
|
height: '22px',
|
||||||
|
fontSize: '10px',
|
||||||
|
backgroundColor: badgeBg,
|
||||||
|
top: '-12px',
|
||||||
|
left: '50%',
|
||||||
|
transform: 'translateX(-50%)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
2
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{/* 번호 뱃지 — Icon (3) */}
|
||||||
|
<span
|
||||||
|
className="absolute flex items-center justify-center rounded-full text-white font-bold"
|
||||||
|
style={{
|
||||||
|
width: '22px',
|
||||||
|
height: '22px',
|
||||||
|
fontSize: '10px',
|
||||||
|
backgroundColor: badgeBg,
|
||||||
|
top: '-12px',
|
||||||
|
right: '-12px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
3
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
className="text-xs font-mono"
|
||||||
|
style={{ color: t.textMuted }}
|
||||||
|
>
|
||||||
|
텍스트 + 아이콘 버튼
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 오른쪽: 아이콘 전용 버튼 */}
|
||||||
|
<div className="flex flex-col items-center gap-6">
|
||||||
|
<div className="relative">
|
||||||
|
<div
|
||||||
|
className="relative inline-flex items-center justify-center rounded-md"
|
||||||
|
style={{
|
||||||
|
width: '44px',
|
||||||
|
height: '44px',
|
||||||
|
backgroundColor: buttonDarkBg,
|
||||||
|
color: buttonDarkText,
|
||||||
|
fontSize: '18px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
className="absolute inset-0 rounded-md pointer-events-none"
|
||||||
|
style={{
|
||||||
|
border: `1.5px dashed ${isDark ? 'rgba(255,255,255,0.25)' : 'rgba(0,0,0,0.20)'}`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
♥
|
||||||
|
|
||||||
|
{/* 번호 뱃지 — Container (1) */}
|
||||||
|
<span
|
||||||
|
className="absolute flex items-center justify-center rounded-full text-white font-bold"
|
||||||
|
style={{
|
||||||
|
width: '22px',
|
||||||
|
height: '22px',
|
||||||
|
fontSize: '10px',
|
||||||
|
backgroundColor: badgeBg,
|
||||||
|
top: '-12px',
|
||||||
|
left: '-12px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
1
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{/* 번호 뱃지 — Icon (3) */}
|
||||||
|
<span
|
||||||
|
className="absolute flex items-center justify-center rounded-full text-white font-bold"
|
||||||
|
style={{
|
||||||
|
width: '22px',
|
||||||
|
height: '22px',
|
||||||
|
fontSize: '10px',
|
||||||
|
backgroundColor: badgeBg,
|
||||||
|
top: '-12px',
|
||||||
|
right: '-12px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
3
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
className="text-xs font-mono"
|
||||||
|
style={{ color: t.textMuted }}
|
||||||
|
>
|
||||||
|
아이콘 전용 버튼
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 번호 목록 */}
|
||||||
|
<ol className="flex flex-col gap-2 pl-5 list-decimal">
|
||||||
|
{[
|
||||||
|
{ label: 'Container', desc: '버튼의 외곽 영역. 클릭 가능한 전체 영역을 정의합니다.' },
|
||||||
|
{ label: 'Label', desc: '버튼의 텍스트 레이블.' },
|
||||||
|
{ label: 'Icon (Optional)', desc: '선택적으로 추가되는 아이콘 요소.' },
|
||||||
|
].map((item) => (
|
||||||
|
<li key={item.label} style={{ color: t.textSecondary }}>
|
||||||
|
<span className="font-bold" style={{ color: t.textPrimary }}>
|
||||||
|
{item.label}
|
||||||
|
</span>
|
||||||
|
{' '}— {item.desc}
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── 섹션 3: Spec ── */}
|
||||||
|
<div className="mb-16">
|
||||||
|
<h2
|
||||||
|
className="text-2xl font-bold mb-10"
|
||||||
|
style={{ color: t.textPrimary }}
|
||||||
|
>
|
||||||
|
Spec
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* 3-1. Size */}
|
||||||
|
<div className="mb-12">
|
||||||
|
<h3
|
||||||
|
className="text-xl font-semibold mb-6"
|
||||||
|
style={{ color: t.textPrimary }}
|
||||||
|
>
|
||||||
|
1. Size
|
||||||
|
</h3>
|
||||||
|
<div
|
||||||
|
className="rounded-xl p-8"
|
||||||
|
style={{ backgroundColor: sectionCardBg }}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-5">
|
||||||
|
{BUTTON_SIZES.map((size) => (
|
||||||
|
<div key={size.label} className="flex items-center justify-between gap-8">
|
||||||
|
{/* 라벨 */}
|
||||||
|
<span
|
||||||
|
className="font-mono text-sm w-36 shrink-0"
|
||||||
|
style={{ color: t.textSecondary }}
|
||||||
|
>
|
||||||
|
{size.label}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
{/* 실제 크기 버튼 */}
|
||||||
|
<div className="flex-1 flex items-center">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="rounded-md font-semibold text-sm"
|
||||||
|
style={{
|
||||||
|
height: `${size.heightPx}px`,
|
||||||
|
paddingLeft: `${size.px}px`,
|
||||||
|
paddingRight: `${size.px}px`,
|
||||||
|
backgroundColor: buttonDarkBg,
|
||||||
|
color: buttonDarkText,
|
||||||
|
border: 'none',
|
||||||
|
cursor: 'default',
|
||||||
|
fontSize: size.heightPx <= 24 ? '11px' : size.heightPx <= 32 ? '12px' : '14px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
레이블
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 3-2. Container */}
|
||||||
|
<div className="mb-12">
|
||||||
|
<h3
|
||||||
|
className="text-xl font-semibold mb-6"
|
||||||
|
style={{ color: t.textPrimary }}
|
||||||
|
>
|
||||||
|
2. Container
|
||||||
|
</h3>
|
||||||
|
<div
|
||||||
|
className="rounded-xl p-8"
|
||||||
|
style={{ backgroundColor: sectionCardBg }}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-8">
|
||||||
|
|
||||||
|
{/* Flexible */}
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<span
|
||||||
|
className="font-mono text-sm font-bold"
|
||||||
|
style={{ color: t.textPrimary }}
|
||||||
|
>
|
||||||
|
Flexible
|
||||||
|
</span>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="relative inline-flex">
|
||||||
|
{/* 좌측 padding 치수선 */}
|
||||||
|
<div
|
||||||
|
className="absolute top-1/2 flex items-center"
|
||||||
|
style={{
|
||||||
|
left: '0',
|
||||||
|
transform: 'translateY(-50%)',
|
||||||
|
color: annotationColor,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '20px',
|
||||||
|
height: '1px',
|
||||||
|
backgroundColor: annotationColor,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
className="font-mono absolute"
|
||||||
|
style={{
|
||||||
|
fontSize: '9px',
|
||||||
|
color: annotationColor,
|
||||||
|
top: '-14px',
|
||||||
|
left: '2px',
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
20px
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="rounded-md font-semibold"
|
||||||
|
style={{
|
||||||
|
height: '44px',
|
||||||
|
paddingLeft: '20px',
|
||||||
|
paddingRight: '20px',
|
||||||
|
backgroundColor: buttonDarkBg,
|
||||||
|
color: buttonDarkText,
|
||||||
|
fontSize: '14px',
|
||||||
|
border: 'none',
|
||||||
|
cursor: 'default',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
레이블
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* 우측 padding 치수선 */}
|
||||||
|
<div
|
||||||
|
className="absolute top-1/2 flex items-center justify-end"
|
||||||
|
style={{
|
||||||
|
right: '0',
|
||||||
|
transform: 'translateY(-50%)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: '20px',
|
||||||
|
height: '1px',
|
||||||
|
backgroundColor: annotationColor,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
className="font-mono absolute"
|
||||||
|
style={{
|
||||||
|
fontSize: '9px',
|
||||||
|
color: annotationColor,
|
||||||
|
top: '-14px',
|
||||||
|
right: '2px',
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
20px
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
className="font-mono text-xs"
|
||||||
|
style={{ color: t.textSecondary }}
|
||||||
|
>
|
||||||
|
콘텐츠에 맞게 너비가 자동으로 조정됩니다.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Fixed */}
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<span
|
||||||
|
className="font-mono text-sm font-bold"
|
||||||
|
style={{ color: t.textPrimary }}
|
||||||
|
>
|
||||||
|
Fixed
|
||||||
|
</span>
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<div className="relative">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="rounded-md font-semibold"
|
||||||
|
style={{
|
||||||
|
height: '44px',
|
||||||
|
width: '160px',
|
||||||
|
backgroundColor: buttonDarkBg,
|
||||||
|
color: buttonDarkText,
|
||||||
|
fontSize: '14px',
|
||||||
|
border: 'none',
|
||||||
|
cursor: 'default',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
레이블
|
||||||
|
</button>
|
||||||
|
{/* 고정 너비 표시 */}
|
||||||
|
<div
|
||||||
|
className="absolute"
|
||||||
|
style={{
|
||||||
|
bottom: '-18px',
|
||||||
|
left: '0',
|
||||||
|
right: '0',
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: '4px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ height: '1px', flex: 1, backgroundColor: annotationColor }} />
|
||||||
|
<span
|
||||||
|
className="font-mono"
|
||||||
|
style={{ fontSize: '9px', color: annotationColor, whiteSpace: 'nowrap' }}
|
||||||
|
>
|
||||||
|
Fixed Width
|
||||||
|
</span>
|
||||||
|
<div style={{ height: '1px', flex: 1, backgroundColor: annotationColor }} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<span
|
||||||
|
className="font-mono text-xs ml-4"
|
||||||
|
style={{ color: t.textSecondary }}
|
||||||
|
>
|
||||||
|
너비가 고정된 버튼입니다.
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 3-3. Label */}
|
||||||
|
<div className="mb-12">
|
||||||
|
<h3
|
||||||
|
className="text-xl font-semibold mb-6"
|
||||||
|
style={{ color: t.textPrimary }}
|
||||||
|
>
|
||||||
|
3. Label
|
||||||
|
</h3>
|
||||||
|
<div
|
||||||
|
className="rounded-xl p-8"
|
||||||
|
style={{ backgroundColor: sectionCardBg }}
|
||||||
|
>
|
||||||
|
<div className="flex flex-col gap-8">
|
||||||
|
{[
|
||||||
|
{ resolution: '해상도 430', width: '100%', maxWidth: '390px', padding: 16 },
|
||||||
|
{ resolution: '해상도 360', width: '100%', maxWidth: '328px', padding: 16 },
|
||||||
|
{ resolution: '해상도 320', width: '248px', maxWidth: '248px', padding: 16 },
|
||||||
|
].map((item) => (
|
||||||
|
<div key={item.resolution} className="flex flex-col gap-3">
|
||||||
|
<span
|
||||||
|
className="font-mono text-sm"
|
||||||
|
style={{ color: t.textSecondary }}
|
||||||
|
>
|
||||||
|
{item.resolution}
|
||||||
|
</span>
|
||||||
|
<div className="flex items-center gap-6">
|
||||||
|
<div
|
||||||
|
className="relative"
|
||||||
|
style={{ width: item.width, maxWidth: item.maxWidth }}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="w-full rounded-md font-semibold"
|
||||||
|
style={{
|
||||||
|
height: '44px',
|
||||||
|
paddingLeft: `${item.padding}px`,
|
||||||
|
paddingRight: `${item.padding}px`,
|
||||||
|
backgroundColor: buttonDarkBg,
|
||||||
|
color: buttonDarkText,
|
||||||
|
fontSize: '14px',
|
||||||
|
border: 'none',
|
||||||
|
cursor: 'default',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
레이블
|
||||||
|
</button>
|
||||||
|
{/* 패딩 주석 */}
|
||||||
|
<span
|
||||||
|
className="absolute font-mono"
|
||||||
|
style={{
|
||||||
|
fontSize: '9px',
|
||||||
|
color: annotationColor,
|
||||||
|
top: '-16px',
|
||||||
|
left: '0',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
padding {item.padding}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── 섹션 4: Style (변형 × 상태 매트릭스) ── */}
|
||||||
|
<div
|
||||||
|
className="pt-12 border-t border-solid"
|
||||||
|
style={{ borderColor: dividerColor }}
|
||||||
|
>
|
||||||
|
<h2
|
||||||
|
className="text-2xl font-bold mb-8"
|
||||||
|
style={{ color: t.textPrimary }}
|
||||||
|
>
|
||||||
|
Style
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="rounded-xl p-8 overflow-x-auto"
|
||||||
|
style={{ backgroundColor: sectionCardBg }}
|
||||||
|
>
|
||||||
|
<table style={{ borderCollapse: 'collapse', minWidth: '700px' }}>
|
||||||
|
{/* 열 헤더 */}
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
{/* 빈 셀 (상태 열) */}
|
||||||
|
<th style={{ width: '100px', padding: '8px 12px' }} />
|
||||||
|
{VARIANTS.map((variant) => (
|
||||||
|
<th
|
||||||
|
key={variant}
|
||||||
|
className="font-mono text-xs font-semibold text-center pb-4"
|
||||||
|
style={{
|
||||||
|
color: t.textSecondary,
|
||||||
|
padding: '8px 12px',
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{variant}
|
||||||
|
</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
|
||||||
|
<tbody>
|
||||||
|
{stateRows.map((row, rowIdx) => (
|
||||||
|
<tr key={row.state}>
|
||||||
|
{/* 상태 라벨 */}
|
||||||
|
<td
|
||||||
|
className="font-mono text-xs font-medium"
|
||||||
|
style={{
|
||||||
|
color: t.textSecondary,
|
||||||
|
padding: rowIdx === 0 ? '8px 12px 8px 0' : '8px 12px 8px 0',
|
||||||
|
verticalAlign: 'middle',
|
||||||
|
whiteSpace: 'nowrap',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{row.state}
|
||||||
|
</td>
|
||||||
|
|
||||||
|
{/* 각 변형별 버튼 셀 */}
|
||||||
|
{VARIANTS.map((_, vIdx) => {
|
||||||
|
const style = getVariantStyle(row, vIdx);
|
||||||
|
return (
|
||||||
|
<td
|
||||||
|
key={vIdx}
|
||||||
|
style={{ padding: '8px 12px', verticalAlign: 'middle', textAlign: 'center' }}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
className="rounded-md font-semibold"
|
||||||
|
style={{
|
||||||
|
width: '96px',
|
||||||
|
height: '40px',
|
||||||
|
backgroundColor: style.bg,
|
||||||
|
color: style.text,
|
||||||
|
border: style.border ? `1.5px solid ${style.border}` : 'none',
|
||||||
|
fontSize: '12px',
|
||||||
|
cursor: 'default',
|
||||||
|
display: 'inline-flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
레이블
|
||||||
|
</button>
|
||||||
|
</td>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ButtonContent;
|
||||||
파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
Load Diff
219
frontend/src/pages/design/ComponentsOverview.tsx
Normal file
219
frontend/src/pages/design/ComponentsOverview.tsx
Normal file
@ -0,0 +1,219 @@
|
|||||||
|
// ComponentsOverview.tsx — Components 탭 Overview 카드 그리드
|
||||||
|
|
||||||
|
import type { DesignTheme } from './designTheme';
|
||||||
|
|
||||||
|
// ---------- 타입 ----------
|
||||||
|
|
||||||
|
interface OverviewCard {
|
||||||
|
id: string;
|
||||||
|
label: string;
|
||||||
|
thumbnail: (isDark: boolean) => React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------- 썸네일 구현 ----------
|
||||||
|
|
||||||
|
const ButtonsThumbnail = ({ isDark }: { isDark: boolean }) => {
|
||||||
|
const accent = isDark ? '#4cd7f6' : '#06b6d4';
|
||||||
|
const secondaryBg = isDark ? 'rgba(255,255,255,0.07)' : '#e2e8f0';
|
||||||
|
const secondaryText = isDark ? 'rgba(223,226,243,0.85)' : '#475569';
|
||||||
|
const outlineBorder = isDark ? 'rgba(76,215,246,0.40)' : 'rgba(6,182,212,0.50)';
|
||||||
|
|
||||||
|
const buttons = [
|
||||||
|
{ label: 'Primary', bg: accent, border: accent, color: isDark ? '#0a0e1a' : '#ffffff' },
|
||||||
|
{ label: 'Secondary', bg: secondaryBg, border: 'transparent', color: secondaryText },
|
||||||
|
{ label: 'Outline', bg: 'transparent', border: outlineBorder, color: accent },
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full h-full flex flex-col items-center justify-center gap-3 px-8">
|
||||||
|
{buttons.map(({ label, bg, border, color }) => (
|
||||||
|
<div
|
||||||
|
key={label}
|
||||||
|
className="w-full rounded flex items-center justify-center"
|
||||||
|
style={{
|
||||||
|
height: '32px',
|
||||||
|
backgroundColor: bg,
|
||||||
|
border: `1.5px solid ${border}`,
|
||||||
|
color,
|
||||||
|
fontSize: '12px',
|
||||||
|
fontWeight: 600,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{label}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const TextInputsThumbnail = ({ isDark }: { isDark: boolean }) => {
|
||||||
|
const labelColor = isDark ? 'rgba(194,198,214,0.80)' : '#64748b';
|
||||||
|
const inputBg = isDark ? 'rgba(255,255,255,0.04)' : '#ffffff';
|
||||||
|
const inputBorder = isDark ? 'rgba(255,255,255,0.12)' : '#cbd5e1';
|
||||||
|
const placeholderColor = isDark ? 'rgba(140,144,159,0.60)' : '#94a3b8';
|
||||||
|
const accentBorder = isDark ? '#4cd7f6' : '#06b6d4';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full h-full flex flex-col items-center justify-center gap-3 px-8">
|
||||||
|
{/* 라벨 + 기본 입력 */}
|
||||||
|
<div className="w-full flex flex-col gap-1.5">
|
||||||
|
<div
|
||||||
|
className="rounded"
|
||||||
|
style={{ height: '9px', width: '48px', backgroundColor: labelColor, opacity: 0.6 }}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className="w-full rounded flex items-center px-3"
|
||||||
|
style={{
|
||||||
|
height: '30px',
|
||||||
|
backgroundColor: inputBg,
|
||||||
|
border: `1.5px solid ${inputBorder}`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="rounded"
|
||||||
|
style={{ height: '8px', width: '70px', backgroundColor: placeholderColor, opacity: 0.5 }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* 포커스 상태 입력 */}
|
||||||
|
<div className="w-full flex flex-col gap-1.5">
|
||||||
|
<div
|
||||||
|
className="rounded"
|
||||||
|
style={{ height: '9px', width: '56px', backgroundColor: labelColor, opacity: 0.6 }}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className="w-full rounded flex items-center px-3"
|
||||||
|
style={{
|
||||||
|
height: '30px',
|
||||||
|
backgroundColor: inputBg,
|
||||||
|
border: `1.5px solid ${accentBorder}`,
|
||||||
|
boxShadow: isDark
|
||||||
|
? `0 0 0 2px rgba(76,215,246,0.15)`
|
||||||
|
: `0 0 0 2px rgba(6,182,212,0.12)`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="rounded"
|
||||||
|
style={{ height: '8px', width: '90px', backgroundColor: isDark ? 'rgba(223,226,243,0.50)' : '#475569', opacity: 0.7 }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// ---------- 카드 정의 ----------
|
||||||
|
|
||||||
|
const OVERVIEW_CARDS: OverviewCard[] = [
|
||||||
|
{
|
||||||
|
id: 'buttons',
|
||||||
|
label: 'Buttons',
|
||||||
|
thumbnail: (isDark) => <ButtonsThumbnail isDark={isDark} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'text-field',
|
||||||
|
label: 'Text Field',
|
||||||
|
thumbnail: (isDark) => <TextInputsThumbnail isDark={isDark} />,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// ---------- Props ----------
|
||||||
|
|
||||||
|
interface ComponentsOverviewProps {
|
||||||
|
theme: DesignTheme;
|
||||||
|
onNavigate: (id: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------- 컴포넌트 ----------
|
||||||
|
|
||||||
|
const ComponentsOverview = ({ theme, onNavigate }: ComponentsOverviewProps) => {
|
||||||
|
const t = theme;
|
||||||
|
const isDark = t.mode === 'dark';
|
||||||
|
|
||||||
|
const cardBg = isDark ? 'rgba(255,255,255,0.03)' : '#f5f5f5';
|
||||||
|
const cardBorder = isDark ? 'rgba(255,255,255,0.06)' : '#e5e5e5';
|
||||||
|
const thumbnailBorderBottom = isDark ? 'rgba(255,255,255,0.06)' : '#e0e0e0';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="pt-24 px-12 pb-16 max-w-5xl flex flex-col gap-12">
|
||||||
|
|
||||||
|
{/* ── 헤더 영역 ── */}
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<span
|
||||||
|
className="font-mono text-xs font-semibold uppercase"
|
||||||
|
style={{ letterSpacing: '1.4px', color: t.textAccent }}
|
||||||
|
>
|
||||||
|
Components
|
||||||
|
</span>
|
||||||
|
<h1
|
||||||
|
className="font-sans text-4xl font-bold leading-tight"
|
||||||
|
style={{ color: t.textPrimary }}
|
||||||
|
>
|
||||||
|
Overview
|
||||||
|
</h1>
|
||||||
|
<p
|
||||||
|
className="font-korean text-sm leading-6"
|
||||||
|
style={{ color: t.textSecondary }}
|
||||||
|
>
|
||||||
|
재사용 가능한 UI 컴포넌트 카탈로그입니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── 3열 카드 그리드 ── */}
|
||||||
|
<div
|
||||||
|
className="grid gap-5"
|
||||||
|
style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}
|
||||||
|
>
|
||||||
|
{OVERVIEW_CARDS.map((card) => (
|
||||||
|
<div
|
||||||
|
key={card.id}
|
||||||
|
className="rounded-lg border border-solid flex flex-col cursor-pointer transition-all duration-200"
|
||||||
|
style={{
|
||||||
|
backgroundColor: cardBg,
|
||||||
|
borderColor: cardBorder,
|
||||||
|
}}
|
||||||
|
onClick={() => onNavigate(card.id)}
|
||||||
|
onMouseEnter={(e) => {
|
||||||
|
const el = e.currentTarget;
|
||||||
|
el.style.transform = 'scale(1.025)';
|
||||||
|
el.style.boxShadow = isDark
|
||||||
|
? '0 8px 24px rgba(0,0,0,0.35)'
|
||||||
|
: '0 6px 18px rgba(0,0,0,0.10)';
|
||||||
|
el.style.borderColor = isDark
|
||||||
|
? 'rgba(76,215,246,0.22)'
|
||||||
|
: 'rgba(6,182,212,0.28)';
|
||||||
|
}}
|
||||||
|
onMouseLeave={(e) => {
|
||||||
|
const el = e.currentTarget;
|
||||||
|
el.style.transform = 'scale(1)';
|
||||||
|
el.style.boxShadow = 'none';
|
||||||
|
el.style.borderColor = cardBorder;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* 썸네일 영역 */}
|
||||||
|
<div
|
||||||
|
className="h-48 rounded-t-lg overflow-hidden"
|
||||||
|
style={{
|
||||||
|
borderBottom: `1px solid ${thumbnailBorderBottom}`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{card.thumbnail(isDark)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 카드 라벨 */}
|
||||||
|
<div className="px-5 py-4">
|
||||||
|
<span
|
||||||
|
className="font-sans text-sm font-semibold"
|
||||||
|
style={{ color: t.textPrimary }}
|
||||||
|
>
|
||||||
|
{card.label}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ComponentsOverview;
|
||||||
@ -1,3 +1,4 @@
|
|||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
import type { DesignTheme } from './designTheme';
|
import type { DesignTheme } from './designTheme';
|
||||||
|
|
||||||
export type DesignTab = 'foundations' | 'components';
|
export type DesignTab = 'foundations' | 'components';
|
||||||
@ -16,6 +17,7 @@ const TABS: { label: string; id: DesignTab }[] = [
|
|||||||
|
|
||||||
export const DesignHeader = ({ activeTab, onTabChange, theme, onThemeToggle }: DesignHeaderProps) => {
|
export const DesignHeader = ({ activeTab, onTabChange, theme, onThemeToggle }: DesignHeaderProps) => {
|
||||||
const isDark = theme.mode === 'dark';
|
const isDark = theme.mode === 'dark';
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<header
|
<header
|
||||||
@ -27,12 +29,14 @@ export const DesignHeader = ({ activeTab, onTabChange, theme, onThemeToggle }: D
|
|||||||
>
|
>
|
||||||
{/* 좌측: 로고 + 버전 뱃지 */}
|
{/* 좌측: 로고 + 버전 뱃지 */}
|
||||||
<div className="flex flex-row items-center gap-3">
|
<div className="flex flex-row items-center gap-3">
|
||||||
<span
|
<button
|
||||||
className="font-sans text-2xl leading-8 font-bold"
|
type="button"
|
||||||
|
onClick={() => navigate('/')}
|
||||||
|
className="font-sans text-2xl leading-8 font-bold bg-transparent border-none p-0 cursor-pointer transition-opacity hover:opacity-70"
|
||||||
style={{ letterSpacing: '2.4px', color: theme.textAccent }}
|
style={{ letterSpacing: '2.4px', color: theme.textAccent }}
|
||||||
>
|
>
|
||||||
WING-OPS
|
WING-OPS
|
||||||
</span>
|
</button>
|
||||||
<div
|
<div
|
||||||
className="rounded-sm border border-solid py-1 px-2"
|
className="rounded-sm border border-solid py-1 px-2"
|
||||||
style={{
|
style={{
|
||||||
|
|||||||
@ -9,18 +9,22 @@ import { ColorPaletteContent } from './ColorPaletteContent';
|
|||||||
import { TypographyContent } from './TypographyContent';
|
import { TypographyContent } from './TypographyContent';
|
||||||
import { RadiusContent } from './RadiusContent';
|
import { RadiusContent } from './RadiusContent';
|
||||||
import { LayoutContent } from './LayoutContent';
|
import { LayoutContent } from './LayoutContent';
|
||||||
|
import FoundationsOverview from './FoundationsOverview';
|
||||||
|
import ComponentsOverview from './ComponentsOverview';
|
||||||
|
import { ButtonContent } from './ButtonContent';
|
||||||
|
import { TextFieldContent } from './TextFieldContent';
|
||||||
import { getTheme } from './designTheme';
|
import { getTheme } from './designTheme';
|
||||||
import type { ThemeMode } from './designTheme';
|
import type { ThemeMode } from './designTheme';
|
||||||
|
|
||||||
const FIRST_ITEM: Record<DesignTab, MenuItemId> = {
|
const FIRST_ITEM: Record<DesignTab, MenuItemId> = {
|
||||||
foundations: 'color',
|
foundations: 'overview',
|
||||||
components: 'buttons',
|
components: 'overview',
|
||||||
};
|
};
|
||||||
|
|
||||||
export const DesignPage = () => {
|
export const DesignPage = () => {
|
||||||
const [activeTab, setActiveTab] = useState<DesignTab>('foundations');
|
const [activeTab, setActiveTab] = useState<DesignTab>('foundations');
|
||||||
const [themeMode, setThemeMode] = useState<ThemeMode>('dark');
|
const [themeMode, setThemeMode] = useState<ThemeMode>('dark');
|
||||||
const [sidebarItem, setSidebarItem] = useState<MenuItemId>('color');
|
const [sidebarItem, setSidebarItem] = useState<MenuItemId>('overview');
|
||||||
|
|
||||||
const theme = getTheme(themeMode);
|
const theme = getTheme(themeMode);
|
||||||
|
|
||||||
@ -32,6 +36,8 @@ export const DesignPage = () => {
|
|||||||
const renderContent = () => {
|
const renderContent = () => {
|
||||||
if (activeTab === 'foundations') {
|
if (activeTab === 'foundations') {
|
||||||
switch (sidebarItem) {
|
switch (sidebarItem) {
|
||||||
|
case 'overview':
|
||||||
|
return <FoundationsOverview theme={theme} onNavigate={(id) => setSidebarItem(id as MenuItemId)} />;
|
||||||
case 'color':
|
case 'color':
|
||||||
return <ColorPaletteContent theme={theme} />;
|
return <ColorPaletteContent theme={theme} />;
|
||||||
case 'typography':
|
case 'typography':
|
||||||
@ -41,10 +47,19 @@ export const DesignPage = () => {
|
|||||||
case 'layout':
|
case 'layout':
|
||||||
return <LayoutContent theme={theme} />;
|
return <LayoutContent theme={theme} />;
|
||||||
default:
|
default:
|
||||||
return <ColorPaletteContent theme={theme} />;
|
return <FoundationsOverview theme={theme} onNavigate={(id) => setSidebarItem(id as MenuItemId)} />;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return <ComponentsContent />;
|
switch (sidebarItem) {
|
||||||
|
case 'overview':
|
||||||
|
return <ComponentsOverview theme={theme} onNavigate={(id) => setSidebarItem(id as MenuItemId)} />;
|
||||||
|
case 'buttons':
|
||||||
|
return <ButtonContent theme={theme} />;
|
||||||
|
case 'text-field':
|
||||||
|
return <TextFieldContent theme={theme} />;
|
||||||
|
default:
|
||||||
|
return <ComponentsContent />;
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@ -1,38 +1,27 @@
|
|||||||
import type { DesignTheme } from './designTheme';
|
import type { DesignTheme } from './designTheme';
|
||||||
import type { DesignTab } from './DesignHeader';
|
import type { DesignTab } from './DesignHeader';
|
||||||
|
|
||||||
import wingColorPaletteIcon from '../../assets/icons/wing-color-palette.svg';
|
export type FoundationsMenuItemId = 'overview' | 'color' | 'typography' | 'radius' | 'layout';
|
||||||
import wingElevationIcon from '../../assets/icons/wing-elevation.svg';
|
export type ComponentsMenuItemId = 'overview' | 'buttons' | 'text-field';
|
||||||
import wingFoundationsIcon from '../../assets/icons/wing-foundations.svg';
|
|
||||||
import wingLayoutGridIcon from '../../assets/icons/wing-layout-grid.svg';
|
|
||||||
import wingTypographyIcon from '../../assets/icons/wing-typography.svg';
|
|
||||||
|
|
||||||
export type FoundationsMenuItemId = 'color' | 'typography' | 'radius' | 'layout';
|
|
||||||
export type ComponentsMenuItemId = 'buttons' | 'text-inputs' | 'controls' | 'badge' | 'dialog' | 'tabs' | 'popup' | 'navigation';
|
|
||||||
export type MenuItemId = FoundationsMenuItemId | ComponentsMenuItemId;
|
export type MenuItemId = FoundationsMenuItemId | ComponentsMenuItemId;
|
||||||
|
|
||||||
interface MenuItem {
|
interface MenuItem {
|
||||||
id: MenuItemId;
|
id: MenuItemId;
|
||||||
label: string;
|
label: string;
|
||||||
icon: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const FOUNDATIONS_MENU: MenuItem[] = [
|
const FOUNDATIONS_MENU: MenuItem[] = [
|
||||||
{ id: 'color', label: 'Color', icon: wingColorPaletteIcon },
|
{ id: 'overview', label: 'Overview' },
|
||||||
{ id: 'typography', label: 'Typography', icon: wingTypographyIcon },
|
{ id: 'color', label: 'Color' },
|
||||||
{ id: 'radius', label: 'Radius', icon: wingElevationIcon },
|
{ id: 'typography', label: 'Typography' },
|
||||||
{ id: 'layout', label: 'Layout', icon: wingLayoutGridIcon },
|
{ id: 'radius', label: 'Radius' },
|
||||||
|
{ id: 'layout', label: 'Layout' },
|
||||||
];
|
];
|
||||||
|
|
||||||
const COMPONENTS_MENU: MenuItem[] = [
|
const COMPONENTS_MENU: MenuItem[] = [
|
||||||
{ id: 'buttons', label: 'Buttons', icon: wingFoundationsIcon },
|
{ id: 'overview', label: 'Overview' },
|
||||||
{ id: 'text-inputs', label: 'Text Inputs', icon: wingFoundationsIcon },
|
{ id: 'buttons', label: 'Buttons' },
|
||||||
{ id: 'controls', label: 'Controls', icon: wingFoundationsIcon },
|
{ id: 'text-field', label: 'Text Field' },
|
||||||
{ id: 'badge', label: 'Badge', icon: wingColorPaletteIcon },
|
|
||||||
{ id: 'dialog', label: 'Dialog', icon: wingLayoutGridIcon },
|
|
||||||
{ id: 'tabs', label: 'Tabs', icon: wingLayoutGridIcon },
|
|
||||||
{ id: 'popup', label: 'Popup', icon: wingElevationIcon },
|
|
||||||
{ id: 'navigation', label: 'Navigation', icon: wingTypographyIcon },
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const SIDEBAR_CONFIG: Record<DesignTab, { title: string; subtitle: string; menu: MenuItem[] }> = {
|
const SIDEBAR_CONFIG: Record<DesignTab, { title: string; subtitle: string; menu: MenuItem[] }> = {
|
||||||
@ -58,7 +47,7 @@ export function DesignSidebar({ theme, activeTab, activeItem, onItemChange }: De
|
|||||||
<button
|
<button
|
||||||
key={item.id}
|
key={item.id}
|
||||||
onClick={() => onItemChange(item.id)}
|
onClick={() => onItemChange(item.id)}
|
||||||
className="py-3 px-6 flex flex-row gap-3 items-center w-full text-left transition-colors duration-150 border-l-4"
|
className="py-3 px-6 flex flex-row items-center w-full text-left transition-colors duration-150 border-l-4"
|
||||||
style={{
|
style={{
|
||||||
borderColor: isActive ? theme.textAccent : 'transparent',
|
borderColor: isActive ? theme.textAccent : 'transparent',
|
||||||
color: isActive ? theme.textAccent : theme.textMuted,
|
color: isActive ? theme.textAccent : theme.textMuted,
|
||||||
@ -67,7 +56,6 @@ export function DesignSidebar({ theme, activeTab, activeItem, onItemChange }: De
|
|||||||
: undefined,
|
: undefined,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<img src={item.icon} alt={item.label} className="w-5 h-5 shrink-0" />
|
|
||||||
<span className="font-sans text-base leading-6">{item.label}</span>
|
<span className="font-sans text-base leading-6">{item.label}</span>
|
||||||
</button>
|
</button>
|
||||||
);
|
);
|
||||||
@ -82,22 +70,6 @@ export function DesignSidebar({ theme, activeTab, activeItem, onItemChange }: De
|
|||||||
boxShadow: `0px 25px 50px -12px ${theme.sidebarShadow}`,
|
boxShadow: `0px 25px 50px -12px ${theme.sidebarShadow}`,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{/* 타이틀 영역 */}
|
|
||||||
{/* <div className="px-6 pb-8">
|
|
||||||
<p
|
|
||||||
className="font-sans text-xl leading-7 font-bold"
|
|
||||||
style={{ letterSpacing: '-1px', color: theme.textPrimary }}
|
|
||||||
>
|
|
||||||
{title}
|
|
||||||
</p>
|
|
||||||
<p
|
|
||||||
className="font-sans text-[10px] leading-[15px] font-normal uppercase"
|
|
||||||
style={{ letterSpacing: '1px', color: theme.textAccent }}
|
|
||||||
>
|
|
||||||
{subtitle}
|
|
||||||
</p>
|
|
||||||
</div> */}
|
|
||||||
|
|
||||||
{/* 메뉴 네비게이션 */}
|
{/* 메뉴 네비게이션 */}
|
||||||
<nav className="flex-1 flex flex-col">{menu.map(renderMenuItem)}</nav>
|
<nav className="flex-1 flex flex-col">{menu.map(renderMenuItem)}</nav>
|
||||||
</aside>
|
</aside>
|
||||||
|
|||||||
274
frontend/src/pages/design/FoundationsOverview.tsx
Normal file
274
frontend/src/pages/design/FoundationsOverview.tsx
Normal file
@ -0,0 +1,274 @@
|
|||||||
|
// FoundationsOverview.tsx — Foundations 탭 Overview 카드 그리드
|
||||||
|
|
||||||
|
import type { DesignTheme } from './designTheme';
|
||||||
|
|
||||||
|
// ---------- 타입 ----------
|
||||||
|
|
||||||
|
interface OverviewCard {
|
||||||
|
id: string;
|
||||||
|
label: string;
|
||||||
|
thumbnail: (isDark: boolean) => React.ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------- 썸네일 구현 ----------
|
||||||
|
|
||||||
|
const ColorThumbnail = ({ isDark }: { isDark: boolean }) => {
|
||||||
|
// 3x3 도트 그리드: gray / pink / cyan 컬럼, 어두운 순
|
||||||
|
const dots: string[][] = [
|
||||||
|
['#9ca3af', '#f9a8d4', '#67e8f9'],
|
||||||
|
['#4b5563', '#ec4899', '#06b6d4'],
|
||||||
|
['#1f2937', '#9d174d', '#0e7490'],
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full h-full flex items-center justify-center">
|
||||||
|
<div
|
||||||
|
className="grid gap-3"
|
||||||
|
style={{ gridTemplateColumns: 'repeat(3, 1fr)', gridTemplateRows: 'repeat(3, 1fr)' }}
|
||||||
|
>
|
||||||
|
{dots.map((row, ri) =>
|
||||||
|
row.map((color, ci) => (
|
||||||
|
<div
|
||||||
|
key={`${ri}-${ci}`}
|
||||||
|
className="rounded-full"
|
||||||
|
style={{
|
||||||
|
width: '28px',
|
||||||
|
height: '28px',
|
||||||
|
backgroundColor: color,
|
||||||
|
boxShadow: isDark
|
||||||
|
? `0 0 8px ${color}55`
|
||||||
|
: `0 1px 3px rgba(0,0,0,0.15)`,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)),
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const TypographyThumbnail = ({ isDark }: { isDark: boolean }) => (
|
||||||
|
<div className="w-full h-full flex items-center justify-center gap-1">
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
fontSize: '72px',
|
||||||
|
lineHeight: 1,
|
||||||
|
fontWeight: 700,
|
||||||
|
fontFamily: 'sans-serif',
|
||||||
|
color: isDark ? 'rgba(223,226,243,0.90)' : 'rgba(15,23,42,0.85)',
|
||||||
|
letterSpacing: '-2px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
가
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
fontSize: '64px',
|
||||||
|
lineHeight: 1,
|
||||||
|
fontWeight: 700,
|
||||||
|
fontFamily: 'serif',
|
||||||
|
color: isDark ? 'rgba(76,215,246,0.80)' : 'rgba(6,182,212,0.80)',
|
||||||
|
letterSpacing: '-1px',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
a
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const RadiusThumbnail = ({ isDark }: { isDark: boolean }) => {
|
||||||
|
const items = [
|
||||||
|
{ radius: '0px', size: 36 },
|
||||||
|
{ radius: '6px', size: 36 },
|
||||||
|
{ radius: '12px', size: 36 },
|
||||||
|
{ radius: '50%', size: 36 },
|
||||||
|
];
|
||||||
|
|
||||||
|
const borderColor = isDark ? 'rgba(76,215,246,0.55)' : 'rgba(6,182,212,0.65)';
|
||||||
|
const bgColor = isDark ? 'rgba(76,215,246,0.08)' : 'rgba(6,182,212,0.08)';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full h-full flex items-center justify-center gap-4">
|
||||||
|
{items.map(({ radius, size }) => (
|
||||||
|
<div
|
||||||
|
key={radius}
|
||||||
|
style={{
|
||||||
|
width: size,
|
||||||
|
height: size,
|
||||||
|
borderRadius: radius,
|
||||||
|
border: `2px solid ${borderColor}`,
|
||||||
|
backgroundColor: bgColor,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const LayoutThumbnail = ({ isDark }: { isDark: boolean }) => {
|
||||||
|
const accent = isDark ? 'rgba(76,215,246,0.18)' : 'rgba(6,182,212,0.14)';
|
||||||
|
const accentStrong = isDark ? 'rgba(76,215,246,0.40)' : 'rgba(6,182,212,0.38)';
|
||||||
|
const faint = isDark ? 'rgba(255,255,255,0.05)' : 'rgba(0,0,0,0.05)';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full h-full flex flex-col items-center justify-center gap-2 px-8">
|
||||||
|
{/* 헤더 바 */}
|
||||||
|
<div
|
||||||
|
className="w-full rounded"
|
||||||
|
style={{ height: '14px', backgroundColor: accentStrong }}
|
||||||
|
/>
|
||||||
|
{/* 2열 바디 */}
|
||||||
|
<div className="w-full flex gap-2" style={{ flex: 1, maxHeight: '52px' }}>
|
||||||
|
<div
|
||||||
|
className="rounded"
|
||||||
|
style={{ width: '28%', backgroundColor: accent }}
|
||||||
|
/>
|
||||||
|
<div className="flex flex-col gap-1.5" style={{ flex: 1 }}>
|
||||||
|
<div
|
||||||
|
className="w-full rounded"
|
||||||
|
style={{ height: '12px', backgroundColor: faint }}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className="w-3/4 rounded"
|
||||||
|
style={{ height: '12px', backgroundColor: faint }}
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
className="w-full rounded"
|
||||||
|
style={{ height: '12px', backgroundColor: faint }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/* 푸터 바 */}
|
||||||
|
<div
|
||||||
|
className="w-full rounded"
|
||||||
|
style={{ height: '10px', backgroundColor: accent }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// ---------- 카드 정의 ----------
|
||||||
|
|
||||||
|
const OVERVIEW_CARDS: OverviewCard[] = [
|
||||||
|
{
|
||||||
|
id: 'color',
|
||||||
|
label: 'Color',
|
||||||
|
thumbnail: (isDark) => <ColorThumbnail isDark={isDark} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'typography',
|
||||||
|
label: 'Typography',
|
||||||
|
thumbnail: (isDark) => <TypographyThumbnail isDark={isDark} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'radius',
|
||||||
|
label: 'Radius',
|
||||||
|
thumbnail: (isDark) => <RadiusThumbnail isDark={isDark} />,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'layout',
|
||||||
|
label: 'Layout',
|
||||||
|
thumbnail: (isDark) => <LayoutThumbnail isDark={isDark} />,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
// ---------- Props ----------
|
||||||
|
|
||||||
|
interface FoundationsOverviewProps {
|
||||||
|
theme: DesignTheme;
|
||||||
|
onNavigate: (id: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ---------- 컴포넌트 ----------
|
||||||
|
|
||||||
|
const FoundationsOverview = ({ theme, onNavigate }: FoundationsOverviewProps) => {
|
||||||
|
const t = theme;
|
||||||
|
const isDark = t.mode === 'dark';
|
||||||
|
|
||||||
|
const cardBg = isDark ? 'rgba(255,255,255,0.03)' : '#f5f5f5';
|
||||||
|
const cardBorder = isDark ? 'rgba(255,255,255,0.06)' : '#e5e5e5';
|
||||||
|
const thumbnailBorderBottom = isDark ? 'rgba(255,255,255,0.06)' : '#e0e0e0';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="pt-24 px-12 pb-16 max-w-5xl flex flex-col gap-12">
|
||||||
|
|
||||||
|
{/* ── 헤더 영역 ── */}
|
||||||
|
<div className="flex flex-col gap-3">
|
||||||
|
<span
|
||||||
|
className="font-mono text-xs font-semibold uppercase"
|
||||||
|
style={{ letterSpacing: '1.4px', color: t.textAccent }}
|
||||||
|
>
|
||||||
|
Foundations
|
||||||
|
</span>
|
||||||
|
<h1
|
||||||
|
className="font-sans text-4xl font-bold leading-tight"
|
||||||
|
style={{ color: t.textPrimary }}
|
||||||
|
>
|
||||||
|
Overview
|
||||||
|
</h1>
|
||||||
|
<p
|
||||||
|
className="font-korean text-sm leading-6"
|
||||||
|
style={{ color: t.textSecondary }}
|
||||||
|
>
|
||||||
|
디자인의 기반이 되는 핵심 요소 사용 기준입니다.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* ── 3열 카드 그리드 ── */}
|
||||||
|
<div
|
||||||
|
className="grid gap-5"
|
||||||
|
style={{ gridTemplateColumns: 'repeat(3, 1fr)' }}
|
||||||
|
>
|
||||||
|
{OVERVIEW_CARDS.map((card) => (
|
||||||
|
<div
|
||||||
|
key={card.id}
|
||||||
|
className="rounded-lg border border-solid flex flex-col cursor-pointer transition-all duration-200"
|
||||||
|
style={{
|
||||||
|
backgroundColor: cardBg,
|
||||||
|
borderColor: cardBorder,
|
||||||
|
}}
|
||||||
|
onClick={() => onNavigate(card.id)}
|
||||||
|
onMouseEnter={(e) => {
|
||||||
|
const el = e.currentTarget;
|
||||||
|
el.style.transform = 'scale(1.025)';
|
||||||
|
el.style.boxShadow = isDark
|
||||||
|
? '0 8px 24px rgba(0,0,0,0.35)'
|
||||||
|
: '0 6px 18px rgba(0,0,0,0.10)';
|
||||||
|
el.style.borderColor = isDark
|
||||||
|
? 'rgba(76,215,246,0.22)'
|
||||||
|
: 'rgba(6,182,212,0.28)';
|
||||||
|
}}
|
||||||
|
onMouseLeave={(e) => {
|
||||||
|
const el = e.currentTarget;
|
||||||
|
el.style.transform = 'scale(1)';
|
||||||
|
el.style.boxShadow = 'none';
|
||||||
|
el.style.borderColor = cardBorder;
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* 썸네일 영역 */}
|
||||||
|
<div
|
||||||
|
className="h-48 rounded-t-lg overflow-hidden"
|
||||||
|
style={{
|
||||||
|
borderBottom: `1px solid ${thumbnailBorderBottom}`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{card.thumbnail(isDark)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 카드 라벨 */}
|
||||||
|
<div className="px-5 py-4">
|
||||||
|
<span
|
||||||
|
className="font-sans text-sm font-semibold"
|
||||||
|
style={{ color: t.textPrimary }}
|
||||||
|
>
|
||||||
|
{card.label}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FoundationsOverview;
|
||||||
1546
frontend/src/pages/design/TextFieldContent.tsx
Normal file
1546
frontend/src/pages/design/TextFieldContent.tsx
Normal file
파일 크기가 너무 크기때문에 변경 상태를 표시하지 않습니다.
Load Diff
@ -15,6 +15,8 @@ import LayerPanel from './LayerPanel';
|
|||||||
import SensitiveLayerPanel from './SensitiveLayerPanel';
|
import SensitiveLayerPanel from './SensitiveLayerPanel';
|
||||||
import DispersingZonePanel from './DispersingZonePanel';
|
import DispersingZonePanel from './DispersingZonePanel';
|
||||||
import MonitorRealtimePanel from './MonitorRealtimePanel';
|
import MonitorRealtimePanel from './MonitorRealtimePanel';
|
||||||
|
import MonitorVesselPanel from './MonitorVesselPanel';
|
||||||
|
import CollectHrPanel from './CollectHrPanel';
|
||||||
import MonitorForecastPanel from './MonitorForecastPanel';
|
import MonitorForecastPanel from './MonitorForecastPanel';
|
||||||
import VesselMaterialsPanel from './VesselMaterialsPanel';
|
import VesselMaterialsPanel from './VesselMaterialsPanel';
|
||||||
|
|
||||||
@ -37,6 +39,8 @@ const PANEL_MAP: Record<string, () => JSX.Element> = {
|
|||||||
'dispersant-zone': () => <DispersingZonePanel />,
|
'dispersant-zone': () => <DispersingZonePanel />,
|
||||||
'vessel-materials': () => <VesselMaterialsPanel />,
|
'vessel-materials': () => <VesselMaterialsPanel />,
|
||||||
'monitor-realtime': () => <MonitorRealtimePanel />,
|
'monitor-realtime': () => <MonitorRealtimePanel />,
|
||||||
|
'monitor-vessel': () => <MonitorVesselPanel />,
|
||||||
|
'collect-hr': () => <CollectHrPanel />,
|
||||||
'monitor-forecast': () => <MonitorForecastPanel />,
|
'monitor-forecast': () => <MonitorForecastPanel />,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
333
frontend/src/tabs/admin/components/CollectHrPanel.tsx
Normal file
333
frontend/src/tabs/admin/components/CollectHrPanel.tsx
Normal file
@ -0,0 +1,333 @@
|
|||||||
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
|
||||||
|
// ─── 타입 ──────────────────────────────────────────────────
|
||||||
|
|
||||||
|
interface EtaClct {
|
||||||
|
startDate: string;
|
||||||
|
endDate: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ResultClct {
|
||||||
|
resultDate: string;
|
||||||
|
count: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface HrCollectItem {
|
||||||
|
id: string;
|
||||||
|
rootId: string;
|
||||||
|
ip: string;
|
||||||
|
depth1: string;
|
||||||
|
depth2: string;
|
||||||
|
depth3: string;
|
||||||
|
depth4: string | null;
|
||||||
|
clctName: string;
|
||||||
|
clctType: string;
|
||||||
|
clctTypeName: string;
|
||||||
|
trnsmtCycle: string | null;
|
||||||
|
receiveCycle: string | null;
|
||||||
|
targetTable: string;
|
||||||
|
seq: number;
|
||||||
|
estmtRqrd: string;
|
||||||
|
activeYn: string;
|
||||||
|
clctStartDt: string;
|
||||||
|
clctEndDt: string;
|
||||||
|
clctDate: string | null;
|
||||||
|
jobName: string;
|
||||||
|
resultClctList: ResultClct[];
|
||||||
|
etaClctList: EtaClct[];
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── Mock 데이터 ────────────────────────────────────────────
|
||||||
|
|
||||||
|
// TODO: 실제 API 연동 시 fetch 호출로 교체
|
||||||
|
const MOCK_DATA: HrCollectItem[] = [
|
||||||
|
{
|
||||||
|
id: '100200',
|
||||||
|
rootId: '2',
|
||||||
|
ip: '127.0.0.1',
|
||||||
|
depth1: '연계',
|
||||||
|
depth2: '해양경찰청',
|
||||||
|
depth3: '해경업무포탈시스템(KBP)',
|
||||||
|
depth4: null,
|
||||||
|
clctName: '사용자부서',
|
||||||
|
clctType: '000002',
|
||||||
|
clctTypeName: '배치',
|
||||||
|
trnsmtCycle: null,
|
||||||
|
receiveCycle: '0 20 4 * * *',
|
||||||
|
targetTable: 'common.t_dept_info',
|
||||||
|
seq: 101,
|
||||||
|
estmtRqrd: '1',
|
||||||
|
activeYn: 'Y',
|
||||||
|
clctStartDt: '2024-12-16',
|
||||||
|
clctEndDt: '9999-12-31',
|
||||||
|
clctDate: '2024-12-16',
|
||||||
|
jobName: 'DeptJob',
|
||||||
|
resultClctList: [],
|
||||||
|
etaClctList: [
|
||||||
|
{ startDate: '2025-09-12 04:20', endDate: '2025-09-12 04:21' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '100200',
|
||||||
|
rootId: '2',
|
||||||
|
ip: '127.0.0.1',
|
||||||
|
depth1: '연계',
|
||||||
|
depth2: '해양경찰청',
|
||||||
|
depth3: '해경업무포탈시스템(KBP)',
|
||||||
|
depth4: null,
|
||||||
|
clctName: '사용자계정',
|
||||||
|
clctType: '000002',
|
||||||
|
clctTypeName: '배치',
|
||||||
|
trnsmtCycle: null,
|
||||||
|
receiveCycle: '0 20 4 * 1 *',
|
||||||
|
targetTable: 'common.t_usr',
|
||||||
|
seq: 102,
|
||||||
|
estmtRqrd: '5',
|
||||||
|
activeYn: 'Y',
|
||||||
|
clctStartDt: '2024-12-17',
|
||||||
|
clctEndDt: '9999-12-31',
|
||||||
|
clctDate: null,
|
||||||
|
jobName: 'UserFlowJob',
|
||||||
|
resultClctList: [],
|
||||||
|
etaClctList: [],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '100201',
|
||||||
|
rootId: '2',
|
||||||
|
ip: '127.0.0.1',
|
||||||
|
depth1: '연계',
|
||||||
|
depth2: '해양경찰청',
|
||||||
|
depth3: '해경업무포탈시스템(KBP)',
|
||||||
|
depth4: null,
|
||||||
|
clctName: '사용자직위',
|
||||||
|
clctType: '000002',
|
||||||
|
clctTypeName: '배치',
|
||||||
|
trnsmtCycle: null,
|
||||||
|
receiveCycle: '0 30 4 * * *',
|
||||||
|
targetTable: 'common.t_position_info',
|
||||||
|
seq: 103,
|
||||||
|
estmtRqrd: '1',
|
||||||
|
activeYn: 'Y',
|
||||||
|
clctStartDt: '2024-12-16',
|
||||||
|
clctEndDt: '9999-12-31',
|
||||||
|
clctDate: '2025-01-10',
|
||||||
|
jobName: 'PositionJob',
|
||||||
|
resultClctList: [{ resultDate: '2025-09-12 04:30', count: 42 }],
|
||||||
|
etaClctList: [
|
||||||
|
{ startDate: '2025-09-12 04:30', endDate: '2025-09-12 04:31' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '100202',
|
||||||
|
rootId: '2',
|
||||||
|
ip: '127.0.0.1',
|
||||||
|
depth1: '연계',
|
||||||
|
depth2: '해양경찰청',
|
||||||
|
depth3: '해경업무포탈시스템(KBP)',
|
||||||
|
depth4: null,
|
||||||
|
clctName: '조직정보',
|
||||||
|
clctType: '000002',
|
||||||
|
clctTypeName: '배치',
|
||||||
|
trnsmtCycle: null,
|
||||||
|
receiveCycle: '0 40 4 * * *',
|
||||||
|
targetTable: 'common.t_org_info',
|
||||||
|
seq: 104,
|
||||||
|
estmtRqrd: '2',
|
||||||
|
activeYn: 'Y',
|
||||||
|
clctStartDt: '2024-12-18',
|
||||||
|
clctEndDt: '9999-12-31',
|
||||||
|
clctDate: '2025-03-20',
|
||||||
|
jobName: 'OrgJob',
|
||||||
|
resultClctList: [{ resultDate: '2025-09-12 04:40', count: 15 }],
|
||||||
|
etaClctList: [
|
||||||
|
{ startDate: '2025-09-12 04:40', endDate: '2025-09-12 04:41' },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: '100203',
|
||||||
|
rootId: '2',
|
||||||
|
ip: '127.0.0.1',
|
||||||
|
depth1: '연계',
|
||||||
|
depth2: '해양경찰청',
|
||||||
|
depth3: '해경업무포탈시스템(KBP)',
|
||||||
|
depth4: null,
|
||||||
|
clctName: '근무상태',
|
||||||
|
clctType: '000002',
|
||||||
|
clctTypeName: '배치',
|
||||||
|
trnsmtCycle: null,
|
||||||
|
receiveCycle: '0 0 5 * * *',
|
||||||
|
targetTable: 'common.t_work_status',
|
||||||
|
seq: 105,
|
||||||
|
estmtRqrd: '3',
|
||||||
|
activeYn: 'N',
|
||||||
|
clctStartDt: '2025-01-15',
|
||||||
|
clctEndDt: '9999-12-31',
|
||||||
|
clctDate: null,
|
||||||
|
jobName: 'WorkStatusJob',
|
||||||
|
resultClctList: [],
|
||||||
|
etaClctList: [],
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
function fetchHrCollectData(): Promise<HrCollectItem[]> {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
setTimeout(() => resolve(MOCK_DATA), 300);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── 상태 뱃지 ─────────────────────────────────────────────
|
||||||
|
|
||||||
|
function getCollectStatus(item: HrCollectItem): { label: string; color: string } {
|
||||||
|
if (item.activeYn !== 'Y') {
|
||||||
|
return { label: '비활성', color: 'text-t3 bg-bg-2' };
|
||||||
|
}
|
||||||
|
if (item.etaClctList.length > 0) {
|
||||||
|
return { label: '완료', color: 'text-emerald-400 bg-emerald-500/10' };
|
||||||
|
}
|
||||||
|
return { label: '대기', color: 'text-yellow-400 bg-yellow-500/10' };
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── cron 표현식 → 읽기 쉬운 형태 ─────────────────────────
|
||||||
|
|
||||||
|
function formatCron(cron: string | null): string {
|
||||||
|
if (!cron) return '-';
|
||||||
|
const parts = cron.split(' ');
|
||||||
|
if (parts.length < 6) return cron;
|
||||||
|
const [sec, min, hour, , , ] = parts;
|
||||||
|
return `매일 ${hour}:${min.padStart(2, '0')}:${sec.padStart(2, '0')}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── 테이블 ─────────────────────────────────────────────────
|
||||||
|
|
||||||
|
const HEADERS = ['번호', '수집항목', '기관', '시스템', '유형', '수집주기', '대상테이블', 'Job명', '활성', '수집시작일', '최근수집일', '상태'];
|
||||||
|
|
||||||
|
function HrTable({ rows, loading }: { rows: HrCollectItem[]; loading: boolean }) {
|
||||||
|
return (
|
||||||
|
<div className="overflow-auto">
|
||||||
|
<table className="w-full text-xs border-collapse">
|
||||||
|
<thead>
|
||||||
|
<tr className="bg-bg-2 text-t3 uppercase tracking-wide">
|
||||||
|
{HEADERS.map((h) => (
|
||||||
|
<th key={h} className="px-3 py-2 text-left font-medium border-b border-border-1 whitespace-nowrap">{h}</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{loading && rows.length === 0
|
||||||
|
? Array.from({ length: 5 }).map((_, i) => (
|
||||||
|
<tr key={i} className="border-b border-border-1 animate-pulse">
|
||||||
|
{HEADERS.map((_, j) => (
|
||||||
|
<td key={j} className="px-3 py-2">
|
||||||
|
<div className="h-3 bg-bg-2 rounded w-14" />
|
||||||
|
</td>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))
|
||||||
|
: rows.map((row, idx) => {
|
||||||
|
const status = getCollectStatus(row);
|
||||||
|
return (
|
||||||
|
<tr key={`${row.seq}`} className="border-b border-border-1 hover:bg-bg-1/50">
|
||||||
|
<td className="px-3 py-2 text-t2 text-center">{idx + 1}</td>
|
||||||
|
<td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.clctName}</td>
|
||||||
|
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.depth2}</td>
|
||||||
|
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.depth3}</td>
|
||||||
|
<td className="px-3 py-2 text-t2">{row.clctTypeName}</td>
|
||||||
|
<td className="px-3 py-2 text-t2 whitespace-nowrap font-mono">{formatCron(row.receiveCycle)}</td>
|
||||||
|
<td className="px-3 py-2 text-t2 font-mono">{row.targetTable}</td>
|
||||||
|
<td className="px-3 py-2 text-t2 font-mono">{row.jobName}</td>
|
||||||
|
<td className="px-3 py-2 text-center">
|
||||||
|
<span className={`inline-block px-1.5 py-0.5 rounded text-[11px] font-medium ${
|
||||||
|
row.activeYn === 'Y' ? 'text-emerald-400 bg-emerald-500/10' : 'text-t3 bg-bg-2'
|
||||||
|
}`}>
|
||||||
|
{row.activeYn === 'Y' ? 'Y' : 'N'}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.clctStartDt}</td>
|
||||||
|
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.clctDate ?? '-'}</td>
|
||||||
|
<td className="px-3 py-2">
|
||||||
|
<span className={`inline-block px-2 py-0.5 rounded text-[11px] font-medium ${status.color}`}>
|
||||||
|
{status.label}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// ─── 메인 패널 ──────────────────────────────────────────────
|
||||||
|
|
||||||
|
export default function CollectHrPanel() {
|
||||||
|
const [rows, setRows] = useState<HrCollectItem[]>([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
|
||||||
|
|
||||||
|
const fetchData = useCallback(async () => {
|
||||||
|
setLoading(true);
|
||||||
|
const data = await fetchHrCollectData();
|
||||||
|
setRows(data);
|
||||||
|
setLoading(false);
|
||||||
|
setLastUpdate(new Date());
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let isMounted = true;
|
||||||
|
if (rows.length === 0) {
|
||||||
|
void Promise.resolve().then(() => { if (isMounted) void fetchData(); });
|
||||||
|
}
|
||||||
|
return () => { isMounted = false; };
|
||||||
|
}, [rows.length, fetchData]);
|
||||||
|
|
||||||
|
const activeCount = rows.filter((r) => r.activeYn === 'Y').length;
|
||||||
|
const completedCount = rows.filter((r) => r.etaClctList.length > 0).length;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col h-full overflow-hidden">
|
||||||
|
{/* 헤더 */}
|
||||||
|
<div className="flex items-center justify-between px-5 py-3 border-b border-border-1 shrink-0">
|
||||||
|
<h2 className="text-sm font-semibold text-t1">인사정보 수집 현황</h2>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{lastUpdate && (
|
||||||
|
<span className="text-xs text-t3">
|
||||||
|
갱신: {lastUpdate.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
onClick={fetchData}
|
||||||
|
disabled={loading}
|
||||||
|
className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-bg-2 hover:bg-bg-3 text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||||
|
</svg>
|
||||||
|
새로고침
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 상태 표시줄 */}
|
||||||
|
<div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-border-1 bg-bg-0">
|
||||||
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-emerald-500/10 text-emerald-400">
|
||||||
|
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
|
||||||
|
수집 완료 {completedCount}건
|
||||||
|
</span>
|
||||||
|
<span className="text-xs text-t3">
|
||||||
|
전체 {rows.length}건 (활성: {activeCount} / 비활성: {rows.length - activeCount})
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 테이블 */}
|
||||||
|
<div className="flex-1 overflow-auto p-5">
|
||||||
|
<HrTable rows={rows} loading={loading} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
246
frontend/src/tabs/admin/components/MonitorVesselPanel.tsx
Normal file
246
frontend/src/tabs/admin/components/MonitorVesselPanel.tsx
Normal file
@ -0,0 +1,246 @@
|
|||||||
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
|
||||||
|
// TODO: 실제 API 연동 시 fetch 호출로 교체
|
||||||
|
interface VesselMonitorRow {
|
||||||
|
institution: string;
|
||||||
|
institutionCode: string;
|
||||||
|
systemName: string;
|
||||||
|
linkInfo: string;
|
||||||
|
storagePlace: string;
|
||||||
|
linkMethod: string;
|
||||||
|
collectionCycle: string;
|
||||||
|
collectionCount: string;
|
||||||
|
isNormal: boolean;
|
||||||
|
lastMessageTime: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 기관코드 → 원천기관명 매핑 */
|
||||||
|
const INSTITUTION_NAMES: Record<string, string> = {
|
||||||
|
BS: '부산항',
|
||||||
|
BSN: '부산신항',
|
||||||
|
DH: '동해안',
|
||||||
|
DS: '대산항',
|
||||||
|
GI: '경인항',
|
||||||
|
GIC: '경인연안',
|
||||||
|
GS: '군산항',
|
||||||
|
IC: '인천항',
|
||||||
|
JDC: '진도연안',
|
||||||
|
JJ: '제주항',
|
||||||
|
MP: '목포항',
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Mock 데이터 정의 (스크린샷 기반) */
|
||||||
|
const MOCK_DATA: Omit<VesselMonitorRow, 'institution'>[] = [
|
||||||
|
{ institutionCode: 'BS', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '439 / 499', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||||
|
{ institutionCode: 'BS', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '133 / 463', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||||
|
{ institutionCode: 'BSN', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '255 / 278', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||||
|
{ institutionCode: 'BSN', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '133 / 426', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||||
|
{ institutionCode: 'DH', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
|
||||||
|
{ institutionCode: 'DH', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
|
||||||
|
{ institutionCode: 'DS', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '0', isNormal: false, lastMessageTime: '2026-03-15 15:38:57' },
|
||||||
|
{ institutionCode: 'DS', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '0', isNormal: false, lastMessageTime: '2026-03-15 15:38:56' },
|
||||||
|
{ institutionCode: 'GI', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '120 / 136', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||||
|
{ institutionCode: 'GI', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '55 / 467', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||||
|
{ institutionCode: 'GIC', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '180 / 216', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||||
|
{ institutionCode: 'GIC', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
|
||||||
|
{ institutionCode: 'GS', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
|
||||||
|
{ institutionCode: 'GS', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
|
||||||
|
{ institutionCode: 'IC', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '149 / 176', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||||
|
{ institutionCode: 'IC', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '55 / 503', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||||
|
{ institutionCode: 'JDC', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '433 / 524', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||||
|
{ institutionCode: 'JDC', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '256 / 1619', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||||
|
{ institutionCode: 'JJ', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '429 / 508', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||||
|
{ institutionCode: 'JJ', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '00:00:00', collectionCount: '160 / 1592', isNormal: true, lastMessageTime: '2026-03-25 10:29:09' },
|
||||||
|
{ institutionCode: 'MP', systemName: 'VTS_AIS', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
|
||||||
|
{ institutionCode: 'MP', systemName: 'VTS_RT', linkInfo: 'VTS', storagePlace: 'signal.t_dynamic_all_reply', linkMethod: 'KAFKA', collectionCycle: '수신대기중', collectionCount: '0', isNormal: false, lastMessageTime: '' },
|
||||||
|
];
|
||||||
|
|
||||||
|
/** Mock fetch — TODO: 실제 API 연동 시 fetch 호출로 교체 */
|
||||||
|
function fetchVesselMonitorData(): Promise<VesselMonitorRow[]> {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
setTimeout(() => {
|
||||||
|
const rows: VesselMonitorRow[] = MOCK_DATA.map((d) => ({
|
||||||
|
...d,
|
||||||
|
institution: INSTITUTION_NAMES[d.institutionCode] ?? d.institutionCode,
|
||||||
|
}));
|
||||||
|
resolve(rows);
|
||||||
|
}, 400);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── 상태 뱃지 ── */
|
||||||
|
function StatusBadge({ loading, onCount, total }: { loading: boolean; onCount: number; total: number }) {
|
||||||
|
if (loading) {
|
||||||
|
return (
|
||||||
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-bg-2 text-t2">
|
||||||
|
<span className="w-1.5 h-1.5 rounded-full bg-cyan-400 animate-pulse" />
|
||||||
|
조회 중...
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const offCount = total - onCount;
|
||||||
|
if (offCount === total) {
|
||||||
|
return (
|
||||||
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-red-500/10 text-red-400">
|
||||||
|
<span className="w-1.5 h-1.5 rounded-full bg-red-400" />
|
||||||
|
전체 OFF
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (offCount > 0) {
|
||||||
|
return (
|
||||||
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-yellow-500/10 text-yellow-400">
|
||||||
|
<span className="w-1.5 h-1.5 rounded-full bg-yellow-400" />
|
||||||
|
일부 OFF ({offCount}/{total})
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs bg-emerald-500/10 text-emerald-400">
|
||||||
|
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400" />
|
||||||
|
전체 정상
|
||||||
|
</span>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── 연결상태 셀 ── */
|
||||||
|
function ConnectionBadge({ isNormal, lastMessageTime }: { isNormal: boolean; lastMessageTime: string }) {
|
||||||
|
if (isNormal) {
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-start gap-0.5">
|
||||||
|
<span className="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-semibold bg-blue-600 text-white">
|
||||||
|
ON
|
||||||
|
</span>
|
||||||
|
{lastMessageTime && (
|
||||||
|
<span className="text-[10px] text-t3">{lastMessageTime}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col items-start gap-0.5">
|
||||||
|
<span className="inline-flex items-center px-2 py-0.5 rounded text-[11px] font-semibold bg-orange-500 text-white">
|
||||||
|
OFF
|
||||||
|
</span>
|
||||||
|
{lastMessageTime && (
|
||||||
|
<span className="text-[10px] text-t3">{lastMessageTime}</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── 테이블 ── */
|
||||||
|
const HEADERS = ['번호', '원천기관', '기관코드', '정보시스템명', '연계정보', '저장장소', '연계방식', '수집주기', '선박건수/신호건수', '연결상태'];
|
||||||
|
|
||||||
|
function VesselTable({ rows, loading }: { rows: VesselMonitorRow[]; loading: boolean }) {
|
||||||
|
return (
|
||||||
|
<div className="overflow-auto">
|
||||||
|
<table className="w-full text-xs border-collapse">
|
||||||
|
<thead>
|
||||||
|
<tr className="bg-bg-2 text-t3 uppercase tracking-wide">
|
||||||
|
{HEADERS.map((h) => (
|
||||||
|
<th key={h} className="px-3 py-2 text-left font-medium border-b border-border-1 whitespace-nowrap">{h}</th>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{loading && rows.length === 0
|
||||||
|
? Array.from({ length: 8 }).map((_, i) => (
|
||||||
|
<tr key={i} className="border-b border-border-1 animate-pulse">
|
||||||
|
{HEADERS.map((_, j) => (
|
||||||
|
<td key={j} className="px-3 py-2">
|
||||||
|
<div className="h-3 bg-bg-2 rounded w-14" />
|
||||||
|
</td>
|
||||||
|
))}
|
||||||
|
</tr>
|
||||||
|
))
|
||||||
|
: rows.map((row, idx) => (
|
||||||
|
<tr key={`${row.institutionCode}-${row.systemName}`} className="border-b border-border-1 hover:bg-bg-1/50">
|
||||||
|
<td className="px-3 py-2 text-t2 text-center">{idx + 1}</td>
|
||||||
|
<td className="px-3 py-2 font-medium text-t1 whitespace-nowrap">{row.institution}</td>
|
||||||
|
<td className="px-3 py-2 text-t2">{row.institutionCode}</td>
|
||||||
|
<td className="px-3 py-2 text-t2">{row.systemName}</td>
|
||||||
|
<td className="px-3 py-2 text-t2">{row.linkInfo}</td>
|
||||||
|
<td className="px-3 py-2 text-t2 whitespace-nowrap">{row.storagePlace}</td>
|
||||||
|
<td className="px-3 py-2 text-t2">{row.linkMethod}</td>
|
||||||
|
<td className="px-3 py-2 text-t2">{row.collectionCycle}</td>
|
||||||
|
<td className="px-3 py-2 text-t2 text-center">{row.collectionCount}</td>
|
||||||
|
<td className="px-3 py-2">
|
||||||
|
<ConnectionBadge isNormal={row.isNormal} lastMessageTime={row.lastMessageTime} />
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── 메인 패널 ── */
|
||||||
|
export default function MonitorVesselPanel() {
|
||||||
|
const [rows, setRows] = useState<VesselMonitorRow[]>([]);
|
||||||
|
const [loading, setLoading] = useState(false);
|
||||||
|
const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
|
||||||
|
|
||||||
|
const fetchData = useCallback(async () => {
|
||||||
|
setLoading(true);
|
||||||
|
const data = await fetchVesselMonitorData();
|
||||||
|
setRows(data);
|
||||||
|
setLoading(false);
|
||||||
|
setLastUpdate(new Date());
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
let isMounted = true;
|
||||||
|
if (rows.length === 0) {
|
||||||
|
void Promise.resolve().then(() => { if (isMounted) void fetchData(); });
|
||||||
|
}
|
||||||
|
return () => { isMounted = false; };
|
||||||
|
}, [rows.length, fetchData]);
|
||||||
|
|
||||||
|
const onCount = rows.filter((r) => r.isNormal).length;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex flex-col h-full overflow-hidden">
|
||||||
|
{/* 헤더 */}
|
||||||
|
<div className="flex items-center justify-between px-5 py-3 border-b border-border-1 shrink-0">
|
||||||
|
<h2 className="text-sm font-semibold text-t1">선박위치정보 모니터링</h2>
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
{lastUpdate && (
|
||||||
|
<span className="text-xs text-t3">
|
||||||
|
갱신: {lastUpdate.toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit' })}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
onClick={fetchData}
|
||||||
|
disabled={loading}
|
||||||
|
className="flex items-center gap-1.5 px-3 py-1.5 text-xs rounded bg-bg-2 hover:bg-bg-3 text-t2 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className={`w-3.5 h-3.5 ${loading ? 'animate-spin' : ''}`}
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
>
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||||
|
</svg>
|
||||||
|
새로고침
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 상태 표시줄 */}
|
||||||
|
<div className="flex items-center gap-3 px-5 py-2 shrink-0 border-b border-border-1 bg-bg-0">
|
||||||
|
<StatusBadge loading={loading} onCount={onCount} total={rows.length} />
|
||||||
|
<span className="text-xs text-t3">
|
||||||
|
연계 채널 {rows.length}개 (ON: {onCount} / OFF: {rows.length - onCount})
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 테이블 */}
|
||||||
|
<div className="flex-1 overflow-auto p-5">
|
||||||
|
<VesselTable rows={rows} loading={loading} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -74,7 +74,6 @@ export const ADMIN_MENU: AdminMenuItem[] = [
|
|||||||
{ id: 'monitor-realtime', label: '실시간 관측자료' },
|
{ id: 'monitor-realtime', label: '실시간 관측자료' },
|
||||||
{ id: 'monitor-forecast', label: '수치예측자료' },
|
{ id: 'monitor-forecast', label: '수치예측자료' },
|
||||||
{ id: 'monitor-vessel', label: '선박위치정보' },
|
{ id: 'monitor-vessel', label: '선박위치정보' },
|
||||||
{ id: 'monitor-hr', label: '인사' },
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|||||||
불러오는 중...
Reference in New Issue
Block a user