From f5af6823dc546eb1adda2113f1cde8d767ba3c7a Mon Sep 17 00:00:00 2001
From: gyeongza <gyeongza@naver.com>
Date: Wed, 20 Sep 2023 11:30:19 +0900
Subject: [PATCH 1/8] =?UTF-8?q?design:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B0=98=EC=9D=91=ED=98=95=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/LoginPage.tsx | 50 +++++++++++++++++++++++++-------
 1 file changed, 39 insertions(+), 11 deletions(-)

diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index 2ce89ea35..7dc9d7269 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -35,7 +35,7 @@ const S = {
     align-items: center;
     justify-content: center;
     flex-direction: column;
-    gap: 30px;
+    gap: 45px;
 
     height: calc(100vh - 80px);
     min-height: 570px;
@@ -44,10 +44,13 @@ const S = {
   `,
 
   Logo: styled.img`
-    width: 300px;
-    height: 80px;
+    height: 45px;
 
     cursor: pointer;
+
+    @media (max-width: 768px) {
+      height: 35px;
+    }
   `,
 
   LoginBoxContainer: styled.div`
@@ -57,27 +60,41 @@ const S = {
     gap: 37px;
 
     width: 450px;
-    min-height: 400px;
     padding: 35px;
     border-radius: 10px;
-    border: 1px solid var(--gray-700);
+    box-shadow: 1px 1px 3px #333333;
+
+    @media (max-width: 768px) {
+      width: 340px;
+
+      padding: 35px 20px;
+    }
   `,
 
   LoginBoxText: styled.div`
     font-weight: 700;
     font-size: 18px;
+
+    @media (max-width: 768px) {
+      font-size: 15px;
+    }
   `,
 
   LoginBoxGithubIcon: styled.img`
     width: 180px;
     height: 180px;
+
+    @media (max-width: 768px) {
+      width: 120px;
+      height: 120px;
+    }
   `,
 
   LoginButton: styled.a`
     display: flex;
-    justify-content: space-between;
+    justify-content: center;
     align-items: center;
-    gap: 6px;
+    gap: 12px;
 
     width: 370px;
     height: 60px;
@@ -91,15 +108,26 @@ const S = {
     font-size: 14px;
 
     cursor: pointer;
+
+    @media (max-width: 768px) {
+      width: 260px;
+      height: 55px;
+
+      padding: 0 20px;
+    }
   `,
 
   LoginButtonIcon: styled.img`
-    width: 35px;
-    height: 35px;
+    width: 30px;
+    height: 30px;
+
+    @media (max-width: 768px) {
+      width: 20px;
+      height: 20px;
+    }
   `,
 
   LoginButtonText: styled.div`
-    font-size: 19px;
-    margin-right: 40px;
+    font-size: 18px;
   `,
 };

From 9cd6818d26a24432bd036634302db0498e80bafa Mon Sep 17 00:00:00 2001
From: gyeongza <gyeongza@naver.com>
Date: Wed, 20 Sep 2023 11:30:53 +0900
Subject: [PATCH 2/8] =?UTF-8?q?design:=20=EB=A9=94=EC=9D=B8=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20=EB=B0=98?=
 =?UTF-8?q?=EC=9D=91=ED=98=95=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/RunnerPost/RunnerPostItem/RunnerPostItem.tsx | 2 +-
 frontend/src/pages/MainPage.tsx                                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/RunnerPost/RunnerPostItem/RunnerPostItem.tsx b/frontend/src/components/RunnerPost/RunnerPostItem/RunnerPostItem.tsx
index fbdc022e0..74d698d63 100644
--- a/frontend/src/components/RunnerPost/RunnerPostItem/RunnerPostItem.tsx
+++ b/frontend/src/components/RunnerPost/RunnerPostItem/RunnerPostItem.tsx
@@ -74,7 +74,7 @@ const S = {
     display: flex;
     justify-content: space-between;
 
-    min-width: 360px;
+    min-width: 340px;
     width: 100%;
     height: max-content;
     padding: 35px 40px;
diff --git a/frontend/src/pages/MainPage.tsx b/frontend/src/pages/MainPage.tsx
index 6c8d47e95..aca475a3f 100644
--- a/frontend/src/pages/MainPage.tsx
+++ b/frontend/src/pages/MainPage.tsx
@@ -231,7 +231,7 @@ const S = {
     margin-bottom: 20px;
 
     @media (max-width: 768px) {
-      min-width: 360px;
+      min-width: 340px;
     }
   `,
 

From e1602e5a5079a549fc4f7fc88f9682bc4e315509 Mon Sep 17 00:00:00 2001
From: gyeongza <gyeongza@naver.com>
Date: Wed, 20 Sep 2023 11:31:09 +0900
Subject: [PATCH 3/8] =?UTF-8?q?design:=20=EC=83=81=EC=84=B8=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=B2=84=ED=8A=BC=20=EB=B0=98=EC=9D=91?=
 =?UTF-8?q?=ED=98=95=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/RunnerPostDetailPage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/RunnerPostDetailPage.tsx b/frontend/src/pages/RunnerPostDetailPage.tsx
index d42227725..15bce1e99 100644
--- a/frontend/src/pages/RunnerPostDetailPage.tsx
+++ b/frontend/src/pages/RunnerPostDetailPage.tsx
@@ -196,7 +196,7 @@ const RunnerPostPage = () => {
                 <S.RightSideContainer>
                   <Button
                     colorTheme="BLACK"
-                    width={isMobile ? '125px' : '150px'}
+                    width={isMobile ? '130px' : '150px'}
                     fontSize={isMobile ? '14px' : ''}
                     fontWeight={700}
                   >
@@ -208,7 +208,7 @@ const RunnerPostPage = () => {
                   {runnerPost.isOwner || runnerPost.isApplied || runnerPost.reviewStatus !== 'NOT_STARTED' ? null : (
                     <Button
                       colorTheme="WHITE"
-                      width={isMobile ? '125px' : '150px'}
+                      width={isMobile ? '130px' : '150px'}
                       fontSize={isMobile ? '14px' : ''}
                       fontWeight={700}
                       onClick={openMessageModal}

From d95b8ffee28e7aad96a3f364eed3380bc6789ed0 Mon Sep 17 00:00:00 2001
From: gyeongza <gyeongza@naver.com>
Date: Wed, 20 Sep 2023 11:32:35 +0900
Subject: [PATCH 4/8] =?UTF-8?q?design:=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=82=AC=EC=A7=84=20=ED=81=AC?=
 =?UTF-8?q?=EA=B8=B0=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/NoticePage.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/NoticePage.tsx b/frontend/src/pages/NoticePage.tsx
index 7d8302601..89f6539c2 100644
--- a/frontend/src/pages/NoticePage.tsx
+++ b/frontend/src/pages/NoticePage.tsx
@@ -315,8 +315,8 @@ const S = {
     margin: 0 auto;
 
     @media (max-width: 768px) {
-      width: 350px;
-      height: 123px;
+      width: 320px;
+      height: 112px;
     }
   `,
 

From b1978f9f6c3affe00a9ce68e0ddabab9a15a8cb0 Mon Sep 17 00:00:00 2001
From: gyeongza <gyeongza@naver.com>
Date: Wed, 20 Sep 2023 11:34:13 +0900
Subject: [PATCH 5/8] =?UTF-8?q?refactor:=20=ED=99=95=EC=9D=B8=20=EB=AA=A8?=
 =?UTF-8?q?=EB=8B=AC=20children=20=ED=83=80=EC=9E=85=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/ConfirmModal/ConfirmModal.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/frontend/src/components/ConfirmModal/ConfirmModal.tsx b/frontend/src/components/ConfirmModal/ConfirmModal.tsx
index 90d36b73c..ec2e28246 100644
--- a/frontend/src/components/ConfirmModal/ConfirmModal.tsx
+++ b/frontend/src/components/ConfirmModal/ConfirmModal.tsx
@@ -5,7 +5,7 @@ import { styled } from 'styled-components';
 import useViewport from '@/hooks/useViewport';
 
 interface Props {
-  contents: string;
+  contents: React.ReactNode;
   closeModal: () => void;
   handleClickConfirmButton: () => void;
   confirmText?: string;
@@ -72,8 +72,6 @@ const S = {
   ConfirmMessage: styled.p`
     margin-bottom: 40px;
 
-    font-size: 18px;
-
     white-space: pre-wrap;
   `,
 

From 9810e4d54f3a9729e34025a23d90a279f0dbb91b Mon Sep 17 00:00:00 2001
From: gyeongza <gyeongza@naver.com>
Date: Wed, 20 Sep 2023 11:41:27 +0900
Subject: [PATCH 6/8] =?UTF-8?q?design:=20=EB=B8=8C=EB=9E=9C=EC=B9=98=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=20=EB=AA=A8=EB=8B=AC=20=EA=B8=80=EC=9E=90=20?=
 =?UTF-8?q?=ED=95=98=EC=9D=B4=EB=9D=BC=EC=9D=B4=ED=8A=B8=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ConfirmModal/ConfirmModal.tsx   |  1 +
 frontend/src/pages/NoticePage.tsx              | 18 +++++++++++++++---
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ConfirmModal/ConfirmModal.tsx b/frontend/src/components/ConfirmModal/ConfirmModal.tsx
index ec2e28246..65da9f97e 100644
--- a/frontend/src/components/ConfirmModal/ConfirmModal.tsx
+++ b/frontend/src/components/ConfirmModal/ConfirmModal.tsx
@@ -73,6 +73,7 @@ const S = {
     margin-bottom: 40px;
 
     white-space: pre-wrap;
+    line-height: 1.5;
   `,
 
   ButtonContainer: styled.div`
diff --git a/frontend/src/pages/NoticePage.tsx b/frontend/src/pages/NoticePage.tsx
index 89f6539c2..a5813002d 100644
--- a/frontend/src/pages/NoticePage.tsx
+++ b/frontend/src/pages/NoticePage.tsx
@@ -176,9 +176,17 @@ const NoticePage = () => {
 
       {isConfirmModalOpen && (
         <ConfirmModal
-          contents={`${selectedLanguage} 미션을 선택하셨습니다.
-
-확인을 누르시면 ${profileName}님의 깃허브 아이디로 브랜치가 생성됩니다.`}
+          contents={
+            <>
+              <p>
+                <S.highlightSpan>{selectedLanguage} 미션을 선택</S.highlightSpan>하셨습니다.
+              </p>
+              <p>
+                확인을 누르시면 <S.highlightSpan>{profileName}님의 깃허브 아이디로 브랜치가 생성</S.highlightSpan>
+                됩니다.
+              </p>
+            </>
+          }
           closeModal={closeConfirmModal}
           handleClickConfirmButton={handleClickStartButton}
         />
@@ -395,6 +403,10 @@ const S = {
       font-size: 12px;
     }
   `,
+
+  highlightSpan: styled.span`
+    font-weight: 700;
+  `,
 };
 
 export default NoticePage;

From ee777189173519c6578365960604b1d91602e08d Mon Sep 17 00:00:00 2001
From: gyeongza <gyeongza@naver.com>
Date: Wed, 20 Sep 2023 11:49:11 +0900
Subject: [PATCH 7/8] =?UTF-8?q?design:=20=EB=AA=A9=EB=A1=9D=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/RunnerPostDetailPage.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/RunnerPostDetailPage.tsx b/frontend/src/pages/RunnerPostDetailPage.tsx
index 15bce1e99..ca8926db3 100644
--- a/frontend/src/pages/RunnerPostDetailPage.tsx
+++ b/frontend/src/pages/RunnerPostDetailPage.tsx
@@ -220,7 +220,13 @@ const RunnerPostPage = () => {
               </S.BottomContentContainer>
             </S.PostBodyContainer>
             <S.PostFooterContainer>
-              <Button colorTheme="GRAY" fontSize={isMobile ? '14px' : ''} fontWeight={700} onClick={goBack}>
+              <Button
+                width={isMobile ? '100%' : '180px'}
+                colorTheme="GRAY"
+                fontSize={isMobile ? '14px' : ''}
+                fontWeight={700}
+                onClick={goBack}
+              >
                 목록
               </Button>
             </S.PostFooterContainer>

From 15f97503a7426f9cbe4a3c9c90fbd08a1b67fc82 Mon Sep 17 00:00:00 2001
From: gyeongza <gyeongza@naver.com>
Date: Wed, 20 Sep 2023 12:14:16 +0900
Subject: [PATCH 8/8] =?UTF-8?q?design:=20=EB=A1=9C=EB=94=A9=20=EC=8A=A4?=
 =?UTF-8?q?=ED=94=BC=EB=84=88=20=EB=AC=B8=EC=9E=90=EB=A5=BC=20css=EB=A1=9C?=
 =?UTF-8?q?=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/common/Spinner/Spinner.tsx | 123 +++++++++++-------
 1 file changed, 76 insertions(+), 47 deletions(-)

diff --git a/frontend/src/components/common/Spinner/Spinner.tsx b/frontend/src/components/common/Spinner/Spinner.tsx
index a5facf6d4..0c4a6cc2a 100644
--- a/frontend/src/components/common/Spinner/Spinner.tsx
+++ b/frontend/src/components/common/Spinner/Spinner.tsx
@@ -1,59 +1,88 @@
 import React from 'react';
 import styled from 'styled-components';
-
 const Spinner = () => {
   return (
-    <S.SpinnerWrapper>
-      <div>
-        <span>/</span>
-      </div>
-    </S.SpinnerWrapper>
+    <SpinnerContainer>
+      <LessThan />
+      <Slash />
+      <GreaterThan />
+    </SpinnerContainer>
   );
 };
-
 export default Spinner;
-
-const S = {
-  SpinnerWrapper: styled.div`
-    div {
-      color: var(--baton-red);
-      font-family: Consolas, Menlo, Monaco, monospace;
-      font-weight: 900;
-      font-size: 120px;
-      opacity: 0.9;
-
-      @media (max-width: 768px) {
-        font-size: 78px;
-      }
+const SpinnerContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+const LessThan = styled.div`
+  position: relative;
+  width: 45px;
+  height: 35px;
+  &::before {
+    content: ' ';
+    position: absolute;
+    width: 27px;
+    height: 12px;
+    border-radius: 1.5px;
+    background-color: var(--baton-red);
+    transform: skew(0, -33deg);
+    @media (min-width: 768px) {
+      width: 42px;
+      height: 15px;
     }
-    div:before {
-      content: '<';
-      display: inline-block;
-      animation: pulse 0.6s alternate infinite ease-in-out;
+  }
+  &::after {
+    content: ' ';
+    position: absolute;
+    top: 21px;
+    width: 27px;
+    height: 12px;
+    border-radius: 1.5px;
+    background-color: var(--baton-red);
+    transform: skew(0, 33deg);
+    @media (min-width: 768px) {
+      top: 29px;
+      width: 42px;
+      height: 14px;
     }
-    div:after {
-      content: '>';
-      display: inline-block;
-      animation: pulse 0.6s 0.3s alternate infinite ease-in-out;
+  }
+  animation: pulseLess 0.6s alternate infinite ease-in-out;
+  @keyframes pulseLess {
+    to {
+      opacity: 0.7;
+      transform: scale(1.2);
     }
-
-    span {
-      font-size: 112px;
-      font-weight: 900;
-
-      margin: 0 8px;
-      animation: pulse 0.6s 0.3s alternate infinite ease-in-out;
-
-      @media (max-width: 768px) {
-        font-size: 74px;
-      }
+  }
+  @media (min-width: 768px) {
+    width: 65px;
+    height: 40px;
+  }
+`;
+const GreaterThan = styled(LessThan)`
+  transform: scaleX(-1);
+  animation: pulseGreater 0.6s 0.3s alternate infinite ease-in-out;
+  @keyframes pulseGreater {
+    to {
+      opacity: 0.7;
+      transform: scaleX(-1) scale(1.2);
     }
-
-    @keyframes pulse {
-      to {
-        transform: scale(1.2);
-        opacity: 0.8;
-      }
+  }
+`;
+const Slash = styled.div`
+  width: 9.5px;
+  height: 65px;
+  border-radius: 1.5px;
+  background-color: var(--gray-800);
+  transform: skew(-18deg);
+  animation: pulseSlash 0.6s 0.3s alternate infinite ease-in-out;
+  @keyframes pulseSlash {
+    to {
+      opacity: 0.7;
+      transform: skew(-18deg);
     }
-  `,
-};
+  }
+  @media (min-width: 768px) {
+    width: 13px;
+    height: 93px;
+  }
+`;