Feat/#12 공통 바텀 네비게이션 및 메인 화면 ui 구현

apps/web/app/HydrationBoundaryPage.tsx

@@ -6,49 +6,35 @@ import {
 import { ReactNode } from 'react'
 
 /**
- * React Query 쿼리 구성 타입
+ * 서버 컴포넌트에서 React Query 쿼리를 미리 요청(prefetch)하고,
+ * 클라이언트로 전달하여 초기 데이터를 사용할 수 있도록 해주는 컴포넌트입니다.
  *
- * @property queryKey - React Query에서 사용할 쿼리 키
- * @property queryFn  - 데이터를 가져오는 비동기 함수
- */
-type QueryConfig = {
-  queryKey: string[]
-  queryFn: () => Promise<unknown>
-}
-
-/**
- * 서버 컴포넌트에서 React Query 쿼리를 미리 요청(prefetch)한 뒤,
- * dehydrate 상태를 클라이언트에 전달하기 위한 컴포넌트.
+ * @param children - HydrationBoundary로 감쌀 React 노드
+ * @param prefetch - 서버에서 실행할 prefetch 함수. QueryClient를 받아서 필요한 쿼리를 모두 prefetch하도록 구현합니다.
+ *
+ * @returns HydrationBoundary로 감싼 children
  *
  * @example
  * ```tsx
  * <HydrationBoundaryPage
- *   queries={[
- *     { queryKey: ['user'], queryFn: fetchUser },
- *     { queryKey: ['posts'], queryFn: fetchPosts },
- *   ]}
+ *   prefetch={async (queryClient) => {
+ *     await queryClient.prefetchQuery(useCategoryQueries.list())
+ *     await queryClient.prefetchQuery(usePlaceQueries.rankingList('likes'))
+ *   }}
  * >
- *   <MyPage />
+ *   <Categories />
  * </HydrationBoundaryPage>
  * ```
- *
- * @param queries - 사전 요청할 쿼리들의 배열
- * @param children - HydrationBoundary로 감쌀 React 노드
  */
 export const HydrationBoundaryPage = async ({
-  queries,
   children,
+  prefetch,
 }: {
-  queries: QueryConfig[]
   children: ReactNode
+  prefetch: (queryClient: QueryClient) => Promise<void>
 }) => {
   const queryClient = new QueryClient()
-
-  await Promise.all(
-    queries.map(({ queryKey, queryFn }) =>
-      queryClient.prefetchQuery({ queryKey, queryFn }),
-    ),
-  )
+  await prefetch(queryClient)
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>

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

@@ -0,0 +1,17 @@
+import { queryOptions } from '@tanstack/react-query'
+import { getCategories } from '@/_apis/services/category'
+
+export const CategoryQueryKeys = {
+  all: () => ['category'] as const,
+  list: () => [...CategoryQueryKeys.all(), 'list'] as const,
+  items: (categoryId: string) =>
+    [...CategoryQueryKeys.all(), 'items', categoryId] as const,
+}
+
+export const useCategoryQueries = {
+  list: () =>
+    queryOptions({
+      queryKey: CategoryQueryKeys.list(),
+      queryFn: getCategories,
+    }),
+}

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

@@ -0,0 +1,17 @@
+import { queryOptions } from '@tanstack/react-query'
+import { RankingPlaceSort } from '@/_apis/schemas/place'
+import { getRankingPlaces } from '@/_apis/services/place'
+
+export const PlaceQueryKeys = {
+  all: () => ['place'] as const,
+  rankingList: (sort: RankingPlaceSort) =>
+    [...PlaceQueryKeys.all(), 'ranking', sort] as const,
+}
+
+export const usePlaceQueries = {
+  rankingList: (sort: RankingPlaceSort) =>
+    queryOptions({
+      queryKey: PlaceQueryKeys.rankingList(sort),
+      queryFn: () => getRankingPlaces(sort),
+    }),
+}

apps/web/app/_apis/schemas/category.ts

@@ -0,0 +1,10 @@
+import { z } from 'zod'
+import { IconList } from '@repo/ui/components/Icon/IconMap'
+
+export const CategorySchema = z.object({
+  id: z.number().transform(String),
+  name: z.string(),
+  iconKey: z.enum(IconList),
+})
+
+export type Category = z.infer<typeof CategorySchema>

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

@@ -0,0 +1,20 @@
+import { z } from 'zod'
+import { CategorySchema } from '@/_apis/schemas/category'
+
+export const BasePlaceSchema = z.object({
+  placeId: z.number().transform(String),
+  placeName: z.string(),
+  address: z.string(),
+  categories: z.array(CategorySchema),
+  tags: z.array(CategorySchema),
+})
+
+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/category.ts

@@ -0,0 +1,8 @@
+import axiosInstance from '@/_lib/axiosInstance'
+import { API_PATH } from '@/_constants/path'
+import { CategorySchema, Category } from '../schemas/category'
+
+export const getCategories = async (): Promise<Category[]> => {
+  const { data } = await axiosInstance.get(API_PATH.CATEGORY)
+  return CategorySchema.array().parse(data)
+}

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

@@ -0,0 +1,14 @@
+import axiosInstance from '@/_lib/axiosInstance'
+import { API_PATH } from '@/_constants/path'
+import {
+  type RankingPlace,
+  type RankingPlaceSort,
+  RankingPlaceSchema,
+} from '../schemas/place'
+
+export const getRankingPlaces = async (
+  sort: RankingPlaceSort,
+): Promise<RankingPlace[]> => {
+  const { data } = await axiosInstance.get(API_PATH.RANKING(sort))
+  return RankingPlaceSchema.array().parse(data)
+}

apps/web/app/_components/Banner/Banner.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import 'keen-slider/keen-slider.min.css'
+import { useKeenSlider } from 'keen-slider/react'
+
+type Props = {
+  contents: React.ReactNode[]
+  minHeight?: number
+}
+
+/**
+ * Banner 컴포넌트
+ *
+ * - 여러 콘텐츠를 순차적으로 보여주는 슬라이더 배너입니다.
+ * - `keen-slider`를 기반으로 자동 재생(loop) 기능을 제공합니다.
+ * - 마우스를 올리면 자동 재생이 일시 정지되고, 마우스를 치우면 다시 재생됩니다.
+ *
+ * @param contents 렌더링할 React 노드 배열 (각각의 배너 콘텐츠)
+ * @param minHeight 배너의 최소 높이(px). 기본값은 150입니다.
+ *
+ * @example
+ * ```tsx
+ * <Banner
+ *   contents={[
+ *     <div>배너 1</div>,
+ *     <div>배너 2</div>,
+ *     <div>배너 3</div>,
+ *   ]}
+ *   minHeight={200}
+ * />
+ * ```
+ */
+export const Banner = ({ contents, minHeight = 150 }: Props) => {
+  const [sliderRef] = useKeenSlider<HTMLDivElement>(
+    {
+      loop: true,
+    },
+    [
+      (slider) => {
+        let timeout: ReturnType<typeof setTimeout>
+        let mouseOver = false
+        function clearNextTimeout() {
+          clearTimeout(timeout)
+        }
+        function nextTimeout() {
+          clearTimeout(timeout)
+          if (mouseOver) return
+          timeout = setTimeout(() => {
+            slider.next()
+          }, 2000)
+        }
+        slider.on('created', () => {
+          slider.container.addEventListener('mouseover', () => {
+            mouseOver = true
+            clearNextTimeout()
+          })
+          slider.container.addEventListener('mouseout', () => {
+            mouseOver = false
+            nextTimeout()
+          })
+          nextTimeout()
+        })
+        slider.on('dragStarted', clearNextTimeout)
+        slider.on('animationEnded', nextTimeout)
+        slider.on('updated', nextTimeout)
+      },
+    ],
+  )
+
+  return (
+    <div ref={sliderRef} className={'keen-slider'} style={{ minHeight }}>
+      {contents.map((content, index) => (
+        <div key={index} className='keen-slider__slide bg-gray-100'>
+          {content}
+        </div>
+      ))}
+    </div>
+  )
+}

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

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

apps/web/app/_components/BottomNavigation/BottomNavigation.tsx

@@ -0,0 +1,30 @@
+import { TabItem, type TabItemProps } from './TabItem'
+import { cn } from '@repo/ui/utils/cn'
+import { JustifyBetween } from '@repo/ui/components/Layout'
+
+const tabs: TabItemProps[] = [
+  { path: 'MAIN', label: '메인', icon: 'home' },
+  { path: 'MAP', label: '주변 맛집', icon: 'map' },
+  { path: 'PLACE_NEW', label: '', icon: 'circlePlus', iconSize: 50 },
+  { path: 'LIKES', label: '찜', icon: 'navHeart' },
+  { path: 'PROFILE', label: '내 정보', icon: 'navUser' },
+]
+
+export const BottomNavigation = () => {
+  return (
+    <JustifyBetween
+      as={'nav'}
+      className={cn(
+        'border-t-1',
+        'border-gray-50',
+        'h-15',
+        'mt-auto',
+        'px-5 py-2.5',
+      )}
+    >
+      {tabs.map((tab: TabItemProps) => (
+        <TabItem key={tab.path} {...tab} />
+      ))}
+    </JustifyBetween>
+  )
+}

apps/web/app/_components/BottomNavigation/TabItem.tsx

@@ -0,0 +1,42 @@
+'use client'
+
+import Link from 'next/link'
+import { usePathname } from 'next/navigation'
+import { CLIENT_PATH } from '@/_constants/path'
+import { cn } from '@repo/ui/utils/cn'
+import { Text } from '@repo/ui/components/Text'
+import { Icon, IconType } from '@repo/ui/components/Icon'
+
+export type TabItemProps = {
+  path: keyof Pick<
+    typeof CLIENT_PATH,
+    'MAIN' | 'MAP' | 'LIKES' | 'PROFILE' | 'PLACE_NEW'
+  >
+  icon: IconType
+  iconSize?: number
+  label?: string
+}
+
+export const TabItem = ({ path, label, icon, iconSize = 26 }: TabItemProps) => {
+  const pathname = usePathname()
+  const href = CLIENT_PATH[path]
+  const active = pathname === href
+
+  return (
+    <Link href={href} className={'w-12.5 flex flex-col items-center'}>
+      <Icon
+        type={icon}
+        size={iconSize}
+        color={active ? '--color-main' : '--color-gray-200'}
+      />
+      {label && (
+        <Text
+          fontWeight={'normal'}
+          className={cn('text-[10px]', active ? 'text-main' : 'text-gray-200')}
+        >
+          {label}
+        </Text>
+      )}
+    </Link>
+  )
+}

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

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

apps/web/app/_components/Categories/Categories.tsx

@@ -0,0 +1,20 @@
+'use client'
+
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { useCategoryQueries } from '@/_apis/queries/category'
+import { cn } from '@repo/ui/utils/cn'
+import { CategoryItem } from './CategoryItem'
+
+export const Categories = () => {
+  const { data: categories } = useSuspenseQuery(useCategoryQueries.list())
+
+  return (
+    <div
+      className={cn('grid grid-flow-row grid-cols-5 gap-y-6', 'px-7.5 py-2.5')}
+    >
+      {categories.map((category) => (
+        <CategoryItem key={category.id} {...category} />
+      ))}
+    </div>
+  )
+}

apps/web/app/_components/Categories/CategoryItem.tsx

@@ -0,0 +1,23 @@
+import { CLIENT_PATH } from '@/_constants/path'
+import { Category } from '@/_apis/schemas/category'
+import { Icon } from '@repo/ui/components/Icon'
+import { Text } from '@repo/ui/components/Text'
+import { Column } from '@repo/ui/components/Layout'
+
+export const CategoryItem = ({ id, name, iconKey }: Category) => (
+  <Column
+    as={'a'}
+    href={CLIENT_PATH.CATEGORY_DETAIL(id)}
+    className={'items-center gap-1'}
+  >
+    <Icon type={iconKey} size={40} />
+    <Text
+      as={'span'}
+      fontSize={'sm'}
+      fontWeight={'semibold'}
+      className={'text-main text-nowrap'}
+    >
+      {name}
+    </Text>
+  </Column>
+)

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

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