Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Deploy] version 0.0.1 #35

Merged
merged 13 commits into from
Aug 13, 2024
Merged

[Deploy] version 0.0.1 #35

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
af1ff4f
refactor: PhoneNumberOverlay를 2가지의 타입으로 사용할 수 있도록 type prop 구현 (CC-135)
minani-0621 Aug 12, 2024
88cf911
fix: PhoneNumberOverlay 리팩토링 결과를 적용 (CC-135)
minani-0621 Aug 12, 2024
0ee0dd2
feat: 레이싱게임 응모 중에 커스터마이징 기대평 선택 창에서 옵션 선택 시에만 다음 창으로 넘어갈 수 있도록 구현 (CC…
minani-0621 Aug 12, 2024
03f620e
design: 레이싱게임 응모 완료 창의 css 수정 (CC-135)
minani-0621 Aug 12, 2024
332ebc9
feat: 레이싱 게임 응모 후에도 게임 종료 버튼을 누를 수 있게 구현 (CC-135)
minani-0621 Aug 12, 2024
4bc67dd
Merge branch 'CC-135' into CC-145
minani-0621 Aug 13, 2024
cfa2e15
fix: Galmuri 폰트 경로 수정 (CC-145)
minani-0621 Aug 13, 2024
2e2e5b6
design: 레이싱 게임에 Galmuri 폰트 적용 및 css 수정 (CC-145)
minani-0621 Aug 13, 2024
e494af6
style: 레이싱 게임 내 중복 되는 코드 정리 (CC-145)
minani-0621 Aug 13, 2024
5c70dc0
fix: InfoSection 컴포넌트에서 InfoSectionDot의 위치가 적용이 안되던 문제 해결 (CC-146)
minani-0621 Aug 13, 2024
2778220
Merge pull request #32 from softeerbootcamp4th/CC-135
Dunkkkk Aug 13, 2024
0aec995
Merge pull request #34 from softeerbootcamp4th/CC-146
Dunkkkk Aug 13, 2024
4322369
Merge pull request #33 from softeerbootcamp4th/CC-145
Dunkkkk Aug 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 39 additions & 23 deletions ...Overlay/PhoneNumberOverlayFindingGame.tsx → ...PhoneNumberOverlay/PhoneNumberOverlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -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}
Expand All @@ -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 />
Expand Down Expand Up @@ -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;
126 changes: 0 additions & 126 deletions Caecae/src/components/PhoneNumberOverlay/PhoneNumberOverlayRacingGame.tsx
View file
Open in desktop

This file was deleted.

5 changes: 2 additions & 3 deletions Caecae/src/components/PhoneNumberOverlay/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import PhoneNumberOverlayFindingGame from "./PhoneNumberOverlayFindingGame";
import PhoneNumberOverlayRacingGame from "./PhoneNumberOverlayRacingGame";
import PhoneNumberOverlay from "./PhoneNumberOverlay";

export default { PhoneNumberOverlayFindingGame, PhoneNumberOverlayRacingGame };
export default PhoneNumberOverlay ;
71 changes: 29 additions & 42 deletions Caecae/src/components/RacingGame/RacingGame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
Expand All @@ -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>
Expand All @@ -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">
Expand All @@ -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;
}
Expand All @@ -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>
Expand Down
18 changes: 9 additions & 9 deletions Caecae/src/components/common/InfoSection/InfoSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down
4 changes: 2 additions & 2 deletions Caecae/src/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
Loading
Loading