feat(mypage.jsx): implement test today display for testing

LikeLionHGU · Aug 4, 2024 · ac96749 · ac96749
1 parent cc12ed3
commit ac96749
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 1 deletion.
diff --git a/src/components/Mypage/PersonalViewMain.jsx b/src/components/Mypage/PersonalViewMain.jsx
@@ -21,10 +21,14 @@ import styled from "styled-components";
 import { convertMlToL, removeNonNumeric } from "src/tools/tool";
 import TheButton from "src/styles/TheButton";
 import { HoverImageSpan } from "../../styles/stylePresets";
+import { useSetRecoilState } from "recoil";
+import { userDetailAtom } from "../../recoil/userAtoms";
 
 function PersonalViewMain() {
   const fetchBe = useFetchBe();
 
+  const setUserData = useSetRecoilState(userDetailAtom);
+
   const [loading, setLoading] = useState({
     bottle: false,
     cup: false,
@@ -54,6 +58,9 @@ function PersonalViewMain() {
         alert("Error while adding water");
         return;
       }
+      fetchBe("/userDetail/get").then((json) => {
+        setUserData(json);
+      });
       setTimeout(
         setLoading((prev) => ({
           ...prev,

diff --git a/src/pages/Mypage.jsx b/src/pages/Mypage.jsx
@@ -23,6 +23,7 @@ import PersonalViewMain from "../components/Mypage/PersonalViewMain";
 import { HoverImageSpan } from "../styles/stylePresets";
 import GroupViewExploreMain from "../components/Mypage/GroupViewExploreMain";
 import GroupViewExploreTop from "../components/Mypage/GroupViewExploreTop";
+import { convertMlToL } from "../tools/tool";
 
 function Mypage() {
   const resetAuth = useResetRecoilState(authJwtAtom);
@@ -109,7 +110,17 @@ function Mypage() {
             </TopBlock.right>
           </TopBlock.wrapper>
           <MainAreaWrapper>
-            {groupMode === 0 && <PersonalViewMain />}
+            {groupMode === 0 && (
+              <>
+                <PersonalViewMain />
+                <TempText>
+                  <div>
+                    Today <br />
+                    {convertMlToL(userData.todayTotal)}L
+                  </div>
+                </TempText>
+              </>
+            )}
             {groupMode === 1 && <GroupViewExploreMain />}
           </MainAreaWrapper>
         </div>
@@ -212,4 +223,21 @@ const VeryTopWrapper = styled.div`
 const MainAreaWrapper = styled.div`
   width: 100%;
   min-height: 535px;
+  position: relative;
+`;
+
+const TempText = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  div {
+    display: inline-block;
+    margin: auto;
+    font-size: 64px;
+    font-weight: bold;
+    text-align: center;
+    background-color: lightgray;
+  }
 `;