feat(newuser.jsx): newUser page mobile view

LikeLionHGU · Aug 4, 2024 · 5da14c2 · 5da14c2
1 parent 5166e55
commit 5da14c2
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 4 deletions.
diff --git a/src/pages/NewUser.jsx b/src/pages/NewUser.jsx
@@ -12,6 +12,7 @@ import ReadyWoomoolImgDisabled from "../assets/NewUser/ReadyWoomool-deactive.svg
 import { removeNonNumeric } from "../tools/tool";
 import { fetchBe } from "../tools/api";
 import { userDetailAtom } from "../recoil/userAtoms";
+import Header from "../components/Header";
 
 function NewUser() {
   const navigate = useNavigate();
@@ -66,6 +67,14 @@ function NewUser() {
 
   return (
     <NewContainer>
+      <Header
+        loggedIn={true}
+        style={{
+          position: "relative",
+          color: "#2892C2",
+          width: "100%",
+        }}
+      />
       <MainBanner.main>
         <MainBanner.header>Let's drink water together</MainBanner.header>
         <MainBanner.subheader>
@@ -308,11 +317,13 @@ export default NewUser;
 const MainBanner = {
   main: styled.div`
     height: 323px;
+    margin: 0 41px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
+    border-top: 4px solid #2892c2;
   `,
   header: styled.div`
     ${timesNewRoman}
@@ -353,6 +364,9 @@ const InputTextItem = {
     font-size: 20px;
     border-width: 0 0 1px;
     border-color: #9e9e9e;
+    @media (max-width: 705px) {
+      max-width: 300px;
+    }
   `,
   warning: styled.div`
     ${pretendard}
@@ -366,18 +380,24 @@ const InputTextItem = {
 const InputTextSection = {
   main: styled.div`
     display: flex;
-    height: 246px;
+    min-height: 246px;
 
     padding-left: 54px;
     padding-right: 41px;
     padding-top: 30px;
     padding-bottom: 30px;
+    @media (max-width: 705px) {
+      display: block;
+    }
   `,
   left: styled.div`
     border-right: 1px solid #2892c2;
     width: 382px;
     padding-top: 10px;
     flex-shrink: 0;
+    @media (max-width: 705px) {
+      border-right: none;
+    }
   `,
   right: styled.div`
     padding: 12px;
@@ -409,6 +429,10 @@ const InputTextSection = {
         color: #2892c2;
       }
     }
+
+    @media (max-width: 705px) {
+      padding-left: 0;
+    }
   `,
   // centerBorder: styled.div`
   //   height: 100%;

diff --git a/src/pages/NewUserCup.jsx b/src/pages/NewUserCup.jsx
@@ -14,6 +14,7 @@ import ModalSample from "../assets/NewUserCup/modal/sample.svg";
 import ModalConfirm from "../assets/NewUserCup/modal/confirm.svg";
 import ModalConfirmHover from "../assets/NewUserCup/modal/confirm-hover.svg";
 import ModalWoomoolSvg from "../assets/modal-woomool-blue.svg";
+import Header from "../components/Header";
 
 const cupType = [
   {
@@ -61,14 +62,27 @@ function NewUserCup() {
   // Handle Not Logged In User
   if (!jwtValue) return <Navigate to="/" />;
   return (
-    <NewContainer>
+    <NewContainer
+      style={{
+        paddingBottom: 64,
+      }}
+    >
+      <Header
+        loggedIn={true}
+        style={{
+          position: "relative",
+          color: "#2892C2",
+          width: "100%",
+        }}
+      />
       <HeaderBanner.container>
         <HeaderBanner.header>
           choose a weapon <br />
           for the challenge
         </HeaderBanner.header>
         <HeaderBanner.subheader>
-          도전을 수행할 자신만의 컵을 골라 보세요 (*프로필 수정 시 변경 가능)
+          도전을 수행할 자신만의 컵을 골라 보세요{" "}
+          <span className="newln">(*프로필 수정 시 변경 가능)</span>
         </HeaderBanner.subheader>
       </HeaderBanner.container>
       <CupSelectionContainer>
@@ -178,6 +192,13 @@ const HeaderBanner = {
     text-transform: uppercase;
 
     color: #000000;
+
+    @media (max-width: 530px) {
+      span.newln {
+        margin-top: 4px;
+        display: block;
+      }
+    }
   `,
 };
 
@@ -197,7 +218,7 @@ const CupItem = {
     justify-content: space-between;
     align-items: flex-end;
 
-    padding: 24px 0;
+    padding: 24px 13px;
 
     cursor: pointer;
 
@@ -226,6 +247,16 @@ const CupItem = {
 
       color: #000000;
     }
+
+    @media (max-width: 530px) {
+      display: block;
+      ${CupItemData.left} {
+        margin-bottom: 8px;
+      }
+      /* flex-direction: column; */
+      /* height: ${(props) => (props.$clicked ? "453px" : "0")}; */
+      /* height: auto; */
+    }
   `,
   body: styled.div`
     display: flex;
@@ -267,6 +298,13 @@ const CupItem = {
         display: none;
       }
     }
+
+    @media (max-width: 750px) {
+      /* display: block; */
+      flex-direction: column;
+      height: ${(props) => (props.$clicked ? "453px" : "0")};
+      /* height: auto; */
+    }
   `,
 };