From 46855bb2984f8689d1a72f57b8cdfc7b09fb2f88 Mon Sep 17 00:00:00 2001
From: Dongpil Jo <ehdvlf001@knu.ac.kr>
Date: Wed, 3 Jul 2024 23:56:29 +0900
Subject: [PATCH] =?UTF-8?q?design:=20=EB=B0=98=EC=9D=91=ED=98=95=20?=
 =?UTF-8?q?=EC=9D=BC=EB=B6=80=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../landing/components/Information.style.ts   |  6 +++++
 .../landing/components/hackathon/Detail.tsx   |  6 ++++-
 .../landing/components/hackathon/MainInfo.tsx | 22 +++++++----------
 .../landing/components/hackathon/More.tsx     | 24 +++++++++++++++----
 src/pages/login/components/Redirect.tsx       |  6 +++++
 5 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/src/pages/landing/components/Information.style.ts b/src/pages/landing/components/Information.style.ts
index 6c5fe23f..95229bba 100644
--- a/src/pages/landing/components/Information.style.ts
+++ b/src/pages/landing/components/Information.style.ts
@@ -194,6 +194,12 @@ export const SwiperWrapper = styled.div`
     overflow-x: hidden;
     padding-bottom: 165px;
 
+    @media (max-width: 767px) {
+        padding-bottom: 120px;
+    }
+    @media (max-width: 360px) {
+        padding-bottom: 60px;
+    }
     .swiper-container {
         width: 984px !important;
         @media (max-width: 1280px) {
diff --git a/src/pages/landing/components/hackathon/Detail.tsx b/src/pages/landing/components/hackathon/Detail.tsx
index 06c71a3e..f6e4f7d7 100644
--- a/src/pages/landing/components/hackathon/Detail.tsx
+++ b/src/pages/landing/components/hackathon/Detail.tsx
@@ -69,10 +69,12 @@ const MoreTitle = styled.div`
 
     @media (max-width: 767px) {
         font-size: 20px;
+        text-align: center;
     }
 
     @media (max-width: 360px) {
         font-size: 20px;
+        text-align: center;
     }
 `;
 
@@ -101,12 +103,14 @@ const MoreBtn = styled.div`
 
     @media (max-width: 767px) {
         /* width: clamp(360px, 3vw, 523px); */
-        width: 300px;
+        width: 320px;
         height: 48px;
+        font-size: 16px;
     }
     @media (max-width: 360px) {
         width: clamp(250px, 2vw, 320px);
         height: 48px;
+        font-size: 16px;
     }
     &:hover {
         color: #ff7710;
diff --git a/src/pages/landing/components/hackathon/MainInfo.tsx b/src/pages/landing/components/hackathon/MainInfo.tsx
index e28bc2a0..79ef611a 100644
--- a/src/pages/landing/components/hackathon/MainInfo.tsx
+++ b/src/pages/landing/components/hackathon/MainInfo.tsx
@@ -1,5 +1,3 @@
-import { useNavigate } from 'react-router-dom';
-import { useEffect } from 'react';
 import { styled } from 'styled-components';
 import HackathonPart from './HackathonPart';
 import title from '../../../../img/landing/title.png';
@@ -13,18 +11,6 @@ import check_g from '../../../../img/landing/check_g.png';
 import check_r from '../../../../img/landing/check_r.png';
 
 const MainInfo = () => {
-    const navigate = useNavigate();
-
-    useEffect(() => {
-        const accessToken = localStorage.getItem('access_token');
-        const nav = sessionStorage.getItem('nav');
-
-        if (nav === 'hackathons' && accessToken) {
-            navigate('/hackathons');
-            sessionStorage.removeItem('nav');
-        }
-    }, [navigate]);
-
     return (
         <MainWrapper>
             <FirstWrapper>
@@ -127,6 +113,14 @@ const Container = styled.div`
     align-items: center;
     width: 100%;
     max-width: 1200px;
+
+    @media (max-width: 767px) {
+        width: 80%;
+    }
+
+    @media (max-width: 360px) {
+        width: 90%;
+    }
 `;
 
 const TitleImg = styled.img`
diff --git a/src/pages/landing/components/hackathon/More.tsx b/src/pages/landing/components/hackathon/More.tsx
index 3bdf4849..ea280b9f 100644
--- a/src/pages/landing/components/hackathon/More.tsx
+++ b/src/pages/landing/components/hackathon/More.tsx
@@ -67,15 +67,29 @@ const MoreTitle = styled.div`
     line-height: 150%; /* 48px */
 
     @media (max-width: 767px) {
-        font-size: 30px;
         width: 80%;
+        margin-bottom: 16px;
         text-align: center;
+
+        /* Title/40_Bold */
+        font-family: Pretendard;
+        font-size: clamp(16px, 4vw, 40px);
+        font-style: normal;
+        font-weight: 700;
+        line-height: 150%;
     }
 
     @media (max-width: 360px) {
-        font-size: 16px;
-        text-align: center;
         width: 90%;
+        margin-bottom: 8px;
+        text-align: center;
+
+        /* Title/16_Bold */
+        font-family: Pretendard;
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 700;
+        line-height: 150%;
     }
 `;
 
@@ -102,12 +116,14 @@ const MoreBtn = styled.div`
     line-height: 150%; /* 30px */
 
     @media (max-width: 767px) {
-        width: 300px;
+        width: clamp(320px, 2vw, 530px);
         height: 48px;
+        font-size: 16px;
     }
     @media (max-width: 360px) {
         width: clamp(250px, 2vw, 320px);
         height: 48px;
+        font-size: 16px;
     }
     &:hover {
         background-color: #d1d4d8;
diff --git a/src/pages/login/components/Redirect.tsx b/src/pages/login/components/Redirect.tsx
index 611a7ac1..64c34171 100644
--- a/src/pages/login/components/Redirect.tsx
+++ b/src/pages/login/components/Redirect.tsx
@@ -45,10 +45,16 @@ export const Redirect = () => {
     });
 
     useEffect(() => {
+        const accessToken = localStorage.getItem('access_token');
+        const nav = sessionStorage.getItem('nav');
+
         if (error) {
             navigate('/login');
         } else if (data === null) {
             navigate(`/signup/${provider}`);
+        } else if (nav === 'hackathons' && accessToken) {
+            navigate('/hackathons');
+            sessionStorage.removeItem('nav');
         } else if (data) {
             navigate('/');
         }