refactor : Apply the headless component pattern to the start page (#44)

dbjoung · web-flow · commit 997aff428968 · 2025-05-30T19:59:57.000+09:00
* refactor: Move files

* refactor: Separation of UI and business logic about Background

* refactor: Separation of UI and business logic about HelpModal

* refactor: Add Container Component in main

* refactor: Add Container Component in help modal

* refactor: Use Alias

* refactor: Move className Props from MainPage to BackgroundCanvasContainter

* refactor: Use Spread Operation in Container Component

* refactor: Change name from pagenation to pageIndicator

* refactor: Change Component from BackgroundImage to BackgroundContainer in GameLayout

* refactor : Delete importing BackgroundImg in GameLayout.tsx

* refactor : Edit spline logic
diff --git a/client/src/components/help/HelpButton.tsx b/client/src/components/help/HelpButton.tsx
@@ -3,7 +3,7 @@ import helpIcon from '@/assets/help-icon.svg';
 import { Button } from '@/components/ui/Button';
 import { useModal } from '@/hooks/useModal';
 
-const HelpRollingModal = lazy(() => import('@/components/modal/HelpRollingModal'));
+const HelpModalContainer = lazy(() => import('@/components/help/HelpModalContainer'));
 
 const HelpContainer = () => {
   const { isModalOpened, closeModal, openModal, handleKeyDown } = useModal();
@@ -19,7 +19,7 @@ const HelpContainer = () => {
   };
 
   return (
-    <nav className="fixed right-4 top-4 z-30 xs:right-8 xs:top-8">
+    <section className="fixed right-4 top-4 z-30 xs:right-8 xs:top-8">
       <Button
         variant="transperent"
         size="icon"
@@ -33,10 +33,14 @@ const HelpContainer = () => {
 
       {shouldLoadModal && (
         <Suspense fallback={null}>
-          <HelpRollingModal isModalOpened={isModalOpened} handleCloseModal={closeModal} handleKeyDown={handleKeyDown} />
+          <HelpModalContainer
+            isModalOpened={isModalOpened}
+            handleCloseModal={closeModal}
+            handleKeyDown={handleKeyDown}
+          />
         </Suspense>
       )}
-    </nav>
+    </section>
   );
 };
 
diff --git a/client/src/components/help/HelpModalContainer.tsx b/client/src/components/help/HelpModalContainer.tsx
@@ -0,0 +1,17 @@
+import HelpModalUI from './HelpModalUI';
+import useHelpModal from '@/hooks/useHelpModal';
+import { HelpModalContainerProps } from '@/types/help.types';
+
+const HelpModalContainer = ({ isModalOpened, handleCloseModal, handleKeyDown }: HelpModalContainerProps) => {
+  const helpModalProps = useHelpModal(isModalOpened);
+  return (
+    <HelpModalUI
+      {...helpModalProps}
+      isModalOpened={isModalOpened}
+      handleCloseModal={handleCloseModal}
+      handleKeyDown={handleKeyDown}
+    />
+  );
+};
+
+export default HelpModalContainer;
diff --git a/client/src/components/help/HelpModalPage.tsx b/client/src/components/help/HelpModalPage.tsx
@@ -1,9 +1,10 @@
 import { useEffect } from 'react';
 import { DotLottieReact } from '@lottiefiles/dotlottie-react';
+import Indicator from './Indicator';
 import { HelpPageProps } from '@/types/help.types';
 import { cn } from '@/utils/cn';
 
-const HelpPage = ({ pageData, isModalOpened, dotLottieRefCallback, pagenation, setPageIndex }: HelpPageProps) => {
+const HelpPage = ({ pageData, isModalOpened, dotLottieRefCallback, pageIndicator, setPageIndex }: HelpPageProps) => {
   useEffect(() => {
     const loadAnimation = async () => {
       const response = await fetch(pageData.img);
@@ -37,22 +38,7 @@ const HelpPage = ({ pageData, isModalOpened, dotLottieRefCallback, pagenation, s
           </div>
         </article>
       </section>
-      <div className="relative top-5 flex flex-row items-center justify-center p-5">
-        {pagenation.map((isSelect, i) => {
-          return (
-            <button
-              key={i}
-              className={cn(
-                'mx-1.5 box-content h-2.5 w-2.5 rounded-full md:h-3 md:w-3',
-                isSelect ? 'border-4 border-halfbaked-300 bg-chartreuseyellow-300' : 'bg-eastbay-600',
-              )}
-              onClick={() => {
-                setPageIndex(i);
-              }}
-            />
-          );
-        })}
-      </div>
+      <Indicator pageData={pageData} pageIndicator={pageIndicator} setPageIndex={setPageIndex} />
     </div>
   );
 };
diff --git a/client/src/components/help/HelpModalUI.tsx b/client/src/components/help/HelpModalUI.tsx
@@ -0,0 +1,52 @@
+import HelpPage from './HelpModalPage';
+import left from '@/assets/left.svg';
+import right from '@/assets/right.svg';
+import { Modal } from '@/components/ui/Modal';
+import { HelpModalUIProps } from '@/types/help.types';
+
+const HelpModalUI = ({
+  isModalOpened,
+  handleCloseModal,
+  handleKeyDown,
+  pageData,
+  pageIndex,
+  setPageIndex,
+  pageIndicator,
+  dotLottieRefCallback,
+  handleTouchStart,
+  handleTouchEnd,
+  handleTouchMove,
+  changePageIndex,
+}: HelpModalUIProps) => {
+  return (
+    <Modal
+      isModalOpened={isModalOpened}
+      closeModal={handleCloseModal}
+      handleKeyDown={handleKeyDown}
+      className="w-full max-w-screen-md"
+    >
+      <section
+        className="flex md:p-7"
+        onTouchStart={handleTouchStart}
+        onTouchMove={handleTouchMove}
+        onTouchEnd={handleTouchEnd}
+      >
+        <button className="relative -left-6 hidden md:block" onClick={() => changePageIndex(true)}>
+          <img src={left} width={30} alt="이전 페이지 버튼" className="transition hover:brightness-75" />
+        </button>
+        <HelpPage
+          pageData={pageData[pageIndex]}
+          isModalOpened
+          dotLottieRefCallback={dotLottieRefCallback}
+          pageIndicator={pageIndicator}
+          setPageIndex={setPageIndex}
+        />
+        <button className="relative -right-6 hidden md:block" onClick={() => changePageIndex(false)}>
+          <img src={right} width={30} alt="다음 페이지 버튼" className="transition hover:brightness-75" />
+        </button>
+      </section>
+    </Modal>
+  );
+};
+
+export default HelpModalUI;
diff --git a/client/src/components/help/Indicator.tsx b/client/src/components/help/Indicator.tsx
@@ -0,0 +1,38 @@
+import { useEffect } from 'react';
+import { IndicatorProps } from '@/types/help.types';
+import { cn } from '@/utils/cn';
+
+const Indicator = ({ pageData, pageIndicator, setPageIndex }: IndicatorProps) => {
+  useEffect(() => {
+    const loadAnimation = async () => {
+      const response = await fetch(pageData.img);
+      const blob = await response.blob();
+      pageData.cache = URL.createObjectURL(blob);
+    };
+
+    if (!pageData.cache) {
+      void loadAnimation();
+    }
+  }, [pageData.img]);
+
+  return (
+    <div className="relative top-5 flex flex-row items-center justify-center p-5">
+      {pageIndicator.map((isSelect, i) => {
+        return (
+          <button
+            key={i}
+            className={cn(
+              'mx-1.5 box-content h-2.5 w-2.5 rounded-full md:h-3 md:w-3',
+              isSelect ? 'border-4 border-halfbaked-300 bg-chartreuseyellow-300' : 'bg-eastbay-600',
+            )}
+            onClick={() => {
+              setPageIndex(i);
+            }}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default Indicator;
diff --git a/client/src/components/main/BackgroundCanvasContainer.tsx b/client/src/components/main/BackgroundCanvasContainer.tsx
@@ -0,0 +1,16 @@
+import BackgroundCanvasUI from './BackgroundCanvasUI';
+import BackgroundImage from '@/components/main/BackgroundImage';
+import useBackgroundCanvas from '@/hooks/useBackgroundCanvas';
+
+const BackgroundContainer = () => {
+  const backgroundCanvasProps = useBackgroundCanvas();
+
+  return (
+    <>
+      <BackgroundImage className="-z-30" />
+      <BackgroundCanvasUI className="pointer-events-auto absolute inset-0 -z-20" {...backgroundCanvasProps} />
+    </>
+  );
+};
+
+export default BackgroundContainer;
diff --git a/client/src/components/main/BackgroundCanvasUI.tsx b/client/src/components/main/BackgroundCanvasUI.tsx
@@ -0,0 +1,21 @@
+import { BackgroundCanvasUIProps } from '@/types/help.types';
+
+const BackgroundCanvasUI = ({
+  className,
+  cursorCanvasRef,
+  handleMouseLeave,
+  handleMouseMove,
+}: BackgroundCanvasUIProps) => {
+  return (
+    <div className={className}>
+      <canvas
+        ref={cursorCanvasRef}
+        className="absolute h-full w-full cursor-none"
+        onMouseMove={handleMouseMove}
+        onMouseLeave={handleMouseLeave}
+      />
+    </div>
+  );
+};
+
+export default BackgroundCanvasUI;
diff --git a/client/src/components/main/BackgroundImage.tsx b/client/src/components/main/BackgroundImage.tsx
@@ -3,11 +3,7 @@ import tiny from '@/assets/background-tiny.png';
 import { CDN } from '@/constants/cdn';
 import { cn } from '@/utils/cn';
 
-interface BackgroundImageProps {
-  className?: string;
-}
-
-const BackgroundImage = ({ className }: BackgroundImageProps) => {
+const BackgroundImage = ({ className }: { className: string }) => {
   const [isLoaded, setIsLoaded] = useState(false);
 
   return (
diff --git a/client/src/hooks/canvas/useDrawingOperation.ts b/client/src/hooks/canvas/useDrawingOperation.ts
@@ -106,8 +106,10 @@ export const useDrawingOperation = (
       }
       case 2: {
         // 두 점은 직선으로 연결
+        const mid1x = (points[0].x + points[1].x) >> 1;
+        const mid1y = (points[0].y + points[1].y) >> 1;
         ctx.moveTo(points[0].x, points[0].y);
-        ctx.lineTo(points[1].x, points[1].y);
+        ctx.lineTo(mid1x, mid1y);
         ctx.stroke();
         break;
       }
diff --git a/client/src/hooks/useBackgroundCanvas.tsx b/client/src/hooks/useBackgroundCanvas.tsx
@@ -4,7 +4,7 @@ import { CURSOR_LENGTH, CURSOR_WIDTH, DELETE_INTERVAL } from '@/constants/backgr
 import { getCanvasContext } from '@/utils/getCanvasContext';
 import { getDrawPoint } from '@/utils/getDrawPoint';
 
-const Background = ({ className }: { className: string }) => {
+const useBackgroundCanvas = () => {
   const cursorCanvasRef = useRef<HTMLCanvasElement>(null);
   const cursorAnimation = useRef<number>();
 
@@ -21,8 +21,8 @@ const Background = ({ className }: { className: string }) => {
     const { canvas, ctx } = getCanvasContext(cursorCanvasRef);
 
     const handleResize = () => {
-      canvas.width = canvas.offsetWidth;
-      canvas.height = canvas.offsetHeight;
+      canvas.width = canvas.clientWidth;
+      canvas.height = canvas.clientHeight;
     };
 
     handleResize();
@@ -90,16 +90,11 @@ const Background = ({ className }: { className: string }) => {
     ctx.clearRect(0, 0, canvas.width, canvas.height);
   };
 
-  return (
-    <div className={className}>
-      <canvas
-        ref={cursorCanvasRef}
-        className="absolute h-full w-full cursor-none"
-        onMouseMove={handleMouseMove}
-        onMouseLeave={handleMouseLeave}
-      />
-    </div>
-  );
+  return {
+    cursorCanvasRef,
+    handleMouseLeave,
+    handleMouseMove,
+  };
 };
 
-export default Background;
+export default useBackgroundCanvas;
diff --git a/client/src/hooks/useHelpModal.tsx b/client/src/hooks/useHelpModal.tsx
@@ -1,10 +1,6 @@
 import { useEffect, useState, TouchEvent, useRef } from 'react';
 import { DotLottie } from '@lottiefiles/dotlottie-react';
-import HelpPage from '../ui/HelpPage';
-import left from '@/assets/left.svg';
-import right from '@/assets/right.svg';
-import { Modal } from '@/components/ui/Modal';
-import { HelpRollingModalProps, PageData } from '@/types/help.types';
+import { PageData } from '@/types/help.types';
 
 const pageData: PageData[] = [
   {
@@ -38,9 +34,9 @@ const pageData: PageData[] = [
   },
 ];
 
-const HelpRollingModal = ({ isModalOpened, handleCloseModal, handleKeyDown }: HelpRollingModalProps) => {
+const useHelpModal = (isModalOpened: boolean) => {
   const [pageIndex, setPageIndex] = useState<number>(0);
-  const [pagenation, setPagenation] = useState(new Array(pageData.length).fill(false));
+  const [pageIndicator, setPageIndicator] = useState(new Array(pageData.length).fill(false));
   const [dotLottie, setDotLottie] = useState<DotLottie | null>(null);
 
   const startPos = useRef<number>(0);
@@ -49,7 +45,7 @@ const HelpRollingModal = ({ isModalOpened, handleCloseModal, handleKeyDown }: He
   useEffect(() => {
     const newPageState = new Array(pageData.length).fill(false);
     newPageState[pageIndex] = true;
-    setPagenation(newPageState);
+    setPageIndicator(newPageState);
   }, [pageIndex]);
 
   useEffect(() => {
@@ -100,35 +96,17 @@ const HelpRollingModal = ({ isModalOpened, handleCloseModal, handleKeyDown }: He
     canDrag.current = true;
   };
 
-  return (
-    <Modal
-      isModalOpened={isModalOpened}
-      closeModal={handleCloseModal}
-      handleKeyDown={handleKeyDown}
-      className="w-full max-w-screen-md"
-    >
-      <section
-        className="flex md:p-7"
-        onTouchStart={handleTouchStart}
-        onTouchMove={handleTouchMove}
-        onTouchEnd={handleTouchEnd}
-      >
-        <button className="relative -left-6 hidden md:block" onClick={() => changePageIndex(true)}>
-          <img src={left} width={30} alt="이전 페이지 버튼" className="transition hover:brightness-75" />
-        </button>
-        <HelpPage
-          pageData={pageData[pageIndex]}
-          isModalOpened
-          dotLottieRefCallback={dotLottieRefCallback}
-          pagenation={pagenation}
-          setPageIndex={setPageIndex}
-        />
-        <button className="relative -right-6 hidden md:block" onClick={() => changePageIndex(false)}>
-          <img src={right} width={30} alt="다음 페이지 버튼" className="transition hover:brightness-75" />
-        </button>
-      </section>
-    </Modal>
-  );
+  return {
+    pageData,
+    pageIndex,
+    setPageIndex,
+    pageIndicator,
+    dotLottieRefCallback,
+    handleTouchStart,
+    handleTouchEnd,
+    handleTouchMove,
+    changePageIndex,
+  };
 };
 
-export default HelpRollingModal;
+export default useHelpModal;
diff --git a/client/src/layouts/GameLayout.tsx b/client/src/layouts/GameLayout.tsx
@@ -1,8 +1,8 @@
 import { Outlet } from 'react-router-dom';
 import { ChatContatiner } from '@/components/chat/ChatContatiner';
+import BackgroundContainer from '@/components/main/BackgroundCanvasContainer';
 import { NavigationModal } from '@/components/modal/NavigationModal';
 import { PlayerCardList } from '@/components/player/PlayerCardList';
-import BackgroundImage from '@/components/ui/BackgroundImage';
 import { Loading } from '@/components/ui/Loading';
 import { useGameSocket } from '@/hooks/socket/useGameSocket';
 import BrowserNavigationGuard from '@/layouts/BrowserNavigationGuard';
@@ -28,7 +28,7 @@ const GameLayout = () => {
       <div
         className={`relative flex min-h-screen flex-col justify-start bg-gradient-to-b from-violet-950 via-violet-800 to-fuchsia-800 before:absolute before:left-0 before:top-0 before:h-full before:w-full before:bg-cover before:bg-center lg:py-5`}
       >
-        <BackgroundImage />
+        <BackgroundContainer />
         {/* 상단 헤더 */}
         <GameHeader />
         <main className="mx-auto">
diff --git a/client/src/layouts/RootLayout.tsx b/client/src/layouts/RootLayout.tsx
@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { Outlet } from 'react-router-dom';
 import BackgroundMusicButton from '@/components/bgm-button/BackgroundMusicButton';
-import HelpContainer from '@/components/ui/HelpContainer';
+import HelpContainer from '@/components/help/HelpButton';
 import { playerIdStorageUtils } from '@/utils/playerIdStorage';
 
 const RootLayout = () => {
diff --git a/client/src/pages/MainPage.tsx b/client/src/pages/MainPage.tsx
diff --git a/client/src/types/help.types.ts b/client/src/types/help.types.ts

Original file line number	Diff line number	Diff line change
`@@ -106,8 +106,10 @@ export const useDrawingOperation = (`
`106`	`106`	`}`
`107`	`107`	`case 2: {`
`108`	`108`	`// 두 점은 직선으로 연결`
	`109`	`+ const mid1x = (points[0].x + points[1].x) >> 1;`
	`110`	`+ const mid1y = (points[0].y + points[1].y) >> 1;`
`109`	`111`	`ctx.moveTo(points[0].x, points[0].y);`
`110`		`- ctx.lineTo(points[1].x, points[1].y);`
	`112`	`+ ctx.lineTo(mid1x, mid1y);`
`111`	`113`	`ctx.stroke();`
`112`	`114`	`break;`
`113`	`115`	`}`