Merge pull request #37 from GDSC-PKNU-21-22/feat/#23

Feat/#23: Home 에서 사용할 Card 컴포넌트 구현

src/@types/styles/icon.ts

@@ -0,0 +1,8 @@
+export type IconKind =
+  | 'map'
+  | 'home'
+  | 'accountCircle'
+  | 'school'
+  | 'notification'
+  | 'menu'
+  | 'arrowBack';

src/components/Card/InformCard/index.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MemoryRouter } from 'react-router-dom';
+
+import '@testing-library/jest-dom';
+import InformCard from './index';
+
+describe('Card 클릭 시 페이지 이동이 잘 되는지에 대한 테스트', () => {
+  it('공지사항 클릭 테스트', () => {
+    const ICON = 'notification';
+    const TITLE = '공지사항';
+    const PATH = 'announcement';
+    render(<InformCard icon={ICON} title={TITLE} path={PATH} />, {
+      wrapper: MemoryRouter,
+    });
+
+    const card = screen.getByTestId('card');
+
+    (async () => {
+      await userEvent.click(card);
+      waitFor(() => {
+        expect(window.location.pathname).toBe(`/${PATH}`);
+      });
+    })();
+  });
+
+  it('졸업요건 클릭 테스트', () => {
+    const ICON = 'school';
+    const TITLE = '졸업요건';
+    const PATH = 'graduation-requirements';
+    render(<InformCard icon={ICON} title={TITLE} path={PATH} />, {
+      wrapper: MemoryRouter,
+    });
+
+    const card = screen.getByTestId('card');
+
+    (async () => {
+      await userEvent.click(card);
+      waitFor(() => {
+        expect(window.location.pathname).toBe(`/${PATH}`);
+      });
+    })();
+  });
+});

src/components/Card/InformCard/index.tsx

@@ -0,0 +1,65 @@
+import Icon from '@components/Icon';
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { THEME } from '@styles/ThemeProvider/theme';
+import { IconKind } from '@type/styles/icon';
+import { setSize } from '@utils/styles/size';
+import { useNavigate } from 'react-router-dom';
+
+interface InformCardProps {
+  icon: IconKind & ('school' | 'notification');
+  title: string;
+  path: string;
+}
+
+const InformCard = ({ icon, title, path }: InformCardProps) => {
+  const navigate = useNavigate();
+  const onClick = () => navigate(path);
+
+  return (
+    <Card data-testid="card" icon={icon} onClick={onClick}>
+      <Icon
+        kind={icon}
+        color={icon === 'school' ? THEME.TEXT.GRAY : THEME.TEXT.WHITE}
+      />
+      <span
+        css={css`
+          font-size: 18px;
+          font-weight: bold;
+        `}
+      >
+        {title}
+      </span>
+      <span
+        css={css`
+          font-size: 16px;
+          margin: auto 0;
+        `}
+      >
+        {title} 보러가기!
+      </span>
+    </Card>
+  );
+};
+
+export default InformCard;
+
+type CardProps = Pick<InformCardProps, 'icon'>;
+
+const Card = styled.div<CardProps>(({ icon }) => {
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    padding: '15px',
+
+    borderRadius: '15px',
+
+    backgroundColor: icon === 'school' ? THEME.BACKGROUND : THEME.PRIMARY,
+    color: icon === 'school' ? THEME.TEXT.GRAY : THEME.TEXT.WHITE,
+
+    '& > svg': {
+      margin: '10px 0',
+    },
+    ...setSize(200, 150),
+  };
+});

src/components/Icon/index.tsx

@@ -1,3 +1,4 @@
+import { IconKind } from '@type/styles/icon';
 import { IconType } from 'react-icons/lib';
 import {
   MdMap,
@@ -9,15 +10,6 @@ import {
   MdArrowBackIos,
 } from 'react-icons/md';
 
-type IconKind =
-  | 'map'
-  | 'home'
-  | 'accountCircle'
-  | 'school'
-  | 'notification'
-  | 'menu'
-  | 'arrowBack';
-
 const ICON: { [key in IconKind]: IconType } = {
   map: MdMap,
   home: MdHome,