From b3a8021dfedbaa2e2556b50475e6bc6fe3391c1c Mon Sep 17 00:00:00 2001
From: Subny <richsubin411@gmail.com>
Date: Tue, 30 May 2023 11:12:28 +0900
Subject: [PATCH 1/3] =?UTF-8?q?[#91]FIX:=EB=B6=80=EB=AA=A8=EC=9E=85?=
 =?UTF-8?q?=EC=9E=A5=EC=97=90=EC=84=9C=20=EC=9E=90=EB=8F=99=EC=9D=B4?=
 =?UTF-8?q?=EC=B2=B4=20=EC=95=88=EB=90=98=EB=8A=94=EA=B1=B0=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/debitBanner/DebitBanner.jsx | 49 ++++++++++++----------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/src/components/debitBanner/DebitBanner.jsx b/src/components/debitBanner/DebitBanner.jsx
index e79694c..f1589f4 100644
--- a/src/components/debitBanner/DebitBanner.jsx
+++ b/src/components/debitBanner/DebitBanner.jsx
@@ -16,6 +16,7 @@ const DebitBanner = ({idx, color, setKidUserId, setKidUserName}) => {
     const [familyOptions, setFamilyOptions] = useState([{ value: '가족 선택하기', label: '가족 선택하기' }])
     const [kidBalance, setKidBalance] = useState([0]);
     const [nowKidBalance, setNowKidBalance] = useState(kidBalance[0])
+    
 
     const parentMenuOptions = [
         { value: '이체 하기', label: <Link to="/debit" className='sellink'><div className='seldiv'><img src={`${process.env.PUBLIC_URL}/assets/images/wallet.png`} alt="" width={50}/>이체 하기</div></Link> },
@@ -29,8 +30,8 @@ const DebitBanner = ({idx, color, setKidUserId, setKidUserName}) => {
     ]
 
 
+    // const [kidSelectedValue, setKidSelectedValue] = useState(kidMenuOptions[idx].value);
     const [parentSelectedValue, setParentSelectedValue] = useState(parentMenuOptions[idx].value);
-    const [kidSelectedValue, setKidSelectedValue] = useState(kidMenuOptions[idx].value);
     
     useEffect(() => {
             if(parent === "F") {
@@ -95,7 +96,9 @@ const DebitBanner = ({idx, color, setKidUserId, setKidUserName}) => {
 
 
     if (kidOptions.length !== 0) {
-        if(parent === "T") {
+
+        if (parent === "F") {
+            
             return (
                 <div className='debitBanner' style={{backgroundColor: color}}>
                     <div className='doSelect'>
@@ -110,18 +113,18 @@ const DebitBanner = ({idx, color, setKidUserId, setKidUserName}) => {
                                 }
                             }),
                             }}
-                        options={parentMenuOptions}
+                        options={kidMenuOptions}
                         onChange={(e) => {setParentSelectedValue(e.value)
                         }}
                         components={{ DropdownIndicator:() => null, IndicatorSeparator:() => null }}
-                        value={parentMenuOptions.filter(function (option) {
+                        value={kidMenuOptions.filter(function (option) {
                             return option.value === parentSelectedValue;
                         })}    
                         />
                     </div>
                     <div className='kidBalance'>
-                        <div className='usespace'>아이 현재 잔액: </div>
-                        <div> {nowKidBalance} 원</div>
+                        <div className='usespace'>내 잔액: </div>
+                        <div> {kidInfo} 원</div>
                     </div>
                     <div className='kidSelect'>
                         <Select
@@ -135,8 +138,8 @@ const DebitBanner = ({idx, color, setKidUserId, setKidUserName}) => {
                                 }
                             }),
                             }}
-                        options={kidOptions}
-                        defaultValue={kidOptions[0]}
+                        options={familyOptions}
+                        defaultValue={familyOptions[0]}
                         theme={(theme) => ({
                             ...theme,
                             colors: {
@@ -148,7 +151,6 @@ const DebitBanner = ({idx, color, setKidUserId, setKidUserName}) => {
                         onChange={(e) => {
                             setKidUserId(e.value)
                             setKidUserName(e.label)
-                            setNowKidBalance(kidBalance[kidOptions.indexOf(e)])
                         }}
                         />
                     </div>
@@ -156,8 +158,10 @@ const DebitBanner = ({idx, color, setKidUserId, setKidUserName}) => {
             );
         }
         
-        return (
-            <div className='debitBanner' style={{backgroundColor: color}}>
+        if (parent === "T") {
+            
+            return (
+                <div className='debitBanner' style={{backgroundColor: color}}>
                 <div className='doSelect'>
                     <Select              
                     styles={{               
@@ -169,19 +173,19 @@ const DebitBanner = ({idx, color, setKidUserId, setKidUserName}) => {
                                 borderColor: "#FFF"
                             }
                         }),
-                        }}
-                    options={kidMenuOptions}
-                    onChange={(e) => {setKidSelectedValue(e.value)
+                    }}
+                    options={parentMenuOptions}
+                    onChange={(e) => {setParentSelectedValue(e.value)
                     }}
                     components={{ DropdownIndicator:() => null, IndicatorSeparator:() => null }}
-                    value={kidMenuOptions.filter(function (option) {
-                        return option.value === kidSelectedValue;
+                    value={parentMenuOptions.filter(function (option) {
+                        return option.value === parentSelectedValue;
                     })}    
                     />
                 </div>
                 <div className='kidBalance'>
-                    <div className='usespace'>내 잔액: </div>
-                    <div> {kidInfo} 원</div>
+                    <div className='usespace'>아이 현재 잔액: </div>
+                    <div> {nowKidBalance} 원</div>
                 </div>
                 <div className='kidSelect'>
                     <Select
@@ -194,9 +198,9 @@ const DebitBanner = ({idx, color, setKidUserId, setKidUserName}) => {
                                 borderColor: "#FFF"
                             }
                         }),
-                        }}
-                    options={familyOptions}
-                    defaultValue={familyOptions[0]}
+                    }}
+                    options={kidOptions}
+                    defaultValue={kidOptions[0]}
                     theme={(theme) => ({
                         ...theme,
                         colors: {
@@ -208,11 +212,14 @@ const DebitBanner = ({idx, color, setKidUserId, setKidUserName}) => {
                     onChange={(e) => {
                         setKidUserId(e.value)
                         setKidUserName(e.label)
+                        setNowKidBalance(kidBalance[kidOptions.indexOf(e)])
                     }}
                     />
                 </div>
             </div>
         );
+        }
+    
     }
 
 };

From 6557d72a81102db33f834757f4bbeeafc4be0ac0 Mon Sep 17 00:00:00 2001
From: seungukNoh <dnrdl8255@gmail.com>
Date: Tue, 30 May 2023 13:00:56 +0900
Subject: [PATCH 2/3] =?UTF-8?q?(#98)=20fix=20:=20branch=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95(profile=20FamCard)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/profile/FamCard.jsx     | 127 +++++++++++++++----------
 src/components/profile/FamCardList.jsx |  37 +++++--
 src/components/profile/MyBigCard.jsx   |  14 ++-
 src/components/profile/StateCard.jsx   |  42 +++++++-
 src/components/profile/famCard.css     |   1 +
 5 files changed, 156 insertions(+), 65 deletions(-)

diff --git a/src/components/profile/FamCard.jsx b/src/components/profile/FamCard.jsx
index 5e17073..38ae115 100644
--- a/src/components/profile/FamCard.jsx
+++ b/src/components/profile/FamCard.jsx
@@ -2,67 +2,98 @@ 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 [userAccount, setUserAccount] = useState("");
-    let imgSrc = '';
-    const userId = sessionStorage.getItem("userId");
+    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 getUser = () => {
+        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(() => {
+        getUser();
+        userGender == "F" ? setIsGirl(true) : setIsGirl(false)
+    }, [userId, userGender])
 
     useEffect(() => {
-        if (sessionStorage.getItem('gender') === 'M') {
-          setIsGirl(false);
-        }
-      }, []);
+        setUserId(famUserId);
+    }, [])
 
-    if (isParent === true && isGirl === true) {
+    if (isLoading) {
+        return <Loading/>;
+    }
+
+    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 (
-        <li className='fam-profile-card-container'>
-        <img src={`${imgSrc}`} alt='' className='fam-profile' />
-        <div className='fam-info-box'>
-            <p id='fam-name'>{sessionStorage.getItem("username")}</p>
-            <p>계좌번호: {userAccount}</p>
-        </div>
-        <div className='fam-edit-box'>
-            {!isParent ? (
-            <>
-                <p>송금하기</p>
-                <p>이체내역</p>
-            </>
-            ) : (
-            <>
-                <p>송금하기</p>
-                <p>자동이체</p>
-                <Link to="/message"> <p>응원메세지</p></Link>
-            </>
-            )}
-        </div>
-        </li>
+       <>
+        {userId && (
+            <li className='fam-profile-card-container'>
+                <img src={`${imgSrc}`} alt='' className='fam-profile' />
+                <div className='fam-info-box'>
+                    <p id='fam-name'>{userName}</p>
+                    <p>계좌번호 : {userAccount}</p>
+                    {(!isParent) && 
+                        <p>현재단계 : {checkLevel(userAchieve)}</p>
+                    }
+                </div>
+                <div className='fam-edit-box'>
+                    {isParent ? (
+                    <>
+                        <Link to="/debit"><p>송금하기</p></Link>
+                        <Link to="/debit-history"><p>이체내역</p></Link>
+                    </>
+                    ) : (
+                    <>
+                        <Link to="/debit"><p>송금하기</p></Link>
+                        <Link to="/direct-debit"><p>자동이체</p></Link>
+                        <Link to="/message"> <p>응원메세지</p></Link>
+                    </>
+                    )}
+                </div>
+            </li>
+            )
+        }
+       </>
     );
     };
 
diff --git a/src/components/profile/FamCardList.jsx b/src/components/profile/FamCardList.jsx
index d8be23e..a55ff2c 100644
--- a/src/components/profile/FamCardList.jsx
+++ b/src/components/profile/FamCardList.jsx
@@ -1,15 +1,40 @@
 import { React, useState, 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 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();
+    }, [])
 
-const FamCardList = ({isParent}) => {
     return (
 
-        <ul className='famCard-list' >
-            <FamCard
-                isParent={isParent}
-            />
-        </ul>
+       <ul className="famCard-list">
+        {   
+                famCards && Object.values(famCards).map(famCard => (
+                    <FamCard 
+                        key={famCard.userId}
+                        famUserId = {famCard.userId}
+                         />
+                ))
+            }
+      </ul>
+
     );
 
 };
diff --git a/src/components/profile/MyBigCard.jsx b/src/components/profile/MyBigCard.jsx
index 7845363..9c0d2b9 100644
--- a/src/components/profile/MyBigCard.jsx
+++ b/src/components/profile/MyBigCard.jsx
@@ -35,8 +35,7 @@ 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);
 
@@ -47,7 +46,7 @@ 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)
             setIsLoading(false)
         })
@@ -149,16 +148,15 @@ const MyBigCard = ({ isParent }) => {
         <p id="my-name">{sessionStorage.getItem('username')}</p>
         {!isParent ? (
           <>
-            <p id="my-favorite">좋아하는 것: 게임 강아지</p>
-            <p id="my-dream">꿈: 연예인</p>
+           <p>장래희망 : 백엔드 개발자</p>
           </>
         ) : (
           <>
-            <p id="my-balance">잔액: {userBalance}원</p>
+            <p id="my-balance">잔액 : {userBalance}원</p>
           </>
         )}
-        <p id="my-account">계좌번호: {userAccount}</p>
-        <p>{userEmail}</p>
+        <p id="my-account">계좌번호 : {userAccount}</p>
+        <p>가족코드 : {famCode}</p>
       </div>
       <div className="my-edit-box">
         <p>탈퇴하기</p>
diff --git a/src/components/profile/StateCard.jsx b/src/components/profile/StateCard.jsx
index 81eb868..b7f9dbb 100644
--- a/src/components/profile/StateCard.jsx
+++ b/src/components/profile/StateCard.jsx
@@ -1,14 +1,50 @@
-import React from 'react';
+import { React, useState, useEffect } from 'react';
 import './stateCard.css';
+import Loading from '../../lib/Loading';
+import axios from 'axios';
 
 const StateCard = () => {
+    const userId = sessionStorage.getItem("userId");
+    const [isLoading, setIsLoading] = useState(false);
+    const [userBalance, setUserBalance] = useState("");
+    const [userAchieve, setUserAcieve] = useState("");
+
+    const getUser = () => {
+        setIsLoading(true)
+        axios
+            .get(`http://localhost:8080/api/v1/users/${userId}`)
+            .then((response) => {
+                console.log(response.data.data)
+                setUserBalance(response.data.data.balance)
+                setUserAcieve(response.data.data.achieve)
+                setIsLoading(false)
+            })
+            .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}` 
+        }
+
+      if (isLoading) {
+        return <Loading/>;
+      }
+
     return (
         <div className='state-container'>
             <div className='present-state'>
-                <p>현재 단계 : 2-3</p>
+                <p>현재 단계 : {checkLevel(userAchieve)}</p>
             </div>
             <div className='present-state'>
-                <p>보유 금액 : 80,000</p>
+                <p>보유 금액 : {userBalance}</p>
             </div>
         </div>
     );
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{

From 4f34e89596d5181f7e644521685fa0fd71a974b1 Mon Sep 17 00:00:00 2001
From: seungukNoh <dnrdl8255@gmail.com>
Date: Tue, 30 May 2023 15:12:23 +0900
Subject: [PATCH 3/3] (#98)fix : add markthousand

---
 src/components/profile/FamCard.jsx   | 4 ++--
 src/components/profile/MyBigCard.jsx | 3 ++-
 src/components/profile/StateCard.jsx | 7 ++++---
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/profile/FamCard.jsx b/src/components/profile/FamCard.jsx
index 38ae115..e03a302 100644
--- a/src/components/profile/FamCard.jsx
+++ b/src/components/profile/FamCard.jsx
@@ -10,7 +10,7 @@ import Loading from '../../lib/Loading';
         const [userName, setUserName] = useState("");
         const [userAccount, setUserAccount] = useState("");
         const [userGender, setUserGender] = useState("");
-        const [userAchieve, setUserAcieve] = useState("");
+        const [userAchieve, setUserAchieve] = useState("");
         const [isParent, setIsParent] = useState("");
         const [isLoading, setIsLoading] = useState(true)
     
@@ -27,7 +27,7 @@ import Loading from '../../lib/Loading';
                 setUserName(response.data.data.name);
                 setUserAccount(response.data.data.account);
                 setUserGender(response.data.data.gender);
-                setUserAcieve(response.data.data.achieve);
+                setUserAchieve(response.data.data.achieve);
                 setIsLoading(false);
             })
             .catch((error) => {
diff --git a/src/components/profile/MyBigCard.jsx b/src/components/profile/MyBigCard.jsx
index 9c0d2b9..ad7077e 100644
--- a/src/components/profile/MyBigCard.jsx
+++ b/src/components/profile/MyBigCard.jsx
@@ -3,6 +3,7 @@ import './myBigCard.css';
 import axios from 'axios';
 import Modal from 'react-modal';
 import Loading from '../../lib/Loading';
+import { markThousand } from '../../lib/markThousand';
 
 const MyBigCard = ({ isParent }) => {
   const containerStyle = {
@@ -45,7 +46,7 @@ const MyBigCard = ({ isParent }) => {
         .get(`http://localhost:8080/api/v1/users/${userId}`)
         .then((response) => {
             console.log(response.data.data)
-            setUserBalance(response.data.data.balance)
+            setUserBalance(markThousand(response.data.data.balance))
             setFamCode(response.data.data.famCode)
             setUserAccount(response.data.data.account)
             setIsLoading(false)
diff --git a/src/components/profile/StateCard.jsx b/src/components/profile/StateCard.jsx
index b7f9dbb..9860591 100644
--- a/src/components/profile/StateCard.jsx
+++ b/src/components/profile/StateCard.jsx
@@ -2,12 +2,13 @@ import { React, useState, useEffect } from 'react';
 import './stateCard.css';
 import Loading from '../../lib/Loading';
 import axios from 'axios';
+import { markThousand } from '../../lib/markThousand';
 
 const StateCard = () => {
     const userId = sessionStorage.getItem("userId");
     const [isLoading, setIsLoading] = useState(false);
     const [userBalance, setUserBalance] = useState("");
-    const [userAchieve, setUserAcieve] = useState("");
+    const [userAchieve, setUserAchieve] = useState("");
 
     const getUser = () => {
         setIsLoading(true)
@@ -15,8 +16,8 @@ const StateCard = () => {
             .get(`http://localhost:8080/api/v1/users/${userId}`)
             .then((response) => {
                 console.log(response.data.data)
-                setUserBalance(response.data.data.balance)
-                setUserAcieve(response.data.data.achieve)
+                setUserBalance(markThousand(response.data.data.balance));
+                setUserAchieve(response.data.data.achieve)
                 setIsLoading(false)
             })
             .catch((error) => {