feat: 최소화, 최대화, 창닫기 버튼 아이콘 추가 및 순서 변경

#127

client/src/features/page/components/PageControlButton/PageControlButton.style.ts

@@ -3,6 +3,12 @@ import { css, cva } from "@styled-system/css";
 export const pageControlContainer = css({
   display: "flex",
   gap: "sm",
+  _hover: {
+    "& svg": {
+      transform: "scale(1)", // 추가 효과
+      opacity: 1,
+    },
+  },
 });
 
 export const pageControlButton = cva({
@@ -20,3 +26,11 @@ export const pageControlButton = cva({
     },
   },
 });
+
+export const iconBox = css({
+  transform: "scale(0.8)",
+  strokeWidth: "2.5px",
+  color: "white/90",
+  opacity: 0,
+  transition: "all 0.1s ease",
+});

client/src/features/page/components/PageControlButton/PageControlButton.tsx

@@ -1,4 +1,7 @@
-import { pageControlContainer, pageControlButton } from "./PageControlButton.style";
+import CloseIcon from "@assets/icons/close.svg?react";
+import ExpandIcon from "@assets/icons/expand.svg?react";
+import MinusIcon from "@assets/icons/minus.svg?react";
+import { pageControlContainer, pageControlButton, iconBox } from "./PageControlButton.style";
 
 interface PageControlButtonProps {
   onPageMinimize?: () => void;
@@ -13,11 +16,15 @@ export const PageControlButton = ({
 }: PageControlButtonProps) => {
   return (
     <div className={pageControlContainer}>
-      <button className={pageControlButton({ color: "yellow" })} onClick={onPageMinimize} />
-
-      <button className={pageControlButton({ color: "red" })} onClick={onPageClose} />
-
-      <button className={pageControlButton({ color: "green" })} onClick={onPageMaximize} />
+      <button className={pageControlButton({ color: "yellow" })} onClick={onPageMinimize}>
+        <MinusIcon className={iconBox} />
+      </button>
+      <button className={pageControlButton({ color: "green" })} onClick={onPageMaximize}>
+        <ExpandIcon className={iconBox} />
+      </button>
+      <button className={pageControlButton({ color: "red" })} onClick={onPageClose}>
+        <CloseIcon className={iconBox} />
+      </button>
     </div>
   );
 };