feat/#68: 퀴즈, promise api 연결

SolSolHigh · Aug 30, 2024 · 4e13359 · 4e13359
1 parent ed4a411
commit 4e13359
Show file tree

Hide file tree

Showing 13 changed files with 261 additions and 72 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -2,7 +2,7 @@ name: SolSolHigh-FE Deploy
 
 on:
     push:
-        branches: develop
+        branches: feat/#68-quiz-promise-account
 
 jobs:
     deploy:
@@ -17,4 +17,4 @@ jobs:
                   password: ${{ secrets.SSH_PASSWORD }}
                   script: |
                       cd ~/solsol-high
-                      ./static.sh develop
+                      ./static.sh feat/#68-quiz-promise-account
diff --git a/ssh-web/src/components/molecules/ChangeChild/ChangeChild,types.tsx b/ssh-web/src/components/molecules/ChangeChild/ChangeChild,types.tsx
@@ -0,0 +1,8 @@
+import { IChild } from '../../../interfaces/userInterface';
+
+export interface ChangeChildeProps {
+  childrenList: IChild[];
+  setChildrenList: React.Dispatch<React.SetStateAction<IChild[]>>;
+  selectedChild: number;
+  setSelectedChild: React.Dispatch<React.SetStateAction<number>>;
+}
diff --git a/ssh-web/src/components/molecules/ChangeChild/index.tsx b/ssh-web/src/components/molecules/ChangeChild/index.tsx
@@ -4,10 +4,14 @@ import { Button } from '../../atoms/Button';
 import { FaArrowAltCircleLeft, FaArrowAltCircleRight } from 'react-icons/fa';
 import { api } from '../../../apis/interceptors';
 import { IChild } from '../../../interfaces/userInterface';
+import { ChangeChildeProps } from './ChangeChild,types';
 
