diff --git a/package-lock.json b/package-lock.json
index 958ff80..bcea2d9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "license": "ISC",
       "dependencies": {
+        "@tanstack/react-virtual": "^3.13.12",
         "class-variance-authority": "^0.7.1",
         "gsap": "^3.13.0",
         "lottie-react": "^2.4.1",
@@ -3297,6 +3298,33 @@
         "tailwindcss": "4.1.13"
       }
     },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.13.12",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.12.tgz",
+      "integrity": "sha512-Gd13QdxPSukP8ZrkbgS2RwoZseTTbQPLnQEn7HY/rqtM+8Zt95f7xKC7N0EsKs7aoz0WzZ+fditZux+F8EzYxA==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.13.12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.13.12",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.13.12.tgz",
+      "integrity": "sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
diff --git a/package.json b/package.json
index 061e194..f98fce8 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,7 @@
     ]
   },
   "dependencies": {
+    "@tanstack/react-virtual": "^3.13.12",
     "class-variance-authority": "^0.7.1",
     "gsap": "^3.13.0",
     "lottie-react": "^2.4.1",
diff --git a/src/app/community/[id]/loading.tsx b/src/app/community/[id]/loading.tsx
index 6fca4e1..f8db77a 100644
--- a/src/app/community/[id]/loading.tsx
+++ b/src/app/community/[id]/loading.tsx
@@ -1,30 +1,7 @@
-function Loading() {
-  return (
-    <div className="w-full mb-10 flex relative animate-pulse">
-      {/* 메인 콘텐츠 */}
-      <article className="page-layout max-w-[824px] flex-1 z-5 space-y-6 mt-15">
-        {/* DetailHeader 자리 */}
-        <div className="h-6 w-15 bg-gray rounded-md" />
-
-        {/* Title 자리 */}
-        <div className="h-12 w-full bg-gray rounded-md" />
-        <div className="h-7 w-20 -mt-2 bg-gray rounded-md" />
+import DetailSkeleton from '@/domains/community/detail/DetailSkeleton';
 
-        {/* Content 자리 */}
-        <div className="space-y-2 mt-5">
-          <div className="h-70 w-full bg-gray rounded-md" />
-        </div>
-
-        {/* 댓글 */}
-        <div className="h-9 w-full bg-gray rounded-md mt-4" />
-        <div className="space-y-3">
-          {[...Array(2)].map((_, i) => (
-            <div key={i} className="h-16 w-full bg-gray rounded-md" />
-          ))}
-        </div>
-      </article>
-    </div>
-  );
+function Loading() {
+  return <DetailSkeleton />;
 }
 
 export default Loading;
diff --git a/src/app/community/[id]/page.tsx b/src/app/community/[id]/page.tsx
index 6d22101..c80776f 100644
--- a/src/app/community/[id]/page.tsx
+++ b/src/app/community/[id]/page.tsx
@@ -10,23 +10,28 @@ import Comment from '@/domains/community/detail/Comment';
 import StarBg from '@/domains/shared/components/star-bg/StarBg';
 import { useParams } from 'next/navigation';
 import { useEffect, useState } from 'react';
+import DetailSkeleton from '@/domains/community/detail/DetailSkeleton';
 
 function Page() {
   const params = useParams();
   const [postDetail, setPostDetail] = useState<Post | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
     const postId = params.id;
     const fetchData = async () => {
+      setIsLoading(true);
       const data = await fetchPostById(postId);
       if (!data) return;
 
       setPostDetail(data);
+      setIsLoading(false);
     };
     fetchData();
   }, [params.id, setPostDetail]);
 
-  if (!postDetail) return <div>게시글을 불러오지 못했습니다.</div>;
+  if (isLoading) return <DetailSkeleton />;
+  if (!postDetail) return null;
 
   const {
     categoryName,
diff --git a/src/domains/community/api/fetchComment.ts b/src/domains/community/api/fetchComment.ts
index 492d0a6..2eb8302 100644
--- a/src/domains/community/api/fetchComment.ts
+++ b/src/domains/community/api/fetchComment.ts
@@ -5,11 +5,84 @@ export const fetchComment = async (postId: number): Promise<CommentType[] | null
   try {
     const res = await fetch(`${getApi}/posts/${postId}/comments`, {
       method: 'GET',
+      cache: 'no-store', // 캐시 비활성화
     });
     const data = await res.json();
-    return data.data;
+
+    //삭제된 댓글은 제외
+    const filteredComments = data.data.filter(
+      (comment: CommentType) => comment.status !== 'DELETED'
+    );
+
+    return filteredComments;
   } catch (err) {
     console.error('해당 글의 댓글 조회 실패', err);
     return null;
   }
 };
+
+export const postComments = async (postId: number, content: string) => {
+  try {
+    const res = await fetch(`${getApi}/posts/${postId}/comments`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include',
+      body: JSON.stringify({ content }),
+    });
+
+    const text = await res.text();
+
+    if (!res.ok) {
+      console.error(`댓글 작성 실패:  ${res.status}`, text);
+      return null;
+    }
+    const data = JSON.parse(text);
+    return data;
+  } catch (err) {
+    console.error('해당 글의 댓글 작성 실패', err);
+    return null;
+  }
+};
+
+export async function updateComment(
+  accessToken: string | null,
+  postId: number,
+  commentId: number,
+  content: string
+): Promise<void> {
+  const response = await fetch(`${getApi}/posts/${postId}/comments/${commentId}`, {
+    method: 'PATCH',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `Bearer ${accessToken}`,
+    },
+    body: JSON.stringify({ content }),
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text(); // 👈 응답 본문을 텍스트로 읽기
+    console.error('서버 응답 에러:', errorText);
+    throw new Error(`댓글 수정 실패: ${response.status}`);
+  }
+}
+
+export async function deleteComment(
+  accessToken: string | null,
+  postId: number,
+  commentId: number
+): Promise<void> {
+  const response = await fetch(`${getApi}/posts/${postId}/comments/${commentId}`, {
+    method: 'DELETE',
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+    },
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text(); // 👈 응답 본문을 텍스트로 읽기
+    console.error('서버 응답 에러:', errorText);
+    throw new Error(`댓글 수정 실패: ${response.status}`);
+  }
+}
diff --git a/src/domains/community/api/fetchPost.ts b/src/domains/community/api/fetchPost.ts
index 74e9586..29fdb67 100644
--- a/src/domains/community/api/fetchPost.ts
+++ b/src/domains/community/api/fetchPost.ts
@@ -4,7 +4,7 @@ import { ParamValue } from 'next/dist/server/request/params';
 
 export const fetchPost = async (): Promise<Post[] | null> => {
   try {
-    const res = await fetch(`${getApi}/posts`, {
+    const res = await fetch(`${getApi}/posts?postSortStatus=LATEST`, {
       method: 'GET',
       cache: 'no-store',
     });
diff --git a/src/domains/community/api/fetchView.ts b/src/domains/community/api/fetchView.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/domains/community/components/post-info/PostInfo.tsx b/src/domains/community/components/post-info/PostInfo.tsx
index 8ef3b62..d30403b 100644
--- a/src/domains/community/components/post-info/PostInfo.tsx
+++ b/src/domains/community/components/post-info/PostInfo.tsx
@@ -28,9 +28,9 @@ function PostInfo({
       )}
       <li>{elapsedTime(createdAt)}</li>
       <li aria-hidden="true">|</li>
-      <li>조회 {viewCount}</li>
+      <li>조회 {viewCount || 0}</li>
       <li aria-hidden="true">|</li>
-      <li>댓글 {commentCount}</li>
+      <li>댓글 {commentCount + 1 || 0}</li>
     </ul>
   );
 }
diff --git a/src/domains/community/components/textarea/AutoGrowingTextarea.tsx b/src/domains/community/components/textarea/AutoGrowingTextarea.tsx
new file mode 100644
index 0000000..8f12a29
--- /dev/null
+++ b/src/domains/community/components/textarea/AutoGrowingTextarea.tsx
@@ -0,0 +1,64 @@
+import { Virtualizer } from '@tanstack/react-virtual';
+import gsap from 'gsap';
+import { useEffect, useRef } from 'react';
+
+type Props = {
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+  rowVirtualize: Virtualizer<HTMLElement, Element>;
+};
+
+function AutoGrowingTextarea({ value, onChange, rowVirtualize }: Props) {
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+
+  useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+
+    textarea.style.height = 'auto'; // 높이 초기화
+    textarea.style.height = textarea.scrollHeight + 'px'; // 스크롤 높이만큼 늘리기
+
+    const handleInput = () => {
+      textarea.style.height = 'auto';
+      textarea.style.height = textarea.scrollHeight + 'px';
+    };
+
+    textarea.addEventListener('input', handleInput);
+    return () => {
+      textarea.removeEventListener('input', handleInput);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (textareaRef.current) {
+      requestAnimationFrame(() => {
+        const li = textareaRef.current?.closest('li') as HTMLElement | null;
+        if (li) {
+          rowVirtualize.measureElement(li);
+        }
+      });
+    }
+  }, [value]);
+
+  useEffect(() => {
+    if (!textareaRef.current) return;
+    gsap.fromTo(
+      textareaRef.current,
+      { autoAlpha: 0, y: -15 },
+      { duration: 0.4, autoAlpha: 1, y: 0, ease: 'power2.out' }
+    );
+  }, []);
+
+  return (
+    <textarea
+      ref={textareaRef}
+      value={value}
+      className="w-full resize-none overflow-hidden bg-white py-2 px-4 text-primary rounded-lg outline-none"
+      rows={1}
+      spellCheck={false}
+      onChange={(e) => onChange(e)}
+    />
+  );
+}
+
+export default AutoGrowingTextarea;
diff --git a/src/domains/community/detail/Comment.tsx b/src/domains/community/detail/Comment.tsx
index 69be9ca..7c60a4e 100644
--- a/src/domains/community/detail/Comment.tsx
+++ b/src/domains/community/detail/Comment.tsx
@@ -1,30 +1,65 @@
-import React, { useEffect, useState } from 'react';
 import CommentHeader from '../../shared/components/comment/CommentHeader';
 import CommentList from '../../shared/components/comment/CommentList';
-import { fetchComment } from '../api/fetchComment';
-import { CommentType } from '../types/post';
+import { postComments } from '../api/fetchComment';
+import { useAuthStore } from '@/domains/shared/store/auth';
+import { useShallow } from 'zustand/shallow';
+import ConfirmModal from '@/shared/components/modal-pop/ConfirmModal';
+import { useComments } from '../hook/useComment';
 
 type Props = {
   postId: number;
 };
 
 function Comment({ postId }: Props) {
-  const [comments, setComments] = useState<CommentType[] | null>(null);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      const data = await fetchComment(postId);
-      if (!data) return;
-      setComments(data);
-    };
-    fetchData();
-  }, [postId]);
+  const { user, accessToken } = useAuthStore(
+    useShallow((state) => ({
+      user: state.user,
+      accessToken: state.accessToken,
+    }))
+  );
+  const {
+    comments,
+    isEnd,
+    isLoading,
+    deleteTarget,
+    setDeleteTarget,
+    fetchData,
+    handleUpdateComment,
+    handleAskDeleteComment,
+    handleConfirmDelete,
+    loadMoreComments,
+  } = useComments(postId, user, accessToken);
 
   return (
-    <section className="mb-10 border-t-1 border-gray ">
-      <CommentHeader />
-      <CommentList comments={comments} />
-    </section>
+    <>
+      <section className="mb-10 border-t-1 border-gray ">
+        <CommentHeader
+          postId={postId}
+          comments={comments}
+          onCommentAdded={fetchData}
+          postCommentsApi={postComments}
+        />
+        <CommentList
+          comments={comments}
+          currentUserNickname={user?.nickname}
+          onUpdateComment={handleUpdateComment}
+          onDeleteComment={handleAskDeleteComment}
+          onLoadMore={loadMoreComments}
+          isEnd={isEnd}
+          isLoading={isLoading}
+        />
+      </section>
+      {deleteTarget && (
+        <ConfirmModal
+          open={!!deleteTarget}
+          onConfirm={handleConfirmDelete}
+          onCancel={() => setDeleteTarget(null)}
+          onClose={() => setDeleteTarget(null)}
+          title="댓글 삭제"
+          description="정말 이 댓글을 삭제하시겠습니까?"
+        />
+      )}
+    </>
   );
 }
 
