[feat] 상대방 프로필 조회 API 구현

src/app/(main)/page.tsx

@@ -121,7 +121,6 @@ export default function HomePage() {
                 onSubscribeClick={() => toggleFollow({ nickname: story.authorInfo.nickname, isFollowing: story.authorInfo.following })}
                 hideSubscribeButton={story.writtenByMe}
                 onClick={() => router.push(`/stories/${story.bookStoryId}`)}
-                onLikeClick={() => toggleLike(story.bookStoryId)}
               />
             ))}
           </div>
@@ -178,7 +177,6 @@ export default function HomePage() {
                 onSubscribeClick={() => toggleFollow({ nickname: story.authorInfo.nickname, isFollowing: story.authorInfo.following })}
                 hideSubscribeButton={story.writtenByMe}
                 onClick={() => router.push(`/stories/${story.bookStoryId}`)}
-                onLikeClick={() => toggleLike(story.bookStoryId)}
               />
             ))}
           </div>
@@ -237,7 +235,6 @@ export default function HomePage() {
                   onSubscribeClick={() => toggleFollow({ nickname: story.authorInfo.nickname, isFollowing: story.authorInfo.following })}
                   hideSubscribeButton={story.writtenByMe}
                   onClick={() => router.push(`/stories/${story.bookStoryId}`)}
-                  onLikeClick={() => toggleLike(story.bookStoryId)}
                 />
               ))}
             </div>

src/app/(main)/profile/[nickname]/page.tsx

@@ -19,7 +19,7 @@ export default async function OtherUserProfilePage({ params }: PageProps) {
       </div>
 
       <div className="flex flex-col items-center w-full max-w-[1440px] px-4 md:px-0 gap-[24px] mt-[10px] md:mt-[72px]">
-        <OtherUserProfileTabs />
+        <OtherUserProfileTabs nickname={nickname} />
       </div>
     </div>
   );

src/app/(main)/stories/page.tsx

