diff --git a/src/domains/community/api/fetchPost.ts b/src/domains/community/api/fetchPost.ts
index 29fdb672..3cab12ed 100644
--- a/src/domains/community/api/fetchPost.ts
+++ b/src/domains/community/api/fetchPost.ts
@@ -1,13 +1,17 @@
 import { getApi } from '@/app/api/config/appConfig';
 import { Post } from '@/domains/community/types/post';
 import { ParamValue } from 'next/dist/server/request/params';
+import { tabItem } from '../main/CommunityTab';
 
-export const fetchPost = async (): Promise<Post[] | null> => {
+export const fetchPost = async (lastId?: number | null): Promise<Post[] | null> => {
   try {
-    const res = await fetch(`${getApi}/posts?postSortStatus=LATEST`, {
-      method: 'GET',
-      cache: 'no-store',
-    });
+    const res = await fetch(
+      `${getApi}/posts?${lastId ? `lastId=${lastId}&` : ''}postSortStatus=LATEST`,
+      {
+        method: 'GET',
+        cache: 'no-store',
+      }
+    );
     const data = await res.json();
     return data.data;
   } catch (err) {
@@ -29,15 +33,57 @@ export const fetchPostById = async (postId: ParamValue) => {
   }
 };
 
-export const fetchPostByTab = async (selectedTab: string): Promise<Post[] | null> => {
+export const fetchPostByTab = async ({
+  category,
+  filter = 'LATEST',
+  lastId,
+  lastLikeCount,
+  lastCommentCount,
+}: {
+  category?: string;
+  filter?: 'LATEST' | 'POPULAR' | 'COMMENTS';
+  lastId?: number;
+  lastLikeCount?: number | null;
+  lastCommentCount?: number | null;
+}): Promise<Post[] | null> => {
   try {
-    const data = await fetchPost();
+    const params = new URLSearchParams();
+
+    if (category && category !== 'all') {
+      const categoryId = tabItem.findIndex((tab) => tab.key === category);
+      if (categoryId >= 0) {
+        params.set('categoryId', categoryId.toString());
+      }
+    }
+
+    if (lastId) params.set('lastId', lastId.toString());
+
+    switch (filter) {
+      case 'POPULAR':
+        if (lastLikeCount) params.set('lastLikeCount', lastLikeCount.toString());
+        params.set('postSortStatus', 'POPULAR');
+        break;
+      case 'COMMENTS':
+        if (lastCommentCount) params.set('lastCommentCount', lastCommentCount.toString());
+        params.set('postSortStatus', 'COMMENTS');
+        break;
+      case 'LATEST':
+      default:
+        params.set('postSortStatus', 'LATEST');
+        break;
+    }
+
+    const res = await fetch(`${getApi}/posts?${params.toString()}`, {
+      method: 'GET',
+      cache: 'no-store',
+    });
+
+    const data = await res.json();
     if (!data) return null;
 
-    const filtered = data.filter((post) => post.categoryName === selectedTab);
-    return filtered;
+    return data.data; // 필요하다면 filter 추가 가능
   } catch (err) {
-    console.error('글 목록 필터링 실패', err);
+    console.error('글 목록 가져오기 실패', err);
     return null;
   }
 };
diff --git a/src/domains/community/main/Community.tsx b/src/domains/community/main/Community.tsx
index 878d412b..008aab1d 100644
--- a/src/domains/community/main/Community.tsx
+++ b/src/domains/community/main/Community.tsx
@@ -1,27 +1,100 @@
 'use client';
 
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import CommunityFilter from './CommunityFilter';
 import CommunityTab from './CommunityTab';
 import PostCard from './PostCard';
 import WriteBtn from './WriteBtn';
 import { Post } from '../types/post';
-import { fetchPost } from '../api/fetchPost';
+import { fetchPostByTab } from '../api/fetchPost';
+import { useSearchParams } from 'next/navigation';
 
 function Community() {
-  const [posts, setPosts] = useState<Post[]>([]);
+  const [posts, setPosts] = useState<Post[] | null>([]);
   const [isLoading, setIsLoading] = useState(true);
+  const [lastLoadedId, setLastLoadedId] = useState<number | null>(null);
+
+  const searchParams = useSearchParams();
+
+  const category = useMemo(() => searchParams.get('category') || 'all', [searchParams]);
+  const filter = useMemo(
+    () => (searchParams.get('postSortStatus') as 'LATEST' | 'POPULAR' | 'COMMENTS') || 'LATEST',
+    [searchParams]
+  );
+
+  const [isEnd, setIsEnd] = useState(false);
 
   useEffect(() => {
-    const fetchData = async () => {
-      setIsLoading(true);
-      const data = await fetchPost();
-      if (!data) return;
-      setPosts(data);
+    setPosts([]);
+    setIsEnd(false);
+    setLastLoadedId(null);
+    loadInitialPosts();
+  }, [category, filter]);
+
+  const loadInitialPosts = async () => {
+    const category = searchParams.get('category') || 'all';
+    const filter =
+      (searchParams.get('postSortStatus') as 'LATEST' | 'POPULAR' | 'COMMENTS') || 'LATEST';
+
+    setIsLoading(true);
+    setIsEnd(false);
+
+    const lastLikeCount =
+      posts && posts.length > 0 ? Math.min(...posts.map((post) => post.likeCount)) : null;
+
+    const lastCommentCount =
+      posts && posts.length > 0 ? Math.min(...posts.map((post) => post.commentCount)) : null;
+
+    try {
+      const newPosts = await fetchPostByTab({
+        category,
+        filter,
+        lastLikeCount,
+        lastCommentCount,
+      });
+
+      if (!newPosts || newPosts.length === 0) {
+        setIsEnd(true);
+        setPosts([]);
+      } else {
+        setPosts(newPosts);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const loadMorePosts = async (lastPostId: number) => {
+    if (isEnd || isLoading) return;
+    if (!posts || posts.length === 0) return;
+    console.log('시작', lastPostId);
+
+    const lastPost = posts[posts.length - 1];
+    if (lastPostId === lastPost.postId) return;
+    setLastLoadedId(lastPost.postId);
+
+    setIsLoading(true);
+    try {
+      const category = searchParams.get('category') || 'all';
+      const filter =
+        (searchParams.get('postSortStatus') as 'LATEST' | 'POPULAR' | 'COMMENTS') || 'LATEST';
+
+      const newPosts = await fetchPostByTab({
+        category,
+        filter,
+        lastId: lastPostId,
+      });
+
+      if (!newPosts || newPosts?.length === 0) {
+        setIsEnd(true);
+        console.log('끝');
+      } else {
+        setPosts((prev) => [...(prev ?? []), ...(newPosts ?? [])]);
+      }
+    } finally {
       setIsLoading(false);
-    };
-    fetchData();
-  }, [setPosts]);
+    }
+  };
 
   return (
     <>
@@ -29,13 +102,20 @@ function Community() {
         aria-label="탭과 글쓰기"
         className="flex justify-between item-center sm:flex-row flex-col gap-4 mt-1"
       >
-        <CommunityTab setPosts={setPosts} />
+        <CommunityTab setPosts={setPosts} setIsLoading={setIsLoading} setIsEnd={setIsEnd} />
         <WriteBtn />
       </section>
 
       <section aria-label="게시물 목록">
-        <CommunityFilter posts={posts} />
-        <PostCard posts={posts} isLoading={isLoading} />
+        <CommunityFilter posts={posts} setPosts={setPosts} />
+        <PostCard
+          posts={posts}
+          setPost={setPosts}
+          isLoading={isLoading}
+          setIsLoading={setIsLoading}
+          isEnd={isEnd}
+          onLoadMore={loadMorePosts}
+        />
       </section>
     </>
   );
diff --git a/src/domains/community/main/CommunityFilter.tsx b/src/domains/community/main/CommunityFilter.tsx
index d497b3f0..25dfd906 100644
--- a/src/domains/community/main/CommunityFilter.tsx
+++ b/src/domains/community/main/CommunityFilter.tsx
@@ -2,19 +2,59 @@
 
 import { Post } from '../types/post';
 import SelectBox from '@/shared/components/select-box/SelectBox';
+import { Dispatch, SetStateAction, useEffect } from 'react';
+import { fetchPostByTab } from '../api/fetchPost';
+import { useRouter, useSearchParams } from 'next/navigation';
 
 type Props = {
-  posts: Post[];
+  posts: Post[] | null;
+  setPosts: Dispatch<SetStateAction<Post[] | null>>;
 };
 
-function CommunityFilter({ posts }: Props) {
+const sortMap = {
+  최신순: 'LATEST',
+  인기순: 'POPULAR',
+  댓글순: 'COMMENTS',
+} as const;
+
+function CommunityFilter({ posts, setPosts }: Props) {
+  const searchParams = useSearchParams();
+  const query = searchParams.get('category');
+  const router = useRouter();
+
+  useEffect(() => {
+    console.log(query);
+  }, [query]);
+
+  const handleChange = async (selectTitle: string) => {
+    if (!query) return;
+
+    console.log(selectTitle);
+
+    const data = await fetchPostByTab({
+      category: query,
+      filter: sortMap[selectTitle as keyof typeof sortMap],
+    });
+    if (!data) return;
+    setPosts(data);
+  };
+
   return (
     <section
       className="w-full flex justify-between items-center border-b-1 border-gray-light pb-1.5"
       aria-label="커뮤니티 정렬 필터"
     >
-      <p aria-live="polite">{posts.length}개</p>
-      <SelectBox option={['최신순', '인기순', '댓글순']} title={'최신순'} />
+      <p aria-live="polite">{posts && posts.length}개</p>
+      <SelectBox
+        option={['최신순', '인기순', '댓글순']}
+        title={'최신순'}
+        onChange={(value) => {
+          const sortValue = sortMap[value as keyof typeof sortMap];
+
+          handleChange(value);
+          router.push(`?category=${query || '전체'}&postSortStatus=${sortValue}`);
+        }}
+      />
     </section>
   );
 }
diff --git a/src/domains/community/main/CommunityTab.tsx b/src/domains/community/main/CommunityTab.tsx
index 8ed73756..a277cc52 100644
--- a/src/domains/community/main/CommunityTab.tsx
+++ b/src/domains/community/main/CommunityTab.tsx
@@ -1,56 +1,60 @@
 'use client';
 
 import tw from '@/shared/utills/tw';
-import { useEffect, useState } from 'react';
-import { fetchPost, fetchPostByTab } from '../api/fetchPost';
 import { Post } from '../types/post';
+import { useState } from 'react';
+import { fetchPost, fetchPostByTab } from '../api/fetchPost';
+import { useRouter, useSearchParams } from 'next/navigation';
 
 type Props = {
-  setPosts: (value: Post[]) => void;
+  setPosts: (value: Post[] | null) => void;
+  setIsLoading: (value: boolean) => void;
+  setIsEnd: (value: boolean) => void;
 };
 
-const tabItem = [
-  { title: '전체' },
-  { title: '레시피' },
-  { title: '팁' },
-  { title: '질문' },
-  { title: '자유' },
+export const tabItem = [
+  { key: 'all', label: '전체' },
+  { key: 'recipe', label: '레시피' },
+  { key: 'tip', label: '팁' },
+  { key: 'question', label: '질문' },
+  { key: 'chat', label: '자유' },
 ];
 
-function CommunityTab({ setPosts }: Props) {
-  const [selectedIdx, setSelectedIdx] = useState(0);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      const selectedTab = tabItem[selectedIdx].title;
+function CommunityTab({ setPosts, setIsLoading, setIsEnd }: Props) {
+  const searchParams = useSearchParams();
+  const router = useRouter();
 
-      let data;
-      if (selectedTab === '전체') data = await fetchPost();
-      else data = await fetchPostByTab(selectedTab);
+  const currentSort = searchParams.get('postSortStatus') || 'LATEST';
 
-      if (!data) return;
-      setPosts(data);
-    };
-    fetchData();
-  }, [selectedIdx, setPosts]);
+  const [selectedCategory, setSelectedCategory] = useState(() => {
+    const param = searchParams.get('category') || 'all';
+    const exists = tabItem.some(({ key }) => key === param);
+    return exists ? param : 'all';
+  });
 
   return (
     <section className="relative sm:w-[70%] w-full" aria-label="커뮤니티 탭">
       <div className="w-full overflow-x-scroll no-scrollbar scroll-smooth">
         <div className="flex gap-3 w-max" aria-label="커뮤니티 카테고리">
-          {tabItem.map(({ title }, idx) => (
+          {tabItem.map(({ key, label }) => (
             <button
-              key={title + idx}
+              key={key}
               role="tab"
-              aria-selected={selectedIdx === idx}
-              tabIndex={selectedIdx === idx ? 0 : -1}
-              onClick={() => setSelectedIdx(idx)}
+              aria-selected={selectedCategory === key}
+              tabIndex={selectedCategory === key ? 0 : -1}
+              onClick={() => {
+                setSelectedCategory(key);
+                const params = new URLSearchParams();
+                params.set('category', key);
+                params.set('postSortStatus', currentSort); // ✅ 현재 필터 상태 유지
+                router.push(`?${params.toString()}`);
+              }}
               className={tw(
                 `border-1 py-1 px-3 rounded-2xl transition-colors ease-in min-w-18`,
-                selectedIdx === idx ? 'bg-secondary text-primary' : 'hover:bg-secondary/20'
+                selectedCategory === key ? 'bg-secondary text-primary' : 'hover:bg-secondary/20'
               )}
             >
-              {title}
+              {label}
             </button>
           ))}
         </div>
diff --git a/src/domains/community/main/PostCard.tsx b/src/domains/community/main/PostCard.tsx
index 952e4850..b1fe3878 100644
--- a/src/domains/community/main/PostCard.tsx
+++ b/src/domains/community/main/PostCard.tsx
@@ -8,86 +8,113 @@ import Label from '@/domains/shared/components/label/Label';
 import { Post } from '@/domains/community/types/post';
 import { useRouter } from 'next/navigation';
 import SkeletonPostCard from '@/domains/shared/skeleton/SkeletonPostCard';
+import { useInfiniteScrollObserver } from '@/shared/hook/useInfiniteScrollObserver';
+import { useRef } from 'react';
 
 type Props = {
-  posts: Post[];
+  posts: Post[] | null;
+  setPost?: (value: Post[] | null) => void;
   isLoading: boolean;
+  setIsLoading?: (value: boolean) => void;
+  isEnd?: boolean;
+  onLoadMore?: (lastCommentId: number) => void;
 };
 
-function PostCard({ posts, isLoading }: Props) {
+function PostCard({ posts, isLoading, isEnd, onLoadMore }: Props) {
   const router = useRouter();
+  const firstItemRef = useRef<HTMLElement | null>(null);
 
   const handlePost = (id: number) => {
     router.push(`/community/${id}`);
   };
 
+  const observeLastItem = useInfiniteScrollObserver<HTMLElement>({
+    items: posts,
+    isEnd,
+    onLoadMore: onLoadMore ?? (() => {}),
+  });
+
   if (isLoading) return <SkeletonPostCard />;
-  if (posts.length === 0)
+  if (posts && posts.length === 0)
     return (
       <div className="w-full flex items-center justify-center mt-20">작성된 글이 없습니다.</div>
     );
 
   return (
     <>
-      {posts.map(
-        ({
-          postId,
-          categoryName,
-          title,
-          content,
-          userNickName,
-          viewCount,
-          createdAt,
-          commentCount,
-          imageUrl,
-        }) => (
-          <article className="py-4 sm:py-5 border-b-1 border-gray-light" key={postId}>
-            <Label title={categoryName} />
+      {posts &&
+        posts.map(
+          (
+            {
+              postId,
+              categoryName,
+              title,
+              content,
+              userNickName,
+              viewCount,
+              createdAt,
+              commentCount,
+              imageUrl,
+            },
+            index
+          ) => {
+            const isLast = index === posts.length - 1;
+            return (
+              <article
+                className="py-4 sm:py-5 border-b-1 border-gray-light"
+                key={postId}
+                ref={(el) => {
+                  if (index === 0) firstItemRef.current = el;
+                  if (isLast) observeLastItem(el);
+                }}
+              >
+                <Label title={categoryName} />
 
-            <section
-              onClick={() => handlePost(postId)}
-              className="flex items-center gap-3 justify-between mt-3 cursor-pointer h-full"
-              role="link"
-            >
-              <div className="flex flex-col gap-3 md:max-w-[51.25rem] sm:max-w-[27.5rem] max-w-[19.375rem] flex-grow content-between h-full">
-                <p className="font-bold sm:text-xl text-lg">{title}</p>
-                <div className="font-light sm:text-[15px] text-sm md:max-w-[820px] sm:max-w-[440px] max-w-[210px] h-full">
-                  <p
-                    className="h-10"
-                    style={{
-                      display: '-webkit-box',
-                      WebkitBoxOrient: 'vertical',
-                      WebkitLineClamp: 2,
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                    }}
-                  >
-                    {content}
-                  </p>
-                </div>
-                <PostInfo
-                  hasUserName={true}
-                  userNickName={userNickName}
-                  viewCount={viewCount}
-                  createdAt={createdAt}
-                  commentCount={commentCount}
-                />
-              </div>
-              <figure className="flex items-center flex-shrink-0 md:w-[115px] md:h-[115px] w-[85px] h-[85px]">
-                {imageUrl && (
-                  <Image
-                    src={prePost}
-                    alt="예비사진"
-                    width={105}
-                    height={105}
-                    className="w-full h-full object-cover self-center"
-                  />
-                )}
-              </figure>
-            </section>
-          </article>
-        )
-      )}
+                <section
+                  onClick={() => handlePost(postId)}
+                  className="flex items-center gap-3 justify-between mt-3 cursor-pointer h-full"
+                  role="link"
+                >
+                  <div className="flex flex-col gap-3 md:max-w-[51.25rem] sm:max-w-[27.5rem] max-w-[19.375rem] flex-grow content-between h-full">
+                    <p className="font-bold sm:text-xl text-lg">{title}</p>
+                    <div className="font-light sm:text-[15px] text-sm md:max-w-[820px] sm:max-w-[440px] max-w-[210px] h-full">
+                      <p
+                        className="h-10"
+                        style={{
+                          display: '-webkit-box',
+                          WebkitBoxOrient: 'vertical',
+                          WebkitLineClamp: 2,
+                          overflow: 'hidden',
+                          textOverflow: 'ellipsis',
+                        }}
+                      >
+                        {content}
+                      </p>
+                    </div>
+                    <PostInfo
+                      hasUserName={true}
+                      userNickName={userNickName}
+                      viewCount={viewCount}
+                      createdAt={createdAt}
+                      commentCount={commentCount}
+                    />
+                  </div>
+                  <figure className="flex items-center flex-shrink-0 md:w-[115px] md:h-[115px] w-[85px] h-[85px]">
+                    {imageUrl && (
+                      <Image
+                        src={prePost}
+                        alt="예비사진"
+                        width={105}
+                        height={105}
+                        className="w-full h-full object-cover self-center"
+                      />
+                    )}
+                  </figure>
+                </section>
+              </article>
+            );
+          }
+        )}
     </>
   );
 }
diff --git a/src/domains/shared/components/comment/CommentList.tsx b/src/domains/shared/components/comment/CommentList.tsx
index 2dbd9ffc..09604016 100644
--- a/src/domains/shared/components/comment/CommentList.tsx
+++ b/src/domains/shared/components/comment/CommentList.tsx
@@ -15,6 +15,7 @@ type Props = {
   onLoadMore?: (lastCommentId: number) => void; // ← 무한스크롤 콜백
   isEnd?: boolean;
   isLoading: boolean;
+  myPage?: boolean;
 };
 
 function CommentList({
@@ -24,6 +25,7 @@ function CommentList({
   onDeleteComment,
   onLoadMore,
   isEnd,
+  myPage = false,
 }: Props) {
   const parentRef = useRef<HTMLDivElement | null>(null);
   const [editCommentId, setEditCommentId] = useState<number | null>(null);
@@ -107,6 +109,7 @@ function CommentList({
                     commentTime={createdAt}
                     isMyComment={isMyComment}
                     isEditing={isEditing}
+                    myPage={myPage}
                     onSubmitEdit={() => {
                       const updatedContent = editedContentMap[commentId];
                       if (!updatedContent) return;
diff --git a/src/domains/shared/components/comment/CommentTitle.tsx b/src/domains/shared/components/comment/CommentTitle.tsx
index a66b99eb..b3993a44 100644
--- a/src/domains/shared/components/comment/CommentTitle.tsx
+++ b/src/domains/shared/components/comment/CommentTitle.tsx
@@ -11,6 +11,7 @@ type Props = {
   onSubmitEdit: () => void;
   onDelete: () => void;
   isMyComment: boolean | null;
+  myPage: boolean;
 };
 
 function CommentTitle({
@@ -22,6 +23,7 @@ function CommentTitle({
   onSubmitEdit,
   onDelete,
   isMyComment,
+  myPage,
 }: Props) {
   return (
     <div className="flex items-center justify-between">
@@ -30,7 +32,7 @@ function CommentTitle({
         <span className="md:text-sm text-[11px]">|</span>
         <p className="md:text-sm text-[11px] text-gray">{elapsedTime(commentTime)}</p>
       </div>
-      {isMyComment && (
+      {isMyComment && !myPage && (
         <EditDelete
           use="comment"
           onSubmitEdit={onSubmitEdit}