Merge pull request #42 from LikeLion-KNU/feature/ratio

Feature/ratio

package.json

@@ -22,6 +22,7 @@
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.26.1",
+        "react-toastify": "^10.0.5",
         "react-transition-group": "^4.4.5",
         "zustand": "^4.5.5"
     },

src/App.tsx

@@ -1,4 +1,6 @@
 import { BrowserRouter } from "react-router-dom";
+import { Bounce, ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
 
 import { FontsStyle } from "@/styles/fonts";
 import { GlobalStyle } from "@/styles/global";
@@ -9,6 +11,19 @@ import { Global } from "@emotion/react";
 export default function App() {
     return (
         <BrowserRouter>
+            <ToastContainer
+                position="top-center"
+                autoClose={3000}
+                hideProgressBar={false}
+                newestOnTop={false}
+                closeOnClick
+                rtl={false}
+                pauseOnFocusLoss
+                draggable
+                pauseOnHover
+                theme="light"
+                transition={Bounce}
+            />
             <Global styles={[FontsStyle, GlobalStyle]} />
             <Router />
         </BrowserRouter>

src/hooks/useRatioResult.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from "react";
+import { useSearchParams } from "react-router-dom";
+
+import { api } from "@/config/axios";
+
+interface RatioResultResponse {
+    status: number;
+    count: number;
+    total_count: number;
+}
+
+export const useRatioResult = () => {
+    const [searchParams] = useSearchParams();
+
+    const [isPending, setIsPending] = useState<boolean>(false);
+    const [totalCount, setTotalCount] = useState<number>(0);
+    const [mbtiCount, setMbtiCount] = useState<number>(0);
+
+    useEffect(() => {
+        setIsPending(true);
+        api.get<RatioResultResponse>(`/stats?type=${searchParams.get("type")}`)
+            .then((data) => {
+                setMbtiCount(data.data.count);
+                setTotalCount(data.data.total_count);
+            })
+            .finally(() => {
+                setIsPending(false);
+            });
+    }, []);
+
+    return { isPending, totalCount, mbtiCount };
+};

src/pages/AnalyticsPage.style.ts

@@ -1,5 +1,12 @@
 import styled from "@emotion/styled";
 
+export const AnalyticsPageWrapper = styled.div`
+    width: 100%;
+    height: 100%;
+
+    margin-top: 60px;
+`;
+
 export const TitleContainer = styled.div`
     display: flex;
     flex-direction: column;

src/pages/AnalyticsPage.tsx

@@ -4,6 +4,7 @@ import { useNavigate } from "react-router-dom";
 import Footer from "@/components/display/Footer";
 import DropDown from "@/components/form/DropDown";
 import TopBar from "@/components/layout/TopBar";
+import { TopBarContainer, TopBarWrapper } from "@/components/layout/TopBar.styled";
 import { Text } from "@/components/typography";
 
 import { useTop10 } from "@/hooks/useTop10";
@@ -13,7 +14,17 @@ import backIcon from "@/assets/back.svg";
 
 import { results } from "@/constants/results";
 
-import { TitleContainer, TitleTop, Main, MiddleSection, TableContainer, Card, Rank, Type } from "./AnalyticsPage.style";
+import {
+    TitleContainer,
+    TitleTop,
+    Main,
+    MiddleSection,
+    TableContainer,
+    Card,
+    Rank,
+    Type,
+    AnalyticsPageWrapper,
+} from "./AnalyticsPage.style";
 
 export interface top10Response {
     top: [string, number][];
@@ -67,10 +78,18 @@ export default function AnalyticsPage() {
     }, [selectedDepartment]);
 
     return (
-        <>
-            <img src={backIcon} onClick={handleGoBack} />
+        <AnalyticsPageWrapper>
             <TopBar title="전체 통계" />
 
+            <TopBarWrapper>
+                <TopBarContainer>
+                    <img src={backIcon} onClick={handleGoBack} />
+                    <Text size="m" weight="extrabold">
+                        전체 통계
+                    </Text>
+                </TopBarContainer>
+            </TopBarWrapper>
+
             <TitleContainer>
                 <Text size="m" weight="bold">
                     어떤 유형이 가장 많을까요?
@@ -103,6 +122,6 @@ export default function AnalyticsPage() {
                 {selectedDepartment && renderData(top10ByDepartment, top10ByDepartmentLoading, top10ByDepartmentError)}
             </Main>
             <Footer />
-        </>
+        </AnalyticsPageWrapper>
     );
 }

src/pages/HomePage.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
 
 import Footer from "@/components/display/Footer";
 import { Button } from "@/components/form/Button";
@@ -29,8 +30,7 @@ export default function HomePage() {
     const { isPending, isError, totalCount } = useTotalCount();
     const navigate = useNavigate();
 
-    const setName = useUserInfo((state) => state.setName);
-    const setMajor = useUserInfo((state) => state.setMajor);
+    const userInfo = useUserInfo((state) => state);
 
     const [isOpen, setIsOpen] = useState<boolean>(false);
     const [selectedMajor, setSelectedMajor] = useState<string>("");
@@ -39,9 +39,21 @@ export default function HomePage() {
         setIsOpen(!isOpen);
     };
 
+    const handleStart = () => {
+        if (!userInfo.name) {
+            toast.error("이름을 입력해주세용");
+            return;
+        }
+        if (!userInfo.major) {
+            toast.error("단과대학을 입력해주세용");
+            return;
+        }
+        navigate("/select");
+    };
+
     useEffect(() => {
-        setMajor(selectedMajor);
-    }, [selectedMajor, setMajor]);
+        userInfo.setMajor(selectedMajor);
+    }, [selectedMajor, userInfo.setMajor]);
 
     return (
         <HomePageWrapper>
@@ -85,7 +97,7 @@ export default function HomePage() {
                         width="242px"
                         height="40px"
                         placeholder="이름을 입력하세용"
-                        onChange={(e) => setName(e.currentTarget.value)}
+                        onChange={(e) => userInfo.setName(e.currentTarget.value)}
                     />
                     <DropDown
                         color="primary"
@@ -105,7 +117,7 @@ export default function HomePage() {
                         width="242px"
                         height="55px"
                         children="테스트 시작하기"
-                        onClick={() => navigate("/select")}
+                        onClick={handleStart}
                     />
                 </ButtonContainer>
 

src/pages/ResultPage.tsx

@@ -2,6 +2,7 @@ import { Button } from "@/components/form/Button";
 import TopBar from "@/components/layout/TopBar";
 import { Text } from "@/components/typography";
 
+import { useRatioResult } from "@/hooks/useRatioResult";
 import { useResult } from "@/hooks/useResult";
 
 import clubs from "@/constants/clubs";
@@ -24,6 +25,8 @@ import { css } from "@emotion/react";
 export default function ResultPage() {
     const { name, mbti, result, navigate } = useResult();
 
+    const { isPending, totalCount, mbtiCount } = useRatioResult();
+
     return (
         <>
             <TopBar title="결과 보기" />
@@ -78,7 +81,11 @@ export default function ResultPage() {
                     </ClubItems>
 
                     <Text size="xs" weight="light">
-                        <b>3,800명</b>의 참가자 중 <b>38명</b>이 이 유형이 나왔어요!
+                        {!isPending && (
+                            <>
+                                <b>{totalCount}명</b>의 참가자 중 <b>{mbtiCount}명</b>이 이 유형이 나왔어요!
+                            </>
+                        )}
                     </Text>
                 </ResultContainer>