부리미 v0.23 배포

src/App.tsx

@@ -29,6 +29,5 @@ const App = () => {
 export default App;
 
 const Body = styled.div`
-  height: calc(100vh - 16vh);
-  padding: 8vh 0 8vh 0;
+  padding: 8.5vh 0 8.5vh 0;
 `;

src/components/Card/InformCard/index.tsx

@@ -8,7 +8,6 @@ import useModals from '@hooks/useModals';
 import useRouter from '@hooks/useRouter';
 import { THEME } from '@styles/ThemeProvider/theme';
 import { IconKind } from '@type/styles/icon';
-import { setSize } from '@utils/styles/size';
 
 // TODO: InformCard 컴포넌트 Props 및 로직 수정
 
@@ -50,18 +49,26 @@ const InformCard = ({
   return (
     <>
       <Card data-testid="card" icon={icon} onClick={handleMajorModal}>
-        <Icon
-          kind={icon}
-          color={icon === 'school' ? THEME.TEXT.GRAY : THEME.TEXT.WHITE}
-        />
-        <span
+        <div
           css={css`
-            font-size: 18px;
-            font-weight: bold;
+            display: flex;
+            align-items: center;
           `}
         >
-          {title}
-        </span>
+          <Icon
+            kind={icon}
+            color={icon === 'school' ? THEME.TEXT.GRAY : THEME.TEXT.WHITE}
+          />
+          <span
+            css={css`
+              font-size: 18px;
+              font-weight: bold;
+              margin-left: 10px;
+            `}
+          >
+            {title}
+          </span>
+        </div>
         <span
           css={css`
             font-size: 16px;
@@ -84,16 +91,19 @@ const Card = styled.div<CardProps>(({ icon }) => {
     display: 'flex',
     flexDirection: 'column',
     padding: '15px',
+    marginBottom: '5%',
 
     borderRadius: '15px',
 
     backgroundColor: icon === 'school' ? THEME.BACKGROUND : THEME.PRIMARY,
     color: icon === 'school' ? THEME.TEXT.GRAY : THEME.TEXT.WHITE,
+    boxShadow: 'rgba(149, 157, 165, 0.2) 0px 8px 24px',
+
+    height: '90px',
 
     '& > svg': {
       margin: '10px 0',
     },
-    ...setSize(200, 150),
     cursor: 'pointer',
   };
 });

src/components/FooterTab/index.tsx

@@ -56,6 +56,7 @@ const Footer = styled.div`
   align-items: center;
   z-index: 2;
   background-color: ${THEME.TEXT.WHITE};
+  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
 `;
 
 const IconContainer = styled.div`

src/components/Header/index.tsx

@@ -37,6 +37,7 @@ const HeaderContainer = styled.div`
   height: 8vh;
   background-color: ${THEME.TEXT.WHITE};
   z-index: 2;
+  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
 `;
 
 const HeaderWrapper = styled.div`

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

@@ -1,51 +1,60 @@
 import http from '@apis/http';
 import InformCard from '@components/Card/InformCard';
-import { css } from '@emotion/react';
+import styled from '@emotion/styled';
 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]);
 
   return (
-    <>
-      <div
-        css={css`
-          display: flex;
-          justify-content: center;
-        `}
-      >
-        <InformCard
-          icon="notification"
-          title="공지사항"
-          majorRequired={false}
-          onClick={() => routerTo('/announcement')}
-        />
-        <InformCard
-          icon="school"
-          title="졸업요건"
-          majorRequired={true}
-          onClick={() => routerToGraduationRequired()}
-        />
-      </div>
-    </>
+    <Container>
+      <InformCard
+        icon="notification"
+        title="공지사항"
+        majorRequired={false}
+        onClick={() => routerTo('/announcement')}
+      />
+      <InformCard
+        icon="school"
+        title="졸업요건"
+        majorRequired={true}
+        onClick={() => routerToGraduationRequiredPage(graduationLink)}
+      />
+    </Container>
   );
 };
 
 export default Home;
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 85%;
+  text-aligb: center;
+  margin: 0 auto;
+`;
+
+interface GraduationLink {
+  department: string;
+  link: string | null;
+}

src/styles/Global/index.tsx

@@ -108,6 +108,7 @@ const resetCss = css`
     max-width: 480px;
     margin: 0 auto;
     min-height: 100vh;
+    background-color: #fffef9;
   }
   ol,
   ul {