REDO-Team · woohowhyun · Aug 9, 2026 · Aug 9, 2026
diff --git a/src/layouts/Layout.tsx b/src/layouts/Layout.tsx
@@ -86,10 +86,10 @@ const Layout = () => {
         {isCommunityWrite && <TopBar title='게시글 작성' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-green1' />}
         {isCommunityModify && <TopBar title='게시글 수정' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-green1' />}
 
-        {isMyPosts && <TopBar title='작성한 게시글' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-my' />}
-        {isMyfavorites && <TopBar title='즐겨찾기한 배출정보' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-my' />}
-        {isMyhistory && <TopBar title='리워드 사용내역' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-my' />}
-        {isMycomments && <TopBar title='작성한 댓글' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-my' />}
+        {isMyPosts && <TopBar title='작성한 게시글' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-my' />}
+        {isMyfavorites && <TopBar title='즐겨찾기한 배출정보' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-my' />}
+        {isMyhistory && <TopBar title='리워드 사용내역' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-my' />}
+        {isMycomments && <TopBar title='작성한 댓글' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-my' />}
 
         {isReward && <TopBar title='리워드 적립' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-green1' />}
         {isRewardHistory && <TopBar title='리워드 내역' leftIcon rightIcon={Home} onClick={() => navigate('/')} bgColor='bg-bg-green1' />}

diff --git a/src/pages/my-page/index.tsx b/src/pages/my-page/index.tsx
@@ -160,7 +160,7 @@ const MyPage = () => {
 
   return (
     <>
-      <div className='flex min-h-screen w-full flex-col overflow-y-auto bg-[#F9FBFB] px-5 pb-[100px] font-pretendard text-text'>
+      <div className='flex min-h-screen w-full flex-col overflow-y-auto bg-[#F9FBFB] px-5 pb-[120px] font-pretendard text-text'>
         {/* 프로필 */}
         <section className='mt-[24px] flex h-[80px] w-full items-center'>
           <div className='flex h-[80px] w-[80px] shrink-0 items-center justify-center overflow-hidden rounded-full bg-white'>

diff --git a/src/pages/my-page/my-comments-page.tsx b/src/pages/my-page/my-comments-page.tsx
@@ -1,10 +1,14 @@
 import type { MouseEvent } from 'react';
 import {
+  useInfiniteQuery,
   useMutation,
-  useQuery,
   useQueryClient,
 } from '@tanstack/react-query';
-import { useState } from 'react';
+import {
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import {
@@ -21,8 +25,12 @@ const formatCreatedAt = (createdAt: string) => {
   const date = new Date(createdAt);
 
   const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, '0');
-  const day = String(date.getDate()).padStart(2, '0');
+  const month = String(
+    date.getMonth() + 1,
+  ).padStart(2, '0');
+  const day = String(
+    date.getDate(),
+  ).padStart(2, '0');
 
   return `${year}.${month}.${day}`;
 };
@@ -39,16 +47,71 @@ const MyCommentsPage = () => {
   const [deleteTarget, setDeleteTarget] =
     useState<DeleteCommentTarget | null>(null);
 
+  const loadMoreRef =
+    useRef<HTMLDivElement | null>(null);
+
   const {
     data,
     isPending,
     isError,
-  } = useQuery({
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useInfiniteQuery({
     queryKey: ['myComments'],
-    queryFn: () => getMyComments(0, 10),
+    initialPageParam: 0,
+
+    queryFn: ({ pageParam }) =>
+      getMyComments(pageParam, 10),
+
+    getNextPageParam: (lastPage) => {
+      const result = lastPage.result;
+
+      if (!result || !result.hasNext) {
+        return undefined;
+      }
+
+      return result.page + 1;
+    },
   });
 
-  const comments = data?.result?.items ?? [];
+  const comments =
+    data?.pages.flatMap(
+      (page) => page.result?.items ?? [],
+    ) ?? [];
+
+  useEffect(() => {
+    const target = loadMoreRef.current;
+
+    if (!target) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+
+        if (
+          entry?.isIntersecting &&
+          hasNextPage &&
+          !isFetchingNextPage
+        ) {
+          void fetchNextPage();
+        }
+      },
+      {
+        rootMargin: '100px',
+      },
+    );
+
+    observer.observe(target);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  ]);
 
   const deleteMutation = useMutation({
     mutationFn: ({
@@ -126,7 +189,7 @@ const MyCommentsPage = () => {
 
   return (
     <div className='min-h-screen bg-bg-my'>
-      <main className='px-[20px] pt-[72px]'>
+      <main className='px-[20px] pt-[60px]'>
         {comments.length > 0 ? (
           <section className='flex flex-col gap-[10px]'>
             {comments.map((comment) => (
@@ -168,6 +231,17 @@ const MyCommentsPage = () => {
                 </div>
               </article>
             ))}
+
+            <div
+              ref={loadMoreRef}
+              className='h-1'
+            />
+
+            {isFetchingNextPage && (
+              <div className='flex justify-center py-4'>
+                <LoadingSpinner />
+              </div>
+            )}
           </section>
         ) : (
           <div className='flex min-h-[calc(100vh-72px)] flex-col items-center justify-center pb-[80px]'>

diff --git a/src/pages/my-page/my-posts-page.tsx b/src/pages/my-page/my-posts-page.tsx
@@ -1,10 +1,14 @@
 import type { MouseEvent } from 'react';
 import {
+  useInfiniteQuery,
   useMutation,
-  useQuery,
   useQueryClient,
 } from '@tanstack/react-query';
-import { useState } from 'react';
+import {
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import LoadingSpinner from '../../components/common/LoadingSpinner';
@@ -21,8 +25,12 @@ const formatCreatedAt = (createdAt: string) => {
   const date = new Date(createdAt);
 
   const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, '0');
-  const day = String(date.getDate()).padStart(2, '0');
+  const month = String(
+    date.getMonth() + 1,
+  ).padStart(2, '0');
+  const day = String(
+    date.getDate(),
+  ).padStart(2, '0');
 
   return `${year}.${month}.${day}`;
 };
@@ -34,19 +42,75 @@ const MyPostsPage = () => {
   const [deletePostId, setDeletePostId] =
     useState<number | null>(null);
 
+  const loadMoreRef =
+    useRef<HTMLDivElement | null>(null);
+
   const {
     data,
     isPending,
     isError,
-  } = useQuery({
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  } = useInfiniteQuery({
     queryKey: ['myCommunities'],
-    queryFn: () => getMyCommunities(0, 10),
+    initialPageParam: 0,
+
+    queryFn: ({ pageParam }) =>
+      getMyCommunities(pageParam, 10),
+
+    getNextPageParam: (lastPage) => {
+      const result = lastPage.result;
+
+      if (!result || !result.hasNext) {
+        return undefined;
+      }
+
+      return result.page + 1;
+    },
   });
 
-  const posts = data?.result?.items ?? [];
+  const posts =
+    data?.pages.flatMap(
+      (page) => page.result?.items ?? [],
+    ) ?? [];
+
+  useEffect(() => {
+    const target = loadMoreRef.current;
+
+    if (!target) return;
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const entry = entries[0];
+
+        if (
+          entry?.isIntersecting &&
+          hasNextPage &&
+          !isFetchingNextPage
+        ) {
+          void fetchNextPage();
+        }
+      },
+      {
+        rootMargin: '100px',
+      },
+    );
+
+    observer.observe(target);
+
+    return () => {
+      observer.disconnect();
+    };
+  }, [
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  ]);
 
   const deleteMutation = useMutation({
     mutationFn: deleteCommunity,
+
     onSuccess: async () => {
       await queryClient.invalidateQueries({
         queryKey: ['myCommunities'],
@@ -70,6 +134,7 @@ const MyPostsPage = () => {
     communityId: number,
   ) => {
     event.stopPropagation();
+
     setDeletePostId(communityId);
   };
 
@@ -108,7 +173,7 @@ const MyPostsPage = () => {
 
   return (
     <div className='min-h-screen bg-bg-my'>
-      <main className='px-[20px] pt-[72px]'>
+      <main className='px-[20px] pt-[60px]'>
         {posts.length > 0 ? (
           <section className='flex flex-col gap-[10px]'>
             {posts.map((post) => (
@@ -149,6 +214,17 @@ const MyPostsPage = () => {
                 </div>
               </article>
             ))}
+
+            <div
+              ref={loadMoreRef}
+              className='h-1'
+            />
+
+            {isFetchingNextPage && (
+              <div className='flex justify-center py-4'>
+                <LoadingSpinner />
+              </div>
+            )}
           </section>
         ) : (
           <div className='flex min-h-[calc(100vh-72px)] flex-col items-center justify-center pb-[80px]'>