更新

frontend/src/layouts/DefaultLayout/index.scss

@@ -0,0 +1,10 @@
+.default-layout {
+    min-height: 100vh;
+    padding: 24px;
+}
+
+@media (max-width: 768px) {
+    .default-layout {
+        padding: 16px;
+    }
+}

frontend/src/layouts/DefaultLayout/index.tsx

@@ -1,4 +1,5 @@
 import { Outlet } from "react-router-dom";
+import "./index.scss";
 
 export function DefaultLayout() {
     return (

frontend/src/layouts/SidebarLayout/index.scss

@@ -0,0 +1,44 @@
+.shell {
+    display: grid;
+    grid-template-columns: 240px 1fr;
+    min-height: 100vh;
+}
+
+.shell__sidebar {
+    padding: 24px;
+    background: #111827;
+    color: #f9fafb;
+}
+
+.shell__brand {
+    font-size: 24px;
+    font-weight: 700;
+}
+
+.shell__hint {
+    margin-top: 12px;
+    color: #94a3b8;
+}
+
+.shell__content {
+    padding: 24px;
+}
+
+.shell__header {
+    margin-bottom: 16px;
+    color: #475569;
+}
+
+@media (max-width: 768px) {
+    .shell {
+        grid-template-columns: 1fr;
+    }
+
+    .shell__sidebar {
+        padding: 16px;
+    }
+
+    .shell__content {
+        padding: 16px;
+    }
+}

frontend/src/layouts/SidebarLayout/index.tsx

@@ -1,4 +1,5 @@
 import { Outlet, useLocation } from "react-router-dom";
+import "./index.scss";
 
 export function SidebarLayout() {
     const location = useLocation();

frontend/src/layouts/index.ts

@@ -0,0 +1,2 @@
+export * from "./DefaultLayout";
+export * from "./SidebarLayout";