Merge pull request #24 from DeveloperBlog-Devflow/feature/layout

feat: 사이드바 구현

Author: DongEun02

components/auth/LoginForm.tsx

@@ -36,7 +36,7 @@ const LoginForm = ({ handleOpenModal }: LoginFormProps) => {
       );
       const user = result.user;
       // console.log('로그인 성공 : ', user);
-      router.push('/main');
+      router.push('/');
     } catch (err: unknown) {
       if (err instanceof Error) {
       }
@@ -65,7 +65,7 @@ const LoginForm = ({ handleOpenModal }: LoginFormProps) => {
         password
       );
       // console.log('로그인 성공!', userCredential.user);
-      router.push('/main');
+      router.push('/');
     } catch (err) {
       // console.error('로그인 에러:', err);
       setError('이메일 또는 비밀번호가 잘못되었습니다.');

components/common/Sidebar.tsx

@@ -1,5 +1,86 @@
+'use client';
+
+import Link from 'next/link';
+import { usePathname, useRouter } from 'next/navigation';
+import {
+  Home,
+  ClipboardList,
+  CalendarPlus,
+  CopyPlus,
+  LogOut,
+} from 'lucide-react';
+import { signOut } from 'firebase/auth';
+import { auth } from '@/lib/firebase';
+
+const navItems = [
+  { label: '홈', href: '/', icon: Home },
+  { label: '개발 일지', href: '/logs', icon: ClipboardList },
+  { label: '새 계획 만들기', href: '/plans/new', icon: CalendarPlus },
+  { label: '새 페이지 만들기', href: '/pages/new', icon: CopyPlus },
+];
+
 const Sidebar = () => {
-  return <div className="w-48 bg-white"></div>;
+  const pathname = usePathname();
+  const router = useRouter();
+
+  const handleLogout = async (): Promise<void> => {
+    try {
+      await signOut(auth);
+      router.replace('/landing');
+      router.refresh(); // 서버 컴포넌트/세션 UI 갱신
+    } catch (err) {
+      console.error('로그아웃 실패:', err);
+      alert('로그아웃에 실패했습니다.');
+    }
+  };
+
+  return (
+    <div className="fixed flex h-screen w-48 flex-col bg-white">
+      <div className="flex items-center gap-2 px-6 py-5">
+        <span className="text-primary text-lg font-bold">&lt;/&gt;</span>
+        <span>DevFlow</span>
+      </div>
+      <hr className="border-slate-300" />
+      <nav className="mt-4 px-4">
+        <ul className="space-y-2">
+          {navItems.map(({ label, href, icon: Icon }) => {
+            const isActive = pathname === href;
+
+            return (
+              <li key={href}>
+                <Link
+                  href={href}
+                  className={[
+                    'flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium transition',
+                    isActive
+                      ? 'bg-slate-200 text-slate-900'
+                      : 'text-slate-700 hover:bg-slate-100',
+                  ].join(' ')}
+                >
+                  <Icon
+                    className={[
+                      'h-5 w-5',
+                      isActive ? 'text-slate-900' : 'text-slate-600',
+                    ].join(' ')}
+                  />
+                  {label}
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+      </nav>
+      <div className="absolute bottom-0 w-full border-t border-slate-200 p-4">
+        <button
+          className="flex items-center gap-3 rounded-lg px-4 py-3 text-sm font-medium text-slate-700 hover:bg-slate-100"
+          onClick={handleLogout}
+        >
+          <LogOut className="h-5 w-5 text-slate-600" />
+          로그아웃
+        </button>
+      </div>
+    </div>
+  );
 };
 
 export default Sidebar;

package-lock.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "clsx": "^2.1.1",
     "firebase": "^12.7.0",
+    "lucide-react": "^0.562.0",
     "next": "16.1.1",
     "react": "19.2.3",
     "react-dom": "19.2.3",