diff --git a/package.json b/package.json
index 7323da4..9514795 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
     "gsap": "^3.12.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-intersection-observer": "^9.15.1",
     "react-router": "^7.1.5",
     "swiper": "^11.2.4",
     "tailwind-merge": "^3.0.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c0758e6..59ed6ed 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -41,6 +41,9 @@ importers:
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
+      react-intersection-observer:
+        specifier: ^9.15.1
+        version: 9.15.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       react-router:
         specifier: ^7.1.5
         version: 7.1.5(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -2011,6 +2014,15 @@ packages:
     peerDependencies:
       react: ^18.3.1
 
+  react-intersection-observer@9.15.1:
+    resolution: {integrity: sha512-vGrqYEVWXfH+AGu241uzfUpNK4HAdhCkSAyFdkMb9VWWXs6mxzBLpWCxEy9YcnDNY2g9eO6z7qUtTBdA9hc8pA==}
+    peerDependencies:
+      react: ^17.0.0 || ^18.0.0 || ^19.0.0
+      react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+
   react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -4255,6 +4267,12 @@ snapshots:
       react: 18.3.1
       scheduler: 0.23.2
 
+  react-intersection-observer@9.15.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+    optionalDependencies:
+      react-dom: 18.3.1(react@18.3.1)
+
   react-is@16.13.1: {}
 
   react-is@19.0.0: {}
diff --git a/src/apis/mailBox.ts b/src/apis/mailBox.ts
index 7c8b120..7990b34 100644
--- a/src/apis/mailBox.ts
+++ b/src/apis/mailBox.ts
@@ -10,9 +10,11 @@ export const getMailbox = async () => {
   }
 };
 
