Merge pull request #35 from softeerbootcamp4th/develop

[Deploy] version 0.0.1
softeerbootcamp4th · Aug 13, 2024 · 05c8062 · 05c8062
2 parents f7e99fe + 4322369
commit 05c8062
Show file tree

Hide file tree

Showing 10 changed files with 104 additions and 225 deletions.
diff --git a/...Overlay/PhoneNumberOverlayFindingGame.tsx → ...PhoneNumberOverlay/PhoneNumberOverlay.tsx b/...Overlay/PhoneNumberOverlayFindingGame.tsx → ...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;
diff --git a/Caecae/src/components/PhoneNumberOverlay/PhoneNumberOverlayRacingGame.tsx b/Caecae/src/components/PhoneNumberOverlay/PhoneNumberOverlayRacingGame.tsx
diff --git a/Caecae/src/components/PhoneNumberOverlay/index.tsx b/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 ;
diff --git a/Caecae/src/components/RacingGame/RacingGame.tsx b/Caecae/src/components/RacingGame/RacingGame.tsx
@@ -20,14 +20,15 @@ const gameContent = (
 ) => {
   switch (gameStatus) {
     case "previous":
+    case "enterEvent":
       return (
-        <div className="absolute left-[650px] top-[70px] z-40 flex flex-col items-center justify-center">
-          <div className="font-bold text-xl mb-2">CASPER ELECTRIC</div>
-          <div className="font-bold text-xl mb-2">전력으로...!</div>
-          <div className="mt-2">
-            <button className="" onClick={handlePlayGame}>
+        <div className="absolute left-[600px] top-[70px] z-40 flex flex-col items-center justify-center font-galmuri">
+          <div className="font-bold text-xl mb-2 pr-5 text-[#A8A8A8]">CASPER ELECTRIC</div>
+          <div className=" text-[44px] mb-2 text-[#666666]">전력으로...!</div>
+          <div className="mt-5">
+            <button className="w-[500px]" onClick={handlePlayGame}>
               <img
-                className="w-[300px] h-[55px]"
+                className="w-[500px]"
                 src="public/assets/gameStartBtn.svg"
                 alt="gameStartBtn"
               />
@@ -37,11 +38,11 @@ const gameContent = (
       );
     case "playing":
       return (
-        <div className="absolute left-[600px] top-[70px] z-40 flex flex-col items-center justify-center">
-          <div className="font-bold text-xl mb-2">Game Score</div>
-          <div className="font-bold text-xl mb-2">{distance.toFixed(3)} KM</div>
+        <div className="absolute left-[650px] top-[70px] z-40 flex flex-col items-center justify-center font-galmuri">
+          <div className="font-bold text-xl mb-2 text-[#A8A8A8]">Game Score</div>
+          <div className="font-bold mb-2 text-[52px]">{distance.toFixed(3)} KM</div>
           <div className="flex flex-row items-center justify-center mt-2">
-            <div className="font-bold text-xl mr-2">stop :</div>
+            <div className="font-bold text-[28px] mr-2 text-[#666666]">stop :</div>
             <div className="ml-2">
               <img src="public/assets/spacebarBtn.svg" alt="spacebarBtn" />
             </div>
@@ -50,14 +51,14 @@ const gameContent = (
       );
     case "end":
       return (
-        <div className="absolute left-[580px] top-[70px] z-40 flex flex-col items-center justify-center">
+        <div className="absolute left-[650px] top-[70px] z-40 flex flex-col items-center justify-center font-galmuri">
           <div className="flex flex-col items-center justify-center">
-            <div className="font-bold text-xl mb-2">Game Score</div>
+            <div className="font-bold text-xl mb-2 text-[#A8A8A8]">Game Score</div>
             <div className="flex flex-row space-x-2">
-              <div className="font-bold text-xl mb-2">
+              <div className="font-bold text-[52px] mb-2">
                 {distance.toFixed(3)} KM
               </div>
-              <div className="font-bold text-xl">상위 1%</div>
+              <div className="font-bold text-xl text-[#3D3D3D] flex items-end pb-5">상위 1%</div>
             </div>
           </div>
           <div className="flex flex-row items-center justify-center mt-2 space-x-4">
@@ -81,22 +82,6 @@ const gameContent = (
           </div>
         </div>
       );
-    case "enterEvent":
-      return (
-        <div className="absolute left-[650px] top-[70px] z-40 flex flex-col items-center justify-center">
-          <div className="font-bold text-xl mb-2">CASPER ELECTRIC</div>
-          <div className="font-bold text-xl mb-2">전력으로...!</div>
-          <div className="mt-2">
-            <button className="" onClick={handlePlayGame}>
-              <img
-                className="w-[300px] h-[55px]"
-                src="public/assets/gameStartBtn.svg"
-                alt="gameStartBtn"
-              />
-            </button>
-          </div>
-        </div>
-      );
     default:
       return null;
   }
@@ -106,25 +91,27 @@ const gameContent = (
 const gameMenu = (gameStatus: string) => {
   switch (gameStatus) {
     case "previous":
+    case "playing":
+    case "enterEvent":
       return (
-        <Link to="/racecasper">
-          <div className="absolute right-[50px] top-[30px] z-40">
-            <button>게임 종료</button>
-          </div>
-        </Link>
+        <div className="absolute right-[50px] top-[30px] z-40 font-galmuri text-[#494949] text-xl">
+          <Link to="/racecasper">
+            <button>게임 종료</button>  
+          </Link>
+        </div>
       );
-    case "playing":
+    case "end":
       return (
-        <Link to="/racecasper">
-          <div className="absolute right-[50px] top-[30px] z-40">
+        <div className="absolute right-[50px] top-[30px] z-40 space-x-10 font-galmuri text-[#494949] text-xl">
+          <button>기록 자랑하기</button>
+          <Link to="/racecasper">
             <button>게임 종료</button>
-          </div>
-        </Link>
+          </Link>
+        </div>
       );
-    case "end":
+    case "enterEvent":
       return (
         <div className="absolute right-[50px] top-[30px] z-40 space-x-4">
-          <button>기록 자랑하기</button>
           <Link to="/racecasper">
             <button>게임 종료</button>
           </Link>

diff --git a/Caecae/src/components/common/InfoSection/InfoSection.tsx b/Caecae/src/components/common/InfoSection/InfoSection.tsx
@@ -53,19 +53,19 @@ interface InfoSectionDotProps {
 }
 
 const InfoSectionDot = ({
-  top = 0,
-  bottom = 0,
-  left = 0,
-  right = 0,
+  top,
+  bottom,
+  left,
+  right,
 }: InfoSectionDotProps) => {
   const style: React.CSSProperties = {
-    top: `${top}px`,
-    bottom: `${bottom}px`,
-    left: `${left}px`,
-    right: `${right}px`,
     width: "20px",
     position: "absolute",
-    zIndex: "10",
+    zIndex: 10,
+    ...(top !== undefined && { top: `${top}px` }),
+    ...(bottom !== undefined && { bottom: `${bottom}px` }),
+    ...(left !== undefined && { left: `${left}px` }),
+    ...(right !== undefined && { right: `${right}px` }),
   };
 
   return (

diff --git a/Caecae/src/index.css b/Caecae/src/index.css
@@ -10,14 +10,14 @@ html, body, #root {
 
 @font-face {
   font-family: 'Galmuri';
-  src: url('../src/assets/font/Galmuri11.ttf') format('truetype');
+  src: url('../public/assets/font/Galmuri11.ttf') format('truetype');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: 'Galmuri';
-  src: url('../src/assets/font/Galmuri11-Bold.ttf') format('truetype');
+  src: url('../public/assets/font/Galmuri11-Bold.ttf') format('truetype');
   font-weight: 700;
   font-style: normal;
 }