Merge pull request #179 from Team-Lecue/feature/Splash

Merge Feature/splash into develop
Team-Lecue · Jan 18, 2024 · 48b0c20 · 48b0c20
2 parents 5e23f8e + fe12cab
commit 48b0c20
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 3 deletions.
diff --git a/src/Splash/api/getNoteNum.ts b/src/Splash/api/getNoteNum.ts
@@ -0,0 +1,7 @@
+import { api } from './../../libs/api';
+const getNoteNum = async () => {
+  const { data } = await api.get('/api/common/splash');
+  return data;
+};
+
+export default getNoteNum;
diff --git a/src/Splash/component/Body/index.tsx b/src/Splash/component/Body/index.tsx
@@ -1,19 +1,20 @@
 import Lottie from 'lottie-react';
 
 import LottieImg from '../../../assets/lottie/lottie.json';
+import useGetNoteNum from '../../hook/useGetNoteNum';
 import * as S from './Body.style';
 
 function Body() {
-  const noteNum = 30;
-
+  const { data } = useGetNoteNum();
+  
   return (
     <S.BodyWrapper>
       <S.LottieWrapper>
         <Lottie animationData={LottieImg} />
       </S.LottieWrapper>
 
       <S.TextWrapper>
-        <S.Text>지금까지 {noteNum}개의</S.Text>
+        <S.Text>지금까지 {data && data.data.noteNum}개의</S.Text>
         <S.Text>포스트잇이 붙여졌어요!</S.Text>
       </S.TextWrapper>
     </S.BodyWrapper>

diff --git a/src/Splash/hook/useGetNoteNum.ts b/src/Splash/hook/useGetNoteNum.ts
@@ -0,0 +1,17 @@
+import { useQuery } from 'react-query';
+import { useNavigate } from 'react-router-dom';
+
+import getNoteNum from '../api/getNoteNum';
+
+const useGetNoteNum = () => {
+  const navigate = useNavigate();
+  const { isLoading, data } = useQuery({
+    queryKey: ['get-note-num'],
+    queryFn: () => getNoteNum(),
+    onError: () => navigate('/error'),
+  });
+
+  return { isLoading, data };
+};
+
+export default useGetNoteNum;
diff --git a/src/Splash/page/SplashPage/index.tsx b/src/Splash/page/SplashPage/index.tsx
@@ -1,21 +1,26 @@
 import { useEffect } from 'react';
 
+import LoadingPage from '../../../components/common/LoadingPage';
 import Body from '../../component/Body';
 import Bottom from '../../component/Bottom';
 import Header from '../../component/Header';
+import useGetNoteNum from '../../hook/useGetNoteNum';
 import * as S from './SplashPage.style';
 
 export interface StepProps {
   handleStep: (newStep: number) => void;
 }
 
 function SplashPage({ handleStep }: StepProps) {
+  const { isLoading } = useGetNoteNum();
+
   useEffect(() => {
     handleStep(0);
   }, []);
 
   return (
     <S.Wrapper>
+      {isLoading && <LoadingPage />}
       <Header />
       <Body />
       <Bottom handleStep={handleStep} />