From 918ab3302e4a84f6344c40b36edf0bce50366de2 Mon Sep 17 00:00:00 2001 From: leeleeleeleejun Date: Mon, 18 Aug 2025 15:29:19 +0900 Subject: [PATCH 01/19] =?UTF-8?q?feat:=20Layout=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=9D=98=20Column=20=EB=84=88=EB=B9=84?= =?UTF-8?q?=EB=A5=BC=20450px=EC=97=90=EC=84=9C=20=EC=A0=84=EC=B2=B4=20?= =?UTF-8?q?=EB=84=88=EB=B9=84=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 --- apps/web/app/layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx index 0c52fbc..f5d10b0 100644 --- a/apps/web/app/layout.tsx +++ b/apps/web/app/layout.tsx @@ -32,7 +32,7 @@ export default async function RootLayout({
- + {children}
From 9235f376341da511c5089ba42eab199fd00ec4b9 Mon Sep 17 00:00:00 2001 From: leeleeleeleejun Date: Mon, 18 Aug 2025 16:07:55 +0900 Subject: [PATCH 02/19] =?UTF-8?q?feat:=20Header=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=97=90=20className=20prop=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/src/components/Header/Header.tsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/packages/ui/src/components/Header/Header.tsx b/packages/ui/src/components/Header/Header.tsx index 914c6f2..69e739e 100644 --- a/packages/ui/src/components/Header/Header.tsx +++ b/packages/ui/src/components/Header/Header.tsx @@ -1,18 +1,22 @@ -import { Flex, JustifyBetween } from '../Layout' import type { ReactNode } from 'react' -import { Icon } from '../Icon' import { Text } from '../Text' -import type { IconType } from '../Icon/IconMap' +import { Icon, type IconType } from '../Icon' +import { Flex, JustifyBetween } from '../Layout' +import { cn } from '../../utils/cn' type Props = { left?: ReactNode center?: ReactNode right?: ReactNode + className?: string } -export const Header = ({ left, center, right }: Props) => { +export const Header = ({ left, center, right, className }: Props) => { return ( - + {left} {center} {right ??
{left}
} From 757c324eb1e515c927e25a9708d8fdff9f05a5f9 Mon Sep 17 00:00:00 2001 From: leeleeleeleejun Date: Mon, 18 Aug 2025 16:10:43 +0900 Subject: [PATCH 03/19] =?UTF-8?q?feat:=20categories=20=ED=95=98=EC=9C=84?= =?UTF-8?q?=20=ED=8F=B4=EB=8D=94=20Template=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80=20-=20categories=20=ED=95=98?= =?UTF-8?q?=EC=9C=84=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=A0=84=ED=99=98=20?= =?UTF-8?q?=EC=8B=9C=20animation=20effects=20=EB=B0=9C=EC=83=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/app/_template/template.tsx | 24 ++++++++++++++++++++++++ apps/web/app/categories/template.tsx | 2 ++ 2 files changed, 26 insertions(+) create mode 100644 apps/web/app/_template/template.tsx create mode 100644 apps/web/app/categories/template.tsx diff --git a/apps/web/app/_template/template.tsx b/apps/web/app/_template/template.tsx new file mode 100644 index 0000000..33ed2b5 --- /dev/null +++ b/apps/web/app/_template/template.tsx @@ -0,0 +1,24 @@ +'use client' +import { motion } from 'motion/react' +import { ReactNode } from 'react' + +interface TemplateProps { + children: ReactNode +} + +export default function Template({ children }: TemplateProps) { + return ( + + {children} + + ) +} diff --git a/apps/web/app/categories/template.tsx b/apps/web/app/categories/template.tsx new file mode 100644 index 0000000..23b9a5a --- /dev/null +++ b/apps/web/app/categories/template.tsx @@ -0,0 +1,2 @@ +import Template from '@/_template/template' +export default Template From 659a5e7ac4ae60ff098be52135c3a4e92390d2f0 Mon Sep 17 00:00:00 2001 From: leeleeleeleejun Date: Mon, 18 Aug 2025 16:11:46 +0900 Subject: [PATCH 04/19] =?UTF-8?q?feat:=20HeaderBackButton=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../HeaderBackButton/HeaderBackButton.tsx | 14 ++++++++++++++ .../web/app/_components/HeaderBackButton/index.tsx | 1 + 2 files changed, 15 insertions(+) create mode 100644 apps/web/app/_components/HeaderBackButton/HeaderBackButton.tsx create mode 100644 apps/web/app/_components/HeaderBackButton/index.tsx diff --git a/apps/web/app/_components/HeaderBackButton/HeaderBackButton.tsx b/apps/web/app/_components/HeaderBackButton/HeaderBackButton.tsx new file mode 100644 index 0000000..69cc008 --- /dev/null +++ b/apps/web/app/_components/HeaderBackButton/HeaderBackButton.tsx @@ -0,0 +1,14 @@ +'use client' + +import { Icon } from '@repo/ui/components/Icon' +import { useRouter } from 'next/navigation' + +export const HeaderBackButton = () => { + const { back } = useRouter() + + return ( + + ) +} diff --git a/apps/web/app/_components/HeaderBackButton/index.tsx b/apps/web/app/_components/HeaderBackButton/index.tsx new file mode 100644 index 0000000..c4129ae --- /dev/null +++ b/apps/web/app/_components/HeaderBackButton/index.tsx @@ -0,0 +1 @@ +export { HeaderBackButton } from './HeaderBackButton' From cfd5bcd76007b2663085861862bc6a019a622a3b Mon Sep 17 00:00:00 2001 From: leeleeleeleejun Date: Mon, 18 Aug 2025 16:16:58 +0900 Subject: [PATCH 05/19] =?UTF-8?q?feat:=20CategoryItem=20=EB=B0=8F=20RowCat?= =?UTF-8?q?egories=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../RowCategories/CategoryItem.tsx | 37 ++++++++++++++++ .../RowCategories/RowCategories.tsx | 42 +++++++++++++++++++ .../[id]/_components/RowCategories/index.tsx | 1 + 3 files changed, 80 insertions(+) create mode 100644 apps/web/app/categories/[id]/_components/RowCategories/CategoryItem.tsx create mode 100644 apps/web/app/categories/[id]/_components/RowCategories/RowCategories.tsx create mode 100644 apps/web/app/categories/[id]/_components/RowCategories/index.tsx diff --git a/apps/web/app/categories/[id]/_components/RowCategories/CategoryItem.tsx b/apps/web/app/categories/[id]/_components/RowCategories/CategoryItem.tsx new file mode 100644 index 0000000..d47832f --- /dev/null +++ b/apps/web/app/categories/[id]/_components/RowCategories/CategoryItem.tsx @@ -0,0 +1,37 @@ +import { Column } from '@repo/ui/components/Layout' +import { Icon } from '@repo/ui/components/Icon' +import { Text } from '@repo/ui/components/Text' +import { cn } from '@repo/ui/utils/cn' +import type { Category } from '@/_apis/schemas/category' + +type Props = { + category: Category + isActive: boolean + onClick: VoidFunction +} + +export const CategoryItem = ({ category, isActive, onClick }: Props) => { + const { iconKey, name } = category + + return ( + + + + {name} + +
+ + ) +} diff --git a/apps/web/app/categories/[id]/_components/RowCategories/RowCategories.tsx b/apps/web/app/categories/[id]/_components/RowCategories/RowCategories.tsx new file mode 100644 index 0000000..9eef8fc --- /dev/null +++ b/apps/web/app/categories/[id]/_components/RowCategories/RowCategories.tsx @@ -0,0 +1,42 @@ +import type { Category } from '@/_apis/schemas/category' +import { Flex } from '@repo/ui/components/Layout' +import { CategoryItem } from './CategoryItem' +import { cn } from '@repo/ui/utils/cn' + +type Props = { + categories: Category[] + id: string + setIdFunc: (id: string) => void +} + +export const RowCategories = ({ id, categories, setIdFunc }: Props) => { + return ( +
+ + {categories.map((category) => ( + { + setIdFunc(category.id) + }} + /> + ))} + + +
+ ) +} + +const ScrollHintGradient = () => ( +
+) diff --git a/apps/web/app/categories/[id]/_components/RowCategories/index.tsx b/apps/web/app/categories/[id]/_components/RowCategories/index.tsx new file mode 100644 index 0000000..c0b7517 --- /dev/null +++ b/apps/web/app/categories/[id]/_components/RowCategories/index.tsx @@ -0,0 +1 @@ +export { RowCategories } from './RowCategories' From 24f133f215658491353b596dc101e0cfc20c0566 Mon Sep 17 00:00:00 2001 From: leeleeleeleejun Date: Mon, 18 Aug 2025 16:17:13 +0900 Subject: [PATCH 06/19] =?UTF-8?q?feat:=20CategoryDetailPage=20=EB=B0=8F=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../categories/[id]/CategoryDetailPage.tsx | 44 +++++++++++++++++++ apps/web/app/categories/[id]/page.tsx | 18 ++++++++ 2 files changed, 62 insertions(+) create mode 100644 apps/web/app/categories/[id]/CategoryDetailPage.tsx create mode 100644 apps/web/app/categories/[id]/page.tsx diff --git a/apps/web/app/categories/[id]/CategoryDetailPage.tsx b/apps/web/app/categories/[id]/CategoryDetailPage.tsx new file mode 100644 index 0000000..4cf89a4 --- /dev/null +++ b/apps/web/app/categories/[id]/CategoryDetailPage.tsx @@ -0,0 +1,44 @@ +'use client' + +import { useState } from 'react' +import { useSuspenseQuery } from '@tanstack/react-query' +import { useCategoryQueries } from '@/_apis/queries/category' +import { Icon } from '@repo/ui/components/Icon' +import { Text } from '@repo/ui/components/Text' +import { Header } from '@repo/ui/components/Header' +import { Column, Flex } from '@repo/ui/components/Layout' +import { HeaderBackButton } from '@/_components/HeaderBackButton' +import { RowCategories } from './_components/RowCategories/' + +type Props = { + initId: string +} + +export const CategoryDetailPage = ({ initId }: Props) => { + const [id, setId] = useState(initId) + + const { data: categories } = useSuspenseQuery(useCategoryQueries.list()) + const activeCategory = categories.filter((category) => category.id === id)[0] + + const setIdFunc = (id: string) => { + setId(id) + } + + return ( + <> +
} + center={ + + + {activeCategory?.name} + + } + className={'border-b-1 border-gray-50'} + /> + + + + + ) +} diff --git a/apps/web/app/categories/[id]/page.tsx b/apps/web/app/categories/[id]/page.tsx new file mode 100644 index 0000000..64321d2 --- /dev/null +++ b/apps/web/app/categories/[id]/page.tsx @@ -0,0 +1,18 @@ +import { HydrationBoundaryPage } from '@/HydrationBoundaryPage' +import { useCategoryQueries } from '@/_apis/queries/category' +import { CategoryDetailPage } from '@/categories/[id]/CategoryDetailPage' + +const Page = async ({ params }: { params: Promise<{ id: string }> }) => { + const { id } = await params + + return ( + { + await queryClient.prefetchQuery(useCategoryQueries.list()) + }} + > + + + ) +} +export default Page From d19d9d5ce780bb6c488f412fc22830183ef3da6d Mon Sep 17 00:00:00 2001 From: leeleeleeleejun Date: Mon, 18 Aug 2025 17:10:40 +0900 Subject: [PATCH 07/19] =?UTF-8?q?feat:=20categories/[id]/=5Fcomponents/ind?= =?UTF-8?q?ex=20=ED=8C=8C=EC=9D=BC=20=EC=B6=94=EA=B0=80=20-=20=ED=95=98?= =?UTF-8?q?=EC=9C=84=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20export=20?= =?UTF-8?q?=EC=9D=BC=EA=B4=84=20=EA=B4=80=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/app/categories/[id]/CategoryDetailPage.tsx | 5 +++-- apps/web/app/categories/[id]/_components/index.tsx | 2 ++ 2 files changed, 5 insertions(+), 2 deletions(-) create mode 100644 apps/web/app/categories/[id]/_components/index.tsx diff --git a/apps/web/app/categories/[id]/CategoryDetailPage.tsx b/apps/web/app/categories/[id]/CategoryDetailPage.tsx index 4cf89a4..876a224 100644 --- a/apps/web/app/categories/[id]/CategoryDetailPage.tsx +++ b/apps/web/app/categories/[id]/CategoryDetailPage.tsx @@ -8,7 +8,7 @@ import { Text } from '@repo/ui/components/Text' import { Header } from '@repo/ui/components/Header' import { Column, Flex } from '@repo/ui/components/Layout' import { HeaderBackButton } from '@/_components/HeaderBackButton' -import { RowCategories } from './_components/RowCategories/' +import { RowCategories, Places } from './_components' type Props = { initId: string @@ -36,8 +36,9 @@ export const CategoryDetailPage = ({ initId }: Props) => { } className={'border-b-1 border-gray-50'} /> - + + ) diff --git a/apps/web/app/categories/[id]/_components/index.tsx b/apps/web/app/categories/[id]/_components/index.tsx new file mode 100644 index 0000000..02dc702 --- /dev/null +++ b/apps/web/app/categories/[id]/_components/index.tsx @@ -0,0 +1,2 @@ +export * from './Places' +export * from './RowCategories' From caea68e02b81db30e79cc7c58f4287aadd2510a0 Mon Sep 17 00:00:00 2001 From: leeleeleeleejun Date: Mon, 18 Aug 2025 17:15:27 +0900 Subject: [PATCH 08/19] =?UTF-8?q?refactor:=20API=5FPATH=EC=9D=98=20PLACES?= =?UTF-8?q?=20=EA=B4=80=EB=A0=A8=20path=20=EA=B5=AC=EC=A1=B0=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=20-=20RANKING=EC=9D=B4=EB=A6=84=EC=9D=84=20BY=5FRANKI?= =?UTF-8?q?NG=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 --- apps/web/app/_apis/services/place.ts | 2 +- apps/web/app/_constants/path.ts | 5 ++++- apps/web/app/_mocks/handlers/placeHandlers.ts | 4 ++-- 3 files changed, 7 insertions(+), 4 deletions(-) diff --git a/apps/web/app/_apis/services/place.ts b/apps/web/app/_apis/services/place.ts index 3221457..09a49e1 100644 --- a/apps/web/app/_apis/services/place.ts +++ b/apps/web/app/_apis/services/place.ts @@ -9,6 +9,6 @@ import { export const getRankingPlaces = async ( sort: RankingPlaceSort, ): Promise => { - const { data } = await axiosInstance.get(API_PATH.RANKING(sort)) + const { data } = await axiosInstance.get(API_PATH.PLACES.BY_RANKING(sort)) return RankingPlaceSchema.array().parse(data) } diff --git a/apps/web/app/_constants/path.ts b/apps/web/app/_constants/path.ts index 933821b..cdd67c9 100644 --- a/apps/web/app/_constants/path.ts +++ b/apps/web/app/_constants/path.ts @@ -2,7 +2,10 @@ import { RankingPlaceSort } from '@/_apis/schemas/place' export const API_PATH = { CATEGORY: '/categories', - RANKING: (sort: RankingPlaceSort) => `/places/ranking?sort=${sort}`, + PLACES: { + BY_CATEGORY: (id: string) => `/places/?categoryIds=${id}`, + BY_RANKING: (sort: RankingPlaceSort) => `/places/ranking?sort=${sort}`, + }, } export const CLIENT_PATH = { diff --git a/apps/web/app/_mocks/handlers/placeHandlers.ts b/apps/web/app/_mocks/handlers/placeHandlers.ts index 1299b78..eede529 100644 --- a/apps/web/app/_mocks/handlers/placeHandlers.ts +++ b/apps/web/app/_mocks/handlers/placeHandlers.ts @@ -9,10 +9,10 @@ const addBaseUrl = (path: string) => { } export const PlaceHandlers = [ - http.get(addBaseUrl(API_PATH.RANKING('likes')), () => { + http.get(addBaseUrl(API_PATH.PLACES.BY_RANKING('likes')), () => { return HttpResponse.json(RankingPlaces) }), - http.get(addBaseUrl(API_PATH.RANKING('views')), () => { + http.get(addBaseUrl(API_PATH.PLACES.BY_RANKING('views')), () => { return HttpResponse.json(RankingPlaces) }), ] From 94a6305af9915589f84c040aafbbca0a89f43de0 Mon Sep 17 00:00:00 2001 From: leeleeleeleejun Date: Mon, 18 Aug 2025 17:21:30 +0900 Subject: [PATCH 09/19] =?UTF-8?q?refactor:=20RankingPlaces=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=ED=83=80=EC=9E=85=20BasePlaces=EB=A1=9C?= =?UTF-8?q?=20=ED=86=B5=EC=9D=BC=20-=20isLiked,=20likeCount=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/app/_apis/schemas/place.ts | 6 ------ apps/web/app/_apis/services/place.ts | 8 ++++---- apps/web/app/_mocks/data/place.ts | 8 +------- apps/web/app/_mocks/handlers/placeHandlers.ts | 6 +++--- 4 files changed, 8 insertions(+), 20 deletions(-) diff --git a/apps/web/app/_apis/schemas/place.ts b/apps/web/app/_apis/schemas/place.ts index 8615bd4..98914ad 100644 --- a/apps/web/app/_apis/schemas/place.ts +++ b/apps/web/app/_apis/schemas/place.ts @@ -11,10 +11,4 @@ export const BasePlaceSchema = z.object({ export type RankingPlaceSort = 'views' | 'likes' -export const RankingPlaceSchema = BasePlaceSchema.extend({ - isLiked: z.boolean(), - likeCount: z.number().int().nonnegative(), -}) - export type BasePlace = z.infer -export type RankingPlace = z.infer diff --git a/apps/web/app/_apis/services/place.ts b/apps/web/app/_apis/services/place.ts index 09a49e1..46e53aa 100644 --- a/apps/web/app/_apis/services/place.ts +++ b/apps/web/app/_apis/services/place.ts @@ -1,14 +1,14 @@ import axiosInstance from '@/_lib/axiosInstance' import { API_PATH } from '@/_constants/path' import { - type RankingPlace, + type BasePlace, type RankingPlaceSort, - RankingPlaceSchema, + BasePlaceSchema, } from '../schemas/place' export const getRankingPlaces = async ( sort: RankingPlaceSort, -): Promise => { +): Promise => { const { data } = await axiosInstance.get(API_PATH.PLACES.BY_RANKING(sort)) - return RankingPlaceSchema.array().parse(data) + return BasePlaceSchema.array().parse(data) } diff --git a/apps/web/app/_mocks/data/place.ts b/apps/web/app/_mocks/data/place.ts index ca18748..4d056ad 100644 --- a/apps/web/app/_mocks/data/place.ts +++ b/apps/web/app/_mocks/data/place.ts @@ -1,10 +1,8 @@ -export const RankingPlaces = [ +export const Places = [ { placeId: 15, placeName: '우돈탄 다산본점', address: '경기 남양주시 다산중앙로82번길 25', - isLiked: true, - likeCount: 5, categories: [ { id: 3, name: '한식', iconKey: 'korean' }, { id: 14, name: '고기·구이', iconKey: 'meat' }, @@ -18,8 +16,6 @@ export const RankingPlaces = [ placeId: 21, placeName: '김밥천국', address: '서울특별시 강남구 테헤란로 100', - isLiked: false, - likeCount: 5, categories: [ { id: 4, name: '분식', iconKey: 'bunsik' }, { id: 3, name: '한식', iconKey: 'korean' }, @@ -30,8 +26,6 @@ export const RankingPlaces = [ placeId: 2, placeName: '짬뽕집', address: '충남 천안시 서북구 테헤란로 100', - isLiked: false, - likeCount: 5, categories: [{ id: 4, name: '중식', iconKey: 'chinese' }], tags: [{ id: 7, name: '분위기 좋은', iconKey: 'blingBling' }], }, diff --git a/apps/web/app/_mocks/handlers/placeHandlers.ts b/apps/web/app/_mocks/handlers/placeHandlers.ts index eede529..f97b508 100644 --- a/apps/web/app/_mocks/handlers/placeHandlers.ts +++ b/apps/web/app/_mocks/handlers/placeHandlers.ts @@ -1,6 +1,6 @@ import { http, HttpResponse } from 'msw' import { API_PATH } from '@/_constants/path' -import { RankingPlaces } from '../data/place' +import { Places } from '../data/place' const BASE_URL = process.env.NEXT_PUBLIC_API_URL || '' @@ -10,9 +10,9 @@ const addBaseUrl = (path: string) => { export const PlaceHandlers = [ http.get(addBaseUrl(API_PATH.PLACES.BY_RANKING('likes')), () => { - return HttpResponse.json(RankingPlaces) + return HttpResponse.json(Places) }), http.get(addBaseUrl(API_PATH.PLACES.BY_RANKING('views')), () => { - return HttpResponse.json(RankingPlaces) + return HttpResponse.json(Places) }), ] From 38891f526c850e67d9e6b246c49bbd6c2b6c130e Mon Sep 17 00:00:00 2001 From: leeleeleeleejun Date: Mon, 18 Aug 2025 17:31:08 +0900 Subject: [PATCH 10/19] =?UTF-8?q?refactor:=20=EC=9D=BC=EA=B4=80=EC=84=B1?= =?UTF-8?q?=EC=9D=84=20=EC=9C=84=ED=95=B4=20rankingList=20=EC=BF=BC?= =?UTF-8?q?=EB=A6=AC=EB=A5=BC=20byRanking=EC=9C=BC=EB=A1=9C=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 --- apps/web/app/_apis/queries/place.ts | 10 +++++----- apps/web/app/_apis/services/place.ts | 2 +- .../MostLikedPlaces/MostLikedPlaces.tsx | 2 +- .../MostViewsPlaces/MostViewsPlaces.tsx | 2 +- apps/web/app/page.tsx | 4 ++-- 5 files changed, 10 insertions(+), 10 deletions(-) diff --git a/apps/web/app/_apis/queries/place.ts b/apps/web/app/_apis/queries/place.ts index 4553381..0a88e41 100644 --- a/apps/web/app/_apis/queries/place.ts +++ b/apps/web/app/_apis/queries/place.ts @@ -1,17 +1,17 @@ import { queryOptions } from '@tanstack/react-query' import { RankingPlaceSort } from '@/_apis/schemas/place' -import { getRankingPlaces } from '@/_apis/services/place' +import { getPlacesByRanking } from '@/_apis/services/place' export const PlaceQueryKeys = { all: () => ['place'] as const, - rankingList: (sort: RankingPlaceSort) => + byRanking: (sort: RankingPlaceSort) => [...PlaceQueryKeys.all(), 'ranking', sort] as const, } export const usePlaceQueries = { - rankingList: (sort: RankingPlaceSort) => + byRanking: (sort: RankingPlaceSort) => queryOptions({ - queryKey: PlaceQueryKeys.rankingList(sort), - queryFn: () => getRankingPlaces(sort), + queryKey: PlaceQueryKeys.byRanking(sort), + queryFn: () => getPlacesByRanking(sort), }), } diff --git a/apps/web/app/_apis/services/place.ts b/apps/web/app/_apis/services/place.ts index 46e53aa..ad893f2 100644 --- a/apps/web/app/_apis/services/place.ts +++ b/apps/web/app/_apis/services/place.ts @@ -6,7 +6,7 @@ import { BasePlaceSchema, } from '../schemas/place' -export const getRankingPlaces = async ( +export const getPlacesByRanking = async ( sort: RankingPlaceSort, ): Promise => { const { data } = await axiosInstance.get(API_PATH.PLACES.BY_RANKING(sort)) diff --git a/apps/web/app/_components/RankingPlaceList/MostLikedPlaces/MostLikedPlaces.tsx b/apps/web/app/_components/RankingPlaceList/MostLikedPlaces/MostLikedPlaces.tsx index 58221fe..eda8752 100644 --- a/apps/web/app/_components/RankingPlaceList/MostLikedPlaces/MostLikedPlaces.tsx +++ b/apps/web/app/_components/RankingPlaceList/MostLikedPlaces/MostLikedPlaces.tsx @@ -5,7 +5,7 @@ import { usePlaceQueries } from '@/_apis/queries/place' import { RankingPlaceList } from '@/_components/RankingPlaceList' export const MostLikedPlaces = () => { - const { data } = useSuspenseQuery(usePlaceQueries.rankingList('likes')) + const { data } = useSuspenseQuery(usePlaceQueries.byRanking('likes')) return ( diff --git a/apps/web/app/_components/RankingPlaceList/MostViewsPlaces/MostViewsPlaces.tsx b/apps/web/app/_components/RankingPlaceList/MostViewsPlaces/MostViewsPlaces.tsx index 1d964e0..a2c51d2 100644 --- a/apps/web/app/_components/RankingPlaceList/MostViewsPlaces/MostViewsPlaces.tsx +++ b/apps/web/app/_components/RankingPlaceList/MostViewsPlaces/MostViewsPlaces.tsx @@ -5,7 +5,7 @@ import { usePlaceQueries } from '@/_apis/queries/place' import { RankingPlaceList } from '@/_components/RankingPlaceList' export const MostViewsPlaces = () => { - const { data } = useSuspenseQuery(usePlaceQueries.rankingList('views')) + const { data } = useSuspenseQuery(usePlaceQueries.byRanking('views')) return } diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx index 5b9516e..43ff04e 100644 --- a/apps/web/app/page.tsx +++ b/apps/web/app/page.tsx @@ -19,8 +19,8 @@ export default function Page() { { await queryClient.prefetchQuery(useCategoryQueries.list()) - await queryClient.prefetchQuery(usePlaceQueries.rankingList('likes')) - await queryClient.prefetchQuery(usePlaceQueries.rankingList('views')) + await queryClient.prefetchQuery(usePlaceQueries.byRanking('likes')) + await queryClient.prefetchQuery(usePlaceQueries.byRanking('views')) }} > From 9283547e2352b377ca289f913bb029fe8db86a6d Mon Sep 17 00:00:00 2001 From: leeleeleeleejun Date: Mon, 18 Aug 2025 17:39:19 +0900 Subject: [PATCH 11/19] =?UTF-8?q?feat:=20=EC=B9=B4=ED=85=8C=EA=B3=A0?= =?UTF-8?q?=EB=A6=AC=EB=B3=84=20=EC=9E=A5=EC=86=8C=20=EC=A1=B0=ED=9A=8C=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EB=B0=8F=20=EA=B4=80=EB=A0=A8=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80=20-=20api=20?= =?UTF-8?q?=EB=B0=8F=20=EA=B4=80=EB=A0=A8=20query=20=EB=A1=9C=EC=A7=81=20?= =?UTF-8?q?=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/app/_apis/queries/place.ts | 10 +++++++++- apps/web/app/_apis/services/place.ts | 5 +++++ apps/web/app/_constants/path.ts | 2 +- apps/web/app/_mocks/handlers/placeHandlers.ts | 3 +++ .../[id]/_components/Places/Places.tsx | 19 +++++++++++++++++++ 5 files changed, 37 insertions(+), 2 deletions(-) create mode 100644 apps/web/app/categories/[id]/_components/Places/Places.tsx diff --git a/apps/web/app/_apis/queries/place.ts b/apps/web/app/_apis/queries/place.ts index 0a88e41..66f634d 100644 --- a/apps/web/app/_apis/queries/place.ts +++ b/apps/web/app/_apis/queries/place.ts @@ -1,11 +1,13 @@ import { queryOptions } from '@tanstack/react-query' import { RankingPlaceSort } from '@/_apis/schemas/place' -import { getPlacesByRanking } from '@/_apis/services/place' +import { getPlacesByCategory, getPlacesByRanking } from '@/_apis/services/place' export const PlaceQueryKeys = { all: () => ['place'] as const, byRanking: (sort: RankingPlaceSort) => [...PlaceQueryKeys.all(), 'ranking', sort] as const, + byCategory: (id: string) => + [...PlaceQueryKeys.all(), 'category', id] as const, } export const usePlaceQueries = { @@ -14,4 +16,10 @@ export const usePlaceQueries = { queryKey: PlaceQueryKeys.byRanking(sort), queryFn: () => getPlacesByRanking(sort), }), + + byCategory: (id: string) => + queryOptions({ + queryKey: PlaceQueryKeys.byCategory(id), + queryFn: () => getPlacesByCategory(id), + }), } diff --git a/apps/web/app/_apis/services/place.ts b/apps/web/app/_apis/services/place.ts index ad893f2..86c7c07 100644 --- a/apps/web/app/_apis/services/place.ts +++ b/apps/web/app/_apis/services/place.ts @@ -12,3 +12,8 @@ export const getPlacesByRanking = async ( const { data } = await axiosInstance.get(API_PATH.PLACES.BY_RANKING(sort)) return BasePlaceSchema.array().parse(data) } + +export const getPlacesByCategory = async (id: string): Promise => { + const { data } = await axiosInstance.get(API_PATH.PLACES.BY_CATEGORY(id)) + return BasePlaceSchema.array().parse(data) +} diff --git a/apps/web/app/_constants/path.ts b/apps/web/app/_constants/path.ts index cdd67c9..a4f983f 100644 --- a/apps/web/app/_constants/path.ts +++ b/apps/web/app/_constants/path.ts @@ -3,7 +3,7 @@ import { RankingPlaceSort } from '@/_apis/schemas/place' export const API_PATH = { CATEGORY: '/categories', PLACES: { - BY_CATEGORY: (id: string) => `/places/?categoryIds=${id}`, + BY_CATEGORY: (id: string) => `/places/?categoryId=${id}`, BY_RANKING: (sort: RankingPlaceSort) => `/places/ranking?sort=${sort}`, }, } diff --git a/apps/web/app/_mocks/handlers/placeHandlers.ts b/apps/web/app/_mocks/handlers/placeHandlers.ts index f97b508..3d073fa 100644 --- a/apps/web/app/_mocks/handlers/placeHandlers.ts +++ b/apps/web/app/_mocks/handlers/placeHandlers.ts @@ -15,4 +15,7 @@ export const PlaceHandlers = [ http.get(addBaseUrl(API_PATH.PLACES.BY_RANKING('views')), () => { return HttpResponse.json(Places) }), + http.get(addBaseUrl(API_PATH.PLACES.BY_CATEGORY('1')), () => { + return HttpResponse.json(Places) + }), ] diff --git a/apps/web/app/categories/[id]/_components/Places/Places.tsx b/apps/web/app/categories/[id]/_components/Places/Places.tsx new file mode 100644 index 0000000..22c4dd4 --- /dev/null +++ b/apps/web/app/categories/[id]/_components/Places/Places.tsx @@ -0,0 +1,19 @@ +import { useSuspenseQuery } from '@tanstack/react-query' +import { usePlaceQueries } from '@/_apis/queries/place' +import { PlaceListItem } from '@/_components/PlaceListItem' + +export const Places = ({ id }: { id: string }) => { + const { data: places } = useSuspenseQuery(usePlaceQueries.byCategory(id)) + + return ( +
    + {places.map((place, index) => ( + + ))} +
+ ) +} From b91df603d539f5e9ea549723a8a90ec378f7ffa4 Mon Sep 17 00:00:00 2001 From: leeleeleeleejun Date: Mon, 18 Aug 2025 17:41:16 +0900 Subject: [PATCH 12/19] =?UTF-8?q?refactor:=20=EC=9D=BC=EA=B4=80=EC=84=B1?= =?UTF-8?q?=EC=9D=84=20=EC=9C=84=ED=95=B4=20MostLikedPlaces=EB=A5=BC=20Mos?= =?UTF-8?q?tLikesPlaces=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 --- .../_components/RankingPlaceList/MostLikedPlaces/index.tsx | 1 - .../MostLikesPlaces.tsx} | 2 +- .../_components/RankingPlaceList/MostLikesPlaces/index.tsx | 1 + apps/web/app/_components/RankingPlaceList/index.tsx | 2 +- apps/web/app/page.tsx | 4 ++-- 5 files changed, 5 insertions(+), 5 deletions(-) delete mode 100644 apps/web/app/_components/RankingPlaceList/MostLikedPlaces/index.tsx rename apps/web/app/_components/RankingPlaceList/{MostLikedPlaces/MostLikedPlaces.tsx => MostLikesPlaces/MostLikesPlaces.tsx} (90%) create mode 100644 apps/web/app/_components/RankingPlaceList/MostLikesPlaces/index.tsx diff --git a/apps/web/app/_components/RankingPlaceList/MostLikedPlaces/index.tsx b/apps/web/app/_components/RankingPlaceList/MostLikedPlaces/index.tsx deleted file mode 100644 index 7dd8614..0000000 --- a/apps/web/app/_components/RankingPlaceList/MostLikedPlaces/index.tsx +++ /dev/null @@ -1 +0,0 @@ -export { MostLikedPlaces } from './MostLikedPlaces' diff --git a/apps/web/app/_components/RankingPlaceList/MostLikedPlaces/MostLikedPlaces.tsx b/apps/web/app/_components/RankingPlaceList/MostLikesPlaces/MostLikesPlaces.tsx similarity index 90% rename from apps/web/app/_components/RankingPlaceList/MostLikedPlaces/MostLikedPlaces.tsx rename to apps/web/app/_components/RankingPlaceList/MostLikesPlaces/MostLikesPlaces.tsx index eda8752..8efeb80 100644 --- a/apps/web/app/_components/RankingPlaceList/MostLikedPlaces/MostLikedPlaces.tsx +++ b/apps/web/app/_components/RankingPlaceList/MostLikesPlaces/MostLikesPlaces.tsx @@ -4,7 +4,7 @@ import { useSuspenseQuery } from '@tanstack/react-query' import { usePlaceQueries } from '@/_apis/queries/place' import { RankingPlaceList } from '@/_components/RankingPlaceList' -export const MostLikedPlaces = () => { +export const MostLikesPlaces = () => { const { data } = useSuspenseQuery(usePlaceQueries.byRanking('likes')) return ( diff --git a/apps/web/app/_components/RankingPlaceList/MostLikesPlaces/index.tsx b/apps/web/app/_components/RankingPlaceList/MostLikesPlaces/index.tsx new file mode 100644 index 0000000..e57fea4 --- /dev/null +++ b/apps/web/app/_components/RankingPlaceList/MostLikesPlaces/index.tsx @@ -0,0 +1 @@ +export { MostLikesPlaces } from './MostLikesPlaces' diff --git a/apps/web/app/_components/RankingPlaceList/index.tsx b/apps/web/app/_components/RankingPlaceList/index.tsx index 2205676..fa5f639 100644 --- a/apps/web/app/_components/RankingPlaceList/index.tsx +++ b/apps/web/app/_components/RankingPlaceList/index.tsx @@ -1,3 +1,3 @@ export { RankingPlaceList } from './RankingPlaceList' export { MostViewsPlaces } from './MostViewsPlaces' -export { MostLikedPlaces } from './MostLikedPlaces' +export { MostLikesPlaces } from './MostLikesPlaces' diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx index 43ff04e..9f0f1f8 100644 --- a/apps/web/app/page.tsx +++ b/apps/web/app/page.tsx @@ -9,7 +9,7 @@ import { SearchBar } from '@repo/ui/components/SearchBar' import { Column } from '@repo/ui/components/Layout' import { Banner } from '@/_components/Banner' import { - MostLikedPlaces, + MostLikesPlaces, MostViewsPlaces, } from '@/_components/RankingPlaceList' import { Divider } from '@repo/ui/components/Divider' @@ -28,7 +28,7 @@ export default function Page() { - + From 2eb50eb852dee89c5642ed57d634f84e30f3339b Mon Sep 17 00:00:00 2001 From: leeleeleeleejun Date: Mon, 18 Aug 2025 17:44:19 +0900 Subject: [PATCH 13/19] =?UTF-8?q?refactor:=20CategoryDetailPage=EC=97=90?= =?UTF-8?q?=EC=84=9C=20activeCategory=20=EC=9D=B4=EB=A6=84=EC=97=90=20?= =?UTF-8?q?=ED=8C=A8=EB=94=A9=20=EC=B6=94=EA=B0=80=20-=20Text=EA=B0=80=20?= =?UTF-8?q?=EC=A4=91=EC=95=99=EC=97=90=20=EC=9C=84=EC=B9=98=ED=95=98?= =?UTF-8?q?=EB=8F=84=EB=A1=9D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/app/categories/[id]/CategoryDetailPage.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/apps/web/app/categories/[id]/CategoryDetailPage.tsx b/apps/web/app/categories/[id]/CategoryDetailPage.tsx index 876a224..73f5866 100644 --- a/apps/web/app/categories/[id]/CategoryDetailPage.tsx +++ b/apps/web/app/categories/[id]/CategoryDetailPage.tsx @@ -31,7 +31,9 @@ export const CategoryDetailPage = ({ initId }: Props) => { center={ - {activeCategory?.name} + + {activeCategory?.name} + } className={'border-b-1 border-gray-50'} From ea337a7f898aea4795b19ef02dd3bd6d35a851a3 Mon Sep 17 00:00:00 2001 From: leeleeleeleejun Date: Mon, 18 Aug 2025 17:48:21 +0900 Subject: [PATCH 14/19] =?UTF-8?q?refactor:=20RowCategories=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=20pointer-events-none=20?= =?UTF-8?q?=ED=81=B4=EB=9E=98=EC=8A=A4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../categories/[id]/_components/RowCategories/RowCategories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/web/app/categories/[id]/_components/RowCategories/RowCategories.tsx b/apps/web/app/categories/[id]/_components/RowCategories/RowCategories.tsx index 9eef8fc..884a103 100644 --- a/apps/web/app/categories/[id]/_components/RowCategories/RowCategories.tsx +++ b/apps/web/app/categories/[id]/_components/RowCategories/RowCategories.tsx @@ -36,6 +36,7 @@ const ScrollHintGradient = () => ( 'right-[-1px] top-0', 'h-full w-10', 'z-10', + 'pointer-events-none', 'bg-gradient-to-l from-white to-transparent', )} /> From d1467df43c588f7db35a7212621ebba050d9d75a Mon Sep 17 00:00:00 2001 From: leeleeleeleejun Date: Mon, 18 Aug 2025 17:52:08 +0900 Subject: [PATCH 15/19] =?UTF-8?q?feat:=20prefetchQuery=EC=97=90=20usePlace?= =?UTF-8?q?Queries.byCategory=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/app/categories/[id]/page.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/web/app/categories/[id]/page.tsx b/apps/web/app/categories/[id]/page.tsx index 64321d2..fa707ac 100644 --- a/apps/web/app/categories/[id]/page.tsx +++ b/apps/web/app/categories/[id]/page.tsx @@ -1,6 +1,7 @@ import { HydrationBoundaryPage } from '@/HydrationBoundaryPage' import { useCategoryQueries } from '@/_apis/queries/category' import { CategoryDetailPage } from '@/categories/[id]/CategoryDetailPage' +import { usePlaceQueries } from '@/_apis/queries/place' const Page = async ({ params }: { params: Promise<{ id: string }> }) => { const { id } = await params @@ -9,6 +10,7 @@ const Page = async ({ params }: { params: Promise<{ id: string }> }) => { { await queryClient.prefetchQuery(useCategoryQueries.list()) + await queryClient.prefetchQuery(usePlaceQueries.byCategory(id)) }} > From c4c19a2c997a5909557834a30e6bbc4705d72245 Mon Sep 17 00:00:00 2001 From: leeleeleeleejun Date: Mon, 18 Aug 2025 18:26:44 +0900 Subject: [PATCH 16/19] =?UTF-8?q?feat:=20HydrationBoundaryPage=EC=9D=98=20?= =?UTF-8?q?jsDoc=20example=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/app/HydrationBoundaryPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/app/HydrationBoundaryPage.tsx b/apps/web/app/HydrationBoundaryPage.tsx index 335af0f..6926a62 100644 --- a/apps/web/app/HydrationBoundaryPage.tsx +++ b/apps/web/app/HydrationBoundaryPage.tsx @@ -19,7 +19,7 @@ import { ReactNode } from 'react' * { * await queryClient.prefetchQuery(useCategoryQueries.list()) - * await queryClient.prefetchQuery(usePlaceQueries.rankingList('likes')) + * await queryClient.prefetchQuery(usePlaceQueries.byRanking('likes')) * }} * > * From d256334020a59a310942cc5ade0575e52018524a Mon Sep 17 00:00:00 2001 From: leeleeleeleejun Date: Mon, 18 Aug 2025 18:28:13 +0900 Subject: [PATCH 17/19] fix: remove slash to API_PATH.BY_CATEGORY --- apps/web/app/_constants/path.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/app/_constants/path.ts b/apps/web/app/_constants/path.ts index a4f983f..15cc004 100644 --- a/apps/web/app/_constants/path.ts +++ b/apps/web/app/_constants/path.ts @@ -3,7 +3,7 @@ import { RankingPlaceSort } from '@/_apis/schemas/place' export const API_PATH = { CATEGORY: '/categories', PLACES: { - BY_CATEGORY: (id: string) => `/places/?categoryId=${id}`, + BY_CATEGORY: (id: string) => `/places?categoryId=${id}`, BY_RANKING: (sort: RankingPlaceSort) => `/places/ranking?sort=${sort}`, }, } From 8b7abc50c139bc3b79f21e9b92a28d323c3aa73b Mon Sep 17 00:00:00 2001 From: leeleeleeleejun Date: Mon, 18 Aug 2025 18:29:46 +0900 Subject: [PATCH 18/19] feat: export Places component from index.tsx --- apps/web/app/categories/[id]/_components/Places/index.tsx | 1 + 1 file changed, 1 insertion(+) create mode 100644 apps/web/app/categories/[id]/_components/Places/index.tsx diff --git a/apps/web/app/categories/[id]/_components/Places/index.tsx b/apps/web/app/categories/[id]/_components/Places/index.tsx new file mode 100644 index 0000000..d7cb449 --- /dev/null +++ b/apps/web/app/categories/[id]/_components/Places/index.tsx @@ -0,0 +1 @@ +export { Places } from './Places' From 4b96f5ba12cddd2f1217243edb4b5047c590b2de Mon Sep 17 00:00:00 2001 From: leeleeleeleejun Date: Mon, 18 Aug 2025 18:32:37 +0900 Subject: [PATCH 19/19] =?UTF-8?q?fix:=20activeCategory=20=EC=A1=B0?= =?UTF-8?q?=ED=9A=8C=20=EC=8B=9C=20filter=EC=97=90=EC=84=9C=20find?= =?UTF-8?q?=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 --- apps/web/app/categories/[id]/CategoryDetailPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/app/categories/[id]/CategoryDetailPage.tsx b/apps/web/app/categories/[id]/CategoryDetailPage.tsx index 73f5866..c087e51 100644 --- a/apps/web/app/categories/[id]/CategoryDetailPage.tsx +++ b/apps/web/app/categories/[id]/CategoryDetailPage.tsx @@ -18,7 +18,7 @@ export const CategoryDetailPage = ({ initId }: Props) => { const [id, setId] = useState(initId) const { data: categories } = useSuspenseQuery(useCategoryQueries.list()) - const activeCategory = categories.filter((category) => category.id === id)[0] + const activeCategory = categories.find((category) => category.id === id) const setIdFunc = (id: string) => { setId(id)