diff --git a/.eslintrc.json b/.eslintrc.json
index fc4b170..82d37c6 100644
--- a/.eslintrc.json
+++ b/.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"
   }
 }
diff --git a/package.json b/package.json
index bace2a1..a4eb0b3 100644
--- a/package.json
+++ b/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",
diff --git a/src/app/(with-header-sidebar)/layout.module.css b/src/app/(with-header-sidebar)/layout.module.css
new file mode 100644
index 0000000..1dfd0fb
--- /dev/null
+++ b/src/app/(with-header-sidebar)/layout.module.css
@@ -0,0 +1,3 @@
+.header {
+  color: yellowgreen;
+}
diff --git a/src/app/(with-header-sidebar)/layout.tsx b/src/app/(with-header-sidebar)/layout.tsx
new file mode 100644
index 0000000..c085669
--- /dev/null
+++ b/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>
+    </>
+  );
+}
diff --git a/src/app/(with-header-sidebar)/mydashboard/page.tsx b/src/app/(with-header-sidebar)/mydashboard/page.tsx
new file mode 100644
index 0000000..6540575
--- /dev/null
+++ b/src/app/(with-header-sidebar)/mydashboard/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <div>my page</div>;
+}
diff --git a/src/components/Header.module.css b/src/components/Header.module.css
new file mode 100644
index 0000000..034074a
--- /dev/null
+++ b/src/components/Header.module.css
@@ -0,0 +1,3 @@
+.header {
+  color: skyblue;
+}
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
new file mode 100644
index 0000000..e4e0cf7
--- /dev/null
+++ b/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>;
+}
diff --git a/src/components/SideBar.module.css b/src/components/SideBar.module.css
new file mode 100644
index 0000000..4b8c8dd
--- /dev/null
+++ b/src/components/SideBar.module.css
@@ -0,0 +1,3 @@
+.active {
+  color: salmon;
+}
diff --git a/src/components/SideBar.tsx b/src/components/SideBar.tsx
new file mode 100644
index 0000000..fe709f6
--- /dev/null
+++ b/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>
+  );
+}