-export const getMailboxDetail = async (id: number) => {
+export const getMailboxDetail = async (id: number, pageParam: number) => {
   try {
-    const response = await client.get(`/api/mailbox/${id}`);
+    const response = await client.get(`/api/mailbox/${id}?page=${pageParam}&size=20`);
+    // const response = await client.get(`/api/mailbox/${id}`);
+
     if (!response) throw new Error('error while fetching mailbox detail data');
     return response.data;
   } catch (error) {
diff --git a/src/components/LetterWrapper.tsx b/src/components/LetterWrapper.tsx
index 365a8b2..7373ea2 100644
--- a/src/components/LetterWrapper.tsx
+++ b/src/components/LetterWrapper.tsx
@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 interface LetterWrapperProps {
@@ -7,20 +8,23 @@ interface LetterWrapperProps {
   onClick?: (e: React.MouseEvent<HTMLElement>) => void;
 }
 
-const LetterWrapper = ({ isSender = false, className, children, onClick }: LetterWrapperProps) => {
-  return (
-    <article
-      className={twMerge(
-        'relative flex overflow-hidden rounded-sm p-4',
-        isSender ? 'letter-sender-bg' : 'letter-receiver-bg',
-        className,
-      )}
-      onClick={onClick}
-    >
-      <div className="z-10 w-full">{children}</div>
-      <div className="absolute inset-0 z-0 bg-white/50 blur-xl" />
-    </article>
-  );
-};
+const LetterWrapper = forwardRef<HTMLDivElement, LetterWrapperProps>(
+  ({ isSender = false, className, children, onClick }, ref) => {
+    return (
+      <article
+        className={twMerge(
+          'relative flex overflow-hidden rounded-sm p-4',
+          isSender ? 'letter-sender-bg' : 'letter-receiver-bg',
+          className,
+        )}
+        onClick={onClick}
+        ref={ref}
+      >
+        <div className="z-10 w-full">{children}</div>
+        <div className="absolute inset-0 z-0 bg-white/50 blur-xl" />
+      </article>
+    );
+  },
+);
 
 export default LetterWrapper;
diff --git a/src/pages/LetterBox/components/LetterBoxItem.tsx b/src/pages/LetterBox/components/LetterBoxItem.tsx
index 8f7d13e..f493ffb 100644
--- a/src/pages/LetterBox/components/LetterBoxItem.tsx
+++ b/src/pages/LetterBox/components/LetterBoxItem.tsx
@@ -30,14 +30,15 @@ const LetterBoxItem = ({
       className="flex h-fit w-fit flex-col items-center"
       onClick={() => handleClickItem(boxId)}
     >
-      <div className="text-gray-70 flex h-25 w-20 flex-col gap-1.5 bg-linear-to-b from-[#D5B695] to-[#B3895D] p-1.5">
+      <div className="text-gray-70 window-bg flex h-25 w-20 flex-col gap-1.5 bg-linear-to-b p-1.5">
         <p
           className={twMerge(
             'body-m from-white px-1',
             isClosed
               ? 'bg-[repeating-linear-gradient(#D9D9D9,#D9D9D9_17px,#C2C2C2_17px,#C2C2C2_23px)]'
-              : 'bg-linear-to-b',
-            isChecked ? 'to-[#FFF5ED]' : 'to-[#FFF4F2]',
+              : isChecked
+                ? 'window-top-checked'
+                : 'window-top-unChecked',
           )}
         >
           {zipCode}
@@ -48,7 +49,7 @@ const LetterBoxItem = ({
           <div
             className={twMerge(
               'flex grow flex-col bg-linear-to-b',
-              isChecked ? 'from-[#FFF7E3] to-[#FFE197]' : 'from-[#FFF4F2] to-[#FFE6E3]',
+              isChecked ? 'window-bottom-checked' : 'window-bottom-unChecked',
             )}
           >
             <p className="body-r mt-auto mr-[1px] text-right">{letterCount}통</p>
diff --git a/src/pages/LetterBox/index.tsx b/src/pages/LetterBox/index.tsx
index a7aa199..892cb3e 100644
--- a/src/pages/LetterBox/index.tsx
+++ b/src/pages/LetterBox/index.tsx
@@ -1,4 +1,5 @@
-import { useEffect, useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { useNavigate } from 'react-router';
 
 import { getMailbox } from '@/apis/mailBox';
 import DoorImg from '@/assets/images/door.png';
@@ -13,25 +14,34 @@ interface LetterBoxData {
   oppositeZipCode: string;
   active: boolean;
   oppositeRead: boolean;
-  // totalLetters: number;
+  letterCount: number;
 }
+
+const fetchMailLists = async () => {
+  const response = await getMailbox();
+  if (!response) throw new Error();
+  const data: LetterBoxData[] = response.data;
+  // 정렬?
+  return data;
+};
+
 const LetterBoxPage = () => {
-  const [letterBox, setLetterBox] = useState<LetterBoxData[]>([]);
+  const {
+    data: letterBox = [],
+    isLoading,
+    isError,
+  } = useQuery({
+    queryKey: ['mailbox'],
+    queryFn: fetchMailLists,
+    staleTime: 1000 * 60 * 5,
+    gcTime: 1000 * 60 * 10,
+  });
+
+  const navigate = useNavigate();
 
-  const fetchMailLists = async () => {
-    try {
-      const response = await getMailbox();
-      if (!response) throw new Error();
-      const data: LetterBoxData[] = response.data;
-      // 정렬?
-      setLetterBox(data);
-    } catch (error) {
-      console.error(error);
-    }
-  };
-  useEffect(() => {
-    fetchMailLists();
-  }, []);
+  if (isError) {
+    navigate('/NotFound');
+  }
 
   return (
     <main className="flex grow flex-col items-center px-5 pt-20">
@@ -42,14 +52,16 @@ const LetterBoxPage = () => {
         </p>
         <section className="letter-box-bg flex grow flex-col items-center px-4 pt-5">
           <div className="flex w-full flex-col gap-5">
-            {letterBox.length > 0 ? (
+            {isLoading ? (
+              <p className="body-m text-gray-60 text-center">로딩중..</p>
+            ) : letterBox.length > 0 ? (
               chunkBox(
                 letterBox.map((data: LetterBoxData, index) => (
                   <LetterBoxItem
                     boxId={data.letterMatchingId}
                     key={index}
                     zipCode={data.oppositeZipCode}
-                    letterCount={90}
+                    letterCount={data.letterCount}
                     isChecked={data.oppositeRead}
                     isClosed={data.active}
                   />
diff --git a/src/pages/LetterBoxDetail/components/LetterPreview.tsx b/src/pages/LetterBoxDetail/components/LetterPreview.tsx
index 4737242..98967fc 100644
--- a/src/pages/LetterBoxDetail/components/LetterPreview.tsx
+++ b/src/pages/LetterBoxDetail/components/LetterPreview.tsx
@@ -1,6 +1,8 @@
+import { forwardRef } from 'react';
 import { useNavigate } from 'react-router';
 
 import LetterWrapper from '@/components/LetterWrapper';
+import formatDate from '@/utils/formatDate';
 
 interface LetterPreviewProps {
   id: number;
@@ -13,18 +15,18 @@ interface LetterPreviewProps {
   isClosed: boolean;
   zipCode: string;
 }
-const LetterPreview = ({
-  id,
-  date,
-  title,
-  isSend,
-  checked,
-  isShareMode = false,
-  onToggle,
-  isClosed,
-  zipCode,
-}: LetterPreviewProps) => {
-  // 차단된 편지인경우 편지 보내기 disable
+const LetterPreview = forwardRef<HTMLDivElement, LetterPreviewProps>((props, ref) => {
+  const {
+    id,
+    date,
+    title,
+    isSend,
+    checked,
+    isShareMode = false,
+    onToggle,
+    isClosed,
+    zipCode,
+  } = props;
   const navigate = useNavigate();
 
   const handleItemClick = (id: number) => {
@@ -39,9 +41,9 @@ const LetterPreview = ({
 
   if (isShareMode)
     return (
-      <LetterWrapper isSender={isSend}>
+      <LetterWrapper isSender={isSend} ref={ref}>
         <div className="mb-3 flex items-center justify-between">
-          <p className="body-r text-gray-80">{date}</p>
+          <p className="body-r text-gray-80">{formatDate(date)}</p>
           <label htmlFor={`${id}`} className="relative">
             <input
               id={`${id}`}
@@ -58,11 +60,11 @@ const LetterPreview = ({
     );
 
   return (
-    <LetterWrapper isSender={isSend} onClick={() => handleItemClick(id)}>
+    <LetterWrapper isSender={isSend} onClick={() => handleItemClick(id)} ref={ref}>
       <p className="body-r text-gray-80 mb-3">{date}</p>
       <p className="body-m text-gray-80 line-clamp-1 break-all">{title}</p>
     </LetterWrapper>
   );
-};
+});
 
 export default LetterPreview;
diff --git a/src/pages/LetterBoxDetail/index.tsx b/src/pages/LetterBoxDetail/index.tsx
index 7962789..7baea17 100644
--- a/src/pages/LetterBoxDetail/index.tsx
+++ b/src/pages/LetterBoxDetail/index.tsx
@@ -1,4 +1,6 @@
+import { useMutation, useInfiniteQuery } from '@tanstack/react-query';
 import { ChangeEvent, useEffect, useState } from 'react';
+import { useInView } from 'react-intersection-observer';
 import { useLocation, useNavigate } from 'react-router';
 
 import { getMailboxDetail, postMailboxDisconnect } from '@/apis/mailBox';
@@ -9,21 +11,18 @@ import PageTitle from '@/components/PageTitle';
 
 import InformationTooltip from './components/InformationTooltip';
 import LetterPreview from './components/LetterPreview';
+interface MailBoxDetailProps {
+  letterId: number;
+  title: string;
+  myLetter: boolean;
+  active: boolean;
+  createdAt: string;
+}
 
 const LetterBoxDetailPage = () => {
-  interface MailBoxDetailProps {
-    letterId: number;
-    title: string;
-    myLetter: boolean;
-    active: boolean;
-    // createdAt: date;
-  }
-
   const location = useLocation();
   const userInfo = { ...location.state };
 
-  const [mailLists, setMailLists] = useState<MailBoxDetailProps[] | []>([]);
-
   const [isShareMode, setShareMode] = useState(false);
   const [isOpenDisConnectModal, setIsOpenDisConnectModal] = useState(false);
   const [isOpenShareModal, setIsOpenShareModal] = useState(false);
@@ -32,20 +31,59 @@ const LetterBoxDetailPage = () => {
 
   const navigate = useNavigate();
 
-  const fetchData = async () => {
-    try {
-      const response = await getMailboxDetail(userInfo.id || '');
-      if (!response) throw new Error('LetterBoxDetailPage, fetchData error');
-      setMailLists(response.data);
-      console.log(response.data);
-    } catch (error) {
-      console.error(error);
-    }
-  };
+  const { data, isLoading, isError, fetchNextPage, hasNextPage, isFetchingNextPage } =
+    useInfiniteQuery({
+      queryKey: ['mailBoxDetail', userInfo.id],
+      queryFn: async ({ pageParam }) => {
+        console.log(`Fetching page: ${pageParam}`); // 디버깅용
+        const response = await getMailboxDetail(userInfo.id, pageParam);
+        console.log(response.data);
+        return response.data;
+      },
+      enabled: !!userInfo.id,
+      initialPageParam: 0,
+      getNextPageParam: (lastPage, allPages) => {
+        return lastPage.currentPage >= lastPage.totalPages ? undefined : allPages.length + 1;
+      },
+      staleTime: 1000 * 60 * 5,
+      gcTime: 1000 * 60 * 10,
+    });
+
+  const mailLists: MailBoxDetailProps[] = data?.pages.flatMap((page) => page.content) || [];
+
+  const { ref, inView } = useInView();
 
   useEffect(() => {
-    fetchData();
-  }, []);
+    if (inView && hasNextPage && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [inView, hasNextPage, isFetchingNextPage, fetchNextPage]);
+
+  const disconnectMutation = useMutation({
+    mutationFn: async () => await postMailboxDisconnect(userInfo.id),
+    onSuccess: () => {
+      navigate(-1);
+    },
+    onError: (error) => {
+      // TODO: 차단 실패 toastUI 띄워주기
+      // 요청이 실패했어요 잠시 후에 다시 시도해주세요.
+      console.error(error);
+    },
+  });
+
+  const shareMutation = useMutation({
+    // Todo : useAuthStore -> myId 대체
+    mutationFn: () => postShareProposals(selected, 1, userInfo.id, shareComment),
+    onSuccess: () => {
+      toggleShareMode();
+      setShareComment('');
+    },
+    onError: (error) => {
+      // TODO: 차단 실패 toastUI 띄워주기
+      // 요청이 실패했어요 잠시 후에 다시 시도해주세요.
+      console.error(error);
+    },
+  });
 
   const toggleShareMode = () => {
     if (isShareMode) {
@@ -66,27 +104,9 @@ const LetterBoxDetailPage = () => {
     setShareComment(e.target.value);
   };
 
-  const handleDisconnect = async () => {
-    try {
-      const response = await postMailboxDisconnect(userInfo.id);
-      if (!response) throw new Error('letterBoxDetail, disconnecting failed');
-      console.log(response);
-      navigate(-1);
-    } catch (error) {
-      console.error(error);
-    }
-  };
-
-  const handleShare = async () => {
-    try {
-      // TODO: myId -> 전역객체에서 가져오기
-      const response = await postShareProposals(selected, 1, userInfo.id, shareComment);
-      if (!response) throw new Error(response);
-      console.log(response);
-    } catch (error) {
-      console.error(error);
-    }
-  };
+  if (isError) {
+    navigate('/notFound');
+  }
 
   return (
     <>
@@ -99,7 +119,7 @@ const LetterBoxDetailPage = () => {
           onCancel={() => setIsOpenDisConnectModal(false)}
           onConfirm={() => {
             setIsOpenDisConnectModal(false);
-            handleDisconnect();
+            disconnectMutation.mutate();
           }}
         />
       )}
@@ -117,9 +137,7 @@ const LetterBoxDetailPage = () => {
           }}
           onComplete={() => {
             setIsOpenShareModal(false);
-            handleShare();
-            toggleShareMode();
-            setShareComment('');
+            shareMutation.mutate();
           }}
         >
           <p className="text-gray-70 body-m mt-1">상대방 동의 후에 게시글이 업로드 됩니다.</p>
@@ -136,30 +154,35 @@ const LetterBoxDetailPage = () => {
           <div className="flex items-center gap-0.5 underline">
             {!userInfo.isClosed && (
               <button type="button" onClick={toggleShareMode}>
-                {isShareMode ? '취소하기' : '편지 공유하기'}
+                {isLoading ? '' : isShareMode ? '취소하기' : '편지 공유하기'}
               </button>
             )}
-            {!isShareMode && !userInfo.isClosed && <InformationTooltip />}
+            {!isShareMode && !userInfo.isClosed && !isLoading && <InformationTooltip />}
           </div>
         </section>
         <section className="mb-5 flex flex-col gap-4">
-          {mailLists.map((letter) => (
-            <LetterPreview
-              key={letter.letterId}
-              id={letter.letterId}
-              // TODO: createdAt 추가해주시면 수정
-              date={'2025.01.01'}
-              title={letter.title}
-              isSend={letter.myLetter}
-              checked={selected.includes(letter.letterId)}
-              isShareMode={isShareMode}
-              isClosed={userInfo.isClosed}
-              onToggle={() => toggleSelected(letter.letterId)}
-              zipCode={userInfo.zipCode}
-            />
-          ))}
+          {isLoading ? (
+            //TODO: skeleton
+            <div>Loading</div>
+          ) : (
+            mailLists.map((letter, index) => (
+              <LetterPreview
+                key={letter.letterId}
+                id={letter.letterId}
+                date={letter.createdAt}
+                title={letter.title}
+                isSend={letter.myLetter}
+                checked={selected.includes(letter.letterId)}
+                isShareMode={isShareMode}
+                isClosed={userInfo.isClosed}
+                onToggle={() => toggleSelected(letter.letterId)}
+                zipCode={userInfo.zipCode}
+                ref={index === mailLists.length - 1 ? ref : null}
+              />
+            ))
+          )}
         </section>
-        {!isShareMode && !userInfo.isClosed && (
+        {!isShareMode && !userInfo.isClosed && !isLoading && (
           <button
             type="button"
             className="body-sb text-gray-60 mt-auto text-left underline"
diff --git a/src/styles/utilities.css b/src/styles/utilities.css
index f9e4577..48b5315 100644
--- a/src/styles/utilities.css
+++ b/src/styles/utilities.css
@@ -87,4 +87,25 @@
   .letter-gradient {
     background: linear-gradient(to bottom, #ffffff, #f2f2f2);
   }
+
+  /* letter-box */
+  .window-bg {
+    background: linear-gradient(to bottom, #d5b695, #b3895d) !important;
+  }
+
+  .window-top-checked {
+    background: linear-gradient(to bottom, #ffffff, #fff5ed) !important;
+  }
+
+  .window-top-unChecked {
+    background: linear-gradient(to bottom, #ffffff, #fff4f2) !important;
+  }
+
+  .window-bottom-checked {
+    background: linear-gradient(to bottom, #fff7e3, #ffe197) !important;
+  }
+
+  .window-bottom-unChecked {
+    background: linear-gradient(to bottom, #fff4f2, #ffe6e3) !important;
+  }
 }
diff --git a/src/utils/formatDate.ts b/src/utils/formatDate.ts
new file mode 100644
index 0000000..6cca28d
--- /dev/null
+++ b/src/utils/formatDate.ts
@@ -0,0 +1,11 @@
+const formatDate = (isoString: string) => {
+  const date = new Date(isoString);
+  return date
+    .toLocaleDateString('ko-KR', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+    })
+    .replace(/-/g, '.');
+};
+export default formatDate;