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() {