From 186e6b94132a1c84420fd046438f110b310268f4 Mon Sep 17 00:00:00 2001
From: hwinkr <dnddl8280@naver.com>
Date: Sat, 12 Aug 2023 16:43:52 +0900
Subject: [PATCH] =?UTF-8?q?Chore:=20=EC=84=9C=EB=B2=84=EC=99=80=20?=
 =?UTF-8?q?=EC=A1=B8=EC=97=85=EC=9A=94=EA=B1=B4=20=EB=8D=B0=EC=9D=B4?=
 =?UTF-8?q?=ED=84=B0=20=EC=8A=A4=ED=82=A4=EB=A7=88=20=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/mocks/handlers/graudationHandler.ts | 41 +++++++++++++++----------
 src/pages/Home/index.tsx                | 20 ++++++++----
 2 files changed, 38 insertions(+), 23 deletions(-)

diff --git a/src/mocks/handlers/graudationHandler.ts b/src/mocks/handlers/graudationHandler.ts
index 01c71ae4..26b7229b 100644
--- a/src/mocks/handlers/graudationHandler.ts
+++ b/src/mocks/handlers/graudationHandler.ts
@@ -1,26 +1,29 @@
 import { SERVER_URL } from '@config/index';
 import { RequestHandler, rest } from 'msw';
 
-type GRADUATION_LINK = {
-  [key in string]: {
-    link: string;
-  };
-};
+interface GraduationLink {
+  department: string;
+  link: string;
+}
 
-const MOCK_GRDUATION_LINK: GRADUATION_LINK = {
-  컴퓨터인공지능학부: {
-    link: 'https://ce.pknu.ac.kr/ce/2889',
+const MOCK_GRDUATION_LINK: GraduationLink[] = [
+  {
+    department: '데이터정보과학부',
+    link: 'https://archieng.pknu.ac.kr/archieng/1423?action=view&no=9911252',
   },
-  데이터정보과학부: {
-    link: 'https://www.youtube.com',
+  {
+    department: '미디어커뮤니케이션학부',
+    link: 'https://masscom.pknu.ac.kr/comm/3128?action=view&no=9916308',
   },
-  '조형학부 건축학전공': {
-    link: 'https://www.naver.com',
+  {
+    department: '컴퓨터인공지능학부',
+    link: 'https://ce.pknu.ac.kr/ce/2889',
   },
-  미디어커뮤니케이션학부: {
-    link: 'https://www.google.com',
+  {
+    department: '조형학부 건축학전공',
+    link: 'https://pknuarchi.pknu.ac.kr/pknuarchi/969?action=view&no=9933526',
   },
-};
+];
 
 export const graduationHandler: RequestHandler[] = [
   rest.get(`${SERVER_URL}/api/graduation`, (req, res, ctx) => {
@@ -30,8 +33,12 @@ export const graduationHandler: RequestHandler[] = [
       return res(
         ctx.status(200),
         ctx.json({
-          major: major,
-          graduationLink: MOCK_GRDUATION_LINK[major].link,
+          department: major,
+          link: MOCK_GRDUATION_LINK[
+            MOCK_GRDUATION_LINK.findIndex(
+              (graduationLink) => graduationLink.department === major,
+            )
+          ].link,
         }),
       );
     }
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index b0658636..8eef5897 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -3,22 +3,25 @@ import InformCard from '@components/Card/InformCard';
 import { css } from '@emotion/react';
 import useMajor from '@hooks/useMajor';
 import useRouter from '@hooks/useRouter';
+import { AxiosResponse } from 'axios';
 import { useEffect, useState } from 'react';
 
 const Home = () => {
-  const [graduationLink, setGraduationLink] = useState<string>('');
+  const [graduationLink, setGraduationLink] = useState<string | null>('');
   const { routerTo } = useRouter();
   const { major } = useMajor();
 
-  const routerToGraduationRequired = () => {
-    window.location.href = graduationLink;
+  const routerToGraduationRequiredPage = (graduationLink: string | null) => {
+    graduationLink && window.open(graduationLink, '_blank');
   };
 
   useEffect(() => {
     if (!major) return;
     const getGraduationLink = async () => {
-      const response = await http.get(`/api/graduation?major=${major}`);
-      setGraduationLink(response.data.graduationLink);
+      const response: AxiosResponse<GraduationLink> = await http.get(
+        `/api/graduation?major=${major}`,
+      );
+      setGraduationLink(response.data.link);
     };
     getGraduationLink();
   }, [major]);
@@ -41,7 +44,7 @@ const Home = () => {
           icon="school"
           title="졸업요건"
           majorRequired={true}
-          onClick={() => routerToGraduationRequired()}
+          onClick={() => routerToGraduationRequiredPage(graduationLink)}
         />
       </div>
     </>
@@ -49,3 +52,8 @@ const Home = () => {
 };
 
 export default Home;
+
+interface GraduationLink {
+  department: string;
+  link: string | null;
+}