[Feature/BAR-158] Dialog 컴포넌트 개발

src/components/Dialog/Dialog.stories.tsx

@@ -0,0 +1,76 @@
+import Icon from '@components/Icon';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Dialog from '.';
+import * as styles from './style.css';
+
+const meta: Meta<typeof Dialog> = {
+  title: 'Components/Dialog',
+  component: Dialog,
+  parameters: {
+    componentSubtitle: '다양한 액션을 제공하는 컴포넌트',
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Dialog>;
+
+export const Small: Story = {
+  render: () => (
+    <>
+      <Dialog type="small">
+        <Dialog.Button onClick={() => {}}>수정하기</Dialog.Button>
+        <Dialog.Button onClick={() => {}}>삭제하기</Dialog.Button>
+      </Dialog>
+    </>
+  ),
+};
+
+export const MediumFolder: Story = {
+  render: () => (
+    <>
+      <Dialog type="medium">
+        <Dialog.Button onClick={() => {}}>
+          OOO님의 폴더<span className={styles.badge}>기본</span>
+        </Dialog.Button>
+        <Dialog.Button onClick={() => {}}>폴더 이름1</Dialog.Button>
+        <Dialog.Button onClick={() => {}}>폴더 이름2</Dialog.Button>
+        <Dialog.Button onClick={() => {}}>
+          <div className={styles.icon}>
+            <Icon icon="add" width={20} height={20} />
+          </div>
+          <span className={styles.iconMediumText}>새 폴더 만들기</span>
+        </Dialog.Button>
+      </Dialog>
+    </>
+  ),
+};
+
+export const MediumProfile: Story = {
+  render: () => (
+    <>
+      <Dialog type="medium">
+        <Dialog.Title>
+          <div className={styles.profileIcon}>
+            <Icon icon="profileDialog" />
+          </div>
+          <div className={styles.circle} />
+          <span className={styles.iconTitleText}>바로가나다라마바님</span>
+        </Dialog.Title>
+        <Dialog.Button onClick={() => {}}>
+          <div className={styles.icon}>
+            <Icon icon="setting" width={20} height={20} />
+          </div>
+          <span className={styles.iconRegularText}>계정 설정</span>
+        </Dialog.Button>
+        <Dialog.Button onClick={() => {}}>
+          <div className={styles.icon}>
+            <Icon icon="logout" width={20} height={20} />
+          </div>
+          <span className={styles.iconRegularText}>로그아웃</span>
+        </Dialog.Button>
+      </Dialog>
+    </>
+  ),
+};

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<DialogButtonProps>) => {
+  const { type } = useDialogContext();
+
+  return (
+    <Button className={styles.dialogButton({ type })} onClick={onClick}>
+      {children}
+    </Button>
+  );
+};
+
+export default DialogButton;

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<unknown>) => {
+  return (
+    <>
+      <div className={styles.dialogTitle}>{children}</div>
+      <div className={styles.line} />
+    </>
+  );
+};
+
+export default DialogTitle;

src/components/Dialog/index.tsx

@@ -0,0 +1,32 @@
+import { createContext, type PropsWithChildren } from 'react';
+
+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 = DialogContextProps & PropsWithChildren;
+
+export const DialogContext = createContext<DialogContextProps | null>(null);
+
+const DialogRoot = ({ children, type }: DialogRootProps) => {
+  return (
+    <DialogContext.Provider
+      value={{
+        type,
+      }}
+    >
+      <div className={styles.dialogRoot({ type })}>{children}</div>
+    </DialogContext.Provider>
+  );
+};
+
+const Dialog = Object.assign(DialogRoot, {
+  Title: DialogTitle,
+  Button: DialogButton,
+});
+
+export default Dialog;

src/components/Dialog/style.css.ts

@@ -0,0 +1,145 @@
+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({
+  position: 'relative',
+  padding: '6px 12px 10px',
+  lineHeight: '40px',
+});
+
+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',
+          },
+        },
+      },
+    },
+  },
+});
+
+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 icon = style({
+  position: 'absolute',
+  marginTop: '2px',
+});
+
+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',
+});

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,
 };
 

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;
+};