로그인 없이 자유롭게 만들어요.
-
+ 
+ 
diff --git a/src/components/modal/KakaoModal.jsx b/src/components/modal/KakaoModal.jsx
index 0c63a5f..122f011 100644
--- a/src/components/modal/KakaoModal.jsx
+++ b/src/components/modal/KakaoModal.jsx
@@ -6,6 +6,7 @@ function KakaoModal() {
position: relative;
width: 100%;
height: 100%;
+ background: #ffeea3;
`;
const KakaoImg = styled.div`
diff --git a/src/components/post/SubHeader.jsx b/src/components/post/SubHeader.jsx
index 4438fc5..adfc7f7 100644
--- a/src/components/post/SubHeader.jsx
+++ b/src/components/post/SubHeader.jsx
@@ -1,11 +1,14 @@
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 './subheader/EmojiDropDown';
+import WrittenByIcons from './subheader/WrittenByIcons';
import ShareToggle from '../modal/ShareToggle';
import KakaoModal from '../modal/KakaoModal';
import ModalPortal from '../modal/ModalPortal';
import Toast from '../common/Toast';
+import { getAllMessages } from '../../api/GetApi';
const Text = css`
font-family: Pretendard;
@@ -119,11 +122,11 @@ const WrittenBy = styled.div`
}
`;
-const WrittenByIcons = styled.span`
- width: 76px;
- height: 30px;
- border: 1px solid black;
-`;
+// const WrittenByIcons = styled.span`
+// width: 76px;
+// height: 30px;
+// border: 1px solid black;
+// `;
const SplitBarVertical = styled.div`
width: 1px;
@@ -185,8 +188,19 @@ function SubHeader({ name, peopleNum }) {
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) {
+ // console.error(error);
+ }
+ };
+
const handleOutsideClick = (e) => {
if (shareToggle && (!ref.current || !ref.current.contains(e.target))) {
setShareToggle(false);
@@ -200,6 +214,10 @@ function SubHeader({ name, peopleNum }) {
};
}, [shareToggle]);
+ useEffect(() => {
+ handleMessages(id);
+ }, []);
+
const handleClickShare = (e) => {
e.preventDefault();
setShareToggle(!shareToggle);
@@ -212,7 +230,7 @@ function SubHeader({ name, peopleNum }) {
-
+
+ 
+
+ {peopleNum > 0 && (
+
+ {peopleNum}
+
+ )}
+
+ );
+}
+
+export default ProfileUser;
diff --git a/src/components/post/subheader/WrittenByIcons.jsx b/src/components/post/subheader/WrittenByIcons.jsx
new file mode 100644
index 0000000..f7aa1ca
--- /dev/null
+++ b/src/components/post/subheader/WrittenByIcons.jsx
@@ -0,0 +1,34 @@
+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);
+
+ return (
+ <>
+ {/* {으앙~} */}
+ {limitedUsers.map((userId, index) => {
+ const userMessages = messages.filter(
+ (message) => message.id === userId,
+ );
+ const last = index === limitedUsers.length - 1;
+
+ return (
+
{peopleNum}
+