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

[Feat] 숨은 캐스퍼 찾기 화면별 대응 #53

Merged
merged 1 commit into from
Aug 20, 2024
Merged

[Feat] 숨은 캐스퍼 찾기 화면별 대응 #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 4 additions & 1 deletion Caecae/src/components/common/InfoSection/InfoSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,10 @@ const InfoSection = ({
};
return (
<>
<div className="flex flex-col items-center justify-center" style={style}>
<div
className="flex flex-col items-center justify-center h-full"
style={style}
>
{header}
<div className="border-l-4 border-r-4 border-white relative w-full h-full">
{children}
Expand Down
2 changes: 1 addition & 1 deletion Caecae/src/components/common/Navigation/Navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const Navigation: React.FC = () => {
<nav
className={`${
showNav ? "" : "hideNav"
} relative bg-navigation flex justify-center items-center h-16 border-b-4 border-navigationUnderline header`}
} relative bg-navigation flex justify-center items-center h-16 border-b-4 border-navigationUnderline header h-[8%] min-h-[60px]`}
>
<div className="absolute left-0 ml-10 logo">
<Link to="/">
Expand Down
2 changes: 1 addition & 1 deletion Caecae/src/features/FindingGameLanding/EventPeriod.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import SmileBadge from "../../components/common/SmileBadge/index";

const EventPeriod = () => {
return (
<div className="h-[115vh] bg-[black]">
<div className="h-[100vh] bg-[black] min-h-[950px]">
<div className="absolute z-10 flex flex-col items-center w-full h-screen">
<p className="text-[white] font-[900] text-[40px] mt-[60px]">
이벤트 기간
Expand Down
6 changes: 3 additions & 3 deletions Caecae/src/features/FindingGameLanding/HowToEvent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,12 @@ import InfoSection from "../../components/common/InfoSection/index";

const HowToEvent = () => {
return (
<div className="h-[115vh] bg-[black]">
<div className="absolute z-10 flex flex-col items-center w-full h-screen">
<div className="h-screen bg-[black] min-h-[950px] flex flex-col items-center justify-center">
<div className="absolute z-10 flex flex-col items-center justify-center">
<p className="text-[white] font-[900] text-[40px] mt-[60px]">
이벤트 참여 방법
</p>
<div className="mt-[50px] flex justify-center">
<div className="mt-[50px] flex justify-center items-center">
<InfoSection title="나를 찾아봐" width={90}>
<div className="flex flex-col justify-center items-center py-[60px] px-[60px]">
<p className="text-[white] text-center text-[22px] line-[140%]">
Expand Down
40 changes: 21 additions & 19 deletions Caecae/src/features/FindingGameLanding/LadingPageTitle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@ const LadingPageTitle = ({ onClick }: LadingPageTitleProps) => {
setIsAnimating(true);
const url: string = window.location.href;

navigator.clipboard.writeText(url)
navigator.clipboard
.writeText(url)
.then(() => {
setShowMessage(true);

Expand All @@ -28,21 +29,19 @@ const LadingPageTitle = ({ onClick }: LadingPageTitleProps) => {
setShowMessage(false);
setIsAnimating(false);
}, 500);

}, 3000);

}, 10);
}, 10);
})
.catch((err: Error) => {
console.error('URL 복사에 실패했습니다.', err);
console.error("URL 복사에 실패했습니다.", err);
setIsAnimating(false);
});
};
return (
<>
<div className="flex w-full h-[93vh] justify-center items-center relative">
<div className="absolute z-20 flex flex-col items-center">
<p className="text-[#CCCCCC] text-[20px] mt-[100px]">
<div className="flex w-screen h-screen justify-center items-center relative overflow-hidden min-h-[950px]">
<div className="absolute z-20 flex flex-col items-center h-screen justify-center min-h-[950px]">
<p className="text-[#CCCCCC] text-[20px]">
<span className="font-bold text-[white]">CASPER Electric</span> 신차
출시 선착순 이벤트
</p>
Expand All @@ -58,26 +57,25 @@ const LadingPageTitle = ({ onClick }: LadingPageTitleProps) => {
</div>
<p className="text-center text-[white] text-[24px]">
캐스퍼 일렉트릭에 숨겨진 로봇 뱃지
<br /> 찾고 <span className="text-[#00AAD2]">1만 원 커피 쿠폰 </span>
<br /> 찾고{" "}
<span className="text-[#00AAD2]">1만 원 커피 쿠폰 </span>
받아가자!
</p>
<img
src="/assets/smileBage3D.svg"
alt="smileBage3D"
className="h-[300px] mt-[50px]"
className="h-1/3 mt-[50px] min-h-[200px]"
/>
<div className="flex gap-[30px]">
<div
className="bg-[#0609CD] flex items-center justify-center w-[300px] h-[80px] hover:cursor-pointer"
<div className="flex gap-[30px] h-[80px]">
<div
className="bg-[#0609CD] flex items-center justify-center w-[300px] h-full hover:cursor-pointer"
onClick={shareEvent}
>
<img src="/assets/sharedButton.svg" alt="sharedButton" />
<p className="text-[white] text-[22px] ml-[10px]">
공유하기
</p>
<p className="text-[white] text-[22px] ml-[10px]">공유하기</p>
</div>
<div
className="bg-[white] flex items-center justify-center gap-[15px] w-[300px] h-[80px]"
className="bg-[white] flex items-center justify-center gap-[15px] w-[300px] h-full"
onClick={() => onClick()}
>
<p className="text-[22px]">바로 캐스퍼 찾으러가기</p>
Expand All @@ -89,7 +87,7 @@ const LadingPageTitle = ({ onClick }: LadingPageTitleProps) => {
<img
src="/assets/findGameTitleBackground.svg"
alt="findGameLeftBlocks"
className="absolute top-0 left-0 w-full h-[93vh] object-cover bg-[black] object-bottom-center"
className="absolute top-0 left-0 w-full h-screen object-cover bg-[black] object-bottom-center min-h-[950px]"
/>
<img
src="/assets/findGameLeftBlocks.svg"
Expand All @@ -103,7 +101,11 @@ const LadingPageTitle = ({ onClick }: LadingPageTitleProps) => {
/>
</div>
{showMessage && (
<div className={`absolute left-1/2 bottom-[170px] z-50 transform -translate-x-1/2 text-white bg-[#1C1A1B] border-blue-700 border-4 px-6 py-3 rounded-2xl transition-opacity duration-1000 ${animate ? 'opacity-100' : 'opacity-0'}`}>
<div
className={`absolute left-1/2 bottom-[170px] z-50 transform -translate-x-1/2 text-white bg-[#1C1A1B] border-blue-700 border-4 px-6 py-3 rounded-2xl transition-opacity duration-1000 ${
animate ? "opacity-100" : "opacity-0"
}`}
>
<div className="flex justify-center items-center text-[24px]">
URL이 복사되었습니다!
</div>
Expand Down
6 changes: 3 additions & 3 deletions Caecae/src/features/FindingGameLanding/OpenEvent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -176,9 +176,9 @@ const OpenEvent = forwardRef<HTMLDivElement, OpenEventProps>((props, ref) => {
return (
<div
ref={ref}
className="flex flex-col justify-center items-center w-full bg-[black] relative h-screen"
className="flex flex-col justify-center items-center w-full bg-[black] relative h-screen min-h-[950px]"
>
<div className="z-10 flex flex-col justify-center items-center ">
<div className="z-10 flex flex-col justify-center items-center">
<div className="text-[white] text-[18px] font-bold rounded-[80px] border-2 border-solid border-[rgba(0,0,255,0.60)] bg-[rgba(0,0,255,0.5)] px-[12px] py-[6px] inline">
{data?.badgeTitle}
</div>
Expand All @@ -190,7 +190,7 @@ const OpenEvent = forwardRef<HTMLDivElement, OpenEventProps>((props, ref) => {
<img
src="/assets/openBackGround.svg"
alt="smileBage3D"
className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[800px]"
className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 h-[80%]"
/>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion Caecae/src/features/FindingGameLanding/SelectionMethod.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import SmileBadge from "../../components/common/SmileBadge";

const SelectionMethod = () => {
return (
<div className="h-[115vh] bg-[black]">
<div className="h-screen bg-[black] min-h-[950px]">
<div className="absolute z-10 flex flex-col items-center w-full h-screen">
<p className="text-[white] font-[900] text-[40px] mt-[60px]">
참여 혜택 및 선정 방식
Expand Down
Loading