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

[Feat] 레이싱 게임 랜딩페이지 구현 #14

Merged
merged 14 commits into from
Aug 7, 2024
Merged

[Feat] 레이싱 게임 랜딩페이지 구현 #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
d55b710
Merge branch 'CC-110' into CC-115
minani-0621 Aug 6, 2024
7c090d6
feat: 315 게임 안내페이지에 필요한 에셋 추가 (CC-115)
minani-0621 Aug 6, 2024
cbbe36c
feat: EventIntro section 구현 (CC-115)
minani-0621 Aug 6, 2024
c9f9132
feat: HowToEvent section 구현 (CC-115)
minani-0621 Aug 6, 2024
d8b2154
feat: GiftInfo section 구현 (CC-115)
minani-0621 Aug 6, 2024
b6ec1fa
feat: EventPeriod section 구현 (CC-115)
minani-0621 Aug 6, 2024
b273f25
feat: EventPrecaution section 구현 (CC-115)
minani-0621 Aug 6, 2024
60d3a77
feat: RacingGameLandingPage 구현 (CC-115)
minani-0621 Aug 6, 2024
5a4b9fa
fix: 315 게임 랜딩페이지 section들 내의 콘텐츠가 section를 벗어나는 에러 수정 (CC-115)
minani-0621 Aug 6, 2024
1770896
feat: 315 게임 안내페이지에 필요한 에셋 추가 (CC-115)
minani-0621 Aug 7, 2024
c04820b
design: 315 게임 안내페이지 디자인 수정 (CC-115)
minani-0621 Aug 7, 2024
e577324
feat: 315 게임 안내페이지에 필요한 에셋 추가 (CC-115)
minani-0621 Aug 7, 2024
db84771
design: 315 게임 안내페이지 UI 수정 (CC-115)
minani-0621 Aug 7, 2024
d4a6f6f
Merge branch 'develop' into CC-115
minani-0621 Aug 7, 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
1 change: 1 addition & 0 deletions Caecae/src/Page/FindingGameLanding/FindingGameLadingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import Navigation from "../../Widget/Navigation/Navigation";
import EventPeriod from "./Sections/EventPeriod";
import HowToEvent from "./Sections/HowToEvent";
import LadingPageTitle from "./Sections/LadingPageTitle";

import OpenEvent from "./Sections/OpenEvent";
import SelectionMethod from "./Sections/SelectionMethod";

Expand Down
23 changes: 23 additions & 0 deletions Caecae/src/Page/RacingGameLanding/RacingGameLandingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import Navigation from "../../Widget/Navigation/Navigation";
import EventIntro from "./Sections/EventIntro";
import HowToEvent from "./Sections/HowToEvent";
import GiftInfo from "./Sections/GiftInfo";
import EventPeriod from "./Sections/EventPeriod";
import EventPrecaution from "./Sections/EventPrecaution";
import Footer from "../../Widget/Footer/Footer";

const RacingGameLandingPage = () => {
return (
<>
<Navigation />
<EventIntro />
<HowToEvent />
<GiftInfo />
<EventPeriod />
<EventPrecaution />
<Footer />
</>
);
};

export default RacingGameLandingPage;
65 changes: 65 additions & 0 deletions Caecae/src/Page/RacingGameLanding/Sections/EventIntro.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
const EventIntro = () => {
return (
<>
<div className="flex w-full h-screen justify-center items-center relative">
<div className="flex flex-col absolute z-20 items-center mt-20">
<p className="text-[#B6B6B6] text-[22px]">
<span className="text-white ">CASPER Electric </span>
신차 출시 추첨 이벤트
</p>
<h1 className="flex items-center font-galmuri text-[white] text-[80px] font-bold my-2">
전력으로...!
<div className="relative inline-block ml-5">
<span className="absolute inset-0 flex items-center justify-center text-black">
315Km
</span>
<img src="/src/Shared/assets/background315km.svg" alt="background315km" className="block" />
</div>
</h1>
<p className="text-white text-[24px] text-center">
315km를 전력으로 질주하고<br/>
<span className="text-[#00AAD2]">캐스퍼 일렉트릭 </span>
받아가자!
</p>
<img src="/src/Shared/assets/pixelCasper.svg" alt="pixelCasper" className="pr-10" />
<div className="flex flex-row gap-6 justify-center items-center">

<div className="bg-[#0609CD] w-[300px] h-[100px] flex flex-row justify-center items-center gap-3" onClick={shareEvent}>
<img src="/src/Shared/assets/sharedButton.svg" alt="sharedButton" />
<span className="text-white text-[24px]">공유하기</span>
</div>
<div className="bg-white w-[300px] h-[100px] flex flex-row justify-center items-center gap-3" onClick={play315Game}>
<span className="text-[24px]">전력 질주하러 가기</span>
<img src="/src/Shared/assets/rightShevron.svg" alt="rightShevron" />
</div>
</div>
</div>
<div>
<img
src="/src/Shared/assets/backgroundGradation.svg"
alt="backgroundGradation"
className="absolute top-0 left-0 w-full h-screen object-cover object-bottom-center" />
<img
src="/src/Shared/assets/leftEffect.svg"
alt="leftEffect"
className="opacity-[70%] w-[350px] left-0 top-56 absolute z-10"
/>
<img
src="/src/Shared/assets/rightEffect.svg"
alt="rightEffect"
className="opacity-[70%] w-[230px] right-0 top-96 absolute z-10"
/>
</div>
</div>
</>
);
};
const shareEvent = () => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

