Merge pull request #211 from softeerbootcamp4th/refactor/197

[Refactor] 리팩토링 및 성능 저하 문제 해결
softeerbootcamp4th · Aug 25, 2024 · 5f18b88 · 5f18b88
2 parents e5a005a + 97fa428
commit 5f18b88
Show file tree

Hide file tree

Showing 31 changed files with 562 additions and 708 deletions.
diff --git a/admin/index.html b/admin/index.html
@@ -2,11 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link
-      rel="icon"
-      type="image/svg+xml"
-      href="https://www.hyundai.com/static/images/common/favicon/favicon.ico"
-    />
+    <link rel="icon" type="image/svg+xml" href="/svg/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Green Light admin</title>
   </head>

diff --git a/admin/public/svg/favicon.ico b/admin/public/svg/favicon.ico
diff --git a/admin/src/types/eventDataType.ts b/admin/src/types/eventDataType.ts
diff --git a/service/index.html b/service/index.html
@@ -2,11 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link
-      rel="icon"
-      type="image/svg+xml"
-      href="https://www.hyundai.com/static/images/common/favicon/favicon.ico"
-    />
+    <link rel="icon" type="image/svg+xml" href="/svg/favicon.ico" />
     <link
       rel="preload"
       as="image"

diff --git a/service/public/svg/favicon.ico b/service/public/svg/favicon.ico
diff --git a/service/src/apis/login/api.ts b/service/src/apis/login/api.ts
@@ -22,8 +22,6 @@ export const sendAuthCode = async (
     body: JSON.stringify(requestBody),
   });
 
-  //const data: codeResponse = await response.json();
-
   return response.json();
 };
 
@@ -40,8 +38,6 @@ export const testAuthCode = async (
     body: JSON.stringify(requestBody),
   });
 
-  //const data: codeResponse = await response.json();
-
   return response.json();
 };
 
@@ -73,7 +69,6 @@ export const login = async (
     body: JSON.stringify(body),
   });
 
-  //const data: loginResponse = await response.json();
   return response.json();
 };
 
@@ -90,6 +85,5 @@ export const reissueToken = async (
     },
   });
 
-  //const data: ReIssueResponse = await response.json();
   return response.json();
 };
