From 9fe926944277996f6495f34ad52ff244c89b0130 Mon Sep 17 00:00:00 2001
From: gyeongza <gyeongza@naver.com>
Date: Wed, 20 Sep 2023 20:59:43 +0900
Subject: [PATCH] =?UTF-8?q?hotfix:=20css=20=EB=B0=80=EB=A6=AC=EB=8A=94=20?=
 =?UTF-8?q?=ED=98=84=EC=83=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ListFilter/ListFilter.tsx  | 24 ++++++++++++-------
 .../MyPagePostButton/MyPagePostButton.tsx     |  2 +-
 .../RunnerPostItem/RunnerPostItem.tsx         |  4 ++++
 .../src/components/common/Button/Button.tsx   |  5 ++--
 frontend/src/layout/Header.tsx                |  8 ++++++-
 .../src/mocks/data/myPageRunnerProfile.json   |  2 +-
 frontend/src/pages/MainPage.tsx               |  2 +-
 7 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/ListFilter/ListFilter.tsx b/frontend/src/components/ListFilter/ListFilter.tsx
index b86824dc8..9cd47c710 100644
--- a/frontend/src/components/ListFilter/ListFilter.tsx
+++ b/frontend/src/components/ListFilter/ListFilter.tsx
@@ -20,15 +20,17 @@ const ListFilter = ({ options, selectOption, width, fontSize }: Props) => {
     <S.FilterContainer>
       <S.FilterList $width={width}>
         {options.map((option) => (
-          <S.FilterItem key={option.value}>
-            <S.FilterButton
-              onClick={makeHandleClickOption(option.value)}
-              $isSelected={option.selected}
-              $fontSize={fontSize}
-            >
-              {option.label}
-            </S.FilterButton>
-          </S.FilterItem>
+          <S.ButtonWrapper key={option.value}>
+            <S.FilterItem>
+              <S.FilterButton
+                onClick={makeHandleClickOption(option.value)}
+                $isSelected={option.selected}
+                $fontSize={fontSize}
+              >
+                {option.label}
+              </S.FilterButton>
+            </S.FilterItem>
+          </S.ButtonWrapper>
         ))}
       </S.FilterList>
     </S.FilterContainer>
@@ -100,4 +102,8 @@ const S = {
       ${({ $isSelected }) => ($isSelected ? underLine : null)}
     }
   `,
+
+  ButtonWrapper: styled.div`
+    width: 150px;
+  `,
 };
diff --git a/frontend/src/components/MyPage/MyPagePostButton/MyPagePostButton.tsx b/frontend/src/components/MyPage/MyPagePostButton/MyPagePostButton.tsx
index 066014baa..7769fedf2 100644
--- a/frontend/src/components/MyPage/MyPagePostButton/MyPagePostButton.tsx
+++ b/frontend/src/components/MyPage/MyPagePostButton/MyPagePostButton.tsx
@@ -136,7 +136,7 @@ const S = {
 
     @media (max-width: 768px) {
       width: 100%;
-      margin-top: 18px;
+      margin-top: 15px;
     }
   `,
 };
