반응형 디자인 수정 (#562)

* design: 로그인 페이지 반응형 추가 * design: 메인페이지 게시글 반응형 디자인 수정 * design: 상세페이지 버튼 반응형 디자인 수정 * design: 이벤트 페이지 사진 크기 수정 * refactor: 확인 모달 children 타입 변경 * design: 브랜치 생성 모달 글자 하이라이트 추가 * design: 목록 버튼 디자인 수정 * design: 로딩 스피너 문자를 css로 구현
woowacourse-teams · Sep 20, 2023 · 5787187 · 5787187
1 parent 80889a9
commit 5787187
Show file tree

Hide file tree

Showing 7 changed files with 145 additions and 71 deletions.
diff --git 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,9 +72,8 @@ const S = {
   ConfirmMessage: styled.p`
     margin-bottom: 40px;
 
-    font-size: 18px;
-
     white-space: pre-wrap;
+    line-height: 1.5;
   `,
 
   ButtonContainer: styled.div`

diff --git 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/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;
+  }
+`;
diff --git 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;
   `,
 };
diff --git a/frontend/src/pages/MainPage.tsx b/frontend/src/pages/MainPage.tsx
@@ -234,7 +234,7 @@ const S = {
     margin-bottom: 20px;
 
     @media (max-width: 768px) {
-      min-width: 360px;
+      min-width: 340px;
     }
   `,
 

diff --git 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}
         />
@@ -315,8 +323,8 @@ const S = {
     margin: 0 auto;
 
     @media (max-width: 768px) {
-      width: 350px;
-      height: 123px;
+      width: 320px;
+      height: 112px;
     }
   `,
 
@@ -395,6 +403,10 @@ const S = {
       font-size: 12px;
     }
   `,
+
+  highlightSpan: styled.span`
+    font-weight: 700;
+  `,
 };
 
 export default NoticePage;
diff --git 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}
@@ -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>