Skip to content

Commit

Permalink
Merge pull request #73 from Hana4Team/design/#70
Browse files Browse the repository at this point in the history 
[Design/#70] λ¨Έλ‹ˆλ°•μŠ€ μΆ”κ°€ λ””μžμΈ 및 api μ—°κ²°
  • Loading branch information
@abcxj123
abcxj123 authored Jun 10, 2024
2 parents 6263ab0 + f63f1f2 commit 905776e
Show file tree
Hide file tree
Showing 3 changed files with 129 additions and 8 deletions.
11 changes: 11 additions & 0 deletions src/apis/apiClient.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -358,6 +358,17 @@ export class ApiClient
return response.data;
}

async getWaste() {
const response = await this.axiosInstance.request<{
wasteIndex: number;
wasteType: string;
}>({
method: 'get',
url: '/transaction/waste',
});
return response.data;
}

//---------spend---------
async getSpendList(year: number, month: number) {
const response = await this.axiosInstance.request<SpendListType>({
Expand Down
4 changes: 4 additions & 0 deletions src/apis/interfaces/transactionApi.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,4 +29,8 @@ export interface transactionApi {
postRemittanceMoneyBox(
TransactionMoneyboxSaveReq: RemmitanceMoneyBoxType
): Promise<{ transactionId: number }>;
getWaste(): Promise<{
wasteIndex: number;
wasteType: string;
}>;
}
122 changes: 114 additions & 8 deletions src/pages/moneyBox/MoneyBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,22 @@ import { AlertModal } from '../../components/AlertModal';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import { ApiClient } from '../../apis/apiClient';
import { AlarmAnimation } from '../../components/organisms/AlarmAnimation';
import { MdAccountBalance } from 'react-icons/md';
import { FcLock, FcMoneyTransfer, FcNews } from 'react-icons/fc';
import { PiSirenFill } from 'react-icons/pi';

export const MoneyBox = () => {
const location = useLocation();
const navigate = useNavigate();
const queryClient = useQueryClient();
const [showStepModal, setShowStepModal] = useState<boolean>(false);
const [showModal, setShowModal] = useState<boolean>(false);
const [showChoiceModal, setShowChoiceModal] = useState<boolean>(false);
const [clickedName, setClickedName] = useState<string>('νŒŒν‚Ή');
const [showAlarm, setShowAlarm] = useState<boolean>(false);
const [showInfoModal, setShowInfoModal] = useState<boolean>(false);
const [checkExpense, setCheckExpense] = useState<boolean>(false);
const alarmMsgRef = useRef<string>('');

const locationState = location.state as {
prev: boolean;
Expand Down Expand Up @@ -70,20 +81,28 @@ export const MoneyBox = () => {
if (!isSuccess0 && userInfo?.step === 2 && userInfo.stepStatus === 2) {
checkMission();
setShowStepModal(true);
setCheckExpense(true);
}
}, [userInfo]);

const { data: waste, isSuccess: wasteSuccess } = useQuery({
queryKey: ['waste'],
queryFn: () => {
const res = ApiClient.getInstance().getWaste();
return res;
},
enabled: checkExpense,
});

useEffect(() => {
queryClient.invalidateQueries({ queryKey: ['userInfo'] });
if (
userInfo?.step !== 2 ||
(userInfo.step === 2 && userInfo.stepStatus !== 2)
)
setCheckExpense(false);
}, []);

const [showStepModal, setShowStepModal] = useState<boolean>(false);
const [showModal, setShowModal] = useState<boolean>(false);
const [showChoiceModal, setShowChoiceModal] = useState<boolean>(false);
const [clickedName, setClickedName] = useState<string>('νŒŒν‚Ή');
const [showAlarm, setShowAlarm] = useState<boolean>(false);
const alarmMsgRef = useRef<string>('');

const openChoiceModalHandler = () => setShowChoiceModal(true);
const closeChoiceModalHandler = () => {
setShowChoiceModal(false);
Expand Down Expand Up @@ -150,7 +169,7 @@ export const MoneyBox = () => {
};

return (
<div className='relative w-full'>
<div className='relative w-full h-screen'>
{showAlarm && (
<AlarmAnimation
message={alarmMsgRef.current}
Expand Down Expand Up @@ -197,6 +216,64 @@ export const MoneyBox = () => {
</div>
</ChoiceMenu>
)}
{showInfoModal && (
<AlertModal onClose={() => setShowInfoModal(false)}>
<div className='font-hanaMedium text-2xl flex flex-col gap-3'>
<h3 className='text-center font-hanaBold text-[1.8rem] whitespace-pre-line leading-snug'>{`μ˜ˆμ‚°μ„ λ¨Όμ € μ •ν•˜κ³ \nμ˜ˆμ‚°μ— 맞게 톡μž₯을 μͺΌκ°œλ΄…μ‹œλ‹€!`}</h3>
<p className='text-xl font-hanaRegular text-center text-gray-500'>{`일정 μ‹œκ°„μ΄ μ§€λ‚œ ν›„ 톡μž₯을 확인해보면,\nμ†ŒλΉ„μ§€μΆœμ€ μ€„μ–΄μžˆκ³  μ €μΆ•
톡μž₯의 μž”μ•‘μ΄ λŠ˜μ–΄λ‚œ 것을 확인할 수 μžˆμ–΄μš”!`}</p>
<div className='text-[1.8rem] mt-3 mb-1 text-hanaDeepGreen flex flex-row items-center gap-3'>
{/* <FcAdvertisinγ…Ž /> */}
톡μž₯μͺΌκ°œκΈ° ν•œλˆˆμ— μ‚΄νŽ΄λ³΄κΈ°
</div>
<div className='flex flex-col gap-5 mb-10'>
<div>
<h3 className='flex items-center gap-3'>
<PiSirenFill color='red' /> νŒŒν‚Ήν†΅μž₯(= λΉ„μƒκΈˆ 톡μž₯)
</h3>
<p className='text-xl font-hanaRegular mt-2 leading-normal'>
νŒŒν‚Ήν†΅μž₯은 μ§ˆλ³‘, 사고, 싀직 λ“± κ°‘μžκΈ° 돈이 ν•„μš”ν•΄μ§€λŠ” 상황에
λŒ€λΉ„ν•΄ μ˜ˆλΉ„λ‘œ μ€€λΉ„ν•΄λ‘λŠ” 톡μž₯μž…λ‹ˆλ‹€.
<br />
<span className='bg-yellow-200/70 font-hanaCM'>
맀월 μ •κΈ° μˆ˜μž…μ˜{' '}
<span className='text-hanaRed font-hanaBold'>10%</span>{' '}
정도λ₯Ό μž…κΈˆν•΄λ‘λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€.
</span>
</p>
</div>
<div>
<h3 className='flex items-center gap-3'>
<FcLock /> 저좕톡μž₯(= μž¬ν…Œν¬ 톡μž₯)
</h3>
<p className='text-xl font-hanaRegular mt-2 leading-normal'>
저좕톡μž₯은 μ†ŒλΉ„κ°€ μ•„λ‹Œ 저좕을 μœ„ν•œ 톡μž₯μž…λ‹ˆλ‹€. <br />
μ—¬κΈ°μ„œ μ€‘μš”ν•œ 점은 μ†ŒλΉ„λ₯Ό λ‹€ ν•˜κ³  남은 λˆμ„ μ €κΈˆν•˜λŠ” 것이
μ•„λ‹Œ, λ¨Όμ € μ €κΈˆν•˜κ³  남은 λˆμ„ μ†ŒλΉ„ν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€.
<br />
<span className='bg-yellow-200/70 font-hanaCM'>
맀월 μ •κΈ° μˆ˜μž…μ˜{' '}
<span className='text-hanaRed font-hanaBold'>45%</span>{' '}
이상을 μ €μΆ•ν•΄λ‘λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€.
</span>
</p>
</div>
<div>
<h3 className='flex items-center gap-3'>
<FcMoneyTransfer /> μ†ŒλΉ„ν†΅μž₯(= μƒν™œλΉ„ 톡μž₯)
</h3>
<p className='text-xl font-hanaRegular mt-2 leading-normal'>
μ†ŒλΉ„ν†΅μž₯은{' '}
<span className='bg-yellow-200/70 font-hanaCM'>
νŒŒν‚Ήν†΅μž₯κ³Ό μ†ŒλΉ„ν†΅μž₯에 λ°°λΆ„ν•˜κ³  남은 것을 μ‚¬μš©ν•˜λŠ” 것
</span>
을 μ›μΉ™μœΌλ‘œ ν•©λ‹ˆλ‹€.
</p>
</div>
</div>
</div>
</AlertModal>
)}
<Topbar title='λ¨Έλ‹ˆλ°•μŠ€' onClick={() => onClickBack()} />
{/* 좜금 κ³„μ’Œλ²ˆν˜Έ 곡간 */}
<div className='flex flex-col bg-white p-8 font-hanaMedium mb-4'>
Expand Down Expand Up @@ -228,6 +305,35 @@ export const MoneyBox = () => {
<p className='font-hanaRegular'>10,000원</p>
</div> */}
</div>
<div
onClick={() => setShowInfoModal(true)}
className='bg-white flex items-center justify-center gap-3 mb-4 w-11/12 m-auto py-5 px-10 border border-[#E4E4E4] rounded-3xl text-2xl font-hanaCM cursor-pointer'
>
<MdAccountBalance size={22} color='#FFCE56' />
톡μž₯μͺΌκ°œκΈ°λ‘œ μ μ •μ†ŒλΉ„ λ„μ „ν•˜κΈ°!
</div>
{wasteSuccess && checkExpense && (
<div className='text-center bg-white mb-4 font-hanaMedium text-2xl py-5 px-3'>
λ‹Ήμ‹ μ˜ κ³Όμ†ŒλΉ„μ§€μˆ˜λŠ”{' '}
<span className='font-hanaBold text-hanaDeepGreen'>
{waste?.wasteType}
</span>
μž…λ‹ˆλ‹€.
<p className='text-lg text-gray-500 font-hanaRegular text-center mt-2 leading-relaxed'>
κ³Όμ†ŒλΉ„μ§€μˆ˜λž€ μ›”κΈ‰μ—μ„œ μ €μΆ•ν•˜λŠ” κΈˆμ•‘μ„ λΊ€ κΈˆμ•‘μ„ μ›”κΈ‰μœΌλ‘œ λ‚˜λˆ„λŠ”
κ²ƒμž…λ‹ˆλ‹€.
<br /> κ³Όμ†ŒλΉ„μ§€μˆ˜κ°€{' '}
<span className='text-red-600 font-hanaBold'>1</span>이면
<span className='text-red-600 font-hanaCM'> μ‹¬κ°ν•œ κ³Όμ†ŒλΉ„</span>,
<span className='text-yellow-500 font-hanaBold'> 0.7~0.9</span>이면
<span className='text-yellow-500 font-hanaCM'> κ³Όμ†ŒλΉ„</span>,<br />
<span className='text-green-600 font-hanaBold'> 0.6</span>이면
<span className='text-green-600 font-hanaCM'> μ μ •μ†ŒλΉ„</span>,
<span className='text-blue-600 font-hanaBold'> 0.5</span>이면
<span className='text-blue-600 font-hanaCM'> μ•Œλœ°μ†ŒλΉ„</span>μž…λ‹ˆλ‹€.
</p>
</div>
)}
{/* λ¨Έλ‹ˆλ°•μŠ€ μ•„μ΄ν…œ 곡간 */}
<div className='flex flex-col bg-white p-8 gap-y-4'>
<MoneyBoxItem
Expand Down

0 comments on commit 905776e

Please sign in to comment.