From e98ecc15d32625a4f2e04c3fceb0b73064ad6ae8 Mon Sep 17 00:00:00 2001 From: doSeung11 Date: Tue, 11 Jun 2024 08:43:34 +0900 Subject: [PATCH] fix: img --- src/pages/home/GoalProductRecommend.tsx | 53 ++++++++---- src/pages/home/HomePage.tsx | 20 +++-- src/pages/mypage/goal/GoalWish.tsx | 37 ++++---- src/pages/product/ProductDetailPage.tsx | 26 +++++- src/pages/product/ProductListPage.tsx | 34 ++++---- src/pages/split/SplitAutoPage.tsx | 110 ++++++++++++++---------- src/pages/split/SplitMainPage.tsx | 2 +- src/pages/start/Splash.tsx | 2 +- src/pages/start/Tutorial1Page.tsx | 2 +- src/pages/start/Tutorial3Page.tsx | 2 +- src/pages/start/Tutorial4Page.tsx | 2 +- src/pages/start/TutorialPage.tsx | 2 +- 12 files changed, 177 insertions(+), 115 deletions(-) diff --git a/src/pages/home/GoalProductRecommend.tsx b/src/pages/home/GoalProductRecommend.tsx index 6e9d432..acdc94c 100644 --- a/src/pages/home/GoalProductRecommend.tsx +++ b/src/pages/home/GoalProductRecommend.tsx @@ -3,8 +3,13 @@ import { useGoalsProducts } from "../../contexts/ProductContext"; import { useUser } from "../../contexts/UserContext"; import { ProductGetResponse } from "../product/ProductListPage"; import { API_BASE_URL } from "../../constants"; +import { LoadingPage } from "../LoadingPage"; -const calcExpectedAmount = (years: number, annualInterestRate: number, monthlySavings: number): string => { +const calcExpectedAmount = ( + years: number, + annualInterestRate: number, + monthlySavings: number +): string => { const months = years * 12; const monthlyInterestRate = annualInterestRate / 12 / 100; @@ -12,10 +17,10 @@ const calcExpectedAmount = (years: number, annualInterestRate: number, monthlySa for (let i = 0; i < months; i++) { totalAmount += monthlySavings; - totalAmount *= (1 + monthlyInterestRate); + totalAmount *= 1 + monthlyInterestRate; } - return (Math.floor(totalAmount/100)*100).toLocaleString(); + return (Math.floor(totalAmount / 100) * 100).toLocaleString(); }; const GoalProductRecommend = ({ goalId }: { goalId: number }) => { @@ -105,19 +110,27 @@ const GoalProductRecommend = ({ goalId }: { goalId: number }) => {
예상금액
-

+

매달 10만원씩 적금한다면 - {` ${calcExpectedAmount(goalProduct.products.recommendedProducts[0]?.termYear, goalProduct.products.recommendedProducts[0] - ?.interestRate, 100000)}`} + {` ${calcExpectedAmount( + goalProduct.products.recommendedProducts[0]?.termYear, + goalProduct.products.recommendedProducts[0] + ?.interestRate, + 100000 + )}`} 원

매달 100만원씩 적금한다면 - {` ${calcExpectedAmount(goalProduct.products.recommendedProducts[0]?.termYear, goalProduct.products.recommendedProducts[0] - ?.interestRate, 1000000)}`} + {` ${calcExpectedAmount( + goalProduct.products.recommendedProducts[0]?.termYear, + goalProduct.products.recommendedProducts[0] + ?.interestRate, + 1000000 + )}`} 원

@@ -157,21 +170,31 @@ const GoalProductRecommend = ({ goalId }: { goalId: number }) => { %
-
예상금액
+
+ 예상금액 +
-

+

매달 10만원씩 적금한다면 - {` ${calcExpectedAmount(goalProduct.products.recommendedProducts[1]?.termYear, goalProduct.products.recommendedProducts[0] - ?.interestRate, 100000)}`} + {` ${calcExpectedAmount( + goalProduct.products.recommendedProducts[1]?.termYear, + goalProduct.products.recommendedProducts[0] + ?.interestRate, + 100000 + )}`} 원

매달 100만원씩 적금한다면 - {` ${calcExpectedAmount(goalProduct.products.recommendedProducts[1]?.termYear, goalProduct.products.recommendedProducts[0] - ?.interestRate, 1000000)}`} + {` ${calcExpectedAmount( + goalProduct.products.recommendedProducts[1]?.termYear, + goalProduct.products.recommendedProducts[0] + ?.interestRate, + 1000000 + )}`} 원

@@ -182,7 +205,7 @@ const GoalProductRecommend = ({ goalId }: { goalId: number }) => { )} ) : ( -
Loading...
+ )} ); diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx index 251d8bc..ce63bff 100644 --- a/src/pages/home/HomePage.tsx +++ b/src/pages/home/HomePage.tsx @@ -12,7 +12,12 @@ import { API_BASE_URL } from "../../constants"; import { useEffect } from "react"; import { LoadingPage } from "../LoadingPage"; -const GoalBox = ({ goal }: { goal: UserGoalGetResponse }) => { +type Props = { + goal: UserGoalGetResponse; + idx: number; +}; + +const GoalBox = ({ goal, idx }: Props) => { const navigate = useNavigate(); const goToSelect = (userGoalId: number) => { navigate(`${userGoalId}`); @@ -50,7 +55,7 @@ const GoalBox = ({ goal }: { goal: UserGoalGetResponse }) => { onClick={() => goToSelect(goal.userGoalId)} >
- 목표 {goal.userGoalId} + 목표 {idx}
@@ -131,14 +136,14 @@ export const HomePage = () => { return ( <>
- +

반갑습니다

{user.name} 님

- {totalAmount.toString.length>10 ? ( + {totalAmount.toString.length > 10 ? ( <>

💰현재 저축액

@@ -148,7 +153,7 @@ export const HomePage = () => {
- ): ( + ) : ( <>

💰현재 저축액 :

@@ -159,11 +164,10 @@ export const HomePage = () => {
)} - - {data?.map((goal) => ( + {data?.map((goal, cnt) => (
- +
))} diff --git a/src/pages/mypage/goal/GoalWish.tsx b/src/pages/mypage/goal/GoalWish.tsx index dae6f66..fbfb3d3 100644 --- a/src/pages/mypage/goal/GoalWish.tsx +++ b/src/pages/mypage/goal/GoalWish.tsx @@ -28,25 +28,22 @@ export const GoalWish = ({ goal, goalDetail }: Props) => { if (user.jwt) { (async function () { try { - const response = await fetch( - `${API_BASE_URL}/api/v1/user-goals`, - { - method: "POST", - headers: { - "Content-Type": "application/json", - Authorization: `Bearer ${user.jwt}`, - }, - body: JSON.stringify({ - userGoalId: goalId !== "0" ? goalId : null, - goalAlias: alias, - goalTypeCd: "WISH", - goalSpecificId: goal.goalSpecificId, - goalBeginDate: formatDateToYyyymmdd(begin), - duration: duration, - amount: price, - }), - } - ); + const response = await fetch(`${API_BASE_URL}/api/v1/user-goals`, { + method: "POST", + headers: { + "Content-Type": "application/json", + Authorization: `Bearer ${user.jwt}`, + }, + body: JSON.stringify({ + userGoalId: goalId !== "0" ? goalId : null, + goalAlias: alias, + goalTypeCd: "WISH", + goalSpecificId: goal.goalSpecificId, + goalBeginDate: formatDateToYyyymmdd(begin), + duration: duration, + amount: price, + }), + }); if (response.ok) { const json = await response.json(); const goal: Goal = { @@ -76,7 +73,7 @@ export const GoalWish = ({ goal, goalDetail }: Props) => { return ( <> -
+
{ const { user } = useUser(); const { productId } = useParams(); const [product, setProduct] = useState(); + const [loading, setLoading] = useState(true); useEffect(() => { if (user.jwt) { (async function () { @@ -40,6 +42,7 @@ export const ProductDetailPage = () => { const json = await response.json(); console.log(json); setProduct(json); + setLoading(false); } } catch (err) { if (err instanceof Error) { @@ -49,6 +52,9 @@ export const ProductDetailPage = () => { })(); } }, [productId, user.jwt]); + + if (loading) return ; + return ( <>
@@ -96,13 +102,25 @@ export const ProductDetailPage = () => {
내용
{product?.info}
-
이자율
+
+ 이자율 +
{product?.interestRate}%
-
주의사항
+
+ 주의사항 +
{product?.cautions}
-
예금자
보호법
+
+ 예금자 +
+ 보호법 +
{product?.depositProtection}
-
적금
약관동의
+
+ 적금 +
+ 약관동의 +
{product?.contractTerms}
diff --git a/src/pages/product/ProductListPage.tsx b/src/pages/product/ProductListPage.tsx index e6e7daa..3c2fdf7 100644 --- a/src/pages/product/ProductListPage.tsx +++ b/src/pages/product/ProductListPage.tsx @@ -1,10 +1,11 @@ -import { useEffect } from "react"; +import { useEffect, useState } from "react"; import { SlArrowRight } from "react-icons/sl"; import { useNavigate, useParams } from "react-router-dom"; import { useGoalsProducts } from "../../contexts/ProductContext"; import { useUser } from "../../contexts/UserContext"; import { TopLine } from "../../components/ui/TopLine"; import { API_BASE_URL } from "../../constants"; +import { LoadingPage } from "../LoadingPage"; export type Product = { id: number; @@ -86,10 +87,12 @@ export const ProductListPage = () => { const { user } = useUser(); const { goalsProducts, setProduct } = useGoalsProducts(); let { goalId } = useParams(); - console.log(goalId); if (goalId === undefined) { goalId = ""; } + + const [loading, setLoading] = useState(true); + const goalProduct = goalsProducts?.goalsProducts?.find( (gp) => gp.goal.userGoalId === +goalId ); @@ -111,6 +114,7 @@ export const ProductListPage = () => { const json: ProductGetResponse = await response.json(); setProduct(+goalId, json); console.log(json); + setLoading(false); } } catch (err) { if (err instanceof Error) { @@ -123,11 +127,18 @@ export const ProductListPage = () => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [goalId, user.jwt]); + if ( + goalProduct && + goalProduct.products.recommendedProducts.length === 0 && + loading + ) + return ; + return ( <>
-
+

상품

@@ -141,13 +152,6 @@ export const ProductListPage = () => {
적합한 적금을 추천해 드릴게요!

- {/*

- 이미 가입된 상품 목록입니다. -
- {goalProduct?.products.enrolledProducts.map( - (product: enrolledProducts) => product.productNm + ", " - )} -

*/}
☝️ @@ -157,14 +161,14 @@ export const ProductListPage = () => { <>
이미 가입된 적금 - {goalProduct?.products.enrolledProducts.length} + + {" "} + {goalProduct?.products.enrolledProducts.length} + 개가 존재합니다.
- ):( - null - )} - + ) : null}
{goalProduct?.products.recommendedProducts.map( diff --git a/src/pages/split/SplitAutoPage.tsx b/src/pages/split/SplitAutoPage.tsx index f3dd177..20bec39 100644 --- a/src/pages/split/SplitAutoPage.tsx +++ b/src/pages/split/SplitAutoPage.tsx @@ -12,7 +12,11 @@ export const SplitAutoPage = () => { const [mode, setMode] = useState(true); const [isModalOpen, setModalOpen] = useState(false); const [isCheckModalOpen, setCheckModalOpen] = useState(false); - const [accountAutoDebitId, setAccountAutoDebitId] = useState({ saving: 0, life: 0, reserve: 0 }); + const [accountAutoDebitId, setAccountAutoDebitId] = useState({ + saving: 0, + life: 0, + reserve: 0, + }); const navigate = useNavigate(); const [ratio, setRatio] = useState({ saving: 50, @@ -64,25 +68,30 @@ export const SplitAutoPage = () => { // 사용자 계좌 가져오기 const getAccounts = async () => { try { - const response = await fetch(`${API_BASE_URL}/api/v1/accounts/auto-debit/adjust`, { - method: 'GET', - headers: { - 'Authorization': `Bearer ${user.jwt}`, - }, - }); + const response = await fetch( + `${API_BASE_URL}/api/v1/accounts/auto-debit/adjust`, + { + method: "GET", + headers: { + Authorization: `Bearer ${user.jwt}`, + }, + } + ); if (!response.ok) { - throw new Error('Network response was not ok'); + throw new Error("Network response was not ok"); } const data: AccountAutoDebitAdjustGetResponse[] = await response.json(); const testData = setAccountId(data); setAccountAutoDebitId(testData); } catch (error) { - console.error('Fetch error:', error); + console.error("Fetch error:", error); } - } + }; // 타입별 통장 번호 저장 - const setAccountId = (accounts: AccountAutoDebitAdjustGetResponse[]): Ratio => { + const setAccountId = ( + accounts: AccountAutoDebitAdjustGetResponse[] + ): Ratio => { let saving = 0; let life = 0; let reserve = 0; @@ -99,47 +108,54 @@ export const SplitAutoPage = () => { return { saving: saving, life: life, - reserve: reserve + reserve: reserve, }; }; useEffect(() => { - if (accountAutoDebitId.saving !== 0 && accountAutoDebitId.life !== 0 && accountAutoDebitId.reserve !== 0) { + if ( + accountAutoDebitId.saving !== 0 && + accountAutoDebitId.life !== 0 && + accountAutoDebitId.reserve !== 0 + ) { setAutoDebit(); } - // eslint-disable-next-line react-hooks/exhaustive-deps + // eslint-disable-next-line react-hooks/exhaustive-deps }, [accountAutoDebitId]); // 통장 쪼개기 (자동이체 설정) const setAutoDebit = async () => { const postOptions: FetchOptions = { - method: 'POST', + method: "POST", headers: { - 'Content-Type': 'application/json', - 'Authorization': `Bearer ${user.jwt}`, + "Content-Type": "application/json", + Authorization: `Bearer ${user.jwt}`, }, body: JSON.stringify({ - "savingAccountAutoDebitId": accountAutoDebitId.saving, - "savingAutoDebitAmount": calcAmount(ratio.saving, salary), - "lifeAccountAutoDebitId": accountAutoDebitId.life, - "lifeAutoDebitAmount": calcAmount(ratio.life, salary), - "spareAccountAutoDebitId": accountAutoDebitId.reserve, - "spareAutoDebitAmount": calcAmount(ratio.reserve, salary) + savingAccountAutoDebitId: accountAutoDebitId.saving, + savingAutoDebitAmount: calcAmount(ratio.saving, salary), + lifeAccountAutoDebitId: accountAutoDebitId.life, + lifeAutoDebitAmount: calcAmount(ratio.life, salary), + spareAccountAutoDebitId: accountAutoDebitId.reserve, + spareAutoDebitAmount: calcAmount(ratio.reserve, salary), }), }; try { - const response = await fetch(`${API_BASE_URL}/api/v1/accounts/auto-debit/adjust`, postOptions); + const response = await fetch( + `${API_BASE_URL}/api/v1/accounts/auto-debit/adjust`, + postOptions + ); if (!response.ok) { - console.error('Failed to set account types'); + console.error("Failed to set account types"); } else { setModalOpen(false); setCheckModalOpen(true); } } catch (error) { - console.error('Error:', error); + console.error("Error:", error); } - } + }; return ( <> @@ -153,11 +169,7 @@ export const SplitAutoPage = () => { 통장 쪼개기 추천 비율
- 하나은행 + 하나은행

@@ -279,26 +291,30 @@ export const SplitAutoPage = () => {

- setModalOpen(false)}> -

✔️

-

- 정말로 변경하시겠습니까? -

-
- -
+

✔️

+

+ 정말로 변경하시겠습니까? +

+
+ +
navigate("/split")}> -

✔️

-

- 변경되었습니다. -

-
- -
+

✔️

+

+ 변경되었습니다. +

+
+ +
diff --git a/src/pages/split/SplitMainPage.tsx b/src/pages/split/SplitMainPage.tsx index 7849067..34f7e06 100644 --- a/src/pages/split/SplitMainPage.tsx +++ b/src/pages/split/SplitMainPage.tsx @@ -122,7 +122,7 @@ export const SplitMainPage = () => { return ( <>
- +
diff --git a/src/pages/start/Splash.tsx b/src/pages/start/Splash.tsx index f1cffa9..7e7283a 100644 --- a/src/pages/start/Splash.tsx +++ b/src/pages/start/Splash.tsx @@ -17,7 +17,7 @@ export const Splash = () => {
{/* Hana Picture */} - Hana Picture + Hana Picture {/* 하나피스 */}
@Copyright HanaPiece diff --git a/src/pages/start/Tutorial1Page.tsx b/src/pages/start/Tutorial1Page.tsx index 9c5ef2b..ca5c10b 100644 --- a/src/pages/start/Tutorial1Page.tsx +++ b/src/pages/start/Tutorial1Page.tsx @@ -6,7 +6,7 @@ export const Tutorial1Page = () => {
Hana Picture diff --git a/src/pages/start/Tutorial3Page.tsx b/src/pages/start/Tutorial3Page.tsx index 655526a..5ee3c1b 100644 --- a/src/pages/start/Tutorial3Page.tsx +++ b/src/pages/start/Tutorial3Page.tsx @@ -6,7 +6,7 @@ export const Tutorial3Page = () => {
Hana Picture diff --git a/src/pages/start/Tutorial4Page.tsx b/src/pages/start/Tutorial4Page.tsx index 12098db..5c3f964 100644 --- a/src/pages/start/Tutorial4Page.tsx +++ b/src/pages/start/Tutorial4Page.tsx @@ -8,7 +8,7 @@ export const Tutorial4Page = () => {
Hana Picture diff --git a/src/pages/start/TutorialPage.tsx b/src/pages/start/TutorialPage.tsx index fca0c55..1421738 100644 --- a/src/pages/start/TutorialPage.tsx +++ b/src/pages/start/TutorialPage.tsx @@ -19,7 +19,7 @@ export const TutorialPage = () => {

- +
),