style: 드롭다운 & 표 overflow

HY-DATA-project · Jun 3, 2024 · 5383fcf · 5383fcf
1 parent 332e77b
commit 5383fcf
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 20 deletions.
diff --git a/src/components/dataset-table/dataset-table.tsx b/src/components/dataset-table/dataset-table.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { DatasetTableType } from "../../shared/types/dataset";
 import styles from "./dataset-table.module.css";
 import { getDatasetTable } from "../../shared/api/dataset-visual/getDatasetTable";
+import styled from "@emotion/styled";
 
 interface Props {
   datasetId: number;
@@ -31,28 +32,34 @@ export function DatasetTable({ datasetId }: Props) {
   return (
     <>
       {dataset && (
-        <table className={styles.table}>
-          <colgroup>
-            {new Array(dataset.label.length).fill(0).map((value, index) => (
-              <col key={`cg${index}`} width={`${colWidthPercent}%`} />
-            ))}
-          </colgroup>
-          {/* 1번 행 - 라벨 표시 */}
-          <tr>
-            {dataset.label.map((label, index) => (
-              <th key={index}>{label}</th>
-            ))}
-          </tr>
-          {/* 데이터 표시 영역 */}
-          {dataset.dataList.map((_, index) => (
-            <tr key={`row${index}`}>
-              {dataset.dataList[index].map((value, index) => (
-                <td key={`col${index}`}>{value}</td>
+        <Wrapper>
+          <table className={styles.table}>
+            <colgroup>
+              {new Array(dataset.label.length).fill(0).map((value, index) => (
+                <col key={`cg${index}`} width={`${colWidthPercent}%`} />
+              ))}
+            </colgroup>
+            {/* 1번 행 - 라벨 표시 */}
+            <tr>
+              {dataset.label.map((label, index) => (
+                <th key={index}>{label}</th>
               ))}
             </tr>
-          ))}
-        </table>
+            {/* 데이터 표시 영역 */}
+            {dataset.dataList.map((_, index) => (
+              <tr key={`row${index}`}>
+                {dataset.dataList[index].map((value, index) => (
+                  <td key={`col${index}`}>{value}</td>
+                ))}
+              </tr>
+            ))}
+          </table>
+        </Wrapper>
       )}
     </>
   );
 }
+
+const Wrapper = styled.div`
+  overflow-x: scroll;
+`;
diff --git a/src/components/drop-down/search-sort-dropdown.tsx b/src/components/drop-down/search-sort-dropdown.tsx
@@ -13,6 +13,7 @@ interface Props {
   defaultText?: string;
   style?: CSSProperties;
   width?: string | number;
+  maxHeight?: string;
 }
 
 export const SearchSortDropdown = ({
@@ -22,6 +23,7 @@ export const SearchSortDropdown = ({
   defaultText,
   style,
   width,
+  maxHeight = "20rem",
 }: Props) => {
   const dropdownRef = useRef(null);
 
@@ -60,7 +62,10 @@ export const SearchSortDropdown = ({
       </div>
 
       {isActive && (
-        <ul className={styles.listContainer} style={{ width: itemsWidth }}>
+        <ul
+          className={styles.listContainer}
+          style={{ width: itemsWidth, maxHeight: maxHeight, overflowY: "scroll" }}
+        >
           {items?.length ? (
             items.map((value, index) => (
               <li