fix: 댓글 신고하기 기능 임시 연동 및 사용자 이모지, 페이지 이동 링크 추가

src/App.tsx

@@ -55,7 +55,14 @@ const App = () => {
                   element={<BookMarkDetailPage />}
                 />
                 <Route path={navigatePath.FAQ} element={<FaqPage />} />
-                <Route path={navigatePath.REPORT} element={<ReportPage />} />
+                <Route
+                  path={navigatePath.COMMENT_REPORT}
+                  element={<ReportPage mode="COMMENT" />}
+                />
+                <Route
+                  path={navigatePath.BOOKMARK_REPORT}
+                  element={<ReportPage mode="BOOKMARK" />}
+                />
                 <Route
                   path={navigatePath.USER}
                   element={<UserCreatePage mode="CREATE" />}

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;

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 {

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);
+      }
+    },
+  });
+};

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 (
     <Container>
       <CommentHeader>
-        <NicknameTextAndIconWrapper>
+        <NicknameTextAndIconWrapper onClick={onClickUserProfile}>
+          <NicknameText fontSize={1}>{profileEmoji}</NicknameText>
           <NicknameText fontSize={1} weight={'bold'}>
             {nickname}
           </NicknameText>
-          {isWriter && <Icon name="badge-green" size={'s'} />}
         </NicknameTextAndIconWrapper>
         <div />
         <div />
@@ -49,10 +64,7 @@ const CommentItem = ({
                 onClickEdit={onClickEdit ?? (() => {})}
               />
             ) : (
-              <MoreContent
-                type="notWriter"
-                onClickReport={onClickReport ?? (() => {})}
-              />
+              <MoreContent type="notWriter" onClickReport={onClickReport} />
             )}
           </TriggerBottomSheet.BottomSheet>
         </TriggerBottomSheet>

src/comment/ui/bookmark/CommentList.tsx

@@ -43,6 +43,9 @@ const CommentList = () => {
       {commentList?.map((comment) => (
         <CommentItem
           key={comment.id}
+          memberId={comment.memberId}
+          id={comment.id}
+          profileEmoji={comment.profileEmoji}
           content={comment.content}
           isWriter={comment.isOwnerComment}
           nickname={comment.member}

src/constants/navigatePath.ts

@@ -14,7 +14,8 @@ const navigatePath = {
   CATEGORY_ADD: '/category/add',
   CATEGORY_EDIT: '/category/edit/:id',
   CATEGORY_LIST: '/category/list',
-  REPORT: '/bookmark/:id/report',
+  COMMENT_REPORT: '/comment/:id/report',
+  BOOKMARK_REPORT: '/bookmark/:id/report',
   COMMENT: '/comment',
   LIKE_PAGE: '/likes',
 } as const;

src/pages/ReportPage.tsx

@@ -1,6 +1,7 @@
 import { usePOSTBookmarkReportMutation } from '@/bookmarks/api/bookmark';
 import BookmarkReportList from '@/bookmarks/ui/Report/BookmarkReportList';
 import BookmarkReportWrite from '@/bookmarks/ui/Report/BookmarkReportWrite';
+import { usePOSTReportCommentQuery } from '@/comment/api/Comment';
 import BottomFixedButton from '@/common-ui/BottomFixedButton';
 import Header from '@/common-ui/Header/Header';
 import Text from '@/common-ui/Text';
@@ -12,8 +13,12 @@ import { useParams } from 'react-router-dom';
 
 export type ReportMode = 'CHECK' | 'WRITE';
 
-const ReportPage = () => {
-  const [mode, setMode] = useState<ReportMode>('CHECK');
+interface ReportPageProps {
+  mode: 'BOOKMARK' | 'COMMENT';
+}
+
+const ReportPage = ({ mode }: ReportPageProps) => {
+  const [reportMode, setReportMode] = useState<ReportMode>('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<HTMLFormElement>) => {
     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 = () => {
           신고 사유를 선택해 주세요
         </MainText>
         <BookmarkReportList
-          setMode={setMode}
+          setMode={setReportMode}
           setSelectedReport={setSelectedReport}
         />
         <BookmarkReportWrite
           value={reportText}
-          isWriteMode={mode === 'WRITE'}
+          isWriteMode={reportMode === 'WRITE'}
           onChange={onChangeReportText}
         />
         <BottomFixedButton disabled={buttonDisabled} type="submit">