diff --git a/src/app/(default)/search-result/[id]/page.tsx b/src/app/(default)/search-result/[id]/page.tsx index dc93a7e..2e5a487 100644 --- a/src/app/(default)/search-result/[id]/page.tsx +++ b/src/app/(default)/search-result/[id]/page.tsx @@ -1,10 +1,14 @@ import { DatasetTypeIcon, DatasetViewer, ScrapButton } from "../../../../components"; +import { getDatasetAxis } from "../../../../shared/api/dataset-visual/getDatasetAxis"; import { getDatasetDetail } from "../../../../shared/api/dataset/getDatasetDetail"; import styles from "./detail.module.css"; export default async function Page({ params }: { params: { id: string } }) { const datasetId = parseInt(params.id); const datasetDetail = await getDatasetDetail(datasetId); + const axisResult = await getDatasetAxis(datasetId); + + const datasetExtension = datasetDetail.type; return (
@@ -68,8 +72,9 @@ export default async function Page({ params }: { params: { id: string } }) { 라이선스 - 저작권자표시(BY) : 이용이나 변경 및 2차적 저작물의 작성을 포함한 - 자유이용을 허락합니다. + {/* 저작권자표시(BY) : 이용이나 변경 및 2차적 저작물의 작성을 포함한 + 자유이용을 허락합니다. */} + {datasetDetail.license} @@ -86,13 +91,26 @@ export default async function Page({ params }: { params: { id: string } }) {
- + {datasetExtension === "pdf" ? ( + + ) : ( + + )}
); } diff --git a/src/components/dataset-viewer/dataset-viewer.tsx b/src/components/dataset-viewer/dataset-viewer.tsx index d555cac..d995f7f 100644 --- a/src/components/dataset-viewer/dataset-viewer.tsx +++ b/src/components/dataset-viewer/dataset-viewer.tsx @@ -11,36 +11,28 @@ import { TableActive, TableInactive, } from "../../../public/svgs"; -import { getDatasetAxis } from "../../shared/api/dataset-visual/getDatasetAxis"; import { SearchSortDropdown } from "../drop-down/search-sort-dropdown"; +import styled from "@emotion/styled"; +import { DatasetAxisResult } from "../../shared/api/dataset-visual/type"; export function DatasetViewer({ datasetId, + axisResult, title, style, }: { datasetId: number; + axisResult: DatasetAxisResult; title: string; style?: CSSProperties; }) { const [isBarActive, setIsBarActive] = useState(true); - const [axis, setAxis] = useState([]); const [selectedAxis, setSelectedAxis] = useState(""); useEffect(() => { - async function fetchData() { - const result = await getDatasetAxis(datasetId); - - if (result === null) { - alert(`데이터 시각화 정보를 불러오는데 실패했습니다.`); - return; - } - - setAxis(result.axis); - setSelectedAxis(result.axis[0]); + if (axisResult !== null) { + setSelectedAxis(axisResult.axis[0]); } - - fetchData(); }, []); //* 데이터 시각화 선택 버튼 @@ -105,9 +97,9 @@ export function DatasetViewer({ display: "flex", }} > - {isBarActive && ( + {axisResult !== null && isBarActive && ( {/* //* 그래프 */} - {isBarActive ? ( - - ) : ( - + {axisResult !== null && + (isBarActive ? ( + + ) : ( + + ))} + + {axisResult === null && ( + + + ⚠️ 시각화 기능이 지원되지 않는 데이터 입니다. + + )}
); } + +const SuccessFailContainer = styled.div` + height: 20rem; + display: flex; + justify-content: center; + align-items: center; +`; + +const SuccessFailTitle = styled.h1``;