Merge pull request #54 from HanaPiece/final

fix: img
HanaPiece · Jun 10, 2024 · 49ecc8a · 49ecc8a
2 parents 09bee17 + e98ecc1
commit 49ecc8a
Show file tree

Hide file tree

Showing 12 changed files with 177 additions and 115 deletions.
diff --git a/src/pages/home/GoalProductRecommend.tsx b/src/pages/home/GoalProductRecommend.tsx
@@ -3,19 +3,24 @@ 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;
 
   let totalAmount = 0;
 
   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 }) => {
                 </div>
                 <div className="text-xs text-lime-600 font-bold">예상금액</div>
                 <div className="col-span-4 text-xs">
-                <p>
+                  <p>
                     매달 10만원씩 적금한다면
                     <span className="text-red-600">
-                      {` ${calcExpectedAmount(goalProduct.products.recommendedProducts[0]?.termYear, goalProduct.products.recommendedProducts[0]
-                      ?.interestRate, 100000)}`}
+                      {` ${calcExpectedAmount(
+                        goalProduct.products.recommendedProducts[0]?.termYear,
+                        goalProduct.products.recommendedProducts[0]
+                          ?.interestRate,
+                        100000
+                      )}`}
                     </span>
                     원
                   </p>
                   <p>
                     매달 100만원씩 적금한다면
                     <span className="text-red-600">
-                      {` ${calcExpectedAmount(goalProduct.products.recommendedProducts[0]?.termYear, goalProduct.products.recommendedProducts[0]
-                      ?.interestRate, 1000000)}`}
+                      {` ${calcExpectedAmount(
+                        goalProduct.products.recommendedProducts[0]?.termYear,
+                        goalProduct.products.recommendedProducts[0]
+                          ?.interestRate,
+                        1000000
+                      )}`}
                     </span>
                     원
                   </p>
@@ -157,21 +170,31 @@ const GoalProductRecommend = ({ goalId }: { goalId: number }) => {
                     </span>
                     %
                   </div>
-                  <div className="text-xs text-lime-600 font-bold">예상금액</div>
+                  <div className="text-xs text-lime-600 font-bold">
+                    예상금액
+                  </div>
                   <div className="text-xs col-span-4">
-                  <p>
+                    <p>
                       매달 10만원씩 적금한다면
                       <span className="text-red-600">
-                        {` ${calcExpectedAmount(goalProduct.products.recommendedProducts[1]?.termYear, goalProduct.products.recommendedProducts[0]
-                        ?.interestRate, 100000)}`}
+                        {` ${calcExpectedAmount(
+                          goalProduct.products.recommendedProducts[1]?.termYear,
+                          goalProduct.products.recommendedProducts[0]
+                            ?.interestRate,
+                          100000
+                        )}`}
                       </span>
                       원
                     </p>
                     <p>
                       매달 100만원씩 적금한다면
                       <span className="text-red-600">
-                        {` ${calcExpectedAmount(goalProduct.products.recommendedProducts[1]?.termYear, goalProduct.products.recommendedProducts[0]
-                        ?.interestRate, 1000000)}`}
+                        {` ${calcExpectedAmount(
+                          goalProduct.products.recommendedProducts[1]?.termYear,
+                          goalProduct.products.recommendedProducts[0]
+                            ?.interestRate,
+                          1000000
+                        )}`}
                       </span>
                       원
                     </p>
@@ -182,7 +205,7 @@ const GoalProductRecommend = ({ goalId }: { goalId: number }) => {
           )}
         </>
       ) : (
-        <div>Loading...</div>
+        <LoadingPage />
       )}
     </>
   );

diff --git 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)}
       >
         <div className="absolute top-0 left-0 bg-customGreen w-1/5 text-white p-1 text-sm text-center font-hana-r rounded-br-xl rounded-tl-xl">
-          목표 {goal.userGoalId}
+          목표 {idx}
         </div>
         <div className="grid grid-cols-5 text-md font-semibold mb-8 mt-3">
           <div className="align-bottom col-span-3 flex">
