10/12 TIL : React SPA 제작(Mbti-app)

🔎 리액트 SPA(Single Page Application) 제작

• [터미널] npx create-react-app mbti-app
• [터미널] npm i redux react-redux @reduxjs/toolkit styled-components prettier
• .prettierrc

{
    "semi": true,
    "singleQuote": true
}

• /.vscode/settings.json

{
    "[javascript]": {
        "editor.maxTokenizationLineLength": 2500,
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    }
}

• 폴더 구조 세팅

 

🚩 redux 기초 세팅

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { configureStore } from '@reduxjs/toolkit';
import { Provider } from 'react-redux';
import rootReducer from './store/index'; // index 생략해도 동일

const reduxDevTool =
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();

const store = configureStore({ reducer: rootReducer }, reduxDevTool);
console.log(store.getState());

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

reportWebVitals();

 

🚩 rootReducer 설정

// src/store/index.js
 import { combineReducers } from 'redux';
import mbti from './modules/mbti';

// reducer 들을 combine 해서 export
export default combineReducers({
  mbti,
});

 

🚩 mbti store 설정

• 초기 state를 설정: mbti 질문 목록, 현재 페이지 값, mbti 전체 결과 값, 전체 결과에 대한 설명 값, 추가 이미지 주소 값
• 아직 DB 연동을 하지 않을 것이므로 필요한 데이터 설정
• 액션 타입 설정
• 액션 함수 설정
• 실제로 state 값을 변경시켜줄 reducer 만들기

