99 lines
5.0 KiB
TypeScript
99 lines
5.0 KiB
TypeScript
|
|
import React from 'react';
|
|
import { Calendar, User, Target, ChevronRight, Printer, Share2, Info } from 'lucide-react';
|
|
import { MEETING_OVERVIEW } from '../constants';
|
|
|
|
interface LayoutProps {
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
const Layout: React.FC<LayoutProps> = ({ children }) => {
|
|
return (
|
|
<div className="min-h-screen flex flex-col md:flex-row">
|
|
{/* Sidebar - Desktop Only */}
|
|
<aside className="hidden md:flex w-72 bg-white border-r border-slate-200 flex-col sticky top-0 h-screen">
|
|
<div className="p-6 border-b border-slate-100">
|
|
<div className="flex items-center gap-2 mb-1">
|
|
<span className="bg-indigo-600 text-white p-1 rounded font-bold text-sm">SAM</span>
|
|
<span className="font-bold text-slate-800 tracking-tight">Project Dashboard</span>
|
|
</div>
|
|
<p className="text-xs text-slate-500 font-medium">Internal Interview Plan</p>
|
|
</div>
|
|
|
|
<nav className="flex-1 p-4 space-y-1 overflow-y-auto">
|
|
<p className="px-3 py-2 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Outline</p>
|
|
<a href="#overview" className="flex items-center gap-3 px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-indigo-600 rounded-md transition-colors group">
|
|
<Info className="w-4 h-4 text-slate-400 group-hover:text-indigo-600" />
|
|
미팅 개요
|
|
</a>
|
|
|
|
<p className="px-3 py-2 pt-6 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Questionnaire</p>
|
|
<a href="#cost" className="flex items-center gap-3 px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-indigo-600 rounded-md transition-colors">
|
|
<div className="w-1.5 h-1.5 rounded-full bg-blue-500"></div>
|
|
비용 및 계약
|
|
</a>
|
|
<a href="#legal" className="flex items-center gap-3 px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-indigo-600 rounded-md transition-colors">
|
|
<div className="w-1.5 h-1.5 rounded-full bg-emerald-500"></div>
|
|
데이터 및 법적 리스크
|
|
</a>
|
|
<a href="#continuity" className="flex items-center gap-3 px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-indigo-600 rounded-md transition-colors">
|
|
<div className="w-1.5 h-1.5 rounded-full bg-amber-500"></div>
|
|
연속성 대응
|
|
</a>
|
|
<a href="#technical" className="flex items-center gap-3 px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-indigo-600 rounded-md transition-colors">
|
|
<div className="w-1.5 h-1.5 rounded-full bg-slate-400"></div>
|
|
기술적 상세
|
|
</a>
|
|
|
|
<p className="px-3 py-2 pt-6 text-[10px] font-bold text-slate-400 uppercase tracking-widest">Strategy</p>
|
|
<a href="#tips" className="flex items-center gap-3 px-3 py-2 text-sm font-medium text-slate-600 hover:bg-slate-50 hover:text-indigo-600 rounded-md transition-colors">
|
|
<ChevronRight className="w-4 h-4" />
|
|
협상 전략 및 팁
|
|
</a>
|
|
</nav>
|
|
|
|
<div className="p-4 border-t border-slate-100 bg-slate-50">
|
|
<div className="flex items-center gap-3 p-3 bg-white border border-slate-200 rounded-lg shadow-sm">
|
|
<div className="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-700 font-bold text-xs">JD</div>
|
|
<div>
|
|
<p className="text-xs font-bold text-slate-800">SAM Lead</p>
|
|
<p className="text-[10px] text-slate-500">Project Manager</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
{/* Main Content Area */}
|
|
<main className="flex-1 flex flex-col min-w-0">
|
|
<header className="sticky top-0 z-30 flex h-16 items-center justify-between border-b bg-white/80 px-6 backdrop-blur-md">
|
|
<h2 className="text-sm font-semibold text-slate-800 truncate">
|
|
KoDATA EW 리포트 API 도입 인터뷰 계획안
|
|
</h2>
|
|
<div className="flex items-center gap-3">
|
|
<button className="p-2 text-slate-500 hover:bg-slate-100 rounded-lg transition-colors">
|
|
<Share2 className="w-4 h-4" />
|
|
</button>
|
|
<button
|
|
onClick={() => window.print()}
|
|
className="flex items-center gap-2 px-3 py-1.5 bg-indigo-600 text-white rounded-lg text-sm font-medium hover:bg-indigo-700 transition-colors shadow-sm shadow-indigo-200"
|
|
>
|
|
<Printer className="w-4 h-4" />
|
|
<span className="hidden sm:inline">PDF 출력</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="flex-1 overflow-y-auto p-4 sm:p-8 space-y-8">
|
|
{children}
|
|
|
|
<footer className="pt-12 pb-6 border-t border-slate-200 text-center">
|
|
<p className="text-sm text-slate-400">© 2024 SAM Project - Internal Use Only</p>
|
|
</footer>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Layout;
|