Refactoring : QA 반영 - 3차

src/app/(Main)/talk/components/TalkSection.tsx

@@ -7,6 +7,7 @@ import lottieTalkAfterClick from '#/lotties/talk_after_click.json';
 import lottieTalkBeforeClick from '#/lotties/talk_before_click.json';
 import { usePoseTalkQuery } from '@/apis';
 import { BottomFixedButton } from '@/components/Button';
+import { Spacing } from '@/components/Spacing';
 import useLoading from '@/hooks/useLoading';
 
 export default function TalkSection() {
@@ -36,6 +37,8 @@ export default function TalkSection() {
     <section className="flex flex-col items-center">
       <h1 className="text-center">{talkWord}</h1>
 
+      <Spacing size={10} />
+
       {isFirstLoading && (
         <Lottie
           loop

src/app/(Sub)/detail/[id]/components/DetailSection.tsx

@@ -34,7 +34,7 @@ export default function DetailSection({ poseId }: DetailSectionProps) {
   };
 
   return (
-    <div className="flex flex-col items-center">
+    <div>
       {sourceUrl && (
         <Link
           href={'https://' + sourceUrl}
@@ -43,29 +43,31 @@ export default function DetailSection({ poseId }: DetailSectionProps) {
           ↗ 이미지 출처
         </Link>
       )}
-      <div className="relative h-520 w-400">
-        <Image
-          src={imageKey}
-          fill
-          alt="detailImage"
-          className="cursor-pointer"
-          onClick={() =>
-            open(({ exit }) => (
-              <Popup>
-                <Image
-                  src={imageKey}
-                  alt="enlargementImage"
-                  priority
-                  loading="eager"
-                  onClick={exit}
-                  width={500}
-                  height={440}
-                  className="cursor-pointer"
-                />
-              </Popup>
-            ))
-          }
-        />
+      <div className="flex justify-center">
+        <div className="relative h-520 w-440">
+          <Image
+            src={imageKey}
+            fill
+            alt="detailImage"
+            className="cursor-pointer"
+            onClick={() =>
+              open(({ exit }) => (
+                <Popup>
+                  <Image
+                    src={imageKey}
+                    alt="enlargementImage"
+                    priority
+                    loading="eager"
+                    onClick={exit}
+                    width={500}
+                    height={440}
+                    className="cursor-pointer"
+                  />
+                </Popup>
+              ))
+            }
+          />
+        </div>
       </div>
       <div className="flex flex-wrap gap-10 px-20 py-12">
         {tagAttributes?.split(',').map((tag, index) => <Tag key={index} name={tag} />)}

src/app/layout.tsx

@@ -5,47 +5,38 @@ import '../../styles/typography.css';
 import Script from 'next/script';
 
 import { OverlayProvider } from '@/components/Overlay/OverlayProvider';
-import { GA_ID } from '@/constants';
+import { BASE_SITE_URL, GA_ID } from '@/constants';
 import QueryProvider from '@/provider/QueryProvider';
 import RecoilContextProvider from '@/provider/RecoilContextProvider';
 
 import type { Metadata } from 'next';
 
+const DEFAULT_OG_TITLE = 'PosePicker';
+const DEFAULT_OG_DESC = '포토부스에서 고민하는 당신을 위한 포즈 추천';
+const DEFAULT_OG_IMAGE = '/images/main.png';
+
 export const metadata: Metadata = {
-  title: 'PosePicker',
-  description: '포토부스에서 고민하는 당신을 위한 포즈 추천',
-  openGraph: {
-    title: 'PosePicker',
-    description: 'PosePicker FE by @guesung, @seondal',
-    url: 'https://pose-picker.vercel.app/', // 웹사이트 URL
-    siteName: 'PosePicker',
-    images: [
-      {
-        url: '', // 이미지 URL
-        width: 1920,
-        height: 1080,
-      },
-    ],
-    locale: 'ko-KR',
-    type: 'website',
+  metadataBase: new URL(BASE_SITE_URL),
+  title: {
+    template: `${DEFAULT_OG_TITLE} / %s `,
+    default: DEFAULT_OG_TITLE,
   },
-  robots: {
-    index: true,
-    follow: true,
-    googleBot: {
-      index: true,
-      follow: true,
-      'max-video-preview': -1,
-      'max-image-preview': 'large',
-      'max-snippet': -1,
-    },
+  description: DEFAULT_OG_DESC,
+  openGraph: {
+    title: DEFAULT_OG_TITLE,
+    description: DEFAULT_OG_DESC,
+    images: [DEFAULT_OG_IMAGE],
   },
   twitter: {
-    title: 'PosePicker',
-    card: 'summary_large_image',
+    title: DEFAULT_OG_TITLE,
+    description: DEFAULT_OG_DESC,
+    images: [DEFAULT_OG_IMAGE],
   },
-  icons: {
-    shortcut: '/favicon.ico',
+  viewport: {
+    width: 'device-width',
+    initialScale: 1,
+    maximumScale: 1,
+    userScalable: false,
   },
   manifest: '/manifest.json',
   themeColor: '#ffffff',

src/constants/index.ts

@@ -1,4 +1,4 @@
 export const BASE_API_URL = process.env.NEXT_PUBLIC_API_URL;
-export const BASE_SITE_URL = process.env.NEXT_PUBLIC_SITE_URL;
+export const BASE_SITE_URL = process.env.NEXT_PUBLIC_SITE_URL ?? 'https://www.posepicker.site';
 export const KAKAO_KEY = process.env.NEXT_PUBLIC_KAKAO_KEY;
 export const GA_ID = process.env.NEXT_PUBLIC_GA_ID;