[Refactor] PhoneNumberOverlay 리팩토링 후 적용

Caecae/src/components/PhoneNumberOverlay/PhoneNumberOverlayFindingGame.tsx → Caecae/src/components/PhoneNumberOverlay/PhoneNumberOverlay.tsx

@@ -2,7 +2,11 @@ import { ChangeEventHandler, useEffect, useState } from "react";
 import { action } from "../../jobs/Overlay/OverlayWork";
 import { store } from "../../shared/Hyundux";
 
-const PhoneNumberOverlayFindingGame = () => {
+interface PhoneNumberOverlayProps {
+  type: "findCasper" | "raceCasper";
+}
+
+const PhoneNumberOverlay = ({ type }: PhoneNumberOverlayProps) => {
   const [timeLeft, setTimeLeft] = useState(3 * 60); // 3분을 초 단위로 변환
   const [phoneNumber, setPhoneNumber] = useState("");
   const [check, setCheck] = useState(false);
@@ -77,16 +81,24 @@ const PhoneNumberOverlayFindingGame = () => {
 
   return (
     <div className="flex flex-col h-full w-full">
-      <div className="pl-[60px] pr-[59px] grow pt-[80px]">
+      <div className="px-[60px] pt-[80px] grow">
         <p className="text-[32px] font-bold text-[#1C1A1B]">전화번호 입력</p>
-        <div className="mt-[7px]">
-          <span className="text-[red] underline mt-[10px]">
-            <span>{timeToString()}</span>내
-          </span>
-          <span>에 입력하지 않으면 미당첨으로 간주되어 자동 종료됩니다.</span>
-        </div>
-        <div className="flex items-center mt-[45px] justify-between">
-          <p className="font-bold text-[20px] text-[#1C1A1B] mr-[80px]">전화번호</p>
+        {type === "findCasper" ? (
+          <div className="mt-[10px] text-[18px]">
+            <span className="text-[#F21415] underline mt-[10px]">
+              <span>{timeToString()}</span> 내
+            </span>
+            <span className="text-[#444444]">
+              에 입력하지 않으면 미당첨으로 간주되어 자동 종료됩니다.
+            </span>
+          </div>
+        ) : (
+          <div className="text-[#444444] mt-[10px]">
+            <span>경품 수령을 위해 간단한 정보를 입력해 주세요.</span>
+          </div>
+        )}
+        <div className="flex items-center mt-[70px] justify-between">
+          <p className="font-bold text-[22px] text-[#1C1A1B] mr-[80px]">전화번호</p>
           <input
             type="text"
             value={phoneNumber}
@@ -96,11 +108,11 @@ const PhoneNumberOverlayFindingGame = () => {
           />
         </div>
         <div className="flex mt-[45px] justify-between">
-          <p className="font-bold text-[20px] text-[#1C1A1B] mr-[80px] pt-[12px]">
+          <p className="font-bold text-[22px] text-[#1C1A1B] mr-[80px] pt-[12px]">
             개인정보 동의
           </p>
           <div>
-            <div className="border border-gray-300 bg-white py-2 px-4 w-[700px] h-[140px] overflow-scroll">
+            <div className="border border-gray-300 bg-white py-2 px-4 w-[700px] h-[140px] overflow-auto">
               <p>
                 1. 개인정보의 처리 목적
                 <br />
@@ -137,18 +149,22 @@ const PhoneNumberOverlayFindingGame = () => {
           </div>
         </div>
       </div>
-      <div
-        onClick={() => {
-          store.dispatch(action.nextPage());
-        }}
-        className={`bg-[${
-          enterable ? "#002C5F" : "#CCCCCC"
-        }] h-[12%] flex items-center justify-center`}
-      >
-        <p className="text-[white] text-[20px] font-bold">응모 완료가기</p>
-      </div>
+      {enterable === true ? (
+        <div
+          onClick={() => {
+            store.dispatch(action.nextPage());
+          }}
+          className="bg-[#002C5F] h-[12%] flex items-center justify-center hover:cursor-pointer"
+        >
+          <p className="text-white text-[20px] font-bold">응모 완료하기</p>
+        </div>
+      ) : (
+        <div className="bg-[#CCCCCC] h-[12%] flex items-center justify-center">
+          <p className="text-white text-[20px] font-bold">개인정보를 입력해주세요</p>
+        </div>
+      )}
     </div>
   );
 };
 
-export default PhoneNumberOverlayFindingGame;
+export default PhoneNumberOverlay;

Caecae/src/components/PhoneNumberOverlay/index.tsx

@@ -1,4 +1,3 @@
-import PhoneNumberOverlayFindingGame from "./PhoneNumberOverlayFindingGame";
-import PhoneNumberOverlayRacingGame from "./PhoneNumberOverlayRacingGame";
+import PhoneNumberOverlay from "./PhoneNumberOverlay";
 
-export default { PhoneNumberOverlayFindingGame, PhoneNumberOverlayRacingGame };
+export default PhoneNumberOverlay ;

Caecae/src/components/RacingGame/RacingGame.tsx

@@ -130,6 +130,14 @@ const gameMenu = (gameStatus: string) => {
           </Link>
         </div>
       );
+    case "enterEvent":
+      return (
+        <div className="absolute right-[50px] top-[30px] z-40 space-x-4">
+          <Link to="/racecasper">
+            <button>게임 종료</button>
+          </Link>
+        </div>
+      );
     default:
       return null;
   }

Caecae/src/pages/FindingGame/FindingGamePage.tsx

@@ -11,7 +11,7 @@ import { store, useWork } from "../../shared/Hyundux";
 import FailContent from "./Enter/FailContent";
 import SuccessEnterContent from "./Enter/SuccessEnterContent";
 import FindingGameResult from "../../components/FindingGame/FindingGameResult";
-import PhoneNumberOverlayFindingGame from "../../components/PhoneNumberOverlay/PhoneNumberOverlayFindingGame";
+import PhoneNumberOverlay from "../../components/PhoneNumberOverlay/PhoneNumberOverlay";
 
 const FindingGamePage = () => {
   const [gameState, dispatch] = useWork(
@@ -31,7 +31,7 @@ const FindingGamePage = () => {
     <div className="relative flex flex-row h-full">
       <OverLay>
         <OverLayContent index={0} element={<EnterContent />} />
-        <OverLayContent index={1} element={<PhoneNumberOverlayFindingGame />} />
+        <OverLayContent index={1} element={<PhoneNumberOverlay type="findCasper" />} />
         <OverLayContent index={2} element={<SuccessEnterContent />} />
         <OverLayContent index={3} element={<FailContent />} />
       </OverLay>

Caecae/src/pages/RacingGame/Enter/EnterComplete.tsx

@@ -15,12 +15,12 @@ const EnterComplete = () => {
                     <img src="/public/assets/racingGameEnterImage.svg" alt="racingGameEnterImage" className="pr-[80px]" />
                 </div>
                 <div 
-                    className="flex justify-center items-center w-[521px] h-[82px] bg-[#002C5F] mt-[30px]"
+                    className="flex justify-center items-center w-[50%] h-[70px] bg-[#002C5F] mt-[30px] hover:cursor-pointer"
                     onClick={() => {
                         store.dispatch(action.toggleOverlay());
                     }}
                     >
-                    <span className="text-white text-[18px]">확인</span>
+                    <span className="text-white text-[20px] font-bold">확인</span>
                 </div>
             </div>
 

Caecae/src/pages/RacingGame/Enter/SelectCustom.tsx

@@ -26,8 +26,8 @@ const SelectCustom = () => {
     };
 
     return (
-        <div className="flex flex-col justify-center items-center">
-            <div className="p-[70px]">
+        <div className="flex flex-col w-full h-full">
+            <div className="px-[60px] pt-[70px] grow">
                 <div className="text-[32px] font-bold self-start">
                     기대되는 옵션 선택하고 추가 당첨 확률 높이기!
                 </div>
@@ -36,7 +36,7 @@ const SelectCustom = () => {
                     <br/>
                     캐스퍼 일렉트릭 당첨 시 선택한 옵션으로 받게 돼요.
                 </div>
-                <div className="flex flex-row gap-3 mt-10">
+                <div className="flex flex-row gap-3 mt-5">
                     {options.map((option) => (
                         <div
                             key={option.id}
@@ -93,17 +93,20 @@ const SelectCustom = () => {
                     ))}
                 </div>
             </div>
-
-            <div
-                onClick={() => {
-                store.dispatch(action.nextPage());
-                }}
-                className={`bg-[${
-                enterable ? "#002C5F" : "#CCCCCC"
-                }] w-full h-[60px] flex items-center justify-center`}
-            >
-                <p className="text-[white] text-[20px] font-bold">응모 완료가기</p>
-            </div>
+            {enterable === true ? (
+                    <div 
+                        onClick={() => {
+                            store.dispatch(action.nextPage());
+                        }}
+                        className="bg-[#002C5F] h-[12%] flex items-center justify-center hover:cursor-pointer"
+                    >
+                        <p className="text-white text-[20px] font-bold">확인</p>
+                    </div>
+                ) : (
+                    <div className="bg-[#CCCCCC] h-[12%] flex items-center justify-center">
+                        <p className="text-white text-[20px] font-bold">마음에 드는 커스텀마이징을 선택하세요</p>
+                    </div>
+                )}
         </div>
     );
 };

Caecae/src/pages/RacingGame/RacingGamePage.tsx

@@ -6,7 +6,7 @@ import RacingGame from "../../components/RacingGame/index";
 import { initRacingGameState, racingGameReducer } from "../../jobs/RacingGame/RacingGameWork";
 import SelectCustom from "./Enter/SelectCustom";
 import EnterComplete from "./Enter/EnterComplete";
-import PhoneNumberOverlayRacingGame from "../../components/PhoneNumberOverlay/PhoneNumberOverlayRacingGame";
+import PhoneNumberOverlay from "../../components/PhoneNumberOverlay";
 
 const RacingGamePage = () => {
   const [state, dispatch] = useWork(initRacingGameState, racingGameReducer);
@@ -20,7 +20,7 @@ const RacingGamePage = () => {
   return (
     <div className="flex flex-row h-full relative">
       <OverLay>
-        <OverLayContent index={0} element={<PhoneNumberOverlayRacingGame />} />
+        <OverLayContent index={0} element={<PhoneNumberOverlay type="raceCasper" />} />
         <OverLayContent index={1} element={<SelectCustom />} />
         <OverLayContent index={2} element={<EnterComplete />} />
       </OverLay>