design: 신고 모달 컴포넌트 퍼블리싱

Author: AAminha

src/components/ConfirmModal.tsx

@@ -7,6 +7,7 @@ interface ConfirmModalProps {
   description: string;
   cancelText: string;
   confirmText: string;
+  confirmDisabled: boolean;
   children?: React.ReactNode;
   onCancel: () => void;
   onConfirm: () => void;
@@ -17,6 +18,7 @@ const ConfirmModal = ({
   description,
   cancelText,
   confirmText,
+  confirmDisabled,
   children,
   onCancel,
   onConfirm,
@@ -46,6 +48,7 @@ const ConfirmModal = ({
           <button
             type="button"
             className="primary-btn body-m h-10 flex-1 basis-1/2"
+            disabled={confirmDisabled}
             onClick={onConfirm}
           >
             {confirmText}

src/components/ReportModal.tsx

@@ -0,0 +1,60 @@
+import { useState } from 'react';
+import { twMerge } from 'tailwind-merge';
+
+import ConfirmModal from './ConfirmModal';
+
+interface ReportModalProps {
+  onClose: () => void;
+}
+
+const REPORT_REASON = ['욕설', '비방', '폭언', '성희롱', '기타'];
+
+const ReportModal = ({ onClose }: ReportModalProps) => {
+  const [selected, setSelected] = useState('');
+  const [additionalReason, setAdditionalReason] = useState('');
+
+  const handleReasonClick = (reason: string) => {
+    if (selected === reason) setSelected('');
+    else setSelected(reason);
+  };
+
+  const handleSubmit = () => {
+    onClose();
+  };
+
+  return (
+    <ConfirmModal
+      title="신고 사유를 선택해주세요"
+      description="신고한 게시물은 관리자 검토 후 처리됩니다."
+      cancelText="취소하기"
+      confirmText="제출하기"
+      confirmDisabled={selected === ''}
+      onCancel={onClose}
+      onConfirm={handleSubmit}
+    >
+      <section className="my-6 flex flex-wrap gap-x-2.5 gap-y-2">
+        {REPORT_REASON.map((reason) => (
+          <button
+            type="button"
+            className={twMerge(
+              'body-m rounded-full bg-white px-5 py-1.5 text-black',
+              selected === reason && 'bg-primary-2',
+            )}
+            onClick={() => handleReasonClick(reason)}
+          >
+            {reason}
+          </button>
+        ))}
+      </section>
+      <textarea
+        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)}
+      />
+    </ConfirmModal>
+  );
+};
+
+export default ReportModal;

src/pages/RollingPaper/components/MessageDetailModal.tsx

@@ -8,13 +8,30 @@ interface MessageDetailModalProps {
   };
   isWriter: boolean;
   onClose: () => void;
+  onReport: () => void;
+  onDelete: () => void;
 }
 
-const MessageDetailModal = ({ message, isWriter, onClose }: MessageDetailModalProps) => {
+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">
+        <button type="button" className="body-b ml-auto text-white" onClick={handleButtonClick}>
           {isWriter ? '삭제하기' : '신고하기'}
         </button>
         <article

src/pages/RollingPaper/index.tsx

@@ -4,12 +4,13 @@ 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 ReportModal from '@/components/ReportModal';
 import Header from '@/layouts/Header';
 
 import Message from './components/Message';
 import MessageDetailModal from './components/MessageDetailModal';
 
-const DUMMY_USER_ZIP_CODE = '12E12';
+const DUMMY_USER_ZIP_CODE = '22E12';
 const DUMMY_TITLE = '침수 피해를 복구중인 포스코 임직원 분들에게 응원의 메시지를 보내주세요!';
 const DUMMY_MESSAGE_COUNT = 20;
 const DUMMY_MESSAGE = {
@@ -21,6 +22,16 @@ const DUMMY_MESSAGES = Array.from({ length: 10 }, () => ({ ...DUMMY_MESSAGE }));
 
 const RollingPaperPage = () => {
   const [activeMessageIndex, setActiveMessageIndex] = useState<number | null>(null);
+  const [activeReportModal, setActiveReportModal] = useState(false);
+
+  const handleReport = () => {
+    setActiveMessageIndex(null);
+    setActiveReportModal(true);
+  };
+
+  const handleDelete = () => {
+    setActiveMessageIndex(null);
+  };
 
   return (
     <>
@@ -29,12 +40,15 @@ const RollingPaperPage = () => {
           message={DUMMY_MESSAGES[activeMessageIndex]}
           isWriter={DUMMY_MESSAGES[activeMessageIndex].sender === DUMMY_USER_ZIP_CODE}
           onClose={() => setActiveMessageIndex(null)}
+          onReport={handleReport}
+          onDelete={handleDelete}
         />
       )}
+      {activeReportModal && <ReportModal onClose={() => setActiveReportModal(false)} />}
       <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>
+        <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) => (
@@ -45,7 +59,7 @@ const RollingPaperPage = () => {
         <button type="button" className="fixed bottom-7.5 left-5 overflow-hidden rounded-sm">
           <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>
       </main>

src/styles/components.css

@@ -2,7 +2,7 @@
 
 @layer components {
   .primary-btn {
-    @apply bg-primary-3 rounded-lg text-black;
+    @apply bg-primary-3 disabled:bg-gray-10 rounded-lg text-black disabled:text-white;
   }
 
   .secondary-btn {