[Nextjs] 주식사이트 만들기-9 코인 정보 카드 만들기 (Intl.NumberFormat)

이번의 결과물은 이렇다.

 

 

이번에는 코인 거래량 대비 최고, 최저 / 전일대비 최고 상승, 하락률 정보 카드를 만들 것이다.

먼저, 거래량 데이터는 적게는 수백만 많게는 수십억 단위이기 때문에 단위 변경이 필요하다.

 

 

ES2020 부터는 number 값을 원하는대로 변경시켜주는 (가령, 거리단위, 화폐단위 등등 나라별도 가능) 기능이 생겼다.

바로 Intl.NumberFormat 이다.

사용법은 단순하다.

 

const MilBilCal = (value: number) => {
  let formatter = Intl.NumberFormat("en", { notation: "compact" });
  return formatter.format(value);
};

export default MilBilCal;

"en" => 나라 "compact" => 단위 라고 생각하면 편하다.

이것을 이용해 volume 값을 단위변환시켜주어 만들 예정이다.

 

 

먼저 코인 정보 카드를 구성하는 카드부터 만들었다.

- coinInfoCard.tsx

import MilBilCal from "../../functions/milBilCal";

type Props = {
  data: any;
  title: string;
};

const CoinInfoCard: React.FC<Props> = ({ data, title }) => {
  return (
    <div className=" bg-white  rounded-lg">
      <h3 className=" font-bold text-xl pl-5 pr-16 py-5">{title}</h3>
      <hr className=" bg-black" />
      <div className=" flex flex-row items-center justify-between px-3 pt-3">
        <div className=" flex flex-row items-center">
          <img src={data.iconUrl} className=" w-8 h-8" />
          <h3 className=" font-bold">{data.symbol}</h3>
        </div>
        <div
          className={
            data.change > 0
              ? " bg-green-400 rounded-md px-1"
              : "bg-red-400 rounded-md px-1"
          }
        >
          <h3 className=" font-bold text-white text-sm">{data.change + "%"}</h3>
        </div>
      </div>
      <div className=" p-3 flex flex-col">
        <h3 className=" font-bold text-lg">
          {parseFloat(data.price) < 100
            ? parseFloat(data.price).toLocaleString(undefined, {
                maximumFractionDigits: 4,
              }) +
              " " +
              "$"
            : parseFloat(data.price).toLocaleString(undefined, {
                maximumFractionDigits: 2,
              }) +
              " " +
              "$"}
        </h3>
        <h3 className=" text-sm text-gray-500 py-2">
          {"24H Turnover" + " " + MilBilCal(data.volume) + "[USD]"}
        </h3>
      </div>
    </div>
  );
};

export default CoinInfoCard;

 

데이터 정렬 방법은 이전 블로그 게시물에 있다.

 

https://bugerstory.tistory.com/60

Unhandled Runtime Error 시 해결 방법

 

 

다음으로 코인 정보 카드를 담는 컨테이너를 만들었다.

 

 

- coinHot.tsx

import { useState } from "react";
import CoinInfoCard from "../../components/coin/coinInfoCard";

type CoinHotProps = {
  data: any;
};

const CoinHot: React.FC<CoinHotProps> = ({ data }) => {
  const [number, setNumber] = useState(0);
  const changeDescData = () => {
    const dataArray: any[] = [];
    for (let i = 0; i < data?.length; i++) {
      dataArray.push(data[i]);
    }
    dataArray.sort(
      (a: any, b: any) => parseFloat(a.change) - parseFloat(b.change)
    );
    return dataArray;
  };
  const volumeDescData = () => {
    const dataArray: any[] = [];
    for (let i = 0; i < data?.length; i++) {
      dataArray.push(data[i]);
    }
    dataArray.sort(
      (a: any, b: any) => parseFloat(a.volume) - parseFloat(b.volume)
    );
    return dataArray;
  };

  return (
    <div className=" flex flex-col p-5 w-10/12">
      <h3 className=" py-5 text-3xl font-extrabold">Market Trends</h3>
      <div className=" flex flex-row">
        <CoinInfoCard
          data={volumeDescData()[changeDescData().length - 1]}
          title="Highest 24H Turnover"
        />
        <CoinInfoCard data={volumeDescData()[0]} title="Lowest 24H Turnover" />
        <CoinInfoCard
          data={changeDescData()[changeDescData().length - 1]}
          title="Max 24H Change  %"
        />
        <CoinInfoCard data={changeDescData()[0]} title="Min 24H Change  %" />
      </div>
    </div>
  );
};

export default CoinHot;

 

 

- 결과물

 

 

지금부터는 코인차트를 좀 더 만진 후, github에 퍼블리싱작업을 할 것이다.

 

(아래 작업에서 못다 해결한 문제들을 해결할 예정이다.)

https://bugerstory.tistory.com/56

[Nextjs] 주식사이트 만들기-7 채팅 프론트엔드 Apollo client - polling & refetch 를 이용한 실시간 채팅 구