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(''); + const [graduationLink, setGraduationLink] = useState(''); 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 = 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)} /> @@ -49,3 +52,8 @@ const Home = () => { }; export default Home; + +interface GraduationLink { + department: string; + link: string | null; +}