feat : 함께보기(홈) 프사 연동, 일기생성 말풍선 추가

src/components/OtherDiaryCard/OtherDiaryCard.types.ts

@@ -14,4 +14,5 @@ export interface NewDiaryCardProps {
   photoUrl: string;
   content: string;
   createAt: string;
+  profileUrl: string;
 }

src/newPages/homeOther/HomeOther.styles.ts

@@ -81,6 +81,15 @@ export const Tab = styled.button<{ active: boolean }>`
   padding: 10px 0;
   border: none;
   border-bottom: ${({ active }) => (active ? "3px solid #000000" : "none")};
+  color: var(--Color-Styles-black-000, #151515);
+  text-align: center;
+
+  /* Text Styles/body1-bold */
+  font-family: Pretendard;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 150%; /* 24px */
 
   cursor: pointer;
   font-size: 16px;

src/newPages/homeOther/HomeOther.tsx

@@ -54,7 +54,8 @@ const HomeOther = () => {
         likeCount: card.likeCount,
         photoUrl: card.imageResDtoList[0].convertImageUrl,
         content: card.content,
-        createAt: card.createAt
+        createAt: card.createAt,
+        writerPicture: card.writerPicture
       }));
       console.log("가공된", cardData);
       setCard(cardData);
@@ -93,6 +94,7 @@ const HomeOther = () => {
             photoUrl={cards.photoUrl}
             content={cards.content}
             createAt={cards.createAt}
+            profileUrl={cards.writerPicture}
           />
         ))}
       </S.Container>

src/newPages/homeOther/PostComponent.tsx

@@ -25,8 +25,13 @@ const Avatar = styled.div`
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  background-color: #ddd;
   margin-right: 10px;
+  overflow: hidden;
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 `;
 
 const UserName = styled.span`
@@ -111,7 +116,8 @@ const PostComponent = ({
   likeNumber,
   photoUrl,
   content,
-  createAt
+  createAt,
+  profileUrl
 }: NewDiaryCardProps) => {
   const navigate = useNavigate();
   const handleClick = () => {
@@ -120,7 +126,9 @@ const PostComponent = ({
   return (
     <CardWrapper>
       <Header>
-        <Avatar />
+        <Avatar>
+          <img src={profileUrl} />
+        </Avatar>
         <UserName>{userName}</UserName>
         <FriendButton>
           <img src={Friend} />

src/pages/otherCollection/OtherCollection.types.ts

@@ -18,4 +18,5 @@ export interface NewCard {
   diaryId: number;
   content: string;
   createAt: string;
+  writerPicture: string;
 }

src/pages/writeDiary/WriteDiary.tsx

@@ -98,7 +98,12 @@ const WriteDiary = () => {
             </S.PaginationWrapper>
           </>
         ) : null}
-        {isEmotionVisible ? <EmotionChoice /> : null}
+        {isEmotionVisible ? (
+          <>
+            <BotChatBubble text={"이야기 잘 들었어요!\n이때의 기분은 어떠셨나요?"} />
+            <EmotionChoice />
+          </>
+        ) : null}
       </S.ChatWrapper>
 
       {isRecording && <div style={{ height: "500px" }} />}