style: 모바일 전체 디자인 재세팅

LikeLionHGU · Aug 4, 2024 · 92f458f · 92f458f
1 parent 1e977d4
commit 92f458f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 10 deletions.
diff --git a/src/pages/Mob/MobCalenderPage.js b/src/pages/Mob/MobCalenderPage.js
@@ -23,7 +23,7 @@ import { MdOutlineArrowBackIosNew } from "react-icons/md";
 import LogoImg from "../../imgs/Logo.png";
 
 const MobileV = styled.div`
-  width: 375px;
+  width: 100vw;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -209,6 +209,7 @@ function MobCalenderPage() {
           style={{
             justifyContent: "flex-start",
             marginTop: "40px",
+            width: "375px",
           }}
         >
           <NoCenterHorizontal>

diff --git a/src/pages/Mob/MobCreatePage.js b/src/pages/Mob/MobCreatePage.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import { NoCenterVertical } from "../../styles/CommunalStyle";
 import HappinessRateComponent from "../../components/MobComponent/MobCreatePage/HappinessRateComponent";
 import styled from "styled-components";

diff --git a/src/pages/Mob/MobMyPage.js b/src/pages/Mob/MobMyPage.js
@@ -3,7 +3,7 @@ import styled from "styled-components";
 import {
   Horizontal,
   NoCenterHorizontal,
-  Vertical,
+  NoCenterVertical,
 } from "../../styles/CommunalStyle";
 import LogoImg from "../../imgs/Logo.png";
 import ProfileComponent from "../../components/MobComponent/MobMyPage/ProfileComponent";
@@ -15,15 +15,11 @@ import { tokenState } from "../../store/atom";
 import MobMenuBarComponent from "./MobMenuBarComponent";
 
 const MobileV = styled.div`
-  width: 375px;
+  width: 100vw;
   display: flex;
   align-items: center;
   justify-content: center;
   padding-bottom: 70px;
-  background: var(
-    --mobile_bg,
-    linear-gradient(280deg, #f7f7f7 56.16%, #ebf9f0 146.1%)
-  );
   /* height: 100vh; */
 `;
 
@@ -71,7 +67,13 @@ function MobMyPage() {
   }, [isUpdating]);
   return (
     <MobileV>
-      <Vertical>
+      <NoCenterVertical
+        style={{
+          justifyContent: "flex-start",
+          marginTop: "40px",
+          width: "375px",
+        }}
+      >
         <NoCenterHorizontal>
           <Horizontal
             style={{
@@ -107,7 +109,7 @@ function MobMyPage() {
           ))}
         </div>
         <MobMenuBarComponent menu={"profile"} />
-      </Vertical>
+      </NoCenterVertical>
     </MobileV>
   );
 }