🎨 style: 폰트 클래스 추가 및 기존 폰트 매핑 제거

🎨 style: 폰트 클래스 추가 및 기존 폰트 매핑 제거

Author: minimo-9

src/components/Editor/Editor.jsx

@@ -13,13 +13,6 @@ 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, onBlur, isError }) {
   const quillRef = useRef();
 
@@ -36,10 +29,18 @@ export default function Editor({ value, onChange, font, onBlur, isError }) {
 
   useEffect(() => {
     const editorRoot = quillRef.current?.editor?.root;
-    if (editorRoot) {
-      editorRoot.style.fontFamily =
-        fontFamilyMap[font] || '"Noto Sans", sans-serif';
-      editorRoot.style.fontSize = '18px';
+    if (!editorRoot) return;
+
+    editorRoot.classList.remove(
+      'font-나눔명조',
+      'font-나눔손글씨손편지체',
+      'font-Pretendard',
+      'font-NotoSans',
+    );
+
+    if (font) {
+      const fontClassName = `font-${font.replace(/\s/g, '')}`;
+      editorRoot.classList.add(fontClassName);
     }
   }, [font]);
 

src/components/Editor/Editor.module.scss

@@ -65,3 +65,24 @@
     }
   }
 }
+
+:global(.ql-editor) {
+  font-family: 'Noto Sans', sans-serif;
+  font-size: 1.8rem;
+}
+
+:global(.ql-editor.font-나눔명조) {
+  font-family: '나눔명조', serif;
+}
+
+:global(.ql-editor.font-나눔손글씨손편지체) {
+  font-family: '나눔손글씨 손편지체', cursive;
+}
+
+:global(.ql-editor.font-Pretendard) {
+  font-family: 'Pretendard', sans-serif;
+}
+
+:global(.ql-editor.font-NotoSans) {
+  font-family: 'Noto Sans', sans-serif;
+}