From 6dd9b9b36f62a32158365bd7d2738dac0458a446 Mon Sep 17 00:00:00 2001
From: Seojisoo20191941 <amy0480@naver.com>
Date: Mon, 11 Dec 2023 23:19:56 +0900
Subject: [PATCH 1/8] =?UTF-8?q?chore:=20css=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/Dialog/DialogComponent.tsx     | 11 ++++++-----
 packages/ui/Dialog/components/index.tsx    | 10 ++--------
 packages/ui/Dialog/components/style.css.ts | 14 ++------------
 packages/ui/Dialog/style.css.ts            | 16 ++++++++++++++++
 4 files changed, 26 insertions(+), 25 deletions(-)

diff --git a/packages/ui/Dialog/DialogComponent.tsx b/packages/ui/Dialog/DialogComponent.tsx
index bf121b4..c14eef4 100644
--- a/packages/ui/Dialog/DialogComponent.tsx
+++ b/packages/ui/Dialog/DialogComponent.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Dialog from '.';
 import Button from '../Button';
 import CheckBox from '../CheckBox';
-import { buttonMinSize, buttonSize, checkBoxWapper } from './style.css';
+import { buttonMinSize, buttonSize, checkBoxWapper, descriptionMarginBottom } from './style.css';
 import { DialogValueProps } from './types';
 
 export const DialogComponent = ({
@@ -23,10 +23,11 @@ export const DialogComponent = ({
   return (
     <Dialog isOpen={isOpen} onClose={onClose} device={device}>
       <Dialog.Title device={device}>{title}</Dialog.Title>
-      <Dialog.Description device={device} isCheck={checkBoxOptions !== undefined}>
-        {description}
-      </Dialog.Description>
-
+      <div className={descriptionMarginBottom[`${device}${checkBoxOptions !== undefined}`]}>
+        <Dialog.Description device={device} isCheck={checkBoxOptions !== undefined}>
+          {description}
+        </Dialog.Description>
+      </div>
       {checkBoxOptions && (
         <div className={checkBoxWapper}>
           <CheckBox
diff --git a/packages/ui/Dialog/components/index.tsx b/packages/ui/Dialog/components/index.tsx
index b262a4f..a6821a1 100644
--- a/packages/ui/Dialog/components/index.tsx
+++ b/packages/ui/Dialog/components/index.tsx
@@ -1,19 +1,13 @@
 import React from 'react';
 import { ChildrenProp, DialogDescriptionProps, DialogFooterProp } from '../types';
-import { description, footer, gap, margintBottom, title } from './style.css';
+import { description, footer, gap, title } from './style.css';
 
 export function DialogTitle({ children, device }: ChildrenProp) {
   return <div className={title[device]}>{children}</div>;
 }
 
 export function DialogDescription({ children, device, isCheck = false }: DialogDescriptionProps) {
-  return (
-    <div
-      className={`${description[device]} ${device === 'desktop' && margintBottom[`${isCheck}`]}`}
-    >
-      {children}
-    </div>
-  );
+  return <div className={`${description[device]}`}>{children}</div>;
 }
 
 export function DialogFooter({ children, align, device }: DialogFooterProp) {
diff --git a/packages/ui/Dialog/components/style.css.ts b/packages/ui/Dialog/components/style.css.ts
index c963971..fc971bb 100644
--- a/packages/ui/Dialog/components/style.css.ts
+++ b/packages/ui/Dialog/components/style.css.ts
@@ -38,7 +38,6 @@ export const descriptionBase = style({
   maxHeight: '264px',
   overflowY: 'scroll',
   color: `${theme.colors.gray100}`,
-  marginBottom: 24,
 
   '::-webkit-scrollbar': {
     width: '4px',
@@ -79,15 +78,6 @@ export const description = styleVariants({
   ],
 });
 
-export const margintBottom = styleVariants({
-  true: {
-    marginBottom: 24,
-  },
-  false: {
-    marginBottom: 36,
-  },
-});
-
 export const footerBase = style({
   display: 'grid',
   gridAutoFlow: 'column',
@@ -95,8 +85,8 @@ export const footerBase = style({
 
 export const footer = styleVariants({
   center: [footerBase, { width: '100%', display: 'flex', justifyContent: 'space-between' }],
-  right: [footerBase, { width: '100%', display: 'flex', justifyContent: 'flex-end', gap: '12px' }],
-  left: [footerBase, { width: '100%', display: 'flex', justifyContent: 'flex-start', gap: '12px' }],
+  right: [footerBase, { width: '100%', display: 'flex', justifyContent: 'flex-end' }],
+  left: [footerBase, { width: '100%', display: 'flex', justifyContent: 'flex-start' }],
 });
 
 export const base = style({
diff --git a/packages/ui/Dialog/style.css.ts b/packages/ui/Dialog/style.css.ts
index 8e8ce53..77ccaa5 100644
--- a/packages/ui/Dialog/style.css.ts
+++ b/packages/ui/Dialog/style.css.ts
@@ -36,3 +36,19 @@ export const buttonMinSize = styleVariants({
 export const checkBoxWapper = style({
   marginBottom: 20,
 });
+
+export const descriptionMarginBottom = styleVariants({
+  // MEMO: true는 체크박스가 있는 경우, false는 없는 경우
+  mobiletrue: {
+    marginBottom: 24,
+  },
+  mobilefalse: {
+    marginBottom: 24,
+  },
+  desktoptrue: {
+    marginBottom: 24,
+  },
+  desktopfalse: {
+    marginBottom: 36,
+  },
+});

From e91fbcf733aab5e403ccca75ee41c47a6708d0c7 Mon Sep 17 00:00:00 2001
From: Seojisoo20191941 <amy0480@naver.com>
Date: Tue, 12 Dec 2023 00:43:43 +0900
Subject: [PATCH 2/8] =?UTF-8?q?chore:=20device=20=EA=B8=B0=EB=B3=B8?=
 =?UTF-8?q?=EA=B0=92=20=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/Dialog/components/index.tsx | 6 +++---
 packages/ui/Dialog/index.tsx            | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/ui/Dialog/components/index.tsx b/packages/ui/Dialog/components/index.tsx
index a6821a1..e1c5161 100644
--- a/packages/ui/Dialog/components/index.tsx
+++ b/packages/ui/Dialog/components/index.tsx
@@ -2,14 +2,14 @@ import React from 'react';
 import { ChildrenProp, DialogDescriptionProps, DialogFooterProp } from '../types';
 import { description, footer, gap, title } from './style.css';
 
-export function DialogTitle({ children, device }: ChildrenProp) {
+export function DialogTitle({ children, device = 'mobile' }: ChildrenProp) {
   return <div className={title[device]}>{children}</div>;
 }
 
-export function DialogDescription({ children, device, isCheck = false }: DialogDescriptionProps) {
+export function DialogDescription({ children, device = 'mobile' }: DialogDescriptionProps) {
   return <div className={`${description[device]}`}>{children}</div>;
 }
 
-export function DialogFooter({ children, align, device }: DialogFooterProp) {
+export function DialogFooter({ children, align, device = 'mobile' }: DialogFooterProp) {
   return <div className={`${footer[align]} ${gap[device]}`}>{children}</div>;
 }
diff --git a/packages/ui/Dialog/index.tsx b/packages/ui/Dialog/index.tsx
index 7be5813..8f9d361 100644
--- a/packages/ui/Dialog/index.tsx
+++ b/packages/ui/Dialog/index.tsx
@@ -10,7 +10,7 @@ export const DialogContainer: FC<DialogProps> = ({
   isOpen,
   onClose,
   children,
-  device,
+  device = 'mobile',
   ...restProps
 }) => {
   return (

From 705f598a234acaf92a0f7d1f87b13fb883575788 Mon Sep 17 00:00:00 2001
From: Seojisoo20191941 <amy0480@naver.com>
Date: Tue, 12 Dec 2023 22:40:56 +0900
Subject: [PATCH 3/8] =?UTF-8?q?chore:=20=EB=B0=98=EC=9D=91=ED=98=95=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/Dialog/DialogComponent.tsx     | 34 ++++------------------
 packages/ui/Dialog/components/index.tsx    |  2 +-
 packages/ui/Dialog/components/style.css.ts |  5 ++--
 packages/ui/Dialog/index.tsx               | 10 ++-----
 packages/ui/Dialog/style.css.ts            | 15 +++++-----
 packages/ui/cssVariables.ts                | 34 ++++++++++++++++++++++
 6 files changed, 51 insertions(+), 49 deletions(-)
 create mode 100644 packages/ui/cssVariables.ts

diff --git a/packages/ui/Dialog/DialogComponent.tsx b/packages/ui/Dialog/DialogComponent.tsx
index c14eef4..9aba402 100644
--- a/packages/ui/Dialog/DialogComponent.tsx
+++ b/packages/ui/Dialog/DialogComponent.tsx
@@ -42,44 +42,20 @@ export const DialogComponent = ({
       <Dialog.Footer align={device === 'mobile' ? 'center' : 'right'} device={device}>
         {type === 'default' && (
           <>
-            <Button
-              size="md"
-              rounded="md"
-              theme="black"
-              onClick={onClose}
-              className={buttonSize[device]}
-            >
+            <Button size="md" rounded="md" theme="black" onClick={onClose} className={buttonSize}>
               {typeOptions?.cancelButtonText}
             </Button>
-            <Button
-              size="md"
-              rounded="md"
-              theme="white"
-              onClick={onApprove}
-              className={buttonSize[device]}
-            >
+            <Button size="md" rounded="md" theme="white" onClick={onApprove} className={buttonSize}>
               {typeOptions?.approveButtonText}
             </Button>
           </>
         )}
         {type === 'danger' && (
           <>
-            <Button
-              size="md"
-              rounded="md"
-              theme="black"
-              onClick={onClose}
-              className={buttonSize[device]}
-            >
+            <Button size="md" rounded="md" theme="black" onClick={onClose} className={buttonSize}>
               {typeOptions?.cancelButtonText}
             </Button>
-            <Button
-              size="md"
-              rounded="md"
-              theme="red"
-              onClick={onApprove}
-              className={buttonSize[device]}
-            >
+            <Button size="md" rounded="md" theme="red" onClick={onApprove} className={buttonSize}>
               {typeOptions?.approveButtonText}
             </Button>
           </>
@@ -90,7 +66,7 @@ export const DialogComponent = ({
             rounded="md"
             theme="white"
             onClick={onApprove}
-            className={`${buttonSize[device]} ${device === 'mobile' && buttonMinSize['single']}`}
+            className={`${buttonSize} ${device === 'mobile' && buttonMinSize['single']}`}
           >
             {typeOptions?.approveButtonText}
           </Button>
diff --git a/packages/ui/Dialog/components/index.tsx b/packages/ui/Dialog/components/index.tsx
index e1c5161..afaebaa 100644
--- a/packages/ui/Dialog/components/index.tsx
+++ b/packages/ui/Dialog/components/index.tsx
@@ -11,5 +11,5 @@ export function DialogDescription({ children, device = 'mobile' }: DialogDescrip
 }
 
 export function DialogFooter({ children, align, device = 'mobile' }: DialogFooterProp) {
-  return <div className={`${footer[align]} ${gap[device]}`}>{children}</div>;
+  return <div className={`${footer[align]} ${gap}`}>{children}</div>;
 }
diff --git a/packages/ui/Dialog/components/style.css.ts b/packages/ui/Dialog/components/style.css.ts
index fc971bb..57dbde9 100644
--- a/packages/ui/Dialog/components/style.css.ts
+++ b/packages/ui/Dialog/components/style.css.ts
@@ -97,7 +97,6 @@ export const base = style({
   position: 'relative',
 });
 
-export const gap = styleVariants({
-  desktop: { gap: 12 },
-  mobile: { gap: 8 },
+export const gap = style({
+  gap: 'var(--mds-dialog-container-button-gap,12px)',
 });
diff --git a/packages/ui/Dialog/index.tsx b/packages/ui/Dialog/index.tsx
index 8f9d361..f97090e 100644
--- a/packages/ui/Dialog/index.tsx
+++ b/packages/ui/Dialog/index.tsx
@@ -6,19 +6,13 @@ import { DialogDescription, DialogFooter, DialogTitle } from './components';
 import { dialogContainer, overlay } from './style.css';
 import { DialogProps } from './types';
 
-export const DialogContainer: FC<DialogProps> = ({
-  isOpen,
-  onClose,
-  children,
-  device = 'mobile',
-  ...restProps
-}) => {
+export const DialogContainer: FC<DialogProps> = ({ isOpen, onClose, children, ...restProps }) => {
   return (
     <Dialogs.Root open={isOpen} onOpenChange={onClose}>
       <Dialogs.Portal>
         <Dialogs.Overlay className={overlay}>
           <div>
-            <Dialogs.Content className={dialogContainer[device]} asChild {...restProps}>
+            <Dialogs.Content className={dialogContainer} asChild {...restProps}>
               <div>{children}</div>
             </Dialogs.Content>
           </div>
diff --git a/packages/ui/Dialog/style.css.ts b/packages/ui/Dialog/style.css.ts
index 77ccaa5..fbc969d 100644
--- a/packages/ui/Dialog/style.css.ts
+++ b/packages/ui/Dialog/style.css.ts
@@ -1,17 +1,17 @@
 import { style, styleVariants } from '@vanilla-extract/css';
 import theme from '../theme.css';
 
-export const base = style({
+export const dialogContainer = style({
   display: 'flex',
   flexDirection: 'column',
   borderRadius: '14px',
   backgroundColor: `${theme.colors.gray800}`,
   position: 'relative',
-});
 
-export const dialogContainer = styleVariants({
-  desktop: [base, { width: '400px', padding: '24px' }],
-  mobile: [base, { maxWidth: '324px', padding: '20px', margin: '0px 36px', minWidth: '303px' }],
+  padding: 'var(--mds-dialog-container-padding, 24px)',
+  margin: 'var(--mds-dialog-container-margin, 0px )',
+  maxWidth: 'var(--mds-dialog-container-max-width, 400px)',
+  minWidth: 'var(--mds-dialog-container-min-width, 400px)',
 });
 
 export const overlay = style({
@@ -23,9 +23,8 @@ export const overlay = style({
   backgroundColor: `${theme.colors.backgroundDimmed}`,
 });
 
-export const buttonSize = styleVariants({
-  desktop: { width: '83px' },
-  mobile: { width: '100%' },
+export const buttonSize = style({
+  width: 'var(--mds-dialog-container-button-size, 83px)',
 });
 
 export const buttonMinSize = styleVariants({
diff --git a/packages/ui/cssVariables.ts b/packages/ui/cssVariables.ts
new file mode 100644
index 0000000..2123dbe
--- /dev/null
+++ b/packages/ui/cssVariables.ts
@@ -0,0 +1,34 @@
+export const desktopVariables = `:root {
+    --mds-toast-width: 380px;
+    --mds-toast-top: 36px;
+
+    --mds-dialog-container-padding:24px;
+    --mds-dialog-container-margin:0px;
+    --mds-dialog-container-max-width:400px;
+    --mds-dialog-container-min-width:400px;
+    --mds-dialog-container-button-size:83px;
+    --mds-dialog-container-button-gap:12px;
+
+  }`;
+
+export const mobileVariables = `:root {
+    --mds-toast-width: 343px;
+    --mds-toast-top: 16px;
+
+    --mds-dialog-container-padding:20px;
+    --mds-dialog-container-margin:0px 36px;
+    --mds-dialog-container-max-width:324px;
+    --mds-dialog-container-min-width:303px;
+    --mds-dialog-container-button-size:100%;
+    --mds-dialog-container-button-gap:8px;
+
+    --mds-dialog-title:{
+        fontFamily: 'SUIT',
+        fontSize: '18px',
+        fontStyle: 'normal',
+        fontWeight: '600',
+        lineHeight: '28px',
+        letterSpacing: '-0.36px',
+        marginBottom: 8,
+      },
+  }`;

From a03f7c082cb152dd36dba4e90c2d0d9a36e86059 Mon Sep 17 00:00:00 2001
From: Seojisoo20191941 <amy0480@naver.com>
Date: Tue, 12 Dec 2023 22:42:02 +0900
Subject: [PATCH 4/8] =?UTF-8?q?chore:=20SSR=EC=8B=9C=EC=A0=90=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20=EB=A0=8C=EB=8D=94=EB=A7=81=EB=90=98=EC=A7=80=20?=
 =?UTF-8?q?=EC=95=8A=EB=8F=84=EB=A1=9D=20=EB=A7=88=EC=9A=B4=ED=8A=B8=20?=
 =?UTF-8?q?=ED=99=95=EC=9D=B8=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/Dialog/DialogProvider.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/ui/Dialog/DialogProvider.tsx b/packages/ui/Dialog/DialogProvider.tsx
index 5549c71..91e930b 100644
--- a/packages/ui/Dialog/DialogProvider.tsx
+++ b/packages/ui/Dialog/DialogProvider.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import React, { ChangeEvent, createContext, useCallback, useState } from 'react';
+import React, { ChangeEvent, createContext, useCallback, useEffect, useState } from 'react';
 import { DialogComponent } from './DialogComponent';
 import { DialogOptionType, ProviderChildren } from './types';
 
@@ -12,6 +12,10 @@ export const DialogContext = createContext({
 
 function DialogProvider({ children }: ProviderChildren) {
   const [dialogOption, setDialogOption] = useState<DialogOptionType | null>(null);
+  const [isMounted, setIsMounted] = useState(false);
+  useEffect(() => {
+    setIsMounted(true);
+  });
 
   const openDialog = useCallback(
     (option: DialogOptionType) => {
@@ -34,7 +38,7 @@ function DialogProvider({ children }: ProviderChildren) {
   return (
     <DialogContext.Provider value={{ openDialog, closeDialog, checkCheckBox }}>
       {children}
-      {dialogOption && (
+      {dialogOption && isMounted && (
         <DialogComponent isOpen={dialogOption !== null} onClose={closeDialog} {...dialogOption} />
       )}
     </DialogContext.Provider>

From 92fc22d673da445843f27a577ff340a02317b949 Mon Sep 17 00:00:00 2001
From: Seojisoo20191941 <amy0480@naver.com>
Date: Tue, 12 Dec 2023 22:48:10 +0900
Subject: [PATCH 5/8] =?UTF-8?q?chore:=20isMount=20=EC=9C=84=EC=B9=98=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/Dialog/DialogProvider.tsx | 18 +++++++++++++-----
 1 file changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/ui/Dialog/DialogProvider.tsx b/packages/ui/Dialog/DialogProvider.tsx
index 91e930b..339c752 100644
--- a/packages/ui/Dialog/DialogProvider.tsx
+++ b/packages/ui/Dialog/DialogProvider.tsx
@@ -36,12 +36,20 @@ function DialogProvider({ children }: ProviderChildren) {
   };
 
   return (
-    <DialogContext.Provider value={{ openDialog, closeDialog, checkCheckBox }}>
-      {children}
-      {dialogOption && isMounted && (
-        <DialogComponent isOpen={dialogOption !== null} onClose={closeDialog} {...dialogOption} />
+    <>
+      {isMounted && (
+        <DialogContext.Provider value={{ openDialog, closeDialog, checkCheckBox }}>
+          {children}
+          {dialogOption && (
+            <DialogComponent
+              isOpen={dialogOption !== null}
+              onClose={closeDialog}
+              {...dialogOption}
+            />
+          )}
+        </DialogContext.Provider>
       )}
-    </DialogContext.Provider>
+    </>
   );
 }
 

From 3aa1d4b8381dc55c416430bf7396bcde93f82925 Mon Sep 17 00:00:00 2001
From: Seojisoo20191941 <amy0480@naver.com>
Date: Tue, 12 Dec 2023 23:31:02 +0900
Subject: [PATCH 6/8] =?UTF-8?q?chore:=20css=20variables=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/cssVariables.ts | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/packages/ui/cssVariables.ts b/packages/ui/cssVariables.ts
index 2123dbe..89a9e77 100644
--- a/packages/ui/cssVariables.ts
+++ b/packages/ui/cssVariables.ts
@@ -8,7 +8,6 @@ export const desktopVariables = `:root {
     --mds-dialog-container-min-width:400px;
     --mds-dialog-container-button-size:83px;
     --mds-dialog-container-button-gap:12px;
-
   }`;
 
 export const mobileVariables = `:root {
@@ -21,14 +20,4 @@ export const mobileVariables = `:root {
     --mds-dialog-container-min-width:303px;
     --mds-dialog-container-button-size:100%;
     --mds-dialog-container-button-gap:8px;
-
-    --mds-dialog-title:{
-        fontFamily: 'SUIT',
-        fontSize: '18px',
-        fontStyle: 'normal',
-        fontWeight: '600',
-        lineHeight: '28px',
-        letterSpacing: '-0.36px',
-        marginBottom: 8,
-      },
   }`;

From db1a404bbec5a7dc467408d401b352680babd5c3 Mon Sep 17 00:00:00 2001
From: Seojisoo20191941 <amy0480@naver.com>
Date: Wed, 20 Dec 2023 17:41:44 +0900
Subject: [PATCH 7/8] =?UTF-8?q?chore:=20=EC=B2=B4=ED=81=AC=EB=B0=95?=
 =?UTF-8?q?=EC=8A=A4=20=EA=B0=9D=EC=B2=B4=20=ED=8F=B0=ED=8A=B8=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/CheckBox/style.css.ts | 32 ++++++++++++-------------------
 1 file changed, 12 insertions(+), 20 deletions(-)

diff --git a/packages/ui/CheckBox/style.css.ts b/packages/ui/CheckBox/style.css.ts
index 54de982..6c7e9a2 100644
--- a/packages/ui/CheckBox/style.css.ts
+++ b/packages/ui/CheckBox/style.css.ts
@@ -37,26 +37,18 @@ export const checkBoxChecked = styleVariants({
 });
 
 export const checkBoxLabel = styleVariants({
-  small: {
-    marginLeft: '8px',
-    // MEMO: 객체 형태로 css 받도록 수정되면 수정하기
-    fontFamily: 'SUIT',
-    fontSize: '14px',
-    fontStyle: 'normal',
-    fontWeight: '400',
-    lineHeight: '22px',
-    letterSpacing: '-0.21px',
-  },
-  large: {
-    marginLeft: '10px',
-    // MEMO: 객체 형태로 css 받도록 수정되면 수정하기
-    fontFamily: 'SUIT',
-    fontSize: '16px',
-    fontStyle: 'normal',
-    fontWeight: '400',
-    lineHeight: '26px',
-    letterSpacing: '-0.24px',
-  },
+  small: [
+    theme.fontsObject.BODY_14_R,
+    {
+      marginLeft: '8px',
+    },
+  ],
+  large: [
+    theme.fontsObject.BODY_16_R,
+    {
+      marginLeft: '10px',
+    },
+  ],
 });
 
 export const labelColor = styleVariants({

From 6f2fe709cb6dbbec4216b6a55328d9ebe0a32fc4 Mon Sep 17 00:00:00 2001
From: Seojisoo20191941 <amy0480@naver.com>
Date: Wed, 20 Dec 2023 18:43:38 +0900
Subject: [PATCH 8/8] =?UTF-8?q?chore:=20=EB=8B=A4=EC=9D=B4=EC=96=BC?=
 =?UTF-8?q?=EB=A1=9C=EA=B7=B8=20=20=EA=B0=9D=EC=B2=B4=20=ED=8F=B0=ED=8A=B8?=
 =?UTF-8?q?=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/ui/Dialog/DialogComponent.tsx     |  6 +-
 packages/ui/Dialog/components/index.tsx    | 10 +--
 packages/ui/Dialog/components/style.css.ts | 76 +++++-----------------
 packages/ui/Dialog/style.css.ts            | 10 +--
 packages/ui/Dialog/types.ts                |  2 -
 packages/ui/cssVariables.ts                | 71 ++++++++++++++------
 6 files changed, 82 insertions(+), 93 deletions(-)

diff --git a/packages/ui/Dialog/DialogComponent.tsx b/packages/ui/Dialog/DialogComponent.tsx
index 9aba402..70de6fc 100644
--- a/packages/ui/Dialog/DialogComponent.tsx
+++ b/packages/ui/Dialog/DialogComponent.tsx
@@ -22,9 +22,9 @@ export const DialogComponent = ({
 
   return (
     <Dialog isOpen={isOpen} onClose={onClose} device={device}>
-      <Dialog.Title device={device}>{title}</Dialog.Title>
+      <Dialog.Title>{title}</Dialog.Title>
       <div className={descriptionMarginBottom[`${device}${checkBoxOptions !== undefined}`]}>
-        <Dialog.Description device={device} isCheck={checkBoxOptions !== undefined}>
+        <Dialog.Description isCheck={checkBoxOptions !== undefined}>
           {description}
         </Dialog.Description>
       </div>
@@ -39,7 +39,7 @@ export const DialogComponent = ({
           />
         </div>
       )}
-      <Dialog.Footer align={device === 'mobile' ? 'center' : 'right'} device={device}>
+      <Dialog.Footer align={device === 'mobile' ? 'center' : 'right'}>
         {type === 'default' && (
           <>
             <Button size="md" rounded="md" theme="black" onClick={onClose} className={buttonSize}>
diff --git a/packages/ui/Dialog/components/index.tsx b/packages/ui/Dialog/components/index.tsx
index afaebaa..f33fbff 100644
--- a/packages/ui/Dialog/components/index.tsx
+++ b/packages/ui/Dialog/components/index.tsx
@@ -2,14 +2,14 @@ import React from 'react';
 import { ChildrenProp, DialogDescriptionProps, DialogFooterProp } from '../types';
 import { description, footer, gap, title } from './style.css';
 
-export function DialogTitle({ children, device = 'mobile' }: ChildrenProp) {
-  return <div className={title[device]}>{children}</div>;
+export function DialogTitle({ children }: ChildrenProp) {
+  return <div className={title}>{children}</div>;
 }
 
-export function DialogDescription({ children, device = 'mobile' }: DialogDescriptionProps) {
-  return <div className={`${description[device]}`}>{children}</div>;
+export function DialogDescription({ children }: DialogDescriptionProps) {
+  return <div className={`${description}`}>{children}</div>;
 }
 
-export function DialogFooter({ children, align, device = 'mobile' }: DialogFooterProp) {
+export function DialogFooter({ children, align }: DialogFooterProp) {
   return <div className={`${footer[align]} ${gap}`}>{children}</div>;
 }
diff --git a/packages/ui/Dialog/components/style.css.ts b/packages/ui/Dialog/components/style.css.ts
index 57dbde9..7429a33 100644
--- a/packages/ui/Dialog/components/style.css.ts
+++ b/packages/ui/Dialog/components/style.css.ts
@@ -1,44 +1,29 @@
 import { style, styleVariants } from '@vanilla-extract/css';
 import theme from '../../theme.css';
 
-export const titleBase = style({
+export const title = style({
   color: `${theme.colors.gray10}`,
-  marginBottom: 12,
+  marginBottom: 'var(-mds-dialog-title-margin-bottom,8px)',
+  fontFamily: 'var(-mds-dialog-title-font-family, SUIT)',
+  fontSize: 'var(-mds-dialog-title-font-size, 18px)',
+  fontStyle: 'var(-mds-dialog-title-font-stlye, normal)',
+  fontWeight: 'var(-mds-dialog-title-font-weight, 600)',
+  lineHeight: 'var(-mds-dialog-title-font-line-height, 28px)',
+  letterSpacing: 'var(-mds-dialog-title-font-letter-spacing, -2%)',
 });
 
-export const title = styleVariants({
-  desktop: [
-    titleBase,
-    {
-      // TODO: css 객체로 폰트 나오면 수정 예정입니다
-      fontFamily: 'SUIT',
-      fontSize: '20px',
-      fontStyle: 'normal',
-      fontWeight: '600',
-      lineHeight: '30px',
-      letterSpacing: '-0.4px',
-    },
-  ],
-  mobile: [
-    titleBase,
-    {
-      // TODO: css 객체로 폰트 나오면 수정 예정입니다
-      fontFamily: 'SUIT',
-      fontSize: '18px',
-      fontStyle: 'normal',
-      fontWeight: '600',
-      lineHeight: '28px',
-      letterSpacing: '-0.36px',
-      marginBottom: 8,
-    },
-  ],
-});
-
-export const descriptionBase = style({
+export const description = style({
   maxHeight: '264px',
   overflowY: 'scroll',
   color: `${theme.colors.gray100}`,
 
+  fontFamily: 'var(-mds-dialog-description-font-family, SUIT)',
+  fontSize: 'var(-mds-dialog-description-font-size, 14px)',
+  fontStyle: 'var(-mds-dialog-description-font-stlye, normal)',
+  fontWeight: 'var(-mds-dialog-description-font-weight, 400)',
+  lineHeight: 'var(-mds-dialog-description-font-line-height, 22px)',
+  letterSpacing: 'var(-mds-dialog-v-font-letter-spacing, -1.5%)',
+
   '::-webkit-scrollbar': {
     width: '4px',
   },
@@ -51,33 +36,6 @@ export const descriptionBase = style({
   },
 });
 
-export const description = styleVariants({
-  desktop: [
-    descriptionBase,
-    {
-      // TODO: css 객체로 폰트 나오면 수정 예정입니다
-      fontFamily: 'SUIT',
-      fontSize: '16px',
-      fontStyle: 'normal',
-      fontWeight: '400',
-      lineHeight: '26px',
-      letterSpacing: '-0.24px',
-    },
-  ],
-  mobile: [
-    descriptionBase,
-    {
-      // TODO: css 객체로 폰트 나오면 수정 예정입니다
-      fontFamily: 'SUIT',
-      fontSize: '14px',
-      fontStyle: 'normal',
-      fontWeight: '400',
-      lineHeight: '22px',
-      letterSpacing: '-0.21px',
-    },
-  ],
-});
-
 export const footerBase = style({
   display: 'grid',
   gridAutoFlow: 'column',
@@ -98,5 +56,5 @@ export const base = style({
 });
 
 export const gap = style({
-  gap: 'var(--mds-dialog-container-button-gap,12px)',
+  gap: 'var(--mds-dialog-container-button-gap,8px)',
 });
diff --git a/packages/ui/Dialog/style.css.ts b/packages/ui/Dialog/style.css.ts
index fbc969d..0b17ff5 100644
--- a/packages/ui/Dialog/style.css.ts
+++ b/packages/ui/Dialog/style.css.ts
@@ -8,10 +8,10 @@ export const dialogContainer = style({
   backgroundColor: `${theme.colors.gray800}`,
   position: 'relative',
 
-  padding: 'var(--mds-dialog-container-padding, 24px)',
-  margin: 'var(--mds-dialog-container-margin, 0px )',
-  maxWidth: 'var(--mds-dialog-container-max-width, 400px)',
-  minWidth: 'var(--mds-dialog-container-min-width, 400px)',
+  padding: 'var(--mds-dialog-container-padding, 20px)',
+  margin: 'var(--mds-dialog-container-margin, 0px 36px )',
+  maxWidth: 'var(--mds-dialog-container-max-width, 324px)',
+  minWidth: 'var(--mds-dialog-container-min-width, 303px)',
 });
 
 export const overlay = style({
@@ -24,7 +24,7 @@ export const overlay = style({
 });
 
 export const buttonSize = style({
-  width: 'var(--mds-dialog-container-button-size, 83px)',
+  width: 'var(--mds-dialog-container-button-size, 100%)',
 });
 
 export const buttonMinSize = styleVariants({
diff --git a/packages/ui/Dialog/types.ts b/packages/ui/Dialog/types.ts
index 289e81a..9e605f0 100644
--- a/packages/ui/Dialog/types.ts
+++ b/packages/ui/Dialog/types.ts
@@ -3,7 +3,6 @@ import { CheckBoxProps } from '../CheckBox';
 
 export interface ChildrenProp {
   children: ReactNode;
-  device: 'desktop' | 'mobile';
 }
 
 export interface DialogDescriptionProps extends ChildrenProp {
@@ -12,7 +11,6 @@ export interface DialogDescriptionProps extends ChildrenProp {
 
 export interface DialogFooterProp extends ChildrenProp {
   align: 'center' | 'left' | 'right';
-  device: 'desktop' | 'mobile';
 }
 
 interface TypeOptionsProp {
diff --git a/packages/ui/cssVariables.ts b/packages/ui/cssVariables.ts
index 89a9e77..fb93d11 100644
--- a/packages/ui/cssVariables.ts
+++ b/packages/ui/cssVariables.ts
@@ -1,23 +1,56 @@
 export const desktopVariables = `:root {
-    --mds-toast-width: 380px;
-    --mds-toast-top: 36px;
+  --mds-toast-width: 380px;
+  --mds-toast-top: 36px;
 
-    --mds-dialog-container-padding:24px;
-    --mds-dialog-container-margin:0px;
-    --mds-dialog-container-max-width:400px;
-    --mds-dialog-container-min-width:400px;
-    --mds-dialog-container-button-size:83px;
-    --mds-dialog-container-button-gap:12px;
-  }`;
+  --mds-dialog-container-padding:24px;
+  --mds-dialog-container-margin:0px;
+  --mds-dialog-container-max-width:400px;
+  --mds-dialog-container-min-width:400px;
+  --mds-dialog-container-button-size:83px;
+  --mds-dialog-container-button-gap:12px;
+
+  --mds-dialog-title-font-family: SUIT;
+  --mds-dialog-title-font-size:20px;
+  --mds-dialog-title-font-style:normal;
+  --mds-dialog-title-font-weight:600;
+  --mds-dialog-title-font-line-height:30px;
+  --mds-dialog-title-font-letter-spacing:-2%;
+
+  --mds-dialog-title-margin-bottom:12;
+
+  
+  --mds-dialog-description-font-family: SUIT;
+  --mds-dialog-description-font-size:16px;
+  --mds-dialog-description-font-style:normal;
+  --mds-dialog-description-font-weight:400;
+  --mds-dialog-description-font-line-height:26px;
+  --mds-dialog-description-font-letter-spacing:-1.5%;
+}`;
 
 export const mobileVariables = `:root {
-    --mds-toast-width: 343px;
-    --mds-toast-top: 16px;
-
-    --mds-dialog-container-padding:20px;
-    --mds-dialog-container-margin:0px 36px;
-    --mds-dialog-container-max-width:324px;
-    --mds-dialog-container-min-width:303px;
-    --mds-dialog-container-button-size:100%;
-    --mds-dialog-container-button-gap:8px;
-  }`;
+  --mds-toast-width: 343px;
+  --mds-toast-top: 16px;
+
+  --mds-dialog-container-padding:20px;
+  --mds-dialog-container-margin:0px 36px;
+  --mds-dialog-container-max-width:324px;
+  --mds-dialog-container-min-width:303px;
+  --mds-dialog-container-button-size:100%;
+  --mds-dialog-container-button-gap:8px;
+
+  --mds-dialog-title-font-family: SUIT;
+  --mds-dialog-title-font-size:18px;
+  --mds-dialog-title-font-style:normal;
+  --mds-dialog-title-font-weight:600;
+  --mds-dialog-title-font-line-height:28px;
+  --mds-dialog-title-font-letter-spacing:-2%;
+
+  --mds-dialog-title-margin-bottom:8;
+  
+  --mds-dialog-description-font-family: SUIT;
+  --mds-dialog-description-font-size:14px;
+  --mds-dialog-description-font-style:normal;
+  --mds-dialog-description-font-weight:400;
+  --mds-dialog-description-font-line-height:22px;
+  --mds-dialog-description-font-letter-spacing:-1.5%;
+}`;