// src/store/modules/mbti.js
// 초기 상태 설정
const initState = {
  mbtiResult: '',
  page: 0, // 0: 인트로 페이지, 1 ~ n: 선택 페이지, n+1: 결과 페이지
  survey: [
    {
      question:
        '퇴근 직전에 동료로부터 개발자 모임에 초대를 받은 나!!\n\n퇴근 시간에 나는?',
      answer: [
        {
          text: '그런 모임을 왜 이제서야 알려 준거야! 당장 모임으로 출발한다',
          result: 'E',
        },
        {
          text: '1년 전에 알려줬어도 안갔을 건데 뭔... 더 빠르게 집으로 간다',
          result: 'I',
        },
      ],
    },
    {
      question:
        '새로운 서비스 개발 중에, 동료가 새로 나온 신기술을 쓰는게 더 편할거라고 추천을 해준다!\n\n나의 선택은!?',
      answer: [
        {
          text: '뭔소리여, 그냥 하던 대로 개발하면 되는거지! 기존 생각대로 개발한다',
          result: 'S',
        },
        {
          text: '오호? 그런게 있어? 일단 구글을 찾아본다',
          result: 'N',
        },
      ],
    },
    {
      question:
        '서비스 출시 이틀 전 야근 시간, 갑자기 동료가 어!?를 외쳤다!\n\n나의 선택은?',
      answer: [
        {
          text: '무슨 버그가 발생한 거지? 아마 DB 관련 버그가 아닐까? 빠르게 동료의 자리로 달려간다',
          result: 'T',
        },
        {
          text: '아... 내일도 야근 각이구나 ㅠㅠ! 일단 동료의 자리로 가 본다',
          result: 'F',
        },
      ],
    },
    {
      question:
        '팀장님이 xx 씨 그전에 말한 기능 내일 오후까지 완료 부탁해요라고 말했다!\n\n나의 선택은?',
      answer: [
        {
          text: '일단 빠르게 개발 완료하고, 나머지 시간에 논다',
          result: 'J',
        },
        {
          text: '그거 내일 아침에 와서 개발해도 충분 하겠는데? 일단 논다',
          result: 'P',
        },
      ],
    },
  ],

  explaination: {
    ESTJ: {
      text: '무리한 개발 일정만 아니라면 일정을 철저하게 지킬 당신의 MBTI는!',
      img: '/images/estj.jpg',
    },
    ISTJ: {
      text: '스스로 하고싶은 분야를 끝까지 파고 들어서 끝내 성공 시킬 당신의 MBTI 는!',
      img: '/images/istj.jpg',
    },
    ENTJ: {
      text: '미래의 능력 쩌는 개발 팀장님으로 개발팀을 이끌 당신의 MBTI 는!',
      img: '/images/entj.jpg',
    },
    INTJ: {
      text: '혼자서 모든 것을 다 해내는 원맨 캐리의 표본! 당신의 MBTI 는!',
      img: '/images/intj.jpg',
    },
    ESFJ: {
      text: '개발팀의 분위기 메이커이자 아이디어 뱅크가 될 당신의 MBTI는!',
      img: '/images/esfj.jpg',
    },
    ISFJ: {
      text: '개발팀의 마더 테레사, 고민 상담소 역할을 자처하는 당신의 MBTI는!',
      img: '/images/isfj.jpg',
    },
    ENFJ: {
      text: '당신이 있는 팀은 언제나 올바른 곳을 향하고 있습니다! 팀원은 물론 팀의 방향을 챙기는 당신의 MBTI는!',
      img: '/images/enfj.jpg',
    },
    INFJ: {
      text: '예리한 통찰력으로 모든 것을 내다보면서 완벽하게 개발을 할 당신의 MBTI는!',
      img: '/images/infj.jpg',
    },
    ESTP: {
      text: '쿨하게 자신이 할 것을 하면서 논리적인 개발을 할 당신의 MBTI는!',
      img: '/images/estp.jpg',
    },
    ISTP: {
      text: '단시간에도 효율적으로 개발하여 모든 것을 완성할 당신의 MBTI는!',
      img: '/images/istp.jpg',
    },
    ENTP: {
      text: '스스로 흥미만 생긴다면 당장에 페이스북도 만들어 버릴 당신의 MBTI는!',
      img: '/images/entp.jpg',
    },
    INTP: {
      text: '확실한 주관과 뛰어난 지능을 바탕으로 논리적 개발을 할 당신의 MBTI는!',
      img: '/images/intp.jpg',
    },
    ESFP: {
      text: '개발팀의 에너자이저! 개발팀 특유의 서먹함을 깨는 당신! 당신의 MBTI는!',
      img: '/images/esfp.jpg',
    },
    ISFP: {
      text: '뛰어난 호기심과 예술적 감각으로 개발팀의 부족함을 채워갈 당신! 당신의 MBTI는!',
      img: '/images/isfp.jpg',
    },
    ENFP: {
      text: '자유로운 영혼으로 개발팀의 윤활유 및 활력소가 되어줄 당신의 MBTI는!',
      img: '/images/enfp.jpg',
    },
    INFP: {
      text: '개발팀의 그 어떤 트러블도 당신 앞에서는 사르르 녹을뿐, 팀의 근간을 다져주는 당신의 MBTI는!',
      img: '/images/infp.jpg',
    },
  },
};

// 액션 타입(문자열)
const CHECK = 'mbti/CHECK';
const NEXT = 'mbti/NEXT';
const RESET = 'mbti/RESET';

// 액션 생성 함수
export function next() {
  return {
    type: NEXT,
  };
}

export function check(result) {
  return {
    type: CHECK,
    payload: { result },
  };
}

export function reset() {
  return {
    type: RESET,
  };
}

// reducer
export default function mbti(state = initState, action) {
  switch (action.type) {
    case CHECK:
      return {
        ...state,
        mbtiResult: state.mbtiResult + action.payload.result,
      };
    case NEXT:
      return {
        ...state,
        page: state.page + 1,
      };
    case RESET:
      return {
        ...state,
        page: 0,
        mbtiResult: '',
      };
    default:
      return state;
  }
}

* 내용은 수업과 똑같이 작성한 것으로, mbti에 대한 정확한 지식을 기반으로 한 것이 아닙니다!

 

