diff --git a/src/features/auth/model/types.ts b/src/features/auth/model/types.ts
index 16b47a4..d6e58a6 100644
--- a/src/features/auth/model/types.ts
+++ b/src/features/auth/model/types.ts
@@ -410,6 +410,7 @@ export interface UpdateMyProfileResponse {
 
 export interface UserProfile {
   message: string;
+  userId?: string;
   email: string;
   name: string;
   nickname: string;
diff --git a/src/features/community/api/boards.ts b/src/features/community/api/boards.ts
index 2333f3b..1981c7f 100644
--- a/src/features/community/api/boards.ts
+++ b/src/features/community/api/boards.ts
@@ -6,6 +6,7 @@ import type {
   CreateBoardRequest,
   CreateBoardResponse,
   DeleteBoardResponse,
+  MyBoardListResponse,
   TempSavedBoardResponse,
   TempSaveBoardRequest,
   TempSaveBoardResponse,
@@ -18,6 +19,11 @@ export async function getBoardList(params: { page: number; size: number }): Prom
   return response.data;
 }
 
+export async function getMyBoardList(params: { page: number; size: number }): Promise<MyBoardListResponse> {
+  const response = await apiClient.get<MyBoardListResponse>('/boards/me', { params });
+  return response.data;
+}
+
 export async function createBoard(payload: CreateBoardRequest): Promise<CreateBoardResponse> {
   const response = await apiClient.post<CreateBoardResponse>('/boards', payload);
   return response.data;
diff --git a/src/features/community/api/comments.ts b/src/features/community/api/comments.ts
new file mode 100644
index 0000000..d1c9141
--- /dev/null
+++ b/src/features/community/api/comments.ts
@@ -0,0 +1,39 @@
+import { apiClient } from '@/shared/api/axios';
+
+import type {
+  CommentListResponse,
+  CreateCommentRequest,
+  CreateCommentResponse,
+  DeleteCommentResponse,
+  MyCommentListResponse,
+  UpdateCommentRequest,
+  UpdateCommentResponse,
+} from '../model/types';
+
+export async function getCommentList(
+  boardId: number,
+  params: { page: number; size: number },
+): Promise<CommentListResponse> {
+  const response = await apiClient.get<CommentListResponse>(`/comments/${boardId}`, { params });
+  return response.data;
+}
+
+export async function getMyCommentList(params: { page: number; size: number }): Promise<MyCommentListResponse> {
+  const response = await apiClient.get<MyCommentListResponse>('/comments/me', { params });
+  return response.data;
+}
+
+export async function createComment(payload: CreateCommentRequest): Promise<CreateCommentResponse> {
+  const response = await apiClient.post<CreateCommentResponse>('/comments', payload);
+  return response.data;
+}
+
+export async function updateComment(commentId: number, payload: UpdateCommentRequest): Promise<UpdateCommentResponse> {
+  const response = await apiClient.patch<UpdateCommentResponse>(`/comments/${commentId}`, payload);
+  return response.data;
+}
+
+export async function deleteComment(commentId: number): Promise<DeleteCommentResponse> {
+  const response = await apiClient.delete<DeleteCommentResponse>(`/comments/${commentId}`);
+  return response.data;
+}
diff --git a/src/features/community/index.ts b/src/features/community/index.ts
index 56ac648..13d126a 100644
--- a/src/features/community/index.ts
+++ b/src/features/community/index.ts
@@ -3,16 +3,21 @@ export {
   deleteBoard,
   getBoardDetail,
   getBoardList,
+  getMyBoardList,
   getTempSavedBoard,
   tempSaveBoard,
   updateBoard,
 } from './api/boards';
+export { createComment, deleteComment, getCommentList, getMyCommentList, updateComment } from './api/comments';
 export {
   BOARD_DETAIL_STATUS_MESSAGES,
   BOARD_DRAFT_STATUS_MESSAGES,
   BOARD_LIST_STATUS_MESSAGES,
   BOARD_MUTATION_STATUS_MESSAGES,
+  COMMENT_LIST_STATUS_MESSAGES,
+  COMMENT_MUTATION_STATUS_MESSAGES,
   COMMUNITY_DRAFT_SESSION_KEY,
+  MY_ACTIVITY_STATUS_MESSAGES,
 } from './lib/constants';
 export {
   clearStoredBoardDraftSessionKey,
@@ -23,10 +28,16 @@ export { INITIAL_BOARD_EDITOR_FORM_STATE, validateBoardEditorForm } from './lib/
 export { useBoardDetail } from './model/useBoardDetail';
 export { useBoardEditorForm } from './model/useBoardEditorForm';
 export { useBoardList } from './model/useBoardList';
+export { useCommentList } from './model/useCommentList';
 export { useCreateBoard } from './model/useCreateBoard';
+export { useCreateComment } from './model/useCreateComment';
 export { useDeleteBoard } from './model/useDeleteBoard';
+export { useDeleteComment } from './model/useDeleteComment';
+export { useMyBoardList } from './model/useMyBoardList';
+export { useMyCommentList } from './model/useMyCommentList';
 export { useTempSaveBoard } from './model/useTempSaveBoard';
 export { useTempSavedBoard } from './model/useTempSavedBoard';
+export { useUpdateComment } from './model/useUpdateComment';
 export { useUpdateBoard } from './model/useUpdateBoard';
 export { CommunityFeedCard } from './ui/CommunityFeedCard';
 export { CommunityLayout } from './ui/CommunityLayout';
@@ -36,16 +47,27 @@ export { BoardDetailContent } from './ui/BoardDetailContent';
 export { BoardEditorForm } from './ui/BoardEditorForm';
 export { DeleteBoardDialog } from './ui/DeleteBoardDialog';
 export type {
+  BoardComment,
   BoardDetailResponse,
   BoardListItem,
   BoardListResponse,
   BoardPayload,
+  CommentListResponse,
+  CommentPageInfo,
+  CreateCommentRequest,
+  CreateCommentResponse,
   CreateBoardRequest,
   CreateBoardResponse,
+  DeleteCommentResponse,
   DeleteBoardResponse,
+  MyBoardListResponse,
+  MyCommentListItem,
+  MyCommentListResponse,
   TempSavedBoardResponse,
   TempSaveBoardRequest,
   TempSaveBoardResponse,
+  UpdateCommentRequest,
+  UpdateCommentResponse,
   UpdateBoardRequest,
   UpdateBoardResponse,
 } from './model/types';
diff --git a/src/features/community/lib/constants.ts b/src/features/community/lib/constants.ts
index b9116dd..30a58ac 100644
--- a/src/features/community/lib/constants.ts
+++ b/src/features/community/lib/constants.ts
@@ -1,30 +1,51 @@
 export const COMMUNITY_DRAFT_SESSION_KEY = 'community-board-draft-session-key';
 
 export const BOARD_LIST_STATUS_MESSAGES: Partial<Record<number, string>> = {
-  400: '잘못된 요청입니다.',
-  401: '로그인이 필요합니다. 다시 로그인해주세요.',
-  500: '서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
+  400: '잘못된 요청이에요.',
+  401: '로그인이 필요해요. 다시 로그인해주세요.',
+  500: '서버 오류가 발생했어요. 잠시 후 다시 시도해주세요.',
 };
 
 export const BOARD_MUTATION_STATUS_MESSAGES: Partial<Record<number, string>> = {
   400: '입력값을 다시 확인해주세요.',
-  401: '로그인이 필요합니다. 다시 로그인해주세요.',
-  403: '게시글을 처리할 권한이 없습니다.',
-  500: '서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
+  401: '로그인이 필요해요. 다시 로그인해주세요.',
+  403: '게시글을 처리할 권한이 없어요.',
+  500: '서버 오류가 발생했어요. 잠시 후 다시 시도해주세요.',
 };
 
 export const BOARD_DETAIL_STATUS_MESSAGES: Partial<Record<number, string>> = {
-  400: '잘못된 게시글 요청입니다.',
-  401: '로그인이 필요합니다. 다시 로그인해주세요.',
-  403: '게시글을 조회할 권한이 없습니다.',
-  404: '게시글을 찾을 수 없습니다.',
-  500: '서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
+  400: '잘못된 게시글 요청이에요.',
+  401: '로그인이 필요해요. 다시 로그인해주세요.',
+  403: '게시글을 조회할 권한이 없어요.',
+  404: '게시글을 찾을 수 없어요.',
+  500: '서버 오류가 발생했어요. 잠시 후 다시 시도해주세요.',
 };
 
 export const BOARD_DRAFT_STATUS_MESSAGES: Partial<Record<number, string>> = {
-  400: '임시 저장 요청을 처리할 수 없습니다.',
-  401: '로그인이 필요합니다. 다시 로그인해주세요.',
-  403: '임시 저장 게시글을 처리할 권한이 없습니다.',
-  404: '임시 저장된 게시글을 찾을 수 없습니다.',
-  500: '서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
+  400: '임시 저장 요청을 처리할 수 없어요.',
+  401: '로그인이 필요해요. 다시 로그인해주세요.',
+  403: '임시 저장 게시글을 처리할 권한이 없어요.',
+  404: '임시 저장한 게시글을 찾을 수 없어요.',
+  500: '서버 오류가 발생했어요. 잠시 후 다시 시도해주세요.',
+};
+
+export const COMMENT_LIST_STATUS_MESSAGES: Partial<Record<number, string>> = {
+  400: '댓글 조회 요청이 올바르지 않아요.',
+  401: '로그인이 필요해요. 다시 로그인해주세요.',
+  404: '해당 게시글을 찾을 수 없어요.',
+  500: '서버 오류가 발생했어요. 잠시 후 다시 시도해주세요.',
+};
+
+export const COMMENT_MUTATION_STATUS_MESSAGES: Partial<Record<number, string>> = {
+  400: '입력한 댓글 내용을 다시 확인해주세요.',
+  401: '로그인이 필요해요. 다시 로그인해주세요.',
+  403: '댓글을 처리할 권한이 없어요.',
+  404: '대상 댓글 또는 게시글을 찾을 수 없어요.',
+  500: '서버 오류가 발생했어요. 잠시 후 다시 시도해주세요.',
+};
+
+export const MY_ACTIVITY_STATUS_MESSAGES: Partial<Record<number, string>> = {
+  400: '내 활동 조회 요청이 올바르지 않아요.',
+  401: '로그인이 필요해요. 다시 로그인해주세요.',
+  500: '서버 오류가 발생했어요. 잠시 후 다시 시도해주세요.',
 };
diff --git a/src/features/community/model/types.ts b/src/features/community/model/types.ts
index 9eeb58b..8359481 100644
--- a/src/features/community/model/types.ts
+++ b/src/features/community/model/types.ts
@@ -75,3 +75,83 @@ export interface UpdateBoardResponse {
 export interface DeleteBoardResponse {
   message: string;
 }
+
+export interface MyBoardListResponse {
+  message: string;
+  boards: BoardListItem[];
+}
+
+export interface CommentAuthor {
+  userId?: string;
+  nickname: string;
+  profileUrl?: string | null;
+}
+
+export interface BoardComment {
+  commentId: number;
+  parentCommentId: number | null;
+  commentContent: string;
+  author?: CommentAuthor;
+  userId?: string;
+  nickname?: string;
+  profileUrl?: string | null;
+  createdAt?: string;
+  modifiedAt?: string;
+  deleted?: boolean;
+  isDeleted?: boolean;
+}
+
+export interface CommentPageInfo {
+  page: number;
+  size: number;
+  totalElements: number;
+  totalPages: number;
+}
+
+export interface CommentListResponse {
+  message: string;
+  pageInfo: CommentPageInfo;
+  data: BoardComment[];
+}
+
+export interface CreateCommentRequest {
+  boardId: number;
+  commentContent: string;
+  parentCommentId?: number | null;
+}
+
+export interface CreateCommentResponse {
+  message: string;
+  commentId: number;
+  commentContent: string;
+  userId: string;
+  nickname: string;
+}
+
+export interface UpdateCommentRequest {
+  commentContent: string;
+}
+
+export interface UpdateCommentResponse {
+  message: string;
+}
+
+export interface DeleteCommentResponse {
+  message: string;
+}
+
+export interface MyCommentListItem {
+  commentId: number;
+  boardId: number;
+  boardTitle: string;
+  parentCommentId: number | null;
+  commentContent: string;
+  createdAt?: string;
+  modifiedAt?: string;
+}
+
+export interface MyCommentListResponse {
+  message: string;
+  pageInfo: CommentPageInfo;
+  data: MyCommentListItem[];
+}
diff --git a/src/features/community/model/useCommentList.ts b/src/features/community/model/useCommentList.ts
new file mode 100644
index 0000000..c03acc2
--- /dev/null
+++ b/src/features/community/model/useCommentList.ts
@@ -0,0 +1,14 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getCommentList } from '@/features/community/api/comments';
+import { queryKeys } from '@/shared/lib/react-query/queryKey';
+
+export function useCommentList(boardId: number | null, params: { page: number; size: number }) {
+  const isValidId = boardId !== null && !Number.isNaN(boardId);
+
+  return useQuery({
+    queryKey: isValidId ? queryKeys.boards.comments(boardId, params) : ['boards', 'comments', 'idle'],
+    queryFn: () => getCommentList(boardId as number, params),
+    enabled: isValidId,
+  });
+}
diff --git a/src/features/community/model/useCreateComment.ts b/src/features/community/model/useCreateComment.ts
new file mode 100644
index 0000000..aaf1950
--- /dev/null
+++ b/src/features/community/model/useCreateComment.ts
@@ -0,0 +1,20 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { createComment } from '@/features/community/api/comments';
+import type { CreateCommentRequest, CreateCommentResponse } from '@/features/community/model/types';
+
+export function useCreateComment() {
+  const queryClient = useQueryClient();
+
+  return useMutation<CreateCommentResponse, unknown, CreateCommentRequest>({
+    mutationFn: createComment,
+    onSuccess: (_, variables) => {
+      void queryClient.invalidateQueries({
+        queryKey: ['boards', variables.boardId, 'comments'],
+      });
+      void queryClient.invalidateQueries({
+        queryKey: ['boards', variables.boardId, 'detail'],
+      });
+    },
+  });
+}
diff --git a/src/features/community/model/useDeleteComment.ts b/src/features/community/model/useDeleteComment.ts
new file mode 100644
index 0000000..61c4985
--- /dev/null
+++ b/src/features/community/model/useDeleteComment.ts
@@ -0,0 +1,25 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { deleteComment } from '@/features/community/api/comments';
+import type { DeleteCommentResponse } from '@/features/community/model/types';
+
+interface DeleteCommentVariables {
+  boardId: number;
+  commentId: number;
+}
+
+export function useDeleteComment() {
+  const queryClient = useQueryClient();
+
+  return useMutation<DeleteCommentResponse, unknown, DeleteCommentVariables>({
+    mutationFn: ({ commentId }) => deleteComment(commentId),
+    onSuccess: (_, variables) => {
+      void queryClient.invalidateQueries({
+        queryKey: ['boards', variables.boardId, 'comments'],
+      });
+      void queryClient.invalidateQueries({
+        queryKey: ['boards', variables.boardId, 'detail'],
+      });
+    },
+  });
+}
diff --git a/src/features/community/model/useMyBoardList.ts b/src/features/community/model/useMyBoardList.ts
new file mode 100644
index 0000000..acc6ff7
--- /dev/null
+++ b/src/features/community/model/useMyBoardList.ts
@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getMyBoardList } from '../api/boards';
+import { queryKeys } from '@/shared/lib/react-query/queryKey';
+
+export function useMyBoardList(params: { page: number; size: number }, options?: { enabled?: boolean }) {
+  return useQuery({
+    queryKey: queryKeys.boards.mine(params),
+    queryFn: () => getMyBoardList(params),
+    enabled: options?.enabled,
+  });
+}
diff --git a/src/features/community/model/useMyCommentList.ts b/src/features/community/model/useMyCommentList.ts
new file mode 100644
index 0000000..0e70012
--- /dev/null
+++ b/src/features/community/model/useMyCommentList.ts
@@ -0,0 +1,12 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getMyCommentList } from '../api/comments';
+import { queryKeys } from '@/shared/lib/react-query/queryKey';
+
+export function useMyCommentList(params: { page: number; size: number }, options?: { enabled?: boolean }) {
+  return useQuery({
+    queryKey: queryKeys.comments.mine(params),
+    queryFn: () => getMyCommentList(params),
+    enabled: options?.enabled,
+  });
+}
diff --git a/src/features/community/model/useUpdateComment.ts b/src/features/community/model/useUpdateComment.ts
new file mode 100644
index 0000000..78af6da
--- /dev/null
+++ b/src/features/community/model/useUpdateComment.ts
@@ -0,0 +1,23 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { updateComment } from '@/features/community/api/comments';
+import type { UpdateCommentRequest, UpdateCommentResponse } from '@/features/community/model/types';
+
+interface UpdateCommentVariables {
+  boardId: number;
+  commentId: number;
+  payload: UpdateCommentRequest;
+}
+
+export function useUpdateComment() {
+  const queryClient = useQueryClient();
+
+  return useMutation<UpdateCommentResponse, unknown, UpdateCommentVariables>({
+    mutationFn: ({ commentId, payload }) => updateComment(commentId, payload),
+    onSuccess: (_, variables) => {
+      void queryClient.invalidateQueries({
+        queryKey: ['boards', variables.boardId, 'comments'],
+      });
+    },
+  });
+}
diff --git a/src/features/community/ui/BoardDetailContent.tsx b/src/features/community/ui/BoardDetailContent.tsx
index 48a640d..3d7ff6c 100644
--- a/src/features/community/ui/BoardDetailContent.tsx
+++ b/src/features/community/ui/BoardDetailContent.tsx
@@ -1,42 +1,66 @@
+import { useLayoutEffect, useRef, useState } from 'react';
 import { Link } from 'react-router-dom';
 
-import type { BoardDetailResponse } from '../model/types';
+import type { BoardComment, BoardDetailResponse, CommentPageInfo } from '../model/types';
 
 interface BoardDetailContentProps {
   board: BoardDetailResponse;
+  comments: BoardComment[];
+  pageInfo?: CommentPageInfo;
   canManage: boolean;
-  currentUserProfileUrl?: string | null;
+  currentUserId?: string | null;
+  isCommentsLoading: boolean;
+  commentsErrorMessage?: string;
+  isCreatingComment: boolean;
+  isUpdatingComment: boolean;
+  isDeletingComment: boolean;
   onDelete: () => void;
+  onRetryComments: () => void;
+  onCreateComment: (payload: { commentContent: string; parentCommentId?: number | null }) => Promise<void>;
+  onUpdateComment: (payload: { commentId: number; commentContent: string }) => Promise<void>;
+  onDeleteComment: (commentId: number) => Promise<void>;
+  onChangeCommentPage: (page: number) => void;
+}
+
+interface CommentThread extends BoardComment {
+  children: BoardComment[];
 }
 
 const DETAIL_COPY = {
   authorFallback: '작성자',
+  anonymousAuthor: '익명',
   report: '신고',
+  reply: '답글',
   edit: '수정',
   delete: '삭제',
+  cancel: '취소',
   commentsTitle: '댓글',
-  placeholder: '댓글을 입력해주세요',
+  commentPlaceholder: '댓글을 입력해주세요.',
+  replyPlaceholder: '답글을 입력해주세요.',
+  emptyComments: '아직 댓글이 없어요. 첫 댓글을 남겨보세요.',
   submit: '등록',
-  submitAria: '댓글 등록 예정 버튼',
+  save: '저장',
+  submitAria: '댓글 등록 버튼',
   viewLabel: '조회',
+  deletedComment: '삭제된 댓글입니다.',
+  commentsFailedTitle: '댓글을 불러오지 못했어요.',
+  loadingComments: '댓글을 불러오는 중이에요...',
+  retry: '다시 시도',
+  previousPage: '이전',
+  nextPage: '다음',
+  commentRequired: '댓글 내용을 입력해주세요.',
+  replyRequired: '답글 내용을 입력해주세요.',
+  editRequired: '수정할 댓글 내용을 입력해주세요.',
+  commentCreateFailed: '댓글을 등록하지 못했어요.',
+  replyCreateFailed: '답글을 등록하지 못했어요.',
+  commentUpdateFailed: '댓글을 수정하지 못했어요.',
+  commentDeleteConfirm: '댓글을 삭제할까요?',
+  commentDeleteFailed: '댓글을 삭제하지 못했어요.',
 };
 
-const MOCK_COMMENTS = [
-  {
-    id: 1,
-    nickname: '배웅배웅',
-    dateTime: '2025-10-14 11:25:00',
-    content: '어머~^^ 좋은 정보 감사드려요! 행복하세요 :D',
-  },
-  {
-    id: 2,
-    nickname: '배웅배웅',
-    dateTime: '2025-10-14 11:25:00',
-    content: '어머~^^ 좋은 정보 감사드려요! 행복하세요 :D',
-  },
-];
-
-function formatDateTime(value: string) {
+function formatDateTime(value?: string) {
+  if (!value) return '';
+
   const date = new Date(value);
 
   if (Number.isNaN(date.getTime())) {
@@ -52,11 +76,194 @@ function formatDateTime(value: string) {
   }).format(date);
 }
 
-export function BoardDetailContent({ board, canManage, currentUserProfileUrl, onDelete }: BoardDetailContentProps) {
+function getCommentAuthor(comment: BoardComment) {
+  return {
+    nickname: comment.author?.nickname?.trim() || comment.nickname?.trim() || DETAIL_COPY.anonymousAuthor,
+  };
+}
+
+function getCommentUserId(comment: BoardComment) {
+  return comment.author?.userId ?? comment.userId ?? null;
+}
+
+function getCommentTimestamp(comment: BoardComment) {
+  return formatDateTime(comment.modifiedAt ?? comment.createdAt);
+}
+
+function isDeletedComment(comment: BoardComment) {
+  return Boolean(comment.deleted || comment.isDeleted);
+}
+
+function buildCommentThreads(comments: BoardComment[]) {
+  const topLevelComments: CommentThread[] = [];
+  const topLevelMap = new Map<number, CommentThread>();
+
+  comments.forEach((comment) => {
+    if (comment.parentCommentId !== null) {
+      return;
+    }
+
+    const thread: CommentThread = {
+      ...comment,
+      children: [],
+    };
+
+    topLevelComments.push(thread);
+    topLevelMap.set(comment.commentId, thread);
+  });
+
+  comments.forEach((comment) => {
+    if (comment.parentCommentId === null) {
+      return;
+    }
+
+    const parent = topLevelMap.get(comment.parentCommentId);
+
+    if (parent) {
+      parent.children.push(comment);
+      return;
+    }
+
+    topLevelComments.push({
+      ...comment,
+      children: [],
+    });
+  });
+
+  return topLevelComments;
+}
+
+export function BoardDetailContent({
+  board,
+  comments,
+  pageInfo,
+  canManage,
+  currentUserId,
+  isCommentsLoading,
+  commentsErrorMessage,
+  isCreatingComment,
+  isUpdatingComment,
+  isDeletingComment,
+  onDelete,
+  onRetryComments,
+  onCreateComment,
+  onUpdateComment,
+  onDeleteComment,
+  onChangeCommentPage,
+}: BoardDetailContentProps) {
+  const [draftComment, setDraftComment] = useState('');
+  const [replyTargetId, setReplyTargetId] = useState<number | null>(null);
+  const [replyDraft, setReplyDraft] = useState('');
+  const [editingCommentId, setEditingCommentId] = useState<number | null>(null);
+  const [editDraft, setEditDraft] = useState('');
+  const [commentError, setCommentError] = useState('');
+  const [replyError, setReplyError] = useState<{ commentId: number; message: string } | null>(null);
+  const [editError, setEditError] = useState<{ commentId: number; message: string } | null>(null);
+  const [deleteError, setDeleteError] = useState<{ commentId: number; message: string } | null>(null);
+
   const likeCount = board.likeCount ?? 0;
-  const commentCount = board.commentCount ?? MOCK_COMMENTS.length;
+  const commentCount = board.commentCount ?? pageInfo?.totalElements ?? comments.length;
   const authorName = board.nickname.trim() || DETAIL_COPY.authorFallback;
   const imageUrls = board.imageFileUrls.filter((imageUrl) => imageUrl.trim().length > 0);
+  const commentThreads = buildCommentThreads(comments);
+
+  const clearCommentScopedErrors = (commentId?: number) => {
+    if (commentId === undefined) {
+      setReplyError(null);
+      setEditError(null);
+      setDeleteError(null);
+      return;
+    }
+
+    setReplyError((current) => (current?.commentId === commentId ? null : current));
+    setEditError((current) => (current?.commentId === commentId ? null : current));
+    setDeleteError((current) => (current?.commentId === commentId ? null : current));
+  };
+
+  const submitComment = async () => {
+    const trimmed = draftComment.trim();
+
+    if (!trimmed) {
+      setCommentError(DETAIL_COPY.commentRequired);
+      return;
+    }
+
+    setCommentError('');
+
+    try {
+      await onCreateComment({ commentContent: trimmed });
+      setDraftComment('');
+    } catch (error) {
+      setCommentError(error instanceof Error ? error.message : DETAIL_COPY.commentCreateFailed);
+    }
+  };
+
+  const submitReply = async (parentCommentId: number) => {
+    const trimmed = replyDraft.trim();
+
+    if (!trimmed) {
+      setReplyError({ commentId: parentCommentId, message: DETAIL_COPY.replyRequired });
+      return;
+    }
+
+    setReplyError(null);
+
+    try {
+      await onCreateComment({ commentContent: trimmed, parentCommentId });
+      setReplyDraft('');
+      setReplyTargetId(null);
+    } catch (error) {
+      setReplyError({
+        commentId: parentCommentId,
+        message: error instanceof Error ? error.message : DETAIL_COPY.replyCreateFailed,
+      });
+    }
+  };
+
+  const submitEdit = async (commentId: number) => {
+    const trimmed = editDraft.trim();
+
+    if (!trimmed) {
+      setEditError({ commentId, message: DETAIL_COPY.editRequired });
+      return;
+    }
+
+    setEditError(null);
+
+    try {
+      await onUpdateComment({ commentId, commentContent: trimmed });
+      setEditingCommentId(null);
+      setEditDraft('');
+    } catch (error) {
+      setEditError({
+        commentId,
+        message: error instanceof Error ? error.message : DETAIL_COPY.commentUpdateFailed,
+      });
+    }
+  };
+
+  const handleDeleteComment = async (commentId: number) => {
+    const confirmed = window.confirm(DETAIL_COPY.commentDeleteConfirm);
+
+    if (!confirmed) {
+      return;
+    }
+
+    setDeleteError(null);
+
+    try {
+      await onDeleteComment(commentId);
+      if (editingCommentId === commentId) {
+        setEditingCommentId(null);
+        setEditDraft('');
+      }
+    } catch (error) {
+      setDeleteError({
+        commentId,
+        message: error instanceof Error ? error.message : DETAIL_COPY.commentDeleteFailed,
+      });
+    }
+  };
 
   return (
     <article className="space-y-6 pb-28">
@@ -127,32 +334,179 @@ export function BoardDetailContent({ board, canManage, currentUserProfileUrl, on
           </h2>
         </div>
 
-        <div>
-          {MOCK_COMMENTS.map((comment) => (
-            <CommentRow
-              key={comment.id}
-              nickname={comment.nickname}
-              dateTime={comment.dateTime}
-              content={comment.content}
-            />
-          ))}
-        </div>
-      </section>
+        {commentsErrorMessage ? (
+          <div className="py-8 text-center">
+            <p className="text-sm font-medium text-neutral-900">{DETAIL_COPY.commentsFailedTitle}</p>
+            <p className="mt-2 text-sm text-neutral-500">{commentsErrorMessage}</p>
+            <button
+              type="button"
+              onClick={onRetryComments}
+              className="mt-4 inline-flex items-center justify-center rounded-xl border border-neutral-200 px-4 py-2 text-sm font-medium text-neutral-700 transition-colors hover:border-neutral-300 hover:text-neutral-900"
+            >
+              {DETAIL_COPY.retry}
+            </button>
+          </div>
+        ) : isCommentsLoading ? (
+          <div className="py-8 text-center text-sm text-neutral-500">{DETAIL_COPY.loadingComments}</div>
+        ) : commentThreads.length === 0 ? (
+          <div className="py-8 text-center text-sm text-neutral-500">{DETAIL_COPY.emptyComments}</div>
+        ) : (
+          <div>
+            {commentThreads.map((comment) => (
+              <div key={comment.commentId}>
+                <CommentRow
+                  comment={comment}
+                  currentUserId={currentUserId}
+                  isEditing={editingCommentId === comment.commentId}
+                  editDraft={editingCommentId === comment.commentId ? editDraft : comment.commentContent}
+                  isMutating={isUpdatingComment || isDeletingComment}
+                  errorMessage={
+                    editError?.commentId === comment.commentId
+                      ? editError.message
+                      : deleteError?.commentId === comment.commentId
+                        ? deleteError.message
+                        : undefined
+                  }
+                  onEditStart={() => {
+                    clearCommentScopedErrors(comment.commentId);
+                    setReplyTargetId(null);
+                    setReplyDraft('');
+                    setEditingCommentId(comment.commentId);
+                    setEditDraft(comment.commentContent);
+                  }}
+                  onEditCancel={() => {
+                    setEditingCommentId(null);
+                    setEditDraft('');
+                    clearCommentScopedErrors(comment.commentId);
+                  }}
+                  onEditDraftChange={(value) => {
+                    setEditDraft(value);
+                    setEditError((current) => (current?.commentId === comment.commentId ? null : current));
+                  }}
+                  onEditSubmit={() => void submitEdit(comment.commentId)}
+                  onDelete={() => void handleDeleteComment(comment.commentId)}
+                  onReplyStart={() => {
+                    clearCommentScopedErrors(comment.commentId);
+                    setEditingCommentId(null);
+                    setEditDraft('');
+                    setReplyTargetId((current) => (current === comment.commentId ? null : comment.commentId));
+                    setReplyDraft('');
+                  }}
+                />
 
-      <section className="sticky bottom-4 z-10">
-        <div className="rounded-[24px] border border-neutral-200 bg-white/96 shadow-[0_18px_42px_rgba(15,23,42,0.10)] backdrop-blur">
-          <div className="flex items-center gap-3 px-4 py-3 sm:px-5">
-            <AuthorBadge name="나" size="sm" profileUrl={currentUserProfileUrl} />
-            <div className="flex min-w-0 flex-1 items-center rounded-full border border-neutral-200 bg-neutral-50 px-4 py-3">
-              <span className="truncate text-sm text-neutral-500">{DETAIL_COPY.placeholder}</span>
-            </div>
+                {replyTargetId === comment.commentId ? (
+                  <ReplyComposer
+                    value={replyDraft}
+                    isPending={isCreatingComment}
+                    placeholder={DETAIL_COPY.replyPlaceholder}
+                    errorMessage={replyError?.commentId === comment.commentId ? replyError.message : undefined}
+                    onChange={(value) => {
+                      setReplyDraft(value);
+                      setReplyError((current) => (current?.commentId === comment.commentId ? null : current));
+                    }}
+                    onCancel={() => {
+                      setReplyTargetId(null);
+                      setReplyDraft('');
+                      clearCommentScopedErrors(comment.commentId);
+                    }}
+                    onSubmit={() => void submitReply(comment.commentId)}
+                  />
+                ) : null}
+
+                {comment.children.map((reply) => (
+                  <CommentRow
+                    key={reply.commentId}
+                    comment={reply}
+                    currentUserId={currentUserId}
+                    indent
+                    isEditing={editingCommentId === reply.commentId}
+                    editDraft={editingCommentId === reply.commentId ? editDraft : reply.commentContent}
+                    isMutating={isUpdatingComment || isDeletingComment}
+                    errorMessage={
+                      editError?.commentId === reply.commentId
+                        ? editError.message
+                        : deleteError?.commentId === reply.commentId
+                          ? deleteError.message
+                          : undefined
+                    }
+                    onEditStart={() => {
+                      clearCommentScopedErrors(reply.commentId);
+                      setReplyTargetId(null);
+                      setReplyDraft('');
+                      setEditingCommentId(reply.commentId);
+                      setEditDraft(reply.commentContent);
+                    }}
+                    onEditCancel={() => {
+                      setEditingCommentId(null);
+                      setEditDraft('');
+                      clearCommentScopedErrors(reply.commentId);
+                    }}
+                    onEditDraftChange={(value) => {
+                      setEditDraft(value);
+                      setEditError((current) => (current?.commentId === reply.commentId ? null : current));
+                    }}
+                    onEditSubmit={() => void submitEdit(reply.commentId)}
+                    onDelete={() => void handleDeleteComment(reply.commentId)}
+                  />
+                ))}
+              </div>
+            ))}
+          </div>
+        )}
+
+        {pageInfo && pageInfo.totalPages > 1 ? (
+          <div className="flex items-center justify-center gap-3 border-t border-neutral-200 pt-5">
             <button
               type="button"
-              className="inline-flex shrink-0 items-center justify-center rounded-full bg-neutral-950 px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-neutral-800"
-              aria-label={DETAIL_COPY.submitAria}
+              disabled={pageInfo.page <= 0}
+              onClick={() => onChangeCommentPage(pageInfo.page - 1)}
+              className="rounded-xl border border-neutral-200 px-4 py-2 text-sm font-medium text-neutral-700 transition-colors disabled:cursor-not-allowed disabled:opacity-40"
             >
-              {DETAIL_COPY.submit}
+              {DETAIL_COPY.previousPage}
             </button>
+            <span className="text-sm text-neutral-500">
+              {pageInfo.page + 1} / {pageInfo.totalPages}
+            </span>
+            <button
+              type="button"
+              disabled={pageInfo.page >= pageInfo.totalPages - 1}
+              onClick={() => onChangeCommentPage(pageInfo.page + 1)}
+              className="rounded-xl border border-neutral-200 px-4 py-2 text-sm font-medium text-neutral-700 transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+            >
+              {DETAIL_COPY.nextPage}
+            </button>
+          </div>
+        ) : null}
+      </section>
+
+      <section className="sticky bottom-4 z-10">
+        <div className="rounded-[24px] border border-neutral-200 bg-white/96 shadow-[0_18px_42px_rgba(15,23,42,0.10)] backdrop-blur">
+          <div className="px-4 py-3 sm:px-5">
+            <div className="flex items-start gap-3">
+              <div className="min-w-0 flex-1">
+                <AutoSizeTextarea
+                  value={draftComment}
+                  onChange={(value) => {
+                    setDraftComment(value);
+                    if (commentError) {
+                      setCommentError('');
+                    }
+                  }}
+                  placeholder={DETAIL_COPY.commentPlaceholder}
+                  className="w-full rounded-[20px] border border-neutral-200 bg-neutral-50 px-4 py-3 text-sm leading-6 text-neutral-800 outline-none transition focus:border-neutral-300"
+                />
+                {commentError ? <p className="mt-2 text-sm text-red-500">{commentError}</p> : null}
+              </div>
+              <button
+                type="button"
+                onClick={() => void submitComment()}
+                disabled={isCreatingComment}
+                className="inline-flex shrink-0 items-center justify-center rounded-full bg-neutral-950 px-5 py-3 text-sm font-semibold text-white transition-colors hover:bg-neutral-800 disabled:cursor-not-allowed disabled:opacity-50"
+                aria-label={DETAIL_COPY.submitAria}
+              >
+                {DETAIL_COPY.submit}
+              </button>
+            </div>
           </div>
         </div>
       </section>
@@ -219,34 +573,209 @@ function SocialStat({ kind, value }: { kind: 'like' | 'comment'; value: number }
   );
 }
 
-function CommentRow({ nickname, dateTime, content }: { nickname: string; dateTime: string; content: string }) {
+interface CommentRowProps {
+  comment: BoardComment;
+  currentUserId?: string | null;
+  indent?: boolean;
+  isEditing: boolean;
+  editDraft: string;
+  isMutating: boolean;
+  errorMessage?: string;
+  onEditStart?: () => void;
+  onEditCancel: () => void;
+  onEditDraftChange: (value: string) => void;
+  onEditSubmit: () => void;
+  onDelete: () => void;
+  onReplyStart?: () => void;
+}
+
+function CommentRow({
+  comment,
+  currentUserId,
+  indent = false,
+  isEditing,
+  editDraft,
+  isMutating,
+  errorMessage,
+  onEditStart,
+  onEditCancel,
+  onEditDraftChange,
+  onEditSubmit,
+  onDelete,
+  onReplyStart,
+}: CommentRowProps) {
+  const { nickname } = getCommentAuthor(comment);
+  const commentUserId = getCommentUserId(comment);
+  const canManage = Boolean(
+    currentUserId && commentUserId && currentUserId === commentUserId && !isDeletedComment(comment),
+  );
+  const content = isDeletedComment(comment) ? DETAIL_COPY.deletedComment : comment.commentContent;
+  const dateTime = getCommentTimestamp(comment);
+
   return (
-    <div className="border-b border-neutral-200 py-6 first:pt-5 last:border-b-0 last:pb-2">
+    <div
+      className={[
+        'border-b border-neutral-200 py-6 first:pt-5 last:border-b-0 last:pb-2',
+        indent ? 'ml-8 border-l border-l-neutral-100 pl-5' : '',
+      ].join(' ')}
+    >
       <div className="flex items-start justify-between gap-4">
-        <div className="flex items-start gap-3">
-          <AuthorBadge name={nickname} size="sm" />
-          <div>
-            <p className="text-sm font-semibold text-neutral-900">{nickname}</p>
-            <p className="mt-0.5 text-xs text-neutral-400">{dateTime}</p>
-          </div>
+        <div>
+          <p className="text-sm font-semibold text-neutral-900">{nickname}</p>
+          {dateTime ? <p className="mt-0.5 text-xs text-neutral-400">{dateTime}</p> : null}
         </div>
-        <div className="flex items-center gap-4 text-sm text-neutral-400">
-          <button type="button" className="transition-colors hover:text-neutral-700">
-            {DETAIL_COPY.report}
-          </button>
-          <button type="button" className="transition-colors hover:text-neutral-700">
-            {DETAIL_COPY.edit}
-          </button>
-          <button type="button" className="transition-colors hover:text-red-500">
-            {DETAIL_COPY.delete}
-          </button>
+
+        {!isDeletedComment(comment) ? (
+          <div className="flex items-center gap-4 text-sm text-neutral-400">
+            {!canManage ? (
+              <button type="button" className="transition-colors hover:text-neutral-700">
+                {DETAIL_COPY.report}
+              </button>
+            ) : null}
+            {!indent && onReplyStart ? (
+              <button type="button" onClick={onReplyStart} className="transition-colors hover:text-neutral-700">
+                {DETAIL_COPY.reply}
+              </button>
+            ) : null}
+            {canManage ? (
+              <>
+                <button type="button" onClick={onEditStart} className="transition-colors hover:text-neutral-700">
+                  {DETAIL_COPY.edit}
+                </button>
+                <button type="button" onClick={onDelete} className="transition-colors hover:text-red-500">
+                  {DETAIL_COPY.delete}
+                </button>
+              </>
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+
+      {isEditing ? (
+        <div className="mt-4">
+          <AutoSizeTextarea
+            value={editDraft}
+            onChange={onEditDraftChange}
+            className="w-full rounded-2xl border border-neutral-200 bg-neutral-50 px-4 py-3 text-sm leading-6 text-neutral-800 outline-none transition focus:border-neutral-300"
+          />
+          {errorMessage ? <p className="mt-2 text-sm text-red-500">{errorMessage}</p> : null}
+          <div className="mt-3 flex items-center justify-end gap-2">
+            <button
+              type="button"
+              onClick={onEditCancel}
+              className="rounded-xl border border-neutral-200 px-4 py-2 text-sm font-medium text-neutral-700 transition-colors hover:border-neutral-300 hover:text-neutral-900"
+            >
+              {DETAIL_COPY.cancel}
+            </button>
+            <button
+              type="button"
+              onClick={onEditSubmit}
+              disabled={isMutating}
+              className="rounded-xl bg-neutral-950 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-neutral-800 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {DETAIL_COPY.save}
+            </button>
+          </div>
         </div>
+      ) : (
+        <>
+          <p
+            className={[
+              'mt-4 text-sm leading-7',
+              isDeletedComment(comment) ? 'text-neutral-400' : 'text-neutral-700',
+            ].join(' ')}
+          >
+            {content}
+          </p>
+          {errorMessage ? <p className="mt-2 text-sm text-red-500">{errorMessage}</p> : null}
+        </>
+      )}
+    </div>
+  );
+}
+
+interface ReplyComposerProps {
+  value: string;
+  placeholder: string;
+  isPending: boolean;
+  errorMessage?: string;
+  onChange: (value: string) => void;
+  onCancel: () => void;
+  onSubmit: () => void;
+}
+
+function ReplyComposer({
+  value,
+  placeholder,
+  isPending,
+  errorMessage,
+  onChange,
+  onCancel,
+  onSubmit,
+}: ReplyComposerProps) {
+  return (
+    <div className="ml-8 rounded-2xl bg-neutral-50 px-4 py-4">
+      <AutoSizeTextarea
+        value={value}
+        onChange={onChange}
+        placeholder={placeholder}
+        className="w-full rounded-2xl border border-neutral-200 bg-white px-4 py-3 text-sm leading-6 text-neutral-800 outline-none transition focus:border-neutral-300"
+      />
+      {errorMessage ? <p className="mt-2 text-sm text-red-500">{errorMessage}</p> : null}
+      <div className="mt-3 flex items-center justify-end gap-2">
+        <button
+          type="button"
+          onClick={onCancel}
+          className="rounded-xl border border-neutral-200 px-4 py-2 text-sm font-medium text-neutral-700 transition-colors hover:border-neutral-300 hover:text-neutral-900"
+        >
+          {DETAIL_COPY.cancel}
+        </button>
+        <button
+          type="button"
+          onClick={onSubmit}
+          disabled={isPending}
+          className="rounded-xl bg-neutral-950 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-neutral-800 disabled:cursor-not-allowed disabled:opacity-50"
+        >
+          {DETAIL_COPY.submit}
+        </button>
       </div>
-      <p className="mt-4 text-sm leading-7 text-neutral-700">{content}</p>
     </div>
   );
 }
 
+interface AutoSizeTextareaProps {
+  value: string;
+  placeholder?: string;
+  className?: string;
+  onChange: (value: string) => void;
+}
+
+function AutoSizeTextarea({ value, placeholder, className, onChange }: AutoSizeTextareaProps) {
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+
+  useLayoutEffect(() => {
+    const textarea = textareaRef.current;
+
+    if (!textarea) {
+      return;
+    }
+
+    textarea.style.height = '0px';
+    textarea.style.height = `${textarea.scrollHeight}px`;
+  }, [value]);
+
+  return (
+    <textarea
+      ref={textareaRef}
+      value={value}
+      rows={1}
+      placeholder={placeholder}
+      onChange={(event) => onChange(event.target.value)}
+      className={['min-h-[48px] resize-none overflow-hidden', className ?? ''].join(' ')}
+    />
+  );
+}
+
 function MetaDivider() {
   return <span className="text-neutral-300">|</span>;
 }
diff --git a/src/pages/community/BoardDetailPage.tsx b/src/pages/community/BoardDetailPage.tsx
index a0dda2c..68233bb 100644
--- a/src/pages/community/BoardDetailPage.tsx
+++ b/src/pages/community/BoardDetailPage.tsx
@@ -7,10 +7,16 @@ import {
   BOARD_DETAIL_STATUS_MESSAGES,
   BOARD_MUTATION_STATUS_MESSAGES,
   BoardDetailContent,
+  COMMENT_LIST_STATUS_MESSAGES,
+  COMMENT_MUTATION_STATUS_MESSAGES,
   CommunityLayout,
   DeleteBoardDialog,
   useBoardDetail,
+  useCommentList,
+  useCreateComment,
   useDeleteBoard,
+  useDeleteComment,
+  useUpdateComment,
 } from '@/features/community';
 import { getApiErrorMessage } from '@/shared/lib/api/errorMessage';
 import { LoadingSpinner } from '@/shared/ui';
@@ -37,10 +43,19 @@ export function BoardDetailPage() {
   const params = useParams();
   const boardId = useMemo(() => parseBoardId(params.boardId), [params.boardId]);
   const { data: board, isLoading, isError, error, refetch } = useBoardDetail(boardId);
-  const { nickname, profileUrl } = useCurrentUser();
+  const { user, nickname } = useCurrentUser();
   const { mutateAsync: deleteBoard, isPending: isDeleting } = useDeleteBoard();
+  const [commentPagination, setCommentPagination] = useState<{ boardId: number | null; page: number }>({
+    boardId,
+    page: 0,
+  });
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [deleteError, setDeleteError] = useState('');
+  const activeCommentPage = commentPagination.boardId === boardId ? commentPagination.page : 0;
+  const commentsQuery = useCommentList(boardId, { page: activeCommentPage, size: 20 });
+  const { mutateAsync: createComment, isPending: isCreatingComment } = useCreateComment();
+  const { mutateAsync: updateComment, isPending: isUpdatingComment } = useUpdateComment();
+  const { mutateAsync: deleteComment, isPending: isDeletingComment } = useDeleteComment();
 
   const canManage = Boolean(board && nickname && board.nickname.trim() === nickname.trim());
 
@@ -86,15 +101,94 @@ export function BoardDetailPage() {
     );
   }
 
+  const handleCreateComment = async ({
+    commentContent,
+    parentCommentId,
+  }: {
+    commentContent: string;
+    parentCommentId?: number | null;
+  }) => {
+    try {
+      setCommentPagination({ boardId, page: 0 });
+      await createComment({
+        boardId,
+        commentContent,
+        parentCommentId,
+      });
+    } catch (commentError) {
+      throw new Error(
+        getApiErrorMessage(
+          commentError,
+          '댓글을 등록하지 못했어요. 잠시 후 다시 시도해주세요.',
+          COMMENT_MUTATION_STATUS_MESSAGES,
+        ),
+      );
+    }
+  };
+
+  const handleUpdateComment = async ({ commentId, commentContent }: { commentId: number; commentContent: string }) => {
+    try {
+      await updateComment({
+        boardId,
+        commentId,
+        payload: {
+          commentContent,
+        },
+      });
+    } catch (commentError) {
+      throw new Error(
+        getApiErrorMessage(
+          commentError,
+          '댓글을 수정하지 못했어요. 잠시 후 다시 시도해주세요.',
+          COMMENT_MUTATION_STATUS_MESSAGES,
+        ),
+      );
+    }
+  };
+
+  const handleDeleteComment = async (commentId: number) => {
+    try {
+      await deleteComment({ boardId, commentId });
+    } catch (commentError) {
+      throw new Error(
+        getApiErrorMessage(
+          commentError,
+          '댓글을 삭제하지 못했어요. 잠시 후 다시 시도해주세요.',
+          COMMENT_MUTATION_STATUS_MESSAGES,
+        ),
+      );
+    }
+  };
+
   return (
     <PageShell>
       <CommunityLayout
         content={
           <BoardDetailContent
             board={board}
+            comments={commentsQuery.data?.data ?? []}
+            pageInfo={commentsQuery.data?.pageInfo}
             canManage={canManage}
-            currentUserProfileUrl={profileUrl}
+            currentUserId={user?.userId ?? null}
+            isCommentsLoading={commentsQuery.isLoading}
+            commentsErrorMessage={
+              commentsQuery.isError
+                ? getApiErrorMessage(
+                    commentsQuery.error,
+                    '댓글을 불러오지 못했어요. 잠시 후 다시 시도해주세요.',
+                    COMMENT_LIST_STATUS_MESSAGES,
+                  )
+                : undefined
+            }
+            isCreatingComment={isCreatingComment}
+            isUpdatingComment={isUpdatingComment}
+            isDeletingComment={isDeletingComment}
             onDelete={() => setDeleteDialogOpen(true)}
+            onRetryComments={() => void commentsQuery.refetch()}
+            onCreateComment={handleCreateComment}
+            onUpdateComment={handleUpdateComment}
+            onDeleteComment={handleDeleteComment}
+            onChangeCommentPage={(page) => setCommentPagination({ boardId, page })}
           />
         }
       />
diff --git a/src/pages/community/CommunityMyActivityPage.tsx b/src/pages/community/CommunityMyActivityPage.tsx
index 7fb0540..3063d65 100644
--- a/src/pages/community/CommunityMyActivityPage.tsx
+++ b/src/pages/community/CommunityMyActivityPage.tsx
@@ -1,11 +1,25 @@
-import type { ReactNode } from 'react';
+import type { ReactNode } from 'react';
+import { useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
 
 import { useCurrentUser } from '@/features/auth';
-import { CommunityLayout, CommunitySidebarPanel } from '@/features/community';
+import {
+  type BoardListItem,
+  type MyCommentListItem,
+  CommunityFeedCard,
+  CommunityLayout,
+  CommunitySidebarPanel,
+  MY_ACTIVITY_STATUS_MESSAGES,
+  useMyBoardList,
+  useMyCommentList,
+} from '@/features/community';
+import { getApiErrorMessage } from '@/shared/lib/api/errorMessage';
+import { LoadingSpinner } from '@/shared/ui';
 
 type ActivityTab = 'posts' | 'comments';
 
+const PAGE_SIZE = 10;
+
 const ACTIVITY_COPY = {
   heading: '내 활동',
   description: '내가 남긴 게시글과 댓글 활동을 한곳에서 확인해보세요.',
@@ -17,6 +31,15 @@ const ACTIVITY_COPY = {
   emptyCommentsDescription: '다른 친구들의 게시글에 댓글을 남기며 소통해보세요.',
   writePost: '글쓰기',
   browseCommunity: '커뮤니티 둘러보기',
+  postsFailedTitle: '내 게시글을 불러오지 못했어요.',
+  commentsFailedTitle: '내 댓글을 불러오지 못했어요.',
+  failedDescription: '잠시 후 다시 시도해주세요.',
+  retry: '다시 시도',
+  previousPage: '이전',
+  nextPage: '다음',
+  loadingPosts: '내 게시글을 불러오는 중...',
+  loadingComments: '내 댓글을 불러오는 중...',
+  commentOn: '댓글 단 게시글',
 };
 
 function getTabFromSearch(value: string | null): ActivityTab {
@@ -28,6 +51,14 @@ export function CommunityMyActivityPage() {
   const [searchParams] = useSearchParams();
   const activeTab = getTabFromSearch(searchParams.get('tab'));
   const { profileUrl, nickname } = useCurrentUser();
+  const [postsPage, setPostsPage] = useState(0);
+  const [commentsPage, setCommentsPage] = useState(0);
+
+  const myPostsQuery = useMyBoardList({ page: postsPage, size: PAGE_SIZE }, { enabled: activeTab === 'posts' });
+  const myCommentsQuery = useMyCommentList(
+    { page: commentsPage, size: PAGE_SIZE },
+    { enabled: activeTab === 'comments' },
+  );
 
   return (
     <CommunityLayout
@@ -47,7 +78,40 @@ export function CommunityMyActivityPage() {
               </TabButton>
             </div>
 
-            <div className="px-6 py-8 sm:px-8">{activeTab === 'posts' ? <MyPostsTab /> : <MyCommentsTab />}</div>
+            <div className="px-6 py-8 sm:px-8">
+              {activeTab === 'posts' ? (
+                <MyPostsTab
+                  boards={myPostsQuery.data?.boards ?? []}
+                  page={postsPage}
+                  hasNextPage={(myPostsQuery.data?.boards.length ?? 0) >= PAGE_SIZE}
+                  isLoading={myPostsQuery.isLoading}
+                  isError={myPostsQuery.isError}
+                  errorMessage={getApiErrorMessage(
+                    myPostsQuery.error,
+                    ACTIVITY_COPY.failedDescription,
+                    MY_ACTIVITY_STATUS_MESSAGES,
+                  )}
+                  onRetry={() => void myPostsQuery.refetch()}
+                  onPreviousPage={() => setPostsPage((current) => Math.max(current - 1, 0))}
+                  onNextPage={() => setPostsPage((current) => current + 1)}
+                />
+              ) : (
+                <MyCommentsTab
+                  comments={myCommentsQuery.data?.data ?? []}
+                  pageInfo={myCommentsQuery.data?.pageInfo}
+                  isLoading={myCommentsQuery.isLoading}
+                  isError={myCommentsQuery.isError}
+                  errorMessage={getApiErrorMessage(
+                    myCommentsQuery.error,
+                    ACTIVITY_COPY.failedDescription,
+                    MY_ACTIVITY_STATUS_MESSAGES,
+                  )}
+                  onRetry={() => void myCommentsQuery.refetch()}
+                  onPreviousPage={() => setCommentsPage((current) => Math.max(current - 1, 0))}
+                  onNextPage={() => setCommentsPage((current) => current + 1)}
+                />
+              )}
+            </div>
           </div>
         </div>
       }
@@ -69,39 +133,221 @@ function TabButton({ to, isActive, children }: { to: string; isActive: boolean;
   );
 }
 
-function MyPostsTab() {
+interface MyPostsTabProps {
+  boards: BoardListItem[];
+  page: number;
+  hasNextPage: boolean;
+  isLoading: boolean;
+  isError: boolean;
+  errorMessage: string;
+  onRetry: () => void;
+  onPreviousPage: () => void;
+  onNextPage: () => void;
+}
+
+function MyPostsTab({
+  boards,
+  page,
+  hasNextPage,
+  isLoading,
+  isError,
+  errorMessage,
+  onRetry,
+  onPreviousPage,
+  onNextPage,
+}: MyPostsTabProps) {
+  if (isLoading) {
+    return <LoadingState message={ACTIVITY_COPY.loadingPosts} />;
+  }
+
+  if (isError) {
+    return <ErrorState title={ACTIVITY_COPY.postsFailedTitle} description={errorMessage} onRetry={onRetry} />;
+  }
+
+  if (boards.length === 0) {
+    return (
+      <EmptyState
+        icon={<PostIcon className="h-10 w-10 text-neutral-300" />}
+        message={ACTIVITY_COPY.emptyPostsTitle}
+        description={ACTIVITY_COPY.emptyPostsDescription}
+        action={
+          <Link
+            to="/community/new"
+            className="inline-flex items-center justify-center rounded-2xl bg-neutral-950 px-5 py-3 text-sm font-semibold text-white transition-transform duration-200 hover:-translate-y-0.5"
+          >
+            {ACTIVITY_COPY.writePost}
+          </Link>
+        }
+      />
+    );
+  }
+
   return (
-    <EmptyState
-      icon={<PostIcon className="h-10 w-10 text-neutral-300" />}
-      message={ACTIVITY_COPY.emptyPostsTitle}
-      description={ACTIVITY_COPY.emptyPostsDescription}
-      action={
-        <Link
-          to="/community/new"
-          className="inline-flex items-center justify-center rounded-2xl bg-neutral-950 px-5 py-3 text-sm font-semibold text-white transition-transform duration-200 hover:-translate-y-0.5"
-        >
-          {ACTIVITY_COPY.writePost}
-        </Link>
-      }
-    />
+    <div className="space-y-8">
+      <div>
+        {boards.map((board) => (
+          <CommunityFeedCard
+            key={board.boardId}
+            title={board.boardTitle}
+            preview={board.boardContentPreview}
+            imageUrl={board.thumbnailImageUrl}
+            nickname={board.nickname}
+            likes={board.likeCount}
+            comments={board.commentCount}
+            views={board.viewCount}
+            createdAt={board.createdAt}
+            to={`/community/${board.boardId}`}
+            variant="list"
+          />
+        ))}
+      </div>
+
+      <PaginationControls
+        page={page}
+        hasPreviousPage={page > 0}
+        hasNextPage={hasNextPage}
+        onPreviousPage={onPreviousPage}
+        onNextPage={onNextPage}
+      />
+    </div>
   );
 }
 
-function MyCommentsTab() {
+interface MyCommentsTabProps {
+  comments: MyCommentListItem[];
+  pageInfo?: { page: number; totalPages: number };
+  isLoading: boolean;
+  isError: boolean;
+  errorMessage: string;
+  onRetry: () => void;
+  onPreviousPage: () => void;
+  onNextPage: () => void;
+}
+
+function MyCommentsTab({
+  comments,
+  pageInfo,
+  isLoading,
+  isError,
+  errorMessage,
+  onRetry,
+  onPreviousPage,
+  onNextPage,
+}: MyCommentsTabProps) {
+  if (isLoading) {
+    return <LoadingState message={ACTIVITY_COPY.loadingComments} />;
+  }
+
+  if (isError) {
+    return <ErrorState title={ACTIVITY_COPY.commentsFailedTitle} description={errorMessage} onRetry={onRetry} />;
+  }
+
+  if (comments.length === 0) {
+    return (
+      <EmptyState
+        icon={<CommentIcon className="h-10 w-10 text-neutral-300" />}
+        message={ACTIVITY_COPY.emptyCommentsTitle}
+        description={ACTIVITY_COPY.emptyCommentsDescription}
+        action={
+          <Link
+            to="/community"
+            className="inline-flex items-center justify-center rounded-2xl border border-neutral-200 bg-white px-5 py-3 text-sm font-medium text-neutral-700 transition-colors hover:border-brand/30 hover:bg-brand/[0.04]"
+          >
+            {ACTIVITY_COPY.browseCommunity}
+          </Link>
+        }
+      />
+    );
+  }
+
   return (
-    <EmptyState
-      icon={<CommentIcon className="h-10 w-10 text-neutral-300" />}
-      message={ACTIVITY_COPY.emptyCommentsTitle}
-      description={ACTIVITY_COPY.emptyCommentsDescription}
-      action={
-        <Link
-          to="/community"
-          className="inline-flex items-center justify-center rounded-2xl border border-neutral-200 bg-white px-5 py-3 text-sm font-medium text-neutral-700 transition-colors hover:border-brand/30 hover:bg-brand/[0.04]"
-        >
-          {ACTIVITY_COPY.browseCommunity}
-        </Link>
-      }
-    />
+    <div className="space-y-8">
+      <div className="divide-y divide-neutral-200 rounded-[22px] border border-neutral-200 bg-white">
+        {comments.map((comment) => (
+          <Link
+            key={comment.commentId}
+            to={`/community/${comment.boardId}`}
+            className="block px-5 py-5 transition-colors hover:bg-neutral-50"
+          >
+            <p className="text-xs font-semibold tracking-[0.14em] text-brand">{ACTIVITY_COPY.commentOn}</p>
+            <p className="mt-2 text-[17px] font-semibold tracking-[-0.03em] text-neutral-900">{comment.boardTitle}</p>
+            <p className="mt-3 line-clamp-2 whitespace-pre-wrap text-[15px] leading-7 text-neutral-600">
+              {comment.commentContent}
+            </p>
+            <p className="mt-3 text-sm text-neutral-400">{formatDateTime(comment.modifiedAt ?? comment.createdAt)}</p>
+          </Link>
+        ))}
+      </div>
+
+      <PaginationControls
+        page={pageInfo?.page ?? 0}
+        hasPreviousPage={(pageInfo?.page ?? 0) > 0}
+        hasNextPage={(pageInfo?.page ?? 0) < (pageInfo?.totalPages ?? 1) - 1}
+        onPreviousPage={onPreviousPage}
+        onNextPage={onNextPage}
+      />
+    </div>
+  );
+}
+
+function PaginationControls({
+  page,
+  hasPreviousPage,
+  hasNextPage,
+  onPreviousPage,
+  onNextPage,
+}: {
+  page: number;
+  hasPreviousPage: boolean;
+  hasNextPage: boolean;
+  onPreviousPage: () => void;
+  onNextPage: () => void;
+}) {
+  return (
+    <div className="flex items-center justify-center gap-3">
+      <button
+        type="button"
+        onClick={onPreviousPage}
+        disabled={!hasPreviousPage}
+        className="rounded-xl border border-neutral-200 px-4 py-2 text-sm font-medium text-neutral-700 transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+      >
+        {ACTIVITY_COPY.previousPage}
+      </button>
+      <span className="text-sm text-neutral-500">{page + 1}</span>
+      <button
+        type="button"
+        onClick={onNextPage}
+        disabled={!hasNextPage}
+        className="rounded-xl border border-neutral-200 px-4 py-2 text-sm font-medium text-neutral-700 transition-colors disabled:cursor-not-allowed disabled:opacity-40"
+      >
+        {ACTIVITY_COPY.nextPage}
+      </button>
+    </div>
+  );
+}
+
+function LoadingState({ message }: { message: string }) {
+  return (
+    <div className="flex min-h-[240px] flex-col items-center justify-center rounded-[22px] bg-neutral-50 text-center">
+      <LoadingSpinner size="lg" />
+      <p className="mt-4 text-sm text-neutral-500">{message}</p>
+    </div>
+  );
+}
+
+function ErrorState({ title, description, onRetry }: { title: string; description: string; onRetry: () => void }) {
+  return (
+    <div className="flex flex-col items-center justify-center rounded-[22px] bg-neutral-50 px-6 py-10 text-center">
+      <p className="text-sm font-semibold text-neutral-800">{title}</p>
+      <p className="mt-1.5 text-sm leading-6 text-neutral-500">{description}</p>
+      <button
+        type="button"
+        onClick={onRetry}
+        className="mt-6 inline-flex items-center justify-center rounded-2xl border border-neutral-200 bg-white px-5 py-3 text-sm font-medium text-neutral-700 transition-colors hover:border-brand/30 hover:bg-brand/[0.04]"
+      >
+        {ACTIVITY_COPY.retry}
+      </button>
+    </div>
   );
 }
 
@@ -126,6 +372,24 @@ function EmptyState({
   );
 }
 
+function formatDateTime(value?: string) {
+  if (!value) return '';
+
+  const date = new Date(value);
+
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+
+  return new Intl.DateTimeFormat('ko-KR', {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(date);
+}
+
 function PostIcon({ className }: { className?: string }) {
   return (
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden className={className}>
diff --git a/src/shared/lib/react-query/queryKey.ts b/src/shared/lib/react-query/queryKey.ts
index bcf1133..f4e9933 100644
--- a/src/shared/lib/react-query/queryKey.ts
+++ b/src/shared/lib/react-query/queryKey.ts
@@ -4,8 +4,16 @@ export const queryKeys = {
       ['boards', 'list', params?.page ?? 0, params?.size ?? 12] as const,
     listInfinite: () => ['boards', 'list-infinite'] as const,
     detail: (boardId: number) => ['boards', boardId, 'detail'] as const,
+    comments: (boardId: number, params?: { page?: number; size?: number }) =>
+      ['boards', boardId, 'comments', params?.page ?? 0, params?.size ?? 20] as const,
+    mine: (params?: { page?: number; size?: number }) =>
+      ['boards', 'mine', params?.page ?? 0, params?.size ?? 10] as const,
     tempSaved: (sessionKey: string) => ['boards', 'temp-save', sessionKey] as const,
   },
+  comments: {
+    mine: (params?: { page?: number; size?: number }) =>
+      ['comments', 'mine', params?.page ?? 0, params?.size ?? 10] as const,
+  },
   pets: {
     list: (params?: { page?: number; size?: number; sort?: string }) =>
       ['pets', 'list', params?.page ?? 0, params?.size ?? 10, params?.sort ?? 'registrationCreatedAt,desc'] as const,