From 77e7a5bd4fa9ac73922f9c0b775b9e59b41a0208 Mon Sep 17 00:00:00 2001 From: oaoong Date: Tue, 28 Nov 2023 18:14:10 +0900 Subject: [PATCH 01/15] =?UTF-8?q?:bug:=20=ED=86=A0=ED=81=B0=20=EA=B4=80?= =?UTF-8?q?=EB=A6=AC=20=EC=9E=AC=EC=A0=95=EC=9D=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useValidate.ts | 24 +++++++++++++----------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/src/hooks/useValidate.ts b/src/hooks/useValidate.ts index 3e30613e..09c59c9f 100644 --- a/src/hooks/useValidate.ts +++ b/src/hooks/useValidate.ts @@ -4,6 +4,7 @@ import { useEffect, useState } from 'react' import { useQuery } from '@tanstack/react-query' import Cookies from 'js-cookie' import { usePathname, useRouter } from 'next/navigation' +import AppPath from '@/config/appPath' import { Environment } from '@/config/environment' import apiClient from '@/services/apiClient' import { getValidateUser } from '@/services/auth/auth' @@ -26,27 +27,28 @@ const useValidate = () => { const res = await getValidateUser() return res }, + retry: 3, enabled: !!token, }) useEffect(() => { if (isError) { - // Cookies.remove(Environment.tokenName()) - // setIsLoggedIn(() => false) - // setCurrentUser(() => null) - // router.push(AppPath.login(), { scroll: false }) - // toast({ - // title: '인증 에러', - // description: '인증에 실패하였습니다. 다시 시도하거나 로그인해주세요.', - // variant: 'destructive', - // duration: 3000, - // }) + Cookies.remove(Environment.tokenName()) + setIsLoggedIn(() => false) + setCurrentUser(() => null) + router.push(AppPath.login(), { scroll: false }) + toast({ + title: '인증 에러', + description: '인증에 실패하였습니다. 다시 시도하거나 로그인해주세요.', + variant: 'destructive', + duration: 3000, + }) } if (data) { setIsLoggedIn(() => true) setCurrentUser(() => data?.data?.userInfo) } - }, [currentUser, data, isError, isLoggedIn, pathname, router, token]) + }, [currentUser, data, isError, isLoggedIn, pathname, router, toast, token]) return { isLoggedIn, currentUser } } From bbe027817ebe005e7f6f7b49dce7deb161e2be91 Mon Sep 17 00:00:00 2001 From: oaoong Date: Tue, 28 Nov 2023 22:27:39 +0900 Subject: [PATCH 02/15] =?UTF-8?q?:sparkles:=20=EB=A7=88=EC=9D=B4=EB=84=88?= =?UTF-8?q?=ED=95=9C=20css=20=EC=88=98=EC=A0=95=EC=82=AC=ED=95=AD=20?= =?UTF-8?q?=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(routes)/cards/[cardId]/modify/CardModifyTemplate.tsx | 2 +- .../chatrooms/[chatRoomId]/components/ChatInput.tsx | 5 ++--- .../[chatRoomId]/components/CompleteRequestButton.tsx | 2 +- src/app/layout.tsx | 3 ++- src/components/domain/logo/Logo.tsx | 7 ++++++- tailwind.config.js | 4 ++++ 6 files changed, 16 insertions(+), 7 deletions(-) diff --git a/src/app/(root)/(routes)/cards/[cardId]/modify/CardModifyTemplate.tsx b/src/app/(root)/(routes)/cards/[cardId]/modify/CardModifyTemplate.tsx index 4fc8f57a..ea8da4ab 100644 --- a/src/app/(root)/(routes)/cards/[cardId]/modify/CardModifyTemplate.tsx +++ b/src/app/(root)/(routes)/cards/[cardId]/modify/CardModifyTemplate.tsx @@ -68,7 +68,7 @@ const CardModifyTemplate = ({ cardInfo, cardId }: CardModifyTemplateProps) => { variant={'gradation'} disabled={isSubmitting} > - 등록하기 + 수정하기 diff --git a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/ChatInput.tsx b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/ChatInput.tsx index fd52c0df..a9594a98 100644 --- a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/ChatInput.tsx +++ b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/ChatInput.tsx @@ -27,15 +27,14 @@ const ChatInput = ({ return (
-
diff --git a/src/components/domain/logo/Logo.tsx b/src/components/domain/logo/Logo.tsx index 0cabb623..99808dcd 100644 --- a/src/components/domain/logo/Logo.tsx +++ b/src/components/domain/logo/Logo.tsx @@ -8,7 +8,12 @@ const Logo = () => { return ( ) diff --git a/tailwind.config.js b/tailwind.config.js index 62cc0421..75684089 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -14,6 +14,10 @@ module.exports = { ], darkMode: ['class'], theme: { + screens: { + xs: { max: '480px' }, + ...require('tailwindcss/defaultConfig').theme.screens, + }, extend: { backgroundImage: () => ({ 'gradient-primary': From be291bae91b33190350b595c92f7050ae63e9c77 Mon Sep 17 00:00:00 2001 From: oaoong Date: Wed, 29 Nov 2023 14:33:43 +0900 Subject: [PATCH 03/15] =?UTF-8?q?:sparkles:=20=EB=9D=BC=EC=9A=B0=ED=8C=85?= =?UTF-8?q?=20=EB=B0=8F=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../cards/new/hooks/useCardUploadForm.ts | 5 +- .../[chatRoomId]/components/ChatList.tsx | 2 +- .../(routes)/chatrooms/[chatRoomId]/page.tsx | 3 +- src/components/domain/header/Header.tsx | 2 +- .../header/components/AvatarWithDropdown.tsx | 9 +++- .../domain/header/components/MenuButton.tsx | 53 +++++++++++++------ 6 files changed, 51 insertions(+), 23 deletions(-) diff --git a/src/app/(root)/(routes)/cards/new/hooks/useCardUploadForm.ts b/src/app/(root)/(routes)/cards/new/hooks/useCardUploadForm.ts index 3e70bff3..f91fa405 100644 --- a/src/app/(root)/(routes)/cards/new/hooks/useCardUploadForm.ts +++ b/src/app/(root)/(routes)/cards/new/hooks/useCardUploadForm.ts @@ -3,6 +3,7 @@ import { useForm } from 'react-hook-form' import { zodResolver } from '@hookform/resolvers/zod' import { useRouter } from 'next/navigation' import { z } from 'zod' +import AppPath from '@/config/appPath' import { AppValidation } from '@/config/appValidation' import { useToast } from '@/hooks/useToast' import { postCard } from '@/services/card/card' @@ -49,12 +50,12 @@ export const useCardUploadForm = () => { setIsSubmitting(() => true) try { - await postCard(data) + const res = await postCard(data) toast({ title: 'Success', description: '게시글을 업로드했습니다.', }) - router.back() + router.push(AppPath.card(res.data.cardInfo.cardId), { scroll: false }) } catch (error: any) { toast({ variant: 'destructive', diff --git a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/ChatList.tsx b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/ChatList.tsx index 79310611..c8f0ddb1 100644 --- a/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/ChatList.tsx +++ b/src/app/(root)/(routes)/chatrooms/[chatRoomId]/components/ChatList.tsx @@ -16,7 +16,7 @@ type ChatProps = { const ChatList = forwardRef( ({ messages, currentUserId }, ref) => { return ( -
    +
      {messages.map((message: Message) => { return ( { ).cardInfo.cardId return ( -
      +
      {!isCompleteRequested && ( @@ -100,6 +100,7 @@ const ChatPage = async ({ params }: ChatPageProps) => { completeRequestData={completeRequestInfo} /> )} +
      { return (
      - +
      diff --git a/src/components/domain/header/components/AvatarWithDropdown.tsx b/src/components/domain/header/components/AvatarWithDropdown.tsx index dcca8f3d..2893854c 100644 --- a/src/components/domain/header/components/AvatarWithDropdown.tsx +++ b/src/components/domain/header/components/AvatarWithDropdown.tsx @@ -41,7 +41,14 @@ const AvatarWithDropdown = ({ imageUrl }: { imageUrl?: string }) => { router.push(AppPath.mypage()) }} > - 프로필 + 마이페이지 + + { + router.push(AppPath.newCard()) + }} + > + 새 물건 등록하기 로그아웃 diff --git a/src/components/domain/header/components/MenuButton.tsx b/src/components/domain/header/components/MenuButton.tsx index cdc7f6ef..a65ea822 100644 --- a/src/components/domain/header/components/MenuButton.tsx +++ b/src/components/domain/header/components/MenuButton.tsx @@ -13,13 +13,14 @@ import { import AppPath from '@/config/appPath' import Assets from '@/config/assets' -const MenuButton = () => { +const MenuButton = ({ isLoggedIn }: { isLoggedIn: boolean }) => { const router = useRouter() + return ( - @@ -31,20 +32,38 @@ const MenuButton = () => { > 전체 물건 보기 - { - router.push(AppPath.newCard()) - }} - > - 상품 등록 - - { - router.push(AppPath.chatRooms()) - }} - > - 채팅방 조회 - + {isLoggedIn && ( + <> + { + router.push(AppPath.myCards()) + }} + > + 내 물건 목록 + + { + router.push(AppPath.myDibs()) + }} + > + 내 찜 목록 + + { + router.push(AppPath.myHistory()) + }} + > + 거래 내역 보기 + + { + router.push(AppPath.chatRooms()) + }} + > + 채팅 목록 + + + )} From 456a92f481d07476b7c4d87807f600dc1f7cce12 Mon Sep 17 00:00:00 2001 From: oaoong Date: Wed, 29 Nov 2023 14:35:48 +0900 Subject: [PATCH 04/15] =?UTF-8?q?:bug:=20viewport=20=EC=84=A4=EC=A0=95=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9=EB=90=98=EC=A7=80=20=EC=95=8A=EB=8A=94=20?= =?UTF-8?q?=EB=AC=B8=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/layout.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 85b90a1f..7d4dbd73 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,5 +1,4 @@ -import type { Metadata } from 'next' -import NewCardButton from '@/components/domain/buttons/new-card-button' +import type { Metadata, Viewport } from 'next' import Header from '@/components/domain/header' import { Toaster } from '@/components/ui/toast/Toaster' import { Environment } from '@/config/environment' @@ -12,8 +11,6 @@ import '@/styles/globals.css' export const metadata: Metadata = { metadataBase: new URL(Environment.currentAddress()), - viewport: - 'width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no', openGraph: { title: '물물교환 플랫폼, 나비장터', description: @@ -23,6 +20,14 @@ export const metadata: Metadata = { }, } +export const viewport: Viewport = { + width: 'device-width', + initialScale: 1.0, + maximumScale: 1.0, + minimumScale: 1.0, + userScalable: false, +} + if (Environment.apiMocking() === 'enabled') { console.log('Mocking enabled') initMockApi() From 8fe3b3865d46a408744e54323bbde0523f66bde2 Mon Sep 17 00:00:00 2001 From: oaoong Date: Wed, 29 Nov 2023 15:46:56 +0900 Subject: [PATCH 05/15] =?UTF-8?q?:sparkles:=20=EB=A0=8C=EB=8D=94=EB=A7=81?= =?UTF-8?q?=20=EB=B0=8F=20=ED=8C=A8=EC=B9=98=20=EB=B0=A9=EC=8B=9D=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(auth)/login/components/RouteCallback.tsx | 3 +- .../(home)/components/CategorySection.tsx | 30 ++++-------- .../domain/header/sections/RightSide.tsx | 46 +++++++++---------- .../api/queries/useNotificationCountQuery.ts | 4 +- src/hooks/useValidate.ts | 7 ++- 5 files changed, 41 insertions(+), 49 deletions(-) diff --git a/src/app/(root)/(routes)/(auth)/login/components/RouteCallback.tsx b/src/app/(root)/(routes)/(auth)/login/components/RouteCallback.tsx index de6469f0..276b2b4a 100644 --- a/src/app/(root)/(routes)/(auth)/login/components/RouteCallback.tsx +++ b/src/app/(root)/(routes)/(auth)/login/components/RouteCallback.tsx @@ -26,11 +26,12 @@ const RouteCallback = ({ tokenResponse }: RouteCallbackProps) => { useEffect(() => { if (tokenResponse?.data) { + let inHour = new Date(new Date().getTime() + 60 * 60 * 1000) Cookies.set( Environment.tokenName(), tokenResponse?.data?.token?.accessToken, { - expires: 60 * 60 * 24 * 7, + expires: inHour, }, ) window.location.href = AppPath.home() diff --git a/src/app/(root)/(routes)/(home)/components/CategorySection.tsx b/src/app/(root)/(routes)/(home)/components/CategorySection.tsx index 064732c8..94adc34c 100644 --- a/src/app/(root)/(routes)/(home)/components/CategorySection.tsx +++ b/src/app/(root)/(routes)/(home)/components/CategorySection.tsx @@ -1,35 +1,25 @@ -'use client' - import Image from 'next/image' -import { useRouter } from 'next/navigation' -import Button from '@/components/ui/button' +import Link from 'next/link' import AppPath from '@/config/appPath' import { CATEGORY_BUTTON_LIST } from '@/constants/card' import { TYPOGRAPHY } from '@/styles/sizes' const CategorySection = () => { - const router = useRouter() - - const handleClick = (name: string) => { - if (name === 'ALL_CARD') { - router.push(`${AppPath.cards()}`) - } else { - router.push(`${AppPath.cards()}?category=${name}`) - } - } return (
      {CATEGORY_BUTTON_LIST.map((v) => ( - + ))}
      ) diff --git a/src/components/domain/header/sections/RightSide.tsx b/src/components/domain/header/sections/RightSide.tsx index a2d2b663..f1e859b9 100644 --- a/src/components/domain/header/sections/RightSide.tsx +++ b/src/components/domain/header/sections/RightSide.tsx @@ -1,11 +1,11 @@ +'use client' + import React from 'react' import Link from 'next/link' import Button from '@/components/ui/button' -import ApiEndPoint from '@/config/apiEndPoint' import AppPath from '@/config/appPath' -import apiClient from '@/services/apiClient' +import useNotificationCountQuery from '@/hooks/api/queries/useNotificationCountQuery' import { User } from '@/types/user' -import { getServerCookie } from '@/utils/getServerCookie' import { AvatarWithDropdown, NotificationButton } from '../components' type RightSideProps = { @@ -13,30 +13,30 @@ type RightSideProps = { currentUser: User | null } -const getUserNotificationCount = async () => { - try { - const token = getServerCookie() - const res = await apiClient.get( - ApiEndPoint.getNotificationCount(), - { - next: { revalidate: 60 }, - }, - { - Authorization: `${token}`, - }, - ) - return res.data.unReadCount - } catch (e) { - return 0 - } -} +// const getUserNotificationCount = async () => { +// try { +// const token = getServerCookie() +// const res = await apiClient.get( +// ApiEndPoint.getNotificationCount(), +// { +// cache: 'no-store', +// }, +// { +// Authorization: `${token}`, +// }, +// ) +// return res.data.unReadCount +// } catch (e) { +// return 0 +// } +// } -const RightSide = async ({ isLoggedIn, currentUser }: RightSideProps) => { - const count = await getUserNotificationCount() +const RightSide = ({ isLoggedIn, currentUser }: RightSideProps) => { + const { data } = useNotificationCountQuery({ isLoggedIn }) return isLoggedIn ? ( <> - + ) : ( diff --git a/src/hooks/api/queries/useNotificationCountQuery.ts b/src/hooks/api/queries/useNotificationCountQuery.ts index 6de8c65c..deb9c09b 100644 --- a/src/hooks/api/queries/useNotificationCountQuery.ts +++ b/src/hooks/api/queries/useNotificationCountQuery.ts @@ -1,13 +1,15 @@ import { useQuery } from '@tanstack/react-query' import { getNotificationCount } from '@/services/notification/notification' -const useNotificationCountQuery = () => { +const useNotificationCountQuery = ({ isLoggedIn }: { isLoggedIn: boolean }) => { return useQuery({ queryKey: ['notificationCount'] as const, queryFn: () => { const res = getNotificationCount() return res }, + refetchInterval: 1000 * 60 * 3, + enabled: isLoggedIn, }) } diff --git a/src/hooks/useValidate.ts b/src/hooks/useValidate.ts index 09c59c9f..841fe594 100644 --- a/src/hooks/useValidate.ts +++ b/src/hooks/useValidate.ts @@ -27,19 +27,18 @@ const useValidate = () => { const res = await getValidateUser() return res }, - retry: 3, + retry: 1, enabled: !!token, + throwOnError: false, }) useEffect(() => { if (isError) { Cookies.remove(Environment.tokenName()) - setIsLoggedIn(() => false) - setCurrentUser(() => null) router.push(AppPath.login(), { scroll: false }) toast({ title: '인증 에러', - description: '인증에 실패하였습니다. 다시 시도하거나 로그인해주세요.', + description: '만료되거나 잘못된 토큰입니다. 다시 로그인해주세요.', variant: 'destructive', duration: 3000, }) From eb54c5e3d207267ee11d33b256050616edf4a314 Mon Sep 17 00:00:00 2001 From: oaoong Date: Wed, 29 Nov 2023 16:27:35 +0900 Subject: [PATCH 06/15] =?UTF-8?q?:sparkles:=20expire=20=EC=8B=9C=EA=B0=84?= =?UTF-8?q?=20=EC=BD=94=EB=93=9C=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../(root)/(routes)/(auth)/login/components/RouteCallback.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/(root)/(routes)/(auth)/login/components/RouteCallback.tsx b/src/app/(root)/(routes)/(auth)/login/components/RouteCallback.tsx index 276b2b4a..b9ba6fbe 100644 --- a/src/app/(root)/(routes)/(auth)/login/components/RouteCallback.tsx +++ b/src/app/(root)/(routes)/(auth)/login/components/RouteCallback.tsx @@ -26,7 +26,8 @@ const RouteCallback = ({ tokenResponse }: RouteCallbackProps) => { useEffect(() => { if (tokenResponse?.data) { - let inHour = new Date(new Date().getTime() + 60 * 60 * 1000) + let inHour = new Date() + inHour.setHours(inHour.getHours() + 1) Cookies.set( Environment.tokenName(), tokenResponse?.data?.token?.accessToken, From fc21bd977da10c8929a8cc27cf910c713bc570e4 Mon Sep 17 00:00:00 2001 From: oaoong Date: Wed, 29 Nov 2023 16:28:57 +0900 Subject: [PATCH 07/15] =?UTF-8?q?:fire:=20=EB=82=B4=20=EA=B1=B0=EB=9E=98?= =?UTF-8?q?=EB=82=B4=EC=97=AD=20=EC=B9=B8=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/domain/header/components/MenuButton.tsx | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/components/domain/header/components/MenuButton.tsx b/src/components/domain/header/components/MenuButton.tsx index a65ea822..3b764024 100644 --- a/src/components/domain/header/components/MenuButton.tsx +++ b/src/components/domain/header/components/MenuButton.tsx @@ -48,13 +48,6 @@ const MenuButton = ({ isLoggedIn }: { isLoggedIn: boolean }) => { > 내 찜 목록 - { - router.push(AppPath.myHistory()) - }} - > - 거래 내역 보기 - { router.push(AppPath.chatRooms()) From f705d6fdb3843475a6729fe801e8ddb9786d910d Mon Sep 17 00:00:00 2001 From: oaoong Date: Wed, 29 Nov 2023 16:39:54 +0900 Subject: [PATCH 08/15] =?UTF-8?q?:sparkles:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EB=A6=AC=ED=84=B4=20=EC=A0=95=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/api/queries/useNotificationCountQuery.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/hooks/api/queries/useNotificationCountQuery.ts b/src/hooks/api/queries/useNotificationCountQuery.ts index deb9c09b..3f506a80 100644 --- a/src/hooks/api/queries/useNotificationCountQuery.ts +++ b/src/hooks/api/queries/useNotificationCountQuery.ts @@ -4,10 +4,7 @@ import { getNotificationCount } from '@/services/notification/notification' const useNotificationCountQuery = ({ isLoggedIn }: { isLoggedIn: boolean }) => { return useQuery({ queryKey: ['notificationCount'] as const, - queryFn: () => { - const res = getNotificationCount() - return res - }, + queryFn: () => getNotificationCount(), refetchInterval: 1000 * 60 * 3, enabled: isLoggedIn, }) From 421019b5385f2ddfc25bbe7eac5c66c629eab153 Mon Sep 17 00:00:00 2001 From: Kim Dong Hyun <107387817+doggopawer@users.noreply.github.com> Date: Wed, 29 Nov 2023 16:45:33 +0900 Subject: [PATCH 09/15] =?UTF-8?q?:tada:=20=EA=B2=80=EC=83=89=20=ED=95=84?= =?UTF-8?q?=ED=84=B0=20=EB=AA=A8=EB=8B=AC=20UI=20=EB=B0=8F=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EB=B3=80=EA=B2=BD(=EC=9D=BC=EA=B4=84=EC=A0=81?= =?UTF-8?q?=EC=9A=A9,=20=EC=9D=BC=EA=B4=84=20=EC=B4=88=EA=B8=B0=ED=99=94?= =?UTF-8?q?=20=EB=B2=84=ED=8A=BC=20=EC=83=9D=EC=84=B1)=20(#135)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * :tada: 검색 필터 모달 UI 및 기능 변경(일괄적용, 일괄 초기화 버튼 생성) * :tada: 리스트 staleTime 시간 변경 --- .../filter-form-dialog/FilterFormDialog.tsx | 71 +++++++++---------- .../cards/my/components/my-card/MyCard.tsx | 3 +- src/constants/staleTime.ts | 2 +- 3 files changed, 38 insertions(+), 38 deletions(-) diff --git a/src/app/(root)/(routes)/cards/components/filter-form-dialog/FilterFormDialog.tsx b/src/app/(root)/(routes)/cards/components/filter-form-dialog/FilterFormDialog.tsx index 5ff1a368..863d0dec 100644 --- a/src/app/(root)/(routes)/cards/components/filter-form-dialog/FilterFormDialog.tsx +++ b/src/app/(root)/(routes)/cards/components/filter-form-dialog/FilterFormDialog.tsx @@ -6,7 +6,6 @@ import { Dialog, DialogContent, DialogDescription, - DialogFooter, DialogHeader, DialogTitle, DialogTrigger, @@ -21,11 +20,17 @@ import { import AppPath from '@/config/appPath' import Assets from '@/config/assets' import { CATEGORY_OBJS, PRICE_RANGE_OBJS } from '@/constants/card' -import useCreateQueryString from '@/hooks/useCreateQueryString' import { CategoryObjs, PriceRangeObjs } from '@/types/card' +import { getQueryParams } from '@/utils/getQueryParams' import { getValueByKey } from '@/utils/getValueByKey' const FilterFormDialog = () => { + const router = useRouter() + const searchParams = useSearchParams() + const priceRange = searchParams.get('priceRange') || undefined + const category = searchParams.get('category') || undefined + const [priceRangeState, setPriceRangeState] = useState(priceRange) + const [categoryState, setCategoryState] = useState(category) const [isOpen, setIsOpen] = useState(false) const openModal = () => { setIsOpen(true) @@ -33,12 +38,19 @@ const FilterFormDialog = () => { const closeModal = () => { setIsOpen(false) } - const searchParams = useSearchParams() - const router = useRouter() - - const { createQueryString } = useCreateQueryString() - const priceRange = searchParams.get('priceRange') || undefined - const category = searchParams.get('category') || undefined + const handleApplyFilter = () => { + router.push( + `${AppPath.cards()}?${getQueryParams({ + priceRange: priceRangeState, + category: categoryState, + })}`, + ) + closeModal() + } + const handleResetFilter = () => { + setPriceRangeState(undefined) + setCategoryState(undefined) + } const hasNoFilter = priceRange !== undefined || category !== undefined @@ -70,15 +82,13 @@ const FilterFormDialog = () => { 가격대