Implement AI prediction history card, news UI, and API connections by Ed-hacker · Pull Request #44 · Co1nsight/CoInsight_web

Ed-hacker · 2026-03-06T01:38:47Z

This pull request introduces several new API integrations and refactors key components in the Coin Detail feature to improve data fetching, error handling, and user experience. The changes include adding new API modules for coins and news, updating routing to support dynamic coin tickers, and refactoring components to utilize the new APIs and display loading/error states. Additionally, a new package is added for icon support.

[FEAT] AI 예측 히스토리 카드 구현

[MOD] 코인 상세 정보 api 연결

[MOD] 코인 차트 api 연결

[MOD] 리팩터링 및 에러 처리 코드 추가

[FEAT] newsCard UI 구현

[ADD] 코인 로고 추가

[UI] 메인 페이지 구현

Feature/1 coin

Feature/4 newslist

[FEAT] 코인별 뉴스 카드 ui 구현

[MOD] roundButton 수정

[FEAT] 코인 별 뉴스 api 연결

[FEAT] 코인 리스트 클릭 시 상세 페이지 이동 기능 구현

[FEAT] ai 예측 히스토리 api 연결 및 데이터 가공

[MOD] cointable null 처리

[FEAT] 뉴스 검색 기능 구현

Copilot

Pull request overview

This PR adds several new features to the CoinSight cryptocurrency tracking application: it introduces API integration modules for news, coin data, and market tickers; refactors the CoinDetail page to use dynamic routing with :ticker params; adds new UI components for AI prediction history cards, daily news, and search functionality; and connects these components to backend APIs with proper loading/error state handling.

Changes:

Added new API modules (News/search, News/analysis, Market/tickers, CoinDetail/coinNews, CoinDetail/aihistory, CoinDetail/chart) and updated existing ones to integrate with the backend
Refactored CoinDetailPage to support dynamic coin tickers via URL params, added AI prediction history (History/HistoryCard), daily news (DailyNews/DailyNewsCard), and migrated chart data fetching to the backend API
Added MainPage with news analysis feed and coin list table, SearchResultPage with news search, and shared components (SearchBar, RoundButton, NewsCard, CoinListTable)

Reviewed changes

Copilot reviewed 26 out of 28 changed files in this pull request and generated 16 comments.

Show a summary per file

File	Description
`src/App.jsx`	Added dynamic `:ticker` route for CoinDetail and new `/search` route
`src/pages/CoinDetailPage.jsx`	Refactored to use `useParams` for dynamic ticker, integrated backend API for coin info
`src/pages/MainPage.jsx`	Added news analysis feed, search bar, and coin list table
`src/pages/SearchResultPage.jsx`	New page for news search results
`src/components/common/SearchBar.jsx`	New shared search bar with navigation
`src/components/common/RoundButton.jsx`	New reusable sentiment/status badge button
`src/components/common/Navbar.jsx`	Minor formatting and min-width addition
`src/components/MainPage/NewsCard.jsx`	New news card with sentiment display and time-ago formatting
`src/components/MainPage/CoinListTable.jsx`	New coin price table with domestic/overseas tabs
`src/components/MainPage/NewsSearchBar.jsx`	New news-specific search bar (unused)
`src/components/MainPage/CoinSearchBar.jsx`	New coin-specific search bar (unused)
`src/components/CoinDetail/History.jsx`	Refactored to fetch AI prediction history from backend API
`src/components/CoinDetail/HistoryCard.jsx`	New card for displaying individual AI predictions
`src/components/CoinDetail/PredictionNewsCard.jsx`	New card for articles used in predictions
`src/components/CoinDetail/DailyNews.jsx`	New daily news section for coin detail
`src/components/CoinDetail/DailyNewsCard.jsx`	New card for daily news items
`src/components/CoinDetail/CoinChart.jsx`	Migrated chart data fetching to backend API (partial)
`src/apis/News/search.js`	New API for news search
`src/apis/News/analysis.js`	New API for news analysis list
`src/apis/Market/tickers.js`	New API for market tickers
`src/apis/CoinDetail/coinNews.js`	New API for coin-specific news
`src/apis/CoinDetail/coinInfo.js`	Updated to return `res.data` instead of `res`
`src/apis/CoinDetail/chart.js`	New API for candle chart data
`src/apis/CoinDetail/aihistory.js`	New API for AI predictions and prediction news
`src/assets/pixelarticons--coin.svg`	New fallback coin logo SVG
`package.json` / `package-lock.json`	Added `iconify-icon` dependency
`.env.example`	Deleted

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

