고스락 티켓 예매 프로젝트-(3)관리자 페이지_랜딩 페이지

이 부분은 쉽게 만들 수 있었다. 이미 3월에 만들어 놓은 css부분이 있어서 css는 그대로 적용 하였다.

 

import React, { useState, useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Box } from './Box';
import { Table } from 'antd';
import { LandingPage } from '../../state/actions-creators/LandingPage';

function Landing_Page() {
  const dispatch = useDispatch();
  const { data } = useSelector(state => state.LandingPage);

  useEffect(() => {
    dispatch(LandingPage());
  }, [dispatch]);

  return (
    <div style={{ display: 'flex' }}>
      <ul>
        <p
          style={{ fontWeight: 'bold', fontSize: '14px', marginBottom: '20px' }}
        >
          티켓 관련
        </p>

        {data && (
          <div>
            <Box data={data?.totalTicket} title={'링크 발급된 티켓'}>
              {' '}
            </Box>

            <Box data={data?.depositedTicket} title={'입금 확인된 티켓'}>
              {' '}
            </Box>

            <Box data={data?.income} title={'판매대금'}>
              {' '}
            </Box>
          </div>
        )}

        <p
          style={{ fontWeight: 'bold', fontSize: '14px', marginBottom: '20px' }}
        >
          입금 관련
        </p>
        {data && (
          <div>
            <Box data={data?.doneOrder} title={'입금 확인 완료'}>
              {' '}
            </Box>

            <Box data={data?.waitOrder} title={'입금 확인 중'}>
              {' '}
            </Box>

            <Box data={data?.expireOrder} title={'미입금 처리'}>
              {' '}
            </Box>
          </div>
        )}

        <p
          style={{ fontWeight: 'bold', fontSize: '14px', marginBottom: '20px' }}
        >
          입장 확인 관련
        </p>
        {data && (
          <div>
            <Box data={data?.enteredTicket} title={'입장 확인된 티켓'}>
              {' '}
            </Box>

            <Box data={data?.nonEnteredTicket} title={'입장 확인 안 된 티켓'}>
              {' '}
            </Box>
          </div>
        )}
      </ul>

      {/* {RandomComment()} */}
    </div>
  );
}

export default Landing_Page;

랜딩페이지에서도 useDispatch()를 사용하였다. useSelector사용해서 data를 기본으로 가져와서 적용을 쉽게 할 수 있었다.

useEffect를 이용해서 바로 dispatch로 actions creators에 있는 페이지를 import해서 axios를 통해서 api 값을 서버에서 손쉽게 가져올 수 있었다. 티켓 페이지 구현을 완성하고 랜딩페이지를 하니까 감도 잡혔고 뻘짓도 점점 줄여갔습니다... 

//src/state/actions-creators/LandingPage.js

import axios from 'axios';
import { LANDING_PAGE_SUCCESS, LANDING_PAGE_ERROR } from '../action-types';

export const LandingPage = callback => async dispatch => {
  try {
    const response = await axios.get(
      `https://api.gosrock.band/v1/orders/report`
    );

    const newData = response.data.data;
    const data = {
      totalTicket: newData.ticketReport.totalTicket,
      depositedTicket: newData.ticketReport.depositedTicket,
      income: newData.income,
      doneOrder: newData.orderReport.doneOrder,
      waitOrder: newData.orderReport.waitOrder,
      expireOrder: newData.orderReport.waitOrder,
      enteredTicket: newData.enterReport.enteredTicket,
      nonEnteredTicket: newData.enterReport.nonEnteredTicket
    };

    dispatch({ type: LANDING_PAGE_SUCCESS, payload: data });

    // 자동으로 피쳐로 넘어가게끔
    // callback();
  } catch (e) {
    //400 ~
    dispatch({ type: LANDING_PAGE_ERROR, payload: '조회 실패' });
  }
};

여기서도 axios를 이용하여 api를 가져와서 data를 만들어주어 필요한 값들을 선언해주었다. newData를 response.data.data로 선언해서 코드의 간결함을
높이는 것도 기억에 남는다. 그리고 try catch를 써서 만약에 api를 가져오지 못했다면 오류가 났다는 부분도 dispatch로 구현해주었다.
랜딩 페이지 하면서는 그러진 않았지만 티켓페이지 할때 아예 백지 상태였을 때 계속 사소한 오타로 401에러 났던 기억이 난다....처음에는 뭔지도 모르겠는데 에러가 나서
정말로 답답했던 기억이 나네요.

//src/state/reducers/LandingPage.js


/* eslint-disable import/no-anonymous-default-export */
import { LANDING_PAGE_SUCCESS, LANDING_PAGE_ERROR } from '../action-types';

export default function (
  state = {
    data: {
      totalTicket: 0,
      depositedTicket: 0,
      income: 0,
      doneOrder: 0,
      waitOrder: 0,
      expireOrder: 0,
      enteredTicket: 0,
      nonEnteredTicket: 0
    },
    error: null
  },
  action
) {
  switch (action.type) {
    case LANDING_PAGE_SUCCESS:
      return { ...state, data: action.payload, error: action.payload };
    case LANDING_PAGE_ERROR:
      return { ...state, data: [], error: action.payload };

    default:
      return state;
  }
}

reducer에서는 data의 초기값을 선언해주고 action.type마다 다른 return값을 선언해 주었다.

//src/state/action-types/LandingPage.js

export const LANDING_PAGE_SUCCESS = 'LANDING_PAGE_SUCCESS';
export const LANDING_PAGE_ERROR = 'LANING_PAGE_ERROR';

 

티켓페이지 구현코드보다 훨씬 더 간단하죵?

다음글에서 다룰 댓글 추첨부분은 훨씬 더 간단합니다!