Skip to content

Commit

Permalink
move: default header & RootDomProvider as BaseLayout
Browse files Browse the repository at this point in the history
  • Loading branch information
@cjhih456
cjhih456 committed Jan 1, 2025
1 parent 1985202 commit 98f33b2
Show file tree
Hide file tree
Showing 4 changed files with 89 additions and 69 deletions.
30 changes: 30 additions & 0 deletions src/components/layout/BaseLayout.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import type { ReactNode } from 'react';
import Head from 'next/head';
import { useTranslation } from 'next-i18next';
import RootDomProvider from '@/provider/RootDom/provider';
import { theme } from '../ui/theme';

interface BaseLayoutProps {
children?: ReactNode
}

export default function BaseLayout({ children }: BaseLayoutProps) {
const { t } = useTranslation(['common'])
return <div css={{
display: 'block',
color: theme.color.white.default,
width: '100%',
fontFamily: `${theme.fonts.NetflixSans}, ${theme.fonts.Roboto}`,
}}>
<Head>
<title>{t('header.title')}</title>
<meta name="description" content={t('header.description')} />
<meta name="keywords" content={t('header.keywords')} />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
<link rel="icon" href="/favicon.ico" />
</Head>
<RootDomProvider>
{children}
</RootDomProvider>
</div>
}
3 changes: 0 additions & 3 deletions src/components/layout/DefaultLayout.tsx
View file

This file was deleted.

120 changes: 58 additions & 62 deletions src/components/pages/Home/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,71 +1,67 @@
import Head from 'next/head';
import type { NextPageWithLayout } from '@/pages/_app';
import { useTranslation } from 'next-i18next'
import BaseLayout from '@/components/layout/BaseLayout';
import { HeroBottom, HeroBottomLine, HeroBottomMargin } from './styles/HeroBottom';
import { HeroContent, HeroContentBg, HeroContentBgShadow, HeroContentDetail, HeroContentDetailShell, HeroContentDetailContentLayout, HeroContentShell } from './styles/HeroContent';
import { HeroHead, HeroHeadContent, HeroHeadLayer, HeroHeadLogo, HeroHeadRightSide, HeroHeadSigninLink } from './styles/HeroHead';
import { HeroDescrpition1, HeroDescrpition2, HeroSection, HeroTitle } from './styles/HeroSection';

export default function Home() {
const Home: NextPageWithLayout = () => {
const { t } = useTranslation(['common', 'page-home'])
return (
<>
<Head>
<title>{t('header.title')}</title>
<meta name="description" content={t('header.description')} />
<meta name="keywords" content={t('header.keywords')} />
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0" />
<link rel="icon" href="/favicon.ico" />
</Head>
<div>
<HeroSection>
<HeroHead>
<HeroHeadLayer>
<HeroHeadContent>
<div>
<HeroHeadLogo></HeroHeadLogo>
</div>
<HeroHeadRightSide>
<div></div>
<select></select>
<HeroHeadSigninLink href="/">
{t('head.signin')}
</HeroHeadSigninLink>
</HeroHeadRightSide>
</HeroHeadContent>
</HeroHeadLayer>
</HeroHead>
<HeroContentShell>
<HeroContent>
<HeroContentBg>
<HeroContentBgShadow></HeroContentBgShadow>
</HeroContentBg>
<HeroContentDetail>
<HeroContentDetailShell>
<HeroContentDetailContentLayout>
<HeroTitle>
{t('page-home:section1.title')}
</HeroTitle>
<HeroDescrpition1>
{t('page-home:section1.desc1')}
</HeroDescrpition1>
<form>
<HeroDescrpition2>
{t('page-home:section1.desc2')}
</HeroDescrpition2>
</form>
</HeroContentDetailContentLayout>
</HeroContentDetailShell>
<HeroBottom>
<div>
<HeroBottomLine></HeroBottomLine>
</div>
<HeroBottomMargin></HeroBottomMargin>
</HeroBottom>
</HeroContentDetail>
</HeroContent>
</HeroContentShell>
</HeroSection>
</div>
</>
<HeroSection>
<HeroHead>
<HeroHeadLayer>
<HeroHeadContent>
<div>
<HeroHeadLogo></HeroHeadLogo>
</div>
<HeroHeadRightSide>
<div></div>
<select></select>
<HeroHeadSigninLink href="/">
{t('head.signin')}
</HeroHeadSigninLink>
</HeroHeadRightSide>
</HeroHeadContent>
</HeroHeadLayer>
</HeroHead>
<HeroContentShell>
<HeroContent>
<HeroContentBg>
<HeroContentBgShadow></HeroContentBgShadow>
</HeroContentBg>
<HeroContentDetail>
<HeroContentDetailShell>
<HeroContentDetailContentLayout>
<HeroTitle>
{t('page-home:section1.title')}
</HeroTitle>
<HeroDescrpition1>
{t('page-home:section1.desc1')}
</HeroDescrpition1>
<form>
<HeroDescrpition2>
{t('page-home:section1.desc2')}
</HeroDescrpition2>
</form>
</HeroContentDetailContentLayout>
</HeroContentDetailShell>
<HeroBottom>
<div>
<HeroBottomLine></HeroBottomLine>
</div>
<HeroBottomMargin></HeroBottomMargin>
</HeroBottom>
</HeroContentDetail>
</HeroContent>
</HeroContentShell>
</HeroSection>
);
}
}

Home.getLayout = (page) => {
return <BaseLayout>{page}</BaseLayout>
}

export default Home
5 changes: 1 addition & 4 deletions src/pages/_app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import type { AppProps } from 'next/app';
import type { ReactElement, ReactNode } from 'react';
import { appWithTranslation } from 'next-i18next'
import initMSW from '@/mocks';
import RootDomProvider from '@/provider/RootDom/provider';
import I18nConfig from '@I18nConfig';
initMSW();

Expand All @@ -19,9 +18,7 @@ type AppPropsWithLayout = AppProps & {
function App({ Component, pageProps }: AppPropsWithLayout) {
const getLayout = Component.getLayout ?? ((page: ReactElement) => page)

return getLayout(<RootDomProvider>
<Component {...pageProps} />
</RootDomProvider>)
return getLayout(<Component {...pageProps} />)
}

export default appWithTranslation(App, I18nConfig)

0 comments on commit 98f33b2

Please sign in to comment.