feat: 읽기 모달에 아이콘 출력

일기를 읽고자 할 때 일기 모달을 열 경우 일기 데이터의 shapeUuid를 이용해 요청을 보내고
응답으로 받은 readableStream을img로 변환하는 작업을 진행하였습니다.

FE/src/components/DiaryModal/DiaryCreateModal.js

@@ -103,8 +103,7 @@ function DiaryCreateModal() {
             },
           });
 
-        const promise = getPromise();
-        return promise
+        return getPromise()
           .then((res) => {
             const reader = res.body.getReader();
             return new ReadableStream({

FE/src/components/DiaryModal/DiaryReadModal.js

@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 import React from "react";
 import { useQuery } from "react-query";
 import styled from "styled-components";
@@ -8,7 +10,6 @@ import ModalWrapper from "../../styles/Modal/ModalWrapper";
 import DiaryDeleteModal from "./DiaryDeleteModal";
 import editIcon from "../../assets/edit.svg";
 import deleteIcon from "../../assets/delete.svg";
-import starIcon from "../../assets/star.svg";
 import indicatorArrowIcon from "../../assets/indicator-arrow.svg";
 
 function DiaryModalEmotionIndicator({ emotion }) {
@@ -55,8 +56,48 @@ async function getDiary(accessToken, diaryUuid) {
 function DiaryReadModal() {
   const [diaryState, setDiaryState] = useRecoilState(diaryAtom);
   const userState = useRecoilValue(userAtom);
-  const { data, isLoading, isError } = useQuery("diary", () =>
-    getDiary(userState.accessToken, diaryState.diaryUuid),
+  const [shapeData, setShapeData] = React.useState("");
+  const { data, isLoading, isError } = useQuery(
+    "diary",
+    () => getDiary(userState.accessToken, diaryState.diaryUuid),
+    {
+      onSuccess: (_data) => {
+        const getPromise = () =>
+          fetch(`http://223.130.129.145:3005/shapes/${_data.shapeUuid}`, {
+            method: "GET",
+            headers: {
+              "Content-Type": "application/json",
+              Authorization: `Bearer ${userState.accessToken}`,
+            },
+          });
+
+        return getPromise()
+          .then((res) => {
+            const reader = res.body.getReader();
+            return new ReadableStream({
+              start(controller) {
+                function pump() {
+                  return reader.read().then(({ done, value }) => {
+                    if (done) {
+                      controller.close();
+                      return;
+                    }
+                    controller.enqueue(value);
+                    return pump();
+                  });
+                }
+                return pump();
+              },
+            });
+          })
+          .then((stream) => new Response(stream))
+          .then((res) => res.blob())
+          .then((blob) => URL.createObjectURL(blob))
+          .then((url) => {
+            setShapeData(url);
+          });
+      },
+    },
   );
 
   // TODO: 로딩, 에러 처리 UI 구현
@@ -66,6 +107,7 @@ function DiaryReadModal() {
         Loading...
       </ModalWrapper>
     );
+
   if (isError)
     return (
       <ModalWrapper left='67%' width='40vw' height='65vh' opacity='0.3'>
@@ -132,7 +174,7 @@ function DiaryReadModal() {
         />
         <DiaryModalIcon>
           <img
-            src={starIcon}
+            src={shapeData}
             alt='star'
             style={{
               width: "5rem",