Feat/#51 Vercel 배포 관련 작업

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

@@ -1,6 +1,6 @@
 'use client'
 
-import { useState } from 'react'
+import { usePathname } from 'next/navigation'
 import { useSuspenseQuery } from '@tanstack/react-query'
 import { useCategoryQueries } from '@/_apis/queries/category'
 import { Icon } from '@repo/ui/components/Icon'
@@ -9,21 +9,24 @@ import { Header } from '@repo/ui/components/Header'
 import { Flex } from '@repo/ui/components/Layout'
 import { HeaderBackButton } from '@/_components/HeaderBackButton'
 import { RowCategories, Places } from './_components'
+import { Suspense, useEffect } from 'react'
+import { Spinner } from '@heroui/react'
 
-type Props = {
-  initId: string
-}
-
-export const CategoryDetailPage = ({ initId }: Props) => {
-  const [id, setId] = useState(initId)
-
+export const CategoryDetailPage = () => {
   const { data: categories } = useSuspenseQuery(useCategoryQueries.list())
-  const activeCategory = categories.find((category) => category.id === id)
+  const activeCategoryId = usePathname().split('/')[2] || '0'
+  const activeCategory = categories.find(
+    (category) => category.id === activeCategoryId,
+  )
 
   const setIdFunc = (id: string) => {
-    setId(id)
+    window.history.replaceState(null, '', `/categories/${id}`)
   }
 
+  useEffect(() => {
+    document.title = `공주대 맛집 | ${activeCategory?.name}`
+  }, [activeCategory])
+
   return (
     <>
       <Header
@@ -38,8 +41,15 @@ export const CategoryDetailPage = ({ initId }: Props) => {
         }
         className={'border-b-1 border-gray-50'}
       />
-      <RowCategories id={id} categories={categories} setIdFunc={setIdFunc} />
-      <Places id={id} />
+      <RowCategories
+        id={activeCategoryId}
+        categories={categories}
+        setIdFunc={setIdFunc}
+      />
+      {/*Todo: 맛집 리스트 스켈레톤으로 변경하기*/}
+      <Suspense fallback={<Spinner className={'my-auto'} />}>
+        <Places id={activeCategoryId} />
+      </Suspense>
     </>
   )
 }

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

@@ -1,17 +1,39 @@
+import type { Metadata } from 'next'
 import { HydrationBoundaryPage } from '@/HydrationBoundaryPage'
 import { useCategoryQueries } from '@/_apis/queries/category'
 import { CategoryDetailPage } from '@/categories/[id]/CategoryDetailPage'
+import { getCategories } from '@/_apis/services/category'
 
-const Page = async ({ params }: { params: Promise<{ id: string }> }) => {
-  const { id } = await params
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ id: string }>
+}): Promise<Metadata> {
+  const { id: categoryId } = await params
 
+  const data = await getCategories()
+  const categoryName = data?.find(({ id }) => id === categoryId)?.name
+
+  return {
+    title: `${categoryName}`,
+    description: `공주대학교 근처 ${categoryName} 맛집`,
+    openGraph: {
+      title: `공주대 맛집 | ${categoryName}`,
+      description: `공주대학교 근처 ${categoryName} 맛집`,
+      locale: 'ko-KR',
+      type: 'website',
+    },
+  }
+}
+
+const Page = () => {
   return (
     <HydrationBoundaryPage
       prefetch={async (queryClient) => {
         await queryClient.prefetchQuery(useCategoryQueries.list())
       }}
     >
-      <CategoryDetailPage initId={id} />
+      <CategoryDetailPage />
     </HydrationBoundaryPage>
   )
 }

apps/web/app/events/food-slot/page.tsx

@@ -1,9 +1,27 @@
+import type { Metadata } from 'next'
 import { HydrationBoundaryPage } from '@/HydrationBoundaryPage'
 import { useCategoryQueries } from '@/_apis/queries/category'
 import FoodSlotMachine from './FoodSlotMachine'
 import { Header } from '@repo/ui/components/Header'
 import { HeaderBackButton } from '@/_components/HeaderBackButton'
 
