[FE] 모바일에서 하단 메뉴 잘리는 버그 픽스 (#901)

* refactor: 채팅 컴포넌트 어색한 디자인 수정 * refactor: 모바일 페이지 템플릿 어색한 디자인 수정 * refactor: 모바일에서 채팅보내기 어색한 디자인 수정 * feat: 브라우저의 상단, 하단 제외한 크기 계산 * refactor: 새로운 높이 계산 * refactor: ImageDrawer의 sliceDistance 속성 다시 추가 * style: 0px -> 0으로 수정
woowacourse-teams · Jan 3, 2024 · 1a7e295 · 1a7e295
1 parent aa9e677
commit 1a7e295
Show file tree

Hide file tree

Showing 12 changed files with 101 additions and 24 deletions.
diff --git a/frontend/src/App.css b/frontend/src/App.css
@@ -6,6 +6,9 @@ This Font Software is licensed under the SIL Open Font License, Version 1.1.
 This license is copied below, and is also available with a FAQ at:
 http://scripts.sil.org/OFL
 */
+:root {
+  --vh: 100%;
+}
 
 @font-face {
   font-family: 'Pretendard';

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -19,10 +19,16 @@ import { getIsMobile } from '~/utils/getIsMobile';
 import M_LandingPage from '~/mobilePages/M_LandingPage/M_LandingPage';
 import M_TeamSelectPage from '~/mobilePages/M_TeamSelectPage/M_TeamSelectPage';
 import M_PageTemplate from '~/mobilePages/M_PageTemplate/M_PageTemplate';
+import { useEffect } from 'react';
 
 const App = () => {
   const isMobile = getIsMobile();
 
+  useEffect(() => {
+    const vh = window.innerHeight * 0.01;
+    document.documentElement.style.setProperty('--vh', `${vh}px`);
+  }, []);
+
   return (
     <Routes>
       {isMobile ? (

diff --git a/frontend/src/components/common/Header/Header.styled.ts b/frontend/src/components/common/Header/Header.styled.ts
@@ -14,7 +14,7 @@ export const Header = styled.header<{ $isMobile: boolean }>`
   ${({ $isMobile }) =>
     $isMobile &&
     css`
-      height: 110px;
+      height: 90px;
       flex-wrap: wrap;
       flex-direction: row-reverse;
     `}
@@ -62,9 +62,17 @@ export const TeamNameWrapper = styled.div`
   align-items: center;
 `;
 
-export const ProfileImage = styled.img`
-  width: 40px;
-  height: 40px;
+export const ProfileImage = styled.img<{ $isMobile: boolean }>`
+  ${({ $isMobile }) =>
+    $isMobile
+      ? css`
+          width: 30px;
+          height: 30px;
+        `
+      : css`
+          width: 40px;
+          height: 40px;
+        `}
 
   border-radius: 50%;
   object-fit: cover;
@@ -91,14 +99,22 @@ export const notificationButton = css`
   }
 `;
 
-export const teamPlaceInfoButton = css`
+export const teamPlaceInfoButton = ($isMobile: boolean) => css`
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
 
-  width: 44px;
-  height: 44px;
+  ${$isMobile
+    ? css`
+        width: 30px;
+        height: 30px;
+      `
+    : css`
+        width: 44px;
+        height: 44px;
+      `}
+
   padding: 0;
 
   border-radius: 50%;
@@ -108,13 +124,21 @@ export const teamPlaceInfoButton = css`
   }
 `;
 
-export const userInfoButton = css`
+export const userInfoButton = ($isMobile: boolean) => css`
   display: flex;
   align-items: center;
   justify-content: center;
 
-  width: 50px;
-  height: 50px;
+  ${$isMobile
+    ? css`
+        width: 30px;
+        height: 30px;
+      `
+    : css`
+        width: 50px;
+        height: 50px;
+      `}
+
   padding: 0;
 `;
 

diff --git a/frontend/src/components/common/Header/Header.tsx b/frontend/src/components/common/Header/Header.tsx
@@ -171,7 +171,7 @@ const Header = () => {
             onFocus={prefetchTeamPlaceInfo}
             onMouseEnter={prefetchTeamPlaceInfo}
             onClick={handleTeamButtonClick}
-            css={S.teamPlaceInfoButton}
+            css={S.teamPlaceInfoButton(isMobile)}
             aria-label="팀 정보 보기"
           >
             <TeamIcon height={isMobile ? '32' : '22'} />
@@ -187,11 +187,15 @@ const Header = () => {
           <Button
             type="button"
             variant="plain"
-            css={S.userInfoButton}
+            css={S.userInfoButton(isMobile)}
             onClick={handleUserButtonClick}
             aria-label="프로필 보기"
           >
-            <S.ProfileImage src={userInfo?.profileImageUrl} alt="프로필 사진" />
+            <S.ProfileImage
+              $isMobile={isMobile}
+              src={userInfo?.profileImageUrl}
+              alt="프로필 사진"
+            />
           </Button>
         </S.ButtonContainer>
       </S.Header>

diff --git a/frontend/src/components/common/NavigationBar/NavigationBar.styled.ts b/frontend/src/components/common/NavigationBar/NavigationBar.styled.ts
@@ -9,7 +9,6 @@ export const Nav = styled.nav<{ $isMobile: boolean }>`
       return css`
         width: 100%;
         height: 60px;
-        padding: 10px;
       `;
 
     return css`

diff --git a/frontend/src/components/feed/ImageUploadDrawer/ImageUploadDrawer.stories.tsx b/frontend/src/components/feed/ImageUploadDrawer/ImageUploadDrawer.stories.tsx
@@ -33,6 +33,10 @@ const meta = {
       description:
         '랜더링할 자식 요소를 의미합니다. `ThumbnailList` 컴포넌트가 여기에 오면 됩니다.',
     },
+    slideDistance: {
+      description:
+        '서랍장이 열리게 될 경우 얼마나 많은 거리를 위로 움직여야 할 지를 의미합니다. 입력값은 숫자이며 단위는 `px`입니다.',
+    },
     onClose: {
       description:
         '서랍장이 닫히게 될 때 실행시킬 함수를 의미합니다. 서랍장을 실질적으로 닫는 함수를 여기에 넣어 주시면 됩니다.',
@@ -47,6 +51,7 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     isOpen: false,
+    slideDistance: 163,
     children: (
       <div style={{ fontSize: '32px', padding: '40px' }}>
         이 자리에 썸네일 리스트 컴포넌트가 올 것입니다.
@@ -62,6 +67,23 @@ export const Default: Story = {
 export const Opened: Story = {
   args: {
     isOpen: true,
+    slideDistance: 163,
+    children: (
+      <div style={{ fontSize: '32px', padding: '40px' }}>
+        이 자리에 썸네일 리스트 컴포넌트가 올 것입니다.
+      </div>
+    ),
+    onClose: () => {
+      alert('onClose();');
+    },
+    isUploading: false,
+  },
+};
+
+export const CustomDistanceOpened: Story = {
+  args: {
+    isOpen: true,
+    slideDistance: 0,
     children: (
       <div style={{ fontSize: '32px', padding: '40px' }}>
         이 자리에 썸네일 리스트 컴포넌트가 올 것입니다.

diff --git a/frontend/src/components/feed/ImageUploadDrawer/ImageUploadDrawer.styled.ts b/frontend/src/components/feed/ImageUploadDrawer/ImageUploadDrawer.styled.ts
@@ -1,6 +1,10 @@
 import { styled, css } from 'styled-components';
 
-export const Container = styled.div<{ $isOpen: boolean; $isMobile: boolean }>`
+export const Container = styled.div<{
+  $isOpen: boolean;
+  $isMobile: boolean;
+  $slideDistance: number;
+}>`
   display: flex;
   position: absolute;
 
@@ -26,7 +30,9 @@ export const Container = styled.div<{ $isOpen: boolean; $isMobile: boolean }>`
   background: linear-gradient(30deg, #bfc3ff, #eaebff);
 
   transition: 0.35s;
-  transform: translateY(${({ $isOpen }) => ($isOpen ? '-163px' : '0')});
+  transform: translateY(
+    ${({ $isOpen, $slideDistance }) => ($isOpen ? `-${$slideDistance}px` : 0)}
+  );
 `;
 
 export const ContentWrapper = styled.div`

diff --git a/frontend/src/components/feed/ImageUploadDrawer/ImageUploadDrawer.tsx b/frontend/src/components/feed/ImageUploadDrawer/ImageUploadDrawer.tsx
@@ -6,18 +6,23 @@ import { getIsMobile } from '~/utils/getIsMobile';
 
 interface ImageUploadDrawerProps {
   isOpen: boolean;
+  slideDistance: number;
   onClose: () => void;
   isUploading: boolean;
 }
 
 const ImageUploadDrawer = (
   props: PropsWithChildren<ImageUploadDrawerProps>,
 ) => {
-  const { isOpen, onClose, children, isUploading } = props;
+  const { isOpen, onClose, children, isUploading, slideDistance } = props;
   const isMobile = getIsMobile();
 
   return (
-    <S.Container $isOpen={isOpen} $isMobile={isMobile}>
+    <S.Container
+      $isOpen={isOpen}
+      $isMobile={isMobile}
+      $slideDistance={slideDistance}
+    >
       <S.ContentWrapper>{children}</S.ContentWrapper>
       {!isUploading && (
         <S.CloseButtonWrapper>

diff --git a/frontend/src/components/feed/Thread/Thread.styled.ts b/frontend/src/components/feed/Thread/Thread.styled.ts
@@ -47,7 +47,7 @@ export const ContentWrapper = styled.div`
   position: relative;
   overflow: hidden;
 
-  padding: 16px 28px;
+  padding: 10px 24px;
 `;
 
 export const ThreadHeader = styled.div`
@@ -81,7 +81,7 @@ export const ThumbnailListWrapper = styled.div<{
   height: 136px;
   padding: 40px 20px 0 20px;
   margin-top: -20px;
-  margin-bottom: ${({ $marginBottom }) => ($marginBottom ? '40px' : '20px')};
+  margin-bottom: ${({ $marginBottom }) => ($marginBottom ? '30px' : '10px')};
 
   background: ${({ theme, $isMe }) =>
     $isMe ? theme.gradient.BLURPLE('116px') : theme.gradient.WHITE('116px')};
@@ -101,7 +101,7 @@ export const contentField = (threadSize: ThreadSize, isMe: boolean) => css`
   width: 100%;
   white-space: pre-wrap;
 
-  font-size: ${threadSize === 'md' ? 18 : 16}px;
+  font-size: ${threadSize === 'md' ? 16 : 14}px;
   color: ${({ theme }) => (isMe ? theme.color.WHITE : theme.color.BLACK)};
 
   word-break: break-all;

diff --git a/frontend/src/mobilePages/M_PageTemplate/M_PageTemplate.styled.ts b/frontend/src/mobilePages/M_PageTemplate/M_PageTemplate.styled.ts
@@ -1,6 +1,7 @@
 import { styled } from 'styled-components';
 
 export const PageContainer = styled.div`
+  justify-content: space-between;
   position: absolute;
   top: 0;
   left: 0;
@@ -13,5 +14,5 @@ export const PageContainer = styled.div`
 export const PageWrapper = styled.main`
   flex: 1;
 
-  height: calc(100vh - 170px);
+  height: calc(var(--vh, 1vh) * 100 - 150px);
 `;
diff --git a/frontend/src/pages/TeamFeedPage/TeamFeedPage.styled.ts b/frontend/src/pages/TeamFeedPage/TeamFeedPage.styled.ts
@@ -42,8 +42,8 @@ export const ThreadListWrapper = styled.div`
   display: flex;
   flex-direction: column;
 
-  row-gap: 24px;
-  padding: 20px 30px;
+  row-gap: 16px;
+  padding: 20px 30px 0;
 
   background-color: ${({ theme }) => theme.color.WHITE};
 `;
@@ -113,6 +113,10 @@ export const scrollBottomButton = css`
   box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
 `;
 
+export const noPaddingButton = css`
+  padding: 0;
+`;
+
 export const noticeText = css`
   margin-right: 10px;
 

diff --git a/frontend/src/pages/TeamFeedPage/TeamFeedPage.tsx b/frontend/src/pages/TeamFeedPage/TeamFeedPage.tsx
@@ -99,6 +99,7 @@ const TeamFeedPage = (props: TeamFeedPageProps) => {
           isOpen={isImageDrawerOpen}
           onClose={handleImageDrawerToggle}
           isUploading={isSendingImage}
+          slideDistance={isMobile ? 142 : 162}
         >
           <ThumbnailList
             mode="delete"
@@ -128,6 +129,7 @@ const TeamFeedPage = (props: TeamFeedPageProps) => {
               variant="plain"
               aria-label="이미지 업로드하기"
               onClick={handleImageDrawerToggle}
+              css={isMobile && S.noPaddingButton}
               disabled={isSendingImage}
             >
               <ImageIcon />
@@ -146,6 +148,7 @@ const TeamFeedPage = (props: TeamFeedPageProps) => {
                 variant="plain"
                 aria-label="채팅 전송하기"
                 disabled={isSendingImage}
+                css={isMobile && S.noPaddingButton}
               >
                 <AirplaneIcon
                   fill={isSendingImage ? 'white' : '#8e92ff'}