import React from 'react' ; import { NextComponentType } from 'next' ; import NextApp , { AppContext , AppInitialProps , AppProps } from 'next/app' ; import Head from 'next/head' ; import { DefaultSeo } from 'next-seo' ; import { observer } from 'mobx-react' ; import Stores from 'stores' ; import { makeStateJSON , StoreProvider , useSSR } from 'core/universal-state' ; import LayoutDefault from 'components/layouts/Default' ; import Favicon from 'components/head/Favicon' ; import nextSeoConfig from 'next-seo.config' ; import tailwindStyle from '../assets/scss/tailwind.scss' ; /**
 * * 모든 페이지의 초기화가 여기에서 진행됩니다.
 */ const App = ( { Component , pageProps , stateJSON } ) => { /**
     * Head 에 주입되는 페이지 설정입니다.
     */ const pageConfigs = [ { id : 'config-1' , name : 'http-equiv' , content : 'autoRotate:disabled' } , { id : 'config-2' , name : 'viewport' , content : 'width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0, viewport-fit=cover' } ] ; return ( < > { } < Head > < Favicon /> { pageConfigs . map ( ( config ) => ( < meta key = { config . id } { ... config } / > ) ) } < /Head> { } < DefaultSeo { ... nextSeoConfig } / > { } < style jsx global > { tailwindStyle } < /style> { } < StoreProvider ssr = { stateJSON } structure = { Stores } > { < Page { ... { Component , pageProps } } />} < /StoreProvider> < />); } ; /**
 * * 페이지 최상단에 적용되어야하는
 * * 컴포넌트들의 순서가 여기에서 정의됩니다.
 */ const Page = observer ( ( { Component , pageProps } ) => { /**
     * 페이지의 라우팅 가드를 앱에 적용합니다.
     */ const Guard = ( Component as any ) . guard || React . Fragment ; /**
     * 기본 레이아웃 또는 페이지 레이아웃을 적용합니다.
     */ const Layout = ( Component as any ) . layout || LayoutDefault ; /**
     * 페이지의 서브 레이아웃을 적용합니다.
     */ const SubLayout = ( Component as any ) . subLayout || React . Fragment ; /**
     * 페이지에 스토어를 바인딩한 후 렌더링합니다.
     */ const BoundPage = observer ( Component ) ; return ( < Guard > < Layout > < SubLayout > < BoundPage { ... pageProps } / > < /SubLayout> < /Layout> < /Guard>); } ) ; /**
 * * 서비스 내 사전 요청을 재정의합니다.
 */ App . getInitialProps = async ( context ) => { let stateJSON = await useSSR ( context , Stores ) ; const appProps = await NextApp . getInitialProps ( context ) ; if ( ! process . browser ) stateJSON = makeStateJSON ( stateJSON ) ; return { ... appProps , stateJSON } as AppInitialProps ; } ; export default App ;