feat: 기본 레이아웃 설정, 스타일 설정, 메뉴 세팅 (ui는 kamco 프로젝트 기반)

web-app/app/routes/layout.tsx

@@ -1,10 +1,31 @@
 import { Outlet } from 'react-router';
 
+import { LayoutMenu } from '~/shared/components/menu/LayoutMenu';
+import { MENU_ITEMS } from '~/shared/constants/menu';
+
 export default function Layout() {
   return (
-    <div>
-      기본 레이아웃
-      <Outlet />
+    <div className="flex h-screen w-screen">
+      <aside className="bg-primary-tertiary01 z-10 h-full w-[260px] flex-none shadow-[4px_0_5px_0_rgba(0,0,0,0.1)]">
+        <div className="flex flex-col items-center bg-white pt-6 pb-4">
+          <div className="flex items-center justify-center pb-7">
+            <span className="text-xl font-bold text-primary">DABEEO</span>
+          </div>
+          <div className="text-sm text-gray-600">사용자 정보</div>
+        </div>
+        <div className="bg-primary flex h-12 items-center px-5 font-bold text-white">
+          변화탐지관리
+        </div>
+        <LayoutMenu items={MENU_ITEMS} />
+      </aside>
+      <main className="bg-primary-tertiary02 flex flex-1 min-w-0 flex-col">
+        <div className="bg-primary w-full h-4" />
+        <div className="flex min-h-0 flex-1 flex-col gap-6 px-8 pt-6 pb-8">
+          <div className="flex min-h-0 flex-1">
+            <Outlet />
+          </div>
+        </div>
+      </main>
     </div>
   );
 }