REDO-Team · woohowhyun · Aug 9, 2026 · Aug 9, 2026
diff --git a/src/apis/community.ts b/src/apis/community.ts
@@ -1,5 +1,10 @@
 import api from './api';
 
+import type {
+  MyCommentListResponse,
+  MyCommunityListResponse,
+} from '../types/community';
+
 export const getCommunityList = async () => {
     const response = await api.get('/api/community');
     return response.data;
@@ -62,3 +67,33 @@ export const unlikeCommunity = async (communityId: number) => {
     const response = await api.post(`/api/community/${communityId}/unlike`);
     return response.data;
 };
+
+// 내가 작성한 게시글 조회
+export const getMyCommunities = async (
+  page = 0,
+  size = 10,
+): Promise<MyCommunityListResponse> => {
+  const response = await api.get('/api/community/me', {
+    params: {
+      page,
+      size,
+    },
+  });
+
+  return response.data;
+};
+
+// 내가 작성한 댓글 조회
+export const getMyComments = async (
+  page = 0,
+  size = 10,
+): Promise<MyCommentListResponse> => {
+  const response = await api.get('/api/community/me/comments', {
+    params: {
+      page,
+      size,
+    },
+  });
+
+  return response.data;
+};
diff --git a/src/mocks/favorite-disposal.ts b/src/mocks/favorite-disposal.ts
diff --git a/src/mocks/my-page.ts b/src/mocks/my-page.ts
diff --git a/src/mocks/reward-use-history.ts b/src/mocks/reward-use-history.ts
diff --git a/src/pages/my-page/my-comments-page.tsx b/src/pages/my-page/my-comments-page.tsx
@@ -1,65 +1,167 @@
 import type { MouseEvent } from 'react';
+import {
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+
+import {
+  deleteComment,
+  getMyComments,
+} from '../../apis/community';
+
 import LoadingSpinner from '../../components/common/LoadingSpinner';
+import Modal from '../../components/common/Modal';
 
 import Logo from '../../assets/icons/Big-logo.svg?react';
 
-import Modal from '../../components/common/Modal';
-import { MOCK_MY_COMMENTS } from '../../mocks/my-comment';
+const formatCreatedAt = (createdAt: string) => {
+  const date = new Date(createdAt);
 
-const MyCommentsPage = () => {
-  const navigate = useNavigate();
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, '0');
+  const day = String(date.getDate()).padStart(2, '0');
 
-  const [comments, setComments] = useState(MOCK_MY_COMMENTS);
-  const [isLoading] = useState(false);
-  const [deleteCommentId, setDeleteCommentId] = useState<number | null>(null);
+  return `${year}.${month}.${day}`;
+};
 
-  const isDeleteModalOpen = deleteCommentId !== null;
+interface DeleteCommentTarget {
+  communityId: number;
+  commentId: number;
+}
 
-  const handleCommentClick = (commentId: number) => {
-    navigate(`/community/${commentId}`);
+const MyCommentsPage = () => {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  const [deleteTarget, setDeleteTarget] =
+    useState<DeleteCommentTarget | null>(null);
+
+  const {
+    data,
+    isPending,
+    isError,
+  } = useQuery({
+    queryKey: ['myComments'],
+    queryFn: () => getMyComments(0, 10),
+  });
+
+  const comments = data?.result?.items ?? [];
+
+  const deleteMutation = useMutation({
+    mutationFn: ({
+      communityId,
+      commentId,
+    }: DeleteCommentTarget) =>
+      deleteComment(
+        communityId,
+        commentId,
+      ),
+
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ['myComments'],
+      });
+
+      setDeleteTarget(null);
+    },
+  });
+
+  const isDeleteModalOpen =
+    deleteTarget !== null;
+
+  const handleCommentClick = (
+    communityId: number,
+  ) => {
+    navigate(`/community/${communityId}`);
   };
 
-  const handleDeleteButtonClick = (event: MouseEvent<HTMLButtonElement>, commentId: number) => {
+  const handleDeleteButtonClick = (
+    event: MouseEvent<HTMLButtonElement>,
+    communityId: number,
+    commentId: number,
+  ) => {
     event.stopPropagation();
-    setDeleteCommentId(commentId);
+
+    setDeleteTarget({
+      communityId,
+      commentId,
+    });
   };
 
   const handleDeleteModalClose = () => {
-    setDeleteCommentId(null);
+    if (deleteMutation.isPending) return;
+
+    setDeleteTarget(null);
   };
 
   const handleDeleteConfirm = () => {
-    if (deleteCommentId === null) return;
-
-    setComments((prevComments) => prevComments.filter((comment) => comment.id !== deleteCommentId));
-
-    setDeleteCommentId(null);
+    if (
+      deleteTarget === null ||
+      deleteMutation.isPending
+    ) {
+      return;
+    }
+
+    deleteMutation.mutate(deleteTarget);
   };
 
-  if (isLoading) {
-  return (
-    <div className='flex min-h-screen items-center justify-center bg-bg-my'>
-      <LoadingSpinner />
-    </div>
-  );
-}
+  if (isPending) {
+    return (
+      <div className='flex min-h-screen items-center justify-center bg-bg-my'>
+        <LoadingSpinner />
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className='flex min-h-screen items-center justify-center bg-bg-my'>
+        작성한 댓글을 불러오지 못했어요.
+      </div>
+    );
+  }
 
   return (
-    <div className='min-h-screen bg-[#F9FBFB]'>
+    <div className='min-h-screen bg-bg-my'>
       <main className='px-[20px] pt-[72px]'>
         {comments.length > 0 ? (
           <section className='flex flex-col gap-[10px]'>
             {comments.map((comment) => (
-              <article key={comment.id} onClick={() => handleCommentClick(comment.id)} className='h-[81px] w-full cursor-pointer rounded-[16px] bg-white px-[16px] py-[16px] shadow-[0_3px_12px_rgba(0,0,0,0.08)]'>
+              <article
+                key={comment.commentId}
+                onClick={() =>
+                  handleCommentClick(
+                    comment.communityId,
+                  )
+                }
+                className='h-[81px] w-full cursor-pointer rounded-[16px] bg-white px-[16px] py-[16px] shadow-[0_3px_12px_rgba(0,0,0,0.08)]'
+              >
                 <div className='flex h-full flex-col justify-between'>
-                  <h2 className='truncate text-[18px] font-semibold leading-[18px] tracking-[-0.01em] text-[#111111]'>{comment.content}</h2>
+                  <h2 className='truncate text-[18px] font-semibold leading-[18px] tracking-[-0.01em] text-[#111111]'>
+                    {comment.content}
+                  </h2>
 
                   <div className='flex items-center justify-between'>
-                    <time className='text-[14px] font-medium leading-[14px] text-[#111111]'>{comment.createdAt}</time>
-
-                    <button type='button' onClick={(event) => handleDeleteButtonClick(event, comment.id)} className='text-[14px] font-medium leading-[14px] text-main-green1'>
+                    <time className='text-[14px] font-medium leading-[14px] text-[#111111]'>
+                      {formatCreatedAt(
+                        comment.createdAt,
+                      )}
+                    </time>
+
+                    <button
+                      type='button'
+                      onClick={(event) =>
+                        handleDeleteButtonClick(
+                          event,
+                          comment.communityId,
+                          comment.commentId,
+                        )
+                      }
+                      className='text-[14px] font-medium leading-[14px] text-main-green1'
+                    >
                       삭제
                     </button>
                   </div>
@@ -69,17 +171,29 @@ const MyCommentsPage = () => {
           </section>
         ) : (
           <div className='flex min-h-[calc(100vh-72px)] flex-col items-center justify-center pb-[80px]'>
-                <Logo className='h-[146px] w-[161px]' />
-                <p className='mt-[38px] text-center text-[22px] font-bold leading-[130%] tracking-[0] text-[#6B6B6B]'>
-                    아직 작성한 댓글이 없어요
-                </p>
-            </div>
+            <Logo className='h-[146px] w-[161px]' />
+
+            <p className='mt-[38px] text-center text-[22px] font-bold leading-[130%] tracking-[0] text-[#6B6B6B]'>
+              아직 작성한 댓글이 없어요
+            </p>
+          </div>
         )}
       </main>
 
-      <Modal isOpen={isDeleteModalOpen} title={'작성하신 댓글을\n삭제하시겠습니까?'} buttonText='삭제하기' onClose={handleDeleteModalClose} onConfirm={handleDeleteConfirm} titleLineHeight='130%' />
+      <Modal
+        isOpen={isDeleteModalOpen}
+        title={'작성하신 댓글을\n삭제하시겠습니까?'}
+        buttonText={
+          deleteMutation.isPending
+            ? '삭제 중...'
+            : '삭제하기'
+        }
+        onClose={handleDeleteModalClose}
+        onConfirm={handleDeleteConfirm}
+        titleLineHeight='130%'
+      />
     </div>
   );
 };
 
-export default MyCommentsPage;
+export default MyCommentsPage;