Feat/#15 카테고리 상세페이지 화면 UI 구현 및 API 관련 query 로직 등 구현

apps/web/app/HydrationBoundaryPage.tsx

@@ -19,7 +19,7 @@ import { ReactNode } from 'react'
  * <HydrationBoundaryPage
  *   prefetch={async (queryClient) => {
  *     await queryClient.prefetchQuery(useCategoryQueries.list())
- *     await queryClient.prefetchQuery(usePlaceQueries.rankingList('likes'))
+ *     await queryClient.prefetchQuery(usePlaceQueries.byRanking('likes'))
  *   }}
  * >
  *   <Categories />

apps/web/app/_apis/queries/place.ts

@@ -1,17 +1,25 @@
 import { queryOptions } from '@tanstack/react-query'
 import { RankingPlaceSort } from '@/_apis/schemas/place'
-import { getRankingPlaces } from '@/_apis/services/place'
+import { getPlacesByCategory, getPlacesByRanking } from '@/_apis/services/place'
 
 export const PlaceQueryKeys = {
   all: () => ['place'] as const,
-  rankingList: (sort: RankingPlaceSort) =>
+  byRanking: (sort: RankingPlaceSort) =>
     [...PlaceQueryKeys.all(), 'ranking', sort] as const,
+  byCategory: (id: string) =>
+    [...PlaceQueryKeys.all(), 'category', id] 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),
+    }),
+
+  byCategory: (id: string) =>
+    queryOptions({
+      queryKey: PlaceQueryKeys.byCategory(id),
+      queryFn: () => getPlacesByCategory(id),
     }),
 }

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<typeof BasePlaceSchema>
-export type RankingPlace = z.infer<typeof RankingPlaceSchema>

apps/web/app/_apis/services/place.ts

@@ -1,14 +1,19 @@
 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 (
+export const getPlacesByRanking = async (
   sort: RankingPlaceSort,
-): Promise<RankingPlace[]> => {
-  const { data } = await axiosInstance.get(API_PATH.RANKING(sort))
-  return RankingPlaceSchema.array().parse(data)
+): Promise<BasePlace[]> => {
+  const { data } = await axiosInstance.get(API_PATH.PLACES.BY_RANKING(sort))
+  return BasePlaceSchema.array().parse(data)
+}
+
+export const getPlacesByCategory = async (id: string): Promise<BasePlace[]> => {
+  const { data } = await axiosInstance.get(API_PATH.PLACES.BY_CATEGORY(id))
+  return BasePlaceSchema.array().parse(data)
 }

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 (
+    <button onClick={back}>
+      <Icon type={'arrowLeft'} size={24} />
+    </button>
+  )
+}

apps/web/app/_components/HeaderBackButton/index.tsx

@@ -0,0 +1 @@
+export { HeaderBackButton } from './HeaderBackButton'

apps/web/app/_components/RankingPlaceList/MostLikedPlaces/MostLikedPlaces.tsx → apps/web/app/_components/RankingPlaceList/MostLikesPlaces/MostLikesPlaces.tsx

@@ -4,8 +4,8 @@ import { useSuspenseQuery } from '@tanstack/react-query'
 import { usePlaceQueries } from '@/_apis/queries/place'
 import { RankingPlaceList } from '@/_components/RankingPlaceList'
 
