From 48af498e63b751083579ac5a1dd91eb3ea46ff13 Mon Sep 17 00:00:00 2001
From: Monixc <chris13404@gmail.com>
Date: Sat, 9 Aug 2025 23:36:00 +0900
Subject: [PATCH 01/26] =?UTF-8?q?feat:=20Comment=20=EC=9D=B8=ED=84=B0?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=8A=A4=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20?=
 =?UTF-8?q?=ED=95=84=EB=93=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/community.types.ts | 22 ++++------------------
 1 file changed, 4 insertions(+), 18 deletions(-)

diff --git a/src/types/community.types.ts b/src/types/community.types.ts
index 485700d..2638472 100644
--- a/src/types/community.types.ts
+++ b/src/types/community.types.ts
@@ -1,27 +1,13 @@
-export interface Reply {
-  id: number;
-  author: {
-    name: string;
-    avatarUrl: string;
-  };
-  content: string;
-  createdAt: string;
-  likeCount: number;
-  isLiked: boolean;
-}
-
 export interface Comment {
   id: number;
+  postId: number;
   author: {
-    name: string;
-    avatarUrl: string;
+    nickname: string;
+    avatar: string;
   };
   content: string;
+  editable: boolean;
   createdAt: string;
-  likeCount: number;
-  isLiked: boolean;
-  replyCount: number;
-  replies?: Reply[];
 }
 
 export interface Post {

From cd02b914d02b7db3804aa0f24b843f3823bbbf8c Mon Sep 17 00:00:00 2001
From: Monixc <chris13404@gmail.com>
Date: Sun, 10 Aug 2025 05:16:15 +0900
Subject: [PATCH 02/26] =?UTF-8?q?feat:=20NearbyUser=20=EB=B0=8F=20?=
 =?UTF-8?q?=EA=B4=80=EB=A0=A8=20=EC=9D=B8=ED=84=B0=ED=8E=98=EC=9D=B4?=
 =?UTF-8?q?=EC=8A=A4=20=EC=B6=94=EA=B0=80,=20Post=20=EC=9D=B8=ED=84=B0?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=8A=A4=EC=97=90=20content=20=ED=95=84?=
 =?UTF-8?q?=EB=93=9C=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/developer.types.ts | 39 ++++++++++++++++++++++++++++++++++++
 src/types/post.types.ts      |  1 +
 2 files changed, 40 insertions(+)

diff --git a/src/types/developer.types.ts b/src/types/developer.types.ts
index 8b2cdc8..ee4fe0d 100644
--- a/src/types/developer.types.ts
+++ b/src/types/developer.types.ts
@@ -8,3 +8,42 @@ export interface Developer {
   image: string;
   category: "nearby" | "popular" | "favorite";
 }
+
+export interface NearbyUser {
+  location: {
+    lng: number;
+    lat: number;
+  };
+  distance: number;
+  nickname: string;
+  avatar: string;
+  age: number;
+  experience: number;
+  position: {
+    id: number;
+    field: string;
+    role: string;
+  };
+  techStack: Array<{
+    id: number;
+    value: string;
+  }>;
+  interests: Array<{
+    id: number;
+    value: string;
+  }>;
+  nSubscribers: number;
+}
+
+export interface NearbyUsersResponse {
+  results: NearbyUser[];
+}
+
+export interface NearbyUsersParams {
+  radius: number;
+  age?: string;
+  experience?: string;
+  positionIds?: number[];
+  techIds?: number[];
+  interestIds?: number[];
+}
diff --git a/src/types/post.types.ts b/src/types/post.types.ts
index efad29d..5b2f11d 100644
--- a/src/types/post.types.ts
+++ b/src/types/post.types.ts
@@ -10,6 +10,7 @@ export interface Post {
     nickname: string;
   };
   title: string;
+  content: string;
   nComments: number;
   nLikes: number;
   createdAt: string;

From a1cf54be3247ecc352d1e6a35af26dd8e2b3f18b Mon Sep 17 00:00:00 2001
From: Monixc <chris13404@gmail.com>
Date: Sun, 10 Aug 2025 05:22:37 +0900
Subject: [PATCH 03/26] =?UTF-8?q?feat:=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20=EC=A1=B0=ED=9A=8C=20=EB=B0=8F=20=EB=8C=93?=
 =?UTF-8?q?=EA=B8=80=20=EA=B4=80=EB=A0=A8=20API=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 게시글 상세 조회 기능(fetchPostDetail) 추가
- 댓글 조회(fetchComments) 및 댓글 생성(createComment) 기능 추가
- 게시글 검색(searchPosts) 기능 추가
---
 src/lib/api/posts.ts | 73 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 73 insertions(+)

diff --git a/src/lib/api/posts.ts b/src/lib/api/posts.ts
index c772302..5685f46 100644
--- a/src/lib/api/posts.ts
+++ b/src/lib/api/posts.ts
@@ -1,4 +1,5 @@
 import type { Post } from "@/types/post.types";
+import type { Comment } from "@/types/community.types";
 import type { UICategory } from "@/constants/board";
 import { createApiUrl, createAuthHeaders } from "./config";
 
@@ -7,6 +8,7 @@ export interface Board {
   value: string;
 }
 
+//게시판 카테고리 조회
 export const fetchBoards = async (): Promise<Board[]> => {
   const response = await fetch(`${createApiUrl("/boards")}`, {
     headers: createAuthHeaders(),
@@ -20,6 +22,7 @@ export const fetchBoards = async (): Promise<Board[]> => {
   return data.results || [];
 };
 
+//게시글 목록 조회회
 export const fetchPosts = async (category: UICategory): Promise<Post[]> => {
   const url =
     category === "all"
@@ -38,6 +41,7 @@ export const fetchPosts = async (category: UICategory): Promise<Post[]> => {
   return data.results || [];
 };
 
+//게시글 생성성
 export const createPost = async (data: {
   title: string;
   content: string;
@@ -60,3 +64,72 @@ export const createPost = async (data: {
     throw new Error("게시글 작성에 실패했습니다.");
   }
 };
+
+//게시글 상세 조회
+export const fetchPostDetail = async (postId: string): Promise<Post> => {
+  const response = await fetch(`${createApiUrl(`/posts/details/${postId}`)}`, {
+    headers: createAuthHeaders(),
+  });
+
+  if (!response.ok) {
+    throw new Error("게시글을 불러오는 데 실패했습니다.");
+  }
+
+  const data = await response.json();
+  console.log("🔍 fetchPostDetail API Response:", data);
+
+  // API는 게시글 데이터를 직접 반환
+  return data;
+};
+
+// 댓글 조회
+export const fetchComments = async (postId: string): Promise<Comment[]> => {
+  const response = await fetch(`${createApiUrl(`/posts/${postId}`)}`, {
+    headers: createAuthHeaders(),
+  });
+
+  if (!response.ok) {
+    throw new Error("댓글 목록을 불러오는 데 실패했습니다.");
+  }
+
+  const data = await response.json();
+  return data.results || [];
+};
+
+// 댓글 생성
+export const createComment = async (
+  postId: string,
+  content: string
+): Promise<{ nComments: number }> => {
+  const response = await fetch(`${createApiUrl(`/posts/${postId}`)}`, {
+    method: "POST",
+    headers: createAuthHeaders(),
+    body: JSON.stringify({
+      content,
+    }),
+  });
+
+  if (!response.ok) {
+    throw new Error("댓글 작성에 실패했습니다.");
+  }
+
+  const data = await response.json();
+  return data;
+};
+
+// 게시글 검색
+export const searchPosts = async (query: string): Promise<Post[]> => {
+  const response = await fetch(
+    `${createApiUrl(`/posts/search?query=${encodeURIComponent(query)}`)}`,
+    {
+      headers: createAuthHeaders(),
+    }
+  );
+
+  if (!response.ok) {
+    throw new Error("게시글 검색에 실패했습니다.");
+  }
+
+  const data = await response.json();
+  return data.results || [];
+};

From 36d0e3fe5251f8a6809c78a7fca488d944e0d766 Mon Sep 17 00:00:00 2001
From: Monixc <chris13404@gmail.com>
Date: Sun, 10 Aug 2025 05:31:11 +0900
Subject: [PATCH 04/26] =?UTF-8?q?feat:=20=EB=8C=93=EA=B8=80=20=EC=83=9D?=
 =?UTF-8?q?=EC=84=B1=20API=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 댓글 생성(createComment) 기능 삭제
- 관련된 코드 정리
---
 src/lib/api/posts.ts | 21 ---------------------
 1 file changed, 21 deletions(-)

diff --git a/src/lib/api/posts.ts b/src/lib/api/posts.ts
index 5685f46..996e002 100644
--- a/src/lib/api/posts.ts
+++ b/src/lib/api/posts.ts
@@ -96,27 +96,6 @@ export const fetchComments = async (postId: string): Promise<Comment[]> => {
   return data.results || [];
 };
 
-// 댓글 생성
-export const createComment = async (
-  postId: string,
-  content: string
-): Promise<{ nComments: number }> => {
-  const response = await fetch(`${createApiUrl(`/posts/${postId}`)}`, {
-    method: "POST",
-    headers: createAuthHeaders(),
-    body: JSON.stringify({
-      content,
-    }),
-  });
-
-  if (!response.ok) {
-    throw new Error("댓글 작성에 실패했습니다.");
-  }
-
-  const data = await response.json();
-  return data;
-};
-
 // 게시글 검색
 export const searchPosts = async (query: string): Promise<Post[]> => {
   const response = await fetch(

From cc881f517a965eafac0086706e60fb9870f61c6d Mon Sep 17 00:00:00 2001
From: Monixc <chris13404@gmail.com>
Date: Sun, 10 Aug 2025 05:36:45 +0900
Subject: [PATCH 05/26] =?UTF-8?q?feat:=20usePost=20=ED=9B=85=20=EC=82=AD?=
 =?UTF-8?q?=EC=A0=9C=20=EB=B0=8F=20=EA=B4=80=EB=A0=A8=20API=20=ED=86=B5?=
 =?UTF-8?q?=ED=95=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- usePost 훅 삭제
- 게시글 상세 조회 및 댓글 조회 기능을 usePosts 훅으로 통합
- 관련된 API 호출(fetchPostDetail, fetchComments) 추가 및 정리
---
 src/hooks/queries/usePosts.ts | 52 +++++++++++++++++--
 src/hooks/usePost.ts          | 96 -----------------------------------
 src/lib/api/posts.ts          |  3 --
 3 files changed, 49 insertions(+), 102 deletions(-)
 delete mode 100644 src/hooks/usePost.ts

diff --git a/src/hooks/queries/usePosts.ts b/src/hooks/queries/usePosts.ts
index c309640..d97b29d 100644
--- a/src/hooks/queries/usePosts.ts
+++ b/src/hooks/queries/usePosts.ts
@@ -1,13 +1,22 @@
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import { fetchPosts, createPost, fetchBoards } from "@/lib/api/posts";
+import {
+  fetchPosts,
+  createPost,
+  fetchBoards,
+  fetchPostDetail,
+  searchPosts,
+  fetchComments,
+} from "@/lib/api/posts";
 import type { UICategory } from "@/constants/board";
+import type { Post } from "@/types/post.types";
+import type { Comment } from "@/types/community.types";
 
 export const useBoards = () => {
   return useQuery({
     queryKey: ["boards"],
     queryFn: fetchBoards,
-    staleTime: 10 * 60 * 1000, // 10분
-    gcTime: 30 * 60 * 1000, // 30분
+    staleTime: 10 * 60 * 1000,
+    gcTime: 30 * 60 * 1000,
   });
 };
 
@@ -20,6 +29,33 @@ export const usePosts = (category: UICategory) => {
   });
 };
 
+export const usePostDetail = (postId: string) => {
+  return useQuery<Post>({
+    queryKey: ["post", postId],
+    queryFn: async () => {
+      const result = await fetchPostDetail(postId);
+      if (!result) {
+        throw new Error("게시글 데이터가 없습니다.");
+      }
+      return result;
+    },
+    enabled: !!postId,
+    staleTime: 5 * 60 * 1000,
+    gcTime: 10 * 60 * 1000,
+    retry: 1,
+  });
+};
+
+export const useSearchPosts = (query: string) => {
+  return useQuery({
+    queryKey: ["search", query],
+    queryFn: () => searchPosts(query),
+    enabled: !!query && query.trim().length > 0,
+    staleTime: 2 * 60 * 1000,
+    gcTime: 5 * 60 * 1000,
+  });
+};
+
 export const useCreatePost = () => {
   const queryClient = useQueryClient();
 
@@ -30,3 +66,13 @@ export const useCreatePost = () => {
     },
   });
 };
+
+export const useComments = (postId: string) => {
+  return useQuery<Comment[]>({
+    queryKey: ["comments", postId],
+    queryFn: () => fetchComments(postId),
+    enabled: !!postId,
+    staleTime: 2 * 60 * 1000,
+    gcTime: 5 * 60 * 1000,
+  });
+};
diff --git a/src/hooks/usePost.ts b/src/hooks/usePost.ts
deleted file mode 100644
index 6b428e4..0000000
--- a/src/hooks/usePost.ts
+++ /dev/null
@@ -1,96 +0,0 @@
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
-import type { Post, Comment } from "@/types/community.types";
-
-const fetchPost = async (postId: string): Promise<Post> => {
-  const res = await fetch(`/api/posts/${postId}`);
-  if (!res.ok) throw new Error("게시글을 불러오는데 실패했습니다.");
-  return res.json();
-};
-
-const fetchComments = async (postId: string): Promise<Comment[]> => {
-  const res = await fetch(`/api/posts/${postId}/comments`);
-  if (!res.ok) throw new Error("댓글을 불러오는데 실패했습니다.");
-  return res.json();
-};
-
-export function usePost(postId: string) {
-  return useQuery({
-    queryKey: ["post", postId],
-    queryFn: () => fetchPost(postId),
-    enabled: !!postId,
-  });
-}
-
-const togglePostLike = async (postId: string) => {
-  const res = await fetch(`/api/posts/${postId}/like`, { method: "PUT" });
-  if (!res.ok) throw new Error("좋아요 클릭에 실패했습니다.");
-  return res.json();
-};
-
-export function useTogglePostLike() {
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: togglePostLike,
-    onSuccess: (_data, postId) => {
-      queryClient.invalidateQueries({ queryKey: ["post", postId] });
-    },
-  });
-}
-
-const addComment = async ({
-  postId,
-  content,
-}: {
-  postId: string;
-  content: string;
-}) => {
-  const res = await fetch(`/api/posts/${postId}/comments`, {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ content }),
-  });
-  if (!res.ok) throw new Error("댓글 작성에 실패했습니다.");
-  return res.json();
-};
-
-export function useAddComment() {
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: addComment,
-    onSuccess: (_data, variables) => {
-      queryClient.invalidateQueries({ queryKey: ["post", variables.postId] });
-    },
-  });
-}
-
-const toggleCommentLike = async (commentId: number) => {
-  const res = await fetch(`/api/comments/${commentId}/like`, { method: "PUT" });
-  if (!res.ok) throw new Error("댓글 좋아요 클릭에 실패했습니다.");
-  return res.json();
-};
-
-export function useToggleCommentLike() {
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: toggleCommentLike,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["post"] });
-    },
-  });
-}
-
-const toggleReplyLike = async (replyId: number) => {
-  const res = await fetch(`/api/replies/${replyId}/like`, { method: "PUT" });
-  if (!res.ok) throw new Error("답글 좋아요 클릭에 실패했습니다.");
-  return res.json();
-};
-
-export function useToggleReplyLike() {
-  const queryClient = useQueryClient();
-  return useMutation({
-    mutationFn: toggleReplyLike,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ["post"] });
-    },
-  });
-}
diff --git a/src/lib/api/posts.ts b/src/lib/api/posts.ts
index 996e002..cdb774d 100644
--- a/src/lib/api/posts.ts
+++ b/src/lib/api/posts.ts
@@ -76,9 +76,6 @@ export const fetchPostDetail = async (postId: string): Promise<Post> => {
   }
 
   const data = await response.json();
-  console.log("🔍 fetchPostDetail API Response:", data);
-
-  // API는 게시글 데이터를 직접 반환
   return data;
 };
 

From 894b1927bb461445e8ddd38b898256525001766d Mon Sep 17 00:00:00 2001
From: Monixc <chris13404@gmail.com>
Date: Sun, 10 Aug 2025 05:50:23 +0900
Subject: [PATCH 06/26] =?UTF-8?q?feat:=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20?=
 =?UTF-8?q?=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B0=8F=20?=
 =?UTF-8?q?=EB=82=A0=EC=A7=9C=20=ED=98=95=EC=8B=9D=ED=99=94=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- PostDetailPage 컴포넌트를 새로 생성하고, 게시글 상세 조회 기능 구현
- 날짜 형식화 관련 함수(formatRelativeTime, formatAbsoluteTime 등) 추가
- 기존 PostDetailPage.tsx 파일 삭제 및 관련 코드 정리
- 댓글 및 게시글 목록에서 날짜 형식화 적용
---
 src/lib/date.ts                               |  50 ++++++++
 src/main.tsx                                  |   2 +-
 src/pages/community/PostDetailPage.tsx        |  86 -------------
 .../community/__components/CommentItem.tsx    |  66 ++--------
 src/pages/community/index.tsx                 | 119 ++++++++++++++++++
 src/pages/home/_components/ListItem.tsx       |  11 +-
 6 files changed, 183 insertions(+), 151 deletions(-)
 create mode 100644 src/lib/date.ts
 delete mode 100644 src/pages/community/PostDetailPage.tsx
 create mode 100644 src/pages/community/index.tsx

