design: 롤링페이퍼 페이지 메시지 상세조회 모달 퍼블리싱

Author: AAminha

src/assets/.gitkeep

@@ -6,7 +6,7 @@ const Header = () => {
   // TODO: 뒤로 가기 버튼이 보이는 조건 추가
   // TODO: 스크롤 발생 시, 어떻게 보여져야 하는지
   return (
-    <header className="sticky top-0 flex h-16 items-center justify-between p-5">
+    <header className="sticky top-0 z-40 flex h-16 items-center justify-between p-5">
       <ArrowLeftIcon className="h-6 w-6 text-white" />
       <div className="flex items-center gap-3">
         <Link to="/mypage/notifications">

src/layouts/Header.tsx

@@ -1,16 +1,22 @@
 import MessageBg from '@/assets/images/memo-pink.png';
 
 interface MessageProps {
-  content: string;
+  message: {
+    content: string;
+    sender: string;
+  };
+  onClick: () => void;
 }
 
-const Message = ({ content }: MessageProps) => {
+const Message = ({ message, onClick }: MessageProps) => {
   return (
     <article
-      className="caption-m min-h-20 bg-[image:var(--bg-image)] bg-[length:100%_100%] bg-center p-4 whitespace-pre-wrap text-black"
+      className="flex min-h-20 cursor-pointer flex-col bg-[image:var(--bg-image)] bg-[length:100%_100%] bg-center p-4 text-black"
       style={{ '--bg-image': `url(${MessageBg})` } as React.CSSProperties}
+      onClick={onClick}
     >
-      {content}
+      <p className="caption-r whitespace-pre-wrap">{message.content}</p>
+      <p className="caption-m mt-1 place-self-end">From. {message.sender}</p>
     </article>
   );
 };

src/pages/RollingPaper/components/Message.tsx

@@ -0,0 +1,32 @@
+import ModalBg from '@/assets/images/memo-pink.png';
+import ModalOverlay from '@/components/ModalOverlay';
+
+interface MessageDetailModalProps {
+  message: {
+    content: string;
+    sender: string;
+  };
+  isWriter: boolean;
+  onClose: () => void;
+}
+
+const MessageDetailModal = ({ message, isWriter, onClose }: MessageDetailModalProps) => {
+  return (
+    <ModalOverlay closeOnOutsideClick onClose={onClose}>
+      <>
+        <button type="button" className="body-b ml-auto text-white">
+          {isWriter ? '삭제하기' : '신고하기'}
+        </button>
+        <article
+          className="mt-1 flex max-h-1/2 w-78 flex-col gap-3 overflow-y-auto bg-[image:var(--bg-image)] bg-[length:100%_100%] bg-center px-5 py-4 text-black"
+          style={{ '--bg-image': `url(${ModalBg})` } as React.CSSProperties}
+        >
+          <p className="body-r leading-[26px]">{message.content}</p>
+          <p className="body-m place-self-end">From. {message.sender}</p>
+        </article>
+      </>
+    </ModalOverlay>
+  );
+};
+
+export default MessageDetailModal;

src/pages/RollingPaper/components/MessageDetailModal.tsx

@@ -1,30 +1,44 @@
 import { MasonryInfiniteGrid } from '@egjs/react-infinitegrid';
+import { useState } from 'react';
 
 import EnvelopeImg from '@/assets/images/envelope.png';
 import BgItem from '@/assets/images/field-4.png';
 import PageTitle from '@/components/PageTitle';
 import Header from '@/layouts/Header';
 
 import Message from './components/Message';
+import MessageDetailModal from './components/MessageDetailModal';
 
+const DUMMY_USER_ZIP_CODE = '12E12';
 const DUMMY_TITLE = '침수 피해를 복구중인 포스코 임직원 분들에게 응원의 메시지를 보내주세요!';
 const DUMMY_MESSAGE_COUNT = 20;
-
-const DUMMY_CONTENT_1 =
-  '편지 내용 어쩌구저쩌구 뾰로롱 편지 내용 어쩌구저쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 저쩌구 끝~!!';
-const DUMMY_CONTENT_2 = '구현해보고 정신없지 않은 범위 기준으로 자를까요?';
+const DUMMY_MESSAGE = {
+  content:
+    '편지 내용 어쩌구저쩌구 뾰로롱 편지 내용 어쩌구저쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 뾰로롱편지 내용 어쩌구 저쩌구 끝~!!',
+  sender: '12E12',
+};
+const DUMMY_MESSAGES = Array.from({ length: 10 }, () => ({ ...DUMMY_MESSAGE }));
 
 const RollingPaperPage = () => {
+  const [activeMessageIndex, setActiveMessageIndex] = useState<number | null>(null);
+
   return (
     <>
+      {activeMessageIndex !== null && (
+        <MessageDetailModal
+          message={DUMMY_MESSAGES[activeMessageIndex]}
+          isWriter={DUMMY_MESSAGES[activeMessageIndex].sender === DUMMY_USER_ZIP_CODE}
+          onClose={() => setActiveMessageIndex(null)}
+        />
+      )}
       <Header />
       <main className="flex grow flex-col items-center px-5 pt-4 pb-12">
         <PageTitle className="mb-18 max-w-73 text-center">{DUMMY_TITLE}</PageTitle>
         <p className="body-sb text-gray-60 w-full">등록된 편지 {DUMMY_MESSAGE_COUNT}</p>
         <section className="w-full">
           <MasonryInfiniteGrid column={2} align="stretch" gap={16}>
-            {Array.from({ length: DUMMY_MESSAGE_COUNT }).map((_, index) => (
-              <Message key={index} content={index % 3 === 0 ? DUMMY_CONTENT_1 : DUMMY_CONTENT_2} />
+            {DUMMY_MESSAGES.map((message, index) => (
+              <Message key={index} message={message} onClick={() => setActiveMessageIndex(index)} />
             ))}
           </MasonryInfiniteGrid>
         </section>