feat(design): Stitch MCP 디자인 시스템 카탈로그 + 관리자 패널 추가 #120
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;
|
||||
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';
|
||||
|
||||
export type DesignTab = 'foundations' | 'components';
|
||||
@ -16,6 +17,7 @@ const TABS: { label: string; id: DesignTab }[] = [
|
||||
|
||||
export const DesignHeader = ({ activeTab, onTabChange, theme, onThemeToggle }: DesignHeaderProps) => {
|
||||
const isDark = theme.mode === 'dark';
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<header
|
||||
@ -27,12 +29,14 @@ export const DesignHeader = ({ activeTab, onTabChange, theme, onThemeToggle }: D
|
||||
>
|
||||
{/* 좌측: 로고 + 버전 뱃지 */}
|
||||
<div className="flex flex-row items-center gap-3">
|
||||
<span
|
||||
className="font-sans text-2xl leading-8 font-bold"
|
||||
<button
|
||||
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 }}
|
||||
>
|
||||
WING-OPS
|
||||
</span>
|
||||
</button>
|
||||
<div
|
||||
className="rounded-sm border border-solid py-1 px-2"
|
||||
style={{
|
||||
|
||||
@ -9,18 +9,22 @@ import { ColorPaletteContent } from './ColorPaletteContent';
|
||||
import { TypographyContent } from './TypographyContent';
|
||||
import { RadiusContent } from './RadiusContent';
|
||||
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 type { ThemeMode } from './designTheme';
|
||||
|
||||
const FIRST_ITEM: Record<DesignTab, MenuItemId> = {
|
||||
foundations: 'color',
|
||||
components: 'buttons',
|
||||
foundations: 'overview',
|
||||
components: 'overview',
|
||||
};
|
||||
|
||||
export const DesignPage = () => {
|
||||
const [activeTab, setActiveTab] = useState<DesignTab>('foundations');
|
||||
const [themeMode, setThemeMode] = useState<ThemeMode>('dark');
|
||||
const [sidebarItem, setSidebarItem] = useState<MenuItemId>('color');
|
||||
const [sidebarItem, setSidebarItem] = useState<MenuItemId>('overview');
|
||||
|
||||
const theme = getTheme(themeMode);
|
||||
|
||||
@ -32,6 +36,8 @@ export const DesignPage = () => {
|
||||
const renderContent = () => {
|
||||
if (activeTab === 'foundations') {
|
||||
switch (sidebarItem) {
|
||||
case 'overview':
|
||||
return <FoundationsOverview theme={theme} onNavigate={(id) => setSidebarItem(id as MenuItemId)} />;
|
||||
case 'color':
|
||||
return <ColorPaletteContent theme={theme} />;
|
||||
case 'typography':
|
||||
@ -41,10 +47,19 @@ export const DesignPage = () => {
|
||||
case 'layout':
|
||||
return <LayoutContent theme={theme} />;
|
||||
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 (
|
||||
|
||||
@ -1,38 +1,27 @@
|
||||
import type { DesignTheme } from './designTheme';
|
||||
import type { DesignTab } from './DesignHeader';
|
||||
|
||||
import wingColorPaletteIcon from '../../assets/icons/wing-color-palette.svg';
|
||||
import wingElevationIcon from '../../assets/icons/wing-elevation.svg';
|
||||
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 FoundationsMenuItemId = 'overview' | 'color' | 'typography' | 'radius' | 'layout';
|
||||
export type ComponentsMenuItemId = 'overview' | 'buttons' | 'text-field';
|
||||
export type MenuItemId = FoundationsMenuItemId | ComponentsMenuItemId;
|
||||
|
||||
interface MenuItem {
|
||||
id: MenuItemId;
|
||||
label: string;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
const FOUNDATIONS_MENU: MenuItem[] = [
|
||||
{ id: 'color', label: 'Color', icon: wingColorPaletteIcon },
|
||||
{ id: 'typography', label: 'Typography', icon: wingTypographyIcon },
|
||||
{ id: 'radius', label: 'Radius', icon: wingElevationIcon },
|
||||
{ id: 'layout', label: 'Layout', icon: wingLayoutGridIcon },
|
||||
{ id: 'overview', label: 'Overview' },
|
||||
{ id: 'color', label: 'Color' },
|
||||
{ id: 'typography', label: 'Typography' },
|
||||
{ id: 'radius', label: 'Radius' },
|
||||
{ id: 'layout', label: 'Layout' },
|
||||
];
|
||||
|
||||
const COMPONENTS_MENU: MenuItem[] = [
|
||||
{ id: 'buttons', label: 'Buttons', icon: wingFoundationsIcon },
|
||||
{ id: 'text-inputs', label: 'Text Inputs', icon: wingFoundationsIcon },
|
||||
{ id: 'controls', label: 'Controls', icon: wingFoundationsIcon },
|
||||
{ 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 },
|
||||
{ id: 'overview', label: 'Overview' },
|
||||
{ id: 'buttons', label: 'Buttons' },
|
||||
{ id: 'text-field', label: 'Text Field' },
|
||||
];
|
||||
|
||||
const SIDEBAR_CONFIG: Record<DesignTab, { title: string; subtitle: string; menu: MenuItem[] }> = {
|
||||
@ -58,7 +47,7 @@ export function DesignSidebar({ theme, activeTab, activeItem, onItemChange }: De
|
||||
<button
|
||||
key={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={{
|
||||
borderColor: isActive ? theme.textAccent : 'transparent',
|
||||
color: isActive ? theme.textAccent : theme.textMuted,
|
||||
@ -67,7 +56,6 @@ export function DesignSidebar({ theme, activeTab, activeItem, onItemChange }: De
|
||||
: 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>
|
||||
</button>
|
||||
);
|
||||
@ -82,22 +70,6 @@ export function DesignSidebar({ theme, activeTab, activeItem, onItemChange }: De
|
||||
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>
|
||||
</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
불러오는 중...
Reference in New Issue
Block a user