🚩 시작 페이지 컴포넌트 제작

// src/components/Start.js
import styled from 'styled-components';
import OrangeButton from './OrangeButton';

export default function Start() {
  return (
    <>
      <Header>개발자 MBTI 조사</Header>
      <MainImg src="/images/main.jpg" alt="메인 이미지" />
      <SubHeader>
        개발자가 흔히 접하는 상황에 따라서 MBTI를 알아봅시다!
      </SubHeader>
      <OrangeButton text="테스트 시작" />
    </>
  );
}

const MainImg = styled.img`
  width: inherit;
`;

const Header = styled.p`
  font-size: 3em;
`;

const SubHeader = styled.p`
  font-size: 1.5em;
  color: #777;
`;

// src/App.js
import styled from 'styled-components';
import Start from './components/Start';

const Main = styled.main`
  box-sizing: border-box;
  width: 100%;
  max-width: 500px;
  padding: 0 35px;
  margin: auto;
  text-align: center;
`;

function App() {
  return (
    <Main>
      <Start />
    </Main>
  );
}

export default App;

// src/components/Button.js
import styled from 'styled-components';

export default function Button({
  text,
  clickEvent,
  mainColor,
  subColor,
  hoverColor,
}) {
  return (
    <MyButton
      onClick={clickEvent}
      mainColor={mainColor}
      subColor={subColor}
      hoverColor={hoverColor}
    >
      {text}
    </MyButton>
  );
}

const MyButton = styled.a`
  position: relative;
  display: inline-block;
  cursor: pointer;
  vertical-align: middle;
  text-decoration: none;
  line-height: 1.6em;
  font-size: 1.2em;
  padding: 1.25em 2em;
  background-color: ${(props) => props.mainColor};
  border: 2px solid ${(props) => props.subColor};
  border-radius: 0.75em;
  user-select: none; // 드래그 방지
  transition: transform 0.15s ease-out;
  transform-style: preserve-3d;
  margin-top: 1em;
  
  // 그림자
  &::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    left: 0;
    right: 0;
    background: ${(props) => props.subColor};
    border-radius: inherit;
    box-shadow: 0 0 0 2px ${(props) => props.subColor};
    transform: translate3d(0, 0.75em, -1em);
  }
  &:hover {
    background: ${(props) => props.hoverColor};
    transform: translateY(0.25em);
  }
`;

 

🚩 OrangeButton으로 특수화

// src/components/OrangeButton.js
import Button from './Button';

export default function OrangeButton({ text, clickEvent }) {
  return (
    <Button
      text={text}
      clickEvent={clickEvent}
      mainColor="#fae243"
      subColor="#fa9f1a"
      hoverColor="#faf000"
    />
  );
}

 

🚩 OrangeButton 적용

// src/components/Start.js
    return (
        <>
          <Header>개발자 MBTI 조사</Header>
          <MainImg src="/images/main.jpg" alt="메인 이미지" />
          <SubHeader>
            개발자가 흔히 접하는 상황에 따라서 MBTI를 알아봅시다! 지금까지{'\n\n'}
            {counts} 명이 참여해주셨습니다.
          </SubHeader>
          <OrangeButton text="테스트 시작" clickEvent={() => dispatch(next())} />
        </>
      );

 

🚩 styled-components GlobalStyle

• 페이지 전체에 대한 스타일을 적용할 때 사용

// src/components/GlobalStyle.js
import { createGlobalStyle } from 'styled-components';

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

    body {
        font-family: 'HS-Regular', "Arial", sans-serif;
        padding-top: 1em;
        white-space: pre-wrap;
    }

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

export default GlobalStyle;

// src/app.js
    return (
        <>
          <GlobalStyle />
          <Main>
              <Start />
          </Main>
        </>
      );

 

🚩 페이지 분기 처리

