Merge branch 'feat/#23' of https://github.com/GDSC-PKNU-21-22/pknu-no…

…tice into feat/#9

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,51 @@
+import ThemeProvider from '@styles/ThemeProvider';
+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(
+      <ThemeProvider>
+        <InformCard icon={ICON} title={TITLE} path={PATH} />
+      </ThemeProvider>,
+      { 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(
+      <ThemeProvider>
+        <InformCard icon={ICON} title={TITLE} path={PATH} />
+      </ThemeProvider>,
+      { 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,67 @@
+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;
+}
+
+// 1. Card1 을 호출할 때, 넘겨주는 2개의 아이콘 종류(notification, school) 에 따라서 아이콘의 색깔과, 배경화면 색이 달라진다
+
+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, theme }) => {
+  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,

src/styles/ThemeProvider/theme.ts

@@ -1 +1,20 @@
-export const theme = {};
+import { Theme } from '@emotion/react';
+
+export const theme: Theme = {
+  background: '#EAEAEA',
+
+  text: {
+    black: '#000000',
+    gray: '#808080',
+    white: '#FFFFFF',
+  },
+
+  primary: '#71BC5C',
+
+  button: {
+    green: '#71BC5C',
+    gray: '#E7E7E7',
+  },
+
+  modalBackground: 'rgba(0, 0, 0, 0.6)',
+};

src/styles/emotion.d.ts

@@ -0,0 +1,21 @@
+import '@emotion/react';
+
+declare module '@emotion/react' {
+  export interface Theme {
+    background: string; // EAEAEA
+    text: {
+      black: string;
+      gray: string;
+      white: string;
+    };
+
+    primary: string; // 71BC5C
+
+    button: {
+      green: string;
+      gray: string;
+    };
+
+    modalBackground: string;
+  }
+}