From 756f000464458422291803f81eae2658599ffd92 Mon Sep 17 00:00:00 2001 From: seungukNoh Date: Mon, 29 May 2023 21:38:44 +0900 Subject: [PATCH 1/2] (#85)feat/ Connection Profile FamillyList --- src/pages/Login.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/Login.jsx b/src/pages/Login.jsx index aca8568..9f8d68f 100644 --- a/src/pages/Login.jsx +++ b/src/pages/Login.jsx @@ -21,11 +21,11 @@ const Login = () => { }) .then((response) => { const userId = response.data.data.userId; - const username = response.data.data.name; + const userName = response.data.data.name; const isParent = response.data.data.isParent; const gender = response.data.data.gender; sessionStorage.setItem('userId', userId); - sessionStorage.setItem('username', username); + sessionStorage.setItem('username', userName); sessionStorage.setItem('isParent', isParent); sessionStorage.setItem('gender', gender); setIsLoading(false); From 06beab44262eb7ae016caf54abca3872189f77b9 Mon Sep 17 00:00:00 2001 From: seungukNoh Date: Mon, 29 May 2023 21:39:27 +0900 Subject: [PATCH 2/2] (#85) feat : Connection Profile FamillyList --- src/components/profile/FamCard.jsx | 128 ++++++++++++++++--------- src/components/profile/FamCardList.jsx | 38 ++++++-- src/components/profile/MyBigCard.jsx | 16 +++- src/components/profile/famCard.css | 1 + 4 files changed, 124 insertions(+), 59 deletions(-) diff --git a/src/components/profile/FamCard.jsx b/src/components/profile/FamCard.jsx index 5e17073..beaf2e3 100644 --- a/src/components/profile/FamCard.jsx +++ b/src/components/profile/FamCard.jsx @@ -2,68 +2,102 @@ import {React, useState, useEffect} from 'react'; import './famCard.css'; import { Link } from 'react-router-dom'; import axios from 'axios'; +import Loading from '../../lib/Loading'; -const FamCard = ({isParent}) => { - const [isGirl, setIsGirl] = useState(true); +const FamCard = ({famUserId}) => { + const [isGirl, setIsGirl] = useState(); + const [userId, setUserId] = useState(""); + const [userName, setUserName] = useState(""); const [userAccount, setUserAccount] = useState(""); + const [userGender, setUserGender] = useState(""); + const [userAchieve, setUserAcieve] = useState(""); + const [isParent, setIsParent] = useState(""); + + const [isLoading, setIsLoading] = useState(true) + let imgSrc = ''; - const userId = sessionStorage.getItem("userId"); + + const getUser = () => { + console.log(isParent, "=======+++++") + axios + .get( + `http://localhost:8080/api/v1/users/${userId}` + ) + .then((response) => { + console.log(response.data.data); + setIsParent(response.data.data.isParent === "T" ? true : false) + setUserName(response.data.data.name); + setUserAccount(response.data.data.account); + setUserGender(response.data.data.gender); + setUserAcieve(response.data.data.achieve); + setIsLoading(false); + }) + .catch((error) => { + console.log(error); + }) + }; useEffect(() => { - if (sessionStorage.getItem('gender') === 'M') { - setIsGirl(false); - } - }, []); + getUser(); + userGender == "F" ? setIsGirl(true) : setIsGirl(false) + }, [userId, userGender]) + + useEffect(() => { + setUserId(famUserId); + }, []) - if (isParent === true && isGirl === true) { + if (isLoading) { + return ; + } + + if (isParent && isGirl) { imgSrc = `${process.env.PUBLIC_URL}/assets/images/mammy.png`; - } else if (isParent !== true && isGirl === true) { + } else if (!isParent && isGirl) { imgSrc = `${process.env.PUBLIC_URL}/assets/images/girl.png`; - } else if (isParent === true && isGirl !== true) { + } else if (isParent && !isGirl) { imgSrc = `${process.env.PUBLIC_URL}/assets/images/daddy.png`; } else { imgSrc = `${process.env.PUBLIC_URL}/assets/images/boy.png`; } - - const getUser = () => { - axios - .get(`http://localhost:8080/api/v1/users/${userId}`) - .then((response) => { - console.log(response.data.data) - setUserAccount(response.data.data.account) - }) - .catch((error) => { - console.log(error.response.data); - }) - }; - useEffect(() => { - getUser(); - }, []); + + const checkLevel = (userAchieve) => { + var mapNum = Math.ceil(userAchieve / 7); + var missionNum = userAchieve % 8; + return `${mapNum}-${missionNum}` + } return ( -
  • - -
    -

    {sessionStorage.getItem("username")}

    -

    계좌번호: {userAccount}

    -
    -
    - {!isParent ? ( - <> -

    송금하기

    -

    이체내역

    - - ) : ( - <> -

    송금하기

    -

    자동이체

    -

    응원메세지

    - - )} -
    -
    • + <> + {userId && ( +
  • + +
    +

    {userName}

    +

    계좌번호: {userAccount}

    + {(!isParent) && +

    현재단계: {checkLevel(userAchieve)}

    + } +
    +
    + {isParent ? ( + <> +

    송금하기

    +

    이체내역

    + + ) : ( + <> +

    송금하기

    +

    자동이체

    +

    응원메세지

    + + )} +
    +
    • + ) + } + ); - }; +}; export default FamCard; \ No newline at end of file diff --git a/src/components/profile/FamCardList.jsx b/src/components/profile/FamCardList.jsx index d8be23e..7caa438 100644 --- a/src/components/profile/FamCardList.jsx +++ b/src/components/profile/FamCardList.jsx @@ -1,15 +1,39 @@ -import { React, useState, useEffect } from 'react'; +import { React, useState, useCallback, useEffect } from 'react'; import FamCard from './FamCard'; import './famCardList.css'; +import axios from 'axios'; + +const FamCardList = ({ isParent }) => { + const [famCards, setFamCards] = useState([]); // FamCard 배열을 저장할 상태 변수를 추가합니다. + const userId = sessionStorage.getItem('userId'); -const FamCardList = ({isParent}) => { + const getFamily = () => { + axios.get(`http://localhost:8080/api/v1/users/family-list/${userId}`) + .then((response) => { + console.log(response.data.data); + setFamCards(response.data.data); + }) + .catch((error) => { + console.log(error); + }); + }; + + useEffect ( () => { + getFamily(); + }, []) + return ( +
      + { + famCards && Object.values(famCards).map(famCard => ( + + )) + } +
    -
      - -
    ); }; diff --git a/src/components/profile/MyBigCard.jsx b/src/components/profile/MyBigCard.jsx index e8d2ef3..2ff765d 100644 --- a/src/components/profile/MyBigCard.jsx +++ b/src/components/profile/MyBigCard.jsx @@ -35,9 +35,10 @@ const MyBigCard = ({ isParent }) => { const [successEditMessage, setSuccessEditMessage] = useState(''); const userId = sessionStorage.getItem("userId"); const [userBalance, setUserBalance] = useState(""); - const [userEmail, setUserEmail] = useState(""); + const [famCode, setFamCode] = useState(""); const [userAccount, setUserAccount] = useState(""); const [isLoading, setIsLoading] = useState(false); + const [userAchieve, setUserAcieve] = useState(""); const getUser = () => { setIsLoading(true) @@ -46,8 +47,9 @@ const MyBigCard = ({ isParent }) => { .then((response) => { console.log(response.data.data) setUserBalance(response.data.data.balance) - setUserEmail(response.data.data.email) + setFamCode(response.data.data.famCode) setUserAccount(response.data.data.account) + setUserAcieve(response.data.data.achieve) setIsLoading(false) }) .catch((error) => { @@ -139,6 +141,11 @@ const MyBigCard = ({ isParent }) => { setPhoneNum(value); }; + const checkLevel = (userAchieve) => { + var mapNum = Math.ceil(userAchieve / 7); + var missionNum = userAchieve % 8; + return `${mapNum}-${missionNum}` +} return (
    @@ -146,8 +153,7 @@ const MyBigCard = ({ isParent }) => {

    {sessionStorage.getItem('username')}

    {!isParent ? ( <> -

    좋아하는 것: 게임 강아지

    -

    꿈: 연예인

    +

    현재단계: {checkLevel(userAchieve)}

    ) : ( <> @@ -155,7 +161,7 @@ const MyBigCard = ({ isParent }) => { )}

    계좌번호: {userAccount}

    -

    {userEmail}

    +

    가족코드: {famCode}

    탈퇴하기

    diff --git a/src/components/profile/famCard.css b/src/components/profile/famCard.css index 4230e84..b6c2d92 100644 --- a/src/components/profile/famCard.css +++ b/src/components/profile/famCard.css @@ -7,6 +7,7 @@ display: flex; align-items: center; justify-content: space-around; + margin-bottom: 3rem; } .fam-profile{