• page가 0이면 Start 컴포넌트 보여주기
• page가 설문의 길이와 같을 때까지 설문조사 컴포넌트 보여주기
• page가 설문의 길이를 넘어가면 결과 컴포넌트 보여주기

// src/App.js
    return (
        <>
          <GlobalStyle />
          <Main>
            {page === 0 ? (
              <Start />
            ) : page !== survey.length + 1 ? (
              <Mbti />
            ) : (
              <Show />
            )}
          </Main>
        </>
      );

 

🚩 설문 컴포넌트 제작, SkyblueButton 특수화

// src/components/Mbti.js
import { useSelector } from 'react-redux';
import styled from 'styled-components';
import SkyBlueButton from './SkyblueButton';

const SurveyQuestion = styled.p`
  font-size: 1.5em;
  color: #777;
`;

const Vs = styled.p`
  font-size: 2em;
  padding-top: 1em;
`;

export default function Mbti() {
  const survey = useSelector((state) => state.mbti.survey);
  const page = useSelector((state) => state.mbti.page);

  return (
    <>
      <SurveyQuestion>{survey[page - 1].question}</SurveyQuestion>
      <ul>
        {survey[page - 1].answer.map((el, index) => {
          return (
            <li key={index}>
              <SkyBlueButton
                text={el.text}
              />
              {index === 0 && <Vs>VS</Vs>}
            </li>
          );
        })}
      </ul>
    </>
  );
}

// src/components/SkyblueButton.js
import Button from './Button';

export default function SkyBlueButton({ text, clickEvent }) {
  return (
    <Button
      text={text}
      clickEvent={clickEvent}
      mainColor="#7EDCFA"
      subColor="#3A82E0"
      hoverColor="#CFECF2"
    />
  );
}

 

🚩 이벤트 핸들러에 액션 생성 함수 지정

• 페이지를 넘기는 기능을 하는 next()를 dispatch를 이용하여 Reducer에 전달
• Start 컴포넌트의 테스트 시작이라는 버튼, Mbti 컴포넌트의 선택 버튼에 지정

// src/components/Start.js
import { useDispatch } from 'react-redux';
import styled from 'styled-components';
import OrangeButton from './OrangeButton';
import { next } from '../store/modules/mbti';

export default function Start() {;
  const dispatch = useDispatch();

  return (
    <>
      <Header>개발자 MBTI 조사</Header>
      <MainImg src="/images/main.jpg" alt="메인 이미지" />
      <SubHeader>
        개발자가 흔히 접하는 상황에 따라서 MBTI를 알아봅시다! 지금까지{'\n\n'}
        {counts} 명이 참여해주셨습니다.
      </SubHeader>
      <OrangeButton text="테스트 시작" clickEvent={() => dispatch(next())} />
    </>
  );
}

const MainImg = styled.img`
  width: inherit;
`;

const Header = styled.p`
  font-size: 3em;
`;

const SubHeader = styled.p`
  font-size: 1.5em;
  color: #777;
`;

// src/components/Mbti.js
import { useDispatch, useSelector } from 'react-redux';
import styled from 'styled-components';
import SkyBlueButton from './SkyblueButton';
import { next } from '../store/modules/mbti';

const SurveyQuestion = styled.p`
  font-size: 1.5em;
  color: #777;
`;

const Vs = styled.p`
  font-size: 2em;
  padding-top: 1em;
`;

export default function Mbti() {
  const survey = useSelector((state) => state.mbti.survey);
  const page = useSelector((state) => state.mbti.page);
  const dispatch = useDispatch();

  return (
    <>
      <SurveyQuestion>{survey[page - 1].question}</SurveyQuestion>
      <ul>
        {survey[page - 1].answer.map((el, index) => {
          return (
            <li key={index}>
              <SkyBlueButton
                text={el.text}
                clickEvent={() => {
                  dispatch(next());
                }}
              />
              {index === 0 && <Vs>VS</Vs>}
            </li>
          );
        })}
      </ul>
    </>
  );
}

 

