Merge pull request #58 from LikeLionHGU/#56/UserPointPage-최예라

#56/user point page 최예라
LikeLionHGU · Aug 4, 2024 · 81d20d2 · 81d20d2
2 parents 54e44b8 + c862225
commit 81d20d2
Show file tree

Hide file tree

Showing 5 changed files with 179 additions and 7 deletions.
diff --git a/src/assets/img/grayUserLevel1.svg b/src/assets/img/grayUserLevel1.svg
diff --git a/src/assets/img/grayUserLevel2.svg b/src/assets/img/grayUserLevel2.svg
diff --git a/src/assets/img/grayUserLevel3.svg b/src/assets/img/grayUserLevel3.svg
diff --git a/src/components/MainPage/BannerMain.jsx b/src/components/MainPage/BannerMain.jsx
@@ -1,15 +1,75 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import mainBannerImg from "../../assets/img/MainBanner.svg";
+import axios from "axios";
 
 function BannerMain() {
+  const [userLevel, setUserLevel] = useState();
+  const [userData, setUserData] = useState();
+
+  useEffect(() => {
+    axios
+      .get(`${process.env.REACT_APP_HOST_URL}/api/mypage`, {
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem("jwtToken")}`,
+        },
+      })
+      .then((response) => {
+        console.log(response.data);
+        setUserData(response.data);
+      })
+      .catch(() => {
+        setUserData({});
+      });
+  }, []);
+
+  useEffect(() => {
+    axios
+      .get(`${process.env.REACT_APP_HOST_URL}/api/mypage/exp`, {
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem("jwtToken")}`,
+        },
+      })
+      .then((response) => {
+        console.log(response.data);
+        setUserLevel(response.data);
+      })
+      .catch(() => {
+        setUserLevel({});
+      });
+  }, []);
+
+  if (!userData) return <div>Loading..</div>;
+  if (!userLevel) return <div>Loading..</div>;
+
+  const getLevelText = (level) => {
+    switch (level) {
+      case 0:
+        return "씨클 Lv.1";
+      case 1:
+        return "비클 Lv.2";
+      case 2:
+        return "에이클 Lv.3";
+      case 3:
+        return "피클 Lv.4";
+      default:
+        return " ";
+    }
+  };
+
   return (
     <Wrapper>
       <BannerBg>
         <Greeting>
-          <MainText>안녕하세요, 최예라 님</MainText>
-          <MainText>어떤 운동을 계획 중이세요 ?</MainText>
-          <Rate>Lv.1</Rate>
+          {userData.nickname ? (
+            <>
+              <MainText>안녕하세요, {userData.nickname} 님</MainText>
+            </>
+          ) : (
+            <MainText>안녕하세요!</MainText>
+          )}
+          <MainText>어떤 운동을 계획 중이세요?</MainText>
+          <Rate>{getLevelText(userLevel.level)}</Rate>
         </Greeting>
       </BannerBg>
     </Wrapper>

diff --git a/src/components/UserPage/UserPointContent.jsx b/src/components/UserPage/UserPointContent.jsx
@@ -1,18 +1,51 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import userLevel0 from "../../assets/img/UserLevel0.svg";
 import userLevel1 from "../../assets/img/UserLevel1.svg";
 import userLevel2 from "../../assets/img/UserLevel2.svg";
 import userLevel3 from "../../assets/img/UserLevel3.svg";
 import star from "../../assets/img/rateStar.svg";
 import arrow from "../../assets/img/rateArrow.svg";
+import axios from "axios";
 
 function UserPointContent() {
+  const [userLevel, setUserLevel] = useState();
+  const [data, setData] = useState();
+
+  useEffect(() => {
+    axios
+      .get(`${process.env.REACT_APP_HOST_URL}/api/mypage/exp`, {
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem("jwtToken")}`,
+        },
+      })
+      .then((response) => {
+        console.log(response.data);
+        setUserLevel(response.data);
+      });
+  }, []);
+
+  useEffect(() => {
+    axios
+      .get(`${process.env.REACT_APP_HOST_URL}/api/mypage`, {
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem("jwtToken")}`,
+        },
+      })
+      .then((response) => {
+        console.log(response.data);
+        setData(response.data);
+      });
+  }, []);
+
+  if (!userLevel) return <div>Loading..</div>;
+  if (!data) return <div>Loading..</div>;
+
   return (
     <>
       <Wrapper>
         <UserSection>
-          <Title>현재 예라님의 등급이에요 !</Title>
+          <Title>현재 {data.nickname}님의 등급이에요 !</Title>
           <UserImg>
             <img src={userLevel0} alt="0등급" />
           </UserImg>
@@ -57,7 +90,7 @@ function UserPointContent() {
               <Category>다음 등급</Category>
               <TextContainer>
                 <Text>
-                  3번 이상 강의를 들을 시 <Blue>'씽씽이'</Blue> 달성
+                  3번 이상 강의를 들을 시 <Blue> '씽씽이' </Blue> 달성
                   <img src={star} alt="별 아이콘" />
                 </Text>
               </TextContainer>