🎨 style: Modal 컴포넌트에 폰트 클래스 추가 및 적용

🎨 style: Modal 컴포넌트에 폰트 클래스 추가 및 적용

Author: minimo-9

src/components/Card/Card.jsx

@@ -5,13 +5,6 @@ import plus from '../../assets/images/plus.svg';
 import Badge from '../Badge/Badge';
 import styles from './Card.module.scss';
 
-const fontFamilyMap = {
-  'Noto Sans': '"Noto Sans", sans-serif',
-  Pretendard: '"Pretendard", sans-serif',
-  나눔명조: '"Nanum Myeongjo", serif',
-  '나눔손글씨 손편지체': '"Nanum Sonpyeonji Ce", cursive',
-};
-
 export default function Card({
   id,
   image,

src/components/Modal/Modal.jsx

@@ -5,13 +5,6 @@ import Badge from '../Badge/Badge';
 import Button from '../common/Button';
 import styles from './Modal.module.scss';
 
-const fontFamilyMap = {
-  'Noto Sans': '"Noto Sans", sans-serif',
-  Pretendard: '"Pretendard", sans-serif',
-  나눔명조: '"Nanum Myeongjo", serif',
-  '나눔손글씨 손편지체': '"Nanum Sonpyeonji Ce", cursive',
-};
-
 export default function Modal({
   image,
   sender,
@@ -53,7 +46,7 @@ export default function Modal({
         <div className={styles['modal__body']}>
           <div className={styles['modal__content']}>
             <div
-              style={{ fontFamily: fontFamilyMap[font] }}
+              className={`${styles['modal__content']} font-${font.replace(/\s/g, '')}`}
               dangerouslySetInnerHTML={{ __html: sanitizedHTML }}
             />
           </div>

src/components/Modal/Modal.module.scss

@@ -142,3 +142,19 @@
     width: calc(100% - 48px);
   }
 }
+
+:global(.font-나눔명조) {
+  font-family: '나눔명조', serif;
+}
+
+:global(.font-나눔손글씨손편지체) {
+  font-family: '나눔손글씨 손편지체', cursive;
+}
+
+:global(.font-Pretendard) {
+  font-family: 'Pretendard', sans-serif;
+}
+
+:global(.font-NotoSans) {
+  font-family: 'Noto Sans', sans-serif;
+}

src/pages/Recipient/Recipient.module.scss

@@ -57,10 +57,13 @@
   border: none;
   cursor: pointer;
   color: $white;
-  transition: transform 0.3s ease;
+  transition:
+    color 0.3s ease,
+    transform 0.3s ease;
   @include font-18-bold;
 
   &:hover {
+    color: $black;
     animation: shake 0.5s ease;
     animation-iteration-count: 1;
   }