🚩 Progress Bar 만들기, 삽입

• 값은 현재 page / 전체 설문 배열의 길이
• Progress Bar의 바깥 부분을 먼저 그리고, 자식 요소가 부모의 크기를 상속한 다음 색을 입혀서 %로 구현

// src/components/Progress.js
import styled from 'styled-components';

export default function Progress({ page, maxPage }) {
  return (
    <MyProgress>
      <div>
        {page} / {maxPage}
      </div>
      <Fill>
        <Gauge percent={(page / maxPage) * 100}></Gauge>
      </Fill>
    </MyProgress>
  );
}

const MyProgress = styled.div`
  margin-top: 3em;
`;

const Fill = styled.div`
  width: 100%;
  height: 10px;
  background-color: #777;
  margin-top: 1em;
  text-align: left;
`;

const Gauge = styled.div`
  background-color: skyblue;
  display: inline-block;
  height: inherit;
  position: relative;
  top: -4px;
  width: ${(props) => props.percent}%;
`;

// src/components/Mbti.js
    return (
        <>
          <SurveyQuestion>{survey[page - 1].question}</SurveyQuestion>
          <ul>
            {survey[page - 1].answer.map((el, index) => {
              return (
                <li key={index}>
                  <SkyBlueButton
                    text={el.text}
                    clickEvent={() => {
                      dispatch(check(el.result));
                    }}
                  />
                  {index === 0 && <Vs>VS</Vs>}
                </li>
              );
            })}
          </ul>
          <Progress page={page} maxPage={survey.length} />
        </>
    );

 

🚩 결과를 만드는 check() 액션 생성 함수 삽입

• check()는 전달 받은 결과를 mbtiResult라는 문자열에 추가해주기 때문에 함수를 호출할 때 설문 객체에 포함된 결과 문자열만 전달하면 됨

// src/components/Mbti.js
    return (
        <>
          <SurveyQuestion>{survey[page - 1].question}</SurveyQuestion>
          <ul>
            {survey[page - 1].answer.map((el, index) => {
              return (
                <li key={index}>
                  <SkyBlueButton
                    text={el.text}
                    clickEvent={() => {
                      dispatch(check(el.result));
                      dispatch(next());
                    }}
                  />
                  {index === 0 && <Vs>VS</Vs>}
                </li>
              );
            })}
          </ul>
          <Progress page={page} maxPage={survey.length} />
        </>
     );

 

🚩 redux에 모인 결과 출력, reset() 액션 생성 함수 전달

• redux에서 mbtiResult 값과, 결과 값에 맞는 설명 + 이미지를 출력
• 다시하기 버튼에 dispatch를 통해 함수 전달

// src/components/Show.js
import { useDispatch, useSelector } from 'react-redux';
import styled from 'styled-components';
import { reset } from '../store/modules/mbti';
import OrangeButton from './OrangeButton';

export default function Show() {
  const result = useSelector((state) => state.mbti.mbtiResult);
  const explanation = useSelector((state) => state.mbti.explanation[result]);
  const dispatch = useDispatch();

  return (
    <>
      <Header>당신의 개발자 MBTI 결과는?</Header>
      <Explanation>{explanation.text}</Explanation>
      <Result>{result}</Result>
      <Additional>이건 재미로 읽어 보세요!</Additional>
      <AdditionalImg src={explanation.img} alt="팩폭" />
      <OrangeButton text="다시 검사하기" clickEvent={() => dispatch(reset())} />
    </>
  );
}

const Header = styled.p`
  font-size: 3em;
`;

const Explanation = styled.p`
  font-size: 1.5em;
  color: #777;
`;

const Result = styled.p`
  font-size: 3em;
  color: dodgerblue;
`;

const Additional = styled.p`
  font-size: 2em;
  color: orange;
`;

const AdditionalImg = styled.img`
  width: 500px;
  transform: translateX(-35px);
`;