From bcbcafb58f32187a1a2945ebede84b48c1124121 Mon Sep 17 00:00:00 2001
From: sooloin <csb7543@naver.com>
Date: Fri, 12 Jun 2026 19:13:53 +0900
Subject: [PATCH 01/13] =?UTF-8?q?:sparkles:=20Feat:=20=EC=BB=A4=EB=AE=A4?=
 =?UTF-8?q?=EB=8B=88=ED=8B=B0=20=EA=B2=8C=EC=8B=9C=ED=8C=90=20API=20?=
 =?UTF-8?q?=EA=B8=B0=EB=B0=98=20=EA=B5=AC=EC=A1=B0=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 커뮤니티 게시판 요청/응답 타입 추가
- 게시글 CRUD 및 임시저장 API 함수 추가
- 커뮤니티 에러/상태 상수 및 임시저장 스토리지 키 추가
- feature index에서 커뮤니티 도메인 기반 구조 export
- 게시글 상세 및 임시저장 게시글용 react-query key 추가

`#53`
---
 src/features/community/api/boards.ts    | 43 ++++++++++++++++++++
 src/features/community/index.ts         | 19 +++++++++
 src/features/community/lib/constants.ts | 24 ++++++++++++
 src/features/community/model/types.ts   | 52 +++++++++++++++++++++++++
 src/shared/lib/react-query/queryKey.ts  |  4 ++
 5 files changed, 142 insertions(+)
 create mode 100644 src/features/community/api/boards.ts
 create mode 100644 src/features/community/index.ts
 create mode 100644 src/features/community/lib/constants.ts
 create mode 100644 src/features/community/model/types.ts

