style: responsive

HY-DATA-project · Jun 4, 2024 · 568ba35 · 568ba35
1 parent 51b4748
commit 568ba35
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 8 deletions.
diff --git a/src/app/(default)/main.module.css b/src/app/(default)/main.module.css
@@ -14,6 +14,12 @@
   height: 24rem;
 }
 
+@media screen and (max-width: 768px) {
+  .main > img {
+    display: none;
+  }
+}
+
 .info_heading {
   font-family: "NotoSansMedium";
 
@@ -60,16 +66,28 @@
   grid-template-columns: repeat(9, 1fr);
   gap: 3px;
 
-  margin-bottom: 150px;
+  margin-bottom: 9.375rem;
+}
+
+@media screen and (max-width: 768px) {
+  .menuGrid {
+    grid-template-columns: repeat(6, 1fr);
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .menuGrid {
+    grid-template-columns: repeat(3, 1fr);
+  }
 }
 
 .databoardGrid {
   display: grid;
-  gap: 140px;
+  gap: 8.75rem;
 
   max-width: 1200px;
-  padding: 0 20px;
-  padding-bottom: 100px;
+  padding: 0 1.25rem;
+  padding-bottom: 6.25rem;
   margin: 0 auto;
   overflow-x: hidden;
 }
diff --git a/src/app/(default)/search-result/search-result.tsx b/src/app/(default)/search-result/search-result.tsx
@@ -147,9 +147,7 @@ export default function SearchResult({
       {/* //* 검색창 */}
       {/* //TODO */}
       <SearchBox
-        boxstyle={{
-          margin: "3.75rem 8rem 6rem 8rem",
-        }}
+        className={styles.searchBox}
         handleSubmit={handleSearchSubmit}
         initKeyword={searchParams.get(SERVER_PARAMS_KEY.KEYWORD)}
       />

diff --git a/src/app/(default)/search-result/searchResult.module.css b/src/app/(default)/search-result/searchResult.module.css
@@ -17,6 +17,18 @@
   font-size: 0.875rem;
 }
 
+.searchBox {
+  margin: 3.75rem 8rem 6rem 8rem;
+}
+
+@media screen and (max-width: 768px) {
+  .searchBox {
+    margin-left: 0;
+    margin-right: 0;
+    width: 100%;
+  }
+}
+
 .keywordTitle {
   font-size: 1.5rem;
   font-family: "NotoSansBold";

diff --git a/src/components/data-board/data-board.module.css b/src/components/data-board/data-board.module.css
@@ -42,10 +42,24 @@
 
 .dataBoard {
   display: grid;
-  gap: 32px;
+  gap: 2rem;
   grid-template-columns: repeat(3, 1fr);
 }
 
+@media screen and (max-width: 1024px) {
+  .dataBoard {
+    gap: 4rem;
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media screen and (max-width: 767px) {
+  .dataBoard {
+    gap: 4rem;
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
 .dataCard {
   display: flex;
   overflow: hidden;

diff --git a/src/components/dataset-viewer/dataset-viewer.tsx b/src/components/dataset-viewer/dataset-viewer.tsx
@@ -87,6 +87,7 @@ export function DatasetViewer({
           display: "flex",
           justifyContent: "space-between",
           marginBottom: "2.5rem",
+          flexWrap: "wrap",
         }}
       >
         {/* //? 제목 */}