feat: 최대화상태에서는 최대화 버튼만 다시 누를수 있게 처리

#240
boostcampwm-2024 · Nov 30, 2024 · 8a6ee49 · 8a6ee49
1 parent 1dec80b
commit 8a6ee49
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/client/src/features/page/Page.tsx b/client/src/features/page/Page.tsx
@@ -32,7 +32,9 @@ export const Page = ({
   handleTitleChange,
   serializedEditorData,
 }: PageProps) => {
-  const { position, size, pageDrag, pageResize, pageMinimize, pageMaximize } = usePage({ x, y });
+  const { position, size, isMaximized, pageDrag, pageResize, pageMinimize, pageMaximize } = usePage(
+    { x, y },
+  );
   const [serializedEditorDatas, setSerializedEditorDatas] =
     useState<serializedEditorDataProps | null>(serializedEditorData);
 
@@ -74,6 +76,7 @@ export const Page = ({
         <div className={pageHeader} onPointerDown={pageDrag} onClick={handlePageClick}>
           <PageTitle title={title} icon={icon} />
           <PageControlButton
+            isMaximized={isMaximized}
             onPageClose={() => handlePageClose(id)}
             onPageMaximize={pageMaximize}
             onPageMinimize={pageMinimize}

diff --git a/client/src/features/page/components/PageControlButton/PageControlButton.style.ts b/client/src/features/page/components/PageControlButton/PageControlButton.style.ts
@@ -20,6 +20,11 @@ export const pageControlButton = cva({
     width: "20px",
     height: "20px",
     cursor: "pointer",
+    "&:disabled": {
+      background: "gray.400",
+      opacity: 0.5,
+      cursor: "not-allowed",
+    },
   },
   variants: {
     color: {

diff --git a/client/src/features/page/components/PageControlButton/PageControlButton.tsx b/client/src/features/page/components/PageControlButton/PageControlButton.tsx
@@ -4,19 +4,25 @@ import MinusIcon from "@assets/icons/minus.svg?react";
 import { pageControlContainer, pageControlButton, iconBox } from "./PageControlButton.style";
 
 interface PageControlButtonProps {
+  isMaximized: boolean;
   onPageMinimize?: () => void;
   onPageMaximize?: () => void;
   onPageClose?: () => void;
 }
 
 export const PageControlButton = ({
+  isMaximized,
   onPageMinimize,
   onPageMaximize,
   onPageClose,
 }: PageControlButtonProps) => {
   return (
     <div className={pageControlContainer}>
-      <button className={pageControlButton({ color: "yellow" })} onClick={onPageMinimize}>
+      <button
+        className={pageControlButton({ color: "yellow" })}
+        onClick={onPageMinimize}
+        disabled={isMaximized}
+      >
         <MinusIcon className={iconBox} />
       </button>
       <button className={pageControlButton({ color: "green" })} onClick={onPageMaximize}>