File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
// 3단계 대시보드 시안의 좌측 메뉴. 아직 화면이 있는 것은 기관관리뿐이라
// 나머지 항목은 비활성(준비 중)으로 두고 자리만 잡는다 — 시안과 같은 골격을
// 먼저 세워 두면 다음 모듈(Mattermost 채팅 등)이 붙을 때 메뉴만 활성화하면 된다.
interface MenuItem {
key: string
label: string
enabled: boolean
icon: JSX.Element
}
const ICON_CLASS = 'h-4 w-4 shrink-0'
const MENU: MenuItem[] = [
{
key: 'dashboard',
label: 'Dashboard',
enabled: false,
icon: (
<svg className={ICON_CLASS} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<rect x="3" y="3" width="7" height="7" rx="1" />
<rect x="14" y="3" width="7" height="7" rx="1" />
<rect x="3" y="14" width="7" height="7" rx="1" />
<rect x="14" y="14" width="7" height="7" rx="1" />
</svg>
),
},
{
key: 'orgs',
label: '기관관리',
enabled: true,
icon: (
<svg className={ICON_CLASS} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M3 21h18M5 21V5a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v16M9 8h2M9 12h2M9 16h2M15 10h4v11" />
</svg>
),
},
{
key: 'projects',
label: '사업관리',
enabled: false,
icon: (
<svg className={ICON_CLASS} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z" />
</svg>
),
},
{
key: 'rights-check',
label: '권리확인',
enabled: false,
icon: (
<svg className={ICON_CLASS} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M12 3l8 3v6c0 4.5-3.2 7.7-8 9-4.8-1.3-8-4.5-8-9V6l8-3z" />
<path d="M9 12l2 2 4-4" />
</svg>
),
},
{
key: 'rights-process',
label: '권리처리',
enabled: false,
icon: (
<svg className={ICON_CLASS} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M7 3h7l5 5v13a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z" />
<path d="M14 3v5h5M9 13h6M9 17h6" />
</svg>
),
},
{
key: 'files',
label: '자료실',
enabled: false,
icon: (
<svg className={ICON_CLASS} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M3 7h18v4H3zM5 11v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-9M10 15h4" />
</svg>
),
},
{
key: 'mattermost',
label: 'Mattermost',
enabled: false,
icon: (
<svg className={ICON_CLASS} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M21 12a8 8 0 1 1-4-6.9L21 4l-1.1 4A8 8 0 0 1 21 12z" />
</svg>
),
},
{
key: 'system',
label: '시스템관리',
enabled: false,
icon: (
<svg className={ICON_CLASS} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<circle cx="12" cy="12" r="3" />
<path d="M19 12a7 7 0 0 0-.1-1.2l2-1.6-2-3.4-2.4 1a7 7 0 0 0-2-1.2L14 3h-4l-.5 2.6a7 7 0 0 0-2 1.2l-2.4-1-2 3.4 2 1.6a7 7 0 0 0 0 2.4l-2 1.6 2 3.4 2.4-1a7 7 0 0 0 2 1.2L10 21h4l.5-2.6a7 7 0 0 0 2-1.2l2.4 1 2-3.4-2-1.6c.06-.4.1-.8.1-1.2z" />
</svg>
),
},
]
export default function Sidebar({ activeKey = 'orgs' }: { activeKey?: string }) {
return (
<aside className="flex w-56 shrink-0 flex-col border-r border-gray-200 bg-white">
<div className="px-5 pb-4 pt-5">
<p className="text-lg font-bold tracking-tight">ITN-HUB</p>
<p className="text-xs text-gray-500">사업관리시스템</p>
</div>
<nav aria-label="주 메뉴">
<ul className="space-y-0.5 px-2">
{MENU.map((item) =>
item.enabled ? (
<li key={item.key}>
<a
href="/"
onClick={(e) => e.preventDefault()}
aria-current={item.key === activeKey ? 'page' : undefined}
className={`flex items-center gap-3 rounded-md px-3 py-2 text-sm ${
item.key === activeKey
? 'bg-gray-100 font-medium text-gray-900'
: 'text-gray-700 hover:bg-gray-50'
}`}
>
{item.icon}
{item.label}
</a>
</li>
) : (
<li key={item.key}>
<span
title="준비 중"
aria-disabled="true"
className="flex cursor-not-allowed items-center gap-3 rounded-md px-3 py-2 text-sm text-gray-400"
>
{item.icon}
{item.label}
</span>
</li>
),
)}
</ul>
</nav>
</aside>
)
}