diff --git a/Frontend/src/components/PostComments/CommentForm.jsx b/Frontend/src/components/PostComments/CommentForm.jsx
new file mode 100644
index 0000000..b750974
--- /dev/null
+++ b/Frontend/src/components/PostComments/CommentForm.jsx
@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import api from "@api/api.js";
+
+export default function CommentForm({
+  postId,
+  parentId = null,     
+  onSuccess,
+  placeholder,
+  autoFocus = false,
+  compact = false,
+}) {
+  const [content, setContent] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [errMsg, setErrMsg] = useState("");
+
+  const submit = async (e) => {
+    e?.preventDefault?.();
+    const text = content.trim();
+    if (!text) return;
+
+    setIsSubmitting(true);
+    setErrMsg("");
+
+    try {
+      await api.post(`/api/posts/${postId}/comments`, {
+        content: text,
+        parentId, // ✅ null이면 댓글, 숫자면 대댓글
+      });
+      setContent("");
+      onSuccess?.();
+    } catch (err) {
+      console.error("댓글/대댓글 작성 실패", err);
+      setErrMsg("작성에 실패했습니다.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <form onSubmit={submit} className={`flex gap-2 ${compact ? "" : "mb-4"}`}>
+      <input
+        value={content}
+        onChange={(e) => setContent(e.target.value)}
+        className="flex-1 border rounded p-2"
+        placeholder={placeholder ?? (parentId ? "대댓글을 입력하세요" : "댓글을 입력하세요")}
+        disabled={isSubmitting}
+        autoFocus={autoFocus}
+      />
+      <button
+        type="submit"
+        className="px-3 py-2 bg-black text-white rounded disabled:opacity-50"
+        disabled={isSubmitting}
+      >
+        {isSubmitting ? "작성 중…" : "작성"}
+      </button>
+
+      {errMsg && <div className="w-full text-sm text-red-500 mt-2">{errMsg}</div>}
+    </form>
+  );
+}
diff --git a/Frontend/src/components/PostComments/CommentItem.jsx b/Frontend/src/components/PostComments/CommentItem.jsx
new file mode 100644
index 0000000..1aa34b0
--- /dev/null
+++ b/Frontend/src/components/PostComments/CommentItem.jsx
@@ -0,0 +1,125 @@
+import React, { useState } from "react";
+import api from "@api/api.js";
+import CommentForm from "./CommentForm";
+import ReplyList from "./ReplyList";
+
+export default function CommentItem({ comment, postId, onRefresh, depth = 1 }) {
+  const commentId = comment?.id;
+
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [errMsg, setErrMsg] = useState("");
+
+  const [replyOpen, setReplyOpen] = useState(false);
+
+  const nickname =
+    comment?.author?.nickname ??
+    comment?.writer?.nickname ??
+    comment?.writer ??
+    "익명";
+
+  const deleteComment = async () => {
+    if (!commentId) return;
+    setIsDeleting(true);
+    setErrMsg("");
+
+    try {
+      await api.delete(`/api/posts/${postId}/comments/${commentId}`);
+      onRefresh?.();
+    } catch (e) {
+      console.error("삭제 실패", e);
+      setErrMsg("삭제에 실패했습니다.");
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  const like = async () => {
+    if (!commentId) return;
+    try {
+      await api.post(`/api/posts/comments/${commentId}/likes`);
+      onRefresh?.();
+    } catch (e) {
+      console.error("좋아요 실패", e);
+    }
+  };
+
+  const dislike = async () => {
+    if (!commentId) return;
+    try {
+      await api.post(`/api/posts/comments/${commentId}/dislikes`);
+      onRefresh?.();
+    } catch (e) {
+      console.error("싫어요 실패", e);
+    }
+  };
+
+  return (
+    <div className={`rounded p-3 ${depth === 2 ? "bg-gray-50" : ""}`}>
+      <div className="flex justify-between items-center">
+        <span className="font-semibold">{nickname}</span>
+
+        <button
+          onClick={deleteComment}
+          className="text-red-500 text-sm disabled:opacity-50"
+          disabled={isDeleting}
+          type="button"
+        >
+          {isDeleting ? "삭제 중…" : "삭제"}
+        </button>
+      </div>
+
+      <p className="my-2 whitespace-pre-wrap break-words">{comment?.content ?? ""}</p>
+
+      <div className="flex gap-3 text-sm text-gray-600">
+        <button type="button" onClick={like} className="flex items-center gap-1">
+          <span className="material-symbols-outlined text-base leading-none">thumb_up</span>
+          {comment?.likeCount ?? 0}
+        </button>
+        <button type="button" onClick={dislike} className="flex items-center gap-1">
+          <span className="material-symbols-outlined text-base leading-none">thumb_down</span>
+          {comment?.dislikeCount ?? 0}
+        </button>
+
+        {/* 댓글(1차)일 때만 답글 버튼 */}
+        {depth === 1 && (
+          <button
+            type="button"
+            onClick={() => setReplyOpen((v) => !v)}
+            className="ml-2 text-gray-500 hover:text-black"
+          >
+            {replyOpen ? "답글 닫기" : "답글"}
+          </button>
+        )}
+      </div>
+
+      {/* 대댓글 작성 폼 */}
+      {depth === 1 && replyOpen && (
+        <div className="mt-3 pl-6">
+          <CommentForm
+            postId={postId}
+            parentId={commentId}     // ✅ 여기!
+            onSuccess={() => {
+              setReplyOpen(false);
+              onRefresh?.();
+            }}
+            placeholder="대댓글을 입력하세요"
+            compact
+            autoFocus
+          />
+        </div>
+      )}
+
+      {/* 대댓글 렌더링 */}
+      {depth === 1 && (
+        <ReplyList
+          replies={comment?.replies ?? []}
+          postId={postId}
+          onRefresh={onRefresh}
+          parentId={commentId}
+        />
+      )}
+
+      {errMsg && <div className="text-sm text-red-500 mt-2">{errMsg}</div>}
+    </div>
+  );
+}
diff --git a/Frontend/src/components/PostComments/CommentList.jsx b/Frontend/src/components/PostComments/CommentList.jsx
new file mode 100644
index 0000000..3d78fe6
--- /dev/null
+++ b/Frontend/src/components/PostComments/CommentList.jsx
@@ -0,0 +1,21 @@
+import React from "react";
+import CommentItem from "./CommentItem";
+
+export default function CommentList({ comments, postId, onRefresh }) {
+  if (!comments || comments.length === 0) {
+    return <div className="text-sm text-gray-500">첫 댓글을 남겨보세요.</div>;
+  }
+
+  return (
+    <div className="space-y-3">
+      {comments.map((c) => (
+        <CommentItem
+          key={c.commentId ?? c.id}
+          comment={c}
+          postId={postId}
+          onRefresh={onRefresh}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/Frontend/src/components/PostComments/CommentsSection.jsx b/Frontend/src/components/PostComments/CommentsSection.jsx
new file mode 100644
index 0000000..ac6ee52
--- /dev/null
+++ b/Frontend/src/components/PostComments/CommentsSection.jsx
@@ -0,0 +1,17 @@
+import React from "react";
+import CommentForm from "./CommentForm";
+import CommentList from "./CommentList";
+
+export default function CommentsSection({ postId, comments, onRefreshPost }) {
+  return (
+    <div className="mt-6">
+      <CommentForm postId={postId} onSuccess={onRefreshPost} />
+
+      <CommentList
+        comments={comments}
+        postId={postId}
+        onRefresh={onRefreshPost}
+      />
+    </div>
+  );
+}
diff --git a/Frontend/src/components/PostComments/ReplyForm.jsx b/Frontend/src/components/PostComments/ReplyForm.jsx
new file mode 100644
index 0000000..e69de29
diff --git a/Frontend/src/components/PostComments/ReplyList.jsx b/Frontend/src/components/PostComments/ReplyList.jsx
new file mode 100644
index 0000000..17f2137
--- /dev/null
+++ b/Frontend/src/components/PostComments/ReplyList.jsx
@@ -0,0 +1,21 @@
+import React from "react";
+import CommentItem from "./CommentItem";
+
+export default function ReplyList({ replies, postId, onRefresh, parentId }) {
+  if (!replies || replies.length === 0) return null;
+
+  return (
+    <div className="mt-2 space-y-2 pl-6 border-l">
+      {replies.map((r) => (
+        <CommentItem
+          key={r.id}
+          comment={r}
+          postId={postId}
+          onRefresh={onRefresh}
+          depth={2}
+          parentId={parentId}
+        />
+      ))}
+    </div>
+  );
+}
diff --git a/Frontend/src/components/Reactions/PostReaction.jsx b/Frontend/src/components/Reactions/PostReaction.jsx
new file mode 100644
index 0000000..521b245
--- /dev/null
+++ b/Frontend/src/components/Reactions/PostReaction.jsx
@@ -0,0 +1,52 @@
+import { useState } from "react";
+import api from "@api/api.js";
+
+export default function usePostReactions({ postId }) {
+  const [loading, setLoading] = useState(false);
+
+  const request = async (type) => {
+    if (!postId) return { ok: false, error: { message: "no postId" } };
+
+    setLoading(true);
+    try {
+      const url =
+        type === "like"
+          ? `/api/posts/${postId}/likes`
+          : `/api/posts/${postId}/dislikes`;
+
+      const res = await api.post(url);
+
+      // ✅ 응답이 비어있을 수도 있음(204 or empty body)
+      const data = res?.data?.data ?? res?.data ?? null;
+
+      const nextLike = data?.likeCount ?? data?.likes ?? data?.like_count ?? null;
+      const nextDislike =
+        data?.dislikeCount ?? data?.dislikes ?? data?.dislike_count ?? null;
+
+      return { ok: true, nextLike, nextDislike, raw: res.data };
+    } catch (e) {
+      const status = e?.response?.status;
+      const body = e?.response?.data;
+      return {
+        ok: false,
+        error: {
+          status,
+          body,
+          message:
+            body?.message ||
+            body?.error ||
+            JSON.stringify(body || {}, null, 2) ||
+            e.message,
+        },
+      };
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return {
+    loading,
+    like: () => request("like"),
+    dislike: () => request("dislike"),
+  };
+}
\ No newline at end of file
diff --git a/Frontend/src/pages/Community/CommunityDetailPage.jsx b/Frontend/src/pages/Community/CommunityDetailPage.jsx
index 2d96110..e559705 100644
--- a/Frontend/src/pages/Community/CommunityDetailPage.jsx
+++ b/Frontend/src/pages/Community/CommunityDetailPage.jsx
@@ -1,6 +1,9 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import api from "@api/api.js";
+import PostReaction from "@components/Reactions/PostReaction";
+import CommentsSection from "@components/PostComments/CommentsSection";
+
 
 const ghostBtn =
   "bg-transparent flex items-center gap-1 p-0 border-0 outline-none focus:outline-none text-gray-500 hover:text-black";
@@ -53,6 +56,8 @@ export default function CommunityDetailPage() {
   const [me, setMe] = useState(null);
   const [isDeleting, setIsDeleting] = useState(false);
 
+  const { loading: reactionLoading, like, dislike } = PostReaction({ postId });
+
 
   // "내 정보 조회" - 작성자 본인인지 판단하기 위해 필요
   useEffect(() => {
@@ -141,12 +146,10 @@ export default function CommunityDetailPage() {
     };
   }, [postId]);
   
-  const comments = useMemo(() => post?.comments ?? [], [post]);
   
-  const commentCount = useMemo(() => {
-    if (typeof post?.commentCount === "number") return post.commentCount;
-    return comments.length;
-  }, [post, comments]);
+  const commentCount = useMemo(() => (post?.comments?.length ?? 0), [post]);
+
+
 
   /** =========================
    * (권한) "내가 작성자인지" 판별
@@ -186,6 +189,54 @@ export default function CommunityDetailPage() {
     }
   };
 
+   /** =========================
+   *  좋아요, 싫어요 클릭
+   * ========================= */
+  const fetchPost = async () => {
+    const res = await api.get(`/api/posts/${postId}`);
+    setPost(res.data ?? null);
+  };
+
+  const applyReactionResult = async(result) => {
+    if (!result?.ok) {
+      alert(
+        `반응 실패 (status=${result?.error?.status ?? "?"})\n` +
+          (result?.error?.message ?? "unknown error")
+      );
+      return;
+    }
+
+    // ✅ 1) 서버가 카운트를 내려줬다면 그걸로 즉시 반영
+  const hasCounts = result.nextLike != null || result.nextDislike != null;
+
+    if (hasCounts) {
+      setPost((prev) => {
+        if (!prev) return prev;
+        return {
+          ...prev,
+          likeCount: result.nextLike != null ? result.nextLike : prev.likeCount,
+          dislikeCount:
+            result.nextDislike != null ? result.nextDislike : prev.dislikeCount,
+        };
+      });
+      return;
+    }
+
+    // ✅ 2) 서버가 카운트를 안 주면(빈 바디/204) → GET로 다시 동기화 (정답)
+    await fetchPost();
+  };
+
+  const onClickLikePost = async () => {
+    const result = await like();
+    applyReactionResult(result);
+  };
+
+  const onClickDislikePost = async () => {
+    const result = await dislike();
+    applyReactionResult(result);
+  };
+
+
  /** =========================
    * 에러 화면
    * - 상세 조회 실패 시 보여줌
@@ -234,10 +285,6 @@ export default function CommunityDetailPage() {
 
 
 
-  const onClickAddComment = () => alert("아직 안됨");
-  const onClickLikeComment = () => alert("아직 안됨");
-  const onClickDislikeComment = () => alert("아직 안됨");
-
   const authorNickname = post?.author?.nickname ?? "(author 없음)";
   const createdAtText = formatKST(post?.createdAt);
   const updatedAtText = formatKST(post?.updatedAt);
@@ -264,14 +311,28 @@ export default function CommunityDetailPage() {
             </div>
 
             <div className="flex items-center gap-4 text-sm text-gray-500">
-              <div className="text-gray-500 flex items-center gap-1">
+              <button
+                type="button"
+                className={ghostBtn}
+                onClick={onClickLikePost}
+                disabled={reactionLoading}
+                title="추천"
+              >
                 <span className="material-symbols-outlined">thumb_up</span>
                 {post.likeCount ?? 0}
-              </div>
-              <div className="text-gray-500 flex items-center gap-1">
+              </button>
+
+              <button
+                type="button"
+                className={ghostBtn}
+                onClick={onClickDislikePost}
+                disabled={reactionLoading}
+                title="비추천"
+              >
                 <span className="material-symbols-outlined">thumb_down</span>
                 {post.dislikeCount ?? 0}
-              </div>
+              </button>
+
               <div className="text-gray-500 flex items-center gap-1">
                 <span className="material-symbols-outlined">comment</span>
                 {commentCount}
@@ -310,63 +371,17 @@ export default function CommunityDetailPage() {
             {post.content ?? "(content 없음)"}
           </div>
 
-          <div className="mt-10 flex items-center gap-3">
-            <input
-              className="h-11 flex-1 rounded-md border border-gray-300 px-4 text-sm outline-none focus:border-gray-400"
-              placeholder="댓글을 입력하세요"
-              value={commentText}
-              onChange={(e) => setCommentText(e.target.value)}
-              onKeyDown={(e) => {
-                if (e.key === "Enter") onClickAddComment();
-              }}
-            />
-            <button
-              className="min-w-[110px] rounded-md bg-gray-200 px-4 py-2 text-sm font-semibold text-gray-800 hover:bg-gray-300"
-              onClick={onClickAddComment}
-            >
-              댓글 달기
-            </button>
-          </div>
+          
+          <CommentsSection
+            postId={postId}
+            comments={post?.comments ?? []}
+            onRefreshPost={fetchPost}
+          />
+
 
-          <div className="mt-8 space-y-4">
-            {comments.length === 0 ? (
-              <div className="py-10 text-center text-gray-500">댓글이 없습니다.</div>
-            ) : (
-              comments.map((c) => {
-                const cAuthor =
-                  c?.author?.nickname ?? c?.authorNickname ?? c?.author ?? "익명";
-                const cCreatedAt = formatKST(c?.createdAt);
-
-                return (
-                  <div key={c.id ?? `${cAuthor}-${cCreatedAt}`} className="rounded-md border p-4">
-                    <div className="flex items-center justify-between">
-                      <div className="flex items-center gap-2 text-sm text-gray-500">
-                        <span className="material-symbols-outlined">face</span>
-                        <span className="font-semibold text-gray-700">{cAuthor}</span>
-                        <span className="ml-2">{cCreatedAt}</span>
-                      </div>
-
-                      <div className="flex items-center gap-4 text-sm text-gray-500">
-                        <button type="button" className={ghostBtn} onClick={onClickLikeComment}>
-                          <span className="material-symbols-outlined">thumb_up</span>
-                          {c.likeCount ?? 0}
-                        </button>
-                        <button type="button" className={ghostBtn} onClick={onClickDislikeComment}>
-                          <span className="material-symbols-outlined">thumb_down</span>
-                          {c.dislikeCount ?? 0}
-                        </button>
-                      </div>
-                    </div>
-
-                    <p className="mt-2 text-gray-800">{c.content ?? ""}</p>
-                  </div>
-                );
-              })
-            )}
-          </div>
 
-          {/* 디버깅용
-          <div className="mt-8 text-xs text-gray-500">DEBUG: {debug}</div>
+          {/* 디버깅용 */}
+          {/* <div className="mt-8 text-xs text-gray-500">DEBUG: {debug}</div>
           <pre className="mt-3 overflow-auto rounded-md bg-gray-50 p-4 text-xs text-gray-700">
             {JSON.stringify(raw, null, 2)}
           </pre> */}
diff --git a/Frontend/src/pages/Community/CommunityListPage.jsx b/Frontend/src/pages/Community/CommunityListPage.jsx
index aa51ac8..adeae3a 100644
--- a/Frontend/src/pages/Community/CommunityListPage.jsx
+++ b/Frontend/src/pages/Community/CommunityListPage.jsx
@@ -101,6 +101,8 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import api from "@api/api.js";
+import PostReaction from "@components/Reactions/PostReaction";
+
 
 /** =========================
  * 날짜 포맷 유틸 (예: 2026-01-28T02:06:52 -> Jan.28.2026)
@@ -148,8 +150,10 @@ export default function CommunityListPage() {
   const [errorMsg, setErrorMsg] = useState("");
   const [debug, setDebug] = useState("INIT");
 
-  // 4) 원본 응답 확인용 (문제 생기면 구조 파악하려고)
+  // 원본 응답 확인용 (문제 생기면 구조 파악하려고)
   //const [raw, setRaw] = useState(null);
+  // 좋아요/싫어요 요청 중 버튼 연타 방지용 (postId별로 막음)
+  const [busyMap, setBusyMap] = useState({});
 
   // 5) 페이지 진입 시 게시글 목록 조회
   useEffect(() => {
@@ -237,10 +241,34 @@ export default function CommunityListPage() {
   // =========================
   // 8) 추천(좋아요) 버튼 클릭 핸들러
   // =========================
+  const syncOnePost = async (postId) => {
+    const res = await api.get(`/api/posts/${postId}`);
+    const p = res.data?.data ?? res.data ?? null;
+
+    const nextLike = p?.likeCount ?? p?.likes ?? p?.like_count;
+
+    setPosts((prev) =>
+      prev.map((row) => {
+        if (String(row.id) !== String(postId)) return row;
+        return {
+          ...row,
+          likeCount: nextLike ?? row.likeCount,
+        };
+      })
+    );
+  };
+
+
   const onLike = async (postId) => {
-    alert("추천 API 연결 전입니다.");
+    try {
+      await api.post(`/api/posts/${postId}/likes`);
+      await syncOnePost(postId); // ✅ 응답 바디가 없으니 GET으로 동기화
+    } catch (e) {
+      alert("추천 실패");
+    }
   };
 
+
   return (
     <div className="min-h-screen bg-white">
       <main className="mx-auto max-w-5xl px-6 py-10">
@@ -287,7 +315,6 @@ export default function CommunityListPage() {
 
         {/* =========================
             (선택) 디버그 영역: 서버 응답 구조 확인용
-            안정화되면 지워도 됨
         ========================= */}
         {/* <div className="mt-2 text-xs text-gray-500">DEBUG: {debug}</div> */}
         {/* <pre className="mt-3 overflow-auto rounded-md bg-gray-50 p-4 text-xs text-gray-700">