🛠️ Basic, Active Button font 설정 (#33)

* feat: ActiveButton의 styleClass prop에 font 추가 * feat: BasicButton의 styleClass prop에 font 추가 * fix: button styleClass 수정 반영
CollaBu · May 6, 2024 · f423fce · f423fce
1 parent 9eb43a3
commit f423fce
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 10 deletions.
diff --git a/src/shared/ui/button/ActiveButton.tsx b/src/shared/ui/button/ActiveButton.tsx
@@ -1,7 +1,10 @@
 import { ButtonProps } from './types';
 import './ActiveButton.scss';
 
-export type ActiveStyle = 'confirm' | 'follow-sm' | 'follow-lg';
+export type ActiveStyle =
+  | 'confirm h4semi'
+  | 'follow-sm b2semi'
+  | 'follow-lg b1semi';
 
 interface ActiveButtonProps extends ButtonProps {
   styleClass: ActiveStyle;

diff --git a/src/shared/ui/button/BasicButton.tsx b/src/shared/ui/button/BasicButton.tsx
@@ -3,9 +3,9 @@ import './BasicButton.scss';
 
 export type BasicStyle =
   | 'defalut'
-  | 'confirm-cancle'
-  | 'bsm-cancle'
-  | 'bsm-option';
+  | 'confirm-cancle h4semi'
+  | 'bsm-cancle h4semi'
+  | 'bsm-option h4md';
 
 interface BasicButtonProps extends ButtonProps {
   styleClass: BasicStyle;

diff --git a/src/shared/ui/modal/BottomSheetModal.tsx b/src/shared/ui/modal/BottomSheetModal.tsx
@@ -25,14 +25,17 @@ export const BottomSheetModal = ({
         <div className='modal-content'>
           {options.map((option, index) => (
             <Fragment key={index}>
-              <BasicButton onClick={option.onClick} styleClass='bsm-option'>
+              <BasicButton
+                onClick={option.onClick}
+                styleClass='bsm-option h4md'
+              >
                 {option.label}
               </BasicButton>
               {index < options.length - 1 && <hr className='option-divider' />}
             </Fragment>
           ))}
         </div>
-        <BasicButton styleClass='bsm-cancle' onClick={onClose}>
+        <BasicButton styleClass='bsm-cancle h4semi' onClick={onClose}>
           취소
         </BasicButton>
       </div>

diff --git a/src/shared/ui/modal/ConfirmModal.tsx b/src/shared/ui/modal/ConfirmModal.tsx
@@ -23,13 +23,13 @@ export const ConfirmModal = ({
         <h3 className='title h3semi'>{title}</h3>
         <p className='content b1md'>{content}</p>
         <div className='buttons'>
-          <BasicButton onClick={onClose} styleClass='confirm-cancle'>
+          <BasicButton onClick={onClose} styleClass='confirm-cancle h4semi'>
             {onCloseMsg}
           </BasicButton>
           <ActiveButton
             onClick={onExecute}
             isDisabled={onExecuteIsDisabled}
-            styleClass='confirm'
+            styleClass='confirm h4semi'
           >
             {onExecuteMsg}
           </ActiveButton>

diff --git a/src/shared/ui/modal/ConfirmReportModal.tsx b/src/shared/ui/modal/ConfirmReportModal.tsx
@@ -17,13 +17,13 @@ export const ConfirmReportModal = ({
         <h3 className='title h3semi'>{title}</h3>
         <section></section>
         <div className='buttons'>
-          <BasicButton onClick={onClose} styleClass='confirm-cancle'>
+          <BasicButton onClick={onClose} styleClass='confirm-cancle h4semi'>
             {onCloseMsg}
           </BasicButton>
           <ActiveButton
             onClick={onExecute}
             isDisabled={onExecuteIsDisabled}
-            styleClass='confirm'
+            styleClass='confirm h4semi'
           >
             {onExecuteMsg}
           </ActiveButton>