From 19e15d802208e3d7f6ec76cffae604785b4c6205 Mon Sep 17 00:00:00 2001 From: himinji Date: Wed, 11 Mar 2026 12:59:51 +0900 Subject: [PATCH] =?UTF-8?q?[UI]=20=EC=BB=AC=EB=9F=AC=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CoinDetail/CoinChart.jsx | 46 ++++++++++++------- src/components/CoinDetail/DailyNews.jsx | 16 +++---- src/components/CoinDetail/DailyNewsCard.jsx | 10 ++-- src/components/CoinDetail/History.jsx | 29 +++++------- src/components/CoinDetail/HistoryCard.jsx | 38 +++++++-------- .../CoinDetail/PredictionNewsCard.jsx | 8 ++-- src/components/MainPage/CoinListTable.jsx | 29 ++++++------ src/components/MainPage/CoinSearchBar.jsx | 4 +- src/components/MainPage/NewsCard.jsx | 7 ++- src/components/MainPage/NewsSearchBar.jsx | 7 ++- src/components/common/Navbar.jsx | 6 +-- src/components/common/SearchBar.jsx | 6 +-- src/index.css | 2 +- src/pages/CoinDetailPage.jsx | 21 ++++----- src/pages/MainPage.jsx | 14 +++--- src/pages/SearchResultPage.jsx | 26 +++++------ 16 files changed, 134 insertions(+), 135 deletions(-) diff --git a/src/components/CoinDetail/CoinChart.jsx b/src/components/CoinDetail/CoinChart.jsx index 8b05ed7..c506b87 100644 --- a/src/components/CoinDetail/CoinChart.jsx +++ b/src/components/CoinDetail/CoinChart.jsx @@ -10,7 +10,7 @@ const customStyles = { upBorderColor: '#4073FF', downBorderColor: '#FF4D66', upWickColor: '#4073FF', - downWickColor: '#FF4D66', + downWickColor: '#FF4D66', }, priceMark: { last: { @@ -24,7 +24,21 @@ const customStyles = { color: '#FF4D66', } } - } + }, + grid: { + horizontal: { color: '#233554' }, + vertical: { color: '#233554' }, + }, + xAxis: { + tickText: { color: '#8892B0' }, + }, + yAxis: { + tickText: { color: '#8892B0' }, + }, + crosshair: { + horizontal: { line: { color: '#8892B0' } }, + vertical: { line: { color: '#8892B0' } }, + }, } const CoinChart = ({ ticker }) => { @@ -111,35 +125,35 @@ const CoinChart = ({ ticker }) => { return (
-
+
{ticker}
-
1분
-
1시간
-
4시간
-
+
6시간
-
+
12시간
-
1일 @@ -158,7 +172,7 @@ const CoinChart = ({ ticker }) => {
)} {isLoading &&
} -
+
) diff --git a/src/components/CoinDetail/DailyNews.jsx b/src/components/CoinDetail/DailyNews.jsx index 44e9c1e..472f0f2 100644 --- a/src/components/CoinDetail/DailyNews.jsx +++ b/src/components/CoinDetail/DailyNews.jsx @@ -9,11 +9,10 @@ const DailyNews = ({ticker}) => { useEffect(() => { const fetchCoinNews = async () => { - try { + try { setIsLoading(true); setIsError(null); const res = await getCoinNews(ticker, 0, 20); - //console.log(res.data); setNewsData(res.data?.content || []); } catch (error) { console.log("백엔드 불러오기 실패 : ", error); @@ -28,7 +27,7 @@ const DailyNews = ({ticker}) => { const renderContent = () => { if (isLoading) { return ( -
+
뉴스를 불러오는 중입니다.
) @@ -42,14 +41,14 @@ const DailyNews = ({ticker}) => { } if (newsData.length === 0) { return ( -
+
등록된 뉴스가 없습니다.
) } return newsData.map((news) => ( - { /> )) } - return ( -
-

+
+

최근 24시간 호재/악재 뉴스

@@ -74,4 +72,4 @@ const DailyNews = ({ticker}) => { ) } -export default DailyNews; \ No newline at end of file +export default DailyNews; diff --git a/src/components/CoinDetail/DailyNewsCard.jsx b/src/components/CoinDetail/DailyNewsCard.jsx index 99aa8d1..38fa5b0 100644 --- a/src/components/CoinDetail/DailyNewsCard.jsx +++ b/src/components/CoinDetail/DailyNewsCard.jsx @@ -10,7 +10,7 @@ const DailyNewsCard = ({status, title, publisher, reliability, time}) => { NEGATIVE : "악재", POSITIVE : "호재" } - + const CalculateTime = (t) => { const getTime = new Date(t); const milliSeconds = new Date() - getTime; @@ -31,15 +31,15 @@ const DailyNewsCard = ({status, title, publisher, reliability, time}) => { } return ( -
+
-
+
{title}
-
+
{CalculateTime(time)}
|
신뢰도: 약 {RoundReliability(reliability)}%
@@ -50,4 +50,4 @@ const DailyNewsCard = ({status, title, publisher, reliability, time}) => { ) } -export default DailyNewsCard; \ No newline at end of file +export default DailyNewsCard; diff --git a/src/components/CoinDetail/History.jsx b/src/components/CoinDetail/History.jsx index b442d65..b3d63af 100644 --- a/src/components/CoinDetail/History.jsx +++ b/src/components/CoinDetail/History.jsx @@ -3,12 +3,6 @@ import HistoryCard from "./HistoryCard"; import { getAiPredictions } from "../../apis/CoinDetail/aihistory"; const History = ({ticker, currentPrice}) => { - //mock data - // const mockData= [ - // {id: 1, date: "2026.02.08", time: "16:00", prediction: "호재", result: "53", isSuccess: true}, - // {id: 2, date: "2026.02.08", time: "16:30", prediction: "호재", result: "54", isSuccess: true}, - // {id: 3, date: "2026.02.08", time: "17:00", prediction: "악재", result: "42", isSuccess: false}, - // ] const timeMapping = { "1시간": "HOUR_1", "3시간": "HOUR_3", @@ -26,7 +20,6 @@ const History = ({ticker, currentPrice}) => { setIsLoading(true); setIsError(null); const res = await getAiPredictions(ticker); - //console.log(res); setPredictionList(res.data?.content || []); } catch (error) { @@ -44,7 +37,7 @@ const History = ({ticker, currentPrice}) => { const renderContent = () => { if (isLoading) { return ( -
+
AI 예측 히스토리를 불러오는 중입니다.
) @@ -58,7 +51,7 @@ const History = ({ticker, currentPrice}) => { } if (predictionList.length === 0) { return ( -
+
AI 히스토리가 없습니다.
) @@ -66,12 +59,12 @@ const History = ({ticker, currentPrice}) => { return ( predictionList.map((item) => { - const targetInterval = timeMapping[selectedTime]; //HOUR_1 + const targetInterval = timeMapping[selectedTime]; const verification = item.verifications?.find(v => v.intervalType === targetInterval); if (!verification) return null; - + return ( - { const time_type = ["1시간", "3시간", "12시간", "24시간"]; return ( -
+
-
+
AI 예측 히스토리
{time_type.map((time) => ( -
setSelectedTime(time)} - className={`border border-[#E0E0E0] px-4 py-2 rounded-sm text-[14px] cursor-pointer flex items-center - ${selectedTime === time ? "text-white bg-[#1F78F2] border-none" : "border-[#E0E0E0] text-[#616161]"}`} + className={`border px-4 py-2 rounded-sm text-[14px] cursor-pointer flex items-center + ${selectedTime === time ? "text-[#0A192F] bg-[#64FFDA] border-transparent" : "border-[#233554] text-[#8892B0]"}`} > {time}
@@ -116,4 +109,4 @@ const History = ({ticker, currentPrice}) => { ) } -export default History; \ No newline at end of file +export default History; diff --git a/src/components/CoinDetail/HistoryCard.jsx b/src/components/CoinDetail/HistoryCard.jsx index 67a78a8..89858b1 100644 --- a/src/components/CoinDetail/HistoryCard.jsx +++ b/src/components/CoinDetail/HistoryCard.jsx @@ -13,7 +13,7 @@ const HistoryCard = ({date, time, ai_prediction, actual_price, current_price, pr const StatusConfig = { positive: { color: 'text-[#FF4D66]', icon: "mingcute:arrow-up-fill" }, negative: { color: 'text-[#4073FF]', icon: "mingcute:arrow-down-fill" }, - neutral: { color: 'text-[#9E9E9E]', icon: null } + neutral: { color: 'text-[#8892B0]', icon: null } }; const {rate, status} = useMemo(() => { @@ -32,20 +32,20 @@ const HistoryCard = ({date, time, ai_prediction, actual_price, current_price, pr }, [actual_price, current_price]); return ( -
+
-
{time.split("T")[1].split(":")[0]}:{time.split("T")[1].split(":")[1]}
-
{date}
+
{time.split("T")[1].split(":")[0]}:{time.split("T")[1].split(":")[1]}
+
{date}
-
AI 예측
+
AI 예측
-
실제 결과
+
실제 결과
{rate}% {StatusConfig[status].icon && ( @@ -55,42 +55,42 @@ const HistoryCard = ({date, time, ai_prediction, actual_price, current_price, pr
-
예측 결과
+
예측 결과
-
setIsOpen(!isOpen)} +
setIsOpen(!isOpen)} >

사용된 기사 보기

- {isOpen ? - () : - () + {isOpen ? + () : + () }
{isOpen && ( -
-

+

+

이 예측에 사용된 기사

- - - { return ( -
+
-
+
{title}
-
+
{publisher} | {formatTime(time)}
) } -export default PredictionNewsCard; \ No newline at end of file +export default PredictionNewsCard; diff --git a/src/components/MainPage/CoinListTable.jsx b/src/components/MainPage/CoinListTable.jsx index e6aea15..79516c8 100644 --- a/src/components/MainPage/CoinListTable.jsx +++ b/src/components/MainPage/CoinListTable.jsx @@ -61,14 +61,14 @@ const CoinListTable = () => { return ( -
+
{/* Header */} -
-

코인 시세

+
+

코인 시세

{/* Table Header */} -
+
코인명 가격 등락폭 @@ -77,7 +77,7 @@ const CoinListTable = () => { {/* Table Rows */} {loading ? ( -
+
로딩 중...
) : error ? ( @@ -89,11 +89,11 @@ const CoinListTable = () => { {coins.map((coin, index) => (
nav(`/coindetail/${coin.ticker}`)} > - -
+ +
{coin.logoUrl ? ( { className="w-full h-full object-cover" onError={(e) => { e.target.style.display = "none"; - e.target.parentElement.innerHTML = `${coin.ticker.slice(0, 2)}`; + e.target.parentElement.innerHTML = `${coin.ticker.slice(0, 2)}`; }} /> ) : ( - {coin.ticker.slice(0, 2)} + {coin.ticker.slice(0, 2)} )}
{coin.name} ({coin.ticker}) - + {coin.currentPrice == null ? "-" : `₩${formatPrice(coin.currentPrice)}`} = 0 ? "text-[#FF4242]" : "text-[#4073FF]"}`}> {coin.changeRate == null ? "-" : `${formatChangeRate(coin.changeRate)}%`} - + {coin.tradingVolume24h == null ? "-" : `₩${formatTradeValue(coin.tradingVolume24h)}`}
))} {hasNext && ( -
+