Merge pull request #19 from cookies-yam/feat/landingPage

Feat/landing page

src/components/common/ImageAndMessage.jsx

@@ -3,16 +3,20 @@ import styled from 'styled-components';
 
 const Wrapper = styled.div`
   opacity: ${(props) => props.opacity};
+  margin-top: ${(props) => props.marginTop};
 `;
 
 const SubTitle = styled.h1`
   color: ${(props) => props.color || '#00c92c'};
 `;
 
-function ImageAndMessage({ mainMessage, subMessage, color, opacity }) {
+function ImageAndMessage({ mainMessage, subMessage, color, opacity, src, marginTop }) {
   return (
-    <Wrapper className="mt-[180px] w-full transition-all duration-500 ease" opacity={opacity}>
-      <div className="w-[208px] h-[208px] mx-auto bg-gray">{/* img 추가할 때 props 받기 */}</div>
+    <Wrapper className="mt-[117px] w-full transition-all duration-500 ease" opacity={opacity} marginTop={marginTop}>
+      <div
+        className="w-[288px] h-[288px] mx-auto bg-gray"
+        style={{ backgroundImage: `url(${src})`, backgroundPosition: 'center', backgroundSize: 'cover' }}
+      />
       <div className="w-230px text-center mt-[18px]">
         <SubTitle className="text-[32px] font-bold text-center mb-[20px]" color={color}>
           {mainMessage}

src/components/common/LongButton.jsx

@@ -6,7 +6,7 @@ const ButtonWrapper = styled.div`
 `;
 
 const StyledButton = styled.button`
-  background: ${(props) => props.background || '#39B54A'};
+  background: ${(props) => props.background || '#00c92c'};
 `;
 
 function LongButton({ type, contents, onClick, background, bottom, customStyle }) {

src/pages/RegisterCompletePage.jsx

@@ -15,8 +15,9 @@ const RegisterCompletePage = () => {
     <>
       <TextBar title={'회원가입'} />
       <ImageAndMessage
+        marginTop={'26px'}
         color={'#39B54A'}
-        // image 추가할때 props 전달
+        src={process.env.PUBLIC_URL + '/images/walkthrough.gif'}
         mainMessage={'회원가입 완료'}
         subMessage={
           <>

src/pages/SplashScreenPage.jsx

@@ -2,6 +2,69 @@ import React from 'react';
 
 const SplashScreenPage = () => {
   return (
+    <div className="relative w-full h-full flex flex-wrap flex-col">
+      <h2 className="text-[19px] text-[#42210B] font-semibold leading-[29px] text-center mt-[228px]">
+        식재료 쉐어의 즐거움
+      </h2>
+      <svg
+        className="mx-auto mt-[10px]"
+        width="160"
+        height="78"
+        viewBox="0 0 160 78"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clipPath="url(#clip0_265_2633)">
+          <path
+            d="M46.9853 60.0092V77.602H30.1684V60.0092H6.9234C4.45048 60.0092 2.67899 59.3247 1.60701 57.954C0.535041 56.5852 0 55.0505 0 53.3498C0 52.5278 0.122889 51.7208 0.370559 50.9252C0.618228 50.1314 1.01525 49.4036 1.56542 48.7475C2.1137 48.0895 2.82835 47.5691 3.70937 47.1864C4.5885 46.8036 5.65858 46.6113 6.9234 46.6113H70.2322C71.4951 46.6113 72.5671 46.8036 73.4462 47.1864C74.3254 47.571 75.04 48.0895 75.5902 48.7475C76.1384 49.4055 76.5374 50.1314 76.785 50.9252C77.0327 51.7208 77.1556 52.5278 77.1556 53.3498C77.1556 55.0486 76.6205 56.5833 75.5486 57.954C74.4766 59.3247 72.7051 60.0092 70.2322 60.0092H46.9872H46.9853Z"
+            fill="#42210B"
+          />
+          <path
+            d="M15.053 41.9693V29.0183H45.9152V25.8112C45.9152 22.8511 46.6696 20.7149 48.1821 19.3989C49.6927 18.0829 51.7685 17.4268 54.4059 17.4268C57.0433 17.4268 59.0228 18.098 60.505 19.4404C61.9891 20.7828 62.7303 22.9077 62.7303 25.8112V29.0183H68.5004C69.7085 29.0183 70.754 29.2107 71.6331 29.5934C72.5123 29.978 73.2118 30.4701 73.7355 31.0735C74.2573 31.6768 74.643 32.3612 74.8887 33.1286C75.1364 33.8959 75.2593 34.6916 75.2593 35.5117C75.2593 36.3319 75.1364 37.1294 74.8887 37.8949C74.6411 38.6623 74.2422 39.3486 73.6939 39.95C73.1437 40.5534 72.4442 41.0323 71.5915 41.3886C70.7389 41.745 69.7085 41.9222 68.5004 41.9222"
+            fill="#42210B"
+          />
+          <path
+            d="M8.65519 41.9244C7.4452 41.9244 6.41482 41.7471 5.56405 41.3908C4.71139 41.0344 4.00997 40.5555 3.4617 39.9522C2.91153 39.3489 2.51451 38.6645 2.26684 37.8971C2.01917 37.1297 1.89628 36.336 1.89628 35.5139C1.89628 34.6919 2.01917 33.8981 2.26684 33.1307C2.51451 32.3634 2.91153 31.679 3.4617 31.0756C4.00997 30.4723 4.71139 29.9802 5.56405 29.5956C6.41482 29.2128 7.4452 29.0205 8.65519 29.0205H15.053V41.9715"
+            fill="#39B54A"
+          />
+          <path
+            d="M67.4284 1.89062C68.6365 1.89062 69.682 2.09614 70.5611 2.50716C71.4403 2.91818 72.1549 3.44044 72.7051 4.07018C73.2534 4.69991 73.6523 5.4126 73.9 6.20825C74.1476 7.0039 74.2705 7.78446 74.2705 8.55183C74.2705 9.37387 74.1476 10.1827 73.9 10.9765C73.6523 11.7721 73.2534 12.4848 72.7051 13.1146C72.1549 13.7443 71.4403 14.2647 70.5611 14.6757C69.682 15.0867 68.6365 15.2922 67.4284 15.2922H9.64398C8.43399 15.2922 7.40361 15.0867 6.55284 14.6757C5.70017 14.2647 4.99876 13.7443 4.45048 13.1146C3.90032 12.4848 3.50329 11.7721 3.25562 10.9765C3.00795 10.1827 2.88506 9.37387 2.88506 8.55183C2.88506 7.78446 3.00795 7.0039 3.25562 6.20825C3.50329 5.41448 3.88708 4.70179 4.40889 4.07018C4.9307 3.44044 5.61699 2.91818 6.46965 2.50716C7.32042 2.09614 8.37916 1.89062 9.64398 1.89062H67.4284Z"
+            fill="#39B54A"
+          />
+          <path
+            d="M84.822 8.82349V8.60478C84.822 5.16954 87.6144 2.38477 91.0591 2.38477H125.956C126.999 2.38477 127.894 2.57708 128.635 2.95982C129.376 3.34445 129.981 3.85163 130.448 4.48136C130.915 5.11109 131.244 5.81058 131.437 6.57795C131.63 7.34532 131.726 8.08629 131.726 8.79709C131.726 9.5079 131.614 10.2357 131.397 10.9748C131.176 11.7157 130.847 12.3869 130.408 12.9884C129.968 13.5917 129.378 14.0857 128.637 14.4684C127.896 14.8531 127.001 15.0435 125.958 15.0435H91.061C87.6163 15.0435 84.8239 12.2587 84.8239 8.82349H84.822Z"
+            fill="#39B54A"
+          />
+          <path
+            d="M90.8889 29.6484L129.894 29.5938C130.941 29.5938 131.851 29.7861 132.622 30.1688C133.394 30.5534 134 31.0455 134.441 31.6489C134.881 32.2522 135.212 32.9102 135.433 33.621C135.653 34.3337 135.764 35.0464 135.764 35.7591C135.764 36.5265 135.653 37.2806 135.433 38.0197C135.212 38.7588 134.881 39.4319 134.441 40.0333C133.999 40.6367 133.394 41.1307 132.622 41.5134C131.849 41.898 130.94 42.0885 129.894 42.0885H90.9173"
+            fill="#42210B"
+          />
+          <path
+            d="M130.985 53.1053V53.6389C130.985 53.8312 130.957 54.0085 130.902 54.1725C134.087 54.0631 137.277 54.4063 140.464 55.2C143.65 55.9957 146.592 57.3098 149.284 59.1462C151.976 60.9826 154.285 63.3809 156.207 66.3391C158.13 69.2992 159.393 72.9155 160 77.1897H143.102C142.497 75.3251 141.631 73.6546 140.506 72.1745C139.379 70.6945 138.018 69.4765 136.426 68.5168C134.832 67.559 133.046 66.8727 131.068 66.4617C129.091 66.0507 127.001 65.9828 124.803 66.2562C122.878 68.2283 120.626 69.9837 118.044 71.5165C115.459 73.0493 112.769 74.3239 109.965 75.3401C107.163 76.3545 104.346 77.0936 101.516 77.5593C98.6858 78.025 96.0068 78.1211 93.4791 77.8478C92.4903 77.7365 91.5696 77.4782 90.7169 77.0672C89.8642 76.6562 89.1231 76.1226 88.4917 75.4646C87.8602 74.8066 87.3649 74.0524 87.0075 73.204C86.6502 72.3536 86.499 71.4354 86.5538 70.4493C86.6634 68.5865 87.3081 67.0782 88.4917 65.9281C89.6733 64.778 91.0591 64.1747 92.6548 64.12C93.1501 64.12 93.7116 64.1068 94.345 64.0785C94.9764 64.0521 95.5398 63.9823 96.0352 63.873C97.9579 63.6543 99.8542 63.2433 101.722 62.6399C103.59 62.0366 105.32 61.2711 106.916 60.3378C108.509 59.4064 109.937 58.2978 111.202 57.0082C112.465 55.7204 113.455 54.2272 114.17 52.5284C115.268 49.8982 116.56 48.0901 118.044 47.1021C119.528 46.1161 121.367 45.705 123.566 45.8691C125.763 45.9803 127.565 46.5968 128.966 47.7187C130.367 48.8424 131.04 50.6373 130.985 53.1034V53.1053Z"
+            fill="#42210B"
+          />
+          <path
+            d="M140.71 8.13742C140.71 5.45258 141.548 3.42386 143.225 2.05316C144.9 0.684341 146.838 -0.00195312 149.036 -0.00195312C150.08 -0.00195312 151.11 0.177162 152.128 0.531622C153.145 0.887967 154.037 1.40834 154.807 2.09275C155.576 2.77905 156.194 3.62749 156.661 4.64185C157.128 5.6562 157.363 6.81951 157.363 8.13554V49.8958H140.712V8.13742H140.71Z"
+            fill="#42210B"
+          />
+          <path
+            d="M15.053 1.89258V15.2904C18.855 15.2904 21.9367 18.3636 21.9367 22.1552C21.9367 25.9468 18.855 29.0201 15.053 29.0201V41.971C26.1508 41.971 35.1463 33.0002 35.1463 21.9328C35.1463 10.8653 26.1508 1.89258 15.053 1.89258Z"
+            fill="#39B54A"
+          />
+          <path
+            d="M90.8889 2.38281V15.0623C94.6966 15.3187 97.7065 18.4787 97.7065 22.34C97.7065 26.2014 94.6966 29.3613 90.8889 29.6178V42.088C101.883 42.088 110.797 33.2001 110.797 22.2344C110.797 11.2688 101.885 2.38281 90.8889 2.38281Z"
+            fill="#39B54A"
+          />
+          <path
+            d="M91.0591 42.0885C87.6144 42.0885 84.822 39.3037 84.822 35.8685C84.822 32.4445 87.5974 29.6635 91.0326 29.6484"
+            fill="#39B54A"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_265_2633">
+            <rect width="160" height="78" fill="white" />
+          </clipPath>
+        </defs>
     <div id="logo" className="w-full h-full flex justify-center items-center">
       <svg width="157" height="209" viewBox="0 0 157 209" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
@@ -37,6 +100,9 @@ const SplashScreenPage = () => {
           fill="#FFD600"
         />
       </svg>
+      <div className="fixed bottom-0">
+        <img src={process.env.PUBLIC_URL + '/images/splash.png'} alt="Splash" />
+      </div>
     </div>
   );
 };

src/pages/WalkthroughPage.jsx

@@ -1,20 +1,28 @@
 import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import Carousel from '../components/common/Carousel';
 import ImageAndMessage from '../components/common/ImageAndMessage';
 import LongButton from '../components/common/LongButton';
 
 const WalkthroughPage = () => {
-  const [carouselColor, setCarouselColor] = useState(['#39B54A', '#d9d9d9']);
+  const [carouselColor, setCarouselColor] = useState(['#00c92c', '#d9d9d9']);
   const [walkthroughPosition, setWalkthroughPosition] = useState(0);
   const [firstImageVisible, setFirstImageVisible] = useState(true);
+  const [buttonClicked, setButtonClicked] = useState(false);
+  const navigate = useNavigate();
 
-  const PageChangeHandler = () => {
-    setCarouselColor(['#d9d9d9', '#39B54A']);
-    setFirstImageVisible(false);
-    if (firstImageVisible) {
-      setTimeout(() => {
-        setWalkthroughPosition(-50);
-      }, 100);
+  const startHandler = () => {
+    if (buttonClicked) {
+      navigate('/signin');
+    } else {
+      setCarouselColor(['#d9d9d9', '#00c92c']);
+      setFirstImageVisible(false);
+      if (firstImageVisible) {
+        setTimeout(() => {
+          setWalkthroughPosition(-50);
+        }, 100);
+      }
+      setButtonClicked(true);
     }
   };
 
@@ -28,21 +36,21 @@ const WalkthroughPage = () => {
       >
         <ImageAndMessage
           opacity={firstImageVisible ? 1 : 0}
-          // image 추가할때 props 전달
+          src={process.env.PUBLIC_URL + '/images/walkthrough.gif'}
           mainMessage={'우리동네'}
           subMessage={
             <>
-              가까운 동네 친구들과 물건을
-              <br /> 나눠가져요 가까운 동네 친구들과
-              <br /> 물건을 나눠가져요
+              가까운 동네 친구들과
+              <br /> 혼자 사기 힘들었던 상품을
+              <br /> 이제 부담없이 나눠가져요
             </>
           }
         />
         <ImageAndMessage
           opacity={firstImageVisible ? 0 : 1}
           imgLeft={'480px'}
           msgLeft={'470px'}
-          // image 추가할때 props 전달
+          src={process.env.PUBLIC_URL + '/images/walkthrough2.gif'}
           mainMessage={'함께사요'}
           color={'#EE0707'}
           subMessage={
@@ -60,7 +68,7 @@ const WalkthroughPage = () => {
         <Carousel carouselColor={carouselColor[0]} />
         <Carousel carouselColor={carouselColor[1]} />
       </div>
-      <LongButton type={'button'} contents={'시작하기'} onClick={PageChangeHandler} />
+      <LongButton type={'button'} contents={'시작하기'} onClick={startHandler} />
     </div>
   );
 };