feat: 리뷰 사항 반영

YAPP-Github · Jan 18, 2024 · 222b1f0 · 222b1f0
1 parent 6bb8727
commit 222b1f0
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 25 deletions.
diff --git a/src/components/Dialog/Dialog.stories.tsx b/src/components/Dialog/Dialog.stories.tsx
@@ -37,7 +37,9 @@ export const MediumFolder: Story = {
         <Dialog.Button onClick={() => {}}>폴더 이름1</Dialog.Button>
         <Dialog.Button onClick={() => {}}>폴더 이름2</Dialog.Button>
         <Dialog.Button onClick={() => {}}>
-          <Icon className={styles.addIcon} icon="add" />
+          <div className={styles.icon}>
+            <Icon icon="add" width={20} height={20} />
+          </div>
           <span className={styles.iconMediumText}>새 폴더 만들기</span>
         </Dialog.Button>
       </Dialog>
@@ -50,16 +52,22 @@ export const MediumProfile: Story = {
     <>
       <Dialog type="medium">
         <Dialog.Title>
-          <Icon className={styles.profileIcon} icon="profileDialog" />
+          <div className={styles.profileIcon}>
+            <Icon icon="profileDialog" />
+          </div>
           <div className={styles.circle} />
           <span className={styles.iconTitleText}>바로가나다라마바님</span>
         </Dialog.Title>
         <Dialog.Button onClick={() => {}}>
-          <Icon className={styles.addIcon} icon="setting" />
+          <div className={styles.icon}>
+            <Icon icon="setting" width={20} height={20} />
+          </div>
           <span className={styles.iconRegularText}>계정 설정</span>
         </Dialog.Button>
         <Dialog.Button onClick={() => {}}>
-          <Icon className={styles.addIcon} icon="logout" />
+          <div className={styles.icon}>
+            <Icon icon="logout" width={20} height={20} />
+          </div>
           <span className={styles.iconRegularText}>로그아웃</span>
         </Dialog.Button>
       </Dialog>

diff --git 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<typeof styles.dialogRoot> &
-  PropsWithChildren<unknown>;
+interface DialogRootProps extends PropsWithChildren {
+  type: 'small' | 'medium';
+}
 
 export const DialogContext = createContext<DialogContextProps | null>(null);
 

diff --git 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
@@ -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 (
-    <SvgIcon
-      className={className}
-      color={color}
-      width={width}
-      height={height}
-    />
-  );
+  return <SvgIcon color={color} width={width} height={height} />;
 };
 
 export default Icon;