Merge pull request #62 from codeit-maso/feature/Yun

✨ feat: /post/id 페이지 구현 - 작성한 메시지 카드로 보여주기, 무한스크롤 구현

Author: Yun-Jinwoo

package-lock.json

@@ -13,6 +13,7 @@
   },
   "dependencies": {
     "axios": "^1.5.0",
+    "dompurify": "^3.2.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-quill": "^2.0.0",

package.json

@@ -0,0 +1,13 @@
+import { api } from './api';
+
+export default async function getMessages(id, offset, limit) {
+  try {
+    const teamId = import.meta.env.VITE_TEAM_ID;
+    const res = await api.get(
+      `/${teamId}/recipients/${id}/messages/?limit=${limit}&offset=${offset}`,
+    );
+    return res.data;
+  } catch {
+    return null;
+  }
+}

src/api/getMessages.js

@@ -0,0 +1,11 @@
+import { api } from './api';
+
+export default async function getRecipient(id) {
+  try {
+    const teamId = import.meta.env.VITE_TEAM_ID;
+    const res = await api.get(`/${teamId}/recipients/${id}/`);
+    return res.data;
+  } catch {
+    return null;
+  }
+}

src/api/getRecipient.js

@@ -1,16 +1,16 @@
 import styles from './Badge.module.scss';
 
 const relationship = {
-  acquaintance: '지인',
-  colleague: '동료',
-  family: '가족',
-  friend: '친구',
+  지인: 'acquaintance',
+  동료: 'colleague',
+  가족: 'family',
+  친구: 'friend',
 };
 
 export default function Badge({ relation }) {
   return (
-    <div className={`${styles.badge} ${styles[relation]}`}>
-      {relationship[relation]}
+    <div className={`${styles.badge} ${styles[relationship[relation]]}`}>
+      {relation}
     </div>
   );
 }

src/components/Badge/Badge.jsx

@@ -1,20 +1,30 @@
+import DOMPurify from 'dompurify';
+import { useNavigate } from 'react-router-dom';
 import deleteIcon from '../../assets/images/delete.svg';
 import plus from '../../assets/images/plus.svg';
 import Badge from '../Badge/Badge';
 import styles from './Card.module.scss';
 
 export default function Card({
   image,
+  recipientId,
   sender,
   relationship,
-  content,
+  children,
   createdAt,
   empty = false,
 }) {
+  const navigate = useNavigate();
+  const sanitizedHTML = DOMPurify.sanitize(children);
+
+  function handleClick() {
+    navigate(`/post/${recipientId}/message/`);
+  }
+
   return (
     <article className={`${styles.card} ${empty ? styles['card--empty'] : ''}`}>
       {empty ? (
-        <div>
+        <div onClick={handleClick}>
           <img src={plus} alt="추가하기" />
         </div>
       ) : (
@@ -41,7 +51,7 @@ export default function Card({
           </header>
           <div className={styles['card__body']}>
             <div className={styles['card__content']}>
-              <p>{content}</p>
+              <div dangerouslySetInnerHTML={{ __html: sanitizedHTML }} />
             </div>
           </div>
           <footer className={styles['card__footer']}>{createdAt}</footer>

src/components/Card/Card.jsx

@@ -19,6 +19,7 @@
     img {
       width: 56px;
       height: 56px;
+      cursor: pointer;
     }
   }
 
@@ -52,6 +53,9 @@
       gap: 6px;
 
       .card__profile-name {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
         @include font-20-regular;
 
         span {

src/components/Card/Card.module.scss

@@ -42,7 +42,7 @@ export default function Home() {
       </section>
 
       <div className={styles.buttonWrapper}>
-        <Button text="구경해보기" onClick={() => navigate()} />
+        <Button onClick={() => navigate('/list')}>구경해보기</Button>
       </div>
     </div>
   );

src/pages/Home/Home.jsx

@@ -69,7 +69,7 @@ export default function MessageForm() {
 
       localStorage.removeItem('quill-content');
       setMessage('');
-      navigate(`/post/${res.id}`);
+      navigate(`/post/${id}`);
     } catch (error) {
       console.error('메세지 전송 실패', error);
     }

src/pages/MessageForm/MessageForm.jsx

@@ -1,34 +1,105 @@
-import { useState, useEffect } from 'react';
-import { useParams } from 'react-router-dom';
+import { useParams } from 'react-router';
+import { useEffect, useState, useRef } from 'react';
+import getRecipient from '../../api/getRecipient';
+import getMessages from '../../api/getMessages';
 import HeaderService from '../../components/recipient/HeaderService/HeaderService';
-import fetchRecipient from '../../api/fetchRecipient';
+import Card from '../../components/Card/Card';
+import styles from './Recipient.module.scss';
 
 export default function Recipient() {
-  const [recipient, setRecipient] = useState(null);
   const { id } = useParams();
+  const [postData, setPostData] = useState(null);
+  const [messages, setMessages] = useState([]);
+  const [offset, setOffset] = useState(0);
+  const [loading, setLoading] = useState(false);
+  const [hasNextMessage, setHasNextMessage] = useState(false);
+  const observerRef = useRef();
 
   useEffect(() => {
-    if (!id) {
-      console.error('Recipient ID가 제공되지 않았습니다');
-      return;
-    }
-
-    async function loadData() {
+    const fetchRecipient = async () => {
       try {
-        const recipientData = await fetchRecipient(id);
-
-        setRecipient(recipientData);
+        const recipient = await getRecipient(id);
+        setPostData(recipient);
+        setHasNextMessage(recipient.messageCount > 0);
+        setLoading(false);
       } catch (error) {
-        console.error('데이터 가져오기 실패:', error);
+        console.error('데이터 로딩 실패:', error.response.data);
       }
-    }
+    };
 
-    loadData();
+    fetchRecipient();
   }, [id]);
 
+  useEffect(() => {
+    setLoading(true);
+    const fetchMessages = async () => {
+      try {
+        const limit = offset === 0 ? 8 : 9;
+        const newMessages = await getMessages(id, offset, limit);
+        offset === 0
+          ? setMessages(newMessages.results)
+          : setMessages((prev) => [...prev, ...newMessages.results]);
+        if (!postData) return;
+        setHasNextMessage(offset < postData.messageCount);
+        setLoading(false);
+      } catch (error) {
+        console.error(
+          '데이터 로딩 실패:',
+          error.response?.data || error.message,
+        );
+      }
+    };
+
+    fetchMessages();
+  }, [id, offset]);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver((entries) => {
+      const firstEntry = entries[0];
+      if (firstEntry.isIntersecting && hasNextMessage && !loading) {
+        loadMoreMessages();
+      }
+    });
+    if (observerRef.current) observer.observe(observerRef.current);
+    return () => {
+      if (observerRef.current) observer.unobserve(observerRef.current);
+    };
+  }, [observerRef.current, hasNextMessage, loading]);
+
+  const loadMoreMessages = () => {
+    const limit = offset === 0 ? 8 : 9;
+    setOffset((prev) => prev + limit);
+  };
+
+  if (!postData || messages.length < 0) return <div>Loading...</div>;
+
   return (
-    <div>
-      <HeaderService recipient={recipient} />
-    </div>
+    <>
+      <HeaderService />
+      <div
+        className={`${styles['post-container']} ${!postData.backgroundImageURL ? styles[`background--${postData.backgroundColor}`] : ''}`}
+        style={
+          postData.backgroundImageURL
+            ? { backgroundImage: `url(${postData.backgroundImageURL})` }
+            : {}
+        }
+      >
+        <div className={styles['card-container']}>
+          <Card recipientId={id} empty={true} />
+          {messages.map((msg) => (
+            <Card
+              key={msg.id}
+              image={msg.profileImageURL}
+              sender={msg.sender}
+              relationship={msg.relationship}
+              createdAt={msg.createdAt.slice(0, 10).split('-').join('.')}
+            >
+              {msg.content}
+            </Card>
+          ))}
+        </div>
+        {hasNextMessage && <div ref={observerRef} className="load"></div>}
+      </div>
+    </>
   );
 }