[feat] 헤더 레이아웃 작업

src/components/Layout/HeaderLayout/index.tsx

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+
+interface HeaderLayoutProps {
+  children: ReactNode;
+}
+
+function HeaderLayout({ children }: HeaderLayoutProps) {
+  return (
+    <>
+      <header>추후 헤더 완성되면 만들어진 헤더 사용 예정 </header>
+      {children}
+    </>
+  );
+}
+
+export default HeaderLayout;

src/pages/_app.page.tsx

@@ -1,13 +1,22 @@
 import type { AppProps } from "next/app";
+import { NextPage } from "next/types";
 
-import { useState } from "react";
+import { ReactElement, ReactNode, useState } from "react";
 
 import { Global } from "@emotion/react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
 import reset from "@/styles/reset";
 
-export default function App({ Component, pageProps }: AppProps) {
+export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
+  getLayout?: (page: ReactElement) => ReactNode;
+};
+
+interface AppPropsWithLayout extends AppProps {
+  Component: NextPageWithLayout; // components 속성이 NextPageWithLayout 타입을 따르도록 변경
+}
+
+export default function App({ Component, pageProps }: AppPropsWithLayout) {
   const [queryClient] = useState(
     () =>
       new QueryClient({
@@ -22,10 +31,12 @@ export default function App({ Component, pageProps }: AppProps) {
       }),
   );
 
+  const getLayout = Component.getLayout ?? ((page) => page);
+
   return (
     <QueryClientProvider client={queryClient}>
       <Global styles={reset} />
-      <Component {...pageProps} />
+      {getLayout(<Component {...pageProps} />)}
     </QueryClientProvider>
   );
 }