diff --git a/src/components/post/subheader/SubHeader.jsx b/src/components/post/subheader/SubHeader.jsx index 34f52fa..ed5cdea 100644 --- a/src/components/post/subheader/SubHeader.jsx +++ b/src/components/post/subheader/SubHeader.jsx @@ -1,6 +1,5 @@ import styled, { css } from 'styled-components'; import { useState, useRef, useEffect } from 'react'; -import { useParams } from 'react-router-dom'; import { ToastContainer } from 'react-toastify'; import EmojiDropDown from './EmojiDropDown'; import WrittenByIcons from './WrittenByIcons'; @@ -9,7 +8,6 @@ import KakaoModal from '../../modal/KakaoModal'; import ModalPortal from '../../modal/ModalPortal'; import Toast from '../../common/Toast'; import { Outlined36 } from '../../../styles/ButtonStyle'; -import { getAllMessages } from '../../../api/GetApi'; import { bold18, bold28 } from '../../../styles/fontStyle'; import { DISPLAY_SIZE } from '../../../constants/SIZE_SET'; @@ -155,23 +153,12 @@ const Container = styled(ToastContainer)` } `; -function SubHeader({ name, peopleNum }) { +function SubHeader({ name, peopleNum, profileUrl }) { const [shareToggle, setShareToggle] = useState(false); const [isKakaoOpen, setIsKakaoOpen] = useState(false); const [isUrlCopy, setIsUrlCopy] = useState(false); - const [messages, setMessages] = useState(null); - const { id } = useParams(); const ref = useRef(); - const handleMessages = async () => { - try { - const result = await getAllMessages(id); - setMessages(result.results); - } catch (error) { - throw new Error('데이터를 불러오지 못했습니다.', error); - } - }; - const handleOutsideClick = (e) => { if (shareToggle && (!ref.current || !ref.current.contains(e.target))) { setShareToggle(false); @@ -185,10 +172,6 @@ function SubHeader({ name, peopleNum }) { }; }, [shareToggle]); - useEffect(() => { - handleMessages(id); - }, []); - const handleClickShare = (e) => { e.preventDefault(); setShareToggle(!shareToggle); @@ -201,7 +184,7 @@ function SubHeader({ name, peopleNum }) { - + {peopleNum}명이 작성했어요! diff --git a/src/components/post/subheader/WrittenByIcons.jsx b/src/components/post/subheader/WrittenByIcons.jsx index e885836..17e11e6 100644 --- a/src/components/post/subheader/WrittenByIcons.jsx +++ b/src/components/post/subheader/WrittenByIcons.jsx @@ -1,26 +1,18 @@ import ProfileUser from './ProfileUser'; -function WrittenByIcons({ messages, peopleNum }) { - if (!messages || messages.length === 0) { - return null; // Return early if messages are null or empty - } - - const uniqueUsers = [...new Set(messages.map((message) => message.id))]; - const limitedUsers = uniqueUsers.slice(0, 3); +function WrittenByIcons({ profileUrl, peopleNum }) { + // profileUrl이 없거나 비어있으면 빈 배열을 반환 + const urls = profileUrl || []; return ( <> - {limitedUsers.map((userId, index) => { - const userMessages = messages.filter( - (message) => message.id === userId, - ); - const last = index === limitedUsers.length - 1; + {urls.map((userUrl, index) => { + const last = index === urls.length - 1; return ( diff --git a/src/pages/PostId.jsx b/src/pages/PostId.jsx index 356cfb1..0cf91a8 100644 --- a/src/pages/PostId.jsx +++ b/src/pages/PostId.jsx @@ -79,6 +79,13 @@ function PostId() { handleIdData(); }, []); + let profileUrl = []; + + if (data && data.recentMessages?.length > 0) { + profileUrl = data.recentMessages.map((message) => message.profileImageURL); + console.log(profileUrl); + } + return ( @@ -87,6 +94,7 @@ function PostId() {