주석 붙여주세용~~~

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

깜박했어용~~

console.log("이벤트를 공유합니다!");
};

const play315Game = () => {
console.log("315게임을 실행합니다!");
};

export default EventIntro;
40 changes: 40 additions & 0 deletions Caecae/src/Page/RacingGameLanding/Sections/EventPeriod.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import InfoSection from "../../../Widget/InfoSection/InfoSection";

const EventPeriod = () => {
return (
<>
<div className="relative h-[1100px] bg-black ">
<div className="absolute inset-0 z-10 flex flex-col items-center w-full bg-[#00113F] bg-opacity-40">
<h1 className="text-white font-[900] text-[40px] mt-16">
이벤트 기간
</h1>
<div className="mt-14">
<InfoSection title="7일간 매일매일">
<div className="flex flex-col justify-center items-center py-[60px] px-[60px]">
<p className="text-white text-center text-[24px] line-[140%]">
참여기간: 7.15(월) - 7.21(일)
<br/>
당첨자 발표 날짜: 7.29(월)부터 주말ㆍ공휴일 제외 순차적으로 발송
</p>
<div className="my-16">
<img src="/src/Shared/assets/eventPeriodBackground.svg" alt="eventPeriodBackground" />
</div>
<div className="mt-2">
<button onClick={play315Game}>
<img src="/src/Shared/assets/play315GameButton.svg" alt="play315GameButton" />
</button>
</div>
</div>
</InfoSection>
</div>
</div>
</div>
</>
);
};

const play315Game = () => {
console.log("315게임을 실행합니다!");
}

export default EventPeriod;
25 changes: 25 additions & 0 deletions Caecae/src/Page/RacingGameLanding/Sections/EventPrecaution.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
const EventPrecaution = () => {
return (
<>
<div className="h-[450px] bg-black p-24">
<div className="w-[1065px]">
<h1 className="text-[28px] text-white font-bold mb-5">
이벤트 유의사항
</h1>
<ul className="text-white">
<li>ㆍ 본 이벤트 내용 및 혜택은 당사 사정에 의해 사전 공지 없이 변경 또는 종료될 수 있습니다.</li>
<li>ㆍ 본인의 기록을 등록 완료한 경우에만 이벤트 응모가 완료됩니다.</li>
<li>ㆍ 본 이벤트는 1인 1회 응모 가능하며 상위 기록으로 재응모 시 최고 기록으로 기록이 갱신됩니다.</li>
<li>ㆍ 경품 발송을 위한 정보 수집 및 안내 기간 동안 미응답자는 당첨이 취소됩니다.</li>
<li>ㆍ 경품 이미지는 소비자 이해를 돕기 위해 연출된 이미지로, 실제 경품과 다를 수 있습니다.</li>
<li>ㆍ 잘못된 휴대전화 번호 기입으로 인해 정보 수집 기간 내 MMS를 받지 못하는 경우 재발송되지 않으니 정확한 번호를 입력하시기 바랍니다.</li>
<li>ㆍ 당첨자는 추가 개인 정보 수집에 거부할 권리가 있으며, 이 경우 경품 발송이 제한됩니다.</li>
<li>ㆍ 이벤트 응모 시, 이벤트 참여 약관에 모두 동의하는 것으로 간주합니다.</li>
</ul>
</div>
</div>
</>
);
};

