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

* feat: Tanstack query를 이용한 데이터 가져오는 커스텀 훅 useFetchQuery 구현

* feat: NoticeRollingPaper에 데이터 패칭 적용
- NoticeRolling -> NoticeRollingPaper로 컴포넌트 명 수정

* feat: 홈 페이지에 공용 컴포넌트 적용

* rename: MessageDetailModal -> CommentDetailModal 컴포넌트 명 수정

* rename: Message -> Comment 컴포넌트 명 수정

* feat: 롤링페이퍼 조회 기능 구현

* refactor: 중복되는 배경 컴포넌트 적용 및 불필요한 에셋 제거

* refactor: 중복되는 메모 배경 컴포넌트 적용 및 불필요한 에셋 제거

* remove: 중복 에셋 제거

* refactor: 중복되는 모달 배경 컴포넌트 적용 및 불필요한 에셋 제거

* style: 커스텀 훅 제거 및 queryClient 기본값 설정

* feat: 삭제 모달 추가 및 삭제 mock api 연결

* feat: 편지 추가 mock api 연결

* fix: 신고 ui 제거

* style: 사용하지 않는 코드 제거

* style: 엔드포인트 오타 수정

* style: 더미 제거

Author: AAminha

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/assets/images/letter-pink.png

@@ -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/assets/images/memo-pink.png

@@ -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/assets/images/memo-yellow.png

@@ -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;