Chore: 서버와 졸업요건 데이터 스키마 통일

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,
         }),
       );
     }

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,11 +44,16 @@ const Home = () => {
           icon="school"
           title="졸업요건"
           majorRequired={true}
-          onClick={() => routerToGraduationRequired()}
+          onClick={() => routerToGraduationRequiredPage(graduationLink)}
         />
       </div>
     </>
   );
 };
 
 export default Home;
+
+interface GraduationLink {
+  department: string;
+  link: string | null;
+}