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(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 (
@@ -218,6 +232,12 @@ export default function CommentPage() { )}
+ {showErrorSnackbar && ( + + )} {post && (