Merge branch 'develop' into feature/chan

LeeCh0129 · LeeCh0129 · commit f2a337b64186 · 2025-04-24T20:03:33.000+09:00
diff --git a/index.html b/index.html
@@ -26,6 +26,7 @@
   </head>
   <body>
     <div id="root"></div>
+    <div id="modal-root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>
diff --git a/src/api/deleteMessage.js b/src/api/deleteMessage.js
@@ -0,0 +1,7 @@
+import { api } from './api';
+
+export default async function deleteMessage(messageId) {
+  const teamId = import.meta.env.VITE_TEAM_ID;
+  const res = await api.delete(`/${teamId}/messages/${messageId}/`);
+  return res.data;
+}
diff --git a/src/api/deleteRecipient.js b/src/api/deleteRecipient.js
@@ -0,0 +1,7 @@
+import { api } from './api';
+
+export default async function deleteMessage(recipientId) {
+  const teamId = import.meta.env.VITE_TEAM_ID;
+  const res = await api.delete(`/${teamId}/recipients/${recipientId}/`);
+  return res.data;
+}
diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
@@ -6,6 +6,7 @@ import Badge from '../Badge/Badge';
 import styles from './Card.module.scss';
 
 export default function Card({
+  id,
   image,
   recipientId,
   sender,
@@ -14,14 +15,22 @@ export default function Card({
   createdAt,
   font,
   empty = false,
+  onDelete,
+  onClick,
 }) {
   const navigate = useNavigate();
   const sanitizedHTML = DOMPurify.sanitize(children);
 
-  function handleClick() {
+  function clickPost() {
     navigate(`/post/${recipientId}/message/`);
   }
 
+  function clickDelete(e) {
+    e.stopPropagation();
+    if (confirm('정말 삭제하시겠어요?')) {
+      onDelete?.(id);
+    }
+  }
   const fontFamilyMap = {
     'Noto Sans': '"Noto Sans", sans-serif',
     Pretendard: '"Pretendard", sans-serif',
@@ -30,9 +39,12 @@ export default function Card({
   };
 
   return (
-    <article className={`${styles.card} ${empty ? styles['card--empty'] : ''}`}>
+    <article
+      className={`${styles.card} ${empty ? styles['card--empty'] : ''}`}
+      onClick={() => !empty && onClick?.(id)}
+    >
       {empty ? (
-        <div onClick={handleClick}>
+        <div onClick={clickPost}>
           <img src={plus} alt="추가하기" />
         </div>
       ) : (
@@ -52,7 +64,7 @@ export default function Card({
               </div>
             </div>
             <div className={styles['card__delete-button']}>
-              <button>
+              <button onClick={clickDelete}>
                 <img src={deleteIcon} alt="쓰레기통 아이콘" />
               </button>
             </div>
diff --git a/src/components/Card/Card.module.scss b/src/components/Card/Card.module.scss
@@ -53,9 +53,11 @@
       gap: 6px;
 
       .card__profile-name {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
         overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+        -webkit-line-clamp: 1;
+        line-clamp: 1;
         @include font-20-regular;
 
         span {
@@ -79,7 +81,6 @@
 
   &__body {
     height: 280px;
-    padding: 16px 0;
 
     .card__content {
       display: -webkit-box;
diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx
@@ -0,0 +1,54 @@
+import DOMPurify from 'dompurify';
+import ReactDOM from 'react-dom';
+import Badge from '../Badge/Badge';
+import Button from '../common/Button';
+import styles from './Modal.module.scss';
+
+export default function Modal({
+  image,
+  sender,
+  relationship,
+  children,
+  createdAt,
+  onClose,
+}) {
+  const sanitizedHTML = DOMPurify.sanitize(children);
+
+  return ReactDOM.createPortal(
+    <div className={styles.backdrop}>
+      <article className={styles.modal}>
+        <header className={styles['modal__header']}>
+          <div className={styles['modal__profile-img']}>
+            <img src={image} alt="프로필 이미지" />
+          </div>
+          <div className={styles['modal__user-info']}>
+            <div className={styles['modal__profile-name']}>
+              <p>
+                From. <span>{sender}</span>
+              </p>
+            </div>
+            <div className={styles['modal__relation-badge']}>
+              <Badge relation={relationship} />
+            </div>
+          </div>
+          <div className={styles['modal__date']}>{createdAt}</div>
+        </header>
+        <div className={styles['modal__body']}>
+          <div className={styles['modal__content']}>
+            <div dangerouslySetInnerHTML={{ __html: sanitizedHTML }} />
+          </div>
+        </div>
+        <div className={styles['modal__footer']}>
+          <Button
+            className={styles['modal__button']}
+            type="confirm"
+            onClick={onClose}
+          >
+            확인
+          </Button>
+        </div>
+      </article>
+    </div>,
+    document.getElementById('modal-root'),
+  );
+}
diff --git a/src/components/Modal/Modal.module.scss b/src/components/Modal/Modal.module.scss
@@ -0,0 +1,102 @@
+@use '../../assets/styles/variables.scss' as *;
+
+.backdrop {
+  display: flex;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.6);
+  justify-content: center;
+  align-items: center;
+}
+
+.modal {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  z-index: 1000;
+  width: 600px;
+  height: 476px;
+  padding: 40px;
+  border-radius: 20px;
+  background-color: $white;
+  transform: translate(-50%, -50%);
+  box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.08);
+  gap: 16px;
+
+  &__header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid $gray-200;
+  }
+
+  &__profile-img {
+    position: relative;
+    width: 56px;
+    height: 56px;
+    border: 1px solid $gray-200;
+    border-radius: 100px;
+    overflow: hidden;
+
+    img {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  &__user-info {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    gap: 6px;
+  }
+
+  &__profile-name {
+    display: -webkit-box;
+    overflow: hidden;
+    @include font-20-regular;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
+
+    span {
+      @include font-20-bold;
+    }
+  }
+
+  &__date {
+    @include font-14-regular;
+    color: $gray-400;
+  }
+
+  &__body {
+    width: 500px;
+    height: 240px;
+  }
+
+  &__content {
+    @include font-18-regular;
+    color: $gray-500;
+    word-break: break-word;
+  }
+
+  &__footer {
+    padding-top: 8px;
+    margin: 0 auto;
+  }
+
+  &__button {
+    align-self: center;
+  }
+}
diff --git a/src/components/common/Button.module.scss b/src/components/common/Button.module.scss
@@ -54,7 +54,7 @@
   }
 
   &--delete {
-    width: 9.2rem;
+    width: 10rem;
     height: 3.9rem;
     padding: 0.7rem 1.6rem;
     border-radius: 6px;
diff --git a/src/pages/Recipient/Recipient.jsx b/src/pages/Recipient/Recipient.jsx
@@ -1,9 +1,13 @@
-import { useParams } from 'react-router';
+import { useParams, useNavigate } from 'react-router';
 import { useEffect, useState, useRef } from 'react';
 import getRecipient from '../../api/getRecipient';
 import getMessages from '../../api/getMessages';
+import deleteMessage from '../../api/deleteMessage.js';
+import deleteRecipient from '../../api/deleteRecipient.js';
 import HeaderService from '../../components/recipient/HeaderService/HeaderService';
 import Card from '../../components/Card/Card';
+import Button from '../../components/common/Button';
+import Modal from '../../components/Modal/Modal.jsx';
 import styles from './Recipient.module.scss';
 
 export default function Recipient() {
@@ -13,7 +17,9 @@ export default function Recipient() {
   const [offset, setOffset] = useState(0);
   const [loading, setLoading] = useState(false);
   const [hasNextMessage, setHasNextMessage] = useState(false);
+  const [selectedCardId, setSelectedCardId] = useState(null);
   const observerRef = useRef();
+  const navigate = useNavigate();
 
   useEffect(() => {
     const fetchRecipient = async () => {
@@ -71,6 +77,42 @@ export default function Recipient() {
     setOffset((prev) => prev + limit);
   };
 
+  async function handleDeleteMessage(id) {
+    try {
+      await deleteMessage(id);
+      setMessages((prevMessages) =>
+        prevMessages.filter((msg) => msg.id !== id),
+      );
+    } catch (error) {
+      console.error('삭제 실패:', error);
+    }
+  }
+
+  async function handleDeleteRecipient(id) {
+    try {
+      const firstConfirm = confirm('정말 이 페이지를 삭제하시겠어요?');
+      if (!firstConfirm) return;
+      const secondConfirm = confirm(
+        '정말 정말 삭제하시겠어요? 되돌릴 수 없어요!',
+      );
+      if (!secondConfirm) return;
+      await deleteRecipient(id);
+      navigate('/');
+    } catch (error) {
+      console.error('삭제 실패:', error);
+    }
+  }
+
+  function handleOpenModal(id) {
+    setSelectedCardId(id);
+  }
+
+  function handleCloseModal() {
+    setSelectedCardId(null);
+  }
+
+  const selectedCard = messages.find((card) => card.id === selectedCardId);
+
   if (!postData || messages.length < 0) return <div>Loading...</div>;
 
   return (
@@ -84,20 +126,47 @@ export default function Recipient() {
             : {}
         }
       >
+        <div className={styles['button-container']}>
+          <Button
+            className={styles['delete-button']}
+            type="delete"
+            onClick={() => handleDeleteRecipient(id)}
+          >
+            삭제하기
+          </Button>
+        </div>
         <div className={styles['card-container']}>
           <Card recipientId={id} empty={true} />
           {messages.map((msg) => (
             <Card
               key={msg.id}
+              id={msg.id}
               image={msg.profileImageURL}
               sender={msg.sender}
               relationship={msg.relationship}
               createdAt={msg.createdAt.slice(0, 10).split('-').join('.')}
+              onDelete={handleDeleteMessage}
+              onClick={() => handleOpenModal(msg.id)}
               font={msg.font}
             >
               {msg.content}
             </Card>
           ))}
+          {selectedCardId && (
+            <Modal
+              key={selectedCard.id}
+              image={selectedCard.profileImageURL}
+              sender={selectedCard.sender}
+              relationship={selectedCard.relationship}
+              createdAt={selectedCard.createdAt
+                .slice(0, 10)
+                .split('-')
+                .join('.')}
+              onClose={handleCloseModal}
+            >
+              {selectedCard.content}
+            </Modal>
+          )}
         </div>
         {hasNextMessage && <div ref={observerRef} className="load"></div>}
       </div>
diff --git a/src/pages/Recipient/Recipient.module.scss b/src/pages/Recipient/Recipient.module.scss

Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,7 @@`
`54`	`54`	`}`
`55`	`55`
`56`	`56`	`&--delete {`
`57`		`- width: 9.2rem;`
	`57`	`+ width: 10rem;`
`58`	`58`	`height: 3.9rem;`
`59`	`59`	`padding: 0.7rem 1.6rem;`
`60`	`60`	`border-radius: 6px;`