1. 라우팅 최적화

2. API 호출 병렬 처리
3. UI개선 - 로딩 경험 개선
4. 반응형 디자인
5. API 통신 특이사항 - URL 구성 로직의 잠재적 위험 해결

src/pages/stock/Stock.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
 import { getStockIndices, getStockNews } from '../../api';
+import Loading from '../../components/Loading';
 import './Stock.css';
 
 const formatDate = (value) => {
@@ -206,7 +207,7 @@ const Stock = () => {
                     </div>
                     <div className="stock-panel__actions">
                         {indicesLoading ? (
-                            <span className="stock-chip">불러오는 중</span>
+                            <Loading type="spinner" message="" />
                         ) : null}
                         <button
                             className="button ghost small"
@@ -237,22 +238,20 @@ const Stock = () => {
                             return (
                                 <div
                                     key={item.name}
-                                    className={`stock-snapshot__card ${
-                                        highlighted.has(item.name)
-                                            ? 'is-highlight'
-                                            : ''
-                                    }`}
+                                    className={`stock-snapshot__card ${highlighted.has(item.name)
+                                        ? 'is-highlight'
+                                        : ''
+                                        }`}
                                 >
                                     <p>{item.name}</p>
                                     <strong>{item.value ?? '--'}</strong>
                                     <span
-                                        className={`stock-snapshot__change ${
-                                            direction === 'up'
-                                                ? 'is-up'
-                                                : direction === 'down'
-                                                  ? 'is-down'
-                                                  : ''
-                                        }`}
+                                        className={`stock-snapshot__change ${direction === 'up'
+                                            ? 'is-up'
+                                            : direction === 'down'
+                                                ? 'is-down'
+                                                : ''
+                                            }`}
                                     >
                                         {changeText || '--'}
                                     </span>
@@ -332,9 +331,7 @@ const Stock = () => {
                         </p>
                     </div>
                     <div className="stock-panel__actions">
-                        {loading ? (
-                            <span className="stock-chip">불러오는 중</span>
-                        ) : null}
+                        {loading && <span className="stock-chip">Updating...</span>}
                         <span className="stock-chip">
                             국내 {newsDomestic.length} / 해외{' '}
                             {newsOverseas.length}
@@ -342,8 +339,8 @@ const Stock = () => {
                     </div>
                 </div>
 
-                {loading ? (
-                    <p className="stock-empty">뉴스를 불러오는 중...</p>
+                {loading && combinedNews.length === 0 ? (
+                    <Loading type="skeleton" />
                 ) : newsError ? (
                     <p className="stock-empty">{newsError}</p>
                 ) : combinedNews.length === 0 ? (
@@ -353,22 +350,20 @@ const Stock = () => {
                         <div className="stock-tabs">
                             <button
                                 type="button"
-                                className={`stock-tab ${
-                                    newsCategory === 'domestic'
-                                        ? 'is-active'
-                                        : ''
-                                }`}
+                                className={`stock-tab ${newsCategory === 'domestic'
+                                    ? 'is-active'
+                                    : ''
+                                    }`}
                                 onClick={() => setNewsCategory('domestic')}
                             >
                                 국내
                             </button>
                             <button
                                 type="button"
-                                className={`stock-tab ${
-                                    newsCategory === 'overseas'
-                                        ? 'is-active'
-                                        : ''
-                                }`}
+                                className={`stock-tab ${newsCategory === 'overseas'
+                                    ? 'is-active'
+                                    : ''
+                                    }`}
                                 onClick={() => setNewsCategory('overseas')}
                             >
                                 해외