Ver.2.0 12차 배포 (아티스트 페이지 메타태그 방식 수정)

app/(route)/admin/page.tsx

@@ -46,7 +46,7 @@ const Admin = () => {
 
   return (
     <>
-      <MetaTag title={META_TAG.admin.title} description={META_TAG.admin.description} />
+      <MetaTag title={META_TAG.admin.title} description={META_TAG.admin.description} noFollow />
       {isAdminLogin && (
         <div className="relative flex h-[calc(100vh-7.2rem)] items-center justify-center bg-black-white px-20 pb-12 pt-56 text-14 text-white-white pc:h-[calc(100vh-6.4rem)]">
           {isAuth ? (

app/(route)/artist/[artistId]/layout.tsx

@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+import { getArtist, getGroup } from "@/utils/getArtist";
+import MetaTag from "@/components/MetaTag";
+
+interface Props {
+  children: ReactNode;
+  params: { artistId: string };
+}
+
+const getArtistName = async (artistId: string) => {
+  let res;
+  try {
+    const groupData = await fetch(`https://${process.env.NEXT_PUBLIC_BASE_URL}/group?groupId=${artistId}`);
+    res = await groupData.json();
+    if(res.message) throw Error();
+    return res;
+  } catch(err){
+    const artistData = await fetch(`https://${process.env.NEXT_PUBLIC_BASE_URL}/artist?artists=${artistId}`);
+    res = await artistData.json();
+    return res[0];
+  }
+};
+
+const layout = async ({ children, params }: Props) => {  
+  const res = await getArtistName(params.artistId);
+
+  return (
+    <>
+      <MetaTag title={`${res?.groupName || res?.artistName} - 행사 지도`} imgUrl={res?.groupImage || res?.artistImage} description={`${res?.groupName || res?.artistName}의 행사 정보들을 지도를 통해 쉽게 확인해 보세요.`} />
+      {children}
+    </>
+  );
+};
+
+export default layout;

app/(route)/artist/[artistId]/page.tsx

@@ -6,7 +6,6 @@ import Image from "next/image";
 import { useParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import KakaoMap from "@/components/KakaoMap";
-import MetaTag from "@/components/MetaTag";
 import TimeFilter from "@/components/TimeFilter";
 import DottedLayout from "@/components/layout/DottedLayout";
 import { instance } from "@/api/api";
@@ -27,8 +26,13 @@ const ArtistIdPage = () => {
   const group = getGroup(instance, artistId);
   const artist = getArtist(instance, artistId);
 
-  const name = group.groupName || artist.artistName;
-  const image = group.groupImage || artist.artistImage;
+  const [name, setName] = useState("");
+  const [image, setImage] = useState("");
+
+  useEffect(() => {
+    setName(group.groupName || artist.artistName);
+    setImage(group.groupImage || artist.artistImage);
+  }, [group, artist]);
 
   const [sort, setSort] = useState<SortItem>(SORT[0]);
   const [status, setStatus] = useState(3);
@@ -62,7 +66,6 @@ const ArtistIdPage = () => {
 
   return (
     <>
-      <MetaTag title={`${name}`} imgUrl={image} description={`${name}의 행사 정보들을 지도를 통해 쉽게 확인해 보세요.`} />
       <DottedLayout size="wide">
         <div className="relative h-[calc(100vh-7.2rem)] w-full overflow-hidden pc:mb-128 pc:mt-48 pc:h-[84rem]">
           <div

app/(route)/search/page.tsx

@@ -21,7 +21,6 @@ const SearchPage = () => {
       <MetaTag
         title={keyword ? `${keyword}: 검색 결과` : "행사 둘러보기"}
         description={keyword ? `${keyword}의 Opener 행사 검색 결과입니다.` : "Opener에 등록된 각종 오프라인 행사들을 구경해 보세요."}
-        imgUrl="/image/meta-thumbnail.png"
       />
       <DottedLayout size="wide">
         <main className={`relative w-full pb-84 [overflow-anchor:none] ${visible ? "" : "pt-112 pc:pt-0"}`}>

app/_components/MetaTag.tsx

@@ -2,9 +2,10 @@ interface Props {
   title?: string;
   description?: string;
   imgUrl?: string;
+  noFollow?: boolean;
 }
 
-const MetaTag = ({ title, description, imgUrl }: Props) => {
+const MetaTag = ({ title, description, imgUrl, noFollow = false }: Props) => {
   return (
     <>
       <title>{title ? `${title} | Opener` : "Opener"}</title>
@@ -29,6 +30,16 @@ const MetaTag = ({ title, description, imgUrl }: Props) => {
       <meta property="og:type" content="website" />
       <meta property="og:site_name" content="Opener" />
       <meta property="og:locale" content="ko" />
+      <meta name="robots" content={noFollow ? "index, nofollow" : "index, follow"} />
+      <meta name="twitter:title" content={title ? `${title} | Opener` : "Opener"} />
+      <meta
+        name="twitter:description"
+        content={
+          description ||
+          "K-pop 팬을 위한 오프라인 행사 정보를 한 곳에서 쉽게 확인할 수 있는 웹사이트. 각종 카페 이벤트부터 팬광고, 포토부스 등 다양한 이벤트 정보를 한눈에 찾아보세요!"
+        }
+      />
+      <meta name="twitter:image" content={imgUrl || "/image/meta-thumbnail.png"} />
     </>
   );
 };