CoinSight
-
nav("/")}
- className="cursor-pointer"
+ className="cursor-pointer"
>
메인
- nav("/game")}
- className="cursor-pointer"
+ className="cursor-pointer"
>
게임
- nav("/leaderboard")}
- className="cursor-pointer"
+ className="cursor-pointer"
>
리더보드
diff --git a/src/components/common/RoundButton.jsx b/src/components/common/RoundButton.jsx
new file mode 100644
index 0000000..9b6c627
--- /dev/null
+++ b/src/components/common/RoundButton.jsx
@@ -0,0 +1,34 @@
+const RoundButton = ({ content, status }) => {
+ const buttonColor = {
+ positive : 'bg-[#FF4D66]',
+ negative: 'bg-[#4073FF]',
+ neutral: 'bg-[#9E9E9E]',
+ predict_success: 'bg-[#47D994]',
+ predict_fail: 'bg-[#8C8C8C]'
+ }
+
+ const Icon = {
+ positive: "mingcute:arrow-up-fill",
+ negative: "mingcute:arrow-down-fill",
+ neutral: "null",
+ predict_success: "mingcute:check-fill",
+ predict_fail: "fa6-solid:xmark",
+ }[status];
+
+ return (
+
+
+ )
+}
+
+export default RoundButton;
\ No newline at end of file
diff --git a/src/components/common/SearchBar.jsx b/src/components/common/SearchBar.jsx
new file mode 100644
index 0000000..723207e
--- /dev/null
+++ b/src/components/common/SearchBar.jsx
@@ -0,0 +1,54 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+const SearchBar = ({ defaultKeyword = "" }) => {
+ const [keyword, setKeyword] = useState(defaultKeyword);
+ const nav = useNavigate();
+
+ const handleSearch = () => {
+ const trimmed = keyword.trim();
+ if (trimmed) {
+ nav(`/search?keyword=${encodeURIComponent(trimmed)}`);
+ }
+ };
+
+ const handleKeyDown = (e) => {
+ if (e.key === "Enter") {
+ handleSearch();
+ }
+ };
+
+ const handleClear = () => {
+ setKeyword("");
+ nav("/");
+ };
+
+ return (
+ {content}
+
+
+
+
+ )
+}
+
+export default SearchBar;
diff --git a/src/pages/CoinDetailPage.jsx b/src/pages/CoinDetailPage.jsx
index c042262..a846ef8 100644
--- a/src/pages/CoinDetailPage.jsx
+++ b/src/pages/CoinDetailPage.jsx
@@ -2,17 +2,26 @@ import { useEffect, useState } from "react";
import Navbar from "../components/common/Navbar";
import CoinChart from "../components/CoinDetail/CoinChart";
import History from "../components/CoinDetail/History";
-//import { getCoinInfo } from "../apis/CoinDetail/coinInfo";
+import { getCoinInfo } from "../apis/CoinDetail/coinInfo";
+import BasicLogo from "../assets/pixelarticons--coin.svg";
+import DailyNews from "../components/CoinDetail/DailyNews";
+import { useParams } from "react-router-dom";
const CoinDetailPage = () => {
- const coinName = "KRW-BTC";
- const ticker = "BTC";
- const [currentPrice, setCurrentPrice] = useState(0);
- const [tradePrice, setTradePrice] = useState(0);
- const [fluctuationRange, setFluctuationRange] = useState(0);
- const [isPositive, setIsPositive] = useState(true);
- const [todayDate, setTodayDate] = useState(null);
- const [todayTime, setTodayTime] = useState(null);
+ const { ticker } = useParams();
+
+ const [coinInfo, setCoinInfo] = useState({
+ name: "",
+ ticker1: "",
+ logoURL: BasicLogo,
+ currentPrice: "0",
+ rawCurrentPrice: "0",
+ tradePrice: "0",
+ fluctuationRange: "0",
+ isPositive: true,
+ date: "",
+ time: ""
+ })
const formatPrice = (value) => {
@@ -21,44 +30,30 @@ const CoinDetailPage = () => {
return `${formatPrice.toLocaleString(undefined, {maximumFractionDigits: 1})}억`;
}
- const getDateTime = () => {
- var today = new Date();
-
- var year = today.getFullYear();
- var month = ('0' + (today.getMonth() + 1)).slice(-2);
- var day = ('0' + today.getDate()).slice(-2);
-
- setTodayDate(year + '년 ' + month + '월 ' + day + '일');
-
- var hours = ('0' + today.getHours()).slice(-2);
- var minutes = ('0' + today.getMinutes()).slice(-2);
- var seconds = ('0' + today.getSeconds()).slice(-2);
-
- setTodayTime(hours + ':' + minutes + ':' + seconds);
- }
-
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));
-
- // const fetchCoinInfo = async () => {
- // try {
- // const res = await getCoinInfo(ticker);
- // console.log(res);
- // } catch (error) {
- // console.error("데이터 호출 실패 : ", error);
- // }
- // }
+ const fetchCoinInfo = async () => {
+ try {
+ const res = await getCoinInfo(ticker);
+ const {data, timestamp} = res;
+ const today = new Date(timestamp);
+
+ setCoinInfo(prev => ({
+ ...prev,
+ name: data.name,
+ ticker1: data.ticker,
+ logoURL: data.logoUrl,
+ currentPrice: Number(data.currentPrice).toLocaleString('ko-KR'),
+ rawCurrentPrice: data.currentPrice,
+ tradePrice: formatPrice(data.tradingVolume),
+ date: `${today.getFullYear()}년 ${today.getMonth() + 1}월 ${today.getDate()}일`,
+ time: `${today.getHours()}:${today.getMinutes()}:${today.getSeconds()}`
+ }));
+ } catch (error) {
+ console.error("데이터 호출 실패 : ", error);
+ }
+ }
fetch(`https://api.bithumb.com/public/candlestick/BTC_KRW/1h`, options)
.then(res => res.json())
@@ -69,14 +64,16 @@ const CoinDetailPage = () => {
const prevPrice = parseFloat(data[len - 2][2]);
const changeRate = ((currentPrice - prevPrice) / prevPrice) * 100;
- setFluctuationRange(changeRate.toFixed(2));
- if (changeRate < 0) setIsPositive(false);
+ setCoinInfo(prevInfo => ({
+ ...prevInfo,
+ fluctuationRange: changeRate.toFixed(2),
+ isPositive: changeRate >= 0
+ }));
})
.catch(err => console.error(err));
- //fetchCoinInfo();
- getDateTime();
- }, [coinName, ticker]);
+ fetchCoinInfo();
+ }, [ticker]);
return (
+
+ setKeyword(e.target.value)}
+ onKeyDown={handleKeyDown}
+ placeholder="검색어를 입력하세요 (예: 비트코인, ETF, 규제)"
+ className="w-full h-12 pl-12 pr-10 border border-[#E0E0E0] rounded-lg bg-white text-[14px] text-[#212121] placeholder-[#9E9E9E] outline-none focus:border-[#1F78F2] transition-colors"
+ />
+ {keyword && (
+
+
+ )}
+
@@ -84,36 +81,42 @@ const CoinDetailPage = () => {
+
+
)
diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
index a5a4161..108e790 100644
--- a/src/pages/MainPage.jsx
+++ b/src/pages/MainPage.jsx
@@ -1,12 +1,85 @@
+import { useState, useEffect } from "react";
import Navbar from "../components/common/Navbar";
+import SearchBar from "../components/common/SearchBar";
+import NewsCard from "../components/MainPage/NewsCard";
+import CoinListTable from "../components/MainPage/CoinListTable";
+import { getNewsAnalysis } from "../apis/News/analysis";
const MainPage = () => {
+ const [newsList, setNewsList] = useState([]);
+ const [newsLoading, setNewsLoading] = useState(true);
+ const [newsError, setNewsError] = useState(null);
+
+ useEffect(() => {
+ const fetchNews = async () => {
+ try {
+ setNewsLoading(true);
+ setNewsError(null);
+ const res = await getNewsAnalysis(0, 20);
+ setNewsList(res.data?.content || []);
+ } catch (err) {
+ setNewsError("뉴스를 불러오는데 실패했습니다.");
+ console.error(err);
+ } finally {
+ setNewsLoading(false);
+ }
+ };
+ fetchNews();
+ }, []);
+
return (
-
-
- 비트코인(BTC)
+
+
+
+ 
+
+
+ {coinInfo.name}({coinInfo.ticker1})
+
- {todayDate} {todayTime} 기준
+ {coinInfo.date} {coinInfo.time} 기준
현재가
-₩{currentPrice}
+₩{coinInfo.currentPrice}
1시간 등락
-{fluctuationRange}%
+{coinInfo.fluctuationRange}%
24시간 거래대금
-₩{tradePrice}
+₩{coinInfo.tradePrice}
+ {/* 통합 검색바 */}
+
+
+
+
+ {/* 왼쪽: 뉴스 영역 */}
+
+
+
+
+ {/* 오른쪽: 코인 시세 영역 */}
+
+
+ AI 뉴스 분석
+
+ {newsLoading ? (
+
+
+ 로딩 중...
+
+ ) : newsError ? (
+
+ {newsError}
+
+ ) : newsList.length === 0 ? (
+
+ 뉴스가 없습니다.
+
+ ) : (
+ newsList.map((news) => (
+
+
+
+
+ )
+}
+
+export default SearchResultPage;
+ {/* 검색바 */}
+
+
+
+
+ {/* 뉴스 검색 결과 */}
+
+
+
+
+
+ {/* 코인 검색 결과 (추후 추가) */}
+ + "{keyword}" 뉴스 검색 결과 +
+
+ {newsLoading ? (
+
+
+ 로딩 중...
+
+ ) : newsError ? (
+
+ {newsError}
+
+ ) : newsList.length === 0 ? (
+
+ 검색 결과가 없습니다.
+
+ ) : (
+ newsList.map((news) => (
+