From b39b29cce81be5f896edbe2dcde82c70c8719ac7 Mon Sep 17 00:00:00 2001 From: dongkyun-dev Date: Mon, 15 Jan 2024 23:34:24 +0900 Subject: [PATCH 1/9] =?UTF-8?q?style:=20dialog=20css=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Dialog/style.css.ts | 74 ++++++++++++++++++++++++++++++ 1 file changed, 74 insertions(+) create mode 100644 src/components/Dialog/style.css.ts diff --git a/src/components/Dialog/style.css.ts b/src/components/Dialog/style.css.ts new file mode 100644 index 00000000..aadd69a8 --- /dev/null +++ b/src/components/Dialog/style.css.ts @@ -0,0 +1,74 @@ +import { style } from '@vanilla-extract/css'; +import { recipe } from '@vanilla-extract/recipes'; + +import { sprinkles } from '@styles/sprinkles.css'; +import { COLORS } from '@styles/tokens'; + +export const dialogRoot = recipe({ + base: { + borderRadius: '12px', + boxShadow: '0px 8px 15px 0px rgba(28, 28, 28, 0.08);', + }, + variants: { + type: { + small: { + width: '100px', + padding: '8px', + }, + medium: { + width: '228px', + padding: '12px', + }, + }, + }, +}); + +export const dialogTitle = style({ + padding: '6px 12px 10px', +}); + +export const line = style({ + height: '1px', + width: '196px', + backgroundColor: COLORS['Grey/150'], + margin: '4px 0', +}); + +export const dialogButton = recipe({ + base: [ + sprinkles({ + typography: '15/Body/Regular', + }), + { + color: COLORS['Grey/900'], + borderRadius: '4px', + display: 'block', + ':hover': { + backgroundColor: COLORS['Grey/100'], + }, + }, + ], + variants: { + type: { + small: { + padding: '8px', + width: '84px', + selectors: { + '& + &': { + marginTop: '8px', + }, + }, + }, + medium: { + padding: '8px 12px', + width: '204px', + textAlign: 'left', + selectors: { + '& + &': { + marginTop: '8px', + }, + }, + }, + }, + }, +}); From 3f5f02aedaee8f927cda6d900a2909a5c88f9ee7 Mon Sep 17 00:00:00 2001 From: dongkyun-dev Date: Mon, 15 Jan 2024 23:34:56 +0900 Subject: [PATCH 2/9] =?UTF-8?q?feat:=20dialog=20context=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useDialogContext.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 src/hooks/useDialogContext.ts diff --git a/src/hooks/useDialogContext.ts b/src/hooks/useDialogContext.ts new file mode 100644 index 00000000..23636c72 --- /dev/null +++ b/src/hooks/useDialogContext.ts @@ -0,0 +1,15 @@ +import { useContext } from 'react'; + +import { DialogContext } from '../components/Dialog'; + +export const useDialogContext = () => { + const ctx = useContext(DialogContext); + + if (!ctx) { + throw new Error( + 'useDialogContext hook must be used within a Dialog component', + ); + } + + return ctx; +}; From 7dd31ab85549b8f7d932d6d27939db589f396366 Mon Sep 17 00:00:00 2001 From: dongkyun-dev Date: Mon, 15 Jan 2024 23:35:28 +0900 Subject: [PATCH 3/9] =?UTF-8?q?feat:=20dialog=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Dialog/components/DialogButton.tsx | 24 +++++++++++++ .../Dialog/components/DialogTitle.tsx | 14 ++++++++ src/components/Dialog/index.tsx | 34 +++++++++++++++++++ 3 files changed, 72 insertions(+) create mode 100644 src/components/Dialog/components/DialogButton.tsx create mode 100644 src/components/Dialog/components/DialogTitle.tsx create mode 100644 src/components/Dialog/index.tsx diff --git a/src/components/Dialog/components/DialogButton.tsx b/src/components/Dialog/components/DialogButton.tsx new file mode 100644 index 00000000..c57bc153 --- /dev/null +++ b/src/components/Dialog/components/DialogButton.tsx @@ -0,0 +1,24 @@ +import { type PropsWithChildren } from 'react'; + +import Button from '@components/Button'; +import * as styles from '@components/Dialog/style.css'; +import { useDialogContext } from '@hooks/useDialogContext'; + +interface DialogButtonProps { + onClick: () => void; +} + +const DialogButton = ({ + children, + onClick, +}: PropsWithChildren) => { + const { type } = useDialogContext(); + + return ( + + ); +}; + +export default DialogButton; diff --git a/src/components/Dialog/components/DialogTitle.tsx b/src/components/Dialog/components/DialogTitle.tsx new file mode 100644 index 00000000..e4f05213 --- /dev/null +++ b/src/components/Dialog/components/DialogTitle.tsx @@ -0,0 +1,14 @@ +import { type PropsWithChildren } from 'react'; + +import * as styles from '@components/Dialog/style.css'; + +const DialogTitle = ({ children }: PropsWithChildren) => { + return ( + <> +
{children}
+
+ + ); +}; + +export default DialogTitle; diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx new file mode 100644 index 00000000..8b3b9ca3 --- /dev/null +++ b/src/components/Dialog/index.tsx @@ -0,0 +1,34 @@ +import { createContext, type PropsWithChildren } from 'react'; +import { type RecipeVariants } from '@vanilla-extract/recipes'; + +import DialogButton from '@components/Dialog/components/DialogButton'; +import DialogTitle from '@components/Dialog/components/DialogTitle'; +import * as styles from '@components/Dialog/style.css'; + +interface DialogContextProps { + type?: 'small' | 'medium'; +} + +type DialogRootProps = RecipeVariants & + PropsWithChildren; + +export const DialogContext = createContext(null); + +const DialogRoot = ({ children, type }: DialogRootProps) => { + return ( + +
{children}
+ + ); +}; + +const Dialog = Object.assign(DialogRoot, { + Title: DialogTitle, + Button: DialogButton, +}); + +export default Dialog; From 75dae17711ecee917a81c479f1659c8a4e126446 Mon Sep 17 00:00:00 2001 From: dongkyun-dev Date: Tue, 16 Jan 2024 23:45:11 +0900 Subject: [PATCH 4/9] =?UTF-8?q?feat:=20icon=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/add.svg | 3 +++ src/assets/icons/logout.svg | 5 +++++ src/assets/icons/profileDialog.svg | 4 ++++ src/assets/icons/setting.svg | 3 +++ src/components/Icon/index.tsx | 18 ++++++++++++++++-- src/constants/icon.ts | 8 ++++++++ 6 files changed, 39 insertions(+), 2 deletions(-) create mode 100644 src/assets/icons/add.svg create mode 100644 src/assets/icons/logout.svg create mode 100644 src/assets/icons/profileDialog.svg create mode 100644 src/assets/icons/setting.svg diff --git a/src/assets/icons/add.svg b/src/assets/icons/add.svg new file mode 100644 index 00000000..e788253b --- /dev/null +++ b/src/assets/icons/add.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/logout.svg b/src/assets/icons/logout.svg new file mode 100644 index 00000000..81c02e2b --- /dev/null +++ b/src/assets/icons/logout.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/profileDialog.svg b/src/assets/icons/profileDialog.svg new file mode 100644 index 00000000..57914426 --- /dev/null +++ b/src/assets/icons/profileDialog.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/setting.svg b/src/assets/icons/setting.svg new file mode 100644 index 00000000..9c56e288 --- /dev/null +++ b/src/assets/icons/setting.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx index 75858b66..9f85329d 100644 --- a/src/components/Icon/index.tsx +++ b/src/components/Icon/index.tsx @@ -2,15 +2,29 @@ import { iconFactory, type Icons } from '../../constants/icon'; interface IconProps { icon: Icons; + className?: string; color?: string; width?: number; height?: number; } -const Icon = ({ icon, color, width = 24, height = 24 }: IconProps) => { +const Icon = ({ + icon, + className, + color, + width = 24, + height = 24, +}: IconProps) => { const SvgIcon = iconFactory[icon]; - return ; + return ( + + ); }; export default Icon; diff --git a/src/constants/icon.ts b/src/constants/icon.ts index 501e2eeb..9d171579 100644 --- a/src/constants/icon.ts +++ b/src/constants/icon.ts @@ -1,16 +1,24 @@ +import Add from '@assets/icons/add.svg'; import Archive from '@assets/icons/archive.svg'; import Close from '@assets/icons/close.svg'; import Copy from '@assets/icons/copy.svg'; +import Logout from '@assets/icons/logout.svg'; import Menu from '@assets/icons/menu.svg'; import Profle from '@assets/icons/profile.svg'; +import ProfileDialog from '@assets/icons/profileDialog.svg'; +import Setting from '@assets/icons/setting.svg'; import Submit from '@assets/icons/submit.svg'; export const iconFactory = { + add: Add, archive: Archive, close: Close, copy: Copy, + logout: Logout, menu: Menu, profile: Profle, + profileDialog: ProfileDialog, + setting: Setting, submit: Submit, }; From 032a20d5829c4ccee8f2895e237d68ec87ccc598 Mon Sep 17 00:00:00 2001 From: dongkyun-dev Date: Tue, 16 Jan 2024 23:46:36 +0900 Subject: [PATCH 5/9] =?UTF-8?q?feat:=20=EB=8B=A4=EC=9D=B4=EC=96=BC?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=20=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Dialog/Dialog.stories.tsx | 68 ++++++++++++++++++++++++ 1 file changed, 68 insertions(+) create mode 100644 src/components/Dialog/Dialog.stories.tsx diff --git a/src/components/Dialog/Dialog.stories.tsx b/src/components/Dialog/Dialog.stories.tsx new file mode 100644 index 00000000..1aecfc88 --- /dev/null +++ b/src/components/Dialog/Dialog.stories.tsx @@ -0,0 +1,68 @@ +import Icon from '@components/Icon'; +import type { Meta, StoryObj } from '@storybook/react'; + +import Dialog from '.'; +import * as styles from './style.css'; + +const meta: Meta = { + title: 'Components/Dialog', + component: Dialog, + parameters: { + componentSubtitle: '다양한 액션을 제공하는 컴포넌트', + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Small: Story = { + render: () => ( + <> + + {}}>수정하기 + {}}>삭제하기 + + + ), +}; + +export const MediumFolder: Story = { + render: () => ( + <> + + {}}> + OOO님의 폴더기본 + + {}}>폴더 이름1 + {}}>폴더 이름2 + {}}> + + 새 폴더 만들기 + + + + ), +}; + +export const MediumProfile: Story = { + render: () => ( + <> + + + +
+ 바로가나다라마바님 + + {}}> + + 계정 설정 + + {}}> + + 로그아웃 + +
+ + ), +}; From 5e15e1467749f6a1da46d3333905191eac1d0820 Mon Sep 17 00:00:00 2001 From: dongkyun-dev Date: Tue, 16 Jan 2024 23:47:16 +0900 Subject: [PATCH 6/9] =?UTF-8?q?style:=20style=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Dialog/style.css.ts | 70 ++++++++++++++++++++++++++++++ 1 file changed, 70 insertions(+) diff --git a/src/components/Dialog/style.css.ts b/src/components/Dialog/style.css.ts index aadd69a8..17fe7781 100644 --- a/src/components/Dialog/style.css.ts +++ b/src/components/Dialog/style.css.ts @@ -24,7 +24,9 @@ export const dialogRoot = recipe({ }); export const dialogTitle = style({ + position: 'relative', padding: '6px 12px 10px', + lineHeight: '40px', }); export const line = style({ @@ -72,3 +74,71 @@ export const dialogButton = recipe({ }, }, }); + +export const badge = style([ + sprinkles({ + typography: '11/Caption/Medium', + }), + { + marginLeft: '4px', + backgroundColor: COLORS['Blue/Light'], + color: COLORS['Blue/Default'], + width: '32px', + height: '20px', + display: 'inline-block', + verticalAlign: 'middle', + marginTop: '-2px', + padding: '3px 6px', + borderRadius: '100px', + }, +]); + +export const iconTitleText = style([ + sprinkles({ + typography: '16/Title/Medium', + }), + { + color: COLORS['Grey/900'], + marginLeft: '48px', + }, +]); + +export const iconMediumText = style([ + sprinkles({ + typography: '15/Body/Medium', + }), + { + color: COLORS['Grey/400'], + marginLeft: '28px', + }, +]); + +export const iconRegularText = style([ + sprinkles({ + typography: '15/Body/Regular', + }), + { + color: COLORS['Grey/800'], + marginLeft: '28px', + }, +]); + +export const addIcon = style({ + position: 'absolute', +}); + +export const circle = style({ + width: '40px', + height: '40px', + backgroundColor: COLORS['Grey/100'], + position: 'absolute', + top: '6px', + borderRadius: '50%', + zIndex: -1, +}); + +export const profileIcon = style({ + position: 'absolute', + top: '13px', + left: '20px', +}); From 6bb8727b18c3ad6baf2a9136368d5dc7fdf9ae2c Mon Sep 17 00:00:00 2001 From: dongkyun-dev Date: Thu, 18 Jan 2024 23:26:10 +0900 Subject: [PATCH 7/9] =?UTF-8?q?feat:=20svg=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/add.svg | 4 ++-- src/assets/icons/logout.svg | 2 +- src/assets/icons/setting.svg | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/assets/icons/add.svg b/src/assets/icons/add.svg index e788253b..88b48132 100644 --- a/src/assets/icons/add.svg +++ b/src/assets/icons/add.svg @@ -1,3 +1,3 @@ - - + + diff --git a/src/assets/icons/logout.svg b/src/assets/icons/logout.svg index 81c02e2b..cb87385a 100644 --- a/src/assets/icons/logout.svg +++ b/src/assets/icons/logout.svg @@ -1,4 +1,4 @@ - + diff --git a/src/assets/icons/setting.svg b/src/assets/icons/setting.svg index 9c56e288..257a4a0e 100644 --- a/src/assets/icons/setting.svg +++ b/src/assets/icons/setting.svg @@ -1,3 +1,3 @@ - - + + From 222b1f0d1b7badbf1444a3238134640d3488b6f1 Mon Sep 17 00:00:00 2001 From: dongkyun-dev Date: Thu, 18 Jan 2024 23:26:35 +0900 Subject: [PATCH 8/9] =?UTF-8?q?feat:=20=EB=A6=AC=EB=B7=B0=20=EC=82=AC?= =?UTF-8?q?=ED=95=AD=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Dialog/Dialog.stories.tsx | 16 ++++++++++++---- src/components/Dialog/index.tsx | 8 ++++---- src/components/Dialog/style.css.ts | 3 ++- src/components/Icon/index.tsx | 18 ++---------------- 4 files changed, 20 insertions(+), 25 deletions(-) diff --git a/src/components/Dialog/Dialog.stories.tsx b/src/components/Dialog/Dialog.stories.tsx index 1aecfc88..6980a584 100644 --- a/src/components/Dialog/Dialog.stories.tsx +++ b/src/components/Dialog/Dialog.stories.tsx @@ -37,7 +37,9 @@ export const MediumFolder: Story = { {}}>폴더 이름1 {}}>폴더 이름2 {}}> - +
+ +
새 폴더 만들기 @@ -50,16 +52,22 @@ export const MediumProfile: Story = { <> - +
+ +
바로가나다라마바님 {}}> - +
+ +
계정 설정 {}}> - +
+ +
로그아웃
diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx index 8b3b9ca3..bcd31da9 100644 --- a/src/components/Dialog/index.tsx +++ b/src/components/Dialog/index.tsx @@ -1,16 +1,16 @@ import { createContext, type PropsWithChildren } from 'react'; -import { type RecipeVariants } from '@vanilla-extract/recipes'; import DialogButton from '@components/Dialog/components/DialogButton'; import DialogTitle from '@components/Dialog/components/DialogTitle'; import * as styles from '@components/Dialog/style.css'; interface DialogContextProps { - type?: 'small' | 'medium'; + type: 'small' | 'medium'; } -type DialogRootProps = RecipeVariants & - PropsWithChildren; +interface DialogRootProps extends PropsWithChildren { + type: 'small' | 'medium'; +} export const DialogContext = createContext(null); diff --git a/src/components/Dialog/style.css.ts b/src/components/Dialog/style.css.ts index 17fe7781..e5a1591d 100644 --- a/src/components/Dialog/style.css.ts +++ b/src/components/Dialog/style.css.ts @@ -123,8 +123,9 @@ export const iconRegularText = style([ }, ]); -export const addIcon = style({ +export const icon = style({ position: 'absolute', + marginTop: '2px', }); export const circle = style({ diff --git a/src/components/Icon/index.tsx b/src/components/Icon/index.tsx index 9f85329d..75858b66 100644 --- a/src/components/Icon/index.tsx +++ b/src/components/Icon/index.tsx @@ -2,29 +2,15 @@ import { iconFactory, type Icons } from '../../constants/icon'; interface IconProps { icon: Icons; - className?: string; color?: string; width?: number; height?: number; } -const Icon = ({ - icon, - className, - color, - width = 24, - height = 24, -}: IconProps) => { +const Icon = ({ icon, color, width = 24, height = 24 }: IconProps) => { const SvgIcon = iconFactory[icon]; - return ( - - ); + return ; }; export default Icon; From 3e3ec8688cce1354d7875ecf6daefbbb1e5fdd75 Mon Sep 17 00:00:00 2001 From: dongkyun-dev Date: Fri, 19 Jan 2024 00:57:49 +0900 Subject: [PATCH 9/9] =?UTF-8?q?feat:=20type=20=ED=98=95=ED=83=9C=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/Dialog/index.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/Dialog/index.tsx b/src/components/Dialog/index.tsx index bcd31da9..b57ae9d9 100644 --- a/src/components/Dialog/index.tsx +++ b/src/components/Dialog/index.tsx @@ -8,9 +8,7 @@ interface DialogContextProps { type: 'small' | 'medium'; } -interface DialogRootProps extends PropsWithChildren { - type: 'small' | 'medium'; -} +type DialogRootProps = DialogContextProps & PropsWithChildren; export const DialogContext = createContext(null);