♻️refactor: 에디터 폰트 적용 및 메시지 카드 칸 폰트 적용 완료

♻️refactor: 에디터 폰트 적용 및 메시지 카드 칸 폰트 적용 완료

Author: minimo-9

src/components/Card/Card.jsx

@@ -12,6 +12,7 @@ export default function Card({
   relationship,
   children,
   createdAt,
+  font,
   empty = false,
 }) {
   const navigate = useNavigate();
@@ -21,6 +22,13 @@ export default function Card({
     navigate(`/post/${recipientId}/message/`);
   }
 
+  const fontFamilyMap = {
+    'Noto Sans': '"Noto Sans", sans-serif',
+    Pretendard: '"Pretendard", sans-serif',
+    나눔명조: '"Nanum Myeongjo", serif',
+    '나눔손글씨 손편지체': '"Nanum Sonpyeonji Ce", cursive',
+  };
+
   return (
     <article className={`${styles.card} ${empty ? styles['card--empty'] : ''}`}>
       {empty ? (
@@ -51,7 +59,10 @@ export default function Card({
           </header>
           <div className={styles['card__body']}>
             <div className={styles['card__content']}>
-              <div dangerouslySetInnerHTML={{ __html: sanitizedHTML }} />
+              <div
+                style={{ fontFamily: fontFamilyMap[font] }}
+                dangerouslySetInnerHTML={{ __html: sanitizedHTML }}
+              />
             </div>
           </div>
           <footer className={styles['card__footer']}>{createdAt}</footer>

src/components/Editor/Editor.jsx

@@ -14,6 +14,13 @@ const formats = [
   'background',
 ];
 
+const fontFamilyMap = {
+  나눔명조: '"Nanum Myeongjo", serif',
+  '나눔손글씨 손편지체': '"Nanum Sonpyeonji Ce", cursive',
+  Pretendard: '"Pretendard", sans-serif',
+  'Noto Sans': '"Noto Sans", sans-serif',
+};
+
 export default function Editor({ value, onChange, font }) {
   const modules = useMemo(() => {
     return {
@@ -30,7 +37,7 @@ export default function Editor({ value, onChange, font }) {
   useEffect(() => {
     const editorElement = document.querySelector('.ql-editor');
     if (editorElement) {
-      editorElement.style.fontFamily = font;
+      editorElement.style.fontFamily = fontFamilyMap[font];
       editorElement.style.fontSize = '18px';
     }
   }, [font]);

src/components/FontSelect/FontSelect.jsx

@@ -2,20 +2,15 @@ import { useState, useRef, useId } from 'react';
 import useDetectClose from '../../hooks/useDetectClose';
 import styles from './FontSelect.module.scss';
 
-const FONTS = ['Noto Sans', 'Pretendard', 'NanumMyeongjo', 'NanumSonPyeonjiCe'];
+const FONTS = ['Noto Sans', 'Pretendard', '나눔명조', '나눔손글씨 손편지체'];
 
 const fontClassMap = {
-  NotoSans: styles['font-noto'],
+  'Noto Sans': styles['font-noto'],
   Pretendard: styles['font-pretendard'],
-  NanumMyeongjo: styles['font-nanum-myeongjo'],
-  NanumSonPyeonjiCe: styles['font-naunm-hand'],
+  나눔명조: styles['font-nanum-myeongjo'],
+  '나눔손글씨 손편지체': styles['font-naunm-hand'],
 };
 
-const formatFontName = (font) =>
-  font
-    .replace('NanumMyeongjo', '나눔명조')
-    .replace('NanumSonPyeonjiCe', '나눔손글씨 손편지체');
-
 export default function FontSelect({ defaultValue = 'Noto Sans', onChange }) {
   const dropdownRef = useRef(null);
   const id = useId();
@@ -40,7 +35,7 @@ export default function FontSelect({ defaultValue = 'Noto Sans', onChange }) {
           className={`${styles['dropdown__button']} ${fontClassMap[selected]}`}
           onClick={() => setIsOpen((prev) => !prev)}
         >
-          {formatFontName(selected)}
+          {selected}
           <span
             className={`${styles.dropdown__arrow} ${isOpen ? styles.open : ''}`}
           />
@@ -53,7 +48,7 @@ export default function FontSelect({ defaultValue = 'Noto Sans', onChange }) {
                 className={`${styles['dropdown__item']} ${fontClassMap[font]}`}
                 onClick={() => handleSelect(font)}
               >
-                {formatFontName(font)}
+                {font}
               </li>
             ))}
           </ul>

src/components/common/FormInput.jsx

@@ -8,6 +8,7 @@ export default function FormInput({
   onChange,
   onBlur,
   isError,
+  maxLength,
 }) {
   const id = useId();
   return (
@@ -22,6 +23,7 @@ export default function FormInput({
         value={value}
         onChange={onChange}
         onBlur={onBlur}
+        maxLength={maxLength}
         className={`${styles['form-input__input']} ${isError ? styles['form-input__input--error'] : ''}`}
       />
       {isError && (

src/pages/CreateRecipient/CreateRecipient.jsx

@@ -74,6 +74,7 @@ export default function CreateRecipient() {
           value={value}
           onChange={handleInputChange}
           onBlur={handleBlur}
+          maxLength={40}
           isError={isError}
         />
       </div>

src/pages/MessageForm/MessageForm.jsx

@@ -80,11 +80,12 @@ export default function MessageForm() {
       <div className={styles['message-form__content']}>
         <div className={styles['message-form__input']}>
           <FormInput
-            label="Form."
+            label="From."
             placeholder="이름을 입력해 주세요."
             value={sender}
             onChange={handleInputChange}
             onBlur={handleBlur}
+            maxLength={40}
             isError={isError}
           />
         </div>

src/pages/Recipient/Recipient.jsx

@@ -93,6 +93,7 @@ export default function Recipient() {
               sender={msg.sender}
               relationship={msg.relationship}
               createdAt={msg.createdAt.slice(0, 10).split('-').join('.')}
+              font={msg.font}
             >
               {msg.content}
             </Card>

src/pages/RecipientList/RecipientCard.jsx

@@ -26,7 +26,7 @@ export default function RecipientCard({ Recipient }) {
             }
           : {}
       }
-      onClick={() => navigate(`{/post/${id}`)}
+      onClick={() => navigate(`/post/${id}`)}
     >
       {backgroundColor === 'blue' && <div className={styles.triangle} />}
       <h3 className={backgroundImageURL && styles.white}>{`To. ${name}`}</h3>