From 0a74d26c9d778cbb59bc7fee2b48694ccc34dcc8 Mon Sep 17 00:00:00 2001 From: d0422 Date: Tue, 24 Sep 2024 15:02:20 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=20api=EC=97=B0?= =?UTF-8?q?=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/apis/queries/useSearchQuery.ts | 39 +++++++++++ .../react-native/src/constants/QUERY_KEYS.ts | 1 + packages/react-native/src/pages/Search.tsx | 65 +++---------------- 3 files changed, 49 insertions(+), 56 deletions(-) create mode 100644 packages/react-native/src/apis/queries/useSearchQuery.ts diff --git a/packages/react-native/src/apis/queries/useSearchQuery.ts b/packages/react-native/src/apis/queries/useSearchQuery.ts new file mode 100644 index 00000000..9b64644c --- /dev/null +++ b/packages/react-native/src/apis/queries/useSearchQuery.ts @@ -0,0 +1,39 @@ +import { useSuspenseQuery } from '@tanstack/react-query'; +import { City, Region } from '@/constants/CITY'; +import useAuthAxios from '../useAuthAxios'; +import { ServerResponse } from '@/types/response'; +import QUERY_KEYS from '@/constants/QUERY_KEYS'; + +interface UseSearchQueryParams { + keyword: string; +} + +interface SearchResponse { + id: number; + contentId: number; + name: string; + region: Region; + city: City; + workId: number; + workName: string; + posterUrl: string; + quote: string; + isLiked: boolean; + likeCount: number; +} + +export default function useSearchQuery({ keyword }: UseSearchQueryParams) { + const authAxios = useAuthAxios(); + const search = async () => { + const result = await authAxios.get>( + `/api/spot/search?keyword=${keyword}`, + ); + + return result.data.result; + }; + + return useSuspenseQuery({ + queryKey: [QUERY_KEYS.SEARCH, keyword], + queryFn: search, + }); +} diff --git a/packages/react-native/src/constants/QUERY_KEYS.ts b/packages/react-native/src/constants/QUERY_KEYS.ts index 16e8da17..b2c165e2 100644 --- a/packages/react-native/src/constants/QUERY_KEYS.ts +++ b/packages/react-native/src/constants/QUERY_KEYS.ts @@ -12,6 +12,7 @@ const QUERY_KEYS = { TRIP_PLAN_DETAIL: 'tripPlanDetail', EDIT_PLAN: 'editPlan', SPOT_DETAIL: 'spotDetail', + SEARCH: 'search', }; export default QUERY_KEYS; diff --git a/packages/react-native/src/pages/Search.tsx b/packages/react-native/src/pages/Search.tsx index e8c6d968..aada47ff 100644 --- a/packages/react-native/src/pages/Search.tsx +++ b/packages/react-native/src/pages/Search.tsx @@ -4,67 +4,20 @@ import { View } from 'react-native'; import { Font } from 'design-system'; import Carousel, { ICarouselInstance } from 'react-native-reanimated-carousel'; import BackGroundGradient from '@/layouts/BackGroundGradient'; -import { SpotCardData } from '@/types/spot'; import Card from '@/components/common/Card'; import WordBreak from '@/components/common/WordBreak'; import Header from '@/components/common/Header'; import { StackRouteProps } from '@/types/navigation'; import { DEFAULT_COLOR } from '@/constants/DEFAULT_COLOR'; - -// FIXME: 추후 제거 -const mockData: SpotCardData[] = [ - { - contentId: 10, - name: '주문진 방파제', - region: 1, - city: 20, - - posterUrl: - 'https://i.namu.wiki/i/oIbSW8G0ldkxIJGYLf9e9OzO1n2PkDJMu78IBDV1wh7v06rSdSvlzGUc4znFOc7EH0xi1OLJx3HqzfJgkb514Oj0BPqXU2m0dWl0wwY8coA1A7rQiOcKlLpUfEZ45Ee7bKskmI3RSb760_xrYzysTw.webp', - isLiked: true, - likeCount: 21, - quote: '', - workName: '도깨비', - workId: 1, - }, - { - contentId: 20, - name: '룰루랄라', - region: 1, - city: 20, - - posterUrl: - 'https://i.namu.wiki/i/5YW8uWfQIeY4JG56CkWX8tL8hzeQxsQ9o8aXoLkHiMxHkTJLyRzC0RHdd6zJHctNQYXfhHqddAg48LhqHIgdyTRRH-awxeCSoCSIT04XlPAx_ciulV9hfEPPdir_zbiT0mtWDNtr9a1hewqNhwpAbg.webp', - isLiked: false, - likeCount: 12, - quote: '', - workName: '도깨비', - workId: 1, - }, - { - contentId: 30, - name: '룰루랄라2', - region: 1, - city: 20, - - posterUrl: - 'https://i.namu.wiki/i/x9m5nUyjJvqSTSPX5EczIy02UrLrzZ7ndKHhsh2yl7SXKRQMGwHCtGM-vvfWI6ySufjf_2YXXoZezjSNgDSFRyvilXPootx2PKAitdNBvEizIkMBYCCnZxu98NMSudE83LkWHXhWIVNsCXBblDzctQ.webp', - isLiked: false, - likeCount: 12, - quote: '', - workName: '도깨비', - workId: 1, - }, -]; - -const mockDescription = - '"너와 함께한 시간 모두 눈부셨다. 날이 좋아서, 날이 좋지 않아서, 날이 적당해서 모든 날이 좋았다."'; +import useSearchQuery from '@/apis/queries/useSearchQuery'; export default function Search() { - const [carouselIndex, setCarouselIndex] = useState(0); - const carouselRef = useRef(null); const route = useRoute>(); const { title } = route.params; + const { data } = useSearchQuery({ keyword: title }); + + const [carouselIndex, setCarouselIndex] = useState(0); + const carouselRef = useRef(null); const onProgressChange = () => { if (!carouselRef.current) return; @@ -85,7 +38,7 @@ export default function Search() { width={220} type="body1" color="white" - content={mockDescription} + content={data[carouselIndex].quote} /> @@ -101,13 +54,13 @@ export default function Search() { width={260} height={350} mode="horizontal-stack" - modeConfig={{ showLength: mockData.length }} + modeConfig={{ showLength: data.length }} loop={false} - data={mockData} + data={data} renderItem={({ item }) => } /> - {mockData.map((_, index) => ( + {data.map((_, index) => ( Date: Tue, 24 Sep 2024 15:02:34 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=EA=B2=80=EC=83=89=EA=B2=B0?= =?UTF-8?q?=EA=B3=BC=EA=B0=80=20=EC=97=86=EB=8A=94=20=EA=B2=BD=EC=9A=B0=20?= =?UTF-8?q?=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-native/src/pages/Search.tsx | 31 +++++++++++++++++++--- 1 file changed, 28 insertions(+), 3 deletions(-) diff --git a/packages/react-native/src/pages/Search.tsx b/packages/react-native/src/pages/Search.tsx index aada47ff..0090bf3a 100644 --- a/packages/react-native/src/pages/Search.tsx +++ b/packages/react-native/src/pages/Search.tsx @@ -1,13 +1,13 @@ import { useRef, useState } from 'react'; -import { useRoute } from '@react-navigation/native'; -import { View } from 'react-native'; +import { useNavigation, useRoute } from '@react-navigation/native'; +import { TouchableOpacity, View } from 'react-native'; import { Font } from 'design-system'; import Carousel, { ICarouselInstance } from 'react-native-reanimated-carousel'; import BackGroundGradient from '@/layouts/BackGroundGradient'; import Card from '@/components/common/Card'; import WordBreak from '@/components/common/WordBreak'; import Header from '@/components/common/Header'; -import { StackRouteProps } from '@/types/navigation'; +import { StackNavigation, StackRouteProps } from '@/types/navigation'; import { DEFAULT_COLOR } from '@/constants/DEFAULT_COLOR'; import useSearchQuery from '@/apis/queries/useSearchQuery'; @@ -15,6 +15,7 @@ export default function Search() { const route = useRoute>(); const { title } = route.params; const { data } = useSearchQuery({ keyword: title }); + const navigation = useNavigation>(); const [carouselIndex, setCarouselIndex] = useState(0); const carouselRef = useRef(null); @@ -25,6 +26,30 @@ export default function Search() { setCarouselIndex(index); }; + if (data.length === 0) { + return ( + +
+ + + 검색결과가 없어요. + + + 다른 작품을 검색해볼까요? + + navigation.navigate('Home/Main')} + > + + 돌아가기 + + + + + ); + } + return (
From 8f97a61f4e08586a59b3810de20a58db1facb3d9 Mon Sep 17 00:00:00 2001 From: d0422 Date: Tue, 24 Sep 2024 16:55:50 +0900 Subject: [PATCH 3/7] =?UTF-8?q?fix:=20401=EC=9D=B4=EC=8A=88=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0=EC=9D=84=20=EC=9C=84=ED=95=B4=20workId=EB=A5=BC=20par?= =?UTF-8?q?ams=EB=A1=9C=20=EB=84=98=EA=B8=B0=EB=8F=84=EB=A1=9D=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 --- .../apis/queries/detail/useAroundSpotQuery.ts | 8 +++++-- .../src/apis/queries/detail/useDetailQuery.ts | 10 ++++++-- .../src/components/common/Card.tsx | 23 +++++++++++++++---- packages/react-native/src/pages/Detail.tsx | 4 ++-- .../src/pages/Detail/DetailInfo.tsx | 4 ++-- .../src/pages/Detail/DetailSpot.tsx | 4 ++-- .../src/routes/DetailTabNavigator.tsx | 5 ++-- packages/react-native/src/types/navigation.ts | 2 +- 8 files changed, 42 insertions(+), 18 deletions(-) diff --git a/packages/react-native/src/apis/queries/detail/useAroundSpotQuery.ts b/packages/react-native/src/apis/queries/detail/useAroundSpotQuery.ts index eb414602..c3422bda 100644 --- a/packages/react-native/src/apis/queries/detail/useAroundSpotQuery.ts +++ b/packages/react-native/src/apis/queries/detail/useAroundSpotQuery.ts @@ -6,6 +6,7 @@ import QUERY_KEYS from '@/constants/QUERY_KEYS'; interface UseAroundSpotQueryParams { id: number; + workId: number; } interface AroundSpotResponse { @@ -14,12 +15,15 @@ interface AroundSpotResponse { accomodation: SpotResponse[]; } -export default function useAroundSpotQuery({ id }: UseAroundSpotQueryParams) { +export default function useAroundSpotQuery({ + id, + workId, +}: UseAroundSpotQueryParams) { const authAxios = useAuthAxios(); const getAroundSpot = async () => { const result = await authAxios.get>( - `/api/spot/${id}/arounds`, + `/api/spot/${id}/arounds?workdId=${workId}`, ); return result.data.result; }; diff --git a/packages/react-native/src/apis/queries/detail/useDetailQuery.ts b/packages/react-native/src/apis/queries/detail/useDetailQuery.ts index 8b530d28..2bc7b280 100644 --- a/packages/react-native/src/apis/queries/detail/useDetailQuery.ts +++ b/packages/react-native/src/apis/queries/detail/useDetailQuery.ts @@ -20,11 +20,17 @@ interface DetailResponse { posterUrl: string; } -export default function useDetailQuery(id: number) { +export default function useDetailQuery({ + id, + workId, +}: { + id: number; + workId: number; +}) { const authAxios = useAuthAxios(); const getSpotAroundInfo = async () => { const result = await authAxios.get>( - `/api/spot/${id}`, + `/api/spot/${id}?workId=${workId}`, ); return result.data.result; }; diff --git a/packages/react-native/src/components/common/Card.tsx b/packages/react-native/src/components/common/Card.tsx index a0298aeb..465dcb82 100644 --- a/packages/react-native/src/components/common/Card.tsx +++ b/packages/react-native/src/components/common/Card.tsx @@ -12,8 +12,17 @@ interface CardProps { } function Default({ data, size = 260 }: CardProps) { - const { isLiked, name, region, city, posterUrl, likeCount, contentId, id } = - data; + const { + isLiked, + name, + region, + city, + posterUrl, + likeCount, + contentId, + id, + workId, + } = data; const navigation = useNavigation>(); return ( @@ -24,7 +33,9 @@ function Default({ data, size = 260 }: CardProps) { > navigation.navigate('Home/Detail', { contentId, id })} + onPress={() => + navigation.navigate('Home/Detail', { contentId, id, workId }) + } activeOpacity={1} > @@ -61,7 +72,7 @@ function Default({ data, size = 260 }: CardProps) { } function Small({ data, size = 180 }: CardProps) { - const { name, region, city, posterUrl, contentId, id } = data; + const { name, region, city, posterUrl, contentId, id, workId } = data; const navigation = useNavigation>(); return ( @@ -72,7 +83,9 @@ function Small({ data, size = 180 }: CardProps) { > navigation.navigate('Home/Detail', { contentId, id })} + onPress={() => + navigation.navigate('Home/Detail', { contentId, id, workId }) + } > diff --git a/packages/react-native/src/pages/Detail.tsx b/packages/react-native/src/pages/Detail.tsx index 32770600..72b8d36a 100644 --- a/packages/react-native/src/pages/Detail.tsx +++ b/packages/react-native/src/pages/Detail.tsx @@ -14,9 +14,9 @@ import { getDisplayRegion } from '@/utils/getDisplayRegionName'; const Detail = withSuspense(() => { const route = useRoute>(); const navigation = useNavigation>(); - const { id, contentId: paramsContentId } = route.params; + const { id, contentId: paramsContentId, workId } = route.params; - const { data } = useDetailQuery(paramsContentId); + const { data } = useDetailQuery({ id: paramsContentId, workId }); const { like, cancelLike, isLikePending, isCancelLikePending } = useSpotLikeMutation({ contentId: paramsContentId }); diff --git a/packages/react-native/src/pages/Detail/DetailInfo.tsx b/packages/react-native/src/pages/Detail/DetailInfo.tsx index 4d59b022..948abfc6 100644 --- a/packages/react-native/src/pages/Detail/DetailInfo.tsx +++ b/packages/react-native/src/pages/Detail/DetailInfo.tsx @@ -7,8 +7,8 @@ import { StackRouteProps } from '@/types/navigation'; export default function DetailInfo() { const route = useRoute>(); - const { contentId } = route.params; - const { data } = useDetailQuery(contentId); + const { contentId, workId } = route.params; + const { data } = useDetailQuery({ id: contentId, workId }); return ( (); const navigation = useNavigation>(); - const { contentId } = route.params; + const { contentId, workId } = route.params; - const { data } = useAroundSpotQuery({ id: contentId }); + const { data } = useAroundSpotQuery({ id: contentId, workId }); const startLongPress = (spot: SpotResponse) => { if (!longPressMode) { diff --git a/packages/react-native/src/routes/DetailTabNavigator.tsx b/packages/react-native/src/routes/DetailTabNavigator.tsx index 1d7036a0..04dbdeee 100644 --- a/packages/react-native/src/routes/DetailTabNavigator.tsx +++ b/packages/react-native/src/routes/DetailTabNavigator.tsx @@ -8,7 +8,7 @@ const Tab = createMaterialTopTabNavigator(); export default function DetailTabNavigator() { const route = useRoute>(); - const { id, contentId } = route.params; + const { id, contentId, workId } = route.params; return ( ); diff --git a/packages/react-native/src/types/navigation.ts b/packages/react-native/src/types/navigation.ts index 51767a1b..ba9a6fa9 100644 --- a/packages/react-native/src/types/navigation.ts +++ b/packages/react-native/src/types/navigation.ts @@ -41,7 +41,7 @@ export type StackParamList = { 'Home/Main': undefined; 'Home/Search': { title: string }; - 'Home/Detail': { contentId: number; id: number }; + 'Home/Detail': { contentId: number; id: number; workId: number }; 'Home/AddSpot': { spots: SpotResponse[]; }; From 46deb978a4d746d28c9b0acd5730925a470b9055 Mon Sep 17 00:00:00 2001 From: d0422 Date: Tue, 24 Sep 2024 17:13:26 +0900 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20Search=20suspense=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-native/src/pages/Search.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/react-native/src/pages/Search.tsx b/packages/react-native/src/pages/Search.tsx index 0090bf3a..45ea8570 100644 --- a/packages/react-native/src/pages/Search.tsx +++ b/packages/react-native/src/pages/Search.tsx @@ -10,8 +10,9 @@ import Header from '@/components/common/Header'; import { StackNavigation, StackRouteProps } from '@/types/navigation'; import { DEFAULT_COLOR } from '@/constants/DEFAULT_COLOR'; import useSearchQuery from '@/apis/queries/useSearchQuery'; +import withSuspense from '@/components/HOC/withSuspense'; -export default function Search() { +export default withSuspense(function Search() { const route = useRoute>(); const { title } = route.params; const { data } = useSearchQuery({ keyword: title }); @@ -101,4 +102,4 @@ export default function Search() { ); -} +}); From dd9bac7d26bd814733a0c902da0c3b1a20c27534 Mon Sep 17 00:00:00 2001 From: d0422 Date: Tue, 24 Sep 2024 17:16:10 +0900 Subject: [PATCH 5/7] =?UTF-8?q?fix:=20api=20=EC=98=A4=ED=83=80=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../react-native/src/apis/queries/detail/useAroundSpotQuery.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native/src/apis/queries/detail/useAroundSpotQuery.ts b/packages/react-native/src/apis/queries/detail/useAroundSpotQuery.ts index c3422bda..262f8a03 100644 --- a/packages/react-native/src/apis/queries/detail/useAroundSpotQuery.ts +++ b/packages/react-native/src/apis/queries/detail/useAroundSpotQuery.ts @@ -23,7 +23,7 @@ export default function useAroundSpotQuery({ const getAroundSpot = async () => { const result = await authAxios.get>( - `/api/spot/${id}/arounds?workdId=${workId}`, + `/api/spot/${id}/arounds?workId=${workId}`, ); return result.data.result; }; From a1d9f76aeae645b2fab8340b945be010f73fb16c Mon Sep 17 00:00:00 2001 From: d0422 Date: Tue, 24 Sep 2024 17:35:47 +0900 Subject: [PATCH 6/7] =?UTF-8?q?chore:=20=EA=B8=80=EC=9E=90=20=ED=81=AC?= =?UTF-8?q?=EA=B8=B0=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-native/src/pages/Search.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-native/src/pages/Search.tsx b/packages/react-native/src/pages/Search.tsx index 45ea8570..969d30d4 100644 --- a/packages/react-native/src/pages/Search.tsx +++ b/packages/react-native/src/pages/Search.tsx @@ -32,17 +32,17 @@ export default withSuspense(function Search() {
- + 검색결과가 없어요. - + 다른 작품을 검색해볼까요? navigation.navigate('Home/Main')} > - + 돌아가기 From 81ffb9fd6013c384ea7000808664d210dfefc9c2 Mon Sep 17 00:00:00 2001 From: d0422 Date: Tue, 24 Sep 2024 17:36:40 +0900 Subject: [PATCH 7/7] =?UTF-8?q?feat:=20=EC=83=81=EB=8B=A8=EB=A9=94?= =?UTF-8?q?=EC=8B=9C=EC=A7=80=EB=A5=BC=20=EC=9E=91=ED=92=88=20=EC=A0=9C?= =?UTF-8?q?=EB=AA=A9=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/react-native/src/pages/Search.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-native/src/pages/Search.tsx b/packages/react-native/src/pages/Search.tsx index 969d30d4..7a566fd9 100644 --- a/packages/react-native/src/pages/Search.tsx +++ b/packages/react-native/src/pages/Search.tsx @@ -56,7 +56,7 @@ export default withSuspense(function Search() {
- {title} + {data[carouselIndex].workName}