상단 헤더 제거

frontend/components/layout/AppLayout.tsx

@@ -15,6 +15,8 @@ import {
   ChevronDown,
   ChevronRight,
   UserCheck,
+  LogOut,
+  User,
 } from "lucide-react";
 import { useMenu } from "@/contexts/MenuContext";
 import { useAuth } from "@/hooks/useAuth";
@@ -22,8 +24,17 @@ import { useProfile } from "@/hooks/useProfile";
 import { MenuItem } from "@/lib/api/menu";
 import { menuScreenApi } from "@/lib/api/screen";
 import { toast } from "sonner";
-import { MainHeader } from "./MainHeader";
 import { ProfileModal } from "./ProfileModal";
+import { Logo } from "./Logo";
+import { SideMenu } from "./SideMenu";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 // useAuth의 UserInfo 타입을 확장
 interface ExtendedUserInfo {
@@ -397,82 +408,152 @@ function AppLayoutInner({ children }: AppLayoutProps) {
   const uiMenus = convertMenuToUI(currentMenus, user as ExtendedUserInfo);
 
   return (
-    <div className="flex h-screen flex-col bg-white">
-      {/* MainHeader 컴포넌트 사용 */}
-      <MainHeader
-        user={user}
-        onSidebarToggle={() => {
-          // 모바일에서만 토글 동작
-          if (isMobile) {
-            setSidebarOpen(!sidebarOpen);
-          }
-        }}
-        onProfileClick={openProfileModal}
-        onLogout={handleLogout}
-      />
+    <div className="flex h-screen bg-white">
+      {/* 모바일 사이드바 오버레이 */}
+      {sidebarOpen && isMobile && (
+        <div className="fixed inset-0 z-30 bg-black/50 lg:hidden" onClick={() => setSidebarOpen(false)} />
+      )}
 
-      <div className="flex flex-1 pt-14">
-        {/* 모바일 사이드바 오버레이 */}
-        {sidebarOpen && isMobile && (
-          <div className="fixed inset-0 z-30 bg-black/50 lg:hidden" onClick={() => setSidebarOpen(false)} />
+      {/* 왼쪽 사이드바 */}
+      <aside
+        className={`${
+          isMobile
+            ? (sidebarOpen ? "translate-x-0" : "-translate-x-full") + " fixed top-0 left-0 z-40"
+            : "relative z-auto translate-x-0"
+        } flex h-screen w-[200px] flex-col border-r border-slate-200 bg-white transition-transform duration-300`}
+      >
+        {/* 사이드바 최상단 - 로고 + 모바일 햄버거 메뉴 */}
+        <div className="flex h-14 items-center justify-between border-b border-slate-200 px-4">
+          <Logo />
+          {/* 모바일 햄버거 메뉴 버튼 */}
+          <div className="lg:hidden">
+            <SideMenu onSidebarToggle={() => setSidebarOpen(!sidebarOpen)} />
+          </div>
+        </div>
+
+        {/* Admin/User 모드 전환 버튼 (관리자만) */}
+        {((user as ExtendedUserInfo)?.userType === "SUPER_ADMIN" ||
+          (user as ExtendedUserInfo)?.userType === "COMPANY_ADMIN" ||
+          (user as ExtendedUserInfo)?.userType === "admin") && (
+          <div className="border-b border-slate-200 p-3">
+            <Button
+              onClick={handleModeSwitch}
+              className={`flex w-full items-center justify-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-200 hover:cursor-pointer ${
+                isAdminMode
+                  ? "border border-orange-200 bg-orange-50 text-orange-700 hover:bg-orange-100"
+                  : "border-primary/20 bg-accent hover:bg-primary/20 border text-blue-700"
+              }`}
+            >
+              {isAdminMode ? (
+                <>
+                  <UserCheck className="h-4 w-4" />
+                  사용자 메뉴로 전환
+                </>
+              ) : (
+                <>
+                  <Shield className="h-4 w-4" />
+                  관리자 메뉴로 전환
+                </>
+              )}
+            </Button>
+          </div>
         )}
 
-        {/* 왼쪽 사이드바 */}
-        <aside
-          className={`${
-            isMobile
-              ? (sidebarOpen ? "translate-x-0" : "-translate-x-full") + " fixed top-14 left-0 z-40"
-              : "relative top-0 z-auto translate-x-0"
-          } flex h-[calc(100vh-3.5rem)] w-[200px] flex-col border-r border-slate-200 bg-white transition-transform duration-300`}
-        >
-          {/* 사이드바 상단 - Admin/User 모드 전환 버튼 (관리자만) */}
-          {((user as ExtendedUserInfo)?.userType === "SUPER_ADMIN" ||
-            (user as ExtendedUserInfo)?.userType === "COMPANY_ADMIN" ||
-            (user as ExtendedUserInfo)?.userType === "admin") && (
-            <div className="border-b border-slate-200 p-3">
-              <Button
-                onClick={handleModeSwitch}
-                className={`flex w-full items-center justify-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-colors duration-200 hover:cursor-pointer ${
-                  isAdminMode
-                    ? "border border-orange-200 bg-orange-50 text-orange-700 hover:bg-orange-100"
-                    : "border-primary/20 bg-accent hover:bg-primary/20 border text-blue-700"
-                }`}
-              >
-                {isAdminMode ? (
-                  <>
-                    <UserCheck className="h-4 w-4" />
-                    사용자 메뉴로 전환
-                  </>
-                ) : (
-                  <>
-                    <Shield className="h-4 w-4" />
-                    관리자 메뉴로 전환
-                  </>
-                )}
-              </Button>
-            </div>
-          )}
+        {/* 메뉴 영역 */}
+        <div className="flex-1 overflow-y-auto py-4">
+          <nav className="space-y-1 px-3">
+            {loading ? (
+              <div className="animate-pulse space-y-2">
+                {[...Array(5)].map((_, i) => (
+                  <div key={i} className="h-8 rounded bg-slate-200"></div>
+                ))}
+              </div>
+            ) : (
+              uiMenus.map((menu) => renderMenu(menu))
+            )}
+          </nav>
+        </div>
 
-          <div className="flex-1 overflow-y-auto py-4">
-            <nav className="space-y-1 px-3">
-              {loading ? (
-                <div className="animate-pulse space-y-2">
-                  {[...Array(5)].map((_, i) => (
-                    <div key={i} className="h-8 rounded bg-slate-200"></div>
-                  ))}
+        {/* 사이드바 하단 - 사용자 프로필 */}
+        <div className="border-t border-slate-200 p-3">
+          <DropdownMenu modal={false}>
+            <DropdownMenuTrigger asChild>
+              <button className="flex w-full items-center gap-3 rounded-lg px-2 py-2 text-left transition-colors hover:bg-slate-100">
+                {/* 프로필 아바타 */}
+                <div className="relative flex h-9 w-9 shrink-0 overflow-hidden rounded-full">
+                  {user.photo && user.photo.trim() !== "" && user.photo !== "null" ? (
+                    <img
+                      src={user.photo}
+                      alt={user.userName || "User"}
+                      className="aspect-square h-full w-full object-cover"
+                    />
+                  ) : (
+                    <div className="flex h-full w-full items-center justify-center rounded-full bg-slate-200 text-sm font-semibold text-slate-700">
+                      {user.userName?.substring(0, 1)?.toUpperCase() || "U"}
+                    </div>
+                  )}
                 </div>
-              ) : (
-                uiMenus.map((menu) => renderMenu(menu))
-              )}
-            </nav>
-          </div>
-        </aside>
+                {/* 사용자 정보 */}
+                <div className="min-w-0 flex-1">
+                  <p className="truncate text-sm font-medium text-slate-900">
+                    {user.userName || "사용자"}
+                  </p>
+                  <p className="truncate text-xs text-slate-500">
+                    {user.deptName || user.email || user.userId}
+                  </p>
+                </div>
+              </button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="w-56" align="start" side="top">
+              <DropdownMenuLabel className="font-normal">
+                <div className="flex items-center space-x-3">
+                  {/* 프로필 사진 표시 */}
+                  <div className="relative flex h-12 w-12 shrink-0 overflow-hidden rounded-full">
+                    {user.photo && user.photo.trim() !== "" && user.photo !== "null" ? (
+                      <img
+                        src={user.photo}
+                        alt={user.userName || "User"}
+                        className="aspect-square h-full w-full object-cover"
+                      />
+                    ) : (
+                      <div className="flex h-full w-full items-center justify-center rounded-full bg-slate-200 text-base font-semibold text-slate-700">
+                        {user.userName?.substring(0, 1)?.toUpperCase() || "U"}
+                      </div>
+                    )}
+                  </div>
 
-        {/* 가운데 컨텐츠 영역 - 스크롤 가능 */}
-        <main className="h-[calc(100vh-3.5rem)] min-w-0 flex-1 overflow-auto bg-white">
-          {children}
-        </main>
-      </div>
+                  {/* 사용자 정보 */}
+                  <div className="flex flex-col space-y-1">
+                    <p className="text-sm leading-none font-medium">
+                      {user.userName || "사용자"} ({user.userId || ""})
+                    </p>
+                    <p className="text-muted-foreground text-xs leading-none font-semibold">{user.email || ""}</p>
+                    <p className="text-muted-foreground text-xs leading-none font-semibold">
+                      {user.deptName && user.positionName
+                        ? `${user.deptName}, ${user.positionName}`
+                        : user.deptName || user.positionName || "부서 정보 없음"}
+                    </p>
+                  </div>
+                </div>
+              </DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem onClick={openProfileModal}>
+                <User className="mr-2 h-4 w-4" />
+                <span>프로필</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={handleLogout}>
+                <LogOut className="mr-2 h-4 w-4" />
+                <span>로그아웃</span>
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </aside>
+
+      {/* 가운데 컨텐츠 영역 - 스크롤 가능 */}
+      <main className="h-screen min-w-0 flex-1 overflow-auto bg-white">
+        {children}
+      </main>
 
       {/* 프로필 수정 모달 */}
       <ProfileModal