메타데이터 추가

src/app/(routes)/login/page.tsx

@@ -1,4 +1,9 @@
 import Login from '@/components/Login/Login'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: '로그인',
+}
 
 const LoginPage = () => {
   return (

src/app/(routes)/notification/layout.tsx

@@ -1,27 +1,12 @@
-'use client'
+import { NotificationController } from '@/components'
+import { Metadata } from 'next'
 
-import Tab from '@/components/common/Tab/Tab'
-import TabItem from '@/components/common/Tab/TabItem'
-import useTab from '@/components/common/Tab/hooks/useTab'
+export const metadata: Metadata = {
+  title: '알림',
+}
 
 const NotificationLayout = ({ children }: { children: React.ReactNode }) => {
-  const { currentTab, tabList } = useTab({ type: 'notification' })
-
-  return (
-    <>
-      <Tab>
-        {tabList.map((tabItem) => (
-          <TabItem
-            active={currentTab === tabItem.content}
-            text={tabItem.text}
-            dest={tabItem.dest}
-            key={tabItem.content}
-          />
-        ))}
-      </Tab>
-      <div className="p-4">{children}</div>
-    </>
-  )
+  return <NotificationController>{children}</NotificationController>
 }
 
 export default NotificationLayout

src/app/(routes)/register/page.tsx

@@ -1,4 +1,9 @@
 import UserInfoForm from '@/components/UserInfoForm/UserInfoForm'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: '회원가입',
+}
 
 const RegisterPage = () => {
   return (

src/app/(routes)/search/page.tsx

@@ -1,72 +1,24 @@
-'use client'
+import { SearchController } from '@/components'
+import { Metadata } from 'next'
 
-import { CategoryList, Dropdown, SpaceList } from '@/components'
-import UserList from '@/components/UserList/UserList'
-import { useCategoryParam, useSortParam } from '@/hooks'
-import { fetchSearchSpaces } from '@/services/space/spaces'
-import { fetchSearchUsers } from '@/services/user/search/search'
-import { cls } from '@/utils'
-import { useSearchParams } from 'next/navigation'
+type SearchPageProps = {
+  searchParams: { [key: string]: string | string[] | undefined }
+}
 
-const SearchPage = () => {
-  const searchParams = useSearchParams()
-  const keyword = searchParams.get('keyword')
-  const target = searchParams.get('target')
-  const { sort, sortIndex, handleSortChange } = useSortParam('space')
-  const { category, categoryIndex, handleCategoryChange } =
-    useCategoryParam('all')
+export async function generateMetadata({
+  searchParams,
+}: SearchPageProps): Promise<Metadata> {
+  const { target, keyword } = searchParams
 
-  return (
-    <>
-      <div className="sticky top-[53px] z-40 bg-bgColor">
-        <div
-          className={cls(
-            'flex items-center px-4',
-            target === 'space' ? 'pt-4' : 'py-4',
-          )}>
-          <h2 className="grow overflow-hidden text-ellipsis whitespace-nowrap pr-2 font-bold text-gray9">
-            &apos;{keyword}&apos; 에 대한{' '}
-            {target === 'space' ? '스페이스' : target === 'user' ? '유저' : ''}{' '}
-            검색 결과
-          </h2>
-          {target === 'space' && (
-            <div className="shrink-0">
-              <Dropdown
-                type="space"
-                placement="right"
-                defaultIndex={sortIndex}
-                onChange={handleSortChange}
-              />
-            </div>
-          )}
-        </div>
-        {target === 'space' && (
-          <CategoryList
-            type="all"
-            defaultIndex={categoryIndex}
-            onChange={handleCategoryChange}
-          />
-        )}
-      </div>
-      <section className="flex flex-col gap-y-2 px-4">
-        {target === 'space' && (
-          <SpaceList
-            queryKey="search"
-            sort={sort ?? ''}
-            category={category ?? ''}
-            keyword={keyword ?? ''}
-            fetchFn={fetchSearchSpaces}
-          />
-        )}
-        {target === 'user' && (
-          <UserList
-            keyword={keyword ?? ''}
-            fetchFn={fetchSearchUsers}
-          />
-        )}
-      </section>
-    </>
-  )
+  return {
+    title: `'${keyword ?? ''}' ${
+      target === 'space' ? '스페이스' : target === 'user' ? '유저' : ''
+    } 검색 결과`,
+  }
+}
+
+const SearchPage = () => {
+  return <SearchController />
 }
 
 export default SearchPage

src/app/(routes)/space/[spaceId]/layout.tsx

@@ -0,0 +1,29 @@
+import { fetchGetSpace } from '@/services/space/space'
+import { Metadata } from 'next'
+
+type SpaceLayoutProps = {
+  params: { spaceId: number }
+}
+
+export async function generateMetadata({
+  params,
+}: SpaceLayoutProps): Promise<Metadata> {
+  const spaceId = params.spaceId
+  const space = await fetchGetSpace({ spaceId })
+
+  return {
+    title: space.spaceName,
+    description: space.description,
+    openGraph: {
+      title: `${space.spaceName} • LinkHub`,
+      description: space.description,
+      images: space.spaceImagePath,
+    },
+  }
+}
+
+const layout = ({ children }: { children: React.ReactNode }) => {
+  return children
+}
+
+export default layout

src/app/(routes)/space/create/page.tsx

@@ -1,4 +1,9 @@
 import SpaceForm from '@/components/Space/SpaceForm'
+import { Metadata } from 'next'
+
+export const metadata: Metadata = {
+  title: '스페이스 생성',
+}
 
 const SpaceCreatePage = () => {
   return (

src/app/(routes)/user/[userId]/layout.tsx

@@ -1,37 +1,25 @@
-'use client'
+import { UserController } from '@/components'
+import { fetchGetUserProfile } from '@/services/user/profile/profile'
+import { Metadata } from 'next'
 
-import React from 'react'
-import { Spinner } from '@/components'
-import Tab from '@/components/common/Tab/Tab'
-import TabItem from '@/components/common/Tab/TabItem'
-import useTab from '@/components/common/Tab/hooks/useTab'
-import useGetProfile from '@/hooks/useGetProfile'
+type Props = {
+  params: { userId: number }
+}
 
-const UserLayout = ({ children }: { children: React.ReactNode }) => {
-  const { user, myId, isProfileLoading } = useGetProfile()
-  const { currentTab, tabList } = useTab({
-    type: 'user',
-    userId: user?.memberId,
-    myId,
-  })
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const userId = params.userId
+  const user = await fetchGetUserProfile({ memberId: userId })
 
-  return (
-    <>
-      {!isProfileLoading && (
-        <Tab>
-          {tabList.map((tabItem) => (
-            <TabItem
-              active={currentTab === tabItem.content}
-              text={tabItem.text}
-              dest={tabItem.dest}
-              key={tabItem.content}
-            />
-          ))}
-        </Tab>
-      )}
-      {children}
-    </>
-  )
+  return {
+    title: user.nickname,
+    openGraph: {
+      title: `${user.nickname} • LinkHub`,
+    },
+  }
+}
+
+const UserLayout = ({ children }: { children: React.ReactNode }) => {
+  return <UserController>{children}</UserController>
 }
 
 export default UserLayout

src/app/(routes)/user/setting/page.tsx

@@ -1,21 +1,12 @@
-'use client'
+import { SettingController } from '@/components'
+import { Metadata } from 'next'
 
-import UserInfoForm from '@/components/UserInfoForm/UserInfoForm'
-import { useCurrentUser } from '@/hooks/useCurrentUser'
+export const metadata: Metadata = {
+  title: '프로필 수정',
+}
 
 const UserSettingPage = () => {
-  const { currentUser } = useCurrentUser()
-
-  return (
-    <div>
-      {currentUser && (
-        <UserInfoForm
-          userData={currentUser}
-          formType="Setting"
-        />
-      )}
-    </div>
-  )
+  return <SettingController />
 }
 
 export default UserSettingPage

src/app/layout.tsx

@@ -7,8 +7,19 @@ import type { Metadata } from 'next'
 import './globals.css'
 
 export const metadata: Metadata = {
-  title: 'Create Next App',
-  description: 'Generated by create next app',
+  title: {
+    template: '%s • LinkHub',
+    default: 'LinkHub',
+  },
+  description: '링크 아카이빙 및 공유 플랫폼',
+  openGraph: {
+    title: 'LinkHub',
+    description: '링크 아카이빙 및 공유 플랫폼',
+    url: 'https://link-hub.site',
+    siteName: 'LinkHub',
+    locale: 'ko_KR',
+    type: 'website',
+  },
 }
 
 export default function RootLayout({
@@ -21,7 +32,7 @@ export default function RootLayout({
       <head>
         <meta
           name="viewport"
-          content="width=device-width, initial-scale=1.0, user-scalable=no"
+          content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0"
         />
       </head>
       <TanstackQueryContext>

src/components/NotificationController/NotificationController.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import Tab from '@/components/common/Tab/Tab'
+import TabItem from '@/components/common/Tab/TabItem'
+import useTab from '@/components/common/Tab/hooks/useTab'
+
+const NotificationLayout = ({ children }: { children: React.ReactNode }) => {
+  const { currentTab, tabList } = useTab({ type: 'notification' })
+
+  return (
+    <>
+      <Tab>
+        {tabList.map((tabItem) => (
+          <TabItem
+            active={currentTab === tabItem.content}
+            text={tabItem.text}
+            dest={tabItem.dest}
+            key={tabItem.content}
+          />
+        ))}
+      </Tab>
+      <div className="p-4">{children}</div>
+    </>
+  )
+}
+
+export default NotificationLayout