From 91fdbdb61b29d4c1f781a2c62a3842e36f58823c Mon Sep 17 00:00:00 2001 From: mandelina Date: Sun, 19 Oct 2025 16:40:44 +0900 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20:=20=EC=98=A4=ED=94=88?= =?UTF-8?q?=EA=B7=B8=EB=9E=98=ED=94=84=20=EC=95=88=EB=82=98=EC=98=A4?= =?UTF-8?q?=EB=8A=94=20=ED=98=84=EC=83=81=20=EC=88=98=EC=A0=95=20=EB=B0=8F?= =?UTF-8?q?=20=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=97=90?= =?UTF-8?q?=EB=8F=84=20=EB=A9=94=ED=83=80=EB=8D=B0=EC=9D=B4=ED=84=B0=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/meta/MetaHead.tsx | 63 ++++++++++++++++++-------- pages/_app.page.tsx | 8 +++- pages/pickpickpick/[id]/index.page.tsx | 13 +++++- pages/techblog/[id]/index.page.tsx | 13 +++++- 4 files changed, 71 insertions(+), 26 deletions(-) diff --git a/components/meta/MetaHead.tsx b/components/meta/MetaHead.tsx index fd160dad..df2f4c92 100644 --- a/components/meta/MetaHead.tsx +++ b/components/meta/MetaHead.tsx @@ -4,36 +4,59 @@ import 뎁구리_og from '@public/image/뎁구리/뎁구리_og.png'; import { META, SITE_URL } from '@/constants/metaData'; -const MetaHead = ({ - title, - description, - url, - keyword, - image, -}: { +export type MetaHeadProps = { title?: string; description?: string; url?: string; keyword?: string[]; image?: string; -}) => { +}; + +const toAbsoluteUrl = (src: string) => { + if (/^https?:\/\//.test(src)) { + return src; + } + + try { + return new URL(src, SITE_URL).toString(); + } catch { + return `${SITE_URL}${src.startsWith('/') ? src : `/${src}`}`; + } +}; + +const MetaHead = ({ title, description, url, keyword, image }: MetaHeadProps) => { + const metaTitle = title ?? META.MAIN.title; + const metaDescription = description ?? META.MAIN.description; + const metaKeywords = (keyword ?? META.MAIN.keyword).join(','); + const metaUrl = url ?? SITE_URL; + const defaultImage = toAbsoluteUrl(뎁구리_og.src); + const metaImage = image ? toAbsoluteUrl(image) : defaultImage; + return ( - {title || META.MAIN.title} - + {metaTitle} + - - + + + {/* Open Graph */} + - {/* TODO: 최종 url은 변경 필요 */} - - - - {/* 트위터용 */} - - - + + + + + + {/* Twitter */} + + + + + + + ); }; + export default MetaHead; diff --git a/pages/_app.page.tsx b/pages/_app.page.tsx index 31291867..23c4a3a1 100644 --- a/pages/_app.page.tsx +++ b/pages/_app.page.tsx @@ -8,7 +8,7 @@ import { QueryClient, QueryClientProvider, HydrationBoundary } from '@tanstack/r import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import Layout from '@components/common/layout'; -import MetaHead from '@components/meta/MetaHead'; +import MetaHead, { type MetaHeadProps } from '@components/meta/MetaHead'; import useSetAxiosConfig from '@/api/useSetAxiosConfig'; import { DAY, HALF_DAY } from '@/constants/TimeConstants'; @@ -18,6 +18,8 @@ import '@/styles/globals.css'; import * as gtag from '../lib/gtag'; +type ComponentWithMeta = AppProps['Component'] & { meta?: MetaHeadProps }; + export default function MyApp({ Component, pageProps }: AppProps) { useSetAxiosConfig(); console.log('process.env.NODE_ENV', process.env.NODE_ENV); @@ -56,7 +58,9 @@ export default function MyApp({ Component, pageProps }: AppProps) { }; }, [router.events]); - const meta = pageProps.meta || META.MAIN; + const componentMeta = (Component as ComponentWithMeta)?.meta; + const meta: MetaHeadProps = + (pageProps.meta as MetaHeadProps | undefined) ?? componentMeta ?? META.MAIN; return ( <> diff --git a/pages/pickpickpick/[id]/index.page.tsx b/pages/pickpickpick/[id]/index.page.tsx index 95e0f51a..59e4725d 100644 --- a/pages/pickpickpick/[id]/index.page.tsx +++ b/pages/pickpickpick/[id]/index.page.tsx @@ -1,4 +1,5 @@ import Link from 'next/link'; +import type { NextPage } from 'next'; import { useRouter } from 'next/router'; import DevLoadingComponent from '@pages/loading/index.page'; @@ -16,7 +17,9 @@ import { PICK_VOTE_MODIFIED_MODAL, } from '@components/common/modals/modalConfig/pickVote'; import MoreButton from '@components/common/moreButton'; +import type { MetaHeadProps } from '@components/meta/MetaHead'; +import { META } from '@/constants/metaData'; import { ROUTES } from '@/constants/routes'; import { useMediaQueryContext } from '@/contexts/MediaQueryContext'; @@ -27,7 +30,9 @@ import SimilarPick from './components/SimilarPick'; import VoteCard from './components/VoteCard'; import usePickDetailHandlers from './handlers/usePickDetailHandlers'; -export default function Index() { +type NextPageWithMeta = NextPage & { meta?: MetaHeadProps }; + +const PickDetailPage: NextPageWithMeta = () => { const router = useRouter(); const { id } = router.query; @@ -148,4 +153,8 @@ export default function Index() { ); -} +}; + +PickDetailPage.meta = META.PICK; + +export default PickDetailPage; diff --git a/pages/techblog/[id]/index.page.tsx b/pages/techblog/[id]/index.page.tsx index b367cd6b..cbb22eb3 100644 --- a/pages/techblog/[id]/index.page.tsx +++ b/pages/techblog/[id]/index.page.tsx @@ -1,5 +1,6 @@ import React from 'react'; +import type { NextPage } from 'next'; import { useRouter } from 'next/router'; import DevLoadingComponent from '@pages/loading/index.page'; @@ -13,7 +14,9 @@ import WritableComment from '@components/common/comment/WritableComment'; import DevGuriHorizontalError from '@components/common/error/DevGuriHorizontalError'; import MobileToListButton from '@components/common/mobile/mobileToListButton'; import { LoginModal } from '@components/common/modals/modal'; +import type { MetaHeadProps } from '@components/meta/MetaHead'; +import { META } from '@/constants/metaData'; import { ROUTES } from '@/constants/routes'; import { useMediaQueryContext } from '@/contexts/MediaQueryContext'; @@ -24,7 +27,9 @@ import CompanyInfoCard from '../components/CompanyInfoCard'; import TechDetailCard from '../components/TechDetailCard'; import { TechCardProps } from '../types/techBlogType'; -export default function Page() { +type NextPageWithMeta = NextPage & { meta?: MetaHeadProps }; + +const TechBlogDetailPage: NextPageWithMeta = () => { const router = useRouter(); const techArticleId = router.query.id as string | undefined; @@ -116,4 +121,8 @@ export default function Page() { {isLoginModalOpen && loginStatus !== 'login' && } ); -} +}; + +TechBlogDetailPage.meta = META.TECH; + +export default TechBlogDetailPage;