diff --git a/src/components/dataset-table/dataset-table.tsx b/src/components/dataset-table/dataset-table.tsx index f53795e..029ddb3 100644 --- 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 && ( - - - {new Array(dataset.label.length).fill(0).map((value, index) => ( - - ))} - - {/* 1번 행 - 라벨 표시 */} - - {dataset.label.map((label, index) => ( - - ))} - - {/* 데이터 표시 영역 */} - {dataset.dataList.map((_, index) => ( - - {dataset.dataList[index].map((value, index) => ( - + +
{label}
{value}
+ + {new Array(dataset.label.length).fill(0).map((value, index) => ( + + ))} + + {/* 1번 행 - 라벨 표시 */} + + {dataset.label.map((label, index) => ( + ))} - ))} -
{label}
+ {/* 데이터 표시 영역 */} + {dataset.dataList.map((_, index) => ( + + {dataset.dataList[index].map((value, index) => ( + {value} + ))} + + ))} + + )} ); } + +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 index 9b7a95d..3a26cb1 100644 --- 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 = ({ {isActive && ( -