[#171] 담당 페이지 메타데이터 작업

src/api/articles/get-article-detail.ts

@@ -0,0 +1,17 @@
+import instance from "@/utils/axios";
+import { Article } from "@/types/article";
+
+const getArticleDetail = async (articleId: number): Promise<Article | null> => {
+  try {
+    const response = await instance.get(`/articles/${articleId}`);
+
+    if (!response) throw new Error("데이터를 불러오지 못했습니다.");
+
+    return response.data;
+  } catch (error) {
+    console.error(error);
+    return null;
+  }
+};
+
+export default getArticleDetail;

src/app/addteam/page.tsx

@@ -1,5 +1,27 @@
+import type { Metadata } from "next";
 import AddTeamContents from "./_components/add-team-contents";
 
+export const metadata: Metadata = {
+  title: "팀 생성",
+  description: "새로운 Coworkers 팀을 생성하세요",
+  openGraph: {
+    title: "팀 생성 | Coworkers",
+    description: "새로운 Coworkers 팀을 생성하세요",
+    type: "website",
+    url: "https://coworkes.com/addteam",
+    locale: "ko_KR",
+    siteName: "Coworkers",
+    images: [
+      {
+        url: "https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/Coworkers/user/2449/open_graph.jpg",
+        width: 1200,
+        height: 630,
+        alt: "Coworkers 팀 생성",
+      },
+    ],
+  },
+};
+
 const addTeamPage = () => {
   return (
     <div className="min-h-screen flex-center">

src/app/boards/[articleId]/_components/article-detail-client.tsx

@@ -1,25 +1,49 @@
 "use client";
 
+import { useEffect } from "react";
 import { useGetArticleDetail } from "@/hooks/api/articles/use-get-article-detail";
 import ArticleHeader from "./article-header/article-header";
 import ArticleContents from "./article-contents/article-contents";
 import ArticleComments from "./article-comments/article-comments";
 import { ArticleDetailSkeleton } from "@/components";
 import { notFound } from "next/navigation";
+import { Article } from "@/types/article";
 
 interface ArticleDetailClientProps {
   articleId: number;
+  initialData?: Article | null;
 }
 
 export default function ArticleDetailClient({
   articleId,
+  initialData,
 }: ArticleDetailClientProps) {
   const { data, isPending, isError } = useGetArticleDetail(articleId);
 
+  useEffect(() => {
+    if (initialData?.title) {
+      document.title = initialData.title;
+    }
+  }, [initialData]);
+
+  if (initialData && isPending) {
+    const articleData = initialData;
+
+    return (
+      <main className="mx-auto mt-[16px] w-full max-w-[343px] rounded-[20px] bg-white tablet:mt-[68px] tablet:max-w-[620px] pc:max-w-[900px]">
+        <article className="px-[20px] py-[40px] pc:px-[60px]">
+          <ArticleHeader article={articleData} />
+          <ArticleContents article={articleData} />
+          <ArticleComments article={articleData} />
+        </article>
+      </main>
+    );
+  }
+
   if (isPending) return <ArticleDetailSkeleton />;
 
   if (isError || !data?.article) {
-    notFound();
+    return notFound();
   }
 
   const articleData = data.article;

src/app/boards/[articleId]/edit/_components/article-edit-client.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useEffect } from "react";
+import cn from "@/utils/clsx";
+import { useGetArticleDetail } from "@/hooks/api/articles/use-get-article-detail";
+import { ArticleEditSkeleton } from "@/components";
+import ArticleEditContents from "./article-edit-contents/article-edit-contents";
+import { notFound } from "next/navigation";
+import { Article } from "@/types/article";
+
+interface ArticleEditClientProps {
+  articleId: number;
+  initialData?: Article | null;
+}
+
+export default function ArticleEditClient({
+  articleId,
+  initialData,
+}: ArticleEditClientProps) {
+  const { data, isPending } = useGetArticleDetail(articleId);
+
+  useEffect(() => {
+    if (initialData?.title) {
+      document.title = `${initialData.title} 수정`;
+    }
+  }, [initialData]);
+
+  if (initialData && isPending) {
+    return (
+      <div
+        className={cn(
+          "mx-auto mt-[36px] w-full max-w-[343px] rounded-[20px] bg-white",
+          "tablet:mt-[117px] tablet:max-w-[620px]",
+          "pc:mt-[100px] pc:max-w-[900px]"
+        )}
+      >
+        <ArticleEditContents article={initialData} />
+      </div>
+    );
+  }
+
+  if (isPending) return <ArticleEditSkeleton />;
+
+  if (!data?.article) {
+    notFound();
+  }
+
+  return (
+    <div
+      className={cn(
+        "mx-auto mt-[36px] w-full max-w-[343px] rounded-[20px] bg-white",
+        "tablet:mt-[117px] tablet:max-w-[620px]",
+        "pc:mt-[100px] pc:max-w-[900px]"
+      )}
+    >
+      <ArticleEditContents article={data.article} />
+    </div>
+  );
+}

src/app/boards/[articleId]/edit/page.tsx

@@ -1,26 +1,51 @@
-"use client";
+import type { Metadata } from "next";
+import ArticleEditClient from "./_components/article-edit-client";
+import getArticleDetail from "@/api/articles/get-article-detail";
 
-import { useParams } from "next/navigation";
-import { useGetArticleDetail } from "@/hooks/api/articles/use-get-article-detail";
-import { ArticleEditSkeleton } from "@/components";
-import ArticleEditContents from "./_components/article-edit-contents/article-edit-contents";
-import { notFound } from "next/navigation";
+interface PageProps {
+  params: Promise<{ articleId: string }>;
+}
 
-export default function EditPage() {
-  const params = useParams();
-  const articleId = params.articleId;
+export async function generateMetadata({
+  params,
+}: PageProps): Promise<Metadata> {
+  const { articleId } = await params;
+  const article = await getArticleDetail(Number(articleId));
 
-  const { data, isPending } = useGetArticleDetail(Number(articleId));
+  if (!article) {
+    return {
+      title: "게시글 수정",
+      description: "Coworkers 자유게시판 게시글 수정",
+    };
+  }
 
-  if (isPending) return <ArticleEditSkeleton />;
+  return {
+    title: `${article.title} 수정`,
+    description: "Coworkers 자유게시판 게시글 수정",
+    openGraph: {
+      title: `${article.title} 수정 | Coworkers`,
+      description: "Coworkers 자유게시판 게시글 수정",
+      type: "website",
+      url: `https://coworkes.com/boards/${articleId}/edit`,
+      locale: "ko_KR",
+      siteName: "Coworkers",
+      images: [
+        {
+          url: "https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/Coworkers/user/2449/open_graph.jpg",
+          width: 1200,
+          height: 630,
+          alt: "Coworkers 게시글 수정",
+        },
+      ],
+    },
+  };
+}
 
-  if (!data?.article) {
-    notFound();
-  }
+export default async function EditPage({ params }: PageProps) {
+  const { articleId } = await params;
+  const article = await getArticleDetail(Number(articleId));
 
   return (
-    <div className="mx-auto my-[36px] w-full max-w-[343px] rounded-[20px] bg-white tablet:mb-[137px] tablet:mt-[117px] tablet:max-w-[620px] pc:my-[100px] pc:max-w-[900px]">
-      <ArticleEditContents article={data.article} />
-    </div>
+    <ArticleEditClient articleId={Number(articleId)} initialData={article} />
   );
 }

src/app/boards/[articleId]/page.tsx

@@ -1,11 +1,51 @@
+import type { Metadata } from "next";
 import ArticleDetailClient from "./_components/article-detail-client";
+import getArticleDetail from "@/api/articles/get-article-detail";
 
 interface PageProps {
   params: Promise<{ articleId: string }>;
 }
 
+export async function generateMetadata({
+  params,
+}: PageProps): Promise<Metadata> {
+  const { articleId } = await params;
+  const article = await getArticleDetail(Number(articleId));
+
+  if (!article) {
+    return {
+      title: "게시글",
+      description: "Coworkers 자유게시판",
+    };
+  }
+
+  return {
+    title: article.title,
+    description: article.content.slice(0, 160),
+    openGraph: {
+      title: `${article.title} | Coworkers`,
+      description: article.content.slice(0, 160),
+      type: "article",
+      url: `https://coworkes.com/boards/${articleId}`,
+      locale: "ko_KR",
+      siteName: "Coworkers",
+      images: [
+        {
+          url: "https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/Coworkers/user/2449/open_graph.jpg",
+          width: 1200,
+          height: 630,
+          alt: "Coworkers 자유게시판",
+        },
+      ],
+    },
+  };
+}
+
 export default async function Page({ params }: PageProps) {
   const { articleId } = await params;
+  const article = await getArticleDetail(Number(articleId));
 
-  return <ArticleDetailClient articleId={Number(articleId)} />;
+  return (
+    <ArticleDetailClient articleId={Number(articleId)} initialData={article} />
+  );
 }

src/app/boards/_components/boards-best/boards-best-header/boards-best-header.tsx

@@ -1,13 +1,7 @@
-import { Icon } from "@/components/index";
-
 const BoardsBestHeader = () => {
   return (
-    <div className="mx-auto flex w-full items-center justify-between tablet:max-w-[616px] pc:max-w-[1058px]">
+    <div className="mx-auto w-full tablet:max-w-[616px] pc:max-w-[1058px]">
       <h2 className="m-0 text-xl font-semibold">베스트 게시글</h2>
-      <div className="gap-[2px] flex-center">
-        <span className="text-sm text-gray-700">더보기</span>
-        <Icon className="h-4 w-4" icon="rightArrow" />
-      </div>
     </div>
   );
 };

src/app/boards/layout.tsx

@@ -0,0 +1,29 @@
+import { Metadata } from "next";
+import { ReactNode } from "react";
+
+export const metadata: Metadata = {
+  title: "자유게시판",
+  description: "Coworkers 자유게시판에서 다양한 이야기를 나누세요",
+  openGraph: {
+    title: "자유게시판 | Coworkers",
+    description: "Coworkers 자유게시판에서 다양한 이야기를 나누세요",
+    type: "website",
+    url: "https://coworkes.com/boards",
+    locale: "ko_KR",
+    siteName: "Coworkers",
+    images: [
+      {
+        url: "https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/Coworkers/user/2449/open_graph.jpg",
+        width: 1200,
+        height: 630,
+        alt: "Coworkers 자유게시판",
+      },
+    ],
+  },
+};
+
+const Layout = ({ children }: { children: ReactNode }) => {
+  return <>{children}</>;
+};
+
+export default Layout;

src/app/boards/write/page.tsx

@@ -1,6 +1,28 @@
+import type { Metadata } from "next";
 import cn from "@/utils/clsx";
 import ArticleWriteContents from "./_components/article-write-contents/article-write-contents";
 
+export const metadata: Metadata = {
+  title: "게시글 작성",
+  description: "Coworkers 자유게시판에 새로운 글을 작성하세요",
+  openGraph: {
+    title: "게시글 작성 | Coworkers",
+    description: "Coworkers 자유게시판에 새로운 글을 작성하세요",
+    type: "website",
+    url: "https://coworkes.com/boards/write",
+    locale: "ko_KR",
+    siteName: "Coworkers",
+    images: [
+      {
+        url: "https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/Coworkers/user/2449/open_graph.jpg",
+        width: 1200,
+        height: 630,
+        alt: "Coworkers 게시글 작성",
+      },
+    ],
+  },
+};
+
 const Page = () => {
   return (
     <div

src/app/mypage/page.tsx

@@ -1,8 +1,30 @@
+import type { Metadata } from "next";
 import UserSettingContents from "./_components/user-setting-contents";
 
+export const metadata: Metadata = {
+  title: "계정 설정",
+  description: "Coworkers 계정 설정 페이지",
+  openGraph: {
+    title: "계정 설정 | Coworkers",
+    description: "Coworkers 계정 설정 페이지",
+    type: "website",
+    url: "https://coworkes.com/mypage",
+    locale: "ko_KR",
+    siteName: "Coworkers",
+    images: [
+      {
+        url: "https://sprint-fe-project.s3.ap-northeast-2.amazonaws.com/Coworkers/user/2449/open_graph.jpg",
+        width: 1200,
+        height: 630,
+        alt: "Coworkers 계정 설정",
+      },
+    ],
+  },
+};
+
 const MyPage = () => {
   return (
-    <div className="mt-[75px] flex-center tablet:mt-[176px] pc:mt-[156px]">
+    <div className="min-h-[calc(100vh-60px)] flex-center tablet:min-h-screen pc:min-h-screen">
       <div className="min-h-[556px] w-[343px] rounded-[20px] bg-white tablet:h-[745px] tablet:w-[550px] pc:w-[940px]">
         <UserSettingContents />
       </div>