Merge pull request #48 from gummmmmy0v0/feature/#47

gummmmmy0v0 · web-flow · commit 48c102c2b573 · 2025-08-19T23:18:52.000+09:00
[#47] 텍스트 에디터 외부 모듈 적용
diff --git a/index.html b/index.html
@@ -11,6 +11,28 @@
       crossorigin
       href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
     />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/react-quill@1.3.3/dist/quill.snow.css"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Edu+SA+Hand:wght@400..700&family=Nanum+Gothic&family=Nanum+Pen+Script&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
     <title>Rolling</title>
   </head>
   <body>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "axios": "^1.11.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "react-quill-new": "^3.6.0",
     "react-router": "^7.8.0",
     "react-router-dom": "^7.8.0",
     "styled-components": "^6.1.19"
diff --git a/src/app.jsx b/src/app.jsx
@@ -7,7 +7,6 @@ import MainPage from "./pages/main-page";
 import MessagePage from "./pages/message-list";
 import MessagesPage from "./pages/messages-page";
 import SendMessagePage from "./pages/send-message-page";
-import SendPage from "./pages/send-page";
 import TestPage from "./pages/test-page";
 
 function Provider({ children }) {
@@ -56,7 +55,6 @@ function App() {
           </Route>
           <Route path="/test-components" element={<TestPage />} />
           <Route path="/list" element={<MessagePage />} />
-          <Route path="/post/{id}/message" element={<SendPage />} />
         </Routes>
       </BrowserRouter>
     </Provider>
diff --git a/src/components/option/background-select.jsx b/src/components/option/background-select.jsx
@@ -25,6 +25,7 @@ const OptionItem = styled.div`
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
+  opacity: ${({ selected }) => (selected ? 0.3 : 1)};
 `;
 
 const CircleButtonWrapper = styled.div`
@@ -94,6 +95,7 @@ function BackgroundSelect({ type, selected, onSelect }) {
           color={option.color}
           url={option.url}
           onClick={() => onSelect(index)}
+          selected={selected === index}
         >
           {selected === index && (
             <CircleButtonWrapper>
diff --git a/src/components/text-editor/text-editor.tsx b/src/components/text-editor/text-editor.tsx
@@ -0,0 +1,55 @@
+import { useEffect, useRef, useState } from "react";
+import ReactQuill, { Quill } from "react-quill-new";
+import "react-quill-new/dist/quill.snow.css";
+
+interface TextEditorProps {
+  style?: any;
+  value?: string;
+  onChange: (value: string) => void;
+  font?: string;
+}
+
+const Font: any = Quill.import("formats/font");
+Font.whitelist = [
+  "Noto Sans",
+  "Pretendard",
+  "Nanum Gothic",
+  "Nanum Pen Script",
+];
+Quill.register(Font, true);
+
+function TextEditor({ style, value, onChange, font }: TextEditorProps) {
+  const editorRef = useRef<any>(null);
+
+  useEffect(() => {
+    if (editorRef.current) {
+      const editor = editorRef.current.getEditor();
+      editor.root.style.fontFamily = font || "Noto Sans";
+      editor.root.style.fontSize = "20px";
+    }
+  }, [font]);
+
+  const modules = {
+    toolbar: {
+      container: [
+        ["bold", "italic", "underline"],
+        [{ align: "center" }, { align: "right" }, { align: "justify" }],
+        [{ list: "bullet" }, { list: "ordered" }],
+        [{ background: [] }, { color: [] }],
+        [{ size: [] }],
+      ],
+    },
+  };
+
+  return (
+    <ReactQuill
+      ref={editorRef}
+      style={style}
+      modules={modules}
+      value={value}
+      onChange={onChange}
+    />
+  );
+}
+
+export default TextEditor;
diff --git a/src/pages/create-post-page.jsx b/src/pages/create-post-page.jsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import InputTextField from "../components/text-field/text-field";
+import TextField from "../components/text-field/text-field";
 import TEXT_FIELD_TYPE from "../components/text-field/text-field-type";
 import Colors from "../components/color/colors";
 import ToggleButton from "../components/button/toggle-button";
@@ -39,6 +39,7 @@ const ToggleButtonWrapper = styled.div`
 
 const ButtonWrapper = styled.div`
   padding-top: 50px;
+  padding-bottom: 150px;
   width: 720px;
 `;
 
@@ -82,13 +83,13 @@ function CreatePostPage() {
     navigate(`/post/${randomID}`);
   };
 
-  const canCreate = name !== "" || name !== name.trim();
+  const canCreate = name.trim() !== "";
 
   return (
     <PostContainer>
       <Wrapper>
         <PostTitle>To.</PostTitle>
-        <InputTextField // TextField로 변경
+        <TextField
           type={TEXT_FIELD_TYPE.input}
           value={name}
           onChange={handleChange}
diff --git a/src/pages/send-message-page.jsx b/src/pages/send-message-page.jsx
diff --git a/src/pages/send-page.jsx b/src/pages/send-page.jsx
