[MBTI 테스트 사이트 만들기 #1] 메인화면 만들기

이전글 보러 가기 👉 [MBTI 테스트 사이트 만들기 #0] Visusal Studio Code 설치와 Create-react-app 생성

메인화면 만들기

MBTI 테스트 사이트를 만들기 위해서 추가할 기능들과 추후 추가하고 싶은 기능을 대강 정리해보면 다음과 같다.

시간 없어서 대충 만들려고 했는데, 생각보다 오래걸린다...ㅠㅠ

추가할 기능 및 작업(필수)

• MBTI 테스트 웹 사이트 추가
• MBTI 테스트 문의 이메일 버튼
• SNS 공유하기 버튼
• 애드센스 연결
• 도메인 추가

추후에 추가하고 싶은 기능(옵션)

• 앱 연동
• 유저 인증
• 유저가 직접 MBTI 테스트를 만들 수 있는 기능
  • 1. 테스트 템플릿을 선택하고, 2. 질문과 답을 각각 입력받아서 3. 최종적으로 만들어진 테스트 url을 친구에게 공유할 수 있는 기능?

---

컴포넌트 구성

페이지 뷰 구성

MBTI 테스트 사이트를 만들려면 3가지 페이지뷰가 필요하다.

1. 메인 화면(Main) : 테스트들을 한 곳에 볼 수 있는 화면
2. 테스트 시작 화면(Quiz) : 선택한 테스트 시작 화면과 테스트하는 화면
3. 결과 화면(Result) : 테스트가 끝나고 결과를 보여줄 화면

React routing

React router 라이브러리를 사용하여 하위 컴포넌트를 생성한다.

1. react-router-dom 설치

yarn add react-router-dom

2. router 적용 (v6)

import { BrowserRouter, Routes, Route } from "react-router-dom";
import { datas } from "./data/data"; //test 정보가 담긴 data

function App() {
	return (
        <div className="App">
          <BrowserRouter>
                <Routes>
                  {/* Main */}
                  <Route path="/" element={<Main />} />
                  {/* Quiz */}
                  {testUrl.map((item) => (
                    <Route
                      path={item}
                      element={<Quiz test={item.replaceAll("/", "")} />}
                      key={item.replaceAll("/", "")}
                      exact
                    />
                  ))}
                  {/* Result */}
                  {testResultQueryUrl.map((item) => (
                    <Route
                      path={"/" + item.mainUrl + "/result/" + item.query}
                      element={Result}
                      key={item.mainUrl + "_" + item.query}
                      exact
                    />
                  ))}
                  {/* <Route path="*" element={<Main />}></Route> */}
                </Routes>
          </BrowserRouter>
        </div>
      );
}

export default App;

• 정적 데이터 파일에 필요한 test 정보를 작성(URL, testType, title 등)

Main 페이지에 Test 카드 추가

특정 URL에 접근하기 위해서는 Link 컴포넌트가 필요하다. 

//App > Main > Content.js

import React, { useContext } from "react";
import { Link } from "react-router-dom";
import { datas } from "../../data/data";
import { colors } from "../../constants/colors";
import banner from "../../assets/img/banner.svg";

function Content() {
  return (
    <div>
      {/* TODO: 배너 이미지 */}
      <img src={banner} alt="스마일배너" />
      {/* 각 테스트 카드 */}
      <div>
        {datas.map((item, idx) => {
          return (
            <Link
              to={item.info.mainUrl}
              key={item.info.mainUrl.replaceAll("/", "")}
            >
              <img
                loading="lazy"
                src={item.info.mainImage}
                alt={item.info.mainUrl}
                width={"100%"}
              />
              <div>
                <h2>👉{item.info.mainTitle}👈</h2>
                <h3>{item.info.subTitle}</h3>
              </div>
            </Link>
          );
        })}
      </div>
    </div>
  );
}

const styles = {}; //style 정의

export default Content;

• datas: 테스트 카드에 표시될 정보를 담고 있음
• Content 컴포넌트: 테스트 카드를 렌더링 하는 역할
• 각 테스트 카드 상단에는 배너 이미지를 표시

 

최종 Main 페이지 화면

앱 화면에서 캡처한 화면.

현재까지의 fire tree

📦src
 ┣ 📂assets
 ┃ ┗ 📂img
 ┣ 📂components
 ┃ ┣ 📂layout
 ┃ ┃ ┣ 📜Answer.js
 ┃ ┃ ┣ 📜Box.js
 ┃ ┃ ┣ 📜Content.js
 ┃ ┃ ┣ 📜EmailButton.js
 ┃ ┃ ┣ 📜Footer.js
 ┃ ┃ ┣ 📜Header.js
 ┃ ┃ ┣ 📜Question.js
 ┃ ┃ ┗ 📜ScrollToTop.js
 ┃ ┗ 📂pages
 ┃ ┃ ┣ 📜Main.js
 ┃ ┃ ┣ 📜NotFound.js
 ┃ ┃ ┣ 📜Project.js
 ┃ ┃ ┣ 📜Quiz.js
 ┃ ┃ ┗ 📜Result.js
 ┣ 📂constants
 ┃ ┗ 📜colors.js
 ┣ 📂data
 ┃ ┗ 📜data.js
 ┣ 📂fonts
 ┃ ┣ 📜YJfont.ttf
 ┃ ┗ 📜Ycomputer.ttf
 ┣ 📂provider
 ┃ ┗ 📜useContext.js
 ┣ 📂styles
 ┃ ┣ 📜App.css
 ┃ ┣ 📜common.css
 ┃ ┣ 📜layout.css
 ┃ ┣ 📜reset.css
 ┃ ┗ 📜variables.css
 ┣ 📜App.js
 ┣ 📜App.test.js
 ┣ 📜index.js
 ┣ 📜reportWebVitals.js
 ┗ 📜setupTests.js

fire tree 텍스트 추출하는 법은 아래 글 참조하세요!

[VSCode] 익스텐션(확장 프로그램) 추천 #1