Repository: wjdals0304/ecommerce-project
Pull request #68: 레이아웃 헤더 추가
Author: login: wjdals0304
Created: 2025-03-26T06:58:41Z | Merged: 2025-03-26T13:19:22Z

next-head 를 이용하여 파비콘 아이콘, ogImage 추가 
<img width="243" alt="image" src="https://github.com/user-attachments/assets/4b8a62dc-402a-4dfb-b7a3-3afb519085f1" />



Diff:
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
new file mode 100644
index 0000000..b24c0b4
--- /dev/null
+++ b/src/components/Layout.tsx
@@ -0,0 +1,51 @@
+import Head from 'next/head';
+import { ReactNode } from 'react';
+
+interface LayoutProps {
+  title?: string;
+  description?: string;
+  ogImage?: string;
+  children: ReactNode;
+}
+
+export default function Layout({
+  title = '이커머스',
+  description = '이커머스입니다',
+  ogImage = `${process.env.NEXT_PUBLIC_CLOUDFLARE_URL}/ogImage/ogImage_default.png`,
+  children,
+}: LayoutProps) {
+  return (
+    <>
+      <Head>
+        <title>{title}</title>
+        <meta name="description" content={description} />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+        <meta property="og:title" content={title} />
+        <meta property="og:description" content={description} />
+        <meta property="og:image" content={ogImage} />
+        <meta property="og:type" content="website" />
+
+        <link
+          rel="icon"
+          type="image/x-icon"
+          sizes="16x16"
+          href={`${process.env.NEXT_PUBLIC_CLOUDFLARE_URL}/favicon/favicon-16x16.png`}
+        />
+        <link
+          rel="icon"
+          type="image/x-icon"
+          sizes="32x32"
+          href={`${process.env.NEXT_PUBLIC_CLOUDFLARE_URL}/favicon/favicon-32x32.png`}
+        />
+
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href={`${process.env.NEXT_PUBLIC_CLOUDFLARE_URL}/favicon/apple-touch-icon.png`}
+        />
+      </Head>
+      <main>{children}</main>
+    </>
+  );
+}
diff --git a/src/config/apiEndPoints.ts b/src/config/apiEndPoints.ts
index 346d4e8..5f9379b 100644
--- a/src/config/apiEndPoints.ts
+++ b/src/config/apiEndPoints.ts
@@ -16,7 +16,7 @@ export const API_ENDPOINTS = {
   SHIPPING_ADDRESS: '/shipping/address',
   ORDERS: '/orders',
   ORDER_DETAIL: '/orders/:id',
-  PRODUCT: '/product/',
+  PRODUCT: '/product',
   AUTH_ME: '/auth/me',
   AUTH_LOGOUT: '/auth/logout',
 };
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 15f912e..0ec382b 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -7,17 +7,20 @@ import {
 } from '@tanstack/react-query';
 import { ToastContainer } from 'react-toastify';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import Layout from '@/components/Layout';
 
 const queryClient = new QueryClient();
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <QueryClientProvider client={queryClient}>
-      <HydrationBoundary state={pageProps.dehydratedState}>
-        <Component {...pageProps} />
-        <ToastContainer />
-      </HydrationBoundary>
-      <ReactQueryDevtools initialIsOpen={false} />
+      <Layout>
+        <HydrationBoundary state={pageProps.dehydratedState}>
+          <Component {...pageProps} />
+          <ToastContainer />
+        </HydrationBoundary>
+        <ReactQueryDevtools initialIsOpen={false} />
+      </Layout>
     </QueryClientProvider>
   );
 }


Reviews:
user: login: uu29
state: APPROVED
author_association: COLLABORATOR
submitted_at: 2025-03-26T13:03:39Z

