chore: 다이얼로그 객체 폰트 적용

sopt-makers · Dec 20, 2023 · 6f2fe70 · 6f2fe70
1 parent db1a404
commit 6f2fe70
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 93 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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%;
+}`;