diff --git a/src/domains/community/detail/DetailSkeleton.tsx b/src/domains/community/detail/DetailSkeleton.tsx
new file mode 100644
index 0000000..5a96827
--- /dev/null
+++ b/src/domains/community/detail/DetailSkeleton.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+function DetailSkeleton() {
+  return (
+    <div className="w-full mb-10 flex relative animate-pulse">
+      {/* 메인 콘텐츠 */}
+      <article className="page-layout max-w-[824px] flex-1 z-5 space-y-6 mt-15">
+        {/* DetailHeader 자리 */}
+        <div className="h-6 w-15 bg-gray rounded-md" />
+
+        {/* Title 자리 */}
+        <div className="h-12 w-full bg-gray rounded-md" />
+        <div className="h-7 w-20 -mt-2 bg-gray rounded-md" />
+
+        {/* Content 자리 */}
+        <div className="space-y-2 mt-5">
+          <div className="h-70 w-full bg-gray rounded-md" />
+        </div>
+
+        {/* 댓글 */}
+        <div className="h-9 w-full bg-gray rounded-md mt-4" />
+        <div className="space-y-3">
+          {[...Array(2)].map((_, i) => (
+            <div key={i} className="h-16 w-full bg-gray rounded-md" />
+          ))}
+        </div>
+      </article>
+    </div>
+  );
+}
+
+export default DetailSkeleton;
diff --git a/src/domains/community/detail/EditDelete.tsx b/src/domains/community/detail/EditDelete.tsx
index a07aec5..237b833 100644
--- a/src/domains/community/detail/EditDelete.tsx
+++ b/src/domains/community/detail/EditDelete.tsx
@@ -1,4 +1,13 @@
-function EditDelete({ use }: { use: 'post' | 'comment' }) {
+type Props = {
+  use: 'post' | 'comment';
+  isEditing?: boolean;
+  onEdit?: () => void;
+  onCancelEdit?: () => void;
+  onDelete?: () => void;
+  onSubmitEdit?: () => void;
+};
+
+function EditDelete({ use, isEditing, onEdit, onCancelEdit, onDelete, onSubmitEdit }: Props) {
   return (
     <div
       role="group"
@@ -8,15 +17,17 @@ function EditDelete({ use }: { use: 'post' | 'comment' }) {
       <button
         type="button"
         className={`hover:text-white transition-colors ${use === 'comment' ? ' underline underline-offset-4' : ''}`}
+        onClick={isEditing ? onCancelEdit : onEdit}
       >
-        수정
+        {isEditing ? '취소' : '수정'}
       </button>
       <span aria-hidden="true">|</span>
       <button
         type="button"
         className={`hover:text-white transition-colors ${use === 'comment' ? ' underline underline-offset-4' : ''}`}
+        onClick={isEditing ? onSubmitEdit : onDelete}
       >
-        삭제
+        {isEditing ? '완료' : '삭제'}
       </button>
     </div>
   );
diff --git a/src/domains/community/hook/useComment.ts b/src/domains/community/hook/useComment.ts
new file mode 100644
index 0000000..6903a27
--- /dev/null
+++ b/src/domains/community/hook/useComment.ts
@@ -0,0 +1,100 @@
+import { useState, useEffect, useCallback } from 'react';
+import { deleteComment, fetchComment, updateComment } from '../api/fetchComment';
+import { getApi } from '@/app/api/config/appConfig';
+import { CommentType } from '../types/post';
+import { User } from '@/domains/shared/store/auth';
+
+export function useComments(postId: number, user: User | null, accessToken: string | null) {
+  const [comments, setComments] = useState<CommentType[] | null>(null);
+  const [isEnd, setIsEnd] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [deleteTarget, setDeleteTarget] = useState<{ commentId: number; postId: number } | null>(
+    null
+  );
+
+  const fetchData = useCallback(async () => {
+    const data = await fetchComment(postId);
+    if (!data) return;
+    setComments(data);
+    setIsEnd(false);
+  }, [postId]);
+
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+
+  const handleUpdateComment = async (commentId: number, postId: number, content: string) => {
+    if (!user) {
+      alert('로그인이 필요합니다');
+      return;
+    }
+    try {
+      await updateComment(accessToken!, postId, commentId, content);
+      setComments((prev) =>
+        prev
+          ? prev.map((comment) =>
+              comment.commentId === commentId ? { ...comment, content } : comment
+            )
+          : prev
+      );
+    } catch (err) {
+      console.error(err);
+      alert('댓글 수정 중 오류가 발생했습니다.');
+    }
+  };
+
+  const handleAskDeleteComment = (commentId: number, postId: number) => {
+    setDeleteTarget({ commentId, postId });
+  };
+
+  const handleConfirmDelete = async () => {
+    if (!user) {
+      alert('로그인이 필요합니다');
+      return;
+    }
+    if (!deleteTarget) return;
+
+    try {
+      await deleteComment(accessToken!, deleteTarget.postId, deleteTarget.commentId);
+      setComments((prev) =>
+        prev ? prev.filter((c) => c.commentId !== deleteTarget.commentId) : prev
+      );
+    } catch (err) {
+      console.error(err);
+      alert('댓글 삭제 중 오류가 발생했습니다.');
+    } finally {
+      setDeleteTarget(null);
+    }
+  };
+
+  const loadMoreComments = async (lastCommentId: number) => {
+    if (isEnd || isLoading) return;
+
+    setIsLoading(true);
+    try {
+      const res = await fetch(`${getApi}/posts/${postId}/comments?lastId=${lastCommentId}`);
+      const newComments = await res.json();
+
+      if (newComments.data.length === 0) {
+        setIsEnd(true);
+      } else {
+        setComments((prev) => [...(prev ?? []), ...newComments.data]);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return {
+    comments,
+    isEnd,
+    isLoading,
+    deleteTarget,
+    setDeleteTarget,
+    fetchData,
+    handleUpdateComment,
+    handleAskDeleteComment,
+    handleConfirmDelete,
+    loadMoreComments,
+  };
+}
diff --git a/src/domains/community/hook/useCommentAnimation.ts b/src/domains/community/hook/useCommentAnimation.ts
new file mode 100644
index 0000000..aff9ac9
--- /dev/null
+++ b/src/domains/community/hook/useCommentAnimation.ts
@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react';
+import { CommentType } from '../types/post';
+import gsap from 'gsap';
+
+export function useCommentEnterAnimation(
+  comments: CommentType[] | null,
+  parentRef: React.RefObject<HTMLDivElement | null>
+) {
+  const [prevFirstCommentId, setPrevFirstCommentId] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (!comments || comments.length === 0) return;
+
+    const currentFirstCommentId = comments[0]?.commentId;
+    if (prevFirstCommentId !== null && currentFirstCommentId !== prevFirstCommentId) {
+      const newCommentElement = parentRef.current?.children[0] as HTMLElement;
+      if (newCommentElement) {
+        gsap.fromTo(
+          newCommentElement,
+          { autoAlpha: 0, y: -20 },
+          { duration: 0.5, autoAlpha: 1, y: 0, ease: 'power2.out' }
+        );
+      }
+    }
+
+    setPrevFirstCommentId(currentFirstCommentId);
+  }, [comments, prevFirstCommentId, parentRef]);
+}
diff --git a/src/domains/community/hook/useItemVirtualizer.ts b/src/domains/community/hook/useItemVirtualizer.ts
new file mode 100644
index 0000000..b6a7786
--- /dev/null
+++ b/src/domains/community/hook/useItemVirtualizer.ts
@@ -0,0 +1,14 @@
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { CommentType, Post } from '../types/post';
+
+export function useItemVirtualizer(
+  items: CommentType[] | Post[] | null,
+  parentRef: React.RefObject<HTMLElement | null>
+) {
+  return useVirtualizer({
+    count: items?.length ?? 0,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 95,
+    overscan: 4,
+  });
+}
diff --git a/src/domains/community/hook/usePrevious.ts b/src/domains/community/hook/usePrevious.ts
new file mode 100644
index 0000000..a11cd9e
--- /dev/null
+++ b/src/domains/community/hook/usePrevious.ts
@@ -0,0 +1,9 @@
+import { useRef, useEffect } from 'react';
+
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = useRef<T>(undefined);
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+}
diff --git a/src/domains/community/types/post.d.ts b/src/domains/community/types/post.d.ts
index 9c33437..58a6471 100644
--- a/src/domains/community/types/post.d.ts
+++ b/src/domains/community/types/post.d.ts
@@ -21,6 +21,6 @@ export interface CommentType {
   userNickName: string;
   createdAt: string;
   updatedAt: string;
-  status: 'PUBLIC' | 'PRIVATE';
+  status: 'PUBLIC' | 'PRIVATE' | 'DELETED';
   content: string; //
 }
diff --git a/src/domains/recipe/components/details/RecipeComment.tsx b/src/domains/recipe/components/details/RecipeComment.tsx
index 892d585..57397d2 100644
--- a/src/domains/recipe/components/details/RecipeComment.tsx
+++ b/src/domains/recipe/components/details/RecipeComment.tsx
@@ -4,7 +4,7 @@ import CommentList from '@/domains/shared/components/comment/CommentList';
 function RecipeComment() {
   return (
     <div className="mb-10 border-t-1 border-gray">
-      <CommentHeader totalComment={true} />
+      {/* <CommentHeader totalComment={true} /> */}
       {/* <CommentList /> */}
     </div>
   );
diff --git a/src/domains/shared/components/comment/CommentHeader.tsx b/src/domains/shared/components/comment/CommentHeader.tsx
index ea5207e..0815804 100644
--- a/src/domains/shared/components/comment/CommentHeader.tsx
+++ b/src/domains/shared/components/comment/CommentHeader.tsx
@@ -1,19 +1,83 @@
-import Button from '@/shared/components/button/Button';
-import Input from '@/shared/components/Input-box/Input';
+import { CommentType } from '@/domains/community/types/post';
+import { useRef } from 'react';
+import Textarea from '@/shared/components/textarea-box/Textarea';
+import { intervalCall } from '@/shared/utills/intervalCall';
+import { resizeTextarea } from '@/shared/utills/textareaResize';
+import { useToast } from '@/shared/hook/useToast';
+
+type Props = {
+  totalComment?: boolean;
+  postId: number;
+  comments: CommentType[] | null;
+  onCommentAdded: () => void; //댓글 추가 후 실행할 콜백
+  postCommentsApi: (postId: number, comment: string) => Promise<CommentType[] | null>;
+};
+
+function CommentHeader({
+  totalComment = false,
+  postId,
+  comments,
+  onCommentAdded,
+  postCommentsApi,
+}: Props) {
+  const commentRef = useRef<HTMLTextAreaElement | null>(null);
+  const intervalCall1000 = intervalCall(1000);
+  const { toastError } = useToast();
+
+  const createComment = async (commentText: string) => {
+    if (!postId || !commentText.trim()) return false;
+    if (commentText.length > 500) {
+      toastError('댓글은 500자 이하로 입력해주세요.');
+      return false;
+    }
+
+    const data = await postCommentsApi(postId, commentText);
+    if (!data) return false;
+
+    if (commentRef.current) {
+      commentRef.current.value = '';
+      resizeTextarea(commentRef.current);
+    }
+
+    onCommentAdded();
+    return true;
+  };
+
+  const postComment = async () => {
+    const newComment = commentRef.current?.value ?? '';
+    await createComment(newComment);
+    // if (success && comments) {
+    //   updateCommentCount(postId, comments.length + 1);
+    // }
+  };
+
+  const handleKeyDown = async (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      const newComment = commentRef.current?.value ?? '';
+      if (!newComment.trim()) return;
+
+      intervalCall1000(async () => {
+        const success = await createComment(newComment);
+        if (!success) {
+          console.error('엔터키로 댓글 작성 실패');
+        }
+      });
+    }
+  };
 
-function CommentHeader({ totalComment = false }: { totalComment?: boolean }) {
   return (
     <section aria-label="댓글" className="mt-6 w-full">
-      {totalComment && <span>댓글 2</span>}
-      <div className="w-full relative mt-5">
-        <Input placeholder="댓글로 의견을 남겨주세요" id="community-comment" className="w-full" />
-        <Button
-          color="purple"
-          className="absolute right-2 top-1/2 -translate-y-1/2 w-13 h-7 text-sm pt-1.5"
-          size="auto"
-        >
-          입력
-        </Button>
+      {totalComment && <span>댓글 {comments?.length || 0}</span>}
+      <div className="w-full relative mt-5 ">
+        <Textarea
+          placeholder="댓글로 의견을 남겨주세요"
+          id="community-comment"
+          className="w-full "
+          ref={commentRef}
+          onKeyDown={handleKeyDown}
+          onClick={postComment}
+        />
       </div>
     </section>
   );
diff --git a/src/domains/shared/components/comment/CommentList.tsx b/src/domains/shared/components/comment/CommentList.tsx
index 8f282c0..2dbd9ff 100644
--- a/src/domains/shared/components/comment/CommentList.tsx
+++ b/src/domains/shared/components/comment/CommentList.tsx
@@ -1,26 +1,184 @@
 import { CommentType } from '@/domains/community/types/post';
 import CommentTitle from './CommentTitle';
+import React, { useEffect, useRef, useState } from 'react';
+import AutoGrowingTextarea from '../../../community/components/textarea/AutoGrowingTextarea';
+import { useInfiniteScrollObserver } from '@/shared/hook/useInfiniteScrollObserver';
+import { useItemVirtualizer } from '@/domains/community/hook/useItemVirtualizer';
+import { useCommentEnterAnimation } from '@/domains/community/hook/useCommentAnimation';
+import { usePrevious } from 'react-use';
 
 type Props = {
   comments: CommentType[] | null;
+  currentUserNickname?: string;
+  onUpdateComment: (commentId: number, postId: number, content: string) => Promise<void>;
+  onDeleteComment: (commentId: number, postId: number) => void;
+  onLoadMore?: (lastCommentId: number) => void; // ← 무한스크롤 콜백
+  isEnd?: boolean;
+  isLoading: boolean;
 };
 
-function CommentList({ comments }: Props) {
+function CommentList({
+  comments,
+  currentUserNickname,
+  onUpdateComment,
+  onDeleteComment,
+  onLoadMore,
+  isEnd,
+}: Props) {
+  const parentRef = useRef<HTMLDivElement | null>(null);
+  const [editCommentId, setEditCommentId] = useState<number | null>(null);
+  const [editedContentMap, setEditedContentMap] = useState<Record<number, string>>({});
+  const firstItemRef = useRef<HTMLLIElement | null>(null);
+  const rowVirtualizer = useItemVirtualizer(comments, parentRef);
+  useCommentEnterAnimation(comments, parentRef);
+
+  const observeLastItem = useInfiniteScrollObserver<HTMLElement>({
+    items: comments,
+    isEnd,
+    onLoadMore: onLoadMore ?? (() => {}),
+  });
+
+  const prevComments = usePrevious(comments);
+
+  // 새 댓글이 추가됐을 때 스크롤 맨 위로
+  useEffect(() => {
+    if (!comments || !prevComments) return;
+
+    const newLength = comments.length;
+    const oldLength = prevComments.length;
+
+    if (newLength > oldLength) {
+      requestAnimationFrame(() => {
+        rowVirtualizer.scrollToIndex(0);
+      });
+    }
+  }, [comments, prevComments, rowVirtualizer]);
+
+  if (!comments || comments.length === 0) {
+    return null;
+  }
+
   return (
-    <ul aria-label="댓글 목록" className="flex flex-col mt-6">
-      {comments &&
-        comments.map(({ commentId, content, userNickName }) => (
-          <li className="border-b-1 border-gray py-3" key={commentId}>
-            <article>
-              <CommentTitle userNickname={userNickName} />
-              <div className="mt-4">
-                <p>{content}</p>
-              </div>
-            </article>
-          </li>
-        ))}
-    </ul>
+    <>
+      <div
+        aria-label="댓글 목록"
+        className="flex flex-col mt-6 overflow-y-auto "
+        ref={parentRef}
+        style={{ height: '600px', position: 'relative' }}
+      >
+        <ul style={{ height: rowVirtualizer.getTotalSize(), position: 'relative' }}>
+          {rowVirtualizer.getVirtualItems().map(({ index, key, start }) => {
+            const { commentId, content, userNickName, createdAt, postId } = comments[index];
+            const isEditing = editCommentId === commentId;
+            const isMyComment = comments && currentUserNickname === userNickName;
+
+            const isLast = index === comments.length - 1;
+
+            return (
+              <li
+                className="border-b-1 border-gray py-3"
+                key={key}
+                data-index={index}
+                ref={(el) => {
+                  if (el) {
+                    requestAnimationFrame(() => {
+                      try {
+                        rowVirtualizer.measureElement(el);
+                      } catch (e) {
+                        console.error('measureElement failed', e);
+                      }
+                    });
+                    if (index === 0) firstItemRef.current = el;
+                    if (isLast) observeLastItem(el);
+                  }
+                }}
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  width: '100%',
+                  transform: `translateY(${start}px)`,
+                  minHeight: '60px', // ← 최소 보장
+                }}
+              >
+                <article>
+                  <CommentTitle
+                    userNickname={userNickName}
+                    commentTime={createdAt}
+                    isMyComment={isMyComment}
+                    isEditing={isEditing}
+                    onSubmitEdit={() => {
+                      const updatedContent = editedContentMap[commentId];
+                      if (!updatedContent) return;
+                      onUpdateComment(commentId, postId, updatedContent).then(() => {
+                        setEditCommentId(null);
+                        setEditedContentMap((prev) => {
+                          const next = { ...prev };
+                          delete next[commentId];
+                          return next;
+                        });
+                      });
+                    }}
+                    onDelete={() => onDeleteComment(commentId, postId)}
+                    onEdit={() => {
+                      setEditCommentId(commentId);
+                      setEditedContentMap((prev) => ({
+                        ...prev,
+                        [commentId]: content, // 기존 내용 세팅
+                      }));
+                    }}
+                    onCancelEdit={() => {
+                      setEditCommentId(null);
+                      setEditedContentMap((prev) => {
+                        const next = { ...prev };
+                        delete next[commentId];
+                        return next;
+                      });
+                    }}
+                  />
+                  <article className="mt-4 h-full">
+                    {isEditing ? (
+                      <AutoGrowingTextarea
+                        value={editedContentMap[commentId] ?? content}
+                        rowVirtualize={rowVirtualizer}
+                        onChange={(e) =>
+                          setEditedContentMap((prev) => ({
+                            ...prev,
+                            [commentId]: e.target.value,
+                          }))
+                        }
+                      />
+                    ) : (
+                      <div className="mt-4">
+                        <p className="whitespace-pre-wrap">{content}</p>
+                      </div>
+                    )}
+                  </article>
+                </article>
+              </li>
+            );
+          })}
+          {isEnd && (
+            <li
+              style={{
+                position: 'absolute',
+                top: 0,
+                left: 0,
+                width: '100%',
+                transform: `translateY(${rowVirtualizer.getTotalSize()}px)`,
+                textAlign: 'center',
+                padding: '1rem',
+                color: '#999',
+                fontSize: '14px',
+              }}
+            >
+              더 이상 댓글이 없어요.
+            </li>
+          )}
+        </ul>
+      </div>
+    </>
   );
 }
 
-export default CommentList;
+export default React.memo(CommentList);
diff --git a/src/domains/shared/components/comment/CommentTitle.tsx b/src/domains/shared/components/comment/CommentTitle.tsx
index 68d87a3..a66b99e 100644
--- a/src/domains/shared/components/comment/CommentTitle.tsx
+++ b/src/domains/shared/components/comment/CommentTitle.tsx
@@ -1,19 +1,45 @@
 import EditDelete from '@/domains/community/detail/EditDelete';
 import Profile from '@/domains/shared/components/profile/Profile';
+import { elapsedTime } from '@/shared/utills/elapsedTime';
 
 type Props = {
   userNickname: string;
+  commentTime: string;
+  isEditing: boolean;
+  onEdit: () => void;
+  onCancelEdit: () => void;
+  onSubmitEdit: () => void;
+  onDelete: () => void;
+  isMyComment: boolean | null;
 };
 
-function CommentTitle({ userNickname }: Props) {
+function CommentTitle({
+  userNickname,
+  commentTime,
+  isEditing,
+  onEdit,
+  onCancelEdit,
+  onSubmitEdit,
+  onDelete,
+  isMyComment,
+}: Props) {
   return (
     <div className="flex items-center justify-between">
       <div className="flex items-center gap-3">
         <Profile userNickname={userNickname} />
-        <span className="text-sm">|</span>
-        <p className="text-sm text-gray">3분 전</p>
+        <span className="md:text-sm text-[11px]">|</span>
+        <p className="md:text-sm text-[11px] text-gray">{elapsedTime(commentTime)}</p>
       </div>
-      <EditDelete use="comment" />
+      {isMyComment && (
+        <EditDelete
+          use="comment"
+          onSubmitEdit={onSubmitEdit}
+          isEditing={isEditing}
+          onEdit={onEdit}
+          onCancelEdit={onCancelEdit}
+          onDelete={onDelete}
+        />
+      )}
     </div>
   );
 }
diff --git a/src/domains/shared/store/auth.ts b/src/domains/shared/store/auth.ts
index 112abce..3a662b2 100644
--- a/src/domains/shared/store/auth.ts
+++ b/src/domains/shared/store/auth.ts
@@ -2,7 +2,7 @@ import { getApi } from '@/app/api/config/appConfig';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 
-interface User {
+export interface User {
   id: string;
   email: string;
   nickname: string;
diff --git a/src/shared/components/textarea-box/Textarea.tsx b/src/shared/components/textarea-box/Textarea.tsx
new file mode 100644
index 0000000..1094126
--- /dev/null
+++ b/src/shared/components/textarea-box/Textarea.tsx
@@ -0,0 +1,62 @@
+import tw from '@/shared/utills/tw';
+import Button from '../button/Button';
+import { Ref } from 'react';
+import { resizeTextarea } from '@/shared/utills/textareaResize';
+
+interface Props {
+  placeholder: string;
+  ref?: Ref<HTMLTextAreaElement | null>;
+  size?: 'default' | 'lg';
+  onChange?: () => void;
+  className?: string;
+  id: string;
+  onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => Promise<void>;
+  onClick?: () => void;
+}
+
+function Textarea({
+  placeholder,
+  ref,
+  size,
+  id,
+  className,
+  onChange,
+  onKeyDown,
+  onClick,
+  ...rest
+}: Props) {
+  const handleResize = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const textarea = e.target;
+    resizeTextarea(textarea);
+    if (onChange) onChange();
+  };
+
+  return (
+    <div className="pl-4 pr-2 w-full rounded-lg bg-white text-primary flex items-center gap-2 placeholder:text-gray-dark min-h-10 max-h-[150px]">
+      <textarea
+        id={id}
+        spellCheck={false}
+        placeholder={placeholder}
+        className={tw(
+          `outline-none w-full flex-1 leading-[1.2] resize-none text-md h-[24px] py-[0.8px] no-scrollbar`,
+          className
+        )}
+        ref={ref}
+        onChange={handleResize}
+        onKeyDown={onKeyDown}
+        {...rest}
+      />
+      <Button
+        color="purple"
+        type="submit"
+        size="auto"
+        className="w-12 h-7 text-xs px-1.5 py-[1px] mt-[0.5px] rounded-sm shadow-md mb-1 absolute bottom-[1.2px] right-2"
+        onClick={onClick}
+      >
+        입력
+      </Button>
+    </div>
+  );
+}
+
+export default Textarea;
diff --git a/src/shared/hook/useInfiniteScrollObserver.ts b/src/shared/hook/useInfiniteScrollObserver.ts
new file mode 100644
index 0000000..a512563
--- /dev/null
+++ b/src/shared/hook/useInfiniteScrollObserver.ts
@@ -0,0 +1,49 @@
+import { CommentType, Post } from '@/domains/community/types/post';
+import { useCallback, useRef } from 'react';
+
+type UseInfiniteScrollObserverParams = {
+  items: CommentType[] | Post[] | null;
+  isEnd: boolean | undefined;
+  onLoadMore: (lastItemId: number) => void | undefined;
+};
+
+export function useInfiniteScrollObserver<T extends HTMLElement>({
+  items,
+  isEnd,
+  onLoadMore,
+}: UseInfiniteScrollObserverParams) {
+  const observerRef = useRef<IntersectionObserver | null>(null);
+
+  const observeLastItem = useCallback(
+    (node: T | null) => {
+      if (!node || !onLoadMore || !items || items.length === 0 || isEnd) return;
+
+      if (observerRef.current) observerRef.current.disconnect();
+
+      observerRef.current = new IntersectionObserver(
+        ([entry]) => {
+          if (entry.isIntersecting) {
+            const lastItem = items[items.length - 1];
+            let lastItemId: number | undefined;
+            if ('commentId' in lastItem && typeof lastItem.commentId === 'number') {
+              lastItemId = lastItem.commentId;
+            } else if ('postId' in lastItem && typeof lastItem.postId === 'number') {
+              lastItemId = lastItem.postId;
+            }
+            if (lastItemId !== undefined) {
+              onLoadMore(lastItemId);
+            }
+          }
+        },
+        {
+          rootMargin: '100px',
+        }
+      );
+
+      observerRef.current.observe(node);
+    },
+    [items, isEnd, onLoadMore]
+  );
+
+  return observeLastItem;
+}
diff --git a/src/shared/utills/intervalCall.ts b/src/shared/utills/intervalCall.ts
new file mode 100644
index 0000000..4ac8656
--- /dev/null
+++ b/src/shared/utills/intervalCall.ts
@@ -0,0 +1,19 @@
+export const intervalCall = (interval: number) => {
+  // interval 시간 안에 다시 호출된 함수 콜은 무시한다
+  let elapsed = true;
+  return async (fn: () => void) => {
+    if (!elapsed) {
+      return; // 마지막 호출 후 제한된 경과시간이 지나지 않은 경우 리턴
+    }
+    elapsed = false;
+    try {
+      await fn(); // async 함수 실행을 기다려줌
+    } catch (err) {
+      console.error('intervalCall 내 함수 실행 중 에러', err);
+    } finally {
+      setTimeout(() => {
+        elapsed = true;
+      }, interval);
+    }
+  };
+};