feat: 롤링페이퍼 기능 구현 (mock api)

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;
+  }
+};

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"

src/components/ListItemWrapper.tsx → 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;

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;

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"

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;

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;

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>
   );
 }

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}

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>

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 => {

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>

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>