From 2bbe60f7631d480628f87c6fc12c4495a51cc3d8 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Wed, 5 Apr 2023 14:57:18 +0900 Subject: [PATCH 1/9] =?UTF-8?q?Config:=20theme=20=ED=83=80=EC=9E=85=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95=EC=9D=84=20=EC=9C=84=ED=95=9C=20declare=20?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/emotion.d.ts | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 src/styles/emotion.d.ts diff --git a/src/styles/emotion.d.ts b/src/styles/emotion.d.ts new file mode 100644 index 00000000..e17a842a --- /dev/null +++ b/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; + } +} From 2072b26fa62bb605f47145e05af8e3b783fd8bb2 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Wed, 5 Apr 2023 14:57:53 +0900 Subject: [PATCH 2/9] =?UTF-8?q?Config:=20theme=20=EC=83=89=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/styles/ThemeProvider/theme.ts | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/src/styles/ThemeProvider/theme.ts b/src/styles/ThemeProvider/theme.ts index bc7a0a6c..e0ba82a4 100644 --- a/src/styles/ThemeProvider/theme.ts +++ b/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)', +}; From fd2688c721444c1863267e49f212ce71890fe569 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Wed, 5 Apr 2023 23:26:29 +0900 Subject: [PATCH 3/9] =?UTF-8?q?Feat:=20=EA=B3=B5=EC=A7=80=EC=82=AC?= =?UTF-8?q?=ED=95=AD,=20=EC=A1=B8=EC=97=85=EC=9A=94=EA=B1=B4=20InformCard?= =?UTF-8?q?=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Card/InformCard/index.tsx | 67 ++++++++++++++++++++++++ 1 file changed, 67 insertions(+) create mode 100644 src/components/Card/InformCard/index.tsx diff --git a/src/components/Card/InformCard/index.tsx b/src/components/Card/InformCard/index.tsx new file mode 100644 index 00000000..9c5b2de5 --- /dev/null +++ b/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 ( + + + + {title} + + + {title} 보러가기! + + + ); +}; + +export default InformCard; + +type CardProps = Pick; + +const Card = styled.div(({ 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), + }; +}); From f1cfd4898dbd82017789fa2aa9038199bc42d10b Mon Sep 17 00:00:00 2001 From: hwinkr Date: Wed, 5 Apr 2023 23:27:22 +0900 Subject: [PATCH 4/9] =?UTF-8?q?Test:=20InformCard=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=9D=B4=EB=8F=99=20=ED=85=8C=EC=8A=A4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Card/InformCard/index.test.tsx | 47 +++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 src/components/Card/InformCard/index.test.tsx diff --git a/src/components/Card/InformCard/index.test.tsx b/src/components/Card/InformCard/index.test.tsx new file mode 100644 index 00000000..eb7ba440 --- /dev/null +++ b/src/components/Card/InformCard/index.test.tsx @@ -0,0 +1,47 @@ +import ThemeProvider from '@styles/ThemeProvider'; +import { fireEvent, render } from '@testing-library/react'; +import { BrowserRouter } from 'react-router-dom'; + +import '@testing-library/jest-dom'; +import InformCard from './index'; + +describe('Card 클릭 시 페이지 이동이 잘 되는지에 대한 테스트', () => { + it('공지사항 클릭 테스트', () => { + const icon = 'notification'; + const title = '공지사항'; + const path = 'announcement'; + const testComponent = render( + + + , + + , + ); + + const card = testComponent.container.querySelector('div'); + if (card) { + fireEvent.click(card); + expect(window.location.pathname).toBe(`/${path}`); + } + }); + + it('졸업요건 클릭 테스트', () => { + const icon = 'school'; + const title = '졸업요건'; + const path = 'announcement'; + const testComponent = render( + + + , + + , + ); + + const card = testComponent.container.querySelector('div'); + + if (card) { + fireEvent.click(card); + expect(window.location.pathname).toBe(`/${path}`); + } + }); +}); From 7e93150c9c2c201a985d34c801b751fd28eb2030 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Wed, 5 Apr 2023 23:28:48 +0900 Subject: [PATCH 5/9] =?UTF-8?q?Refactor:=20IconKind=20type=EC=9D=84=20@typ?= =?UTF-8?q?es/styles/icon.ts=20=EB=A1=9C=20=EC=9D=B4=EB=8F=99=20=ED=9B=84?= =?UTF-8?q?=20import?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Icon/index.tsx | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx index a7c9b861..075cf4e2 100644 --- a/src/components/Icon/index.tsx +++ b/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, From d7e6ee11b6345eb0ee8f73c3a309b6090af47885 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Wed, 5 Apr 2023 23:30:48 +0900 Subject: [PATCH 6/9] =?UTF-8?q?Chore:=20IconKind=20type=20=EC=9D=B4?= =?UTF-8?q?=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/@types/styles/icon.ts | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 src/@types/styles/icon.ts diff --git a/src/@types/styles/icon.ts b/src/@types/styles/icon.ts new file mode 100644 index 00000000..46552c3d --- /dev/null +++ b/src/@types/styles/icon.ts @@ -0,0 +1,8 @@ +export type IconKind = + | 'map' + | 'home' + | 'accountCircle' + | 'school' + | 'notification' + | 'menu' + | 'arrowBack'; From 40d95cd413affb06cfa4b56340a6c354c3444c9d Mon Sep 17 00:00:00 2001 From: hwinkr Date: Fri, 7 Apr 2023 12:32:46 +0900 Subject: [PATCH 7/9] =?UTF-8?q?Refactor:=20styled.div=20=EB=A5=BC=20?= =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EC=BD=94=EB=93=9C=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EC=A0=91=EA=B7=BC=ED=95=98=EA=B8=B0=20=EC=9C=84?= =?UTF-8?q?=ED=95=B4=20test-id=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Card/InformCard/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Card/InformCard/index.tsx b/src/components/Card/InformCard/index.tsx index 9c5b2de5..39edd091 100644 --- a/src/components/Card/InformCard/index.tsx +++ b/src/components/Card/InformCard/index.tsx @@ -19,7 +19,7 @@ const InformCard = ({ icon, title, path }: InformCardProps) => { const onClick = () => navigate(path); return ( - + Date: Fri, 7 Apr 2023 12:33:36 +0900 Subject: [PATCH 8/9] =?UTF-8?q?Refactor:=20=EC=83=81=EC=88=98=20=EC=BB=A8?= =?UTF-8?q?=EB=B2=A4=EC=85=98,=20MemoryRouter,=20screen,=20userEvent=20?= =?UTF-8?q?=EC=82=AC=EC=9A=A9=ED=95=B4=EC=84=9C=20=ED=85=8C=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Card/InformCard/index.test.tsx | 54 ++++++++++--------- 1 file changed, 28 insertions(+), 26 deletions(-) diff --git a/src/components/Card/InformCard/index.test.tsx b/src/components/Card/InformCard/index.test.tsx index eb7ba440..40f26782 100644 --- a/src/components/Card/InformCard/index.test.tsx +++ b/src/components/Card/InformCard/index.test.tsx @@ -1,47 +1,49 @@ import ThemeProvider from '@styles/ThemeProvider'; -import { fireEvent, render } from '@testing-library/react'; -import { BrowserRouter } from 'react-router-dom'; +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'; +// 3. memoryRouter, 가상 라우터 + describe('Card 클릭 시 페이지 이동이 잘 되는지에 대한 테스트', () => { it('공지사항 클릭 테스트', () => { - const icon = 'notification'; - const title = '공지사항'; - const path = 'announcement'; - const testComponent = render( + const ICON = 'notification'; + const TITLE = '공지사항'; + const PATH = 'announcement'; + render( - - , - + , + { wrapper: MemoryRouter }, ); - const card = testComponent.container.querySelector('div'); - if (card) { - fireEvent.click(card); - expect(window.location.pathname).toBe(`/${path}`); - } + const card = screen.getByTestId('card'); + + userEvent.click(card); + waitFor(() => { + expect(window.location.pathname).toBe(`/${PATH}`); + }); }); it('졸업요건 클릭 테스트', () => { - const icon = 'school'; - const title = '졸업요건'; - const path = 'announcement'; - const testComponent = render( + const ICON = 'school'; + const TITLE = '졸업요건'; + const PATH = 'graduation-requirements'; + render( - - , - + , + { wrapper: MemoryRouter }, ); - const card = testComponent.container.querySelector('div'); + const card = screen.getByTestId('card'); - if (card) { - fireEvent.click(card); - expect(window.location.pathname).toBe(`/${path}`); - } + userEvent.click(card); + waitFor(() => { + expect(window.location.pathname).toBe(`/${PATH}`); + }); }); }); From 663c8844f6ff2ba9215a7301751826d7f3dd2701 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Sun, 9 Apr 2023 22:02:28 +0900 Subject: [PATCH 9/9] =?UTF-8?q?Refactor:=20test=20=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EB=A1=9C=EC=A7=81=20=EC=88=98=EC=A0=95,=20=EC=A3=BC=EC=84=9D?= =?UTF-8?q?=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Card/InformCard/index.test.tsx | 22 ++++++++++--------- 1 file changed, 12 insertions(+), 10 deletions(-) diff --git a/src/components/Card/InformCard/index.test.tsx b/src/components/Card/InformCard/index.test.tsx index 40f26782..8cb61704 100644 --- a/src/components/Card/InformCard/index.test.tsx +++ b/src/components/Card/InformCard/index.test.tsx @@ -6,8 +6,6 @@ import { MemoryRouter } from 'react-router-dom'; import '@testing-library/jest-dom'; import InformCard from './index'; -// 3. memoryRouter, 가상 라우터 - describe('Card 클릭 시 페이지 이동이 잘 되는지에 대한 테스트', () => { it('공지사항 클릭 테스트', () => { const ICON = 'notification'; @@ -22,10 +20,12 @@ describe('Card 클릭 시 페이지 이동이 잘 되는지에 대한 테스트' const card = screen.getByTestId('card'); - userEvent.click(card); - waitFor(() => { - expect(window.location.pathname).toBe(`/${PATH}`); - }); + (async () => { + await userEvent.click(card); + waitFor(() => { + expect(window.location.pathname).toBe(`/${PATH}`); + }); + })(); }); it('졸업요건 클릭 테스트', () => { @@ -41,9 +41,11 @@ describe('Card 클릭 시 페이지 이동이 잘 되는지에 대한 테스트' const card = screen.getByTestId('card'); - userEvent.click(card); - waitFor(() => { - expect(window.location.pathname).toBe(`/${PATH}`); - }); + (async () => { + await userEvent.click(card); + waitFor(() => { + expect(window.location.pathname).toBe(`/${PATH}`); + }); + })(); }); });