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``;