wip

Author: createhb21

services/one-app/src/app/(site)/_component/LoggedIn.tsx

@@ -17,23 +17,15 @@ export default function LoggedIn() {
   }
 
   return (
-    <p>
-      Logged in: {isLoggedIn ? 'O' : 'X'}
-      <button
-        onClick={() => {
-          throw new Error('에러 던지기!');
-        }}
-      >
-        throw Error
-      </button>
-      <br />
+    <div className="flex flex-col gap-3">
+      <p>Logged in: {isLoggedIn ? 'O' : 'X'}</p>
       <button
         onClick={() => {
           window.location.reload();
         }}
       >
         새로고침!
       </button>
-    </p>
+    </div>
   );
 }

services/one-app/src/app/(site)/_component/PartialErrorExample.tsx

@@ -3,6 +3,7 @@
 import React from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { apiClient } from '@/app/api';
+import SpinnerIcon from '@/common/assets/icons/loading-spinner';
 
 const UseQueryComponent = () => {
   const errorQuery = useQuery({
@@ -12,6 +13,13 @@ const UseQueryComponent = () => {
 
   console.log({ error: errorQuery?.error });
 
+  if (errorQuery.isLoading)
+    return (
+      <div className="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2">
+        <SpinnerIcon />
+      </div>
+    );
+
   return <div>UseQueryComponent</div>;
 };
 

services/one-app/src/app/(site)/_component/UseQueryComponent.tsx

@@ -1,11 +1,7 @@
-import { Suspense } from 'react';
 import Link from 'next/link';
 import PlusIcon from '@/common/assets/icons/plus';
 import LoggedIn from './(site)/_component/LoggedIn';
 import UseQueryComponent from './(site)/_component/UseQueryComponent';
-import UseSuspenseQueryComponent from './(site)/_component/UseSuspenseQueryComponent';
-import { UnPredictableErrorBoundary } from './(site)/_component/PartialErrorExample';
-import SpinnerIcon from '@/common/assets/icons/loading-spinner';
 
 export default function Home() {
   return (
@@ -15,8 +11,8 @@ export default function Home() {
           <PlusIcon />
         </Link>
         <LoggedIn />
-        <UseQueryComponent />
       </div>
+        <UseQueryComponent />
     </main>
   );
 }