今日やったこと

データムテーブル構成部品

表ヘッダー構成部品

/* CoinInfoTable.tsx */
// 테이블 헤더 컴포넌트
const CoinInfoTableHeader = (props: any) => {
  return (
    <div className="coininfo-table header">
      <div className="coinSymbol">
        <span>이름</span>
      </div>
      <div className="currentPrice">
        <span>가격</span>
      </div>
      <div className="percentChange24h">
        <span>24시간</span>
      </div>
      <div className="volume24h">
        <span>거래량(24h)</span>
      </div>
    </div>
  );
};

// 테이블 열 컴포넌트
const CoinInfoTableItem = (props: any) => {
  const [ExpandVisible, setExpandVisible] = useState(false);
  const handleExpand = (e) => {
    setExpandVisible(!ExpandVisible);
  };
  const { data } = props;

  return (
    <>
      <div
        className={
          ExpandVisible ? `coininfo-table row open` : `coininfo-table row`
        }
      >
        {/* 이름/가격/차액/거래량 */}
        <div className="coinSymbol">
          <div className="coinNm">
            <Image
              src={data.logo}
              width={12}
              height={12}
              className="coinSymbol"
            />
            <span className="coinNm">{data.coinNm}</span>
          </div>
          <div className="coinSymbol">
            <FavoriteButton
              coinSymbol={data.coinSymbol}
              showErrMsg={function (): void {
                throw new Error('Function not implemented.');
              }}
            />
            <span className="coinSymbol">{data.coinSymbol}</span>
            <Image src="/svg/graph_icon.svg" width={12} height={10.5} />
          </div>
        </div>
        <div className="currentPrice">
          <span>{coinPriceFnc(data.currentPrice)}</span>
        </div>
        <div className="percentChange24h">
          <span className={data.percentChange24h > 0 ? `plus` : `minus`}>
            {roundFnc(data.percentChange24h)}%
          </span>
        </div>
        <div className="volume24h">
          <span>
            <span>{volumeFnc(data.volume24h)}</span>
            <span>&nbsp;백만</span>
          </span>
          <div
            className={ExpandVisible ? `expand-icon open` : `expand-icon`}
            onClick={handleExpand}
          ></div>
        </div>
      </div>
      {ExpandVisible ? <CoinInfoExpand data={data} /> : null}
    </>
  );
};

// 테이블 열을 클릭했을 때 보여지는 상세 정보 
const CoinInfoExpand = (props) => {
  const { data } = props;
  return (
    <div className="coininfo-table row-expand">
      <div className="top">
        <div className="currentPrice item">
          <span className="label">가격</span>
          <span>{coinPriceFnc(data.currentPrice)}</span>
        </div>
        <div className="percentChange1h item">
          <span className="label">1시간</span>
          <span className={data.percentChange1h > 0 ? `plus` : `minus`}>
            {roundFnc(data.percentChange1h)}%
          </span>
        </div>
        <div className="percentChange24h item">
          <span className="label">24시간</span>
          <span className={data.percentChange24h > 0 ? `plus` : `minus`}>
            {roundFnc(data.percentChange24h)}%
          </span>
        </div>
      </div>
      <div className="bottom">
        <div className="percentChange7d item">
          <span className="label">7일</span>
          <span className={data.percentChange7d > 0 ? `plus` : `minus`}>
            {roundFnc(data.percentChange7d)}%
          </span>
        </div>
        <div className="marketCap item">
          <span className="label">시가총액</span>
          <span>
            <span>{volumeFnc(data.marketCap)}</span>
            <span>&nbsp;백만</span>
          </span>
        </div>
        <div className="volume24h item">
          <span className="label">거래량(24h)</span>
          <span>
            <span>{volumeFnc(data.volume24h)}</span>
            <span>&nbsp;백만</span>
          </span>
        </div>
      </div>
      <div className="btn-group">
        <div>공시</div>
        <div>비교</div>
      </div>
    </div>
  );
};

// 상단의 하위 컴포넌트를 모두 합친 테이블 컴포넌트
const CoinInfoTable = (props: any) => {
  const { market } = props;
  const [TableData, setTableData] = useState(dummyCoinInfoData.datas);
  const [Order, setOrder] = useState('');
  const [OrderType, setOrderType] = useState<'' | 'ASC' | 'DESC'>('');
  const handleASC = (value) => {
    if (OrderType === 'DESC') {
      setOrderType('ASC');
    } else {
      setOrderType('DESC');
    }
  };
  useEffect(() => {
    /* props로 내려받는 거래소 유형이 바뀔 때마다 setTableData 실행 */
  }, [market]);
  
  useEffect(() => {
    /* TODO: Order/OrderType이 바뀔 때마다 TableData state 업데이트 */
  }, [Order, OrderType]);
  return (
    <div className="coininfo-table wrapper">
      <CoinInfoTableHeader />
      <div className="coininfo-table body">
        {TableData.map((el, index) => {
          return <CoinInfoTableItem key={index} data={el} />;
        })}
      </div>
    </div>
  );
};

export default CoinInfoTable;

「執筆ページの移動」ボタン

/* WriteButton * ?

import Image from 'next/image';
import { useRouter } from 'next/router';
/* 이동해야할 게시판 URL, 카테고리(router.query) */
interface IProps {
  category: string;
}
const WriteButton = (props) => {
  const { category } = props;
  const router = useRouter();
  return (
    <button
      className="write-btn"
      onClick={() => router.push({pathname: '/m/community/write';
                                 query: {category: category})}
    >
      <Image src="/svg/write_button.svg" width={15} height={18} />
    </button>
  );
};

export default WriteButton;

// _write-button.scss

.write-btn {
  max-width: 3.125rem;
  max-height: 3.125rem;
  min-width: 3.125rem;
  min-height: 3.125rem;
  background-color: #fff;
  border: $border-style-default;
  border-radius: 50%;
  box-shadow: 0 3px 13px 0 #eaeef1;
}