[SSD-150] 포스트잇 생성 페이지 예외처리 (#88)

* [SSD-150] feat: Postit 입력 Valid 처리 수정

* [SSD-150] fix: 생성 버튼 클릭시 비활성화 처리

* [SSD-150] feat: PostitCreate Alert 구현

* [SSD-150] fix: 입력창 css 수정

Author: lxodud

frontend/src/components/UnderBarInput/UnderBarInput.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './UnderBarInput.module.css';
 
-export default function UnderBarInput({ value, placeholder, onChange, name, onBlur }) {
+export default function UnderBarInput({ value, placeholder, onChange, name, onBlur, onClick }) {
   return (
     <input
       type="text"
@@ -11,6 +11,7 @@ export default function UnderBarInput({ value, placeholder, onChange, name, onBl
       placeholder={placeholder}
       onChange={onChange}
       onBlur={onBlur}
+      onClick={onClick}
     />
   );
 }

frontend/src/pages/postit-create/PostItCreate.jsx

@@ -1,17 +1,22 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState, useRef, useMemo } from 'react';
 import staticImagePath from '../../constant/staticImagePath';
 import styles from './PostItCreate.module.css';
 import UnderBarInput from '../../components/UnderBarInput/UnderBarInput';
 import BottomButton from '../../components/BottomButton/BottomButton';
 import { api } from '../../api/api';
 import { useNavigate, useParams } from 'react-router-dom';
+import { ssrModuleExportsKey } from 'vite/module-runner';
+import Alert from '../../components/Alert/Alert';
 
 export default function PostItCreate() {
   const { timepaperId } = useParams();
   const fileInputRef = useRef(null);
   const [isSubmitable, setIsSubmitable] = useState(false);
   const templates = [staticImagePath.postitAfternoon, staticImagePath.postitNight];
   const [errors, setErrors] = useState({});
+  const [isTouched, setIsTouched] = useState({ content: false, authorName: false });
+  const [isShowAlert, setIsShowAlert] = useState(false);
+  const [alertMessage, setAlertMessage] = useState('');
   const navigate = useNavigate();
 
   const INITIAL_FORM_DATA = {
@@ -50,6 +55,10 @@ export default function PostItCreate() {
     }));
   };
 
+  useEffect(() => {
+    setErrors(validateInput(inputData));
+  }, [inputData]);
+
   const handleStaticImage = (src) => () => {
     setImageState((prev) => ({
       ...prev,
@@ -59,6 +68,13 @@ export default function PostItCreate() {
     }));
   };
 
+  const handleOnClick = (e) => {
+    const { name } = e.target;
+    setIsTouched((prev) => ({ ...prev, [name]: true }));
+    const a = validateInput(inputData);
+    setErrors(a);
+  };
+
   const handleUploadImageClick = () => {
     fileInputRef.current.click();
   };
@@ -70,7 +86,8 @@ export default function PostItCreate() {
 
     const validImageTypes = ['image/jpeg', 'image/png', 'image/gif'];
     if (!validImageTypes.includes(file.type)) {
-      alert('이미지 파일만 업로드 가능합니다.');
+      setIsShowAlert(true);
+      setAlertMessage('이미지 파일만 업로드 가능합니다.');
       return;
     }
 
@@ -86,10 +103,6 @@ export default function PostItCreate() {
     reader.readAsDataURL(file);
   };
 
-  const handleBlur = () => {
-    setErrors(validateInput(inputData));
-  };
-
   const validateInput = (data) => {
     const errors = {};
     let isValid = true;
@@ -151,42 +164,54 @@ export default function PostItCreate() {
       formData.append('image', imageState.imageData);
     }
 
+    setIsSubmitable(false);
     (async () => {
       try {
         const response = await api.createPostit(timepaperId, formData);
         if (response.status === 201) {
           navigate(`/timepaper/${timepaperId}`, { replace: true });
         }
       } catch (error) {
-        alert('등록에 실패했습니다.');
-      } finally {
-        setIsSubmitable(false);
+        setIsShowAlert(true);
+        setAlertMessage('등록에 실패했습니다.');
+        setIsSubmitable(true);
       }
     })();
   };
 
+  const handleAlertButtonClick = () => {
+    setIsShowAlert(false);
+  };
+
   return (
     <>
+      {isShowAlert && (
+        <Alert message={alertMessage} buttonTitle={'확인'} onClick={handleAlertButtonClick}></Alert>
+      )}
       <form action="" className={styles.container}>
         <div className={styles.underBarInput}>
           <UnderBarInput
             onChange={handleOnChange}
             name="authorName"
             placeholder="작성자 입력"
-            onBlur={handleBlur}
+            onClick={handleOnClick}
           ></UnderBarInput>
-          {errors.authorName && <p className={styles.error}>{errors.authorName}</p>}
+          {isTouched.authorName && errors.authorName && (
+            <p className={styles.error}>{errors.authorName}</p>
+          )}
         </div>
         <div className={styles.selectedImage}>
           <img src={imageState.preview} className="logo-image" alt="선택된 포스트잇 이미지" />
           <div className={styles.textareaContainer}>
             <textarea
               onChange={handleOnChange}
-              onBlur={handleBlur}
               name="content"
               className={styles.textarea}
+              onClick={handleOnClick}
             ></textarea>
-            {errors.content && <p className={styles.textareaError}>{errors.content}</p>}
+            {isTouched.content && errors.content && (
+              <p className={styles.textareaError}>{errors.content}</p>
+            )}
           </div>
         </div>
         <section className={styles.imageContainer}>

frontend/src/pages/postit-create/PostItCreate.module.css

@@ -45,7 +45,7 @@
 
 .textarea {
   position: absolute;
-  top: 113px;
+  top: 125px;
   left: 37px;
   background-color: inherit;
   border: none;

frontend/src/pages/time-paper-create/TimePaperCreate.jsx

@@ -98,11 +98,11 @@ export default function TimePaperCreate() {
       <form>
         <div className={styles.container}>
           {isError && (
-              <Alert
-                buttonTitle={'확인'}
-                message={errorMessage}
-                onClick={handleAlertButtonClick}
-              ></Alert>
+            <Alert
+              buttonTitle={'확인'}
+              message={errorMessage}
+              onClick={handleAlertButtonClick}
+            ></Alert>
           )}
           <div className={styles.inputContainer}>
             <UnderBarInput