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

src/api.js

@@ -58,12 +58,16 @@ export function deleteHistory(id) {
   return apiDelete(`/api/history/${id}`);
 }
 
-export function getStockNews(limit = 20) {
+export function getStockNews(limit = 20, category) {
-  return apiGet(`/api/stock/news?limit=${limit}`);
+  const qs = new URLSearchParams({ limit: String(limit) });
+  if (category) {
+    qs.set("category", category);
+  }
+  return apiGet(`/api/stock/news?${qs.toString()}`);
 }
 
 export function triggerStockScrap() {
-  return apiPost("/api/admin/stock/scrap");
+  return apiPost("/api/stock/scrap");
 }
 
 export function getStockHealth() {

src/pages/stock/Stock.css

@@ -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;

src/pages/stock/Stock.jsx

@@ -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'),
+        () => getLatestBy(combinedNews, 'crawled_at'),
-        [news]
+        [combinedNews]
     );
     const latestPublished = useMemo(
-        () => getLatestBy(news, 'pub_date'),
+        () => getLatestBy(combinedNews, 'pub_date'),
-        [news]
+        [combinedNews]
     );
 
     const loadNews = async () => {
         setLoading(true);
         setNewsError('');
         try {
-            const data = await getStockNews(limit);
+            const [domestic, overseas] = await Promise.all([
-            setNews(Array.isArray(data) ? data : []);
+                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 typeOrder = ['domestic', 'overseas'];
-                                    const aIdx = order.indexOf(a.name);
+                                    const order = {
-                                    const bIdx = order.indexOf(b.name);
+                                        domestic: ['KOSPI', 'KOSDAQ', 'KOSPI200'],
-                                    if (aIdx === -1 && bIdx === -1) return 0;
+                                        overseas: ['NASDAQ', 'NAS', 'S&P500'],
-                                    if (aIdx === -1) return 1;
+                                    };
-                                    if (bIdx === -1) return -1;
+                                    const aTypeIdx = typeOrder.indexOf(a.type);
-                                    return aIdx - bIdx;
+                                    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', 'NASDAQ', 'NAS'].includes(
-                                            'KOSPI200'
+                                                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,12 +345,47 @@ 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-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">
-                        {news.map((item) => (
+                                {(newsCategory === 'domestic'
-                            <article key={item.id} className="stock-news__item">
+                                    ? newsDomestic
+                                    : newsOverseas
+                                ).map((item) => (
+                                    <article
+                                        key={item.id}
+                                        className="stock-news__item"
+                                    >
                                         <div>
                                             <p className="stock-news__title">
                                                 {item.title}
@@ -375,6 +409,8 @@ const Stock = () => {
                                 ))}
                             </div>
                         )}
+                    </>
+                )}
             </section>
         </div>
     );