@@ -131,14 +136,14 @@ export const HomePage = () => {
   return (
     <>
       <div className="bg-white px-10">
-        <img src="logo.png" className="w-1/5" alt="" />
+        <img src="\logo.png" className="w-1/5" alt="" />
       </div>
       <div className="mx-10 my-5">
         <div className="font-hana-r">
           <p className="text-gray-400 text-xs">반갑습니다</p>
           <h3 className="font-semibold text-lg pt-1">{user.name} 님</h3>
         </div>
-        {totalAmount.toString.length>10 ? (
+        {totalAmount.toString.length > 10 ? (
           <>
             <div className="px-5 py-3 mt-3 bg-gray-200 rounded-2xl items-end">
               <h2 className="font-hana-b text-lg">💰현재 저축액</h2>
@@ -148,7 +153,7 @@ export const HomePage = () => {
               </h2>
             </div>
           </>
-        ): (
+        ) : (
           <>
             <div className="px-5 py-3 mt-3 bg-gray-200 rounded-2xl flex justify-between items-end">
               <h2 className="font-hana-b text-lg">💰현재 저축액 :</h2>
@@ -159,11 +164,10 @@ export const HomePage = () => {
             </div>
           </>
         )}
-
 
-        {data?.map((goal) => (
+        {data?.map((goal, cnt) => (
           <div key={goal.userGoalId}>
-            <GoalBox goal={goal} />
+            <GoalBox goal={goal} idx={cnt + 1} />
           </div>
         ))}
 

diff --git 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 (
     <>
-      <div className={`mb-5 ${Number(goalId) !== 0 ? 'mx-10' : ''}`}>
+      <div className={`mb-5 ${Number(goalId) !== 0 ? "mx-10" : ""}`}>
         <label className="text-customGreen font-bold text-lg">목표 이름</label>
         <input
           type="text"

diff --git a/src/pages/product/ProductDetailPage.tsx b/src/pages/product/ProductDetailPage.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import { useParams } from "react-router-dom";
 import { useUser } from "../../contexts/UserContext";
 import { API_BASE_URL } from "../../constants";
+import { LoadingPage } from "../LoadingPage";
 
 export type ProductDetailResponse = {
   productId: number;
@@ -23,6 +24,7 @@ export const ProductDetailPage = () => {
   const { user } = useUser();
   const { productId } = useParams();
   const [product, setProduct] = useState<ProductDetailResponse>();
+  const [loading, setLoading] = useState<boolean>(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 <LoadingPage />;
+
   return (
     <>
       <div className="container">
@@ -96,13 +102,25 @@ export const ProductDetailPage = () => {
             <div className="grid grid-cols-7 gap-4">
               <div className="col-span-2 font-bold text-customGreen">내용</div>
               <div className="col-span-5">{product?.info}</div>
-              <div className="col-span-2 font-bold text-customGreen">이자율</div>
+              <div className="col-span-2 font-bold text-customGreen">
+                이자율
+              </div>
               <div className="col-span-5">{product?.interestRate}%</div>
-              <div className="col-span-2 font-bold text-customGreen">주의사항</div>
+              <div className="col-span-2 font-bold text-customGreen">
+                주의사항
+              </div>
               <div className="col-span-5">{product?.cautions}</div>
-              <div className="col-span-2 font-bold text-customGreen">예금자<br />보호법</div>
+              <div className="col-span-2 font-bold text-customGreen">
+                예금자
+                <br />
+                보호법
+              </div>
               <div className="col-span-5">{product?.depositProtection}</div>
-              <div className="col-span-2 font-bold text-customGreen">적금<br />약관동의</div>
+              <div className="col-span-2 font-bold text-customGreen">
+                적금
+                <br />
+                약관동의
+              </div>
               <div className="col-span-5">{product?.contractTerms}</div>
             </div>
           </div>

diff --git 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<boolean>(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 <LoadingPage />;
+
   return (
     <>
       <TopLine name={"적금 상품 추천"} />
       <div className="h-1 bg-gray-200">
-          <div className="w-2/6 hana-color h-1"></div>
+        <div className="w-2/6 hana-color h-1"></div>
       </div>
       <div className="p-4 container">
         <h1 className="text-2xl font-bold mb-4 ml-2 font-hana-b mt-3">상품</h1>
@@ -141,13 +152,6 @@ export const ProductListPage = () => {
               <br />
               적합한 적금을 추천해 드릴게요!
             </p>
-            {/* <p className="text-sm mt-2">
-              이미 가입된 상품 목록입니다.
-              <br />
-              {goalProduct?.products.enrolledProducts.map(
-                (product: enrolledProducts) => product.productNm + ", "
-              )}
-            </p> */}
           </div>
           <div className="flex justify-center items-cneter text-4xl place-items-center font-hana-b">
             ☝️
@@ -157,14 +161,14 @@ export const ProductListPage = () => {
           <>
             <div className="rounded-2xl bg-white shadow-md p-3 px-5 mb-5 font-hana-m text-sm">
               이미 가입된 적금
-              <span className="font-hana-b text-red-400 text-lg"> {goalProduct?.products.enrolledProducts.length}</span>
+              <span className="font-hana-b text-red-400 text-lg">
+                {" "}
+                {goalProduct?.products.enrolledProducts.length}
+              </span>
               개가 존재합니다.
             </div>
           </>
-        ):(
-          null
-        )}
-
+        ) : null}
 
         <div className="h-[470px] overflow-y-auto p-2">
           {goalProduct?.products.recommendedProducts.map(