[#95]Chore: 자잘한 css 수정 및 map tree 추가

ITisYourLife-3rd-JJAN · May 30, 2023 · a1b4fdd · a1b4fdd
1 parent 32c6659
commit a1b4fdd
Show file tree

Hide file tree

Showing 17 changed files with 125 additions and 37 deletions.
diff --git a/public/assets/images/tree1.png b/public/assets/images/tree1.png
diff --git a/public/assets/images/tree2.png b/public/assets/images/tree2.png
diff --git a/public/assets/images/tree3.png b/public/assets/images/tree3.png
diff --git a/public/assets/images/tree4.png b/public/assets/images/tree4.png
diff --git a/src/components/Mission/Quiz.jsx b/src/components/Mission/Quiz.jsx
@@ -2,11 +2,11 @@ import { React } from 'react';
 import { useNavigate } from 'react-router-dom';
 import './quiz.css'
 
-const Quiz = ({missionId, mapNum, missionNum, title, explain, answer }) => {
+const Quiz = ({missionPk, mapNum, missionNum, title, explain, answer }) => {
     const navigate = useNavigate();
 
     const handleAnswerClick = (isO) => {
-        navigate(`/kid/solution/${missionId}`, { state: { isO, explain, mapNum, missionNum, answer , title} });
+        navigate(`/kid/solution/${missionPk}`, { state: { isO, explain, mapNum, missionNum, answer , title} });
     };
 
     return (

diff --git a/src/components/Mission/Vod.jsx b/src/components/Mission/Vod.jsx
@@ -4,8 +4,9 @@ import confetti from "https://esm.run/canvas-confetti@1";
 import { useNavigate, useParams } from "react-router-dom";
 import axios from 'axios';
 
-const Vod = ({ missionId, missionNum, title, vodUrl}) => {
+const Vod = ({ missionPk, missionNum, title, vodUrl}) => {
     const [watched, setWatched] = useState(false);
+    const userId = sessionStorage.getItem("userId");
 
     const navigate = useNavigate();
     const { mapId } = useParams();
@@ -25,10 +26,11 @@ const Vod = ({ missionId, missionNum, title, vodUrl}) => {
 
 
     const saveMissionStatus = () => {
+        console.log(missionPk)
         axios
         .post("http://localhost:8080/api/v1/missions", {
-            solvedMissionId: missionId,
-            solvedUserId: 2,
+            solvedMissionId: missionPk,
+            solvedUserId: userId,
             status : 1
         })
         .then((response) => {

diff --git a/src/components/MissionBanner/MissionBanner.jsx b/src/components/MissionBanner/MissionBanner.jsx
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import Select from 'react-select'
 import './missionBanner.css'
 import axios from 'axios';
+import { markThousand } from '../../lib/markThousand';
 
 
 const DebitBanner = ({setKidUserId, setKidUserName}) => {
@@ -35,8 +36,6 @@ const DebitBanner = ({setKidUserId, setKidUserName}) => {
                     setKidBalance(updateBalance)
 
                     setKidOptions(updateKidOptions)
-                    // console.log(updateKidOptions)
-                    // console.log(childData)
                 })
         }
         getChildAxios()
@@ -51,7 +50,7 @@ const DebitBanner = ({setKidUserId, setKidUserName}) => {
             </div>
             <div className='kidBalance'>
                 <div>아이 현재 잔액:</div>
-                <div>{nowKidBalance} 원</div>
+                <div>{markThousand(nowKidBalance)} 원</div>
             </div>
             <div className='kidSelect'>
                 <Select

diff --git a/src/components/debitBanner/DebitBanner.jsx b/src/components/debitBanner/DebitBanner.jsx
@@ -185,7 +185,7 @@ const DebitBanner = ({idx, color, setKidUserId, setKidUserName}) => {
                 </div>
                 <div className='kidBalance'>
                     <div className='usespace'>아이 현재 잔액: </div>
-                    <div> {nowKidBalance} 원</div>
+                    <div> {markThousand(nowKidBalance)} 원</div>
                 </div>
                 <div className='kidSelect'>
                     <Select

diff --git a/src/components/payHistory/QRcode.jsx b/src/components/payHistory/QRcode.jsx
@@ -1,9 +1,26 @@
 import React, { useEffect, useState } from 'react';
 import axios from 'axios';
+import { markThousand } from '../../lib/markThousand';
 
 const QRCode = () => {
   const [qrCodeImage, setQRCodeImage] = useState('');
   const userId = sessionStorage.getItem('userId');
+  const [balance, setBalance] = useState('');
+  const [showBalance, setShowBalance] = useState(false);
+  const username = sessionStorage.getItem('username');
+
+
+  const getUser = () => {
+    axios
+      .get(`http://localhost:8080/api/v1/users/${userId}`)
+      .then((response) => {
+        console.log(response.data.data);
+        setBalance(markThousand(response.data.data.balance));
+      })
+      .catch((error) => {
+        console.log(error.response.data);
+      });
+  };
 
   useEffect(() => {
     const fetchQRCodeImage = async () => {
@@ -18,15 +35,47 @@ const QRCode = () => {
         console.error('짠페이 생성에 실패했습니다.:', error);
       }
     };
-
+    getUser();
     fetchQRCodeImage();
-  }, [userId]);
+  }, []);
+
+  const handleMouseEnter = () => {
+    setShowBalance(true);
+  };
+
+  const handleMouseLeave = () => {
+    setShowBalance(false);
+  };
 
   return (
-    <div style={{marginLeft:'1.5rem'}}>
-      {qrCodeImage && <img style={{width: '90%'}} src={qrCodeImage} alt="QR Code" />}
+    <div style={{ marginLeft: '1.5rem' }}>
+      {qrCodeImage && (
+        <div
+          style={{ position: 'relative', display: 'inline-block' }}
+          onMouseEnter={handleMouseEnter}
+          onMouseLeave={handleMouseLeave}
+        >
+          <img style={{ width: '90%' }} src={qrCodeImage} alt="QR Code" />
+          {showBalance && (
+            <div
+              style={{
+                position: 'absolute',
+                left: '45%',
+                transform: 'translate(-50%, -50%)',
+                backgroundColor: 'rgba(0, 0, 0, 0.5)',
+                color: '#fff',
+                padding: '0.5rem',
+                borderRadius: '4px',
+                fontSize: '2rem'
+              }}
+            >
+              {username}님<br/>{balance}원
+            </div>
+          )}
+        </div>
+      )}
     </div>
   );
 };
 
-export default QRCode;
+export default QRCode;
diff --git a/src/components/profile/FamCard.jsx b/src/components/profile/FamCard.jsx
@@ -59,9 +59,10 @@ import Loading from '../../lib/Loading';
         imgSrc = `${process.env.PUBLIC_URL}/assets/images/boy.png`;
     }
 
-    const checkLevel = (userAchieve) => {
-        var mapNum = Math.ceil(userAchieve / 7);
-        var missionNum = userAchieve % 8;
+    const checkLevel = (num) => {
+        var mapNum = Math.ceil(num / 7);
+        if(mapNum == 0 ) mapNum = 1;
+        var missionNum = num % 7 + 1;
         return `${mapNum}-${missionNum}` 
     }
 

diff --git a/src/components/profile/StateCard.jsx b/src/components/profile/StateCard.jsx
@@ -29,9 +29,10 @@ const StateCard = () => {
           getUser();
         }, []);
 
-        const checkLevel = (userAchieve) => {
-            var mapNum = Math.ceil(userAchieve / 7);
-            var missionNum = userAchieve % 8;
+        const checkLevel = (num) => {
+            var mapNum = Math.ceil(num / 7);
+            if(mapNum == 0 ) mapNum = 1;
+            var missionNum = num % 7 + 1;
             return `${mapNum}-${missionNum}` 
         }
 
@@ -45,7 +46,7 @@ const StateCard = () => {
                 <p>현재 단계 : {checkLevel(userAchieve)}</p>
             </div>
             <div className='present-state'>
-                <p>보유 금액 : {userBalance}</p>
+                <p>보유 금액 : {userBalance}원</p>
             </div>
         </div>
     );

diff --git a/src/components/slider/Slider.jsx b/src/components/slider/Slider.jsx
@@ -64,7 +64,8 @@ export default class SimpleSlider extends Component {
 
         const checkLevel = (num) => {
             var mapNum = Math.ceil(num / 7);
-            var missionNum = num % 8;
+            if(mapNum == 0 ) mapNum = 1;
+            var missionNum = num % 7 + 1;
             return `${mapNum}-${missionNum}` 
         }
 

diff --git a/src/pages/Map.jsx b/src/pages/Map.jsx
@@ -9,6 +9,7 @@ const Map = () => {
     const achieveStatus_full = 7; // 나중에 실제로 사용할 데이터 변수
     const achieveStatus = 0; // 나중에 실제로 사용할 데이터 변수
     const [isLoading, setIsLoading] = useState(true);
+    const [achieve, setAchieve] = useState();
 
     const [status, setStatus] = useState();
     const [preMap, setPreMap] = useState(0);
@@ -23,7 +24,7 @@ const Map = () => {
                 .then((response) => {
                     console.log(response.data.data)
                     setStatus(response.data.data.achieve)
-
+                    setAchieve(response.data.data.achieve)
                     var quotient = Math.floor(status / 7);
                     switch (quotient) {
                     case 0:
@@ -51,10 +52,8 @@ const Map = () => {
                     console.log(error.response.data);
                 })
         };
-
         getUserAchieve();
-
-    }, [status]);
+    }, [status, achieve]);
 
     if (isLoading) {
         return <Loading/>;
@@ -98,10 +97,39 @@ const Map = () => {
                     alt=''
                     className='map-background-image'/>
                 {mapBoxes}
-
             </div> 
+            {achieve >= 1 && achieve <= 5 && (
+            <img
+                src={`${process.env.PUBLIC_URL}/assets/images/tree1.png`}
+                alt=''
+                className='tree'
+            />
+            )}
+            {achieve >= 6 && achieve <= 13 && (
+            <img
+                src={`${process.env.PUBLIC_URL}/assets/images/tree2.png`}
+                alt=''
+                className='tree'
+            />
+            )}
+            {achieve >= 14 && achieve <= 19 && (
+            <img
+                src={`${process.env.PUBLIC_URL}/assets/images/tree3.png`}
+                alt=''
+                className='tree'
+            />
+            )}
+            {achieve >= 20 && achieve <= 42 && (
+            <img
+                src={`${process.env.PUBLIC_URL}/assets/images/tree4.png`}
+                alt=''
+                className='tree'
+            />
+            )}
         </>
     );
-};
+}
+
+
 
 export default Map;
diff --git a/src/pages/Mission.jsx b/src/pages/Mission.jsx
@@ -9,6 +9,7 @@ import Loading from '../lib/Loading';
 
 const Mission = () => {
     const { mapId, missionId } = useParams();
+    const [ missionPk, setMissionPk ] = useState("");
     const [isQuiz, setIsQuiz] = useState(false);
     const [explain, setExplain] = useState("");
     const [title, setTitle] = useState("");
@@ -26,6 +27,7 @@ const Mission = () => {
                     const data = response.data.data;
                     data.missionType === "Q" ? setIsQuiz(true) : setIsQuiz(false);
 
+                    setMissionPk(data.missionId);
                     setTitle(data.title);
                     setExplain(data.explain);
                     setVodUrl(data.vodUrl);
@@ -47,8 +49,8 @@ const Mission = () => {
         <div>
             <Header/>
             {isQuiz ? 
-                <Quiz missionId={missionId} mapNum={mapId}  missionNum={missionId} title={title} explain={explain} answer={answer} /> 
-                : <Vod missionId={missionId} mapNum={mapId} missionNum={missionId} title={title} vodUrl={vodUrl}/>
+                <Quiz missionPk={missionPk} mapNum={mapId}  missionNum={missionId} title={title} explain={explain} answer={answer} /> 
+                : <Vod missionPk={missionPk} mapNum={mapId} missionNum={missionId} title={title} vodUrl={vodUrl}/>
             }
             <MapBackground mapId={missionId} isMap={false} />
         </div>

diff --git a/src/pages/MissionList.jsx b/src/pages/MissionList.jsx
@@ -40,9 +40,9 @@ const MissionList = () => {
         };
         getUserMission();
       }, []);
-      
+
       useEffect(() => {
-        const isMissionNumExist = missionData.some(mission => mission.missionNum !== undefined);
+        const isMissionNumExist = missionData.length > 0 && missionData.some(mission => mission.missionNum !== undefined);
         setIsSolved(isMissionNumExist);
       }, [missionData]);
 
@@ -79,7 +79,7 @@ const MissionList = () => {
                     <img
                         src={island_img}
                         alt=''
-                        className='map map-image-1 pointer'
+                        className={`map map-image-${mapId} pointer`}
                         onClick={() => {
                         navigate(`/kid/map/${mapId}/mission/${index + 1}`);
                         }} />

diff --git a/src/pages/SolvedMission.jsx b/src/pages/SolvedMission.jsx
@@ -71,10 +71,11 @@ const SolvedMission = () => {
     setIsModalOpen(false);
   };
 
-  if(!(location.state.isO)){
-    setPrompt(`${title}\nwhy is this wrong? respond me in Korean`)
-  }
   const handleSubmit = async (e) => {
+    if(!(location.state.isO)){
+      setPrompt(`${title}\nwhy is this wrong? respond me in Korean`)
+    }
+
     e.preventDefault();
     setIsLoading(true);
     try {

diff --git a/src/pages/css/map.css b/src/pages/css/map.css
@@ -73,4 +73,8 @@
     left: 2%
 }
 
-
+.tree{
+    position: absolute;
+    bottom: 0;
+    width: 20%;
+}