-
-
+ 
+ Github 로그인
+
+
+
);
-}
\ No newline at end of file
+}
diff --git a/src/pages/community/PostDetailPage.tsx b/src/pages/community/PostDetailPage.tsx
new file mode 100644
index 0000000..2225f51
--- /dev/null
+++ b/src/pages/community/PostDetailPage.tsx
@@ -0,0 +1,53 @@
+import { useParams } from "react-router-dom";
+import { PostContent } from "./__components/PostContent";
+import { CommentSection } from "./__components/CommentSection";
+import { CommentForm } from "./__components/CommentForm";
+import GlobalLayout from "@/components/layout/GlobalLayout";
+import { usePost, useTogglePostLike, useAddComment } from "@/hooks/usePost";
+
+export function PostDetailPage() {
+ const { postId } = useParams<{ postId: string }>();
+
+ if (!postId) {
+ return 우리 동네 개발자 커뮤니티
-CO-MEET
-
+
+
-
- 
-
+
+
+
-
-
-
-
+ ">
+ + 우리 동네 개발자 커뮤니티 +
+CO-MEET
+
-
+
+ Github 로그인
+
+
+ 유효하지 않은 게시글 ID입니다.
;
+ }
+
+ const { data: post, isLoading, isError, error } = usePost(postId);
+ const { mutate: toggleLike, isPending: isLikePending } = useTogglePostLike();
+ const { mutate: addNewComment, isPending: isAddingComment } = useAddComment();
+
+ if (isLoading) {
+ return 로딩 중...
;
+ }
+ if (isError) {
+ return 에러 발생: {error.message}
;
+ }
+ if (!post) {
+ return 게시글이 없습니다.
;
+ }
+
+ const handleToggleCommentLike = (commentId: number) =>
+ console.log("like comment:", commentId);
+
+ return (
+
+ addNewComment({ postId, content })}
+ isPending={isAddingComment}
+ />
+
+
+ toggleLike(postId)}
+ isLikePending={isLikePending}
+ />
+
+
+