From 22b5142c20c5917369d13b98cb276d892208fe4a Mon Sep 17 00:00:00 2001 From: Eugene Kim Date: Sun, 29 Oct 2023 01:30:20 +0900 Subject: [PATCH 1/5] =?UTF-8?q?feat:=20bottomsheet=20=EA=B8=B0=EB=B3=B8?= =?UTF-8?q?=EA=B2=BD=EB=A1=9C=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/preview.ts | 16 -------- .../bottomsheet/BottomSheet.stories.tsx | 17 ++++++++ .../common/bottomsheet/BottomSheet.tsx | 40 +++++++++++++++++++ 3 files changed, 57 insertions(+), 16 deletions(-) delete mode 100644 .storybook/preview.ts create mode 100644 src/components/common/bottomsheet/BottomSheet.stories.tsx create mode 100644 src/components/common/bottomsheet/BottomSheet.tsx diff --git a/.storybook/preview.ts b/.storybook/preview.ts deleted file mode 100644 index c7cca039..00000000 --- a/.storybook/preview.ts +++ /dev/null @@ -1,16 +0,0 @@ -import type { Preview } from '@storybook/react' -import '../src/styles/index.css' - -const preview: Preview = { - parameters: { - actions: { argTypesRegex: '^on[A-Z].*' }, - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/i - } - } - } -} - -export default preview diff --git a/src/components/common/bottomsheet/BottomSheet.stories.tsx b/src/components/common/bottomsheet/BottomSheet.stories.tsx new file mode 100644 index 00000000..240bd607 --- /dev/null +++ b/src/components/common/bottomsheet/BottomSheet.stories.tsx @@ -0,0 +1,17 @@ +// Button.stories.ts|tsx + +import type { Meta, StoryObj } from '@storybook/react' + +import BottomSheet from './BottomSheet' + +const meta: Meta = { + title: 'Components/BottomSheet', + component: BottomSheet +} + +export default meta +type Story = StoryObj + +export const Default: Story = { + render: () => +} diff --git a/src/components/common/bottomsheet/BottomSheet.tsx b/src/components/common/bottomsheet/BottomSheet.tsx new file mode 100644 index 00000000..fcf98544 --- /dev/null +++ b/src/components/common/bottomsheet/BottomSheet.tsx @@ -0,0 +1,40 @@ +import { useState } from 'react' + +interface BottomSheetProps { + title: string +} +const BottomSheet = ({ title }: BottomSheetProps) => { + const [expanded, setExpanded] = useState(false) + return ( +
+
+
+
+ {title} +
+
{'컨텐츠'}
+
+
+ //
+ // setExpanded(!expanded)} + // /> + // + //
+ ) +} + +export default BottomSheet From de364b6de5136f1c15be59f7a2cfdd1a864a52e1 Mon Sep 17 00:00:00 2001 From: Eugene Kim Date: Sun, 29 Oct 2023 02:22:12 +0900 Subject: [PATCH 2/5] =?UTF-8?q?feat:=20bottomSheet=20storybook=20=ED=85=8C?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BottomSheet/BottomSheetContent.tsx | 12 ++++++ .../BottomSheet/BottomSheetHeader.tsx | 24 +++++++++++ .../bottomsheet/BottomSheet.stories.tsx | 7 +++- .../common/bottomsheet/BottomSheet.tsx | 40 +++++++------------ src/components/common/icon/Icon.stories.tsx | 2 +- src/components/common/icon/Icon.tsx | 2 +- 6 files changed, 59 insertions(+), 28 deletions(-) create mode 100644 src/components/BottomSheet/BottomSheetContent.tsx create mode 100644 src/components/BottomSheet/BottomSheetHeader.tsx diff --git a/src/components/BottomSheet/BottomSheetContent.tsx b/src/components/BottomSheet/BottomSheetContent.tsx new file mode 100644 index 00000000..595ca017 --- /dev/null +++ b/src/components/BottomSheet/BottomSheetContent.tsx @@ -0,0 +1,12 @@ +const BottomSheetContent = ({ expanded }: { expanded: boolean }) => { + return ( +
+ + {' 서울 강동구 상암로 12 202호 (우) 05242 02-426-3688 '} + + {expanded &&
{'펼쳤을 때 나오는 어쩌구 '}
} +
+ ) +} + +export default BottomSheetContent diff --git a/src/components/BottomSheet/BottomSheetHeader.tsx b/src/components/BottomSheet/BottomSheetHeader.tsx new file mode 100644 index 00000000..29318e61 --- /dev/null +++ b/src/components/BottomSheet/BottomSheetHeader.tsx @@ -0,0 +1,24 @@ +import { useState } from 'react' +import { LikeBlank, LikeFilled } from '@/assets/icon' +const BottomSheetHeader = ({ title }: { title: string }) => { + const [liked, setLiked] = useState(false) + //TODO: 좋아요 API 로직 추가 + return ( +
+

{title}

+ {liked ? ( + setLiked(!liked)} + /> + ) : ( + setLiked(!liked)} + /> + )} +
+ ) +} + +export default BottomSheetHeader diff --git a/src/components/common/bottomsheet/BottomSheet.stories.tsx b/src/components/common/bottomsheet/BottomSheet.stories.tsx index 240bd607..d09cfbdd 100644 --- a/src/components/common/bottomsheet/BottomSheet.stories.tsx +++ b/src/components/common/bottomsheet/BottomSheet.stories.tsx @@ -6,7 +6,12 @@ import BottomSheet from './BottomSheet' const meta: Meta = { title: 'Components/BottomSheet', - component: BottomSheet + component: BottomSheet, + argTypes: { + title: { + control: 'text' + } + } } export default meta diff --git a/src/components/common/bottomsheet/BottomSheet.tsx b/src/components/common/bottomsheet/BottomSheet.tsx index fcf98544..3007ad8c 100644 --- a/src/components/common/bottomsheet/BottomSheet.tsx +++ b/src/components/common/bottomsheet/BottomSheet.tsx @@ -1,5 +1,7 @@ +/* eslint-disable prettier/prettier */ import { useState } from 'react' - +import BottomSheetContent from '@/components/BottomSheet/BottomSheetContent' +import BottomSheetHeader from '@/components/BottomSheet/BottomSheetHeader' interface BottomSheetProps { title: string } @@ -7,33 +9,21 @@ const BottomSheet = ({ title }: BottomSheetProps) => { const [expanded, setExpanded] = useState(false) return (
-
+
setExpanded(!expanded)}> +
+
+
-
- {title} -
-
{'컨텐츠'}
+ +
-
- //
- // setExpanded(!expanded)} - // /> - // - //
+ ) } diff --git a/src/components/common/icon/Icon.stories.tsx b/src/components/common/icon/Icon.stories.tsx index baaae249..baa48d7e 100644 --- a/src/components/common/icon/Icon.stories.tsx +++ b/src/components/common/icon/Icon.stories.tsx @@ -1,5 +1,5 @@ import type { Meta, StoryObj } from '@storybook/react' -import Icon from '@/components/common/icon/Icon' +import Icon from './Icon' const meta: Meta = { component: Icon, diff --git a/src/components/common/icon/Icon.tsx b/src/components/common/icon/Icon.tsx index ce6bc8c5..1af17825 100644 --- a/src/components/common/icon/Icon.tsx +++ b/src/components/common/icon/Icon.tsx @@ -1,4 +1,4 @@ -import Icons from '@/components/common/icon/Icons' +import Icons from './Icons' export type IconType = keyof typeof Icons export interface IconProps { From 6492397812a759cef2613af004f93124ce30d3cc Mon Sep 17 00:00:00 2001 From: Eugene Kim Date: Sun, 29 Oct 2023 02:26:13 +0900 Subject: [PATCH 3/5] =?UTF-8?q?feat=20:=20storybook=20bottomsheet=20?= =?UTF-8?q?=EC=84=A4=EB=AA=85=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20JSdoc=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/bottomsheet/BottomSheet.stories.tsx | 2 +- src/components/common/bottomsheet/BottomSheet.tsx | 10 ++++++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/src/components/common/bottomsheet/BottomSheet.stories.tsx b/src/components/common/bottomsheet/BottomSheet.stories.tsx index d09cfbdd..89ca403b 100644 --- a/src/components/common/bottomsheet/BottomSheet.stories.tsx +++ b/src/components/common/bottomsheet/BottomSheet.stories.tsx @@ -18,5 +18,5 @@ export default meta type Story = StoryObj export const Default: Story = { - render: () => + render: (args) => } diff --git a/src/components/common/bottomsheet/BottomSheet.tsx b/src/components/common/bottomsheet/BottomSheet.tsx index 3007ad8c..0e188890 100644 --- a/src/components/common/bottomsheet/BottomSheet.tsx +++ b/src/components/common/bottomsheet/BottomSheet.tsx @@ -2,15 +2,21 @@ import { useState } from 'react' import BottomSheetContent from '@/components/BottomSheet/BottomSheetContent' import BottomSheetHeader from '@/components/BottomSheet/BottomSheetHeader' + +/** + * @param title BottomSheet에 들어갈 Title을 입력합니다. + */ + +//TODO: 추후 BottomSheet 안의 내용은 client-side 상태관리 이용하여 정보 받아 사용할 예정. 이에 따라 title props도 사라질 수 있음 interface BottomSheetProps { title: string } -const BottomSheet = ({ title }: BottomSheetProps) => { +const BottomSheet = ({ title = '학원명 입력' }: BottomSheetProps) => { const [expanded, setExpanded] = useState(false) return (
setExpanded(!expanded)}> From a785541766e12c6f6ec71df70874c78661e76a19 Mon Sep 17 00:00:00 2001 From: Eugene Kim Date: Sun, 29 Oct 2023 02:35:33 +0900 Subject: [PATCH 4/5] =?UTF-8?q?fix:=20Detailcontent=EC=99=80=20margin-bott?= =?UTF-8?q?om=EA=B0=92=20=EC=A3=BC=EC=96=B4=EC=A7=80=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/BottomSheet/BottomSheetContent.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/BottomSheet/BottomSheetContent.tsx b/src/components/BottomSheet/BottomSheetContent.tsx index 595ca017..d81eb0d1 100644 --- a/src/components/BottomSheet/BottomSheetContent.tsx +++ b/src/components/BottomSheet/BottomSheetContent.tsx @@ -1,9 +1,9 @@ const BottomSheetContent = ({ expanded }: { expanded: boolean }) => { return (
- +
{' 서울 강동구 상암로 12 202호 (우) 05242 02-426-3688 '} - +
{expanded &&
{'펼쳤을 때 나오는 어쩌구 '}
}
) From 2f2ed6ede5b00cf3714601e665fe91ff3b129dae Mon Sep 17 00:00:00 2001 From: Eugene Kim Date: Mon, 30 Oct 2023 02:29:44 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20Label=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/index.tsx | 2 + src/components/common/label/Label.stories.tsx | 54 +++++++++++++++++++ src/components/common/label/Label.tsx | 53 ++++++++++++++++++ src/components/common/label/LabelType.ts | 49 +++++++++++++++++ 4 files changed, 158 insertions(+) create mode 100644 src/components/common/label/Label.stories.tsx create mode 100644 src/components/common/label/Label.tsx create mode 100644 src/components/common/label/LabelType.ts diff --git a/src/components/common/index.tsx b/src/components/common/index.tsx index ea373f83..ce1c9c47 100644 --- a/src/components/common/index.tsx +++ b/src/components/common/index.tsx @@ -1,2 +1,4 @@ // eslint-disable-next-line react-refresh/only-export-components export * from './selectweek/SelectWeek' +export * from './label/Label' +export * from './icon/Icon' diff --git a/src/components/common/label/Label.stories.tsx b/src/components/common/label/Label.stories.tsx new file mode 100644 index 00000000..b4453685 --- /dev/null +++ b/src/components/common/label/Label.stories.tsx @@ -0,0 +1,54 @@ +import type { Meta, StoryObj } from '@storybook/react' + +import Label from './Label' + +const meta: Meta = { + title: 'Components/Label', + component: Label, + argTypes: { + label: { + control: 'text' + }, + color: { + control: 'select', + options: ['default', 'selected', 'disabled'] + }, + icon: { + control: 'select', + options: [ + 'Abacus', + 'Computer', + 'English', + 'Etc', + 'Korean', + 'Math', + 'Music', + 'Science', + 'Music', + 'Social', + 'Synthesis', + 'Write' + ] + } + } +} + +export default meta +type Story = StoryObj + +export const Medium: Story = { + render: (args) => ( +