From fd2688c721444c1863267e49f212ce71890fe569 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Wed, 5 Apr 2023 23:26:29 +0900 Subject: [PATCH 1/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 2/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 3/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 4/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 5/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 6/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 7/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}`); + }); + })(); }); }); From e10821c1b3d1b941118df352c71606a992b0e273 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 10 Apr 2023 15:32:50 +0900 Subject: [PATCH 8/9] =?UTF-8?q?Refactor:=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=EC=97=90=EC=84=9C=20ThemeProvider=20?= =?UTF-8?q?=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 | 19 ++++++------------- 1 file changed, 6 insertions(+), 13 deletions(-) diff --git a/src/components/Card/InformCard/index.test.tsx b/src/components/Card/InformCard/index.test.tsx index 8cb61704..1e1856ec 100644 --- a/src/components/Card/InformCard/index.test.tsx +++ b/src/components/Card/InformCard/index.test.tsx @@ -1,4 +1,3 @@ -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'; @@ -11,12 +10,9 @@ describe('Card 클릭 시 페이지 이동이 잘 되는지에 대한 테스트' const ICON = 'notification'; const TITLE = '공지사항'; const PATH = 'announcement'; - render( - - - , - { wrapper: MemoryRouter }, - ); + render(, { + wrapper: MemoryRouter, + }); const card = screen.getByTestId('card'); @@ -32,12 +28,9 @@ describe('Card 클릭 시 페이지 이동이 잘 되는지에 대한 테스트' const ICON = 'school'; const TITLE = '졸업요건'; const PATH = 'graduation-requirements'; - render( - - - , - { wrapper: MemoryRouter }, - ); + render(, { + wrapper: MemoryRouter, + }); const card = screen.getByTestId('card'); From 186b8bdbe4edd6df7213db74a0af5cdf03833d43 Mon Sep 17 00:00:00 2001 From: hwinkr Date: Mon, 10 Apr 2023 15:33:21 +0900 Subject: [PATCH 9/9] =?UTF-8?q?Refactor:=20theme=20=EC=83=81=EC=88=98=20?= =?UTF-8?q?=EC=BB=A8=EB=B2=A4=EC=85=98=EC=97=90=20=EB=A7=9E=EA=B2=8C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Card/InformCard/index.tsx | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/src/components/Card/InformCard/index.tsx b/src/components/Card/InformCard/index.tsx index 39edd091..dbc508d4 100644 --- a/src/components/Card/InformCard/index.tsx +++ b/src/components/Card/InformCard/index.tsx @@ -1,7 +1,7 @@ import Icon from '@components/Icon'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; -import { theme } from '@styles/ThemeProvider/theme'; +import { THEME } from '@styles/ThemeProvider/theme'; import { IconKind } from '@type/styles/icon'; import { setSize } from '@utils/styles/size'; import { useNavigate } from 'react-router-dom'; @@ -12,8 +12,6 @@ interface InformCardProps { path: string; } -// 1. Card1 을 호출할 때, 넘겨주는 2개의 아이콘 종류(notification, school) 에 따라서 아이콘의 색깔과, 배경화면 색이 달라진다 - const InformCard = ({ icon, title, path }: InformCardProps) => { const navigate = useNavigate(); const onClick = () => navigate(path); @@ -22,7 +20,7 @@ const InformCard = ({ icon, title, path }: InformCardProps) => { ; -const Card = styled.div(({ icon, theme }) => { +const Card = styled.div(({ icon }) => { return { display: 'flex', flexDirection: 'column', @@ -56,8 +54,8 @@ const Card = styled.div(({ icon, theme }) => { borderRadius: '15px', - backgroundColor: icon === 'school' ? theme.background : theme.primary, - color: icon === 'school' ? theme.text.gray : theme.text.white, + backgroundColor: icon === 'school' ? THEME.BACKGROUND : THEME.PRIMARY, + color: icon === 'school' ? THEME.TEXT.GRAY : THEME.TEXT.WHITE, '& > svg': { margin: '10px 0',