diff --git a/src/App.tsx b/src/App.tsx index 1f8210d7..3131c0ee 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -55,7 +55,14 @@ const App = () => { element={} /> } /> - } /> + } + /> + } + /> } diff --git a/src/bookmarks/api/bookmark.ts b/src/bookmarks/api/bookmark.ts index 934b996b..b6e1632f 100644 --- a/src/bookmarks/api/bookmark.ts +++ b/src/bookmarks/api/bookmark.ts @@ -430,6 +430,8 @@ export const useGETBookmarkDetailQuery = (params: GetBookmarkDetailRequest) => { export interface BookmarkCommentItem { id: number; member: string; + memberId: number; + profileEmoji: string; bookmark: string; category: string; isOwnerComment: boolean; diff --git a/src/bookmarks/service/hooks/detail/useHandleBookmarkDetailMore.ts b/src/bookmarks/service/hooks/detail/useHandleBookmarkDetailMore.ts index f60fccb6..af0f95a0 100644 --- a/src/bookmarks/service/hooks/detail/useHandleBookmarkDetailMore.ts +++ b/src/bookmarks/service/hooks/detail/useHandleBookmarkDetailMore.ts @@ -60,7 +60,7 @@ const useHandleBookmarkDetailMore = () => { const writtenId = bookmarkDetail?.memberId ?? 0; const isMyBookmark = memberId === writtenId; const onClickReportBookmark = () => { - router(navigatePath.REPORT.replace(':id', id)); + router(navigatePath.BOOKMARK_REPORT.replace(':id', id)); }; return { diff --git a/src/comment/api/Comment.ts b/src/comment/api/Comment.ts index ca3d88ed..94b899a2 100644 --- a/src/comment/api/Comment.ts +++ b/src/comment/api/Comment.ts @@ -3,6 +3,8 @@ import client from '@/common/service/client'; import { navigatePath } from '../../constants/navigatePath'; import { GET_BOOKMARK_COMMENT } from '@/bookmarks/api/bookmark'; import useToast from '@/common-ui/Toast/hooks/useToast'; +import { useNavigate } from 'react-router-dom'; +import { AxiosError } from 'axios'; const DOMAIN = 'COMMENT'; @@ -192,3 +194,57 @@ export const useDELETECommentQuery = ({ }, }); }; + +// 댓글 신고 +interface POSTCommentReportRequest { + reporterId: number; + reportedId: number; + content: string; +} + +// const postCommentReportAPI = async (params: POSTCommentReportRequest) => { +// const { data } = await client({ +// method: 'post', +// url: '/reports/comments', +// data: params, +// }); + +// return data; +// }; + +const dummyCommentReportAPI = async (params: POSTCommentReportRequest) => { + console.log(params); + return new Promise((resolve) => { + resolve({ + data: true, + }); + }); +}; + +export interface POSTBookmarkReportMutation { + reporterId: number; +} + +export const usePOSTReportCommentQuery = () => { + const toast = useToast(); + const router = useNavigate(); + return useMutation(dummyCommentReportAPI, { + onSuccess: () => { + toast.fireToast({ + message: '신고 되었습니다', + mode: 'SUCCESS', + }); + router(-1); + }, + onError: (e: AxiosError) => { + const errorCode = e.response?.status; + if (errorCode && errorCode === 500) { + toast.fireToast({ + message: '이미 신고한 북마크에요', + mode: 'DELETE', + }); + router(-1); + } + }, + }); +}; diff --git a/src/comment/ui/bookmark/CommentItem.tsx b/src/comment/ui/bookmark/CommentItem.tsx index f60b28d0..092e2f21 100644 --- a/src/comment/ui/bookmark/CommentItem.tsx +++ b/src/comment/ui/bookmark/CommentItem.tsx @@ -6,34 +6,49 @@ import Icon from '@/common-ui/assets/Icon'; import getRem from '@/utils/getRem'; import TriggerBottomSheet from '@/common-ui/BottomSheet/TriggerBottomSheet'; import IconButton from '@/common/ui/IconButton'; +import { useNavigate } from 'react-router-dom'; +import { navigatePath } from '@/constants/navigatePath'; interface CommentProps { + id: number; + memberId: number; + profileEmoji: string; nickname: string; content: string; updatedAt: string; isWriter: boolean; onClickDelete?: () => void; onClickEdit?: () => void; - onClickReport?: () => void; } const CommentItem = ({ + id, + memberId, + profileEmoji, nickname, content, updatedAt, isWriter, onClickDelete, onClickEdit, - onClickReport, }: CommentProps) => { + const navigate = useNavigate(); + const onClickUserProfile = () => { + if (isWriter) return; + navigate(navigatePath.FRIEND_BOOKMARK.replace(':id', String(memberId))); + }; + const onClickReport = () => { + navigate(navigatePath.COMMENT_REPORT.replace(':id', String(id))); + }; + return ( - + + {profileEmoji} {nickname} - {isWriter && }
@@ -49,10 +64,7 @@ const CommentItem = ({ onClickEdit={onClickEdit ?? (() => {})} /> ) : ( - {})} - /> + )} diff --git a/src/comment/ui/bookmark/CommentList.tsx b/src/comment/ui/bookmark/CommentList.tsx index 85bd9cd1..80a6088a 100644 --- a/src/comment/ui/bookmark/CommentList.tsx +++ b/src/comment/ui/bookmark/CommentList.tsx @@ -43,6 +43,9 @@ const CommentList = () => { {commentList?.map((comment) => ( { - const [mode, setMode] = useState('CHECK'); +interface ReportPageProps { + mode: 'BOOKMARK' | 'COMMENT'; +} + +const ReportPage = ({ mode }: ReportPageProps) => { + const [reportMode, setReportMode] = useState('CHECK'); const [reportText, setReportText] = useState(''); const [selectedReport, setSelectedReport] = useState(''); const { memberId } = useAuthStore(); @@ -27,18 +32,28 @@ const ReportPage = () => { const { mutate: reportBookmark } = usePOSTBookmarkReportMutation({ reporterId: memberId, }); + const { mutate: reportComment } = usePOSTReportCommentQuery(); const onSubmit = (e: React.FormEvent) => { e.preventDefault(); - const content = mode === 'WRITE' ? reportText : selectedReport; - reportBookmark({ - reportedId: Number(id), - reporterId: memberId, - content, - }); + const content = reportMode === 'WRITE' ? reportText : selectedReport; + if (mode === 'BOOKMARK') { + reportBookmark({ + reportedId: Number(id), + reporterId: memberId, + content, + }); + } + if (mode === 'COMMENT') { + reportComment({ + reportedId: Number(id), + reporterId: memberId, + content, + }); + } }; const buttonDisabled = - mode === 'WRITE' ? !reportText.length : !selectedReport.length; + reportMode === 'WRITE' ? !reportText.length : !selectedReport.length; return ( <> @@ -48,12 +63,12 @@ const ReportPage = () => { 신고 사유를 선택해 주세요