gahusb/web-page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

주식 즉시 스크래핑 api 오류 수정

Browse Source
This commit is contained in:
gahusb
2026-01-26 03:58:00 +09:00
parent 5dab3d99c1
commit 5f4742085c
3 changed files with 137 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/pages/stock/Stock.css
View File

@@ -116,7 +116,7 @@
.stock-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 18px;
}
@@ -174,6 +174,7 @@
.stock-snapshot {
display: grid;
gap: 12px;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.stock-snapshot__card {
@@ -183,6 +184,7 @@
display: grid;
gap: 6px;
background: rgba(0, 0, 0, 0.2);
min-height: 94px;
}
.stock-snapshot__card.is-highlight {
@@ -262,6 +264,28 @@
gap: 14px;
}
.stock-tabs {
display: flex;
gap: 8px;
margin-bottom: 10px;
}
.stock-tab {
border: 1px solid var(--line);
background: rgba(0, 0, 0, 0.2);
color: var(--muted);
border-radius: 999px;
padding: 6px 12px;
font-size: 12px;
cursor: pointer;
transition: border-color 0.2s ease, color 0.2s ease;
}
.stock-tab.is-active {
border-color: rgba(255, 255, 255, 0.5);
color: var(--text);
}
.stock-news__item {
border: 1px solid var(--line);
border-radius: 16px;

174
src/pages/stock/Stock.jsx
View File

@@ -26,7 +26,9 @@ const getLatestBy = (items, key) => {
};
const Stock = () => {
const [news, setNews] = useState([]);
const [newsDomestic, setNewsDomestic] = useState([]);
const [newsOverseas, setNewsOverseas] = useState([]);
const [newsCategory, setNewsCategory] = useState('domestic');
const [limit, setLimit] = useState(20);
const [loading, setLoading] = useState(false);
const [scraping, setScraping] = useState(false);
@@ -43,21 +45,29 @@ const Stock = () => {
const [indicesAt, setIndicesAt] = useState('');
const [autoRefreshMs] = useState(180000);
const combinedNews = useMemo(
() => [...newsDomestic, ...newsOverseas],
[newsDomestic, newsOverseas]
);
const latestCrawled = useMemo(
() => getLatestBy(news, 'crawled_at'),
[news]
() => getLatestBy(combinedNews, 'crawled_at'),
[combinedNews]
);
const latestPublished = useMemo(
() => getLatestBy(news, 'pub_date'),
[news]
() => getLatestBy(combinedNews, 'pub_date'),
[combinedNews]
);
const loadNews = async () => {
setLoading(true);
setNewsError('');
try {
const data = await getStockNews(limit);
setNews(Array.isArray(data) ? data : []);
const [domestic, overseas] = await Promise.all([
getStockNews(limit, 'domestic'),
getStockNews(limit, 'overseas'),
]);
setNewsDomestic(Array.isArray(domestic) ? domestic : []);
setNewsOverseas(Array.isArray(overseas) ? overseas : []);
} catch (err) {
setNewsError(err?.message ?? String(err));
} finally {
@@ -175,7 +185,7 @@ const Stock = () => {
</div>
<div>
<span>기사 수</span>
<strong>{news.length}건</strong>
<strong>{combinedNews.length}건</strong>
</div>
</div>
{health.message ? (
@@ -223,20 +233,32 @@ const Stock = () => {
) : (
[...indices]
.sort((a, b) => {
const order = ['KOSPI', 'KOSDAQ', 'KOSPI200'];
const aIdx = order.indexOf(a.name);
const bIdx = order.indexOf(b.name);
if (aIdx === -1 && bIdx === -1) return 0;
if (aIdx === -1) return 1;
if (bIdx === -1) return -1;
return aIdx - bIdx;
const typeOrder = ['domestic', 'overseas'];
const order = {
domestic: ['KOSPI', 'KOSDAQ', 'KOSPI200'],
overseas: ['NASDAQ', 'NAS', 'S&P500'],
};
const aTypeIdx = typeOrder.indexOf(a.type);
const bTypeIdx = typeOrder.indexOf(b.type);
if (aTypeIdx !== bTypeIdx) {
return (
(aTypeIdx === -1 ? 99 : aTypeIdx) -
(bTypeIdx === -1 ? 99 : bTypeIdx)
);
}
const aOrder =
order[a.type]?.indexOf(a.name) ?? 999;
const bOrder =
order[b.type]?.indexOf(b.name) ?? 999;
return aOrder - bOrder;
})
.map((item) => (
<div
key={item.name}
className={`stock-snapshot__card ${
item.name?.toUpperCase?.() ===
'KOSPI200'
['KOSPI200', 'NASDAQ', 'NAS'].includes(
item.name?.toUpperCase?.() ?? ''
)
? 'is-highlight'
: ''
}`}
@@ -266,32 +288,6 @@ const Stock = () => {
</div>
</div>
<div className="stock-panel">
<div className="stock-panel__head">
<div>
<p className="stock-panel__eyebrow">Schedule</p>
<h3>스크랩 일정</h3>
<p className="stock-panel__sub">
매일 오전 8시에 자동 스크랩이 실행됩니다.
</p>
</div>
</div>
<div className="stock-schedule">
<div>
<span>자동 실행</span>
<strong>08:00 KST</strong>
</div>
<div>
<span>수동 실행</span>
<strong>관리자 전용</strong>
</div>
<div>
<span>최근 스크랩</span>
<strong>{formatDate(latestCrawled)}</strong>
</div>
</div>
</div>
<div className="stock-panel">
<div className="stock-panel__head">
<div>
@@ -338,7 +334,10 @@ const Stock = () => {
{loading ? (
<span className="stock-chip">불러오는 중</span>
) : null}
<span className="stock-chip">{news.length}건</span>
<span className="stock-chip">
국내 {newsDomestic.length} · 해외{' '}
{newsOverseas.length}
</span>
</div>
</div>
@@ -346,34 +345,71 @@ const Stock = () => {
<p className="stock-empty">뉴스를 불러오는 중...</p>
) : newsError ? (
<p className="stock-empty">{newsError}</p>
) : news.length === 0 ? (
) : combinedNews.length === 0 ? (
<p className="stock-empty">표시할 뉴스가 없습니다.</p>
) : (
<div className="stock-news">
{news.map((item) => (
<article key={item.id} className="stock-news__item">
<div>
<p className="stock-news__title">
{item.title}
</p>
<p className="stock-news__summary">
{item.summary}
</p>
</div>
<div className="stock-news__meta">
<span>{item.press}</span>
<span>{item.pub_date}</span>
<a
href={item.link}
target="_blank"
rel="noreferrer"
<>
<div className="stock-tabs">
<button
type="button"
className={`stock-tab ${
newsCategory === 'domestic'
? 'is-active'
: ''
}`}
onClick={() => setNewsCategory('domestic')}
>
국내 뉴스
</button>
<button
type="button"
className={`stock-tab ${
newsCategory === 'overseas'
? 'is-active'
: ''
}`}
onClick={() => setNewsCategory('overseas')}
>
해외 뉴스
</button>
</div>
{newsCategory === 'overseas' &&
newsOverseas.length === 0 ? (
<p className="stock-empty">해외 뉴스 없음</p>
) : (
<div className="stock-news">
{(newsCategory === 'domestic'
? newsDomestic
: newsOverseas
).map((item) => (
<article
key={item.id}
className="stock-news__item"
>
원문 보기
</a>
</div>
</article>
))}
</div>
<div>
<p className="stock-news__title">
{item.title}
</p>
<p className="stock-news__summary">
{item.summary}
</p>
</div>
<div className="stock-news__meta">
<span>{item.press}</span>
<span>{item.pub_date}</span>
<a
href={item.link}
target="_blank"
rel="noreferrer"
>
원문 보기
</a>
</div>
</article>
))}
</div>
)}
</>
)}
</section>
</div>