[feat] add header and sidebar layout

.eslintrc.json

@@ -6,6 +6,8 @@
   ],
   "plugins": ["prettier"],
   "rules": {
-    "prettier/prettier": ["error"]
+    "prettier/prettier": ["error"],
+    "no-unused-vars": "warn",
+    "@typescript-eslint/no-unused-vars": "warn"
   }
 }

package.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "lint:ci": "next lint --config .eslintrc.ci.json"
   },
   "dependencies": {
     "axios": "^1.7.7",

src/app/(with-header-sidebar)/layout.module.css

@@ -0,0 +1,3 @@
+.header {
+  color: yellowgreen;
+}

src/app/(with-header-sidebar)/layout.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+import SideBar from '@/components/SideBar';
+import styles from './layout.module.css';
+import Header from '@/components/Header';
+
+export default function Layout({ children }: { children: ReactNode }) {
+  return (
+    <>
+      <Header />
+      <nav>
+        <SideBar />
+      </nav>
+      <main>{children}</main>
+    </>
+  );
+}

src/app/(with-header-sidebar)/mydashboard/page.tsx

@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>my page</div>;
+}

src/components/Header.module.css

@@ -0,0 +1,3 @@
+.header {
+  color: skyblue;
+}

src/components/Header.tsx

@@ -0,0 +1,9 @@
+'use client';
+import { usePathname } from 'next/navigation';
+import styles from './Header.module.css';
+
+export default function Header() {
+  const pathname = usePathname();
+
+  return <header className={styles.header}>헤더 {pathname}</header>;
+}

src/components/SideBar.module.css

@@ -0,0 +1,3 @@
+.active {
+  color: salmon;
+}

src/components/SideBar.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import styles from './SideBar.module.css';
+
+export default function SideBar() {
+  const pathname = usePathname();
+
+  return (
+    <div>
+      <Link
+        href={'/dashboard/1'}
+        className={`link ${pathname === '/dashboard/1' ? styles.active : ''}`}
+      >
+        대시보드1
+      </Link>
+      <Link
+        href={'/dashboard/2'}
+        className={`link ${pathname === '/dashboard/2' ? styles.active : ''}`}
+      >
+        대시보드2
+      </Link>
+    </div>
+  );
+}