style: Add isHidden in Canvas logic

boostcampwm-2024 · Nov 28, 2024 · 772725d · 772725d
1 parent d398629
commit 772725d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 17 deletions.
diff --git a/client/src/components/canvas/CanvasUI.tsx b/client/src/components/canvas/CanvasUI.tsx
@@ -94,6 +94,7 @@ interface CanvasProps extends HTMLAttributes<HTMLDivElement> {
   inkRemaining: number;
   maxPixels: number;
   canvasEvents: CanvasEventHandlers;
+  isHidden: boolean;
 }
 
 const Canvas = forwardRef<HTMLDivElement, CanvasProps>(
@@ -115,6 +116,7 @@ const Canvas = forwardRef<HTMLDivElement, CanvasProps>(
       inkRemaining,
       maxPixels,
       canvasEvents,
+      isHidden,
       ...props
     },
     ref,
@@ -123,7 +125,9 @@ const Canvas = forwardRef<HTMLDivElement, CanvasProps>(
       <div
         ref={ref}
         className={cn(
-          'relative flex w-full max-w-screen-sm flex-col border-violet-500 bg-white sm:rounded-lg sm:border-4 sm:shadow-xl',
+          'relative flex w-full max-w-screen-sm flex-col border-violet-500 bg-white',
+          'sm:rounded-lg sm:border-4 sm:shadow-xl',
+          !isHidden && 'hidden',
           className,
         )}
         {...props}

diff --git a/client/src/components/canvas/GameCanvas.tsx b/client/src/components/canvas/GameCanvas.tsx
@@ -16,6 +16,7 @@ interface GameCanvasProps {
   maxPixels?: number;
   currentRound: number;
   roomStatus: RoomStatus;
+  isHidden: boolean;
 }
 
 /**
@@ -47,7 +48,7 @@ interface GameCanvasProps {
  *
  * @category Components
  */
-const GameCanvas = ({ role, maxPixels = 100000, currentRound, roomStatus }: GameCanvasProps) => {
+const GameCanvas = ({ role, maxPixels = 100000, currentRound, roomStatus, isHidden }: GameCanvasProps) => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const { convertCoordinate } = useCoordinateScale(MAINCANVAS_RESOLUTION_WIDTH, canvasRef);
 
@@ -166,7 +167,8 @@ const GameCanvas = ({ role, maxPixels = 100000, currentRound, roomStatus }: Game
     <Canvas
       canvasRef={canvasRef}
       isDrawable={(role === 'PAINTER' || role === 'DEVIL') && roomStatus === 'DRAWING'}
-      colors={true ? COLORS : []}
+      isHidden={isHidden}
+      colors={isHidden ? COLORS : []}
       brushSize={brushSize}
       setBrushSize={setBrushSize}
       drawingMode={drawingMode}

diff --git a/client/src/pages/GameRoomPage.tsx b/client/src/pages/GameRoomPage.tsx
@@ -6,7 +6,6 @@ import RoundEndModal from '@/components/modal/RoundEndModal';
 import { QuizTitle } from '@/components/ui/QuizTitle';
 import { useTimer } from '@/hooks/useTimer';
 import { useGameSocketStore } from '@/stores/socket/gameSocket.store';
-import { cn } from '@/utils/cn';
 
 const GameRoomPage = () => {
   const { players, room, roomSettings, roundAssignedRole } = useGameSocketStore();
@@ -41,19 +40,13 @@ const GameRoomPage = () => {
         title={room?.currentWord || '구경꾼이라 안보임'}
         remainingTime={remainingTime || 0}
       />
-      <div
-        className={cn(
-          'relative flex h-[800px] w-full items-center justify-center',
-          shouldHideCanvas ? 'hidden' : 'block',
-        )}
-      >
-        <GameCanvas
-          currentRound={room.currentRound}
-          roomStatus={room.status}
-          role={roundAssignedRole || PlayerRole.GUESSER}
-          maxPixels={100000}
-        />
-      </div>
+      <GameCanvas
+        currentRound={room.currentRound}
+        roomStatus={room.status}
+        role={roundAssignedRole || PlayerRole.GUESSER}
+        maxPixels={100000}
+        isHidden={shouldHideCanvas}
+      />
     </>
   );
 };