Fix: SubHeader에서 API 한 번 더 불러오던 것 수정

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 }) {
         <SplitBarHorizontal />
         <PostIdSetting>
           <WrittenBy>
-            <WrittenByIcons messages={messages} peopleNum={peopleNum} />
+            <WrittenByIcons profileUrl={profileUrl} peopleNum={peopleNum} />
             {peopleNum}명이 작성했어요!
           </WrittenBy>
           <SplitBarVertical1 />

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 (
           <ProfileUser
-            key={userId}
-            id={userId}
-            src={userMessages[0].profileImageURL}
+            key={userUrl} // 사용하는 곳에서 key prop이 필요
+            src={userUrl}
             peopleNum={last ? `+${peopleNum - 3}` : null}
             last={last}
           />

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 (
     <PostIdWrapper color={data.backgroundColor} image={data.backgroundImageURL}>
       <HeaderWrapper>
@@ -87,6 +94,7 @@ function PostId() {
       <SubHeader
         name={data ? data.name : ''}
         peopleNum={data ? data.messageCount : 0}
+        profileUrl={profileUrl}
       />
       <ButtonSection>
         <EditButton />