Merge branch 'main' of https://github.com/HanaPiece/hana-piece-client

HanaPiece · Jun 10, 2024 · c2adcf1 · c2adcf1
2 parents 98bb773 + 4851ce6
commit c2adcf1
Show file tree

Hide file tree

Showing 18 changed files with 41 additions and 17 deletions.
diff --git a/public/byul_loading.gif b/public/byul_loading.gif
diff --git a/public/byul_loading2.gif b/public/byul_loading2.gif
diff --git a/src/pages/LoadingPage.tsx b/src/pages/LoadingPage.tsx
@@ -0,0 +1,11 @@
+export const LoadingPage = () => {
+  return(
+    <>
+      <div className="grid place-items-center h-full">
+        <div className="bg-slate-100 rounded-full w-24 h-24">
+          <img src="/byul_loading.gif" alt="Loading" className="w-full h-full rounded-full" />
+        </div>
+    </div>
+    </>
+  );
+}
diff --git a/src/pages/home/GoalProductDetail.tsx b/src/pages/home/GoalProductDetail.tsx
@@ -4,6 +4,7 @@ import { useUser } from "../../contexts/UserContext";
 import { FetchOptions, useFetch } from "../../hooks/fetch";
 import { UserGoalAccountGetResponse } from "./homeType";
 import { useEffect, useState } from "react";
+import { LoadingPage } from "../LoadingPage";
 
 export const GoalProductDetail = ({ accountId }: { accountId: number }) => {
   const { user } = useUser();
@@ -33,7 +34,7 @@ export const GoalProductDetail = ({ accountId }: { accountId: number }) => {
     }
   }, [data, accountId]);
 
-  if (loading) return <div>Loading...</div>;
+  if (loading) return <LoadingPage />;
   if (error) return <div>Error: {error}</div>;
 
   if (!goalAccount) return <div>해당 계좌를 찾을 수 없습니다.</div>;

diff --git a/src/pages/home/GoalProductSelectPage.tsx b/src/pages/home/GoalProductSelectPage.tsx
@@ -6,6 +6,7 @@ import { FetchOptions, useFetch } from "../../hooks/fetch";
 import { UserGoalAccountGetResponse } from "./homeType";
 import { GreenButton } from "../../components/ui/GreenButton";
 import GoalProductRecommend from "./GoalProductRecommend";
+import { LoadingPage } from "../LoadingPage";
 
 type Props = {
   count: number;
@@ -68,7 +69,7 @@ export const GoalProductSelectPage = () => {
     }
   }, [data]);
 
