Merge pull request #157 from dnd-side-project/fix-155

[# 155] 식물 검색 페이지 로딩, 에러 UI 수정

src/apis/plantGuide/searchPlant.ts

@@ -6,6 +6,9 @@ export type SearchPlantResponse = {
 }[];
 
 export const searchPlant = async (query: string) => {
+  if (query === '') {
+    return [];
+  }
   const response = await privateAxios.get<SearchPlantResponse>(`/plants?plantName=${query}`);
   return response.data;
 };

src/components/common/Skeleton/ListSkeleton.tsx

@@ -0,0 +1,12 @@
+import { Skeleton } from '@/components/ui/skeleton.tsx';
+
+const ListSkeleton = () => {
+  return (
+    <div className={'flex flex-row gap-4 px-6 py-6 items-center'}>
+      <Skeleton className={'w-10 h-10 rounded-full'} />
+      <Skeleton className={'w-full h-10'} />
+    </div>
+  );
+};
+
+export default ListSkeleton;

src/components/ui/skeleton.tsx

@@ -0,0 +1,7 @@
+import { cn } from '@/utils';
+
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('animate-pulse rounded-md bg-muted', className)} {...props} />;
+}
+
+export { Skeleton };

src/constants/day.ts

@@ -1 +1,3 @@
 export const ONE_DAY = 1000 * 60 * 60 * 24;
+
+export const SECOND = 1000;

src/pages/LoginRedirectPage.tsx

@@ -4,6 +4,7 @@ import { useSignIn } from '@/queries/useSignIn.ts';
 import useInternalRouter from '@/hooks/useInternalRouter.ts';
 import { useCookies } from 'react-cookie';
 import LoadingSpinner from '@/components/LoadingSpinner.tsx';
+import { SECOND } from '@/constants/day.ts';
 
 const LoginRedirectPage = () => {
   const router = useInternalRouter();
@@ -28,10 +29,12 @@ const LoginRedirectPage = () => {
           switch (response.data.status) {
             case 'success':
               setCookie('access-token', response.data.accessToken, {
-                expires: new Date(currentDate.getTime() + response.data.expiresIn),
+                expires: new Date(currentDate.getTime() + response.data.expiresIn * SECOND),
               });
               setCookie('refresh-token', response.data.refreshToken, {
-                expires: new Date(currentDate.getTime() + response.data.refreshTokenExpiresIn),
+                expires: new Date(
+                  currentDate.getTime() + response.data.refreshTokenExpiresIn * SECOND,
+                ),
               });
               router.replace('/');
               break;

src/pages/SearchPlantPage.tsx

@@ -3,9 +3,12 @@ import Header from '@/components/common/Header';
 import 왼쪽꺽쇠 from '@/assets/icon/왼쪽꺽쇠.tsx';
 import SearchField from '@/components/common/SearchField';
 import HeightBox from '@/components/common/HeightBox';
-import { Suspense, useCallback, useState } from 'react';
+import { useCallback, useState } from 'react';
 import SearchedPlantList from '@/components/searchPlant/SearchedPlantList.tsx';
 import { debounce } from 'es-toolkit';
+import { AsyncBoundary } from '@toss/async-boundary';
+import ListSkeleton from '@/components/common/Skeleton/ListSkeleton.tsx';
+import CTAButton from '@/components/common/CTAButton';
 
 interface SearchPlantPageProps {
   onClose: () => void;
@@ -32,9 +35,24 @@ const SearchPlantPage = ({ onClose }: SearchPlantPageProps) => {
       <HeightBox height={30} />
       <SearchField placeholder={'검색'} onSearch={debouncedSetQuery} />
       <HeightBox height={30} />
-      <Suspense fallback={<div>로딩중...</div>}>
+      <AsyncBoundary
+        pendingFallback={<ListSkeleton />}
+        rejectedFallback={({ error, reset }) => (
+          <div className={'flex flex-col items-center'}>
+            <p className={'text-small-title font-semibold text-center text-Gray900'}>
+              에러가 발생했어요!
+            </p>
+            <p className={'pt-4 text-center text-regular-body text-Gray500'}>{error.message}</p>
+            <CTAButton
+              text={'다시시도'}
+              className={'bg-BloomingGreen500 w-fit mt-8'}
+              onClick={() => reset()}
+            />
+          </div>
+        )}
+      >
         <SearchedPlantList query={query} onClose={onClose} />
-      </Suspense>
+      </AsyncBoundary>
     </Screen>
   );
 };