diff --git a/src/lib/date.ts b/src/lib/date.ts
new file mode 100644
index 0000000..cb844ce
--- /dev/null
+++ b/src/lib/date.ts
@@ -0,0 +1,50 @@
+export const formatRelativeTime = (dateString: string): string => {
+  const now = new Date();
+  const date = new Date(dateString);
+  const diffInSeconds = Math.floor((now.getTime() - date.getTime()) / 1000);
+
+  if (diffInSeconds < 60) {
+    return `${diffInSeconds}초 전`;
+  }
+
+  const diffInMinutes = Math.floor(diffInSeconds / 60);
+  if (diffInMinutes < 60) {
+    return `${diffInMinutes}분 전`;
+  }
+
+  const diffInHours = Math.floor(diffInMinutes / 60);
+  if (diffInHours < 24) {
+    return `${diffInHours}시간 전`;
+  }
+
+  return formatAbsoluteTime(dateString);
+};
+
+export const formatAbsoluteTime = (dateString: string): string => {
+  const date = new Date(dateString);
+  return date.toLocaleDateString("ko-KR", {
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+};
+
+export const formatPostDetailDate = (dateString: string): string => {
+  const date = new Date(dateString);
+  return date.toLocaleDateString("ko-KR", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+};
+
+export const formatCommentDate = (dateString: string): string => {
+  return formatRelativeTime(dateString);
+};
+
+export const formatPostListDate = (dateString: string): string => {
+  return formatRelativeTime(dateString);
+};
diff --git a/src/main.tsx b/src/main.tsx
index d13da4a..1b43f71 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -10,7 +10,7 @@ import { MyPage } from "./pages/my/index.tsx";
 import { DeveloperPage } from "./pages/developer/index.tsx";
 import { ExplorePage } from "./pages/explore/index.tsx";
 import { OnboardingPage } from "./pages/onboarding/index.tsx";
-import { PostDetailPage } from "./pages/community/PostDetailPage.tsx";
+import { PostDetailPage } from "./pages/community/index.tsx";
 import AuthCallbackPage from "./pages/auth/AuthCallbackPage.tsx";
 import ChatPage from "./pages/chat/index.tsx";
 import SearchPage from "./pages/search/index.tsx";
diff --git a/src/pages/community/PostDetailPage.tsx b/src/pages/community/PostDetailPage.tsx
deleted file mode 100644
index d940d59..0000000
--- a/src/pages/community/PostDetailPage.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { useParams, useNavigate } from "react-router-dom";
-import { PostContent } from "./__components/PostContent";
-import { CommentSection } from "./__components/CommentSection";
-import { CommentForm } from "./__components/CommentForm";
-import Header from "@/components/layout/Header";
-import { ArrowLeft, Bookmark } from "lucide-react";
-import {
-  usePost,
-  useTogglePostLike,
-  useAddComment,
-  useToggleCommentLike,
-  useToggleReplyLike,
-} from "@/hooks/usePost";
-
-export function PostDetailPage() {
-  const { postId } = useParams<{ postId: string }>();
-  const navigate = useNavigate();
-
-  if (!postId) {
-    return <div className="p-4 text-white">유효하지 않은 게시글 ID입니다.</div>;
-  }
-
-  const { data: post, isLoading, isError, error } = usePost(postId);
-  const { mutate: toggleLike, isPending: isLikePending } = useTogglePostLike();
-  const { mutate: addNewComment, isPending: isAddingComment } = useAddComment();
-  const { mutate: toggleCommentLike } = useToggleCommentLike();
-  const { mutate: toggleReplyLike } = useToggleReplyLike();
-
-  if (isLoading) {
-    return <div className="p-4 text-white">로딩 중...</div>;
-  }
-  if (isError) {
-    return <div className="p-4 text-white">에러 발생: {error.message}</div>;
-  }
-  if (!post) {
-    return <div className="p-4 text-white">게시글이 없습니다.</div>;
-  }
-
-  const handleToggleCommentLike = (commentId: number) => {
-    toggleCommentLike(commentId);
-  };
-
-  const handleToggleReplyLike = (replyId: number) => {
-    toggleReplyLike(replyId);
-  };
-
-  const handleBackClick = () => {
-    navigate(-1);
-  };
-
-  const handleBookmarkClick = () => {
-    console.log("북마크 클릭");
-  };
-
-  return (
-    <div className="dark text-foreground h-full flex flex-col ">
-      <Header
-        title="COMEET"
-        leftIcon={<ArrowLeft />}
-        rightIcon={<Bookmark />}
-        onLeftClick={handleBackClick}
-        onRightClick={handleBookmarkClick}
-      />
-      <div className="flex-1 overflow-y-auto scrollbar-hide">
-        <div className="flex flex-col h-full">
-          <div className="flex-grow overflow-y-auto scrollbar-hide">
-            <PostContent
-              post={post}
-              onLikeClick={() => toggleLike(postId)}
-              isLikePending={isLikePending}
-            />
-            <CommentSection
-              comments={post.comments}
-              onToggleCommentLike={handleToggleCommentLike}
-              onToggleReplyLike={handleToggleReplyLike}
-            />
-          </div>
-          <CommentForm
-            onSubmit={(content: string) => addNewComment({ postId, content })}
-            isPending={isAddingComment}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/pages/community/__components/CommentItem.tsx b/src/pages/community/__components/CommentItem.tsx
index 238a431..636d104 100644
--- a/src/pages/community/__components/CommentItem.tsx
+++ b/src/pages/community/__components/CommentItem.tsx
@@ -1,68 +1,24 @@
 import type { Comment } from "@/types/community.types";
-import { Button } from "@/components/ui/button";
-import { Heart, MessageCircle } from "lucide-react";
-import { ReplyItem } from "./ReplyItem";
+import { formatCommentDate } from "@/lib/date";
 
 interface CommentItemProps {
   comment: Comment;
-  onToggleLike: (commentId: number) => void;
-  onToggleReplyLike: (replyId: number) => void;
 }
 
-export function CommentItem({
-  comment,
-  onToggleLike,
-  onToggleReplyLike,
-}: CommentItemProps) {
+export function CommentItem({ comment }: CommentItemProps) {
   return (
-    <div>
-      <div className="p-4 -mx-4 border-b border-brand-surface">
-        <p className="py-2 text-sm leading-relaxed text-white">
-          {comment.content}
-        </p>
+    <div className="p-4 -mx-4 border-b border-brand-surface">
+      <p className="py-2 text-sm leading-relaxed text-white">
+        {comment.content}
+      </p>
 
-        <div className="flex items-center justify-between text-xs text-brand-text">
-          <div className="flex items-center gap-x-2">
-            <span className="font-medium">{comment.author.name}</span>
-            <span>•</span>
-            <span>{comment.createdAt}</span>
-          </div>
-
-          <div className="flex items-center ">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="p-0 h-auto hover:bg-transparent hover:text-brand-text flex items-center"
-              onClick={() => onToggleLike(comment.id)}>
-              <Heart
-                className="h-4 w-4"
-                fill={comment.isLiked ? "#FF4A4A" : "none"}
-                stroke={comment.isLiked ? "#FF4A4A" : "currentColor"}
-              />
-              <span className="-mt-0.5">{comment.likeCount}</span>
-            </Button>
-            <Button
-              variant="ghost"
-              size="sm"
-              className="p-0 h-auto hover:bg-transparent hover:text-brand-text flex items-center">
-              <MessageCircle className="h-4 w-4" />
-              <span className="-mt-0.5">{comment.replyCount}</span>
-            </Button>
-          </div>
+      <div className="flex items-center justify-between text-xs text-brand-text">
+        <div className="flex items-center gap-x-2">
+          <span className="font-medium">{comment.author.nickname}</span>
+          <span>•</span>
+          <span>{formatCommentDate(comment.createdAt)}</span>
         </div>
       </div>
-
-      {comment.replies && comment.replies.length > 0 && (
-        <div className=" border-brand-surface ml-4">
-          {comment.replies.map((reply) => (
-            <ReplyItem
-              key={reply.id}
-              reply={reply}
-              onToggleLike={onToggleReplyLike}
-            />
-          ))}
-        </div>
-      )}
     </div>
   );
 }
diff --git a/src/pages/community/index.tsx b/src/pages/community/index.tsx
new file mode 100644
index 0000000..e43a2b1
--- /dev/null
+++ b/src/pages/community/index.tsx
@@ -0,0 +1,119 @@
+import { useParams, useNavigate } from "react-router-dom";
+import Header from "@/components/layout/Header";
+import { ArrowLeft, Bookmark, Heart, MessageCircle } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import { usePostDetail, useComments } from "@/hooks/queries/usePosts";
+import { CommentForm } from "./__components/CommentForm";
+import { CommentSection } from "./__components/CommentSection";
+import { formatPostDetailDate } from "@/lib/date";
+
+export function PostDetailPage() {
+  const { postId } = useParams<{ postId: string }>();
+  const navigate = useNavigate();
+
+  if (!postId) {
+    return <div className="p-4 text-white">유효하지 않은 게시글 ID입니다.</div>;
+  }
+
+  const { data: post, isLoading, isError, error } = usePostDetail(postId);
+  const {
+    data: comments = [],
+    isLoading: isCommentsLoading,
+    isError: isCommentsError,
+  } = useComments(postId);
+
+  if (isLoading) {
+    return <div className="p-4 text-white">로딩 중...</div>;
+  }
+  if (isError) {
+    return <div className="p-4 text-white">에러 발생: {error?.message}</div>;
+  }
+  if (!post) {
+    return <div className="p-4 text-white">게시글이 없습니다.</div>;
+  }
+
+  const handleBackClick = () => {
+    navigate(-1);
+  };
+
+  const handleBookmarkClick = () => {
+    console.log("북마크 클릭");
+  };
+
+  return (
+    <div className="dark text-foreground h-full flex flex-col">
+      <Header
+        title="COMEET"
+        leftIcon={<ArrowLeft />}
+        rightIcon={<Bookmark />}
+        onLeftClick={handleBackClick}
+        onRightClick={handleBookmarkClick}
+      />
+      <div className="flex-1 overflow-y-auto scrollbar-hide pt-16">
+        <main className="w-full flex flex-col text-white">
+          <div className="p-4 flex flex-col gap-y-4">
+            <Badge
+              variant="outline"
+              className="w-fit border-brand-primary text-brand-primary">
+              {post.board.value}
+            </Badge>
+            <h2 className="text-xl font-bold">{post.title}</h2>
+            <div className="flex items-center gap-x-2 text-xs text-brand-text">
+              <span>{post.author.nickname}</span>
+              <span>•</span>
+              <span>{formatPostDetailDate(post.createdAt)}</span>
+            </div>
+          </div>
+
+          <Separator className="w-full bg-brand-surface" />
+
+          <div className="p-4 flex flex-col">
+            <div className="min-h-[200px] text-sm leading-relaxed mb-4 whitespace-pre-wrap break-words">
+              {post.content ? (
+                <>{post.content}</>
+              ) : (
+                <p className="text-brand-text">
+                  게시글 내용은 현재 API에서 제공되지 않습니다.
+                </p>
+              )}
+            </div>
+
+            <div className="flex items-center gap-x-6 text-brand-text">
+              <div className="flex items-center gap-x-2">
+                <Heart className="size-4" />
+                <span>{post.nLikes}</span>
+              </div>
+              <div className="flex items-center gap-x-2">
+                <MessageCircle className="size-4" />
+                <span>{post.nComments}</span>
+              </div>
+            </div>
+          </div>
+          <Separator className="bg-brand-surface !h-1" />
+
+          {isCommentsLoading ? (
+            <div className="p-4 text-center text-brand-text">
+              댓글을 불러오는 중...
+            </div>
+          ) : isCommentsError ? (
+            <div className="p-4 text-center text-red-500">
+              댓글을 불러오는 데 실패했습니다.
+            </div>
+          ) : (
+            <CommentSection
+              comments={comments}
+              onToggleCommentLike={() => {}}
+              onToggleReplyLike={() => {}}
+            />
+          )}
+          <div className="h-20"></div>
+        </main>
+      </div>
+
+      <div className="border-t border-brand-surface bg-brand-background">
+        <CommentForm onSubmit={() => {}} isPending={false} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/home/_components/ListItem.tsx b/src/pages/home/_components/ListItem.tsx
index 14924e2..02a54d5 100644
--- a/src/pages/home/_components/ListItem.tsx
+++ b/src/pages/home/_components/ListItem.tsx
@@ -3,6 +3,7 @@ import { Badge } from "@/components/ui/badge";
 import { Heart, MessageCircle } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import type { Post } from "@/types/post.types";
+import { formatPostListDate } from "@/lib/date";
 
 interface ListItemProps {
   post: Post;
@@ -15,14 +16,6 @@ export const ListItem = ({ post }: ListItemProps) => {
     navigate(`/community/${post.id}`);
   };
 
-  const formatDate = (dateString: string) => {
-    const date = new Date(dateString);
-    return date.toLocaleDateString("ko-KR", {
-      month: "short",
-      day: "numeric",
-    });
-  };
-
   return (
     <Card
       className="bg-brand-surface border-none text-white hover:bg-brand-surface/50 transition-colors cursor-pointer"
@@ -35,7 +28,7 @@ export const ListItem = ({ post }: ListItemProps) => {
       </CardHeader>
       <CardContent className="flex justify-between items-center text-xs text-brand-text">
         <span>
-          {post.author.nickname} · {formatDate(post.createdAt)}
+          {post.author.nickname} · {formatPostListDate(post.createdAt)}
         </span>
         <div className="flex items-center space-x-4">
           <div className="flex items-center space-x-1">

From 27f9854b27da1df439186df9a6fb24871d7c510c Mon Sep 17 00:00:00 2001
From: Monixc <chris13404@gmail.com>
Date: Sun, 10 Aug 2025 05:51:18 +0900
Subject: [PATCH 07/26] =?UTF-8?q?feat:=20useDebounce=20=ED=9B=85=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

- useDebounce 훅을 새로 생성하여 주어진 값의 디바운스 처리 기능 구현
- 지연 시간(delay) 설정에 따라 값이 변경될 때마다 디바운스된 값을 반환
---
 src/hooks/useDebounce.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 src/hooks/useDebounce.ts

diff --git a/src/hooks/useDebounce.ts b/src/hooks/useDebounce.ts
new file mode 100644
index 0000000..fd87c63
--- /dev/null
+++ b/src/hooks/useDebounce.ts
@@ -0,0 +1,16 @@
+import { useState, useEffect } from "react";
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

From 436e33d2274a656aa1850ef3ad16d5e046f27f0c Mon Sep 17 00:00:00 2001
From: Monixc <chris13404@gmail.com>
Date: Sun, 10 Aug 2025 06:13:44 +0900
Subject: [PATCH 08/26] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EB=B0=8F=20=EC=B5=9C=EA=B7=BC=20=EA=B2=80=EC=83=89?=
 =?UTF-8?q?=EC=96=B4=20=EA=B4=80=EB=A6=AC=20=ED=9B=85=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- useSearch 훅을 새로 생성하여 검색어 입력 및 최근 검색어 관리 기능 구현
- 검색 결과를 표시하는 SearchResults 컴포넌트 추가
- 검색어 입력 시 디바운스 처리 및 유효성 검사 기능 추가
- 최근 검색어 목록을 로컬 스토리지에 저장하고 불러오는 기능 구현
- 검색 페이지에서 검색 결과와 최근 검색어 목록을 조건에 따라 표시하도록 수정
---
 src/hooks/useSearch.ts                        |  82 ++++++++++++++
 src/lib/search.ts                             |  46 ++++++++
 .../search/_components/SearchResults.tsx      | 102 ++++++++++++++++++
 src/pages/search/index.tsx                    |  64 ++++++-----
 4 files changed, 269 insertions(+), 25 deletions(-)
 create mode 100644 src/hooks/useSearch.ts
 create mode 100644 src/lib/search.ts
 create mode 100644 src/pages/search/_components/SearchResults.tsx

diff --git a/src/hooks/useSearch.ts b/src/hooks/useSearch.ts
new file mode 100644
index 0000000..a888c5c
--- /dev/null
+++ b/src/hooks/useSearch.ts
@@ -0,0 +1,82 @@
+import { useState, useEffect } from "react";
+import { useSearchPosts } from "@/hooks/queries/usePosts";
+import { useDebounce } from "@/hooks/useDebounce";
+import {
+  loadRecentSearches,
+  addRecentSearch,
+  removeRecentSearch as removeSearch,
+  isValidSearchQuery,
+} from "@/lib/search";
+
+export const useSearch = () => {
+  const [query, setQuery] = useState("");
+  const [recentSearches, setRecentSearches] = useState<string[]>([]);
+  const [manualSearch, setManualSearch] = useState("");
+
+  const debouncedQuery = useDebounce(query, 1000);
+  const searchQuery = manualSearch || debouncedQuery;
+
+  const {
+    data: searchResults = [],
+    isLoading,
+    isError,
+    error,
+  } = useSearchPosts(searchQuery);
+
+  useEffect(() => {
+    setRecentSearches(loadRecentSearches());
+  }, []);
+
+  const saveRecentSearch = (searchTerm: string) => {
+    setRecentSearches((prev) => addRecentSearch(searchTerm, prev));
+  };
+
+  const handleRemoveRecentSearch = (index: number) => {
+    setRecentSearches((prev) => removeSearch(index, prev));
+  };
+
+  useEffect(() => {
+    if (isValidSearchQuery(debouncedQuery)) {
+      saveRecentSearch(debouncedQuery.trim());
+      if (manualSearch) {
+        setManualSearch("");
+      }
+    }
+  }, [debouncedQuery, manualSearch]);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (query.trim()) {
+      setManualSearch(query.trim());
+      saveRecentSearch(query.trim());
+    }
+  };
+
+  const handleRecentSearchClick = (search: string) => {
+    setQuery(search);
+    setManualSearch(search);
+    saveRecentSearch(search);
+  };
+
+  const hasSearchResults = searchQuery.trim().length > 0;
+  const hasQueryInput = query.trim().length > 0;
+  const isDebouncing =
+    hasQueryInput && query.trim() !== debouncedQuery.trim() && !manualSearch;
+
+  return {
+    query,
+    recentSearches,
+    searchResults,
+    isLoading,
+    isError,
+    error,
+    hasSearchResults,
+    hasQueryInput,
+    isDebouncing,
+    searchQuery: hasSearchResults ? searchQuery : query,
+    setQuery,
+    handleSubmit,
+    handleRecentSearchClick,
+    removeRecentSearch: handleRemoveRecentSearch,
+  };
+};
diff --git a/src/lib/search.ts b/src/lib/search.ts
new file mode 100644
index 0000000..61d8ed1
--- /dev/null
+++ b/src/lib/search.ts
@@ -0,0 +1,46 @@
+const RECENT_SEARCHES_KEY = "recent_searches";
+
+export const loadRecentSearches = (): string[] => {
+  try {
+    const saved = localStorage.getItem(RECENT_SEARCHES_KEY);
+    return saved ? JSON.parse(saved) : [];
+  } catch (error) {
+    console.error("최근 검색어 로드 실패:", error);
+    return [];
+  }
+};
+
+export const saveRecentSearches = (searches: string[]): void => {
+  try {
+    localStorage.setItem(RECENT_SEARCHES_KEY, JSON.stringify(searches));
+  } catch (error) {
+    console.error("최근 검색어 저장 실패:", error);
+  }
+};
+
+export const addRecentSearch = (
+  searchTerm: string,
+  currentSearches: string[]
+): string[] => {
+  const trimmedSearch = searchTerm.trim();
+  if (!trimmedSearch) return currentSearches;
+
+  const filtered = currentSearches.filter((item) => item !== trimmedSearch);
+  const updated = [trimmedSearch, ...filtered].slice(0, 10);
+
+  saveRecentSearches(updated);
+  return updated;
+};
+
+export const removeRecentSearch = (
+  index: number,
+  currentSearches: string[]
+): string[] => {
+  const updated = currentSearches.filter((_, i) => i !== index);
+  saveRecentSearches(updated);
+  return updated;
+};
+
+export const isValidSearchQuery = (query: string): boolean => {
+  return query.trim().length >= 2;
+};
diff --git a/src/pages/search/_components/SearchResults.tsx b/src/pages/search/_components/SearchResults.tsx
new file mode 100644
index 0000000..33606e5
--- /dev/null
+++ b/src/pages/search/_components/SearchResults.tsx
@@ -0,0 +1,102 @@
+import { useNavigate } from "react-router-dom";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Heart, MessageCircle } from "lucide-react";
+import type { Post } from "@/types/post.types";
+import { formatPostListDate } from "@/lib/date";
+
+interface SearchResultsProps {
+  posts: Post[];
+  isLoading: boolean;
+  isError: boolean;
+  error: Error | null;
+  query: string;
+  isDebouncing?: boolean;
+}
+
+export default function SearchResults({
+  posts,
+  isLoading,
+  isError,
+  error,
+  query,
+  isDebouncing = false,
+}: SearchResultsProps) {
+  const navigate = useNavigate();
+
+  const handlePostClick = (post: Post) => {
+    navigate(`/community/${post.id}`);
+  };
+
+  if (isLoading || isDebouncing) {
+    return (
+      <div className="p-4 text-center text-white">
+        <p>{isDebouncing ? "검색어 입력 중..." : "검색 중..."}</p>
+      </div>
+    );
+  }
+
+  if (isError) {
+    return (
+      <div className="p-4 text-center text-white">
+        <p>검색 중 오류가 발생했습니다:</p>
+        <p className="text-red-400 text-sm mt-2">{error?.message}</p>
+      </div>
+    );
+  }
+
+  if (posts.length === 0 && query.trim()) {
+    return (
+      <div className="p-4 text-center text-brand-text">
+        <p>"{query}"에 대한 검색 결과가 없습니다.</p>
+      </div>
+    );
+  }
+
+  if (!query.trim()) {
+    return null;
+  }
+
+  return (
+    <div className="p-4">
+      <div className="mb-4">
+        <p className="text-white text-sm">
+          "{query}" 검색 결과 {posts.length}개
+        </p>
+      </div>
+
+      <div className="space-y-4">
+        {posts.map((post) => (
+          <Card
+            key={post.id}
+            className="bg-brand-surface border-none text-white hover:bg-brand-surface/50 transition-colors cursor-pointer"
+            onClick={() => handlePostClick(post)}>
+            <CardHeader>
+              <Badge className="w-fit p-0 text-left bg-transparent border-none text-brand-primary">
+                {post.board.value}
+              </Badge>
+              <CardTitle className="mt-2 text-base leading-tight">
+                {post.title}
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="flex justify-between items-center text-xs text-brand-text">
+              <span>
+                {post.author.nickname} · {formatPostListDate(post.createdAt)}
+              </span>
+              <div className="flex items-center space-x-4">
+                <div className="flex items-center space-x-1">
+                  <Heart className="size-4" aria-label="좋아요" />
+                  <span className="w-3">{post.nLikes}</span>
+                </div>
+                <div className="flex items-center space-x-1">
+                  <MessageCircle className="size-4" aria-label="댓글" />
+                  <span className="w-3">{post.nComments}</span>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/search/index.tsx b/src/pages/search/index.tsx
index b141572..758d966 100644
--- a/src/pages/search/index.tsx
+++ b/src/pages/search/index.tsx
@@ -1,42 +1,56 @@
-import { useState } from "react";
+import { useNavigate } from "react-router-dom";
 import RecentSearchList from "@/pages/search/_components/RecentSearchList";
 import SearchHeader from "@/pages/search/_components/SearchHeader";
+import SearchResults from "@/pages/search/_components/SearchResults";
+import { useSearch } from "@/hooks/useSearch";
 
 export default function SearchPage() {
-  const [query, setQuery] = useState("");
-  const [recentSearches, setRecentSearches] = useState([
-    "이전 검색 결과 1",
-    "이전 검색 결과 2",
-    "이전 검색 결과 3",
-  ]);
+  const navigate = useNavigate();
+  const {
+    query,
+    recentSearches,
+    searchResults,
+    isLoading,
+    isError,
+    error,
+    hasQueryInput,
+    isDebouncing,
+    searchQuery,
+    setQuery,
+    handleSubmit,
+    handleRecentSearchClick,
+    removeRecentSearch,
+  } = useSearch();
 
-  const handleRemoveSearch = (index: number) => {
-    setRecentSearches((prev) => prev.filter((_, i) => i !== index));
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    if (query.trim()) {
-      // TODO: 실제 검색 API 연동 후 검색 결과 페이지로 이동 또는 결과 표시
-      console.log("검색:", query);
-    }
+  const handleBack = () => {
+    navigate(-1);
   };
 
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full dark text-foreground bg-brand-background scrollbar-hide ">
       <SearchHeader
         query={query}
         onQueryChange={setQuery}
         onSubmit={handleSubmit}
-        // TODO: React Router useNavigate 훅 추가 후 navigate(-1) 기능 구현
-        onBack={() => {}}
+        onBack={handleBack}
       />
       <main className="flex-1 overflow-auto">
-        <RecentSearchList
-          searches={recentSearches}
-          onSearchClick={setQuery}
-          onRemove={handleRemoveSearch}
-        />
+        {hasQueryInput ? (
+          <SearchResults
+            posts={searchResults}
+            isLoading={isLoading}
+            isError={isError}
+            error={error}
+            query={searchQuery}
+            isDebouncing={isDebouncing}
+          />
+        ) : (
+          <RecentSearchList
+            searches={recentSearches}
+            onSearchClick={handleRecentSearchClick}
+            onRemove={removeRecentSearch}
+          />
+        )}
       </main>
     </div>
   );

From a18ee51227b20f0db2218ece3299d3c2d1329947 Mon Sep 17 00:00:00 2001
From: Monixc <chris13404@gmail.com>
Date: Sun, 10 Aug 2025 23:07:12 +0900
Subject: [PATCH 09/26] =?UTF-8?q?feat:=20=EC=BB=A4=EB=AE=A4=EB=8B=88?=
 =?UTF-8?q?=ED=8B=B0=20=EA=B4=80=EB=A0=A8=20=ED=83=80=EC=9E=85=20=EC=A0=95?=
 =?UTF-8?q?=EC=9D=98=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 기존 community.types.ts 파일 삭제
- 새로운 my.types.ts 파일 생성 및 프로필 관련 타입 정의 추가
- post.types.ts 파일에서 Post 인터페이스를 PostListResponse 및 PostDetailResponse로 변경하고, 댓글 및 좋아요 관련 응답 타입 추가
---
 src/types/community.types.ts | 26 ---------------
 src/types/my.types.ts        | 45 ++++++++++++++++++++++++++
 src/types/post.types.ts      | 63 +++++++++++++++++++++++++++++++++++-
 3 files changed, 107 insertions(+), 27 deletions(-)
 delete mode 100644 src/types/community.types.ts
 create mode 100644 src/types/my.types.ts

diff --git a/src/types/community.types.ts b/src/types/community.types.ts
deleted file mode 100644
index 2638472..0000000
--- a/src/types/community.types.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-export interface Comment {
-  id: number;
-  postId: number;
-  author: {
-    nickname: string;
-    avatar: string;
-  };
-  content: string;
-  editable: boolean;
-  createdAt: string;
-}
-
-export interface Post {
-  id: number;
-  category: string;
-  title: string;
-  author: {
-    name: string;
-    avatarUrl: string;
-  };
-  createdAt: string;
-  content: string;
-  likeCount: number;
-  isLiked: boolean;
-  comments: Comment[];
-}
diff --git a/src/types/my.types.ts b/src/types/my.types.ts
new file mode 100644
index 0000000..fe6a85d
--- /dev/null
+++ b/src/types/my.types.ts
@@ -0,0 +1,45 @@
+export interface GetProfileResponse {
+  nickname: string;
+  avatar: string;
+  age: number;
+  experience: number;
+  bio: string;
+  position: {
+    id: number;
+    field: string;
+    role: string;
+  };
+  techStack: Array<{
+    id: number;
+    value: string;
+  }>;
+  interests: Array<{
+    id: number;
+    value: string;
+  }>;
+  location: {
+    lng: number;
+    lat: number;
+  };
+  github?: string;
+  email?: string;
+  instagram?: string;
+  linkedIn?: string;
+  blog?: string;
+  nSubscribers: number;
+  subscribing: boolean;
+}
+
+export interface UpdateProfileRequest {
+  nickname?: string;
+  experience?: number;
+  bio?: string;
+  positionId?: number;
+  techIds?: number[];
+  interestIds?: number[];
+  github?: string;
+  email?: string;
+  instagram?: string;
+  linkedIn?: string;
+  blog?: string;
+}
diff --git a/src/types/post.types.ts b/src/types/post.types.ts
index 5b2f11d..cb01ea7 100644
--- a/src/types/post.types.ts
+++ b/src/types/post.types.ts
@@ -1,4 +1,21 @@
-export interface Post {
+export interface PostListResponse {
+  id: number;
+  board: {
+    id: number;
+    value: string;
+    isRecruit: boolean;
+  };
+  author: {
+    avatar: string;
+    nickname: string;
+  };
+  title: string;
+  nComments: number;
+  nLikes: number;
+  createdAt: string;
+}
+
+export interface PostDetailResponse {
   id: number;
   board: {
     id: number;
@@ -14,4 +31,48 @@ export interface Post {
   nComments: number;
   nLikes: number;
   createdAt: string;
+  editable: boolean;
+  likeIt: boolean;
+  bookmark: boolean;
+}
+
+export interface CommentResponse {
+  id: number;
+  postId: number;
+  author: {
+    nickname: string;
+    avatar: string;
+  };
+  content: string;
+  editable: boolean;
+  createdAt: string;
+}
+
+export interface LikeToggleResponse {
+  nLikes: number;
+  likeIt: boolean;
+}
+
+export interface BookmarkToggleResponse {
+  bookmark: boolean;
+}
+
+export interface PostCommentResponse {
+  nComments: number;
+}
+
+// ===== Request Types =====
+
+// 게시글 생성 요청
+export interface CreatePostRequest {
+  title: string;
+  content: string;
+  location: {
+    lng: number;
+    lat: number;
+  };
+}
+
+export interface CreateCommentRequest {
+  content: string;
 }

From eb2ac0f8c3ca1ff6a3aebade4d402bf1f9125e39 Mon Sep 17 00:00:00 2001
From: Monixc <chris13404@gmail.com>
Date: Sun, 10 Aug 2025 23:38:27 +0900
Subject: [PATCH 10/26] =?UTF-8?q?feat:=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20?=
 =?UTF-8?q?=EB=B0=8F=20=EB=8C=93=EA=B8=80=20=EA=B4=80=EB=A0=A8=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=ED=83=80=EC=9E=85?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 게시글 상세 조회, 댓글 조회, 댓글 생성, 좋아요 및 북마크 토글 기능을 위한 훅(useToggleLike, useToggleBookmark, useCreateComment) 추가
- API 호출(fetchPostDetail, fetchComments, createComment, toggleLike, toggleBookmark) 수정 및 추가
- 타입 정의(PostDetailResponse, CommentResponse 등) 수정 및 업데이트
- 댓글 입력 시 Enter 키로 제출 가능하도록 기능 추가
- UI 컴포넌트(PostContent, CommentSection 등)에서 새로운 기능 및 타입 반영
---
 src/hooks/queries/usePosts.ts                 |  84 +++++++++++++-
 src/lib/api/posts.ts                          | 104 +++++++++++++++---
 .../community/__components/CommentForm.tsx    |   8 ++
 .../community/__components/CommentItem.tsx    |   4 +-
 .../community/__components/CommentSection.tsx |  26 ++---
 .../community/__components/PostContent.tsx    |  20 ++--
 src/pages/community/index.tsx                 |  82 +++++++++++---
 7 files changed, 259 insertions(+), 69 deletions(-)

diff --git a/src/hooks/queries/usePosts.ts b/src/hooks/queries/usePosts.ts
index d97b29d..ece1317 100644
--- a/src/hooks/queries/usePosts.ts
+++ b/src/hooks/queries/usePosts.ts
@@ -6,10 +6,16 @@ import {
   fetchPostDetail,
   searchPosts,
   fetchComments,
+  createComment,
+  toggleLike,
+  toggleBookmark,
 } from "@/lib/api/posts";
 import type { UICategory } from "@/constants/board";
-import type { Post } from "@/types/post.types";
-import type { Comment } from "@/types/community.types";
+import type {
+  CommentResponse,
+  PostDetailResponse,
+  PostCommentResponse,
+} from "@/types/post.types";
 
 export const useBoards = () => {
   return useQuery({
@@ -30,7 +36,7 @@ export const usePosts = (category: UICategory) => {
 };
 
 export const usePostDetail = (postId: string) => {
-  return useQuery<Post>({
+  return useQuery<PostDetailResponse>({
     queryKey: ["post", postId],
     queryFn: async () => {
       const result = await fetchPostDetail(postId);
@@ -68,7 +74,7 @@ export const useCreatePost = () => {
 };
 
 export const useComments = (postId: string) => {
-  return useQuery<Comment[]>({
+  return useQuery<CommentResponse[]>({
     queryKey: ["comments", postId],
     queryFn: () => fetchComments(postId),
     enabled: !!postId,
@@ -76,3 +82,73 @@ export const useComments = (postId: string) => {
     gcTime: 5 * 60 * 1000,
   });
 };
+
+export const useToggleLike = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: toggleLike,
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["posts"] });
+      queryClient.invalidateQueries({ queryKey: ["search"] });
+      queryClient.setQueryData<PostDetailResponse>(
+        ["post", variables.toString()],
+        (oldData: PostDetailResponse | undefined) => {
+          if (!oldData) return oldData;
+          return {
+            ...oldData,
+            nLikes: data.nLikes,
+            likeIt: data.likeIt,
+          };
+        }
+      );
+    },
+  });
+};
+
+export const useToggleBookmark = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: toggleBookmark,
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["posts"] });
+      queryClient.invalidateQueries({ queryKey: ["search"] });
+      queryClient.setQueryData<PostDetailResponse>(
+        ["post", variables.toString()],
+        (oldData: PostDetailResponse | undefined) => {
+          if (!oldData) return oldData;
+          return {
+            ...oldData,
+            bookmark: data.bookmark,
+          };
+        }
+      );
+    },
+  });
+};
+
+export const useCreateComment = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ postId, content }: { postId: string; content: string }) =>
+      createComment(postId, content),
+    onSuccess: (data: PostCommentResponse, variables) => {
+      queryClient.invalidateQueries({
+        queryKey: ["comments", variables.postId],
+      });
+      queryClient.invalidateQueries({ queryKey: ["posts"] });
+      queryClient.setQueryData<PostDetailResponse>(
+        ["post", variables.postId],
+        (oldData: PostDetailResponse | undefined) => {
+          if (!oldData) return oldData;
+          return {
+            ...oldData,
+            nComments: data.nComments,
+          };
+        }
+      );
+    },
+  });
+};
diff --git a/src/lib/api/posts.ts b/src/lib/api/posts.ts
index cdb774d..9bb9f7d 100644
--- a/src/lib/api/posts.ts
+++ b/src/lib/api/posts.ts
@@ -1,5 +1,11 @@
-import type { Post } from "@/types/post.types";
-import type { Comment } from "@/types/community.types";
+import type {
+  CommentResponse,
+  PostDetailResponse,
+  CreatePostRequest,
+  LikeToggleResponse,
+  BookmarkToggleResponse,
+  PostCommentResponse,
+} from "@/types/post.types";
 import type { UICategory } from "@/constants/board";
 import { createApiUrl, createAuthHeaders } from "./config";
 
@@ -23,7 +29,9 @@ export const fetchBoards = async (): Promise<Board[]> => {
 };
 
 //게시글 목록 조회회
-export const fetchPosts = async (category: UICategory): Promise<Post[]> => {
+export const fetchPosts = async (
+  category: UICategory
+): Promise<PostDetailResponse[]> => {
   const url =
     category === "all"
       ? `${createApiUrl("/posts/search")}`
@@ -41,22 +49,15 @@ export const fetchPosts = async (category: UICategory): Promise<Post[]> => {
   return data.results || [];
 };
 
-//게시글 생성성
-export const createPost = async (data: {
-  title: string;
-  content: string;
-  boardId: number;
-}): Promise<void> => {
-  const response = await fetch(`${createApiUrl(`/posts/${data.boardId}`)}`, {
+//게시글 생성
+export const createPost = async (data: CreatePostRequest): Promise<void> => {
+  const response = await fetch(`${createApiUrl(`/posts`)}`, {
     method: "POST",
     headers: createAuthHeaders(),
     body: JSON.stringify({
       title: data.title,
       content: data.content,
-      location: {
-        lng: 127.0,
-        lat: 37.5,
-      },
+      location: data.location,
     }),
   });
 
@@ -66,7 +67,9 @@ export const createPost = async (data: {
 };
 
 //게시글 상세 조회
-export const fetchPostDetail = async (postId: string): Promise<Post> => {
+export const fetchPostDetail = async (
+  postId: string
+): Promise<PostDetailResponse> => {
   const response = await fetch(`${createApiUrl(`/posts/details/${postId}`)}`, {
     headers: createAuthHeaders(),
   });
@@ -80,8 +83,10 @@ export const fetchPostDetail = async (postId: string): Promise<Post> => {
 };
 
 // 댓글 조회
-export const fetchComments = async (postId: string): Promise<Comment[]> => {
-  const response = await fetch(`${createApiUrl(`/posts/${postId}`)}`, {
+export const fetchComments = async (
+  postId: string
+): Promise<CommentResponse[]> => {
+  const response = await fetch(`${createApiUrl(`/posts/${postId}/comments`)}`, {
     headers: createAuthHeaders(),
   });
 
@@ -93,8 +98,36 @@ export const fetchComments = async (postId: string): Promise<Comment[]> => {
   return data.results || [];
 };
 
+// 댓글 생성
+export const createComment = async (
+  postId: string,
+  content: string
+): Promise<PostCommentResponse> => {
+  const url = `${createApiUrl(`/posts/${postId}/comments`)}`;
+  const headers = createAuthHeaders();
+  const body = JSON.stringify({ content });
+
+  const response = await fetch(url, {
+    method: "POST",
+    headers,
+    body,
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(
+      `댓글 작성에 실패했습니다: ${response.status} ${response.statusText} - ${errorText}`
+    );
+  }
+
+  const data = await response.json();
+  return data;
+};
+
 // 게시글 검색
-export const searchPosts = async (query: string): Promise<Post[]> => {
+export const searchPosts = async (
+  query: string
+): Promise<PostDetailResponse[]> => {
   const response = await fetch(
     `${createApiUrl(`/posts/search?query=${encodeURIComponent(query)}`)}`,
     {
@@ -109,3 +142,38 @@ export const searchPosts = async (query: string): Promise<Post[]> => {
   const data = await response.json();
   return data.results || [];
 };
+
+//좋아용용
+export const toggleLike = async (
+  postId: number
+): Promise<LikeToggleResponse> => {
+  const response = await fetch(`${createApiUrl(`/posts/${postId}/likes`)}`, {
+    method: "PUT",
+    headers: createAuthHeaders(),
+  });
+
+  if (!response.ok) {
+    throw new Error("좋아요 처리에 실패했습니다.");
+  }
+
+  return response.json();
+};
+
+//북마크
+export const toggleBookmark = async (
+  postId: number
+): Promise<BookmarkToggleResponse> => {
+  const response = await fetch(
+    `${createApiUrl(`/posts/${postId}/bookmarks`)}`,
+    {
+      method: "PUT",
+      headers: createAuthHeaders(),
+    }
+  );
+
+  if (!response.ok) {
+    throw new Error("북마크 처리에 실패했습니다.");
+  }
+
+  return response.json();
+};
diff --git a/src/pages/community/__components/CommentForm.tsx b/src/pages/community/__components/CommentForm.tsx
index 92c2d48..5005738 100644
--- a/src/pages/community/__components/CommentForm.tsx
+++ b/src/pages/community/__components/CommentForm.tsx
@@ -16,12 +16,20 @@ export function CommentForm({ onSubmit, isPending }: CommentFormProps) {
     setComment("");
   };
 
+  const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSubmit();
+    }
+  };
+
   return (
     <div className="flex items-center p-2 bg-brand-background border-t border-brand-surface">
       <Input
         placeholder="댓글을 입력해주세요"
         value={comment}
         onChange={(e) => setComment(e.target.value)}
+        onKeyPress={handleKeyPress}
         className="flex-1 bg-brand-surface border-none rounded-md px-4 py-2 resize-none no-scrollbar text-sm text-white ring-0"
         disabled={isPending}
       />
diff --git a/src/pages/community/__components/CommentItem.tsx b/src/pages/community/__components/CommentItem.tsx
index 636d104..1078cee 100644
--- a/src/pages/community/__components/CommentItem.tsx
+++ b/src/pages/community/__components/CommentItem.tsx
@@ -1,8 +1,8 @@
-import type { Comment } from "@/types/community.types";
+import type { CommentResponse } from "@/types/post.types";
 import { formatCommentDate } from "@/lib/date";
 
 interface CommentItemProps {
-  comment: Comment;
+  comment: CommentResponse;
 }
 
 export function CommentItem({ comment }: CommentItemProps) {
diff --git a/src/pages/community/__components/CommentSection.tsx b/src/pages/community/__components/CommentSection.tsx
index d6a64be..e9702b0 100644
--- a/src/pages/community/__components/CommentSection.tsx
+++ b/src/pages/community/__components/CommentSection.tsx
@@ -1,17 +1,11 @@
-import type { Comment } from "@/types/community.types";
+import type { CommentResponse } from "@/types/post.types";
 import { CommentItem } from "./CommentItem";
 
 interface CommentSectionProps {
-  comments: Comment[];
-  onToggleCommentLike: (commentId: number) => void;
-  onToggleReplyLike: (replyId: number) => void;
+  comments: CommentResponse[];
 }
 
-export function CommentSection({
-  comments,
-  onToggleCommentLike,
-  onToggleReplyLike,
-}: CommentSectionProps) {
+export function CommentSection({ comments }: CommentSectionProps) {
   const totalComments = comments.length;
 
   return (
@@ -19,14 +13,12 @@ export function CommentSection({
       <h3 className="text-sm font-semibold">댓글 {totalComments}</h3>
 
       <div className="flex flex-col">
-        {comments.map((comment) => (
-          <CommentItem
-            key={comment.id}
-            comment={comment}
-            onToggleLike={onToggleCommentLike}
-            onToggleReplyLike={onToggleReplyLike}
-          />
-        ))}
+        {comments
+          .slice()
+          .reverse()
+          .map((comment) => (
+            <CommentItem key={comment.id} comment={comment} />
+          ))}
       </div>
     </div>
   );
diff --git a/src/pages/community/__components/PostContent.tsx b/src/pages/community/__components/PostContent.tsx
index c261db6..c27ffe8 100644
--- a/src/pages/community/__components/PostContent.tsx
+++ b/src/pages/community/__components/PostContent.tsx
@@ -1,11 +1,11 @@
-import type { Post } from "@/types/community.types";
+import type { PostDetailResponse } from "@/types/post.types";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
 import { Button } from "@/components/ui/button";
 import { Heart } from "lucide-react";
 
 interface PostContentProps {
-  post: Post;
+  post: PostDetailResponse;
   onLikeClick: () => void;
   isLikePending: boolean;
 }
@@ -17,11 +17,11 @@ export function PostContent({ post, onLikeClick }: PostContentProps) {
         <Badge
           variant="outline"
           className="w-fit border-brand-primary text-brand-primary">
-          {post.category}
+          {post.board.value}
         </Badge>
         <h2 className="text-xl font-bold">{post.title}</h2>
         <div className="flex items-center gap-x-2 text-xs text-brand-text">
-          <span>{post.author.name}</span>
+          <span>{post.author.nickname}</span>
           <span>•</span>
           <span>{post.createdAt}</span>
         </div>
@@ -33,21 +33,21 @@ export function PostContent({ post, onLikeClick }: PostContentProps) {
         <div className="min-h-[200px] text-sm leading-relaxed whitespace-pre-wrap break-words">
           {post.content}
         </div>
-        <div className="flex items-center">
+        <div className="flex items-center -ml-4">
           <Button
             variant="ghost"
             size="icon"
-            className="h-12 w-12 hover:bg-white/10 rounded-full -ml-2"
+            className="h-12 w-12 hover:bg-white/10 rounded-full"
             onClick={onLikeClick}>
             <Heart
               className="!h-6 !w-6"
-              fill={post.isLiked ? "#FF4A4A" : "none"}
-              stroke={post.isLiked ? "#FF4A4A" : "currentColor"}
+              fill={post.likeIt ? "currentColor" : "none"}
+              stroke={post.likeIt ? "currentColor" : "currentColor"}
             />
           </Button>
 
-          <span className="text-xs font-semibold flex items-center -mt-0.5">
-            {post.likeCount}
+          <span className="text-xs font-semibold flex items-center ">
+            {post.nLikes}
           </span>
         </div>
       </div>
diff --git a/src/pages/community/index.tsx b/src/pages/community/index.tsx
index e43a2b1..0a654cd 100644
--- a/src/pages/community/index.tsx
+++ b/src/pages/community/index.tsx
@@ -3,7 +3,14 @@ import Header from "@/components/layout/Header";
 import { ArrowLeft, Bookmark, Heart, MessageCircle } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
-import { usePostDetail, useComments } from "@/hooks/queries/usePosts";
+import { Button } from "@/components/ui/button";
+import {
+  usePostDetail,
+  useComments,
+  useToggleLike,
+  useToggleBookmark,
+  useCreateComment,
+} from "@/hooks/queries/usePosts";
 import { CommentForm } from "./__components/CommentForm";
 import { CommentSection } from "./__components/CommentSection";
 import { formatPostDetailDate } from "@/lib/date";
@@ -23,6 +30,10 @@ export function PostDetailPage() {
     isError: isCommentsError,
   } = useComments(postId);
 
+  const toggleLikeMutation = useToggleLike();
+  const toggleBookmarkMutation = useToggleBookmark();
+  const createCommentMutation = useCreateComment();
+
   if (isLoading) {
     return <div className="p-4 text-white">로딩 중...</div>;
   }
@@ -37,8 +48,32 @@ export function PostDetailPage() {
     navigate(-1);
   };
 
-  const handleBookmarkClick = () => {
-    console.log("북마크 클릭");
+  const handleLikeClick = async () => {
+    if (!post) return;
+    try {
+      await toggleLikeMutation.mutateAsync(post.id);
+    } catch (error) {
+      console.error("좋아요 처리 실패:", error);
+    }
+  };
+
+  const handleBookmarkClick = async () => {
+    if (!post) return;
+    try {
+      await toggleBookmarkMutation.mutateAsync(post.id);
+    } catch (error) {
+      console.error("북마크 처리 실패:", error);
+    }
+  };
+
+  const handleCommentSubmit = async (content: string) => {
+    if (!postId) return;
+    try {
+      await createCommentMutation.mutateAsync({ postId, content });
+    } catch (error) {
+      console.error("댓글 작성 실패:", error);
+      alert("댓글 작성에 실패했습니다. 다시 시도해주세요.");
+    }
   };
 
   return (
@@ -46,7 +81,13 @@ export function PostDetailPage() {
       <Header
         title="COMEET"
         leftIcon={<ArrowLeft />}
-        rightIcon={<Bookmark />}
+        rightIcon={
+          <Bookmark
+            className={
+              post.bookmark ? "fill-brand-primary text-brand-primary" : ""
+            }
+          />
+        }
         onLeftClick={handleBackClick}
         onRightClick={handleBookmarkClick}
       />
@@ -73,17 +114,24 @@ export function PostDetailPage() {
               {post.content ? (
                 <>{post.content}</>
               ) : (
-                <p className="text-brand-text">
-                  게시글 내용은 현재 API에서 제공되지 않습니다.
-                </p>
+                <p className="text-brand-text">게시글 내용이 없습니다.</p>
               )}
             </div>
 
-            <div className="flex items-center gap-x-6 text-brand-text">
-              <div className="flex items-center gap-x-2">
-                <Heart className="size-4" />
+            <div className="flex items-center gap-x-3 text-brand-text">
+              <Button
+                variant="ghost"
+                size="sm"
+                className="p-0 h-auto flex items-center gap-x-2"
+                onClick={handleLikeClick}
+                disabled={toggleLikeMutation.isPending}>
+                <Heart
+                  className="size-4"
+                  fill={post.likeIt ? "#FF4A4A" : "none"}
+                  stroke={post.likeIt ? "#FF4A4A" : "currentColor"}
+                />
                 <span>{post.nLikes}</span>
-              </div>
+              </Button>
               <div className="flex items-center gap-x-2">
                 <MessageCircle className="size-4" />
                 <span>{post.nComments}</span>
@@ -101,18 +149,16 @@ export function PostDetailPage() {
               댓글을 불러오는 데 실패했습니다.
             </div>
           ) : (
-            <CommentSection
-              comments={comments}
-              onToggleCommentLike={() => {}}
-              onToggleReplyLike={() => {}}
-            />
+            <CommentSection comments={comments} />
           )}
-          <div className="h-20"></div>
         </main>
       </div>
 
       <div className="border-t border-brand-surface bg-brand-background">
-        <CommentForm onSubmit={() => {}} isPending={false} />
+        <CommentForm
+          onSubmit={handleCommentSubmit}
+          isPending={createCommentMutation.isPending}
+        />
       </div>
     </div>
   );

From 683382a30d296b35c290c8d2848d839ddc822562 Mon Sep 17 00:00:00 2001
From: Monixc <chris13404@gmail.com>
Date: Mon, 11 Aug 2025 03:43:42 +0900
Subject: [PATCH 11/26] =?UTF-8?q?chore:=20alert-dialong,=20dropdwon-menu?=
 =?UTF-8?q?=20=EC=84=A4=EC=B9=98=EC=B9=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package-lock.json                   | 101 ++++++++++-
 package.json                        |   4 +-
 src/components/ui/alert-dialog.tsx  | 139 +++++++++++++++
 src/components/ui/dropdown-menu.tsx | 255 ++++++++++++++++++++++++++++
 4 files changed, 497 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ui/alert-dialog.tsx
 create mode 100644 src/components/ui/dropdown-menu.tsx

diff --git a/package-lock.json b/package-lock.json
index c52c7de..e592abd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,14 +9,16 @@
       "version": "0.0.0",
       "dependencies": {
         "@radix-ui/react-accordion": "^1.2.0",
+        "@radix-ui/react-alert-dialog": "^1.1.14",
         "@radix-ui/react-avatar": "^1.1.10",
         "@radix-ui/react-dialog": "^1.1.1",
+        "@radix-ui/react-dropdown-menu": "^2.1.15",
         "@radix-ui/react-label": "^2.1.0",
         "@radix-ui/react-popover": "^1.1.1",
         "@radix-ui/react-select": "^2.2.5",
         "@radix-ui/react-separator": "^1.1.7",
         "@radix-ui/react-slider": "^1.3.5",
-        "@radix-ui/react-slot": "^1.1.0",
+        "@radix-ui/react-slot": "^1.2.3",
         "@radix-ui/react-tabs": "^1.1.0",
         "@radix-ui/react-toggle": "^1.1.0",
         "@tanstack/react-query": "^5.83.0",
@@ -623,6 +625,34 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-alert-dialog": {
+      "version": "1.1.14",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-alert-dialog/-/react-alert-dialog-1.1.14.tgz",
+      "integrity": "sha512-IOZfZ3nPvN6lXpJTBCunFQPRSvK8MDgSc1FB85xnIpUKOw9en0dJj8JmCAxV7BiZdtYlUpmrQjoTFkVYtdoWzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dialog": "1.1.14",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-arrow": {
       "version": "1.1.7",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
@@ -837,6 +867,35 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-dropdown-menu": {
+      "version": "2.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.15.tgz",
+      "integrity": "sha512-mIBnOjgwo9AH3FyKaSWoSu/dYj6VdhJ7frEPiGTeXCdUFHjl9h3mFh2wwhEtINOmYXWhdpf1rY2minFsmaNgVQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-menu": "2.1.15",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-focus-guards": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.2.tgz",
@@ -918,6 +977,46 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-menu": {
+      "version": "2.1.15",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.15.tgz",
+      "integrity": "sha512-tVlmA3Vb9n8SZSd+YSbuFR66l87Wiy4du+YE+0hzKQEANA+7cWKH1WgqcEX4pXqxUFQKrWQGHdvEfw00TjFiew==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.2",
+        "@radix-ui/react-collection": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-direction": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.10",
+        "@radix-ui/react-focus-guards": "1.1.2",
+        "@radix-ui/react-focus-scope": "1.1.7",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.7",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.4",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-roving-focus": "1.1.10",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "aria-hidden": "^1.2.4",
+        "react-remove-scroll": "^2.6.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-popover": {
       "version": "1.1.14",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-popover/-/react-popover-1.1.14.tgz",
diff --git a/package.json b/package.json
index 8f8e98b..2e8d867 100644
--- a/package.json
+++ b/package.json
@@ -11,14 +11,16 @@
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-alert-dialog": "^1.1.14",
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-popover": "^1.1.1",
     "@radix-ui/react-select": "^2.2.5",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slider": "^1.3.5",
-    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tabs": "^1.1.0",
     "@radix-ui/react-toggle": "^1.1.0",
     "@tanstack/react-query": "^5.83.0",
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
new file mode 100644
index 0000000..1084119
--- /dev/null
+++ b/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,139 @@
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+const AlertDialog = AlertDialogPrimitive.Root;
+
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+
+const AlertDialogOverlay = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Overlay
+    className={cn(
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      className
+    )}
+    {...props}
+    ref={ref}
+  />
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+
+const AlertDialogContent = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPortal>
+    <AlertDialogOverlay />
+    <AlertDialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        className
+      )}
+      {...props}
+    />
+  </AlertDialogPortal>
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    )}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Title
+    ref={ref}
+    className={cn("text-lg font-semibold", className)}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+
+const AlertDialogDescription = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName;
+
+const AlertDialogAction = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Action
+    ref={ref}
+    className={cn(buttonVariants(), className)}
+    {...props}
+  />
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+
+const AlertDialogCancel = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+>(({ className, ...props }, ref) => (
+  <AlertDialogPrimitive.Cancel
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    )}
+    {...props}
+  />
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
new file mode 100644
index 0000000..0d6741b
--- /dev/null
+++ b/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,255 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

From b5f83a4bc4ae6204586cb4d20ff45bc43ab48957 Mon Sep 17 00:00:00 2001
From: Monixc <chris13404@gmail.com>
Date: Mon, 11 Aug 2025 04:35:02 +0900
Subject: [PATCH 12/26] =?UTF-8?q?feat:=20=ED=8F=AC=EC=A7=80=EC=85=98=20?=
 =?UTF-8?q?=EC=84=A0=ED=83=9D=EA=B8=B0=20=EB=B0=8F=20=EA=B2=8C=EC=8B=9C?=
 =?UTF-8?q?=EA=B8=80=20=EA=B4=80=EB=A0=A8=20=EA=B8=B0=EB=8A=A5=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

- PositionSelector 컴포넌트에 다중 선택 기능 추가 및 관련 props 수정
- useAddPostModal 훅에 선택된 포지션 ID 배열 및 위치 정보 추가
- usePosts 훅에 지원자 목록 조회 및 지원 상태 반전 기능 추가
- 게시글 삭제 및 댓글 수정/삭제 기능을 위한 API 및 UI 컴포넌트 추가
- 댓글 작성 및 수정 시 취소 기능 추가
- ApplicantSection 컴포넌트 추가로 지원자 목록 표시 기능 구현
---
 src/components/common/PositionSelector.tsx    |  53 ++-
 src/hooks/queries/usePosts.ts                 | 150 ++++++++-
 src/hooks/useAddPostModal.ts                  |  24 ++
 src/lib/api/posts.ts                          | 107 +++++-
 .../__components/ApplicantSection.tsx         |  34 ++
 .../community/__components/CommentForm.tsx    |  32 +-
 .../community/__components/CommentItem.tsx    |  41 ++-
 .../community/__components/CommentSection.tsx |  15 +-
 .../community/__components/PostContent.tsx    |  78 +++--
 src/pages/community/index.tsx                 | 306 +++++++++++++++---
 src/types/post.types.ts                       |  31 +-
 11 files changed, 780 insertions(+), 91 deletions(-)
 create mode 100644 src/pages/community/__components/ApplicantSection.tsx

diff --git a/src/components/common/PositionSelector.tsx b/src/components/common/PositionSelector.tsx
index 8e04ad8..7bdbfea 100644
--- a/src/components/common/PositionSelector.tsx
+++ b/src/components/common/PositionSelector.tsx
@@ -12,14 +12,20 @@ import type { Position } from "@/types/tags.types";
 
 interface PositionSelectorProps {
   selectedPosition: number | null;
+  selectedPositionIds?: number[];
   onPositionChange: (positionId: number) => void;
+  onPositionIdsChange?: (positionIds: number[]) => void;
   label?: string;
+  multiple?: boolean;
 }
 
 export const PositionSelector = ({
   selectedPosition,
+  selectedPositionIds = [],
   onPositionChange,
+  onPositionIdsChange,
   label = "포지션",
+  multiple = false,
 }: PositionSelectorProps) => {
   const { data: positionsInterestsData, isLoading } = usePositionsInterests();
 
@@ -59,21 +65,38 @@ export const PositionSelector = ({
             </AccordionTrigger>
             <AccordionContent>
               <div className="flex flex-col gap-2 pt-2">
-                {fieldPositions.map((position) => (
-                  <Button
-                    key={position.id}
-                    variant="outline"
-                    onClick={() => onPositionChange(position.id)}
-                    className={cn(
-                      "h-auto justify-start text-left whitespace-normal border-transparent bg-brand-surface",
-                      selectedPosition === position.id &&
-                        "border-brand-primary text-brand-primary border-1"
-                    )}>
-                    <div className="flex flex-col">
-                      <span className="font-bold">{position.role}</span>
-                    </div>
-                  </Button>
-                ))}
+                {fieldPositions.map((position) => {
+                  const isSelected = multiple
+                    ? selectedPositionIds.includes(position.id)
+                    : selectedPosition === position.id;
+
+                  const handleClick = () => {
+                    if (multiple && onPositionIdsChange) {
+                      const newPositionIds = isSelected
+                        ? selectedPositionIds.filter((id) => id !== position.id)
+                        : [...selectedPositionIds, position.id];
+                      onPositionIdsChange(newPositionIds);
+                    } else {
+                      onPositionChange(position.id);
+                    }
+                  };
+
+                  return (
+                    <Button
+                      key={position.id}
+                      variant="outline"
+                      onClick={handleClick}
+                      className={cn(
+                        "h-auto justify-start text-left whitespace-normal border-transparent bg-brand-surface",
+                        isSelected &&
+                          "border-brand-primary text-brand-primary border-1"
+                      )}>
+                      <div className="flex flex-col">
+                        <span className="font-bold">{position.role}</span>
+                      </div>
+                    </Button>
+                  );
+                })}
               </div>
             </AccordionContent>
           </AccordionItem>
diff --git a/src/hooks/queries/usePosts.ts b/src/hooks/queries/usePosts.ts
index ece1317..ffb4f7b 100644
--- a/src/hooks/queries/usePosts.ts
+++ b/src/hooks/queries/usePosts.ts
@@ -9,12 +9,20 @@ import {
   createComment,
   toggleLike,
   toggleBookmark,
+  fetchApplicants,
+  toggleApply,
+  deletePost,
+  updateComment,
+  deleteComment,
 } from "@/lib/api/posts";
 import type { UICategory } from "@/constants/board";
 import type {
   CommentResponse,
   PostDetailResponse,
+  PostListItem,
+  PostDetailItem,
   PostCommentResponse,
+  ApplicantResponse,
 } from "@/types/post.types";
 
 export const useBoards = () => {
@@ -27,16 +35,22 @@ export const useBoards = () => {
 };
 
 export const usePosts = (category: UICategory) => {
-  return useQuery({
+  return useQuery<PostListItem[]>({
     queryKey: ["posts", category],
-    queryFn: () => fetchPosts(category),
+    queryFn: async () => {
+      const posts = await fetchPosts(category);
+      return posts.sort(
+        (a, b) =>
+          new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+      );
+    },
     staleTime: 5 * 60 * 1000,
     gcTime: 10 * 60 * 1000,
   });
 };
 
 export const usePostDetail = (postId: string) => {
-  return useQuery<PostDetailResponse>({
+  return useQuery<PostDetailItem>({
     queryKey: ["post", postId],
     queryFn: async () => {
       const result = await fetchPostDetail(postId);
@@ -55,7 +69,13 @@ export const usePostDetail = (postId: string) => {
 export const useSearchPosts = (query: string) => {
   return useQuery({
     queryKey: ["search", query],
-    queryFn: () => searchPosts(query),
+    queryFn: async () => {
+      const posts = await searchPosts(query);
+      return posts.sort(
+        (a, b) =>
+          new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
+      );
+    },
     enabled: !!query && query.trim().length > 0,
     staleTime: 2 * 60 * 1000,
     gcTime: 5 * 60 * 1000,
@@ -152,3 +172,125 @@ export const useCreateComment = () => {
     },
   });
 };
+
+export const useApplicants = (postId: string) => {
+  return useQuery<ApplicantResponse[]>({
+    queryKey: ["applicants", postId],
+    queryFn: () => fetchApplicants(postId),
+    enabled: !!postId,
+    staleTime: 2 * 60 * 1000,
+    gcTime: 5 * 60 * 1000,
+  });
+};
+
+export const useToggleApply = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: toggleApply,
+    onSuccess: (data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["posts"] });
+      queryClient.invalidateQueries({
+        queryKey: ["applicants", variables.toString()],
+      });
+
+      queryClient.setQueryData<PostDetailItem>(
+        ["post", variables.toString()],
+        (oldData: PostDetailItem | undefined) => {
+          if (!oldData) return oldData;
+          return {
+            ...oldData,
+            applied: data.applied,
+            nApplicants: data.applied
+              ? (oldData.nApplicants || 0) + 1
+              : Math.max((oldData.nApplicants || 0) - 1, 0),
+          };
+        }
+      );
+
+      queryClient.setQueriesData<PostListItem[]>(
+        { queryKey: ["posts"] },
+        (oldData: PostListItem[] | undefined) => {
+          if (!oldData) return oldData;
+          return oldData.map((post) => {
+            if (post.id === variables) {
+              return {
+                ...post,
+                nApplicants: data.applied
+                  ? (post.nApplicants || 0) + 1
+                  : Math.max((post.nApplicants || 0) - 1, 0),
+              };
+            }
+            return post;
+          });
+        }
+      );
+    },
+  });
+};
+
+export const useDeletePost = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: deletePost,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["posts"] });
+      queryClient.invalidateQueries({ queryKey: ["search"] });
+    },
+  });
+};
+
+export const useUpdateComment = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({
+      commentId,
+      content,
+    }: {
+      commentId: number;
+      content: string;
+    }) => updateComment(commentId, { content }),
+    onSuccess: (_, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["comments"] });
+      queryClient.setQueriesData<CommentResponse[]>(
+        { queryKey: ["comments"] },
+        (oldData: CommentResponse[] | undefined) => {
+          if (!oldData) return oldData;
+          return oldData.map((comment) => {
+            if (comment.id === variables.commentId) {
+              return {
+                ...comment,
+                content: variables.content,
+              };
+            }
+            return comment;
+          });
+        }
+      );
+    },
+  });
+};
+
+export const useDeleteComment = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: deleteComment,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["comments"] });
+      queryClient.invalidateQueries({ queryKey: ["posts"] });
+      queryClient.setQueriesData<PostDetailItem>(
+        { queryKey: ["post"] },
+        (oldData: PostDetailItem | undefined) => {
+          if (!oldData) return oldData;
+          return {
+            ...oldData,
+            nComments: Math.max((oldData.nComments || 0) - 1, 0),
+          };
+        }
+      );
+    },
+  });
+};
diff --git a/src/hooks/useAddPostModal.ts b/src/hooks/useAddPostModal.ts
index f4f7d90..22ff88a 100644
--- a/src/hooks/useAddPostModal.ts
+++ b/src/hooks/useAddPostModal.ts
@@ -7,7 +7,9 @@ interface AddPostModalState {
   description: string;
   recruitCount: number;
   position: number | null;
+  selectedPositionIds: number[];
   selectedStackIds: number[];
+  location: { lat: number; lng: number } | null;
 }
 
 interface AddPostModalActions {
@@ -17,7 +19,9 @@ interface AddPostModalActions {
   setDescription: (description: string) => void;
   setRecruitCount: (count: number) => void;
   setPosition: (position: number | null) => void;
+  setSelectedPositionIds: (positionIds: number[]) => void;
   setSelectedStackIds: (stackIds: number[]) => void;
+  setLocation: (location: { lat: number; lng: number } | null) => void;
   reset: () => void;
 }
 
@@ -30,7 +34,9 @@ export const useAddPostModal = (): AddPostModalState &
     description: "",
     recruitCount: 1,
     position: null,
+    selectedPositionIds: [],
     selectedStackIds: [],
+    location: null,
   });
 
   const setTitle = useCallback((title: string) => {
@@ -57,10 +63,24 @@ export const useAddPostModal = (): AddPostModalState &
     setState((prev) => ({ ...prev, position }));
   }, []);
 
+  const setSelectedPositionIds = useCallback(
+    (selectedPositionIds: number[]) => {
+      setState((prev) => ({ ...prev, selectedPositionIds }));
+    },
+    []
+  );
+
   const setSelectedStackIds = useCallback((selectedStackIds: number[]) => {
     setState((prev) => ({ ...prev, selectedStackIds }));
   }, []);
 
+  const setLocation = useCallback(
+    (location: { lat: number; lng: number } | null) => {
+      setState((prev) => ({ ...prev, location }));
+    },
+    []
+  );
+
   const reset = useCallback(() => {
     setState({
       title: "",
@@ -69,7 +89,9 @@ export const useAddPostModal = (): AddPostModalState &
       description: "",
       recruitCount: 1,
       position: null,
+      selectedPositionIds: [],
       selectedStackIds: [],
+      location: null,
     });
   }, []);
 
@@ -84,7 +106,9 @@ export const useAddPostModal = (): AddPostModalState &
     setDescription,
     setRecruitCount,
     setPosition,
+    setSelectedPositionIds,
     setSelectedStackIds,
+    setLocation,
     reset,
     isRecruitBoard,
   };
diff --git a/src/lib/api/posts.ts b/src/lib/api/posts.ts
index 9bb9f7d..94bd12b 100644
--- a/src/lib/api/posts.ts
+++ b/src/lib/api/posts.ts
@@ -5,6 +5,10 @@ import type {
   LikeToggleResponse,
   BookmarkToggleResponse,
   PostCommentResponse,
+  ApplicantResponse,
+  ApplyToggleResponse,
+  UpdatePostRequest,
+  UpdateCommentRequest,
 } from "@/types/post.types";
 import type { UICategory } from "@/constants/board";
 import { createApiUrl, createAuthHeaders } from "./config";
@@ -28,7 +32,7 @@ export const fetchBoards = async (): Promise<Board[]> => {
   return data.results || [];
 };
 
-//게시글 목록 조회회
+//게시글 목록 조회
 export const fetchPosts = async (
   category: UICategory
 ): Promise<PostDetailResponse[]> => {
@@ -51,7 +55,7 @@ export const fetchPosts = async (
 
 //게시글 생성
 export const createPost = async (data: CreatePostRequest): Promise<void> => {
-  const response = await fetch(`${createApiUrl(`/posts`)}`, {
+  const response = await fetch(`${createApiUrl(`/posts/${data.boardId}`)}`, {
     method: "POST",
     headers: createAuthHeaders(),
     body: JSON.stringify({
@@ -129,7 +133,7 @@ export const searchPosts = async (
   query: string
 ): Promise<PostDetailResponse[]> => {
   const response = await fetch(
-    `${createApiUrl(`/posts/search?query=${encodeURIComponent(query)}`)}`,
+    `${createApiUrl(`/posts/search?keyword=${encodeURIComponent(query)}`)}`,
     {
       headers: createAuthHeaders(),
     }
@@ -177,3 +181,100 @@ export const toggleBookmark = async (
 
   return response.json();
 };
+
+// 지원자 목록 조회
+export const fetchApplicants = async (
+  postId: string
+): Promise<ApplicantResponse[]> => {
+  const response = await fetch(
+    `${createApiUrl(`/posts/${postId}/applicants`)}`,
+    {
+      headers: createAuthHeaders(),
+    }
+  );
+
+  if (!response.ok) {
+    throw new Error("지원자 목록을 불러오는 데 실패했습니다.");
+  }
+
+  const data = await response.json();
+  return data.results || [];
+};
+
+// 지원 상태 반전
+export const toggleApply = async (
+  postId: number
+): Promise<ApplyToggleResponse> => {
+  const response = await fetch(`${createApiUrl(`/posts/${postId}/applies`)}`, {
+    method: "PUT",
+    headers: createAuthHeaders(),
+  });
+
+  if (!response.ok) {
+    throw new Error("지원 처리에 실패했습니다.");
+  }
+
+  return response.json();
+};
+
+// // 게시글 수정
+// export const updatePost = async (
+//   postId: number,
+//   data: UpdatePostRequest
+// ): Promise<void> => {
+//   const response = await fetch(`${createApiUrl(`/posts/posts/${postId}`)}`, {
+//     method: "PATCH",
+//     headers: createAuthHeaders(),
+//     body: JSON.stringify(data),
+//   });
+
+//   if (!response.ok) {
+//     throw new Error("게시글 수정에 실패했습니다.");
+//   }
+// };
+
+// 게시글 삭제
+export const deletePost = async (postId: number): Promise<void> => {
+  const response = await fetch(`${createApiUrl(`/posts/posts/${postId}`)}`, {
+    method: "DELETE",
+    headers: createAuthHeaders(),
+  });
+
+  if (!response.ok) {
+    throw new Error("게시글 삭제에 실패했습니다.");
+  }
+};
+
+// 댓글 수정
+export const updateComment = async (
+  commentId: number,
+  data: UpdateCommentRequest
+): Promise<void> => {
+  const response = await fetch(
+    `${createApiUrl(`/posts/comments/${commentId}`)}`,
+    {
+      method: "PATCH",
+      headers: createAuthHeaders(),
+      body: JSON.stringify(data),
+    }
+  );
+
+  if (!response.ok) {
+    throw new Error("댓글 수정에 실패했습니다.");
+  }
+};
+
+// 댓글 삭제
+export const deleteComment = async (commentId: number): Promise<void> => {
+  const response = await fetch(
+    `${createApiUrl(`/posts/comments/${commentId}`)}`,
+    {
+      method: "DELETE",
+      headers: createAuthHeaders(),
+    }
+  );
+
+  if (!response.ok) {
+    throw new Error("댓글 삭제에 실패했습니다.");
+  }
+};
diff --git a/src/pages/community/__components/ApplicantSection.tsx b/src/pages/community/__components/ApplicantSection.tsx
new file mode 100644
index 0000000..de7eaa4
--- /dev/null
+++ b/src/pages/community/__components/ApplicantSection.tsx
@@ -0,0 +1,34 @@
+import type { ApplicantResponse } from "@/types/post.types";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+
+interface ApplicantSectionProps {
+  applicants: ApplicantResponse[];
+}
+
+export function ApplicantSection({ applicants }: ApplicantSectionProps) {
+  const totalApplicants = applicants.length;
+
+  return (
+    <div className="p-4 pb-0 flex flex-col text-white">
+      <h3 className="text-sm font-semibold mb-3">지원자 {totalApplicants}</h3>
+
+      <div className="flex flex-col gap-3">
+        {applicants.length > 0 ? (
+          applicants.map((applicant, index) => (
+            <div key={index} className="flex items-center gap-3">
+              <Avatar className="w-8 h-8">
+                <AvatarImage src={applicant.avatar} alt={applicant.nickname} />
+                <AvatarFallback className="bg-brand-primary text-brand-background text-xs">
+                  {applicant.nickname.charAt(0)}
+                </AvatarFallback>
+              </Avatar>
+              <span className="text-sm font-medium">{applicant.nickname}</span>
+            </div>
+          ))
+        ) : (
+          <p className="text-sm text-brand-text">아직 지원자가 없습니다.</p>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/community/__components/CommentForm.tsx b/src/pages/community/__components/CommentForm.tsx
index 5005738..4d32d1c 100644
--- a/src/pages/community/__components/CommentForm.tsx
+++ b/src/pages/community/__components/CommentForm.tsx
@@ -5,10 +5,19 @@ import { Input } from "@/components/ui/input";
 interface CommentFormProps {
   onSubmit: (content: string) => void;
   isPending: boolean;
+  editingCommentId?: number | null;
+  initialContent?: string;
+  onCancel?: () => void;
 }
 
-export function CommentForm({ onSubmit, isPending }: CommentFormProps) {
-  const [comment, setComment] = useState("");
+export function CommentForm({
+  onSubmit,
+  isPending,
+  editingCommentId,
+  initialContent = "",
+  onCancel,
+}: CommentFormProps) {
+  const [comment, setComment] = useState(initialContent);
 
   const handleSubmit = () => {
     if (!comment.trim()) return;
@@ -16,6 +25,11 @@ export function CommentForm({ onSubmit, isPending }: CommentFormProps) {
     setComment("");
   };
 
+  const handleCancel = () => {
+    setComment("");
+    onCancel?.();
+  };
+
   const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter" && !e.shiftKey) {
       e.preventDefault();
@@ -26,19 +40,29 @@ export function CommentForm({ onSubmit, isPending }: CommentFormProps) {
   return (
     <div className="flex items-center p-2 bg-brand-background border-t border-brand-surface">
       <Input
-        placeholder="댓글을 입력해주세요"
+        placeholder={
+          editingCommentId ? "댓글을 수정해주세요" : "댓글을 입력해주세요"
+        }
         value={comment}
         onChange={(e) => setComment(e.target.value)}
         onKeyPress={handleKeyPress}
         className="flex-1 bg-brand-surface border-none rounded-md px-4 py-2 resize-none no-scrollbar text-sm text-white ring-0"
         disabled={isPending}
       />
+      {editingCommentId && onCancel && (
+        <Button
+          onClick={handleCancel}
+          variant="ghost"
+          className="ml-2 text-brand-text text-sm">
+          취소
+        </Button>
+      )}
       <Button
         onClick={handleSubmit}
         disabled={!comment.trim() || isPending}
         variant="ghost"
         className="ml-2 text-brand-primary text-sm">
-        입력
+        {editingCommentId ? "수정" : "입력"}
       </Button>
     </div>
   );
diff --git a/src/pages/community/__components/CommentItem.tsx b/src/pages/community/__components/CommentItem.tsx
index 1078cee..04126e4 100644
--- a/src/pages/community/__components/CommentItem.tsx
+++ b/src/pages/community/__components/CommentItem.tsx
@@ -1,11 +1,25 @@
 import type { CommentResponse } from "@/types/post.types";
+import { Button } from "@/components/ui/button";
+import { MoreHorizontal } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import { formatCommentDate } from "@/lib/date";
 
 interface CommentItemProps {
   comment: CommentResponse;
+  onEditClick?: () => void;
+  onDeleteClick?: () => void;
 }
 
-export function CommentItem({ comment }: CommentItemProps) {
+export function CommentItem({
+  comment,
+  onEditClick,
+  onDeleteClick,
+}: CommentItemProps) {
   return (
     <div className="p-4 -mx-4 border-b border-brand-surface">
       <p className="py-2 text-sm leading-relaxed text-white">
@@ -18,6 +32,31 @@ export function CommentItem({ comment }: CommentItemProps) {
           <span>•</span>
           <span>{formatCommentDate(comment.createdAt)}</span>
         </div>
+
+        {comment.editable && (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="ghost"
+                size="icon"
+                className="h-6 w-6 hover:bg-white/10 rounded-full">
+                <MoreHorizontal className="h-3 w-3" />
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="mr-4 -mt-2 bg-brand-surface border-brand-surface text-white">
+              <DropdownMenuItem
+                onClick={onEditClick}
+                className="hover:bg-brand-primary hover:text-black cursor-pointer">
+                수정
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={onDeleteClick}
+                className="hover:bg-red-500 hover:text-white cursor-pointer">
+                삭제
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        )}
       </div>
     </div>
   );
diff --git a/src/pages/community/__components/CommentSection.tsx b/src/pages/community/__components/CommentSection.tsx
index e9702b0..2cf3fcc 100644
--- a/src/pages/community/__components/CommentSection.tsx
+++ b/src/pages/community/__components/CommentSection.tsx
@@ -3,9 +3,15 @@ import { CommentItem } from "./CommentItem";
 
 interface CommentSectionProps {
   comments: CommentResponse[];
+  onEditComment?: (commentId: number) => void;
+  onDeleteComment?: (commentId: number) => void;
 }
 
-export function CommentSection({ comments }: CommentSectionProps) {
+export function CommentSection({
+  comments,
+  onEditComment,
+  onDeleteComment,
+}: CommentSectionProps) {
   const totalComments = comments.length;
 
   return (
@@ -17,7 +23,12 @@ export function CommentSection({ comments }: CommentSectionProps) {
           .slice()
           .reverse()
           .map((comment) => (
-            <CommentItem key={comment.id} comment={comment} />
+            <CommentItem
+              key={comment.id}
+              comment={comment}
+              onEditClick={() => onEditComment?.(comment.id)}
+              onDeleteClick={() => onDeleteComment?.(comment.id)}
+            />
           ))}
       </div>
     </div>
diff --git a/src/pages/community/__components/PostContent.tsx b/src/pages/community/__components/PostContent.tsx
index c27ffe8..bcbffd6 100644
--- a/src/pages/community/__components/PostContent.tsx
+++ b/src/pages/community/__components/PostContent.tsx
@@ -1,16 +1,29 @@
-import type { PostDetailResponse } from "@/types/post.types";
+import type { PostDetailItem } from "@/types/post.types";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
 import { Button } from "@/components/ui/button";
-import { Heart } from "lucide-react";
+import { Heart, MoreHorizontal } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 
 interface PostContentProps {
-  post: PostDetailResponse;
+  post: PostDetailItem;
   onLikeClick: () => void;
   isLikePending: boolean;
+  onEditClick?: () => void;
+  onDeleteClick?: () => void;
 }
 
-export function PostContent({ post, onLikeClick }: PostContentProps) {
+export function PostContent({
+  post,
+  onLikeClick,
+  onEditClick,
+  onDeleteClick,
+}: PostContentProps) {
   return (
     <main className="w-full flex flex-col text-white">
       <div className="p-4 flex flex-col gap-y-4">
@@ -33,22 +46,49 @@ export function PostContent({ post, onLikeClick }: PostContentProps) {
         <div className="min-h-[200px] text-sm leading-relaxed whitespace-pre-wrap break-words">
           {post.content}
         </div>
-        <div className="flex items-center -ml-4">
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-12 w-12 hover:bg-white/10 rounded-full"
-            onClick={onLikeClick}>
-            <Heart
-              className="!h-6 !w-6"
-              fill={post.likeIt ? "currentColor" : "none"}
-              stroke={post.likeIt ? "currentColor" : "currentColor"}
-            />
-          </Button>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center -ml-4">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-12 w-12 hover:bg-white/10 rounded-full"
+              onClick={onLikeClick}>
+              <Heart
+                className="!h-6 !w-6"
+                fill={post.likeIt ? "currentColor" : "none"}
+                stroke={post.likeIt ? "currentColor" : "currentColor"}
+              />
+            </Button>
 
-          <span className="text-xs font-semibold flex items-center ">
-            {post.nLikes}
-          </span>
+            <span className="text-xs font-semibold flex items-center ">
+              {post.nLikes}
+            </span>
+          </div>
+
+          {post.editable && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-8 w-8 hover:bg-white/10 rounded-full">
+                  <MoreHorizontal className="h-4 w-4" />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent className="bg-brand-surface border-brand-surface text-white">
+                <DropdownMenuItem
+                  onClick={onEditClick}
+                  className="hover:bg-brand-primary hover:text-black cursor-pointer">
+                  수정
+                </DropdownMenuItem>
+                <DropdownMenuItem
+                  onClick={onDeleteClick}
+                  className="hover:bg-red-500 hover:text-white cursor-pointer">
+                  삭제
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
         </div>
       </div>
 
diff --git a/src/pages/community/index.tsx b/src/pages/community/index.tsx
index 0a654cd..ed40976 100644
--- a/src/pages/community/index.tsx
+++ b/src/pages/community/index.tsx
@@ -1,23 +1,52 @@
 import { useParams, useNavigate } from "react-router-dom";
+import { useState } from "react";
 import Header from "@/components/layout/Header";
-import { ArrowLeft, Bookmark, Heart, MessageCircle } from "lucide-react";
+import {
+  ArrowLeft,
+  Bookmark,
+  Heart,
+  MessageCircle,
+  Users,
+  Trash2,
+} from "lucide-react";
 import { Badge } from "@/components/ui/badge";
 import { Separator } from "@/components/ui/separator";
 import { Button } from "@/components/ui/button";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import {
   usePostDetail,
   useComments,
   useToggleLike,
   useToggleBookmark,
   useCreateComment,
+  useApplicants,
+  useToggleApply,
+  useDeletePost,
+  useUpdateComment,
+  useDeleteComment,
 } from "@/hooks/queries/usePosts";
 import { CommentForm } from "./__components/CommentForm";
 import { CommentSection } from "./__components/CommentSection";
+import { ApplicantSection } from "./__components/ApplicantSection";
+
 import { formatPostDetailDate } from "@/lib/date";
 
 export function PostDetailPage() {
   const { postId } = useParams<{ postId: string }>();
   const navigate = useNavigate();
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
+  const [showCommentDeleteDialog, setShowCommentDeleteDialog] = useState(false);
+  const [commentToDelete, setCommentToDelete] = useState<number | null>(null);
+  const [editingCommentId, setEditingCommentId] = useState<number | null>(null);
 
   if (!postId) {
     return <div className="p-4 text-white">유효하지 않은 게시글 ID입니다.</div>;
@@ -30,9 +59,19 @@ export function PostDetailPage() {
     isError: isCommentsError,
   } = useComments(postId);
 
+  const {
+    data: applicants = [],
+    isLoading: isApplicantsLoading,
+    isError: isApplicantsError,
+  } = useApplicants(postId);
+
   const toggleLikeMutation = useToggleLike();
   const toggleBookmarkMutation = useToggleBookmark();
   const createCommentMutation = useCreateComment();
+  const toggleApplyMutation = useToggleApply();
+  const deletePostMutation = useDeletePost();
+  const updateCommentMutation = useUpdateComment();
+  const deleteCommentMutation = useDeleteComment();
 
   if (isLoading) {
     return <div className="p-4 text-white">로딩 중...</div>;
@@ -76,20 +115,87 @@ export function PostDetailPage() {
     }
   };
 
+  const handleApplyClick = async () => {
+    if (!postId) return;
+    try {
+      await toggleApplyMutation.mutateAsync(parseInt(postId));
+    } catch (error) {
+      console.error("지원 처리 실패:", error);
+      alert("지원 처리에 실패했습니다. 다시 시도해주세요.");
+    }
+  };
+
+  const handleDeletePost = async () => {
+    if (!post) return;
+    try {
+      await deletePostMutation.mutateAsync(post.id);
+      setShowDeleteDialog(false);
+      navigate(-1);
+    } catch (error) {
+      console.error("게시글 삭제 실패:", error);
+      alert("게시글 삭제에 실패했습니다. 다시 시도해주세요.");
+    }
+  };
+
+  const handleEditComment = (commentId: number) => {
+    setEditingCommentId(commentId);
+  };
+
+  const handleCommentEditSubmit = async (content: string) => {
+    if (!editingCommentId) return;
+    try {
+      await updateCommentMutation.mutateAsync({
+        commentId: editingCommentId,
+        content,
+      });
+      setEditingCommentId(null);
+    } catch (error) {
+      console.error("댓글 수정 실패:", error);
+      alert("댓글 수정에 실패했습니다. 다시 시도해주세요.");
+    }
+  };
+
+  const handleCommentEditCancel = () => {
+    setEditingCommentId(null);
+  };
+
+  const handleDeleteComment = async () => {
+    if (!commentToDelete) return;
+    try {
+      await deleteCommentMutation.mutateAsync(commentToDelete);
+      setShowCommentDeleteDialog(false);
+      setCommentToDelete(null);
+    } catch (error) {
+      console.error("댓글 삭제 실패:", error);
+      alert("댓글 삭제에 실패했습니다. 다시 시도해주세요.");
+    }
+  };
+
+  const openCommentDeleteDialog = (commentId: number) => {
+    setCommentToDelete(commentId);
+    setShowCommentDeleteDialog(true);
+  };
+
   return (
     <div className="dark text-foreground h-full flex flex-col">
       <Header
         title="COMEET"
         leftIcon={<ArrowLeft />}
         rightIcon={
-          <Bookmark
-            className={
-              post.bookmark ? "fill-brand-primary text-brand-primary" : ""
-            }
-          />
+          post.editable ? (
+            <Trash2 className="h-4 w-4" />
+          ) : (
+            <Bookmark
+              className={
+                post.bookmark ? "fill-brand-primary text-brand-primary" : ""
+              }
+            />
+          )
         }
         onLeftClick={handleBackClick}
-        onRightClick={handleBookmarkClick}
+        onRightClick={
+          post.editable ? () => setShowDeleteDialog(true) : handleBookmarkClick
+        }
       />
       <div className="flex-1 overflow-y-auto scrollbar-hide pt-16">
         <main className="w-full flex flex-col text-white">
@@ -118,48 +224,168 @@ export function PostDetailPage() {
               )}
             </div>
 
-            <div className="flex items-center gap-x-3 text-brand-text">
-              <Button
-                variant="ghost"
-                size="sm"
-                className="p-0 h-auto flex items-center gap-x-2"
-                onClick={handleLikeClick}
-                disabled={toggleLikeMutation.isPending}>
-                <Heart
-                  className="size-4"
-                  fill={post.likeIt ? "#FF4A4A" : "none"}
-                  stroke={post.likeIt ? "#FF4A4A" : "currentColor"}
-                />
-                <span>{post.nLikes}</span>
-              </Button>
-              <div className="flex items-center gap-x-2">
-                <MessageCircle className="size-4" />
-                <span>{post.nComments}</span>
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-x-3 text-brand-text">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="p-0 h-auto flex items-center gap-x-2"
+                  onClick={handleLikeClick}
+                  disabled={toggleLikeMutation.isPending}>
+                  <Heart
+                    className="size-4"
+                    fill={post.likeIt ? "#FF4A4A" : "none"}
+                    stroke={post.likeIt ? "#FF4A4A" : "currentColor"}
+                  />
+                  <span>{post.nLikes}</span>
+                </Button>
+                {/* 일반 게시판만 댓글 개수 표시 */}
+                {!post.board.isRecruit && (
+                  <div className="flex items-center gap-x-2">
+                    <MessageCircle className="size-4" />
+                    <span>{post.nComments}</span>
+                  </div>
+                )}
+                {/* 모집 게시판은 지원자 개수 표시 */}
+                {post.board.isRecruit && (
+                  <div className="flex items-center gap-x-2">
+                    <Users className="size-4" />
+                    <span>{post.nApplicants || applicants.length}</span>
+                  </div>
+                )}
               </div>
             </div>
           </div>
           <Separator className="bg-brand-surface !h-1" />
 
-          {isCommentsLoading ? (
-            <div className="p-4 text-center text-brand-text">
-              댓글을 불러오는 중...
-            </div>
-          ) : isCommentsError ? (
-            <div className="p-4 text-center text-red-500">
-              댓글을 불러오는 데 실패했습니다.
-            </div>
-          ) : (
-            <CommentSection comments={comments} />
+          {/* 일반 게시판: 댓글 표시 */}
+          {!post.board.isRecruit && (
+            <>
+              {isCommentsLoading ? (
+                <div className="p-4 text-center text-brand-text">
+                  댓글을 불러오는 중...
+                </div>
+              ) : isCommentsError ? (
+                <div className="p-4 text-center text-red-500">
+                  댓글을 불러오는 데 실패했습니다.
+                </div>
+              ) : (
+                <CommentSection
+                  comments={comments}
+                  onEditComment={handleEditComment}
+                  onDeleteComment={openCommentDeleteDialog}
+                />
+              )}
+            </>
+          )}
+
+          {/* 모집 게시판: 지원자 목록 표시 */}
+          {post.board.isRecruit && (
+            <>
+              {isApplicantsLoading ? (
+                <div className="p-4 text-center text-brand-text">
+                  지원자 목록을 불러오는 중...
+                </div>
+              ) : isApplicantsError ? (
+                <div className="p-4 text-center text-red-500">
+                  지원자 목록을 불러오는 데 실패했습니다.
+                </div>
+              ) : (
+                <ApplicantSection applicants={applicants} />
+              )}
+            </>
           )}
         </main>
       </div>
 
-      <div className="border-t border-brand-surface bg-brand-background">
-        <CommentForm
-          onSubmit={handleCommentSubmit}
-          isPending={createCommentMutation.isPending}
-        />
-      </div>
+      {/* 자유, 질문 게시판만 댓글 작성 가능 */}
+      {!post.board.isRecruit && (
+        <div className="border-t border-brand-surface bg-brand-background">
+          <CommentForm
+            onSubmit={
+              editingCommentId ? handleCommentEditSubmit : handleCommentSubmit
+            }
+            isPending={
+              editingCommentId
+                ? updateCommentMutation.isPending
+                : createCommentMutation.isPending
+            }
+            editingCommentId={editingCommentId}
+            initialContent={
+              editingCommentId
+                ? comments.find((c) => c.id === editingCommentId)?.content || ""
+                : ""
+            }
+            onCancel={handleCommentEditCancel}
+          />
+        </div>
+      )}
+
+      {/* 모각코, 프로젝트 게시판은 지원 버튼 표시 */}
+      {post.board.isRecruit && (
+        <div className="border-t border-brand-surface bg-brand-background p-4">
+          <Button
+            className={`w-full ${
+              post.applied
+                ? "bg-red-500 hover:bg-red-600 text-white"
+                : "bg-brand-primary hover:bg-brand-primary/90 text-black"
+            }`}
+            onClick={handleApplyClick}
+            disabled={toggleApplyMutation.isPending}>
+            {toggleApplyMutation.isPending
+              ? "처리 중..."
+              : post.applied
+              ? "지원 취소"
+              : "지원하기"}
+          </Button>
+        </div>
+      )}
+
+      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <AlertDialogContent className="w-[90%] rounded-2xl bg-brand-background border-brand-surface text-white dark">
+          <AlertDialogHeader>
+            <AlertDialogTitle>게시글 삭제</AlertDialogTitle>
+            <AlertDialogDescription>
+              이 게시글을 삭제하시겠습니까?<br></br> 이 작업은 되돌릴 수
+              없습니다.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel className="bg-brand-surface border-brand-surface text-white hover:bg-brand-surface/90">
+              취소
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDeletePost}
+              className="bg-red-500 hover:bg-red-600 text-white">
+              삭제
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+
+      {/* 댓글 삭제 확인 다이얼로그 */}
+      <AlertDialog
+        open={showCommentDeleteDialog}
+        onOpenChange={setShowCommentDeleteDialog}>
+        <AlertDialogContent className="w-[90%] rounded-2xl bg-brand-background border-brand-surface text-white dark">
+          <AlertDialogHeader>
+            <AlertDialogTitle>댓글 삭제</AlertDialogTitle>
+            <AlertDialogDescription>
+              이 댓글을 삭제하시겠습니까?<br></br> 이 작업은 되돌릴 수 없습니다.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel className="bg-brand-surface border-brand-surface text-white hover:bg-brand-surface/90">
+              취소
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDeleteComment}
+              className="bg-red-500 hover:bg-red-600 text-white">
+              삭제
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }
diff --git a/src/types/post.types.ts b/src/types/post.types.ts
index cb01ea7..aa8811e 100644
--- a/src/types/post.types.ts
+++ b/src/types/post.types.ts
@@ -36,6 +36,15 @@ export interface PostDetailResponse {
   bookmark: boolean;
 }
 
+export interface PostListItem extends PostListResponse {
+  nApplicants?: number;
+}
+
+export interface PostDetailItem extends PostDetailResponse {
+  nApplicants?: number;
+  applied?: boolean;
+}
+
 export interface CommentResponse {
   id: number;
   postId: number;
@@ -61,12 +70,10 @@ export interface PostCommentResponse {
   nComments: number;
 }
 
-// ===== Request Types =====
-
-// 게시글 생성 요청
 export interface CreatePostRequest {
   title: string;
   content: string;
+  boardId: number;
   location: {
     lng: number;
     lat: number;
@@ -76,3 +83,21 @@ export interface CreatePostRequest {
 export interface CreateCommentRequest {
   content: string;
 }
+
+export interface UpdatePostRequest {
+  title: string;
+  content: string;
+}
+
+export interface UpdateCommentRequest {
+  content: string;
+}
+
+export interface ApplicantResponse {
+  nickname: string;
+  avatar: string;
+}
+
+export interface ApplyToggleResponse {
+  applied: boolean;
+}

From 1e9a9e3d6aed562feba4da6b71f99d8ce903f01d Mon Sep 17 00:00:00 2001
From: Monixc <chris13404@gmail.com>
Date: Mon, 11 Aug 2025 04:41:16 +0900
Subject: [PATCH 13/26] =?UTF-8?q?feat:=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20?=
 =?UTF-8?q?=EC=9E=91=EC=84=B1=20=EB=B0=8F=20=EB=AA=A9=EB=A1=9D=20=ED=91=9C?=
 =?UTF-8?q?=EC=8B=9C=20=EA=B8=B0=EB=8A=A5=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 위치 정보 가져오기 기능 추가 및 관련 에러 처리 구현
- 게시글 작성 시 위치 정보 필드 추가
- ListItem 컴포넌트에서 모집 게시판에 지원자 수 표시 기능 추가
- AddPostModal에서 위치 정보 자동 설정 및 초기 데이터 처리 로직 개선
- RecruitItem에서 포지션 선택 기능을 프로젝트 게시판에 맞게 수정
---
 src/pages/home/_components/ListItem.tsx       |  24 +++-
 .../home/_components/modal/AddPostModal.tsx   | 120 ++++++++++++++++--
 .../home/_components/modal/RecruitItem.tsx    |  22 +++-
 src/pages/home/index.tsx                      |   4 +-
 4 files changed, 143 insertions(+), 27 deletions(-)

diff --git a/src/pages/home/_components/ListItem.tsx b/src/pages/home/_components/ListItem.tsx
index 02a54d5..96251bf 100644
--- a/src/pages/home/_components/ListItem.tsx
+++ b/src/pages/home/_components/ListItem.tsx
@@ -1,12 +1,12 @@
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-import { Heart, MessageCircle } from "lucide-react";
+import { Heart, MessageCircle, Users } from "lucide-react";
 import { useNavigate } from "react-router-dom";
-import type { Post } from "@/types/post.types";
+import type { PostListItem } from "@/types/post.types";
 import { formatPostListDate } from "@/lib/date";
 
 interface ListItemProps {
-  post: Post;
+  post: PostListItem;
 }
 
 export const ListItem = ({ post }: ListItemProps) => {
@@ -35,10 +35,20 @@ export const ListItem = ({ post }: ListItemProps) => {
             <Heart className="size-4" aria-label="좋아요" />
             <span className="w-3">{post.nLikes}</span>
           </div>
-          <div className="flex items-center space-x-1">
-            <MessageCircle className="size-4" aria-label="댓글" />
-            <span className="w-3">{post.nComments}</span>
-          </div>
+          {/* 일반 게시판: 댓글 개수 표시 */}
+          {!post.board.isRecruit && (
+            <div className="flex items-center space-x-1">
+              <MessageCircle className="size-4" aria-label="댓글" />
+              <span className="w-3">{post.nComments}</span>
+            </div>
+          )}
+          {/* 모집 게시판: 지원자 개수 표시. api에 관련 필드 없는 관계로 쿼리로 처리 중--개선 필요*/}
+          {post.board.isRecruit && (
+            <div className="flex items-center space-x-1">
+              <Users className="size-4" aria-label="지원자" />
+              <span className="w-3">{post.nApplicants || 0}</span>
+            </div>
+          )}
         </div>
       </CardContent>
     </Card>
diff --git a/src/pages/home/_components/modal/AddPostModal.tsx b/src/pages/home/_components/modal/AddPostModal.tsx
index 4e9f6b0..ee59447 100644
--- a/src/pages/home/_components/modal/AddPostModal.tsx
+++ b/src/pages/home/_components/modal/AddPostModal.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import {
   Select,
@@ -12,17 +13,33 @@ import { PostItem } from "./PostItem";
 import { RecruitItem } from "./RecruitItem";
 import { useAddPostModal } from "../../../../hooks/useAddPostModal";
 import { useBoards } from "../../../../hooks/queries/usePosts";
+import {
+  usePositionsInterests,
+  useStacks,
+} from "../../../../hooks/queries/useTags";
+import { useLocationQuery } from "../../../../hooks/queries/useLocationQuery";
 
 interface AddPostModalProps {
   onClose: () => void;
-  onSubmit: (data: { title: string; content: string; boardId: number }) => void;
+  onSubmit: (data: {
+    title: string;
+    content: string;
+    boardId: number;
+    location: { lat: number; lng: number };
+  }) => void;
   isSubmitting?: boolean;
+  initialData?: {
+    title: string;
+    content: string;
+    boardId: number;
+  };
 }
 
 export const AddPostModal = ({
   onClose,
   onSubmit,
   isSubmitting = false,
+  initialData,
 }: AddPostModalProps) => {
   const {
     title,
@@ -31,7 +48,9 @@ export const AddPostModal = ({
     description,
     recruitCount,
     position,
+    selectedPositionIds,
     selectedStackIds,
+    location,
     isRecruitBoard,
     setTitle,
     setContent,
@@ -39,11 +58,51 @@ export const AddPostModal = ({
     setDescription,
     setRecruitCount,
     setPosition,
+    setSelectedPositionIds,
     setSelectedStackIds,
+    setLocation,
     reset,
   } = useAddPostModal();
 
   const { data: boards = [] } = useBoards();
+  const { data: positionsInterestsData } = usePositionsInterests();
+  const { data: stacks } = useStacks();
+  const { location: currentLocation, refetchLocation } = useLocationQuery();
+
+  useEffect(() => {
+    if (currentLocation && !location) {
+      setLocation(currentLocation);
+    }
+  }, [currentLocation, location, setLocation]);
+
+  useEffect(() => {
+    if (!location && currentLocation) {
+      setLocation(currentLocation);
+    }
+  }, [location, currentLocation, setLocation]);
+
+  useEffect(() => {
+    if (initialData && !location) {
+      if (currentLocation) {
+        setLocation(currentLocation);
+      } else {
+        refetchLocation().then(() => {
+          console.log("위치 정보 다시 가져오기 완료");
+        });
+      }
+    }
+  }, [initialData, currentLocation, location, setLocation, refetchLocation]);
+
+  useEffect(() => {
+    if (initialData) {
+      setTitle(initialData.title);
+      setContent(initialData.content);
+      const board = boards.find((b) => b.id === initialData.boardId);
+      if (board) {
+        setSelectedBoard(board.value);
+      }
+    }
+  }, [initialData, boards]);
 
   const handleSubmit = () => {
     if (!title.trim() || !selectedBoard) {
@@ -51,7 +110,10 @@ export const AddPostModal = ({
     }
 
     if (isRecruitBoard) {
-      if (!description.trim() || !position || selectedStackIds.length === 0) {
+      if (!description.trim() || selectedStackIds.length === 0) {
+        return;
+      }
+      if (selectedBoard === "프로젝트" && selectedPositionIds.length === 0) {
         return;
       }
     } else {
@@ -60,15 +122,41 @@ export const AddPostModal = ({
       }
     }
 
+    if (!location) {
+      alert("위치 정보가 필요합니다. 위치 정보를 설정해주세요.");
+      return;
+    }
+
     const selectedBoardData = boards.find(
       (board) => board.value === selectedBoard
     );
     if (!selectedBoardData) return;
 
+    let finalContent = isRecruitBoard ? description.trim() : content.trim();
+
+    if (isRecruitBoard) {
+      finalContent += `\n\n모집 인원: ${recruitCount}명`;
+      if (selectedBoard === "프로젝트" && selectedPositionIds.length > 0) {
+        const positions = positionsInterestsData?.positions || [];
+        const selectedPositions = positions.filter((pos) =>
+          selectedPositionIds.includes(pos.id)
+        );
+        const positionText = selectedPositions
+          .map((pos) => pos.role)
+          .join(", ");
+        finalContent += `\n포지션: ${positionText}`;
+      }
+      const selectedStacks =
+        stacks?.filter((stack) => selectedStackIds.includes(stack.id)) || [];
+      const stackText = selectedStacks.map((stack) => stack.value).join(", ");
+      finalContent += `\n기술스택: ${stackText}`;
+    }
+
     const postData = {
       title: title.trim(),
-      content: isRecruitBoard ? description.trim() : content.trim(),
+      content: finalContent,
       boardId: selectedBoardData.id,
+      location,
     };
 
     onSubmit(postData);
@@ -79,6 +167,17 @@ export const AddPostModal = ({
     onClose();
   };
 
+  const isDisabled =
+    isSubmitting ||
+    !title.trim() ||
+    !selectedBoard ||
+    (isRecruitBoard
+      ? !description.trim() ||
+        selectedStackIds.length === 0 ||
+        (selectedBoard === "프로젝트" && selectedPositionIds.length === 0)
+      : !content.trim()) ||
+    !location;
+
   const footer = (
     <div className="flex items-center gap-2">
       <Button
@@ -89,14 +188,7 @@ export const AddPostModal = ({
       </Button>
       <Button
         onClick={handleSubmit}
-        disabled={
-          isSubmitting ||
-          !title.trim() ||
-          !selectedBoard ||
-          (isRecruitBoard
-            ? !description.trim() || !position || selectedStackIds.length === 0
-            : !content.trim())
-        }
+        disabled={isDisabled}
         className="flex-1 bg-brand-primary hover:bg-brand-primary/90 font-bold text-base py-6">
         {isSubmitting ? "작성 중..." : "작성하기"}
       </Button>
@@ -106,7 +198,6 @@ export const AddPostModal = ({
   return (
     <ModalWrapper title="게시글 작성" onClose={handleClose} footer={footer}>
       <div className="space-y-6">
-        {/* 게시판 선택 */}
         <div className="space-y-3">
           <Label>게시판</Label>
           <Select value={selectedBoard} onValueChange={setSelectedBoard}>
@@ -125,19 +216,20 @@ export const AddPostModal = ({
             </SelectContent>
           </Select>
         </div>
-
-        {/*포스트, 리크루트 조건부 렌더링*/}
         {isRecruitBoard ? (
           <RecruitItem
             title={title}
             description={description}
             recruitCount={recruitCount}
             position={position}
+            selectedPositionIds={selectedPositionIds}
             selectedStackIds={selectedStackIds}
+            boardValue={selectedBoard}
             onTitleChange={setTitle}
             onDescriptionChange={setDescription}
             onRecruitCountChange={setRecruitCount}
             onPositionChange={setPosition}
+            onPositionIdsChange={setSelectedPositionIds}
             onStackIdsChange={setSelectedStackIds}
           />
         ) : (
diff --git a/src/pages/home/_components/modal/RecruitItem.tsx b/src/pages/home/_components/modal/RecruitItem.tsx
index 1948750..3d2be50 100644
--- a/src/pages/home/_components/modal/RecruitItem.tsx
+++ b/src/pages/home/_components/modal/RecruitItem.tsx
@@ -17,11 +17,14 @@ interface RecruitItemProps {
   description: string;
   recruitCount: number;
   position: number | null;
+  selectedPositionIds: number[];
   selectedStackIds: number[];
+  boardValue: string;
   onTitleChange: (title: string) => void;
   onDescriptionChange: (description: string) => void;
   onRecruitCountChange: (count: number) => void;
   onPositionChange: (position: number | null) => void;
+  onPositionIdsChange: (positionIds: number[]) => void;
   onStackIdsChange: (stackIds: number[]) => void;
 }
 
@@ -30,11 +33,14 @@ export const RecruitItem = ({
   description,
   recruitCount,
   position,
+  selectedPositionIds,
   selectedStackIds,
+  boardValue,
   onTitleChange,
   onDescriptionChange,
   onRecruitCountChange,
   onPositionChange,
+  onPositionIdsChange,
   onStackIdsChange,
 }: RecruitItemProps) => {
   const [isRecruitPopoverOpen, setIsRecruitPopoverOpen] = useState(false);
@@ -111,11 +117,17 @@ export const RecruitItem = ({
           </PopoverContent>
         </Popover>
       </div>
-      <PositionSelector
-        selectedPosition={position}
-        onPositionChange={onPositionChange}
-        label="포지션"
-      />
+      {/* 모각코에서는 포지션 제외, 프로젝트에서는 포지션 다중 선택 가능 */}
+      {boardValue === "프로젝트" && (
+        <PositionSelector
+          selectedPosition={position}
+          selectedPositionIds={selectedPositionIds}
+          onPositionChange={onPositionChange}
+          onPositionIdsChange={onPositionIdsChange}
+          label="포지션"
+          multiple={true}
+        />
+      )}
       <StackSelector
         selectedStackIds={selectedStackIds}
         onStackChange={onStackIdsChange}
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index ec2e623..d248768 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -2,6 +2,7 @@ import { useState } from "react";
 import { Bell, Plus, Search } from "lucide-react";
 import { useParams, useNavigate } from "react-router-dom";
 import { usePosts, useCreatePost, useBoards } from "@/hooks/queries/usePosts";
+import { useLocationQuery } from "@/hooks/queries/useLocationQuery";
 import { AppTabs } from "@/components/common/AppTabs";
 import { AddPostModal } from "./_components/modal/AddPostModal";
 import { ListItem } from "./_components/ListItem";
@@ -15,6 +16,7 @@ export const BoardPage = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   const { data: boards = [], isLoading: boardsLoading } = useBoards();
+  const { refetchLocation } = useLocationQuery();
 
   const validCategories = [
     "all",
@@ -58,12 +60,12 @@ export const BoardPage = () => {
     title: string;
     content: string;
     boardId: number;
+    location: { lat: number; lng: number };
   }) => {
     try {
       await createPostMutation.mutateAsync(data);
       setIsModalOpen(false);
     } catch (err) {
-      console.error("게시글 작성 실패:", err);
       alert("게시글 작성에 실패했습니다.");
     }
   };

From 7941b0ff6ec9ed89c79e2b2bd9933a72eaa6fd6d Mon Sep 17 00:00:00 2001
From: Monixc <chris13404@gmail.com>
Date: Mon, 11 Aug 2025 04:41:59 +0900
Subject: [PATCH 14/26] =?UTF-8?q?feat:=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20?=
 =?UTF-8?q?=ED=83=80=EC=9E=85=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20=ED=81=B4?=
 =?UTF-8?q?=EB=A6=AD=20=ED=95=B8=EB=93=A4=EB=9F=AC=20=EC=97=85=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- SearchResults 컴포넌트에서 게시글 타입을 Post에서 PostListItem으로 변경
- 클릭 핸들러에서 사용되는 게시글 타입을 Post에서 PostListItem으로 수정
---
 src/pages/search/_components/SearchResults.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/pages/search/_components/SearchResults.tsx b/src/pages/search/_components/SearchResults.tsx
index 33606e5..3f1f18c 100644
--- a/src/pages/search/_components/SearchResults.tsx
+++ b/src/pages/search/_components/SearchResults.tsx
@@ -2,11 +2,11 @@ import { useNavigate } from "react-router-dom";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Heart, MessageCircle } from "lucide-react";
-import type { Post } from "@/types/post.types";
+import type { PostListItem } from "@/types/post.types";
 import { formatPostListDate } from "@/lib/date";
 
 interface SearchResultsProps {
-  posts: Post[];
+  posts: PostListItem[];
   isLoading: boolean;
   isError: boolean;
   error: Error | null;
@@ -24,7 +24,7 @@ export default function SearchResults({
 }: SearchResultsProps) {
   const navigate = useNavigate();
 
-  const handlePostClick = (post: Post) => {
+  const handlePostClick = (post: PostListItem) => {
     navigate(`/community/${post.id}`);
   };
 

From 5de87f53b6efad3e6d9a04b4c5dcebc51cb4a866 Mon Sep 17 00:00:00 2001
From: Monixc <chris13404@gmail.com>
Date: Mon, 11 Aug 2025 04:52:24 +0900
Subject: [PATCH 15/26] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=9C=ED=95=84=20?=
 =?UTF-8?q?=ED=8E=B8=EC=A7=91=20=EA=B8=B0=EB=8A=A5=20=EB=B0=8F=20API=20?=
 =?UTF-8?q?=EC=97=B0=EB=8F=99=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 프로필 수정 페이지(EditProfilePage) 추가 및 관련 UI 구현
- 프로필 정보를 가져오는 훅(useMyProfile) 및 프로필 업데이트 훅(useUpdateProfile) 추가
- 프로필 섹션(ProfileSection)에서 프로필 정보 표시 및 수정 버튼 기능 추가
- API 호출을 통해 프로필 정보를 가져오고 수정하는 기능 구현
---
 src/components/profile/ProfileSection.tsx |  80 +++---
 src/hooks/queries/useMy.ts                |  21 ++
 src/lib/api/my.ts                         |  42 +++
 src/main.tsx                              |   5 +
 src/pages/my/edit/index.tsx               | 302 ++++++++++++++++++++++
 src/pages/my/index.tsx                    |  43 ++-
 6 files changed, 440 insertions(+), 53 deletions(-)
 create mode 100644 src/hooks/queries/useMy.ts
 create mode 100644 src/lib/api/my.ts
 create mode 100644 src/pages/my/edit/index.tsx

diff --git a/src/components/profile/ProfileSection.tsx b/src/components/profile/ProfileSection.tsx
index c380fcd..7d7cc94 100644
--- a/src/components/profile/ProfileSection.tsx
+++ b/src/components/profile/ProfileSection.tsx
@@ -1,71 +1,49 @@
-import { useRef, useState } from "react";
 import { Button } from "@/components/ui/button";
-import { Camera } from "lucide-react";
+import type { GetProfileResponse } from "@/types/my.types";
 
 interface ProfileSectionProps {
+  profile?: GetProfileResponse;
   isEditable?: boolean;
+  onEditClick?: () => void;
 }
 
-export const ProfileSection = ({ isEditable = false }: ProfileSectionProps) => {
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const [imagePreview, setImagePreview] = useState<string | null>(null);
-
-  const handleImageClick = () => {
-    if (!isEditable) return;
-    fileInputRef.current?.click();
-  };
-
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      const reader = new FileReader();
-
-      reader.onloadend = () => {
-        if (typeof reader.result === "string") {
-          setImagePreview(reader.result);
-        }
-      };
-      reader.readAsDataURL(file);
-    }
-  };
+export const ProfileSection = ({
+  profile,
+  onEditClick,
+}: ProfileSectionProps) => {
+  const displayImage = profile?.avatar;
+  const displayName = profile?.nickname || "이름";
+  const displayInfo = profile
+    ? `${profile.age}세 · ${profile.position?.role || "포지션"}`
+    : "나이 · 포지션";
 
   return (
     <div className="flex flex-col items-center mt-8">
       <div className="relative">
-        <div
-          className={`w-32 h-32 rounded-full bg-brand-primary flex items-center justify-center overflow-hidden ${
-            isEditable ? "cursor-pointer" : ""
-          }`}
-          onClick={handleImageClick}>
-          {imagePreview ? (
+        <div className="w-32 h-32 rounded-full bg-brand-primary flex items-center justify-center overflow-hidden">
+          {displayImage ? (
             <img
-              src={imagePreview}
-              alt="Profile preview"
+              src={displayImage}
+              alt="Profile"
               className="w-full h-full object-cover"
             />
           ) : (
-            isEditable && <Camera className="size-12 text-brand-background" />
+            <div className="w-full h-full bg-brand-primary flex items-center justify-center">
+              <span className="text-brand-background text-2xl font-bold">
+                {displayName.charAt(0)}
+              </span>
+            </div>
           )}
         </div>
-        {isEditable && (
-          <input
-            type="file"
-            ref={fileInputRef}
-            onChange={handleFileChange}
-            className="hidden"
-            accept="image/*"
-          />
-        )}
       </div>
-      <h2 className="text-2xl font-bold mt-4 text-white">이름</h2>
-      <p className="text-brand-text mt-1">나이 · 포지션</p>
-      {isEditable && (
-        <Button
-          variant="outline"
-          className="mt-4 bg-transparent border-brand-surface text-white hover:bg-brand-surface/50 hover:text-white">
-          프로필 설정
-        </Button>
-      )}
+      <h2 className="text-2xl font-bold mt-4 text-white">{displayName}</h2>
+      <p className="text-brand-text mt-1">{displayInfo}</p>
+      <Button
+        variant="outline"
+        onClick={onEditClick}
+        className="mt-4 bg-transparent border-brand-surface text-white hover:bg-brand-surface/50 hover:text-white">
+        프로필 설정
+      </Button>
     </div>
   );
 };
diff --git a/src/hooks/queries/useMy.ts b/src/hooks/queries/useMy.ts
new file mode 100644
index 0000000..5ec6f18
--- /dev/null
+++ b/src/hooks/queries/useMy.ts
@@ -0,0 +1,21 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { fetchMyProfile, updateMyProfile } from "@/lib/api/my";
+import type { UpdateProfileRequest } from "@/types/my.types";
+
+export const useMyProfile = () => {
+  return useQuery({
+    queryKey: ["myProfile"],
+    queryFn: fetchMyProfile,
+  });
+};
+
+export const useUpdateProfile = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (data: UpdateProfileRequest) => updateMyProfile(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["myProfile"] });
+    },
+  });
+};
diff --git a/src/lib/api/my.ts b/src/lib/api/my.ts
new file mode 100644
index 0000000..175a898
--- /dev/null
+++ b/src/lib/api/my.ts
@@ -0,0 +1,42 @@
+import type {
+  GetProfileResponse,
+  UpdateProfileRequest,
+} from "@/types/my.types";
+import { createApiUrl, createAuthHeaders } from "./config";
+
+export const fetchMyProfile = async (): Promise<GetProfileResponse> => {
+  const url = `${createApiUrl("/users")}`;
+  const headers = createAuthHeaders();
+  const response = await fetch(url, {
+    headers,
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `프로필을 불러오는 데 실패했습니다: ${response.status} ${response.statusText}`
+    );
+  }
+  const data = await response.json();
+  return data;
+};
+
+export const updateMyProfile = async (
+  data: UpdateProfileRequest
+): Promise<void> => {
+  const url = `${createApiUrl("/users")}`;
+  const headers = createAuthHeaders();
+  const response = await fetch(url, {
+    method: "PATCH",
+    headers: {
+      ...headers,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(data),
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `프로필 수정에 실패했습니다: ${response.status} ${response.statusText}`
+    );
+  }
+};
diff --git a/src/main.tsx b/src/main.tsx
index 1b43f71..14fa1b7 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -7,6 +7,7 @@ import App from "./App.tsx";
 import { LoginPage } from "./pages/auth/LoginPage.tsx";
 import { BoardPage } from "./pages/home/index.tsx";
 import { MyPage } from "./pages/my/index.tsx";
+import { EditProfilePage } from "./pages/my/edit/index.tsx";
 import { DeveloperPage } from "./pages/developer/index.tsx";
 import { ExplorePage } from "./pages/explore/index.tsx";
 import { OnboardingPage } from "./pages/onboarding/index.tsx";
@@ -57,6 +58,10 @@ const router = createBrowserRouter([
         path: "my",
         element: <MyPage />,
       },
+      {
+        path: "my/edit",
+        element: <EditProfilePage />,
+      },
       {
         path: "developer/:id",
         element: <DeveloperPage />,
diff --git a/src/pages/my/edit/index.tsx b/src/pages/my/edit/index.tsx
new file mode 100644
index 0000000..4c060a4
--- /dev/null
+++ b/src/pages/my/edit/index.tsx
@@ -0,0 +1,302 @@
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+  ArrowLeft,
+  Save,
+  Linkedin,
+  Mail,
+  Instagram,
+  Rss,
+  Github,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { PositionSelector } from "@/components/common/PositionSelector";
+import { StackSelector } from "@/components/common/StackSelector";
+import Header from "@/components/layout/Header";
+import { useMyProfile, useUpdateProfile } from "@/hooks/queries/useMy";
+import { usePositionsInterests } from "@/hooks/queries/useTags";
+import { cn } from "@/lib/utils";
+import type { UpdateProfileRequest } from "@/types/my.types";
+
+export const EditProfilePage = () => {
+  const navigate = useNavigate();
+  const { data: profile, isLoading } = useMyProfile();
+  const { data: positionsInterestsData } = usePositionsInterests();
+  const updateProfileMutation = useUpdateProfile();
+
+  const [formData, setFormData] = useState<UpdateProfileRequest>({
+    nickname: "",
+    experience: 0,
+    bio: "",
+    positionId: undefined,
+    techIds: [],
+    interestIds: [],
+    github: "",
+    email: "",
+    instagram: "",
+    linkedIn: "",
+    blog: "",
+  });
+
+  useEffect(() => {
+    if (profile) {
+      setFormData({
+        nickname: profile.nickname || "",
+        experience: profile.experience || 0,
+        bio: profile.bio || "",
+        positionId: profile.position?.id || undefined,
+        techIds: profile.techStack?.map((tech: any) => tech.id) || [],
+        interestIds:
+          profile.interests?.map((interest: any) => interest.id) || [],
+        github: profile.github || "",
+        email: profile.email || "",
+        instagram: profile.instagram || "",
+        linkedIn: profile.linkedIn || "",
+        blog: profile.blog || "",
+      });
+    }
+  }, [profile]);
+
+  const handleInputChange = (field: keyof UpdateProfileRequest, value: any) => {
+    setFormData((prev) => ({
+      ...prev,
+      [field]: value,
+    }));
+  };
+
+  const handleSubmit = async () => {
+    try {
+      const requestData = {
+        nickname: formData.nickname,
+        experience: formData.experience,
+        bio: formData.bio,
+        positionId: formData.positionId,
+        techIds: formData.techIds,
+        interestIds: formData.interestIds,
+        ...(formData.github && { github: formData.github }),
+        ...(formData.email && { email: formData.email }),
+        ...(formData.instagram && { instagram: formData.instagram }),
+        ...(formData.linkedIn && { linkedIn: formData.linkedIn }),
+        ...(formData.blog && { blog: formData.blog }),
+      };
+
+      await updateProfileMutation.mutateAsync(requestData);
+      navigate("/my");
+    } catch (error) {
+      alert("프로필 수정에 실패했습니다. 다시 시도해주세요.");
+    }
+  };
+
+  const handleBack = () => {
+    navigate("/my");
+  };
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-brand-background text-white flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-primary mx-auto mb-4"></div>
+          <p>프로필을 불러오는 중...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-brand-background text-white">
+      <Header
+        title="프로필 수정"
+        leftIcon={<ArrowLeft />}
+        onLeftClick={handleBack}
+      />
+
+      <div className="p-4 space-y-6 pt-16">
+        {/* 기본 정보 */}
+        <div className="space-y-4">
+          <h3 className="text-lg font-semibold">기본 정보</h3>
+
+          <div className="space-y-3">
+            <Label htmlFor="nickname">닉네임</Label>
+            <Input
+              id="nickname"
+              value={formData.nickname}
+              onChange={(e) => handleInputChange("nickname", e.target.value)}
+              className="bg-brand-surface border-brand-surface text-white"
+              placeholder="닉네임을 입력하세요"
+            />
+          </div>
+
+          <div className="space-y-3">
+            <Label htmlFor="experience">경력 (년)</Label>
+            <Input
+              id="experience"
+              type="number"
+              value={formData.experience || ""}
+              onChange={(e) =>
+                handleInputChange("experience", parseInt(e.target.value) || 0)
+              }
+              className="bg-brand-surface border-brand-surface text-white"
+              placeholder="경력을 입력하세요"
+            />
+          </div>
+
+          <div className="space-y-3">
+            <Label htmlFor="bio">자기소개</Label>
+            <Textarea
+              id="bio"
+              value={formData.bio}
+              onChange={(e) => handleInputChange("bio", e.target.value)}
+              className="bg-brand-surface border-brand-surface text-white min-h-[100px]"
+              placeholder="자기소개를 입력하세요"
+            />
+          </div>
+        </div>
+
+        {/* 포지션 */}
+        <div className="space-y-4">
+          <h3 className="text-lg font-semibold">포지션</h3>
+          <PositionSelector
+            selectedPosition={formData.positionId || null}
+            onPositionChange={(positionId) =>
+              handleInputChange("positionId", positionId)
+            }
+          />
+        </div>
+
+        {/* 기술 스택 */}
+        <div className="space-y-4">
+          <h3 className="text-lg font-semibold">기술 스택</h3>
+          <StackSelector
+            selectedStackIds={formData.techIds || []}
+            onStackChange={(techIds) => handleInputChange("techIds", techIds)}
+            maxSelection={10}
+          />
+        </div>
+
+        {/* 관심사 */}
+        <div className="space-y-4">
+          <h3 className="text-lg font-semibold">관심사</h3>
+          <div className="space-y-3">
+            <Label>관심 분야 (최대 3개)</Label>
+            <div className="grid grid-cols-4 gap-2">
+              {positionsInterestsData?.interests?.map((interest) => (
+                <Button
+                  key={interest.id}
+                  variant="outline"
+                  onClick={() => {
+                    const currentIds = formData.interestIds || [];
+                    const newIds = currentIds.includes(interest.id)
+                      ? currentIds.filter((id) => id !== interest.id)
+                      : currentIds.length < 3
+                      ? [...currentIds, interest.id]
+                      : currentIds;
+                    handleInputChange("interestIds", newIds);
+                  }}
+                  className={cn(
+                    "rounded-md border-brand-surface bg-transparent hover:bg-brand-primary hover:text-white",
+                    (formData.interestIds || []).includes(interest.id) &&
+                      "border-brand-primary text-brand-primary border-1"
+                  )}>
+                  <span className="text-sm">{interest.value}</span>
+                </Button>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* 소셜 링크 */}
+        <div className="space-y-4">
+          <h3 className="text-lg font-semibold">소셜 링크</h3>
+          <p className="text-sm text-brand-text">
+            다른 사람들에게 자신을 보여줄 수 있는 링크를 추가해보세요.
+            (선택사항)
+          </p>
+
+          <div className="space-y-3">
+            <Label htmlFor="github">GitHub</Label>
+            <div className="relative">
+              <Github className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-brand-text" />
+              <Input
+                id="github"
+                value={formData.github || ""}
+                onChange={(e) => handleInputChange("github", e.target.value)}
+                placeholder="https://github.com/..."
+                className="bg-brand-surface border-transparent focus:!ring-0 focus:!border-brand-primary pl-10"
+              />
+            </div>
+          </div>
+
+          <div className="space-y-3">
+            <Label htmlFor="email">이메일</Label>
+            <div className="relative">
+              <Mail className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-brand-text" />
+              <Input
+                id="email"
+                type="email"
+                value={formData.email || ""}
+                onChange={(e) => handleInputChange("email", e.target.value)}
+                placeholder="contact@example.com"
+                className="bg-brand-surface border-transparent focus:!ring-0 focus:!border-brand-primary pl-10"
+              />
+            </div>
+          </div>
+
+          <div className="space-y-3">
+            <Label htmlFor="instagram">Instagram</Label>
+            <div className="relative">
+              <Instagram className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-brand-text" />
+              <Input
+                id="instagram"
+                value={formData.instagram || ""}
+                onChange={(e) => handleInputChange("instagram", e.target.value)}
+                placeholder="https://instagram.com/..."
+                className="bg-brand-surface border-transparent focus:!ring-0 focus:!border-brand-primary pl-10"
+              />
+            </div>
+          </div>
+
+          <div className="space-y-3">
+            <Label htmlFor="linkedin">LinkedIn</Label>
+            <div className="relative">
+              <Linkedin className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-brand-text" />
+              <Input
+                id="linkedin"
+                value={formData.linkedIn || ""}
+                onChange={(e) => handleInputChange("linkedIn", e.target.value)}
+                placeholder="https://linkedin.com/in/..."
+                className="bg-brand-surface border-transparent focus:!ring-0 focus:!border-brand-primary pl-10"
+              />
+            </div>
+          </div>
+
+          <div className="space-y-3">
+            <Label htmlFor="blog">블로그</Label>
+            <div className="relative">
+              <Rss className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-brand-text" />
+              <Input
+                id="blog"
+                value={formData.blog || ""}
+                onChange={(e) => handleInputChange("blog", e.target.value)}
+                placeholder="https://example.com"
+                className="bg-brand-surface border-transparent focus:!ring-0 focus:!border-brand-primary pl-10"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* 저장 버튼 */}
+        <div className="pt-6">
+          <Button
+            onClick={handleSubmit}
+            disabled={updateProfileMutation.isPending}
+            className="w-full bg-brand-primary hover:bg-brand-primary/90 text-black">
+            {updateProfileMutation.isPending ? "저장 중..." : "저장"}
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/pages/my/index.tsx b/src/pages/my/index.tsx
index 8c2ee92..9574bd7 100644
--- a/src/pages/my/index.tsx
+++ b/src/pages/my/index.tsx
@@ -1,18 +1,57 @@
+import { useNavigate } from "react-router-dom";
 import { ProfileSection } from "@/components/profile/ProfileSection";
 import { Bell, ChevronRight } from "lucide-react";
 import { MENU_ITEMS, type MenuItemId } from "@/constants/my";
 import Header from "@/components/layout/Header";
+import { useMyProfile } from "@/hooks/queries/useMy";
 
 export const MyPage = () => {
+  const navigate = useNavigate();
+  const { data: profile, isLoading, error } = useMyProfile();
+
   const handleMenuItemClick = (menuId: MenuItemId) => {
     console.log(`선택된 메뉴: ${menuId}`);
   };
 
+  const handleEditProfile = () => {
+    navigate("/my/edit");
+  };
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-brand-background text-white flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-primary mx-auto mb-4"></div>
+          <p>프로필을 불러오는 중...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-brand-background text-white flex items-center justify-center">
+        <div className="text-center">
+          <p className="text-red-400 mb-4">프로필을 불러올 수 없습니다.</p>
+          <button
+            onClick={() => window.location.reload()}
+            className="px-4 py-2 bg-brand-primary text-black rounded-lg hover:bg-brand-primary/90">
+            다시 시도
+          </button>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div>
       <Header title="COMEET" leftIcon={<Bell />} />
-      <div className="dark text-foreground flex flex-col items-center">
-        <ProfileSection isEditable />
+      <div className="dark text-foreground flex flex-col items-center pt-20">
+        <ProfileSection
+          profile={profile}
+          isEditable
+          onEditClick={handleEditProfile}
+        />
         <div className="w-full mt-8 border-t border-brand-surface">
           <ul className="text-white">
             {MENU_ITEMS.map((item) => (

From 24df53defd573995a1dc0e8b594c8f12d8db43cf Mon Sep 17 00:00:00 2001
From: Monixc <chris13404@gmail.com>
Date: Mon, 11 Aug 2025 04:53:36 +0900
Subject: [PATCH 16/26] =?UTF-8?q?feat:=20=ED=95=98=EB=8B=A8=20=EB=82=B4?=
 =?UTF-8?q?=EB=B9=84=EA=B2=8C=EC=9D=B4=EC=85=98=20=ED=91=9C=EC=8B=9C=20?=
 =?UTF-8?q?=EC=A1=B0=EA=B1=B4=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 하단 내비게이션이 "/my/edit" 경로에서는 표시되지 않도록 조건 추가
- 기존 조건문을 수정하여 더 명확한 로직 구현
---
 src/components/layout/GlobalLayout.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/layout/GlobalLayout.tsx b/src/components/layout/GlobalLayout.tsx
index b4cc8bf..ece9760 100644
--- a/src/components/layout/GlobalLayout.tsx
+++ b/src/components/layout/GlobalLayout.tsx
@@ -9,9 +9,10 @@ interface GlobalLayoutProps {
 function GlobalLayout({ children }: GlobalLayoutProps) {
   const location = useLocation();
 
-  const shouldShowBottomNav = ["/board", "/explore", "/chat", "/my"].some(
-    (path) => location.pathname.startsWith(path)
-  );
+  const shouldShowBottomNav =
+    ["/board", "/explore", "/chat", "/my"].some((path) =>
+      location.pathname.startsWith(path)
+    ) && !location.pathname.startsWith("/my/edit");
 
   return (
     <div className="min-h-screen bg-slate-100 flex justify-center">

From 4924968b8b9cfa0336c1b0384b7bdb889301a80e Mon Sep 17 00:00:00 2001
From: Monixc <chris13404@gmail.com>
Date: Mon, 11 Aug 2025 10:44:29 +0900
Subject: [PATCH 17/26] =?UTF-8?q?feat:=20ListItem=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20common=EC=9C=BC=EB=A1=9C=20=EC=9D=B4?=
 =?UTF-8?q?=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 공용 컴포넌트로 변경
---
 src/components/common/ListItem.tsx | 56 ++++++++++++++++++++++++++++++
 1 file changed, 56 insertions(+)
 create mode 100644 src/components/common/ListItem.tsx

diff --git a/src/components/common/ListItem.tsx b/src/components/common/ListItem.tsx
new file mode 100644
index 0000000..96251bf
--- /dev/null
+++ b/src/components/common/ListItem.tsx
@@ -0,0 +1,56 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Heart, MessageCircle, Users } from "lucide-react";
+import { useNavigate } from "react-router-dom";
+import type { PostListItem } from "@/types/post.types";
+import { formatPostListDate } from "@/lib/date";
+
+interface ListItemProps {
+  post: PostListItem;
+}
+
+export const ListItem = ({ post }: ListItemProps) => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate(`/community/${post.id}`);
+  };
+
+  return (
+    <Card
+      className="bg-brand-surface border-none text-white hover:bg-brand-surface/50 transition-colors cursor-pointer"
+      onClick={handleClick}>
+      <CardHeader>
+        <Badge className="w-fit p-0 text-left bg-transparent border-none text-brand-primary">
+          {post.board.value}
+        </Badge>
+        <CardTitle className="mt-2">{post.title}</CardTitle>
+      </CardHeader>
+      <CardContent className="flex justify-between items-center text-xs text-brand-text">
+        <span>
+          {post.author.nickname} · {formatPostListDate(post.createdAt)}
+        </span>
+        <div className="flex items-center space-x-4">
+          <div className="flex items-center space-x-1">
+            <Heart className="size-4" aria-label="좋아요" />
+            <span className="w-3">{post.nLikes}</span>
+          </div>
+          {/* 일반 게시판: 댓글 개수 표시 */}
+          {!post.board.isRecruit && (
+            <div className="flex items-center space-x-1">
+              <MessageCircle className="size-4" aria-label="댓글" />
+              <span className="w-3">{post.nComments}</span>
+            </div>
+          )}
+          {/* 모집 게시판: 지원자 개수 표시. api에 관련 필드 없는 관계로 쿼리로 처리 중--개선 필요*/}
+          {post.board.isRecruit && (
+            <div className="flex items-center space-x-1">
+              <Users className="size-4" aria-label="지원자" />
+              <span className="w-3">{post.nApplicants || 0}</span>
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+};

From 90b2263823fdfbe3a18be5c6790f03a3c9ddf3a1 Mon Sep 17 00:00:00 2001
From: Monixc <chris13404@gmail.com>
Date: Mon, 11 Aug 2025 10:44:49 +0900
Subject: [PATCH 18/26] =?UTF-8?q?feat:=20=EB=A9=94=EB=89=B4=20=ED=95=AD?=
 =?UTF-8?q?=EB=AA=A9=20=EB=B0=8F=20=ED=94=84=EB=A1=9C=ED=95=84=20=ED=83=AD?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 메뉴 항목에서 '좋아요 한 글'을 '내가 쓴 댓글'로 변경
- '로그아웃' 및 '계정 삭제' 항목 추가
- 프로필 탭에서 '작성한 글' 라벨을 '소셜 링크'로 수정
---
 src/constants/my.ts      | 4 +++-
 src/constants/profile.ts | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/constants/my.ts b/src/constants/my.ts
index 1e89c6c..0312d2b 100644
--- a/src/constants/my.ts
+++ b/src/constants/my.ts
@@ -1,8 +1,10 @@
 export const MENU_ITEMS = [
   { id: "posts", label: "작성한 글" },
   { id: "history", label: "활동 이력" },
-  { id: "likes", label: "좋아요 한 글" },
+  { id: "comments", label: "내가 쓴 댓글" },
   { id: "bookmarks", label: "북마크" },
+  { id: "logout", label: "로그아웃" },
+  { id: "delete", label: "계정 삭제", isDestructive: true },
 ] as const;
 
 export type MenuItemId = (typeof MENU_ITEMS)[number]["id"];
diff --git a/src/constants/profile.ts b/src/constants/profile.ts
index ae5f151..df547ca 100644
--- a/src/constants/profile.ts
+++ b/src/constants/profile.ts
@@ -5,7 +5,7 @@ export const DEVELOPER_TABS = [
   },
   {
     value: "posts",
-    label: "작성한 글 ",
+    label: "소셜 링크",
   },
 ] as const;
 

From 9b508b1fddd972ecabed5bf1c57288649afe24f9 Mon Sep 17 00:00:00 2001
From: Monixc <chris13404@gmail.com>
Date: Mon, 11 Aug 2025 10:45:10 +0900
Subject: [PATCH 19/26] =?UTF-8?q?feat:=20=ED=9A=8C=EC=9B=90=EA=B0=80?=
 =?UTF-8?q?=EC=9E=85=20=ED=9B=84=20=EB=84=A4=EB=B9=84=EA=B2=8C=EC=9D=B4?=
 =?UTF-8?q?=EC=85=98=20=EB=B0=8F=20=EB=B2=84=ED=8A=BC=20=ED=85=8D=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 회원가입 성공 시 네비게이션 경로를 "/board"에서 "/login"으로 변경
- 버튼 텍스트를 "홈으로"에서 "로그인하기"로 수정
---
 src/pages/onboarding/_components/OnboardingStep4.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/onboarding/_components/OnboardingStep4.tsx b/src/pages/onboarding/_components/OnboardingStep4.tsx
index cc0805d..81314f4 100644
--- a/src/pages/onboarding/_components/OnboardingStep4.tsx
+++ b/src/pages/onboarding/_components/OnboardingStep4.tsx
@@ -92,7 +92,7 @@ export function OnboardingStep4({ data }: StepProps) {
         sessionId,
         data: requestData,
       });
-      navigate("/board");
+      navigate("/login");
     } catch (error) {
       alert("회원가입에 실패했습니다. 다시 시도해주세요.");
     }
@@ -125,7 +125,7 @@ export function OnboardingStep4({ data }: StepProps) {
           onClick={handleSubmit}
           disabled={signUpMutation.isPending}
           className="w-full bg-brand-primary hover:bg-brand-primary/80 text-black font-bold text-lg py-6">
-          {signUpMutation.isPending ? "처리 중..." : "홈으로"}
+          {signUpMutation.isPending ? "처리 중..." : "로그인하기"}
         </Button>
       </div>
     </div>

From 9d6eab85dd9a98d77efdae21c1b076d2017ec886 Mon Sep 17 00:00:00 2001
From: Monixc <chris13404@gmail.com>
Date: Mon, 11 Aug 2025 10:46:44 +0900
Subject: [PATCH 20/26] =?UTF-8?q?feat:=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20Save=20=EC=9E=84=ED=8F=AC=ED=8A=B8=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- index.tsx 파일에서 사용되지 않는 Save 컴포넌트 임포트를 제거하여 코드 정리
---
 src/pages/my/edit/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/my/edit/index.tsx b/src/pages/my/edit/index.tsx
index 4c060a4..930f0a2 100644
--- a/src/pages/my/edit/index.tsx
+++ b/src/pages/my/edit/index.tsx
@@ -2,7 +2,6 @@ import { useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import {
   ArrowLeft,
-  Save,
   Linkedin,
   Mail,
   Instagram,

From 57410af650a08f4173bbee8c35d23247cb9a5a6a Mon Sep 17 00:00:00 2001
From: Monixc <chris13404@gmail.com>
Date: Mon, 11 Aug 2025 10:47:58 +0900
Subject: [PATCH 21/26] =?UTF-8?q?feat:=20=EC=BF=BC=EB=A6=AC=20=ED=9B=85?=
 =?UTF-8?q?=EC=9D=98=20staleTime=EC=9D=84=200=EC=9C=BC=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD=20=EB=B0=8F=20=EB=B6=88=ED=95=84=EC=9A=94?=
 =?UTF-8?q?=ED=95=9C=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=97=85=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=8A=B8=20=EB=A1=9C=EC=A7=81=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- usePosts, usePostDetail, useSearchPosts, useComments 훅의 staleTime을 0으로 설정하여 데이터 갱신 주기를 즉시 반영하도록 수정
---
 src/hooks/queries/usePosts.ts | 36 ++++++-----------------------------
 1 file changed, 6 insertions(+), 30 deletions(-)

diff --git a/src/hooks/queries/usePosts.ts b/src/hooks/queries/usePosts.ts
index ffb4f7b..1c4517e 100644
--- a/src/hooks/queries/usePosts.ts
+++ b/src/hooks/queries/usePosts.ts
@@ -44,7 +44,7 @@ export const usePosts = (category: UICategory) => {
           new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime()
       );
     },
-    staleTime: 5 * 60 * 1000,
+    staleTime: 0,
     gcTime: 10 * 60 * 1000,
   });
 };
@@ -60,7 +60,7 @@ export const usePostDetail = (postId: string) => {
       return result;
     },
     enabled: !!postId,
-    staleTime: 5 * 60 * 1000,
+    staleTime: 0,
     gcTime: 10 * 60 * 1000,
     retry: 1,
   });
@@ -77,7 +77,7 @@ export const useSearchPosts = (query: string) => {
       );
     },
     enabled: !!query && query.trim().length > 0,
-    staleTime: 2 * 60 * 1000,
+    staleTime: 0,
     gcTime: 5 * 60 * 1000,
   });
 };
@@ -98,7 +98,7 @@ export const useComments = (postId: string) => {
     queryKey: ["comments", postId],
     queryFn: () => fetchComments(postId),
     enabled: !!postId,
-    staleTime: 2 * 60 * 1000,
+    staleTime: 0,
     gcTime: 5 * 60 * 1000,
   });
 };
@@ -252,23 +252,9 @@ export const useUpdateComment = () => {
       commentId: number;
       content: string;
     }) => updateComment(commentId, { content }),
-    onSuccess: (_, variables) => {
+    onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["comments"] });
-      queryClient.setQueriesData<CommentResponse[]>(
-        { queryKey: ["comments"] },
-        (oldData: CommentResponse[] | undefined) => {
-          if (!oldData) return oldData;
-          return oldData.map((comment) => {
-            if (comment.id === variables.commentId) {
-              return {
-                ...comment,
-                content: variables.content,
-              };
-            }
-            return comment;
-          });
-        }
-      );
+      queryClient.invalidateQueries({ queryKey: ["posts"] });
     },
   });
 };
@@ -281,16 +267,6 @@ export const useDeleteComment = () => {
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: ["comments"] });
       queryClient.invalidateQueries({ queryKey: ["posts"] });
-      queryClient.setQueriesData<PostDetailItem>(
-        { queryKey: ["post"] },
-        (oldData: PostDetailItem | undefined) => {
-          if (!oldData) return oldData;
-          return {
-            ...oldData,
-            nComments: Math.max((oldData.nComments || 0) - 1, 0),
-          };
-        }
-      );
     },
   });
 };

From 2268e539027a60839840df31edfbefcf9e9dd2bb Mon Sep 17 00:00:00 2001
From: Monixc <chris13404@gmail.com>
Date: Mon, 11 Aug 2025 10:48:52 +0900
Subject: [PATCH 22/26] =?UTF-8?q?feat:=20=EC=9C=84=EC=B9=98=20=EC=A0=95?=
 =?UTF-8?q?=EB=B3=B4=20=EA=B0=80=EC=A0=B8=EC=98=A4=EA=B8=B0=20=EC=97=90?=
 =?UTF-8?q?=EB=9F=AC=20=EC=B2=98=EB=A6=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/home/_components/ListItem.tsx | 56 -------------------------
 src/pages/home/index.tsx                |  9 +++-
 2 files changed, 7 insertions(+), 58 deletions(-)
 delete mode 100644 src/pages/home/_components/ListItem.tsx

diff --git a/src/pages/home/_components/ListItem.tsx b/src/pages/home/_components/ListItem.tsx
deleted file mode 100644
index 96251bf..0000000
--- a/src/pages/home/_components/ListItem.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Badge } from "@/components/ui/badge";
-import { Heart, MessageCircle, Users } from "lucide-react";
-import { useNavigate } from "react-router-dom";
-import type { PostListItem } from "@/types/post.types";
-import { formatPostListDate } from "@/lib/date";
-
-interface ListItemProps {
-  post: PostListItem;
-}
-
-export const ListItem = ({ post }: ListItemProps) => {
-  const navigate = useNavigate();
-
-  const handleClick = () => {
-    navigate(`/community/${post.id}`);
-  };
-
-  return (
-    <Card
-      className="bg-brand-surface border-none text-white hover:bg-brand-surface/50 transition-colors cursor-pointer"
-      onClick={handleClick}>
-      <CardHeader>
-        <Badge className="w-fit p-0 text-left bg-transparent border-none text-brand-primary">
-          {post.board.value}
-        </Badge>
-        <CardTitle className="mt-2">{post.title}</CardTitle>
-      </CardHeader>
-      <CardContent className="flex justify-between items-center text-xs text-brand-text">
-        <span>
-          {post.author.nickname} · {formatPostListDate(post.createdAt)}
-        </span>
-        <div className="flex items-center space-x-4">
-          <div className="flex items-center space-x-1">
-            <Heart className="size-4" aria-label="좋아요" />
-            <span className="w-3">{post.nLikes}</span>
-          </div>
-          {/* 일반 게시판: 댓글 개수 표시 */}
-          {!post.board.isRecruit && (
-            <div className="flex items-center space-x-1">
-              <MessageCircle className="size-4" aria-label="댓글" />
-              <span className="w-3">{post.nComments}</span>
-            </div>
-          )}
-          {/* 모집 게시판: 지원자 개수 표시. api에 관련 필드 없는 관계로 쿼리로 처리 중--개선 필요*/}
-          {post.board.isRecruit && (
-            <div className="flex items-center space-x-1">
-              <Users className="size-4" aria-label="지원자" />
-              <span className="w-3">{post.nApplicants || 0}</span>
-            </div>
-          )}
-        </div>
-      </CardContent>
-    </Card>
-  );
-};
diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx
index d248768..e6f4c53 100644
--- a/src/pages/home/index.tsx
+++ b/src/pages/home/index.tsx
@@ -5,7 +5,7 @@ import { usePosts, useCreatePost, useBoards } from "@/hooks/queries/usePosts";
 import { useLocationQuery } from "@/hooks/queries/useLocationQuery";
 import { AppTabs } from "@/components/common/AppTabs";
 import { AddPostModal } from "./_components/modal/AddPostModal";
-import { ListItem } from "./_components/ListItem";
+import { ListItem } from "@/components/common/ListItem";
 import type { UICategory } from "@/constants/board";
 import { Button } from "@/components/ui/button";
 import Header from "@/components/layout/Header";
@@ -52,7 +52,12 @@ export const BoardPage = () => {
     navigate("/search");
   };
 
-  const handlePlusClick = () => {
+  const handlePlusClick = async () => {
+    try {
+      await refetchLocation();
+    } catch (error) {
+      console.error("위치 정보 가져오기 실패:", error);
+    }
     setIsModalOpen(true);
   };
 

From d821c67b79edb733ec4171028b3c3cf757ff0e9c Mon Sep 17 00:00:00 2001
From: Monixc <chris13404@gmail.com>
Date: Mon, 11 Aug 2025 10:56:28 +0900
Subject: [PATCH 23/26] =?UTF-8?q?feat:=20=EB=82=B4=20=ED=94=84=EB=A1=9C?=
 =?UTF-8?q?=ED=95=84=20=EA=B4=80=EB=A0=A8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EB=B0=8F=20API=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 내 게시물, 댓글, 북마크, 지원 내역 페이지 추가
- 프로필 섹션에 구독자 수 표시 기능 추가
- 관련 API 호출을 위한 쿼리 훅(useMyPosts, useMyComments, useMyBookmarks, useMyApplies) 추가
- 소셜 링크 컴포넌트 추가 및 프로필 컴포넌트 수정
- 계정 삭제 및 로그아웃 기능 추가
---
 src/components/profile/ProfileSection.tsx   |   3 +
 src/hooks/queries/useMy.ts                  |  83 ++++++++++++++-
 src/lib/api/my.ts                           | 110 ++++++++++++++++++++
 src/main.tsx                                |  22 +++-
 src/pages/developer/_components/Links.tsx   |  66 ++++++++++++
 src/pages/developer/_components/Posts.tsx   |   5 -
 src/pages/developer/_components/Profile.tsx |  67 +++++++++++-
 src/pages/my/bookmarks.tsx                  |  71 +++++++++++++
 src/pages/my/comments.tsx                   |  90 ++++++++++++++++
 src/pages/my/history.tsx                    |  71 +++++++++++++
 src/pages/my/index.tsx                      |  89 +++++++++++++++-
 src/pages/my/posts.tsx                      |  71 +++++++++++++
 12 files changed, 736 insertions(+), 12 deletions(-)
 create mode 100644 src/pages/developer/_components/Links.tsx
 delete mode 100644 src/pages/developer/_components/Posts.tsx
 create mode 100644 src/pages/my/bookmarks.tsx
 create mode 100644 src/pages/my/comments.tsx
 create mode 100644 src/pages/my/history.tsx
 create mode 100644 src/pages/my/posts.tsx

diff --git a/src/components/profile/ProfileSection.tsx b/src/components/profile/ProfileSection.tsx
index 7d7cc94..fa4c36e 100644
--- a/src/components/profile/ProfileSection.tsx
+++ b/src/components/profile/ProfileSection.tsx
@@ -38,6 +38,9 @@ export const ProfileSection = ({
       </div>
       <h2 className="text-2xl font-bold mt-4 text-white">{displayName}</h2>
       <p className="text-brand-text mt-1">{displayInfo}</p>
+      <p className="text-brand-text text-sm mt-1">
+        구독자 {profile?.nSubscribers || 0}명
+      </p>
       <Button
         variant="outline"
         onClick={onEditClick}
diff --git a/src/hooks/queries/useMy.ts b/src/hooks/queries/useMy.ts
index 5ec6f18..aa31863 100644
--- a/src/hooks/queries/useMy.ts
+++ b/src/hooks/queries/useMy.ts
@@ -1,14 +1,61 @@
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { fetchMyProfile, updateMyProfile } from "@/lib/api/my";
-import type { UpdateProfileRequest } from "@/types/my.types";
+import type {
+  GetProfileResponse,
+  UpdateProfileRequest,
+} from "@/types/my.types";
 
 export const useMyProfile = () => {
-  return useQuery({
+  return useQuery<GetProfileResponse>({
     queryKey: ["myProfile"],
     queryFn: fetchMyProfile,
   });
 };
 
+// 내가 쓴 게시물
+export const useMyPosts = () => {
+  return useQuery({
+    queryKey: ["myPosts"],
+    queryFn: async () => {
+      const { fetchMyPosts } = await import("@/lib/api/my");
+      return fetchMyPosts();
+    },
+  });
+};
+
+// 지원한 모집글
+export const useMyApplies = () => {
+  return useQuery({
+    queryKey: ["myApplies"],
+    queryFn: async () => {
+      const { fetchMyApplies } = await import("@/lib/api/my");
+      return fetchMyApplies();
+    },
+  });
+};
+
+// 내가 쓴 댓글
+export const useMyComments = () => {
+  return useQuery({
+    queryKey: ["myComments"],
+    queryFn: async () => {
+      const { fetchMyComments } = await import("@/lib/api/my");
+      return fetchMyComments();
+    },
+  });
+};
+
+// 북마크한 게시물
+export const useMyBookmarks = () => {
+  return useQuery({
+    queryKey: ["myBookmarks"],
+    queryFn: async () => {
+      const { fetchMyBookmarks } = await import("@/lib/api/my");
+      return fetchMyBookmarks();
+    },
+  });
+};
+
 export const useUpdateProfile = () => {
   const queryClient = useQueryClient();
 
@@ -19,3 +66,35 @@ export const useUpdateProfile = () => {
     },
   });
 };
+
+// 로그아웃
+export const useSignOut = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async () => {
+      const { signOut } = await import("@/lib/api/my");
+      return signOut();
+    },
+    onSuccess: () => {
+      queryClient.clear();
+      window.location.href = "/login";
+    },
+  });
+};
+
+// 계정 삭제
+export const useDeleteAccount = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: async () => {
+      const { deleteAccount } = await import("@/lib/api/my");
+      return deleteAccount();
+    },
+    onSuccess: () => {
+      queryClient.clear();
+      window.location.href = "/login";
+    },
+  });
+};
diff --git a/src/lib/api/my.ts b/src/lib/api/my.ts
index 175a898..22bd761 100644
--- a/src/lib/api/my.ts
+++ b/src/lib/api/my.ts
@@ -40,3 +40,113 @@ export const updateMyProfile = async (
     );
   }
 };
+
+// 내가 쓴 게시물 검색
+export const fetchMyPosts = async (): Promise<any[]> => {
+  const url = `${createApiUrl("/posts/users")}`;
+  const headers = createAuthHeaders();
+
+  const response = await fetch(url, {
+    headers,
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `내 게시물을 불러오는 데 실패했습니다: ${response.status} ${response.statusText}`
+    );
+  }
+
+  const data = await response.json();
+  return data.results || [];
+};
+
+// 지원한 모집글 검색
+export const fetchMyApplies = async (): Promise<any[]> => {
+  const url = `${createApiUrl("/posts/applies")}`;
+  const headers = createAuthHeaders();
+
+  const response = await fetch(url, {
+    headers,
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `지원 내역을 불러오는 데 실패했습니다: ${response.status} ${response.statusText}`
+    );
+  }
+
+  const data = await response.json();
+  return data.results || [];
+};
+
+// 내가 쓴 댓글 조회
+export const fetchMyComments = async (): Promise<any[]> => {
+  const url = `${createApiUrl("/posts/comments/users")}`;
+  const headers = createAuthHeaders();
+
+  const response = await fetch(url, {
+    headers,
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `내 댓글을 불러오는 데 실패했습니다: ${response.status} ${response.statusText}`
+    );
+  }
+
+  const data = await response.json();
+  return data.results || [];
+};
+
+// 북마크한 게시물 검색
+export const fetchMyBookmarks = async (): Promise<any[]> => {
+  const url = `${createApiUrl("/posts/bookmarks")}`;
+  const headers = createAuthHeaders();
+
+  const response = await fetch(url, {
+    headers,
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `북마크를 불러오는 데 실패했습니다: ${response.status} ${response.statusText}`
+    );
+  }
+
+  const data = await response.json();
+  return data.results || [];
+};
+
+// 로그아웃
+export const signOut = async (): Promise<void> => {
+  const url = `${createApiUrl("/auth/sign-out")}`;
+  const headers = createAuthHeaders();
+
+  const response = await fetch(url, {
+    method: "GET",
+    headers,
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `로그아웃에 실패했습니다: ${response.status} ${response.statusText}`
+    );
+  }
+};
+
+// 계정 삭제
+export const deleteAccount = async (): Promise<void> => {
+  const url = `${createApiUrl("/users")}`;
+  const headers = createAuthHeaders();
+
+  const response = await fetch(url, {
+    method: "DELETE",
+    headers,
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `계정 삭제에 실패했습니다: ${response.status} ${response.statusText}`
+    );
+  }
+};
diff --git a/src/main.tsx b/src/main.tsx
index 14fa1b7..be4ba9d 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -8,6 +8,10 @@ import { LoginPage } from "./pages/auth/LoginPage.tsx";
 import { BoardPage } from "./pages/home/index.tsx";
 import { MyPage } from "./pages/my/index.tsx";
 import { EditProfilePage } from "./pages/my/edit/index.tsx";
+import { MyPostsPage } from "./pages/my/posts.tsx";
+import { MyHistoryPage } from "./pages/my/history.tsx";
+import { MyCommentsPage } from "./pages/my/comments.tsx";
+import { MyBookmarksPage } from "./pages/my/bookmarks.tsx";
 import { DeveloperPage } from "./pages/developer/index.tsx";
 import { ExplorePage } from "./pages/explore/index.tsx";
 import { OnboardingPage } from "./pages/onboarding/index.tsx";
@@ -63,7 +67,23 @@ const router = createBrowserRouter([
         element: <EditProfilePage />,
       },
       {
-        path: "developer/:id",
+        path: "my/posts",
+        element: <MyPostsPage />,
+      },
+      {
+        path: "my/history",
+        element: <MyHistoryPage />,
+      },
+      {
+        path: "my/comments",
+        element: <MyCommentsPage />,
+      },
+      {
+        path: "my/bookmarks",
+        element: <MyBookmarksPage />,
+      },
+      {
+        path: "developer/:nickname",
         element: <DeveloperPage />,
       },
       {
diff --git a/src/pages/developer/_components/Links.tsx b/src/pages/developer/_components/Links.tsx
new file mode 100644
index 0000000..e15216b
--- /dev/null
+++ b/src/pages/developer/_components/Links.tsx
@@ -0,0 +1,66 @@
+import { Github, Mail, Linkedin, Globe } from "lucide-react";
+import type { GetProfileResponse } from "@/types/my.types";
+
+interface SocialLinksProps {
+  userProfile?: GetProfileResponse;
+}
+
+const SocialLinks = ({ userProfile }: SocialLinksProps) => {
+  if (!userProfile) {
+    return <div className="text-white">소셜 링크 정보가 없습니다.</div>;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h3 className="text-lg font-semibold text-white mb-4">소셜 링크</h3>
+        <div className="flex gap-4 justify-center">
+          <a
+            href={userProfile.github}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={`p-3 ${
+              userProfile.github
+                ? "text-brand-text hover:text-white"
+                : "text-brand-surface"
+            }`}>
+            <Github className="size-5" />
+          </a>
+          <a
+            href={`mailto:${userProfile.email}`}
+            className={`p-3 ${
+              userProfile.email
+                ? "text-brand-text hover:text-white"
+                : "text-brand-surface"
+            }`}>
+            <Mail className="size-5" />
+          </a>
+          <a
+            href={userProfile.linkedIn}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={`p-3 ${
+              userProfile.linkedIn
+                ? "text-brand-text hover:text-white"
+                : "text-brand-surface"
+            }`}>
+            <Linkedin className="size-5" />
+          </a>
+          <a
+            href={userProfile.blog}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={`p-3 ${
+              userProfile.blog
+                ? "text-brand-text hover:text-white"
+                : "text-brand-surface"
+            }`}>
+            <Globe className="size-5" />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SocialLinks;
diff --git a/src/pages/developer/_components/Posts.tsx b/src/pages/developer/_components/Posts.tsx
deleted file mode 100644
index 9ec48d4..0000000
--- a/src/pages/developer/_components/Posts.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-const Posts = () => {
-  return <h1>작성글</h1>;
-};
-
-export default Posts;
diff --git a/src/pages/developer/_components/Profile.tsx b/src/pages/developer/_components/Profile.tsx
index 8442bc3..932c5ca 100644
--- a/src/pages/developer/_components/Profile.tsx
+++ b/src/pages/developer/_components/Profile.tsx
@@ -1,5 +1,68 @@
-const Profile = () => {
-  return <h1>프로필</h1>;
+import { Badge } from "@/components/ui/badge";
+import type { GetProfileResponse } from "@/types/my.types";
+
+interface ProfileProps {
+  userProfile?: GetProfileResponse;
+}
+
+const Profile = ({ userProfile }: ProfileProps) => {
+  if (!userProfile) {
+    return <div className="text-white">프로필 정보가 없습니다.</div>;
+  }
+
+  return (
+    <div className="space-y-6 overflow-hidden">
+      {/* Bio */}
+      {userProfile.bio && (
+        <div>
+          <h3 className="text-lg font-semibold text-white mb-2">소개</h3>
+          <p className="text-brand-text text-sm leading-relaxed whitespace-pre-wrap">
+            {userProfile.bio}
+          </p>
+        </div>
+      )}
+
+      {/* 경력 */}
+      <div>
+        <h3 className="text-lg font-semibold text-white mb-2">경력</h3>
+        <p className="text-brand-text text-sm">{userProfile.experience}년</p>
+      </div>
+
+      {/* 테크스택 */}
+      {userProfile.techStack && userProfile.techStack.length > 0 && (
+        <div>
+          <h3 className="text-lg font-semibold text-white mb-2">기술 스택</h3>
+          <div className="flex flex-wrap gap-2 overflow-hidden">
+            {userProfile.techStack.map((tech, index) => (
+              <Badge
+                key={`${tech.id}-${index}`}
+                variant="outline"
+                className="rounded-full bg-brand-surface border-brand-primary text-brand-primary text-xs">
+                {tech.value}
+              </Badge>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* 관심사 */}
+      {userProfile.interests && userProfile.interests.length > 0 && (
+        <div>
+          <h3 className="text-lg font-semibold text-white mb-2">관심사</h3>
+          <div className="flex flex-wrap gap-2 overflow-hidden">
+            {userProfile.interests.map((interest, index) => (
+              <Badge
+                key={`${interest.id}-${index}`}
+                variant="outline"
+                className="rounded-full bg-brand-surface border-brand-primary text-brand-primary text-xs">
+                {interest.value}
+              </Badge>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
 };
 
 export default Profile;
diff --git a/src/pages/my/bookmarks.tsx b/src/pages/my/bookmarks.tsx
new file mode 100644
index 0000000..ab12652
--- /dev/null
+++ b/src/pages/my/bookmarks.tsx
@@ -0,0 +1,71 @@
+import { useNavigate } from "react-router-dom";
+import { ArrowLeft } from "lucide-react";
+import Header from "@/components/layout/Header";
+import { useMyBookmarks } from "@/hooks/queries/useMy";
+import { ListItem } from "@/components/common/ListItem";
+
+export const MyBookmarksPage = () => {
+  const navigate = useNavigate();
+  const { data: bookmarks, isLoading, error } = useMyBookmarks();
+
+  const handleBack = () => {
+    navigate("/my");
+  };
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-brand-background text-white flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-primary mx-auto mb-4"></div>
+          <p>북마크를 불러오는 중...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-brand-background text-white flex items-center justify-center">
+        <div className="text-center">
+          <p className="text-red-400 mb-4">북마크를 불러올 수 없습니다.</p>
+          <button
+            onClick={() => window.location.reload()}
+            className="px-4 py-2 bg-brand-primary text-black rounded-lg hover:bg-brand-primary/90">
+            다시 시도
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <Header
+        title="북마크"
+        leftIcon={<ArrowLeft />}
+        onLeftClick={handleBack}
+      />
+      <div className="dark text-foreground pt-20 pb-20">
+        <div className="px-4">
+          {bookmarks && bookmarks.length > 0 ? (
+            <div className="space-y-4">
+              {bookmarks
+                .sort(
+                  (a: any, b: any) =>
+                    new Date(b.createdAt).getTime() -
+                    new Date(a.createdAt).getTime()
+                )
+                .map((bookmark: any) => (
+                  <ListItem key={bookmark.id} post={bookmark} />
+                ))}
+            </div>
+          ) : (
+            <div className="text-center py-12">
+              <p className="text-brand-text">북마크한 게시물이 없습니다.</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/pages/my/comments.tsx b/src/pages/my/comments.tsx
new file mode 100644
index 0000000..1eebb54
--- /dev/null
+++ b/src/pages/my/comments.tsx
@@ -0,0 +1,90 @@
+import { useNavigate } from "react-router-dom";
+import { ArrowLeft, MessageCircle } from "lucide-react";
+import Header from "@/components/layout/Header";
+import { useMyComments } from "@/hooks/queries/useMy";
+import { formatRelativeTime } from "@/lib/date";
+
+export const MyCommentsPage = () => {
+  const navigate = useNavigate();
+  const { data: comments, isLoading, error } = useMyComments();
+
+  const handleBack = () => {
+    navigate("/my");
+  };
+
+  const handlePostClick = (postId: number) => {
+    navigate(`/community/${postId}`);
+  };
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-brand-background text-white flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-primary mx-auto mb-4"></div>
+          <p>댓글을 불러오는 중...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-brand-background text-white flex items-center justify-center">
+        <div className="text-center">
+          <p className="text-red-400 mb-4">댓글을 불러올 수 없습니다.</p>
+          <button
+            onClick={() => window.location.reload()}
+            className="px-4 py-2 bg-brand-primary text-black rounded-lg hover:bg-brand-primary/90">
+            다시 시도
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <Header
+        title="내가 쓴 댓글"
+        leftIcon={<ArrowLeft />}
+        onLeftClick={handleBack}
+      />
+      <div className="dark text-foreground pt-20 pb-20">
+        <div className="px-4">
+          {comments && comments.length > 0 ? (
+            <div className="space-y-4">
+              {comments
+                .sort(
+                  (a: any, b: any) =>
+                    new Date(b.createdAt).getTime() -
+                    new Date(a.createdAt).getTime()
+                )
+                .map((comment: any) => (
+                  <div
+                    key={comment.id}
+                    onClick={() => handlePostClick(comment.postId)}
+                    className="bg-brand-surface rounded-lg p-4 cursor-pointer hover:bg-brand-surface/80 transition-colors">
+                    <p className="text-white text-sm mb-2 line-clamp-3">
+                      {comment.content}
+                    </p>
+
+                    <div className="flex items-center justify-between text-brand-text text-xs">
+                      <span>{formatRelativeTime(comment.createdAt)}</span>
+                      <div className="flex items-center space-x-1">
+                        <MessageCircle className="size-3" />
+                        <span>본문으로 이동</span>
+                      </div>
+                    </div>
+                  </div>
+                ))}
+            </div>
+          ) : (
+            <div className="text-center py-12">
+              <p className="text-brand-text">작성한 댓글이 없습니다.</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/pages/my/history.tsx b/src/pages/my/history.tsx
new file mode 100644
index 0000000..a93d4bb
--- /dev/null
+++ b/src/pages/my/history.tsx
@@ -0,0 +1,71 @@
+import { useNavigate } from "react-router-dom";
+import { ArrowLeft } from "lucide-react";
+import Header from "@/components/layout/Header";
+import { useMyApplies } from "@/hooks/queries/useMy";
+import { ListItem } from "@/components/common/ListItem";
+
+export const MyHistoryPage = () => {
+  const navigate = useNavigate();
+  const { data: applies, isLoading, error } = useMyApplies();
+
+  const handleBack = () => {
+    navigate("/my");
+  };
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-brand-background text-white flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-primary mx-auto mb-4"></div>
+          <p>지원 내역을 불러오는 중...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-brand-background text-white flex items-center justify-center">
+        <div className="text-center">
+          <p className="text-red-400 mb-4">지원 내역을 불러올 수 없습니다.</p>
+          <button
+            onClick={() => window.location.reload()}
+            className="px-4 py-2 bg-brand-primary text-black rounded-lg hover:bg-brand-primary/90">
+            다시 시도
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <Header
+        title="활동 이력"
+        leftIcon={<ArrowLeft />}
+        onLeftClick={handleBack}
+      />
+      <div className="dark text-foreground pt-20 pb-20">
+        <div className="px-4">
+          {applies && applies.length > 0 ? (
+            <div className="space-y-4">
+              {applies
+                .sort(
+                  (a: any, b: any) =>
+                    new Date(b.createdAt).getTime() -
+                    new Date(a.createdAt).getTime()
+                )
+                .map((apply: any) => (
+                  <ListItem key={apply.id} post={apply} />
+                ))}
+            </div>
+          ) : (
+            <div className="text-center py-12">
+              <p className="text-brand-text">지원한 모집글이 없습니다.</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/pages/my/index.tsx b/src/pages/my/index.tsx
index 9574bd7..5e9b6c0 100644
--- a/src/pages/my/index.tsx
+++ b/src/pages/my/index.tsx
@@ -3,14 +3,74 @@ import { ProfileSection } from "@/components/profile/ProfileSection";
 import { Bell, ChevronRight } from "lucide-react";
 import { MENU_ITEMS, type MenuItemId } from "@/constants/my";
 import Header from "@/components/layout/Header";
-import { useMyProfile } from "@/hooks/queries/useMy";
+import {
+  useMyProfile,
+  useSignOut,
+  useDeleteAccount,
+} from "@/hooks/queries/useMy";
+import { useState } from "react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 
 export const MyPage = () => {
   const navigate = useNavigate();
   const { data: profile, isLoading, error } = useMyProfile();
+  const signOutMutation = useSignOut();
+  const deleteAccountMutation = useDeleteAccount();
+  const [showDeleteDialog, setShowDeleteDialog] = useState(false);
 
   const handleMenuItemClick = (menuId: MenuItemId) => {
     console.log(`선택된 메뉴: ${menuId}`);
+
+    switch (menuId) {
+      case "posts":
+        navigate("/my/posts");
+        break;
+      case "history":
+        navigate("/my/history");
+        break;
+      case "comments":
+        navigate("/my/comments");
+        break;
+      case "bookmarks":
+        navigate("/my/bookmarks");
+        break;
+      case "logout":
+        handleLogout();
+        break;
+      case "delete":
+        setShowDeleteDialog(true);
+        break;
+      default:
+        console.warn(`알 수 없는 메뉴 ID: ${menuId}`);
+    }
+  };
+
+  const handleLogout = async () => {
+    try {
+      await signOutMutation.mutateAsync();
+    } catch (error) {
+      console.error("로그아웃 실패:", error);
+      alert("로그아웃에 실패했습니다.");
+    }
+  };
+
+  const handleDeleteAccount = async () => {
+    try {
+      await deleteAccountMutation.mutateAsync();
+    } catch (error) {
+      console.error("계정 삭제 실패:", error);
+      alert("계정 삭제에 실패했습니다.");
+    }
+    setShowDeleteDialog(false);
   };
 
   const handleEditProfile = () => {
@@ -58,7 +118,9 @@ export const MyPage = () => {
               <li
                 key={item.id}
                 onClick={() => handleMenuItemClick(item.id)}
-                className="flex justify-between items-center py-4 border-b border-brand-surface cursor-pointer hover:bg-brand-surface/50 transition-colors px-4">
+                className={`flex justify-between items-center py-4 border-b border-brand-surface cursor-pointer hover:bg-brand-surface/50 transition-colors px-4 ${
+                  (item as any).isDestructive ? "text-red-400" : ""
+                }`}>
                 <span>{item.label}</span>
                 <ChevronRight className="size-5 text-brand-text" />
               </li>
@@ -66,6 +128,29 @@ export const MyPage = () => {
           </ul>
         </div>
       </div>
+
+      {/* 계정 삭제 확인 모달 */}
+      <AlertDialog open={showDeleteDialog} onOpenChange={setShowDeleteDialog}>
+        <AlertDialogContent className="w-[90%] rounded-2xl bg-brand-background border-brand-surface text-white dark">
+          <AlertDialogHeader>
+            <AlertDialogTitle>계정 삭제</AlertDialogTitle>
+            <AlertDialogDescription>
+              정말로 계정을 삭제하시겠습니까? 이 작업은 되돌릴 수 없으며, 모든
+              데이터가 영구적으로 삭제됩니다.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel className="bg-brand-surface border-brand-surface text-white hover:bg-brand-surface/90">
+              취소
+            </AlertDialogCancel>
+            <AlertDialogAction
+              onClick={handleDeleteAccount}
+              className="bg-red-500 hover:bg-red-600 text-white">
+              삭제
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 };
diff --git a/src/pages/my/posts.tsx b/src/pages/my/posts.tsx
new file mode 100644
index 0000000..5b152d8
--- /dev/null
+++ b/src/pages/my/posts.tsx
@@ -0,0 +1,71 @@
+import { useNavigate } from "react-router-dom";
+import { ArrowLeft } from "lucide-react";
+import Header from "@/components/layout/Header";
+import { useMyPosts } from "@/hooks/queries/useMy";
+import { ListItem } from "@/components/common/ListItem";
+
+export const MyPostsPage = () => {
+  const navigate = useNavigate();
+  const { data: posts, isLoading, error } = useMyPosts();
+
+  const handleBack = () => {
+    navigate("/my");
+  };
+
+  if (isLoading) {
+    return (
+      <div className="min-h-screen bg-brand-background text-white flex items-center justify-center">
+        <div className="text-center">
+          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-brand-primary mx-auto mb-4"></div>
+          <p>게시물을 불러오는 중...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="min-h-screen bg-brand-background text-white flex items-center justify-center">
+        <div className="text-center">
+          <p className="text-red-400 mb-4">게시물을 불러올 수 없습니다.</p>
+          <button
+            onClick={() => window.location.reload()}
+            className="px-4 py-2 bg-brand-primary text-black rounded-lg hover:bg-brand-primary/90">
+            다시 시도
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <Header
+        title="작성한 글"
+        leftIcon={<ArrowLeft />}
+        onLeftClick={handleBack}
+      />
+      <div className="dark text-foreground pt-20 pb-20">
+        <div className="px-4">
+          {posts && posts.length > 0 ? (
+            <div className="space-y-4">
+              {posts
+                .sort(
+                  (a: any, b: any) =>
+                    new Date(b.createdAt).getTime() -
+                    new Date(a.createdAt).getTime()
+                )
+                .map((post: any) => (
+                  <ListItem key={post.id} post={post} />
+                ))}
+            </div>
+          ) : (
+            <div className="text-center py-12">
+              <p className="text-brand-text">작성한 게시물이 없습니다.</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};

From 4e68f194c887b5b225d1a03a5c23d0fef9f1d2b3 Mon Sep 17 00:00:00 2001
From: Monixc <chris13404@gmail.com>
Date: Mon, 11 Aug 2025 10:59:41 +0900
Subject: [PATCH 24/26] =?UTF-8?q?feat:=20=EC=9E=84=ED=8F=AC=ED=8A=B8=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

---
 src/pages/developer/index.tsx | 96 ++++++++++++++++++++++++++++++++---
 1 file changed, 88 insertions(+), 8 deletions(-)

diff --git a/src/pages/developer/index.tsx b/src/pages/developer/index.tsx
index 73c01ac..74f3a3f 100644
--- a/src/pages/developer/index.tsx
+++ b/src/pages/developer/index.tsx
@@ -1,27 +1,107 @@
 import { useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
 import { AppTabs } from "@/components/common/AppTabs";
 import { ProfileSection } from "@/components/profile/ProfileSection.tsx";
 import type { DeveloperTabValue } from "@/constants/profile";
 import { DEVELOPER_TABS } from "@/constants/profile";
-import Posts from "./_components/Posts.tsx";
+import Links from "./_components/Links.tsx";
 import Profile from "./_components/Profile.tsx";
 import Header from "@/components/layout/Header.tsx";
 import { ArrowLeft, Heart } from "lucide-react";
+import {
+  useUserProfile,
+  useToggleUserSubscription,
+} from "@/hooks/queries/useDevelopers";
 
 export const DeveloperPage = () => {
+  const { nickname } = useParams<{ nickname: string }>();
+  const navigate = useNavigate();
   const [activeTab, setActiveTab] = useState<DeveloperTabValue>("profile");
 
+  console.log("🔍 Developer Page - nickname:", nickname);
+
+  const {
+    data: userProfile,
+    isLoading,
+    error,
+  } = useUserProfile(nickname || "");
+
+  const toggleSubscriptionMutation = useToggleUserSubscription();
+
   const handleTabChange = (value: DeveloperTabValue) => {
     setActiveTab(value);
   };
 
+  const handleBackClick = () => {
+    navigate(-1);
+  };
+
+  const handleHeartClick = async () => {
+    if (!nickname) return;
+
+    try {
+      await toggleSubscriptionMutation.mutateAsync(nickname);
+    } catch (error) {
+      console.error("구독 상태 변경 실패:", error);
+      alert("구독 상태 변경에 실패했습니다.");
+    }
+  };
+
+  if (isLoading) {
+    return (
+      <div className="dark text-foreground flex flex-col overflow-hidden">
+        <Header
+          title="COMEET"
+          leftIcon={<ArrowLeft />}
+          rightIcon={<Heart />}
+          onLeftClick={handleBackClick}
+        />
+        <div className="flex items-center justify-center h-full">
+          <div className="text-white">로딩 중...</div>
+        </div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="dark text-foreground flex flex-col overflow-hidden">
+        <Header
+          title="COMEET"
+          leftIcon={<ArrowLeft />}
+          rightIcon={<Heart />}
+          onLeftClick={handleBackClick}
+        />
+        <div className="flex items-center justify-center h-full">
+          <div className="text-white">
+            프로필을 불러오는 중 오류가 발생했습니다.
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
-    <div className="dark text-foreground flex flex-col  ">
-      <Header title="COMEET" leftIcon={<ArrowLeft />} rightIcon={<Heart />} />
-      <div>
-        <ProfileSection />
+    <div className="dark text-foreground flex flex-col overflow-hidden">
+      <Header
+        title="COMEET"
+        leftIcon={<ArrowLeft />}
+        rightIcon={
+          <Heart
+            className={
+              userProfile?.subscribing
+                ? "fill-brand-primary text-brand-primary"
+                : ""
+            }
+          />
+        }
+        onLeftClick={handleBackClick}
+        onRightClick={handleHeartClick}
+      />
+      <div className="pt-20">
+        <ProfileSection profile={userProfile} isEditable={false} />
       </div>
-      <div className="p-4 -mx-4">
+      <div className="p-4 -mx-4 overflow-hidden">
         <AppTabs
           tabs={DEVELOPER_TABS}
           value={activeTab}
@@ -30,8 +110,8 @@ export const DeveloperPage = () => {
           className="w-full mt-8"
         />
         <div className="w-full mt-4 text-white px-4">
-          {activeTab === "profile" && <Profile />}
-          {activeTab === "posts" && <Posts />}
+          {activeTab === "profile" && <Profile userProfile={userProfile} />}
+          {activeTab === "posts" && <Links userProfile={userProfile} />}
         </div>
       </div>
     </div>

From 9c9c7c1f5aa4151c5151688f55dcc16ccd23a87c Mon Sep 17 00:00:00 2001
From: Monixc <chris13404@gmail.com>
Date: Mon, 11 Aug 2025 11:04:57 +0900
Subject: [PATCH 25/26] =?UTF-8?q?feat:=20=EC=A7=80=EC=9B=90=EC=9E=90=20?=
 =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=ED=94=84=EB=A1=9C=ED=95=84=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EB=84=A4=EB=B9=84?=
 =?UTF-8?q?=EA=B2=8C=EC=9D=B4=EC=85=98=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/community/__components/ApplicantSection.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/pages/community/__components/ApplicantSection.tsx b/src/pages/community/__components/ApplicantSection.tsx
index de7eaa4..ea934fb 100644
--- a/src/pages/community/__components/ApplicantSection.tsx
+++ b/src/pages/community/__components/ApplicantSection.tsx
@@ -1,13 +1,19 @@
 import type { ApplicantResponse } from "@/types/post.types";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { useNavigate } from "react-router-dom";
 
 interface ApplicantSectionProps {
   applicants: ApplicantResponse[];
 }
 
 export function ApplicantSection({ applicants }: ApplicantSectionProps) {
+  const navigate = useNavigate();
   const totalApplicants = applicants.length;
 
+  const handleApplicantClick = (nickname: string) => {
+    navigate(`/developer/${nickname}`);
+  };
+
   return (
     <div className="p-4 pb-0 flex flex-col text-white">
       <h3 className="text-sm font-semibold mb-3">지원자 {totalApplicants}</h3>
@@ -15,7 +21,10 @@ export function ApplicantSection({ applicants }: ApplicantSectionProps) {
       <div className="flex flex-col gap-3">
         {applicants.length > 0 ? (
           applicants.map((applicant, index) => (
-            <div key={index} className="flex items-center gap-3">
+            <div
+              key={index}
+              className="flex items-center gap-3 cursor-pointer hover:bg-brand-surface/50 p-2 rounded-lg transition-colors"
+              onClick={() => handleApplicantClick(applicant.nickname)}>
               <Avatar className="w-8 h-8">
                 <AvatarImage src={applicant.avatar} alt={applicant.nickname} />
                 <AvatarFallback className="bg-brand-primary text-brand-background text-xs">

From 5d87f01405953c64ab24d7643c8bbdcdf6c8d255 Mon Sep 17 00:00:00 2001
From: Monixc <chris13404@gmail.com>
Date: Mon, 11 Aug 2025 11:17:10 +0900
Subject: [PATCH 26/26] =?UTF-8?q?feat:=20=EA=B0=9C=EB=B0=9C=EC=9E=90=20?=
 =?UTF-8?q?=EA=B4=80=EB=A0=A8=20API=20=EB=B0=8F=20=EC=BF=BC=EB=A6=AC=20?=
 =?UTF-8?q?=ED=9B=85=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 개발자 목록을 가져오는 fetchDevelopers 함수 수정 및 필터링 기능 추가
- 사용자 프로필을 가져오는 fetchUserProfile 함수 추가
- 사용자 구독 상태를 토글하는 useToggleUserSubscription 훅 추가
- ExplorePage에서 useDevelopers 훅을 사용하여 개발자 데이터 로드 방식 변경
- DeveloperProfileCard에서 클릭 시 프로필 페이지로 네비게이션 기능 추가
---
 src/hooks/queries/useDevelopers.ts            |  50 ++++++++
 src/lib/api/developers.ts                     | 116 +++++++++++++++--
 .../_components/DeveloperProfileCard.tsx      |  57 +++++++--
 src/pages/explore/index.tsx                   | 117 +++++++++++++-----
 4 files changed, 289 insertions(+), 51 deletions(-)
 create mode 100644 src/hooks/queries/useDevelopers.ts

diff --git a/src/hooks/queries/useDevelopers.ts b/src/hooks/queries/useDevelopers.ts
new file mode 100644
index 0000000..d8b2ce8
--- /dev/null
+++ b/src/hooks/queries/useDevelopers.ts
@@ -0,0 +1,50 @@
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import {
+  fetchDevelopers,
+  fetchUserProfile,
+  toggleUserSubscription,
+} from "@/lib/api/developers";
+import type { NearbyUser, NearbyUsersParams } from "@/types/developer.types";
+import type { ExploreTabValue } from "@/constants/explore";
+
+export const useDevelopers = (
+  category: ExploreTabValue,
+  enabled: boolean = true,
+  filterParams?: Partial<NearbyUsersParams>
+) => {
+  return useQuery<NearbyUser[]>({
+    queryKey: ["developers", category, filterParams],
+    queryFn: () => fetchDevelopers(category, filterParams),
+    enabled,
+  });
+};
+
+export const useUserProfile = (nickname: string, enabled: boolean = true) => {
+  return useQuery({
+    queryKey: ["userProfile", nickname],
+    queryFn: () => fetchUserProfile(nickname),
+    enabled: enabled && !!nickname,
+    staleTime: 5 * 60 * 1000,
+    gcTime: 10 * 60 * 1000,
+  });
+};
+
+export const useToggleUserSubscription = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: toggleUserSubscription,
+    onSuccess: (data, nickname) => {
+      queryClient.setQueryData(["userProfile", nickname], (oldData: any) => {
+        if (oldData) {
+          return {
+            ...oldData,
+            nSubscribers: data.nSubscribers,
+            subscribing: data.subscribing,
+          };
+        }
+        return oldData;
+      });
+    },
+  });
+};
diff --git a/src/lib/api/developers.ts b/src/lib/api/developers.ts
index bc7a53e..85b561e 100644
--- a/src/lib/api/developers.ts
+++ b/src/lib/api/developers.ts
@@ -1,15 +1,113 @@
-import type { Developer } from "@/types/developer.types";
+import type { NearbyUser, NearbyUsersParams } from "@/types/developer.types";
 import type { ExploreTabValue } from "@/constants/explore";
-import { createApiUrl } from "./config";
+import { createApiUrl, createAuthHeaders } from "./config";
 
 export const fetchDevelopers = async (
-  category: ExploreTabValue
-): Promise<Developer[]> => {
-  const response = await fetch(
-    `${createApiUrl("/developers")}?category=${category}`
-  );
+  category: ExploreTabValue,
+  filterParams?: Partial<NearbyUsersParams>
+): Promise<NearbyUser[]> => {
+  let url: string;
+
+  switch (category) {
+    case "nearby":
+      const searchParams = new URLSearchParams();
+      const radius = filterParams?.radius || 10;
+      searchParams.append("radius", radius.toString());
+
+      if (filterParams?.positionIds?.length) {
+        filterParams.positionIds.forEach((id) => {
+          searchParams.append("positionIds", id.toString());
+        });
+      }
+      if (filterParams?.techIds?.length) {
+        filterParams.techIds.forEach((id) => {
+          searchParams.append("techIds", id.toString());
+        });
+      }
+      if (filterParams?.interestIds?.length) {
+        filterParams.interestIds.forEach((id) => {
+          searchParams.append("interestIds", id.toString());
+        });
+      }
+
+      url = `${createApiUrl("/users/search/near")}?${searchParams.toString()}`;
+      if (filterParams?.age) {
+        const cleanAge = filterParams.age.trim();
+        url += `&age=${cleanAge}`;
+      }
+      if (filterParams?.experience) {
+        const cleanExperience = filterParams.experience.trim();
+        url += `&experience=${cleanExperience}`;
+      }
+      break;
+    case "popular":
+      url = `${createApiUrl("/users/search/hot")}`;
+      break;
+    case "favorite":
+      url = `${createApiUrl("/users/search/subscriptions")}`;
+      break;
+    default:
+      throw new Error(`알 수 없는 카테고리입니다: ${category}`);
+  }
+
+  const response = await fetch(url, {
+    headers: createAuthHeaders(),
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `개발자 목록을 불러오는 데 실패했습니다: ${response.status} ${response.statusText}`
+    );
+  }
+
+  const data = await response.json();
+  return data.results || [];
+};
+
+export const fetchUserProfile = async (nickname: string): Promise<any> => {
+  const url = `${createApiUrl(`/users/${nickname}`)}`;
+  const headers = createAuthHeaders();
+
+  const response = await fetch(url, {
+    headers,
+  });
+
+  console.log("📡 User Profile Response:", {
+    nickname,
+    status: response.status,
+    statusText: response.statusText,
+  });
+
   if (!response.ok) {
-    throw new Error("개발자 목록을 불러오는 데 실패했습니다.");
+    throw new Error(
+      `프로필을 불러오는 데 실패했습니다: ${response.status} ${response.statusText}`
+    );
   }
-  return response.json();
+
+  const data = await response.json();
+  return data;
+};
+
+export const toggleUserSubscription = async (
+  nickname: string
+): Promise<{
+  nSubscribers: number;
+  subscribing: boolean;
+}> => {
+  const url = `${createApiUrl(`/users/${nickname}/subscriptions`)}`;
+  const headers = createAuthHeaders();
+
+  const response = await fetch(url, {
+    method: "PUT",
+    headers,
+  });
+
+  if (!response.ok) {
+    throw new Error(
+      `구독 상태 변경에 실패했습니다: ${response.status} ${response.statusText}`
+    );
+  }
+
+  const data = await response.json();
+  return data;
 };
diff --git a/src/pages/explore/_components/DeveloperProfileCard.tsx b/src/pages/explore/_components/DeveloperProfileCard.tsx
index f1c8edd..76f67a1 100644
--- a/src/pages/explore/_components/DeveloperProfileCard.tsx
+++ b/src/pages/explore/_components/DeveloperProfileCard.tsx
@@ -1,3 +1,4 @@
+import { useNavigate } from "react-router-dom";
 import type { Developer } from "@/types/developer.types";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
@@ -11,11 +12,29 @@ export const DeveloperProfileCard = ({
   developer,
   viewMode,
 }: DeveloperProfileCardProps) => {
+  const navigate = useNavigate();
+
+  const handleClick = () => {
+    navigate(`/developer/${developer.nickname}`);
+  };
+
   if (viewMode === "grid") {
     return (
-      <div className="text-white">
-        <div className="w-full bg-yellow-400 rounded-lg aspect-square mb-2">
-          {/* 이미지 영역 */}
+      <div className="text-white cursor-pointer" onClick={handleClick}>
+        <div className="w-full bg-yellow-400 rounded-lg aspect-square mb-2 overflow-hidden">
+          {developer.image ? (
+            <img
+              src={developer.image}
+              alt={developer.nickname}
+              className="w-full h-full object-cover"
+            />
+          ) : (
+            <div className="w-full h-full bg-brand-primary flex items-center justify-center">
+              <span className="text-brand-background text-2xl font-bold">
+                {developer.nickname.charAt(0)}
+              </span>
+            </div>
+          )}
         </div>
         <div className="flex justify-between items-baseline">
           <span className="font-semibold text-sm truncate">
@@ -28,9 +47,25 @@ export const DeveloperProfileCard = ({
   }
 
   return (
-    <Card className="bg-brand-surface border-none text-white hover:bg-brand-surface/50 transition-colors h-32">
+    <Card
+      className="bg-brand-surface border-none text-white hover:bg-brand-surface/50 transition-colors h-32 cursor-pointer"
+      onClick={handleClick}>
       <div className="flex items-center h-full px-4">
-        <div className="w-24 h-24 bg-yellow-400 rounded-lg shrink-0 mr-4"></div>
+        <div className="w-24 h-24 bg-yellow-400 rounded-lg shrink-0 mr-4 overflow-hidden">
+          {developer.image ? (
+            <img
+              src={developer.image}
+              alt={developer.nickname}
+              className="w-full h-full object-cover"
+            />
+          ) : (
+            <div className="w-full h-full bg-brand-primary flex items-center justify-center">
+              <span className="text-brand-background text-2xl font-bold">
+                {developer.nickname.charAt(0)}
+              </span>
+            </div>
+          )}
+        </div>
         <div className="flex-1 flex flex-col justify-center">
           <CardHeader className="p-0">
             <div className="flex justify-between items-baseline">
@@ -40,18 +75,22 @@ export const DeveloperProfileCard = ({
               </span>
             </div>
             <div className="flex items-center text-sm text-brand-text pt-1 gap-1.5">
-              <span>{developer.position}</span>
+              <span>
+                {typeof developer.position === "string"
+                  ? developer.position
+                  : "포지션 정보 없음"}
+              </span>
               <span className="text-xs">·</span>
               <span>{developer.experience}</span>
             </div>
           </CardHeader>
           <CardContent className="p-0 mt-2">
-            <div className="flex flex-wrap gap-2">
-              {developer.stacks.map((stack, index) => (
+            <div className="flex flex-wrap gap-1">
+              {(developer.stacks || []).map((stack, index) => (
                 <Badge
                   key={`${stack}-${index}`}
                   variant="outline"
-                  className="rounded-full bg-brand-surface border-brand-primary text-brand-primary">
+                  className="rounded-full text-[10px] bg-brand-surface border-brand-primary text-brand-primary">
                   {stack}
                 </Badge>
               ))}
diff --git a/src/pages/explore/index.tsx b/src/pages/explore/index.tsx
index 5093dc3..736a062 100644
--- a/src/pages/explore/index.tsx
+++ b/src/pages/explore/index.tsx
@@ -1,48 +1,95 @@
-import { useState, useEffect } from "react";
+import { useState } from "react";
 import { Settings2, LayoutGrid, List } from "lucide-react";
 import { Button } from "../../components/ui/button";
 import { FilteringModal } from "./_components/FilteringModal";
 import { EXPLORE_TABS, type ExploreTabValue } from "../../constants/explore";
-import type { Developer } from "../../types/developer.types";
+import type {
+  Developer,
+  NearbyUser,
+  NearbyUsersParams,
+} from "../../types/developer.types";
 import { ListView } from "./_components/layout/ListView";
 import { GridView } from "./_components/layout/GridView";
 import { AppTabs } from "../../components/common/AppTabs";
 import { cn } from "../../lib/utils";
-import { fetchDevelopers } from "../../lib/api/developers";
+import { useDevelopers } from "../../hooks/queries/useDevelopers";
+
+const transformNearbyUserToDeveloper = (
+  user: NearbyUser,
+  index: number
+): Developer => {
+  return {
+    id: Date.now() + index + Math.random(),
+    nickname: user.nickname,
+    distance: user.distance ? `${Math.round(user.distance * 10) / 10}km` : "",
+    position: user.position ? user.position.role : "포지션 정보 없음",
+    stacks: user.techStack?.map((stack) => stack.value) || [],
+    experience: `${user.experience}년`,
+    image: user.avatar || "",
+    category: "nearby" as const,
+  };
+};
 
 export const ExplorePage = () => {
   const [activeTab, setActiveTab] = useState<ExploreTabValue>("nearby");
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [viewMode, setViewMode] = useState<"list" | "grid">("list");
-  const [developers, setDevelopers] = useState<Developer[]>([]);
-  const [isLoading, setIsLoading] = useState(true);
-  const [error, setError] = useState<Error | null>(null);
+  const [filterParams, setFilterParams] = useState<Partial<NearbyUsersParams>>(
+    {}
+  );
+
+  const {
+    data: developersData = [],
+    isLoading: isDevelopersLoading,
+    error: developersError,
+  } = useDevelopers(
+    activeTab,
+    true,
+    activeTab === "nearby" ? filterParams : undefined
+  );
+
+  const isLoading = isDevelopersLoading;
+  const error = developersError;
 
-  useEffect(() => {
-    const loadDevelopers = async () => {
-      setIsLoading(true);
-      setError(null);
-      try {
-        const fetchedDevelopers = await fetchDevelopers(activeTab);
-        setDevelopers(fetchedDevelopers);
-      } catch (err) {
-        setError(err as Error);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-    loadDevelopers();
-  }, [activeTab]);
+  const developers = (developersData || []).map((user: any, index: number) =>
+    transformNearbyUserToDeveloper(user, index)
+  );
 
   const openModal = () => setIsModalOpen(true);
   const closeModal = () => setIsModalOpen(false);
 
+  const handleFilterSubmit = (params: Partial<NearbyUsersParams>) => {
+    console.log("필터링 적용:", params);
+    setFilterParams(params);
+    closeModal();
+  };
+
   const handleTabChange = (value: string) => {
     setActiveTab(value as ExploreTabValue);
   };
 
-  if (isLoading) return <div>로딩 중...</div>;
-  if (error) return <div>에러 발생: {error.message}</div>;
+  if (isLoading)
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-white">로딩 중...</div>
+      </div>
+    );
+
+  if (error) {
+    return (
+      <div className="flex flex-col items-center justify-center h-full p-4 text-center">
+        <div className="text-white mb-2">
+          개발자 정보를 불러오는 중 오류가 발생했습니다.
+        </div>
+        <div className="text-red-400 text-sm mb-4">{error.message}</div>
+        {error.message.includes("인증") && (
+          <div className="text-brand-text text-sm">
+            💡 팁: 로그인이 만료되었을 수 있습니다. 다시 로그인해주세요.
+          </div>
+        )}
+      </div>
+    );
+  }
 
   return (
     <div className="p-4">
@@ -54,8 +101,8 @@ export const ExplorePage = () => {
         className="-mx-4"
       />
 
-      <div className="mt-4">
-        <div className="flex justify-between items-center mb-4">
+      <div className="mt-2">
+        <div className="flex justify-between items-center mb-2">
           <div className="flex gap-2 items-center">
             <Button
               variant="ghost"
@@ -78,13 +125,15 @@ export const ExplorePage = () => {
               <List className="size-5" />
             </Button>
           </div>
-          <Button
-            variant="ghost"
-            onClick={openModal}
-            className="text-sm text-brand-text">
-            <Settings2 className="size-4" />
-            <span>조건 설정</span>
-          </Button>
+          {activeTab === "nearby" && (
+            <Button
+              variant="ghost"
+              onClick={openModal}
+              className="text-sm text-brand-text">
+              <Settings2 className="size-4" />
+              <span>조건 설정</span>
+            </Button>
+          )}
         </div>
 
         {viewMode === "list" ? (
@@ -94,7 +143,9 @@ export const ExplorePage = () => {
         )}
       </div>
 
-      {isModalOpen && <FilteringModal onClose={closeModal} />}
+      {isModalOpen && (
+        <FilteringModal onClose={closeModal} onSubmit={handleFilterSubmit} />
+      )}
     </div>
   );
 };