질문 페이지 만들기

각 성향 당 3개씩, 총 12개의 질문을 만들 예정

 

1. 기본 설정

Home.js와 동일하게 styled-component 적용하고 Wrapper로 감싸기

(Title, Button과 같은 태그도 Home.js에서 적용한 태그와 동일한 설정으로)

 

2. Progress Bar 적용하기

bootstrap의 Bar 사용

https://react-bootstrap.netlify.app/components/progress/#rb-docs-content

 

3. 문제 넣을 틀 만들기

버튼의 바른 정렬을 위해 버튼 두 개는 별도로 묶어줌

Group에서 폰트 적용 시에 일괄 적용

 

//1번부터 3번까지 모두 적용한 결과
import React from "react";
import styled from "styled-components";
import { Button, ProgressBar } from "react-bootstrap";

const Question = () => {
  return(
    <Wrapper>
      <ProgressBar striped variant="danger" now={80} style={{marginTop:'20px'}} />
      <Title>나는 문제입니다.</Title>
      <ButtonGroup>
        <Button style={{width:"40%", minHeight: "200px", fontSize:"15pt"}}>나는 답변 1번입니다.</Button>
        <Button style={{width:"40%", minHeight: "200px", fontSize:"15pt", marginLeft:"20px"}}>나는 답변 2번입니다.</Button>
      </ButtonGroup>
    </Wrapper>
  )
}

export default Question;

const Wrapper = styled.div`
  height:100vh;   
  width:100%;
`

const Title = styled.div`
  font-size:30pt;
  text-align:center;
  font-family: "DNFBitBitTTF";
`

const ButtonGroup = styled.div`
  display: flex;
  flex-direction: row;
  align-items:center;
  justify-content: center;
  font-family: "DNFBitBitTTF";
`

 

4. 문제지 만들기

assets 폴더 아래 data 폴더 생성하고 questiondata.js 파일 만들기 (질문지에 대한 정보를 적어주는 곳)

Component가 아닌 단순한 데이터 객체 배열을 생성

Question.js에 import { QuestionData } from "../assets/data/questiondata"; 넣어주고 값을 뿌려주기

{QuestionData[0].title}은 첫번째 인덱스의 타이틀 값

    <Wrapper>
      <ProgressBar striped variant="danger" now={80} style={{marginTop:'20px'}} />
      <Title>{QuestionData[0].title}</Title>
      <ButtonGroup>
        <Button style={{width:"40%", minHeight: "200px", fontSize:"15pt"}}>{QuestionData[0].answera}</Button>
        <Button style={{width:"40%", minHeight: "200px", fontSize:"15pt", marginLeft:"20px"}}>{QuestionData[0].answerb}</Button>
      </ButtonGroup>
    </Wrapper>

questiondata.js 파일 예시

export const QuestionData = [
  {
    id:1,
    title:"문제1",
    answera:"E성향1",
    answerb:"I성향1",
    type:"EI",
  },
  //...
 ]