prgrms-fe-devcourse · sageherb · Nov 19, 2025 · Nov 19, 2025
diff --git a/src/os/Taskbar/Taskbar.tsx b/src/os/Taskbar/Taskbar.tsx
@@ -52,13 +52,20 @@ export default function Taskbar({ className, config = "default", ...rest }: Task
   const windows = useWindowStore((state) => state.windows);
   const activeWindowId = useWindowStore((state) => state.activeWindowId);
   const setActiveWindow = useWindowStore((state) => state.setActiveWindow);
+  const minimizedWindows = useWindowStore((state) => state.minimizedWindows);
+  const restoreWindow = useWindowStore((state) => state.restoreWindow);
 
   const showStart = config === "default" || config === "noSystemTray";
   const showSystemTray = config === "default" || config === "noStartButton";
 
   const handleTabClick = (id: WindowAppId) => {
-    // Taskbar 탭 클릭 시 해당 window로 focus
-    setActiveWindow(id);
+    const isMinimized = !!minimizedWindows[id];
+
+    if (isMinimized) {
+      restoreWindow(id);
+    } else {
+      setActiveWindow(id);
+    }
   };
 
   return (
@@ -71,12 +78,14 @@ export default function Taskbar({ className, config = "default", ...rest }: Task
           const app = WINDOW_APPS[window.id];
           if (!app) return null;
 
+          const isMinimized = !!minimizedWindows[window.id];
+
           return (
             <li key={window.id} className="@container flex max-w-43 min-w-0 flex-1">
               <TaskbarTab
                 icon={app.icon}
                 title={window.caption ?? app.caption}
-                isFocused={window.id === activeWindowId}
+                isFocused={window.id === activeWindowId && !isMinimized}
                 onClick={() => handleTabClick(window.id)}
               />
             </li>

diff --git a/src/os/TitleBar/TitleBar.tsx b/src/os/TitleBar/TitleBar.tsx
@@ -21,10 +21,13 @@ const sizeConfig = {
 } as const;
 
 export interface TitleBarProps extends React.ComponentPropsWithoutRef<"div">, TitleBarVariantProps {
-  icon?: FunctionComponent<SVGProps<SVGSVGElement>>; // FunctionComponent → ComponentType
-  title?: string; // text → title (prop 이름 통일)
+  icon?: FunctionComponent<SVGProps<SVGSVGElement>>;
+  title?: string;
   buttons?: "all" | "closeOnly" | null;
   onClose?: () => void;
+  onMinimize?: () => void;
+  onMaximize?: () => void;
+  isMaximized?: boolean;
 }
 
 /**
@@ -92,11 +95,33 @@ export default function TitleBar({
   title,
   buttons = null,
   onClose,
+  onMinimize,
+  onMaximize,
+  isMaximized,
   className,
   ...rest
 }: TitleBarProps) {
   const { iconClassName, buttonSizeClass, iconSizeClass } = sizeConfig[size ?? "small"];
 
+  const handleButtonMouseDown = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+  };
+
+  const handleMinimize = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    onMinimize?.();
+  };
+
+  const handleMaximize = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    onMaximize?.();
+  };
+
+  const handleClose = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.stopPropagation();
+    onClose?.();
+  };
+
   return (
     <header
       className={twMerge(
@@ -126,22 +151,27 @@ export default function TitleBar({
                 composition="iconOnly"
                 className={buttonSizeClass}
                 aria-label="Minimize window"
+                onClick={handleMinimize}
+                onMouseDown={handleButtonMouseDown}
               >
                 <Minus className={iconClassName} strokeWidth={2} />
               </Button>
 
               <Button
                 composition="iconOnly"
                 className={buttonSizeClass}
-                aria-label="Maximize window"
+                aria-label={isMaximized ? "복원" : "최대화"}
+                onClick={handleMaximize}
+                onMouseDown={handleButtonMouseDown}
               >
                 <AppWindow className={iconClassName} strokeWidth={2} />
               </Button>
             </>
           )}
 
           <Button
-            onClick={onClose}
+            onClick={handleClose}
+            onMouseDown={handleButtonMouseDown}
             composition="iconOnly"
             className={buttonSizeClass}
             aria-label="Close window"

diff --git a/src/os/Window/Window.tsx b/src/os/Window/Window.tsx
@@ -7,6 +7,7 @@ import { WINDOW_INFO } from "@/os/config/windowInfo";
 import { useWindowStore } from "@/stores/useWindowStore";
 import type { Position, WindowAppId } from "@/types/window.types";
 
+import { windowVariants } from "./variants";
 import type { TitleBarProps } from "../TitleBar/TitleBar";
 import TitleBar from "../TitleBar/TitleBar";
 
@@ -32,22 +33,55 @@ export default function Window({
   className,
 }: WindowProps) {
   const { category } = WINDOW_INFO[windowId];
+
   const categoryPositions = useWindowStore((state) => state.categoryPositions);
   const updateWindowPosition = useWindowStore((state) => state.updateWindowPosition);
 
+  const minimizedWindows = useWindowStore((state) => state.minimizedWindows);
+  const maximizedWindows = useWindowStore((state) => state.maximizedWindows);
+  const restorePositions = useWindowStore((state) => state.restorePositions);
+  const minimizeWindow = useWindowStore((state) => state.minimizeWindow);
+  const maximizeWindow = useWindowStore((state) => state.maximizeWindow);
+  const restoreWindow = useWindowStore((state) => state.restoreWindow);
+
+  const isMinimized = !!minimizedWindows[windowId];
+  const isMaximized = !!maximizedWindows[windowId];
+
   const savedPosition = categoryPositions[category];
   const [position, setPosition] = useState<Position | null>(savedPosition ?? null);
 
   const { onMouseDown, onDrag, isDragging } = useDraggable();
 
+  const handleMaximize = () => {
+    if (isMaximized) {
+      restoreWindow(windowId);
+
+      const savedRestorePosition = restorePositions[windowId];
+
+      if (savedRestorePosition) setPosition(savedRestorePosition);
+    } else {
+      maximizeWindow(windowId, position);
+      setPosition(null);
+    }
+  };
+
+  useEffect(() => {
+    if (!isMinimized && !isMaximized && position === null) {
+      const savedRestorePosition = restorePositions[windowId];
+      if (savedRestorePosition) {
+        setPosition(savedRestorePosition);
+      }
+    }
+  }, [isMinimized, isMaximized, position, restorePositions, windowId]);
+
   useEffect(() => {
     if (!isDragging && position && category) {
       updateWindowPosition(category, position);
     }
   }, [isDragging, position, category, updateWindowPosition]);
 
   useEffect(() => {
-    if (!isDragging) return;
+    if (!isDragging || isMaximized) return;
 
     let frameId: number;
 
@@ -61,7 +95,7 @@ export default function Window({
 
     frameId = requestAnimationFrame(update);
     return () => cancelAnimationFrame(frameId);
-  }, [isDragging, onDrag]);
+  }, [isDragging, onDrag, isMaximized]);
 
   return (
     <Dialog.Root
@@ -78,19 +112,17 @@ export default function Window({
           <section
             onPointerDown={onPointerDown}
             className={twMerge(
-              "bevel-default absolute inset-0 inline-flex h-full w-full flex-1 flex-col p-[3px] focus:outline-none",
-              // TODO: 가변 사이즈 변경
-              "md:h-[500px] md:w-[600px]",
-              !position &&
-                "md:inset-auto md:top-1/2 md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2",
-              isActive ? "z-40" : "z-10",
+              windowVariants({
+                minimized: isMinimized,
+                maximized: isMaximized,
+                active: isActive,
+                center: !position,
+              }),
               className
             )}
             style={
-              position
-                ? {
-                    transform: `translate(${position.x}px, ${position.y}px)`,
-                  }
+              !isMaximized && position
+                ? { transform: `translate(${position.x}px, ${position.y}px)` }
                 : undefined
             }
           >
@@ -101,7 +133,10 @@ export default function Window({
               title={title}
               buttons={buttons}
               onClose={onClose}
-              onMouseDown={onMouseDown}
+              onMouseDown={isMaximized ? undefined : onMouseDown}
+              onMinimize={() => minimizeWindow(windowId)}
+              onMaximize={handleMaximize}
+              isMaximized={isMaximized}
             />
             {children}
           </section>

diff --git a/src/os/Window/variants.ts b/src/os/Window/variants.ts
@@ -0,0 +1,38 @@
+import { cva } from "class-variance-authority";
+
+export const windowVariants = cva(
+  "bevel-default absolute inline-flex flex-1 flex-col p-[3px] focus:outline-none",
+  {
+    variants: {
+      minimized: {
+        true: "hidden",
+        false: "",
+      },
+      maximized: {
+        true: "inset-0 h-full w-full",
+        false: "",
+      },
+      active: {
+        true: "z-40",
+        false: "z-10",
+      },
+      center: {
+        true: "md:inset-auto md:top-1/2 md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2",
+        false: "",
+      },
+    },
+    compoundVariants: [
+      {
+        maximized: false,
+        minimized: false,
+        class: "inset-0 h-full w-full md:h-[500px] md:w-[600px]",
+      },
+    ],
+    defaultVariants: {
+      minimized: false,
+      maximized: false,
+      active: false,
+      center: false,
+    },
+  }
+);
diff --git a/src/stores/useWindowStore.ts b/src/stores/useWindowStore.ts
@@ -9,11 +9,18 @@ interface WindowStore {
   windows: Partial<Record<WindowAppId, WindowInstance>>;
   activeWindowId: WindowAppId | null;
   categoryPositions: Partial<Record<WindowCategory, Position>>;
+  minimizedWindows: Partial<Record<WindowAppId, boolean>>;
+  maximizedWindows: Partial<Record<WindowAppId, boolean>>;
+  restorePositions: Partial<Record<WindowAppId, Position>>;
+
   openWindow: (id: WindowAppId, ownerId?: string) => void;
   closeWindow: (id: WindowAppId) => void;
   setActiveWindow: (id: WindowAppId) => void;
   updateWindowTitle: (id: WindowAppId, title: string) => void;
   updateWindowPosition: (category: WindowCategory, position: Position) => void;
+  minimizeWindow: (id: WindowAppId) => void;
+  maximizeWindow: (id: WindowAppId, currentPosition: Position | null) => void;
+  restoreWindow: (id: WindowAppId) => void;
 }
 
 const clearWindowsByCategory = (
@@ -37,6 +44,9 @@ export const useWindowStore = create<WindowStore>()(
       windows: {},
       activeWindowId: null,
       categoryPositions: {},
+      minimizedWindows: {},
+      maximizedWindows: {},
+      restorePositions: {},
 
       openWindow: (id, ownerId) =>
         set((state) => {
@@ -68,6 +78,9 @@ export const useWindowStore = create<WindowStore>()(
       closeWindow: (id) =>
         set((state) => {
           delete state.windows[id];
+          delete state.minimizedWindows[id];
+          delete state.maximizedWindows[id];
+          delete state.restorePositions[id];
 
           if (state.activeWindowId === id) {
             state.activeWindowId = null;
@@ -92,6 +105,34 @@ export const useWindowStore = create<WindowStore>()(
         set((state) => {
           state.categoryPositions[category] = position;
         }),
+
+      minimizeWindow: (id) =>
+        set((state) => {
+          state.minimizedWindows[id] = true;
+          delete state.maximizedWindows[id];
+
+          if (state.activeWindowId === id) {
+            state.activeWindowId = null;
+          }
+        }),
+
+      maximizeWindow: (id, currentPosition) =>
+        set((state) => {
+          if (currentPosition) {
+            state.restorePositions[id] = currentPosition;
+          }
+
+          state.maximizedWindows[id] = true;
+          delete state.minimizedWindows[id];
+          state.activeWindowId = id;
+        }),
+
+      restoreWindow: (id) =>
+        set((state) => {
+          delete state.minimizedWindows[id];
+          delete state.maximizedWindows[id];
+          state.activeWindowId = id;
+        }),
     })),
     { name: "WindowStore" }
   )

diff --git a/src/types/database.types.ts b/src/types/database.types.ts
@@ -6,23 +6,6 @@ export interface Database {
   __InternalSupabase: {
     PostgrestVersion: "13.0.5";
   };
-  graphql_public: {
-    Tables: Record<never, never>;
-    Views: Record<never, never>;
-    Functions: {
-      graphql: {
-        Args: {
-          extensions?: Json;
-          operationName?: string;
-          query?: string;
-          variables?: Json;
-        };
-        Returns: Json;
-      };
-    };
-    Enums: Record<never, never>;
-    CompositeTypes: Record<never, never>;
-  };
   public: {
     Tables: {
       friend_requests: {
@@ -682,9 +665,6 @@ export type CompositeTypes<
     : never;
 
 export const Constants = {
-  graphql_public: {
-    Enums: {},
-  },
   public: {
     Enums: {
       visibility: ["public", "friend", "private"],