From db4a7961175f6f4c0fa649e8ac636f148f217558 Mon Sep 17 00:00:00 2001 From: Sunghyun627 Date: Mon, 13 May 2024 16:35:08 +0900 Subject: [PATCH 1/7] =?UTF-8?q?chore:=20msw=20worker=20=ED=99=9C=EC=84=B1?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Mocks/browser.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Mocks/browser.ts b/src/Mocks/browser.ts index 44f78f43..0a564278 100644 --- a/src/Mocks/browser.ts +++ b/src/Mocks/browser.ts @@ -1,4 +1,4 @@ -// import { setupWorker } from 'msw/browser'; -// import { handlers } from './handlers'; +import { setupWorker } from 'msw/browser'; +import { handlers } from './handlers'; -// export const worker = setupWorker(...handlers); +export const worker = setupWorker(...handlers); From 7808d239fd2cbd2cbf6c23819ce5675f6f2c229a Mon Sep 17 00:00:00 2001 From: Sunghyun627 Date: Mon, 13 May 2024 17:47:12 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?= =?UTF-8?q?=EC=83=81=EB=8B=A8=20=EB=B0=94(Topbar)=20=EB=A7=88=ED=81=AC?= =?UTF-8?q?=EC=97=85=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Topbar/index.tsx | 57 +++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 src/Components/Topbar/index.tsx diff --git a/src/Components/Topbar/index.tsx b/src/Components/Topbar/index.tsx new file mode 100644 index 00000000..b3602214 --- /dev/null +++ b/src/Components/Topbar/index.tsx @@ -0,0 +1,57 @@ +import styled from 'styled-components'; + +export interface TopBarProps { + /** 왼쪽방향 아이콘과 제목 사이의 gap */ + gap?: number; + + /** Topbar Title content */ + children?: React.ReactNode; +} + +export const TopBar = ({ gap = 12, children }: TopBarProps) => { + return ( + + {}}> + + + + + {children} + + ); +}; + +const TopbarWrapper = styled.div<{ gap?: number }>` + display: flex; + flex: 1 0 0; + max-width: 1224px; + width: 100%; + align-items: center; + gap: ${({ gap }) => `${gap}px`}; +`; + +const MoveBack = styled.div` + display: flex; + padding: 8px; + + &:hover { + cursor: pointer; + svg path { + fill-opacity: 0.85; + } + } +`; + +const TopBarTitle = styled.p` + color: ${({ theme }) => theme.color.black5}; + font-family: 'Pretendard600'; + font-size: 18px; + font-style: normal; + font-weight: 600; + line-height: 32px; + flex: 1 0 0; +`; From c9b0f1d8e7a842f53429d82b08df70ca63f6637d Mon Sep 17 00:00:00 2001 From: Sunghyun627 Date: Mon, 13 May 2024 17:48:50 +0900 Subject: [PATCH 3/7] =?UTF-8?q?feat:=20=EB=92=A4=EB=A1=9C=20=EA=B0=80?= =?UTF-8?q?=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C?= =?UTF-8?q?,=20=EC=9D=B4=EC=A0=84=20=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C?= =?UTF-8?q?=20=EC=9D=B4=EB=8F=99=ED=95=98=EB=8F=84=EB=A1=9D=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Topbar/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/Components/Topbar/index.tsx b/src/Components/Topbar/index.tsx index b3602214..cb1d436b 100644 --- a/src/Components/Topbar/index.tsx +++ b/src/Components/Topbar/index.tsx @@ -1,3 +1,4 @@ +import { useNavigate } from 'react-router-dom'; import styled from 'styled-components'; export interface TopBarProps { @@ -9,9 +10,10 @@ export interface TopBarProps { } export const TopBar = ({ gap = 12, children }: TopBarProps) => { + const navigate = useNavigate(); return ( - {}}> + navigate(-1)}> Date: Mon, 13 May 2024 17:49:26 +0900 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20Topbar=20=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Topbar/Tobar.stories.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 src/Components/Topbar/Tobar.stories.ts diff --git a/src/Components/Topbar/Tobar.stories.ts b/src/Components/Topbar/Tobar.stories.ts new file mode 100644 index 00000000..8970be50 --- /dev/null +++ b/src/Components/Topbar/Tobar.stories.ts @@ -0,0 +1,16 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { TopBar } from '.'; + +const meta = { + component: TopBar, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Primary: Story = { + args: { + children: '스터디원이 남긴 나의 리뷰', + }, +} satisfies Story; From 7d655bf60bddff8b9d753e89890e3caf17847f96 Mon Sep 17 00:00:00 2001 From: Sunghyun627 Date: Tue, 14 May 2024 16:26:44 +0900 Subject: [PATCH 5/7] =?UTF-8?q?chore:=20TopBar=EC=9D=98=20content=EB=A5=BC?= =?UTF-8?q?=20=EB=8B=B4=EB=8A=94=20=ED=83=9C=EA=B7=B8=EC=9D=98=20=EB=B3=80?= =?UTF-8?q?=EC=88=98=EB=AA=85=20=EC=88=98=EC=A0=95=20(SP-538)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Topbar/index.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/Components/Topbar/index.tsx b/src/Components/Topbar/index.tsx index cb1d436b..5aaec3ea 100644 --- a/src/Components/Topbar/index.tsx +++ b/src/Components/Topbar/index.tsx @@ -22,7 +22,7 @@ export const TopBar = ({ gap = 12, children }: TopBarProps) => { /> - {children} + {children} ); }; @@ -39,6 +39,8 @@ const TopbarWrapper = styled.div<{ gap?: number }>` const MoveBack = styled.div` display: flex; padding: 8px; + align-items: flex-end; + gap: 10px; &:hover { cursor: pointer; @@ -48,7 +50,7 @@ const MoveBack = styled.div` } `; -const TopBarTitle = styled.p` +const TopBarContent = styled.p` color: ${({ theme }) => theme.color.black5}; font-family: 'Pretendard600'; font-size: 18px; From 8b196c5505962034149920faaf3d77bd2443264c Mon Sep 17 00:00:00 2001 From: Sunghyun627 Date: Tue, 14 May 2024 21:05:17 +0900 Subject: [PATCH 6/7] =?UTF-8?q?chore:=20=EB=92=A4=EB=A1=9C=EA=B0=80?= =?UTF-8?q?=EA=B8=B0=20=ED=83=9C=EA=B7=B8=EB=A5=BC=20div=EC=97=90=EC=84=9C?= =?UTF-8?q?=20button=EC=9C=BC=EB=A1=9C=20=EC=88=98=EC=A0=95=20(SP-538)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Topbar/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/Topbar/index.tsx b/src/Components/Topbar/index.tsx index 5aaec3ea..a7b24963 100644 --- a/src/Components/Topbar/index.tsx +++ b/src/Components/Topbar/index.tsx @@ -36,7 +36,7 @@ const TopbarWrapper = styled.div<{ gap?: number }>` gap: ${({ gap }) => `${gap}px`}; `; -const MoveBack = styled.div` +const MoveBack = styled.button` display: flex; padding: 8px; align-items: flex-end; From 3383e9dc2fe41426242896b0324e97bfec604e61 Mon Sep 17 00:00:00 2001 From: Sunghyun627 Date: Thu, 16 May 2024 13:28:51 +0900 Subject: [PATCH 7/7] =?UTF-8?q?chore:=20styled-component=EC=9D=98=20props?= =?UTF-8?q?=EB=A1=9C=20=EC=A0=84=EB=8B=AC=ED=95=98=EB=8A=94=20=EB=B3=80?= =?UTF-8?q?=EC=88=98=EB=AA=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Components/Topbar/index.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Components/Topbar/index.tsx b/src/Components/Topbar/index.tsx index a7b24963..97366900 100644 --- a/src/Components/Topbar/index.tsx +++ b/src/Components/Topbar/index.tsx @@ -12,7 +12,7 @@ export interface TopBarProps { export const TopBar = ({ gap = 12, children }: TopBarProps) => { const navigate = useNavigate(); return ( - + navigate(-1)}> { ); }; -const TopbarWrapper = styled.div<{ gap?: number }>` +const TopbarWrapper = styled.div<{ $gap?: number }>` display: flex; flex: 1 0 0; max-width: 1224px; width: 100%; align-items: center; - gap: ${({ gap }) => `${gap}px`}; + gap: ${({ $gap }) => `${$gap}px`}; `; const MoveBack = styled.button`