export default EventPrecaution;
110 changes: 110 additions & 0 deletions Caecae/src/Page/RacingGameLanding/Sections/GiftInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,110 @@
import InfoSection from "../../../Widget/InfoSection/InfoSection";

const GiftInfo = () => {
return (
<>
<div className="relative h-[1400px] bg-black">
<div className="absolute inset-0 z-10 flex flex-col items-center w-full bg-[#00113F] bg-opacity-40">
<h1 className="text-white font-[900] text-[40px] mt-16">
참여 혜택
</h1>
<div className="mt-14">
<InfoSection title="추첨 경품">
<div className="flex flex-col justify-center items-center py-[60px] px-[60px]">
<p className="text-white text-center text-[24px] line-[140%]">
캐스퍼 일렉트릭과 함께 압도적 캐미를 보여준 분께
<br/>
<span className="text-[#00AAD2]">딱 맞는 아이템</span>
을 경품으로 드립니다.
</p>
<div className="flex flex-row justify-center items-center gap-10 mt-14">
<div className="">
<img src="/src/Shared/assets/gift1st.svg" alt="gift1st" />
</div>
<div className="w-[399px] h-[238px] flex items-center justify-center border-white border-2">
<div className="w-[383px] h-[222px] bg-white text-[22px] flex flex-col justify-center items-center">
<span className="text-[28px] font-galmuri pb-2">캐스퍼 일렉트릭 (1명)</span>
캐스퍼 일렉트릭과 최고의 캐미를
<br/>
보여준 당신! 캐스퍼 일렉트릭의
<br/>
파트너로 선정되었습니다.
</div>
</div>
</div>
<div className="flex flex-row justify-center items-center gap-10 mt-14">
<div className="flex flex-col">
<div className="relative inline-block">
<span className="absolute inset-1 pl-1 text-black font-galmuri font-bold text-[24px]">
2등
</span>
<img src="/src/Shared/assets/trapezoid3.svg" alt="trapezoid3" />
</div>
<div>
<div className="flex flex-col p-2 border-white border-2">
<img src="/src/Shared/assets/gift2nd.svg" alt="gift2nd" />
<p className="text-[#CCCCCC] px-3 my-4">
<span className="font-galmuri text-white text-[20px] block mb-1">스마트워치 (7명)</span>
최대 7개의 디바이스를 지원하는 캐스퍼 일렉트릭
<br/>
스마트키! 스마트 워치로 손쉽게 함께하세요.
</p>
</div>
</div>
</div>
<div className="flex flex-col">
<div className="relative inline-block">
<span className="absolute inset-1 pl-1 text-black font-galmuri font-bold text-[24px]">
3등
</span>
<img src="/src/Shared/assets/trapezoid3.svg" alt="trapezoid3" />
</div>
<div>
<div className="flex flex-col p-2 border-white border-2">
<img src="/src/Shared/assets/gift3rd.svg" alt="gift3rd" />
<p className="text-[#CCCCCC] px-3 my-4">
<span className="font-galmuri text-white text-[20px] block mb-1">무선 충전패드 (30명)</span>
30분 만에 급속 충전되는 캐스퍼 일렉트릭.
<br/>
V2L 기능도 제공하니까! 다른 디바이스도 간편하게.
</p>
</div>
</div>
</div>
<div className="flex flex-col">
<div className="relative inline-block">
<span className="absolute inset-1 pl-1 text-black font-galmuri font-bold text-[24px]">
4등
</span>
<img src="/src/Shared/assets/trapezoid3.svg" alt="trapezoid3" />
</div>
<div>
<div className="flex flex-col p-2 border-white border-2">
<img src="/src/Shared/assets/gift4th.svg" alt="gift4th" />
<p className="text-[#CCCCCC] px-3 my-4">
<span className="font-galmuri text-white text-[20px] block mb-1">휴대용 무드등 (64명)</span>
64가지의 색상을 내뿜는 캐스퍼 일렉트릭 엠비언트
<br/>
라이트! 휴대용 무드등과 언제나 무드있게.
</p>
</div>
</div>
</div>
</div>
</div>
</InfoSection>
</div>
</div>
<div>
<img
src="/src/Shared/assets/leftEffect3.svg"
alt="leftEffect3"
className="opacity-[70%] w-[400px] left-10 top-[-170px] absolute"
/>
</div>
</div>
</>
);
};

export default GiftInfo;
Loading