Merge pull request #53 from softeerbootcamp4th/CC-170

feat: 숨은 캐스퍼 찾기 화면별 대응
softeerbootcamp4th · Aug 20, 2024 · bfafb7a · bfafb7a
2 parents 5462746 + 48035f4
commit bfafb7a
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 29 deletions.
diff --git a/Caecae/src/components/common/InfoSection/InfoSection.tsx b/Caecae/src/components/common/InfoSection/InfoSection.tsx
@@ -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}

diff --git a/Caecae/src/components/common/Navigation/Navigation.tsx b/Caecae/src/components/common/Navigation/Navigation.tsx
@@ -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="/">

diff --git a/Caecae/src/features/FindingGameLanding/EventPeriod.tsx b/Caecae/src/features/FindingGameLanding/EventPeriod.tsx
@@ -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]">
           이벤트 기간

diff --git a/Caecae/src/features/FindingGameLanding/HowToEvent.tsx b/Caecae/src/features/FindingGameLanding/HowToEvent.tsx
@@ -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%]">

diff --git a/Caecae/src/features/FindingGameLanding/LadingPageTitle.tsx b/Caecae/src/features/FindingGameLanding/LadingPageTitle.tsx
@@ -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);
 
@@ -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>
@@ -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>
@@ -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"
@@ -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>

diff --git a/Caecae/src/features/FindingGameLanding/OpenEvent.tsx b/Caecae/src/features/FindingGameLanding/OpenEvent.tsx
@@ -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>
@@ -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>
   );

diff --git a/Caecae/src/features/FindingGameLanding/SelectionMethod.tsx b/Caecae/src/features/FindingGameLanding/SelectionMethod.tsx
@@ -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]">
           참여 혜택 및 선정 방식