design: 롤링페이퍼 메사지 추가 모달 버픕ㄹ리싱

Author: AAminha

src/assets/images/modal-pink.png

@@ -0,0 +1,66 @@
+import { ChangeEvent } from 'react';
+
+import ModalBg from '@/assets/images/modal-pink.png';
+
+import ModalOverlay from './ModalOverlay';
+import TextareaField from './TextareaField';
+
+interface MessageModalProps {
+  description?: string;
+  inputValue: string;
+  placeholder?: string;
+  cancelText: string;
+  completeText: string;
+  children?: React.ReactNode;
+  onInputChange: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+  onCancel: () => void;
+  onComplete: () => void;
+}
+
+const MessageModal = ({
+  description,
+  inputValue,
+  placeholder,
+  cancelText,
+  completeText,
+  children,
+  onInputChange,
+  onCancel,
+  onComplete,
+}: MessageModalProps) => {
+  return (
+    <ModalOverlay>
+      <p className="body-sb mb-4 text-white">{description}</p>
+      <section
+        className="mb-12 w-78 rounded-lg bg-[image:var(--bg-image)] bg-[length:100%_100%] bg-center p-4"
+        style={{ '--bg-image': `url(${ModalBg})` } as React.CSSProperties}
+      >
+        <TextareaField
+          rows={5}
+          value={inputValue}
+          placeholder={placeholder}
+          onChange={onInputChange}
+        />
+        {children}
+      </section>
+      <section className="flex items-center gap-6">
+        <button
+          type="button"
+          className="body-m secondary-btn h-10 flex-1 basis-1/2"
+          onClick={onCancel}
+        >
+          {cancelText}
+        </button>
+        <button
+          type="button"
+          className="primary-btn body-m h-10 flex-1 basis-1/2"
+          onClick={onComplete}
+        >
+          {completeText}
+        </button>
+      </section>
+    </ModalOverlay>
+  );
+};
+
+export default MessageModal;

src/components/MessageModal.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
 import ConfirmModal from './ConfirmModal';
+import TextareaField from './TextareaField';
 
 interface ReportModalProps {
   onClose: () => void;
@@ -46,10 +47,9 @@ const ReportModal = ({ onClose }: ReportModalProps) => {
           </button>
         ))}
       </section>
-      <textarea
+      <TextareaField
         rows={3}
         placeholder="이곳을 눌러 추가 사유를 작성해주세요"
-        className="body-m placeholder:text-gray-30 text-gray-80 w-full resize-none rounded-sm bg-white px-3 py-1.5"
         value={additionalReason}
         onChange={(e) => setAdditionalReason(e.target.value)}
       />

src/components/ReportModal.tsx

@@ -0,0 +1,12 @@
+import { ComponentPropsWithoutRef } from 'react';
+
+const TextareaField = ({ ...props }: ComponentPropsWithoutRef<'textarea'>) => {
+  return (
+    <textarea
+      className="body-m placeholder:text-gray-30 text-gray-80 w-full resize-none rounded-sm bg-white px-3 py-1.5"
+      {...props}
+    />
+  );
+};
+
+export default TextareaField;

src/components/TextareaField.tsx

@@ -1,8 +1,9 @@
 import { MasonryInfiniteGrid } from '@egjs/react-infinitegrid';
-import { useState } from 'react';
+import { ChangeEvent, useState } from 'react';
 
 import EnvelopeImg from '@/assets/images/envelope.png';
 import BgItem from '@/assets/images/field-4.png';
+import MessageModal from '@/components/MessageModal';
 import PageTitle from '@/components/PageTitle';
 import ReportModal from '@/components/ReportModal';
 import Header from '@/layouts/Header';
@@ -23,6 +24,8 @@ 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 handleReport = () => {
     setActiveMessageIndex(null);
@@ -33,6 +36,10 @@ const RollingPaperPage = () => {
     setActiveMessageIndex(null);
   };
 
+  const handleChangeMessage = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    setNewMessage(e.target.value);
+  };
+
   return (
     <>
       {activeMessageIndex !== null && (
@@ -45,6 +52,19 @@ const RollingPaperPage = () => {
         />
       )}
       {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>
+      )}
       <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>
@@ -56,7 +76,11 @@ const RollingPaperPage = () => {
             ))}
           </MasonryInfiniteGrid>
         </section>
-        <button type="button" className="fixed bottom-7.5 left-5 overflow-hidden rounded-sm">
+        <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">
             편지 쓰기