From ebded3726cf7be1ce5e4f3addec918ecbe3c2957 Mon Sep 17 00:00:00 2001
From: dbwhdtjr0457 <dbwhdtjr0457@khu.ac.kr>
Date: Wed, 29 Nov 2023 17:00:36 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EA=B0=81=20=EC=9D=B4=EB=AF=B8=EC=A7=80?=
 =?UTF-8?q?=EB=A5=BC=20=ED=8C=8C=EC=8B=B1=ED=95=98=EC=97=AC=20shapeAtom?=
 =?UTF-8?q?=EC=97=90=20=EC=A0=80=EC=9E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FE/src/atoms/shapeAtom.js |  2 +-
 FE/src/pages/MainPage.js  | 34 ++++++++++++++++++----------------
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/FE/src/atoms/shapeAtom.js b/FE/src/atoms/shapeAtom.js
index 69e3ca5..6cfc8ac 100644
--- a/FE/src/atoms/shapeAtom.js
+++ b/FE/src/atoms/shapeAtom.js
@@ -2,7 +2,7 @@ import { atom } from "recoil";
 
 const shapeAtom = atom({
   key: "shapeState",
-  default: {},
+  default: [],
 });
 
 export default shapeAtom;
diff --git a/FE/src/pages/MainPage.js b/FE/src/pages/MainPage.js
index 2142136..a58a9cc 100644
--- a/FE/src/pages/MainPage.js
+++ b/FE/src/pages/MainPage.js
@@ -16,7 +16,7 @@ import DiaryLoadingModal from "../components/DiaryModal/DiaryLoadingModal";
 function MainPage() {
   const [diaryState, setDiaryState] = useRecoilState(diaryAtom);
   const userState = useRecoilValue(userAtom);
-  const setShapeState = useSetRecoilState(shapeAtom);
+  const [shapeState, setShapeState] = useRecoilState(shapeAtom);
 
   useEffect(() => {
     setDiaryState((prev) => {
@@ -48,12 +48,22 @@ function MainPage() {
                 Authorization: `Bearer ${userState.accessToken}`,
               },
             }).then(async (res) => ({
+              uuid: shape.uuid,
               data: await res.text(),
             })),
           );
 
-          console.log(await Promise.all(shapeDataList));
-          setShapeState(await Promise.all(shapeDataList));
+          setShapeState(
+            await Promise.all(shapeDataList).then((res) =>
+              res.map((shape) => {
+                const newShape = {
+                  ...shape,
+                  data: shape.data.replace(/<\?xml.*?\?>/, ""),
+                };
+                return newShape;
+              }),
+            ),
+          );
         });
     }
 
@@ -74,20 +84,12 @@ function MainPage() {
           }));
         }}
       />
-      <svg
-        xmlns='http://www.w3.org/2000/svg'
-        viewBox='0 0 100 100'
-        width='4rem'
-        height='4rem'
-      >
-        <defs>
-          <style>{`.cls-1{fill:none;stroke:gray;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.06px;}`}</style>
-        </defs>
-        <polygon
-          className='cls-1'
-          points='50 23.94 58.31 41.69 76.06 50 58.31 58.31 50 76.06 41.69 58.31 23.94 50 41.69 41.69 50 23.94'
+      {shapeState.map((shape) => (
+        <div
+          key={shape.uuid}
+          dangerouslySetInnerHTML={{ __html: shape.data }}
         />
-      </svg>
+      ))}
       {diaryState.isCreate ? <DiaryCreateModal /> : null}
       {diaryState.isRead ? <DiaryReadModal /> : null}
       {diaryState.isUpdate ? <DiaryUpdateModal /> : null}