[/post/{id}] PostId 페이지 메세지 작성자 프로필 이미지 불러오기

src/components/common/ModalWindow.jsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import styled from 'styled-components';
 // import { useKakaoShare } from './useKakaoShare';
 
@@ -39,6 +39,10 @@ const CloseBtn = styled.button`
   letter-spacing: -0.16px;
   position: absolute;
   bottom: 40px;
+
+  &:hover {
+    background: var(--Purple-700, #861dee);
+  }
 `;
 
 const ModalContents = styled.div`
@@ -60,6 +64,8 @@ function ModalWindow({ children }) {
     setModal((prev) => !prev);
   };
 
+  useEffect(() => {}, [modal]);
+
   return (
     modal && (
       <ModalBox>

src/components/main/MainSection.js

@@ -13,7 +13,7 @@ const StyledSection = styled.section`
     margin: 49px 24px;
   }
 
-  @media (max-width: 768px) {
+  @media (min-width: 360px) and (max-width: 768px) {
     margin: 42px 24px 37px;
   }
 `;
@@ -31,7 +31,7 @@ const SectionContainer = styled.div`
     gap: 36px;
   }
 
-  @media (max-width: 768px) {
+  @media (min-width: 360px) and (max-width: 768px) {
     gap: 48px;
   }
 `;
@@ -40,7 +40,7 @@ const FirstSectionContainer = styled(SectionContainer)`
   padding: 60px 0 60px 60px;
   margin-bottom: 30px;
 
-  @media (max-width: 1248px) {
+  @media (min-width: 360px) and (max-width: 1248px) {
     padding: 0;
   }
 `;
@@ -49,7 +49,7 @@ const SecondSectionContainer = styled(SectionContainer)`
   padding: 60px 60px 60px 0;
   margin-top: 0;
 
-  @media (max-width: 1248px) {
+  @media (min-width: 360px) and (max-width: 1248px) {
     padding: 0;
     flex-direction: column-reverse;
   }
@@ -91,7 +91,7 @@ const ArticleContainer = styled.div`
     }
   }
 
-  @media (max-width: 768px) {
+  @media (min-width: 360px) and (max-width: 768px) {
     padding: 24px;
   }
 `;
@@ -117,7 +117,7 @@ const BtnContainer = styled.div`
   justify-content: center;
   margin-bottom: 150px;
 
-  @media (max-width: 1248px) {
+  @media (min-width: 360px) and (max-width: 1248px) {
     width: 100%;
   }
 `;
@@ -135,10 +135,10 @@ function MainSection() {
             </h2>
             <p>로그인 없이 자유롭게 만들어요.</p>
           </ArticleContainer>
-          <img src="/img/img_01.png" alt="롤링페이퍼 예시 사진" />
+          <img src="/img/img_01.svg" alt="롤링페이퍼 예시 사진" />
         </FirstSectionContainer>
         <SecondSectionContainer>
-          <img src="/img/img_02.png" alt="이모지 예시 사진" />
+          <img src="/img/img_02.svg" alt="이모지 예시 사진" />
           <ArticleContainer>
             <StyledPointBtn>Point. 02</StyledPointBtn>
             <h2>

src/components/modal/KakaoModal.jsx

@@ -6,6 +6,7 @@ function KakaoModal() {
     position: relative;
     width: 100%;
     height: 100%;
+    background: #ffeea3;
   `;
 
   const KakaoImg = styled.div`

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

src/components/post/subheader/ProfileUser.jsx

@@ -0,0 +1,54 @@
+import styled from 'styled-components';
+
+function ProfileUser({ src, last, peopleNum }) {
+  const ProfileContainer = styled.div`
+    display: flex;
+    position: relative;
+  `;
+
+  const ImageBox = styled.div`
+    width: 28px;
+    height: 28px;
+    margin-right: ${last ? '0' : '-24px'};
+
+    img {
+      width: 100%;
+      height: 100%;
+      border-radius: 140px;
+      border: 1.4px solid #e3e3e3;
+      position: relative;
+      z-index: ${last ? '2' : '1'};
+    }
+  `;
+
+  const RemainBox = styled.div`
+    width: 28px;
+    height: 28px;
+    margin-left: -12px;
+    background: #fff;
+    border-radius: 140px;
+    border: 1.4px solid #e3e3e3;
+    z-index: 3;
+    text-align: center;
+
+    p {
+      font-size: 12px;
+      color: #484848;
+    }
+  `;
+
+  return (
+    <ProfileContainer>
+      <ImageBox>
+        <img src={src} alt="프로필 이미지" />
+      </ImageBox>
+      {peopleNum > 0 && (
+        <RemainBox>
+          <p>{peopleNum}</p>
+        </RemainBox>
+      )}
+    </ProfileContainer>
+  );
+}
+
+export default ProfileUser;

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 (
+          <ProfileUser
+            key={userId}
+            id={userId}
+            src={userMessages[0].profileImageURL}
+            peopleNum={last ? `+${peopleNum - 3}` : null}
+            last={last}
+          />
+        );
+      })}
+    </>
+  );
+}
+
+export default WrittenByIcons;

src/pages/PostId.jsx

@@ -27,11 +27,11 @@ const userBackgroundColors = {
 };
 
 export const PostIdWrapper = styled.div`
-  background-color: ${(props) => {
-    const colorInfo = userBackgroundColors[props.color];
+  background-color: ${($props) => {
+    const colorInfo = userBackgroundColors[$props.color];
     return colorInfo && colorInfo.background;
   }};
-  background-image: url(${(props) => props.$image || 'none'});
+  background-image: url(${($props) => $props.image || 'none'});
   background-attachment: fixed;
   background-size: cover;
   background-position: center;