Merge pull request #89 from minjeoong/feat/NewSignup_init

Feat/new 급하게 수정중..pr
9oormthon-univ · Aug 19, 2024 · a94b535 · a94b535
2 parents 398c3c4 + 7e06e99
commit a94b535
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 22 deletions.
diff --git a/public/assets/image/kakaocloud.png b/public/assets/image/kakaocloud.png
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -11,9 +11,9 @@ import { AccessTokenRouter, LocalStorage } from '@/hooks/useUtil';
 import jwt from 'jsonwebtoken';
 
 export default function Home(): React.JSX.Element {
-  const handleKakaoLogin = () => {
-    window.open(PATH.KAKAOLOGIN);
-  };
+  // const handleKakaoLogin = () => {
+  //   window.open(PATH.KAKAOLOGIN);
+  // };
   const [showContent, setShowContent] = useState(false);
   const [showTitle, setShowTitle] = useState(false);
   const router = useRouter();
@@ -35,12 +35,30 @@ export default function Home(): React.JSX.Element {
     return () => clearTimeout(timer);
   }, []);
 
+  // 5초 후에 홈으로 라우팅
+  useEffect(() => {
+    LocalStorage.setItem(
+      'accessToken',
+      'eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI4MDA4ODBmNS03OGEzLTQ5YTMtYmI3OC0xNWZjZjM5YTAzNjYiLCJpYXQiOjE3MjQwNjI2MjIsInJvbGUiOiJST0xFX1VTRVIiLCJleHAiOjE3MzMwNjI2MjJ9.I2SQe__we1LJI4lcAQCR9hsRVadczitrEDRTpDMMdmQ',
+    );
+
+    const redirectTimer = setTimeout(() => {
+      router.push(PATH.HOME);
+    }, 5000);
+
+    return () => clearTimeout(redirectTimer);
+  }, [router]);
+
   return (
     <HomeWrap className={'splash'}>
       <div className={`main ${showContent ? 'show-content' : ''}`}>
         <div className={`title ${showTitle ? 'show-title' : ''}`}>
           <Image src={Images.splash} alt={'백곰'} />
           <div className="sub_title">백신아, 곰아워!</div>
+          <div className={'powered'}>
+            Vacgom is powered by{' '}
+            <Image src={Images.kakaoCloud} className="kakaoCloud" />
+          </div>
         </div>
       </div>
       <div className={`splash_image ${showContent ? 'show-content' : ''} `}>
@@ -50,19 +68,19 @@ export default function Home(): React.JSX.Element {
           alt={'백곰 스플래시 이미지'}
         />
       </div>
-      <div className={`bottom ${showContent ? 'show-content' : ''} `}>
-        <Button
-          label={'카카오로 계속하기'}
-          variant={'kakao'}
-          size={'kakao'}
-          prevIcon={Icons.kakao}
-          iconSize={'20'}
-          onClick={handleKakaoLogin}
-        />
-        <a className="privacy" href={PATH.NOTION_TERMS}>
-          개인정보처리방침
-        </a>
-      </div>
+      {/*<div className={`bottom ${showContent ? 'show-content' : ''} `}>*/}
+      {/*  <Button*/}
+      {/*    label={'카카오로 계속하기'}*/}
+      {/*    variant={'kakao'}*/}
+      {/*    size={'kakao'}*/}
+      {/*    prevIcon={Icons.kakao}*/}
+      {/*    iconSize={'20'}*/}
+      {/*    onClick={handleKakaoLogin}*/}
+      {/*  />*/}
+      {/*  <a className="privacy" href={PATH.NOTION_TERMS}>*/}
+      {/*    이용약관*/}
+      {/*  </a>*/}
+      {/*</div>*/}
     </HomeWrap>
   );
 }
diff --git a/src/app/style.ts b/src/app/style.ts
@@ -29,6 +29,16 @@ export const HomeWrap = styled.main`
       &.show-title {
         opacity: 1;
       }
+      & > .powered {
+        & > .kakaoCloud {
+          width: fit-content;
+          height: 13px;
+        }
+
+        ${fontGenerator('15px', '200', '26.92px')};
+        color: ${Colors.White};
+        margin-top: 10px;
+      }
       & > .sub_title {
         margin-top: 10px;
 
@@ -46,24 +56,29 @@ export const HomeWrap = styled.main`
   }
   & > .splash_image > img {
     visibility: hidden;
-    top: 300px; /* 원하는 위치로 지정합니다 */
+    top: 300px;
   }
 
   .show-content {
-    display: block; /* show-content 클래스가 적용되면 나머지 요소들이 보이도록 설정합니다 */
+    display: block;
   }
   .show-content > img {
     visibility: visible;
-    top: 21px; /* show-content 클래스가 적용되면 원하는 위치로 이동됩니다 */
+    top: 21px;
     display: block;
   }
 
   & > .splash_image {
+    position: absolute;
     display: flex;
+    bottom: 20px;
+    width: 100%;
     & > .vacgom_icon {
       width: 100%;
       position: relative;
-      //top: 300px; /* 원하는 위치로 지정합니다 */
+      //top: 300px;
+      //height: 100%;
+
       transition: top 1s cubic-bezier(0.18, 0.69, 0.32, 1.28);
       z-index: 0;
     }
@@ -80,7 +95,7 @@ export const HomeWrap = styled.main`
       color: ${Colors.Gray50};
       cursor: pointer;
     }
-    padding: 0 20px;
+    padding: 50px 20px;
   }
 
   @media screen and (max-height: 718px) {

diff --git a/src/routes/path.ts b/src/routes/path.ts
@@ -3,7 +3,7 @@ export const PATH = {
   HOME: '/home',
   //notion
   NOTION_TERMS:
-    'https://www.notion.so/been2spring/f17c3687e1f24279a76e9797a51677f6',
+    'https://been2spring.notion.site/c3d063e9d95644f1be27b5c92e393aaa?pvs=4',
   //social login
   KAKAOLOGIN: 'https://api-dev.vacgom.co.kr/api/v1/oauth/kakao',
   RECOMVAC: '/recomvac',

diff --git a/src/styles/images.ts b/src/styles/images.ts
@@ -86,6 +86,7 @@ import ico_vac22 from '../../public/assets/ico/ico-vac22.svg';
 
 // splash
 import splash from '../../public/assets/image/img-splash.svg';
+import kakaoCloud from '../../public/assets/image/kakaocloud.png';
 
 // 감염병 세부 페이지에 들어가는 요소들
 import ico_check_filled from '../../public/assets/ico/ico-check-filled.svg';
@@ -304,5 +305,6 @@ export const Images: ImagesType = {
   vaccine_status_disable: vaccine_status_disable,
   splash: splash,
   syringe:syringe,
+  kakaoCloud:kakaoCloud,
 
 };