fix: UI 깨짐 해결 (#501)

woowacourse-teams · Oct 18, 2023 · 7ff99da · 7ff99da
1 parent 6fad442
commit 7ff99da
Show file tree

Hide file tree

Showing 16 changed files with 52 additions and 35 deletions.
diff --git a/frontend/.pnp.cjs b/frontend/.pnp.cjs
diff --git a/frontend/.yarn/cache/zipgo-layout-npm-0.3.0-7cfca6820b-dc91581cd7.zip b/frontend/.yarn/cache/zipgo-layout-npm-0.3.0-7cfca6820b-dc91581cd7.zip
diff --git a/frontend/.yarn/cache/zipgo-layout-npm-0.4.0-bfdb260d66-0a6852d018.zip b/frontend/.yarn/cache/zipgo-layout-npm-0.4.0-bfdb260d66-0a6852d018.zip
diff --git a/frontend/package.json b/frontend/package.json
@@ -99,7 +99,7 @@
     "react-router": "^6.14.2",
     "react-router-dom": "^6.14.1",
     "styled-normalize": "^8.0.7",
-    "zipgo-layout": "^0.3.0"
+    "zipgo-layout": "0.4.0"
   },
   "lint-staged": {
     "**/*.{ts,tsx}": [

diff --git a/frontend/src/components/@common/MobileToDesktop/MobileToDesktop.tsx b/frontend/src/components/@common/MobileToDesktop/MobileToDesktop.tsx
@@ -1,10 +1,11 @@
 import { PropsWithChildren } from 'react';
 import { styled } from 'styled-components';
-import { DesktopView } from 'zipgo-layout';
+import { DesktopView, useDesktopView } from 'zipgo-layout';
 
 import BackgroundImg from '@/assets/svg/background_img.svg';
 import ZipgoLogo from '@/assets/svg/zipgo_logo_light.svg';
 import ZipgoTextLogo from '@/assets/svg/zipgo_text_logo.svg';
+import theme from '@/styles/theme';
 
 const RenderSub = () => (
   <SupporterWrapper>
@@ -31,7 +32,11 @@ const MobileToDesktop = (props: DesktopViewProps) => {
   const { children } = props;
 
   return (
-    <DesktopView backgroundImage={BackgroundImg} renderSub={RenderSub()}>
+    <DesktopView
+      backgroundImage={BackgroundImg}
+      renderSub={RenderSub()}
+      maxWidth={theme.maxWidth.mobile}
+    >
       {children}
     </DesktopView>
   );

diff --git a/frontend/src/components/PetProfile/PetListBottomSheet.tsx b/frontend/src/components/PetProfile/PetListBottomSheet.tsx
@@ -54,6 +54,7 @@ const Layout = styled.div`
   align-items: flex-start;
 
   width: 100%;
+  max-width: ${({ theme }) => theme.maxWidth.mobile};
   height: 57.4rem;
 
   background: ${({ theme }) => theme.color.grey200};

diff --git a/frontend/src/components/PetProfile/PetProfileEditionForm/PetProfileEditionForm.tsx b/frontend/src/components/PetProfile/PetProfileEditionForm/PetProfileEditionForm.tsx
@@ -196,12 +196,12 @@ const PetSizeContainer = styled.div`
 const ButtonContainer = styled.div`
   position: fixed;
   bottom: 4rem;
-  left: 0;
 
   display: flex;
   gap: 1.6rem;
 
   width: 100%;
+  max-width: ${({ theme }) => theme.maxWidth.mobile};
   padding: 0 2rem;
 `;
 

diff --git a/frontend/src/components/Review/ReviewForm/ReviewForm.tsx b/frontend/src/components/Review/ReviewForm/ReviewForm.tsx
@@ -139,6 +139,7 @@ const DetailReviewText = styled.textarea<{ $isValid: boolean }>`
 
   width: 100%;
   min-height: 12rem;
+  margin-bottom: 15rem;
   padding: 1.2rem;
 
   line-height: 2.4rem;
@@ -162,10 +163,11 @@ const SubmitButton = styled.button`
 
   position: fixed;
   bottom: 0;
-  left: 0;
 
   width: 100%;
+  max-width: ${({ theme }) => theme.maxWidth.mobile};
   height: 9rem;
+  margin-left: -2rem;
 
   font-size: 2rem;
   font-weight: 700;

diff --git a/frontend/src/components/Review/ReviewListAndChart/ReviewList/ReviewList.tsx b/frontend/src/components/Review/ReviewListAndChart/ReviewList/ReviewList.tsx
@@ -49,9 +49,11 @@ const ReviewList = () => {
         </NoReviewContainer>
       )}
       {userInfo?.hasPet && (
-        <ReviewAddButton type="button" aria-label="리뷰 작성" onClick={goReviewWrite}>
-          <WriteIconImage src={WriteIcon} alt="" />
-        </ReviewAddButton>
+        <ButtonWrapper>
+          <ReviewAddButton type="button" aria-label="리뷰 작성" onClick={goReviewWrite}>
+            <WriteIconImage src={WriteIcon} alt="" />
+          </ReviewAddButton>
+        </ButtonWrapper>
       )}
     </Layout>
   );
@@ -106,15 +108,21 @@ const NoReviewText = styled.p`
   text-align: center;
 `;
 
+const ButtonWrapper = styled.div`
+  position: fixed;
+  bottom: 12rem;
+
+  width: 100%;
+  max-width: ${({ theme }) => theme.maxWidth.mobile};
+  padding: 1.6rem;
+`;
+
 const ReviewAddButton = styled.button`
   all: unset;
 
   cursor: pointer;
 
-  position: fixed;
-  right: 1.6rem;
-  bottom: 12rem;
-
+  float: right;
   display: flex;
   justify-content: center;
 

diff --git a/frontend/src/pages/FoodDetail/FoodDetail.tsx b/frontend/src/pages/FoodDetail/FoodDetail.tsx
@@ -123,7 +123,7 @@ const FoodDetail = () => {
 export default FoodDetail;
 
 const FoodDetailWrapper = styled.div`
-  padding: 4rem 0 12rem;
+  padding: 4rem 0 24rem;
 `;
 
 const FoodProfileContainer = styled.div`

diff --git a/frontend/src/pages/PetProfile/PetProfileAddition/PetProfileImageAddition.tsx b/frontend/src/pages/PetProfile/PetProfileAddition/PetProfileImageAddition.tsx
@@ -55,11 +55,12 @@ const Content = styled.div`
 const SubmitButton = styled.button`
   cursor: pointer;
 
-  position: fixed;
-  bottom: 4rem;
+  position: absolute;
+  bottom: 6rem;
   left: 2rem;
 
   width: calc(100% - 4rem);
+  max-width: ${({ theme }) => theme.maxWidth.mobile};
   height: 5.1rem;
 
   font-size: 1.6rem;

diff --git a/frontend/src/pages/PetProfile/PetProfileAddition/PetProfileNameAddition.tsx b/frontend/src/pages/PetProfile/PetProfileAddition/PetProfileNameAddition.tsx
@@ -84,11 +84,12 @@ const ErrorCaption = styled.p`
 export const NextButton = styled.button`
   cursor: pointer;
 
-  position: fixed;
-  bottom: 4rem;
+  position: absolute;
+  bottom: 6rem;
   left: 2rem;
 
   width: calc(100% - 4rem);
+  max-width: ${({ theme }) => theme.maxWidth.mobile};
   height: 5.1rem;
 
   font-size: 1.6rem;

diff --git a/frontend/src/pages/Review/ReviewAddition.tsx b/frontend/src/pages/Review/ReviewAddition.tsx
@@ -38,13 +38,12 @@ const Container = styled.div`
   justify-content: center;
 
   width: 100%;
-  height: 100vh;
   padding: 2rem;
 `;
 
 const FoodInfoWrapper = styled.div`
   width: 100%;
-  margin-top: 24rem;
+  margin-top: 4rem;
   margin-bottom: 2.4rem;
   padding: 2.4rem 0;
 

diff --git a/frontend/src/styles/globalStyle.ts b/frontend/src/styles/globalStyle.ts
@@ -26,7 +26,7 @@ const globalStyle = css`
       height: 0;
     }
     /* stylelint-disable-next-line media-feature-range-notation */
-    @media (max-width: 380px) {
+    @media (max-width: 392px) {
       font-size: 50%;
     }
   }

diff --git a/frontend/src/styles/theme.ts b/frontend/src/styles/theme.ts
@@ -22,7 +22,7 @@ const color = {
 } as const;
 
 const maxWidth = {
-  mobile: '42rem',
+  mobile: '49rem',
 } as const;
 
 // 폰트

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -9870,7 +9870,7 @@ __metadata:
     webpack-cli: ^5.1.4
     webpack-dev-server: ^4.15.1
     webpack-merge: ^5.9.0
-    zipgo-layout: ^0.3.0
+    zipgo-layout: 0.4.0
   languageName: unknown
   linkType: soft
 
@@ -18070,12 +18070,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"zipgo-layout@npm:^0.3.0":
-  version: 0.3.0
-  resolution: "zipgo-layout@npm:0.3.0"
+"zipgo-layout@npm:0.4.0":
+  version: 0.4.0
+  resolution: "zipgo-layout@npm:0.4.0"
   dependencies:
     react: ^18.2.0
     styled-components: ^6.0.8
-  checksum: dc91581cd7ba0fa3aea340a9b381b228a6d6aaa7aca963482ba1fe54976d5684f143c07b3d16e4647b331f5027509a9c1a504b33fa481a078bddb7341e4a1fa7
+  checksum: 0a6852d01832c9d6c47d4e2ddbe0311108bebf3a8fc83eb39d78cae8f96a559f155cc11accd08ea81f1675ecd098b6932b72f1ea393d270b2bae9c41617e1eed
   languageName: node
   linkType: hard