[Project] 2일차

API 확인

axios를 사용해서 API를 호출한다. 호출하는 API는 두 종류로 실시간 경락가격과 정산 가격을 확인할 수 있다.

항목명(국문)	항목명(영문)	크기	구분	샘플데이터
서비스키	serviceKey	-	필수	-
API유형	apiType	4	필수	json
페이지 번호	pageNo	-	필수	1
정산일자	saleDate	8	필수	20210622
도매시장코드	whsalCd	6	필수	110001
법인코드	cmpCd	8	옵션	11000101
대분류코드	largeCd	2	옵션	06
중분류코드	midCd	2	옵션	01
소분류코드	smallCd	2	옵션	01

이 표는 정산 가격확인을 위한 API의 요청 변수다. 실시간 경락가격의 경우 정산일지만 제외하면 동일하다.

확인해본 결과 정상적으로 데이터를 불러오는 것을 확인했다.

import axios from "axios";
import { SettlementPirceProps } from "../../src/Types/SettlementPriceType";

export const getSettlementPrice = async (query: SettlementPirceProps) => {
  try {
    const res = await axios.get("/agromarket-settle", {
      params: {
        serviceKey: query.serviceKey,
        apiType: query.apiType,
        pageNo: query.pageNo,
        saleDate: query.saleDate,
        whsalCd: query.whsalCd,
        cmpCd: query.cmpCd,
        largeCd: query.largeCd,
        midCd: query.midCd,
        smallCd: query.smallCd,
      },
    });
    if (res.status === 200) return res.data.data;
  } catch (error) {
    console.log("error", error);
    return error;
  }
};

UI 변경

기존에는 날짜(경락 정보일 경우에만 해당), 대분류, 중분류, 소분류를 선택해서 API를 요청하는 방식으로 만들려 했었는데, 생각해보니 저렇게 대분류 중분류 소분류로 사용자가 들어가서 확인하는것이 불편하다고 생각이 들었다. 예를 들어 농산물중 배추의 가격을 확인하고 싶다면 내가 찾고 싶은 경매시장의 배추 가격만을 확인하면 되는데, 배추의 대분류 중분류를 모른다면 여기저기 헤매다 찾아야 한다.
물론 농산물을 잘 알고 있는 사람이라면 단번에 대분류부터 소분류까지 원하는 농산물을 찾을 수 있겠지만 잘 모르는 사람의 경우 배추가 어떤 분류에 속하는지 알기 어렵다.
따라서 날짜(옵션), 도매시장, 상품명을 사용해서 원하는 정보를 얻어오도록 만든다.

또한 UI도 수정사항이 필요한데, 기존에는 가로로 Select를 늘어놓을 생각이었지만 모바일 환경을 우선으로 생각해야 했고, 폰트의 크기가 커질 수도 있기 때문에 Column 방향으로 수정한다.

이 처럼 날짜, 도매시장, 상품명을 통해서 원하는 농산물 데이터만 얻어올 수 있도록 만들어볼 예정이다.