artist-scroll-home

src/@types/index.d.ts

@@ -302,6 +302,12 @@ declare module 'metarare' {
         created_at: string;
         is_official: boolean;
     }
+
+    export interface IArtist {
+        id: number;
+        name: string;
+        thumbnail_image: string;
+    }
 }
 
 declare module '*.svg';

src/components/common/ArtistCard.scss

@@ -0,0 +1,41 @@
+@import "/assets/css/_lib";
+
+.artist_card {
+    position: relative;
+
+    &.scroll {
+        position: relative;
+        display: inline-block;
+        padding: 0 10px;
+        width: calc(50vw - 30px);
+        vertical-align: top;
+
+        @include pc {
+            width: 14%;
+            box-sizing: border-box;
+        }
+    }
+
+}
+
+.card_wrap {
+    position: relative;
+    overflow: hidden;
+    padding-bottom: 40px;
+    border-radius: 16px;
+    background-color: #fff;
+    box-sizing: border-box;
+    & > .thumb_area {
+        padding: 14%;
+        & > .thumb {
+            border-radius: 50%;
+            width: 100%;
+            aspect-ratio: 1;
+            height: auto;
+        }
+    }
+    & > .info_area{
+        text-align: center;
+        font-size: large;
+    }
+}

src/components/common/ArtistCard.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import styles from './ArtistCard.scss';
+import classNames from 'classnames/bind';
+import { Link } from 'react-router-dom';
+import Img from './Img';
+import { IArtist } from 'metarare';
+
+const cx = classNames.bind(styles);
+
+export interface IArtistCardProps extends IArtist {
+  className: string;
+}
+
+export default function ArtistCard ({
+  id,
+  name,
+  thumbnail_image,
+  className
+}: IArtistCardProps) {
+  return (
+    <div className={cx("artist_card", className )}>
+      <div className={cx("card_wrap")}>
+          <div className={cx("thumb_area")}>
+              <Img
+                src={thumbnail_image}
+                alt=""
+                width="260"
+                height="260"
+                className={cx("thumb")}
+              />
+           
+          </div>
+          <div className={cx("info_area")}>{name}</div>
+      </div>
+    </div>
+  );
+}

src/components/mobile/ArtistScrollList.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import classNames from 'classnames/bind';
+
+import Flicking from '@egjs/react-flicking';
+import styles from './NFTScrollList.scss';
+import NFTCard from '@src/components/common/NFTCard';
+import { IArtist, INFT } from 'metarare';
+import ArtistCard from '../common/ArtistCard';
+
+const cx = classNames.bind(styles);
+
+interface IOwnProps {
+  list: IArtist[];
+};
+
+const ArtistScrollList: React.FC<IOwnProps> = ({
+  list
+}) => {
+  return (
+    <div className={cx('nft_scroll')}>
+      <Flicking align="prev">
+        {list.map((item, index) => (
+          <div
+            key={`${item.id}_${index}`}
+            className={cx('nft_panel')}
+          >
+            <ArtistCard {...item} className='scroll' />
+          </div>
+        ))}
+      </Flicking>
+    </div>
+  );
+};
+
+export default ArtistScrollList;

src/components/pc/ArtistScrollList.tsx

@@ -0,0 +1,59 @@
+import React, { useEffect, useState } from 'react';
+import classNames from 'classnames/bind';
+
+import Flicking, { ViewportSlot } from '@egjs/react-flicking';
+import { Arrow } from '@egjs/flicking-plugins';
+import styles from './NFTScrollList.scss';
+import NFTCard from '@src/components/common/NFTCard';
+import { IArtist, INFT } from 'metarare';
+import ArtistCard from '../common/ArtistCard';
+
+const cx = classNames.bind(styles);
+
+interface IOwnProps {
+  list: IArtist[];
+};
+
+const PANEL_COUNT = 7;
+
+const ArtistScrollList: React.FC<IOwnProps> = ({
+  list
+}) => {
+  const plugins = [new Arrow()];
+  const [panel, setPanel] = useState<IArtist[][]>([]);
+
+  useEffect(() => {
+    if (list?.length) {
+      const panel = [];
+      for (let i = 0; i < list.length; i += PANEL_COUNT) {
+        panel.push(list.slice(i, i + PANEL_COUNT));
+      }
+
+      setPanel(panel);
+    }
+  }, [list]);
+
+  return (
+    <div className={cx('nft_scroll')}>
+      {!!panel.length && (
+        <Flicking plugins={plugins}>
+          {panel?.map((list, index) => (
+            <div className={cx('nft_panel')} key={index}>
+              {list.map((item, index) => (
+                <ArtistCard {...item} key={index} className='scroll' />
+              ))}
+            </div>
+          ))}
+          <ViewportSlot>
+            <div className={cx('pc_wrapper')}>
+              <span className={cx('flicking-arrow-prev', 'btn_flicking', 'main_prev')}></span>
+              <span className={cx('flicking-arrow-next', 'btn_flicking', 'main_next')}></span>
+            </div>
+          </ViewportSlot>
+        </Flicking>
+      )}
+    </div>
+  );
+};
+
+export default ArtistScrollList;

