From 385f51980eaaa7231f818daa0dcc9bb446d2e5d9 Mon Sep 17 00:00:00 2001 From: CHOI GIHOAWN Date: Fri, 30 Aug 2024 14:40:28 +0900 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=EC=8B=9D=EB=AC=BC=20=EA=B2=80?= =?UTF-8?q?=EC=83=89=20API=20=EC=BF=BC=EB=A6=AC=20=ED=82=A4=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/plantGuide/searchPlant.ts | 2 +- src/mocks/handlers.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/apis/plantGuide/searchPlant.ts b/src/apis/plantGuide/searchPlant.ts index d3724de..eeb9489 100644 --- a/src/apis/plantGuide/searchPlant.ts +++ b/src/apis/plantGuide/searchPlant.ts @@ -6,6 +6,6 @@ export type SearchPlantResponse = { }[]; export const searchPlant = async (query: string) => { - const response = await privateAxios.get(`/plants?search=${query}`); + const response = await privateAxios.get(`/plants?plantName=${query}`); return response.data; }; diff --git a/src/mocks/handlers.ts b/src/mocks/handlers.ts index 92b27a2..cc7a103 100644 --- a/src/mocks/handlers.ts +++ b/src/mocks/handlers.ts @@ -10,7 +10,7 @@ export const handlers = [ http.get(import.meta.env.VITE_API_URL + '/plants', async ({ request }) => { await delay(1000); const url = new URL(request.url); - const query = url.searchParams.get('search'); + const query = url.searchParams.get('plantName'); if (!query) { return HttpResponse.json([]); From 2a472fafda1562a8da5cefb210aef0af3c647efe Mon Sep 17 00:00:00 2001 From: CHOI GIHOAWN Date: Fri, 30 Aug 2024 15:00:47 +0900 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=EC=8B=9D=EB=AC=BC=20=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A1=9C=EB=94=A9=20?= =?UTF-8?q?UI,=20=EC=97=90=EB=9F=AC=20UI=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/apis/plantGuide/searchPlant.ts | 3 +++ .../common/Skeleton/ListSkeleton.tsx | 12 ++++++++++ src/components/ui/skeleton.tsx | 7 ++++++ src/constants/day.ts | 2 ++ src/pages/LoginRedirectPage.tsx | 7 ++++-- src/pages/SearchPlantPage.tsx | 24 ++++++++++++++++--- 6 files changed, 50 insertions(+), 5 deletions(-) create mode 100644 src/components/common/Skeleton/ListSkeleton.tsx create mode 100644 src/components/ui/skeleton.tsx diff --git a/src/apis/plantGuide/searchPlant.ts b/src/apis/plantGuide/searchPlant.ts index eeb9489..4316d07 100644 --- a/src/apis/plantGuide/searchPlant.ts +++ b/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(`/plants?plantName=${query}`); return response.data; }; diff --git a/src/components/common/Skeleton/ListSkeleton.tsx b/src/components/common/Skeleton/ListSkeleton.tsx new file mode 100644 index 0000000..7d2489c --- /dev/null +++ b/src/components/common/Skeleton/ListSkeleton.tsx @@ -0,0 +1,12 @@ +import { Skeleton } from '@/components/ui/skeleton.tsx'; + +const ListSkeleton = () => { + return ( +
+ + +
+ ); +}; + +export default ListSkeleton; diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx new file mode 100644 index 0000000..63c07ac --- /dev/null +++ b/src/components/ui/skeleton.tsx @@ -0,0 +1,7 @@ +import { cn } from '@/utils'; + +function Skeleton({ className, ...props }: React.HTMLAttributes) { + return
; +} + +export { Skeleton }; diff --git a/src/constants/day.ts b/src/constants/day.ts index 2d0463f..f5ed1e3 100644 --- a/src/constants/day.ts +++ b/src/constants/day.ts @@ -1 +1,3 @@ export const ONE_DAY = 1000 * 60 * 60 * 24; + +export const SECOND = 1000; diff --git a/src/pages/LoginRedirectPage.tsx b/src/pages/LoginRedirectPage.tsx index 42423b4..99f7c78 100644 --- a/src/pages/LoginRedirectPage.tsx +++ b/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; diff --git a/src/pages/SearchPlantPage.tsx b/src/pages/SearchPlantPage.tsx index 331edfd..308a6e9 100644 --- a/src/pages/SearchPlantPage.tsx +++ b/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) => { - 로딩중...
}> + } + rejectedFallback={({ error, reset }) => ( +
+

+ 에러가 발생했어요! +

+

{error.message}

+ reset()} + /> +
+ )} + > - + ); };