Merge pull request #72 from Hana4Team/fix/#67

[Fix/#67] 미션완료, 회원가입 버그 수정

src/components/molecules/BankBookIntro.tsx

@@ -47,7 +47,7 @@ export const BankBookIntro: FC<IProps> = ({
             <p className='text-[#666666] text-lg'>{content}</p>
           </div>
         </div>
-        <img src='/public/images/별돌이2.svg' alt='별돌이' className='h-64' />
+        <img src='/images/별돌이2.svg' alt='별돌이' className='h-64' />
       </div>
     </div>
   );

src/components/molecules/IntroduceStep.tsx

@@ -20,7 +20,10 @@ export const IntroduceStep: FC<IProps> = ({ step }) => {
           </div>
           <div className='flex flex-col gap-5 mb-10'>
             <div>🔹지난달 나의 소비습관을 확인합니다.</div>
-            <div>🔹지난달 소비내역을 참고하여 이번 달 예산을 설정합니다.</div>
+            <div>
+              🔹지난달 소비내역을 참고하여 이번 달 예산을 설정하면 1단계 미션
+              성공!.
+            </div>
             <div>
               🔹카테고리별로 더 상세하게 예산을 확인하고 설정할 수 있습니다.
             </div>
@@ -49,9 +52,9 @@ export const IntroduceStep: FC<IProps> = ({ step }) => {
               🔹머니박스 통장을 개설하여 통장쪼개기를 통해 수입과 지출을 통제할
               수 있습니다.
             </div>
+            <div>🔹머니박스를 사용하면서 자신의 과소비지수를 확인해보아요.</div>
             <div>
-              🔹머니박스 이용 한달 후 지난달 소비내역과 비교하여 소비가 5%이상
-              감소되었을 시 2단계 성공
+              🔹한달동안 머니박스를 통해 자신의 소비를 관리하면 2단계 미션 성공!
             </div>
             <div>🔹성공하면 하나머니를 지급해드립니다.</div>
           </div>
@@ -100,8 +103,8 @@ export const IntroduceStep: FC<IProps> = ({ step }) => {
               있습니다.
             </div>
             <div>
-              🔹100일이 지난 후 3단계 성공! 50일 이상 저축에 성공할 시 금리 6%
-              가 지급됩니다.
+              🔹100일이 지난 후 3단계 성공! 50일 이상 저축에 성공할 시 최대 금리
+              가 적용됩니다.
             </div>
             <div>🔹성공하면 하나머니를 지급해드립니다.</div>
           </div>
@@ -133,8 +136,8 @@ export const IntroduceStep: FC<IProps> = ({ step }) => {
             </div>
             <div>🔹로드맵을 통해 자신의 현재 금액을 확인할 수 있습니다.</div>
             <div>
-              🔹만기일이 지난 후 4단계 성공! 목표금액 도달 시 최고 금리가
-              지급됩니다.
+              🔹만기일이 지난 후 4단계 성공! 목표금액 도달 시 최대 금리가
+              적용됩니다.
             </div>
             <div>🔹성공하면 하나머니를 지급해드립니다.</div>
           </div>

src/components/molecules/PasswordForm.tsx

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode, useEffect, useRef } from 'react';
+import React, { FC, ReactNode, useEffect } from 'react';
 
 interface IProps {
   title: ReactNode;
@@ -18,19 +18,16 @@ export const PasswordForm: FC<IProps> = ({
   checkPwdCondition,
 }) => {
   useEffect(() => {
-    if (step === 6 || step == undefined) {
+    if (step === 6 || step === undefined) {
       inputRef.current.forEach((input) => {
         if (input) {
           input.value = '';
         }
       });
+      focusFirstInput();
     }
   }, [step, re]);
 
-  useEffect(() => {
-    focusFirstInput();
-  }, [step, re]);
-
   const handleInput = (
     index: number,
     event: React.ChangeEvent<HTMLInputElement>
@@ -46,15 +43,14 @@ export const PasswordForm: FC<IProps> = ({
     }
 
     checkPwdCondition?.();
-    focusFirstInput();
   };
 
   const handleKeyDown = (
     index: number,
     event: React.KeyboardEvent<HTMLInputElement>
   ) => {
     if (event.key === 'Backspace') {
-      if (!inputRef.current[index]?.value && index >= 0) {
+      if (!inputRef.current[index]?.value && index > 0) {
         inputRef.current[index - 1]?.focus();
       }
     }
@@ -88,7 +84,7 @@ export const PasswordForm: FC<IProps> = ({
             ref={(el) => (inputRef.current[index] = el)}
             onChange={(e) => handleInput(index, e)}
             onKeyDown={(e) => handleKeyDown(index, e)}
-            onFocus={() => focusFirstInput()}
+            onClick={focusFirstInput}
           />
         ))}
       </div>

src/pages/MissionMain.tsx

@@ -1,8 +1,9 @@
 import { MissionStep } from '../components/molecules/MissionStep';
 import Topbar from '../components/Topbar';
 import { MissionStartHeader } from '../components/molecules/MissionStartHeader';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { ApiClient } from '../apis/apiClient';
+import { useEffect } from 'react';
 
 const step = [
   { title: '내 소비 습관 알기', text: '지난 달 나의 소비 습관을 알아보아요' },
@@ -19,6 +20,7 @@ const step = [
 ];
 
 export const MissionMain = () => {
+  const queryClient = useQueryClient();
   const { data: user, isSuccess } = useQuery({
     queryKey: ['user'],
     queryFn: () => {
@@ -27,6 +29,12 @@ export const MissionMain = () => {
     },
   });
 
+  useEffect(() => {
+    queryClient.invalidateQueries({
+      queryKey: ['user'],
+    });
+  }, []);
+
   return (
     <>
       <Topbar title='이사미션' />

src/pages/MyHome.tsx

@@ -1,11 +1,12 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import React, { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { ApiClient } from '../apis/apiClient';
 import { Shopping } from '../components/organisms/Shopping';
 
 export const MyHome = () => {
   const navigate = useNavigate();
+  const queryClient = useQueryClient();
   const { pathname } = useLocation();
   const [isOpenModal, setIsModalOpen] = useState<boolean>(false);
   const [visible, setVisible] = useState<boolean>(false);
@@ -28,6 +29,12 @@ export const MyHome = () => {
     };
   }, []);
 
+  useEffect(() => {
+    queryClient.invalidateQueries({
+      queryKey: ['home'],
+    });
+  }, []);
+
   return (
     <>
       {isSuccess && (

src/pages/auth/Join.tsx

@@ -109,9 +109,21 @@ export const Join = () => {
       else setIsActive(false);
     }
     if (title === 'confirmPwd') {
-      if (confirmPwdRef.current.map((p) => p?.value).join('').length === 6)
+      if (confirmPwdRef.current.map((p) => p?.value).join('').length === 6) {
         setIsActive(true);
-      else setIsActive(false);
+        if (
+          confirmPwdRef.current.map((p) => p?.value).join('') ===
+          inputs.password
+        ) {
+          const updatedConfirmPassword = confirmPwdRef.current
+            .map((p) => p?.value)
+            .join('');
+          setInputs({
+            ...inputs,
+            confirmPassword: updatedConfirmPassword,
+          });
+        }
+      } else setIsActive(false);
     }
   };
 
@@ -121,17 +133,8 @@ export const Join = () => {
   };
 
   const pwdCheck = () => {
-    if (
-      confirmPwdRef.current.map((p) => p?.value).join('') === inputs.password
-    ) {
+    if (inputs.confirmPassword === inputs.password) {
       setIsPwdCorrect(true);
-      const updatedConfirmPassword = confirmPwdRef.current
-        .map((p) => p?.value)
-        .join('');
-      setInputs({
-        ...inputs,
-        confirmPassword: updatedConfirmPassword,
-      });
       setIsActive(true);
       return true;
     } else {
@@ -162,8 +165,8 @@ export const Join = () => {
       setIsActive(false);
     }
     if (step === 3 && isPhone) {
-      postMessage(inputs.phoneNumber);
       setStep((prev) => prev + 1);
+      postMessage(inputs.phoneNumber);
       setIsActive(false);
     }
     if (step === 4) {
@@ -179,8 +182,7 @@ export const Join = () => {
       setIsActive(false);
     }
     if (step === 6) {
-      pwdCheck();
-      postJoin(inputs);
+      pwdCheck() && postJoin(inputs);
     }
     if (step === 7) {
       navigate('/home');

src/pages/mission3/Savings100Days.tsx

@@ -1,15 +1,19 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { Calendar } from '../../components/organisms/Calendar';
 import Topbar from '../../components/Topbar';
 import { useNavigate } from 'react-router-dom';
-import { useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { ApiClient } from '../../apis/apiClient';
 import { differenceInDays, formatDate } from 'date-fns';
+import { AlarmAnimation } from '../../components/organisms/AlarmAnimation';
+import { AlertModal } from '../../components/AlertModal';
 
 export const Savings100Days = () => {
   const navigate = useNavigate();
-  const startDate = useRef<string>('');
-  const endDate = useRef<string>('');
+  const queryClient = useQueryClient();
+  const [showStepModal, setShowStepModal] = useState<boolean>(false);
+  const [showAlarm, setShowAlarm] = useState<boolean>(false);
+  const alarmMsgRef = useRef<string>('');
 
   const { data: saving100, isSuccess } = useQuery({
     queryKey: ['saving100'],
@@ -27,6 +31,67 @@ export const Savings100Days = () => {
     },
   });
 
+  const { data: userInfo } = useQuery({
+    queryKey: ['userInfo'],
+    queryFn: () => {
+      const res = ApiClient.getInstance().getUser();
+      return res;
+    },
+  });
+
+  const { mutate: checkMission, isSuccess: isSuccess0 } = useMutation({
+    mutationKey: ['checkMission'],
+    mutationFn: () => {
+      const res = ApiClient.getInstance().updateMissionCheck();
+      return res;
+    },
+  });
+
+  const { mutate: updateHanaMoney } = useMutation({
+    mutationKey: ['updateHanaMoney'],
+    mutationFn: (isMission: boolean) => {
+      const res = ApiClient.getInstance().updatePoint(isMission);
+      return res;
+    },
+    onSuccess: (data) => {
+      postAlarm(`하나머니 ${data.points}원 적립!`);
+    },
+  });
+
+  const { mutate: postAlarm } = useMutation({
+    mutationKey: ['updateHanaMoney'],
+    mutationFn: (contents: string) => {
+      const res = ApiClient.getInstance().postAlarm(contents);
+      return res;
+    },
+    onSuccess: (_, variables) => {
+      checkMission();
+      setShowAlarm(true);
+      alarmMsgRef.current = variables;
+    },
+  });
+
+  useEffect(() => {
+    if (!isSuccess0 && userInfo?.step === 3 && userInfo.stepStatus === 2) {
+      setShowStepModal(true);
+    }
+  }, [userInfo]);
+
+  useEffect(() => {
+    queryClient.invalidateQueries({
+      queryKey: ['userInfo', 'saving100', 'saving100Check'],
+    });
+  }, []);
+
+  const onCloseStepModal = async () => {
+    try {
+      updateHanaMoney(true);
+      setShowStepModal(false);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
   const moveToTermination = () => {
     isSuccess &&
       navigate('/termination', {
@@ -48,6 +113,24 @@ export const Savings100Days = () => {
     <>
       {isSuccess && isCheckSuccess && (
         <>
+          {showAlarm && (
+            <AlarmAnimation
+              message={alarmMsgRef.current}
+              showAlarm={showAlarm}
+              onClickShowAlarm={(status: boolean) => setShowAlarm(status)}
+            />
+          )}
+          {showStepModal && (
+            <AlertModal onClose={() => onCloseStepModal()}>
+              <div className='flex flex-col font-hanaMedium text-2xl text-center'>
+                <p>
+                  3단계 미션을 <span className='text-hanaDeepGreen'>완료</span>
+                  했습니다!
+                </p>
+              </div>
+            </AlertModal>
+          )}
+
           <Topbar
             title={saving100.productName}
             onClick={() => navigate('/mission')}
@@ -76,11 +159,14 @@ export const Savings100Days = () => {
                       </div>
                       <div className='absolute bg-gray-100 w-[100%] h-5 rounded-lg border-2'></div>
                       <div
-                        className={`absolute bg-hanaGreen w-[${Math.floor(
-                          (differenceInDays(new Date(), saving100.startDate) /
-                            100) *
-                            100
-                        )}%] h-5 rounded-lg`}
+                        className={`absolute bg-hanaGreen h-5 rounded-lg`}
+                        style={{
+                          width: `${Math.floor(
+                            (differenceInDays(new Date(), saving100.startDate) /
+                              100) *
+                              100
+                          )}%`,
+                        }}
                       ></div>
                     </div>
                   </div>