[#191] [#185] 담당 페이지 메타데이터 작업, 리드미 수정

README.md

@@ -1,7 +1,8 @@
 # 💎 Coworkers 💎  
 
 
-랜딩페이지 이미지 (추가 예정)
+![open_graph](https://github.com/user-attachments/assets/8b7f79ce-1b21-46a6-bdff-5f4887d5ae11)
+
 
 
 <p align="left">
@@ -52,11 +53,17 @@
 
 ### 🧩 프론트엔드
 <img src="https://img.shields.io/badge/Next.js-000000?style=for-the-badge&logo=Next.js&logoColor=white"> <img src="https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=React&logoColor=white"> <img src="https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=TypeScript&logoColor=white"> <img src="https://img.shields.io/badge/TailwindCSS-06B6D4?style=for-the-badge&logo=tailwindcss&logoColor=white"> <img src="https://img.shields.io/badge/React_Query-FF4154?style=for-the-badge&logo=ReactQuery&logoColor=white"> <img src="https://img.shields.io/badge/React_Hook_Form-EC5990?style=for-the-badge&logo=reacthookform&logoColor=white"> <img src="https://img.shields.io/badge/Axios-5A29E4?style=for-the-badge&logo=axios&logoColor=white" /> <img src="https://img.shields.io/badge/Storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white">
-### 🛠 코드 포매터 및 검사 도구
-<img src="https://img.shields.io/badge/ESLint-4B32C3?style=for-the-badge&logo=eslint&logoColor=white"> <img src="https://img.shields.io/badge/Prettier-F7B93E?style=for-the-badge&logo=prettier&logoColor=white">
+
+### 🛠 코드 포매터 및 도구
+
+<img src="https://img.shields.io/badge/Prettier-F7B93E?style=for-the-badge&logo=prettier&logoColor=white"> <img src="https://img.shields.io/badge/Husky-000000?style=for-the-badge&logo=git&logoColor=white">
+
 ### 🤝 협업 도구
+
 <img src="https://img.shields.io/badge/GitHub-181717?style=for-the-badge&logo=GitHub&logoColor=white" /> <img src="https://img.shields.io/badge/Figma-F24E1E?style=for-the-badge&logo=Figma&logoColor=white"> <img src="https://img.shields.io/badge/Discord-5B61EE?style=for-the-badge&logo=Discord&logoColor=white" /> <img src="https://img.shields.io/badge/Notion-000000?style=for-the-badge&logo=Notion&logoColor=white">
+
 ### 🚀 배포 플랫폼
+
 <img src="https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white" />
 
 <br>

src/app/[groupId]/editteam/page.tsx

@@ -1,3 +1,5 @@
+import { Metadata } from "next";
+import { cookies } from "next/headers";
 import EditTeam from "./_components/edit-team";
 
 interface EditTeamPageProps {
@@ -6,6 +8,55 @@ interface EditTeamPageProps {
   }>;
 }
 
+async function getAccessToken() {
+  const cookieStore = await cookies();
+  return cookieStore.get("accessToken")?.value;
+}
+
+export async function generateMetadata({
+  params,
+}: EditTeamPageProps): Promise<Metadata> {
+  const { groupId } = await params;
+  const accessToken = await getAccessToken();
+
+  const res = await fetch(
+    `${process.env.NEXT_PUBLIC_API_URL}/groups/${groupId}`,
+    {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    }
+  );
+
+  const group = await res.json();
+  if (!group) {
+    return {
+      title: "팀 설정",
+      description: "팀 정보를 수정할 수 있습니다.",
+    };
+  }
+
+  return {
+    title: `${group.name} 팀 설정`,
+    description: `${group.name} 정보를 수정할 수 있습니다.`,
+    openGraph: {
+      title: `${group.name} 팀 설정 | Coworkers`,
+      description: `${group.name} 정보를 수정할 수 있습니다.`,
+      type: "website",
+      url: `https://coworkers-pied.vercel.app/${groupId}/editteam`,
+      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 EditTeamPage = async ({ params }: EditTeamPageProps) => {
   const { groupId } = await params;
 

src/app/[groupId]/page.tsx

@@ -1,3 +1,5 @@
+import { Metadata } from "next";
+import { cookies } from "next/headers";
 import TeamPageClient from "./_components/team-page-client";
 
 interface TeamPageProps {
@@ -6,6 +8,55 @@ interface TeamPageProps {
   }>;
 }
 
+async function getAccessToken() {
+  const cookieStore = await cookies();
+  return cookieStore.get("accessToken")?.value;
+}
+
+export async function generateMetadata({
+  params,
+}: TeamPageProps): Promise<Metadata> {
+  const { groupId } = await params;
+  const accessToken = await getAccessToken();
+
+  const res = await fetch(
+    `${process.env.NEXT_PUBLIC_API_URL}/groups/${groupId}`,
+    {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    }
+  );
+
+  const group = await res.json();
+  if (!group) {
+    return {
+      title: "팀페이지",
+      description: "팀 페이지 정보를 확인할 수 있습니다.",
+    };
+  }
+
+  return {
+    title: group.name,
+    description: `${group.name} 정보를 확인할 수 있습니다.`,
+    openGraph: {
+      title: `${group.name} | Coworkers`,
+      description: `${group.name} 정보를 확인할 수 있습니다.`,
+      type: "website",
+      url: `https://coworkers-pied.vercel.app/${groupId}`,
+      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 TeamPage = async ({ params }: TeamPageProps) => {
   const { groupId } = await params;
 

src/app/noteam/page.tsx

@@ -1,8 +1,30 @@
 import { Button } from "@/components/index";
 import cn from "@/utils/clsx";
+import type { Metadata } from "next";
 import Image from "next/image";
 import Link from "next/link";
 
+export const metadata: Metadata = {
+  title: "팀 없음",
+  description: "아직 소속된 팀이 없습니다.",
+  openGraph: {
+    title: "팀 없음 | Coworkers",
+    description: "아직 소속된 팀이 없습니다.",
+    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: "소속팀 없음",
+      },
+    ],
+  },
+};
+
 const NoTeam = () => {
   return (
     <main