From d6efc54256f0417ff69a7ffae5b2cd525178fc45 Mon Sep 17 00:00:00 2001 From: Juyoung03 Date: Sun, 18 Jan 2026 16:40:32 +0900 Subject: [PATCH 1/3] =?UTF-8?q?[FEAT]=20=ED=8E=98=EC=9D=B4=EC=A7=80=20navb?= =?UTF-8?q?ar=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 58 ++++++++++++++++++++++++++++++++ package.json | 1 + src/App.jsx | 18 ++++++++-- src/components/common/Navbar.jsx | 35 +++++++++++++++++++ src/pages/CoinDetailPage.jsx | 12 +++++++ src/pages/GamePage.jsx | 12 +++++++ src/pages/LeaderBoardPage.jsx | 12 +++++++ src/pages/MainPage.jsx | 12 +++++++ src/pages/NewsDetailPage.jsx | 12 +++++++ 9 files changed, 169 insertions(+), 3 deletions(-) create mode 100644 src/components/common/Navbar.jsx create mode 100644 src/pages/CoinDetailPage.jsx create mode 100644 src/pages/GamePage.jsx create mode 100644 src/pages/LeaderBoardPage.jsx create mode 100644 src/pages/MainPage.jsx create mode 100644 src/pages/NewsDetailPage.jsx diff --git a/package-lock.json b/package-lock.json index 572fadc..4850d3e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,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": { @@ -1872,6 +1873,19 @@ "dev": true, "license": "MIT" }, + "node_modules/cookie": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz", + "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==", + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -3058,6 +3072,44 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "7.12.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.12.0.tgz", + "integrity": "sha512-kTPDYPFzDVGIIGNLS5VJykK0HfHLY5MF3b+xj0/tTyNYL1gF1qs7u67Z9jEhQk2sQ98SUaHxlG31g1JtF7IfVw==", + "license": "MIT", + "dependencies": { + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.12.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.12.0.tgz", + "integrity": "sha512-pfO9fiBcpEfX4Tx+iTYKDtPbrSLLCbwJ5EqP+SPYQu1VYCXdy79GSj0wttR0U4cikVdlImZuEZ/9ZNCgoaxwBA==", + "license": "MIT", + "dependencies": { + "react-router": "7.12.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", @@ -3128,6 +3180,12 @@ "semver": "bin/semver.js" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.2", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz", + "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==", + "license": "MIT" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", diff --git a/package.json b/package.json index 00d7353..6191494 100644 --- a/package.json +++ b/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": { diff --git a/src/App.jsx b/src/App.jsx index 53eb971..bbf75f1 100644 --- a/src/App.jsx +++ b/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 ( - <> -
CoinSight
- + + + } /> + } /> + } /> + } /> + } /> + + ) } diff --git a/src/components/common/Navbar.jsx b/src/components/common/Navbar.jsx new file mode 100644 index 0000000..5bf7b0b --- /dev/null +++ b/src/components/common/Navbar.jsx @@ -0,0 +1,35 @@ +import { useNavigate } from "react-router-dom"; + +const Navbar = () => { + const nav = useNavigate(); + return ( +
+
+ CoinSight +
+ +
+
nav("/")} + className="cursor-pointer" + > + 메인 +
+
nav("/game")} + className="cursor-pointer" + > + 게임 +
+
nav("/leaderboard")} + className="cursor-pointer" + > + 리더보드 +
+
+
+ ) +} + +export default Navbar; \ No newline at end of file diff --git a/src/pages/CoinDetailPage.jsx b/src/pages/CoinDetailPage.jsx new file mode 100644 index 0000000..e153651 --- /dev/null +++ b/src/pages/CoinDetailPage.jsx @@ -0,0 +1,12 @@ +import Navbar from "../components/common/navbar" + +const CoinDetailPage = () => { + return ( +
+ + CoinDetail Page +
+ ) +} + +export default CoinDetailPage; \ No newline at end of file diff --git a/src/pages/GamePage.jsx b/src/pages/GamePage.jsx new file mode 100644 index 0000000..b1937c7 --- /dev/null +++ b/src/pages/GamePage.jsx @@ -0,0 +1,12 @@ +import Navbar from "../components/common/navbar" + +const GamePage = () => { + return ( +
+ + game page +
+ ) +} + +export default GamePage; \ No newline at end of file diff --git a/src/pages/LeaderBoardPage.jsx b/src/pages/LeaderBoardPage.jsx new file mode 100644 index 0000000..eb4919c --- /dev/null +++ b/src/pages/LeaderBoardPage.jsx @@ -0,0 +1,12 @@ +import Navbar from "../components/common/navbar" + +const LeaderBoardPage = () => { + return ( + <> + + LeaderBoardPage + + ) +} + +export default LeaderBoardPage; \ No newline at end of file diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx new file mode 100644 index 0000000..9bf5023 --- /dev/null +++ b/src/pages/MainPage.jsx @@ -0,0 +1,12 @@ +import Navbar from "../components/common/navbar"; + +const MainPage = () => { + return ( +
+ + main page +
+ ) +} + +export default MainPage; \ No newline at end of file diff --git a/src/pages/NewsDetailPage.jsx b/src/pages/NewsDetailPage.jsx new file mode 100644 index 0000000..99251d9 --- /dev/null +++ b/src/pages/NewsDetailPage.jsx @@ -0,0 +1,12 @@ +import Navbar from "../components/common/navbar"; + +const NewsDetailPage = () => { + return ( +
+ + News Detail Page +
+ ) +} + +export default NewsDetailPage; \ No newline at end of file From b7796ba750b12de12e0acef925951375a6b5db99 Mon Sep 17 00:00:00 2001 From: Juyoung03 Date: Mon, 26 Jan 2026 02:10:46 +0900 Subject: [PATCH 2/3] =?UTF-8?q?[FEAT]=20=EC=BD=94=EC=9D=B8=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=83=81=EB=8B=A8=20=EA=B5=AC=ED=98=84?= =?UTF-8?q?=ED=95=98=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/index.css | 8 +++- src/pages/CoinDetailPage.jsx | 75 +++++++++++++++++++++++++++++++++++- 2 files changed, 80 insertions(+), 3 deletions(-) diff --git a/src/index.css b/src/index.css index f173aa4..b5f37f0 100644 --- a/src/index.css +++ b/src/index.css @@ -1 +1,7 @@ -@import 'tailwindcss'; \ No newline at end of file +@import 'tailwindcss'; + +body { + background-color: #FAFAFA; + margin: 0; + padding: 0; +} \ No newline at end of file diff --git a/src/pages/CoinDetailPage.jsx b/src/pages/CoinDetailPage.jsx index e153651..91e3fa3 100644 --- a/src/pages/CoinDetailPage.jsx +++ b/src/pages/CoinDetailPage.jsx @@ -1,10 +1,81 @@ -import Navbar from "../components/common/navbar" +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 (
- CoinDetail Page +
+
+
+
+ 비트코인(BTC) +
+ +
+ 2026년 01월 23일 +
+
+ +
+
+

현재가

+

₩{currentPrice}

+
+ +
+

1시간 등락

+

{fluctuationRange}%

+
+ +
+

24시간 거래대금

+

₩{tradePrice}

+
+
+
+
) } From 69c2414dfdbd806dd28181d38b501fdc935f358c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B0=95=ED=98=84=EC=9A=B1?= Date: Mon, 26 Jan 2026 02:29:30 +0900 Subject: [PATCH 3/3] =?UTF-8?q?[Fix]=20Navbar=20import=20=EA=B2=BD?= =?UTF-8?q?=EB=A1=9C=20=EB=8C=80=EC=86=8C=EB=AC=B8=EC=9E=90=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - navbar → Navbar로 대소문자 통일 - Linux 환경(GitHub Actions) 빌드 오류 해결 --- src/pages/CoinDetailPage.jsx | 2 +- src/pages/GamePage.jsx | 2 +- src/pages/LeaderBoardPage.jsx | 2 +- src/pages/MainPage.jsx | 2 +- src/pages/NewsDetailPage.jsx | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/pages/CoinDetailPage.jsx b/src/pages/CoinDetailPage.jsx index 91e3fa3..3489df7 100644 --- a/src/pages/CoinDetailPage.jsx +++ b/src/pages/CoinDetailPage.jsx @@ -1,5 +1,5 @@ import { useEffect, useState } from "react"; -import Navbar from "../components/common/navbar"; +import Navbar from "../components/common/Navbar"; const CoinDetailPage = () => { const coinName = "KRW-BTC"; diff --git a/src/pages/GamePage.jsx b/src/pages/GamePage.jsx index b1937c7..349ed36 100644 --- a/src/pages/GamePage.jsx +++ b/src/pages/GamePage.jsx @@ -1,4 +1,4 @@ -import Navbar from "../components/common/navbar" +import Navbar from "../components/common/Navbar" const GamePage = () => { return ( diff --git a/src/pages/LeaderBoardPage.jsx b/src/pages/LeaderBoardPage.jsx index eb4919c..832d298 100644 --- a/src/pages/LeaderBoardPage.jsx +++ b/src/pages/LeaderBoardPage.jsx @@ -1,4 +1,4 @@ -import Navbar from "../components/common/navbar" +import Navbar from "../components/common/Navbar" const LeaderBoardPage = () => { return ( diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx index 9bf5023..a5a4161 100644 --- a/src/pages/MainPage.jsx +++ b/src/pages/MainPage.jsx @@ -1,4 +1,4 @@ -import Navbar from "../components/common/navbar"; +import Navbar from "../components/common/Navbar"; const MainPage = () => { return ( diff --git a/src/pages/NewsDetailPage.jsx b/src/pages/NewsDetailPage.jsx index 99251d9..116d298 100644 --- a/src/pages/NewsDetailPage.jsx +++ b/src/pages/NewsDetailPage.jsx @@ -1,4 +1,4 @@ -import Navbar from "../components/common/navbar"; +import Navbar from "../components/common/Navbar"; const NewsDetailPage = () => { return (