leedano
d0491c3f0f
- react-router-dom 도입, /design 경로에 디자인 토큰/컴포넌트 카탈로그 페이지 추가 - SCAT 지도에서 하드코딩된 제주 해안선 좌표 제거, 인접 구간 기반 동적 방향 계산으로 전환 - @/ path alias 추가, SVG 아이콘 에셋 추가
67 lines
2.2 KiB
TypeScript
67 lines
2.2 KiB
TypeScript
import { useState } from 'react';
|
|
import { DesignHeader } from './DesignHeader';
|
|
import type { DesignTab } from './DesignHeader';
|
|
import { DesignSidebar } from './DesignSidebar';
|
|
import type { MenuItemId } from './DesignSidebar';
|
|
|
|
import { ComponentsContent } from './ComponentsContent';
|
|
import { ColorPaletteContent } from './ColorPaletteContent';
|
|
import { TypographyContent } from './TypographyContent';
|
|
import { RadiusContent } from './RadiusContent';
|
|
import { LayoutContent } from './LayoutContent';
|
|
import { getTheme } from './designTheme';
|
|
import type { ThemeMode } from './designTheme';
|
|
|
|
const FIRST_ITEM: Record<DesignTab, MenuItemId> = {
|
|
foundations: 'color',
|
|
components: 'buttons',
|
|
};
|
|
|
|
export const DesignPage = () => {
|
|
const [activeTab, setActiveTab] = useState<DesignTab>('foundations');
|
|
const [themeMode, setThemeMode] = useState<ThemeMode>('dark');
|
|
const [sidebarItem, setSidebarItem] = useState<MenuItemId>('color');
|
|
|
|
const theme = getTheme(themeMode);
|
|
|
|
const handleTabChange = (tab: DesignTab) => {
|
|
setActiveTab(tab);
|
|
setSidebarItem(FIRST_ITEM[tab]);
|
|
};
|
|
|
|
const renderContent = () => {
|
|
if (activeTab === 'foundations') {
|
|
switch (sidebarItem) {
|
|
case 'color':
|
|
return <ColorPaletteContent theme={theme} />;
|
|
case 'typography':
|
|
return <TypographyContent theme={theme} />;
|
|
case 'radius':
|
|
return <RadiusContent theme={theme} />;
|
|
case 'layout':
|
|
return <LayoutContent theme={theme} />;
|
|
default:
|
|
return <ColorPaletteContent theme={theme} />;
|
|
}
|
|
}
|
|
return <ComponentsContent />;
|
|
};
|
|
|
|
return (
|
|
<div
|
|
className="h-screen w-screen overflow-hidden flex flex-col"
|
|
style={{ backgroundColor: theme.pageBg }}
|
|
>
|
|
<DesignHeader activeTab={activeTab} onTabChange={handleTabChange} theme={theme} onThemeToggle={() => setThemeMode(themeMode === 'dark' ? 'light' : 'dark')} />
|
|
<div className="flex flex-1 overflow-hidden">
|
|
<DesignSidebar theme={theme} activeTab={activeTab} activeItem={sidebarItem} onItemChange={setSidebarItem} />
|
|
<main className="flex-1 overflow-y-auto">
|
|
{renderContent()}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default DesignPage;
|