add: second layout

src/components/layout/BaseLayout.tsx

@@ -5,14 +5,15 @@ import RootDomProvider from '@/provider/RootDom/provider';
 import { theme } from '../ui/theme';
 
 interface BaseLayoutProps {
-  children?: ReactNode
+  children?: ReactNode,
+  defaultColor?: string
 }
 
-export default function BaseLayout({ children }: BaseLayoutProps) {
+export default function BaseLayout({ children, defaultColor }: BaseLayoutProps) {
   const { t } = useTranslation(['common'])
   return <div css={{
     display: 'block',
-    color: theme.color.white.default,
+    color: defaultColor ?? theme.color.white.default,
     width: '100%',
     fontFamily: `${theme.fonts.NetflixSans}, ${theme.fonts.Roboto}`,
   }}>

src/components/layout/SecondaryLayout.tsx

@@ -1,9 +1,39 @@
+import type { ReactNode } from 'react';
+import Link from 'next/link';
+import { useTranslation } from 'next-i18next';
+import NetflixLogo from '@assets/netflix/top-logo.svg'
+import { theme } from '../ui/theme';
+import BaseLayout from './BaseLayout'
+import { BodyContentShellCss, BodyLayoutCss, FooterContentShellCss, FooterLayoutCss, HeaderBorderCss, HeaderDefaultStyleCss, HeaderLinkStyleCss, HeaderLoginLinkStyleCss, } from './styles/SecondaryLayoutStyle';
 interface SecondaryLayoutProps {
-  isDark: boolean
+  isDark?: boolean
+  children?: ReactNode
 }
 
-export default function SecondaryLayout({ }: SecondaryLayoutProps) {
-  return <div>
-
-  </div>
+export default function SecondaryLayout({ isDark, children }: SecondaryLayoutProps) {
+  const { t } = useTranslation(['common'])
+  return <BaseLayout defaultColor={theme.color.grey.defaultFont}>
+    {/* HEADER */}
+    <div css={[isDark ? HeaderBorderCss : {}, HeaderDefaultStyleCss]}>
+      <Link css={HeaderLinkStyleCss} href="/">
+        <NetflixLogo />
+      </Link>
+      <Link css={HeaderLoginLinkStyleCss} href="/login">
+        {t('head.signin')}
+      </Link>
+    </div>
+    {/* BODY */}
+    {/* TODO: need to add animation https://dev.to/joseph42a/nextjs-page-transition-with-framer-motion-33dg */}
+    <div css={BodyLayoutCss}>
+      <div css={BodyContentShellCss}>
+        {children}
+      </div>
+    </div>
+    {/* FOOTER */}
+    <div css={FooterLayoutCss}>
+      <div css={FooterContentShellCss}>
+        {/* TODO: add footer contents */}
+      </div>
+    </div>
+  </BaseLayout>
 }

src/components/layout/styles/SecondaryLayoutStyle.ts

@@ -0,0 +1,67 @@
+import { css } from '@emotion/react';
+import { MediaPoint } from '@/components/styled/layout';
+import { theme } from '@/components/ui/theme';
+
+export const HeaderBorderCss = css({
+  borderBottom: '1px solid #6e6e6e'
+})
+
+export const HeaderDefaultStyleCss = css({
+  position: 'relative',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+  '> *': [
+    MediaPoint({
+      margin: ['0 10px', '0 3%'],
+      fontSize: ['14px', '16px', '19px'],
+      minHeight: ['45px', '75px', '90px']
+    })
+  ]
+})
+
+export const HeaderLinkStyleCss = css({
+  color: theme.color.red.default,
+})
+
+export const HeaderLoginLinkStyleCss = css({
+  float: 'right',
+  fontWeight: 500,
+  textDecoration: 'none',
+  ':hover': {
+    textDecoration: 'underline',
+  }
+})
+
+export const BodyLayoutCss = css({
+  paddingBottom: '95px',
+  flexGrow: 1,
+  overflow: 'hidden',
+  width: '100%'
+})
+
+export const BodyContentShellCss = css({
+  '--layout-container-side-padding': '32px',
+  padding: '20px var(--layout-container-side-padding) 60px',
+  margin: '0 auto 15px',
+  maxWidth: '978px',
+  overflow: 'hidden',
+})
+
+export const FooterLayoutCss = css({
+  backgroundColor: theme.color.grey.footerLightBg,
+  marginTop: 0,
+  opacity: 1,
+  color: theme.color.grey.footerLightFont,
+  fontSize: '1rem',
+  width: '100%',
+  minWidth: '190px',
+  position: 'relative',
+  paddingBotom: '20px',
+  borderTop: `1px solid ${theme.color.grey.footerLightDivider}`
+})
+
+export const FooterContentShellCss = css({
+  width: '90%',
+  paddingTop: '30px',
+  margin: '0 auto'
+})

src/components/pages/Signup/index.tsx

@@ -0,0 +1,13 @@
+import type { NextPageWithLayout } from '@/pages/_app';
+import SecondaryLayout from '@/components/layout/SecondaryLayout';
+
+const Signup: NextPageWithLayout = () => {
+  return <div>
+
+  </div>
+}
+
+Signup.getLayout = (page) => {
+  return <SecondaryLayout>{page}</SecondaryLayout>
+}
+export default Signup

src/components/ui/theme/index.ts

@@ -12,6 +12,12 @@ export const theme: Theme = {
     xs: '.25rem'
   },
   color: {
+    grey: {
+      defaultFont: '#333',
+      footerLightDivider: '#e6e6e6',
+      footerLightFont: '#737373',
+      footerLightBg: '#f3f3f3'
+    },
     white: {
       default: '#ffffff',
       active: 'rgba(255,255,255,0.7)',

src/pages/signup/index.tsx

@@ -0,0 +1,14 @@
+import type { GetStaticProps } from 'next';
+import { getServerTranslations } from '@/lib/i18n/getServerTranslations'
+
+export { default } from '@/components/pages/Signup'
+
+export const getStaticProps: GetStaticProps = async ({
+  locale,
+}) => {
+  return {
+    props: {
+      ...await getServerTranslations(locale || 'en', ['common', 'page-signup'])
+    },
+  }
+}

types/emotion/index.d.ts

@@ -11,16 +11,22 @@ declare module '@emotion/react' {
       xs: '.25rem'
     }
     color: {
+      grey: {
+        defaultFont: '#333'
+        footerLightDivider: '#e6e6e6'
+        footerLightFont: '#737373'
+        footerLightBg: '#f3f3f3'
+      }
       white: {
-        default: string
-        active: string
-        hover: string
+        default: '#ffffff'
+        active: 'rgba(255,255,255,0.7)'
+        hover: 'rgba(255,255,255,0.7)'
       }
       red: {
-        default: string
-        error: string
-        hover: string
-        active: string
+        error: '#eb3942'
+        default: '#e50914'
+        active: '#99161d'
+        hover: '#c11119'
       }
     }
   }