Merge pull request #37 from sopt-makers/chore/#34-dialogDetail

feat: 다이얼로그 디테일 수정
sopt-makers · Jan 14, 2024 · f6e01ec · f6e01ec
2 parents 4bf1b9d + 6f2fe70
commit f6e01ec
Show file tree

Hide file tree

Showing 9 changed files with 151 additions and 166 deletions.
diff --git 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({

diff --git 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 = ({
@@ -22,11 +22,12 @@ 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>
-
+      <Dialog.Title>{title}</Dialog.Title>
+      <div className={descriptionMarginBottom[`${device}${checkBoxOptions !== undefined}`]}>
+        <Dialog.Description isCheck={checkBoxOptions !== undefined}>
+          {description}
+        </Dialog.Description>
+      </div>
       {checkBoxOptions && (
         <div className={checkBoxWapper}>
           <CheckBox
@@ -38,47 +39,23 @@ 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[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>
           </>
@@ -89,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/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) => {
@@ -32,12 +36,20 @@ function DialogProvider({ children }: ProviderChildren) {
   };
 
   return (
-    <DialogContext.Provider value={{ openDialog, closeDialog, checkCheckBox }}>
-      {children}
-      {dialogOption && (
-        <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>
+    </>
   );
 }
 

diff --git a/packages/ui/Dialog/components/index.tsx b/packages/ui/Dialog/components/index.tsx
@@ -1,21 +1,15 @@
 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 DialogTitle({ children }: ChildrenProp) {
+  return <div className={title}>{children}</div>;
 }
 
-export function DialogDescription({ children, device, isCheck = false }: DialogDescriptionProps) {
-  return (
-    <div
-      className={`${description[device]} ${device === 'desktop' && margintBottom[`${isCheck}`]}`}
-    >
-      {children}
-    </div>
-  );
+export function DialogDescription({ children }: DialogDescriptionProps) {
+  return <div className={`${description}`}>{children}</div>;
 }
 
-export function DialogFooter({ children, align, device }: DialogFooterProp) {
-  return <div className={`${footer[align]} ${gap[device]}`}>{children}</div>;
+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
@@ -1,44 +1,28 @@
 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}`,
-  marginBottom: 24,
+
+  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',
@@ -52,51 +36,15 @@ 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 margintBottom = styleVariants({
-  true: {
-    marginBottom: 24,
-  },
-  false: {
-    marginBottom: 36,
-  },
-});
-
 export const footerBase = style({
   display: 'grid',
   gridAutoFlow: 'column',
 });
 
 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({
@@ -107,7 +55,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,8px)',
 });
diff --git 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,
-  ...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>