결과 페이지 만들기

import되는 요소들, 사용되는 styled-component, 페이지 기본 구조는 Home 화면과 동일함

 

1. resultdata.js를 생성하여 미리 결과와 관련된 데이터를 넣어두기

 

2. assets 폴더 안에 결과 화면에 맞는 사진을 출력하게 해주는 이미지 폴더 생성

이미지 import 해서 사용하는 법은 다음과 같음

import 변수 from '경로/파일명.jpg'

export const ResultData=[
  {
    id:1,
    image: `${변수}`,
  }
]

 

3. resultdata를 다 작성했을 경우 Result.js에 import

그 후 결과에 맞게 출력되도록 일부 코드 수정

 

4. 타이틀페이지의 사진이 아닌 결과에 맞는 사진이 출력되도록 코드 수정

 

5. 페이지 다시하기 버튼이 작동되도록 onClick 이벤트 설정

 

페이지 임시 결과화면

import React from "react";
import styled from "styled-components";
import Button from 'react-bootstrap/Button';
import { useNavigate } from "react-router-dom";
import { ResultData } from "../assets/data/resultdata";

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

  return(
    <Wrapper>
      <Header>뮤지컬 MBTI 테스트</Header>
        <Contents>
        <Title>결과 보기</Title>
        <LogoImage>
          <img src={ResultData[0].image} alt='musical' width={350} />
        </LogoImage>
        <Desc>당신과 제일 잘 맞는 뮤지컬은 {ResultData[0].name}입니다.</Desc>
        <Button style={{fontFamily: "DNFBitBitTTF"}} onClick={()=>navigate("/")}>
          테스트 다시하기
        </Button>
      </Contents>
    </Wrapper>
  )
}

export default Result;

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";
`