CSS 깨짐 현상 (버튼 패딩, 게시물 해시태그) (#590)

* design: 버튼 width, 해시태그 css 수정 * feat: 프로필 수정 뒤로가기 추가 * refactor: ul 태그 추가
woowacourse-teams · Sep 21, 2023 · 13a75bc · 13a75bc
1 parent a14f2cb
commit 13a75bc
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 23 deletions.
diff --git a/frontend/src/components/ListFilter/ListFilter.tsx b/frontend/src/components/ListFilter/ListFilter.tsx
@@ -78,7 +78,7 @@ const S = {
     }
   `,
 
-  FilterItem: styled.li`
+  FilterItem: styled.div`
     display: flex;
     justify-content: center;
 
@@ -103,7 +103,7 @@ const S = {
     }
   `,
 
-  ButtonWrapper: styled.div`
+  ButtonWrapper: styled.li`
     width: 150px;
   `,
 };
diff --git a/frontend/src/components/RunnerPost/RunnerPostFilter/RunnerPostFilter.tsx b/frontend/src/components/RunnerPost/RunnerPostFilter/RunnerPostFilter.tsx
@@ -54,7 +54,7 @@ const underLine = css`
 `;
 
 const S = {
-  FilterContainer: styled.div``,
+  FilterContainer: styled.ul``,
 
   LabelList: styled.li`
     display: flex;

diff --git a/frontend/src/components/RunnerPost/RunnerPostItem/RunnerPostItem.tsx b/frontend/src/components/RunnerPost/RunnerPostItem/RunnerPostItem.tsx
@@ -128,19 +128,18 @@ const S = {
 
   TagContainer: styled.div`
     @media (max-width: 768px) {
-      max-width: 200px;
+      display: flex;
+      flex-wrap: wrap;
     }
+  `,
 
-    & span {
-      margin-right: 10px;
+  Tag: styled.span`
+    margin-right: 10px;
 
-      font-size: 14px;
-      color: var(--gray-600);
-    }
+    font-size: 14px;
+    color: var(--gray-600);
   `,
 
-  Tag: styled.span``,
-
   LeftSideContainer: styled.div``,
 
   RightSideContainer: styled.div`

diff --git a/frontend/src/pages/NoticePage.tsx b/frontend/src/pages/NoticePage.tsx
@@ -122,13 +122,13 @@ const NoticePage = () => {
 
               <S.EventMessageTitle>🔎 미션 보러가기</S.EventMessageTitle>
               <S.ButtonContainer>
-                <Button colorTheme="BLACK" width="100%">
+                <Button colorTheme="BLACK" width="120px">
                   <S.Anchor href="https://github.com/baton-mission/java-boss-monster" target="_blank">
                     <img src={githubIcon} />
                     <S.GoToGitHub>java</S.GoToGitHub>
                   </S.Anchor>
                 </Button>
-                <Button colorTheme="BLACK" width="100%">
+                <Button colorTheme="BLACK" width="120px">
                   <S.Anchor href="https://github.com/baton-mission/javascript-boss-monster" target="_blank">
                     <img src={githubIcon} />
                     <S.GoToGitHub>javascript</S.GoToGitHub>
@@ -143,13 +143,13 @@ const NoticePage = () => {
                 </S.EventGuide>
               </S.EventMessageTitleContainer>
               <S.ButtonContainer>
-                <Button dataType="java" colorTheme="RED" onClick={openConfirmModal} width="100%">
+                <Button dataType="java" colorTheme="RED" onClick={openConfirmModal} width="120px">
                   <S.Anchor>
                     <JavaIconWhite color="#000000" />
                     <S.Language>java</S.Language>
                   </S.Anchor>
                 </Button>
-                <Button dataType="javascript" colorTheme="RED" onClick={openConfirmModal} width="100%">
+                <Button dataType="javascript" colorTheme="RED" onClick={openConfirmModal} width="120px">
                   <S.Anchor>
                     <JavascriptIcon />
                     <S.Language>javascript</S.Language>
@@ -167,7 +167,13 @@ const NoticePage = () => {
             </S.ProfileContainer>
           </S.PostBodyContainer>
           <S.PostFooterContainer>
-            <Button colorTheme="GRAY" fontSize={isMobile ? '14px' : ''} fontWeight={700} onClick={goBack}>
+            <Button
+              colorTheme="GRAY"
+              width={isMobile ? '60px' : '180px'}
+              fontSize={isMobile ? '14px' : ''}
+              fontWeight={700}
+              onClick={goBack}
+            >
               목록
             </Button>
           </S.PostFooterContainer>

diff --git a/frontend/src/pages/ProfileEditPage.tsx b/frontend/src/pages/ProfileEditPage.tsx
@@ -7,6 +7,7 @@ import Button from '@/components/common/Button/Button';
 import { ERROR_DESCRIPTION, ERROR_TITLE, TOAST_COMPLETION_MESSAGE, TOAST_ERROR_MESSAGE } from '@/constants/message';
 import { ToastContext } from '@/contexts/ToastContext';
 import { useFetch } from '@/hooks/useFetch';
+import { usePageRouter } from '@/hooks/usePageRouter';
 import Layout from '@/layout/Layout';
 import {
   Profile,
@@ -25,6 +26,7 @@ const ProfileEditPage = () => {
   const { getRequestWithAuth, patchRequestWithAuth } = useFetch();
 
   const { showErrorToast, showCompletionToast } = useContext(ToastContext);
+  const { goBack } = usePageRouter();
 
   const [isRunner, setIsRunner] = useState(true);
 
@@ -231,9 +233,14 @@ const ProfileEditPage = () => {
     );
   };
 
+  const handleGoBack = () => {
+    goBack();
+  };
+
   return (
     <Layout>
       <S.TitleWrapper>
+        <S.BackButton onClick={handleGoBack}>{'<'}</S.BackButton>
         <S.Title>프로필 수정</S.Title>
       </S.TitleWrapper>
       <S.ProfileContainer>
@@ -327,9 +334,7 @@ const ProfileEditPage = () => {
               </S.TechTagsList>
             </S.InputContainer>
           </S.Form>
-        ) : (
-          'Loading'
-        )}
+        ) : null}
       </S.ProfileContainer>
 
       {isModalOpen && (
@@ -347,7 +352,19 @@ export default ProfileEditPage;
 
 const S = {
   TitleWrapper: styled.div`
-    margin: 72px 0 53px 0;
+    display: flex;
+    justify-content: center;
+    position: relative;
+
+    margin: 72px 0 40px 0;
+  `,
+
+  BackButton: styled.div`
+    position: absolute;
+    margin-right: 530px;
+
+    font-size: 36px;
+    cursor: pointer;
   `,
 
   Title: styled.h1`
@@ -356,8 +373,7 @@ const S = {
   `,
 
   ProfileContainer: styled.div`
-    width: 900px;
-
+    max-width: 900px;
     margin: 0 auto;
   `,
 

diff --git a/frontend/src/pages/RunnerPostDetailPage.tsx b/frontend/src/pages/RunnerPostDetailPage.tsx
@@ -221,7 +221,7 @@ const RunnerPostPage = () => {
             </S.PostBodyContainer>
             <S.PostFooterContainer>
               <Button
-                width={isMobile ? '100%' : '180px'}
+                width={isMobile ? '60px' : '180px'}
                 colorTheme="GRAY"
                 fontSize={isMobile ? '14px' : ''}
                 fontWeight={700}
@@ -317,6 +317,17 @@ const S = {
     align-items: center;
     justify-content: space-between;
     gap: 10px;
+
+    @media (max-width: 768px) {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 10px;
+
+      & > div {
+        margin-left: auto;
+      }
+    }
   `,
 
   PostTitle: styled.h1`