페이지 라우팅 하기 (feat. 폰트 적용)

react router를 이용해 페이지 이동을 적용시킬 수 있음

모든 페이지가 한 화면에 담기지 않고 이동에 따라서 달라지도록 설정 가능

 

1. Router 설치

npm i react-router-dom

App.js에 import {Routes, Route} from 'react-router-dom';로 적용

<Routes>로 Components 감싸기

<Route path="/" element={<Home />} />는 기본 경로가 Home 화면임을 의미

import Home from "./pages/Home";
import Question from "./pages/Question";
import Result from "./pages/Result";
import {Routes, Route} from 'react-router-dom';

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/question" element={<Question />} />
      <Route path="/result" element={<Result />} />
    </Routes> 
  );
}

export default App;

그리고 index.js에서 import { BrowserRouter } from 'react-router-dom'; 넣어주고 <BrowserRouter>로 <App />를 감싸기

 

(+) 폰트 적용하기

1) assets 폴더 아래 fonts 폴더 만들어서 다운로드받은 폰트명.ttf 넣어주기

2) App.css를 src 아래 다시 만들어서 다음과 같이 입력

.App {
  font-family: "폰트명";
}

@font-face {
  font-family: "폰트명";
  src: url(경로/폰트명.ttf);
}

3) App.js에 다시 App.css 적용 (import './App.css';)

4) 적용시키고 싶은 곳(Home.js)에 가서 font-family: "폰트명";을 styled-component에 입력

5) Button Component는 bootstrap에서 가져온 것이므로 인라인에 폰트 적용

<Button style={{fontFamily: "DNFBitBitTTF"}}>처럼 / camelCase 사용에 유의

 

2. Button에 페이지로 이동 가능한 이벤트 적용하기 (Home.js)

• import { useNavigate } from "react-router-dom";를 상단에 넣기
• <Button style={{fontFamily: "DNFBitBitTTF"}} onClick={handleClickButton}>테스트 시작하기</Button>로 onClick 설정
• navigate 변수 정의(생략 가능)
• handleClickButton 함수 정의

import React from "react";
import styled from "styled-components";
import TitleImg from '../assets/musicalHome.jpg'
// 이미지를 삽입하는 방법
import Button from 'react-bootstrap/Button';
//버튼을 사용하므로 별도로 Button styled.div 정의할 필요가 없음
import { useNavigate } from "react-router-dom";
//페이지 이동 기능을 구현

const Home = () => {
  const navigate = useNavigate();

  const handleClickButton = () => {
    navigate('./question');
  }

  return(
    <Wrapper>
      <Header>뮤지컬 MBTI 테스트</Header>
        <Contents>
        <Title>나에게 맞는 뮤지컬은?</Title>
        <LogoImage>
          <img src={TitleImg} className="rounded-circle" alt='alone' width={350} />
        </LogoImage>
        <Desc>MBTI 기반으로 하는 나랑 잘 맞는 뮤지컬 찾기!</Desc>
        <Button style={{fontFamily: "DNFBitBitTTF"}} onClick={handleClickButton}>
          테스트 시작하기
        </Button>
      </Contents>
    </Wrapper>
  )
}

export default Home;

const Wrapper = styled.div`
  height:100vh;   
  width:100%;
` // height:100vh;와 width:100%;로 전체 영역 지정

const Header = styled.div`
  font-size:40pt;
  display:flex;
  justify-content:center;
  align-items:center;
  font-family: "DNFBitBitTTF";
`

const Contents = styled.div`
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
` //flex-direction은 Contents 안의 요소를 세로로 정렬하게 해줌

const Title = styled.div`
  font-size:30pt;
  margin-top:40px;
  font-family: "DNFBitBitTTF";
`

const LogoImage = styled.div`
  margin-top:10px;
`

const Desc = styled.div`
  font-size:20pt;
  margin-top:20px;
  font-family: "DNFBitBitTTF";
`