Skip to content

Commit

Permalink
Merge branch 'develop' of https://github.com/ITisYourLife-3rd-JJAN/JJ…
Browse files Browse the repository at this point in the history 
…ANsuni-frontend into (#95)chore/editDesign
  • Loading branch information
@gilyeon00
gilyeon00 committed May 30, 2023
2 parents cb5196c + c6133b1 commit c390904
Show file tree
Hide file tree
Showing 6 changed files with 187 additions and 87 deletions.
49 changes: 28 additions & 21 deletions src/components/debitBanner/DebitBanner.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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> },
Expand All @@ -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") {
Expand Down Expand Up @@ -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'>
Expand All @@ -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
Expand All @@ -135,8 +138,8 @@ const DebitBanner = ({idx, color, setKidUserId, setKidUserName}) => {
}
}),
}}
options={kidOptions}
defaultValue={kidOptions[0]}
options={familyOptions}
defaultValue={familyOptions[0]}
theme={(theme) => ({
...theme,
colors: {
Expand All @@ -148,16 +151,17 @@ const DebitBanner = ({idx, color, setKidUserId, setKidUserName}) => {
onChange={(e) => {
setKidUserId(e.value)
setKidUserName(e.label)
setNowKidBalance(kidBalance[kidOptions.indexOf(e)])
}}
/>
</div>
</div>
);
}

return (
<div className='debitBanner' style={{backgroundColor: color}}>
if (parent === "T") {

return (
<div className='debitBanner' style={{backgroundColor: color}}>
<div className='doSelect'>
<Select
styles={{
Expand All @@ -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
Expand All @@ -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: {
Expand All @@ -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>
);
}

}

};
Expand Down
127 changes: 79 additions & 48 deletions src/components/profile/FamCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,67 +3,98 @@ import './famCard.css';
import { Link } from 'react-router-dom';
import axios from 'axios';
import { markAccount } from '../../lib/markAccount';
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, setUserAchieve] = 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);
setUserAchieve(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>계좌번호: {markAccount(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>
)
}
</>
);
};

Expand Down
37 changes: 31 additions & 6 deletions src/components/profile/FamCardList.jsx
View file
Original file line number Diff line number Diff line change
@@ -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>

);

};
Expand Down
17 changes: 8 additions & 9 deletions src/components/profile/MyBigCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import axios from 'axios';
import Modal from 'react-modal';
import Loading from '../../lib/Loading';
import { markAccount } from '../../lib/markAccount';
import { markThousand } from '../../lib/markThousand';

const MyBigCard = ({ isParent }) => {
const containerStyle = {
Expand Down Expand Up @@ -36,8 +37,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);

Expand All @@ -47,8 +47,8 @@ const MyBigCard = ({ isParent }) => {
.get(`http://localhost:8080/api/v1/users/${userId}`)
.then((response) => {
console.log(response.data.data)
setUserBalance(response.data.data.balance)
setUserEmail(response.data.data.email)
setUserBalance(markThousand(response.data.data.balance))
setFamCode(response.data.data.famCode)
setUserAccount(response.data.data.account)
setIsLoading(false)
})
Expand Down Expand Up @@ -150,16 +150,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">계좌번호: {markAccount(userAccount)}</p>
<p>{userEmail}</p>
<p id="my-account">계좌번호 : {userAccount}</p>
<p>가족코드 : {famCode}</p>
</div>
<div className="my-edit-box">
<p>탈퇴하기</p>
Expand Down
Loading

0 comments on commit c390904

Please sign in to comment.