TIL 홈페이지 만들기 8

npm i emotion-reset 을 설치해 준다.
front 디렉토리 안에 components 디렉토리를 만들고 그 안에 GlobalStyles.tsx 파일을 생성하고 아래와 같이 입력한다.

import { css } from '@emotion/react';
import emotionReset from 'emotion-reset';

export const GlobalStyles = css`
  ${emotionReset}

  *, *::after, *::before {
    box-sizing: border-box;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
  }
`;

그리고 pages에 _app.tsx 파일을 아래와 같이 수정한다.

import { AppProps } from 'next/app'
import { GlobalStyles } from '../components/GlobalStyles';
import { Global } from '@emotion/react'

function App({ Component, pageProps }: AppProps) {
	return (
		<>
			<Global styles={GlobalStyles} />
			<Component {...pageProps}>
			</Component>
		</>
	)
}

export default App

이 후 서버를 다시 키면 reset.css 가 적용 된 것을 확인 할 수 있다.

components 디렉토리 안에 Header.tsx 파일을 생성하고 아래와 같이 입력한다.

import React from 'react';
import Link from 'next/link';
import styled from '@emotion/styled';

const Header = () => {
	return(
		<>
			<HeaderBox>
				<ul>
					<li>
						<Link href='/'>Home</Link>
						<Link href='/login'>Login</Link>
					</li>
				</ul>
			</HeaderBox>
		</>
	)
}

const HeaderBox = styled.div`
	width: 100%;
	border-bottom: 1px solid #ccc;
`;

export default Header;

그리고 components 디렉토리 안에 Layout.tsx 파일을 만들고 아래와 같이 입력해 준다.

import React, {FC} from 'react';
import Header from "./Header";

const Layout: FC = ({children}) => {
	return(
		<>
			<Header />
			{children}
		</>
	)
}

export default Layout;

pages 디렉토리 안에 index.tsx 파일을 아래와 같이 수정한다.

import React, { useState } from "react";
import Layout from "../components/Layout";

export default function Home() {
  return (
    <>
      <Layout>
        <div>
          Home
        </div>
      </Layout>
    </>
  );
}

pages 디렉토리 안에 login.tsx 파일을 만들고 아래와 같이 입력한다.

import React from 'react';
import Layout from "../components/Layout";

const Login = () => {
	return(
		<>
			<Layout>
				<div>
					Login
				</div>
			</Layout>
		</>
	)
}

export default Login;

_app.tsx 파일을 아래와 같이 수정한다.

import { AppProps } from 'next/app'
import { GlobalStyles } from '../components/GlobalStyles';
import { Global } from '@emotion/react'

function App({ Component, pageProps }: AppProps) {
	return (
		<>
			<Global styles={GlobalStyles} />
			<Component {...pageProps}>
			</Component>
		</>
	)
}

export default App

그 다음에 서버를 다시 키면 home 과 login 페이지를 이동 할 수 있다.