💡 4/1 mbti app 만들기, TypeScript

📍 [실습] React - mbti app 만들기

지금까지 학습한 React를 활용하여 mbti 테스트를 할 수 있는 간단한 프로그램을 만드는 실습을 했다.
제공해준 pdf 파일에 실습 초기 셋팅부터 자세히 적혀있어서 차근차근 따라하며 정리할 수 있는 시간이었다.

초기 셋팅

1. 새로운 프로젝트 생성 & 초기 폴더 구조 셋팅

npx create-react-app [프로젝트명] 으로 설치 후 필요없는 파일 및 코드 정리

2. Redux, styled-components 모듈 설치

npm i reudx react-redux @reduxjs/toolkit
npm i styled-components

3. mbti store 설정

• src/store 폴더 만들기
  • store > modules 폴더 생성
  • store > modules > mbti.js
  • store > index.js
    

>>> 시작!

0. src/index.js 설정

import ReactDOM from "react-dom/client";
import App from "./App";
import { configureStore } from "@reduxjs/toolkit";
import rootReducer from "./store";
import { Provider } from "react-redux";

const store = configureStore({ reducer: rootReducer });

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

1. 초기 state 설정

🔹 src/store/modules/mbti.js

const initialState = {
  mbtiResult: "", // mbti 테스트 후 나온 유형 ex) ENTP
  page: 0, // 0: 인트로 페이지, 1~n: 선택 페이지, n+1: 결과 페이지
  // 질문 목록
  survey: [
    {
      question: "퇴근 직전에 동료로부터 개발자 모임에 초대를 받은 나!\n\n퇴근 시간에 나는?",
      answer: [
        {
          text: "그런 모임을 왜 이제서야 알려 준거야! 당장 모임으로 출발한다",
          result: "E",
        },
        {
          text: "1년 전에 알려줬어도 안갔을 건데 뭔... 더 빠르게 집으로 간다",
          result: "I",
        },
      ],
    },
    {...}, {...}, {...}, ...],
  // "결과에 대한 설명"
  explanations: {
    ESTJ: {
      text: "무리한 개발 일정만 아니라면 일정을 철저하게 지킬 당신의 MBTI 는!",
      img: "/assets/estj.jpg",
    },
    ISTJ: {...}, ENTJ: {...}, INTJ: {...}, ESFJ: {...}, ISFJ: {...}, ENFJ: {...}, INFJ: {...}, 
    ESTP: {...}, ISTP: {...}, ENTP: {...}, INTP: {...}, ESFP: {...}, ISFP: {...}, ENFP: {...}, INFP: {...}, 
  },
};

2. action type 설정 & action 함수 생성

🔹 src/store/modules/mbti.js

• action type 상수화

const CHECK = "mbti/CHECK";
const NEXT = "mbti/NEXT";
const RESET = "mbti/RESET";

• action 함수

export function check(result) {
  return {
    type: CHECK,
    payload: { result },
  };
}
export function next() {
  return {
    type: NEXT,
  };
}
export function reset() {
  return {
    type: RESET,
  };
}

3. reducer 만들기

dispatch로 넘겨준 action type에 따라 어떻게 동작할 지 각각 설정해준다.

🔹 src/store/modules/mbti.js

export function mbti(state = initialState, action) {
  switch (action.type) {
    case CHECK:
      // 선택한 값 저장   
      return {
        ...state,
        mbtiResult: state.mbtiResult + action.payload.result, // ex) "IS" + "F" -> "ISF"+"J"
      };

    case NEXT:
      // 다음 페이지로 이동
      return {
        ...state,
        page: state.page + 1, // 기존 페이지에서 + 1
      };

    case RESET:
      // 메인 페이지로 이동
      return {
        ...state,
        page: 0, // 0번째 페이지로
        mbtiResult: "", // 결과 reset
      };

    default:
      return state;
  }
}

4. 컴포넌트 만들기!

src/pages, src/components 폴더 만들고
필요한 페이지와 컴포넌트 생성하기

src 코드 보기 (github)

styled-components로 global style 적용하기

1. src/components/GlobalStyle.js 만들기
2. import createGlobalStyle 후 GlobalStyle 이라는 변수에 정의

import { createGlobalStyle } from "styled-components";

const GlobalStyle = createGlobalStyle`
@font-face {
    font-family: 'ONE-Mobile-POP';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-POP.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
font-family: 'ONE-Mobile-POP', sans-serif;
padding-top: 1em;
white-space: pre-wrap;
}

ul, ol {
list-style: none;
padding-left: 0px;
}
`;

export default GlobalStyle;

3. src/App.js에서 import 후 사용한다. 이 때 최상단 컴포넌트 위에 위치시킨다.

import GlobalStyle from "./components/GlobalStyle";

function App() {

  const page = useSelector((state) => state.mbti.page);
  const survey = useSelector((state) => state.mbti.survey);

  return (
    <>
      <GlobalStyle />
      {/* 조건부 렌더링으로 페이지 분기 처리 */}
      <Main>{page === 0 ? <Start /> : page !== survey.length + 1 ? <Mbti /> : <Result />}</Main>
    </>
  );
}