feat: pdf 시각화 및 시각화 미제공 미리보기

HY-DATA-project · Jun 3, 2024 · 04ab1d7 · 04ab1d7
1 parent ae5db2c
commit 04ab1d7
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 29 deletions.
diff --git 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 (
     <div className={styles.root}>
@@ -68,8 +72,9 @@ export default async function Page({ params }: { params: { id: string } }) {
         <tr>
           <th>라이선스</th>
           <td colSpan={3}>
-            저작권자표시(BY) : 이용이나 변경 및 2차적 저작물의 작성을 포함한
-            자유이용을 허락합니다.
+            {/* 저작권자표시(BY) : 이용이나 변경 및 2차적 저작물의 작성을 포함한
+            자유이용을 허락합니다. */}
+            {datasetDetail.license}
           </td>
         </tr>
       </table>
@@ -86,13 +91,26 @@ export default async function Page({ params }: { params: { id: string } }) {
 
       <div className={styles.divisionLine} />
 
-      <DatasetViewer
-        datasetId={datasetDetail.datasetId}
-        title={datasetDetail.title}
-        style={{
-          marginTop: "3rem",
-        }}
-      />
+      {datasetExtension === "pdf" ? (
+        <embed
+          // src={`${datasetDetail.resourceUrl}#toolbar=0&navpanes=0&scrollbar=0`}
+          src={`${datasetDetail.resourceUrl}`}
+          type="application/pdf"
+          style={{
+            width: "100%",
+            height: "50rem",
+          }}
+        />
+      ) : (
+        <DatasetViewer
+          datasetId={datasetDetail.datasetId}
+          axisResult={axisResult}
+          title={datasetDetail.title}
+          style={{
+            marginTop: "3rem",
+          }}
+        />
+      )}
     </div>
   );
 }
diff --git 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<boolean>(true);
-  const [axis, setAxis] = useState<string[]>([]);
   const [selectedAxis, setSelectedAxis] = useState<string>("");
 
   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 && (
             <SearchSortDropdown
-              items={axis}
+              items={axisResult.axis}
               selectedItem={selectedAxis}
               setSelectedItem={setSelectedAxis}
               width={"20rem"}
@@ -121,11 +113,29 @@ export function DatasetViewer({
       </div>
 
       {/* //* 그래프 */}
-      {isBarActive ? (
-        <BarChart datasetId={datasetId} colName={selectedAxis} />
-      ) : (
-        <DatasetTable datasetId={datasetId} />
+      {axisResult !== null &&
+        (isBarActive ? (
+          <BarChart datasetId={datasetId} colName={selectedAxis} />
+        ) : (
+          <DatasetTable datasetId={datasetId} />
+        ))}
+
+      {axisResult === null && (
+        <SuccessFailContainer>
+          <SuccessFailTitle>
+            ⚠️ 시각화 기능이 지원되지 않는 데이터 입니다.
+          </SuccessFailTitle>
+        </SuccessFailContainer>
       )}
     </div>
   );
 }
+
+const SuccessFailContainer = styled.div`
+  height: 20rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+const SuccessFailTitle = styled.h1``;