Merge pull request #69 from boostcampwm2023/feat/27-mock-up-data

[Feat] 일기 목업 데이터 작성 및 연결
boostcampwm2023 · Nov 21, 2023 · b566c3e · b566c3e
2 parents 9266268 + 91d9957
commit b566c3e
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 43 deletions.
diff --git a/FE/public/data/data.json b/FE/public/data/data.json
@@ -0,0 +1,15 @@
+{
+  "userId": "관리자",
+  "title": "테스트 제목",
+  "content": "테스트 내용",
+  "date": "9999-99-99",
+  "tags": ["테스트1", "테스트2"],
+  "positive": 10,
+  "neutral": 50,
+  "negative": 40,
+  "sentiment": "중립",
+  "coordinate-x": 0,
+  "coordinate-y": 0,
+  "coordinate-z": 0,
+  "shapeUuid": "테스트 별모양 UUID"
+}
diff --git a/FE/src/components/DiaryModal/DiaryReadModal.js b/FE/src/components/DiaryModal/DiaryReadModal.js
@@ -1,4 +1,5 @@
 import React from "react";
+import { useQuery } from "react-query";
 import styled from "styled-components";
 import { useRecoilState } from "recoil";
 import diaryAtom from "../../atoms/diaryAtom";
@@ -13,40 +14,51 @@ function DiaryModalEmotionIndicator({ emotion }) {
   return (
     <EmotionIndicatorWrapper>
       <EmotionIndicatorBar>
-        <EmotionIndicator ratio={emotion.positive} color='#618CF7' />
+        <EmotionIndicator ratio={`${emotion.positive}%`} color='#618CF7' />
         <EmotionIndicatorArrow>
           <img
             src={indicatorArrowIcon}
             alt='arrow'
             style={{ width: "1rem", height: "1rem" }}
           />
         </EmotionIndicatorArrow>
-        <EmotionIndicator ratio={emotion.neutral} color='#A848F6' />
+        <EmotionIndicator ratio={`${emotion.neutral}%`} color='#A848F6' />
         <EmotionIndicatorArrow>
           <img
             src={indicatorArrowIcon}
             alt='arrow'
             style={{ width: "1rem", height: "1rem" }}
           />
         </EmotionIndicatorArrow>
-        <EmotionIndicator ratio={emotion.negative} color='#E5575B' />
+        <EmotionIndicator ratio={`${emotion.negative}%`} color='#E5575B' />
       </EmotionIndicatorBar>
       <EmotionTextWrapper>
-        <EmotionText>긍정 {emotion.positive}</EmotionText>
-        <EmotionText>중립 {emotion.neutral}</EmotionText>
-        <EmotionText>부정 {emotion.negative}</EmotionText>
+        <EmotionText>긍정 {emotion.positive}%</EmotionText>
+        <EmotionText>중립 {emotion.neutral}%</EmotionText>
+        <EmotionText>부정 {emotion.negative}%</EmotionText>
       </EmotionTextWrapper>
     </EmotionIndicatorWrapper>
   );
 }
 
