refactor: skeleton quiz list 추가 및 client 컴포넌트 세팅

src/app/(AppBarHeader)/toks-main/_components/SkeletonCard.tsx

@@ -0,0 +1,56 @@
+import clsx from 'clsx';
+import React from 'react';
+
+import { Skeleton } from '@/common/components/Skeleton';
+
+type Props = {
+  quizType?: 'ox' | 'default';
+};
+
+export const SkeletonCardList = () => {
+  return (
+    <div className="flex h-full flex-col gap-8px">
+      <SkeletonCard quizType="ox" />
+      <SkeletonCard />
+      <SkeletonCard quizType="ox" />
+      <SkeletonCard />
+      <SkeletonCard quizType="ox" />
+      <SkeletonCard />
+    </div>
+  );
+};
+
+const SkeletonCard = ({ quizType = 'default' }: Props) => {
+  return (
+    <div
+      className={clsx(
+        'flex h-220px w-full min-w-180px gap-20px rounded-12px bg-gray-110 px-16px py-20px'
+      )}
+    >
+      <div className="flex h-full flex-1 animate-pulse flex-col justify-between">
+        <div className="flex flex-col">
+          <div className="flex gap-8px">
+            <Skeleton className="h-[20px] w-[40px]" />
+            <Skeleton className="h-[20px] w-[40px]" />
+          </div>
+        </div>
+        <div className="flex flex-col justify-between gap-8px rounded-8px">
+          <Skeleton className="h-[20px] w-4/5" />
+          <Skeleton className="h-[20px]" />
+          <Skeleton className="h-[20px] w-3/5" />
+        </div>
+        <Skeleton className="h-[14px]" />
+      </div>
+      <div className="flex w-[120px] animate-pulse flex-col gap-8px">
+        {quizType === 'ox' ? (
+          <>
+            <Skeleton className="h-1/2" />
+            <Skeleton className="h-1/2" />
+          </>
+        ) : (
+          <Skeleton className="h-full" />
+        )}
+      </div>
+    </div>
+  );
+};

src/common/components/Skeleton.tsx

@@ -0,0 +1,13 @@
+import { ClassNameValue, twMerge } from 'tailwind-merge';
+
+type Props = {
+  className?: ClassNameValue;
+};
+
+export const Skeleton = ({ className }: Props) => {
+  return (
+    <div
+      className={twMerge('h-[20px] w-full rounded-[8px] bg-gray-90', className)}
+    />
+  );
+};

src/common/providers/index.tsx

@@ -5,6 +5,7 @@ import {
   QueryClient,
   QueryClientProvider,
 } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { PropsWithChildren, useState } from 'react';
 import { RecoilRoot } from 'recoil';
 
@@ -33,6 +34,9 @@ export default function RootProvider({ children }: PropsWithChildren) {
       <RecoilRoot>
         <GlobalPortal.Provider>{children}</GlobalPortal.Provider>
       </RecoilRoot>
+      <ReactQueryDevtools
+        initialIsOpen={process.env.NEXT_PUBLIC_MODE === 'local'}
+      />
     </QueryClientProvider>
   );
 }

src/queries/useQuizListInfinityQuery/index.ts

@@ -1,3 +1,4 @@
+'use client';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { useRecoilValue } from 'recoil';