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..ed81141 100644 --- a/Caecae/src/components/RacingGame/RacingGame.tsx +++ b/Caecae/src/components/RacingGame/RacingGame.tsx @@ -130,6 +130,14 @@ const gameMenu = (gameStatus: string) => {
); + case "enterEvent": + return ( +
+ + + +
+ ); default: return null; } 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 (
- } /> + } /> } /> } />