[Feat/#40] 종목 상세 페이지 차트 구현 #42
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR refactors import paths from relative to absolute using the @/ alias and implements a stock chart feature for the market detail page. Key changes include:
- Standardizing imports across the codebase to use absolute paths with
@/alias - Adding a new stock chart component with candlestick and line chart visualization using ECharts
- Refactoring the MarketDetailPage to work with historical price data instead of single-point data
- Removing unused category filtering feature from MarketsPage
- Adding new dependencies (echarts, echarts-for-react, @radix-ui/react-tabs, date-fns)
Reviewed Changes
Copilot reviewed 29 out of 31 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/routes/routes.tsx | Updated imports to use absolute path alias |
| src/pages/MarketsPage.tsx | Removed category filtering functionality and updated imports |
| src/pages/MarketDetailPage.tsx | Refactored to display historical price data and integrate stock chart |
| src/_MarketDetailPage/components/StockChart.tsx | New component implementing chart visualization with period/type filters |
| src/_MarketDetailPage/components/ChartFilterBar.tsx | New component for chart filter controls |
| src/_MarketDetailPage/types/stockDataType.ts | Restructured to support historical price data model |
| src/_MarketDetailPage/datas/stockSample.ts | Expanded sample data with 30 days of price history |
| src/components/ui/tabs.tsx | New UI component for tab navigation |
| package.json | Added echarts, echarts-for-react, @radix-ui/react-tabs dependencies |
| All other files | Updated imports to use absolute path alias |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| } | ||
|
|
||
| const StockChart = ({ stockData }: StockChartProps) => { | ||
| const [period, setPeriod] = useState<Period>("1M"); |
There was a problem hiding this comment.
The period state is set but not used to filter the stockData. The chart displays all data regardless of the selected period (1W, 1M, 1Y, 10Y). Consider implementing data filtering logic based on the selected period, or remove the unused state.
| }, | ||
| }; | ||
| return ( | ||
| <div className="flex-col gap-20 m-10 w-full"> |
There was a problem hiding this comment.
The flex-col class requires flex display class to work. Add flex to the className: className=\"flex flex-col gap-20 m-10 w-full\"
| <div className="flex-col gap-20 m-10 w-full"> | |
| <div className="flex flex-col gap-20 m-10 w-full"> |
🚀 연관된 이슈
📌 작업 내용
📸 추가 자료
2025-11-03.11.03.28.mov