+export const dynamic = 'force-dynamic'
+
+const pageTitle = '오늘 뭐 먹지?'
+const pageDescription =
+  "선택 장애가 고민인가요? '오늘 뭐 먹지?' 슬롯머신으로 공주대 근처 맛집 메뉴를 추천받아보세요!"
+
+export const metadata: Metadata = {
+  title: pageTitle,
+  description: pageDescription,
+  openGraph: {
+    title: `공주대 맛집 | ${pageTitle}`,
+    description: pageDescription,
+    locale: 'ko-KR',
+    type: 'website',
+  },
+}
+
 const Page = async () => {
   return (
     <>

apps/web/app/events/lucky-draw/page.tsx

@@ -8,6 +8,8 @@ import { HydrationBoundaryPage } from '@/HydrationBoundaryPage'
 import { useEventQueries } from '@/_apis/queries/event'
 import { InfoPopover } from './_components/InfoPopover'
 
+export const dynamic = 'force-dynamic'
+
 const Page = () => {
   return (
     <HydrationBoundaryPage

apps/web/app/layout.tsx

@@ -9,9 +9,26 @@ import { Column } from '@repo/ui/components/Layout'
 import { NaverMapProvider } from '@/NaverMapProvider'
 import { HeroProvider } from '@/HeroProvider'
 
+const SITE_URL = new URL('https://knu-matzip.vercel.app')
+
 export const metadata: Metadata = {
-  title: 'Create Turborepo',
-  description: 'Generated by create turbo',
+  metadataBase: SITE_URL,
+  title: {
+    template: '공주대 맛집 | %s',
+    default: '공주대 맛집',
+  },
+  description: '공주대학교 캠퍼스(천안, 공주, 예산) 근처 맛집을 찾아보세요.',
+  openGraph: {
+    title: '공주대 맛집',
+    description: '공주대학교 캠퍼스별 맛집 정보',
+    locale: 'ko-KR',
+    siteName: '공주대 맛집',
+    url: '/',
+    type: 'website',
+  },
+  // verification: {
+  //   google: "",
+  // },
 }
 
 const pretendard = localFont({

apps/web/app/likes/page.tsx

@@ -1,10 +1,27 @@
+import type { Metadata } from 'next'
 import { usePlaceQueries } from '@/_apis/queries/place'
 import { OnlyLeftHeader } from '@repo/ui/components/Header'
 import { VerticalScrollArea } from '@repo/ui/components/Layout'
 import { HydrationBoundaryPage } from '@/HydrationBoundaryPage'
 import { LikePlacesList } from './_components/LikePlacesList'
 import { BottomNavigation } from '@/_components/BottomNavigation'
 
+export const dynamic = 'force-dynamic'
+
+const pageTitle = '찜 맛집'
+const pageDescription = '내가 직접 고른 공주대 주변 찜 맛집 리스트!'
+
+export const metadata: Metadata = {
+  title: pageTitle,
+  description: pageDescription,
+  openGraph: {
+    title: `${pageTitle} | 공주대 맛집`,
+    description: pageDescription,
+    locale: 'ko-KR',
+    type: 'website',
+  },
+}
+
 const Page = () => {
   return (
     <HydrationBoundaryPage

apps/web/app/map/MapPage.tsx → apps/web/app/map/MapComponent.tsx

@@ -18,7 +18,7 @@ import { UserMarker, PlaceMarker } from './_components/Marker'
 import { CurrentLocationButton } from './_components/CurrentLocationButton'
 import { PreviewPlace } from './_components/PreviewPlace'
 
-export const MapPage = () => {
+const MapComponent = () => {
   const [map, setMap] = useState<naver.maps.Map | null>(null)
   const [isCenteredOnUser, setIsCenteredOnUser] = useState(false)
   const [currentBounds, setCurrentBounds] = useState<MapBounds | null>(null)
@@ -102,3 +102,5 @@ export const MapPage = () => {
     </>
   )
 }
+
+export default MapComponent

apps/web/app/map/MapContainer.tsx

@@ -0,0 +1,10 @@
+'use client'
+
+import dynamic from 'next/dynamic'
+
+const MapComponent = dynamic(() => import('./MapComponent'), {
+  ssr: false,
+  loading: () => <div>지도 로딩 중...</div>,
+})
+
+export const MapContainer = () => <MapComponent />

apps/web/app/map/page.tsx

@@ -1,12 +1,27 @@
 import { OnlyLeftHeader } from '@repo/ui/components/Header'
 import { BottomNavigation } from '@/_components/BottomNavigation'
-import { MapPage } from '@/map/MapPage'
+import { MapContainer } from './MapContainer'
+import type { Metadata } from 'next'
+
+const pageTitle = '주변 맛집'
+const pageDescription = '지도로 내 근처 공주대 주변 맛집의 위치를 확인하세요.'
+
+export const metadata: Metadata = {
+  title: pageTitle,
+  description: pageDescription,
+  openGraph: {
+    title: `${pageTitle} | 공주대 맛집`,
+    description: pageDescription,
+    locale: 'ko-KR',
+    type: 'website',
+  },
+}
 
 const Page = () => {
   return (
     <>
       <OnlyLeftHeader icon={'markerWithMap'} name={'주변 맛집'} />
-      <MapPage />
+      <MapContainer />
       <BottomNavigation />
     </>
   )

apps/web/app/page.tsx

@@ -20,6 +20,8 @@ import {
   LuckyDrawBanner,
 } from '@/_components/eventBanners'
 
+export const dynamic = 'force-dynamic'
+
 export default function Page() {
   return (
     <HydrationBoundaryPage

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

@@ -1,6 +1,31 @@
+import type { Metadata } from 'next'
 import { usePlaceQueries } from '@/_apis/queries/place'
 import { HydrationBoundaryPage } from '@/HydrationBoundaryPage'
 import { PlaceDetailPage } from './PlaceDetailPage'
+import { getPlaceDetail } from '@/_apis/services/place'
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ id: string }>
+}): Promise<Metadata> {
+  const { id } = await params
+
+  const data = await getPlaceDetail(id)
+  const { placeName } = data
+  const pageDescription = `공주대학교 근처 ${placeName} 맛집 상세 정보`
+
+  return {
+    title: `${placeName}`,
+    description: pageDescription,
+    openGraph: {
+      title: `공주대 맛집 | ${placeName}`,
+      description: pageDescription,
+      locale: 'ko-KR',
+      type: 'website',
+    },
+  }
+}
 
 const Page = async ({ params }: { params: Promise<{ id: string }> }) => {
   const { id } = await params

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

@@ -2,6 +2,8 @@ import { RequestDetailPage } from './RequestDetailPage'
 import { HydrationBoundaryPage } from '@/HydrationBoundaryPage'
 import { useRequestQueries } from '@/_apis/queries/request'
 
+export const dynamic = 'force-dynamic'
+
 const Page = async ({ params }: { params: Promise<{ id: string }> }) => {
   const { id } = await params
 

apps/web/app/requests/page.tsx

@@ -8,7 +8,9 @@ import { useRequestQueries } from '@/_apis/queries/request'
 import { HydrationBoundaryPage } from '@/HydrationBoundaryPage'
 import { RequestPlacesList } from './_components/RequestPlacesList'
 
-const Page = () => {
+export const dynamic = 'force-dynamic'
+
+const Page = async () => {
   return (
     <HydrationBoundaryPage
       prefetch={async (queryClient) => {