Feat: #69 사이드 메뉴 및 공통 레이아웃 구현

src/components/common/Header.tsx

@@ -18,7 +18,7 @@ export default function Header() {
         <NavLink to="/" className="ml-10 hover:brightness-90">
           {({ isActive }) => <FiHome className={`size-20 ${isActive ? 'text-selected' : 'text-white'}`} />}
         </NavLink>
-        <NavLink to="/setting/user" className="ml-10 hover:brightness-90">
+        <NavLink to="/setting/auth" className="ml-10 hover:brightness-90">
           {({ isActive }) => <FaUserCircle className={`size-20 ${isActive ? 'text-selected' : 'text-white'}`} />}
         </NavLink>
         <button type="button" className="ml-10 h-20 rounded-md bg-white px-4 tracking-tight hover:brightness-90">

src/components/sidebar/ListSetting.tsx

@@ -0,0 +1,32 @@
+import { NavLink, useParams } from 'react-router-dom';
+
+type ListSettingProps = {
+  navList: {
+    label: string;
+    route: string;
+  }[];
+};
+
+export default function ListSetting({ navList }: ListSettingProps) {
+  const { teamId } = useParams();
+  return (
+    <ul className="grow overflow-auto">
+      {navList.map((item) => {
+        const routePath = item.route.includes(':teamId') ? item.route.replace(':teamId', teamId!) : item.route;
+
+        return (
+          <li key={item.label} className="relative cursor-pointer border-b bg-white hover:brightness-90">
+            <NavLink
+              to={`/setting/${routePath}`}
+              className={({ isActive }) =>
+                `flex h-30 flex-col justify-center border-l-4 px-10 ${isActive ? 'border-l-main' : 'border-l-transparent'}`
+              }
+            >
+              <span>{item.label}</span>
+            </NavLink>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

src/layouts/page/SettingLayout.tsx

@@ -1,10 +1,49 @@
-import { Outlet } from 'react-router-dom';
+import { Outlet, useLocation } from 'react-router-dom';
+import ListSidebar from '@components/sidebar/ListSidebar';
+import { USER_INFO_DUMMY } from '@mocks/mockData';
+import ListSetting from '@/components/sidebar/ListSetting';
+
+const navList = [
+  {
+    label: '개인정보 변경',
+    route: 'user',
+  },
+  {
+    label: '비밀번호 변경',
+    route: 'password',
+  },
+  {
+    label: 'My Teams',
+    route: 'team/:teamId',
+  },
+];
 
 export default function SettingLayout() {
+  const location = useLocation();
+
+  const getTitle = () => {
+    const currentPath = location.pathname.split('/').slice(-1)[0];
+    const currentNavItem = navList.find((item) =>
+      item.route.includes(':teamId') && location.pathname.includes('team') ? 'My Teams' : item.route === currentPath,
+    );
+    return currentNavItem ? currentNavItem.label : '이메일 인증';
+  };
+
   return (
-    <>
-      <h3>Setting Layout</h3>
-      <Outlet />
-    </>
+    <section className="flex h-full p-15">
+      <ListSidebar title={`${USER_INFO_DUMMY.nickname} 님의 정보`}>
+        <ListSetting navList={navList} />
+      </ListSidebar>
+      <section className="flex w-2/3 flex-col border border-list bg-contents-box">
+        <header className="flex h-30 items-center justify-between border-b p-10">
+          <div>
+            <small className="mr-5 font-bold text-category">{getTitle()}</small>
+          </div>
+        </header>
+        <div className="flex grow flex-col overflow-auto p-10 pt-0">
+          <Outlet />
+        </div>
+      </section>
+    </section>
   );
 }

src/mocks/mockData.ts

@@ -24,6 +24,15 @@ export const USER_DUMMY = [
   },
 ];
 
+export const USER_INFO_DUMMY = {
+  userId: 1,
+  email: '[email protected]',
+  nickname: 'momoco',
+  image: '',
+  bio: "Hi, I'm Momoco!",
+  link: ['[email protected]'],
+};
+
 export const TEAM_DUMMY: Team[] = [
   {
     teamId: 1,