+async function getDiary() {
+  return fetch("http://localhost:3000/data/data.json").then((res) =>
+    res.json(),
+  );
+}
+
 function DiaryReadModal() {
   const [diaryState, setDiaryState] = useRecoilState(diaryAtom);
+  const { data, isLoading, isError } = useQuery("diary", getDiary);
+
+  // TODO: 로딩, 에러 처리 UI 구현
+  if (isLoading) return <div>로딩중...</div>;
+  if (isError) return <div>에러가 발생했습니다</div>;
 
   return (
     <ModalWrapper left='67%' width='40vw' height='65vh' opacity='0.3'>
       <DiaryModalHeader>
-        <DiaryModalTitle>아주 멋진 나!</DiaryModalTitle>
+        <DiaryModalTitle>{data.title}</DiaryModalTitle>
         <DiaryButton>
           <img
             src={editIcon}
@@ -76,47 +88,21 @@ function DiaryReadModal() {
           />
         </DiaryButton>
       </DiaryModalHeader>
-      <DiaryModalContent>
-        오늘은 멋있는 모달을 만들었다. 멋있다! 오늘은 멋있는 모달을 만들었다.
-        멋있다! 오늘은 멋있는 모달을 만들었다. 멋있다! 오늘은 멋있는 모달을
-        만들었다. 멋있다! 오늘은 멋있는 모달을 만들었다. 멋있다! 오늘은 멋있는
-        모달을 만들었다. 멋있다! 오늘은 멋있는 모달을 만들었다. 멋있다! 오늘은
-        멋있는 모달을 만들었다. 멋있다! 오늘은 멋있는 모달을 만들었다. 멋있다!
-        오늘은 멋있는 모달을 만들었다. 멋있다! 오늘은 멋있는 모달을 만들었다.
-        멋있다! 오늘은 멋있는 모달을 만들었다. 멋있다! 오늘은 멋있는 모달을
-        만들었다. 멋있다! 오늘은 멋있는 모달을 만들었다. 멋있다! 오늘은 멋있는
-        모달을 만들었다. 멋있다! 오늘은 멋있는 모달을 만들었다. 멋있다! 오늘은
-        멋있는 모달을 만들었다. 멋있다! 오늘은 멋있는 모달을 만들었다. 멋있다!
-        오늘은 멋있는 모달을 만들었다. 멋있다! 오늘은 멋있는 모달을 만들었다.
-        멋있다! 오늘은 멋있는 모달을 만들었다. 멋있다! 오늘은 멋있는 모달을
-        만들었다. 멋있다! 오늘은 멋있는 모달을 만들었다. 멋있다! 오늘은 멋있는
-        모달을 만들었다. 멋있다! 오늘은 멋있는 모달을 만들었다. 멋있다! 오늘은
-        멋있는 모달을 만들었다. 멋있다! 오늘은 멋있는 모달을 만들었다. 멋있다!
-        오늘은 멋있는 모달을 만들었다. 멋있다! 오늘은 멋있는 모달을 만들었다.
-        멋있다! 오늘은 멋있는 모달을 만들었다. 멋있다! 오늘은 멋있는 모달을
-        만들었다. 멋있다! 오늘은 멋있는 모달을 만들었다. 멋있다! 오늘은 멋있는
-        모달을 만들었다. 멋있다! 오늘은 멋있는 모달을 만들었다. 멋있다! 오늘은
-        멋있는 모달을 만들었다. 오늘은 멋있는 모달을 만들었다. 멋있다! 오늘은
-        멋있는 모달을 만들었다. 멋있다! 오늘은 멋있는 모달을 만들었다. 멋있다!
-        오늘은 멋있는 모달을 만들었다. 오늘은 멋있는 모달을 만들었다. 멋있다!
-        오늘은 멋있는 모달을 만들었다. 멋있다! 오늘은 멋있는 모달을 만들었다.
-        멋있다! 오늘은 멋있는 모달을 만들었다. 오늘은 멋있는 모달을 만들었다.
-        멋있다! 오늘은 멋있는 모달을 만들었다. 멋있다! 오늘은 멋있는 모달을
-        만들었다. 멋있다! 오늘은 멋있는 모달을 만들었다.
-      </DiaryModalContent>
+      <DiaryModalContent>{data.content}</DiaryModalContent>
       <DiaryModalTagBar>
         <DiaryModalTagName>태그</DiaryModalTagName>
         <DiaryModalTagList>
-          <DiaryModalTag>멋있다!</DiaryModalTag>
-          <DiaryModalTag>맛있다!</DiaryModalTag>
+          {data.tags.map((tag) => (
+            <DiaryModalTag>{tag}</DiaryModalTag>
+          ))}
         </DiaryModalTagList>
       </DiaryModalTagBar>
       <DiaryModalEmotionBar>
         <DiaryModalEmotionIndicator
           emotion={{
-            positive: "50%",
-            neutral: "20%",
-            negative: "30%",
+            positive: data.positive,
+            neutral: data.neutral,
+            negative: data.negative,
           }}
         />
         <DiaryModalIcon>

diff --git a/FE/src/index.js b/FE/src/index.js
@@ -1,13 +1,16 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
+import { QueryClient, QueryClientProvider } from "react-query";
 import { RecoilRoot } from "recoil";
 import App from "./App";
 
 const root = ReactDOM.createRoot(document.getElementById("root"));
 root.render(
   <React.StrictMode>
-    <RecoilRoot>
-      <App />
-    </RecoilRoot>
+    <QueryClientProvider client={new QueryClient()}>
+      <RecoilRoot>
+        <App />
+      </RecoilRoot>
+    </QueryClientProvider>
   </React.StrictMode>,
 );