@@ -112,6 +112,7 @@ export default function StoriesPage() {
                 isFollowing={story.authorInfo.following}
                 onSubscribeClick={() => toggleFollow({ nickname: story.authorInfo.nickname, isFollowing: story.authorInfo.following })}
                 hideSubscribeButton={story.writtenByMe}
+                onProfileClick={() => router.push(`/profile/${story.authorInfo.nickname}`)}
                 onClick={() => handleCardClick(story.bookStoryId)}
                 onLikeClick={() => toggleLike(story.bookStoryId)}
               />
@@ -149,6 +150,7 @@ export default function StoriesPage() {
                 isFollowing={story.authorInfo.following}
                 onSubscribeClick={() => toggleFollow({ nickname: story.authorInfo.nickname, isFollowing: story.authorInfo.following })}
                 hideSubscribeButton={story.writtenByMe}
+                onProfileClick={() => router.push(`/profile/${story.authorInfo.nickname}`)}
                 onClick={() => handleCardClick(story.bookStoryId)}
                 onLikeClick={() => toggleLike(story.bookStoryId)}
               />

src/components/base-ui/BookStory/bookstory_card.tsx

@@ -21,6 +21,7 @@ type Props = {
   isFollowing?: boolean;
   hideSubscribeButton?: boolean;
   onClick?: () => void;
+  onProfileClick?: () => void;
 };
 
 export default function BookStoryCard({
@@ -41,6 +42,7 @@ export default function BookStoryCard({
   isFollowing = false,
   hideSubscribeButton = false,
   onClick,
+  onProfileClick,
 }: Props) {
   const heartIcon = likedByMe ? "/red_heart.svg" : "/gray_heart.svg";
 
@@ -54,7 +56,15 @@ export default function BookStoryCard({
       md:w-[336px] md:h-[380px]"
     >
       {/* 1. 상단 프로필 (모바일 숨김 / 데스크탑 노출) */}
-      <div className="items-center hidden gap-2 px-4 py-3 md:flex">
+      <div
+        className="items-center hidden gap-2 px-4 py-3 md:flex group cursor-pointer"
+        onClick={(e) => {
+          if (onProfileClick) {
+            e.stopPropagation();
+            onProfileClick();
+          }
+        }}
+      >
         <div className="relative w-8 h-8 overflow-hidden rounded-full shrink-0">
           <Image
             src={profileImgSrc}

src/components/base-ui/BookStory/bookstory_card_large.tsx

@@ -21,6 +21,7 @@ type Props = {
   isFollowing?: boolean;
   onClick?: () => void;
   hideSubscribeButton?: boolean;
+  onProfileClick?: () => void;
 };
 
 export default function BookStoryCardLarge({
@@ -41,6 +42,7 @@ export default function BookStoryCardLarge({
   isFollowing = false,
   onClick,
   hideSubscribeButton = false,
+  onProfileClick,
 }: Props) {
   const heartIcon = likedByMe ? "/red_heart.svg" : "/gray_heart.svg";
 
@@ -51,7 +53,15 @@ export default function BookStoryCardLarge({
       w-[336px] h-[380px]"
     >
       {/* 상단 프로필 */}
-      <div className="flex items-center gap-2 px-4 py-3">
+      <div
+        className="flex items-center gap-2 px-4 py-3 group cursor-pointer"
+        onClick={(e) => {
+          if (onProfileClick) {
+            e.stopPropagation();
+            onProfileClick();
+          }
+        }}
+      >
         <div className="relative w-8 h-8 overflow-hidden rounded-full shrink-0">
           <Image
             src={profileImgSrc}

src/components/base-ui/BookStory/bookstory_detail.tsx

@@ -3,6 +3,9 @@
 import { useState, useRef, useEffect } from "react";
 import Image from "next/image";
 import Link from "next/link";
+import ReportModal from "@/components/common/ReportModal";
+import { useReportMemberMutation } from "@/hooks/mutations/useMemberMutations";
+import { ReportType } from "@/types/member";
 
 type BookstoryDetailProps = {
   imageUrl?: string;
@@ -70,8 +73,10 @@ export default function BookstoryDetail({
 }: BookstoryDetailProps) {
   const href = authorHref ?? `/profile/${authorId}`;
   const [menuOpen, setMenuOpen] = useState(false);
+  const [isReportModalOpen, setIsReportModalOpen] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
   const heartIcon = likedByMe ? "/red_heart.svg" : "/gray_heart.svg";
+  const { mutate: reportMember } = useReportMemberMutation();
 
   // 바깥 클릭 시 메뉴 닫기
   useEffect(() => {
@@ -84,6 +89,19 @@ export default function BookstoryDetail({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
 
+  const handleReportSubmit = (type: string, content: string) => {
+    let mappedType: ReportType = "GENERAL";
+    if (type === "책 이야기") mappedType = "BOOK_STORY";
+    if (type === "책이야기(댓글)") mappedType = "COMMENT";
+    if (type === "책모임 내부") mappedType = "CLUB_MEETING";
+
+    reportMember({
+      reportedMemberNickname: authorNickname,
+      reportType: mappedType,
+      content,
+    });
+  };
+
   return (
     <div
       className={`flex flex-col t:flex-row w-full px-[20px] items-start gap-4 t:gap-[28px] bg-Background ${className}`}
@@ -116,8 +134,8 @@ export default function BookstoryDetail({
             type="button"
             onClick={onSubscribeClick}
             className={`flex px-4 py-1.5 justify-center items-center rounded-lg text-White text-[12px] font-medium shrink-0 transition-colors ${isFollowing
-                ? "bg-Subbrown-4 text-primary-3"
-                : "bg-primary-2 text-White"
+              ? "bg-Subbrown-4 text-primary-3"
+              : "bg-primary-2 text-White"
               }`}
           >
             {subscribeText}
@@ -147,7 +165,7 @@ export default function BookstoryDetail({
               <button
                 type="button"
                 onClick={() => {
-                  console.log("신고하기");
+                  setIsReportModalOpen(true);
                   setMenuOpen(false);
                 }}
                 className="flex w-full items-center gap-2 px-4 py-3 body_1_2 text-Gray-4 hover:text-Gray-7 cursor-pointer"
@@ -281,8 +299,8 @@ export default function BookstoryDetail({
               type="button"
               onClick={onSubscribeClick}
               className={`flex px-[17px] py-[8px] justify-center items-center rounded-lg bg-primary-2 text-White body_2_1 shrink-0 whitespace-nowrap cursor-pointer transition-colors ${isFollowing
-                  ? "bg-Subbrown-4 text-primary-3"
-                  : "bg-primary-2 text-White"
+                ? "bg-Subbrown-4 text-primary-3"
+                : "bg-primary-2 text-White"
                 }`}
             >
               {subscribeText}
@@ -305,7 +323,7 @@ export default function BookstoryDetail({
                 <button
                   type="button"
                   onClick={() => {
-                    console.log("신고하기");
+                    setIsReportModalOpen(true);
                     setMenuOpen(false);
                   }}
                   className="flex w-full items-center gap-2 px-4 py-3 body_1_2 text-Gray-4 hover:text-Gray-7 cursor-pointer"
@@ -335,6 +353,13 @@ export default function BookstoryDetail({
           </div>
         </div>
       </div>
+      {/* Report Modal */}
+      <ReportModal
+        isOpen={isReportModalOpen}
+        onClose={() => setIsReportModalOpen(false)}
+        onSubmit={handleReportSubmit}
+        defaultReportType="책 이야기"
+      />
     </div>
   );
 }

src/components/base-ui/Comment/comment_section.tsx

@@ -11,6 +11,9 @@ import {
 } from "@/hooks/mutations/useStoryMutations";
 import { toast } from "react-hot-toast";
 import ConfirmModal from "@/components/common/ConfirmModal";
+import ReportModal from "@/components/common/ReportModal";
+import { useReportMemberMutation } from "@/hooks/mutations/useMemberMutations";
+import { ReportType } from "@/types/member";
 
 // 어떤 글의 댓글인지 구분
 type CommentSectionProps = {
@@ -28,6 +31,7 @@ export default function CommentSection({
   const createCommentMutation = useCreateCommentMutation(storyId);
   const updateCommentMutation = useUpdateCommentMutation(storyId);
   const deleteCommentMutation = useDeleteCommentMutation(storyId);
+  const { mutate: reportMember } = useReportMemberMutation();
 
   // API 데이터를 UI용 Comment 형식으로 변환 및 계층 구조화
   const mapApiToUiComments = (apiComments: CommentInfo[]): Comment[] => {
@@ -73,6 +77,9 @@ export default function CommentSection({
   const [isConfirmOpen, setIsConfirmOpen] = useState(false);
   const [commentToDelete, setCommentToDelete] = useState<number | null>(null);
 
+  const [isReportModalOpen, setIsReportModalOpen] = useState(false);
+  const [reportTargetNickname, setReportTargetNickname] = useState<string>("");
+
   // 데이터가 변경되면 상태 업데이트
   useEffect(() => {
     setComments(mapApiToUiComments(initialComments));
@@ -144,9 +151,42 @@ export default function CommentSection({
   };
 
   const handleReportComment = (id: number) => {
-    // TODO: 댓글 신고 API 연동
-    console.log("댓글 신고:", id);
-    toast.success("신고가 접수되었습니다.");
+    // 찾기: 최상단 댓글과 대댓글 모두 탐색
+    let targetComment: Comment | undefined;
+
+    for (const c of comments) {
+      if (c.id === id) {
+        targetComment = c;
+        break;
+      }
+      if (c.replies) {
+        const found = c.replies.find(r => r.id === id);
+        if (found) {
+          targetComment = found;
+          break;
+        }
+      }
+    }
+
+    if (targetComment) {
+      setReportTargetNickname(targetComment.authorName);
+      setIsReportModalOpen(true);
+    }
+  };
+
+  const handleReportSubmit = (type: string, content: string) => {
+    let mappedType: ReportType = "GENERAL";
+    if (type === "책 이야기") mappedType = "BOOK_STORY";
+    if (type === "책이야기(댓글)") mappedType = "COMMENT";
+    if (type === "책모임 내부") mappedType = "CLUB_MEETING";
+
+    if (reportTargetNickname) {
+      reportMember({
+        reportedMemberNickname: reportTargetNickname,
+        reportType: mappedType,
+        content,
+      });
+    }
   };
 
   return (
@@ -168,6 +208,17 @@ export default function CommentSection({
           setCommentToDelete(null);
         }}
       />
+
+      {/* Report Modal */}
+      <ReportModal
+        isOpen={isReportModalOpen}
+        onClose={() => {
+          setIsReportModalOpen(false);
+          setReportTargetNickname("");
+        }}
+        onSubmit={handleReportSubmit}
+        defaultReportType="책이야기(댓글)"
+      />
     </>
   );
 }