You can also share your feedback on Copilot code review. Take the survey.

Copilot · 2026-03-06T01:45:34Z

src/pages/CoinDetailPage.jsx

+            }
+        }

        fetch(`https://api.bithumb.com/public/candlestick/BTC_KRW/1h`, options)


The Bithumb candlestick API URL is hardcoded to BTC_KRW, but the page now supports dynamic tickers via useParams(). For any coin other than BTC, this will always fetch BTC data, producing incorrect fluctuation rate and price information. The URL should use the dynamic ticker value (e.g., constructing ${ticker}_KRW).

Suggested change

fetch(`https://api.bithumb.com/public/candlestick/BTC_KRW/1h`, options)

fetch(`https://api.bithumb.com/public/candlestick/${ticker}_KRW/1h`, options)

Copilot · 2026-03-06T01:45:35Z

src/components/CoinDetail/CoinChart.jsx

    const onClickDay = () => {
        const options = {method: 'GET', headers: {accept: 'application/json'}};

-        fetch(`https://api.bithumb.com/v1/candles/days?market=${coinName}&count=200`, options)
+        fetch(`https://api.bithumb.com/v1/candles/days?market=${ticker}&count=200`, options)


The onClickDay function still calls the Bithumb API directly with ticker as the market parameter, but the ticker prop now contains just the symbol (e.g., BTC), whereas the Bithumb API expects the full market format (e.g., KRW-BTC). This means the 1-day chart will fail for all coins. The other time intervals (1min, 1hr, 4hr) were correctly migrated to use the backend API via fetchCandleData. The onClickDay should also be migrated to use the backend API for consistency and correctness.

Copilot · 2026-03-06T01:45:35Z

src/pages/CoinDetailPage.jsx

+
+    const [coinInfo, setCoinInfo] = useState({
+        name: "",
+        ticker1: "",


The property name ticker1 is unclear and ambiguous. It stores the ticker from the API response to differentiate it from the ticker URL param, but the name doesn't convey this purpose. Consider a more descriptive name like apiTicker or displayTicker, or simply reuse the ticker param since they should represent the same value.

Copilot · 2026-03-06T01:45:35Z

src/pages/CoinDetailPage.jsx

        const formatPrice = Number(value) / 100000000;
        return `${formatPrice.toLocaleString(undefined, {maximumFractionDigits: 1})}억`;


Inside formatPrice, the local variable formatPrice shadows the outer function name formatPrice. While this works because JavaScript resolves the inner scope variable, it's confusing and could lead to subtle bugs if the function were ever intended to be called recursively or referenced internally. Consider renaming the local variable to something like priceInEok.

Copilot · 2026-03-06T01:45:35Z

src/pages/CoinDetailPage.jsx

-    }
-
    useEffect (() => {
        const options = {method: 'GET', headers: {accept: 'application/json'}};


The options variable declared on line 34 is only used by the hardcoded Bithumb fetch call on line 58. Now that fetchCoinInfo uses the backend API via getCoinInfo, this options variable is only needed for the remaining direct fetch. Once the Bithumb fetch is also migrated to the backend API, this variable should be removed.

Copilot · 2026-03-06T01:45:37Z

src/components/CoinDetail/PredictionNewsCard.jsx

+        return `${time.getFullYear()}년 ${time.getMonth() + 1}월 ${time.getDate()}일
+        ${time.getHours()}:${time.getMinutes()}`
+    }
+
+


The formatTime function produces a multi-line string due to the template literal spanning two lines. The output will contain unintended whitespace/newline characters between the date and time portions. The template literal should be on a single line or the whitespace should be trimmed.

Suggested change

return `${time.getFullYear()}년 ${time.getMonth() + 1}월 ${time.getDate()}일

${time.getHours()}:${time.getMinutes()}`

}

return `${time.getFullYear()}년 ${time.getMonth() + 1}월 ${time.getDate()}일 ${time.getHours()}:${time.getMinutes()}`

}

Copilot · 2026-03-06T01:45:37Z

src/components/CoinDetail/PredictionNewsCard.jsx

+        POSITIVE : "positive"
+    }
+    const contentType = {
+        NEGATIVE : "악재",
+        POSITIVE : "호재"


Same as DailyNewsCard, labelType and contentType only handle NEGATIVE and POSITIVE but not NEUTRAL. If the API returns a NEUTRAL sentiment, both mappings will return undefined, causing RoundButton to render with undefined status and content.

Suggested change

POSITIVE : "positive"

}