-export const MostLikedPlaces = () => {
-  const { data } = useSuspenseQuery(usePlaceQueries.rankingList('likes'))
+export const MostLikesPlaces = () => {
+  const { data } = useSuspenseQuery(usePlaceQueries.byRanking('likes'))
 
   return (
     <RankingPlaceList title={'찜많은 맛집'} icon={'fireHeart'} places={data} />

apps/web/app/_components/RankingPlaceList/MostLikesPlaces/index.tsx

@@ -0,0 +1 @@
+export { MostLikesPlaces } from './MostLikesPlaces'

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 <RankingPlaceList title={'오늘의 맛집'} icon={'fire'} places={data} />
 }

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'

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?categoryId=${id}`,
+    BY_RANKING: (sort: RankingPlaceSort) => `/places/ranking?sort=${sort}`,
+  },
 }
 
 export const CLIENT_PATH = {

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' }],
   },

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 || ''
 
@@ -9,10 +9,13 @@ const addBaseUrl = (path: string) => {
 }
 
 export const PlaceHandlers = [
-  http.get(addBaseUrl(API_PATH.RANKING('likes')), () => {
-    return HttpResponse.json(RankingPlaces)
+  http.get(addBaseUrl(API_PATH.PLACES.BY_RANKING('likes')), () => {
+    return HttpResponse.json(Places)
   }),
-  http.get(addBaseUrl(API_PATH.RANKING('views')), () => {
-    return HttpResponse.json(RankingPlaces)
+  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)
   }),
 ]

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 (
+    <motion.div
+      initial={{ x: 10, opacity: 0 }}
+      animate={{ x: 0, opacity: 1 }}
+      exit={{ x: -10, opacity: 0 }}
+      transition={{
+        type: 'tween',
+        ease: 'easeOut',
+        duration: 0.3,
+      }}
+    >
+      {children}
+    </motion.div>
+  )
+}

apps/web/app/categories/[id]/CategoryDetailPage.tsx

@@ -0,0 +1,47 @@
+'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, Places } from './_components'
+
+type Props = {
+  initId: string
+}
+
+export const CategoryDetailPage = ({ initId }: Props) => {
+  const [id, setId] = useState(initId)
+
+  const { data: categories } = useSuspenseQuery(useCategoryQueries.list())
+  const activeCategory = categories.find((category) => category.id === id)
+
+  const setIdFunc = (id: string) => {
+    setId(id)
+  }
+
+  return (
+    <>
+      <Header
+        left={<HeaderBackButton />}
+        center={
+          <Flex className={'gap-1.5'}>
+            <Icon type={activeCategory?.iconKey || 'logo'} />
+            <Text variant={'heading2'} className={'pr-6'}>
+              {activeCategory?.name}
+            </Text>
+          </Flex>
+        }
+        className={'border-b-1 border-gray-50'}
+      />
+      <Column className={'gap-2.5 px-5 py-2.5'}>
+        <RowCategories id={id} categories={categories} setIdFunc={setIdFunc} />
+        <Places id={id} />
+      </Column>
+    </>
+  )
+}

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 (
+    <ul className={'px-3'}>
+      {places.map((place, index) => (
+        <PlaceListItem
+          key={place.placeId}
+          {...place}
+          showBorder={index !== places.length - 1}
+        />
+      ))}
+    </ul>
+  )
+}

apps/web/app/categories/[id]/_components/Places/index.tsx

@@ -0,0 +1 @@
+export { Places } from './Places'

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 (
+    <Column
+      as={'button'}
+      onClick={onClick}
+      className={'w-10 items-center gap-1'}
+    >
+      <Icon type={iconKey} size={26} />
+      <Text
+        fontSize={'xs'}
+        fontWeight={isActive ? 'semibold' : 'light'}
+        className={'text-nowrap'}
+      >
+        {name}
+      </Text>
+      <hr
+        className={cn('border-main w-full rounded-full border-2', {
+          invisible: !isActive,
+        })}
+      />
+    </Column>
+  )
+}

apps/web/app/categories/[id]/_components/RowCategories/RowCategories.tsx

@@ -0,0 +1,43 @@
+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 (
+    <div className={'relative'}>
+      <Flex className={'scrollbar-hide gap-4 overflow-x-auto'}>
+        {categories.map((category) => (
+          <CategoryItem
+            key={category.id}
+            category={category}
+            isActive={id === category.id}
+            onClick={() => {
+              setIdFunc(category.id)
+            }}
+          />
+        ))}
+      </Flex>
+      <ScrollHintGradient />
+    </div>
+  )
+}
+
+const ScrollHintGradient = () => (
+  <div
+    className={cn(
+      'absolute',
+      'right-[-1px] top-0',
+      'h-full w-10',
+      'z-10',
+      'pointer-events-none',
+      'bg-gradient-to-l from-white to-transparent',
+    )}
+  />
+)

apps/web/app/categories/[id]/_components/RowCategories/index.tsx

@@ -0,0 +1 @@
+export { RowCategories } from './RowCategories'

apps/web/app/categories/[id]/_components/index.tsx

@@ -0,0 +1,2 @@
+export * from './Places'
+export * from './RowCategories'

apps/web/app/categories/[id]/page.tsx

@@ -0,0 +1,20 @@
+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
+
+  return (
+    <HydrationBoundaryPage
+      prefetch={async (queryClient) => {
+        await queryClient.prefetchQuery(useCategoryQueries.list())
+        await queryClient.prefetchQuery(usePlaceQueries.byCategory(id))
+      }}
+    >
+      <CategoryDetailPage initId={id} />
+    </HydrationBoundaryPage>
+  )
+}
+export default Page

apps/web/app/categories/template.tsx

@@ -0,0 +1,2 @@
+import Template from '@/_template/template'
+export default Template