-export const ChangeChild = () => {
-  const [childrenList, setChildrenList] = useState<IChild[]>([]);
-  const [selectedChild, setSelectedChild] = useState<number>(0);
+export const ChangeChild = ({
+  childrenList,
+  setChildrenList,
+  selectedChild,
+  setSelectedChild,
+}: ChangeChildeProps) => {
   const [isloading, setIsLoading] = useState<boolean>(false);
 
   useEffect(() => {
@@ -17,6 +21,7 @@ export const ChangeChild = () => {
       setIsLoading(false);
     });
   });
+
   return (
     <div className="flex flex-row relative items-center mb-2 p-2 px-4 rounded-lg space-x-3">
       {selectedChild !== 0 && (

diff --git a/ssh-web/src/components/organisms/ConfirmPromiseModal/ConfirmPromiseModal.types.tsx b/ssh-web/src/components/organisms/ConfirmPromiseModal/ConfirmPromiseModal.types.tsx
@@ -2,5 +2,5 @@ import { IPromiseLogs } from '../../../interfaces/promiseTicketInterface';
 
 export interface ConfirmPromiseModalProps {
   log: IPromiseLogs | null;
-  onUpload: (id: number) => void;
+  onUpload: (id: number, image: FormData) => void;
 }
diff --git a/ssh-web/src/components/organisms/ConfirmPromiseModal/index.tsx b/ssh-web/src/components/organisms/ConfirmPromiseModal/index.tsx
@@ -87,7 +87,11 @@ export const ConfirmPromiseModal = ({
           fullWidth={true}
           disabled={!uploadImgUrl}
           onClick={() => {
-            onUpload(0);
+            if (log && uploadImgUrl) {
+              const formData = new FormData();
+              formData.append('image', uploadImgUrl);
+              onUpload(log.id, formData);
+            }
           }}
         >
           약속 인증하기

diff --git a/ssh-web/src/components/organisms/PromiseDetailModal/PromiseDetailModal.types.tsx b/ssh-web/src/components/organisms/PromiseDetailModal/PromiseDetailModal.types.tsx
@@ -2,6 +2,6 @@ import { IPromiseLogs } from '../../../interfaces/promiseTicketInterface';
 
 export interface PromiseDetailModalProps {
   log: IPromiseLogs | null;
-  isParent: boolean;
+  isParent: boolean | null;
   closeModal: () => void;
 }
diff --git a/ssh-web/src/components/organisms/QuizTab/index.tsx b/ssh-web/src/components/organisms/QuizTab/index.tsx
@@ -48,8 +48,7 @@ export const QuizTab: React.FC<QuizTabProps> = ({
                 navigate(PathNames.QUIZ.path + '/solve');
               }}
               classNameStyles="mr-4"
-              //todo : 부모로 접속해도 막아야함
-              disabled={isTodayQuiz || loading}
+              disabled={isTodayQuiz || loading || isParent}
             >
               풀러가기
             </Button>

diff --git a/ssh-web/src/pages/Account/Parent/index.tsx b/ssh-web/src/pages/Account/Parent/index.tsx
@@ -11,6 +11,7 @@ import TextField from '../../../components/atoms/TextField';
 import { Modal } from '../../../components/molecules/QuizModal';
 import { TColor } from '../../../themes/themeBase';
 import { showToast } from '../../../utils/toastUtil';
+import { IChild } from '../../../interfaces/userInterface';
 
 interface DepositAccountCardProps {
   account: IAccount;
@@ -94,6 +95,8 @@ interface DeleteAccountModalProps {
 export const Account = () => {
   const [activeTab, setActiveTab] = useState<number>(0);
   const [ownAccounts, setOwnAccounts] = useState<IAccount[] | null>(null);
+  const [childrenList, setChildrenList] = useState<IChild[]>([]);
+  const [selectedChild, setSelectedChild] = useState<number>(0);
   const [childAccounts, setChildAccounts] = useState<IAccount[] | null>(null);
   const [isOpen, setIsOpen] = useState<boolean>(false);
   const [modalType, setModalTypes] = useState<TModal | null>(null);
@@ -105,7 +108,6 @@ export const Account = () => {
     api.post(`/api/accounts`).then((response) => {
       setOwnAccounts(response.data);
       setChildAccounts(response.data);
-      //todo 대충 계좌가 없으면 introduction 페이지로 넘길것
     });
   }, []);
 
@@ -185,7 +187,12 @@ export const Account = () => {
             <Typography size="2xl" weight="bold" color="dark">
               계좌 관리
             </Typography>
-            <ChangeChild />
+            <ChangeChild
+              childrenList={childrenList}
+              setChildrenList={setChildrenList}
+              selectedChild={selectedChild}
+              setSelectedChild={setSelectedChild}
+            />
           </div>
           <div className="w-full tabletB:max-w-[48rem]">
             <ToggleTab

diff --git a/ssh-web/src/pages/Account/index.tsx b/ssh-web/src/pages/Account/index.tsx
@@ -1,12 +1,16 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { Account as ParentAccountPage } from './Parent';
 import { Account as ChildAccountPage } from './Child';
+import { api } from '../../apis/interceptors';
 
-interface AccountProps {
-  isParent: boolean;
-}
+export const Account = () => {
+  const [isParent, setIsParent] = useState<boolean>(false);
 
-export const Account = ({ isParent }: AccountProps) => {
+  useEffect(() => {
+    api.get(`/api/users/info`).then((response) => {
+      setIsParent(response.data);
+    });
+  }, []);
   if (isParent) return <ParentAccountPage />;
   else return <ChildAccountPage />;
 };
diff --git a/ssh-web/src/pages/Promise/index.tsx b/ssh-web/src/pages/Promise/index.tsx
@@ -24,34 +24,82 @@ import { ConfirmPromiseModal } from '../../components/organisms/ConfirmPromiseMo
 import { ChangeChild } from '../../components/molecules/ChangeChild';
 import { HiOutlineTicket } from 'react-icons/hi';
 import { showToast } from '../../utils/toastUtil';
+import { IChild } from '../../interfaces/userInterface';
 
 export const PromiseTicket = () => {
+  const [isParent, setIsParent] = useState<boolean | null>(null);
   const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [childrenList, setChildrenList] = useState<IChild[]>([]);
+  const [selectedChild, setSelectedChild] = useState<number>(0);
   const [isDetailModal, setIsDetailModal] = useState<boolean>(false);
   const [promiseLogs, setPromiseLogs] = useState<IPromiseLogsList>([]);
   const [countTicket, setCountTicket] = useState<number>(0);
   const [selectedPromise, setSelectedPromise] = useState<IPromiseLogs | null>(
     null,
   );
-
-  // isParent를 50% 확률로 true 또는 false로 설정
-  const [isParent] = useState<boolean>(() => Math.random() >= 0.5);
-
+  const [relenderingKey, setRelenderingKey] = useState<number>(0);
   const size = useRecoilValue<EResize>(resizeState);
   const isConfirm = selectedPromise?.usedAt;
 
   useEffect(() => {
-    api.get(`/api/promise-tickets/count`).then((response) => {
-      setCountTicket(response.data.count);
-    });
+    api
+      .get(`/api/users/info`)
+      .then((response) => {
+        if (response.data.type === 'PARENT') {
+          setIsParent(true);
+        } else {
+          setIsParent(false);
+        }
+      })
+      .catch((error: Error) => {
+        showToast('error', '현재 유저의 정보를 불러오지 못했습니다.');
+      });
   }, []);
 
   useEffect(() => {
-    api.get(`/api/promise-tickets?page=0&size=5`).then((response) => {
-      setPromiseLogs(response.data.content);
-      console.log(response.data.content);
-    });
-  }, []);
+    if (isParent === false) {
+      api
+        .get(`/api/promise-tickets/count`)
+        .then((response) => {
+          setCountTicket(response.data.count);
+        })
+        .catch((error: Error) => {
+          showToast('error', '약속권 갯수를 불러오지 못했습니다');
+        });
+
+      api
+        .get(`/api/promise-tickets?page=0&size=50`)
+        .then((response) => {
+          setPromiseLogs(response.data.content);
+          console.log(response.data.content);
+        })
+        .catch((error: Error) => {
+          showToast('error', '약속권 로그를 불러오지 못했습니다');
+        });
+    }
+    if (isParent === true) {
+      api
+        .get(`/api/promise-tickets/${childrenList[selectedChild]}/count`)
+        .then((response) => {
+          setCountTicket(response.data.count);
+        })
+        .catch((error: Error) => {
+          showToast('error', '약속권 갯수를 불러오지 못했습니다');
+        });
+
+      api
+        .get(
+          `/api/promise-tickets/${childrenList[selectedChild]}?page=0&size=50`,
+        )
+        .then((response) => {
+          setPromiseLogs(response.data.content);
+          console.log(response.data.content);
+        })
+        .catch((error: Error) => {
+          showToast('error', '약속권 로그를 불러오지 못했습니다');
+        });
+    }
+  }, [isParent, selectedChild, relenderingKey]);
 
   const handleDetailModal = (log: IPromiseLogs) => {
     setIsOpen(true);
@@ -69,13 +117,34 @@ export const PromiseTicket = () => {
   };
 
   //todo
-  const handleConfirmUpload = (id: number) => {
+  const handleConfirmUpload = async (id: number, image: FormData) => {
     setIsOpen(false);
+    try {
+      const response = await api.post(`/api/promise-tickets/${id}/use`, image, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+      showToast('success', '약속 인증에 성공했어요!');
+      setRelenderingKey(relenderingKey + 1);
+      return response;
+    } catch (error) {
+      showToast('error', '약속 인증에 실패했어요');
+    }
   };
 
   //todo
-  const handlePromiseUpload = (content: string) => {
+  const handlePromiseUpload = async (description: string) => {
     setIsOpen(false);
+    try {
+      const response = await api.post(`/api/promise-tickets/request/`, {
+        description,
+      });
+      setRelenderingKey(relenderingKey + 1);
+      return response;
+    } catch (error) {
+      showToast('error', '약속 요청에 실패했어요');
+    }
     showToast('success', '부모님에게 성공적으로 약속을 요청했어요!');
   };
 
@@ -128,7 +197,14 @@ export const PromiseTicket = () => {
             <Typography size="2xl" weight="bold" color="dark">
               약속권
             </Typography>
-            {isParent && <ChangeChild />}
+            {isParent && (
+              <ChangeChild
+                childrenList={childrenList}
+                setChildrenList={setChildrenList}
+                selectedChild={selectedChild}
+                setSelectedChild={setSelectedChild}
+              />
+            )}
           </div>
           <div className={contentStyles({ size })}>
             <Typography