From ae5db2c8751f87dc5eaf5d8fa70243fe538f85b0 Mon Sep 17 00:00:00 2001
From: minSsan <msp1125@hanyang.ac.kr>
Date: Mon, 3 Jun 2024 17:59:47 +0900
Subject: [PATCH 1/2] =?UTF-8?q?style:=20=EA=B2=80=EC=83=89=EA=B2=B0?=
 =?UTF-8?q?=EA=B3=BC=20=EA=B2=80=EC=83=89=EC=B0=BD=20=EB=84=88=EB=B9=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(default)/search-result/search-result.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/app/(default)/search-result/search-result.tsx b/src/app/(default)/search-result/search-result.tsx
index b913743..ee119df 100644
--- a/src/app/(default)/search-result/search-result.tsx
+++ b/src/app/(default)/search-result/search-result.tsx
@@ -148,8 +148,7 @@ export default function SearchResult({
       {/* //TODO */}
       <SearchBox
         boxstyle={{
-          marginTop: "3.75rem",
-          marginBottom: "6rem",
+          margin: "3.75rem 8rem 6rem 8rem",
         }}
         handleSubmit={handleSearchSubmit}
         initKeyword={searchParams.get(SERVER_PARAMS_KEY.KEYWORD)}

From 04ab1d7cd89c89eaa98d9d78e4bda42cac6f313e Mon Sep 17 00:00:00 2001
From: minSsan <msp1125@hanyang.ac.kr>
Date: Mon, 3 Jun 2024 18:01:24 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20pdf=20=EC=8B=9C=EA=B0=81=ED=99=94?=
 =?UTF-8?q?=20=EB=B0=8F=20=EC=8B=9C=EA=B0=81=ED=99=94=20=EB=AF=B8=EC=A0=9C?=
 =?UTF-8?q?=EA=B3=B5=20=EB=AF=B8=EB=A6=AC=EB=B3=B4=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(default)/search-result/[id]/page.tsx | 36 +++++++++----
 .../dataset-viewer/dataset-viewer.tsx         | 50 +++++++++++--------
 2 files changed, 57 insertions(+), 29 deletions(-)

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