♻️ refactor: 메세지 내용 부분 빈 값 에러 추가

Author: minimo-9

src/components/Editor/Editor.jsx

@@ -1,7 +1,7 @@
 import { useMemo, useEffect, useRef } from 'react';
 import ReactQuill from 'react-quill';
 import 'react-quill/dist/quill.snow.css';
-import styled from './Editor.module.scss';
+import styles from './Editor.module.scss';
 
 const formats = [
   'bold',
@@ -21,7 +21,7 @@ const fontFamilyMap = {
   'Noto Sans': '"Noto Sans", sans-serif',
 };
 
-export default function Editor({ value, onChange, font }) {
+export default function Editor({ value, onChange, font, onBlur, isError }) {
   const quillRef = useRef();
 
   const modules = useMemo(() => {
@@ -45,19 +45,25 @@ export default function Editor({ value, onChange, font }) {
   }, [font]);
 
   return (
-    <div className={styled['editor']}>
-      <h2 className={styled['editor__title']}>내용을 입력해 주세요</h2>
+    <div className={styles['editor']}>
+      <h2 className={styles['editor__title']}>내용을 입력해 주세요</h2>
 
-      <div className={styled['editor__box']}>
+      <div
+        className={`${styles['editor__box']} ${isError ? styles['editor__box--error'] : ''}`}
+      >
         <ReactQuill
           ref={quillRef}
           theme="snow"
           modules={modules}
           formats={formats}
           value={value}
           onChange={onChange}
+          onBlur={onBlur}
           placeholder="전하고 싶은 메시지를 적어보세요."
         />
+        {isError && (
+          <p className={styles['editor__error-message']}>값을 입력해 주세요.</p>
+        )}
       </div>
     </div>
   );

src/components/Editor/Editor.module.scss

@@ -10,8 +10,14 @@
 
   &__box {
     height: 260px;
+    margin-bottom: 4px;
     border: 1px solid $gray-300;
     border-radius: 8px;
+
+    &--error {
+      border: 1px solid $error;
+      color: $gray-900;
+    }
   }
 
   :global(.ql-toolbar) {
@@ -39,6 +45,11 @@
     color: $gray-900;
   }
 
+  &__error-message {
+    @include font-12-regular;
+    color: $error;
+  }
+
   @media (max-width: 767px) {
     & {
       max-width: 320px;

src/pages/MessageForm/MessageForm.jsx

@@ -13,7 +13,8 @@ import styles from './MessageForm.module.scss';
 export default function MessageForm() {
   const { id } = useParams();
   const [sender, setSender] = useState('');
-  const [isError, setIsError] = useState(false);
+  const [senderError, setSenderIsError] = useState(false);
+  const [messageError, setMessageIsError] = useState(false);
   const [profileImage, setProfileImage] = useState(DEFAULT_PROFILE_IMAGE);
   const [relationship, setRelationship] = useState('지인');
   const [message, setMessage] = useState('');
@@ -29,8 +30,12 @@ export default function MessageForm() {
     setSender(e.target.value);
   }
 
-  function handleBlur() {
-    setIsError(sender.trim() === '');
+  function handleSenderBlur() {
+    setSenderIsError(sender.trim() === '');
+  }
+
+  function handleMessageBlur() {
+    setMessageIsError(stripHtml(message) === '');
   }
 
   function resetForm() {
@@ -123,8 +128,8 @@ export default function MessageForm() {
             placeholder="이름을 입력해 주세요 (10자 이내)"
             value={sender}
             onChange={handleInputChange}
-            onBlur={handleBlur}
-            isError={isError}
+            onBlur={handleSenderBlur}
+            isError={senderError}
           />
         </div>
         <div className={styles['message-form__profile-selector']}>
@@ -137,7 +142,13 @@ export default function MessageForm() {
           <RelationshipSelect value={relationship} onChange={setRelationship} />
         </div>
         <div className={styles['message-form__editor']}>
-          <Editor value={message} onChange={setMessage} font={font} />
+          <Editor
+            value={message}
+            onChange={setMessage}
+            font={font}
+            onBlur={handleMessageBlur}
+            isError={messageError}
+          />
         </div>
         <div className={styles['message-form__font-select']}>
           <FontSelect value={font} onChange={setFont} />