[리팩토링, Fix] 코드 4차 리팩토링 (#66)

* refactor: 랜덤 덕담생성 시점 이관

* remove: 불필요한 코드 제거

pages/attitude/index.tsx

@@ -5,15 +5,20 @@ import { AttitudeRange, MessageBox, MessageItem } from '@/components/attitude';
 import { Button, Description, Title } from '@/components/common';
 import { Bottom } from '@/components/layout';
 import useAttitudeHooks from '@/shared/hooks/useAttitudeHooks';
+import useDuckdam from '@/shared/hooks/useDuckdam';
 import theme from '@/styles/theme';
 
 const Attitude = () => {
     const { message1, message2, askMessage, politeLevel, setPoliteRange } =
         useAttitudeHooks();
+
+    const { addNewDuckDam } = useDuckdam();
+
     const router = useRouter();
 
-    const handleAddNewDuckDam = () => {
-        router.push(`load/?politeLevel=${politeLevel}`);
+    const handleAddNewDuckDam = async () => {
+        const id = await addNewDuckDam(politeLevel);
+        router.push(`load/?id=${id}`);
     };
 
     return (

pages/load/index.tsx

@@ -1,22 +1,19 @@
+import { useRouter } from 'next/router';
 import { useEffect } from 'react';
 
 import { LoadingLogo, Title } from '@/components/common';
-import useDuckdam from '@/shared/hooks/useDuckdam';
 
 const Load = () => {
-    const {
-        addNewDuckDam: addNewDuckDamHandler,
-        hasPoliteLevel,
-        getPoliteLevel,
-    } = useDuckdam();
+    const router = useRouter();
+    const { id } = router.query;
 
     useEffect(() => {
-        const politeLevel = getPoliteLevel();
+        const timer = setTimeout(() => router.push(`/result/${id}`), 3000);
 
-        if (hasPoliteLevel(politeLevel)) {
-            addNewDuckDamHandler(politeLevel);
-        }
-    }, [addNewDuckDamHandler, getPoliteLevel, hasPoliteLevel]);
+        return () => {
+            clearTimeout(timer);
+        };
+    }, [id, router]);
 
     return (
         <>

shared/hooks/useDuckdam.ts

@@ -1,12 +1,9 @@
 import axios from 'axios';
-import { useRouter } from 'next/router';
 
 import type { PoliteKey } from '@/shared/types/DuckDam';
 import { randomNewDuckDam } from '@/shared/utils/duckdamGenerator';
 
 const useDuckdam = () => {
-    const router = useRouter();
-
     const addNewDuckDam = async (politeLevel: PoliteKey) => {
         const newDuckDam = {
             ...randomNewDuckDam(politeLevel),
@@ -20,19 +17,11 @@ const useDuckdam = () => {
         });
 
         if (status === 200) {
-            setTimeout(() => router.push(`/result/${data}`), 3000);
+            return data;
         }
     };
 
-    const hasPoliteLevel = (politeLevel: unknown): politeLevel is PoliteKey => {
-        return politeLevel !== undefined && typeof politeLevel === 'string';
-    };
-
-    const getPoliteLevel = () => {
-        return router.query.politeLevel;
-    };
-
-    return { addNewDuckDam, hasPoliteLevel, getPoliteLevel };
+    return { addNewDuckDam };
 };
 
 export default useDuckdam;