[FEAT] 코인 상세 페이지 상단 구현

package.json

@@ -13,6 +13,7 @@
     "@tailwindcss/vite": "^4.1.18",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-router-dom": "^7.12.0",
     "tailwindcss": "^4.1.18"
   },
   "devDependencies": {

src/App.jsx

@@ -1,11 +1,23 @@
 import './App.css'
+import { BrowserRouter, Routes, Route } from "react-router-dom";
+import MainPage from './pages/MainPage'
+import CoinDetailPage from './pages/CoinDetailPage';
+import NewsDetailPage from './pages/NewsDetailPage';
+import GamePage from './pages/GamePage';
+import LeaderBoardPage from './pages/LeaderBoardPage';
 
 function App() {
 
   return (
-    <>
-      <div>CoinSight</div>
-    </>
+    <BrowserRouter>
+      <Routes>
+        <Route path="/" element={<MainPage />} />
+        <Route path='/coindetail' element={<CoinDetailPage />} />
+        <Route path='/newsdetail' element={<NewsDetailPage />} />
+        <Route path='/game' element={<GamePage />} />
+        <Route path='/leaderboard' element={<LeaderBoardPage />} />
+      </Routes>
+    </BrowserRouter>
   )
 }
 

src/components/common/Navbar.jsx

@@ -0,0 +1,35 @@
+import { useNavigate } from "react-router-dom";
+
+const Navbar = () => {
+    const nav = useNavigate();
+    return (
+        <div className="w-full h-16 flex flex-row justify-between items-center px-8 bg-[#1F78F2] text-white">
+            <div className="text-[24px]">
+                CoinSight
+            </div>
+
+            <div className="flex flex-row justify-around gap-8">
+                <div 
+                    onClick={() => nav("/")}
+                    className="cursor-pointer"    
+                >
+                    메인
+                </div>
+                <div 
+                    onClick={() => nav("/game")}
+                    className="cursor-pointer"    
+                >
+                    게임
+                </div>
+                <div 
+                    onClick={() => nav("/leaderboard")}
+                    className="cursor-pointer"        
+                >
+                    리더보드
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Navbar;

src/index.css

@@ -1 +1,7 @@
-@import 'tailwindcss';
+@import 'tailwindcss';
+
+body {
+  background-color: #FAFAFA;
+  margin: 0;
+  padding: 0;
+}

src/pages/CoinDetailPage.jsx

@@ -0,0 +1,83 @@
+import { useEffect, useState } from "react";
+import Navbar from "../components/common/Navbar";
+
+const CoinDetailPage = () => {
+    const coinName = "KRW-BTC";
+    const [currentPrice, setCurrentPrice] = useState(0);
+    const [tradePrice, setTradePrice] = useState(0);
+    const [fluctuationRange, setFluctuationRange] = useState(0);
+    const [isPositive, setIsPositive] = useState(true);
+
+    const formatPrice = (value) => {
+        if (!value) return "0억";
+        const formatPrice = Number(value) / 100000000;
+        return `${formatPrice.toLocaleString(undefined, {maximumFractionDigits: 1})}억`;
+    }
+
+    useEffect (() => {
+        const options = {method: 'GET', headers: {accept: 'application/json'}};
+
+        fetch(`https://api.bithumb.com/v1/ticker?markets=${coinName}`, options)
+            .then(response => response.json())
+            .then(response => {
+                console.log(response);
+                const formattedPrice = formatPrice(response[0].acc_trade_price_24h);
+                setTradePrice(formattedPrice);
+                const p = response[0].trade_price.toLocaleString('ko-KR');
+                setCurrentPrice(p);
+            })
+            .catch(err => console.error(err));
+
+        fetch(`https://api.bithumb.com/public/candlestick/BTC_KRW/1h`, options)
+            .then(res => res.json())
+            .then(res => {
+                const data = res.data;
+                const len = data.length;
+                const currentPrice = parseFloat(data[len - 1][2]);
+                const prevPrice = parseFloat(data[len - 2][2]);
+
+                const changeRate = ((currentPrice - prevPrice) / prevPrice) * 100;
+                setFluctuationRange(changeRate.toFixed(2));
+                if (changeRate < 0) setIsPositive(false);
+            })
+            .catch(err => console.error(err));
+    }, [coinName]);
+
+    return  (
+        <div>
+            <Navbar />
+            <div className="p-10">
+                <div className="border border-[#E0E0E0] bg-[#FFFFFF] h-35 p-8 rounded-sm items-center justify-between flex flex-row">
+                    <div className="flex flex-col">
+                        <div className="text-[36px] font-bold text-[#212121]">
+                            비트코인(BTC)
+                        </div>
+
+                        <div className="text-[16px] text-[#787878]">
+                            2026년 01월 23일
+                        </div>
+                    </div>
+
+                    <div className="flex flex-row gap-16">
+                        <div className="flex flex-col gap-2">
+                            <p className="text-[14px] text-[#787878]">현재가</p>
+                            <p className="text-[28px] font-bold">₩{currentPrice}</p>
+                        </div>
+
+                        <div className="flex flex-col gap-2">
+                            <p className="text-[14px] text-[#787878]">1시간 등락</p>
+                            <p className={`text-[28px] font-bold ${isPositive ? `text-[#FF4242]` : `text-[#4073FF]`}`}>{fluctuationRange}%</p>
+                        </div>
+
+                        <div className="flex flex-col gap-2">
+                            <p className="text-[14px] text-[#787878]">24시간 거래대금</p>
+                            <p className="text-[28px] font-bold">₩{tradePrice}</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default CoinDetailPage;

src/pages/GamePage.jsx

@@ -0,0 +1,12 @@
+import Navbar from "../components/common/Navbar"
+
+const GamePage = () => {
+    return (
+        <div>
+            <Navbar />
+            game page
+        </div>
+    )
+}
+
+export default GamePage;

src/pages/LeaderBoardPage.jsx

@@ -0,0 +1,12 @@
+import Navbar from "../components/common/Navbar"
+
+const LeaderBoardPage = () => {
+    return (
+        <>
+            <Navbar />
+            LeaderBoardPage
+        </>
+    )
+}
+
+export default LeaderBoardPage;

src/pages/MainPage.jsx

@@ -0,0 +1,12 @@
+import Navbar from "../components/common/Navbar";
+
+const MainPage = () => {
+    return (
+        <div>
+            <Navbar />
+            main page
+        </div>
+    )
+}
+
+export default MainPage;

src/pages/NewsDetailPage.jsx

@@ -0,0 +1,12 @@
+import Navbar from "../components/common/Navbar";
+
+const NewsDetailPage = () => {
+    return (
+        <div>
+            <Navbar />
+            News Detail Page
+        </div>
+    )
+}
+
+export default NewsDetailPage;