diff --git a/src/assets/sites/binance.svg b/src/assets/sites/binance.svg
new file mode 100644
index 0000000..da86cec
--- /dev/null
+++ b/src/assets/sites/binance.svg
@@ -0,0 +1,11 @@
+
diff --git a/src/assets/sites/blockchain.svg b/src/assets/sites/blockchain.svg
new file mode 100644
index 0000000..79fc691
--- /dev/null
+++ b/src/assets/sites/blockchain.svg
@@ -0,0 +1,14 @@
+
diff --git a/src/assets/sites/coinmarketcap.svg b/src/assets/sites/coinmarketcap.svg
new file mode 100644
index 0000000..0b45b1e
--- /dev/null
+++ b/src/assets/sites/coinmarketcap.svg
@@ -0,0 +1,11 @@
+
diff --git a/src/config/siteIcons.ts b/src/config/siteIcons.ts
new file mode 100644
index 0000000..4c5072d
--- /dev/null
+++ b/src/config/siteIcons.ts
@@ -0,0 +1,25 @@
+import BlockchainIcon from '../assets/sites/blockchain.svg';
+import CoinmarketcapIcon from '../assets/sites/coinmarketcap.svg';
+import BinanceIcon from '../assets/sites/binance.svg';
+import type { SiteType } from '../types/site.type';
+
+export const SITE_ICONS: Record<
+ SiteType,
+ {
+ icon: string;
+ alt: string;
+ }
+> = {
+ BLOCKCHAIN: {
+ icon: BlockchainIcon,
+ alt: 'blockchain',
+ },
+ COINMARKETCAP: {
+ icon: CoinmarketcapIcon,
+ alt: 'coinmarketcap',
+ },
+ BINANCE: {
+ icon: BinanceIcon,
+ alt: 'binance',
+ },
+};
diff --git a/src/mocks/siteData.ts b/src/mocks/siteData.ts
new file mode 100644
index 0000000..fcf125c
--- /dev/null
+++ b/src/mocks/siteData.ts
@@ -0,0 +1,19 @@
+import type { SiteItem } from '../types/site.type';
+
+export const siteData: SiteItem[] = [
+ {
+ id: 1,
+ type: 'BLOCKCHAIN',
+ url: 'https://www.naver.com',
+ },
+ {
+ id: 2,
+ type: 'COINMARKETCAP',
+ url: 'https://www.google.com',
+ },
+ {
+ id: 3,
+ type: 'BINANCE',
+ url: 'https://www.youtube.com',
+ },
+];
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
index 6ecf0a4..56f7ddd 100644
--- a/src/pages/home/Home.tsx
+++ b/src/pages/home/Home.tsx
@@ -1,5 +1,6 @@
import Navbar from '../../components/Navbar/Navbar';
import ListFilter from './components/Filter/ListFilter';
+import ListSite from './components/Site/ListSite';
import Alert from './components/Alert/Alert';
import Banner from './components/Banner/Banner';
import Chart from './components/Chart/Chart';
@@ -7,10 +8,11 @@ import Chart from './components/Chart/Chart';
const Home = () => {
return (
<>
-
+
+
);
diff --git a/src/pages/home/components/Site/ItemSite.tsx b/src/pages/home/components/Site/ItemSite.tsx
new file mode 100644
index 0000000..aed9942
--- /dev/null
+++ b/src/pages/home/components/Site/ItemSite.tsx
@@ -0,0 +1,26 @@
+import { SITE_ICONS } from '../../../../config/siteIcons';
+import type { SiteItem } from '../../../../types/site.type';
+import useNavigation from '../../../../hooks/useNavigation';
+
+interface ItemSiteProps {
+ item: SiteItem;
+}
+
+const ItemSite = ({ item }: ItemSiteProps) => {
+ const { goTo } = useNavigation();
+ const ui = SITE_ICONS[item.type];
+
+ return (
+
+
+
+ );
+};
+
+export default ItemSite;
diff --git a/src/pages/home/components/Site/ListSite.tsx b/src/pages/home/components/Site/ListSite.tsx
new file mode 100644
index 0000000..c04c3c1
--- /dev/null
+++ b/src/pages/home/components/Site/ListSite.tsx
@@ -0,0 +1,14 @@
+import ItemSite from './ItemSite';
+import { siteData } from '../../../../mocks/siteData';
+
+const ListSite = () => {
+ return (
+
+ {siteData.map((item) => (
+
+ ))}
+
+ );
+};
+
+export default ListSite;
diff --git a/src/types/site.type.ts b/src/types/site.type.ts
new file mode 100644
index 0000000..bdd8289
--- /dev/null
+++ b/src/types/site.type.ts
@@ -0,0 +1,7 @@
+export type SiteType = 'BLOCKCHAIN' | 'COINMARKETCAP' | 'BINANCE';
+
+export interface SiteItem {
+ id: number;
+ url: string;
+ type: SiteType;
+}