From 64346aefc7dc9bc242e0bf89b248354c0874d3ec Mon Sep 17 00:00:00 2001
From: Jihoo Kim <jihoo94@gmail.com>
Date: Fri, 4 Aug 2023 17:26:32 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EB=8C=93=EA=B8=80=20=EA=B8=88=EC=B9=99?=
 =?UTF-8?q?=EC=96=B4=20=EC=97=90=EB=9F=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/comment/CommentInput.tsx |  4 ++--
 src/pages/comment/CommentPage.tsx  | 26 +++++++++++++++++++++++---
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/pages/comment/CommentInput.tsx b/src/pages/comment/CommentInput.tsx
index 8bb8ff6e..9fbad17a 100644
--- a/src/pages/comment/CommentInput.tsx
+++ b/src/pages/comment/CommentInput.tsx
@@ -1,5 +1,5 @@
-import { useAtom, useAtomValue } from 'jotai';
-import { KeyboardEvent, useEffect, useState } from 'react';
+import { useAtom } from 'jotai';
+import { KeyboardEvent, useEffect } from 'react';
 
 import AddCommentIcon from '@/components/icons/AddCommentIcon';
 import { commentStateAtom } from '@/states/comment';
diff --git a/src/pages/comment/CommentPage.tsx b/src/pages/comment/CommentPage.tsx
index 5761af13..4ecccf1a 100644
--- a/src/pages/comment/CommentPage.tsx
+++ b/src/pages/comment/CommentPage.tsx
@@ -1,3 +1,4 @@
+import { AxiosError } from 'axios';
 import { useAtom } from 'jotai';
 import { useEffect, useRef, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
@@ -13,6 +14,7 @@ import TopAppBar from '@/components/layout/TopAppBar';
 import PostUserProfile from '@/components/post/PostUserProfile';
 import Dropdown from '@/components/ui/Dropdown';
 import Popup from '@/components/ui/modal/Popup/Popup';
+import Snackbar from '@/components/ui/modal/Snackbar';
 import CommentSkeleton from '@/components/ui/skeleton/CommentSkeleton';
 import PostSummarySkeleton from '@/components/ui/skeleton/PostSummarySkeleton';
 import CommentInput from '@/pages/comment/CommentInput';
@@ -40,14 +42,15 @@ export default function CommentPage() {
   const { comments, isLoading: commentLoading } = useGetComments(
     Number(postId)
   );
-  const { post, error } = useGetPost(Number(postId));
+  const { post } = useGetPost(Number(postId));
   const {
     deletePost,
     error: deletePostError,
     isSuccess: deletePostSuccess,
   } = useDeletePost();
   const [zoomedImageIndex, setZoomedImageIndex] = useState<number | null>(null);
-  const { addComment, isSuccess } = useAddComment();
+  const { addComment, isSuccess, error } = useAddComment();
+  const [showErrorSnackbar, setShowErrorSnackbar] = useState(false);
 
   const handleDropdownSelect = (value: number) => {
     if (value === MENU.Report) {
@@ -151,8 +154,19 @@ export default function CommentPage() {
           inputActive: false,
         }));
       }
+    } else if (error) {
+      if (error instanceof AxiosError && error.response?.status === 400) {
+        if (error.response.data.errorCode === 'IS_BAD_WORD') {
+          const el = document.getElementById('comment-input');
+          setShowErrorSnackbar(true);
+          setTimeout(() => {
+            setShowErrorSnackbar(false);
+          }, 3000);
+          el?.focus();
+        }
+      }
     }
-  }, [isSuccess]);
+  }, [isSuccess, error]);
 
   return (
     <div className="flex h-full flex-col">
@@ -218,6 +232,12 @@ export default function CommentPage() {
         )}
       </div>
       <CommentInput onSubmit={handleSubmit} />
+      {showErrorSnackbar && (
+        <Snackbar
+          text="금칙어 입력이 불가합니다."
+          className="absolute bottom-[8rem] left-1/2 -translate-x-1/2"
+        />
+      )}
       {post && (
         <Popup
           isOpen={deleteModalOpen}