From f423fce3a61d7e9ed0a3f5ef8dc482b6469a84bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9D=B4=EC=9D=98=EC=B0=AC?= <cksxkr5193@naver.com>
Date: Mon, 6 May 2024 19:53:55 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=EF=B8=8F=20Basic,=20Active=20Butto?=
 =?UTF-8?q?n=20font=20=EC=84=A4=EC=A0=95=20(#33)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: ActiveButton의 styleClass prop에 font 추가

* feat: BasicButton의 styleClass prop에 font 추가

* fix: button styleClass 수정 반영
---
 src/shared/ui/button/ActiveButton.tsx      | 5 ++++-
 src/shared/ui/button/BasicButton.tsx       | 6 +++---
 src/shared/ui/modal/BottomSheetModal.tsx   | 7 +++++--
 src/shared/ui/modal/ConfirmModal.tsx       | 4 ++--
 src/shared/ui/modal/ConfirmReportModal.tsx | 4 ++--
 5 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/src/shared/ui/button/ActiveButton.tsx b/src/shared/ui/button/ActiveButton.tsx
index 639ecba..01e9b86 100644
--- 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
index a31a7c0..aa5b2e0 100644
--- 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
index 525862b..9c10820 100644
--- 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
index 4ec6ef7..d546d76 100644
--- 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
index ef2d44f..29b87e0 100644
--- 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>