🐛 fix: 메시지 전송 중복 방지를 위한 상태 관리 추가

🐛 fix: 메시지 전송 중복 방지를 위한 상태 관리 추가

Author: minimo-9

src/pages/CreateRecipient/CreateRecipient.jsx

@@ -18,6 +18,7 @@ export default function CreateRecipient() {
   const [selectedImage, setSelectedImage] = useState(-1);
   const [imageLoading, setImageLoading] = useState([]);
   const [uploadedImageUrl, setUploadedImageUrl] = useState(null);
+  const [isCreating, setIsCreating] = useState(false);
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -64,6 +65,15 @@ export default function CreateRecipient() {
   }
 
   async function handleButtonClick() {
+    if (isCreating) return;
+
+    if (value.trim() === '' || value.trim().length > 10) {
+      alert('이름은 공백이 아니어야 하며, 최대 10자까지 입력할 수 있습니다.');
+      return;
+    }
+
+    setIsCreating(true);
+
     try {
       const id = await postRecipient({
         team: '15-7',
@@ -74,6 +84,8 @@ export default function CreateRecipient() {
       navigate(`/post/${id}`);
     } catch (error) {
       console.error('페이지 생성 중 오류:', error.response.data);
+    } finally {
+      setIsCreating(false);
     }
   }
 
@@ -172,7 +184,7 @@ export default function CreateRecipient() {
         <Button
           type="button"
           onClick={handleButtonClick}
-          disabled={!value.trim()}
+          disabled={!value.trim() || isCreating}
         >
           생성하기
         </Button>

src/pages/MessageForm/MessageForm.jsx

@@ -20,6 +20,7 @@ export default function MessageForm() {
   const [message, setMessage] = useState('');
   const [font, setFont] = useState('Noto Sans');
   const [isRestored, setIsRestored] = useState(false);
+  const [isCreating, setIsCreating] = useState(false);
 
   const stripHtml = (html) => html.replace(/<[^>]+>/g, '').trim();
   const isValid = sender.trim() !== '' && stripHtml(message) !== '';
@@ -92,6 +93,8 @@ export default function MessageForm() {
   }, [sender, profileImage, relationship, message, font]);
 
   async function handleSubmit() {
+    if (isCreating) return;
+
     if (
       sender.trim() === '' ||
       sender.trim().length > 10 ||
@@ -101,6 +104,8 @@ export default function MessageForm() {
       return;
     }
 
+    setIsCreating(true);
+
     try {
       await postMessage({
         team: import.meta.env.VITE_TEAM_ID,
@@ -117,6 +122,8 @@ export default function MessageForm() {
       navigate(`/post/${id}`);
     } catch (error) {
       console.error('메세지 전송 실패', error);
+    } finally {
+      setIsCreating(false);
     }
   }
 
@@ -155,7 +162,11 @@ export default function MessageForm() {
           <FontSelect value={font} onChange={setFont} />
         </div>
       </div>
-      <Button type="button" onClick={handleSubmit} disabled={!isValid}>
+      <Button
+        type="button"
+        onClick={handleSubmit}
+        disabled={!isValid || isCreating}
+      >
         생성하기
       </Button>
     </div>