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

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

Hide file tree

Showing 2 changed files with 45 additions and 11 deletions.
diff --git a/src/login/loginJoin/JoinContents.tsx b/src/login/loginJoin/JoinContents.tsx
@@ -10,23 +10,51 @@ function JoinContents() {
       <Input placeholder="닉네임 입력" />
       <Input placeholder="이메일 입력" />
       <Input placeholder="비밀번호 입력" />
-      <Tag
-        title="회원가입"
-        width="500px"
-        height="60px"
-        inversion={true}
-        clickAble={true}
-        onClickHandler={() => {}}
-      />
+
+      <TagDiv wrapperWidth={1920}>
+        <Tag
+          title="회원가입"
+          width="500px"
+          height="60px"
+          inversion={true}
+          clickAble={true}
+          onClickHandler={() => {}}
+        />
+      </TagDiv>
+      <TagDiv wrapperWidth={1280}>
+        <Tag
+          title="회원가입"
+          width="333px"
+          height="40px"
+          fontSize="11px"
+          inversion={true}
+          clickAble={true}
+          onClickHandler={() => {}}
+        />
+      </TagDiv>
     </JoinContentsWrapper>
   );
 }
 
 export default JoinContents;
 
 const JoinContentsWrapper = styled.div`
+  @media screen and (min-width: 1920px) {
+    height: 400px;
+  }
+  @media screen and (max-width: 1919px) {
+    height: 283px;
+  }
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  height: 400px;
+`;
+
+const TagDiv = 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")};
+  }
 `;
diff --git a/src/login/loginJoin/LoginJoinContainer.tsx b/src/login/loginJoin/LoginJoinContainer.tsx
@@ -31,6 +31,12 @@ const JoinContnentsWrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  width: 500px;
-  height: 545px;
+  @media screen and (min-width: 1920px) {
+    width: 500px;
+    height: 545px;
+  }
+  @media screen and (max-width: 1919px) {
+    width: 333px;
+    height: 381px;
+  }
 `;