diff --git a/src/apis/rolling.ts b/src/apis/rolling.ts
new file mode 100644
index 0000000..8930c0d
--- /dev/null
+++ b/src/apis/rolling.ts
@@ -0,0 +1,38 @@
+import client from './client';
+
+export const getCurrentRollingPaper = async (): Promise<RollingPaperInformation> => {
+  const {
+    data: { data },
+  } = await client.get('/api/event-posts');
+  return data;
+};
+
+export const getRollingPaperDetail = async (
+  rollingPaperId: string | number,
+): Promise<RollingPaper> => {
+  const {
+    data: { data },
+  } = await client.get(`/api/event-posts/${rollingPaperId}`);
+  return data;
+};
+
+export const postRollingPaperComment = async (rollingPaperId: string | number, content: string) => {
+  const {
+    data: { data },
+  } = await client.post(`/api/event-posts/${rollingPaperId}/comments`, {
+    content,
+  });
+  return data;
+};
+
+export const deleteRollingPaperComment = async (commentId: string | number) => {
+  try {
+    const {
+      data: { data },
+    } = await client.delete(`/api/event-posts/comments/${commentId}`);
+    return data;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+};
diff --git a/src/assets/images/letter-pink.png b/src/assets/images/letter-pink.png
deleted file mode 100644
index ba26e54..0000000
Binary files a/src/assets/images/letter-pink.png and /dev/null differ
diff --git a/src/assets/images/memo-pink.png b/src/assets/images/memo-pink.png
deleted file mode 100644
index 37b61b2..0000000
Binary files a/src/assets/images/memo-pink.png and /dev/null differ
diff --git a/src/assets/images/memo-yellow.png b/src/assets/images/memo-yellow.png
deleted file mode 100644
index 3705688..0000000
Binary files a/src/assets/images/memo-yellow.png and /dev/null differ
diff --git a/src/assets/images/modal-pink.png b/src/assets/images/modal-pink.png
deleted file mode 100644
index 746112f..0000000
Binary files a/src/assets/images/modal-pink.png and /dev/null differ
diff --git a/src/assets/images/modal-yellow.png b/src/assets/images/modal-yellow.png
deleted file mode 100644
index 1c78c32..0000000
Binary files a/src/assets/images/modal-yellow.png and /dev/null differ
diff --git a/src/assets/images/random-cheer-bird.png b/src/assets/images/random-cheer-bird.png
deleted file mode 100644
index 93de5ec..0000000
Binary files a/src/assets/images/random-cheer-bird.png and /dev/null differ
diff --git a/src/components/ConfirmModal.tsx b/src/components/ConfirmModal.tsx
index f4a94f5..2b4f8aa 100644
--- a/src/components/ConfirmModal.tsx
+++ b/src/components/ConfirmModal.tsx
@@ -1,6 +1,4 @@
-import ModalBg from '@/assets/images/modal-yellow.png';
-
-import BackgroundImageWrapper from './BackgroundImageWrapper';
+import ModalBackgroundWrapper from './ModalBackgroundWrapper';
 import ModalOverlay from './ModalOverlay';
 
 interface ConfirmModalProps {
@@ -28,13 +26,13 @@ const ConfirmModal = ({
   return (
     <ModalOverlay>
       <div className="w-73">
-        <BackgroundImageWrapper as="section" className="mb-12 rounded-lg p-5" imageUrl={ModalBg}>
+        <ModalBackgroundWrapper className="relative mb-12 rounded-lg p-5">
           <div className="flex flex-col gap-1">
             <p className="body-m text-gray-80">{title}</p>
             <p className="caption-r text-black">{description}</p>
           </div>
           {children}
-        </BackgroundImageWrapper>
+        </ModalBackgroundWrapper>
         <section className="flex items-center gap-6">
           <button
             type="button"
diff --git a/src/components/ListItemWrapper.tsx b/src/components/LetterWrapper.tsx
similarity index 67%
rename from src/components/ListItemWrapper.tsx
rename to src/components/LetterWrapper.tsx
index 3bcb1d5..365a8b2 100644
--- a/src/components/ListItemWrapper.tsx
+++ b/src/components/LetterWrapper.tsx
@@ -1,23 +1,18 @@
 import { twMerge } from 'tailwind-merge';
 
-interface ListItemWrapperProps {
+interface LetterWrapperProps {
   isSender?: boolean;
   className?: string;
   children: React.ReactNode;
   onClick?: (e: React.MouseEvent<HTMLElement>) => void;
 }
 
-const ListItemWrapper = ({
-  isSender = false,
-  className,
-  children,
-  onClick,
-}: ListItemWrapperProps) => {
+const LetterWrapper = ({ isSender = false, className, children, onClick }: LetterWrapperProps) => {
   return (
     <article
       className={twMerge(
         'relative flex overflow-hidden rounded-sm p-4',
-        isSender ? 'list-sender-bg' : 'list-receiver-bg',
+        isSender ? 'letter-sender-bg' : 'letter-receiver-bg',
         className,
       )}
       onClick={onClick}
@@ -28,4 +23,4 @@ const ListItemWrapper = ({
   );
 };
 
-export default ListItemWrapper;
+export default LetterWrapper;
diff --git a/src/components/MemoWrapper.tsx b/src/components/MemoWrapper.tsx
new file mode 100644
index 0000000..2179251
--- /dev/null
+++ b/src/components/MemoWrapper.tsx
@@ -0,0 +1,31 @@
+import { twMerge } from 'tailwind-merge';
+
+interface MemoWrapperProps {
+  isSender?: boolean;
+  className?: string;
+  children: React.ReactNode;
+  onClick?: (e: React.MouseEvent<HTMLElement>) => void;
+}
+
+const MemoWrapper = ({ isSender = false, className, children, onClick }: MemoWrapperProps) => {
+  return (
+    <article
+      className={twMerge(
+        'relative flex overflow-hidden p-4',
+        isSender ? 'memo-sender-bg' : 'letter-receiver-bg',
+        className,
+      )}
+      onClick={onClick}
+    >
+      <div className="z-10 w-full">{children}</div>
+      <div
+        className={twMerge(
+          'absolute inset-0 z-0 blur-xl',
+          isSender ? 'bg-white/50' : 'bg-white/70',
+        )}
+      />
+    </article>
+  );
+};
+
+export default MemoWrapper;
diff --git a/src/components/MessageModal.tsx b/src/components/MessageModal.tsx
index 414c20f..05e9395 100644
--- a/src/components/MessageModal.tsx
+++ b/src/components/MessageModal.tsx
@@ -1,8 +1,5 @@
 import { ChangeEvent } from 'react';
 
-import ModalBg from '@/assets/images/modal-pink.png';
-
-import BackgroundImageWrapper from './BackgroundImageWrapper';
 import ModalOverlay from './ModalOverlay';
 import TextareaField from './TextareaField';
 
@@ -32,15 +29,16 @@ const MessageModal = ({
   return (
     <ModalOverlay>
       <p className="body-sb mb-4 text-center text-white">{description}</p>
-      <BackgroundImageWrapper as="section" className="mb-12 w-78 rounded-lg p-4" imageUrl={ModalBg}>
+      <section className="relative mb-12 w-78 overflow-hidden rounded-lg bg-[#FFD3CE] p-4">
         <TextareaField
           rows={5}
           value={inputValue}
           placeholder={placeholder}
           onChange={onInputChange}
         />
-        {children}
-      </BackgroundImageWrapper>
+        <div className="relative z-1">{children}</div>
+        <div className="absolute inset-0 z-0 bg-white/60 blur-xl" />
+      </section>
       <section className="flex items-center gap-6">
         <button
           type="button"
diff --git a/src/components/ModalBackgroundWrapper.tsx b/src/components/ModalBackgroundWrapper.tsx
new file mode 100644
index 0000000..0982a97
--- /dev/null
+++ b/src/components/ModalBackgroundWrapper.tsx
@@ -0,0 +1,17 @@
+import { twMerge } from 'tailwind-merge';
+
+interface ModalBackgroundWrapperProps {
+  className?: string;
+  children: React.ReactNode;
+}
+
+const ModalBackgroundWrapper = ({ className, children }: ModalBackgroundWrapperProps) => {
+  return (
+    <article className={twMerge('bg-primary-3 relative overflow-hidden', className)}>
+      <div className="relative z-1">{children}</div>
+      <div className="absolute inset-0 z-0 bg-white/70 blur-xl" />
+    </article>
+  );
+};
+
+export default ModalBackgroundWrapper;
diff --git a/src/components/NoticeRolling.tsx b/src/components/NoticeRolling.tsx
deleted file mode 100644
index 7390f75..0000000
--- a/src/components/NoticeRolling.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Link } from 'react-router';
-import { twMerge } from 'tailwind-merge';
-
-import { NoticeIcon } from '@/assets/icons';
-
-const DUMMY_CONTENT =
-  '11월 15일은 수능! 고생하는 수험생들을 위해 응원의 11월 15일은 수능! 고생하는 수험 11월 15일은 수능! 고생하는 수험';
-
-const NoticeRolling = () => {
-  return (
-    <Link to="/board/rolling/1">
-      <article
-        className={twMerge(
-          'text-gray-60 flex w-full items-center gap-2.5 rounded-lg px-4 py-2',
-          'bg-linear-[275deg,rgba(255,255,255,0.4)_13.74%,rgba(238,238,238,0.4)_67.61%]',
-          'shadow-[0_1px_6px_rgba(218,189,74,0.8)]',
-        )}
-      >
-        <NoticeIcon className="h-6 w-6 text-gray-50" />
-        <p className="body-sb line-clamp-1">{DUMMY_CONTENT}</p>
-      </article>
-    </Link>
-  );
-};
-
-export default NoticeRolling;
diff --git a/src/components/NoticeRollingPaper.tsx b/src/components/NoticeRollingPaper.tsx
new file mode 100644
index 0000000..b495b0e
--- /dev/null
+++ b/src/components/NoticeRollingPaper.tsx
@@ -0,0 +1,34 @@
+import { useQuery } from '@tanstack/react-query';
+import { Link } from 'react-router';
+import { twMerge } from 'tailwind-merge';
+
+import { getCurrentRollingPaper } from '@/apis/rolling';
+import { NoticeIcon } from '@/assets/icons';
+
+const NoticeRollingPaper = () => {
+  const { data } = useQuery({
+    queryKey: ['notice-rolling-paper'],
+    queryFn: () => getCurrentRollingPaper(),
+  });
+
+  const noticeText = data?.title;
+
+  return (
+    <Link to={`/board/rolling/${data?.eventPostId}`}>
+      <article
+        className={twMerge(
+          'text-gray-60 flex w-full items-center gap-2.5 rounded-lg px-4 py-2',
+          'bg-linear-[275deg,rgba(255,255,255,0.4)_13.74%,rgba(238,238,238,0.4)_67.61%]',
+          'shadow-[0_1px_6px_rgba(218,189,74,0.8)]',
+        )}
+      >
+        <NoticeIcon className="h-6 w-6 shrink-0 text-gray-50" />
+        <div className="w-full overflow-hidden">
+          <p className="body-sb animate-marquee whitespace-nowrap">{noticeText}</p>
+        </div>
+      </article>
+    </Link>
+  );
+};
+
+export default NoticeRollingPaper;
diff --git a/src/components/ResultLetter.tsx b/src/components/ResultLetter.tsx
index 635ecd1..2ffeb77 100644
--- a/src/components/ResultLetter.tsx
+++ b/src/components/ResultLetter.tsx
@@ -1,7 +1,7 @@
-import letterPink from '@/assets/images/letter-pink.png';
-
 import { CATEGORYS } from '../pages/Write/constants';
 
+import LetterWrapper from './LetterWrapper';
+
 export default function ResultLetter({
   categoryName = 'CONSOLATION',
   title,
@@ -14,32 +14,29 @@ export default function ResultLetter({
   const today = `${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일`;
 
   return (
-    <div
-      className="flex w-full max-w-[300px] flex-col gap-[35px] p-4"
-      style={{ backgroundImage: `url(${letterPink})` }}
-    >
-      <div className="flex justify-between gap-3">
-        <div className="flex flex-col gap-2.5">
-          <span className="caption-b text-gray-60">따숨이님께</span>
-          <span className="caption-r text-gray-80 line-clamp-3 break-all">{title}</span>
+    <LetterWrapper>
+      <div className="flex w-full flex-col gap-[35px]">
+        <div className="flex justify-between gap-3">
+          <div className="flex flex-col gap-2.5">
+            <span className="caption-b text-gray-60">따숨이님께</span>
+            <span className="caption-r text-gray-80 line-clamp-3 break-all">{title}</span>
+          </div>
+          <img src={CATEGORYS[categoryName]} alt="우표" />
         </div>
-        <img src={CATEGORYS[categoryName]} alt="우표" />
-      </div>
-      <div className="flex flex-col gap-[5px]">
-        <span className="caption-sb text-gray-60">{today}</span>
-        <div className="flex gap-1">
-          {address.split('').map((spell, idx) => {
-            return (
+        <div className="flex flex-col gap-[5px]">
+          <span className="caption-sb text-gray-60">{today}</span>
+          <div className="flex gap-1">
+            {address.split('').map((spell, idx) => (
               <span
                 className="caption-r flex h-6 w-6 items-center justify-center rounded-sm bg-white/40"
                 key={idx}
               >
                 {spell}
               </span>
-            );
-          })}
+            ))}
+          </div>
         </div>
       </div>
-    </div>
+    </LetterWrapper>
   );
 }
diff --git a/src/components/TextareaField.tsx b/src/components/TextareaField.tsx
index 1268574..cd21291 100644
--- a/src/components/TextareaField.tsx
+++ b/src/components/TextareaField.tsx
@@ -2,7 +2,7 @@ import { ComponentPropsWithoutRef } from 'react';
 
 const TextareaField = ({ ...props }: ComponentPropsWithoutRef<'textarea'>) => {
   return (
-    <div className="w-full rounded-sm bg-white px-3 py-1.5">
+    <div className="relative z-1 w-full rounded-sm bg-white px-3 py-1.5">
       <textarea
         className="body-m placeholder:text-gray-30 text-gray-80 w-full resize-none bg-transparent"
         {...props}
diff --git a/src/main.tsx b/src/main.tsx
index c108559..4df6fa6 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -7,6 +7,12 @@ import App from './App';
 import './styles/index.css';
 
 const queryClient = new QueryClient();
+queryClient.setDefaultOptions({
+  queries: {
+    staleTime: 1000 * 60 * 5, // 5분
+    gcTime: 1000 * 60 * 60, // 1시간
+  },
+});
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
diff --git a/src/pages/Home/components/RandomCheer.tsx b/src/pages/Home/components/RandomCheer.tsx
index d0c4668..73bce3d 100644
--- a/src/pages/Home/components/RandomCheer.tsx
+++ b/src/pages/Home/components/RandomCheer.tsx
@@ -1,6 +1,8 @@
 import { useState } from 'react';
+
+import randomCheerBird from '@/assets/images/field-theme-asset-bird.png';
+
 import { RANDOM_CHEER_LIST } from '../constants';
-import randomCheerBird from '@/assets/images/random-cheer-bird.png';
 
 const RandomCheer = () => {
   const getRandomCheer = (): string => {
diff --git a/src/pages/Home/components/ShowDraftModal.tsx b/src/pages/Home/components/ShowDraftModal.tsx
index 8028cfa..b067711 100644
--- a/src/pages/Home/components/ShowDraftModal.tsx
+++ b/src/pages/Home/components/ShowDraftModal.tsx
@@ -1,8 +1,8 @@
+import DeleteOutlineRoundedIcon from '@mui/icons-material/DeleteOutlineRounded';
 import React from 'react';
-import ModalBg from '@/assets/images/modal-yellow.png';
-import ModalOverlay from '@/components/ModalOverlay';
 
-import DeleteOutlineRoundedIcon from '@mui/icons-material/DeleteOutlineRounded';
+import ModalBackgroundWrapper from '@/components/ModalBackgroundWrapper';
+import ModalOverlay from '@/components/ModalOverlay';
 
 interface ShowDraftModalProps {
   children?: React.ReactNode;
@@ -24,8 +24,7 @@ const ShowDraftModal = ({ onClose }: ShowDraftModalProps) => {
           임시저장된 편지가 있어요!
         </p>
         <div className="flex w-73 justify-center">
-          <section className="relative overflow-hidden rounded-lg p-5">
-            <img src={ModalBg} className="absolute inset-0 z-[-10] h-full w-full" />
+          <ModalBackgroundWrapper className="relative overflow-hidden rounded-lg p-5">
             <div className="flex flex-col gap-1">
               <p className="body-sb text-gray-80">임시저장 편지</p>
               <p className="caption-r text-black">로그아웃 시 임시 저장된 편지는 사라집니다</p>
@@ -43,7 +42,7 @@ const ShowDraftModal = ({ onClose }: ShowDraftModalProps) => {
                 </div>
               ))}
             </div>
-          </section>
+          </ModalBackgroundWrapper>
         </div>
       </div>
     </ModalOverlay>
diff --git a/src/pages/Home/components/ShowIncomingLettersModal.tsx b/src/pages/Home/components/ShowIncomingLettersModal.tsx
index aa1c7ab..376d021 100644
--- a/src/pages/Home/components/ShowIncomingLettersModal.tsx
+++ b/src/pages/Home/components/ShowIncomingLettersModal.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import ModalBg from '@/assets/images/modal-yellow.png';
+
+import ModalBackgroundWrapper from '@/components/ModalBackgroundWrapper';
 import ModalOverlay from '@/components/ModalOverlay';
 
 interface ShowIncomingLettersModalProps {
@@ -22,8 +23,7 @@ const ShowIncomingLettersModal = ({ onClose }: ShowIncomingLettersModalProps) =>
           따숨 배달부가 따숨이의 답장을 배달 중이에요!
         </p>
         <div className="flex w-73 justify-center">
-          <section className="relative overflow-hidden rounded-lg p-5">
-            <img src={ModalBg} className="absolute inset-0 z-[-10] h-full w-full" />
+          <ModalBackgroundWrapper className="relative overflow-hidden rounded-lg p-5">
             <div className="flex flex-col gap-1">
               <p className="body-sb text-gray-80">오고 있는 편지</p>
               <p className="caption-r text-black">시간은 실제 시간을 기반으로 책정됩니다.</p>
@@ -39,7 +39,7 @@ const ShowIncomingLettersModal = ({ onClose }: ShowIncomingLettersModalProps) =>
                 </div>
               ))}
             </div>
-          </section>
+          </ModalBackgroundWrapper>
         </div>
       </div>
     </ModalOverlay>
diff --git a/src/pages/Home/components/ShowShareAccessModal.tsx b/src/pages/Home/components/ShowShareAccessModal.tsx
index 504a460..21d6c98 100644
--- a/src/pages/Home/components/ShowShareAccessModal.tsx
+++ b/src/pages/Home/components/ShowShareAccessModal.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import ModalBg from '@/assets/images/modal-yellow.png';
-import ModalOverlay from '@/components/ModalOverlay';
 import { useNavigate } from 'react-router';
 
+import ModalBackgroundWrapper from '@/components/ModalBackgroundWrapper';
+import ModalOverlay from '@/components/ModalOverlay';
+
 interface ShowShareAccessModalProps {
   children?: React.ReactNode;
   onClose: () => void;
@@ -30,8 +31,7 @@ const ShowShareAccessModal = ({ onClose }: ShowShareAccessModalProps) => {
           공유 요청이 왔어요!
         </p>
         <div className="flex w-73 justify-center">
-          <section className="relative overflow-hidden rounded-lg p-5">
-            <img src={ModalBg} className="absolute inset-0 z-[-10] h-full w-full" />
+          <ModalBackgroundWrapper className="relative overflow-hidden rounded-lg p-5">
             <div className="flex flex-col gap-1">
               <p className="body-sb text-gray-80">게시판 공유 승인하기</p>
               <p className="caption-r text-black">
@@ -50,7 +50,7 @@ const ShowShareAccessModal = ({ onClose }: ShowShareAccessModalProps) => {
                 </button>
               ))}
             </div>
-          </section>
+          </ModalBackgroundWrapper>
         </div>
       </div>
     </ModalOverlay>
diff --git a/src/pages/Home/components/SpecialLetterBanner.tsx b/src/pages/Home/components/SpecialLetterBanner.tsx
deleted file mode 100644
index 9994763..0000000
--- a/src/pages/Home/components/SpecialLetterBanner.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import CampaignOutlinedIcon from '@mui/icons-material/CampaignOutlined';
-
-const SpecialLetterBanner = () => {
-  const DUMMY_SPECIAL_LETTER_BANNER =
-    '11월 15일은 수능! 고생하는 수험생들을 위해 응원의 편지를 적어주세요!';
-
-  return (
-    <div className="absolute top-[55px] flex w-full max-w-[600px] justify-center">
-      <div className="body-sb text-gray-60 flex w-[80vw] items-center gap-[10px] overflow-hidden rounded-lg border border-[#F7E7A9] bg-gradient-to-r from-white/40 via-[#EEEEEE]/40 to-[#EEEEEE]/40 px-2 py-2 shadow-md">
-        <div className="flex items-center justify-center">
-          <CampaignOutlinedIcon />
-        </div>
-        <div className="flex-1 overflow-hidden">
-          <span className="animate-marquee block whitespace-nowrap">
-            {DUMMY_SPECIAL_LETTER_BANNER}
-          </span>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default SpecialLetterBanner;
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index e66481f..fee0eb5 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,20 +1,23 @@
-import HomeLeft from './components/HomeLeft';
-import HomeRight from './components/HomeRight';
-import HomeHeader from './components/HomeHeader';
-import SpecialLetterBanner from './components/SpecialLetterBanner';
-import LetterActions from './components/LetterActions';
 import HomeButton from '@/components/HomeButton';
+import NoticeRollingPaper from '@/components/NoticeRollingPaper';
+import useViewport from '@/hooks/useViewport';
+
 import HomeBackgroundLeft from './components/HomeBackgroundLeft';
 import HomeBackgroundRightBottom from './components/HomeBackgroundRightBottom';
 import HomeBackgroundRightTop from './components/HomeBackgroundRightTop';
-import useViewport from '@/hooks/useViewport';
+import HomeHeader from './components/HomeHeader';
+import HomeLeft from './components/HomeLeft';
+import HomeRight from './components/HomeRight';
+import LetterActions from './components/LetterActions';
 
 const HomePage = () => {
   useViewport();
   return (
     <div className="relative h-[calc(var(--vh)*100)] w-full overflow-hidden">
       <HomeHeader />
-      <SpecialLetterBanner />
+      <div className="absolute top-[55px] z-1 w-full px-5">
+        <NoticeRollingPaper />
+      </div>
       <LetterActions />
 
       <div className="flex h-full w-screen snap-x snap-mandatory flex-nowrap overflow-x-auto overflow-y-hidden bg-cover">
diff --git a/src/pages/LetterBoard/components/LetterPreview.tsx b/src/pages/LetterBoard/components/LetterPreview.tsx
index d59a839..e980e5e 100644
--- a/src/pages/LetterBoard/components/LetterPreview.tsx
+++ b/src/pages/LetterBoard/components/LetterPreview.tsx
@@ -1,7 +1,6 @@
 import { Link } from 'react-router';
 
-import PinkLetterBg from '@/assets/images/letter-pink.png';
-import BackgroundImageWrapper from '@/components/BackgroundImageWrapper';
+import LetterWrapper from '@/components/LetterWrapper';
 
 interface LetterPreviewProps {
   id: string;
@@ -13,15 +12,13 @@ interface LetterPreviewProps {
 const LetterPreview = ({ id, to, from, content }: LetterPreviewProps) => {
   return (
     <Link to={id}>
-      <BackgroundImageWrapper
-        as="article"
-        className="caption-r flex flex-col gap-2 rounded-sm px-3 py-2"
-        imageUrl={PinkLetterBg}
-      >
-        <p>From.{from}</p>
-        <p className="line-clamp-2 font-light">{content}</p>
-        <p className="place-self-end">To.{to}</p>
-      </BackgroundImageWrapper>
+      <LetterWrapper className="px-3 py-2">
+        <div className="caption-r flex flex-col gap-2">
+          <p>From.{from}</p>
+          <p className="line-clamp-2 font-light">{content}</p>
+          <p className="place-self-end">To.{to}</p>
+        </div>
+      </LetterWrapper>
     </Link>
   );
 };
diff --git a/src/pages/LetterBoard/index.tsx b/src/pages/LetterBoard/index.tsx
index 52c04b8..4c5739b 100644
--- a/src/pages/LetterBoard/index.tsx
+++ b/src/pages/LetterBoard/index.tsx
@@ -1,7 +1,7 @@
 import { twMerge } from 'tailwind-merge';
 
 import BackgroundBottom from '@/components/BackgroundBottom';
-import NoticeRolling from '@/components/NoticeRolling';
+import NoticeRollingPaper from '@/components/NoticeRollingPaper';
 import PageTitle from '@/components/PageTitle';
 
 import LetterPreview from './components/LetterPreview';
@@ -11,19 +11,14 @@ const LetterBoardPage = () => {
 
   return (
     <>
-      <main
-        className={twMerge(
-          'flex grow flex-col items-center px-5 pt-20 pb-10',
-          !isMyBoard && 'mt-[-25px]',
-        )}
-      >
+      <main className={twMerge('flex grow flex-col px-5 pt-20 pb-10', !isMyBoard && 'mt-[-25px]')}>
         {isMyBoard ? (
-          <PageTitle className="mb-11">내가 올린 게시물</PageTitle>
+          <PageTitle className="mx-auto mb-11">내가 올린 게시물</PageTitle>
         ) : (
           <>
-            <NoticeRolling />
-            <PageTitle className="mt-4">게시판</PageTitle>
-            <p className="text-gray-60 caption-m mt-4.5">
+            <NoticeRollingPaper />
+            <PageTitle className="mx-auto mt-4">게시판</PageTitle>
+            <p className="text-gray-60 caption-m mt-4.5 text-center">
               따숨이에게 힘이 되었던 다양한 편지들을 모아두었어요
             </p>
           </>
diff --git a/src/pages/LetterBoardDetail/components/Letter.tsx b/src/pages/LetterBoardDetail/components/Letter.tsx
index 52b0989..c279b76 100644
--- a/src/pages/LetterBoardDetail/components/Letter.tsx
+++ b/src/pages/LetterBoardDetail/components/Letter.tsx
@@ -1,6 +1,4 @@
-import PinkMemoBg from '@/assets/images/memo-pink.png';
-import YellowMemoBg from '@/assets/images/memo-yellow.png';
-import BackgroundImageWrapper from '@/components/BackgroundImageWrapper';
+import MemoWrapper from '@/components/MemoWrapper';
 
 interface LetterProps {
   letter: {
@@ -13,15 +11,13 @@ interface LetterProps {
 
 const Letter = ({ letter, isSender = false }: LetterProps) => {
   return (
-    <BackgroundImageWrapper
-      as="article"
-      className="flex flex-col gap-2 p-4 text-black"
-      imageUrl={isSender ? PinkMemoBg : YellowMemoBg}
-    >
-      <p className="body-sb">To. {letter.receiver}</p>
-      <p className="body-r leading-[26px] whitespace-pre-wrap">{letter.content}</p>
-      <p className="body-m place-self-end">From. {letter.sender}</p>
-    </BackgroundImageWrapper>
+    <MemoWrapper isSender={isSender}>
+      <div className="flex flex-col gap-2 text-black">
+        <p className="body-sb">To. {letter.receiver}</p>
+        <p className="body-r leading-[26px] whitespace-pre-wrap">{letter.content}</p>
+        <p className="body-m place-self-end">From. {letter.sender}</p>
+      </div>
+    </MemoWrapper>
   );
 };
 
diff --git a/src/pages/LetterBoxDetail/components/LetterPreview.tsx b/src/pages/LetterBoxDetail/components/LetterPreview.tsx
index 1650c97..4737242 100644
--- a/src/pages/LetterBoxDetail/components/LetterPreview.tsx
+++ b/src/pages/LetterBoxDetail/components/LetterPreview.tsx
@@ -1,6 +1,6 @@
 import { useNavigate } from 'react-router';
 
-import ListItemWrapper from '@/components/ListItemWrapper';
+import LetterWrapper from '@/components/LetterWrapper';
 
 interface LetterPreviewProps {
   id: number;
@@ -39,7 +39,7 @@ const LetterPreview = ({
 
   if (isShareMode)
     return (
-      <ListItemWrapper isSender={isSend}>
+      <LetterWrapper isSender={isSend}>
         <div className="mb-3 flex items-center justify-between">
           <p className="body-r text-gray-80">{date}</p>
           <label htmlFor={`${id}`} className="relative">
@@ -54,14 +54,14 @@ const LetterPreview = ({
           </label>
         </div>
         <p className="body-m text-gray-80 line-clamp-1 break-all">{title}</p>
-      </ListItemWrapper>
+      </LetterWrapper>
     );
 
   return (
-    <ListItemWrapper isSender={isSend} onClick={() => handleItemClick(id)}>
+    <LetterWrapper isSender={isSend} onClick={() => handleItemClick(id)}>
       <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>
-    </ListItemWrapper>
+    </LetterWrapper>
   );
 };
 
diff --git a/src/pages/Notifications/components/NotificationItem.tsx b/src/pages/Notifications/components/NotificationItem.tsx
index b65523a..ff9428e 100644
--- a/src/pages/Notifications/components/NotificationItem.tsx
+++ b/src/pages/Notifications/components/NotificationItem.tsx
@@ -1,4 +1,4 @@
-import ListItemWrapper from '@/components/ListItemWrapper';
+import LetterWrapper from '@/components/LetterWrapper';
 
 import { NOTIFICATION_ICON } from '../constants';
 
@@ -18,13 +18,13 @@ const NotificationItem = ({ type, message, isRead, onClick }: NotificationItemPr
   };
 
   return (
-    <ListItemWrapper isSender={type === 'warning'} onClick={handleClick}>
+    <LetterWrapper isSender={type === 'warning'} onClick={handleClick}>
       <div className="flex items-center gap-3">
         {isRead && <div className="absolute inset-0 z-10 bg-white/60" />}
         <Icon className="z-0 h-6 w-6 text-white" />
         <p className="body-m text-gray-80 z-0">{message}</p>
       </div>
-    </ListItemWrapper>
+    </LetterWrapper>
   );
 };
 
diff --git a/src/pages/RollingPaper/components/Comment.tsx b/src/pages/RollingPaper/components/Comment.tsx
new file mode 100644
index 0000000..c136f7f
--- /dev/null
+++ b/src/pages/RollingPaper/components/Comment.tsx
@@ -0,0 +1,19 @@
+import MemoWrapper from '@/components/MemoWrapper';
+
+interface CommentProps {
+  comment: RollingPaperComment;
+  onClick: () => void;
+}
+
+const Comment = ({ comment, onClick }: CommentProps) => {
+  return (
+    <MemoWrapper className="cursor-pointer text-black" onClick={onClick}>
+      <div className="z-1 h-full w-full">
+        <p className="caption-r whitespace-pre-wrap">{comment.content}</p>
+        <p className="caption-m mt-1 place-self-end">From. {comment.zipCode}</p>
+      </div>
+    </MemoWrapper>
+  );
+};
+
+export default Comment;
diff --git a/src/pages/RollingPaper/components/CommentDetailModal.tsx b/src/pages/RollingPaper/components/CommentDetailModal.tsx
new file mode 100644
index 0000000..4769892
--- /dev/null
+++ b/src/pages/RollingPaper/components/CommentDetailModal.tsx
@@ -0,0 +1,32 @@
+import MemoWrapper from '@/components/MemoWrapper';
+import ModalOverlay from '@/components/ModalOverlay';
+
+interface CommentDetailModalProps {
+  comment: RollingPaperComment;
+  isWriter: boolean;
+  onClose: () => void;
+  onDelete: () => void;
+}
+
+const CommentDetailModal = ({ comment, isWriter, onClose, onDelete }: CommentDetailModalProps) => {
+  return (
+    <ModalOverlay closeOnOutsideClick onClose={onClose}>
+      <>
+        {isWriter && (
+          <button type="button" className="body-b ml-auto text-white" onClick={onDelete}>
+            삭제하기
+          </button>
+        )}
+
+        <MemoWrapper className="mt-1 flex max-h-1/2 w-78 overflow-y-auto px-5 text-black">
+          <div className="z-1 flex flex-col gap-3">
+            <p className="body-r leading-[26px]">{comment.content}</p>
+            <p className="body-m place-self-end">From. {comment.zipCode}</p>
+          </div>
+        </MemoWrapper>
+      </>
+    </ModalOverlay>
+  );
+};
+
+export default CommentDetailModal;
diff --git a/src/pages/RollingPaper/components/Message.tsx b/src/pages/RollingPaper/components/Message.tsx
deleted file mode 100644
index 8e3bc81..0000000
--- a/src/pages/RollingPaper/components/Message.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import MessageBg from '@/assets/images/memo-pink.png';
-import BackgroundImageWrapper from '@/components/BackgroundImageWrapper';
-
-interface MessageProps {
-  message: {
-    content: string;
-    sender: string;
-  };
-  onClick: () => void;
-}
-
-const Message = ({ message, onClick }: MessageProps) => {
-  return (
-    <BackgroundImageWrapper
-      as="article"
-      className="flex min-h-20 cursor-pointer flex-col p-4 text-black"
-      imageUrl={MessageBg}
-      onClick={onClick}
-    >
-      <p className="caption-r whitespace-pre-wrap">{message.content}</p>
-      <p className="caption-m mt-1 place-self-end">From. {message.sender}</p>
-    </BackgroundImageWrapper>
-  );
-};
-
-export default Message;
diff --git a/src/pages/RollingPaper/components/MessageDetailModal.tsx b/src/pages/RollingPaper/components/MessageDetailModal.tsx
deleted file mode 100644
index 1d1508f..0000000
--- a/src/pages/RollingPaper/components/MessageDetailModal.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import ModalBg from '@/assets/images/memo-pink.png';
-import BackgroundImageWrapper from '@/components/BackgroundImageWrapper';
-import ModalOverlay from '@/components/ModalOverlay';
-
-interface MessageDetailModalProps {
-  message: {
-    content: string;
-    sender: string;
-  };
-  isWriter: boolean;
-  onClose: () => void;
-  onReport: () => void;
-  onDelete: () => void;
-}
-
-const MessageDetailModal = ({
-  message,
-  isWriter,
-  onClose,
-  onReport,
-  onDelete,
-}: MessageDetailModalProps) => {
-  const handleButtonClick = () => {
-    if (isWriter) {
-      // TODO: 삭제 로직
-      onDelete();
-    } else {
-      onReport();
-    }
-  };
-
-  return (
-    <ModalOverlay closeOnOutsideClick onClose={onClose}>
-      <>
-        <button type="button" className="body-b ml-auto text-white" onClick={handleButtonClick}>
-          {isWriter ? '삭제하기' : '신고하기'}
-        </button>
-        <BackgroundImageWrapper
-          as="article"
-          className="mt-1 flex max-h-1/2 w-78 flex-col gap-3 overflow-y-auto px-5 py-4 text-black"
-          imageUrl={ModalBg}
-        >
-          <p className="body-r leading-[26px]">{message.content}</p>
-          <p className="body-m place-self-end">From. {message.sender}</p>
-        </BackgroundImageWrapper>
-      </>
-    </ModalOverlay>
-  );
-};
-
-export default MessageDetailModal;
diff --git a/src/pages/RollingPaper/components/WriteCommentButton.tsx b/src/pages/RollingPaper/components/WriteCommentButton.tsx
new file mode 100644
index 0000000..201037f
--- /dev/null
+++ b/src/pages/RollingPaper/components/WriteCommentButton.tsx
@@ -0,0 +1,79 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
+
+import { postRollingPaperComment } from '@/apis/rolling';
+import EnvelopeImg from '@/assets/images/closed-letter.png';
+import MessageModal from '@/components/MessageModal';
+
+const DUMMY_USER_ZIP_CODE = '1DR41';
+
+interface WriteCommentButtonProps {
+  rollingPaperId: string;
+}
+
+const WriteCommentButton = ({ rollingPaperId }: WriteCommentButtonProps) => {
+  const [activeMessageModal, setActiveMessageModal] = useState(false);
+  const [newMessage, setNewMessage] = useState('');
+  const [error, setError] = useState<string | null>(null);
+  const queryClient = useQueryClient();
+
+  const { mutate } = useMutation({
+    mutationFn: (content: string) => postRollingPaperComment(rollingPaperId, content),
+    onSuccess: (data) => {
+      console.log(data);
+      queryClient.invalidateQueries({ queryKey: ['rolling-paper', rollingPaperId] });
+      setNewMessage('');
+      setError(null);
+      setActiveMessageModal(false);
+    },
+    onError: () => {
+      setError('편지 작성에 실패했어요. 다시 시도해주세요.');
+    },
+  });
+
+  const handleChangeMessage = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setNewMessage(e.target.value);
+  };
+
+  const handleAddComment = () => {
+    console.log(rollingPaperId);
+    // 추가 가능한지 조건 확인
+    if (newMessage.trim() === '') {
+      setError('편지를 작성해주세요.');
+      return;
+    }
+
+    mutate(newMessage.trim());
+  };
+
+  return (
+    <>
+      {activeMessageModal && (
+        <MessageModal
+          inputValue={newMessage}
+          placeholder="이곳을 눌러 메시지를 작성해주세요"
+          cancelText="취소하기"
+          completeText="편지 남기기"
+          onInputChange={handleChangeMessage}
+          onCancel={() => setActiveMessageModal(false)}
+          onComplete={handleAddComment}
+        >
+          <p className="body-r text-accent-1 mt-1">{error}</p>
+          <p className="body-r mt-5 text-end text-black">From. {DUMMY_USER_ZIP_CODE}</p>
+        </MessageModal>
+      )}
+      <button
+        type="button"
+        className="fixed bottom-7.5 left-5 overflow-hidden rounded-sm"
+        onClick={() => setActiveMessageModal(true)}
+      >
+        <img src={EnvelopeImg} alt="편지지 이미지" className="h-12 w-auto opacity-70" />
+        <p className="caption-sb absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-nowrap text-white">
+          편지 쓰기
+        </p>
+      </button>
+    </>
+  );
+};
+
+export default WriteCommentButton;
diff --git a/src/pages/RollingPaper/index.tsx b/src/pages/RollingPaper/index.tsx
index cc50b99..6bcc9e6 100644
--- a/src/pages/RollingPaper/index.tsx
+++ b/src/pages/RollingPaper/index.tsx
@@ -1,91 +1,107 @@
 import { MasonryInfiniteGrid } from '@egjs/react-infinitegrid';
-import { ChangeEvent, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useState } from 'react';
+import { useParams } from 'react-router';
 
-import EnvelopeImg from '@/assets/images/closed-letter.png';
+import { deleteRollingPaperComment, getRollingPaperDetail } from '@/apis/rolling';
 import BackgroundBottom from '@/components/BackgroundBottom';
-import MessageModal from '@/components/MessageModal';
+import ConfirmModal from '@/components/ConfirmModal';
 import PageTitle from '@/components/PageTitle';
-import ReportModal from '@/components/ReportModal';
 import Header from '@/layouts/Header';
 
-import Message from './components/Message';
-import MessageDetailModal from './components/MessageDetailModal';
+import Comment from './components/Comment';
+import CommentDetailModal from './components/CommentDetailModal';
+import WriteCommentButton from './components/WriteCommentButton';
 
-const DUMMY_USER_ZIP_CODE = '22E12';
-const DUMMY_TITLE = '침수 피해를 복구중인 포스코 임직원 분들에게 응원의 메시지를 보내주세요!';
+// TODO: 로그인 구현 완료 시, 더미 완전히 제거
+const DUMMY_USER_ZIP_CODE = '1DR41';
 const DUMMY_MESSAGE_COUNT = 20;
-const DUMMY_MESSAGE = {
-  content:
-    '편지 내용 어쩌구저쩌구 뾰로롱 편지 내용 어쩌구저쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 저쩌구 끝~!!',
-  sender: '12E12',
-};
-const DUMMY_MESSAGES = Array.from({ length: 10 }, () => ({ ...DUMMY_MESSAGE }));
 
 const RollingPaperPage = () => {
-  const [activeMessageIndex, setActiveMessageIndex] = useState<number | null>(null);
-  const [activeReportModal, setActiveReportModal] = useState(false);
-  const [activeMessageModal, setActiveMessageModal] = useState(false);
-  const [newMessage, setNewMessage] = useState('');
+  const id = useParams().id ?? '';
+  const [activeComment, setActiveComment] = useState<RollingPaperComment | null>(null);
+  const [activeDetailModal, setActiveDetailModal] = useState(false);
+  const [activeDeleteModal, setActiveDeleteModal] = useState(false);
+  const queryClient = useQueryClient();
+
+  const { data } = useQuery({
+    queryKey: ['rolling-paper', id],
+    queryFn: () => getRollingPaperDetail(id),
+  });
 
-  const handleReport = () => {
-    setActiveMessageIndex(null);
-    setActiveReportModal(true);
-  };
+  const { mutate: deleteComment } = useMutation({
+    mutationFn: (rollingPaperId: number | string) => deleteRollingPaperComment(rollingPaperId),
+    onSuccess: (data) => {
+      queryClient.setQueryData(['rolling-paper', id], (oldData: RollingPaper) => {
+        if (!oldData) return oldData;
 
-  const handleDelete = () => {
-    setActiveMessageIndex(null);
-  };
+        return {
+          ...oldData,
+          eventPostComments: oldData.eventPostComments.filter(
+            (comment: RollingPaperComment) => comment.commentId !== data.commentId,
+          ),
+        };
+      });
 
-  const handleChangeMessage = (e: ChangeEvent<HTMLTextAreaElement>) => {
-    setNewMessage(e.target.value);
-  };
+      setActiveDeleteModal(false);
+      setActiveComment(null);
+    },
+    onError: (err) => {
+      console.error(err);
+    },
+  });
 
   return (
     <>
-      {activeMessageIndex !== null && (
-        <MessageDetailModal
-          message={DUMMY_MESSAGES[activeMessageIndex]}
-          isWriter={DUMMY_MESSAGES[activeMessageIndex].sender === DUMMY_USER_ZIP_CODE}
-          onClose={() => setActiveMessageIndex(null)}
-          onReport={handleReport}
-          onDelete={handleDelete}
+      {activeDetailModal && activeComment && (
+        <CommentDetailModal
+          comment={activeComment}
+          isWriter={activeComment.zipCode === DUMMY_USER_ZIP_CODE}
+          onClose={() => {
+            setActiveDetailModal(false);
+            setActiveComment(null);
+          }}
+          onDelete={() => {
+            setActiveDetailModal(false);
+            setActiveDeleteModal(true);
+          }}
         />
       )}
-      {activeReportModal && <ReportModal onClose={() => setActiveReportModal(false)} />}
-      {activeMessageModal && (
-        <MessageModal
-          inputValue={newMessage}
-          placeholder="이곳을 눌러 메시지를 작성해주세요"
-          cancelText="취소하기"
-          completeText="편지 남기기"
-          onInputChange={handleChangeMessage}
-          onCancel={() => setActiveMessageModal(false)}
-          onComplete={() => setActiveMessageModal(false)}
-        >
-          <p className="body-r mt-5 text-end text-black">From. {DUMMY_USER_ZIP_CODE}</p>
-        </MessageModal>
+      {activeDeleteModal && (
+        <ConfirmModal
+          title="정말 편지를 삭제하시겠어요?"
+          description="편지를 삭제하는 경우 복구가 불가능합니다!"
+          cancelText="되돌아가기"
+          confirmText="삭제하기"
+          onCancel={() => {
+            setActiveComment(null);
+            setActiveDeleteModal(false);
+          }}
+          onConfirm={() => {
+            if (activeComment) deleteComment(activeComment.commentId);
+          }}
+        />
       )}
       <Header />
       <main className="flex grow flex-col items-center px-5 pt-20 pb-12">
-        <PageTitle className="mb-18 max-w-73 text-center">{DUMMY_TITLE}</PageTitle>
+        <PageTitle className="mb-18 max-w-73 text-center">{data?.title}</PageTitle>
         <p className="body-sb text-gray-60 mb-2 w-full">등록된 편지 {DUMMY_MESSAGE_COUNT}</p>
         <section className="w-full">
           <MasonryInfiniteGrid column={2} align="stretch" gap={16}>
-            {DUMMY_MESSAGES.map((message, index) => (
-              <Message key={index} message={message} onClick={() => setActiveMessageIndex(index)} />
-            ))}
+            {data &&
+              data.eventPostComments.map((comment) => (
+                <Comment
+                  key={comment.commentId}
+                  comment={comment}
+                  onClick={() => {
+                    setActiveDetailModal(true);
+                    setActiveComment(comment);
+                  }}
+                />
+              ))}
           </MasonryInfiniteGrid>
         </section>
-        <button
-          type="button"
-          className="fixed bottom-7.5 left-5 overflow-hidden rounded-sm"
-          onClick={() => setActiveMessageModal(true)}
-        >
-          <img src={EnvelopeImg} alt="편지지 이미지" className="h-12 w-auto opacity-70" />
-          <p className="caption-sb absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-nowrap text-white">
-            편지 쓰기
-          </p>
-        </button>
+        <WriteCommentButton rollingPaperId={id} />
       </main>
       <BackgroundBottom />
     </>
diff --git a/src/styles/animations.css b/src/styles/animations.css
index 3c69ab1..154ca77 100644
--- a/src/styles/animations.css
+++ b/src/styles/animations.css
@@ -72,7 +72,6 @@
     0% {
       transform: translateX(10%);
     }
-
     100% {
       transform: translateX(-100%);
     }
diff --git a/src/styles/components.css b/src/styles/components.css
index 74af716..559f823 100644
--- a/src/styles/components.css
+++ b/src/styles/components.css
@@ -9,20 +9,27 @@
     @apply bg-primary-4 rounded-lg text-gray-50;
   }
 
-  .list-receiver-bg {
+  .letter-receiver-bg {
     background:
       url('/src/assets/images/background-overlay.png') repeat,
       linear-gradient(180deg, #ffb5ac 0%, #ffc1ba 28%, #ffd3ce 98.5%);
     background-blend-mode: overlay, normal, normal;
   }
 
-  .list-sender-bg {
+  .letter-sender-bg {
     background:
       url('/src/assets/images/background-overlay.png') repeat,
       linear-gradient(180deg, #fad446 0%, #f8de8c 28%, #ffeab8 98.5%);
     background-blend-mode: overlay, normal, normal;
   }
 
+  .memo-sender-bg {
+    background:
+      url('/src/assets/images/background-overlay.png') repeat,
+      linear-gradient(180deg, #ffe89f 0%, #ffe8a1 28%, #fff2d4 98.5%);
+    background-blend-mode: overlay, normal, normal;
+  }
+
   .letter-box-bg {
     background:
       url('/src/assets/images/background-overlay.png') repeat,
diff --git a/src/types/.gitkeep b/src/types/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/types/rolling.d.ts b/src/types/rolling.d.ts
new file mode 100644
index 0000000..af75fe6
--- /dev/null
+++ b/src/types/rolling.d.ts
@@ -0,0 +1,14 @@
+interface RollingPaperInformation {
+  eventPostId: number;
+  title: string;
+}
+
+interface RollingPaperComment {
+  commentId: number;
+  zipCode: string;
+  content: string;
+}
+
+interface RollingPaper extends RollingPaperInformation {
+  eventPostComments: RollingPaperComment[];
+}