feat: login/pick 페이지 반응형 레이아웃 적용 #5

feat: login/pick 페이지 반응형 레이아웃 적용
potato-club · Jul 11, 2023 · a4d821b · a4d821b
1 parent ecb54eb
commit a4d821b
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 22 deletions.
diff --git a/src/login/loginPick/ContentsTitle.tsx b/src/login/loginPick/ContentsTitle.tsx
@@ -7,12 +7,19 @@ function ContentsTitle({ children }: { children: string }) {
 export default ContentsTitle;
 
 const ContentsTitleComponent = styled.div`
+  @media screen and (min-width: 1920px) {
+    margin: 28px 0 12px 0;
+    height: 71px;
+    font-size: 48px;
+  }
+  @media screen and (max-width: 1919px) {
+    margin: 17.7px 0 12px 0;
+    height: 44px;
+    font-size: 30px;
+  }
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 28px 0 12px 0;
-  height: 71px;
-  font-size: 48px;
   font-weight: bold;
   color: #ff6f00;
 `;
diff --git a/src/login/loginPick/Explain.tsx b/src/login/loginPick/Explain.tsx
@@ -20,20 +20,34 @@ function Explain({ role }: { role: "owner" | "user" }) {
 export default Explain;
 
 const ExplainWrapper = styled.div`
+  @media screen and (min-width: 1920px) {
+    width: 342px;
+    height: 135px;
+    margin-bottom: 37px;
+  }
+  @media screen and (max-width: 1919px) {
+    width: 228px;
+    height: 91px;
+    margin-bottom: 25px;
+  }
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  width: 342px;
-  height: 135px;
-  margin-bottom: 37px;
 `;
 
 const ExplainComponent = styled.div`
+  @media screen and (min-width: 1920px) {
+    width: 342px;
+    height: 60px;
+    font-size: 18px;
+  }
+  @media screen and (max-width: 1919px) {
+    width: 228px;
+    height: 40px;
+    font-size: 11px;
+  }
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 342px;
-  height: 60px;
-  font-size: 18px;
   background-color: #fcf0e1;
 `;
diff --git a/src/login/loginPick/LoginPickContainer.tsx b/src/login/loginPick/LoginPickContainer.tsx
@@ -29,8 +29,16 @@ const PickWrapper = styled.div`
 `;
 
 const PickContnentsWrapper = styled.div`
+  @media screen and (min-width: 1920px) {
+    width: 1140px;
+    height: 555px;
+  }
+  @media screen and (max-width: 1919px) {
+    width: 759px;
+    height: 379px;
+  }
   display: flex;
-  width: 1140px;
-  height: 555px;
   justify-content: space-between;
 `;
+
+// 81 258 40 121 379
diff --git a/src/login/loginPick/PickContents.tsx b/src/login/loginPick/PickContents.tsx
@@ -9,29 +9,71 @@ import Tag from "../../components/Tag";
 function PickContents({ role }: { role: "owner" | "user" }) {
   return (
     <PickContentsDiv>
-      {role === "owner" ? <OwnerImage></OwnerImage> : <UserImage></UserImage>}
+      <ResponsiveDiv wrapperWidth={1920}>
+        {role === "owner" ? (
+          <OwnerImage width={123.8} />
+        ) : (
+          <UserImage width={123.8} />
+        )}
+      </ResponsiveDiv>
+      <ResponsiveDiv wrapperWidth={1280}>
+        {role === "owner" ? (
+          <OwnerImage width={82} />
+        ) : (
+          <UserImage width={82} />
+        )}
+      </ResponsiveDiv>
+
       <ContentsTitle>
         {role === "owner" ? "가게 운영자" : "일반 회원님"}
       </ContentsTitle>
       <Explain role={role === "owner" ? "owner" : "user"} />
-      <Tag
-        title={role === "owner" ? "가게 운영자 로그인" : "일반 회원 로그인"}
-        width="342px"
-        height="60px"
-        inversion={role === "owner" ? true : false}
-        clickAble={true}
-        onClickHandler={() => {}}
-      ></Tag>
+      <ResponsiveDiv wrapperWidth={1920}>
+        <Tag
+          title={role === "owner" ? "가게 운영자 로그인" : "일반 회원 로그인"}
+          width="342px"
+          height="60px"
+          inversion={role === "owner" ? true : false}
+          clickAble={true}
+          onClickHandler={() => {}}
+        />
+      </ResponsiveDiv>
+      <ResponsiveDiv wrapperWidth={1280}>
+        <Tag
+          title={role === "owner" ? "가게 운영자 로그인" : "일반 회원 로그인"}
+          width="228px"
+          height="40px"
+          inversion={role === "owner" ? true : false}
+          fontSize="11px"
+          clickAble={true}
+          onClickHandler={() => {}}
+        />
+      </ResponsiveDiv>
     </PickContentsDiv>
   );
 }
 
 export default PickContents;
 
 const PickContentsDiv = styled.div`
-  width: 342px;
-  height: 480px;
+  @media screen and (min-width: 1920px) {
+    width: 342px;
+    height: 480px;
+  }
+  @media screen and (max-width: 1919px) {
+    width: 227px;
+    height: 320px;
+  }
   display: flex;
   flex-direction: column;
   align-items: center;
 `;
+
+const ResponsiveDiv = styled.div<{ wrapperWidth: 1280 | 1920 }>`
+  @media screen and (min-width: 1920px) {
+    display: ${(props) => (props.wrapperWidth === 1920 ? "" : "none")};
+  }
+  @media screen and (max-width: 1919px) {
+    display: ${(props) => (props.wrapperWidth === 1280 ? "" : "none")};
+  }
+`;