const contentType = {

NEGATIVE : "악재",

POSITIVE : "호재"

POSITIVE : "positive",

NEUTRAL : "neutral",

}

const contentType = {

NEGATIVE : "악재",

POSITIVE : "호재",

NEUTRAL : "중립",

Copilot · 2026-03-06T01:45:37Z

src/apis/CoinDetail/chart.js


+export const getCandleInfo = async (ticker, unit=1, count=200) => {
+    try {
+        const res = await instance.get(`/api/v1/market/candles/${ticker}?unit=${unit}&count=${count}`);


Query parameters are manually concatenated into the URL string rather than using params as done consistently in all other API functions in this PR (e.g., search.js, analysis.js, tickers.js, coinNews.js). This is inconsistent and could lead to encoding issues. Use params: { unit, count } as the second argument to instance.get for consistency with the rest of the codebase.

Suggested change

const res = await instance.get(`/api/v1/market/candles/${ticker}?unit=${unit}&count=${count}`);

const res = await instance.get(`/api/v1/market/candles/${ticker}`, {

params: { unit, count },

});

Copilot · 2026-03-06T01:45:38Z

package.json

    "eslint-plugin-react-hooks": "^7.0.1",
    "eslint-plugin-react-refresh": "^0.4.24",
    "globals": "^16.5.0",
+    "iconify-icon": "^3.0.2",


The iconify-icon package is added under devDependencies, but it is used at runtime in multiple components (RoundButton, SearchBar, CoinListTable, HistoryCard, etc.) as a web component. Since it is needed in the production bundle, it should be in dependencies instead of devDependencies. While Vite will still bundle it during development, this is semantically incorrect and could cause issues in certain build/deployment pipelines that strip devDependencies.

Copilot · 2026-03-06T01:45:38Z

src/apis/CoinDetail/aihistory.js

+export const getPredictionNews = async (ticker, predictionId) => {
+    try {
+        const res = await instance.get(`/api/v1/crypto/${ticker}/predictions/${predictionId}/news`);
+        console.log(res);


console.log(res) is left in production code. Other API functions in this PR correctly comment out or omit their console.log calls. This debug logging should be removed.

Suggested change

console.log(res);

//console.log(res);

Juyoung03 and others added 30 commits February 8, 2026 16:21

[FEAT] AI 예측 히스토리 카드 구현

1f51834

Merge pull request #27 from Co1nsight/feature/6-aihistory

4343148

[FEAT] AI 예측 히스토리 카드 구현

[MOD] 코인 상세 정보 api 연결

29fe796

Merge pull request #28 from Co1nsight/feature/5-coininfo

0142761

[MOD] 코인 상세 정보 api 연결

[MOD] 코인 차트 api 연결

74e535a

Merge pull request #29 from Co1nsight/feature/8-coinchart

20ed3e1

[MOD] 코인 차트 api 연결

[MOD] 리팩터링 및 에러 처리 코드 추가

2684bc5

Merge pull request #30 from Co1nsight/feature/8-coinchart

7f229e1

[MOD] 리팩터링 및 에러 처리 코드 추가

[FEAT] newsCard UI 구현

910c17a

Merge pull request #31 from Co1nsight/feature/6-aihistory

709c013

[FEAT] newsCard UI 구현

[ADD] 코인 로고 추가

9296631

Merge pull request #32 from Co1nsight/feature/5-coininfo

5a3161e

[ADD] 코인 로고 추가

[UI] 메인 페이지 구현

e00cd22

Merge pull request #33 from Co1nsight/feature/1-coinUI

b649e73

[UI] 메인 페이지 구현

[MOD] mock data 교체

cd91f2e

[UI] 메인페이지 화면 크기에 따른 스크롤 생성 및 호재/악재 배지 크기 수정

5b25992

Merge pull request #34 from Co1nsight/feature/1-coin

7c0f74a

Feature/1 coin

[FEAT] 뉴스 리스트

bbcbfd9

[MOD] env 수정

7de8006

Merge pull request #35 from Co1nsight/feature/4-newslist

51e4d66

Feature/4 newslist

[FEAT] 코인별 뉴스 카드 ui 구현

a883c45

Merge pull request #36 from Co1nsight/feature/6-aihistory

4be789a

[FEAT] 코인별 뉴스 카드 ui 구현

[MOD] roundButton 수정

0c3a4ef

Merge pull request #37 from Co1nsight/feature/6-aihistory

1a6338f

[MOD] roundButton 수정

[FEAT] 코인 별 뉴스 api 연결

1cd08c7

Merge pull request #39 from Co1nsight/feature/38-coin_related_news

d9b8e50

[FEAT] 코인 별 뉴스 api 연결

[FEAT] 코인 리스트 클릭 시 상세 페이지 이동 기능 구현

72c3351

Merge pull request #40 from Co1nsight/feature/5-coininfo

74b332e

[FEAT] 코인 리스트 클릭 시 상세 페이지 이동 기능 구현

[FEAT] ai 예측 히스토리 api 연결 및 데이터 가공

7cd7c5b

Merge pull request #41 from Co1nsight/feature/6-aihistory

984bdf3

[FEAT] ai 예측 히스토리 api 연결 및 데이터 가공

himinji added 4 commits February 24, 2026 23:39

[MOD] cointable null 처리

bc4103f

Merge pull request #42 from Co1nsight/feature/1-coinlist

a4163ae

[MOD] cointable null 처리

[FEAT] 뉴스 검색 기능 구현

5e69963

Merge pull request #43 from Co1nsight/feature/4-newssearch

7b8c2d9

[FEAT] 뉴스 검색 기능 구현

Ed-hacker requested a review from Copilot March 6, 2026 01:38

Copilot started reviewing on behalf of Ed-hacker March 6, 2026 01:39 View session

Ed-hacker merged commit dde5867 into release Mar 6, 2026
4 checks passed

Copilot AI reviewed Mar 6, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement AI prediction history card, news UI, and API connections#44

Implement AI prediction history card, news UI, and API connections#44
Ed-hacker merged 34 commits intoreleasefrom
main

Ed-hacker commented Mar 6, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 6, 2026

Uh oh!

Copilot AI Mar 6, 2026

Uh oh!

Copilot AI Mar 6, 2026

Uh oh!

Copilot AI Mar 6, 2026

Uh oh!

Copilot AI Mar 6, 2026

Uh oh!

Copilot AI Mar 6, 2026

Uh oh!

Copilot AI Mar 6, 2026

Uh oh!

Copilot AI Mar 6, 2026

Uh oh!

Copilot AI Mar 6, 2026

Uh oh!

Copilot AI Mar 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	fetch(`https://api.bithumb.com/public/candlestick/BTC_KRW/1h`, options)
	fetch(`https://api.bithumb.com/public/candlestick/${ticker}_KRW/1h`, options)

		const formatPrice = Number(value) / 100000000;
		return `${formatPrice.toLocaleString(undefined, {maximumFractionDigits: 1})}억`;

-        const res = await instance.get(`/api/v1/market/candles/${ticker}?unit=${unit}&count=${count}`);
+        const res = await instance.get(`/api/v1/market/candles/${ticker}`, {
+            params: { unit, count },
+        });

Conversation

Ed-hacker commented Mar 6, 2026

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 6, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants