diff --git a/Caecae/src/components/PhoneNumberOverlay/PhoneNumberOverlayFindingGame.tsx b/Caecae/src/components/PhoneNumberOverlay/PhoneNumberOverlay.tsx similarity index 74% rename from Caecae/src/components/PhoneNumberOverlay/PhoneNumberOverlayFindingGame.tsx rename to Caecae/src/components/PhoneNumberOverlay/PhoneNumberOverlay.tsx index 327c0fc..5ac33c5 100644 --- a/Caecae/src/components/PhoneNumberOverlay/PhoneNumberOverlayFindingGame.tsx +++ b/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 (
-
+

전화번호 입력

-
- - {timeToString()}내 - - 에 입력하지 않으면 미당첨으로 간주되어 자동 종료됩니다. -
-
-

전화번호

+ {type === "findCasper" ? ( +
+ + {timeToString()} 내 + + + 에 입력하지 않으면 미당첨으로 간주되어 자동 종료됩니다. + +
+ ) : ( +
+ 경품 수령을 위해 간단한 정보를 입력해 주세요. +
+ )} +
+

전화번호

{ />
-

+

개인정보 동의

-
+

1. 개인정보의 처리 목적
@@ -137,18 +149,22 @@ const PhoneNumberOverlayFindingGame = () => {

-
{ - store.dispatch(action.nextPage()); - }} - className={`bg-[${ - enterable ? "#002C5F" : "#CCCCCC" - }] h-[12%] flex items-center justify-center`} - > -

응모 완료가기

-
+ {enterable === true ? ( +
{ + store.dispatch(action.nextPage()); + }} + className="bg-[#002C5F] h-[12%] flex items-center justify-center hover:cursor-pointer" + > +

응모 완료하기

+
+ ) : ( +
+

개인정보를 입력해주세요

+
+ )}
); }; -export default PhoneNumberOverlayFindingGame; +export default PhoneNumberOverlay; diff --git a/Caecae/src/components/PhoneNumberOverlay/PhoneNumberOverlayRacingGame.tsx b/Caecae/src/components/PhoneNumberOverlay/PhoneNumberOverlayRacingGame.tsx deleted file mode 100644 index 28f6997..0000000 --- a/Caecae/src/components/PhoneNumberOverlay/PhoneNumberOverlayRacingGame.tsx +++ /dev/null @@ -1,126 +0,0 @@ -import { ChangeEventHandler, useEffect, useState } from "react"; -import { action } from "../../jobs/Overlay/OverlayWork"; -import { store } from "../../shared/Hyundux"; - -const PhoneNumberOverlayRacingGame = () => { - const [phoneNumber, setPhoneNumber] = useState(""); - const [check, setCheck] = useState(false); - const [enterable, setEnterable] = useState(false); - - const onPhoneNumberFieldChange: ChangeEventHandler = ( - event - ) => { - let number = ""; - const cleaned = event.target.value.replace(/\D/g, ""); - - // 유효성 검사 - if (cleaned.length <= 3) { - number = cleaned; - setPhoneNumber(number); - } else if (cleaned.length <= 7) { - number = `${cleaned.slice(0, 3)}-${cleaned.slice(3)}`; - setPhoneNumber(number); - } else if (cleaned.length <= 11) { - number = `${cleaned.slice(0, 3)}-${cleaned.slice(3, 7)}-${cleaned.slice( - 7, - 11 - )}`; - if (cleaned.length == 11) { - console.log(1234123); - } - setPhoneNumber(number); - } - }; - - const onCheckboxChange: ChangeEventHandler = () => { - setCheck((prev) => !prev); - }; - - useEffect(() => { - const number = phoneNumber.split("-").join(""); - if ( - check && - number.length == 11 && - number.slice(0, 3) === "010" && - enterable === false - ) { - setEnterable(true); - } else if (enterable === true) { - setEnterable(false); - } - }, [check, phoneNumber]); - - return ( -
-
-

전화번호 입력

-
- 경품 수령을 위해 간단한 정보를 입력해 주세요. -
-
-

전화번호

- -
-
-

- 개인정보 동의 -

-
-
-

- 1. 개인정보의 처리 목적 -
- 개인정보를 다음의 목적을 위해 처리합니다. 처리한 개인정보는 - 다음의 목적 이외의 용도로는 사용되지 않으며 이용 목적이 변경될 - 시에는 사전 동의를 구할 예정입니다. -
- 1. 개인정보의 처리 목적 -
- 개인정보를 다음의 목적을 위해 처리합니다. 처리한 개인정보는 - 다음의 목적 이외의 용도로는 사용되지 않으며 이용 목적이 변경될 - 시에는 사전 동의를 구할 예정입니다. -
- 1. 개인정보의 처리 목적 -
- 개인정보를 다음의 목적을 위해 처리합니다. 처리한 개인정보는 - 다음의 목적 이외의 용도로는 사용되지 않으며 이용 목적이 변경될 - 시에는 사전 동의를 구할 예정입니다. -
-

-
-
- -

- 개인정보보호법에 따라 귀하의 개인정보를 다음과 같이 - 수집・이용하는데 동의합니다. -

-
-
-
-
-
{ - store.dispatch(action.nextPage()); - }} - className={`bg-[${ - enterable ? "#002C5F" : "#CCCCCC" - }] h-[12%] flex items-center justify-center`} - > -

응모 완료가기

-
-
- ); -}; - -export default PhoneNumberOverlayRacingGame; diff --git a/Caecae/src/components/PhoneNumberOverlay/index.tsx b/Caecae/src/components/PhoneNumberOverlay/index.tsx index d29787c..0b7771d 100644 --- 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 index e65217a..6d48f7a 100644 --- 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 ( -
-
CASPER ELECTRIC
-
전력으로...!
-
- -
-
- ); default: return null; } @@ -106,25 +91,27 @@ const gameContent = ( const gameMenu = (gameStatus: string) => { switch (gameStatus) { case "previous": + case "playing": + case "enterEvent": return ( - -
- -
- +
+ + + +
); - case "playing": + case "end": return ( - -
+
+ + -
- + +
); - case "end": + case "enterEvent": return (
- diff --git a/Caecae/src/components/common/InfoSection/InfoSection.tsx b/Caecae/src/components/common/InfoSection/InfoSection.tsx index 9776ee1..d48815c 100644 --- 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 index 18b6d9e..01be5e4 100644 --- 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; } diff --git a/Caecae/src/pages/FindingGame/FindingGamePage.tsx b/Caecae/src/pages/FindingGame/FindingGamePage.tsx index b4a75b0..5266583 100644 --- a/Caecae/src/pages/FindingGame/FindingGamePage.tsx +++ b/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 = () => {
} /> - } /> + } /> } /> } /> diff --git a/Caecae/src/pages/RacingGame/Enter/EnterComplete.tsx b/Caecae/src/pages/RacingGame/Enter/EnterComplete.tsx index 5aa7231..07bef7b 100644 --- a/Caecae/src/pages/RacingGame/Enter/EnterComplete.tsx +++ b/Caecae/src/pages/RacingGame/Enter/EnterComplete.tsx @@ -15,12 +15,12 @@ const EnterComplete = () => { racingGameEnterImage
{ store.dispatch(action.toggleOverlay()); }} > - 확인 + 확인
diff --git a/Caecae/src/pages/RacingGame/Enter/SelectCustom.tsx b/Caecae/src/pages/RacingGame/Enter/SelectCustom.tsx index 71ba9b2..03394d0 100644 --- a/Caecae/src/pages/RacingGame/Enter/SelectCustom.tsx +++ b/Caecae/src/pages/RacingGame/Enter/SelectCustom.tsx @@ -26,8 +26,8 @@ const SelectCustom = () => { }; return ( -
-
+
+
기대되는 옵션 선택하고 추가 당첨 확률 높이기!
@@ -36,7 +36,7 @@ const SelectCustom = () => {
캐스퍼 일렉트릭 당첨 시 선택한 옵션으로 받게 돼요.
-
+
{options.map((option) => (
{ ))}
- -
{ - store.dispatch(action.nextPage()); - }} - className={`bg-[${ - enterable ? "#002C5F" : "#CCCCCC" - }] w-full h-[60px] flex items-center justify-center`} - > -

응모 완료가기

-
+ {enterable === true ? ( +
{ + store.dispatch(action.nextPage()); + }} + className="bg-[#002C5F] h-[12%] flex items-center justify-center hover:cursor-pointer" + > +

확인

+
+ ) : ( +
+

마음에 드는 커스텀마이징을 선택하세요

+
+ )}
); }; diff --git a/Caecae/src/pages/RacingGame/RacingGamePage.tsx b/Caecae/src/pages/RacingGame/RacingGamePage.tsx index c95046e..eea9668 100644 --- a/Caecae/src/pages/RacingGame/RacingGamePage.tsx +++ b/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 (
- } /> + } /> } /> } />