Merge pull request #69 from Hana4Team/fix/#66

[Fix/#66] 다양한 버그 수정

src/apis/apiClient.ts

@@ -44,8 +44,6 @@ import {
 } from '../types/transaction';
 import { moneyboxApi } from './interfaces/moneyboxApi';
 
-const TOKEN = getCookie('token');
-
 export class ApiClient
   implements
     usersApi,
@@ -478,6 +476,7 @@ export class ApiClient
 
     newInstance.interceptors.request.use(
       (config) => {
+        const TOKEN = getCookie('token');
         if (TOKEN) {
           config.headers['Authorization'] = `Bearer ${TOKEN}`;
         }

src/components/molecules/Alarm.tsx

@@ -1,8 +1,14 @@
 import { FC } from 'react';
-import { AlarmType } from '../../types/alarm';
 
-export const Alarm: FC<AlarmType> = ({ contents, createdAt }) => {
+interface IProps {
+  contents: string;
+  createdAt: Date | string;
+  isAlarm?: boolean;
+}
+
+export const Alarm: FC<IProps> = ({ contents, createdAt, isAlarm }) => {
   const createdDate = new Date(createdAt);
+
   return (
     <div className='w-11/12 h-24 border border-none rounded-3xl bg-white m-auto flex items-center justify-center drop-shadow-under'>
       <div className='w-28 h-20 my-auto'>
@@ -16,9 +22,15 @@ export const Alarm: FC<AlarmType> = ({ contents, createdAt }) => {
         <p className='text-2xl font-hanaRegular'>똑똑하나</p>
         <p className='text-xl font-hanaRegular'>{contents}</p>
       </div>
-      <div className='h-20 mr-5 mt-1 text-sm font-hanaRegular text-gray-500'>
-        {`${createdDate.getFullYear()}.${(createdDate.getMonth() + 1).toString().padStart(2, '0')}.${createdDate.getDate().toString().padStart(2, '0')}`}
-      </div>
+      {isAlarm ? (
+        <div className='h-20 w-14 mr-5 mt-1 text-sm font-hanaRegular text-gray-500'>
+          방금전
+        </div>
+      ) : (
+        <div className='h-20 mr-5 mt-1 text-sm font-hanaRegular text-gray-500'>
+          {`${createdDate.getFullYear()}.${(createdDate.getMonth() + 1).toString().padStart(2, '0')}.${createdDate.getDate().toString().padStart(2, '0')}`}
+        </div>
+      )}
     </div>
   );
 };

src/components/organisms/AlarmAnimation.tsx

@@ -34,7 +34,7 @@ export const AlarmAnimation: FC<IProps> = ({
     <div
       className={`fixed max-w-[500px] w-full z-[60] ${activeAnimation ? 'animate-slidedown' : 'animate-slideup'}`}
     >
-      <Alarm contents={message} createdAt={new Date()} />
+      <Alarm contents={message} createdAt={new Date()} isAlarm={true} />
     </div>
   );
 };

src/pages/main/AlarmPage.tsx

@@ -1,8 +1,11 @@
 import { Alarm } from '../../components/molecules/Alarm';
 import { ApiClient } from '../../apis/apiClient';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useEffect } from 'react';
 
 export const AlarmPage = () => {
+  const queryClient = useQueryClient();
+
   const { data: alarms } = useQuery({
     queryKey: ['alarms'],
     queryFn: () => {
@@ -11,6 +14,10 @@ export const AlarmPage = () => {
     },
   });
 
+  useEffect(() => {
+    queryClient.invalidateQueries({ queryKey: ['alarms'] });
+  }, []);
+
   return (
     <>
       <h3 className='pt-20 w-full text-center font-hanaMedium text-3xl mb-14'>

src/pages/main/Home.tsx

@@ -3,11 +3,12 @@ import { FaChevronRight } from 'react-icons/fa';
 import { useNavigate } from 'react-router-dom';
 import { AlertModal } from '../../components/AlertModal';
 import { getCookie } from '../../utils/cookie';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { ApiClient } from '../../apis/apiClient';
 
 export const Home = () => {
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
   const [isExistMoneyBox, setIsExistMoneyBox] = useState<boolean>(false);
   const [showModalContent, setShowModalContent] = useState<string>('');
   const isExistToken = getCookie('token');
@@ -50,6 +51,10 @@ export const Home = () => {
     }
   }, [isLoading]);
 
+  useEffect(() => {
+    queryClient.invalidateQueries({ queryKey: ['userInfo'] });
+  }, []);
+
   return (
     <>
       {showModalContent !== '' && (

src/pages/mission2/Mission2AccountOpening.tsx

@@ -59,7 +59,6 @@ export const Mission2AccountOpening = () => {
     onSuccess: (data) => {
       realCertificatioNnumber.current = data.code;
       setCurrentNumber((prev) => prev + 1);
-      setBtnActive(false);
     },
   });
 
@@ -94,6 +93,7 @@ export const Mission2AccountOpening = () => {
 
   const nextHandler = () => {
     if (currentNumber === 1) {
+      setBtnActive(false);
       if (
         btnActive &&
         info.name &&
@@ -105,7 +105,6 @@ export const Mission2AccountOpening = () => {
         postMessage.mutate(info.phone_number.split('-').join(''));
         return;
       } else {
-        setBtnActive(false);
         return;
       }
     }

src/pages/mission2/Mission2StartPage.tsx

@@ -4,11 +4,12 @@ import { MissionStartHeader } from '../../components/molecules/MissionStartHeade
 import { MoneyBoxIntroItem } from '../../components/molecules/MoneyBoxIntroItem';
 import Topbar from '../../components/Topbar';
 import { useEffect, useState } from 'react';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { ApiClient } from '../../apis/apiClient';
 
 export const Mission2StartPage = () => {
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
   const [animation, setAnimation] = useState<number>(0);
 
   const { data: moneyBoxInfo } = useQuery({
@@ -32,6 +33,10 @@ export const Mission2StartPage = () => {
     };
   }, []);
 
+  useEffect(() => {
+    queryClient.invalidateQueries({ queryKey: ['moneyBoxInfo'] });
+  }, []);
+
   return (
     <>
       <Topbar title='이사미션' />

src/pages/mission3/Mission3AccountOpening.tsx

@@ -1,6 +1,6 @@
 import { useLocation, useNavigate } from 'react-router-dom';
 import Topbar from '../../components/Topbar';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { Button } from '../../components/ui/Button';
 import { ConfirmCard } from '../../components/molecules/ConfirmCard';
 import { AccountOutputChoice } from '../../components/organisms/accounts/AccountOutputChoice';
@@ -10,7 +10,7 @@ import {
   checkAmountMoney,
   checkAmountUnitMoney,
 } from '../../utils/checkAmountUnit';
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { QueryClient, useMutation, useQuery } from '@tanstack/react-query';
 import { ApiClient } from '../../apis/apiClient';
 import { add, format } from 'date-fns';
 
@@ -22,6 +22,7 @@ type userInfo = {
 
 export const Mission3AccountOpening = () => {
   const navigate = useNavigate();
+  const queryClient = new QueryClient();
   const location = useLocation();
   const product = location.state.product;
   const [currentNumber, setCurrentNumber] = useState<number>(0);
@@ -133,6 +134,10 @@ export const Mission3AccountOpening = () => {
     return true;
   };
 
+  useEffect(() => {
+    queryClient.invalidateQueries({ queryKey: ['moneyboxMoney'] });
+  }, []);
+
   return (
     <div className='bg-white flex flex-col items-center h-screen w-full'>
       <Topbar title='100일 적금 가입' />

src/pages/mission3/Mission3StartPage.tsx

@@ -2,12 +2,14 @@ import { BankBookIntro } from '../../components/molecules/BankBookIntro';
 import { MissionStartHeader } from '../../components/molecules/MissionStartHeader';
 import Topbar from '../../components/Topbar';
 import { useNavigate } from 'react-router-dom';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { ApiClient } from '../../apis/apiClient';
 import { CheckAccountMoney } from '../../components/organisms/accounts/CheckAccountMoney';
+import { useEffect } from 'react';
 
 export const Mission3StartPage = () => {
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
 
   const { data: moneyboxMoney } = useQuery({
     queryKey: ['moneyboxMoney'],
@@ -25,6 +27,10 @@ export const Mission3StartPage = () => {
     },
   });
 
+  useEffect(() => {
+    queryClient.invalidateQueries({ queryKey: ['moneyboxMoney'] });
+  }, []);
+
   return (
     <>
       <Topbar title='이사미션' />

src/pages/news/NewsList.tsx

@@ -1,9 +1,9 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import Topbar from '../../components/Topbar';
 import { MissionStartHeader } from '../../components/molecules/MissionStartHeader';
 import { NewsCategory } from '../../components/molecules/NewsCategory';
 import { NewsItem } from '../../components/molecules/NewsItem';
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { QueryClient, useMutation, useQuery } from '@tanstack/react-query';
 import { ApiClient } from '../../apis/apiClient';
 import { AlarmAnimation } from '../../components/organisms/AlarmAnimation';