diff --git a/service/src/components/LotteryLounge/Attendance.tsx b/service/src/components/LotteryLounge/Attendance.tsx
@@ -5,8 +5,6 @@ interface AttendanceProps {
 }
 
 const Attendance = ({ counts }: AttendanceProps) => {
-  //const counts = 3;
-
   const defaultStyle = {
     background: 'rgba(255, 255, 255, 0.6)', // 흰색의 투명도 조절
     width: '5rem',
@@ -17,61 +15,51 @@ const Attendance = ({ counts }: AttendanceProps) => {
     backdropFilter: 'blur(30px)',
   };
 
-  const dynamicStyle = {
+  const createDynamicStyle = (degree: number) => ({
     width: '5rem',
     height: '5rem',
     borderRadius: '50%',
-    background: `conic-gradient(#FFFFFF 0%, #BBE0E6 100%)`,
+    background: `conic-gradient(from ${degree}deg, #FFFFFF 0%, #BBE0E6 100%)`,
     animation: `rotateCircle 1s linear 1`,
-  };
+  });
+
+  const getTextColorClass = (index: number) =>
+    index < counts ? 'text-primary' : 'text-gray-300';
+
+  const getAttendanceStyle = (index: number) =>
+    index < counts ? createDynamicStyle(index * 60) : defaultStyle;
+
+  const lastTextColorClass = counts > 6 ? 'text-primary' : 'text-gray-300';
+  const lastStyle = counts > 6 ? createDynamicStyle(0) : defaultStyle;
 
-  const lastTextColorClass = 6 < counts ? 'text-primary' : 'text-gray-300';
-  const lastStyle = 6 < counts ? dynamicStyle : defaultStyle;
   return (
     <div className='flex flex-col items-center gap-4 self-stretch'>
       <div className='text-center text-gray-800 font-normal text-b-m line-height-[1.125rem]'>
         연속 7일 응모하면 특별한 선물을 드려요! (1인 1회 한정)
       </div>
       <div className='flex items-center gap-4'>
-        {texts.map((text, index) => {
-          const degree = index * 60;
-
-          const dynamicStyle = {
-            width: '5rem',
-            height: '5rem',
-            borderRadius: '50%',
-            background: `conic-gradient(from ${degree}deg, #FFFFFF 0%, #BBE0E6 100%)`,
-            animation: `rotateCircle 1s linear 1`,
-          };
-
-          const textColorClass =
-            index < counts ? 'text-primary' : 'text-gray-300';
-
-          const attendanceClass = index < counts ? dynamicStyle : defaultStyle;
-
-          return (
-            <div
-              key={index}
-              className='items-center text-center justify-center'
-            >
-              <div className='relative flex items-center justify-center'>
-                <div className='self-stretch' style={attendanceClass}></div>
-                {index < counts ? (
-                  <div className='bg-gradient-attend bg-clip-text text-transparent absolute text-h-l font-bold'>
-                    {text}
-                  </div>
-                ) : (
-                  <div className='absolute text-h-l font-bold text-gray-400'>
-                    {text}
-                  </div>
-                )}
-              </div>
-              <div className={`mt-2 text-d-m ${textColorClass}`}>
-                {index + 1}일차
+        {texts.map((text, index) => (
+          <div key={index} className='items-center text-center justify-center'>
+            <div className='relative flex items-center justify-center'>
+              <div
+                className='self-stretch'
+                style={getAttendanceStyle(index)}
+              ></div>
+              <div
+                className={`absolute text-h-l font-bold ${
+                  index < counts
+                    ? 'bg-gradient-attend bg-clip-text text-transparent'
+                    : 'text-gray-400'
+                }`}
+              >
+                {text}
               </div>
             </div>
-          );
-        })}
+            <div className={`mt-2 text-d-m ${getTextColorClass(index)}`}>
+              {index + 1}일차
+            </div>
+          </div>
+        ))}
         <div className='items-center text-center justify-center'>
           <div className='relative flex items-center justify-center'>
             <div className='self-stretch' style={lastStyle}>
@@ -83,7 +71,7 @@ const Attendance = ({ counts }: AttendanceProps) => {
                     ? '/svg/출석완료/스벅.svg'
                     : '/svg/출석미완/스벅.svg'
                 }
-              ></img>
+              />
             </div>
           </div>
           <div className={`mt-2 text-d-m ${lastTextColorClass}`}>7일차</div>

diff --git a/service/src/components/LotteryLounge/LotteryCanvas.tsx b/service/src/components/LotteryLounge/LotteryCanvas.tsx
@@ -1,16 +1,13 @@
-import { useRef, useEffect, useState } from 'react';
+import { useState } from 'react';
 import LoseModal from './Modal/LoseModal';
-import { craftFireworks } from '@/utils/confettiCrafter';
 import { useMutationDrawData } from '@/apis/draw/query';
 import { getCookie } from '@/utils/cookie';
 import { useUrl } from '@/store/context/useUrl';
 import EventModal from '@/components/common/Modal/EventModal/EventModal';
 import { DrawResultResponse, WinModal } from '@/types/lottery/type';
-import { useModalContext } from '@/store/context/useModalContext';
 import { QueryClient } from '@tanstack/react-query';
 import Button from '../common/Button/Button';
-import { useNavigate } from 'react-router-dom';
-import { ROUTER_PATH } from '@/constants/lib/constants';
+import { useCanvasDrawing } from '@/hooks/LotteryLounge/useCanvasDrawing';
 
 interface LotteryCanvasProps {
   onScratch: (result: DrawResultResponse) => void;
@@ -23,46 +20,25 @@ const LotteryCanvas = ({
   remainDrawCount,
   handleRemainDrawCount,
 }: LotteryCanvasProps) => {
-  const { isOpen, setIsOpen } = useModalContext();
-  const [isGameEnded, setIsGameEnded] = useState(false);
   const [isScratched, setIsScratched] = useState(false); // 최초 긁기 여부 확인
   const [isWin, setIsWin] = useState(false);
   const [result, setResult] = useState<WinModal | null>(null);
-  const queryClient = new QueryClient();
-
-  const isCompeletRef = useRef<boolean>(false);
-
-  const navigation = useNavigate();
   const { setUrl } = useUrl();
-
-  const closeModal = () => {
-    setIsOpen(false);
-    setIsGameEnded(true);
-  };
-
   const token = getCookie('accessToken');
   const mutation = useMutationDrawData(token);
+  const queryClient = new QueryClient();
 
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const drawing = useRef(false);
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    const ctx = canvas?.getContext('2d');
-    if (!canvas || !ctx) return;
-
-    canvas.width = 784;
-    canvas.height = 400;
-
-    ctx.fillStyle = '#FFFFFF';
-    ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-    // 지우기 설정
-    ctx.globalCompositeOperation = 'destination-out';
-    ctx.lineWidth = 50;
-    ctx.lineJoin = 'round';
-    ctx.lineCap = 'round';
-  }, []);
+  const {
+    canvasRef,
+    draw,
+    endDrawing,
+    isOpen,
+    closeModal,
+    isGameEnded,
+    drawing,
+    handleRetryButton,
+    handleBackToMain,
+  } = useCanvasDrawing();
 
   const startDrawing = (
     e: React.MouseEvent<HTMLCanvasElement> | React.TouchEvent<HTMLCanvasElement>
@@ -101,89 +77,6 @@ const LotteryCanvas = ({
     draw(e);
   };
 
-  const endDrawing = () => {
-    drawing.current = false;
-    if (canvasRef.current) {
-      canvasRef.current.getContext('2d')?.beginPath();
-    }
-  };
-
-  const draw = (
-    e: React.MouseEvent<HTMLCanvasElement> | React.TouchEvent<HTMLCanvasElement>
-  ) => {
-    if (!drawing.current) return;
-
-    const canvas = canvasRef.current;
-    const ctx = canvas?.getContext('2d');
-    if (!canvas || !ctx) return;
-
-    const rect = canvas.getBoundingClientRect();
-    const scaleX = canvas.width / rect.width;
-    const scaleY = canvas.height / rect.height;
-
-    let x, y;
-    if ('clientX' in e) {
-      x = (e.clientX - rect.left) * scaleX;
-      y = (e.clientY - rect.top) * scaleY;
-    } else {
-      x = (e.touches[0].clientX - rect.left) * scaleX;
-      y = (e.touches[0].clientY - rect.top) * scaleY;
-    }
-
-    ctx.lineTo(x, y);
-    ctx.stroke();
-    ctx.beginPath();
-    ctx.moveTo(x, y);
-
-    checkErasePercentage();
-  };
-
-  const checkErasePercentage = () => {
-    const canvas = canvasRef.current;
-    const ctx = canvas?.getContext('2d');
-    if (!canvas || !ctx) return;
-
-    const startX = 100;
-    const startY = 100;
-    const width = canvas.width - startY * 2;
-    const height = canvas.height - startX * 2;
-    const imageData = ctx.getImageData(startX, startY, width, height);
-    const data = imageData.data;
-    let erasedPixels = 0;
-
-    for (let i = 3; i < data.length; i += 4) {
-      if (data[i] === 0) {
-        erasedPixels++;
-      }
-    }
-
-    const erasePercentage = (erasedPixels / (width * height)) * 100;
-
-    if (erasePercentage >= 75 && !isCompeletRef.current) {
-      fadeOutCanvas();
-      craftFireworks(1);
-      isCompeletRef.current = true;
-      setTimeout(() => {
-        setIsOpen(true);
-      }, 1500);
-    }
-  };
-
-  const fadeOutCanvas = () => {
-    if (canvasRef.current) {
-      canvasRef.current.style.transition = 'opacity 1s';
-      canvasRef.current.style.opacity = '0';
-      canvasRef.current.style.pointerEvents = 'none';
-    }
-  };
-
-  const handleRetryButton = () => {
-    window.location.reload();
-  };
-
-  const handleBackToMain = () => {
-    navigation(ROUTER_PATH.MAIN);
-  };
   return (
     <>
       <div className='relative'>
@@ -238,4 +131,5 @@ const LotteryCanvas = ({
     </>
   );
 };
+
 export default LotteryCanvas;