table-ranking-100

src/@types/index.d.ts

@@ -311,6 +311,7 @@ declare module 'metarare' {
 
     export interface ISalesRanking {
         id: number;
+        rank: number;
         name: string;
         thumbnail_image: string;
         total_revenue: number;

src/components/common/RankingTable.scss

@@ -0,0 +1,96 @@
+@import "assets/css/_lib";
+
+.table_wrapper {
+    margin-top: 20px;
+    font-size: 12px;
+    @include pc {
+        font-size: 16px;
+    }
+    &>table {
+        width: 100%;
+        border-collapse: collapse;
+        border-spacing: 0;
+
+        thead {
+            tr {
+                th {
+                    height: 40px;
+                    padding: 0 10px;
+                    font-size: 1em;
+                    font-weight: 400;
+                    color: #888;
+                    text-align: left;
+                    border-bottom: 1px solid #ddd;
+
+                    &:first-child {
+                        padding-left: 0;
+                    }
+
+                    &:last-child {
+                        padding-right: 0;
+                        text-align: center;
+                    }
+                }
+            }
+        }
+
+        tbody {
+            tr {
+                height: 60px;
+
+                td {
+                    padding: 0 10px;
+                    font-size: 1em;
+                    font-weight: 400;
+                    color: #333;
+                    border-bottom: 1px solid #ddd;
+                    padding: 20px 10px;
+
+                    &:first-child {
+                        padding-right: 0;
+                    }
+
+                    &:last-child {
+                        padding-right: 0;
+                    }
+                }
+
+                .rank {
+                    margin-right: 10px;
+                    &>div {
+                        margin: auto;
+                        width: 24px;
+                        height: 24px;
+                        border-radius: 50%;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        font-family: 'HelveticaNeue', 'Helvetica', arial, 'sans-serif' !important;
+                        font-size: 0.8em;
+                        color: #fff;
+                        z-index: 1;
+                    }
+                }
+
+                .name{
+                    max-width: 100px;
+                    @include ellipsis;
+                }
+                .thumbnail_image {
+                    width: 64px;
+
+                    &>img {
+                        width: 64px;
+                        height: 64px;
+                        margin-right: 10px;
+                        border-radius: 50%;
+                        vertical-align: middle;
+                    }
+                }
+                .total_revenue{
+                    text-align: center;
+                }
+            }
+        }
+    }
+}

src/components/common/RankingTable.tsx

@@ -0,0 +1,52 @@
+import { ISalesRanking } from "metarare";
+import * as React from "react";
+import styles from "./RankingTable.scss";
+import classNames from "classnames/bind";
+import currency from "currency.js";
+
+const cx = classNames.bind(styles);
+
+export interface IRankingTableProps{
+    data: ISalesRanking[];
+}
+
+export default function RankingTable({data}: IRankingTableProps) {
+  const header = ["", "Store", "", "Total Value"];
+  const renderColor = (rank: number) => {
+    if (rank === 1) return "#ffd700";
+    if (rank === 2) return "#c0c0c0";
+    if (rank === 3) return "#cd7f32";
+    return "#3d3d3d";
+  };
+  return (
+    <div className={cx("table_wrapper")}>
+      <table>
+        <thead>
+          <tr>
+            {header.map((item, index) => (
+              <th key={index}>{item}</th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {data.map((item, index) => (
+            <tr key={"custom-table-ranking" + index}>
+              <td className={cx("rank")}>
+                <div style={{
+                    background: renderColor(item.rank)
+                }}>{item.rank}</div></td>
+              <td className={cx("thumbnail_image")}>
+                <img src={item.thumbnail_image} alt={item.name} />
+              </td>
+              <td className={cx("name")}>{item.name}</td>
+              <td className={cx("total_revenue")}>{currency(item.total_revenue).format({
+                    symbol: "$",
+                    precision: 0,
+              })}</td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+}

src/components/common/SaleRankingCard.tsx

@@ -12,7 +12,7 @@ export interface ISalesRankingCardProps extends ISalesRanking {
 }
 
 export default function SalesRankingCard({
-  id: rank,
+  rank,
   name,
   thumbnail_image,
   className,

src/containers/common/ArtistsScrollList.tsx

@@ -23,51 +23,51 @@ const dataFake: IArtist[] = [
     {
         id: 1,
         name: 'John Doe',
-        thumbnail_image: 'https://picsum.photos/300/300',
+        thumbnail_image: 'https://picsum.photos/id/20/300/300',
     },
     {
         id: 2,
         name: 'Kasper Henderson',
-        thumbnail_image: 'https://picsum.photos/300/300',
+        thumbnail_image: 'https://picsum.photos/id/21/300/300',
     },
     {
         id: 3,
         name: 'Cooper Lynn',
-        thumbnail_image: 'https://picsum.photos/300/300',
+        thumbnail_image: 'https://picsum.photos/id/22/300/300',
     },
     {
         id: 4,
         name: 'Iris Stein',
-        thumbnail_image: 'https://picsum.photos/300/300',
+        thumbnail_image: 'https://picsum.photos/id/23/300/300',
     },
     {
         id: 5,
         name: 'Leland Richards',
-        thumbnail_image: 'https://picsum.photos/300/300',
+        thumbnail_image: 'https://picsum.photos/id/24/300/300',
     },
     {
         id: 6,
         name: 'Octavia Norris',
-        thumbnail_image: 'https://picsum.photos/300/300',
+        thumbnail_image: 'https://picsum.photos/id/25/300/300',
     },
     {
         id: 7,
         name: 'Leland Richards',
-        thumbnail_image: 'https://picsum.photos/300/300',
+        thumbnail_image: 'https://picsum.photos/id/26/300/300',
     },
     {
         id: 8,
         name: 'Octavia Norris',
-        thumbnail_image: 'https://picsum.photos/300/300',
+        thumbnail_image: 'https://picsum.photos/id/27/300/300',
     },
     {
         id: 9,
         name: 'Leland Richards',
-        thumbnail_image: 'https://picsum.photos/300/300',
+        thumbnail_image: 'https://picsum.photos/id/28/300/300',
     },
     {
         id: 10,
         name: 'Octavia Norris',
-        thumbnail_image: 'https://picsum.photos/300/300',
+        thumbnail_image: 'https://picsum.photos/id/29/300/300',
     }
 ]

src/containers/common/SalesRankingscrollList.tsx

@@ -9,74 +9,84 @@ export default function SalesRankingScrollList(props: ISalesRankingScrollListPro
   return (
     <>
       <div className={"mo_wrapper"}>
-        <MobileSalesRankingScrollList list={dataFake} />
+        <MobileSalesRankingScrollList list={dataRankingFake} />
       </div>
       <div className={"pc_wrapper"}>
-        <PCSalesRankingScrollList list={dataFake} />
+        <PCSalesRankingScrollList list={dataRankingFake} />
       </div>
     </>
   );
 }
 
-const dataFake: ISalesRanking[] = [
+export const dataRankingFake: ISalesRanking[] = [
   {
     id: 1,
+    rank: 1,
     name: "John Doe",
-    thumbnail_image: "https://picsum.photos/300/300",
+    thumbnail_image: "https://picsum.photos/id/10/300/300",
     total_revenue: 100000,
   },
   {
     id: 2,
-    name: "Kasper Henderson",
-    thumbnail_image: "https://picsum.photos/300/300",
+    rank: 2,
+    name: "Kasper Henderson Kasper Henderson Kasper Henderson",
+    thumbnail_image: "https://picsum.photos/id/11/300/300",
     total_revenue: 90000,
   },
   {
     id: 3,
+    rank: 3,
     name: "Cooper Lynn",
-    thumbnail_image: "https://picsum.photos/300/300",
+    thumbnail_image: "https://picsum.photos/id/12/300/300",
     total_revenue: 80000,
   },
   {
     id: 4,
+    rank: 4,
     name: "Iris Stein",
-    thumbnail_image: "https://picsum.photos/300/300",
+    thumbnail_image: "https://picsum.photos/id/13/300/300",
     total_revenue: 70000,
   },
   {
     id: 5,
+    rank: 5,
     name: "Leland Richards",
-    thumbnail_image: "https://picsum.photos/300/300",
+    thumbnail_image: "https://picsum.photos/id/14/300/300",
     total_revenue: 60000,
   },
   {
     id: 6,
+    rank: 6,
     name: "Octavia Norris",
-    thumbnail_image: "https://picsum.photos/300/300",
+    thumbnail_image: "https://picsum.photos/id/15/300/300",
     total_revenue: 50000,
   },
   {
     id: 7,
+    rank: 7,
     name: "Leland Richards",
-    thumbnail_image: "https://picsum.photos/300/300",
+    thumbnail_image: "https://picsum.photos/id/16/300/300",
     total_revenue: 40000,
   },
   {
     id: 8,
+    rank: 8,
     name: "Octavia Norris",
-    thumbnail_image: "https://picsum.photos/300/300",
+    thumbnail_image: "https://picsum.photos/id/17/300/300",
     total_revenue: 30000,
   },
   {
     id: 9,
+    rank: 9,
     name: "Leland Richards",
-    thumbnail_image: "https://picsum.photos/300/300",
+    thumbnail_image: "https://picsum.photos/id/18/300/300",
     total_revenue: 20000,
   },
   {
     id: 10,
+    rank: 10,
     name: "Octavia Norris",
-    thumbnail_image: "https://picsum.photos/300/300",
+    thumbnail_image: "https://picsum.photos/id/19/300/300",
     total_revenue: 10000,
   },
 ];

src/pages/Home.tsx

@@ -13,6 +13,8 @@ import Loading from '@src/components/common/Loading';
 import useMore from '@src/hooks/useMore';
 import ArtistsScrollList from '@src/containers/common/ArtistsScrollList';
 import SalesRankingScrollList from '@src/containers/common/SalesRankingscrollList';
+import { Link } from 'react-router-dom';
+import URLInfo from '@src/constants/URLInfo';
 
 const cx = classNames.bind(styles);
 
@@ -54,37 +56,37 @@ const Home: React.FC = () => {
   }, [location.pathname]);
 
   return (
-    <div className={cx('home')}>
+    <div className={cx("home")}>
       {isLoaded ? (
         <Loading />
       ) : (
         <>
           {!!data?.curating_list.length && (
-            <div className={cx('banner_group')}>
+            <div className={cx("banner_group")}>
               <BannerScrollList list={data.curating_list} />
             </div>
           )}
           {!!data?.special_bids.length && (
-            <div className={cx('home_group')}>
-              <strong className={cx('home_title')}>Special Bids 🌟</strong>
+            <div className={cx("home_group")}>
+              <strong className={cx("home_title")}>Special Bids 🌟</strong>
               <NFTScrollList list={data.special_bids} />
             </div>
           )}
           {!!data?.hot_bids.length && (
-            <div className={cx('home_group')}>
-              <strong className={cx('home_title')}>지금 뜨는 Bids 🚀</strong>
+            <div className={cx("home_group")}>
+              <strong className={cx("home_title")}>지금 뜨는 Bids 🚀</strong>
               <NFTScrollList list={data.hot_bids} />
             </div>
           )}
           {!!data?.time_auctions.length && (
-            <div className={cx('home_group')}>
-              <strong className={cx('home_title')}>타임옥션 🔥</strong>
+            <div className={cx("home_group")}>
+              <strong className={cx("home_title")}>타임옥션 🔥</strong>
               <NFTScrollList list={data.time_auctions} />
             </div>
           )}
           {!!data?.collections.length && (
-            <div className={cx('home_group')}>
-              <strong className={cx('home_title')}>인기 콜렉션 🎉</strong>
+            <div className={cx("home_group")}>
+              <strong className={cx("home_title")}>인기 콜렉션 🎉</strong>
               <CollectionScrollList list={data.collections} />
             </div>
           )}
@@ -92,18 +94,22 @@ const Home: React.FC = () => {
             <strong className={cx('home_title')}>탐색하기 🔍</strong>
             <ExploreContentContainer list={filterProps.exploreList} filterProps={filterProps} handler={filterHandler} onClickMore={onClickMore} showMore={showMore} isLoaded={isExploreListLoaded} />
           </div> */}
-          <div className={cx('home_group')}>
-            <strong className={cx('home_title')}>Registered Artists 🧑‍🎨</strong>
+          <div className={cx("home_group")}>
+            <strong className={cx("home_title")}>Registered Artists 🧑‍🎨</strong>
             <ArtistsScrollList />
           </div>
-          <div className={cx('home_group')}>
-            <strong className={cx('home_title')}>Sales Ranking 🏆 <a className={cx('see_more')}>Sea more</a></strong>
+          <div className={cx("home_group")}>
+            <strong className={cx("home_title")}>
+              Sales Ranking 🏆{" "}
+              <Link to={URLInfo.RANKING} className={cx("see_more")}>
+                See more
+              </Link>
+            </strong>
             <SalesRankingScrollList />
           </div>
         </>
       )}
     </div>
-
   );
 };
 

src/pages/Login.tsx

@@ -82,7 +82,7 @@ const Login: React.FC<IOwnProps> = ({ }) => {
         <br />
         <button type="button" className={cx('btn', 'google')} onClick={() => handleClickLogin(ESNSType.GOOGLE)}>
           <img src="/static/img/png/ico_google.png" alt="" />
-          {selectedTab === ELoginTabType.REGISTER ? 'Login / Sign up with google ID' : 'Login / Sign up'}
+          {selectedTab === ELoginTabType.REGISTER ? 'Sign up with google ID' : 'Login with google ID'}
         </button>
         {/* <button type="button" className={cx('btn', 'kakao')}>
           <img src="/static/img/png/ico_kakao.png" alt="" />

src/pages/Ranking.tsx

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import classNames from 'classnames/bind';
 import styles from './Ranking.scss';
+import RankingTable from '@src/components/common/RankingTable';
+import { dataRankingFake } from '@src/containers/common/SalesRankingscrollList';
 
 const cx = classNames.bind(styles);
 
@@ -11,7 +13,7 @@ export default function Ranking (props: IRankingProps) {
   return (
     <div className={cx('ranking')}>
         <div className={cx('title')}>랭킹</div>
-        
+        <RankingTable data={dataRankingFake} />
     </div>
   );
 }