From c3e0558e206f9f1421eb4c4214f7baef41c270de Mon Sep 17 00:00:00 2001 From: brian <90752841+wokbjso@users.noreply.github.com> Date: Fri, 2 Aug 2024 15:37:41 +0900 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20=EC=88=98=EC=98=81=EC=9E=A5=20?= =?UTF-8?q?=EC=A6=90=EA=B2=A8=EC=B0=BE=EA=B8=B0=20api=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apis/fetch-data.ts | 2 +- app/api/pool/favorite/route.ts | 10 ++++++ app/api/pool/search/initial/route.ts | 2 +- components/atoms/icons/star-icon-fill.tsx | 3 +- components/atoms/icons/star-icon.tsx | 10 ++++-- features/record/apis/use-toggle-favorite.ts | 19 +++++++++++ .../molecules/pool-search-result-element.tsx | 33 ++++++++++++++----- .../components/organisms/diary-section.tsx | 2 ++ 8 files changed, 67 insertions(+), 14 deletions(-) create mode 100644 app/api/pool/favorite/route.ts create mode 100644 features/record/apis/use-toggle-favorite.ts diff --git a/apis/fetch-data.ts b/apis/fetch-data.ts index d9b29e76..518dcc23 100644 --- a/apis/fetch-data.ts +++ b/apis/fetch-data.ts @@ -11,7 +11,7 @@ import { cookies } from 'next/headers'; export async function fetchData( endpoint: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH', - body?: '', + body?: object, ): Promise { const BASE_URL = process.env.NEXT_PUBLIC_SERVER_URL; const url = `${BASE_URL}${endpoint}`; diff --git a/app/api/pool/favorite/route.ts b/app/api/pool/favorite/route.ts new file mode 100644 index 00000000..b715374d --- /dev/null +++ b/app/api/pool/favorite/route.ts @@ -0,0 +1,10 @@ +import { NextRequest, NextResponse } from 'next/server'; + +import { fetchData } from '@/apis/fetch-data'; + +export async function PUT(request: NextRequest) { + const body = (await request.json()) as Promise<{ poolId: number }>; + const data = await fetchData(`/pool/favorite`, 'PUT', body); + + return NextResponse.json(data); +} diff --git a/app/api/pool/search/initial/route.ts b/app/api/pool/search/initial/route.ts index 76460394..95e283c1 100644 --- a/app/api/pool/search/initial/route.ts +++ b/app/api/pool/search/initial/route.ts @@ -5,7 +5,7 @@ import { SearchPoolInitialResultResponse } from '@/features/record'; export async function GET() { const data = await fetchData( - '/pool/search/initial', + `/pool/search/initial`, 'GET', ); diff --git a/components/atoms/icons/star-icon-fill.tsx b/components/atoms/icons/star-icon-fill.tsx index 472ad5f3..d57e4bd3 100644 --- a/components/atoms/icons/star-icon-fill.tsx +++ b/components/atoms/icons/star-icon-fill.tsx @@ -1,4 +1,4 @@ -export function StarIconFill() { +export function StarIconFill(props?: React.SVGProps) { return ( ) { return ( - + (({ poolId, name, address, isFavorite, className, assignRef }, ref) => { + const [favorite, setFavorite] = useState(isFavorite); + const { setValue } = useFormContext(); const setIsPoolSearchPageModalOpen = useSetAtom(isPoolSearchPageModalOpen); + const { mutate: toggleFavorite, isPending } = useToggleFavorite(); const handleElementClick = (name: string, poolId: number) => { setValue('poolId', poolId); @@ -32,19 +36,25 @@ export const PoolSearchResultElement = forwardRef< setIsPoolSearchPageModalOpen({ isOpen: false, jumpDirection: 'backward' }); }; - PoolSearchResultElement.displayName = 'PoolSearchResultElement'; + const handleStarIconClick = () => { + toggleFavorite(poolId); + if (!isPending) setFavorite((prev) => !prev); + }; return ( -
  • handleElementClick(name, poolId)} - > -
    +
  • +
    handleElementClick(name, poolId)} + > {name} {address}
    - {isFavorite ? : } + {favorite ? ( + + ) : ( + + )}
    • ); }); @@ -72,5 +82,10 @@ const textStyles = { textStyle: 'body2.normal', fontWeight: 400, color: 'text.alternative', + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', }), }; + +PoolSearchResultElement.displayName = 'PoolSearchResultElement'; diff --git a/features/record/components/organisms/diary-section.tsx b/features/record/components/organisms/diary-section.tsx index fb2df95d..6a2a9ceb 100644 --- a/features/record/components/organisms/diary-section.tsx +++ b/features/record/components/organisms/diary-section.tsx @@ -1,3 +1,5 @@ +'use client'; + import { useFormContext } from 'react-hook-form'; import { TextArea } from '@/components/molecules'; From bba885164f300a1ea0b58198d8dda4402fad3dc0 Mon Sep 17 00:00:00 2001 From: brian <90752841+wokbjso@users.noreply.github.com> Date: Fri, 2 Aug 2024 16:31:16 +0900 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20invalidateQueries=20=EC=B2=98?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apis/fetch-data.ts | 1 + features/record/apis/use-toggle-favorite.ts | 9 ++++++++- .../components/organisms/pool-search-page-modal.tsx | 3 ++- 3 files changed, 11 insertions(+), 2 deletions(-) diff --git a/apis/fetch-data.ts b/apis/fetch-data.ts index 518dcc23..1bf522f3 100644 --- a/apis/fetch-data.ts +++ b/apis/fetch-data.ts @@ -29,6 +29,7 @@ export async function fetchData( method, headers, body: body ? JSON.stringify(body) : undefined, + cache: 'no-store', }); if (!response.ok) { diff --git a/features/record/apis/use-toggle-favorite.ts b/features/record/apis/use-toggle-favorite.ts index 9338822c..0d574f80 100644 --- a/features/record/apis/use-toggle-favorite.ts +++ b/features/record/apis/use-toggle-favorite.ts @@ -1,4 +1,4 @@ -import { useMutation } from '@tanstack/react-query'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; async function toggleFavorite(poolId: number) { const res = await fetch(`/api/pool/favorite`, { @@ -13,7 +13,14 @@ async function toggleFavorite(poolId: number) { } export function useToggleFavorite() { + const queryClient = useQueryClient(); return useMutation({ mutationFn: toggleFavorite, + onSuccess: () => { + // eslint-disable-next-line @typescript-eslint/no-floating-promises + queryClient.invalidateQueries({ + queryKey: ['useSearchPoolInitial'], + }); + }, }); } diff --git a/features/record/components/organisms/pool-search-page-modal.tsx b/features/record/components/organisms/pool-search-page-modal.tsx index 31029bf9..9dd8b92e 100644 --- a/features/record/components/organisms/pool-search-page-modal.tsx +++ b/features/record/components/organisms/pool-search-page-modal.tsx @@ -33,8 +33,9 @@ export function PoolSearchPageModal({ title }: PoolSearchPageModalProps) { const handleBackArrowClick = () => { setPageModalState({ isOpen: false, jumpDirection: 'backward' }); + setPoolSearchText(''); }; - // api 연결 후 debounce 처리 + // Todo: debounce 처리 const handlePoolSearchTextChange = (text: string) => { setPoolSearchText(text); }; From 499a8e3a383b4a109276d9d87937e98c9d50be58 Mon Sep 17 00:00:00 2001 From: brian <90752841+wokbjso@users.noreply.github.com> Date: Sat, 3 Aug 2024 00:10:25 +0900 Subject: [PATCH 3/4] =?UTF-8?q?design:=20=EA=B2=80=EC=83=89=20=EA=B2=B0?= =?UTF-8?q?=EA=B3=BC=20=EC=97=86=EC=9D=84=20=EC=8B=9C=20=EB=9D=84=EC=9B=8C?= =?UTF-8?q?=EC=A3=BC=EB=8A=94=20=EA=B8=80=20=EC=83=89=EA=B9=94=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../record/components/organisms/pool-search-result-list.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/features/record/components/organisms/pool-search-result-list.tsx b/features/record/components/organisms/pool-search-result-list.tsx index 491ddb28..2fe14fc4 100644 --- a/features/record/components/organisms/pool-search-result-list.tsx +++ b/features/record/components/organisms/pool-search-result-list.tsx @@ -63,9 +63,11 @@ const textStyles = { textStyle: 'heading6', fontWeight: 500, marginBottom: '4px', + color: 'text.normal', }), subNoResult: css({ textStyle: 'body2.normal', fontWeight: 400, + color: 'text.alternative', }), }; From 7af6a903009750a343fbf7d285de00c4ce08748d Mon Sep 17 00:00:00 2001 From: brian <90752841+wokbjso@users.noreply.github.com> Date: Sat, 3 Aug 2024 02:42:16 +0900 Subject: [PATCH 4/4] =?UTF-8?q?chore:=20=EC=BD=94=EB=93=9C=20=EB=A6=AC?= =?UTF-8?q?=EB=B7=B0=20=EB=B0=98=EC=98=81'?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apis/fetch-data.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/apis/fetch-data.ts b/apis/fetch-data.ts index 1bf522f3..518dcc23 100644 --- a/apis/fetch-data.ts +++ b/apis/fetch-data.ts @@ -29,7 +29,6 @@ export async function fetchData( method, headers, body: body ? JSON.stringify(body) : undefined, - cache: 'no-store', }); if (!response.ok) {