Fix : Issue 해결

package.json

@@ -14,6 +14,7 @@
     "@suspensive/react": "^1.13.0",
     "@suspensive/react-query": "^1.13.0",
     "@tanstack/react-query": "^4.32.6",
+    "@tanstack/react-query-devtools": "^4.35.0",
     "@types/node": "20.4.5",
     "@types/react": "18.2.17",
     "@types/react-dom": "18.2.7",

src/apis/queries.ts

@@ -36,17 +36,13 @@ export const usePoseFeedQuery = (
 ) =>
   useSuspenseInfiniteQuery<PoseFeedResponse>(
     ['poseFeed', peopleCount, frameCount, tags],
-    ({ pageParam = '' }) => getPoseFeed(peopleCount, frameCount, tags.join(','), pageParam),
+    ({ pageParam = 0 }) => getPoseFeed(peopleCount, frameCount, tags.join(','), pageParam),
     {
       getNextPageParam: (lastPage) => {
-        let target = lastPage.filteredContents;
-        if (lastPage.recommendation) {
-          target = lastPage.recommendedContents;
-        } else {
-          target = lastPage.filteredContents;
-        }
-        if (target.last) return false;
-        return target.number + 1;
+        const target = lastPage.recommendation
+          ? lastPage.recommendedContents
+          : lastPage.filteredContents;
+        return target.last ? undefined : target.number + 1;
       },
       ...options,
     }

src/app/(Main)/feed/components/Photo.tsx

@@ -2,7 +2,7 @@
 import Image from 'next/image';
 import Link from 'next/link';
 
-import { Modal, PreparingModal } from '@/components/Modal';
+import { PreparingModal } from '@/components/Modal';
 import { useOverlay } from '@/components/Overlay/useOverlay';
 import { ICON } from '@/constants/icon';
 

src/app/(Main)/feed/components/PhotoList.tsx

@@ -6,20 +6,17 @@ interface PhotoList {
 }
 
 export default function PhotoList({ data }: PhotoList) {
+  if (!data) return <Photo />;
   return (
     <>
-      {data ? (
-        data.map((item) => (
-          <Photo
-            key={item.poseInfo.poseId}
-            imageKey={item.poseInfo.imageKey}
-            source={item.poseInfo.source}
-            id={item.poseInfo.poseId}
-          />
-        ))
-      ) : (
-        <Photo />
-      )}
+      {data.map((item) => (
+        <Photo
+          key={item.poseInfo.poseId}
+          imageKey={item.poseInfo.imageKey}
+          source={item.poseInfo.source}
+          id={item.poseInfo.poseId}
+        />
+      ))}
     </>
   );
 }

src/app/(Main)/talk/components/TalkSection.tsx

@@ -1,6 +1,7 @@
 'use client';
 
-import { useState } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { useEffect, useState } from 'react';
 import Lottie from 'react-lottie-player';
 
 import lottieTalkAfterClick from '#/lotties/talk_after_click.json';
@@ -11,26 +12,38 @@ import { Spacing } from '@/components/Spacing';
 import useLoading from '@/hooks/useLoading';
 
 export default function TalkSection() {
+  const [talkWord, setTalkWord] = useState<string>(`제시어에 맞춰 포즈를 취해요!`);
   const { isLoading: isFirstLoading, stopLoading: stopFirstLoading } = useLoading({
     loadingDelay: 1000,
     isFirstLoadingInfinite: true,
   });
-
-  const { refetch, data } = usePoseTalkQuery();
+  const { refetch, data } = usePoseTalkQuery({
+    onSuccess: (data) => {
+      setTimeout(() => {
+        setTalkWord(data.poseWord.content);
+      }, 1000);
+    },
+  });
 
   const { isLoading, startLoading } = useLoading({
     loadingDelay: 1000,
-    onStopLoading: () => data && setTalkWord(data.poseWord.content),
     initialState: false,
   });
-  const [talkWord, setTalkWord] = useState<string>(`제시어에 맞춰 포즈를 취해요!`);
 
   const handleTalkClick = () => {
     if (isFirstLoading) stopFirstLoading();
     startLoading();
     refetch();
   };
 
+  const queryClient = useQueryClient();
+
+  useEffect(() => {
+    return () => {
+      queryClient.resetQueries(['poseTalk']);
+    };
+  }, [queryClient]);
+
   return (
     <section className="flex flex-col items-center">
       <h1 className="max-w-310 break-keep text-center">{talkWord}</h1>

src/app/(Main)/talk/page.tsx

@@ -2,6 +2,7 @@ import { Metadata } from 'next';
 
 import TalkSection from './components/TalkSection';
 import TitleSection from './components/TitleSection';
+import { PageAnimation } from '@/components/PageAnimation';
 import { Spacing } from '@/components/Spacing';
 
 export const metadata: Metadata = {
@@ -11,10 +12,10 @@ export const metadata: Metadata = {
 export default function Talk() {
   return (
     <>
-      <div className="flex flex-1 flex-col items-center justify-center">
+      <PageAnimation className="flex flex-1 flex-col items-center justify-center">
         <TitleSection />
         <TalkSection />
-      </div>
+      </PageAnimation>
       <Spacing size={80} />
     </>
   );

src/app/(Sub)/menu/components/MakerSection.tsx

@@ -1,6 +1,5 @@
 'use client';
 import Image from 'next/image';
-import Link from 'next/link';
 
 import BottomFixedDiv from '@/components/BottomFixedDiv';
 import { Spacing } from '@/components/Spacing';

src/components/Header/Header.tsx

@@ -16,7 +16,7 @@ export default function Header({
   ...props
 }: HeaderProps) {
   return (
-    <div className="z-10 fixed inset-x-0 top-0 mx-auto max-w-440 bg-white pt-8">
+    <div className="fixed inset-x-0 top-0 z-10 mx-auto max-w-440 bg-white pt-8">
       <header
         className={`flex h-48 items-center justify-between ${className ? className : ''}`}
         {...props}

src/components/PageAnimation/PageAnimation.tsx

@@ -1,7 +1,8 @@
 'use client';
-import cn from '@/utils/cn';
 import { type AnimationProps, motion } from 'framer-motion';
 
+import cn from '@/utils/cn';
+
 import type { StrictPropsWithChildren } from '@/types';
 
 interface PageAnimationProps extends AnimationProps {

src/hooks/useLoading.ts

@@ -5,24 +5,19 @@ import useIsMounted from './useIsMounted';
 interface UseLoadingProps {
   initialState?: boolean;
   loadingDelay?: number;
-  onStopLoading?: () => void;
   isFirstLoadingInfinite?: boolean;
 }
 export default function useLoading({
   initialState = true,
   loadingDelay,
-  onStopLoading,
   isFirstLoadingInfinite = false,
 }: UseLoadingProps = {}) {
   const [isLoading, setIsLoading] = useState(initialState);
   const isMounted = useIsMounted();
 
   const stopLoading = useCallback(() => {
     setIsLoading(false);
-    if (onStopLoading) {
-      onStopLoading();
-    }
-  }, [onStopLoading]);
+  }, []);
 
   const startLoading = useCallback(() => {
     setIsLoading(true);

src/provider/QueryProvider.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { useState } from 'react';
 
 import type { StrictPropsWithChildren } from '@/types';
@@ -16,5 +17,10 @@ export default function QueryProvider({ children }: StrictPropsWithChildren) {
     },
   });
 
-  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} />
+    </QueryClientProvider>
+  );
 }

yarn.lock

@@ -1365,11 +1365,27 @@
   dependencies:
     tslib "^2.4.0"
 
+"@tanstack/match-sorter-utils@^8.7.0":
+  version "8.8.4"
+  resolved "https://registry.yarnpkg.com/@tanstack/match-sorter-utils/-/match-sorter-utils-8.8.4.tgz#0b2864d8b7bac06a9f84cb903d405852cc40a457"
+  integrity sha512-rKH8LjZiszWEvmi01NR72QWZ8m4xmXre0OOwlRGnjU01Eqz/QnN+cqpty2PJ0efHblq09+KilvyR7lsbzmXVEw==
+  dependencies:
+    remove-accents "0.4.2"
+
 "@tanstack/query-core@4.32.6":
   version "4.32.6"
   resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.32.6.tgz#cf7df91ab1542e67a82624fefb12a55f580b4c01"
   integrity sha512-YVB+mVWENQwPyv+40qO7flMgKZ0uI41Ph7qXC2Zf1ft5AIGfnXnMZyifB2ghhZ27u+5wm5mlzO4Y6lwwadzxCA==
 
+"@tanstack/react-query-devtools@^4.35.0":
+  version "4.35.0"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-4.35.0.tgz#5c28920f238c01033cb374e4664cd5f0fbccb113"
+  integrity sha512-tzN0K70idRsqnfLdUcQC3eCrv28kLIAB6/H1zsGdIw7Wmj5VgTxPmpEVc3rHQjKt0LZsvZTLmaLnI6FCI3VUZw==
+  dependencies:
+    "@tanstack/match-sorter-utils" "^8.7.0"
+    superjson "^1.10.0"
+    use-sync-external-store "^1.2.0"
+
 "@tanstack/react-query@^4.32.6":
   version "4.32.6"
   resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.32.6.tgz#f88c2d57f423d4cd295c501df2edeb3285a301bd"
@@ -2090,6 +2106,13 @@ convert-source-map@^1.5.0, convert-source-map@^1.7.0:
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.9.0.tgz#7faae62353fb4213366d0ca98358d22e8368b05f"
   integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
 
+copy-anything@^3.0.2:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/copy-anything/-/copy-anything-3.0.5.tgz#2d92dce8c498f790fa7ad16b01a1ae5a45b020a0"
+  integrity sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==
+  dependencies:
+    is-what "^4.1.8"
+
 core-js-compat@^3.31.0:
   version "3.32.1"
   resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.32.1.tgz#55f9a7d297c0761a8eb1d31b593e0f5b6ffae964"
@@ -3275,6 +3298,11 @@ is-weakref@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
+is-what@^4.1.8:
+  version "4.1.15"
+  resolved "https://registry.yarnpkg.com/is-what/-/is-what-4.1.15.tgz#de43a81090417a425942d67b1ae86e7fae2eee0e"
+  integrity sha512-uKua1wfy3Yt+YqsD6mTUEa2zSi3G1oPlqTflgaPJ7z63vUGN5pxFpnQfeSLMFnJDEsdvOtkp1rUWkYjB4YfhgA==
+
 is-wsl@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
@@ -4171,6 +4199,11 @@ regjsparser@^0.9.1:
   dependencies:
     jsesc "~0.5.0"
 
+remove-accents@0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
+  integrity sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==
+
 require-from-string@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
@@ -4540,6 +4573,13 @@ sucrase@^3.32.0:
     pirates "^4.0.1"
     ts-interface-checker "^0.1.9"
 
+superjson@^1.10.0:
+  version "1.13.1"
+  resolved "https://registry.yarnpkg.com/superjson/-/superjson-1.13.1.tgz#a0b6ab5d22876f6207fcb9d08b0cb2acad8ee5cd"
+  integrity sha512-AVH2eknm9DEd3qvxM4Sq+LTCkSXE2ssfh1t11MHMXyYXFQyQ1HLgVvV+guLTsaQnJU3gnaVo34TohHPulY/wLg==
+  dependencies:
+    copy-anything "^3.0.2"
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"