Merge branch 'develop' into feature/Yun

Author: Yun-Jinwoo

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,
@@ -76,7 +69,7 @@ export default function Card({
           <div className={styles['card__body']}>
             <div className={styles['card__content']}>
               <div
-                style={{ fontFamily: fontFamilyMap[font] }}
+                className={`${styles['card__content']} font-${font.replace(/\s/g, '')}`}
                 dangerouslySetInnerHTML={{ __html: sanitizedHTML }}
               />
             </div>

src/components/Card/Card.module.scss

@@ -184,3 +184,19 @@
     }
   }
 }
+
+: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/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;
+}