Review comments:
diff_hunk: @@ -0,0 +1,52 @@
+// components/Layout.tsx
path: src/components/Layout.tsx
user: login: uu29
body: 주석 제거해 주세요
created_at: 2025-03-26T13:02:25Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,52 @@
+// components/Layout.tsx
+import Head from 'next/head';
+import { ReactNode } from 'react';
+
+interface LayoutProps {
+  title?: string;
+  description?: string;
+  ogImage?: string;
+  children: ReactNode;
+}
+
+export default function Layout({
+  title = '이커머스',
+  description = '이커머스입니다',
+  ogImage = 'https://pub-5221b532a77b468a92745546bdc85a27.r2.dev/ogImage/ogImage_default.png',
+  children,
+}: LayoutProps) {
+  return (
+    <>
+      <Head>
+        <title>{title}</title>
+        <meta name="description" content={description} />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+
path: src/components/Layout.tsx
user: login: uu29
body: eslint 룰로 공백 제거하는거 추가해 주세요
created_at: 2025-03-26T13:02:42Z
author_association: COLLABORATOR
diff_hunk: @@ -0,0 +1,52 @@
+// components/Layout.tsx
+import Head from 'next/head';
+import { ReactNode } from 'react';
+
+interface LayoutProps {
+  title?: string;
+  description?: string;
+  ogImage?: string;
+  children: ReactNode;
+}
+
+export default function Layout({
+  title = '이커머스',
+  description = '이커머스입니다',
+  ogImage = 'https://pub-5221b532a77b468a92745546bdc85a27.r2.dev/ogImage/ogImage_default.png',
path: src/components/Layout.tsx
user: login: uu29
body: `https://pub-5221b532a77b468a92745546bdc85a27.r2.dev`
이런건 보통 환경변수로 처리합니다
created_at: 2025-03-26T13:03:07Z
author_association: COLLABORATOR

PR comments:
user: login: vercel[bot]
created_at: 2025-03-26T06:58:42Z
body: [vc]: #LW1uN9CwFnWPMeViEZeO3Vc1aDTl8v23u6ysYvWEFlU=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJlY29tbWVyY2UtcHJvamVjdCIsImluc3BlY3RvclVybCI6Imh0dHBzOi8vdmVyY2VsLmNvbS90b255cy1wcm9qZWN0cy1lMDg1YWJmNy9lY29tbWVyY2UtcHJvamVjdC81ZFZEZlV6cm1mWHh6QjJoSkN1UnpXaWJxTXhVIiwicHJldmlld1VybCI6ImVjb21tZXJjZS1wcm9qZWN0LWdpdC1mZWF0dXJlLWFkLTZiZTgzZC10b255cy1wcm9qZWN0cy1lMDg1YWJmNy52ZXJjZWwuYXBwIiwibmV4dENvbW1pdFN0YXR1cyI6IkRFUExPWUVEIiwibGl2ZUZlZWRiYWNrIjp7InJlc29sdmVkIjowLCJ1bnJlc29sdmVkIjowLCJ0b3RhbCI6MCwibGluayI6ImVjb21tZXJjZS1wcm9qZWN0LWdpdC1mZWF0dXJlLWFkLTZiZTgzZC10b255cy1wcm9qZWN0cy1lMDg1YWJmNy52ZXJjZWwuYXBwIn0sInJvb3REaXJlY3RvcnkiOm51bGx9XX0=
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **ecommerce-project** | ✅ Ready ([Inspect](https://vercel.com/tonys-projects-e085abf7/ecommerce-project/5dVDfUzrmfXxzB2hJCuRzWibqMxU)) | [Visit Preview](https://ecommerce-project-git-feature-ad-6be83d-tonys-projects-e085abf7.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/ecommerce-project-git-feature-ad-6be83d-tonys-projects-e085abf7.vercel.app?via=pr-comment-feedback-link) | Mar 26, 2025 1:12pm |


author_association: NONE
user: login: wjdals0304
created_at: 2025-03-26T06:58:54Z
body: * **#68** <a href="https://app.graphite.dev/github/pr/wjdals0304/ecommerce-project/68?utm_source=stack-comment-icon" target="_blank"><img src="https://static.graphite.dev/graphite-32x32-black.png" alt="Graphite" width="10px" height="10px"/></a> 👈 <a href="https://app.graphite.dev/github/pr/wjdals0304/ecommerce-project/68?utm_source=stack-comment-view-in-graphite" target="_blank">(View in Graphite)</a>
* `main`


<h2></h2>

This stack of pull requests is managed by <a href="https://graphite.dev?utm-source=stack-comment"><b>Graphite</b></a>. Learn more about <a href="https://stacking.dev/?utm_source=stack-comment">stacking</a>.
<!-- Current dependencies on/for this PR: -->
author_association: OWNER