src/components/pc/Header.tsx

@@ -8,7 +8,6 @@ import { ReactComponent as IconArrow } from "@assets/img/svg/ico_arr_gray.svg";
 import { ReactComponent as IconActivity } from "@assets/img/svg/ico_activity.svg";
 import { ReactComponent as IconTwitter } from "@assets/img/svg/ico_twitter.svg";
 import { ReactComponent as IconInstagram } from "@assets/img/svg/ico_insta.svg";
-import { ReactComponent as IconDiscord } from "@assets/img/svg/ico_discord.svg";
 import { ReactComponent as IconFacebook } from "@assets/img/svg/ico_facebook.svg";
 import URLInfo from "@src/constants/URLInfo";
 import useSearch from "@src/hooks/useSearch";

src/containers/common/ArtistsScrollList.tsx

@@ -0,0 +1,73 @@
+import { IArtist } from 'metarare';
+import * as React from 'react';
+import PCArtistScrollList from "@src/components/pc/ArtistScrollList";
+import MobileArtistScrollList from "@src/components/mobile/ArtistScrollList";
+
+export interface IArtistsScrollListProps {}
+
+export default function ArtistsScrollList(props: IArtistsScrollListProps) {
+  return (
+    <>
+      <div className={"mo_wrapper"}>
+        <MobileArtistScrollList list={dataFake} />
+      </div>
+      <div className={"pc_wrapper"}>
+        <PCArtistScrollList list={dataFake} />
+      </div>
+    </>
+  );
+}
+
+
+const dataFake: IArtist[] = [
+    {
+        id: 1,
+        name: 'John Doe',
+        thumbnail_image: 'https://picsum.photos/300/300',
+    },
+    {
+        id: 2,
+        name: 'Kasper Henderson',
+        thumbnail_image: 'https://picsum.photos/300/300',
+    },
+    {
+        id: 3,
+        name: 'Cooper Lynn',
+        thumbnail_image: 'https://picsum.photos/300/300',
+    },
+    {
+        id: 4,
+        name: 'Iris Stein',
+        thumbnail_image: 'https://picsum.photos/300/300',
+    },
+    {
+        id: 5,
+        name: 'Leland Richards',
+        thumbnail_image: 'https://picsum.photos/300/300',
+    },
+    {
+        id: 6,
+        name: 'Octavia Norris',
+        thumbnail_image: 'https://picsum.photos/300/300',
+    },
+    {
+        id: 7,
+        name: 'Leland Richards',
+        thumbnail_image: 'https://picsum.photos/300/300',
+    },
+    {
+        id: 8,
+        name: 'Octavia Norris',
+        thumbnail_image: 'https://picsum.photos/300/300',
+    },
+    {
+        id: 9,
+        name: 'Leland Richards',
+        thumbnail_image: 'https://picsum.photos/300/300',
+    },
+    {
+        id: 10,
+        name: 'Octavia Norris',
+        thumbnail_image: 'https://picsum.photos/300/300',
+    }
+]

src/pages/Home.tsx

@@ -10,8 +10,8 @@ import { useDispatch, useSelector } from 'react-redux';
 import { fetchExploreHome, resetExploreHome } from '@src/store/reducers/ExploreReducer';
 import { fetchHome } from '@src/store/reducers/HomeReducer';
 import Loading from '@src/components/common/Loading';
-import ExploreContentContainer from '@src/containers/common/ExploreContentContainer';
 import useMore from '@src/hooks/useMore';
+import ArtistsScrollList from '@src/containers/common/ArtistsScrollList';
 
 const cx = classNames.bind(styles);
 
@@ -87,9 +87,14 @@ const Home: React.FC = () => {
               <CollectionScrollList list={data.collections} />
             </div>
           )}
-          <div className={cx('home_group')}>
+          {/* <div className={cx('home_group')}>
             <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>
+            <ArtistsScrollList />
+            {/* <ExploreContentContainer list={filterProps.exploreList} filterProps={filterProps} handler={filterHandler} onClickMore={onClickMore} showMore={showMore} isLoaded={isExploreListLoaded} /> */}
           </div>
         </>
       )}