Feat: Toast를 통해서 게시글 유효성 불통시 메시지 띄우기

src/pages/community/[character_id]/edit.tsx

@@ -6,23 +6,32 @@ import DivideLine from '@/components/common/divideLine/DivideLine';
 import Button from '@/components/common/button/Button';
 import { createPost } from '@/utils/api/boards';
 import { useRouter } from 'next/router';
+import Toast from '@/components/common/toast/Toast';
 
 const Post = () => {
   const [title, setTitle] = useState('');
   const [content, setContent] = useState('');
+  const [toastMessage, setToastMessage] = useState('');
   const router = useRouter();
   const { character_id: characterId } = router.query;
 
+  const handleToastClose = () => {
+    setToastMessage('');
+  };
+  const messageHandler = (message: string) => {
+    setToastMessage(message);
+  };
+
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (characterId && typeof characterId === 'string') {
       if (title === '' || title.length > 30) {
-        alert('제목을 30자 이내로 작성해주세요! :)');
+        messageHandler('제목을 30자 이내로 작성해주세요! :)');
         return;
       }
 
       if (content === '' || content.length > 3000) {
-        alert('내용은 3000자 이내로 작성해주세요! :)');
+        messageHandler('내용은 3000자 이내로 작성해주세요! :)');
         return;
       }
 
@@ -34,7 +43,7 @@ const Post = () => {
         });
         return;
       }
-      alert('게시글 작성에 실패했습니다 :(');
+      messageHandler('게시글 작성에 실패했습니다 :(');
     }
     router.push({
       pathname: '/community',
@@ -60,6 +69,11 @@ const Post = () => {
           </div>
         </form>
       </section>
+      {
+        toastMessage
+          ? <Toast message={toastMessage} handleClose={handleToastClose} />
+          : null
+      }
     </>
   );
 };