diff --git a/src/features/community/api/boards.ts b/src/features/community/api/boards.ts
new file mode 100644
index 0000000..a9bca1a
--- /dev/null
+++ b/src/features/community/api/boards.ts
@@ -0,0 +1,43 @@
+import { apiClient } from '@/shared/api/axios';
+
+import type {
+  BoardDetailResponse,
+  CreateBoardRequest,
+  CreateBoardResponse,
+  DeleteBoardResponse,
+  TempSavedBoardResponse,
+  TempSaveBoardRequest,
+  TempSaveBoardResponse,
+  UpdateBoardRequest,
+  UpdateBoardResponse,
+} from '../model/types';
+
+export async function createBoard(payload: CreateBoardRequest): Promise<CreateBoardResponse> {
+  const response = await apiClient.post<CreateBoardResponse>('/boards', payload);
+  return response.data;
+}
+
+export async function tempSaveBoard(payload: TempSaveBoardRequest): Promise<TempSaveBoardResponse> {
+  const response = await apiClient.post<TempSaveBoardResponse>('/boards/temp-save', payload);
+  return response.data;
+}
+
+export async function getTempSavedBoard(sessionKey: string): Promise<TempSavedBoardResponse> {
+  const response = await apiClient.get<TempSavedBoardResponse>(`/boards/temp-save/${sessionKey}`);
+  return response.data;
+}
+
+export async function getBoardDetail(boardId: number): Promise<BoardDetailResponse> {
+  const response = await apiClient.get<BoardDetailResponse>(`/boards/${boardId}`);
+  return response.data;
+}
+
+export async function updateBoard(boardId: number, payload: UpdateBoardRequest): Promise<UpdateBoardResponse> {
+  const response = await apiClient.patch<UpdateBoardResponse>(`/boards/${boardId}`, payload);
+  return response.data;
+}
+
+export async function deleteBoard(boardId: number): Promise<DeleteBoardResponse> {
+  const response = await apiClient.delete<DeleteBoardResponse>(`/boards/${boardId}`);
+  return response.data;
+}
diff --git a/src/features/community/index.ts b/src/features/community/index.ts
new file mode 100644
index 0000000..8844028
--- /dev/null
+++ b/src/features/community/index.ts
@@ -0,0 +1,19 @@
+export { createBoard, deleteBoard, getBoardDetail, getTempSavedBoard, tempSaveBoard, updateBoard } from './api/boards';
+export {
+  BOARD_DETAIL_STATUS_MESSAGES,
+  BOARD_DRAFT_STATUS_MESSAGES,
+  BOARD_MUTATION_STATUS_MESSAGES,
+  COMMUNITY_DRAFT_SESSION_KEY,
+} from './lib/constants';
+export type {
+  BoardDetailResponse,
+  BoardPayload,
+  CreateBoardRequest,
+  CreateBoardResponse,
+  DeleteBoardResponse,
+  TempSavedBoardResponse,
+  TempSaveBoardRequest,
+  TempSaveBoardResponse,
+  UpdateBoardRequest,
+  UpdateBoardResponse,
+} from './model/types';
diff --git a/src/features/community/lib/constants.ts b/src/features/community/lib/constants.ts
new file mode 100644
index 0000000..941f228
--- /dev/null
+++ b/src/features/community/lib/constants.ts
@@ -0,0 +1,24 @@
+export const COMMUNITY_DRAFT_SESSION_KEY = 'community-board-draft-session-key';
+
+export const BOARD_MUTATION_STATUS_MESSAGES: Partial<Record<number, string>> = {
+  400: '입력값을 다시 확인해주세요.',
+  401: '로그인이 필요합니다. 다시 로그인해주세요.',
+  403: '게시글을 처리할 권한이 없습니다.',
+  500: '서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
+};
+
+export const BOARD_DETAIL_STATUS_MESSAGES: Partial<Record<number, string>> = {
+  400: '잘못된 게시글 요청입니다.',
+  401: '로그인이 필요합니다. 다시 로그인해주세요.',
+  403: '게시글을 조회할 권한이 없습니다.',
+  404: '게시글을 찾을 수 없습니다.',
+  500: '서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
+};
+
+export const BOARD_DRAFT_STATUS_MESSAGES: Partial<Record<number, string>> = {
+  400: '임시 저장 요청을 처리할 수 없습니다.',
+  401: '로그인이 필요합니다. 다시 로그인해주세요.',
+  403: '임시 저장 게시글을 처리할 권한이 없습니다.',
+  404: '임시 저장된 게시글을 찾을 수 없습니다.',
+  500: '서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
+};
diff --git a/src/features/community/model/types.ts b/src/features/community/model/types.ts
new file mode 100644
index 0000000..d31dd35
--- /dev/null
+++ b/src/features/community/model/types.ts
@@ -0,0 +1,52 @@
+export interface BoardPayload {
+  boardTitle: string;
+  boardContent: string;
+  imageFileUrls: string[];
+}
+
+export type CreateBoardRequest = BoardPayload;
+
+export interface CreateBoardResponse {
+  message: string;
+  boardId: number;
+}
+
+export interface TempSaveBoardRequest {
+  boardTitle?: string;
+  boardContent?: string;
+  imageFileUrl?: string;
+}
+
+export interface TempSaveBoardResponse {
+  message: string;
+  sessionKey: string;
+}
+
+export interface TempSavedBoardResponse {
+  message: string;
+  boardTitle: string;
+  boardContent: string;
+  imageFileUrl: string | null;
+}
+
+export interface BoardDetailResponse {
+  message: string;
+  boardId: number;
+  boardTitle: string;
+  boardContent: string;
+  imageFileUrls: string[];
+  nickname: string;
+  viewCount: number;
+  boardCreatedAt: string;
+  modifiedAt: string;
+}
+
+export type UpdateBoardRequest = BoardPayload;
+
+export interface UpdateBoardResponse {
+  message: string;
+}
+
+export interface DeleteBoardResponse {
+  message: string;
+}
diff --git a/src/shared/lib/react-query/queryKey.ts b/src/shared/lib/react-query/queryKey.ts
index 44d7cb0..03e14c9 100644
--- a/src/shared/lib/react-query/queryKey.ts
+++ b/src/shared/lib/react-query/queryKey.ts
@@ -1,4 +1,8 @@
 export const queryKeys = {
+  boards: {
+    detail: (boardId: number) => ['boards', boardId, 'detail'] as const,
+    tempSaved: (sessionKey: string) => ['boards', 'temp-save', sessionKey] 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,

From 486e8a041be14f498f42fffb978ef717a4e79b78 Mon Sep 17 00:00:00 2001
From: sooloin <csb7543@naver.com>
Date: Fri, 12 Jun 2026 19:19:43 +0900
Subject: [PATCH 02/13] =?UTF-8?q?:sparkles:=20Feat:=20=EC=BB=A4=EB=AE=A4?=
 =?UTF-8?q?=EB=8B=88=ED=8B=B0=20=EA=B2=8C=EC=8B=9C=ED=8C=90=20=ED=9B=85=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=97=90=EB=94=94=ED=84=B0=20=EC=83=81=ED=83=9C=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 커뮤니티 게시판 query/mutation 훅 추가
- 공통 게시글 에디터 폼 상태 및 유효성 검사 추가
- 임시저장 세션 키 유지를 위한 localStorage 헬퍼 추가
- useBoardEditorForm에 게시글 작성/수정/임시저장 에디터 플로우 구현
- feature index에서 커뮤니티 훅 및 폼 유틸리티 export

`#53`
---
 src/features/community/index.ts               |  15 +
 src/features/community/lib/storage.ts         |  26 ++
 src/features/community/lib/validation.ts      |  30 ++
 .../community/model/useBoardDetail.ts         |  14 +
 .../community/model/useBoardEditorForm.ts     | 324 ++++++++++++++++++
 .../community/model/useCreateBoard.ts         |  10 +
 .../community/model/useDeleteBoard.ts         |  22 ++
 .../community/model/useTempSaveBoard.ts       |  10 +
 .../community/model/useTempSavedBoard.ts      |  14 +
 .../community/model/useUpdateBoard.ts         |  23 ++
 10 files changed, 488 insertions(+)
 create mode 100644 src/features/community/lib/storage.ts
 create mode 100644 src/features/community/lib/validation.ts
 create mode 100644 src/features/community/model/useBoardDetail.ts
 create mode 100644 src/features/community/model/useBoardEditorForm.ts
 create mode 100644 src/features/community/model/useCreateBoard.ts
 create mode 100644 src/features/community/model/useDeleteBoard.ts
 create mode 100644 src/features/community/model/useTempSaveBoard.ts
 create mode 100644 src/features/community/model/useTempSavedBoard.ts
 create mode 100644 src/features/community/model/useUpdateBoard.ts

diff --git a/src/features/community/index.ts b/src/features/community/index.ts
index 8844028..d8d5d12 100644
--- a/src/features/community/index.ts
+++ b/src/features/community/index.ts
@@ -5,6 +5,19 @@ export {
   BOARD_MUTATION_STATUS_MESSAGES,
   COMMUNITY_DRAFT_SESSION_KEY,
 } from './lib/constants';
+export {
+  clearStoredBoardDraftSessionKey,
+  getStoredBoardDraftSessionKey,
+  setStoredBoardDraftSessionKey,
+} from './lib/storage';
+export { INITIAL_BOARD_EDITOR_FORM_STATE, validateBoardEditorForm } from './lib/validation';
+export { useBoardDetail } from './model/useBoardDetail';
+export { useBoardEditorForm } from './model/useBoardEditorForm';
+export { useCreateBoard } from './model/useCreateBoard';
+export { useDeleteBoard } from './model/useDeleteBoard';
+export { useTempSaveBoard } from './model/useTempSaveBoard';
+export { useTempSavedBoard } from './model/useTempSavedBoard';
+export { useUpdateBoard } from './model/useUpdateBoard';
 export type {
   BoardDetailResponse,
   BoardPayload,
@@ -17,3 +30,5 @@ export type {
   UpdateBoardRequest,
   UpdateBoardResponse,
 } from './model/types';
+export type { BoardEditorFormErrors, BoardEditorFormState } from './lib/validation';
+export type { BoardEditorMode, UseBoardEditorFormOptions } from './model/useBoardEditorForm';
diff --git a/src/features/community/lib/storage.ts b/src/features/community/lib/storage.ts
new file mode 100644
index 0000000..2fe626a
--- /dev/null
+++ b/src/features/community/lib/storage.ts
@@ -0,0 +1,26 @@
+import { COMMUNITY_DRAFT_SESSION_KEY } from './constants';
+
+export function getStoredBoardDraftSessionKey(): string | null {
+  if (typeof window === 'undefined') {
+    return null;
+  }
+
+  const value = window.localStorage.getItem(COMMUNITY_DRAFT_SESSION_KEY);
+  return value?.trim() ? value : null;
+}
+
+export function setStoredBoardDraftSessionKey(sessionKey: string) {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  window.localStorage.setItem(COMMUNITY_DRAFT_SESSION_KEY, sessionKey);
+}
+
+export function clearStoredBoardDraftSessionKey() {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  window.localStorage.removeItem(COMMUNITY_DRAFT_SESSION_KEY);
+}
diff --git a/src/features/community/lib/validation.ts b/src/features/community/lib/validation.ts
new file mode 100644
index 0000000..7759a2d
--- /dev/null
+++ b/src/features/community/lib/validation.ts
@@ -0,0 +1,30 @@
+export interface BoardEditorFormState {
+  boardTitle: string;
+  boardContent: string;
+  imageFileUrls: string[];
+}
+
+export interface BoardEditorFormErrors {
+  boardTitle?: string;
+  boardContent?: string;
+}
+
+export const INITIAL_BOARD_EDITOR_FORM_STATE: BoardEditorFormState = {
+  boardTitle: '',
+  boardContent: '',
+  imageFileUrls: [],
+};
+
+export function validateBoardEditorForm(form: BoardEditorFormState): BoardEditorFormErrors {
+  const errors: BoardEditorFormErrors = {};
+
+  if (!form.boardTitle.trim()) {
+    errors.boardTitle = '게시글 제목을 입력해주세요.';
+  }
+
+  if (!form.boardContent.trim()) {
+    errors.boardContent = '게시글 내용을 입력해주세요.';
+  }
+
+  return errors;
+}
diff --git a/src/features/community/model/useBoardDetail.ts b/src/features/community/model/useBoardDetail.ts
new file mode 100644
index 0000000..7484dba
--- /dev/null
+++ b/src/features/community/model/useBoardDetail.ts
@@ -0,0 +1,14 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getBoardDetail } from '@/features/community/api/boards';
+import { queryKeys } from '@/shared/lib/react-query/queryKey';
+
+export function useBoardDetail(boardId: number | null) {
+  const isValidId = boardId !== null && !Number.isNaN(boardId);
+
+  return useQuery({
+    queryKey: isValidId ? queryKeys.boards.detail(boardId) : ['boards', 'detail', 'idle'],
+    queryFn: () => getBoardDetail(boardId as number),
+    enabled: isValidId,
+  });
+}
diff --git a/src/features/community/model/useBoardEditorForm.ts b/src/features/community/model/useBoardEditorForm.ts
new file mode 100644
index 0000000..6da84f0
--- /dev/null
+++ b/src/features/community/model/useBoardEditorForm.ts
@@ -0,0 +1,324 @@
+import { useEffect, useMemo, useRef, useState, type ChangeEventHandler, type FormEvent } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import { uploadImages } from '@/shared/api/files';
+import { getApiErrorMessage } from '@/shared/lib/api/errorMessage';
+import { validateImageFiles } from '@/shared/lib/files/imageUploadPolicy';
+
+import {
+  BOARD_DETAIL_STATUS_MESSAGES,
+  BOARD_DRAFT_STATUS_MESSAGES,
+  BOARD_MUTATION_STATUS_MESSAGES,
+} from '../lib/constants';
+import {
+  clearStoredBoardDraftSessionKey,
+  getStoredBoardDraftSessionKey,
+  setStoredBoardDraftSessionKey,
+} from '../lib/storage';
+import {
+  INITIAL_BOARD_EDITOR_FORM_STATE,
+  validateBoardEditorForm,
+  type BoardEditorFormErrors,
+  type BoardEditorFormState,
+} from '../lib/validation';
+import type { BoardDetailResponse, TempSavedBoardResponse } from './types';
+import { useBoardDetail } from './useBoardDetail';
+import { useCreateBoard } from './useCreateBoard';
+import { useTempSaveBoard } from './useTempSaveBoard';
+import { useTempSavedBoard } from './useTempSavedBoard';
+import { useUpdateBoard } from './useUpdateBoard';
+
+export type BoardEditorMode = 'create' | 'edit';
+
+export interface UseBoardEditorFormOptions {
+  mode: BoardEditorMode;
+  boardId?: number | null;
+}
+
+function mapBoardDetailToFormState(board: BoardDetailResponse): BoardEditorFormState {
+  return {
+    boardTitle: board.boardTitle,
+    boardContent: board.boardContent,
+    imageFileUrls: board.imageFileUrls ?? [],
+  };
+}
+
+function mapTempSavedBoardToFormState(board: TempSavedBoardResponse): BoardEditorFormState {
+  return {
+    boardTitle: board.boardTitle ?? '',
+    boardContent: board.boardContent ?? '',
+    imageFileUrls: board.imageFileUrl ? [board.imageFileUrl] : [],
+  };
+}
+
+export function useBoardEditorForm({ mode, boardId = null }: UseBoardEditorFormOptions) {
+  const navigate = useNavigate();
+  const createBoardMutation = useCreateBoard();
+  const updateBoardMutation = useUpdateBoard();
+  const tempSaveBoardMutation = useTempSaveBoard();
+  const [storedDraftSessionKey, setStoredDraftSessionKeyState] = useState<string | null>(() =>
+    mode === 'create' ? getStoredBoardDraftSessionKey() : null,
+  );
+  const {
+    data: board,
+    isLoading: isBoardLoading,
+    isError: isBoardError,
+    error: boardError,
+    refetch: refetchBoard,
+  } = useBoardDetail(mode === 'edit' ? boardId : null);
+  const {
+    data: restoredDraft,
+    isLoading: isRestoringDraft,
+    isError: isDraftError,
+    error: draftError,
+    refetch: refetchDraft,
+  } = useTempSavedBoard(mode === 'create' ? storedDraftSessionKey : null);
+
+  const [form, setForm] = useState<BoardEditorFormState>(INITIAL_BOARD_EDITOR_FORM_STATE);
+  const [errors, setErrors] = useState<BoardEditorFormErrors>({});
+  const [submitError, setSubmitError] = useState('');
+  const [tempSaveError, setTempSaveError] = useState('');
+  const [restoreError, setRestoreError] = useState('');
+  const [imageError, setImageError] = useState('');
+  const [uploadingImages, setUploadingImages] = useState(false);
+  const didHydrateBoardRef = useRef(false);
+  const didHydrateDraftRef = useRef(false);
+
+  useEffect(() => {
+    if (mode !== 'edit' || !board || didHydrateBoardRef.current) {
+      return;
+    }
+
+    setForm(mapBoardDetailToFormState(board));
+    setErrors({});
+    setSubmitError('');
+    setTempSaveError('');
+    setRestoreError('');
+    didHydrateBoardRef.current = true;
+  }, [board, mode]);
+
+  useEffect(() => {
+    if (mode !== 'create') {
+      return;
+    }
+
+    if (!storedDraftSessionKey) {
+      didHydrateDraftRef.current = true;
+      setRestoreError('');
+      return;
+    }
+
+    if (!restoredDraft || didHydrateDraftRef.current) {
+      return;
+    }
+
+    setForm(mapTempSavedBoardToFormState(restoredDraft));
+    setErrors({});
+    setSubmitError('');
+    setTempSaveError('');
+    setRestoreError('');
+    didHydrateDraftRef.current = true;
+  }, [mode, restoredDraft, storedDraftSessionKey]);
+
+  useEffect(() => {
+    if (!isDraftError) {
+      return;
+    }
+
+    setRestoreError(
+      getApiErrorMessage(
+        draftError,
+        '임시 저장 게시글을 불러오지 못했습니다. 잠시 후 다시 시도해주세요.',
+        BOARD_DRAFT_STATUS_MESSAGES,
+      ),
+    );
+  }, [draftError, isDraftError]);
+
+  const isPending = createBoardMutation.isPending || updateBoardMutation.isPending;
+  const isEditMode = mode === 'edit';
+
+  const handleFieldChange =
+    (field: keyof BoardEditorFormState): ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement> =>
+    (event) => {
+      const { value } = event.target;
+
+      setForm((prev) => ({
+        ...prev,
+        [field]: value,
+      }));
+
+      setErrors((prev) => ({
+        ...prev,
+        [field]: undefined,
+      }));
+
+      setSubmitError('');
+      setTempSaveError('');
+    };
+
+  const handleSelectImages = async (files: FileList | File[]) => {
+    if (uploadingImages) {
+      return;
+    }
+
+    const list = Array.from(files);
+    if (!list.length) {
+      return;
+    }
+
+    try {
+      validateImageFiles(list);
+    } catch (error) {
+      setImageError(error instanceof Error ? error.message : '이미지 파일을 다시 확인해주세요.');
+      return;
+    }
+
+    setUploadingImages(true);
+    setImageError('');
+
+    try {
+      const uploadedUrls = await uploadImages(list);
+      setForm((prev) => ({
+        ...prev,
+        imageFileUrls: [...prev.imageFileUrls, ...uploadedUrls],
+      }));
+    } catch (error) {
+      setImageError(getApiErrorMessage(error, '이미지 업로드에 실패했습니다. 잠시 후 다시 시도해주세요.'));
+    } finally {
+      setUploadingImages(false);
+    }
+  };
+
+  const handleRemoveImage = (index: number) => {
+    setForm((prev) => ({
+      ...prev,
+      imageFileUrls: prev.imageFileUrls.filter((_, imageIndex) => imageIndex !== index),
+    }));
+    setImageError('');
+  };
+
+  const handleTempSave = async () => {
+    setTempSaveError('');
+
+    try {
+      const result = await tempSaveBoardMutation.mutateAsync({
+        boardTitle: form.boardTitle.trim() || undefined,
+        boardContent: form.boardContent.trim() || undefined,
+        imageFileUrl: form.imageFileUrls[0] ?? undefined,
+      });
+
+      setStoredBoardDraftSessionKey(result.sessionKey);
+      setStoredDraftSessionKeyState(result.sessionKey);
+      didHydrateDraftRef.current = true;
+    } catch (error) {
+      setTempSaveError(
+        getApiErrorMessage(
+          error,
+          '게시글 임시 저장에 실패했습니다. 잠시 후 다시 시도해주세요.',
+          BOARD_DRAFT_STATUS_MESSAGES,
+        ),
+      );
+    }
+  };
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const nextErrors = validateBoardEditorForm(form);
+    setErrors(nextErrors);
+    setSubmitError('');
+
+    if (Object.keys(nextErrors).length > 0 || uploadingImages || isPending) {
+      return;
+    }
+
+    const payload = {
+      boardTitle: form.boardTitle.trim(),
+      boardContent: form.boardContent.trim(),
+      imageFileUrls: form.imageFileUrls,
+    };
+
+    try {
+      if (isEditMode) {
+        if (boardId === null) {
+          return;
+        }
+
+        await updateBoardMutation.mutateAsync({
+          boardId,
+          payload,
+        });
+
+        clearStoredBoardDraftSessionKey();
+        void navigate(`/community/${boardId}`);
+        return;
+      }
+
+      const result = await createBoardMutation.mutateAsync(payload);
+      clearStoredBoardDraftSessionKey();
+      void navigate(`/community/${result.boardId}`);
+    } catch (error) {
+      setSubmitError(
+        getApiErrorMessage(
+          error,
+          isEditMode
+            ? '게시글 수정에 실패했습니다. 잠시 후 다시 시도해주세요.'
+            : '게시글 작성에 실패했습니다. 잠시 후 다시 시도해주세요.',
+          BOARD_MUTATION_STATUS_MESSAGES,
+        ),
+      );
+    }
+  };
+
+  const resetStoredDraft = () => {
+    clearStoredBoardDraftSessionKey();
+    setStoredDraftSessionKeyState(null);
+    setRestoreError('');
+    didHydrateDraftRef.current = true;
+  };
+
+  const retryInitialLoad = async () => {
+    if (isEditMode) {
+      await refetchBoard();
+      return;
+    }
+
+    await refetchDraft();
+  };
+
+  const initialLoadErrorMessage = useMemo(() => {
+    if (isEditMode && isBoardError) {
+      return getApiErrorMessage(
+        boardError,
+        '게시글 정보를 불러오지 못했습니다. 잠시 후 다시 시도해주세요.',
+        BOARD_DETAIL_STATUS_MESSAGES,
+      );
+    }
+
+    return restoreError;
+  }, [boardError, isBoardError, isEditMode, restoreError]);
+
+  return {
+    form,
+    errors,
+    submitError,
+    tempSaveError,
+    restoreError,
+    imageError,
+    uploadingImages,
+    isPending,
+    isTempSaving: tempSaveBoardMutation.isPending,
+    isInitialLoading: isEditMode ? isBoardLoading : isRestoringDraft,
+    isInitialLoadError: isEditMode ? isBoardError : isDraftError,
+    initialLoadErrorMessage,
+    storedDraftSessionKey,
+    restoredDraft,
+    handleFieldChange,
+    handleSelectImages,
+    handleRemoveImage,
+    handleTempSave,
+    handleSubmit,
+    retryInitialLoad,
+    resetStoredDraft,
+  };
+}
diff --git a/src/features/community/model/useCreateBoard.ts b/src/features/community/model/useCreateBoard.ts
new file mode 100644
index 0000000..32d48ab
--- /dev/null
+++ b/src/features/community/model/useCreateBoard.ts
@@ -0,0 +1,10 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { createBoard } from '@/features/community/api/boards';
+import type { CreateBoardRequest, CreateBoardResponse } from '@/features/community/model/types';
+
+export function useCreateBoard() {
+  return useMutation<CreateBoardResponse, unknown, CreateBoardRequest>({
+    mutationFn: createBoard,
+  });
+}
diff --git a/src/features/community/model/useDeleteBoard.ts b/src/features/community/model/useDeleteBoard.ts
new file mode 100644
index 0000000..d46f0b9
--- /dev/null
+++ b/src/features/community/model/useDeleteBoard.ts
@@ -0,0 +1,22 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { deleteBoard } from '@/features/community/api/boards';
+import type { DeleteBoardResponse } from '@/features/community/model/types';
+import { queryKeys } from '@/shared/lib/react-query/queryKey';
+
+interface DeleteBoardVariables {
+  boardId: number;
+}
+
+export function useDeleteBoard() {
+  const queryClient = useQueryClient();
+
+  return useMutation<DeleteBoardResponse, unknown, DeleteBoardVariables>({
+    mutationFn: ({ boardId }) => deleteBoard(boardId),
+    onSuccess: (_, variables) => {
+      void queryClient.removeQueries({
+        queryKey: queryKeys.boards.detail(variables.boardId),
+      });
+    },
+  });
+}
diff --git a/src/features/community/model/useTempSaveBoard.ts b/src/features/community/model/useTempSaveBoard.ts
new file mode 100644
index 0000000..e87dd5c
--- /dev/null
+++ b/src/features/community/model/useTempSaveBoard.ts
@@ -0,0 +1,10 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { tempSaveBoard } from '@/features/community/api/boards';
+import type { TempSaveBoardRequest, TempSaveBoardResponse } from '@/features/community/model/types';
+
+export function useTempSaveBoard() {
+  return useMutation<TempSaveBoardResponse, unknown, TempSaveBoardRequest>({
+    mutationFn: tempSaveBoard,
+  });
+}
diff --git a/src/features/community/model/useTempSavedBoard.ts b/src/features/community/model/useTempSavedBoard.ts
new file mode 100644
index 0000000..b69438d
--- /dev/null
+++ b/src/features/community/model/useTempSavedBoard.ts
@@ -0,0 +1,14 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { getTempSavedBoard } from '@/features/community/api/boards';
+import { queryKeys } from '@/shared/lib/react-query/queryKey';
+
+export function useTempSavedBoard(sessionKey: string | null) {
+  const hasSessionKey = Boolean(sessionKey?.trim());
+
+  return useQuery({
+    queryKey: hasSessionKey ? queryKeys.boards.tempSaved(sessionKey as string) : ['boards', 'temp-save', 'idle'],
+    queryFn: () => getTempSavedBoard(sessionKey as string),
+    enabled: hasSessionKey,
+  });
+}
diff --git a/src/features/community/model/useUpdateBoard.ts b/src/features/community/model/useUpdateBoard.ts
new file mode 100644
index 0000000..3ed7f63
--- /dev/null
+++ b/src/features/community/model/useUpdateBoard.ts
@@ -0,0 +1,23 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { updateBoard } from '@/features/community/api/boards';
+import type { UpdateBoardRequest, UpdateBoardResponse } from '@/features/community/model/types';
+import { queryKeys } from '@/shared/lib/react-query/queryKey';
+
+interface UpdateBoardVariables {
+  boardId: number;
+  payload: UpdateBoardRequest;
+}
+
+export function useUpdateBoard() {
+  const queryClient = useQueryClient();
+
+  return useMutation<UpdateBoardResponse, unknown, UpdateBoardVariables>({
+    mutationFn: ({ boardId, payload }) => updateBoard(boardId, payload),
+    onSuccess: (_, variables) => {
+      void queryClient.invalidateQueries({
+        queryKey: queryKeys.boards.detail(variables.boardId),
+      });
+    },
+  });
+}

From 10a4a0738d4f289c581fc18b5ec2474f0fdd5477 Mon Sep 17 00:00:00 2001
From: sooloin <csb7543@naver.com>
Date: Fri, 12 Jun 2026 19:35:56 +0900
Subject: [PATCH 03/13] =?UTF-8?q?:sparkles:=20Feat:=20=EC=BB=A4=EB=AE=A4?=
 =?UTF-8?q?=EB=8B=88=ED=8B=B0=20=EA=B2=8C=EC=8B=9C=ED=8C=90=20=EC=97=90?=
 =?UTF-8?q?=EB=94=94=ED=84=B0=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 작성/수정 플로우에서 공통으로 사용하는 게시글 에디터 폼 UI 추가
- 로딩 및 에러 상태를 포함한 커뮤니티 게시글 작성/수정 페이지 추가
- `/community/new` 및 `/communit`y/`/edit` 보호 라우트 연결
- 에디터 진입 CTA를 포함하도록 커뮤니티 랜딩 페이지 개선
- 기존 카드 기반 페이지 패턴에 맞춰 폼 스타일 유지

`#53`
---
 src/app/router.tsx                            |  18 ++
 src/features/community/index.ts               |   1 +
 src/features/community/ui/BoardEditorForm.tsx | 273 ++++++++++++++++++
 src/pages/community/BoardCreatePage.tsx       |  99 +++++++
 src/pages/community/BoardEditPage.tsx         | 124 ++++++++
 src/pages/community/CommunityPage.tsx         |  39 ++-
 6 files changed, 553 insertions(+), 1 deletion(-)
 create mode 100644 src/features/community/ui/BoardEditorForm.tsx
 create mode 100644 src/pages/community/BoardCreatePage.tsx
 create mode 100644 src/pages/community/BoardEditPage.tsx

diff --git a/src/app/router.tsx b/src/app/router.tsx
index f873d36..20e3e70 100644
--- a/src/app/router.tsx
+++ b/src/app/router.tsx
@@ -6,6 +6,8 @@ import { RequireAuth } from '@/app/guards/RequireAuth';
 import { AuthCallbackPage } from '@/pages/auth/AuthCallbackPage';
 import { LoginPage } from '@/pages/auth/LoginPage';
 import { SignupPage } from '@/pages/auth/SignupPage';
+import { BoardCreatePage } from '@/pages/community/BoardCreatePage';
+import { BoardEditPage } from '@/pages/community/BoardEditPage';
 import { FamilyJoinPage } from '@/pages/family/FamilyJoinPage';
 import { CommunityPage } from '@/pages/community/CommunityPage';
 import { MainPage } from '@/pages/main/MainPage';
@@ -26,6 +28,22 @@ export const router = createBrowserRouter([
       { path: '/', element: <MainPage /> },
       { path: '/walk', element: <WalkPage /> },
       { path: '/community', element: <CommunityPage /> },
+      {
+        path: '/community/new',
+        element: (
+          <RequireAuth>
+            <BoardCreatePage />
+          </RequireAuth>
+        ),
+      },
+      {
+        path: '/community/:boardId/edit',
+        element: (
+          <RequireAuth>
+            <BoardEditPage />
+          </RequireAuth>
+        ),
+      },
       {
         path: '/my',
         element: (
diff --git a/src/features/community/index.ts b/src/features/community/index.ts
index d8d5d12..d761525 100644
--- a/src/features/community/index.ts
+++ b/src/features/community/index.ts
@@ -18,6 +18,7 @@ export { useDeleteBoard } from './model/useDeleteBoard';
 export { useTempSaveBoard } from './model/useTempSaveBoard';
 export { useTempSavedBoard } from './model/useTempSavedBoard';
 export { useUpdateBoard } from './model/useUpdateBoard';
+export { BoardEditorForm } from './ui/BoardEditorForm';
 export type {
   BoardDetailResponse,
   BoardPayload,
diff --git a/src/features/community/ui/BoardEditorForm.tsx b/src/features/community/ui/BoardEditorForm.tsx
new file mode 100644
index 0000000..250a324
--- /dev/null
+++ b/src/features/community/ui/BoardEditorForm.tsx
@@ -0,0 +1,273 @@
+import type { ChangeEventHandler, FormEventHandler } from 'react';
+import { Link } from 'react-router-dom';
+
+import { IMAGE_UPLOAD_POLICY_DESCRIPTION } from '@/shared/lib/files/imageUploadPolicy';
+
+import type { BoardEditorFormErrors, BoardEditorFormState } from '../lib/validation';
+
+interface BoardEditorFormProps {
+  form: BoardEditorFormState;
+  errors: BoardEditorFormErrors;
+  submitError: string;
+  tempSaveError: string;
+  imageError: string;
+  uploadingImages: boolean;
+  isPending: boolean;
+  isTempSaving: boolean;
+  storedDraftSessionKey: string | null;
+  onFieldChange: (field: keyof BoardEditorFormState) => ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  onSelectImages: (files: FileList | File[]) => void;
+  onRemoveImage: (index: number) => void;
+  onTempSave: () => void;
+  onSubmit: FormEventHandler<HTMLFormElement>;
+  mode?: 'create' | 'edit';
+  cancelTo?: string;
+}
+
+export function BoardEditorForm({
+  form,
+  errors,
+  submitError,
+  tempSaveError,
+  imageError,
+  uploadingImages,
+  isPending,
+  isTempSaving,
+  storedDraftSessionKey,
+  onFieldChange,
+  onSelectImages,
+  onRemoveImage,
+  onTempSave,
+  onSubmit,
+  mode = 'create',
+  cancelTo = '/community',
+}: BoardEditorFormProps) {
+  const isEditMode = mode === 'edit';
+  const eyebrow = isEditMode ? 'BOARD EDIT' : 'BOARD WRITE';
+  const heading = isEditMode ? '게시글 수정' : '게시글 작성';
+  const description = isEditMode
+    ? '제목과 내용을 다듬고, 필요한 경우 이미지를 다시 구성해 게시글을 업데이트하세요.'
+    : '반려생활 이야기를 자유롭게 기록해보세요. 임시 저장 후 나중에 이어서 작성할 수도 있어요.';
+  const submitLabel = isEditMode ? '수정 완료' : '게시하기';
+  const pendingLabel = isEditMode ? '수정 중...' : '게시 중...';
+  const helperMessage = storedDraftSessionKey
+    ? '임시 저장된 작성본이 이 브라우저에 연결되어 있어요.'
+    : '작성 중인 내용은 임시 저장 후 다시 이어서 편집할 수 있어요.';
+
+  return (
+    <form className="space-y-6" onSubmit={onSubmit}>
+      <div>
+        <p className="text-xs font-semibold tracking-[0.24em] text-brand">{eyebrow}</p>
+        <h1 className="mt-2 text-[18px] font-medium text-neutral-950 sm:text-[20px]">{heading}</h1>
+        <p className="mt-3 max-w-2xl text-sm leading-7 text-neutral-600">{description}</p>
+      </div>
+
+      <section className="overflow-hidden rounded-[24px] border border-neutral-200 bg-white shadow-sm">
+        <div className="border-b border-neutral-100 px-6 py-5 sm:px-8">
+          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+            <div>
+              <h2 className="text-[18px] font-medium text-neutral-950">작성 상태</h2>
+              <p className="mt-1 text-sm text-neutral-500">{helperMessage}</p>
+            </div>
+            <span className="inline-flex items-center rounded-full bg-brand/8 px-3 py-1 text-xs font-medium text-brand">
+              {storedDraftSessionKey ? '임시 저장본 연결됨' : '새 게시글'}
+            </span>
+          </div>
+        </div>
+        <div className="grid gap-4 px-6 py-6 sm:px-8 lg:grid-cols-[minmax(0,1fr)_280px]">
+          <div className="space-y-5">
+            <Field
+              label="게시글 제목"
+              placeholder="예: 오늘 산책하다 만난 귀여운 친구들"
+              required
+              value={form.boardTitle}
+              onChange={onFieldChange('boardTitle')}
+              error={errors.boardTitle}
+            />
+            <TextAreaField
+              label="게시글 내용"
+              placeholder="반려동물과의 오늘 이야기를 자유롭게 적어보세요."
+              required
+              value={form.boardContent}
+              onChange={onFieldChange('boardContent')}
+              error={errors.boardContent}
+            />
+          </div>
+
+          <div className="rounded-[20px] border border-neutral-200 bg-neutral-50/70 px-5 py-5">
+            <h3 className="text-[16px] font-medium text-neutral-950">임시 저장</h3>
+            <p className="mt-1 text-sm leading-6 text-neutral-500">
+              지금 상태를 저장하고 나중에 다시 이어서 쓸 수 있어요.
+            </p>
+
+            <button
+              type="button"
+              disabled={isTempSaving}
+              onClick={onTempSave}
+              className="mt-5 inline-flex w-full items-center justify-center rounded-xl border border-neutral-200 bg-white px-4 py-3 text-sm font-medium text-neutral-700 transition-colors hover:border-neutral-300 hover:bg-neutral-100 disabled:cursor-not-allowed disabled:opacity-70"
+            >
+              {isTempSaving ? '임시 저장 중...' : '임시 저장'}
+            </button>
+
+            {tempSaveError ? <p className="mt-3 text-sm text-red-500">{tempSaveError}</p> : null}
+            {!tempSaveError && storedDraftSessionKey ? (
+              <p className="mt-3 text-sm text-brand">임시 저장된 게시글이 준비되어 있어요.</p>
+            ) : null}
+          </div>
+        </div>
+      </section>
+
+      <section className="overflow-hidden rounded-[24px] border border-neutral-200 bg-white shadow-sm">
+        <div className="border-b border-neutral-100 px-6 py-5 sm:px-8">
+          <h2 className="text-[18px] font-medium text-neutral-950">이미지 첨부</h2>
+          <p className="mt-1 text-sm text-neutral-500">{IMAGE_UPLOAD_POLICY_DESCRIPTION}</p>
+        </div>
+
+        <div className="space-y-5 px-6 py-6 sm:px-8">
+          <label className="inline-flex cursor-pointer items-center justify-center rounded-xl border border-dashed border-neutral-300 bg-neutral-50 px-5 py-3 text-sm font-medium text-neutral-700 transition-colors hover:border-brand hover:bg-brand/5">
+            <input
+              type="file"
+              accept="image/jpeg,image/png"
+              multiple
+              className="sr-only"
+              onChange={(event) => {
+                if (event.target.files?.length) {
+                  onSelectImages(event.target.files);
+                  event.target.value = '';
+                }
+              }}
+            />
+            {uploadingImages ? '이미지 업로드 중...' : '이미지 추가'}
+          </label>
+
+          {imageError ? <p className="text-sm text-red-500">{imageError}</p> : null}
+
+          {form.imageFileUrls.length ? (
+            <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+              {form.imageFileUrls.map((imageUrl, index) => (
+                <article
+                  key={`${imageUrl}-${index}`}
+                  className="overflow-hidden rounded-[20px] border border-neutral-200 bg-white shadow-sm"
+                >
+                  <img src={imageUrl} alt={`첨부 이미지 ${index + 1}`} className="aspect-[4/3] w-full object-cover" />
+                  <div className="flex items-center justify-between gap-3 px-4 py-3">
+                    <span className="text-sm text-neutral-500">이미지 {index + 1}</span>
+                    <button
+                      type="button"
+                      onClick={() => onRemoveImage(index)}
+                      className="text-sm font-medium text-red-500 transition-opacity hover:opacity-80"
+                    >
+                      삭제
+                    </button>
+                  </div>
+                </article>
+              ))}
+            </div>
+          ) : (
+            <div className="rounded-[20px] border border-dashed border-neutral-200 bg-neutral-50 px-5 py-8 text-center text-sm text-neutral-500">
+              아직 첨부된 이미지가 없어요.
+            </div>
+          )}
+        </div>
+      </section>
+
+      <div className="flex items-start justify-between gap-4">
+        <p className="text-sm text-neutral-500">
+          <span className="font-semibold text-brand">*</span> 필수 입력 항목입니다.
+        </p>
+        {submitError ? <p className="max-w-md text-right text-sm text-red-500">{submitError}</p> : null}
+      </div>
+
+      <div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
+        <Link
+          to={cancelTo}
+          className="inline-flex min-w-28 items-center justify-center rounded-xl border border-neutral-200 bg-white px-5 py-3 text-sm font-medium text-neutral-700 transition-colors hover:border-neutral-300 hover:bg-neutral-50"
+        >
+          취소
+        </Link>
+        <button
+          type="submit"
+          disabled={isPending || uploadingImages}
+          className="inline-flex min-w-32 items-center justify-center rounded-xl bg-brand px-6 py-3 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-70"
+        >
+          {uploadingImages ? '이미지 업로드 중...' : isPending ? pendingLabel : submitLabel}
+        </button>
+      </div>
+    </form>
+  );
+}
+
+function Field({
+  label,
+  placeholder,
+  value,
+  onChange,
+  required = false,
+  error,
+}: {
+  label: string;
+  placeholder?: string;
+  value: string;
+  onChange: ChangeEventHandler<HTMLInputElement>;
+  required?: boolean;
+  error?: string;
+}) {
+  return (
+    <label className="block">
+      <LabelText label={label} required={required} />
+      <input
+        type="text"
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        className={[
+          'mt-2 h-12 w-full rounded-xl border bg-white px-4 text-sm text-neutral-900 outline-none transition-colors placeholder:text-neutral-400',
+          error ? 'border-red-300 focus:border-red-400' : 'border-neutral-200 focus:border-brand',
+        ].join(' ')}
+      />
+      {error ? <p className="mt-2 text-sm text-red-500">{error}</p> : null}
+    </label>
+  );
+}
+
+function TextAreaField({
+  label,
+  placeholder,
+  value,
+  onChange,
+  required = false,
+  error,
+}: {
+  label: string;
+  placeholder?: string;
+  value: string;
+  onChange: ChangeEventHandler<HTMLTextAreaElement>;
+  required?: boolean;
+  error?: string;
+}) {
+  return (
+    <label className="block">
+      <LabelText label={label} required={required} />
+      <textarea
+        placeholder={placeholder}
+        value={value}
+        onChange={onChange}
+        rows={12}
+        className={[
+          'mt-2 w-full resize-none rounded-2xl border bg-white px-4 py-4 text-sm leading-7 text-neutral-900 outline-none transition-colors placeholder:text-neutral-400',
+          error ? 'border-red-300 focus:border-red-400' : 'border-neutral-200 focus:border-brand',
+        ].join(' ')}
+      />
+      {error ? <p className="mt-2 text-sm text-red-500">{error}</p> : null}
+    </label>
+  );
+}
+
+function LabelText({ label, required = false }: { label: string; required?: boolean }) {
+  return (
+    <span className="text-sm font-medium text-neutral-800">
+      {label}
+      {required ? <span className="ml-1 text-brand">*</span> : null}
+    </span>
+  );
+}
diff --git a/src/pages/community/BoardCreatePage.tsx b/src/pages/community/BoardCreatePage.tsx
new file mode 100644
index 0000000..58e4ebc
--- /dev/null
+++ b/src/pages/community/BoardCreatePage.tsx
@@ -0,0 +1,99 @@
+import type { ReactNode } from 'react';
+
+import { BoardEditorForm, useBoardEditorForm } from '@/features/community';
+import { LoadingSpinner } from '@/shared/ui';
+
+export function BoardCreatePage() {
+  const editor = useBoardEditorForm({ mode: 'create' });
+
+  if (editor.isInitialLoading) {
+    return (
+      <PageShell>
+        <LoadingState />
+      </PageShell>
+    );
+  }
+
+  if (editor.isInitialLoadError) {
+    return (
+      <PageShell>
+        <ErrorState
+          title="임시 저장 게시글을 불러오지 못했어요."
+          description={editor.initialLoadErrorMessage || '잠시 후 다시 시도해주세요.'}
+          onRetry={() => void editor.retryInitialLoad()}
+          onReset={() => editor.resetStoredDraft()}
+        />
+      </PageShell>
+    );
+  }
+
+  return (
+    <PageShell>
+      <BoardEditorForm
+        form={editor.form}
+        errors={editor.errors}
+        submitError={editor.submitError}
+        tempSaveError={editor.tempSaveError}
+        imageError={editor.imageError}
+        uploadingImages={editor.uploadingImages}
+        isPending={editor.isPending}
+        isTempSaving={editor.isTempSaving}
+        storedDraftSessionKey={editor.storedDraftSessionKey}
+        onFieldChange={editor.handleFieldChange}
+        onSelectImages={editor.handleSelectImages}
+        onRemoveImage={editor.handleRemoveImage}
+        onTempSave={() => void editor.handleTempSave()}
+        onSubmit={editor.handleSubmit}
+        mode="create"
+      />
+    </PageShell>
+  );
+}
+
+function PageShell({ children }: { children: ReactNode }) {
+  return <div className="mx-auto w-full max-w-6xl px-4 py-8 sm:px-6 lg:px-8">{children}</div>;
+}
+
+function LoadingState() {
+  return (
+    <div className="flex min-h-[360px] flex-col items-center justify-center rounded-[24px] border border-neutral-200 bg-white px-6 py-16 text-center shadow-sm">
+      <LoadingSpinner size="lg" />
+      <p className="mt-4 text-sm text-neutral-500">임시 저장된 게시글을 확인하고 있어요.</p>
+    </div>
+  );
+}
+
+function ErrorState({
+  title,
+  description,
+  onRetry,
+  onReset,
+}: {
+  title: string;
+  description: string;
+  onRetry: () => void;
+  onReset: () => void;
+}) {
+  return (
+    <div className="rounded-[24px] border border-neutral-200 bg-white px-6 py-10 shadow-sm sm:px-8">
+      <h1 className="text-[20px] font-medium text-neutral-950">{title}</h1>
+      <p className="mt-3 max-w-xl text-sm leading-7 text-neutral-600">{description}</p>
+      <div className="mt-6 flex flex-col gap-3 sm:flex-row">
+        <button
+          type="button"
+          onClick={onRetry}
+          className="inline-flex items-center justify-center rounded-xl bg-brand px-5 py-3 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90"
+        >
+          다시 시도
+        </button>
+        <button
+          type="button"
+          onClick={onReset}
+          className="inline-flex items-center justify-center rounded-xl border border-neutral-200 bg-white px-5 py-3 text-sm font-medium text-neutral-700 transition-colors hover:border-neutral-300 hover:bg-neutral-50"
+        >
+          임시 저장본 초기화
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/community/BoardEditPage.tsx b/src/pages/community/BoardEditPage.tsx
new file mode 100644
index 0000000..73a5a80
--- /dev/null
+++ b/src/pages/community/BoardEditPage.tsx
@@ -0,0 +1,124 @@
+import type { ReactNode } from 'react';
+import { useMemo } from 'react';
+import { Link, useParams } from 'react-router-dom';
+
+import { BoardEditorForm, useBoardEditorForm } from '@/features/community';
+import { LoadingSpinner } from '@/shared/ui';
+
+function parseBoardId(value: string | undefined): number | null {
+  if (!value) {
+    return null;
+  }
+
+  const parsed = Number(value);
+  return Number.isNaN(parsed) ? null : parsed;
+}
+
+export function BoardEditPage() {
+  const params = useParams();
+  const boardId = useMemo(() => parseBoardId(params.boardId), [params.boardId]);
+  const editor = useBoardEditorForm({ mode: 'edit', boardId });
+
+  if (boardId === null) {
+    return (
+      <PageShell>
+        <InvalidBoardState />
+      </PageShell>
+    );
+  }
+
+  if (editor.isInitialLoading) {
+    return (
+      <PageShell>
+        <LoadingState />
+      </PageShell>
+    );
+  }
+
+  if (editor.isInitialLoadError) {
+    return (
+      <PageShell>
+        <ErrorState
+          boardId={boardId}
+          description={editor.initialLoadErrorMessage || '게시글 정보를 불러오지 못했습니다.'}
+          onRetry={() => void editor.retryInitialLoad()}
+        />
+      </PageShell>
+    );
+  }
+
+  return (
+    <PageShell>
+      <BoardEditorForm
+        form={editor.form}
+        errors={editor.errors}
+        submitError={editor.submitError}
+        tempSaveError={editor.tempSaveError}
+        imageError={editor.imageError}
+        uploadingImages={editor.uploadingImages}
+        isPending={editor.isPending}
+        isTempSaving={editor.isTempSaving}
+        storedDraftSessionKey={editor.storedDraftSessionKey}
+        onFieldChange={editor.handleFieldChange}
+        onSelectImages={editor.handleSelectImages}
+        onRemoveImage={editor.handleRemoveImage}
+        onTempSave={() => void editor.handleTempSave()}
+        onSubmit={editor.handleSubmit}
+        mode="edit"
+        cancelTo={`/community/${boardId}`}
+      />
+    </PageShell>
+  );
+}
+
+function PageShell({ children }: { children: ReactNode }) {
+  return <div className="mx-auto w-full max-w-6xl px-4 py-8 sm:px-6 lg:px-8">{children}</div>;
+}
+
+function InvalidBoardState() {
+  return (
+    <div className="rounded-[24px] border border-neutral-200 bg-white px-6 py-10 shadow-sm sm:px-8">
+      <h1 className="text-[20px] font-medium text-neutral-950">잘못된 게시글 경로예요.</h1>
+      <p className="mt-3 text-sm leading-7 text-neutral-600">수정할 게시글 정보를 다시 확인해주세요.</p>
+      <Link
+        to="/community"
+        className="mt-6 inline-flex items-center justify-center rounded-xl bg-brand px-5 py-3 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90"
+      >
+        커뮤니티로 이동
+      </Link>
+    </div>
+  );
+}
+
+function LoadingState() {
+  return (
+    <div className="flex min-h-[360px] flex-col items-center justify-center rounded-[24px] border border-neutral-200 bg-white px-6 py-16 text-center shadow-sm">
+      <LoadingSpinner size="lg" />
+      <p className="mt-4 text-sm text-neutral-500">게시글 정보를 불러오고 있어요.</p>
+    </div>
+  );
+}
+
+function ErrorState({ boardId, description, onRetry }: { boardId: number; description: string; onRetry: () => void }) {
+  return (
+    <div className="rounded-[24px] border border-neutral-200 bg-white px-6 py-10 shadow-sm sm:px-8">
+      <h1 className="text-[20px] font-medium text-neutral-950">게시글 수정 준비에 실패했어요.</h1>
+      <p className="mt-3 max-w-xl text-sm leading-7 text-neutral-600">{description}</p>
+      <div className="mt-6 flex flex-col gap-3 sm:flex-row">
+        <button
+          type="button"
+          onClick={onRetry}
+          className="inline-flex items-center justify-center rounded-xl bg-brand px-5 py-3 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90"
+        >
+          다시 시도
+        </button>
+        <Link
+          to={`/community/${boardId}`}
+          className="inline-flex items-center justify-center rounded-xl border border-neutral-200 bg-white px-5 py-3 text-sm font-medium text-neutral-700 transition-colors hover:border-neutral-300 hover:bg-neutral-50"
+        >
+          상세로 돌아가기
+        </Link>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/community/CommunityPage.tsx b/src/pages/community/CommunityPage.tsx
index 5aa0a4f..4294906 100644
--- a/src/pages/community/CommunityPage.tsx
+++ b/src/pages/community/CommunityPage.tsx
@@ -1,3 +1,40 @@
+import { Link } from 'react-router-dom';
+
 export function CommunityPage() {
-  return <div className="p-6 text-center text-neutral-600">커뮤니티 (뼈대)</div>;
+  return (
+    <div className="mx-auto w-full max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
+      <section className="overflow-hidden rounded-[28px] border border-neutral-200 bg-white shadow-sm">
+        <div className="grid gap-8 px-6 py-8 sm:px-8 lg:grid-cols-[minmax(0,1fr)_280px] lg:items-center">
+          <div>
+            <p className="text-xs font-semibold tracking-[0.24em] text-brand">COMMUNITY</p>
+            <h1 className="mt-3 text-[28px] font-semibold tracking-[-0.02em] text-neutral-950 sm:text-[34px]">
+              반려생활 이야기를 편하게 남겨보세요.
+            </h1>
+            <p className="mt-4 max-w-2xl text-sm leading-7 text-neutral-600 sm:text-base">
+              커뮤니티 홈은 다음 단계에서 목록과 상세를 더 채울 예정이에요. 지금은 게시글 작성 플로우를 먼저 사용할 수
+              있게 열어뒀어요.
+            </p>
+            <div className="mt-6 flex flex-col gap-3 sm:flex-row">
+              <Link
+                to="/community/new"
+                className="inline-flex items-center justify-center rounded-xl bg-brand px-5 py-3 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90"
+              >
+                게시글 작성하기
+              </Link>
+            </div>
+          </div>
+
+          <div className="rounded-[24px] border border-neutral-200 bg-neutral-50 p-5">
+            <h2 className="text-[17px] font-medium text-neutral-950">이번 단계에서 가능한 것</h2>
+            <ul className="mt-4 space-y-3 text-sm leading-6 text-neutral-600">
+              <li>게시글 작성 폼 사용</li>
+              <li>이미지 업로드 및 제거</li>
+              <li>임시 저장 및 복원</li>
+              <li>기존 게시글 수정 화면 연결</li>
+            </ul>
+          </div>
+        </div>
+      </section>
+    </div>
+  );
 }

From 8c22fde5b86fa9b95bd12ba14e6cba9f4aab0abb Mon Sep 17 00:00:00 2001
From: sooloin <csb7543@naver.com>
Date: Fri, 12 Jun 2026 19:41:54 +0900
Subject: [PATCH 04/13] =?UTF-8?q?:sparkles:=20Feat:=20=EC=BB=A4=EB=AE=A4?=
 =?UTF-8?q?=EB=8B=88=ED=8B=B0=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=EB=B0=8F=20=EC=82=AD=EC=A0=9C=20=ED=94=8C=EB=A1=9C?=
 =?UTF-8?q?=EC=9A=B0=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 로딩 및 에러 상태를 포함한 게시글 상세 페이지 추가
- 재사용 가능한 게시글 상세 콘텐츠 UI 및 삭제 확인 다이얼로그 추가
- /community/ 보호 라우트 연결
- 게시글 상세 화면에서 수정 및 삭제 액션 연결

`#53`
---
 src/app/router.tsx                            |   9 +
 src/features/community/index.ts               |   2 +
 .../community/ui/BoardDetailContent.tsx       | 110 ++++++++++++
 .../community/ui/DeleteBoardDialog.tsx        |  44 +++++
 src/pages/community/BoardDetailPage.tsx       | 169 ++++++++++++++++++
 5 files changed, 334 insertions(+)
 create mode 100644 src/features/community/ui/BoardDetailContent.tsx
 create mode 100644 src/features/community/ui/DeleteBoardDialog.tsx
 create mode 100644 src/pages/community/BoardDetailPage.tsx

diff --git a/src/app/router.tsx b/src/app/router.tsx
index 20e3e70..3df2508 100644
--- a/src/app/router.tsx
+++ b/src/app/router.tsx
@@ -7,6 +7,7 @@ import { AuthCallbackPage } from '@/pages/auth/AuthCallbackPage';
 import { LoginPage } from '@/pages/auth/LoginPage';
 import { SignupPage } from '@/pages/auth/SignupPage';
 import { BoardCreatePage } from '@/pages/community/BoardCreatePage';
+import { BoardDetailPage } from '@/pages/community/BoardDetailPage';
 import { BoardEditPage } from '@/pages/community/BoardEditPage';
 import { FamilyJoinPage } from '@/pages/family/FamilyJoinPage';
 import { CommunityPage } from '@/pages/community/CommunityPage';
@@ -36,6 +37,14 @@ export const router = createBrowserRouter([
           </RequireAuth>
         ),
       },
+      {
+        path: '/community/:boardId',
+        element: (
+          <RequireAuth>
+            <BoardDetailPage />
+          </RequireAuth>
+        ),
+      },
       {
         path: '/community/:boardId/edit',
         element: (
diff --git a/src/features/community/index.ts b/src/features/community/index.ts
index d761525..ad6cb4a 100644
--- a/src/features/community/index.ts
+++ b/src/features/community/index.ts
@@ -18,7 +18,9 @@ export { useDeleteBoard } from './model/useDeleteBoard';
 export { useTempSaveBoard } from './model/useTempSaveBoard';
 export { useTempSavedBoard } from './model/useTempSavedBoard';
 export { useUpdateBoard } from './model/useUpdateBoard';
+export { BoardDetailContent } from './ui/BoardDetailContent';
 export { BoardEditorForm } from './ui/BoardEditorForm';
+export { DeleteBoardDialog } from './ui/DeleteBoardDialog';
 export type {
   BoardDetailResponse,
   BoardPayload,
diff --git a/src/features/community/ui/BoardDetailContent.tsx b/src/features/community/ui/BoardDetailContent.tsx
new file mode 100644
index 0000000..5173381
--- /dev/null
+++ b/src/features/community/ui/BoardDetailContent.tsx
@@ -0,0 +1,110 @@
+import { Link } from 'react-router-dom';
+
+import type { BoardDetailResponse } from '../model/types';
+
+interface BoardDetailContentProps {
+  board: BoardDetailResponse;
+  canManage: boolean;
+  onDelete: () => void;
+}
+
+function formatDateTime(value: string) {
+  const date = new Date(value);
+
+  if (Number.isNaN(date.getTime())) {
+    return value;
+  }
+
+  return new Intl.DateTimeFormat('ko-KR', {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  }).format(date);
+}
+
+export function BoardDetailContent({ board, canManage, onDelete }: BoardDetailContentProps) {
+  return (
+    <article className="space-y-6">
+      <section className="overflow-hidden rounded-[24px] border border-neutral-200 bg-white shadow-sm">
+        <div className="border-b border-neutral-100 px-6 py-6 sm:px-8">
+          <div className="flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between">
+            <div>
+              <p className="text-xs font-semibold tracking-[0.24em] text-brand">BOARD DETAIL</p>
+              <h1 className="mt-3 text-[24px] font-semibold tracking-[-0.02em] text-neutral-950 sm:text-[30px]">
+                {board.boardTitle}
+              </h1>
+            </div>
+
+            {canManage ? (
+              <div className="flex flex-col gap-3 sm:flex-row">
+                <Link
+                  to={`/community/${board.boardId}/edit`}
+                  className="inline-flex items-center justify-center rounded-xl border border-neutral-200 bg-white px-5 py-3 text-sm font-medium text-neutral-700 transition-colors hover:border-neutral-300 hover:bg-neutral-50"
+                >
+                  수정하기
+                </Link>
+                <button
+                  type="button"
+                  onClick={onDelete}
+                  className="inline-flex items-center justify-center rounded-xl bg-red-500 px-5 py-3 text-sm font-medium text-white transition-opacity hover:opacity-90"
+                >
+                  삭제하기
+                </button>
+              </div>
+            ) : null}
+          </div>
+
+          <dl className="mt-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+            <MetaItem label="작성자" value={board.nickname} />
+            <MetaItem label="조회수" value={`${board.viewCount}`} />
+            <MetaItem label="작성일" value={formatDateTime(board.boardCreatedAt)} />
+            <MetaItem label="수정일" value={formatDateTime(board.modifiedAt)} />
+          </dl>
+        </div>
+
+        <div className="px-6 py-6 sm:px-8">
+          <p className="whitespace-pre-wrap break-words text-sm leading-8 text-neutral-800 sm:text-[15px]">
+            {board.boardContent}
+          </p>
+        </div>
+      </section>
+
+      <section className="overflow-hidden rounded-[24px] border border-neutral-200 bg-white shadow-sm">
+        <div className="border-b border-neutral-100 px-6 py-5 sm:px-8">
+          <h2 className="text-[18px] font-medium text-neutral-950">첨부 이미지</h2>
+          <p className="mt-1 text-sm text-neutral-500">게시글에 함께 등록된 이미지예요.</p>
+        </div>
+
+        <div className="px-6 py-6 sm:px-8">
+          {board.imageFileUrls.length ? (
+            <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
+              {board.imageFileUrls.map((imageUrl, index) => (
+                <figure
+                  key={`${imageUrl}-${index}`}
+                  className="overflow-hidden rounded-[20px] border border-neutral-200 bg-white shadow-sm"
+                >
+                  <img src={imageUrl} alt={`게시글 이미지 ${index + 1}`} className="aspect-[4/3] w-full object-cover" />
+                </figure>
+              ))}
+            </div>
+          ) : (
+            <div className="rounded-[20px] border border-dashed border-neutral-200 bg-neutral-50 px-5 py-8 text-center text-sm text-neutral-500">
+              첨부된 이미지가 없어요.
+            </div>
+          )}
+        </div>
+      </section>
+    </article>
+  );
+}
+
+function MetaItem({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="rounded-[18px] border border-neutral-200 bg-neutral-50 px-4 py-4">
+      <dt className="text-xs font-medium uppercase tracking-[0.18em] text-neutral-400">{label}</dt>
+      <dd className="mt-2 text-sm leading-6 text-neutral-700">{value}</dd>
+    </div>
+  );
+}
diff --git a/src/features/community/ui/DeleteBoardDialog.tsx b/src/features/community/ui/DeleteBoardDialog.tsx
new file mode 100644
index 0000000..3b70547
--- /dev/null
+++ b/src/features/community/ui/DeleteBoardDialog.tsx
@@ -0,0 +1,44 @@
+import { Modal } from '@/shared/ui';
+
+interface DeleteBoardDialogProps {
+  open: boolean;
+  isPending: boolean;
+  errorMessage: string;
+  onClose: () => void;
+  onConfirm: () => void;
+}
+
+export function DeleteBoardDialog({ open, isPending, errorMessage, onClose, onConfirm }: DeleteBoardDialogProps) {
+  return (
+    <Modal open={open} onClose={onClose} ariaLabel="게시글 삭제 확인">
+      <div>
+        <p className="text-xs font-semibold tracking-[0.24em] text-red-500">DELETE BOARD</p>
+        <h2 className="mt-3 text-[22px] font-semibold tracking-[-0.02em] text-neutral-950">게시글을 삭제할까요?</h2>
+        <p className="mt-3 text-sm leading-7 text-neutral-600">
+          삭제한 게시글은 다시 되돌릴 수 없어요. 정말로 이 게시글을 삭제할지 한 번 더 확인해주세요.
+        </p>
+
+        {errorMessage ? <p className="mt-4 text-sm text-red-500">{errorMessage}</p> : null}
+
+        <div className="mt-6 flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={isPending}
+            className="inline-flex items-center justify-center rounded-xl border border-neutral-200 bg-white px-5 py-3 text-sm font-medium text-neutral-700 transition-colors hover:border-neutral-300 hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-70"
+          >
+            취소
+          </button>
+          <button
+            type="button"
+            onClick={onConfirm}
+            disabled={isPending}
+            className="inline-flex items-center justify-center rounded-xl bg-red-500 px-5 py-3 text-sm font-medium text-white transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-70"
+          >
+            {isPending ? '삭제 중...' : '삭제하기'}
+          </button>
+        </div>
+      </div>
+    </Modal>
+  );
+}
diff --git a/src/pages/community/BoardDetailPage.tsx b/src/pages/community/BoardDetailPage.tsx
new file mode 100644
index 0000000..b0c0d53
--- /dev/null
+++ b/src/pages/community/BoardDetailPage.tsx
@@ -0,0 +1,169 @@
+import { useMemo, useState } from 'react';
+import { Link, useNavigate, useParams } from 'react-router-dom';
+
+import {
+  BOARD_DETAIL_STATUS_MESSAGES,
+  BOARD_MUTATION_STATUS_MESSAGES,
+  BoardDetailContent,
+  DeleteBoardDialog,
+  useBoardDetail,
+  useDeleteBoard,
+} from '@/features/community';
+import { useCurrentUser } from '@/features/auth';
+import { getApiErrorMessage } from '@/shared/lib/api/errorMessage';
+import { LoadingSpinner } from '@/shared/ui';
+
+function parseBoardId(value: string | undefined): number | null {
+  if (!value) {
+    return null;
+  }
+
+  const parsed = Number(value);
+  return Number.isNaN(parsed) ? null : parsed;
+}
+
+export function BoardDetailPage() {
+  const navigate = useNavigate();
+  const params = useParams();
+  const boardId = useMemo(() => parseBoardId(params.boardId), [params.boardId]);
+  const { data: board, isLoading, isError, error, refetch } = useBoardDetail(boardId);
+  const { nickname } = useCurrentUser();
+  const { mutateAsync: deleteBoard, isPending: isDeleting } = useDeleteBoard();
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+  const [deleteError, setDeleteError] = useState('');
+
+  const canManage = Boolean(board && nickname && board.nickname.trim() === nickname.trim());
+
+  const handleDelete = async () => {
+    if (boardId === null) {
+      return;
+    }
+
+    setDeleteError('');
+
+    try {
+      await deleteBoard({ boardId });
+      void navigate('/community');
+    } catch (deleteActionError) {
+      setDeleteError(
+        getApiErrorMessage(
+          deleteActionError,
+          '게시글 삭제에 실패했습니다. 잠시 후 다시 시도해주세요.',
+          BOARD_MUTATION_STATUS_MESSAGES,
+        ),
+      );
+    }
+  };
+
+  if (boardId === null) {
+    return (
+      <PageShell>
+        <InvalidBoardState />
+      </PageShell>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <PageShell>
+        <LoadingState />
+      </PageShell>
+    );
+  }
+
+  if (isError || !board) {
+    return (
+      <PageShell>
+        <ErrorState
+          description={getApiErrorMessage(
+            error,
+            '게시글 정보를 불러오지 못했습니다. 잠시 후 다시 시도해주세요.',
+            BOARD_DETAIL_STATUS_MESSAGES,
+          )}
+          onRetry={() => void refetch()}
+        />
+      </PageShell>
+    );
+  }
+
+  return (
+    <PageShell>
+      <div className="mb-5 flex items-center">
+        <Link
+          to="/community"
+          className="inline-flex items-center rounded-full border border-neutral-200 bg-white px-4 py-2 text-sm font-medium text-neutral-600 transition-colors hover:border-neutral-300 hover:bg-neutral-50"
+        >
+          커뮤니티로 돌아가기
+        </Link>
+      </div>
+
+      <BoardDetailContent board={board} canManage={canManage} onDelete={() => setDeleteDialogOpen(true)} />
+      <DeleteBoardDialog
+        open={deleteDialogOpen}
+        isPending={isDeleting}
+        errorMessage={deleteError}
+        onClose={() => {
+          if (isDeleting) {
+            return;
+          }
+
+          setDeleteDialogOpen(false);
+          setDeleteError('');
+        }}
+        onConfirm={() => void handleDelete()}
+      />
+    </PageShell>
+  );
+}
+
+function PageShell({ children }: { children: React.ReactNode }) {
+  return <div className="mx-auto w-full max-w-6xl px-4 py-8 sm:px-6 lg:px-8">{children}</div>;
+}
+
+function InvalidBoardState() {
+  return (
+    <div className="rounded-[24px] border border-neutral-200 bg-white px-6 py-10 shadow-sm sm:px-8">
+      <h1 className="text-[20px] font-medium text-neutral-950">잘못된 게시글 경로예요.</h1>
+      <p className="mt-3 text-sm leading-7 text-neutral-600">조회할 게시글 정보를 다시 확인해주세요.</p>
+      <Link
+        to="/community"
+        className="mt-6 inline-flex items-center justify-center rounded-xl bg-brand px-5 py-3 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90"
+      >
+        커뮤니티로 이동
+      </Link>
+    </div>
+  );
+}
+
+function LoadingState() {
+  return (
+    <div className="flex min-h-[360px] flex-col items-center justify-center rounded-[24px] border border-neutral-200 bg-white px-6 py-16 text-center shadow-sm">
+      <LoadingSpinner size="lg" />
+      <p className="mt-4 text-sm text-neutral-500">게시글을 불러오고 있어요.</p>
+    </div>
+  );
+}
+
+function ErrorState({ description, onRetry }: { description: string; onRetry: () => void }) {
+  return (
+    <div className="rounded-[24px] border border-neutral-200 bg-white px-6 py-10 shadow-sm sm:px-8">
+      <h1 className="text-[20px] font-medium text-neutral-950">게시글을 불러오지 못했어요.</h1>
+      <p className="mt-3 max-w-xl text-sm leading-7 text-neutral-600">{description}</p>
+      <div className="mt-6 flex flex-col gap-3 sm:flex-row">
+        <button
+          type="button"
+          onClick={onRetry}
+          className="inline-flex items-center justify-center rounded-xl bg-brand px-5 py-3 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90"
+        >
+          다시 시도
+        </button>
+        <Link
+          to="/community"
+          className="inline-flex items-center justify-center rounded-xl border border-neutral-200 bg-white px-5 py-3 text-sm font-medium text-neutral-700 transition-colors hover:border-neutral-300 hover:bg-neutral-50"
+        >
+          커뮤니티 홈
+        </Link>
+      </div>
+    </div>
+  );
+}

From cbd0f1cae0111f2013034b1f873d83c75dc434f2 Mon Sep 17 00:00:00 2001
From: sooloin <csb7543@naver.com>
Date: Fri, 12 Jun 2026 19:57:20 +0900
Subject: [PATCH 05/13] =?UTF-8?q?:sparkles:=20Feat:=20=EC=BB=A4=EB=AE=A4?=
 =?UTF-8?q?=EB=8B=88=ED=8B=B0=20=ED=94=BC=EB=93=9C=20=EB=B0=8F=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20UI=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 프로필 카드와 피드형 섹션을 포함하도록 커뮤니티 랜딩 페이지 재디자인
- 재사용 가능한 커뮤니티 피드 카드 및 프로필 카드 컴포넌트 추가
- 피드 중심 커뮤니티 레이아웃에 맞춰 게시글 상세 화면 스타일 개선
- API 연동 전 댓글 목록 및 댓글 입력 영역 placeholder 추가
- 안정적인 렌더링을 위해 커뮤니티 상세 화면 및 삭제 다이얼로그 문구 정리

`#53`
---
 src/features/community/index.ts               |   2 +
 .../community/ui/BoardDetailContent.tsx       | 207 +++++++++++++-----
 .../community/ui/CommunityFeedCard.tsx        | 102 +++++++++
 .../community/ui/CommunityProfileCard.tsx     |  40 ++++
 .../community/ui/DeleteBoardDialog.tsx        |  12 +-
 src/pages/community/BoardDetailPage.tsx       |  38 ++--
 src/pages/community/CommunityPage.tsx         | 125 +++++++++--
 7 files changed, 418 insertions(+), 108 deletions(-)
 create mode 100644 src/features/community/ui/CommunityFeedCard.tsx
 create mode 100644 src/features/community/ui/CommunityProfileCard.tsx

diff --git a/src/features/community/index.ts b/src/features/community/index.ts
index ad6cb4a..e619a33 100644
--- a/src/features/community/index.ts
+++ b/src/features/community/index.ts
@@ -18,6 +18,8 @@ export { useDeleteBoard } from './model/useDeleteBoard';
 export { useTempSaveBoard } from './model/useTempSaveBoard';
 export { useTempSavedBoard } from './model/useTempSavedBoard';
 export { useUpdateBoard } from './model/useUpdateBoard';
+export { CommunityFeedCard } from './ui/CommunityFeedCard';
+export { CommunityProfileCard } from './ui/CommunityProfileCard';
 export { BoardDetailContent } from './ui/BoardDetailContent';
 export { BoardEditorForm } from './ui/BoardEditorForm';
 export { DeleteBoardDialog } from './ui/DeleteBoardDialog';
diff --git a/src/features/community/ui/BoardDetailContent.tsx b/src/features/community/ui/BoardDetailContent.tsx
index 5173381..e0be9c6 100644
--- a/src/features/community/ui/BoardDetailContent.tsx
+++ b/src/features/community/ui/BoardDetailContent.tsx
@@ -17,94 +17,189 @@ function formatDateTime(value: string) {
 
   return new Intl.DateTimeFormat('ko-KR', {
     year: 'numeric',
-    month: 'long',
-    day: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
     hour: '2-digit',
     minute: '2-digit',
   }).format(date);
 }
 
 export function BoardDetailContent({ board, canManage, onDelete }: BoardDetailContentProps) {
+  const likeCount = Math.max(12, Math.round(board.viewCount * 1.7));
+  const commentCount = Math.max(2, Math.round(board.viewCount / 3));
+
   return (
     <article className="space-y-6">
       <section className="overflow-hidden rounded-[24px] border border-neutral-200 bg-white shadow-sm">
-        <div className="border-b border-neutral-100 px-6 py-6 sm:px-8">
-          <div className="flex flex-col gap-5 lg:flex-row lg:items-start lg:justify-between">
-            <div>
-              <p className="text-xs font-semibold tracking-[0.24em] text-brand">BOARD DETAIL</p>
-              <h1 className="mt-3 text-[24px] font-semibold tracking-[-0.02em] text-neutral-950 sm:text-[30px]">
-                {board.boardTitle}
-              </h1>
+        <div className="px-6 py-6 sm:px-8">
+          <div className="flex items-start justify-between gap-5">
+            <div className="flex items-start gap-4">
+              <div className="h-14 w-14 shrink-0 overflow-hidden rounded-full border border-neutral-200 bg-linear-to-br from-brand/[0.16] via-[#f6e1d0] to-white" />
+              <div>
+                <p className="text-[22px] font-semibold tracking-[-0.02em] text-neutral-950">{board.nickname}</p>
+                <div className="mt-1 flex flex-wrap items-center gap-3 text-sm text-neutral-400">
+                  <span>{formatDateTime(board.boardCreatedAt)}</span>
+                  <span className="inline-flex items-center gap-1">
+                    <EyeIcon className="h-4 w-4" />
+                    {board.viewCount}
+                  </span>
+                </div>
+              </div>
             </div>
 
             {canManage ? (
-              <div className="flex flex-col gap-3 sm:flex-row">
-                <Link
-                  to={`/community/${board.boardId}/edit`}
-                  className="inline-flex items-center justify-center rounded-xl border border-neutral-200 bg-white px-5 py-3 text-sm font-medium text-neutral-700 transition-colors hover:border-neutral-300 hover:bg-neutral-50"
-                >
-                  수정하기
-                </Link>
-                <button
-                  type="button"
-                  onClick={onDelete}
-                  className="inline-flex items-center justify-center rounded-xl bg-red-500 px-5 py-3 text-sm font-medium text-white transition-opacity hover:opacity-90"
-                >
-                  삭제하기
+              <div className="flex items-center gap-4 text-sm text-neutral-400">
+                <button type="button">Report</button>
+                <Link to={`/community/${board.boardId}/edit`}>Edit</Link>
+                <button type="button" onClick={onDelete}>
+                  Delete
                 </button>
               </div>
             ) : null}
           </div>
 
-          <dl className="mt-6 grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
-            <MetaItem label="작성자" value={board.nickname} />
-            <MetaItem label="조회수" value={`${board.viewCount}`} />
-            <MetaItem label="작성일" value={formatDateTime(board.boardCreatedAt)} />
-            <MetaItem label="수정일" value={formatDateTime(board.modifiedAt)} />
-          </dl>
-        </div>
+          <h1 className="mt-8 text-[26px] font-semibold tracking-[-0.03em] text-neutral-950 sm:text-[34px]">
+            {board.boardTitle}
+          </h1>
 
-        <div className="px-6 py-6 sm:px-8">
-          <p className="whitespace-pre-wrap break-words text-sm leading-8 text-neutral-800 sm:text-[15px]">
-            {board.boardContent}
-          </p>
+          <div className="mt-6 grid gap-6 lg:grid-cols-[156px_minmax(0,1fr)] lg:items-start">
+            <div>
+              {board.imageFileUrls[0] ? (
+                <img
+                  src={board.imageFileUrls[0]}
+                  alt={board.boardTitle}
+                  className="aspect-square w-full rounded-[20px] object-cover"
+                />
+              ) : (
+                <div className="aspect-square w-full rounded-[20px] bg-linear-to-br from-neutral-200 via-neutral-100 to-neutral-200" />
+              )}
+            </div>
+
+            <div className="flex min-h-full flex-col">
+              <p className="whitespace-pre-wrap break-words text-[15px] leading-8 text-neutral-800">
+                {board.boardContent}
+              </p>
+
+              <div className="mt-6 flex items-center justify-end gap-5">
+                <SocialStat kind="like" value={likeCount} />
+                <SocialStat kind="comment" value={commentCount} />
+              </div>
+            </div>
+          </div>
         </div>
       </section>
 
       <section className="overflow-hidden rounded-[24px] border border-neutral-200 bg-white shadow-sm">
         <div className="border-b border-neutral-100 px-6 py-5 sm:px-8">
-          <h2 className="text-[18px] font-medium text-neutral-950">첨부 이미지</h2>
-          <p className="mt-1 text-sm text-neutral-500">게시글에 함께 등록된 이미지예요.</p>
+          <div className="flex items-center justify-between gap-4">
+            <div>
+              <h2 className="text-[18px] font-medium text-neutral-950">Comments</h2>
+              <p className="mt-1 text-sm text-neutral-500">
+                Comment layout is prepared first before the API is connected.
+              </p>
+            </div>
+            <span className="rounded-full bg-neutral-100 px-3 py-1 text-xs font-medium text-neutral-600">
+              Total {commentCount}
+            </span>
+          </div>
         </div>
 
-        <div className="px-6 py-6 sm:px-8">
-          {board.imageFileUrls.length ? (
-            <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
-              {board.imageFileUrls.map((imageUrl, index) => (
-                <figure
-                  key={`${imageUrl}-${index}`}
-                  className="overflow-hidden rounded-[20px] border border-neutral-200 bg-white shadow-sm"
-                >
-                  <img src={imageUrl} alt={`게시글 이미지 ${index + 1}`} className="aspect-[4/3] w-full object-cover" />
-                </figure>
-              ))}
-            </div>
-          ) : (
-            <div className="rounded-[20px] border border-dashed border-neutral-200 bg-neutral-50 px-5 py-8 text-center text-sm text-neutral-500">
-              첨부된 이미지가 없어요.
-            </div>
-          )}
+        <div className="space-y-0 px-6 py-4 sm:px-8">
+          <CommentRow
+            nickname="Baeyong"
+            dateTime="2025-10-14 11:25:00"
+            content="Lovely post. Thanks for sharing this warm tip with everyone :D"
+          />
+          <CommentRow
+            nickname="Baeyong"
+            dateTime="2025-10-14 11:25:00"
+            content="Lovely post. Thanks for sharing this warm tip with everyone :D"
+          />
+          <div className="flex items-center justify-center gap-2 px-2 py-4 text-sm text-neutral-500">
+            <span className="text-brand">&lt;</span>
+            <span>1, 2, 3</span>
+            <span className="text-brand">&gt;</span>
+          </div>
+        </div>
+      </section>
+
+      <section className="overflow-hidden rounded-[24px] border border-neutral-200 bg-white shadow-sm">
+        <div className="flex items-center gap-4 px-6 py-4 sm:px-8">
+          <div className="h-10 w-10 shrink-0 overflow-hidden rounded-full border border-neutral-200 bg-linear-to-br from-brand/[0.16] via-[#f6e1d0] to-white" />
+          <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">Write a comment</span>
+          </div>
+          <button
+            type="button"
+            className="h-12 w-12 shrink-0 rounded-full bg-[#c97a72] transition-opacity hover:opacity-90"
+            aria-label="Comment action placeholder"
+          />
         </div>
       </section>
     </article>
   );
 }
 
-function MetaItem({ label, value }: { label: string; value: string }) {
+function SocialStat({ kind, value }: { kind: 'like' | 'comment'; value: number }) {
   return (
-    <div className="rounded-[18px] border border-neutral-200 bg-neutral-50 px-4 py-4">
-      <dt className="text-xs font-medium uppercase tracking-[0.18em] text-neutral-400">{label}</dt>
-      <dd className="mt-2 text-sm leading-6 text-neutral-700">{value}</dd>
+    <span className="inline-flex items-center gap-2 text-base font-medium text-neutral-700">
+      {kind === 'like' ? (
+        <HeartIcon className="h-7 w-7 text-[#d65d4b]" />
+      ) : (
+        <CommentIcon className="h-6 w-6 text-neutral-500" />
+      )}
+      <span>{value}</span>
+    </span>
+  );
+}
+
+function CommentRow({ nickname, dateTime, content }: { nickname: string; dateTime: string; content: string }) {
+  return (
+    <div className="border-b border-neutral-200 py-5 last:border-b-0">
+      <div className="flex items-start justify-between gap-4">
+        <div className="flex items-start gap-3">
+          <div className="h-10 w-10 shrink-0 overflow-hidden rounded-full border border-neutral-200 bg-linear-to-br from-brand/[0.16] via-[#f6e1d0] to-white" />
+          <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>
+        <div className="flex items-center gap-4 text-sm text-neutral-400">
+          <button type="button">Report</button>
+          <button type="button">Edit</button>
+          <button type="button">Delete</button>
+        </div>
+      </div>
+      <p className="mt-4 text-sm leading-7 text-neutral-700">{content}</p>
     </div>
   );
 }
+
+function HeartIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className={className}>
+      <path d="M12 21s-6.716-4.304-9.428-7.851C-.315 9.382.496 4.5 4.96 3.297A5.53 5.53 0 0 1 12 6.045a5.53 5.53 0 0 1 7.04-2.748c4.464 1.203 5.276 6.085 2.387 9.852C18.716 16.696 12 21 12 21Z" />
+    </svg>
+  );
+}
+
+function CommentIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden className={className}>
+      <path
+        d="M8 19.5 4.5 21l1.125-3.375A7.5 7.5 0 1 1 19.5 12 7.5 7.5 0 0 1 12 19.5H8Z"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function EyeIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden className={className}>
+      <path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z" strokeLinecap="round" strokeLinejoin="round" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  );
+}
diff --git a/src/features/community/ui/CommunityFeedCard.tsx b/src/features/community/ui/CommunityFeedCard.tsx
new file mode 100644
index 0000000..32cd74d
--- /dev/null
+++ b/src/features/community/ui/CommunityFeedCard.tsx
@@ -0,0 +1,102 @@
+import { Link } from 'react-router-dom';
+
+interface CommunityFeedCardProps {
+  title: string;
+  imageUrl?: string | null;
+  likes: number;
+  comments: number;
+  to?: string;
+  badge?: string;
+  muted?: boolean;
+}
+
+export function CommunityFeedCard({
+  title,
+  imageUrl,
+  likes,
+  comments,
+  to,
+  badge,
+  muted = false,
+}: CommunityFeedCardProps) {
+  const content = (
+    <article className="overflow-hidden rounded-[22px] border border-neutral-200 bg-white shadow-sm">
+      <div className="relative aspect-[4/3] overflow-hidden bg-neutral-100">
+        {imageUrl ? (
+          <img
+            src={imageUrl}
+            alt={title}
+            className={[
+              'h-full w-full object-cover transition-transform duration-300',
+              muted ? '' : 'group-hover:scale-[1.03]',
+            ].join(' ')}
+          />
+        ) : (
+          <div className="flex h-full w-full items-center justify-center bg-linear-to-br from-neutral-200 via-neutral-100 to-neutral-200" />
+        )}
+
+        {badge ? (
+          <span className="absolute left-3 top-3 rounded-full bg-white/90 px-3 py-1 text-[11px] font-semibold tracking-[0.16em] text-brand shadow-sm">
+            {badge}
+          </span>
+        ) : null}
+      </div>
+
+      <div className="space-y-3 px-3 py-3">
+        <p className="line-clamp-1 text-sm font-medium text-neutral-800">{title}</p>
+        <div className="flex items-center justify-end gap-4 text-sm text-neutral-600">
+          <SocialStat kind="like" value={likes} />
+          <SocialStat kind="comment" value={comments} />
+        </div>
+      </div>
+    </article>
+  );
+
+  const className = [
+    'group block',
+    muted ? 'cursor-default' : 'transition-transform duration-200 hover:-translate-y-0.5',
+  ].join(' ');
+
+  if (to) {
+    return (
+      <Link to={to} className={className}>
+        {content}
+      </Link>
+    );
+  }
+
+  return <div className={className}>{content}</div>;
+}
+
+function SocialStat({ kind, value }: { kind: 'like' | 'comment'; value: number }) {
+  return (
+    <span className="inline-flex items-center gap-1.5">
+      {kind === 'like' ? (
+        <HeartIcon className="h-4 w-4 text-[#d65d4b]" />
+      ) : (
+        <CommentIcon className="h-4 w-4 text-neutral-500" />
+      )}
+      <span>{value}</span>
+    </span>
+  );
+}
+
+function HeartIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className={className}>
+      <path d="M12 21s-6.716-4.304-9.428-7.851C-.315 9.382.496 4.5 4.96 3.297A5.53 5.53 0 0 1 12 6.045a5.53 5.53 0 0 1 7.04-2.748c4.464 1.203 5.276 6.085 2.387 9.852C18.716 16.696 12 21 12 21Z" />
+    </svg>
+  );
+}
+
+function CommentIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden className={className}>
+      <path
+        d="M8 19.5 4.5 21l1.125-3.375A7.5 7.5 0 1 1 19.5 12 7.5 7.5 0 0 1 12 19.5H8Z"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/src/features/community/ui/CommunityProfileCard.tsx b/src/features/community/ui/CommunityProfileCard.tsx
new file mode 100644
index 0000000..10a595f
--- /dev/null
+++ b/src/features/community/ui/CommunityProfileCard.tsx
@@ -0,0 +1,40 @@
+import { Link } from 'react-router-dom';
+
+import profileDefaultIllustration from '@/features/auth/assets/profile-default.svg';
+
+interface CommunityProfileCardProps {
+  profileUrl: string | null;
+  nickname: string | null;
+}
+
+export function CommunityProfileCard({ profileUrl, nickname }: CommunityProfileCardProps) {
+  const resolvedName = nickname?.trim() || '도도 친구';
+
+  return (
+    <section className="overflow-hidden rounded-[26px] border border-neutral-200 bg-white shadow-sm">
+      <div className="bg-linear-to-br from-brand/[0.14] via-[#f7e6d9] to-white px-5 py-6">
+        <div className="mx-auto h-24 w-24 overflow-hidden rounded-full border-4 border-white bg-neutral-100 shadow-sm">
+          <img
+            src={profileUrl?.trim() || profileDefaultIllustration}
+            alt=""
+            className="h-full w-full object-cover"
+            onError={(event) => {
+              event.currentTarget.src = profileDefaultIllustration;
+            }}
+          />
+        </div>
+        <p className="mt-4 text-center text-[20px] font-semibold tracking-[-0.02em] text-neutral-900">{resolvedName}</p>
+        <p className="mt-1 text-center text-sm text-neutral-500">오늘의 반려생활을 기록해보세요.</p>
+      </div>
+
+      <div className="px-5 py-5">
+        <Link
+          to="/community/new"
+          className="inline-flex w-full items-center justify-center rounded-xl bg-brand px-4 py-3 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90"
+        >
+          글쓰기
+        </Link>
+      </div>
+    </section>
+  );
+}
diff --git a/src/features/community/ui/DeleteBoardDialog.tsx b/src/features/community/ui/DeleteBoardDialog.tsx
index 3b70547..cc89e25 100644
--- a/src/features/community/ui/DeleteBoardDialog.tsx
+++ b/src/features/community/ui/DeleteBoardDialog.tsx
@@ -10,12 +10,12 @@ interface DeleteBoardDialogProps {
 
 export function DeleteBoardDialog({ open, isPending, errorMessage, onClose, onConfirm }: DeleteBoardDialogProps) {
   return (
-    <Modal open={open} onClose={onClose} ariaLabel="게시글 삭제 확인">
+    <Modal open={open} onClose={onClose} ariaLabel="Delete post confirmation">
       <div>
-        <p className="text-xs font-semibold tracking-[0.24em] text-red-500">DELETE BOARD</p>
-        <h2 className="mt-3 text-[22px] font-semibold tracking-[-0.02em] text-neutral-950">게시글을 삭제할까요?</h2>
+        <p className="text-xs font-semibold tracking-[0.24em] text-red-500">DELETE POST</p>
+        <h2 className="mt-3 text-[22px] font-semibold tracking-[-0.02em] text-neutral-950">Delete this post?</h2>
         <p className="mt-3 text-sm leading-7 text-neutral-600">
-          삭제한 게시글은 다시 되돌릴 수 없어요. 정말로 이 게시글을 삭제할지 한 번 더 확인해주세요.
+          This action cannot be undone. Please confirm once more before removing the post.
         </p>
 
         {errorMessage ? <p className="mt-4 text-sm text-red-500">{errorMessage}</p> : null}
@@ -27,7 +27,7 @@ export function DeleteBoardDialog({ open, isPending, errorMessage, onClose, onCo
             disabled={isPending}
             className="inline-flex items-center justify-center rounded-xl border border-neutral-200 bg-white px-5 py-3 text-sm font-medium text-neutral-700 transition-colors hover:border-neutral-300 hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-70"
           >
-            취소
+            Cancel
           </button>
           <button
             type="button"
@@ -35,7 +35,7 @@ export function DeleteBoardDialog({ open, isPending, errorMessage, onClose, onCo
             disabled={isPending}
             className="inline-flex items-center justify-center rounded-xl bg-red-500 px-5 py-3 text-sm font-medium text-white transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-70"
           >
-            {isPending ? '삭제 중...' : '삭제하기'}
+            {isPending ? 'Deleting...' : 'Delete'}
           </button>
         </div>
       </div>
diff --git a/src/pages/community/BoardDetailPage.tsx b/src/pages/community/BoardDetailPage.tsx
index b0c0d53..ecabf10 100644
--- a/src/pages/community/BoardDetailPage.tsx
+++ b/src/pages/community/BoardDetailPage.tsx
@@ -1,6 +1,8 @@
+import type { ReactNode } from 'react';
 import { useMemo, useState } from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 
+import { useCurrentUser } from '@/features/auth';
 import {
   BOARD_DETAIL_STATUS_MESSAGES,
   BOARD_MUTATION_STATUS_MESSAGES,
@@ -9,14 +11,11 @@ import {
   useBoardDetail,
   useDeleteBoard,
 } from '@/features/community';
-import { useCurrentUser } from '@/features/auth';
 import { getApiErrorMessage } from '@/shared/lib/api/errorMessage';
 import { LoadingSpinner } from '@/shared/ui';
 
 function parseBoardId(value: string | undefined): number | null {
-  if (!value) {
-    return null;
-  }
+  if (!value) return null;
 
   const parsed = Number(value);
   return Number.isNaN(parsed) ? null : parsed;
@@ -35,9 +34,7 @@ export function BoardDetailPage() {
   const canManage = Boolean(board && nickname && board.nickname.trim() === nickname.trim());
 
   const handleDelete = async () => {
-    if (boardId === null) {
-      return;
-    }
+    if (boardId === null) return;
 
     setDeleteError('');
 
@@ -48,7 +45,7 @@ export function BoardDetailPage() {
       setDeleteError(
         getApiErrorMessage(
           deleteActionError,
-          '게시글 삭제에 실패했습니다. 잠시 후 다시 시도해주세요.',
+          'Failed to delete this post. Please try again.',
           BOARD_MUTATION_STATUS_MESSAGES,
         ),
       );
@@ -77,7 +74,7 @@ export function BoardDetailPage() {
         <ErrorState
           description={getApiErrorMessage(
             error,
-            '게시글 정보를 불러오지 못했습니다. 잠시 후 다시 시도해주세요.',
+            'Failed to load the post. Please try again.',
             BOARD_DETAIL_STATUS_MESSAGES,
           )}
           onRetry={() => void refetch()}
@@ -93,7 +90,7 @@ export function BoardDetailPage() {
           to="/community"
           className="inline-flex items-center rounded-full border border-neutral-200 bg-white px-4 py-2 text-sm font-medium text-neutral-600 transition-colors hover:border-neutral-300 hover:bg-neutral-50"
         >
-          커뮤니티로 돌아가기
+          Back to community
         </Link>
       </div>
 
@@ -103,10 +100,7 @@ export function BoardDetailPage() {
         isPending={isDeleting}
         errorMessage={deleteError}
         onClose={() => {
-          if (isDeleting) {
-            return;
-          }
-
+          if (isDeleting) return;
           setDeleteDialogOpen(false);
           setDeleteError('');
         }}
@@ -116,20 +110,20 @@ export function BoardDetailPage() {
   );
 }
 
-function PageShell({ children }: { children: React.ReactNode }) {
+function PageShell({ children }: { children: ReactNode }) {
   return <div className="mx-auto w-full max-w-6xl px-4 py-8 sm:px-6 lg:px-8">{children}</div>;
 }
 
 function InvalidBoardState() {
   return (
     <div className="rounded-[24px] border border-neutral-200 bg-white px-6 py-10 shadow-sm sm:px-8">
-      <h1 className="text-[20px] font-medium text-neutral-950">잘못된 게시글 경로예요.</h1>
-      <p className="mt-3 text-sm leading-7 text-neutral-600">조회할 게시글 정보를 다시 확인해주세요.</p>
+      <h1 className="text-[20px] font-medium text-neutral-950">Invalid post path</h1>
+      <p className="mt-3 text-sm leading-7 text-neutral-600">Please check the post address and try again.</p>
       <Link
         to="/community"
         className="mt-6 inline-flex items-center justify-center rounded-xl bg-brand px-5 py-3 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90"
       >
-        커뮤니티로 이동
+        Go to community
       </Link>
     </div>
   );
@@ -139,7 +133,7 @@ function LoadingState() {
   return (
     <div className="flex min-h-[360px] flex-col items-center justify-center rounded-[24px] border border-neutral-200 bg-white px-6 py-16 text-center shadow-sm">
       <LoadingSpinner size="lg" />
-      <p className="mt-4 text-sm text-neutral-500">게시글을 불러오고 있어요.</p>
+      <p className="mt-4 text-sm text-neutral-500">Loading post...</p>
     </div>
   );
 }
@@ -147,7 +141,7 @@ function LoadingState() {
 function ErrorState({ description, onRetry }: { description: string; onRetry: () => void }) {
   return (
     <div className="rounded-[24px] border border-neutral-200 bg-white px-6 py-10 shadow-sm sm:px-8">
-      <h1 className="text-[20px] font-medium text-neutral-950">게시글을 불러오지 못했어요.</h1>
+      <h1 className="text-[20px] font-medium text-neutral-950">Could not load this post</h1>
       <p className="mt-3 max-w-xl text-sm leading-7 text-neutral-600">{description}</p>
       <div className="mt-6 flex flex-col gap-3 sm:flex-row">
         <button
@@ -155,13 +149,13 @@ function ErrorState({ description, onRetry }: { description: string; onRetry: ()
           onClick={onRetry}
           className="inline-flex items-center justify-center rounded-xl bg-brand px-5 py-3 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90"
         >
-          다시 시도
+          Retry
         </button>
         <Link
           to="/community"
           className="inline-flex items-center justify-center rounded-xl border border-neutral-200 bg-white px-5 py-3 text-sm font-medium text-neutral-700 transition-colors hover:border-neutral-300 hover:bg-neutral-50"
         >
-          커뮤니티 홈
+          Community home
         </Link>
       </div>
     </div>
diff --git a/src/pages/community/CommunityPage.tsx b/src/pages/community/CommunityPage.tsx
index 4294906..7d499ac 100644
--- a/src/pages/community/CommunityPage.tsx
+++ b/src/pages/community/CommunityPage.tsx
@@ -1,40 +1,117 @@
 import { Link } from 'react-router-dom';
 
+import { useCurrentUser } from '@/features/auth';
+import { CommunityFeedCard, CommunityProfileCard } from '@/features/community';
+
+const popularPosts = [
+  { title: 'Warm winter tips for pet walks', likes: 89, comments: 38, badge: 'HOT' },
+  { title: 'Favorite treats our dog keeps asking for', likes: 74, comments: 16, badge: undefined },
+  { title: 'Toy picks for curious cats', likes: 65, comments: 21, badge: undefined },
+] as const;
+
+const boardPosts = [
+  { title: 'Hello from our home', likes: 0, comments: 0 },
+  { title: 'Warm winter tips for pet walks', likes: 89, comments: 38 },
+  { title: 'Our paw-cleaning routine after walks', likes: 52, comments: 14 },
+  { title: 'Best nap spots in the house', likes: 44, comments: 9 },
+  { title: 'Looking for a good pet cam', likes: 27, comments: 11 },
+  { title: 'Daily care checklist for busy days', likes: 39, comments: 12 },
+  { title: 'Indoor play ideas for rainy weather', likes: 31, comments: 7 },
+  { title: 'The reaction to a new toy was perfect', likes: 58, comments: 19 },
+] as const;
+
 export function CommunityPage() {
+  const { profileUrl, nickname } = useCurrentUser();
+
   return (
-    <div className="mx-auto w-full max-w-6xl px-4 py-8 sm:px-6 lg:px-8">
-      <section className="overflow-hidden rounded-[28px] border border-neutral-200 bg-white shadow-sm">
-        <div className="grid gap-8 px-6 py-8 sm:px-8 lg:grid-cols-[minmax(0,1fr)_280px] lg:items-center">
-          <div>
-            <p className="text-xs font-semibold tracking-[0.24em] text-brand">COMMUNITY</p>
-            <h1 className="mt-3 text-[28px] font-semibold tracking-[-0.02em] text-neutral-950 sm:text-[34px]">
-              반려생활 이야기를 편하게 남겨보세요.
-            </h1>
-            <p className="mt-4 max-w-2xl text-sm leading-7 text-neutral-600 sm:text-base">
-              커뮤니티 홈은 다음 단계에서 목록과 상세를 더 채울 예정이에요. 지금은 게시글 작성 플로우를 먼저 사용할 수
-              있게 열어뒀어요.
-            </p>
-            <div className="mt-6 flex flex-col gap-3 sm:flex-row">
+    <div className="space-y-8">
+      <section className="overflow-hidden rounded-[30px] border border-neutral-200 bg-linear-to-br from-white via-[#fff9f5] to-[#f7efe8] shadow-sm">
+        <div className="px-6 py-8 sm:px-8">
+          <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
+            <div>
+              <p className="text-xs font-semibold tracking-[0.24em] text-brand">COMMUNITY</p>
+              <h1 className="mt-3 text-[30px] font-semibold tracking-[-0.03em] text-neutral-950 sm:text-[38px]">
+                A soft little square for everyday pet stories
+              </h1>
+              <p className="mt-4 max-w-2xl text-sm leading-7 text-neutral-600 sm:text-base">
+                Share walks, routines, tiny wins, and favorite photos. The list API is not connected yet, so this page
+                is shaped first for the final feed experience.
+              </p>
+            </div>
+
+            <div className="flex flex-col gap-3 sm:flex-row">
               <Link
                 to="/community/new"
                 className="inline-flex items-center justify-center rounded-xl bg-brand px-5 py-3 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90"
               >
-                게시글 작성하기
+                Write post
               </Link>
+              <div className="inline-flex items-center justify-center rounded-xl border border-white/80 bg-white/80 px-5 py-3 text-sm font-medium text-neutral-600 shadow-sm">
+                Explore hot posts
+              </div>
             </div>
           </div>
-
-          <div className="rounded-[24px] border border-neutral-200 bg-neutral-50 p-5">
-            <h2 className="text-[17px] font-medium text-neutral-950">이번 단계에서 가능한 것</h2>
-            <ul className="mt-4 space-y-3 text-sm leading-6 text-neutral-600">
-              <li>게시글 작성 폼 사용</li>
-              <li>이미지 업로드 및 제거</li>
-              <li>임시 저장 및 복원</li>
-              <li>기존 게시글 수정 화면 연결</li>
-            </ul>
-          </div>
         </div>
       </section>
+
+      <div className="grid gap-8 lg:grid-cols-[220px_minmax(0,1fr)]">
+        <aside className="lg:sticky lg:top-6 lg:self-start">
+          <CommunityProfileCard profileUrl={profileUrl} nickname={nickname} />
+        </aside>
+
+        <div className="space-y-8">
+          <section>
+            <div className="mb-4 flex items-center justify-between gap-4">
+              <h2 className="text-[24px] font-semibold tracking-[-0.02em] text-neutral-950">Popular posts</h2>
+              <span className="rounded-full bg-brand/8 px-3 py-1 text-xs font-semibold tracking-[0.16em] text-brand">
+                CURATED
+              </span>
+            </div>
+            <div className="grid gap-4 md:grid-cols-3">
+              {popularPosts.map((post, index) => (
+                <CommunityFeedCard
+                  key={`${post.title}-${index}`}
+                  title={post.title}
+                  imageUrl={
+                    index === 0
+                      ? 'https://images.unsplash.com/photo-1517849845537-4d257902454a?auto=format&fit=crop&w=800&q=80'
+                      : null
+                  }
+                  likes={post.likes}
+                  comments={post.comments}
+                  badge={post.badge}
+                  muted={index !== 0}
+                  to={index === 0 ? '/community/1' : undefined}
+                />
+              ))}
+            </div>
+          </section>
+
+          <section>
+            <div className="mb-4 flex items-center justify-between gap-4">
+              <h2 className="text-[24px] font-semibold tracking-[-0.02em] text-neutral-950">Board</h2>
+              <span className="text-sm text-neutral-500">A feed for daily notes and useful tips</span>
+            </div>
+            <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
+              {boardPosts.map((post, index) => (
+                <CommunityFeedCard
+                  key={`${post.title}-${index}`}
+                  title={post.title}
+                  imageUrl={
+                    index === 0
+                      ? 'https://images.unsplash.com/photo-1561037404-61cd46aa615b?auto=format&fit=crop&w=800&q=80'
+                      : null
+                  }
+                  likes={post.likes}
+                  comments={post.comments}
+                  muted={index !== 0}
+                  to={index === 0 ? '/community/1' : undefined}
+                />
+              ))}
+            </div>
+          </section>
+        </div>
+      </div>
     </div>
   );
 }

From 6a7b37d86cae139d353b74c10d8b4cafc4be7f1e Mon Sep 17 00:00:00 2001
From: sooloin <csb7543@naver.com>
Date: Fri, 12 Jun 2026 20:34:52 +0900
Subject: [PATCH 06/13] =?UTF-8?q?:sparkles:=20Feat:=20=EC=BB=A4=EB=AE=A4?=
 =?UTF-8?q?=EB=8B=88=ED=8B=B0=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20=EB=AA=A9?=
 =?UTF-8?q?=EB=A1=9D=20API=20=EC=97=B0=EA=B2=B0=20=EB=B0=8F=20UI=20?=
 =?UTF-8?q?=EA=B0=9C=ED=8E=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- GET /boards API 연결 (useBoardList, 무한 스크롤)
- 인기 게시물(likeCount 상위 3개) + 최근 게시물(4열 그리드) 섹션 분리
- CommunityFeedCard 개선: preview, nickname, viewCount, 상대 시간 표시
- 내 활동 페이지 추가 (/community/my): 내 게시글 / 내 댓글 탭 UI (API 미연결)
- temp-save API 스펙 반영: boardId 쿼리 파라미터 지원
- BoardListItem, BoardListResponse 타입 추가
- CommunityProfileCard에 내 활동 진입 버튼 추가

`#53`
---
 src/app/router.tsx                            |  11 +-
 src/features/community/api/boards.ts          |  11 +-
 src/features/community/index.ts               |  14 +-
 src/features/community/lib/constants.ts       |   6 +
 src/features/community/model/types.ts         |  20 +
 .../community/model/useBoardEditorForm.ts     |   1 +
 src/features/community/model/useBoardList.ts  |  17 +
 .../community/ui/CommunityFeedCard.tsx        |  98 +++--
 .../community/ui/CommunityProfileCard.tsx     |   8 +-
 .../community/CommunityMyActivityPage.tsx     | 138 +++++++
 src/pages/community/CommunityPage.tsx         | 380 +++++++++++++-----
 src/shared/lib/react-query/queryKey.ts        |   2 +
 12 files changed, 580 insertions(+), 126 deletions(-)
 create mode 100644 src/features/community/model/useBoardList.ts
 create mode 100644 src/pages/community/CommunityMyActivityPage.tsx

diff --git a/src/app/router.tsx b/src/app/router.tsx
index 3df2508..db4919c 100644
--- a/src/app/router.tsx
+++ b/src/app/router.tsx
@@ -9,8 +9,9 @@ import { SignupPage } from '@/pages/auth/SignupPage';
 import { BoardCreatePage } from '@/pages/community/BoardCreatePage';
 import { BoardDetailPage } from '@/pages/community/BoardDetailPage';
 import { BoardEditPage } from '@/pages/community/BoardEditPage';
-import { FamilyJoinPage } from '@/pages/family/FamilyJoinPage';
+import { CommunityMyActivityPage } from '@/pages/community/CommunityMyActivityPage';
 import { CommunityPage } from '@/pages/community/CommunityPage';
+import { FamilyJoinPage } from '@/pages/family/FamilyJoinPage';
 import { MainPage } from '@/pages/main/MainPage';
 import { PetDetailPage } from '@/pages/my/PetDetailPage';
 import { PetEditPage } from '@/pages/my/PetEditPage';
@@ -29,6 +30,14 @@ export const router = createBrowserRouter([
       { path: '/', element: <MainPage /> },
       { path: '/walk', element: <WalkPage /> },
       { path: '/community', element: <CommunityPage /> },
+      {
+        path: '/community/my',
+        element: (
+          <RequireAuth>
+            <CommunityMyActivityPage />
+          </RequireAuth>
+        ),
+      },
       {
         path: '/community/new',
         element: (
diff --git a/src/features/community/api/boards.ts b/src/features/community/api/boards.ts
index a9bca1a..2333f3b 100644
--- a/src/features/community/api/boards.ts
+++ b/src/features/community/api/boards.ts
@@ -2,6 +2,7 @@ import { apiClient } from '@/shared/api/axios';
 
 import type {
   BoardDetailResponse,
+  BoardListResponse,
   CreateBoardRequest,
   CreateBoardResponse,
   DeleteBoardResponse,
@@ -12,13 +13,21 @@ import type {
   UpdateBoardResponse,
 } from '../model/types';
 
+export async function getBoardList(params: { page: number; size: number }): Promise<BoardListResponse> {
+  const response = await apiClient.get<BoardListResponse>('/boards', { params });
+  return response.data;
+}
+
 export async function createBoard(payload: CreateBoardRequest): Promise<CreateBoardResponse> {
   const response = await apiClient.post<CreateBoardResponse>('/boards', payload);
   return response.data;
 }
 
 export async function tempSaveBoard(payload: TempSaveBoardRequest): Promise<TempSaveBoardResponse> {
-  const response = await apiClient.post<TempSaveBoardResponse>('/boards/temp-save', payload);
+  const { boardId, ...body } = payload;
+  const response = await apiClient.post<TempSaveBoardResponse>('/boards/temp-save', body, {
+    params: boardId !== undefined ? { boardId } : undefined,
+  });
   return response.data;
 }
 
diff --git a/src/features/community/index.ts b/src/features/community/index.ts
index e619a33..67eaa36 100644
--- a/src/features/community/index.ts
+++ b/src/features/community/index.ts
@@ -1,7 +1,16 @@
-export { createBoard, deleteBoard, getBoardDetail, getTempSavedBoard, tempSaveBoard, updateBoard } from './api/boards';
+export {
+  createBoard,
+  deleteBoard,
+  getBoardDetail,
+  getBoardList,
+  getTempSavedBoard,
+  tempSaveBoard,
+  updateBoard,
+} from './api/boards';
 export {
   BOARD_DETAIL_STATUS_MESSAGES,
   BOARD_DRAFT_STATUS_MESSAGES,
+  BOARD_LIST_STATUS_MESSAGES,
   BOARD_MUTATION_STATUS_MESSAGES,
   COMMUNITY_DRAFT_SESSION_KEY,
 } from './lib/constants';
@@ -13,6 +22,7 @@ export {
 export { INITIAL_BOARD_EDITOR_FORM_STATE, validateBoardEditorForm } from './lib/validation';
 export { useBoardDetail } from './model/useBoardDetail';
 export { useBoardEditorForm } from './model/useBoardEditorForm';
+export { useBoardList } from './model/useBoardList';
 export { useCreateBoard } from './model/useCreateBoard';
 export { useDeleteBoard } from './model/useDeleteBoard';
 export { useTempSaveBoard } from './model/useTempSaveBoard';
@@ -25,6 +35,8 @@ export { BoardEditorForm } from './ui/BoardEditorForm';
 export { DeleteBoardDialog } from './ui/DeleteBoardDialog';
 export type {
   BoardDetailResponse,
+  BoardListItem,
+  BoardListResponse,
   BoardPayload,
   CreateBoardRequest,
   CreateBoardResponse,
diff --git a/src/features/community/lib/constants.ts b/src/features/community/lib/constants.ts
index 941f228..b9116dd 100644
--- a/src/features/community/lib/constants.ts
+++ b/src/features/community/lib/constants.ts
@@ -1,5 +1,11 @@
 export const COMMUNITY_DRAFT_SESSION_KEY = 'community-board-draft-session-key';
 
+export const BOARD_LIST_STATUS_MESSAGES: Partial<Record<number, string>> = {
+  400: '잘못된 요청입니다.',
+  401: '로그인이 필요합니다. 다시 로그인해주세요.',
+  500: '서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.',
+};
+
 export const BOARD_MUTATION_STATUS_MESSAGES: Partial<Record<number, string>> = {
   400: '입력값을 다시 확인해주세요.',
   401: '로그인이 필요합니다. 다시 로그인해주세요.',
diff --git a/src/features/community/model/types.ts b/src/features/community/model/types.ts
index d31dd35..69d8dc5 100644
--- a/src/features/community/model/types.ts
+++ b/src/features/community/model/types.ts
@@ -1,3 +1,22 @@
+export interface BoardListItem {
+  boardId: number;
+  boardTitle: string;
+  boardContentPreview: string;
+  thumbnailImageUrl: string | null;
+  nickname: string;
+  viewCount: number;
+  commentCount: number;
+  likeCount: number;
+  dislikeCount: number;
+  createdAt: string;
+  modifiedAt: string;
+}
+
+export interface BoardListResponse {
+  message: string;
+  boards: BoardListItem[];
+}
+
 export interface BoardPayload {
   boardTitle: string;
   boardContent: string;
@@ -12,6 +31,7 @@ export interface CreateBoardResponse {
 }
 
 export interface TempSaveBoardRequest {
+  boardId?: number;
   boardTitle?: string;
   boardContent?: string;
   imageFileUrl?: string;
diff --git a/src/features/community/model/useBoardEditorForm.ts b/src/features/community/model/useBoardEditorForm.ts
index 6da84f0..c347764 100644
--- a/src/features/community/model/useBoardEditorForm.ts
+++ b/src/features/community/model/useBoardEditorForm.ts
@@ -202,6 +202,7 @@ export function useBoardEditorForm({ mode, boardId = null }: UseBoardEditorFormO
 
     try {
       const result = await tempSaveBoardMutation.mutateAsync({
+        boardId: isEditMode && boardId !== null ? boardId : undefined,
         boardTitle: form.boardTitle.trim() || undefined,
         boardContent: form.boardContent.trim() || undefined,
         imageFileUrl: form.imageFileUrls[0] ?? undefined,
diff --git a/src/features/community/model/useBoardList.ts b/src/features/community/model/useBoardList.ts
new file mode 100644
index 0000000..781f99d
--- /dev/null
+++ b/src/features/community/model/useBoardList.ts
@@ -0,0 +1,17 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+import { getBoardList } from '../api/boards';
+
+const PAGE_SIZE = 12;
+
+export function useBoardList() {
+  return useInfiniteQuery({
+    queryKey: ['boards', 'list-infinite'],
+    queryFn: ({ pageParam }) => getBoardList({ page: pageParam, size: PAGE_SIZE }),
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, allPages) => {
+      if (lastPage.boards.length < PAGE_SIZE) return undefined;
+      return allPages.length;
+    },
+  });
+}
diff --git a/src/features/community/ui/CommunityFeedCard.tsx b/src/features/community/ui/CommunityFeedCard.tsx
index 32cd74d..33c674e 100644
--- a/src/features/community/ui/CommunityFeedCard.tsx
+++ b/src/features/community/ui/CommunityFeedCard.tsx
@@ -2,37 +2,44 @@ import { Link } from 'react-router-dom';
 
 interface CommunityFeedCardProps {
   title: string;
+  preview?: string | null;
   imageUrl?: string | null;
+  nickname?: string | null;
   likes: number;
   comments: number;
+  views?: number;
+  createdAt?: string | null;
   to?: string;
   badge?: string;
-  muted?: boolean;
 }
 
 export function CommunityFeedCard({
   title,
+  preview,
   imageUrl,
+  nickname,
   likes,
   comments,
+  views,
+  createdAt,
   to,
   badge,
-  muted = false,
 }: CommunityFeedCardProps) {
+  const formattedDate = createdAt ? formatRelativeDate(createdAt) : null;
+
   const content = (
-    <article className="overflow-hidden rounded-[22px] border border-neutral-200 bg-white shadow-sm">
-      <div className="relative aspect-[4/3] overflow-hidden bg-neutral-100">
+    <article className="group/card flex h-full flex-col overflow-hidden rounded-[20px] border border-neutral-200 bg-white shadow-sm transition-shadow hover:shadow-md">
+      <div className="relative aspect-4/3 shrink-0 overflow-hidden bg-neutral-100">
         {imageUrl ? (
           <img
             src={imageUrl}
             alt={title}
-            className={[
-              'h-full w-full object-cover transition-transform duration-300',
-              muted ? '' : 'group-hover:scale-[1.03]',
-            ].join(' ')}
+            className="h-full w-full object-cover transition-transform duration-300 group-hover/card:scale-[1.03]"
           />
         ) : (
-          <div className="flex h-full w-full items-center justify-center bg-linear-to-br from-neutral-200 via-neutral-100 to-neutral-200" />
+          <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-brand/[0.06] via-neutral-100 to-neutral-200">
+            <ImagePlaceholderIcon className="h-10 w-10 text-neutral-300" />
+          </div>
         )}
 
         {badge ? (
@@ -42,45 +49,67 @@ export function CommunityFeedCard({
         ) : null}
       </div>
 
-      <div className="space-y-3 px-3 py-3">
-        <p className="line-clamp-1 text-sm font-medium text-neutral-800">{title}</p>
-        <div className="flex items-center justify-end gap-4 text-sm text-neutral-600">
-          <SocialStat kind="like" value={likes} />
-          <SocialStat kind="comment" value={comments} />
+      <div className="flex flex-1 flex-col gap-2 px-3.5 py-3.5">
+        <p className="line-clamp-2 text-sm font-semibold leading-snug text-neutral-900">{title}</p>
+
+        {preview ? <p className="line-clamp-2 text-xs leading-relaxed text-neutral-500">{preview}</p> : null}
+
+        <div className="mt-auto flex items-center justify-between gap-2 pt-2">
+          {nickname ? <span className="truncate text-xs text-neutral-400">{nickname}</span> : <span />}
+          <div className="flex shrink-0 items-center gap-3 text-xs text-neutral-500">
+            <SocialStat kind="like" value={likes} />
+            <SocialStat kind="comment" value={comments} />
+            {views !== undefined && <SocialStat kind="view" value={views} />}
+          </div>
         </div>
+
+        {formattedDate ? <p className="text-[11px] text-neutral-400">{formattedDate}</p> : null}
       </div>
     </article>
   );
 
-  const className = [
-    'group block',
-    muted ? 'cursor-default' : 'transition-transform duration-200 hover:-translate-y-0.5',
-  ].join(' ');
-
   if (to) {
     return (
-      <Link to={to} className={className}>
+      <Link to={to} className="block h-full">
         {content}
       </Link>
     );
   }
 
-  return <div className={className}>{content}</div>;
+  return <div className="h-full">{content}</div>;
 }
 
-function SocialStat({ kind, value }: { kind: 'like' | 'comment'; value: number }) {
+function SocialStat({ kind, value }: { kind: 'like' | 'comment' | 'view'; value: number }) {
   return (
-    <span className="inline-flex items-center gap-1.5">
+    <span className="inline-flex items-center gap-1">
       {kind === 'like' ? (
-        <HeartIcon className="h-4 w-4 text-[#d65d4b]" />
+        <HeartIcon className="h-3.5 w-3.5 text-[#d65d4b]" />
+      ) : kind === 'comment' ? (
+        <CommentIcon className="h-3.5 w-3.5 text-neutral-400" />
       ) : (
-        <CommentIcon className="h-4 w-4 text-neutral-500" />
+        <EyeIcon className="h-3.5 w-3.5 text-neutral-400" />
       )}
       <span>{value}</span>
     </span>
   );
 }
 
+function formatRelativeDate(iso: string): string {
+  const now = Date.now();
+  const date = new Date(iso).getTime();
+  const diff = now - date;
+  const minutes = Math.floor(diff / 60000);
+  const hours = Math.floor(diff / 3600000);
+  const days = Math.floor(diff / 86400000);
+
+  if (minutes < 1) return '방금 전';
+  if (minutes < 60) return `${minutes}분 전`;
+  if (hours < 24) return `${hours}시간 전`;
+  if (days < 7) return `${days}일 전`;
+
+  return new Date(iso).toLocaleDateString('ko-KR', { month: 'short', day: 'numeric' });
+}
+
 function HeartIcon({ className }: { className?: string }) {
   return (
     <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className={className}>
@@ -100,3 +129,22 @@ function CommentIcon({ className }: { className?: string }) {
     </svg>
   );
 }
+
+function EyeIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden className={className}>
+      <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" strokeLinecap="round" strokeLinejoin="round" />
+      <circle cx="12" cy="12" r="3" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function ImagePlaceholderIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden className={className}>
+      <rect x="3" y="3" width="18" height="18" rx="3" />
+      <circle cx="8.5" cy="8.5" r="1.5" />
+      <path d="m21 15-5-5L5 21" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
diff --git a/src/features/community/ui/CommunityProfileCard.tsx b/src/features/community/ui/CommunityProfileCard.tsx
index 10a595f..c9d0a24 100644
--- a/src/features/community/ui/CommunityProfileCard.tsx
+++ b/src/features/community/ui/CommunityProfileCard.tsx
@@ -27,13 +27,19 @@ export function CommunityProfileCard({ profileUrl, nickname }: CommunityProfileC
         <p className="mt-1 text-center text-sm text-neutral-500">오늘의 반려생활을 기록해보세요.</p>
       </div>
 
-      <div className="px-5 py-5">
+      <div className="flex flex-col gap-2 px-5 py-5">
         <Link
           to="/community/new"
           className="inline-flex w-full items-center justify-center rounded-xl bg-brand px-4 py-3 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90"
         >
           글쓰기
         </Link>
+        <Link
+          to="/community/my"
+          className="inline-flex w-full items-center justify-center rounded-xl border border-neutral-200 bg-white px-4 py-2.5 text-sm font-medium text-neutral-600 transition-colors hover:border-neutral-300 hover:bg-neutral-50"
+        >
+          내 활동
+        </Link>
       </div>
     </section>
   );
diff --git a/src/pages/community/CommunityMyActivityPage.tsx b/src/pages/community/CommunityMyActivityPage.tsx
new file mode 100644
index 0000000..40c94d3
--- /dev/null
+++ b/src/pages/community/CommunityMyActivityPage.tsx
@@ -0,0 +1,138 @@
+import type { ReactNode } from 'react';
+import { Link, useSearchParams } from 'react-router-dom';
+
+import { useCurrentUser } from '@/features/auth';
+import { CommunityProfileCard } from '@/features/community';
+
+type ActivityTab = 'posts' | 'comments';
+
+function getTabFromSearch(value: string | null): ActivityTab {
+  if (value === 'comments') return 'comments';
+  return 'posts';
+}
+
+export function CommunityMyActivityPage() {
+  const [searchParams] = useSearchParams();
+  const activeTab = getTabFromSearch(searchParams.get('tab'));
+  const { profileUrl, nickname } = useCurrentUser();
+
+  return (
+    <div className="grid gap-8 lg:grid-cols-[220px_minmax(0,1fr)]">
+      <aside className="lg:sticky lg:top-6 lg:self-start">
+        <CommunityProfileCard profileUrl={profileUrl} nickname={nickname} />
+      </aside>
+
+      <div className="space-y-6">
+        <div>
+          <p className="text-xs font-semibold tracking-[0.24em] text-brand">MY ACTIVITY</p>
+          <h1 className="mt-2 text-[22px] font-semibold tracking-[-0.02em] text-neutral-950">내 활동</h1>
+        </div>
+
+        <div className="overflow-hidden rounded-[20px] border border-neutral-200 bg-white shadow-sm">
+          <div className="flex border-b border-neutral-100">
+            <TabButton to="/community/my?tab=posts" isActive={activeTab === 'posts'}>
+              내 게시글
+            </TabButton>
+            <TabButton to="/community/my?tab=comments" isActive={activeTab === 'comments'}>
+              내 댓글
+            </TabButton>
+          </div>
+
+          <div className="px-6 py-8 sm:px-8">{activeTab === 'posts' ? <MyPostsTab /> : <MyCommentsTab />}</div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function TabButton({ to, isActive, children }: { to: string; isActive: boolean; children: ReactNode }) {
+  return (
+    <Link
+      to={to}
+      className={[
+        'flex-1 py-3.5 text-center text-sm font-medium transition-colors',
+        isActive ? 'border-b-2 border-brand text-brand' : 'text-neutral-500 hover:text-neutral-700',
+      ].join(' ')}
+    >
+      {children}
+    </Link>
+  );
+}
+
+function MyPostsTab() {
+  return (
+    <EmptyState
+      icon={<PostIcon className="h-10 w-10 text-neutral-300" />}
+      message="작성한 게시글이 없어요."
+      description="반려동물 이야기를 첫 번째로 공유해보세요!"
+      action={
+        <Link
+          to="/community/new"
+          className="inline-flex items-center justify-center rounded-xl bg-brand px-5 py-2.5 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90"
+        >
+          글쓰기
+        </Link>
+      }
+    />
+  );
+}
+
+function MyCommentsTab() {
+  return (
+    <EmptyState
+      icon={<CommentIcon className="h-10 w-10 text-neutral-300" />}
+      message="작성한 댓글이 없어요."
+      description="다른 분들의 이야기에 댓글을 남겨보세요."
+      action={
+        <Link
+          to="/community"
+          className="inline-flex items-center justify-center rounded-xl border border-neutral-200 bg-white px-5 py-2.5 text-sm font-medium text-neutral-600 transition-colors hover:border-neutral-300 hover:bg-neutral-50"
+        >
+          커뮤니티 둘러보기
+        </Link>
+      }
+    />
+  );
+}
+
+function EmptyState({
+  icon,
+  message,
+  description,
+  action,
+}: {
+  icon: ReactNode;
+  message: string;
+  description: string;
+  action?: ReactNode;
+}) {
+  return (
+    <div className="flex flex-col items-center justify-center py-8 text-center">
+      {icon}
+      <p className="mt-4 text-sm font-medium text-neutral-700">{message}</p>
+      <p className="mt-1.5 text-sm text-neutral-400">{description}</p>
+      {action ? <div className="mt-6">{action}</div> : null}
+    </div>
+  );
+}
+
+function PostIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden className={className}>
+      <rect x="4" y="4" width="16" height="16" rx="3" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M8 9h8M8 13h5" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function CommentIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden className={className}>
+      <path
+        d="M8 19.5 4.5 21l1.125-3.375A7.5 7.5 0 1 1 19.5 12 7.5 7.5 0 0 1 12 19.5H8Z"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/src/pages/community/CommunityPage.tsx b/src/pages/community/CommunityPage.tsx
index 7d499ac..2bf89f0 100644
--- a/src/pages/community/CommunityPage.tsx
+++ b/src/pages/community/CommunityPage.tsx
@@ -1,117 +1,303 @@
+import { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 
 import { useCurrentUser } from '@/features/auth';
-import { CommunityFeedCard, CommunityProfileCard } from '@/features/community';
-
-const popularPosts = [
-  { title: 'Warm winter tips for pet walks', likes: 89, comments: 38, badge: 'HOT' },
-  { title: 'Favorite treats our dog keeps asking for', likes: 74, comments: 16, badge: undefined },
-  { title: 'Toy picks for curious cats', likes: 65, comments: 21, badge: undefined },
-] as const;
-
-const boardPosts = [
-  { title: 'Hello from our home', likes: 0, comments: 0 },
-  { title: 'Warm winter tips for pet walks', likes: 89, comments: 38 },
-  { title: 'Our paw-cleaning routine after walks', likes: 52, comments: 14 },
-  { title: 'Best nap spots in the house', likes: 44, comments: 9 },
-  { title: 'Looking for a good pet cam', likes: 27, comments: 11 },
-  { title: 'Daily care checklist for busy days', likes: 39, comments: 12 },
-  { title: 'Indoor play ideas for rainy weather', likes: 31, comments: 7 },
-  { title: 'The reaction to a new toy was perfect', likes: 58, comments: 19 },
-] as const;
+import { type BoardListItem, CommunityFeedCard, CommunityProfileCard, useBoardList } from '@/features/community';
+import { LoadingSpinner } from '@/shared/ui';
 
 export function CommunityPage() {
   const { profileUrl, nickname } = useCurrentUser();
+  const { data, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } = useBoardList();
+
+  const boards = useMemo(() => data?.pages.flatMap((page) => page.boards) ?? [], [data]);
+
+  const popularBoards = useMemo(() => [...boards].sort((a, b) => b.likeCount - a.likeCount).slice(0, 3), [boards]);
 
   return (
-    <div className="space-y-8">
-      <section className="overflow-hidden rounded-[30px] border border-neutral-200 bg-linear-to-br from-white via-[#fff9f5] to-[#f7efe8] shadow-sm">
-        <div className="px-6 py-8 sm:px-8">
-          <div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
-            <div>
-              <p className="text-xs font-semibold tracking-[0.24em] text-brand">COMMUNITY</p>
-              <h1 className="mt-3 text-[30px] font-semibold tracking-[-0.03em] text-neutral-950 sm:text-[38px]">
-                A soft little square for everyday pet stories
-              </h1>
-              <p className="mt-4 max-w-2xl text-sm leading-7 text-neutral-600 sm:text-base">
-                Share walks, routines, tiny wins, and favorite photos. The list API is not connected yet, so this page
-                is shaped first for the final feed experience.
-              </p>
-            </div>
+    <div className="grid gap-8 lg:grid-cols-[220px_minmax(0,1fr)]">
+      <aside className="lg:sticky lg:top-6 lg:self-start">
+        <CommunityProfileCard profileUrl={profileUrl} nickname={nickname} />
+      </aside>
 
-            <div className="flex flex-col gap-3 sm:flex-row">
-              <Link
-                to="/community/new"
-                className="inline-flex items-center justify-center rounded-xl bg-brand px-5 py-3 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90"
-              >
-                Write post
-              </Link>
-              <div className="inline-flex items-center justify-center rounded-xl border border-white/80 bg-white/80 px-5 py-3 text-sm font-medium text-neutral-600 shadow-sm">
-                Explore hot posts
-              </div>
+      <div className="space-y-10">
+        <PopularSection boards={popularBoards} isLoading={isLoading} isError={isError} />
+        <RecentSection
+          boards={boards}
+          isLoading={isLoading}
+          isError={isError}
+          hasNextPage={hasNextPage}
+          isFetchingNextPage={isFetchingNextPage}
+          onLoadMore={() => void fetchNextPage()}
+        />
+      </div>
+    </div>
+  );
+}
+
+function PopularSection({
+  boards,
+  isLoading,
+  isError,
+}: {
+  boards: BoardListItem[];
+  isLoading: boolean;
+  isError: boolean;
+}) {
+  return (
+    <section className="space-y-4">
+      <div className="flex items-center gap-3">
+        <div>
+          <p className="text-xs font-semibold tracking-[0.22em] text-brand">HOT TOPICS</p>
+          <h2 className="mt-1 text-[20px] font-semibold tracking-[-0.02em] text-neutral-950">인기 게시물</h2>
+        </div>
+        <span className="rounded-full bg-brand/10 px-3 py-1 text-xs font-semibold tracking-[0.14em] text-brand">
+          TOP 3
+        </span>
+      </div>
+
+      {isLoading ? (
+        <div className="grid gap-4 sm:grid-cols-3">
+          {Array.from({ length: 3 }).map((_, i) => (
+            <PopularCardSkeleton key={i} />
+          ))}
+        </div>
+      ) : isError ? (
+        <ErrorState />
+      ) : boards.length === 0 ? (
+        <EmptyPopularState />
+      ) : (
+        <div className="grid gap-4 sm:grid-cols-3">
+          {boards.map((board, index) => (
+            <PopularCard key={board.boardId} board={board} rank={index + 1} />
+          ))}
+        </div>
+      )}
+    </section>
+  );
+}
+
+function PopularCard({ board, rank }: { board: BoardListItem; rank: number }) {
+  const rankColors: Record<number, string> = {
+    1: 'bg-amber-400 text-white',
+    2: 'bg-neutral-400 text-white',
+    3: 'bg-amber-700/70 text-white',
+  };
+  const rankColor = rankColors[rank] ?? 'bg-neutral-300 text-white';
+
+  return (
+    <Link to={`/community/${board.boardId}`} className="group block">
+      <article className="overflow-hidden rounded-[20px] border border-neutral-200 bg-white shadow-sm transition-shadow hover:shadow-md">
+        <div className="relative aspect-4/3 overflow-hidden bg-neutral-100">
+          {board.thumbnailImageUrl ? (
+            <img
+              src={board.thumbnailImageUrl}
+              alt={board.boardTitle}
+              className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
+            />
+          ) : (
+            <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-brand/[0.06] via-neutral-100 to-neutral-200">
+              <ImagePlaceholderIcon className="h-10 w-10 text-neutral-300" />
             </div>
-          </div>
+          )}
+          <span
+            className={`absolute left-3 top-3 flex h-7 w-7 items-center justify-center rounded-full text-xs font-bold shadow-sm ${rankColor}`}
+          >
+            {rank}
+          </span>
         </div>
-      </section>
-
-      <div className="grid gap-8 lg:grid-cols-[220px_minmax(0,1fr)]">
-        <aside className="lg:sticky lg:top-6 lg:self-start">
-          <CommunityProfileCard profileUrl={profileUrl} nickname={nickname} />
-        </aside>
-
-        <div className="space-y-8">
-          <section>
-            <div className="mb-4 flex items-center justify-between gap-4">
-              <h2 className="text-[24px] font-semibold tracking-[-0.02em] text-neutral-950">Popular posts</h2>
-              <span className="rounded-full bg-brand/8 px-3 py-1 text-xs font-semibold tracking-[0.16em] text-brand">
-                CURATED
+
+        <div className="space-y-2 px-3.5 py-3.5">
+          <p className="line-clamp-2 text-sm font-semibold leading-snug text-neutral-900">{board.boardTitle}</p>
+          {board.boardContentPreview ? (
+            <p className="line-clamp-1 text-xs text-neutral-500">{board.boardContentPreview}</p>
+          ) : null}
+          <div className="flex items-center justify-between gap-2 pt-0.5">
+            <span className="truncate text-xs text-neutral-400">{board.nickname}</span>
+            <div className="flex shrink-0 items-center gap-3 text-xs text-neutral-500">
+              <span className="inline-flex items-center gap-1">
+                <HeartIcon className="h-3.5 w-3.5 text-[#d65d4b]" />
+                {board.likeCount}
+              </span>
+              <span className="inline-flex items-center gap-1">
+                <CommentIcon className="h-3.5 w-3.5 text-neutral-400" />
+                {board.commentCount}
               </span>
             </div>
-            <div className="grid gap-4 md:grid-cols-3">
-              {popularPosts.map((post, index) => (
-                <CommunityFeedCard
-                  key={`${post.title}-${index}`}
-                  title={post.title}
-                  imageUrl={
-                    index === 0
-                      ? 'https://images.unsplash.com/photo-1517849845537-4d257902454a?auto=format&fit=crop&w=800&q=80'
-                      : null
-                  }
-                  likes={post.likes}
-                  comments={post.comments}
-                  badge={post.badge}
-                  muted={index !== 0}
-                  to={index === 0 ? '/community/1' : undefined}
-                />
-              ))}
-            </div>
-          </section>
+          </div>
+        </div>
+      </article>
+    </Link>
+  );
+}
 
-          <section>
-            <div className="mb-4 flex items-center justify-between gap-4">
-              <h2 className="text-[24px] font-semibold tracking-[-0.02em] text-neutral-950">Board</h2>
-              <span className="text-sm text-neutral-500">A feed for daily notes and useful tips</span>
-            </div>
-            <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
-              {boardPosts.map((post, index) => (
-                <CommunityFeedCard
-                  key={`${post.title}-${index}`}
-                  title={post.title}
-                  imageUrl={
-                    index === 0
-                      ? 'https://images.unsplash.com/photo-1561037404-61cd46aa615b?auto=format&fit=crop&w=800&q=80'
-                      : null
-                  }
-                  likes={post.likes}
-                  comments={post.comments}
-                  muted={index !== 0}
-                  to={index === 0 ? '/community/1' : undefined}
-                />
-              ))}
+function RecentSection({
+  boards,
+  isLoading,
+  isError,
+  hasNextPage,
+  isFetchingNextPage,
+  onLoadMore,
+}: {
+  boards: BoardListItem[];
+  isLoading: boolean;
+  isError: boolean;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  onLoadMore: () => void;
+}) {
+  return (
+    <section className="space-y-4">
+      <div className="flex items-center justify-between gap-4">
+        <div>
+          <p className="text-xs font-semibold tracking-[0.22em] text-neutral-400">BOARD</p>
+          <h2 className="mt-1 text-[20px] font-semibold tracking-[-0.02em] text-neutral-950">최근 게시물</h2>
+        </div>
+        <Link
+          to="/community/new"
+          className="shrink-0 rounded-xl bg-brand px-4 py-2 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90"
+        >
+          글쓰기
+        </Link>
+      </div>
+
+      {isLoading ? (
+        <div className="grid gap-4 grid-cols-2 xl:grid-cols-4">
+          {Array.from({ length: 8 }).map((_, i) => (
+            <BoardCardSkeleton key={i} />
+          ))}
+        </div>
+      ) : isError ? (
+        <ErrorState />
+      ) : boards.length === 0 ? (
+        <EmptyRecentState />
+      ) : (
+        <div className="space-y-6">
+          <div className="grid gap-4 grid-cols-2 xl:grid-cols-4">
+            {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}`}
+              />
+            ))}
+          </div>
+
+          {hasNextPage && (
+            <div className="flex justify-center pt-2">
+              <button
+                type="button"
+                onClick={onLoadMore}
+                disabled={isFetchingNextPage}
+                className="inline-flex items-center gap-2 rounded-xl border border-neutral-200 bg-white px-6 py-2.5 text-sm font-medium text-neutral-600 transition-colors hover:border-neutral-300 hover:bg-neutral-50 disabled:opacity-50"
+              >
+                {isFetchingNextPage ? <LoadingSpinner size="sm" /> : null}
+                {isFetchingNextPage ? '불러오는 중...' : '더 보기'}
+              </button>
             </div>
-          </section>
+          )}
+        </div>
+      )}
+    </section>
+  );
+}
+
+function ErrorState() {
+  return (
+    <div className="flex flex-col items-center justify-center rounded-[20px] border border-neutral-200 bg-white px-6 py-12 text-center shadow-sm">
+      <p className="text-sm font-medium text-neutral-700">게시글을 불러오지 못했어요.</p>
+      <p className="mt-1.5 text-sm text-neutral-400">잠시 후 다시 시도해주세요.</p>
+    </div>
+  );
+}
+
+function EmptyPopularState() {
+  return (
+    <div className="flex items-center justify-center rounded-[20px] border border-dashed border-neutral-200 bg-white px-6 py-10 text-center">
+      <p className="text-sm text-neutral-400">아직 게시글이 없어요.</p>
+    </div>
+  );
+}
+
+function EmptyRecentState() {
+  return (
+    <div className="flex flex-col items-center justify-center rounded-[20px] border border-neutral-200 bg-white px-6 py-14 text-center shadow-sm">
+      <p className="text-sm font-medium text-neutral-700">아직 게시글이 없어요.</p>
+      <p className="mt-1.5 text-sm text-neutral-400">첫 번째 이야기를 들려주세요!</p>
+      <Link
+        to="/community/new"
+        className="mt-5 inline-flex items-center justify-center rounded-xl bg-brand px-5 py-2.5 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90"
+      >
+        글쓰기
+      </Link>
+    </div>
+  );
+}
+
+function PopularCardSkeleton() {
+  return (
+    <div className="overflow-hidden rounded-[20px] border border-neutral-200 bg-white shadow-sm">
+      <div className="aspect-4/3 animate-pulse bg-neutral-100" />
+      <div className="space-y-2 px-3.5 py-3.5">
+        <div className="h-4 w-3/4 animate-pulse rounded-md bg-neutral-100" />
+        <div className="h-3 w-full animate-pulse rounded-md bg-neutral-100" />
+        <div className="flex justify-between pt-1">
+          <div className="h-3 w-16 animate-pulse rounded-md bg-neutral-100" />
+          <div className="h-3 w-20 animate-pulse rounded-md bg-neutral-100" />
         </div>
       </div>
     </div>
   );
 }
+
+function BoardCardSkeleton() {
+  return (
+    <div className="overflow-hidden rounded-[20px] border border-neutral-200 bg-white shadow-sm">
+      <div className="aspect-4/3 animate-pulse bg-neutral-100" />
+      <div className="space-y-2 px-3.5 py-3.5">
+        <div className="h-4 w-3/4 animate-pulse rounded-md bg-neutral-100" />
+        <div className="h-3 w-full animate-pulse rounded-md bg-neutral-100" />
+        <div className="flex justify-between pt-1">
+          <div className="h-3 w-16 animate-pulse rounded-md bg-neutral-100" />
+          <div className="h-3 w-20 animate-pulse rounded-md bg-neutral-100" />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function HeartIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className={className}>
+      <path d="M12 21s-6.716-4.304-9.428-7.851C-.315 9.382.496 4.5 4.96 3.297A5.53 5.53 0 0 1 12 6.045a5.53 5.53 0 0 1 7.04-2.748c4.464 1.203 5.276 6.085 2.387 9.852C18.716 16.696 12 21 12 21Z" />
+    </svg>
+  );
+}
+
+function CommentIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden className={className}>
+      <path
+        d="M8 19.5 4.5 21l1.125-3.375A7.5 7.5 0 1 1 19.5 12 7.5 7.5 0 0 1 12 19.5H8Z"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function ImagePlaceholderIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden className={className}>
+      <rect x="3" y="3" width="18" height="18" rx="3" />
+      <circle cx="8.5" cy="8.5" r="1.5" />
+      <path d="m21 15-5-5L5 21" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
diff --git a/src/shared/lib/react-query/queryKey.ts b/src/shared/lib/react-query/queryKey.ts
index 03e14c9..b7780a6 100644
--- a/src/shared/lib/react-query/queryKey.ts
+++ b/src/shared/lib/react-query/queryKey.ts
@@ -1,5 +1,7 @@
 export const queryKeys = {
   boards: {
+    list: (params?: { page?: number; size?: number }) =>
+      ['boards', 'list', params?.page ?? 0, params?.size ?? 12] as const,
     detail: (boardId: number) => ['boards', boardId, 'detail'] as const,
     tempSaved: (sessionKey: string) => ['boards', 'temp-save', sessionKey] as const,
   },

From e067bf8e019e451918fc3575caf6a67933048174 Mon Sep 17 00:00:00 2001
From: sooloin <csb7543@naver.com>
Date: Fri, 12 Jun 2026 20:53:02 +0900
Subject: [PATCH 07/13] =?UTF-8?q?:sparkles:=20Feat:=20=EC=BB=A4=EB=AE=A4?=
 =?UTF-8?q?=EB=8B=88=ED=8B=B0=20=EA=B3=B5=ED=86=B5=20=EB=A0=88=EC=9D=B4?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EB=B0=8F=20=EC=82=AC=EC=9D=B4=EB=93=9C=20?=
 =?UTF-8?q?=ED=8C=A8=EB=84=90=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 커뮤니티 전용 공통 레이아웃 컴포넌트 추가
- 홈/내 활동 페이지를 카드형 구조로 통일
- 프로필 사이드 패널 스타일 개선 및 액션 버튼 정리
- 커뮤니티 홈/내 활동 문구 한글 정리

`#53`
---
 src/features/community/index.ts               |   2 +
 src/features/community/ui/CommunityLayout.tsx |  20 +++
 .../community/ui/CommunityProfileCard.tsx     |  27 +--
 .../community/ui/CommunitySidebarPanel.tsx    |  14 ++
 .../community/CommunityMyActivityPage.tsx     |  88 +++++----
 src/pages/community/CommunityPage.tsx         | 167 ++++++++++--------
 6 files changed, 198 insertions(+), 120 deletions(-)
 create mode 100644 src/features/community/ui/CommunityLayout.tsx
 create mode 100644 src/features/community/ui/CommunitySidebarPanel.tsx

diff --git a/src/features/community/index.ts b/src/features/community/index.ts
index 67eaa36..56ac648 100644
--- a/src/features/community/index.ts
+++ b/src/features/community/index.ts
@@ -29,7 +29,9 @@ export { useTempSaveBoard } from './model/useTempSaveBoard';
 export { useTempSavedBoard } from './model/useTempSavedBoard';
 export { useUpdateBoard } from './model/useUpdateBoard';
 export { CommunityFeedCard } from './ui/CommunityFeedCard';
+export { CommunityLayout } from './ui/CommunityLayout';
 export { CommunityProfileCard } from './ui/CommunityProfileCard';
+export { CommunitySidebarPanel } from './ui/CommunitySidebarPanel';
 export { BoardDetailContent } from './ui/BoardDetailContent';
 export { BoardEditorForm } from './ui/BoardEditorForm';
 export { DeleteBoardDialog } from './ui/DeleteBoardDialog';
diff --git a/src/features/community/ui/CommunityLayout.tsx b/src/features/community/ui/CommunityLayout.tsx
new file mode 100644
index 0000000..edb61aa
--- /dev/null
+++ b/src/features/community/ui/CommunityLayout.tsx
@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+
+interface CommunityLayoutProps {
+  sidebar: ReactNode;
+  content: ReactNode;
+}
+
+export function CommunityLayout({ sidebar, content }: CommunityLayoutProps) {
+  return (
+    <div className="rounded-[30px] border border-neutral-200/80 bg-linear-to-br from-[#fffaf6] via-white to-brand/[0.05] p-3 shadow-[0_24px_70px_rgba(15,23,42,0.06)] sm:p-4">
+      <div className="grid gap-4 xl:grid-cols-[280px_minmax(0,1fr)]">
+        <aside className="xl:sticky xl:top-6 xl:self-start">{sidebar}</aside>
+
+        <section className="min-w-0 rounded-[26px] border border-white/80 bg-neutral-50/90 p-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.8)] sm:p-6 lg:p-8">
+          {content}
+        </section>
+      </div>
+    </div>
+  );
+}
diff --git a/src/features/community/ui/CommunityProfileCard.tsx b/src/features/community/ui/CommunityProfileCard.tsx
index c9d0a24..3bdcf2d 100644
--- a/src/features/community/ui/CommunityProfileCard.tsx
+++ b/src/features/community/ui/CommunityProfileCard.tsx
@@ -8,12 +8,14 @@ interface CommunityProfileCardProps {
 }
 
 export function CommunityProfileCard({ profileUrl, nickname }: CommunityProfileCardProps) {
-  const resolvedName = nickname?.trim() || '도도 친구';
+  const resolvedName = nickname?.trim() || '\uB3C4\uB3C4 \uCE5C\uAD6C';
+  const description =
+    '\uC624\uB298\uC758 \uBC18\uB824\uC0DD\uD65C\uC744 \uAE30\uB85D\uD558\uACE0 \uC11C\uB85C\uC758 \uC77C\uC0C1\uC744 \uB098\uB220\uBCF4\uC138\uC694.';
 
   return (
-    <section className="overflow-hidden rounded-[26px] border border-neutral-200 bg-white shadow-sm">
-      <div className="bg-linear-to-br from-brand/[0.14] via-[#f7e6d9] to-white px-5 py-6">
-        <div className="mx-auto h-24 w-24 overflow-hidden rounded-full border-4 border-white bg-neutral-100 shadow-sm">
+    <section className="overflow-hidden rounded-[22px] bg-white/90">
+      <div className="rounded-[20px] bg-linear-to-br from-brand/[0.16] via-[#fde7d1] to-white px-5 py-6">
+        <div className="mx-auto h-24 w-24 overflow-hidden rounded-full border-4 border-white bg-neutral-100 shadow-[0_10px_30px_rgba(15,23,42,0.14)]">
           <img
             src={profileUrl?.trim() || profileDefaultIllustration}
             alt=""
@@ -23,22 +25,25 @@ export function CommunityProfileCard({ profileUrl, nickname }: CommunityProfileC
             }}
           />
         </div>
-        <p className="mt-4 text-center text-[20px] font-semibold tracking-[-0.02em] text-neutral-900">{resolvedName}</p>
-        <p className="mt-1 text-center text-sm text-neutral-500">오늘의 반려생활을 기록해보세요.</p>
+
+        <div className="mt-4 text-center">
+          <p className="text-[21px] font-semibold tracking-[-0.03em] text-neutral-950">{resolvedName}</p>
+          <p className="mt-1 text-sm leading-6 text-neutral-500">{description}</p>
+        </div>
       </div>
 
-      <div className="flex flex-col gap-2 px-5 py-5">
+      <div className="grid gap-2.5 px-2 pb-2 pt-4">
         <Link
           to="/community/new"
-          className="inline-flex w-full items-center justify-center rounded-xl bg-brand px-4 py-3 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90"
+          className="inline-flex w-full items-center justify-center rounded-2xl bg-neutral-950 px-4 py-3 text-sm font-semibold text-white transition-transform duration-200 hover:-translate-y-0.5"
         >
-          글쓰기
+          {'\uAE00\uC4F0\uAE30'}
         </Link>
         <Link
           to="/community/my"
-          className="inline-flex w-full items-center justify-center rounded-xl border border-neutral-200 bg-white px-4 py-2.5 text-sm font-medium text-neutral-600 transition-colors hover:border-neutral-300 hover:bg-neutral-50"
+          className="inline-flex w-full items-center justify-center rounded-2xl border border-neutral-200 bg-white px-4 py-3 text-sm font-medium text-neutral-700 transition-colors hover:border-brand/30 hover:bg-brand/[0.04]"
         >
-          내 활동
+          {'\uB0B4 \uD65C\uB3D9'}
         </Link>
       </div>
     </section>
diff --git a/src/features/community/ui/CommunitySidebarPanel.tsx b/src/features/community/ui/CommunitySidebarPanel.tsx
new file mode 100644
index 0000000..fd87d91
--- /dev/null
+++ b/src/features/community/ui/CommunitySidebarPanel.tsx
@@ -0,0 +1,14 @@
+import { CommunityProfileCard } from './CommunityProfileCard';
+
+interface CommunitySidebarPanelProps {
+  profileUrl: string | null;
+  nickname: string | null;
+}
+
+export function CommunitySidebarPanel({ profileUrl, nickname }: CommunitySidebarPanelProps) {
+  return (
+    <div className="rounded-[26px] border border-white/80 bg-linear-to-b from-white via-[#fffaf5] to-[#fff3e8] p-4 shadow-[0_18px_44px_rgba(15,23,42,0.08)] sm:p-5">
+      <CommunityProfileCard profileUrl={profileUrl} nickname={nickname} />
+    </div>
+  );
+}
diff --git a/src/pages/community/CommunityMyActivityPage.tsx b/src/pages/community/CommunityMyActivityPage.tsx
index 40c94d3..2705f16 100644
--- a/src/pages/community/CommunityMyActivityPage.tsx
+++ b/src/pages/community/CommunityMyActivityPage.tsx
@@ -2,10 +2,26 @@ import type { ReactNode } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
 
 import { useCurrentUser } from '@/features/auth';
-import { CommunityProfileCard } from '@/features/community';
+import { CommunityLayout, CommunitySidebarPanel } from '@/features/community';
 
 type ActivityTab = 'posts' | 'comments';
 
+const ACTIVITY_COPY = {
+  heading: '\uB0B4 \uD65C\uB3D9',
+  description:
+    '\uB0B4\uAC00 \uB0A8\uAE34 \uAC8C\uC2DC\uAE00\uACFC \uB313\uAE00 \uD65C\uB3D9\uC744 \uD55C\uACF3\uC5D0\uC11C \uD655\uC778\uD574\uBCF4\uC138\uC694.',
+  myPosts: '\uB0B4 \uAC8C\uC2DC\uAE00',
+  myComments: '\uB0B4 \uB313\uAE00',
+  emptyPostsTitle: '\uC544\uC9C1 \uC791\uC131\uD55C \uAC8C\uC2DC\uAE00\uC774 \uC5C6\uC5B4\uC694.',
+  emptyPostsDescription:
+    '\uCCAB \uBC88\uC9F8 \uBC18\uB824\uC0DD\uD65C \uC774\uC57C\uAE30\uB97C \uCEE4\uBBA4\uB2C8\uD2F0\uC5D0 \uACF5\uC720\uD574\uBCF4\uC138\uC694.',
+  emptyCommentsTitle: '\uC544\uC9C1 \uC791\uC131\uD55C \uB313\uAE00\uC774 \uC5C6\uC5B4\uC694.',
+  emptyCommentsDescription:
+    '\uB2E4\uB978 \uCE5C\uAD6C\uB4E4\uC758 \uAC8C\uC2DC\uAE00\uC5D0 \uB313\uAE00\uC744 \uB0A8\uAE30\uBA70 \uC18C\uD1B5\uD574\uBCF4\uC138\uC694.',
+  writePost: '\uAE00\uC4F0\uAE30',
+  browseCommunity: '\uCEE4\uBBA4\uB2C8\uD2F0 \uB458\uB7EC\uBCF4\uAE30',
+};
+
 function getTabFromSearch(value: string | null): ActivityTab {
   if (value === 'comments') return 'comments';
   return 'posts';
@@ -17,31 +33,33 @@ export function CommunityMyActivityPage() {
   const { profileUrl, nickname } = useCurrentUser();
 
   return (
-    <div className="grid gap-8 lg:grid-cols-[220px_minmax(0,1fr)]">
-      <aside className="lg:sticky lg:top-6 lg:self-start">
-        <CommunityProfileCard profileUrl={profileUrl} nickname={nickname} />
-      </aside>
+    <CommunityLayout
+      sidebar={<CommunitySidebarPanel profileUrl={profileUrl} nickname={nickname} />}
+      content={
+        <div className="space-y-6">
+          <div>
+            <p className="text-xs font-semibold tracking-[0.24em] text-brand">MY COMMUNITY</p>
+            <h1 className="mt-2 text-[26px] font-semibold tracking-[-0.03em] text-neutral-950">
+              {ACTIVITY_COPY.heading}
+            </h1>
+            <p className="mt-1 text-sm text-neutral-500">{ACTIVITY_COPY.description}</p>
+          </div>
 
-      <div className="space-y-6">
-        <div>
-          <p className="text-xs font-semibold tracking-[0.24em] text-brand">MY ACTIVITY</p>
-          <h1 className="mt-2 text-[22px] font-semibold tracking-[-0.02em] text-neutral-950">내 활동</h1>
-        </div>
+          <div className="overflow-hidden rounded-[24px] border border-neutral-200/80 bg-white shadow-[0_18px_42px_rgba(15,23,42,0.06)]">
+            <div className="flex border-b border-neutral-100 bg-neutral-50/70">
+              <TabButton to="/community/my?tab=posts" isActive={activeTab === 'posts'}>
+                {ACTIVITY_COPY.myPosts}
+              </TabButton>
+              <TabButton to="/community/my?tab=comments" isActive={activeTab === 'comments'}>
+                {ACTIVITY_COPY.myComments}
+              </TabButton>
+            </div>
 
-        <div className="overflow-hidden rounded-[20px] border border-neutral-200 bg-white shadow-sm">
-          <div className="flex border-b border-neutral-100">
-            <TabButton to="/community/my?tab=posts" isActive={activeTab === 'posts'}>
-              내 게시글
-            </TabButton>
-            <TabButton to="/community/my?tab=comments" isActive={activeTab === 'comments'}>
-              내 댓글
-            </TabButton>
+            <div className="px-6 py-8 sm:px-8">{activeTab === 'posts' ? <MyPostsTab /> : <MyCommentsTab />}</div>
           </div>
-
-          <div className="px-6 py-8 sm:px-8">{activeTab === 'posts' ? <MyPostsTab /> : <MyCommentsTab />}</div>
         </div>
-      </div>
-    </div>
+      }
+    />
   );
 }
 
@@ -50,8 +68,8 @@ function TabButton({ to, isActive, children }: { to: string; isActive: boolean;
     <Link
       to={to}
       className={[
-        'flex-1 py-3.5 text-center text-sm font-medium transition-colors',
-        isActive ? 'border-b-2 border-brand text-brand' : 'text-neutral-500 hover:text-neutral-700',
+        'flex-1 py-4 text-center text-sm font-semibold transition-colors',
+        isActive ? 'border-b-2 border-brand bg-white text-neutral-950' : 'text-neutral-500 hover:text-neutral-700',
       ].join(' ')}
     >
       {children}
@@ -63,14 +81,14 @@ function MyPostsTab() {
   return (
     <EmptyState
       icon={<PostIcon className="h-10 w-10 text-neutral-300" />}
-      message="작성한 게시글이 없어요."
-      description="반려동물 이야기를 첫 번째로 공유해보세요!"
+      message={ACTIVITY_COPY.emptyPostsTitle}
+      description={ACTIVITY_COPY.emptyPostsDescription}
       action={
         <Link
           to="/community/new"
-          className="inline-flex items-center justify-center rounded-xl bg-brand px-5 py-2.5 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90"
+          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>
       }
     />
@@ -81,14 +99,14 @@ function MyCommentsTab() {
   return (
     <EmptyState
       icon={<CommentIcon className="h-10 w-10 text-neutral-300" />}
-      message="작성한 댓글이 없어요."
-      description="다른 분들의 이야기에 댓글을 남겨보세요."
+      message={ACTIVITY_COPY.emptyCommentsTitle}
+      description={ACTIVITY_COPY.emptyCommentsDescription}
       action={
         <Link
           to="/community"
-          className="inline-flex items-center justify-center rounded-xl border border-neutral-200 bg-white px-5 py-2.5 text-sm font-medium text-neutral-600 transition-colors hover:border-neutral-300 hover:bg-neutral-50"
+          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>
       }
     />
@@ -107,10 +125,10 @@ function EmptyState({
   action?: ReactNode;
 }) {
   return (
-    <div className="flex flex-col items-center justify-center py-8 text-center">
+    <div className="flex flex-col items-center justify-center rounded-[22px] bg-neutral-50 px-6 py-10 text-center">
       {icon}
-      <p className="mt-4 text-sm font-medium text-neutral-700">{message}</p>
-      <p className="mt-1.5 text-sm text-neutral-400">{description}</p>
+      <p className="mt-4 text-sm font-semibold text-neutral-800">{message}</p>
+      <p className="mt-1.5 text-sm leading-6 text-neutral-500">{description}</p>
       {action ? <div className="mt-6">{action}</div> : null}
     </div>
   );
diff --git a/src/pages/community/CommunityPage.tsx b/src/pages/community/CommunityPage.tsx
index 2bf89f0..52c3aa2 100644
--- a/src/pages/community/CommunityPage.tsx
+++ b/src/pages/community/CommunityPage.tsx
@@ -2,35 +2,57 @@ import { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 
 import { useCurrentUser } from '@/features/auth';
-import { type BoardListItem, CommunityFeedCard, CommunityProfileCard, useBoardList } from '@/features/community';
+import {
+  type BoardListItem,
+  CommunityFeedCard,
+  CommunityLayout,
+  CommunitySidebarPanel,
+  useBoardList,
+} from '@/features/community';
 import { LoadingSpinner } from '@/shared/ui';
 
+const COMMUNITY_COPY = {
+  popularTitle: '\uC778\uAE30 \uAC8C\uC2DC\uBB3C',
+  popularDescription:
+    '\uC9C0\uAE08 \uCEE4\uBBA4\uB2C8\uD2F0\uC5D0\uC11C \uBC18\uC751\uC774 \uC88B\uC740 \uC774\uC57C\uAE30\uB97C \uBA3C\uC800 \uB9CC\uB098\uBCF4\uC138\uC694.',
+  recentTitle: '\uCD5C\uADFC \uAC8C\uC2DC\uBB3C',
+  recentDescription:
+    '\uBC18\uB824\uC0DD\uD65C \uC18D \uC18C\uC18C\uD55C \uAE30\uB85D\uBD80\uD130 \uC720\uC6A9\uD55C \uD301\uAE4C\uC9C0 \uD55C\uB208\uC5D0 \uB458\uB7EC\uBCF4\uC138\uC694.',
+  loadMore: '\uB354 \uBCF4\uAE30',
+  loadingMore: '\uAC8C\uC2DC\uAE00\uC744 \uBD88\uB7EC\uC624\uB294 \uC911...',
+  loadErrorTitle: '\uAC8C\uC2DC\uAE00\uC744 \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC5B4\uC694.',
+  loadErrorDescription: '\uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574\uC8FC\uC138\uC694.',
+  emptyPopular: '\uC544\uC9C1 \uC778\uAE30 \uAC8C\uC2DC\uBB3C\uC774 \uC5C6\uC5B4\uC694.',
+  emptyRecentTitle: '\uC544\uC9C1 \uB4F1\uB85D\uB41C \uAC8C\uC2DC\uAE00\uC774 \uC5C6\uC5B4\uC694.',
+  emptyRecentDescription:
+    '\uCCAB \uBC88\uC9F8 \uBC18\uB824\uC0DD\uD65C \uC774\uC57C\uAE30\uB97C \uB0A8\uACA8\uBCF4\uC138\uC694.',
+  writePost: '\uAE00\uC4F0\uAE30',
+};
+
 export function CommunityPage() {
   const { profileUrl, nickname } = useCurrentUser();
   const { data, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } = useBoardList();
 
   const boards = useMemo(() => data?.pages.flatMap((page) => page.boards) ?? [], [data]);
-
   const popularBoards = useMemo(() => [...boards].sort((a, b) => b.likeCount - a.likeCount).slice(0, 3), [boards]);
 
   return (
-    <div className="grid gap-8 lg:grid-cols-[220px_minmax(0,1fr)]">
-      <aside className="lg:sticky lg:top-6 lg:self-start">
-        <CommunityProfileCard profileUrl={profileUrl} nickname={nickname} />
-      </aside>
-
-      <div className="space-y-10">
-        <PopularSection boards={popularBoards} isLoading={isLoading} isError={isError} />
-        <RecentSection
-          boards={boards}
-          isLoading={isLoading}
-          isError={isError}
-          hasNextPage={hasNextPage}
-          isFetchingNextPage={isFetchingNextPage}
-          onLoadMore={() => void fetchNextPage()}
-        />
-      </div>
-    </div>
+    <CommunityLayout
+      sidebar={<CommunitySidebarPanel profileUrl={profileUrl} nickname={nickname} />}
+      content={
+        <div className="space-y-10">
+          <PopularSection boards={popularBoards} isLoading={isLoading} isError={isError} />
+          <RecentSection
+            boards={boards}
+            isLoading={isLoading}
+            isError={isError}
+            hasNextPage={hasNextPage}
+            isFetchingNextPage={isFetchingNextPage}
+            onLoadMore={() => void fetchNextPage()}
+          />
+        </div>
+      }
+    />
   );
 }
 
@@ -45,18 +67,18 @@ function PopularSection({
 }) {
   return (
     <section className="space-y-4">
-      <div className="flex items-center gap-3">
+      <div className="flex items-end justify-between gap-4">
         <div>
-          <p className="text-xs font-semibold tracking-[0.22em] text-brand">HOT TOPICS</p>
-          <h2 className="mt-1 text-[20px] font-semibold tracking-[-0.02em] text-neutral-950">인기 게시물</h2>
+          <p className="text-xs font-semibold tracking-[0.24em] text-brand">POPULAR PICKS</p>
+          <h2 className="mt-2 text-[24px] font-semibold tracking-[-0.03em] text-neutral-950">
+            {COMMUNITY_COPY.popularTitle}
+          </h2>
+          <p className="mt-1 text-sm text-neutral-500">{COMMUNITY_COPY.popularDescription}</p>
         </div>
-        <span className="rounded-full bg-brand/10 px-3 py-1 text-xs font-semibold tracking-[0.14em] text-brand">
-          TOP 3
-        </span>
       </div>
 
       {isLoading ? (
-        <div className="grid gap-4 sm:grid-cols-3">
+        <div className="grid gap-4 lg:grid-cols-3">
           {Array.from({ length: 3 }).map((_, i) => (
             <PopularCardSkeleton key={i} />
           ))}
@@ -66,7 +88,7 @@ function PopularSection({
       ) : boards.length === 0 ? (
         <EmptyPopularState />
       ) : (
-        <div className="grid gap-4 sm:grid-cols-3">
+        <div className="grid gap-4 lg:grid-cols-3">
           {boards.map((board, index) => (
             <PopularCard key={board.boardId} board={board} rank={index + 1} />
           ))}
@@ -80,46 +102,46 @@ function PopularCard({ board, rank }: { board: BoardListItem; rank: number }) {
   const rankColors: Record<number, string> = {
     1: 'bg-amber-400 text-white',
     2: 'bg-neutral-400 text-white',
-    3: 'bg-amber-700/70 text-white',
+    3: 'bg-amber-700/80 text-white',
   };
   const rankColor = rankColors[rank] ?? 'bg-neutral-300 text-white';
 
   return (
     <Link to={`/community/${board.boardId}`} className="group block">
-      <article className="overflow-hidden rounded-[20px] border border-neutral-200 bg-white shadow-sm transition-shadow hover:shadow-md">
-        <div className="relative aspect-4/3 overflow-hidden bg-neutral-100">
+      <article className="overflow-hidden rounded-[24px] border border-neutral-200/80 bg-white shadow-[0_18px_42px_rgba(15,23,42,0.06)] transition duration-200 hover:-translate-y-1 hover:shadow-[0_22px_56px_rgba(15,23,42,0.12)]">
+        <div className="relative aspect-[4/3] overflow-hidden bg-neutral-100">
           {board.thumbnailImageUrl ? (
             <img
               src={board.thumbnailImageUrl}
               alt={board.boardTitle}
-              className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.03]"
+              className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.04]"
             />
           ) : (
-            <div className="flex h-full w-full items-center justify-center bg-gradient-to-br from-brand/[0.06] via-neutral-100 to-neutral-200">
+            <div className="flex h-full w-full items-center justify-center bg-linear-to-br from-brand/[0.08] via-[#fff5ea] to-neutral-100">
               <ImagePlaceholderIcon className="h-10 w-10 text-neutral-300" />
             </div>
           )}
           <span
-            className={`absolute left-3 top-3 flex h-7 w-7 items-center justify-center rounded-full text-xs font-bold shadow-sm ${rankColor}`}
+            className={`absolute left-4 top-4 flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold shadow-sm ${rankColor}`}
           >
             {rank}
           </span>
         </div>
 
-        <div className="space-y-2 px-3.5 py-3.5">
-          <p className="line-clamp-2 text-sm font-semibold leading-snug text-neutral-900">{board.boardTitle}</p>
+        <div className="space-y-2.5 px-4 py-4">
+          <p className="line-clamp-2 text-base font-semibold leading-snug text-neutral-900">{board.boardTitle}</p>
           {board.boardContentPreview ? (
-            <p className="line-clamp-1 text-xs text-neutral-500">{board.boardContentPreview}</p>
+            <p className="line-clamp-2 text-sm leading-6 text-neutral-500">{board.boardContentPreview}</p>
           ) : null}
-          <div className="flex items-center justify-between gap-2 pt-0.5">
-            <span className="truncate text-xs text-neutral-400">{board.nickname}</span>
-            <div className="flex shrink-0 items-center gap-3 text-xs text-neutral-500">
+          <div className="flex items-center justify-between gap-3 pt-1">
+            <span className="truncate text-sm text-neutral-400">{board.nickname}</span>
+            <div className="flex shrink-0 items-center gap-3 text-sm text-neutral-500">
               <span className="inline-flex items-center gap-1">
-                <HeartIcon className="h-3.5 w-3.5 text-[#d65d4b]" />
+                <HeartIcon className="h-4 w-4 text-[#d65d4b]" />
                 {board.likeCount}
               </span>
               <span className="inline-flex items-center gap-1">
-                <CommentIcon className="h-3.5 w-3.5 text-neutral-400" />
+                <CommentIcon className="h-4 w-4 text-neutral-400" />
                 {board.commentCount}
               </span>
             </div>
@@ -147,21 +169,16 @@ function RecentSection({
 }) {
   return (
     <section className="space-y-4">
-      <div className="flex items-center justify-between gap-4">
-        <div>
-          <p className="text-xs font-semibold tracking-[0.22em] text-neutral-400">BOARD</p>
-          <h2 className="mt-1 text-[20px] font-semibold tracking-[-0.02em] text-neutral-950">최근 게시물</h2>
-        </div>
-        <Link
-          to="/community/new"
-          className="shrink-0 rounded-xl bg-brand px-4 py-2 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90"
-        >
-          글쓰기
-        </Link>
+      <div>
+        <p className="text-xs font-semibold tracking-[0.24em] text-neutral-400">COMMUNITY BOARD</p>
+        <h2 className="mt-2 text-[24px] font-semibold tracking-[-0.03em] text-neutral-950">
+          {COMMUNITY_COPY.recentTitle}
+        </h2>
+        <p className="mt-1 text-sm text-neutral-500">{COMMUNITY_COPY.recentDescription}</p>
       </div>
 
       {isLoading ? (
-        <div className="grid gap-4 grid-cols-2 xl:grid-cols-4">
+        <div className="grid grid-cols-2 gap-4 xl:grid-cols-4">
           {Array.from({ length: 8 }).map((_, i) => (
             <BoardCardSkeleton key={i} />
           ))}
@@ -172,7 +189,7 @@ function RecentSection({
         <EmptyRecentState />
       ) : (
         <div className="space-y-6">
-          <div className="grid gap-4 grid-cols-2 xl:grid-cols-4">
+          <div className="grid grid-cols-2 gap-4 xl:grid-cols-4">
             {boards.map((board) => (
               <CommunityFeedCard
                 key={board.boardId}
@@ -189,19 +206,19 @@ function RecentSection({
             ))}
           </div>
 
-          {hasNextPage && (
+          {hasNextPage ? (
             <div className="flex justify-center pt-2">
               <button
                 type="button"
                 onClick={onLoadMore}
                 disabled={isFetchingNextPage}
-                className="inline-flex items-center gap-2 rounded-xl border border-neutral-200 bg-white px-6 py-2.5 text-sm font-medium text-neutral-600 transition-colors hover:border-neutral-300 hover:bg-neutral-50 disabled:opacity-50"
+                className="inline-flex items-center gap-2 rounded-2xl border border-neutral-200 bg-white px-6 py-3 text-sm font-medium text-neutral-700 transition-colors hover:border-neutral-300 hover:bg-neutral-50 disabled:opacity-50"
               >
                 {isFetchingNextPage ? <LoadingSpinner size="sm" /> : null}
-                {isFetchingNextPage ? '불러오는 중...' : '더 보기'}
+                {isFetchingNextPage ? COMMUNITY_COPY.loadingMore : COMMUNITY_COPY.loadMore}
               </button>
             </div>
-          )}
+          ) : null}
         </div>
       )}
     </section>
@@ -210,31 +227,31 @@ function RecentSection({
 
 function ErrorState() {
   return (
-    <div className="flex flex-col items-center justify-center rounded-[20px] border border-neutral-200 bg-white px-6 py-12 text-center shadow-sm">
-      <p className="text-sm font-medium text-neutral-700">게시글을 불러오지 못했어요.</p>
-      <p className="mt-1.5 text-sm text-neutral-400">잠시 후 다시 시도해주세요.</p>
+    <div className="flex flex-col items-center justify-center rounded-[24px] border border-neutral-200 bg-white px-6 py-14 text-center shadow-[0_18px_42px_rgba(15,23,42,0.05)]">
+      <p className="text-sm font-semibold text-neutral-800">{COMMUNITY_COPY.loadErrorTitle}</p>
+      <p className="mt-1.5 text-sm text-neutral-500">{COMMUNITY_COPY.loadErrorDescription}</p>
     </div>
   );
 }
 
 function EmptyPopularState() {
   return (
-    <div className="flex items-center justify-center rounded-[20px] border border-dashed border-neutral-200 bg-white px-6 py-10 text-center">
-      <p className="text-sm text-neutral-400">아직 게시글이 없어요.</p>
+    <div className="flex items-center justify-center rounded-[24px] border border-dashed border-neutral-200 bg-white px-6 py-12 text-center">
+      <p className="text-sm text-neutral-500">{COMMUNITY_COPY.emptyPopular}</p>
     </div>
   );
 }
 
 function EmptyRecentState() {
   return (
-    <div className="flex flex-col items-center justify-center rounded-[20px] border border-neutral-200 bg-white px-6 py-14 text-center shadow-sm">
-      <p className="text-sm font-medium text-neutral-700">아직 게시글이 없어요.</p>
-      <p className="mt-1.5 text-sm text-neutral-400">첫 번째 이야기를 들려주세요!</p>
+    <div className="flex flex-col items-center justify-center rounded-[24px] border border-neutral-200 bg-white px-6 py-16 text-center shadow-[0_18px_42px_rgba(15,23,42,0.05)]">
+      <p className="text-sm font-semibold text-neutral-800">{COMMUNITY_COPY.emptyRecentTitle}</p>
+      <p className="mt-1.5 text-sm text-neutral-500">{COMMUNITY_COPY.emptyRecentDescription}</p>
       <Link
         to="/community/new"
-        className="mt-5 inline-flex items-center justify-center rounded-xl bg-brand px-5 py-2.5 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90"
+        className="mt-5 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"
       >
-        글쓰기
+        {COMMUNITY_COPY.writePost}
       </Link>
     </div>
   );
@@ -242,11 +259,12 @@ function EmptyRecentState() {
 
 function PopularCardSkeleton() {
   return (
-    <div className="overflow-hidden rounded-[20px] border border-neutral-200 bg-white shadow-sm">
-      <div className="aspect-4/3 animate-pulse bg-neutral-100" />
-      <div className="space-y-2 px-3.5 py-3.5">
+    <div className="overflow-hidden rounded-[24px] border border-neutral-200 bg-white shadow-[0_18px_42px_rgba(15,23,42,0.05)]">
+      <div className="aspect-[4/3] animate-pulse bg-neutral-100" />
+      <div className="space-y-2.5 px-4 py-4">
         <div className="h-4 w-3/4 animate-pulse rounded-md bg-neutral-100" />
         <div className="h-3 w-full animate-pulse rounded-md bg-neutral-100" />
+        <div className="h-3 w-2/3 animate-pulse rounded-md bg-neutral-100" />
         <div className="flex justify-between pt-1">
           <div className="h-3 w-16 animate-pulse rounded-md bg-neutral-100" />
           <div className="h-3 w-20 animate-pulse rounded-md bg-neutral-100" />
@@ -258,11 +276,12 @@ function PopularCardSkeleton() {
 
 function BoardCardSkeleton() {
   return (
-    <div className="overflow-hidden rounded-[20px] border border-neutral-200 bg-white shadow-sm">
-      <div className="aspect-4/3 animate-pulse bg-neutral-100" />
-      <div className="space-y-2 px-3.5 py-3.5">
+    <div className="overflow-hidden rounded-[24px] border border-neutral-200 bg-white shadow-[0_18px_42px_rgba(15,23,42,0.05)]">
+      <div className="aspect-[4/3] animate-pulse bg-neutral-100" />
+      <div className="space-y-2.5 px-4 py-4">
         <div className="h-4 w-3/4 animate-pulse rounded-md bg-neutral-100" />
         <div className="h-3 w-full animate-pulse rounded-md bg-neutral-100" />
+        <div className="h-3 w-2/3 animate-pulse rounded-md bg-neutral-100" />
         <div className="flex justify-between pt-1">
           <div className="h-3 w-16 animate-pulse rounded-md bg-neutral-100" />
           <div className="h-3 w-20 animate-pulse rounded-md bg-neutral-100" />

From 520bdd8c9eb2ccc2bbad6c1b5f7cdae3a05a7167 Mon Sep 17 00:00:00 2001
From: sooloin <csb7543@naver.com>
Date: Fri, 12 Jun 2026 21:23:32 +0900
Subject: [PATCH 08/13] =?UTF-8?q?:hammer:=20Refactor:=20=EC=BB=A4=EB=AE=A4?=
 =?UTF-8?q?=EB=8B=88=ED=8B=B0=20UI=EB=A5=BC=20=EC=9E=91=EC=84=B1=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=ED=86=A4=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 커뮤니티 공통 레이아웃을 작성 페이지 스타일로 재정리
- 홈/내 활동/상세 화면을 흰색 카드 중심 구조로 통일
- 게시글 상세를 시안 기반 본문/댓글/입력 흐름으로 재구성
- 작성/수정 화면 한글 문구 및 상태 안내 정비

`#53`
---
 .../community/ui/BoardDetailContent.tsx       | 121 +++++++++++-------
 src/features/community/ui/BoardEditorForm.tsx |  29 +++--
 src/features/community/ui/CommunityLayout.tsx |  22 ++--
 .../community/ui/CommunityProfileCard.tsx     |  36 +++---
 .../community/ui/CommunitySidebarPanel.tsx    |   2 +-
 .../community/ui/DeleteBoardDialog.tsx        |  14 +-
 src/pages/community/BoardCreatePage.tsx       |   8 +-
 src/pages/community/BoardDetailPage.tsx       |  71 ++++++----
 src/pages/community/BoardEditPage.tsx         |  18 +--
 .../community/CommunityMyActivityPage.tsx     |  36 ++----
 src/pages/community/CommunityPage.tsx         |  36 +++---
 11 files changed, 222 insertions(+), 171 deletions(-)

diff --git a/src/features/community/ui/BoardDetailContent.tsx b/src/features/community/ui/BoardDetailContent.tsx
index e0be9c6..df48da1 100644
--- a/src/features/community/ui/BoardDetailContent.tsx
+++ b/src/features/community/ui/BoardDetailContent.tsx
@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 import type { BoardDetailResponse } from '../model/types';
 
@@ -8,6 +8,33 @@ interface BoardDetailContentProps {
   onDelete: () => void;
 }
 
+const DETAIL_COPY = {
+  authorFallback: '작성자',
+  report: '신고',
+  edit: '수정',
+  delete: '삭제',
+  commentsTitle: '댓글',
+  commentsDescription: '댓글 API 연동 전이라 형식 목업을 먼저 맞춰두었어요.',
+  total: '총',
+  placeholder: '댓글을 입력해주세요',
+  placeholderAria: '댓글 등록 예정 버튼',
+};
+
+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) {
   const date = new Date(value);
 
@@ -26,17 +53,21 @@ function formatDateTime(value: string) {
 
 export function BoardDetailContent({ board, canManage, onDelete }: BoardDetailContentProps) {
   const likeCount = Math.max(12, Math.round(board.viewCount * 1.7));
-  const commentCount = Math.max(2, Math.round(board.viewCount / 3));
+  const commentCount = Math.max(MOCK_COMMENTS.length, Math.round(board.viewCount / 3));
+  const authorName = board.nickname.trim() || DETAIL_COPY.authorFallback;
+  const primaryImage = board.imageFileUrls[0] ?? null;
 
   return (
     <article className="space-y-6">
-      <section className="overflow-hidden rounded-[24px] border border-neutral-200 bg-white shadow-sm">
+      <section className="overflow-hidden rounded-[24px] border border-neutral-300 bg-white shadow-sm">
         <div className="px-6 py-6 sm:px-8">
           <div className="flex items-start justify-between gap-5">
             <div className="flex items-start gap-4">
-              <div className="h-14 w-14 shrink-0 overflow-hidden rounded-full border border-neutral-200 bg-linear-to-br from-brand/[0.16] via-[#f6e1d0] to-white" />
+              <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-[#f7e5bf] text-lg font-semibold text-neutral-700">
+                {authorName.slice(0, 1)}
+              </div>
               <div>
-                <p className="text-[22px] font-semibold tracking-[-0.02em] text-neutral-950">{board.nickname}</p>
+                <p className="text-[22px] font-semibold tracking-[-0.02em] text-neutral-950">{authorName}</p>
                 <div className="mt-1 flex flex-wrap items-center gap-3 text-sm text-neutral-400">
                   <span>{formatDateTime(board.boardCreatedAt)}</span>
                   <span className="inline-flex items-center gap-1">
@@ -47,31 +78,33 @@ export function BoardDetailContent({ board, canManage, onDelete }: BoardDetailCo
               </div>
             </div>
 
-            {canManage ? (
-              <div className="flex items-center gap-4 text-sm text-neutral-400">
-                <button type="button">Report</button>
-                <Link to={`/community/${board.boardId}/edit`}>Edit</Link>
-                <button type="button" onClick={onDelete}>
-                  Delete
-                </button>
-              </div>
-            ) : null}
+            <div className="flex items-center gap-4 text-sm text-neutral-400">
+              {!canManage ? <button type="button">{DETAIL_COPY.report}</button> : null}
+              {canManage ? (
+                <>
+                  <Link to={`/community/${board.boardId}/edit`}>{DETAIL_COPY.edit}</Link>
+                  <button type="button" onClick={onDelete}>
+                    {DETAIL_COPY.delete}
+                  </button>
+                </>
+              ) : null}
+            </div>
           </div>
 
           <h1 className="mt-8 text-[26px] font-semibold tracking-[-0.03em] text-neutral-950 sm:text-[34px]">
             {board.boardTitle}
           </h1>
 
-          <div className="mt-6 grid gap-6 lg:grid-cols-[156px_minmax(0,1fr)] lg:items-start">
+          <div className="mt-6 grid gap-6 lg:grid-cols-[180px_minmax(0,1fr)] lg:items-start">
             <div>
-              {board.imageFileUrls[0] ? (
+              {primaryImage ? (
                 <img
-                  src={board.imageFileUrls[0]}
+                  src={primaryImage}
                   alt={board.boardTitle}
                   className="aspect-square w-full rounded-[20px] object-cover"
                 />
               ) : (
-                <div className="aspect-square w-full rounded-[20px] bg-linear-to-br from-neutral-200 via-neutral-100 to-neutral-200" />
+                <div className="aspect-square w-full rounded-[20px] bg-neutral-100" />
               )}
             </div>
 
@@ -89,32 +122,28 @@ export function BoardDetailContent({ board, canManage, onDelete }: BoardDetailCo
         </div>
       </section>
 
-      <section className="overflow-hidden rounded-[24px] border border-neutral-200 bg-white shadow-sm">
-        <div className="border-b border-neutral-100 px-6 py-5 sm:px-8">
+      <section className="overflow-hidden rounded-[24px] border border-neutral-300 bg-white shadow-sm">
+        <div className="border-b border-neutral-200 px-6 py-5 sm:px-8">
           <div className="flex items-center justify-between gap-4">
             <div>
-              <h2 className="text-[18px] font-medium text-neutral-950">Comments</h2>
-              <p className="mt-1 text-sm text-neutral-500">
-                Comment layout is prepared first before the API is connected.
-              </p>
+              <h2 className="text-[18px] font-medium text-neutral-950">{DETAIL_COPY.commentsTitle}</h2>
+              <p className="mt-1 text-sm text-neutral-500">{DETAIL_COPY.commentsDescription}</p>
             </div>
             <span className="rounded-full bg-neutral-100 px-3 py-1 text-xs font-medium text-neutral-600">
-              Total {commentCount}
+              {DETAIL_COPY.total} {commentCount}
             </span>
           </div>
         </div>
 
         <div className="space-y-0 px-6 py-4 sm:px-8">
-          <CommentRow
-            nickname="Baeyong"
-            dateTime="2025-10-14 11:25:00"
-            content="Lovely post. Thanks for sharing this warm tip with everyone :D"
-          />
-          <CommentRow
-            nickname="Baeyong"
-            dateTime="2025-10-14 11:25:00"
-            content="Lovely post. Thanks for sharing this warm tip with everyone :D"
-          />
+          {MOCK_COMMENTS.map((comment) => (
+            <CommentRow
+              key={comment.id}
+              nickname={comment.nickname}
+              dateTime={comment.dateTime}
+              content={comment.content}
+            />
+          ))}
           <div className="flex items-center justify-center gap-2 px-2 py-4 text-sm text-neutral-500">
             <span className="text-brand">&lt;</span>
             <span>1, 2, 3</span>
@@ -123,16 +152,16 @@ export function BoardDetailContent({ board, canManage, onDelete }: BoardDetailCo
         </div>
       </section>
 
-      <section className="overflow-hidden rounded-[24px] border border-neutral-200 bg-white shadow-sm">
+      <section className="overflow-hidden rounded-[24px] border border-neutral-300 bg-white shadow-sm">
         <div className="flex items-center gap-4 px-6 py-4 sm:px-8">
-          <div className="h-10 w-10 shrink-0 overflow-hidden rounded-full border border-neutral-200 bg-linear-to-br from-brand/[0.16] via-[#f6e1d0] to-white" />
-          <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">Write a comment</span>
+          <div className="h-10 w-10 shrink-0 overflow-hidden rounded-full bg-neutral-200" />
+          <div className="flex min-w-0 flex-1 items-center rounded-full bg-neutral-100 px-4 py-3">
+            <span className="truncate text-sm text-neutral-500">{DETAIL_COPY.placeholder}</span>
           </div>
           <button
             type="button"
-            className="h-12 w-12 shrink-0 rounded-full bg-[#c97a72] transition-opacity hover:opacity-90"
-            aria-label="Comment action placeholder"
+            className="h-12 w-12 shrink-0 rounded-full bg-[#bf6e67] transition-opacity hover:opacity-90"
+            aria-label={DETAIL_COPY.placeholderAria}
           />
         </div>
       </section>
@@ -158,16 +187,18 @@ function CommentRow({ nickname, dateTime, content }: { nickname: string; dateTim
     <div className="border-b border-neutral-200 py-5 last:border-b-0">
       <div className="flex items-start justify-between gap-4">
         <div className="flex items-start gap-3">
-          <div className="h-10 w-10 shrink-0 overflow-hidden rounded-full border border-neutral-200 bg-linear-to-br from-brand/[0.16] via-[#f6e1d0] to-white" />
+          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#f7e5bf] text-sm font-semibold text-neutral-700">
+            {nickname.slice(0, 1)}
+          </div>
           <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>
         <div className="flex items-center gap-4 text-sm text-neutral-400">
-          <button type="button">Report</button>
-          <button type="button">Edit</button>
-          <button type="button">Delete</button>
+          <button type="button">{DETAIL_COPY.report}</button>
+          <button type="button">{DETAIL_COPY.edit}</button>
+          <button type="button">{DETAIL_COPY.delete}</button>
         </div>
       </div>
       <p className="mt-4 text-sm leading-7 text-neutral-700">{content}</p>
diff --git a/src/features/community/ui/BoardEditorForm.tsx b/src/features/community/ui/BoardEditorForm.tsx
index 250a324..4feadb8 100644
--- a/src/features/community/ui/BoardEditorForm.tsx
+++ b/src/features/community/ui/BoardEditorForm.tsx
@@ -1,4 +1,4 @@
-import type { ChangeEventHandler, FormEventHandler } from 'react';
+import type { ChangeEventHandler, FormEventHandler } from 'react';
 import { Link } from 'react-router-dom';
 
 import { IMAGE_UPLOAD_POLICY_DESCRIPTION } from '@/shared/lib/files/imageUploadPolicy';
@@ -46,13 +46,14 @@ export function BoardEditorForm({
   const eyebrow = isEditMode ? 'BOARD EDIT' : 'BOARD WRITE';
   const heading = isEditMode ? '게시글 수정' : '게시글 작성';
   const description = isEditMode
-    ? '제목과 내용을 다듬고, 필요한 경우 이미지를 다시 구성해 게시글을 업데이트하세요.'
+    ? '제목과 내용을 다듬고, 필요한 경우 이미지도 함께 수정해보세요.'
     : '반려생활 이야기를 자유롭게 기록해보세요. 임시 저장 후 나중에 이어서 작성할 수도 있어요.';
   const submitLabel = isEditMode ? '수정 완료' : '게시하기';
   const pendingLabel = isEditMode ? '수정 중...' : '게시 중...';
   const helperMessage = storedDraftSessionKey
-    ? '임시 저장된 작성본이 이 브라우저에 연결되어 있어요.'
+    ? '임시 저장한 작성 본이 이 브라우저에 연결되어 있어요.'
     : '작성 중인 내용은 임시 저장 후 다시 이어서 편집할 수 있어요.';
+  const statusBadge = storedDraftSessionKey ? '임시 저장본 연결됨' : '새 게시글';
 
   return (
     <form className="space-y-6" onSubmit={onSubmit}>
@@ -66,11 +67,11 @@ export function BoardEditorForm({
         <div className="border-b border-neutral-100 px-6 py-5 sm:px-8">
           <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
             <div>
-              <h2 className="text-[18px] font-medium text-neutral-950">작성 상태</h2>
+              <h2 className="text-[18px] font-medium text-neutral-950">{'작성 상태'}</h2>
               <p className="mt-1 text-sm text-neutral-500">{helperMessage}</p>
             </div>
             <span className="inline-flex items-center rounded-full bg-brand/8 px-3 py-1 text-xs font-medium text-brand">
-              {storedDraftSessionKey ? '임시 저장본 연결됨' : '새 게시글'}
+              {statusBadge}
             </span>
           </div>
         </div>
@@ -95,9 +96,9 @@ export function BoardEditorForm({
           </div>
 
           <div className="rounded-[20px] border border-neutral-200 bg-neutral-50/70 px-5 py-5">
-            <h3 className="text-[16px] font-medium text-neutral-950">임시 저장</h3>
+            <h3 className="text-[16px] font-medium text-neutral-950">{'임시 저장'}</h3>
             <p className="mt-1 text-sm leading-6 text-neutral-500">
-              지금 상태를 저장하고 나중에 다시 이어서 쓸 수 있어요.
+              {'지금 상태를 저장하고 나중에 다시 이어서 쓸 수 있어요.'}
             </p>
 
             <button
@@ -111,7 +112,7 @@ export function BoardEditorForm({
 
             {tempSaveError ? <p className="mt-3 text-sm text-red-500">{tempSaveError}</p> : null}
             {!tempSaveError && storedDraftSessionKey ? (
-              <p className="mt-3 text-sm text-brand">임시 저장된 게시글이 준비되어 있어요.</p>
+              <p className="mt-3 text-sm text-brand">{'임시 저장한 게시글을 다시 불러올 수 있어요.'}</p>
             ) : null}
           </div>
         </div>
@@ -119,7 +120,7 @@ export function BoardEditorForm({
 
       <section className="overflow-hidden rounded-[24px] border border-neutral-200 bg-white shadow-sm">
         <div className="border-b border-neutral-100 px-6 py-5 sm:px-8">
-          <h2 className="text-[18px] font-medium text-neutral-950">이미지 첨부</h2>
+          <h2 className="text-[18px] font-medium text-neutral-950">{'이미지 첨부'}</h2>
           <p className="mt-1 text-sm text-neutral-500">{IMAGE_UPLOAD_POLICY_DESCRIPTION}</p>
         </div>
 
@@ -151,13 +152,13 @@ export function BoardEditorForm({
                 >
                   <img src={imageUrl} alt={`첨부 이미지 ${index + 1}`} className="aspect-[4/3] w-full object-cover" />
                   <div className="flex items-center justify-between gap-3 px-4 py-3">
-                    <span className="text-sm text-neutral-500">이미지 {index + 1}</span>
+                    <span className="text-sm text-neutral-500">{`이미지 ${index + 1}`}</span>
                     <button
                       type="button"
                       onClick={() => onRemoveImage(index)}
                       className="text-sm font-medium text-red-500 transition-opacity hover:opacity-80"
                     >
-                      삭제
+                      {'삭제'}
                     </button>
                   </div>
                 </article>
@@ -165,7 +166,7 @@ export function BoardEditorForm({
             </div>
           ) : (
             <div className="rounded-[20px] border border-dashed border-neutral-200 bg-neutral-50 px-5 py-8 text-center text-sm text-neutral-500">
-              아직 첨부된 이미지가 없어요.
+              {'아직 첨부된 이미지가 없어요.'}
             </div>
           )}
         </div>
@@ -173,7 +174,7 @@ export function BoardEditorForm({
 
       <div className="flex items-start justify-between gap-4">
         <p className="text-sm text-neutral-500">
-          <span className="font-semibold text-brand">*</span> 필수 입력 항목입니다.
+          <span className="font-semibold text-brand">*</span> {'필수 입력 항목입니다.'}
         </p>
         {submitError ? <p className="max-w-md text-right text-sm text-red-500">{submitError}</p> : null}
       </div>
@@ -183,7 +184,7 @@ export function BoardEditorForm({
           to={cancelTo}
           className="inline-flex min-w-28 items-center justify-center rounded-xl border border-neutral-200 bg-white px-5 py-3 text-sm font-medium text-neutral-700 transition-colors hover:border-neutral-300 hover:bg-neutral-50"
         >
-          취소
+          {'취소'}
         </Link>
         <button
           type="submit"
diff --git a/src/features/community/ui/CommunityLayout.tsx b/src/features/community/ui/CommunityLayout.tsx
index edb61aa..f06ef39 100644
--- a/src/features/community/ui/CommunityLayout.tsx
+++ b/src/features/community/ui/CommunityLayout.tsx
@@ -1,19 +1,25 @@
 import type { ReactNode } from 'react';
 
 interface CommunityLayoutProps {
-  sidebar: ReactNode;
+  eyebrow: string;
+  title: string;
+  description: string;
+  sidebar?: ReactNode;
   content: ReactNode;
 }
 
-export function CommunityLayout({ sidebar, content }: CommunityLayoutProps) {
+export function CommunityLayout({ eyebrow, title, description, sidebar, content }: CommunityLayoutProps) {
   return (
-    <div className="rounded-[30px] border border-neutral-200/80 bg-linear-to-br from-[#fffaf6] via-white to-brand/[0.05] p-3 shadow-[0_24px_70px_rgba(15,23,42,0.06)] sm:p-4">
-      <div className="grid gap-4 xl:grid-cols-[280px_minmax(0,1fr)]">
-        <aside className="xl:sticky xl:top-6 xl:self-start">{sidebar}</aside>
+    <div className="mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
+      <div>
+        <p className="text-xs font-semibold tracking-[0.24em] text-brand">{eyebrow}</p>
+        <h1 className="mt-2 text-[18px] font-medium text-neutral-950 sm:text-[20px]">{title}</h1>
+        <p className="mt-3 max-w-3xl text-sm leading-7 text-neutral-600">{description}</p>
+      </div>
 
-        <section className="min-w-0 rounded-[26px] border border-white/80 bg-neutral-50/90 p-5 shadow-[inset_0_1px_0_rgba(255,255,255,0.8)] sm:p-6 lg:p-8">
-          {content}
-        </section>
+      <div className="mt-10 grid gap-6 lg:grid-cols-[minmax(0,1fr)_320px]">
+        <div className="min-w-0 space-y-6">{content}</div>
+        {sidebar ? <aside className="space-y-6">{sidebar}</aside> : null}
       </div>
     </div>
   );
diff --git a/src/features/community/ui/CommunityProfileCard.tsx b/src/features/community/ui/CommunityProfileCard.tsx
index 3bdcf2d..92ce984 100644
--- a/src/features/community/ui/CommunityProfileCard.tsx
+++ b/src/features/community/ui/CommunityProfileCard.tsx
@@ -1,4 +1,4 @@
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 import profileDefaultIllustration from '@/features/auth/assets/profile-default.svg';
 
@@ -7,15 +7,20 @@ interface CommunityProfileCardProps {
   nickname: string | null;
 }
 
+const PROFILE_COPY = {
+  fallbackName: '도도 친구',
+  description: '오늘 남기고 싶은 반려생활 이야기를 글로 기록해보세요.',
+  write: '글쓰기',
+  myActivity: '내 활동',
+};
+
 export function CommunityProfileCard({ profileUrl, nickname }: CommunityProfileCardProps) {
-  const resolvedName = nickname?.trim() || '\uB3C4\uB3C4 \uCE5C\uAD6C';
-  const description =
-    '\uC624\uB298\uC758 \uBC18\uB824\uC0DD\uD65C\uC744 \uAE30\uB85D\uD558\uACE0 \uC11C\uB85C\uC758 \uC77C\uC0C1\uC744 \uB098\uB220\uBCF4\uC138\uC694.';
+  const resolvedName = nickname?.trim() || PROFILE_COPY.fallbackName;
 
   return (
-    <section className="overflow-hidden rounded-[22px] bg-white/90">
-      <div className="rounded-[20px] bg-linear-to-br from-brand/[0.16] via-[#fde7d1] to-white px-5 py-6">
-        <div className="mx-auto h-24 w-24 overflow-hidden rounded-full border-4 border-white bg-neutral-100 shadow-[0_10px_30px_rgba(15,23,42,0.14)]">
+    <section className="space-y-5">
+      <div className="flex items-center gap-4">
+        <div className="h-16 w-16 overflow-hidden rounded-full border border-neutral-200 bg-neutral-100">
           <img
             src={profileUrl?.trim() || profileDefaultIllustration}
             alt=""
@@ -25,25 +30,24 @@ export function CommunityProfileCard({ profileUrl, nickname }: CommunityProfileC
             }}
           />
         </div>
-
-        <div className="mt-4 text-center">
-          <p className="text-[21px] font-semibold tracking-[-0.03em] text-neutral-950">{resolvedName}</p>
-          <p className="mt-1 text-sm leading-6 text-neutral-500">{description}</p>
+        <div>
+          <p className="text-lg font-semibold text-neutral-950">{resolvedName}</p>
+          <p className="mt-1 text-sm leading-6 text-neutral-500">{PROFILE_COPY.description}</p>
         </div>
       </div>
 
-      <div className="grid gap-2.5 px-2 pb-2 pt-4">
+      <div className="grid gap-3">
         <Link
           to="/community/new"
-          className="inline-flex w-full items-center justify-center rounded-2xl bg-neutral-950 px-4 py-3 text-sm font-semibold text-white transition-transform duration-200 hover:-translate-y-0.5"
+          className="inline-flex w-full items-center justify-center rounded-xl bg-white px-4 py-3 text-sm font-semibold text-neutral-900 shadow-[inset_0_0_0_1px_rgba(229,229,229,1)] transition-colors hover:bg-neutral-50"
         >
-          {'\uAE00\uC4F0\uAE30'}
+          {PROFILE_COPY.write}
         </Link>
         <Link
           to="/community/my"
-          className="inline-flex w-full items-center justify-center rounded-2xl border border-neutral-200 bg-white px-4 py-3 text-sm font-medium text-neutral-700 transition-colors hover:border-brand/30 hover:bg-brand/[0.04]"
+          className="inline-flex w-full items-center justify-center rounded-xl bg-neutral-50 px-4 py-3 text-sm font-medium text-neutral-700 transition-colors hover:bg-neutral-100"
         >
-          {'\uB0B4 \uD65C\uB3D9'}
+          {PROFILE_COPY.myActivity}
         </Link>
       </div>
     </section>
diff --git a/src/features/community/ui/CommunitySidebarPanel.tsx b/src/features/community/ui/CommunitySidebarPanel.tsx
index fd87d91..fd78ef8 100644
--- a/src/features/community/ui/CommunitySidebarPanel.tsx
+++ b/src/features/community/ui/CommunitySidebarPanel.tsx
@@ -7,7 +7,7 @@ interface CommunitySidebarPanelProps {
 
 export function CommunitySidebarPanel({ profileUrl, nickname }: CommunitySidebarPanelProps) {
   return (
-    <div className="rounded-[26px] border border-white/80 bg-linear-to-b from-white via-[#fffaf5] to-[#fff3e8] p-4 shadow-[0_18px_44px_rgba(15,23,42,0.08)] sm:p-5">
+    <div className="rounded-[24px] border border-neutral-200 bg-white p-5 shadow-sm">
       <CommunityProfileCard profileUrl={profileUrl} nickname={nickname} />
     </div>
   );
diff --git a/src/features/community/ui/DeleteBoardDialog.tsx b/src/features/community/ui/DeleteBoardDialog.tsx
index cc89e25..80b4617 100644
--- a/src/features/community/ui/DeleteBoardDialog.tsx
+++ b/src/features/community/ui/DeleteBoardDialog.tsx
@@ -1,4 +1,4 @@
-import { Modal } from '@/shared/ui';
+import { Modal } from '@/shared/ui';
 
 interface DeleteBoardDialogProps {
   open: boolean;
@@ -10,12 +10,14 @@ interface DeleteBoardDialogProps {
 
 export function DeleteBoardDialog({ open, isPending, errorMessage, onClose, onConfirm }: DeleteBoardDialogProps) {
   return (
-    <Modal open={open} onClose={onClose} ariaLabel="Delete post confirmation">
+    <Modal open={open} onClose={onClose} ariaLabel="게시글 삭제 확인 대화상자">
       <div>
         <p className="text-xs font-semibold tracking-[0.24em] text-red-500">DELETE POST</p>
-        <h2 className="mt-3 text-[22px] font-semibold tracking-[-0.02em] text-neutral-950">Delete this post?</h2>
+        <h2 className="mt-3 text-[22px] font-semibold tracking-[-0.02em] text-neutral-950">
+          {'이 게시글을 삭제할까요?'}
+        </h2>
         <p className="mt-3 text-sm leading-7 text-neutral-600">
-          This action cannot be undone. Please confirm once more before removing the post.
+          {'삭제 후에는 다시 복구할 수 없어요. 정말 삭제할지 한 번 더 확인해주세요.'}
         </p>
 
         {errorMessage ? <p className="mt-4 text-sm text-red-500">{errorMessage}</p> : null}
@@ -27,7 +29,7 @@ export function DeleteBoardDialog({ open, isPending, errorMessage, onClose, onCo
             disabled={isPending}
             className="inline-flex items-center justify-center rounded-xl border border-neutral-200 bg-white px-5 py-3 text-sm font-medium text-neutral-700 transition-colors hover:border-neutral-300 hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-70"
           >
-            Cancel
+            {'취소'}
           </button>
           <button
             type="button"
@@ -35,7 +37,7 @@ export function DeleteBoardDialog({ open, isPending, errorMessage, onClose, onCo
             disabled={isPending}
             className="inline-flex items-center justify-center rounded-xl bg-red-500 px-5 py-3 text-sm font-medium text-white transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-70"
           >
-            {isPending ? 'Deleting...' : 'Delete'}
+            {isPending ? '삭제 중...' : '삭제하기'}
           </button>
         </div>
       </div>
diff --git a/src/pages/community/BoardCreatePage.tsx b/src/pages/community/BoardCreatePage.tsx
index 58e4ebc..255e975 100644
--- a/src/pages/community/BoardCreatePage.tsx
+++ b/src/pages/community/BoardCreatePage.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 
 import { BoardEditorForm, useBoardEditorForm } from '@/features/community';
 import { LoadingSpinner } from '@/shared/ui';
@@ -58,7 +58,7 @@ function LoadingState() {
   return (
     <div className="flex min-h-[360px] flex-col items-center justify-center rounded-[24px] border border-neutral-200 bg-white px-6 py-16 text-center shadow-sm">
       <LoadingSpinner size="lg" />
-      <p className="mt-4 text-sm text-neutral-500">임시 저장된 게시글을 확인하고 있어요.</p>
+      <p className="mt-4 text-sm text-neutral-500">{'임시 저장한 게시글을 확인하고 있어요.'}</p>
     </div>
   );
 }
@@ -84,14 +84,14 @@ function ErrorState({
           onClick={onRetry}
           className="inline-flex items-center justify-center rounded-xl bg-brand px-5 py-3 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90"
         >
-          다시 시도
+          {'다시 시도'}
         </button>
         <button
           type="button"
           onClick={onReset}
           className="inline-flex items-center justify-center rounded-xl border border-neutral-200 bg-white px-5 py-3 text-sm font-medium text-neutral-700 transition-colors hover:border-neutral-300 hover:bg-neutral-50"
         >
-          임시 저장본 초기화
+          {'임시 저장본 초기화'}
         </button>
       </div>
     </div>
diff --git a/src/pages/community/BoardDetailPage.tsx b/src/pages/community/BoardDetailPage.tsx
index ecabf10..8d059f7 100644
--- a/src/pages/community/BoardDetailPage.tsx
+++ b/src/pages/community/BoardDetailPage.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { useMemo, useState } from 'react';
 import { Link, useNavigate, useParams } from 'react-router-dom';
 
@@ -7,6 +7,7 @@ import {
   BOARD_DETAIL_STATUS_MESSAGES,
   BOARD_MUTATION_STATUS_MESSAGES,
   BoardDetailContent,
+  CommunityLayout,
   DeleteBoardDialog,
   useBoardDetail,
   useDeleteBoard,
@@ -14,6 +15,18 @@ import {
 import { getApiErrorMessage } from '@/shared/lib/api/errorMessage';
 import { LoadingSpinner } from '@/shared/ui';
 
+const DETAIL_PAGE_COPY = {
+  backToCommunity: '커뮤니티로 돌아가기',
+  invalidTitle: '올바르지 않은 게시글 경로예요.',
+  invalidDescription: '게시글 주소를 다시 확인한 뒤 재시도해주세요.',
+  goCommunity: '커뮤니티 홈 이동',
+  loading: '게시글을 불러오는 중...',
+  loadFailedTitle: '게시글을 불러오지 못했어요.',
+  loadFailedFallback: '게시글 조회에 실패했어요. 잠시 후 다시 시도해주세요.',
+  retry: '다시 시도',
+  deleteFailedFallback: '게시글을 삭제하지 못했어요. 잠시 후 다시 시도해주세요.',
+};
+
 function parseBoardId(value: string | undefined): number | null {
   if (!value) return null;
 
@@ -43,11 +56,7 @@ export function BoardDetailPage() {
       void navigate('/community');
     } catch (deleteActionError) {
       setDeleteError(
-        getApiErrorMessage(
-          deleteActionError,
-          'Failed to delete this post. Please try again.',
-          BOARD_MUTATION_STATUS_MESSAGES,
-        ),
+        getApiErrorMessage(deleteActionError, DETAIL_PAGE_COPY.deleteFailedFallback, BOARD_MUTATION_STATUS_MESSAGES),
       );
     }
   };
@@ -72,11 +81,7 @@ export function BoardDetailPage() {
     return (
       <PageShell>
         <ErrorState
-          description={getApiErrorMessage(
-            error,
-            'Failed to load the post. Please try again.',
-            BOARD_DETAIL_STATUS_MESSAGES,
-          )}
+          description={getApiErrorMessage(error, DETAIL_PAGE_COPY.loadFailedFallback, BOARD_DETAIL_STATUS_MESSAGES)}
           onRetry={() => void refetch()}
         />
       </PageShell>
@@ -85,16 +90,26 @@ export function BoardDetailPage() {
 
   return (
     <PageShell>
-      <div className="mb-5 flex items-center">
-        <Link
-          to="/community"
-          className="inline-flex items-center rounded-full border border-neutral-200 bg-white px-4 py-2 text-sm font-medium text-neutral-600 transition-colors hover:border-neutral-300 hover:bg-neutral-50"
-        >
-          Back to community
-        </Link>
-      </div>
+      <CommunityLayout
+        eyebrow="BOARD DETAIL"
+        title="게시글 상세"
+        description="작성 페이지의 담백한 톤을 유지하면서 글, 이미지, 댓글을 한 흐름으로 보여주는 상세 페이지예요."
+        content={
+          <div className="space-y-5">
+            <div className="flex items-center">
+              <Link
+                to="/community"
+                className="inline-flex items-center rounded-full border border-neutral-200 bg-white px-4 py-2 text-sm font-medium text-neutral-600 transition-colors hover:border-neutral-300 hover:bg-neutral-50"
+              >
+                {DETAIL_PAGE_COPY.backToCommunity}
+              </Link>
+            </div>
+
+            <BoardDetailContent board={board} canManage={canManage} onDelete={() => setDeleteDialogOpen(true)} />
+          </div>
+        }
+      />
 
-      <BoardDetailContent board={board} canManage={canManage} onDelete={() => setDeleteDialogOpen(true)} />
       <DeleteBoardDialog
         open={deleteDialogOpen}
         isPending={isDeleting}
@@ -111,19 +126,19 @@ export function BoardDetailPage() {
 }
 
 function PageShell({ children }: { children: ReactNode }) {
-  return <div className="mx-auto w-full max-w-6xl px-4 py-8 sm:px-6 lg:px-8">{children}</div>;
+  return <>{children}</>;
 }
 
 function InvalidBoardState() {
   return (
     <div className="rounded-[24px] border border-neutral-200 bg-white px-6 py-10 shadow-sm sm:px-8">
-      <h1 className="text-[20px] font-medium text-neutral-950">Invalid post path</h1>
-      <p className="mt-3 text-sm leading-7 text-neutral-600">Please check the post address and try again.</p>
+      <h1 className="text-[20px] font-medium text-neutral-950">{DETAIL_PAGE_COPY.invalidTitle}</h1>
+      <p className="mt-3 text-sm leading-7 text-neutral-600">{DETAIL_PAGE_COPY.invalidDescription}</p>
       <Link
         to="/community"
         className="mt-6 inline-flex items-center justify-center rounded-xl bg-brand px-5 py-3 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90"
       >
-        Go to community
+        {DETAIL_PAGE_COPY.goCommunity}
       </Link>
     </div>
   );
@@ -133,7 +148,7 @@ function LoadingState() {
   return (
     <div className="flex min-h-[360px] flex-col items-center justify-center rounded-[24px] border border-neutral-200 bg-white px-6 py-16 text-center shadow-sm">
       <LoadingSpinner size="lg" />
-      <p className="mt-4 text-sm text-neutral-500">Loading post...</p>
+      <p className="mt-4 text-sm text-neutral-500">{DETAIL_PAGE_COPY.loading}</p>
     </div>
   );
 }
@@ -141,7 +156,7 @@ function LoadingState() {
 function ErrorState({ description, onRetry }: { description: string; onRetry: () => void }) {
   return (
     <div className="rounded-[24px] border border-neutral-200 bg-white px-6 py-10 shadow-sm sm:px-8">
-      <h1 className="text-[20px] font-medium text-neutral-950">Could not load this post</h1>
+      <h1 className="text-[20px] font-medium text-neutral-950">{DETAIL_PAGE_COPY.loadFailedTitle}</h1>
       <p className="mt-3 max-w-xl text-sm leading-7 text-neutral-600">{description}</p>
       <div className="mt-6 flex flex-col gap-3 sm:flex-row">
         <button
@@ -149,13 +164,13 @@ function ErrorState({ description, onRetry }: { description: string; onRetry: ()
           onClick={onRetry}
           className="inline-flex items-center justify-center rounded-xl bg-brand px-5 py-3 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90"
         >
-          Retry
+          {DETAIL_PAGE_COPY.retry}
         </button>
         <Link
           to="/community"
           className="inline-flex items-center justify-center rounded-xl border border-neutral-200 bg-white px-5 py-3 text-sm font-medium text-neutral-700 transition-colors hover:border-neutral-300 hover:bg-neutral-50"
         >
-          Community home
+          {DETAIL_PAGE_COPY.goCommunity}
         </Link>
       </div>
     </div>
diff --git a/src/pages/community/BoardEditPage.tsx b/src/pages/community/BoardEditPage.tsx
index 73a5a80..699dae8 100644
--- a/src/pages/community/BoardEditPage.tsx
+++ b/src/pages/community/BoardEditPage.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { useMemo } from 'react';
 import { Link, useParams } from 'react-router-dom';
 
@@ -40,7 +40,7 @@ export function BoardEditPage() {
       <PageShell>
         <ErrorState
           boardId={boardId}
-          description={editor.initialLoadErrorMessage || '게시글 정보를 불러오지 못했습니다.'}
+          description={editor.initialLoadErrorMessage || '게시글 정보를 불러오지 못했어요.'}
           onRetry={() => void editor.retryInitialLoad()}
         />
       </PageShell>
@@ -78,13 +78,13 @@ function PageShell({ children }: { children: ReactNode }) {
 function InvalidBoardState() {
   return (
     <div className="rounded-[24px] border border-neutral-200 bg-white px-6 py-10 shadow-sm sm:px-8">
-      <h1 className="text-[20px] font-medium text-neutral-950">잘못된 게시글 경로예요.</h1>
-      <p className="mt-3 text-sm leading-7 text-neutral-600">수정할 게시글 정보를 다시 확인해주세요.</p>
+      <h1 className="text-[20px] font-medium text-neutral-950">{'잘못된 게시글 경로예요.'}</h1>
+      <p className="mt-3 text-sm leading-7 text-neutral-600">{'수정할 게시글 정보를 다시 확인해주세요.'}</p>
       <Link
         to="/community"
         className="mt-6 inline-flex items-center justify-center rounded-xl bg-brand px-5 py-3 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90"
       >
-        커뮤니티로 이동
+        {'커뮤니티로 이동'}
       </Link>
     </div>
   );
@@ -94,7 +94,7 @@ function LoadingState() {
   return (
     <div className="flex min-h-[360px] flex-col items-center justify-center rounded-[24px] border border-neutral-200 bg-white px-6 py-16 text-center shadow-sm">
       <LoadingSpinner size="lg" />
-      <p className="mt-4 text-sm text-neutral-500">게시글 정보를 불러오고 있어요.</p>
+      <p className="mt-4 text-sm text-neutral-500">{'게시글 정보를 불러오고 있어요.'}</p>
     </div>
   );
 }
@@ -102,7 +102,7 @@ function LoadingState() {
 function ErrorState({ boardId, description, onRetry }: { boardId: number; description: string; onRetry: () => void }) {
   return (
     <div className="rounded-[24px] border border-neutral-200 bg-white px-6 py-10 shadow-sm sm:px-8">
-      <h1 className="text-[20px] font-medium text-neutral-950">게시글 수정 준비에 실패했어요.</h1>
+      <h1 className="text-[20px] font-medium text-neutral-950">{'게시글 수정 준비에 실패했어요.'}</h1>
       <p className="mt-3 max-w-xl text-sm leading-7 text-neutral-600">{description}</p>
       <div className="mt-6 flex flex-col gap-3 sm:flex-row">
         <button
@@ -110,13 +110,13 @@ function ErrorState({ boardId, description, onRetry }: { boardId: number; descri
           onClick={onRetry}
           className="inline-flex items-center justify-center rounded-xl bg-brand px-5 py-3 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90"
         >
-          다시 시도
+          {'다시 시도'}
         </button>
         <Link
           to={`/community/${boardId}`}
           className="inline-flex items-center justify-center rounded-xl border border-neutral-200 bg-white px-5 py-3 text-sm font-medium text-neutral-700 transition-colors hover:border-neutral-300 hover:bg-neutral-50"
         >
-          상세로 돌아가기
+          {'상세로 돌아가기'}
         </Link>
       </div>
     </div>
diff --git a/src/pages/community/CommunityMyActivityPage.tsx b/src/pages/community/CommunityMyActivityPage.tsx
index 2705f16..7fb0540 100644
--- a/src/pages/community/CommunityMyActivityPage.tsx
+++ b/src/pages/community/CommunityMyActivityPage.tsx
@@ -1,4 +1,4 @@
-import type { ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
 
 import { useCurrentUser } from '@/features/auth';
@@ -7,19 +7,16 @@ import { CommunityLayout, CommunitySidebarPanel } from '@/features/community';
 type ActivityTab = 'posts' | 'comments';
 
 const ACTIVITY_COPY = {
-  heading: '\uB0B4 \uD65C\uB3D9',
-  description:
-    '\uB0B4\uAC00 \uB0A8\uAE34 \uAC8C\uC2DC\uAE00\uACFC \uB313\uAE00 \uD65C\uB3D9\uC744 \uD55C\uACF3\uC5D0\uC11C \uD655\uC778\uD574\uBCF4\uC138\uC694.',
-  myPosts: '\uB0B4 \uAC8C\uC2DC\uAE00',
-  myComments: '\uB0B4 \uB313\uAE00',
-  emptyPostsTitle: '\uC544\uC9C1 \uC791\uC131\uD55C \uAC8C\uC2DC\uAE00\uC774 \uC5C6\uC5B4\uC694.',
-  emptyPostsDescription:
-    '\uCCAB \uBC88\uC9F8 \uBC18\uB824\uC0DD\uD65C \uC774\uC57C\uAE30\uB97C \uCEE4\uBBA4\uB2C8\uD2F0\uC5D0 \uACF5\uC720\uD574\uBCF4\uC138\uC694.',
-  emptyCommentsTitle: '\uC544\uC9C1 \uC791\uC131\uD55C \uB313\uAE00\uC774 \uC5C6\uC5B4\uC694.',
-  emptyCommentsDescription:
-    '\uB2E4\uB978 \uCE5C\uAD6C\uB4E4\uC758 \uAC8C\uC2DC\uAE00\uC5D0 \uB313\uAE00\uC744 \uB0A8\uAE30\uBA70 \uC18C\uD1B5\uD574\uBCF4\uC138\uC694.',
-  writePost: '\uAE00\uC4F0\uAE30',
-  browseCommunity: '\uCEE4\uBBA4\uB2C8\uD2F0 \uB458\uB7EC\uBCF4\uAE30',
+  heading: '내 활동',
+  description: '내가 남긴 게시글과 댓글 활동을 한곳에서 확인해보세요.',
+  myPosts: '내 게시글',
+  myComments: '내 댓글',
+  emptyPostsTitle: '아직 작성한 게시글이 없어요.',
+  emptyPostsDescription: '첫 번째 반려생활 이야기를 커뮤니티에 공유해보세요.',
+  emptyCommentsTitle: '아직 작성한 댓글이 없어요.',
+  emptyCommentsDescription: '다른 친구들의 게시글에 댓글을 남기며 소통해보세요.',
+  writePost: '글쓰기',
+  browseCommunity: '커뮤니티 둘러보기',
 };
 
 function getTabFromSearch(value: string | null): ActivityTab {
@@ -34,17 +31,12 @@ export function CommunityMyActivityPage() {
 
   return (
     <CommunityLayout
+      eyebrow="MY COMMUNITY"
+      title={ACTIVITY_COPY.heading}
+      description={ACTIVITY_COPY.description}
       sidebar={<CommunitySidebarPanel profileUrl={profileUrl} nickname={nickname} />}
       content={
         <div className="space-y-6">
-          <div>
-            <p className="text-xs font-semibold tracking-[0.24em] text-brand">MY COMMUNITY</p>
-            <h1 className="mt-2 text-[26px] font-semibold tracking-[-0.03em] text-neutral-950">
-              {ACTIVITY_COPY.heading}
-            </h1>
-            <p className="mt-1 text-sm text-neutral-500">{ACTIVITY_COPY.description}</p>
-          </div>
-
           <div className="overflow-hidden rounded-[24px] border border-neutral-200/80 bg-white shadow-[0_18px_42px_rgba(15,23,42,0.06)]">
             <div className="flex border-b border-neutral-100 bg-neutral-50/70">
               <TabButton to="/community/my?tab=posts" isActive={activeTab === 'posts'}>
diff --git a/src/pages/community/CommunityPage.tsx b/src/pages/community/CommunityPage.tsx
index 52c3aa2..ba042fc 100644
--- a/src/pages/community/CommunityPage.tsx
+++ b/src/pages/community/CommunityPage.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 
 import { useCurrentUser } from '@/features/auth';
@@ -12,21 +12,18 @@ import {
 import { LoadingSpinner } from '@/shared/ui';
 
 const COMMUNITY_COPY = {
-  popularTitle: '\uC778\uAE30 \uAC8C\uC2DC\uBB3C',
-  popularDescription:
-    '\uC9C0\uAE08 \uCEE4\uBBA4\uB2C8\uD2F0\uC5D0\uC11C \uBC18\uC751\uC774 \uC88B\uC740 \uC774\uC57C\uAE30\uB97C \uBA3C\uC800 \uB9CC\uB098\uBCF4\uC138\uC694.',
-  recentTitle: '\uCD5C\uADFC \uAC8C\uC2DC\uBB3C',
-  recentDescription:
-    '\uBC18\uB824\uC0DD\uD65C \uC18D \uC18C\uC18C\uD55C \uAE30\uB85D\uBD80\uD130 \uC720\uC6A9\uD55C \uD301\uAE4C\uC9C0 \uD55C\uB208\uC5D0 \uB458\uB7EC\uBCF4\uC138\uC694.',
-  loadMore: '\uB354 \uBCF4\uAE30',
-  loadingMore: '\uAC8C\uC2DC\uAE00\uC744 \uBD88\uB7EC\uC624\uB294 \uC911...',
-  loadErrorTitle: '\uAC8C\uC2DC\uAE00\uC744 \uBD88\uB7EC\uC624\uC9C0 \uBABB\uD588\uC5B4\uC694.',
-  loadErrorDescription: '\uC7A0\uC2DC \uD6C4 \uB2E4\uC2DC \uC2DC\uB3C4\uD574\uC8FC\uC138\uC694.',
-  emptyPopular: '\uC544\uC9C1 \uC778\uAE30 \uAC8C\uC2DC\uBB3C\uC774 \uC5C6\uC5B4\uC694.',
-  emptyRecentTitle: '\uC544\uC9C1 \uB4F1\uB85D\uB41C \uAC8C\uC2DC\uAE00\uC774 \uC5C6\uC5B4\uC694.',
-  emptyRecentDescription:
-    '\uCCAB \uBC88\uC9F8 \uBC18\uB824\uC0DD\uD65C \uC774\uC57C\uAE30\uB97C \uB0A8\uACA8\uBCF4\uC138\uC694.',
-  writePost: '\uAE00\uC4F0\uAE30',
+  popularTitle: '인기 게시물',
+  popularDescription: '지금 커뮤니티에서 반응이 좋은 이야기를 먼저 만나보세요.',
+  recentTitle: '최근 게시물',
+  recentDescription: '반려생활 속 소소한 기록부터 유용한 팁까지 한눈에 둘러보세요.',
+  loadMore: '더 보기',
+  loadingMore: '게시글을 불러오는 중...',
+  loadErrorTitle: '게시글을 불러오지 못했어요.',
+  loadErrorDescription: '잠시 후 다시 시도해주세요.',
+  emptyPopular: '아직 인기 게시물이 없어요.',
+  emptyRecentTitle: '아직 등록된 게시글이 없어요.',
+  emptyRecentDescription: '첫 번째 반려생활 이야기를 남겨보세요.',
+  writePost: '글쓰기',
 };
 
 export function CommunityPage() {
@@ -38,6 +35,9 @@ export function CommunityPage() {
 
   return (
     <CommunityLayout
+      eyebrow="COMMUNITY BOARD"
+      title="커뮤니티"
+      description="반려생활 이야기를 모아보고, 인기 글과 최신 글을 한번에 확인해보세요."
       sidebar={<CommunitySidebarPanel profileUrl={profileUrl} nickname={nickname} />}
       content={
         <div className="space-y-10">
@@ -66,7 +66,7 @@ function PopularSection({
   isError: boolean;
 }) {
   return (
-    <section className="space-y-4">
+    <section className="space-y-4 rounded-[24px] border border-neutral-200 bg-white px-6 py-6 shadow-sm sm:px-8">
       <div className="flex items-end justify-between gap-4">
         <div>
           <p className="text-xs font-semibold tracking-[0.24em] text-brand">POPULAR PICKS</p>
@@ -168,7 +168,7 @@ function RecentSection({
   onLoadMore: () => void;
 }) {
   return (
-    <section className="space-y-4">
+    <section className="space-y-4 rounded-[24px] border border-neutral-200 bg-white px-6 py-6 shadow-sm sm:px-8">
       <div>
         <p className="text-xs font-semibold tracking-[0.24em] text-neutral-400">COMMUNITY BOARD</p>
         <h2 className="mt-2 text-[24px] font-semibold tracking-[-0.03em] text-neutral-950">

From ca4bc17d63ed6edd210f1b6bf862094aee3b1ba3 Mon Sep 17 00:00:00 2001
From: sooloin <csb7543@naver.com>
Date: Fri, 12 Jun 2026 21:27:20 +0900
Subject: [PATCH 09/13] =?UTF-8?q?:bug:=20Fix:=20=EC=9E=84=EC=8B=9C?=
 =?UTF-8?q?=EC=A0=80=EC=9E=A5=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EB=B3=B5=EC=9B=90=20=EB=88=84=EB=9D=BD=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 임시저장 요청에 imageFileUrls 배열 필드 호환 추가
- 임시저장 복원 시 imageFileUrls 우선 처리하도록 수정
- 단일 imageFileUrl 응답도 함께 지원해 기존 스펙과 호환 유지

`#53`
---
 src/features/community/model/types.ts              | 2 ++
 src/features/community/model/useBoardEditorForm.ts | 7 ++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/features/community/model/types.ts b/src/features/community/model/types.ts
index 69d8dc5..390a644 100644
--- a/src/features/community/model/types.ts
+++ b/src/features/community/model/types.ts
@@ -35,6 +35,7 @@ export interface TempSaveBoardRequest {
   boardTitle?: string;
   boardContent?: string;
   imageFileUrl?: string;
+  imageFileUrls?: string[];
 }
 
 export interface TempSaveBoardResponse {
@@ -47,6 +48,7 @@ export interface TempSavedBoardResponse {
   boardTitle: string;
   boardContent: string;
   imageFileUrl: string | null;
+  imageFileUrls?: string[] | null;
 }
 
 export interface BoardDetailResponse {
diff --git a/src/features/community/model/useBoardEditorForm.ts b/src/features/community/model/useBoardEditorForm.ts
index c347764..75a5b7c 100644
--- a/src/features/community/model/useBoardEditorForm.ts
+++ b/src/features/community/model/useBoardEditorForm.ts
@@ -44,10 +44,14 @@ function mapBoardDetailToFormState(board: BoardDetailResponse): BoardEditorFormS
 }
 
 function mapTempSavedBoardToFormState(board: TempSavedBoardResponse): BoardEditorFormState {
+  const imageFileUrls =
+    board.imageFileUrls?.filter((imageUrl): imageUrl is string => Boolean(imageUrl?.trim())) ??
+    (board.imageFileUrl ? [board.imageFileUrl] : []);
+
   return {
     boardTitle: board.boardTitle ?? '',
     boardContent: board.boardContent ?? '',
-    imageFileUrls: board.imageFileUrl ? [board.imageFileUrl] : [],
+    imageFileUrls,
   };
 }
 
@@ -206,6 +210,7 @@ export function useBoardEditorForm({ mode, boardId = null }: UseBoardEditorFormO
         boardTitle: form.boardTitle.trim() || undefined,
         boardContent: form.boardContent.trim() || undefined,
         imageFileUrl: form.imageFileUrls[0] ?? undefined,
+        imageFileUrls: form.imageFileUrls.length ? form.imageFileUrls : undefined,
       });
 
       setStoredBoardDraftSessionKey(result.sessionKey);

From c74c13fea1e63fda2bec675298f89447acf6a605 Mon Sep 17 00:00:00 2001
From: sooloin <csb7543@naver.com>
Date: Fri, 12 Jun 2026 23:31:19 +0900
Subject: [PATCH 10/13] =?UTF-8?q?:bug:=20Fix:=20=EC=BB=A4=EB=AE=A4?=
 =?UTF-8?q?=EB=8B=88=ED=8B=B0=20=ED=94=BC=EB=93=9C=20=EB=AA=A9=EB=A1=9D=20?=
 =?UTF-8?q?UI=20=EC=95=88=EC=A0=95=ED=99=94=20=EB=B0=8F=20=EC=9D=B8?=
 =?UTF-8?q?=EC=BD=94=EB=94=A9=20=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- CommunityFeedCard 내부 깨진 한글 문자열과 아이콘 참조 오류 수정
- 게시물 목록 구분선, 간격, 타이포그래피 조정
- 인기 게시물 TOP 배지 제거로 목록 UX 단순화
- 최근 게시물 스켈레톤 간격을 실제 리스트 레이아웃과 맞춤

`#53`
---
 .../community/ui/CommunityFeedCard.tsx        | 183 ++++++++++++++++--
 src/features/community/ui/CommunityLayout.tsx |  23 ++-
 .../community/ui/CommunityProfileCard.tsx     |   6 +-
 .../community/ui/CommunitySidebarPanel.tsx    |   2 +-
 src/pages/community/CommunityPage.tsx         | 160 ++++-----------
 5 files changed, 215 insertions(+), 159 deletions(-)

diff --git a/src/features/community/ui/CommunityFeedCard.tsx b/src/features/community/ui/CommunityFeedCard.tsx
index 33c674e..df95c6f 100644
--- a/src/features/community/ui/CommunityFeedCard.tsx
+++ b/src/features/community/ui/CommunityFeedCard.tsx
@@ -11,6 +11,7 @@ interface CommunityFeedCardProps {
   createdAt?: string | null;
   to?: string;
   badge?: string;
+  variant?: 'card' | 'list';
 }
 
 export function CommunityFeedCard({
@@ -24,10 +25,70 @@ export function CommunityFeedCard({
   createdAt,
   to,
   badge,
+  variant = 'card',
 }: CommunityFeedCardProps) {
   const formattedDate = createdAt ? formatRelativeDate(createdAt) : null;
 
-  const content = (
+  const content =
+    variant === 'list' ? (
+      <ListFeedItem
+        title={title}
+        preview={preview}
+        imageUrl={imageUrl}
+        nickname={nickname}
+        likes={likes}
+        comments={comments}
+        views={views}
+        formattedDate={formattedDate}
+        badge={badge}
+      />
+    ) : (
+      <CardFeedItem
+        title={title}
+        preview={preview}
+        imageUrl={imageUrl}
+        nickname={nickname}
+        likes={likes}
+        comments={comments}
+        views={views}
+        formattedDate={formattedDate}
+        badge={badge}
+      />
+    );
+
+  if (to) {
+    return (
+      <Link to={to} className="block h-full">
+        {content}
+      </Link>
+    );
+  }
+
+  return <div className="h-full">{content}</div>;
+}
+
+function CardFeedItem({
+  title,
+  preview,
+  imageUrl,
+  nickname,
+  likes,
+  comments,
+  views,
+  formattedDate,
+  badge,
+}: {
+  title: string;
+  preview?: string | null;
+  imageUrl?: string | null;
+  nickname?: string | null;
+  likes: number;
+  comments: number;
+  views?: number;
+  formattedDate: string | null;
+  badge?: string;
+}) {
+  return (
     <article className="group/card flex h-full flex-col overflow-hidden rounded-[20px] border border-neutral-200 bg-white shadow-sm transition-shadow hover:shadow-md">
       <div className="relative aspect-4/3 shrink-0 overflow-hidden bg-neutral-100">
         {imageUrl ? (
@@ -51,7 +112,6 @@ export function CommunityFeedCard({
 
       <div className="flex flex-1 flex-col gap-2 px-3.5 py-3.5">
         <p className="line-clamp-2 text-sm font-semibold leading-snug text-neutral-900">{title}</p>
-
         {preview ? <p className="line-clamp-2 text-xs leading-relaxed text-neutral-500">{preview}</p> : null}
 
         <div className="mt-auto flex items-center justify-between gap-2 pt-2">
@@ -59,7 +119,7 @@ export function CommunityFeedCard({
           <div className="flex shrink-0 items-center gap-3 text-xs text-neutral-500">
             <SocialStat kind="like" value={likes} />
             <SocialStat kind="comment" value={comments} />
-            {views !== undefined && <SocialStat kind="view" value={views} />}
+            {views !== undefined ? <SocialStat kind="view" value={views} /> : null}
           </div>
         </div>
 
@@ -67,16 +127,81 @@ export function CommunityFeedCard({
       </div>
     </article>
   );
+}
 
-  if (to) {
-    return (
-      <Link to={to} className="block h-full">
-        {content}
-      </Link>
-    );
-  }
+function ListFeedItem({
+  title,
+  preview,
+  imageUrl,
+  nickname,
+  likes,
+  comments,
+  views,
+  formattedDate,
+  badge,
+}: {
+  title: string;
+  preview?: string | null;
+  imageUrl?: string | null;
+  nickname?: string | null;
+  likes: number;
+  comments: number;
+  views?: number;
+  formattedDate: string | null;
+  badge?: string;
+}) {
+  return (
+    <article className="group/list border-b border-neutral-200 py-8 first:pt-0 last:border-b-0 last:pb-0">
+      <div className="flex items-start gap-4 sm:gap-5">
+        <div className="min-w-0 flex-1">
+          {badge ? (
+            <span className="inline-flex rounded-full bg-brand/8 px-3 py-1 text-[11px] font-semibold tracking-[0.12em] text-brand">
+              {badge}
+            </span>
+          ) : null}
 
-  return <div className="h-full">{content}</div>;
+          <p className="mt-2 line-clamp-1 text-[16px] font-semibold tracking-[-0.03em] text-neutral-900 transition-colors group-hover/list:text-brand sm:text-[18px]">
+            {title}
+          </p>
+
+          {preview ? (
+            <p className="mt-1 line-clamp-2 text-[15px] leading-[1.6] text-neutral-600 sm:text-[16px]">{preview}</p>
+          ) : null}
+
+          <div className="mt-4 flex flex-wrap items-center gap-x-3 gap-y-2 text-[14px] text-neutral-400 sm:text-[15px]">
+            <span className="inline-flex items-center gap-1.5 text-[#ef3c32]">
+              <ThumbsUpIcon className="h-5 w-5" />
+              <span className="font-medium">{likes}</span>
+            </span>
+            <span className="inline-flex items-center gap-1.5 text-[#1ab7c4]">
+              <CommentOutlineIcon className="h-5 w-5" />
+              <span className="font-medium">{comments}</span>
+            </span>
+            {formattedDate ? <MetaDivider /> : null}
+            {formattedDate ? <span>{formattedDate}</span> : null}
+            {nickname ? <MetaDivider /> : null}
+            {nickname ? <span>{nickname}</span> : null}
+            {views !== undefined ? <MetaDivider /> : null}
+            {views !== undefined ? <span>조회 {views}</span> : null}
+          </div>
+        </div>
+
+        {imageUrl ? (
+          <div className="h-16 w-16 shrink-0 overflow-hidden rounded-[10px] bg-neutral-100 sm:h-[72px] sm:w-[72px]">
+            <img
+              src={imageUrl}
+              alt={title}
+              className="h-full w-full object-cover transition-transform duration-300 group-hover/list:scale-[1.03]"
+            />
+          </div>
+        ) : null}
+      </div>
+    </article>
+  );
+}
+
+function MetaDivider() {
+  return <span className="text-neutral-300">|</span>;
 }
 
 function SocialStat({ kind, value }: { kind: 'like' | 'comment' | 'view'; value: number }) {
@@ -110,6 +235,16 @@ function formatRelativeDate(iso: string): string {
   return new Date(iso).toLocaleDateString('ko-KR', { month: 'short', day: 'numeric' });
 }
 
+function ImagePlaceholderIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" aria-hidden className={className}>
+      <rect x="3.5" y="5" width="17" height="14" rx="2.5" />
+      <circle cx="9" cy="10" r="1.5" />
+      <path d="m7 16 3.25-3.25a1 1 0 0 1 1.414 0L14 15l1.75-1.75a1 1 0 0 1 1.414 0L19 15" />
+    </svg>
+  );
+}
+
 function HeartIcon({ className }: { className?: string }) {
   return (
     <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className={className}>
@@ -118,6 +253,18 @@ function HeartIcon({ className }: { className?: string }) {
   );
 }
 
+function ThumbsUpIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden className={className}>
+      <path
+        d="M9.5 10.5 12.5 4a2 2 0 0 1 3.8.8V9h2.2a2 2 0 0 1 2 2.4l-1 5A2 2 0 0 1 17.5 18H9.5m0-7.5V18m0-7.5H6a1.5 1.5 0 0 0-1.5 1.5v4A1.5 1.5 0 0 0 6 17.5h3.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
 function CommentIcon({ className }: { className?: string }) {
   return (
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden className={className}>
@@ -130,21 +277,19 @@ function CommentIcon({ className }: { className?: string }) {
   );
 }
 
-function EyeIcon({ className }: { className?: string }) {
+function CommentOutlineIcon({ className }: { className?: string }) {
   return (
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden className={className}>
-      <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" strokeLinecap="round" strokeLinejoin="round" />
-      <circle cx="12" cy="12" r="3" strokeLinecap="round" strokeLinejoin="round" />
+      <path d="M7.5 19.5H4.5L5.6 16A7.5 7.5 0 1 1 12 19.5H7.5Z" strokeLinecap="round" strokeLinejoin="round" />
     </svg>
   );
 }
 
-function ImagePlaceholderIcon({ className }: { className?: string }) {
+function EyeIcon({ className }: { className?: string }) {
   return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden className={className}>
-      <rect x="3" y="3" width="18" height="18" rx="3" />
-      <circle cx="8.5" cy="8.5" r="1.5" />
-      <path d="m21 15-5-5L5 21" strokeLinecap="round" strokeLinejoin="round" />
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden className={className}>
+      <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" strokeLinecap="round" strokeLinejoin="round" />
+      <circle cx="12" cy="12" r="3" strokeLinecap="round" strokeLinejoin="round" />
     </svg>
   );
 }
diff --git a/src/features/community/ui/CommunityLayout.tsx b/src/features/community/ui/CommunityLayout.tsx
index f06ef39..be621ab 100644
--- a/src/features/community/ui/CommunityLayout.tsx
+++ b/src/features/community/ui/CommunityLayout.tsx
@@ -1,23 +1,28 @@
 import type { ReactNode } from 'react';
 
 interface CommunityLayoutProps {
-  eyebrow: string;
-  title: string;
-  description: string;
+  eyebrow?: string;
+  title?: string;
+  description?: string;
   sidebar?: ReactNode;
   content: ReactNode;
 }
 
 export function CommunityLayout({ eyebrow, title, description, sidebar, content }: CommunityLayoutProps) {
+  const hasHeader = Boolean(eyebrow || title || description);
+  const contentGridClass = sidebar ? 'lg:grid-cols-[minmax(0,1fr)_240px]' : 'lg:grid-cols-1';
+
   return (
     <div className="mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
-      <div>
-        <p className="text-xs font-semibold tracking-[0.24em] text-brand">{eyebrow}</p>
-        <h1 className="mt-2 text-[18px] font-medium text-neutral-950 sm:text-[20px]">{title}</h1>
-        <p className="mt-3 max-w-3xl text-sm leading-7 text-neutral-600">{description}</p>
-      </div>
+      {hasHeader ? (
+        <div>
+          {eyebrow ? <p className="text-xs font-semibold tracking-[0.24em] text-brand">{eyebrow}</p> : null}
+          {title ? <h1 className="mt-2 text-[18px] font-medium text-neutral-950 sm:text-[20px]">{title}</h1> : null}
+          {description ? <p className="mt-3 max-w-3xl text-sm leading-7 text-neutral-600">{description}</p> : null}
+        </div>
+      ) : null}
 
-      <div className="mt-10 grid gap-6 lg:grid-cols-[minmax(0,1fr)_320px]">
+      <div className={[hasHeader ? 'mt-10' : '', 'grid gap-6', contentGridClass].join(' ').trim()}>
         <div className="min-w-0 space-y-6">{content}</div>
         {sidebar ? <aside className="space-y-6">{sidebar}</aside> : null}
       </div>
diff --git a/src/features/community/ui/CommunityProfileCard.tsx b/src/features/community/ui/CommunityProfileCard.tsx
index 92ce984..87d14d6 100644
--- a/src/features/community/ui/CommunityProfileCard.tsx
+++ b/src/features/community/ui/CommunityProfileCard.tsx
@@ -9,7 +9,7 @@ interface CommunityProfileCardProps {
 
 const PROFILE_COPY = {
   fallbackName: '도도 친구',
-  description: '오늘 남기고 싶은 반려생활 이야기를 글로 기록해보세요.',
+  description: '이야기를 글로 기록해보세요.',
   write: '글쓰기',
   myActivity: '내 활동',
 };
@@ -20,11 +20,11 @@ export function CommunityProfileCard({ profileUrl, nickname }: CommunityProfileC
   return (
     <section className="space-y-5">
       <div className="flex items-center gap-4">
-        <div className="h-16 w-16 overflow-hidden rounded-full border border-neutral-200 bg-neutral-100">
+        <div className="h-16 w-16 shrink-0 overflow-hidden rounded-full border border-neutral-200 bg-neutral-100">
           <img
             src={profileUrl?.trim() || profileDefaultIllustration}
             alt=""
-            className="h-full w-full object-cover"
+            className="block h-full w-full object-cover"
             onError={(event) => {
               event.currentTarget.src = profileDefaultIllustration;
             }}
diff --git a/src/features/community/ui/CommunitySidebarPanel.tsx b/src/features/community/ui/CommunitySidebarPanel.tsx
index fd78ef8..084223f 100644
--- a/src/features/community/ui/CommunitySidebarPanel.tsx
+++ b/src/features/community/ui/CommunitySidebarPanel.tsx
@@ -7,7 +7,7 @@ interface CommunitySidebarPanelProps {
 
 export function CommunitySidebarPanel({ profileUrl, nickname }: CommunitySidebarPanelProps) {
   return (
-    <div className="rounded-[24px] border border-neutral-200 bg-white p-5 shadow-sm">
+    <div className="rounded-[24px] border border-neutral-200 bg-white p-4 shadow-sm">
       <CommunityProfileCard profileUrl={profileUrl} nickname={nickname} />
     </div>
   );
diff --git a/src/pages/community/CommunityPage.tsx b/src/pages/community/CommunityPage.tsx
index ba042fc..ebcd21d 100644
--- a/src/pages/community/CommunityPage.tsx
+++ b/src/pages/community/CommunityPage.tsx
@@ -35,12 +35,9 @@ export function CommunityPage() {
 
   return (
     <CommunityLayout
-      eyebrow="COMMUNITY BOARD"
-      title="커뮤니티"
-      description="반려생활 이야기를 모아보고, 인기 글과 최신 글을 한번에 확인해보세요."
       sidebar={<CommunitySidebarPanel profileUrl={profileUrl} nickname={nickname} />}
       content={
-        <div className="space-y-10">
+        <div className="space-y-14">
           <PopularSection boards={popularBoards} isLoading={isLoading} isError={isError} />
           <RecentSection
             boards={boards}
@@ -66,7 +63,7 @@ function PopularSection({
   isError: boolean;
 }) {
   return (
-    <section className="space-y-4 rounded-[24px] border border-neutral-200 bg-white px-6 py-6 shadow-sm sm:px-8">
+    <section className="space-y-4">
       <div className="flex items-end justify-between gap-4">
         <div>
           <p className="text-xs font-semibold tracking-[0.24em] text-brand">POPULAR PICKS</p>
@@ -78,9 +75,9 @@ function PopularSection({
       </div>
 
       {isLoading ? (
-        <div className="grid gap-4 lg:grid-cols-3">
+        <div className="rounded-[24px] border border-neutral-200 bg-white px-6 py-6 shadow-sm sm:px-8">
           {Array.from({ length: 3 }).map((_, i) => (
-            <PopularCardSkeleton key={i} />
+            <ListRowSkeleton key={i} />
           ))}
         </div>
       ) : isError ? (
@@ -88,9 +85,21 @@ function PopularSection({
       ) : boards.length === 0 ? (
         <EmptyPopularState />
       ) : (
-        <div className="grid gap-4 lg:grid-cols-3">
-          {boards.map((board, index) => (
-            <PopularCard key={board.boardId} board={board} rank={index + 1} />
+        <div className="rounded-[24px] border border-neutral-200 bg-white px-6 py-6 shadow-sm sm:px-8">
+          {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>
       )}
@@ -98,60 +107,6 @@ function PopularSection({
   );
 }
 
-function PopularCard({ board, rank }: { board: BoardListItem; rank: number }) {
-  const rankColors: Record<number, string> = {
-    1: 'bg-amber-400 text-white',
-    2: 'bg-neutral-400 text-white',
-    3: 'bg-amber-700/80 text-white',
-  };
-  const rankColor = rankColors[rank] ?? 'bg-neutral-300 text-white';
-
-  return (
-    <Link to={`/community/${board.boardId}`} className="group block">
-      <article className="overflow-hidden rounded-[24px] border border-neutral-200/80 bg-white shadow-[0_18px_42px_rgba(15,23,42,0.06)] transition duration-200 hover:-translate-y-1 hover:shadow-[0_22px_56px_rgba(15,23,42,0.12)]">
-        <div className="relative aspect-[4/3] overflow-hidden bg-neutral-100">
-          {board.thumbnailImageUrl ? (
-            <img
-              src={board.thumbnailImageUrl}
-              alt={board.boardTitle}
-              className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-[1.04]"
-            />
-          ) : (
-            <div className="flex h-full w-full items-center justify-center bg-linear-to-br from-brand/[0.08] via-[#fff5ea] to-neutral-100">
-              <ImagePlaceholderIcon className="h-10 w-10 text-neutral-300" />
-            </div>
-          )}
-          <span
-            className={`absolute left-4 top-4 flex h-9 w-9 items-center justify-center rounded-full text-sm font-bold shadow-sm ${rankColor}`}
-          >
-            {rank}
-          </span>
-        </div>
-
-        <div className="space-y-2.5 px-4 py-4">
-          <p className="line-clamp-2 text-base font-semibold leading-snug text-neutral-900">{board.boardTitle}</p>
-          {board.boardContentPreview ? (
-            <p className="line-clamp-2 text-sm leading-6 text-neutral-500">{board.boardContentPreview}</p>
-          ) : null}
-          <div className="flex items-center justify-between gap-3 pt-1">
-            <span className="truncate text-sm text-neutral-400">{board.nickname}</span>
-            <div className="flex shrink-0 items-center gap-3 text-sm text-neutral-500">
-              <span className="inline-flex items-center gap-1">
-                <HeartIcon className="h-4 w-4 text-[#d65d4b]" />
-                {board.likeCount}
-              </span>
-              <span className="inline-flex items-center gap-1">
-                <CommentIcon className="h-4 w-4 text-neutral-400" />
-                {board.commentCount}
-              </span>
-            </div>
-          </div>
-        </div>
-      </article>
-    </Link>
-  );
-}
-
 function RecentSection({
   boards,
   isLoading,
@@ -168,7 +123,7 @@ function RecentSection({
   onLoadMore: () => void;
 }) {
   return (
-    <section className="space-y-4 rounded-[24px] border border-neutral-200 bg-white px-6 py-6 shadow-sm sm:px-8">
+    <section className="space-y-4">
       <div>
         <p className="text-xs font-semibold tracking-[0.24em] text-neutral-400">COMMUNITY BOARD</p>
         <h2 className="mt-2 text-[24px] font-semibold tracking-[-0.03em] text-neutral-950">
@@ -178,9 +133,9 @@ function RecentSection({
       </div>
 
       {isLoading ? (
-        <div className="grid grid-cols-2 gap-4 xl:grid-cols-4">
+        <div className="rounded-[24px] border border-neutral-200 bg-white px-6 py-6 shadow-sm sm:px-8">
           {Array.from({ length: 8 }).map((_, i) => (
-            <BoardCardSkeleton key={i} />
+            <ListRowSkeleton key={i} />
           ))}
         </div>
       ) : isError ? (
@@ -188,8 +143,8 @@ function RecentSection({
       ) : boards.length === 0 ? (
         <EmptyRecentState />
       ) : (
-        <div className="space-y-6">
-          <div className="grid grid-cols-2 gap-4 xl:grid-cols-4">
+        <div className="space-y-8 rounded-[24px] border border-neutral-200 bg-white px-6 py-6 shadow-sm sm:px-8">
+          <div>
             {boards.map((board) => (
               <CommunityFeedCard
                 key={board.boardId}
@@ -202,6 +157,7 @@ function RecentSection({
                 views={board.viewCount}
                 createdAt={board.createdAt}
                 to={`/community/${board.boardId}`}
+                variant="list"
               />
             ))}
           </div>
@@ -257,66 +213,16 @@ function EmptyRecentState() {
   );
 }
 
-function PopularCardSkeleton() {
-  return (
-    <div className="overflow-hidden rounded-[24px] border border-neutral-200 bg-white shadow-[0_18px_42px_rgba(15,23,42,0.05)]">
-      <div className="aspect-[4/3] animate-pulse bg-neutral-100" />
-      <div className="space-y-2.5 px-4 py-4">
-        <div className="h-4 w-3/4 animate-pulse rounded-md bg-neutral-100" />
-        <div className="h-3 w-full animate-pulse rounded-md bg-neutral-100" />
-        <div className="h-3 w-2/3 animate-pulse rounded-md bg-neutral-100" />
-        <div className="flex justify-between pt-1">
-          <div className="h-3 w-16 animate-pulse rounded-md bg-neutral-100" />
-          <div className="h-3 w-20 animate-pulse rounded-md bg-neutral-100" />
-        </div>
-      </div>
-    </div>
-  );
-}
-
-function BoardCardSkeleton() {
+function ListRowSkeleton() {
   return (
-    <div className="overflow-hidden rounded-[24px] border border-neutral-200 bg-white shadow-[0_18px_42px_rgba(15,23,42,0.05)]">
-      <div className="aspect-[4/3] animate-pulse bg-neutral-100" />
-      <div className="space-y-2.5 px-4 py-4">
-        <div className="h-4 w-3/4 animate-pulse rounded-md bg-neutral-100" />
-        <div className="h-3 w-full animate-pulse rounded-md bg-neutral-100" />
-        <div className="h-3 w-2/3 animate-pulse rounded-md bg-neutral-100" />
-        <div className="flex justify-between pt-1">
-          <div className="h-3 w-16 animate-pulse rounded-md bg-neutral-100" />
-          <div className="h-3 w-20 animate-pulse rounded-md bg-neutral-100" />
-        </div>
+    <div className="flex gap-4 border-b border-neutral-200 py-8 first:pt-0 last:border-b-0 last:pb-0">
+      <div className="min-w-0 flex-1 space-y-3">
+        <div className="h-6 w-2/3 animate-pulse rounded-md bg-neutral-100" />
+        <div className="h-4 w-full animate-pulse rounded-md bg-neutral-100" />
+        <div className="h-4 w-4/5 animate-pulse rounded-md bg-neutral-100" />
+        <div className="h-4 w-1/2 animate-pulse rounded-md bg-neutral-100" />
       </div>
+      <div className="h-16 w-16 shrink-0 animate-pulse rounded-[10px] bg-neutral-100 sm:h-[72px] sm:w-[72px]" />
     </div>
   );
 }
-
-function HeartIcon({ className }: { className?: string }) {
-  return (
-    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className={className}>
-      <path d="M12 21s-6.716-4.304-9.428-7.851C-.315 9.382.496 4.5 4.96 3.297A5.53 5.53 0 0 1 12 6.045a5.53 5.53 0 0 1 7.04-2.748c4.464 1.203 5.276 6.085 2.387 9.852C18.716 16.696 12 21 12 21Z" />
-    </svg>
-  );
-}
-
-function CommentIcon({ className }: { className?: string }) {
-  return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden className={className}>
-      <path
-        d="M8 19.5 4.5 21l1.125-3.375A7.5 7.5 0 1 1 19.5 12 7.5 7.5 0 0 1 12 19.5H8Z"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-      />
-    </svg>
-  );
-}
-
-function ImagePlaceholderIcon({ className }: { className?: string }) {
-  return (
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden className={className}>
-      <rect x="3" y="3" width="18" height="18" rx="3" />
-      <circle cx="8.5" cy="8.5" r="1.5" />
-      <path d="m21 15-5-5L5 21" strokeLinecap="round" strokeLinejoin="round" />
-    </svg>
-  );
-}

From 3fcae1d57494f8ace83d739d6cd1754d1d065d87 Mon Sep 17 00:00:00 2001
From: sooloin <csb7543@naver.com>
Date: Fri, 12 Jun 2026 23:44:50 +0900
Subject: [PATCH 11/13] =?UTF-8?q?:sparkles:=20Feat:=20=EC=BB=A4=EB=AE=A4?=
 =?UTF-8?q?=EB=8B=88=ED=8B=B0=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EB=B0=8F=20?=
 =?UTF-8?q?=EB=8C=93=EA=B8=80=20=EC=9E=85=EB=A0=A5=20UI=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 상세 페이지 상단 헤더와 뒤로가기 버튼 제거
- 게시글 상세 응답의 profileUrl을 작성자 프로필 이미지에 연결
- 제목 크기는 줄이고 본문 크기는 키워 가독성 개선
- 대표 이미지 크기를 축소하고 여러 장 이미지는 갤러리 형태로 노출
- 댓글 안내 문구와 페이지네이션 목업 제거
- 댓글 입력창을 화면 하단에 고정되도록 변경
- 댓글 입력 영역에 현재 사용자 프로필 이미지 연결
- 댓글 등록 버튼을 서비스 흐름에 맞는 형태로 정리

`#53`
---
 src/features/community/model/types.ts         |   1 +
 .../community/ui/BoardDetailContent.tsx       | 213 +++++++++++-------
 src/pages/community/BoardDetailPage.tsx       |  39 +---
 3 files changed, 138 insertions(+), 115 deletions(-)

diff --git a/src/features/community/model/types.ts b/src/features/community/model/types.ts
index 390a644..fc90676 100644
--- a/src/features/community/model/types.ts
+++ b/src/features/community/model/types.ts
@@ -57,6 +57,7 @@ export interface BoardDetailResponse {
   boardTitle: string;
   boardContent: string;
   imageFileUrls: string[];
+  profileUrl: string | null;
   nickname: string;
   viewCount: number;
   boardCreatedAt: string;
diff --git a/src/features/community/ui/BoardDetailContent.tsx b/src/features/community/ui/BoardDetailContent.tsx
index df48da1..26230f3 100644
--- a/src/features/community/ui/BoardDetailContent.tsx
+++ b/src/features/community/ui/BoardDetailContent.tsx
@@ -1,10 +1,11 @@
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 import type { BoardDetailResponse } from '../model/types';
 
 interface BoardDetailContentProps {
   board: BoardDetailResponse;
   canManage: boolean;
+  currentUserProfileUrl?: string | null;
   onDelete: () => void;
 }
 
@@ -14,10 +15,10 @@ const DETAIL_COPY = {
   edit: '수정',
   delete: '삭제',
   commentsTitle: '댓글',
-  commentsDescription: '댓글 API 연동 전이라 형식 목업을 먼저 맞춰두었어요.',
-  total: '총',
   placeholder: '댓글을 입력해주세요',
-  placeholderAria: '댓글 등록 예정 버튼',
+  submit: '등록',
+  submitAria: '댓글 등록 예정 버튼',
+  viewLabel: '조회',
 };
 
 const MOCK_COMMENTS = [
@@ -51,39 +52,46 @@ function formatDateTime(value: string) {
   }).format(date);
 }
 
-export function BoardDetailContent({ board, canManage, onDelete }: BoardDetailContentProps) {
+export function BoardDetailContent({ board, canManage, currentUserProfileUrl, onDelete }: BoardDetailContentProps) {
   const likeCount = Math.max(12, Math.round(board.viewCount * 1.7));
   const commentCount = Math.max(MOCK_COMMENTS.length, Math.round(board.viewCount / 3));
   const authorName = board.nickname.trim() || DETAIL_COPY.authorFallback;
-  const primaryImage = board.imageFileUrls[0] ?? null;
+  const imageUrls = board.imageFileUrls.filter((imageUrl) => imageUrl.trim().length > 0);
 
   return (
-    <article className="space-y-6">
-      <section className="overflow-hidden rounded-[24px] border border-neutral-300 bg-white shadow-sm">
-        <div className="px-6 py-6 sm:px-8">
-          <div className="flex items-start justify-between gap-5">
+    <article className="space-y-6 pb-28">
+      <section className="overflow-hidden rounded-[24px] border border-neutral-200 bg-white shadow-sm">
+        <div className="px-6 py-7 sm:px-8 sm:py-8">
+          <div className="flex flex-col gap-5 border-b border-neutral-200 pb-6 sm:flex-row sm:items-start sm:justify-between">
             <div className="flex items-start gap-4">
-              <div className="flex h-14 w-14 shrink-0 items-center justify-center rounded-full bg-[#f7e5bf] text-lg font-semibold text-neutral-700">
-                {authorName.slice(0, 1)}
-              </div>
-              <div>
-                <p className="text-[22px] font-semibold tracking-[-0.02em] text-neutral-950">{authorName}</p>
-                <div className="mt-1 flex flex-wrap items-center gap-3 text-sm text-neutral-400">
+              <AuthorBadge name={authorName} size="lg" profileUrl={board.profileUrl} />
+              <div className="min-w-0">
+                <p className="text-[22px] font-semibold tracking-[-0.03em] text-neutral-950">{authorName}</p>
+                <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-2 text-sm text-neutral-400">
                   <span>{formatDateTime(board.boardCreatedAt)}</span>
-                  <span className="inline-flex items-center gap-1">
+                  <MetaDivider />
+                  <span className="inline-flex items-center gap-1.5">
                     <EyeIcon className="h-4 w-4" />
-                    {board.viewCount}
+                    <span>
+                      {DETAIL_COPY.viewLabel} {board.viewCount}
+                    </span>
                   </span>
                 </div>
               </div>
             </div>
 
             <div className="flex items-center gap-4 text-sm text-neutral-400">
-              {!canManage ? <button type="button">{DETAIL_COPY.report}</button> : null}
+              {!canManage ? (
+                <button type="button" className="transition-colors hover:text-neutral-700">
+                  {DETAIL_COPY.report}
+                </button>
+              ) : null}
               {canManage ? (
                 <>
-                  <Link to={`/community/${board.boardId}/edit`}>{DETAIL_COPY.edit}</Link>
-                  <button type="button" onClick={onDelete}>
+                  <Link to={`/community/${board.boardId}/edit`} className="transition-colors hover:text-neutral-700">
+                    {DETAIL_COPY.edit}
+                  </Link>
+                  <button type="button" onClick={onDelete} className="transition-colors hover:text-red-500">
                     {DETAIL_COPY.delete}
                   </button>
                 </>
@@ -91,29 +99,19 @@ export function BoardDetailContent({ board, canManage, onDelete }: BoardDetailCo
             </div>
           </div>
 
-          <h1 className="mt-8 text-[26px] font-semibold tracking-[-0.03em] text-neutral-950 sm:text-[34px]">
-            {board.boardTitle}
-          </h1>
-
-          <div className="mt-6 grid gap-6 lg:grid-cols-[180px_minmax(0,1fr)] lg:items-start">
-            <div>
-              {primaryImage ? (
-                <img
-                  src={primaryImage}
-                  alt={board.boardTitle}
-                  className="aspect-square w-full rounded-[20px] object-cover"
-                />
-              ) : (
-                <div className="aspect-square w-full rounded-[20px] bg-neutral-100" />
-              )}
-            </div>
+          <div className="pt-7">
+            <h1 className="text-[24px] font-semibold tracking-[-0.04em] text-neutral-950 sm:text-[28px]">
+              {board.boardTitle}
+            </h1>
 
-            <div className="flex min-h-full flex-col">
-              <p className="whitespace-pre-wrap break-words text-[15px] leading-8 text-neutral-800">
+            <div className="mt-6 space-y-6">
+              {imageUrls.length > 0 ? <BoardImageGallery title={board.boardTitle} imageUrls={imageUrls} /> : null}
+
+              <p className="whitespace-pre-wrap break-words text-[17px] leading-8 text-neutral-700 sm:text-[18px]">
                 {board.boardContent}
               </p>
 
-              <div className="mt-6 flex items-center justify-end gap-5">
+              <div className="flex items-center justify-end gap-5 border-t border-neutral-200 pt-5">
                 <SocialStat kind="like" value={likeCount} />
                 <SocialStat kind="comment" value={commentCount} />
               </div>
@@ -122,20 +120,14 @@ export function BoardDetailContent({ board, canManage, onDelete }: BoardDetailCo
         </div>
       </section>
 
-      <section className="overflow-hidden rounded-[24px] border border-neutral-300 bg-white shadow-sm">
-        <div className="border-b border-neutral-200 px-6 py-5 sm:px-8">
-          <div className="flex items-center justify-between gap-4">
-            <div>
-              <h2 className="text-[18px] font-medium text-neutral-950">{DETAIL_COPY.commentsTitle}</h2>
-              <p className="mt-1 text-sm text-neutral-500">{DETAIL_COPY.commentsDescription}</p>
-            </div>
-            <span className="rounded-full bg-neutral-100 px-3 py-1 text-xs font-medium text-neutral-600">
-              {DETAIL_COPY.total} {commentCount}
-            </span>
-          </div>
+      <section className="overflow-hidden rounded-[24px] border border-neutral-200 bg-white px-6 py-4 shadow-sm sm:px-8">
+        <div className="flex items-center justify-between gap-4 border-b border-neutral-200 pb-4">
+          <h2 className="text-[18px] font-semibold text-neutral-950">
+            {DETAIL_COPY.commentsTitle} {commentCount}
+          </h2>
         </div>
 
-        <div className="space-y-0 px-6 py-4 sm:px-8">
+        <div>
           {MOCK_COMMENTS.map((comment) => (
             <CommentRow
               key={comment.id}
@@ -144,38 +136,83 @@ export function BoardDetailContent({ board, canManage, onDelete }: BoardDetailCo
               content={comment.content}
             />
           ))}
-          <div className="flex items-center justify-center gap-2 px-2 py-4 text-sm text-neutral-500">
-            <span className="text-brand">&lt;</span>
-            <span>1, 2, 3</span>
-            <span className="text-brand">&gt;</span>
-          </div>
         </div>
       </section>
 
-      <section className="overflow-hidden rounded-[24px] border border-neutral-300 bg-white shadow-sm">
-        <div className="flex items-center gap-4 px-6 py-4 sm:px-8">
-          <div className="h-10 w-10 shrink-0 overflow-hidden rounded-full bg-neutral-200" />
-          <div className="flex min-w-0 flex-1 items-center rounded-full bg-neutral-100 px-4 py-3">
-            <span className="truncate text-sm text-neutral-500">{DETAIL_COPY.placeholder}</span>
+      <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>
+            <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}
+            >
+              {DETAIL_COPY.submit}
+            </button>
           </div>
-          <button
-            type="button"
-            className="h-12 w-12 shrink-0 rounded-full bg-[#bf6e67] transition-opacity hover:opacity-90"
-            aria-label={DETAIL_COPY.placeholderAria}
-          />
         </div>
       </section>
     </article>
   );
 }
 
+function BoardImageGallery({ title, imageUrls }: { title: string; imageUrls: string[] }) {
+  if (imageUrls.length === 1) {
+    return (
+      <div className="max-w-[220px] overflow-hidden rounded-[18px] border border-neutral-100 bg-neutral-50">
+        <img src={imageUrls[0]} alt={title} className="aspect-square w-full object-cover" />
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid max-w-[720px] grid-cols-2 gap-3 sm:grid-cols-3">
+      {imageUrls.map((imageUrl, index) => (
+        <div
+          key={`${imageUrl}-${index}`}
+          className="overflow-hidden rounded-[18px] border border-neutral-100 bg-neutral-50"
+        >
+          <img src={imageUrl} alt={`${title} 이미지 ${index + 1}`} className="aspect-square w-full object-cover" />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function AuthorBadge({ name, size, profileUrl }: { name: string; size: 'sm' | 'lg'; profileUrl?: string | null }) {
+  const wrapperSizeClass = size === 'lg' ? 'h-14 w-14' : 'h-10 w-10';
+  const textSizeClass = size === 'lg' ? 'text-lg' : 'text-sm';
+  const normalizedProfileUrl = profileUrl?.trim();
+
+  return (
+    <div className={['shrink-0 overflow-hidden rounded-full bg-[#f7e5bf]', wrapperSizeClass].join(' ')}>
+      {normalizedProfileUrl ? (
+        <img src={normalizedProfileUrl} alt={name} className="block h-full w-full object-cover" />
+      ) : (
+        <div
+          className={[
+            'flex h-full w-full items-center justify-center font-semibold text-neutral-700',
+            textSizeClass,
+          ].join(' ')}
+        >
+          {name.slice(0, 1)}
+        </div>
+      )}
+    </div>
+  );
+}
+
 function SocialStat({ kind, value }: { kind: 'like' | 'comment'; value: number }) {
   return (
     <span className="inline-flex items-center gap-2 text-base font-medium text-neutral-700">
       {kind === 'like' ? (
-        <HeartIcon className="h-7 w-7 text-[#d65d4b]" />
+        <ThumbsUpIcon className="h-6 w-6 text-[#ef3c32]" />
       ) : (
-        <CommentIcon className="h-6 w-6 text-neutral-500" />
+        <CommentIcon className="h-5.5 w-5.5 text-[#1ab7c4]" />
       )}
       <span>{value}</span>
     </span>
@@ -184,21 +221,25 @@ function SocialStat({ kind, value }: { kind: 'like' | 'comment'; value: number }
 
 function CommentRow({ nickname, dateTime, content }: { nickname: string; dateTime: string; content: string }) {
   return (
-    <div className="border-b border-neutral-200 py-5 last:border-b-0">
+    <div className="border-b border-neutral-200 py-6 first:pt-5 last:border-b-0 last:pb-2">
       <div className="flex items-start justify-between gap-4">
         <div className="flex items-start gap-3">
-          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-[#f7e5bf] text-sm font-semibold text-neutral-700">
-            {nickname.slice(0, 1)}
-          </div>
+          <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>
         <div className="flex items-center gap-4 text-sm text-neutral-400">
-          <button type="button">{DETAIL_COPY.report}</button>
-          <button type="button">{DETAIL_COPY.edit}</button>
-          <button type="button">{DETAIL_COPY.delete}</button>
+          <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>
         </div>
       </div>
       <p className="mt-4 text-sm leading-7 text-neutral-700">{content}</p>
@@ -206,19 +247,15 @@ function CommentRow({ nickname, dateTime, content }: { nickname: string; dateTim
   );
 }
 
-function HeartIcon({ className }: { className?: string }) {
-  return (
-    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden className={className}>
-      <path d="M12 21s-6.716-4.304-9.428-7.851C-.315 9.382.496 4.5 4.96 3.297A5.53 5.53 0 0 1 12 6.045a5.53 5.53 0 0 1 7.04-2.748c4.464 1.203 5.276 6.085 2.387 9.852C18.716 16.696 12 21 12 21Z" />
-    </svg>
-  );
+function MetaDivider() {
+  return <span className="text-neutral-300">|</span>;
 }
 
-function CommentIcon({ className }: { className?: string }) {
+function ThumbsUpIcon({ className }: { className?: string }) {
   return (
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden className={className}>
       <path
-        d="M8 19.5 4.5 21l1.125-3.375A7.5 7.5 0 1 1 19.5 12 7.5 7.5 0 0 1 12 19.5H8Z"
+        d="M9.5 10.5 12.5 4a2 2 0 0 1 3.8.8V9h2.2a2 2 0 0 1 2 2.4l-1 5A2 2 0 0 1 17.5 18H9.5m0-7.5V18m0-7.5H6a1.5 1.5 0 0 0-1.5 1.5v4A1.5 1.5 0 0 0 6 17.5h3.5"
         strokeLinecap="round"
         strokeLinejoin="round"
       />
@@ -226,6 +263,14 @@ function CommentIcon({ className }: { className?: string }) {
   );
 }
 
+function CommentIcon({ className }: { className?: string }) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden className={className}>
+      <path d="M7.5 19.5H4.5L5.6 16A7.5 7.5 0 1 1 12 19.5H7.5Z" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
 function EyeIcon({ className }: { className?: string }) {
   return (
     <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" aria-hidden className={className}>
diff --git a/src/pages/community/BoardDetailPage.tsx b/src/pages/community/BoardDetailPage.tsx
index 8d059f7..a0dda2c 100644
--- a/src/pages/community/BoardDetailPage.tsx
+++ b/src/pages/community/BoardDetailPage.tsx
@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import { useMemo, useState } from 'react';
-import { Link, useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 
 import { useCurrentUser } from '@/features/auth';
 import {
@@ -16,10 +16,8 @@ import { getApiErrorMessage } from '@/shared/lib/api/errorMessage';
 import { LoadingSpinner } from '@/shared/ui';
 
 const DETAIL_PAGE_COPY = {
-  backToCommunity: '커뮤니티로 돌아가기',
   invalidTitle: '올바르지 않은 게시글 경로예요.',
   invalidDescription: '게시글 주소를 다시 확인한 뒤 재시도해주세요.',
-  goCommunity: '커뮤니티 홈 이동',
   loading: '게시글을 불러오는 중...',
   loadFailedTitle: '게시글을 불러오지 못했어요.',
   loadFailedFallback: '게시글 조회에 실패했어요. 잠시 후 다시 시도해주세요.',
@@ -39,7 +37,7 @@ 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 } = useCurrentUser();
+  const { nickname, profileUrl } = useCurrentUser();
   const { mutateAsync: deleteBoard, isPending: isDeleting } = useDeleteBoard();
   const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
   const [deleteError, setDeleteError] = useState('');
@@ -91,22 +89,13 @@ export function BoardDetailPage() {
   return (
     <PageShell>
       <CommunityLayout
-        eyebrow="BOARD DETAIL"
-        title="게시글 상세"
-        description="작성 페이지의 담백한 톤을 유지하면서 글, 이미지, 댓글을 한 흐름으로 보여주는 상세 페이지예요."
         content={
-          <div className="space-y-5">
-            <div className="flex items-center">
-              <Link
-                to="/community"
-                className="inline-flex items-center rounded-full border border-neutral-200 bg-white px-4 py-2 text-sm font-medium text-neutral-600 transition-colors hover:border-neutral-300 hover:bg-neutral-50"
-              >
-                {DETAIL_PAGE_COPY.backToCommunity}
-              </Link>
-            </div>
-
-            <BoardDetailContent board={board} canManage={canManage} onDelete={() => setDeleteDialogOpen(true)} />
-          </div>
+          <BoardDetailContent
+            board={board}
+            canManage={canManage}
+            currentUserProfileUrl={profileUrl}
+            onDelete={() => setDeleteDialogOpen(true)}
+          />
         }
       />
 
@@ -134,12 +123,6 @@ function InvalidBoardState() {
     <div className="rounded-[24px] border border-neutral-200 bg-white px-6 py-10 shadow-sm sm:px-8">
       <h1 className="text-[20px] font-medium text-neutral-950">{DETAIL_PAGE_COPY.invalidTitle}</h1>
       <p className="mt-3 text-sm leading-7 text-neutral-600">{DETAIL_PAGE_COPY.invalidDescription}</p>
-      <Link
-        to="/community"
-        className="mt-6 inline-flex items-center justify-center rounded-xl bg-brand px-5 py-3 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90"
-      >
-        {DETAIL_PAGE_COPY.goCommunity}
-      </Link>
     </div>
   );
 }
@@ -166,12 +149,6 @@ function ErrorState({ description, onRetry }: { description: string; onRetry: ()
         >
           {DETAIL_PAGE_COPY.retry}
         </button>
-        <Link
-          to="/community"
-          className="inline-flex items-center justify-center rounded-xl border border-neutral-200 bg-white px-5 py-3 text-sm font-medium text-neutral-700 transition-colors hover:border-neutral-300 hover:bg-neutral-50"
-        >
-          {DETAIL_PAGE_COPY.goCommunity}
-        </Link>
       </div>
     </div>
   );

From ea9823119c3800b4380f6cf8f140e695d7a02669 Mon Sep 17 00:00:00 2001
From: sooloin <csb7543@naver.com>
Date: Sat, 13 Jun 2026 00:08:31 +0900
Subject: [PATCH 12/13] =?UTF-8?q?:sparkles:=20Feat:=20=EC=BB=A4=EB=AE=A4?=
 =?UTF-8?q?=EB=8B=88=ED=8B=B0=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20CRUD=20?=
 =?UTF-8?q?=EB=B0=8F=20UI=20=EC=A0=84=EB=B0=98=20=EA=B0=9C=EC=84=A0=20?=
 =?UTF-8?q?=EB=B3=B8=EB=AC=B8:=20-=20=EC=BB=A4=EB=AE=A4=EB=8B=88=ED=8B=B0?=
 =?UTF-8?q?=20=EB=A9=94=EC=9D=B8=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83?=
 =?UTF-8?q?=EC=9D=84=20=EB=AA=A9=EB=A1=9D=ED=98=95=20=ED=94=BC=EB=93=9C=20?=
 =?UTF-8?q?=EC=A4=91=EC=8B=AC=EC=9C=BC=EB=A1=9C=20=EC=9E=AC=EA=B5=AC?=
 =?UTF-8?q?=EC=84=B1=ED=95=98=EA=B3=A0=20=EC=82=AC=EC=9D=B4=EB=93=9C?=
 =?UTF-8?q?=EB=B0=94=20sticky=20=EC=A0=81=EC=9A=A9=20-=20=EC=9D=B8?=
 =?UTF-8?q?=EA=B8=B0=20=EA=B2=8C=EC=8B=9C=EB=AC=BC=EA=B3=BC=20=EC=B5=9C?=
 =?UTF-8?q?=EA=B7=BC=20=EA=B2=8C=EC=8B=9C=EB=AC=BC=20=EC=84=B9=EC=85=98?=
 =?UTF-8?q?=EC=9D=98=20=EA=B0=84=EA=B2=A9,=20=EA=B5=AC=EB=B6=84=EC=84=A0,?=
 =?UTF-8?q?=20=EC=8D=B8=EB=84=A4=EC=9D=BC=20=EB=B0=B0=EC=B9=98=EB=A5=BC=20?=
 =?UTF-8?q?UX=20=EA=B8=B0=EC=A4=80=EC=9C=BC=EB=A1=9C=20=EA=B0=9C=EC=84=A0?=
 =?UTF-8?q?=20-=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20=EC=9E=91=EC=84=B1/?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=ED=99=94=EB=A9=B4=EC=9D=84=20=EC=BB=A4?=
 =?UTF-8?q?=EB=AE=A4=EB=8B=88=ED=8B=B0=20=ED=86=A4=EC=97=90=20=EB=A7=9E?=
 =?UTF-8?q?=EA=B2=8C=20=EB=8B=A8=EC=88=9C=ED=99=94=ED=95=98=EA=B3=A0=20?=
 =?UTF-8?q?=EC=95=A1=EC=85=98=20=EC=98=81=EC=97=AD=20=EC=9E=AC=EB=B0=B0?=
 =?UTF-8?q?=EC=B9=98=20-=20=EC=9E=84=EC=8B=9C=20=EC=A0=80=EC=9E=A5?=
 =?UTF-8?q?=EC=9D=84=20=ED=95=98=EB=8B=A8=20=EC=95=A1=EC=85=98=20=EB=B0=94?=
 =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EB=8F=99=ED=95=98=EA=B3=A0=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=EC=B2=A8=EB=B6=80=20=ED=94=8C=EB=A1=9C?=
 =?UTF-8?q?=EC=9A=B0=EB=8A=94=20=EC=9C=A0=EC=A7=80=20-=20=EC=9E=84?=
 =?UTF-8?q?=EC=8B=9C=20=EC=A0=80=EC=9E=A5=20=EC=8B=9C=20=EC=9D=B4=EB=AF=B8?=
 =?UTF-8?q?=EC=A7=80=EA=B0=80=20=EB=88=84=EB=9D=BD=EB=90=98=EB=8D=98=20?=
 =?UTF-8?q?=EB=AC=B8=EC=A0=9C=EB=A5=BC=20=EC=88=98=EC=A0=95=ED=95=98?=
 =?UTF-8?q?=EA=B3=A0=20=EB=8B=A4=EC=A4=91=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20?=
 =?UTF-8?q?=EB=B3=B5=EC=9B=90=20=EC=B2=98=EB=A6=AC=20=EA=B0=9C=EC=84=A0=20?=
 =?UTF-8?q?-=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20=EC=83=81=EC=84=B8=20?=
 =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=EC=9D=84=20=EC=A0=95?=
 =?UTF-8?q?=EB=A6=AC=ED=95=98=EA=B3=A0=20profileUrl=20=EC=97=B0=EA=B2=B0?=
 =?UTF-8?q?=20=EB=B0=8F=20=EB=8B=A4=EC=A4=91=20=EC=9D=B4=EB=AF=B8=EC=A7=80?=
 =?UTF-8?q?=20=EB=85=B8=EC=B6=9C=20=EC=A7=80=EC=9B=90=20-=20=ED=98=84?=
 =?UTF-8?q?=EC=9E=AC=20=EC=82=AC=EC=9A=A9=EC=9E=90=20=ED=94=84=EB=A1=9C?=
 =?UTF-8?q?=ED=95=84=EC=9D=B4=20=EB=B0=98=EC=98=81=EB=90=9C=20=EA=B3=A0?=
 =?UTF-8?q?=EC=A0=95=ED=98=95=20=EB=8C=93=EA=B8=80=20=EC=9E=85=EB=A0=A5=20?=
 =?UTF-8?q?=EB=AA=A9=EC=97=85=20=EC=B6=94=EA=B0=80=20-=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8/=EB=AA=A9=EB=A1=9D=20=ED=99=94=EB=A9=B4=EC=9D=98=20?=
 =?UTF-8?q?=ED=95=9C=EA=B8=80=20=EC=B9=B4=ED=94=BC=EC=99=80=20=EC=9D=B8?=
 =?UTF-8?q?=ED=84=B0=EB=9E=99=EC=85=98=20=ED=86=A4=EC=9D=84=20=EB=8D=94=20?=
 =?UTF-8?q?=EC=9D=BC=EA=B4=80=EB=90=98=EA=B2=8C=20=EC=A0=95=EB=A6=AC=20-?=
 =?UTF-8?q?=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20=EC=88=98=EC=A0=95=20=ED=9B=84?=
 =?UTF-8?q?=20=EC=83=81=EC=84=B8=20=EB=B0=8F=20=EB=AA=A9=EB=A1=9D=20?=
 =?UTF-8?q?=ED=99=94=EB=A9=B4=EC=97=90=20=EC=A6=89=EC=8B=9C=20=EB=B0=98?=
 =?UTF-8?q?=EC=98=81=EB=90=98=EB=8F=84=EB=A1=9D=20react-query=20=EC=BA=90?=
 =?UTF-8?q?=EC=8B=9C=20=EA=B0=B1=EC=8B=A0=20=EC=B2=98=EB=A6=AC=20-=20?=
 =?UTF-8?q?=EC=BB=A4=EB=AE=A4=EB=8B=88=ED=8B=B0=20=EA=B4=80=EB=A0=A8=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=ED=8C=8C=EC=9D=BC=EC=9D=98=20=EC=9D=B8?=
 =?UTF-8?q?=EC=BD=94=EB=94=A9=20=EA=B9=A8=EC=A7=90=20=EB=B0=8F=20=EB=AC=B8?=
 =?UTF-8?q?=EC=9E=90=EC=97=B4=20=EB=AC=B8=EC=A0=9C=20=EC=A0=95=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`#53`
---
 .../community/model/useUpdateBoard.ts         |  23 ++-
 src/features/community/ui/BoardEditorForm.tsx | 148 ++++++++----------
 .../community/ui/CommunityFeedCard.tsx        |  16 +-
 src/features/community/ui/CommunityLayout.tsx |   4 +-
 src/pages/community/BoardCreatePage.tsx       |   2 +-
 src/pages/community/BoardEditPage.tsx         |   2 +-
 src/pages/community/CommunityPage.tsx         |  19 ++-
 7 files changed, 108 insertions(+), 106 deletions(-)

diff --git a/src/features/community/model/useUpdateBoard.ts b/src/features/community/model/useUpdateBoard.ts
index 3ed7f63..e6c2a85 100644
--- a/src/features/community/model/useUpdateBoard.ts
+++ b/src/features/community/model/useUpdateBoard.ts
@@ -1,7 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { updateBoard } from '@/features/community/api/boards';
-import type { UpdateBoardRequest, UpdateBoardResponse } from '@/features/community/model/types';
+import type { BoardDetailResponse, UpdateBoardRequest, UpdateBoardResponse } from '@/features/community/model/types';
 import { queryKeys } from '@/shared/lib/react-query/queryKey';
 
 interface UpdateBoardVariables {
@@ -15,9 +15,30 @@ export function useUpdateBoard() {
   return useMutation<UpdateBoardResponse, unknown, UpdateBoardVariables>({
     mutationFn: ({ boardId, payload }) => updateBoard(boardId, payload),
     onSuccess: (_, variables) => {
+      queryClient.setQueryData<BoardDetailResponse | undefined>(
+        queryKeys.boards.detail(variables.boardId),
+        (previous) => {
+          if (!previous) {
+            return previous;
+          }
+
+          return {
+            ...previous,
+            boardTitle: variables.payload.boardTitle,
+            boardContent: variables.payload.boardContent,
+            imageFileUrls: variables.payload.imageFileUrls,
+            modifiedAt: new Date().toISOString(),
+          };
+        },
+      );
+
       void queryClient.invalidateQueries({
         queryKey: queryKeys.boards.detail(variables.boardId),
       });
+
+      void queryClient.invalidateQueries({
+        queryKey: ['boards'],
+      });
     },
   });
 }
diff --git a/src/features/community/ui/BoardEditorForm.tsx b/src/features/community/ui/BoardEditorForm.tsx
index 4feadb8..8d85136 100644
--- a/src/features/community/ui/BoardEditorForm.tsx
+++ b/src/features/community/ui/BoardEditorForm.tsx
@@ -1,4 +1,4 @@
-import type { ChangeEventHandler, FormEventHandler } from 'react';
+import type { ChangeEventHandler, FormEventHandler } from 'react';
 import { Link } from 'react-router-dom';
 
 import { IMAGE_UPLOAD_POLICY_DESCRIPTION } from '@/shared/lib/files/imageUploadPolicy';
@@ -45,76 +45,40 @@ export function BoardEditorForm({
   const isEditMode = mode === 'edit';
   const eyebrow = isEditMode ? 'BOARD EDIT' : 'BOARD WRITE';
   const heading = isEditMode ? '게시글 수정' : '게시글 작성';
-  const description = isEditMode
-    ? '제목과 내용을 다듬고, 필요한 경우 이미지도 함께 수정해보세요.'
-    : '반려생활 이야기를 자유롭게 기록해보세요. 임시 저장 후 나중에 이어서 작성할 수도 있어요.';
-  const submitLabel = isEditMode ? '수정 완료' : '게시하기';
+  const description = isEditMode ? '내용을 다듬고 이미지를 정리한 뒤 바로 수정할 수 있어요.' : '';
+  const submitLabel = isEditMode ? '수정하기' : '게시하기';
   const pendingLabel = isEditMode ? '수정 중...' : '게시 중...';
-  const helperMessage = storedDraftSessionKey
-    ? '임시 저장한 작성 본이 이 브라우저에 연결되어 있어요.'
-    : '작성 중인 내용은 임시 저장 후 다시 이어서 편집할 수 있어요.';
-  const statusBadge = storedDraftSessionKey ? '임시 저장본 연결됨' : '새 게시글';
 
   return (
     <form className="space-y-6" onSubmit={onSubmit}>
-      <div>
+      <div className="space-y-3">
         <p className="text-xs font-semibold tracking-[0.24em] text-brand">{eyebrow}</p>
-        <h1 className="mt-2 text-[18px] font-medium text-neutral-950 sm:text-[20px]">{heading}</h1>
-        <p className="mt-3 max-w-2xl text-sm leading-7 text-neutral-600">{description}</p>
+        <h1 className="text-[20px] font-medium text-neutral-950 sm:text-[22px]">{heading}</h1>
+        {description ? <p className="max-w-2xl text-sm leading-7 text-neutral-600">{description}</p> : null}
+        {storedDraftSessionKey ? (
+          <p className="text-sm text-brand">{'임시 저장된 내용을 이어서 작성 중이에요.'}</p>
+        ) : null}
       </div>
 
       <section className="overflow-hidden rounded-[24px] border border-neutral-200 bg-white shadow-sm">
-        <div className="border-b border-neutral-100 px-6 py-5 sm:px-8">
-          <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
-            <div>
-              <h2 className="text-[18px] font-medium text-neutral-950">{'작성 상태'}</h2>
-              <p className="mt-1 text-sm text-neutral-500">{helperMessage}</p>
-            </div>
-            <span className="inline-flex items-center rounded-full bg-brand/8 px-3 py-1 text-xs font-medium text-brand">
-              {statusBadge}
-            </span>
-          </div>
-        </div>
-        <div className="grid gap-4 px-6 py-6 sm:px-8 lg:grid-cols-[minmax(0,1fr)_280px]">
-          <div className="space-y-5">
-            <Field
-              label="게시글 제목"
-              placeholder="예: 오늘 산책하다 만난 귀여운 친구들"
-              required
-              value={form.boardTitle}
-              onChange={onFieldChange('boardTitle')}
-              error={errors.boardTitle}
-            />
-            <TextAreaField
-              label="게시글 내용"
-              placeholder="반려동물과의 오늘 이야기를 자유롭게 적어보세요."
-              required
-              value={form.boardContent}
-              onChange={onFieldChange('boardContent')}
-              error={errors.boardContent}
-            />
-          </div>
-
-          <div className="rounded-[20px] border border-neutral-200 bg-neutral-50/70 px-5 py-5">
-            <h3 className="text-[16px] font-medium text-neutral-950">{'임시 저장'}</h3>
-            <p className="mt-1 text-sm leading-6 text-neutral-500">
-              {'지금 상태를 저장하고 나중에 다시 이어서 쓸 수 있어요.'}
-            </p>
-
-            <button
-              type="button"
-              disabled={isTempSaving}
-              onClick={onTempSave}
-              className="mt-5 inline-flex w-full items-center justify-center rounded-xl border border-neutral-200 bg-white px-4 py-3 text-sm font-medium text-neutral-700 transition-colors hover:border-neutral-300 hover:bg-neutral-100 disabled:cursor-not-allowed disabled:opacity-70"
-            >
-              {isTempSaving ? '임시 저장 중...' : '임시 저장'}
-            </button>
-
-            {tempSaveError ? <p className="mt-3 text-sm text-red-500">{tempSaveError}</p> : null}
-            {!tempSaveError && storedDraftSessionKey ? (
-              <p className="mt-3 text-sm text-brand">{'임시 저장한 게시글을 다시 불러올 수 있어요.'}</p>
-            ) : null}
-          </div>
+        <div className="space-y-6 px-6 py-6 sm:px-8 sm:py-8">
+          <Field
+            label="게시글 제목"
+            placeholder="예: 오늘 산책하다 만난 귀여운 친구들"
+            required
+            value={form.boardTitle}
+            onChange={onFieldChange('boardTitle')}
+            error={errors.boardTitle}
+          />
+
+          <TextAreaField
+            label="게시글 내용"
+            placeholder="반려동물과의 오늘 이야기를 자유롭게 적어보세요."
+            required
+            value={form.boardContent}
+            onChange={onFieldChange('boardContent')}
+            error={errors.boardContent}
+          />
         </div>
       </section>
 
@@ -172,27 +136,39 @@ export function BoardEditorForm({
         </div>
       </section>
 
-      <div className="flex items-start justify-between gap-4">
-        <p className="text-sm text-neutral-500">
-          <span className="font-semibold text-brand">*</span> {'필수 입력 항목입니다.'}
-        </p>
-        {submitError ? <p className="max-w-md text-right text-sm text-red-500">{submitError}</p> : null}
-      </div>
+      <div className="flex flex-col gap-4 rounded-[24px] border border-neutral-200 bg-white px-6 py-5 shadow-sm sm:px-8">
+        <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+          <p className="text-sm text-neutral-500">
+            <span className="font-semibold text-brand">*</span> {'필수 입력 항목입니다.'}
+          </p>
+          {submitError ? <p className="max-w-md text-sm text-red-500 sm:text-right">{submitError}</p> : null}
+        </div>
 
-      <div className="flex flex-col-reverse gap-3 sm:flex-row sm:justify-end">
-        <Link
-          to={cancelTo}
-          className="inline-flex min-w-28 items-center justify-center rounded-xl border border-neutral-200 bg-white px-5 py-3 text-sm font-medium text-neutral-700 transition-colors hover:border-neutral-300 hover:bg-neutral-50"
-        >
-          {'취소'}
-        </Link>
-        <button
-          type="submit"
-          disabled={isPending || uploadingImages}
-          className="inline-flex min-w-32 items-center justify-center rounded-xl bg-brand px-6 py-3 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-70"
-        >
-          {uploadingImages ? '이미지 업로드 중...' : isPending ? pendingLabel : submitLabel}
-        </button>
+        {tempSaveError ? <p className="text-sm text-red-500">{tempSaveError}</p> : null}
+
+        <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
+          <Link
+            to={cancelTo}
+            className="inline-flex min-w-28 items-center justify-center rounded-xl border border-neutral-200 bg-white px-5 py-3 text-sm font-medium text-neutral-700 transition-colors hover:border-neutral-300 hover:bg-neutral-50"
+          >
+            {'취소'}
+          </Link>
+          <button
+            type="button"
+            disabled={isTempSaving}
+            onClick={onTempSave}
+            className="inline-flex min-w-28 items-center justify-center rounded-xl border border-neutral-200 bg-white px-5 py-3 text-sm font-medium text-neutral-700 transition-colors hover:border-neutral-300 hover:bg-neutral-50 disabled:cursor-not-allowed disabled:opacity-70"
+          >
+            {isTempSaving ? '임시 저장 중...' : '임시 저장'}
+          </button>
+          <button
+            type="submit"
+            disabled={isPending || uploadingImages}
+            className="inline-flex min-w-32 items-center justify-center rounded-xl bg-brand px-6 py-3 text-sm font-medium text-brand-foreground transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-70"
+          >
+            {uploadingImages ? '이미지 업로드 중...' : isPending ? pendingLabel : submitLabel}
+          </button>
+        </div>
       </div>
     </form>
   );
@@ -222,7 +198,7 @@ function Field({
         value={value}
         onChange={onChange}
         className={[
-          'mt-2 h-12 w-full rounded-xl border bg-white px-4 text-sm text-neutral-900 outline-none transition-colors placeholder:text-neutral-400',
+          'mt-2 h-14 w-full rounded-2xl border bg-white px-5 text-[16px] text-neutral-900 outline-none transition-colors placeholder:text-neutral-400 sm:text-[17px]',
           error ? 'border-red-300 focus:border-red-400' : 'border-neutral-200 focus:border-brand',
         ].join(' ')}
       />
@@ -253,9 +229,9 @@ function TextAreaField({
         placeholder={placeholder}
         value={value}
         onChange={onChange}
-        rows={12}
+        rows={10}
         className={[
-          'mt-2 w-full resize-none rounded-2xl border bg-white px-4 py-4 text-sm leading-7 text-neutral-900 outline-none transition-colors placeholder:text-neutral-400',
+          'mt-2 w-full resize-none rounded-[24px] border bg-white px-5 py-5 text-[16px] leading-8 text-neutral-900 outline-none transition-colors placeholder:text-neutral-400 sm:text-[17px]',
           error ? 'border-red-300 focus:border-red-400' : 'border-neutral-200 focus:border-brand',
         ].join(' ')}
       />
diff --git a/src/features/community/ui/CommunityFeedCard.tsx b/src/features/community/ui/CommunityFeedCard.tsx
index df95c6f..03e7c9f 100644
--- a/src/features/community/ui/CommunityFeedCard.tsx
+++ b/src/features/community/ui/CommunityFeedCard.tsx
@@ -58,7 +58,7 @@ export function CommunityFeedCard({
 
   if (to) {
     return (
-      <Link to={to} className="block h-full">
+      <Link to={to} className="block h-full cursor-pointer">
         {content}
       </Link>
     );
@@ -151,8 +151,8 @@ function ListFeedItem({
   badge?: string;
 }) {
   return (
-    <article className="group/list border-b border-neutral-200 py-8 first:pt-0 last:border-b-0 last:pb-0">
-      <div className="flex items-start gap-4 sm:gap-5">
+    <article className="py-6 first:pt-0 last:pb-0">
+      <div className="flex items-start gap-5 sm:gap-6">
         <div className="min-w-0 flex-1">
           {badge ? (
             <span className="inline-flex rounded-full bg-brand/8 px-3 py-1 text-[11px] font-semibold tracking-[0.12em] text-brand">
@@ -160,15 +160,15 @@ function ListFeedItem({
             </span>
           ) : null}
 
-          <p className="mt-2 line-clamp-1 text-[16px] font-semibold tracking-[-0.03em] text-neutral-900 transition-colors group-hover/list:text-brand sm:text-[18px]">
+          <p className="mt-2 line-clamp-1 text-[16px] font-semibold tracking-[-0.03em] text-neutral-900 sm:text-[18px]">
             {title}
           </p>
 
           {preview ? (
-            <p className="mt-1 line-clamp-2 text-[15px] leading-[1.6] text-neutral-600 sm:text-[16px]">{preview}</p>
+            <p className="mt-1.5 line-clamp-2 text-[15px] leading-[1.65] text-neutral-600 sm:text-[16px]">{preview}</p>
           ) : null}
 
-          <div className="mt-4 flex flex-wrap items-center gap-x-3 gap-y-2 text-[14px] text-neutral-400 sm:text-[15px]">
+          <div className="mt-5 flex flex-wrap items-center gap-x-3 gap-y-2 text-[14px] text-neutral-400 sm:text-[15px]">
             <span className="inline-flex items-center gap-1.5 text-[#ef3c32]">
               <ThumbsUpIcon className="h-5 w-5" />
               <span className="font-medium">{likes}</span>
@@ -191,11 +191,13 @@ function ListFeedItem({
             <img
               src={imageUrl}
               alt={title}
-              className="h-full w-full object-cover transition-transform duration-300 group-hover/list:scale-[1.03]"
+              className="h-full w-full object-cover transition-transform duration-300 hover:scale-[1.03]"
             />
           </div>
         ) : null}
       </div>
+
+      <div className="mt-6 border-b border-neutral-300/90 last:hidden" />
     </article>
   );
 }
diff --git a/src/features/community/ui/CommunityLayout.tsx b/src/features/community/ui/CommunityLayout.tsx
index be621ab..488e756 100644
--- a/src/features/community/ui/CommunityLayout.tsx
+++ b/src/features/community/ui/CommunityLayout.tsx
@@ -22,9 +22,9 @@ export function CommunityLayout({ eyebrow, title, description, sidebar, content
         </div>
       ) : null}
 
-      <div className={[hasHeader ? 'mt-10' : '', 'grid gap-6', contentGridClass].join(' ').trim()}>
+      <div className={[hasHeader ? 'mt-10' : '', 'grid items-start gap-6', contentGridClass].join(' ').trim()}>
         <div className="min-w-0 space-y-6">{content}</div>
-        {sidebar ? <aside className="space-y-6">{sidebar}</aside> : null}
+        {sidebar ? <aside className="space-y-6 lg:sticky lg:top-8">{sidebar}</aside> : null}
       </div>
     </div>
   );
diff --git a/src/pages/community/BoardCreatePage.tsx b/src/pages/community/BoardCreatePage.tsx
index 255e975..7744ad5 100644
--- a/src/pages/community/BoardCreatePage.tsx
+++ b/src/pages/community/BoardCreatePage.tsx
@@ -51,7 +51,7 @@ export function BoardCreatePage() {
 }
 
 function PageShell({ children }: { children: ReactNode }) {
-  return <div className="mx-auto w-full max-w-6xl px-4 py-8 sm:px-6 lg:px-8">{children}</div>;
+  return <div className="mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8">{children}</div>;
 }
 
 function LoadingState() {
diff --git a/src/pages/community/BoardEditPage.tsx b/src/pages/community/BoardEditPage.tsx
index 699dae8..f8b6f8b 100644
--- a/src/pages/community/BoardEditPage.tsx
+++ b/src/pages/community/BoardEditPage.tsx
@@ -72,7 +72,7 @@ export function BoardEditPage() {
 }
 
 function PageShell({ children }: { children: ReactNode }) {
-  return <div className="mx-auto w-full max-w-6xl px-4 py-8 sm:px-6 lg:px-8">{children}</div>;
+  return <div className="mx-auto w-full max-w-7xl px-4 py-8 sm:px-6 lg:px-8">{children}</div>;
 }
 
 function InvalidBoardState() {
diff --git a/src/pages/community/CommunityPage.tsx b/src/pages/community/CommunityPage.tsx
index ebcd21d..2fa87b5 100644
--- a/src/pages/community/CommunityPage.tsx
+++ b/src/pages/community/CommunityPage.tsx
@@ -143,7 +143,7 @@ function RecentSection({
       ) : boards.length === 0 ? (
         <EmptyRecentState />
       ) : (
-        <div className="space-y-8 rounded-[24px] border border-neutral-200 bg-white px-6 py-6 shadow-sm sm:px-8">
+        <div className="space-y-10 rounded-[24px] border border-neutral-200 bg-white px-6 py-6 shadow-sm sm:px-8">
           <div>
             {boards.map((board) => (
               <CommunityFeedCard
@@ -215,14 +215,17 @@ function EmptyRecentState() {
 
 function ListRowSkeleton() {
   return (
-    <div className="flex gap-4 border-b border-neutral-200 py-8 first:pt-0 last:border-b-0 last:pb-0">
-      <div className="min-w-0 flex-1 space-y-3">
-        <div className="h-6 w-2/3 animate-pulse rounded-md bg-neutral-100" />
-        <div className="h-4 w-full animate-pulse rounded-md bg-neutral-100" />
-        <div className="h-4 w-4/5 animate-pulse rounded-md bg-neutral-100" />
-        <div className="h-4 w-1/2 animate-pulse rounded-md bg-neutral-100" />
+    <div className="py-6 first:pt-0 last:pb-0">
+      <div className="flex gap-4">
+        <div className="min-w-0 flex-1 space-y-3">
+          <div className="h-6 w-2/3 animate-pulse rounded-md bg-neutral-100" />
+          <div className="h-4 w-full animate-pulse rounded-md bg-neutral-100" />
+          <div className="h-4 w-4/5 animate-pulse rounded-md bg-neutral-100" />
+          <div className="h-4 w-1/2 animate-pulse rounded-md bg-neutral-100" />
+        </div>
+        <div className="h-16 w-16 shrink-0 animate-pulse rounded-[10px] bg-neutral-100 sm:h-[72px] sm:w-[72px]" />
       </div>
-      <div className="h-16 w-16 shrink-0 animate-pulse rounded-[10px] bg-neutral-100 sm:h-[72px] sm:w-[72px]" />
+      <div className="mt-6 border-b border-neutral-300/90 last:hidden" />
     </div>
   );
 }

From 887d1f4324452b89ae40103346e237b408083a02 Mon Sep 17 00:00:00 2001
From: sooloin <csb7543@naver.com>
Date: Sat, 13 Jun 2026 00:23:03 +0900
Subject: [PATCH 13/13] =?UTF-8?q?:hammer:=20Refactor:=20=EC=BB=A4=EB=AE=A4?=
 =?UTF-8?q?=EB=8B=88=ED=8B=B0=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20UX=20?=
 =?UTF-8?q?=EB=B0=8F=20=EC=BA=90=EC=8B=9C=20=EC=B2=98=EB=A6=AC=20=EA=B0=9C?=
 =?UTF-8?q?=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 커뮤니티 게시물 목록 간격을 넓히고 인셋 구분선 방식으로 리스트 가독성 개선
- 무한 스크롤 게시글 목록 쿼리 키를 queryKeys 기준으로 통일
- 게시글 삭제 후 목록 캐시 무효화, 수정 후 무한 목록 갱신 처리 추가
- 게시글 수정 시 상세 캐시를 setQueryData로 즉시 동기화
- 상대 시간 포맷에서 잘못된 날짜 입력에 대한 안전 처리 추가
- 게시글 상세 응답의 likeCount, commentCount를 우선 사용하도록 보완

`#53`
---
 src/features/community/model/types.ts            | 2 ++
 src/features/community/model/useBoardList.ts     | 3 ++-
 src/features/community/model/useDeleteBoard.ts   | 3 +++
 src/features/community/model/useUpdateBoard.ts   | 6 +-----
 src/features/community/ui/BoardDetailContent.tsx | 4 ++--
 src/features/community/ui/CommunityFeedCard.tsx  | 9 +++++++--
 src/pages/community/CommunityPage.tsx            | 4 ++--
 src/shared/lib/react-query/queryKey.ts           | 1 +
 8 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/src/features/community/model/types.ts b/src/features/community/model/types.ts
index fc90676..9eeb58b 100644
--- a/src/features/community/model/types.ts
+++ b/src/features/community/model/types.ts
@@ -59,6 +59,8 @@ export interface BoardDetailResponse {
   imageFileUrls: string[];
   profileUrl: string | null;
   nickname: string;
+  likeCount?: number;
+  commentCount?: number;
   viewCount: number;
   boardCreatedAt: string;
   modifiedAt: string;
diff --git a/src/features/community/model/useBoardList.ts b/src/features/community/model/useBoardList.ts
index 781f99d..44b17ff 100644
--- a/src/features/community/model/useBoardList.ts
+++ b/src/features/community/model/useBoardList.ts
@@ -1,12 +1,13 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 
 import { getBoardList } from '../api/boards';
+import { queryKeys } from '@/shared/lib/react-query/queryKey';
 
 const PAGE_SIZE = 12;
 
 export function useBoardList() {
   return useInfiniteQuery({
-    queryKey: ['boards', 'list-infinite'],
+    queryKey: queryKeys.boards.listInfinite(),
     queryFn: ({ pageParam }) => getBoardList({ page: pageParam, size: PAGE_SIZE }),
     initialPageParam: 0,
     getNextPageParam: (lastPage, allPages) => {
diff --git a/src/features/community/model/useDeleteBoard.ts b/src/features/community/model/useDeleteBoard.ts
index d46f0b9..163f793 100644
--- a/src/features/community/model/useDeleteBoard.ts
+++ b/src/features/community/model/useDeleteBoard.ts
@@ -17,6 +17,9 @@ export function useDeleteBoard() {
       void queryClient.removeQueries({
         queryKey: queryKeys.boards.detail(variables.boardId),
       });
+      void queryClient.invalidateQueries({
+        queryKey: ['boards'],
+      });
     },
   });
 }
diff --git a/src/features/community/model/useUpdateBoard.ts b/src/features/community/model/useUpdateBoard.ts
index e6c2a85..a1aa727 100644
--- a/src/features/community/model/useUpdateBoard.ts
+++ b/src/features/community/model/useUpdateBoard.ts
@@ -33,11 +33,7 @@ export function useUpdateBoard() {
       );
 
       void queryClient.invalidateQueries({
-        queryKey: queryKeys.boards.detail(variables.boardId),
-      });
-
-      void queryClient.invalidateQueries({
-        queryKey: ['boards'],
+        queryKey: queryKeys.boards.listInfinite(),
       });
     },
   });
diff --git a/src/features/community/ui/BoardDetailContent.tsx b/src/features/community/ui/BoardDetailContent.tsx
index 26230f3..48a640d 100644
--- a/src/features/community/ui/BoardDetailContent.tsx
+++ b/src/features/community/ui/BoardDetailContent.tsx
@@ -53,8 +53,8 @@ function formatDateTime(value: string) {
 }
 
 export function BoardDetailContent({ board, canManage, currentUserProfileUrl, onDelete }: BoardDetailContentProps) {
-  const likeCount = Math.max(12, Math.round(board.viewCount * 1.7));
-  const commentCount = Math.max(MOCK_COMMENTS.length, Math.round(board.viewCount / 3));
+  const likeCount = board.likeCount ?? 0;
+  const commentCount = board.commentCount ?? MOCK_COMMENTS.length;
   const authorName = board.nickname.trim() || DETAIL_COPY.authorFallback;
   const imageUrls = board.imageFileUrls.filter((imageUrl) => imageUrl.trim().length > 0);
 
diff --git a/src/features/community/ui/CommunityFeedCard.tsx b/src/features/community/ui/CommunityFeedCard.tsx
index 03e7c9f..8ee72ec 100644
--- a/src/features/community/ui/CommunityFeedCard.tsx
+++ b/src/features/community/ui/CommunityFeedCard.tsx
@@ -151,7 +151,7 @@ function ListFeedItem({
   badge?: string;
 }) {
   return (
-    <article className="py-6 first:pt-0 last:pb-0">
+    <article className="py-6 first:pt-0 last:pb-0 last:[&>.item-divider]:hidden">
       <div className="flex items-start gap-5 sm:gap-6">
         <div className="min-w-0 flex-1">
           {badge ? (
@@ -197,7 +197,7 @@ function ListFeedItem({
         ) : null}
       </div>
 
-      <div className="mt-6 border-b border-neutral-300/90 last:hidden" />
+      <div className="item-divider mt-6 border-b border-neutral-300/90" />
     </article>
   );
 }
@@ -224,6 +224,11 @@ function SocialStat({ kind, value }: { kind: 'like' | 'comment' | 'view'; value:
 function formatRelativeDate(iso: string): string {
   const now = Date.now();
   const date = new Date(iso).getTime();
+
+  if (Number.isNaN(date)) {
+    return '';
+  }
+
   const diff = now - date;
   const minutes = Math.floor(diff / 60000);
   const hours = Math.floor(diff / 3600000);
diff --git a/src/pages/community/CommunityPage.tsx b/src/pages/community/CommunityPage.tsx
index 2fa87b5..935ce95 100644
--- a/src/pages/community/CommunityPage.tsx
+++ b/src/pages/community/CommunityPage.tsx
@@ -215,7 +215,7 @@ function EmptyRecentState() {
 
 function ListRowSkeleton() {
   return (
-    <div className="py-6 first:pt-0 last:pb-0">
+    <div className="py-6 first:pt-0 last:pb-0 last:[&>.item-divider]:hidden">
       <div className="flex gap-4">
         <div className="min-w-0 flex-1 space-y-3">
           <div className="h-6 w-2/3 animate-pulse rounded-md bg-neutral-100" />
@@ -225,7 +225,7 @@ function ListRowSkeleton() {
         </div>
         <div className="h-16 w-16 shrink-0 animate-pulse rounded-[10px] bg-neutral-100 sm:h-[72px] sm:w-[72px]" />
       </div>
-      <div className="mt-6 border-b border-neutral-300/90 last:hidden" />
+      <div className="item-divider mt-6 border-b border-neutral-300/90" />
     </div>
   );
 }
diff --git a/src/shared/lib/react-query/queryKey.ts b/src/shared/lib/react-query/queryKey.ts
index b7780a6..bcf1133 100644
--- a/src/shared/lib/react-query/queryKey.ts
+++ b/src/shared/lib/react-query/queryKey.ts
@@ -2,6 +2,7 @@ export const queryKeys = {
   boards: {
     list: (params?: { page?: number; size?: number }) =>
       ['boards', 'list', params?.page ?? 0, params?.size ?? 12] as const,
+    listInfinite: () => ['boards', 'list-infinite'] as const,
     detail: (boardId: number) => ['boards', boardId, 'detail'] as const,
     tempSaved: (sessionKey: string) => ['boards', 'temp-save', sessionKey] as const,
   },