-  if (loading) return <div>Loading...</div>;
+  if (loading) return <LoadingPage />;
   if (error) return <div>Error: {error}</div>;
 
   return (

diff --git a/src/pages/home/GoalProductTransactionDetail.tsx b/src/pages/home/GoalProductTransactionDetail.tsx
@@ -7,6 +7,7 @@ import {
 import { FetchOptions, useFetch } from "../../hooks/fetch";
 import { useUser } from "../../contexts/UserContext";
 import { API_BASE_URL } from "../../constants";
+import { LoadingPage } from "../LoadingPage";
 
 export const GoalProductTransactionDetail = ({
   accountId,
@@ -27,7 +28,7 @@ export const GoalProductTransactionDetail = ({
     fetchOptions
   );
 
-  if (loading) return <div>Loading...</div>;
+  if (loading) return <LoadingPage />;
   if (error) return <div>Error: {error}</div>;
 
   return (

diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
@@ -10,6 +10,7 @@ import { UserGoalGetResponse } from "./homeType";
 import { useUser } from "../../contexts/UserContext";
 import { API_BASE_URL } from "../../constants";
 import { useEffect } from "react";
+import { LoadingPage } from "../LoadingPage";
 
 const GoalBox = ({ goal }: { goal: UserGoalGetResponse }) => {
   const navigate = useNavigate();
@@ -124,7 +125,7 @@ export const HomePage = () => {
 
   const totalAmount = calcTotalAmount(data || []);
 
-  if (loading) return <div>Loading...</div>;
+  if (loading) return <LoadingPage />;
   if (error) return <div>Error: {error}</div>;
 
   return (

diff --git a/src/pages/life/LifePage.tsx b/src/pages/life/LifePage.tsx
@@ -5,6 +5,7 @@ import { addCommas, dateToYYYYMM, getDateParseForLifePage } from '../../componen
 import { useUser } from '../../contexts/UserContext';
 import { API_BASE_URL } from '../../constants';
 import { useNavigate } from 'react-router-dom';
+import { LoadingPage } from '../LoadingPage';
 
 const TodayDate = (): Date => {
   return new Date();
@@ -147,9 +148,7 @@ export const LifePage = () => {
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center h-screen">
-        <div className="text-2xl font-bold">Loading...</div>
-      </div>
+      <LoadingPage />
     );
   }
 

diff --git a/src/pages/mypage/account/AccountOpenListPage.tsx b/src/pages/mypage/account/AccountOpenListPage.tsx
@@ -4,6 +4,7 @@ import { TopLine } from "../../../components/ui/TopLine";
 import { useUser } from "../../../contexts/UserContext";
 import { FetchOptions, useFetch } from "../../../hooks/fetch";
 import { API_BASE_URL } from "../../../constants";
+import { LoadingPage } from "../../LoadingPage";
 
 type AccountGetResponse = {
   accountId: number;
@@ -66,7 +67,7 @@ export const AccountOpenListPage = () => {
     }
   }, [data]);
 
-  if (loading) return <div>Loading...</div>;
+  if (loading) return <LoadingPage />;
   if (error) return <div>Error: {error}</div>;
 
   return (

diff --git a/src/pages/mypage/account/AccountOpenUpdatePage.tsx b/src/pages/mypage/account/AccountOpenUpdatePage.tsx
@@ -5,6 +5,7 @@ import { FetchOptions, useFetch } from "../../../hooks/fetch";
 import { useNavigate } from "react-router-dom";
 import { API_BASE_URL } from "../../../constants";
 import Modal from "../../../components/ui/Modal";
+import { LoadingPage } from "../../LoadingPage";
 type AccountGetResponse = {
   accountId: number;
   accountNumber: string;
@@ -62,7 +63,7 @@ export const AccountOpenUpdatePage = () => {
   const allSelected = Object.values(selectedAccounts).every(
     (value) => value !== null
   );
-  if (loading) return <div>Loading...</div>;
+  if (loading) return <LoadingPage />;
   if (error) return <div>Error: {error}</div>;
   const handleSelectChange = (
     event: React.ChangeEvent<HTMLSelectElement>,

diff --git a/src/pages/mypage/account/AccountSavingListPage.tsx b/src/pages/mypage/account/AccountSavingListPage.tsx
@@ -3,6 +3,7 @@ import { TopLine } from "../../../components/ui/TopLine";
 import { useUser } from "../../../contexts/UserContext";
 import { FetchOptions, useFetch } from "../../../hooks/fetch";
 import { API_BASE_URL } from "../../../constants";
+import { LoadingPage } from "../../LoadingPage";
 
 type AccountGetResponse = {
   accountId: number;
@@ -47,7 +48,7 @@ export const AccountSavingListPage = () => {
     }
   }, [data]);
 
-  if (loading) return <div>Loading...</div>;
+  if (loading) return <LoadingPage />;
   if (error) return <div>Error: {error}</div>;
 
   return (

diff --git a/src/pages/mypage/account/create/AccountCompletePage.tsx b/src/pages/mypage/account/create/AccountCompletePage.tsx
@@ -4,6 +4,7 @@ import { TopLine } from "../../../../components/ui/TopLine";
 import { useState, useEffect } from "react";
 import { useUser } from "../../../../contexts/UserContext";
 import { API_BASE_URL } from "../../../../constants";
+import { LoadingPage } from "../../../LoadingPage";
 
 type AccountGetResponse = {
   accountNumber: string;
@@ -54,7 +55,7 @@ export const AccountCompletePage = () => {
     };
   }, [user.jwt]);
 
-  if (loading) return <div>Loading...</div>;
+  if (loading) return <LoadingPage />;
 
   return (
     <div className="container">

diff --git a/src/pages/mypage/goal/GoalCar.tsx b/src/pages/mypage/goal/GoalCar.tsx
@@ -7,6 +7,7 @@ import { formatDateToYyyyMmDd, formatDateToYyyymmdd } from "./GoalUtil";
 import { Goal, useGoalsProducts } from "../../../contexts/ProductContext";
 import { API_BASE_URL } from "../../../constants";
 import { IoClose } from "react-icons/io5";
+import { LoadingPage } from "../../LoadingPage";
 
 type Props = {
   goal: UserGoalDetailGetResponse;
@@ -67,7 +68,7 @@ export const GoalCar = ({ goal, goalDetail }: Props) => {
     car.carNm.toLowerCase().includes(search.toLowerCase())
   );
 
-  if (loading) return <div>Loading...</div>;
+  if (loading) return <LoadingPage />;
   if (error) return <div>Error: {error}</div>;
 
   const buttonClicked = () => {

diff --git a/src/pages/mypage/goal/GoalDetailPage.tsx b/src/pages/mypage/goal/GoalDetailPage.tsx
@@ -7,6 +7,7 @@ import { GoalHouse } from "./GoalHouse";
 import { GoalCar } from "./GoalCar";
 import { GoalWish } from "./GoalWish";
 import { API_BASE_URL } from "../../../constants";
+import { LoadingPage } from "../../LoadingPage";
 
 export type House = {
   apartmentNm: string;
@@ -68,7 +69,7 @@ export const GoalDetailPage = () => {
     }
   }, [data]);
 
-  if (loading) return <div>Loading...</div>;
+  if (loading) return <LoadingPage />;
   if (error) return <div>Error: {error}</div>;
 
   return (

diff --git a/src/pages/mypage/goal/GoalHouse.tsx b/src/pages/mypage/goal/GoalHouse.tsx
@@ -8,6 +8,7 @@ import { Goal, useGoalsProducts } from "../../../contexts/ProductContext";
 import { formatDateToYyyyMmDd, formatDateToYyyymmdd } from "./GoalUtil";
 import { API_BASE_URL } from "../../../constants";
 import { IoClose } from "react-icons/io5";
+import { LoadingPage } from "../../LoadingPage";
 
 type Props = {
   goal: UserGoalDetailGetResponse;
@@ -126,7 +127,7 @@ export const GoalHouse = ({ goal, goalDetail }: Props) => {
     ...new Set(apartments.map((apartment) => apartment.regionNm)),
   ];
 
-  if (loading) return <div>Loading...</div>;
+  if (loading) return <LoadingPage />;
   if (error) return <div>Error: {error}</div>;
 
   const buttonClicked = () => {

diff --git a/src/pages/split/SplitMainPage.tsx b/src/pages/split/SplitMainPage.tsx
@@ -4,6 +4,7 @@ import { useUser } from "../../contexts/UserContext";
 import { FetchOptions, useFetch } from "../../hooks/fetch";
 import { addCommas } from '../../components/utils/formatters';
 import { API_BASE_URL } from '../../constants';
+import { LoadingPage } from '../LoadingPage';
 
 export type Ratio = {
   saving: number;
@@ -115,7 +116,7 @@ export const SplitMainPage = () => {
 
 
 
-  if (loading) return <div>Loading...</div>;
+  if (loading) return <LoadingPage />;
   if (error) return <div>Error: {error}</div>;
 
   return (

diff --git a/src/pages/split/SplitStartPage.tsx b/src/pages/split/SplitStartPage.tsx
@@ -5,6 +5,7 @@ import { addCommas } from "../../components/utils/formatters";
 import { useUser } from "../../contexts/UserContext";
 import { FetchOptions, useFetch } from "../../hooks/fetch";
 import { API_BASE_URL } from "../../constants";
+import { LoadingPage } from "../LoadingPage";
 
 export const SplitStartPage = () => {
   const [isModalOpen, setModalOpen] = useState(false);
@@ -19,7 +20,7 @@ export const SplitStartPage = () => {
 
   const { data, error, loading } = useFetch<UserGetResponse>(`${API_BASE_URL}/api/v1/users`, fetchOptions);
 
-  if (loading) return <div>Loading...</div>;
+  if (loading) return <LoadingPage />;
   if (error) return <div>Error: {error}</div>;
 
   return (

diff --git a/src/pages/split/SplitStartSettingPage.tsx b/src/pages/split/SplitStartSettingPage.tsx
@@ -4,6 +4,7 @@ import { TopLine } from "../../components/ui/TopLine";
 import { useUser } from "../../contexts/UserContext";
 import { FetchOptions, useFetch } from "../../hooks/fetch";
 import { API_BASE_URL } from "../../constants";
+import { LoadingPage } from "../LoadingPage";
 
 export const SplitStartSettingPage = () => {
   const { user } = useUser();
@@ -61,7 +62,7 @@ export const SplitStartSettingPage = () => {
     navigate("/split/start/split", { state: { selectedAccounts } });
   };
 
-  if (loading) return <div>Loading...</div>;
+  if (loading) return <LoadingPage />;
   if (error) return <div>Error: {error}</div>;
 
   return (