style: 반응형 구현 (#35)

Mogazoa-team20 · Jun 1, 2024 · a909e71 · a909e71
1 parent 4e75d9c
commit a909e71
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 0 deletions.
diff --git a/src/app/(userpage)/otherpage/[userId]/components/HTMLContent/HTMLContent.module.scss b/src/app/(userpage)/otherpage/[userId]/components/HTMLContent/HTMLContent.module.scss
@@ -8,4 +8,8 @@
   @include font-normal;
   line-height: 22px;
   word-break: break-word;
+
+  @include respond-to(tablet){
+    @include text-sm;
+  }
 }
diff --git a/src/app/(userpage)/otherpage/[userId]/components/UserInfo/UserInfo.module.scss b/src/app/(userpage)/otherpage/[userId]/components/UserInfo/UserInfo.module.scss
@@ -15,6 +15,17 @@
   border-radius: 12px;
   border: 1px solid $gray-300;
   background-color: $black-200;
+
+  @include respond-to(tablet) {
+    width: 509px;
+    padding: 30px;
+
+    gap: 30px;
+  }
+
+  @include respond-to(mobile) {
+    width: 335px;
+  }
 }
 
 .descriptionBox {
@@ -29,6 +40,14 @@
     @include text-xl;
     color: $white-100;
   }
+
+  @include respond-to(tablet) {
+    gap: 10px;
+
+    p {
+      font-size: 20px;
+    }
+  }
 }
 
 .followBox {
@@ -57,4 +76,21 @@
       @include font-normal;
     }
   }
+
+  @include respond-to(tablet) {
+    width: 234px;
+
+    div {
+      :nth-child(1) {
+        font-size: 18px;
+      }
+      :nth-child(2) {
+        @include text-sm;
+      }
+    }
+  }
+
+  @include respond-to(mobile) {
+    width: 194px;
+  }
 }
diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
@@ -60,4 +60,12 @@
 
 .profile {
   width: 250px;
+
+  @include respond-to(tablet) {
+    width: 400px;
+  }
+
+  @include respond-to(mobile) {
+    width: 245px;
+  }
 }