diff --git a/frontend/src/components/RunnerPost/RunnerPostItem/RunnerPostItem.tsx b/frontend/src/components/RunnerPost/RunnerPostItem/RunnerPostItem.tsx
index bbf15c434..389df6149 100644
--- a/frontend/src/components/RunnerPost/RunnerPostItem/RunnerPostItem.tsx
+++ b/frontend/src/components/RunnerPost/RunnerPostItem/RunnerPostItem.tsx
@@ -127,6 +127,10 @@ const S = {
   `,
 
   TagContainer: styled.div`
+    @media (max-width: 768px) {
+      max-width: 200px;
+    }
+
     & span {
       margin-right: 10px;
 
diff --git a/frontend/src/components/common/Button/Button.tsx b/frontend/src/components/common/Button/Button.tsx
index 1cb8c464b..eca48f94f 100644
--- a/frontend/src/components/common/Button/Button.tsx
+++ b/frontend/src/components/common/Button/Button.tsx
@@ -66,16 +66,15 @@ const S = {
     width: ${({ $width }) => $width || '180px'};
     height: ${({ $height }) => $height || '40px'};
 
-    padding: 10px 10px;
+    padding: 5px 0;
 
     font-size: ${({ $fontSize }) => $fontSize || '18px'};
     font-weight: ${({ $fontWeight }) => $fontWeight || '400'};
 
-    visibility: ${({ $disabled }) => ($disabled ? 'hidden' : 'visible')};
+    display: ${({ $disabled }) => ($disabled ? 'none' : 'block')};
 
     @media (max-width: 768px) {
       width: ${({ $width }) => $width || '180px'};
-      height: 100%;
     }
   `,
 };
diff --git a/frontend/src/layout/Header.tsx b/frontend/src/layout/Header.tsx
index e9553d5a4..da454e817 100644
--- a/frontend/src/layout/Header.tsx
+++ b/frontend/src/layout/Header.tsx
@@ -51,7 +51,13 @@ const Header = () => {
                 {isMobile ? null : <S.ProfileName>{profile?.name}</S.ProfileName>}
                 <Avatar width="35px" height="35px" imageUrl={profile?.imageUrl || 'https://via.placeholder.com/150'} />
               </S.AvatarContainer>
-              <Button fontSize="14px" width="76px" height="35px" colorTheme="WHITE" onClick={handleClickLogoutButton}>
+              <Button
+                fontSize="14px"
+                width={isMobile ? '80px' : '85px'}
+                height="35px"
+                colorTheme="WHITE"
+                onClick={handleClickLogoutButton}
+              >
                 로그아웃
               </Button>
             </>
diff --git a/frontend/src/mocks/data/myPageRunnerProfile.json b/frontend/src/mocks/data/myPageRunnerProfile.json
index ded0853ec..01e0dfba9 100644
--- a/frontend/src/mocks/data/myPageRunnerProfile.json
+++ b/frontend/src/mocks/data/myPageRunnerProfile.json
@@ -3,6 +3,6 @@
   "company": "한국외국어대학교",
   "imageUrl": "https://avatars.githubusercontent.com/u/62369936?v=4",
   "githubUrl": "https://github.com/gyeongza",
-  "introduction": "안녕하세요 프론트엔드 공부중인 비전공자 학생입니다🖥️안녕하안녕하세요 프론트엔드 공부중인 비전공자 학생입니다🖥️안녕하세요 프론트엔드 공부중인 비전공자 학생입니다🖥️안녕하세요 프론트엔드 공부중인 비전공자 학생입니다🖥️안녕하세요 프론트엔드 공부중인 비전공자 학생입니다🖥️안녕하세요 프론트엔드 공부중인 비전공자 학생입니다🖥️안녕하세요 프론트엔드 공부중인 비전공자 학생입니다🖥️안녕하세요 프론트엔드 공부중인 비전공자 학생입니다🖥️세요 프론트엔드 공부중인 비전공자 학생입니다🖥️안녕하세요 프론트엔드 공부중인 비전공자 학생입니다🖥️안녕하세요 프론트엔드 공부중인 비전공자 학생입니다🖥️안녕하세요 프론트엔드 공부중인 비전공자 학생입니다🖥️안녕하세요 프론트엔드 공부중인 비전공자 학생입니다🖥️안녕하세요 프론트엔드 공부중인 비전공자 학생입니다🖥️안녕하세요 프론트엔드 공부중인 비전공자 학생입니다🖥️안녕하세요 프론트엔드 공부중인 비전공자 학생입니다🖥️안녕하세요 프론트엔드 공부중인 비전공자 학생입니다🖥️안녕하세요 프론트엔드 공부중인 비전공자 학생입니다🖥️안녕하세요 프론트엔드 공부중인 비전공자 학생입니다🖥️안녕하세요 프론트엔드 공부중인 비전공자 학생입니다🖥️안녕하세요 프론트엔드 공부중인 비전공자 학생입니다🖥️안녕하세요 프론트엔드 공부중인 비전공자 학생입니다🖥️안녕하세요 프론트엔드 공부중인 비전공자 학생입니다🖥️안녕하세요 프론트엔드 공부중인 비전공자 학생입니다🖥️",
+  "introduction": "입니다🖥️",
   "technicalTags": ["javascript", "react", "typescript"]
 }
diff --git a/frontend/src/pages/MainPage.tsx b/frontend/src/pages/MainPage.tsx
index db33ac827..1413e0d1c 100644
--- a/frontend/src/pages/MainPage.tsx
+++ b/frontend/src/pages/MainPage.tsx
@@ -115,7 +115,7 @@ const MainPage = () => {
           </S.LeftSideContainer>
           <S.RightSideContainer>
             <Button
-              width="100%"
+              width={isMobile ? '160px' : '190px'}
               onClick={handleClickPostButton}
               colorTheme="WHITE"
               fontSize={isMobile ? '14px' : '18px'}