오늘 한 일

뷰타입에 따라 코인정보 다르게 표시하는 기능

/* CoinInfoComponent.tsx */
import { useEffect, useMemo, useState } from 'react';
import Image from 'next/image';
import { dummyCoinData } from '@pages/datazone';
import Dropdown from '@components/Common/Dropdown';
import { MarketList } from 'src/lib/MarketList';
import CoinInfoCard from '@components/Datazone/CoinInfo/Card';
import _ from 'lodash';
const CoinInfoComponent = () => {
  const [ViewType, setViewType] = useState('card');
  const [CoinInfoData, setCoinInfoData] = useState(dummyCoinData);
  const handleMarket = (value) => {
    setMarket(value);
  };
  /* 뷰타뼐 컴포넌트 */

  const CardView = (props) => {
    const columns = props.columns;
    /* 검색결과가 없는 경우 NoSearchResult 컴포넌트 리턴 */
    /* 이름/가격/24시간/거래량(24h)에 따른 필터 기능 추가 */
    /* useState로 정렬된 데이터 set하기 */
    return (
      <>
        <div
          className="sort-filter"
          style={{ padding: '0 1.25rem', marginBottom: '0.625rem' }}
        >
          <div>
            <span>이름</span>
            <div>{/* 필터 아이콘 */}</div>
          </div>
          <div>
            <span>가격</span>
          </div>
          <div>
            <span>24시간</span>
          </div>
          <div>
            <span>거래량(24h)</span>
          </div>
        </div>
        <div className="card">
          {CoinInfoData.map((el, index) => {
            return <CoinInfoCard key={index} {...el}></CoinInfoCard>;
          })}
        </div>
      </>
    );
  };

  const ListView = (props) => {
    return <>
      // 커스텀
      </>;
  };

  return (
    <>
      <div className="datazone container coininfo">
        <div className="header">
          <div className="title">코인정보</div>
          <div className="sort">
            <div
              className={ViewType === 'list' ? `active list` : 'list'}
              onClick={() => setViewType('list')}
            />
            <div
              className={ViewType === 'card' ? `active card` : 'card'}
              onClick={() => setViewType('card')}
            />
          </div>
        </div>
        <div className="body">
          <div className="searchbar">
            <Dropdown
              onChange={handleMarket}
              itemList={MarketList.slice(0, 3)}
              placeholder="거래소 선택"
              defaultValue={MarketList.slice(0, 3)[0]}
            />
            <div className="coin input">
              <input
                placeholder="비트코인, BTC"
                className="search"
                type="search"
              />
            </div>
          </div>

          {ViewType === 'card' ? <CardView /> : <ListView />}
        </div>
      </div>
    </>
  );
};
export default CoinInfoComponent;