[Refactor] PhoneNumberOverlay 리팩토링 후 적용

[minani-0621]

✅ 구현사항

• PhoneNumberOverlay 리팩토링 후 적용
• 레이싱 게임 응모 도중에 기대평 선택 시 선택한 옵션이 있어야만 다음 페이지로 넘어갈 수 있도록 구현
• 레이싱 게임 응모 후에도 게임 종료 버튼 뜨도록 구현

PhoneNumberOverlay 리팩토링

interface PhoneNumberOverlayProps {
  type: "findCasper" | "raceCasper";
}

const PhoneNumberOverlay = ({ type }: PhoneNumberOverlayProps) => {
   ...뒤 코드 생략

type이라는 prop를 통해서 숨은그림찾기 게임 버전과 레이싱 게임의 2개 버전으로 사용 가능

<OverLayContent index={0} element={<PhoneNumberOverlay type="raceCasper" />} />

위 코드는 적용 예시 입니다

레이싱 게임 응모 중에 기대평으로 선택한 옵션이 있을 때만 다음 페이지로 이동 가능

      {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>
      )}

enterable state에 따라서 다른 요소로 랜더링

[Dunkkkk]

좋아요~