From 219dc86adb36756fa5dd9705ec159f4bd4636370 Mon Sep 17 00:00:00 2001
From: Seo San <dannysir@naver.com>
Date: Tue, 3 Dec 2024 13:29:36 +0900
Subject: [PATCH 01/11] =?UTF-8?q?=E2=9C=A8=20feat:=20SEO=20=EC=B5=9C?=
 =?UTF-8?q?=EC=A0=81=ED=99=94=20#254=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20alt?=
 =?UTF-8?q?=20=EC=86=8D=EC=84=B1=20=EC=B6=94=EA=B0=80.=20react-helmet?=
 =?UTF-8?q?=EC=9D=84=20=EC=9D=B4=EC=9A=A9=ED=95=B4=20meta=ED=83=9C?=
 =?UTF-8?q?=EA=B7=B8=EC=99=80=20title=20=EC=B6=94=EA=B0=80.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FE/package-lock.json         | 11 +++++++++++
 FE/package.json              |  1 +
 FE/public/robots.txt         |  2 ++
 FE/src/App.tsx               |  9 +++++++++
 FE/src/components/Header.tsx |  2 +-
 FE/src/page/Home.tsx         |  5 +++++
 FE/src/page/MyPage.tsx       |  5 +++++
 FE/src/page/Rank.tsx         |  7 ++++++-
 FE/src/page/StocksDetail.tsx |  5 +++++
 9 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 FE/public/robots.txt

diff --git a/FE/package-lock.json b/FE/package-lock.json
index 76198c20..09bb14fb 100644
--- a/FE/package-lock.json
+++ b/FE/package-lock.json
@@ -26,6 +26,7 @@
         "@types/node": "^22.9.1",
         "@types/react": "^18.3.12",
         "@types/react-dom": "^18.3.1",
+        "@types/react-helmet": "^6.1.11",
         "@vitejs/plugin-react": "^4.3.3",
         "autoprefixer": "^10.4.20",
         "eslint": "^9.13.0",
@@ -1384,6 +1385,16 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-helmet": {
+      "version": "6.1.11",
+      "resolved": "https://registry.npmjs.org/@types/react-helmet/-/react-helmet-6.1.11.tgz",
+      "integrity": "sha512-0QcdGLddTERotCXo3VFlUSWO3ztraw8nZ6e3zJSgG7apwV5xt+pJUS8ewPBqT4NYB1optGLprNQzFleIY84u/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.12.2",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.12.2.tgz",
diff --git a/FE/package.json b/FE/package.json
index cd6f9135..e0a75f6a 100644
--- a/FE/package.json
+++ b/FE/package.json
@@ -28,6 +28,7 @@
     "@types/node": "^22.9.1",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
+    "@types/react-helmet": "^6.1.11",
     "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.13.0",
diff --git a/FE/public/robots.txt b/FE/public/robots.txt
new file mode 100644
index 00000000..f5a734c4
--- /dev/null
+++ b/FE/public/robots.txt
@@ -0,0 +1,2 @@
+user-agent: *
+allow: /
\ No newline at end of file
diff --git a/FE/src/App.tsx b/FE/src/App.tsx
index 9939f1f4..d9ca391b 100644
--- a/FE/src/App.tsx
+++ b/FE/src/App.tsx
@@ -14,6 +14,7 @@ import MyPage from 'page/MyPage';
 import Rank from 'page/Rank.tsx';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import { Helmet } from 'react-helmet';
 
 function App() {
   return (
@@ -35,6 +36,14 @@ export default App;
 function Layout() {
   return (
     <>
+      <Helmet>
+        <meta charSet='utf-8' />
+        <meta
+          name='description'
+          content='실시간 주식 데이터를 활용한 모의투자 경험을 통해 주식 투자에 대해 배울 수 있는 서비스.'
+        />
+        <title>JuGa</title>
+      </Helmet>
       <Header />
       <main className='mt-[60px] flex flex-col gap-4'>
         <Outlet />
diff --git a/FE/src/components/Header.tsx b/FE/src/components/Header.tsx
index a4d65d5f..ae5cec10 100644
--- a/FE/src/components/Header.tsx
+++ b/FE/src/components/Header.tsx
@@ -49,7 +49,7 @@ export default function Header() {
               type='image/webp'
               className={'h-[32px]'}
             />
-            <img src={logoPng} className={'h-[32px]'} />
+            <img src={logoPng} alt={'Logo'} className={'h-[32px]'} />
           </picture>
           <h1 className='text-xl font-bold text-juga-grayscale-black'>JuGa</h1>
         </Link>
diff --git a/FE/src/page/Home.tsx b/FE/src/page/Home.tsx
index d62a960a..abd6c99a 100644
--- a/FE/src/page/Home.tsx
+++ b/FE/src/page/Home.tsx
@@ -1,10 +1,15 @@
 import TopFive from 'components/TopFive';
 import StockIndex from 'components/StockIndex/index.tsx';
 import News from 'components/News/News.tsx';
+import { Helmet } from 'react-helmet';
 
 export default function Home() {
   return (
     <>
+      <Helmet>
+        <meta name='description' content='Stock Simulation Service' />
+        <title>JuGa</title>
+      </Helmet>
       <StockIndex />
       <TopFive />
       <News />
diff --git a/FE/src/page/MyPage.tsx b/FE/src/page/MyPage.tsx
index a5e35263..3a230519 100644
--- a/FE/src/page/MyPage.tsx
+++ b/FE/src/page/MyPage.tsx
@@ -4,6 +4,7 @@ import MyInfo from 'components/Mypage/MyInfo';
 import Nav from 'components/Mypage/Nav';
 import Order from 'components/Mypage/Order';
 import { useSearchParams } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
 
 export default function MyPage() {
   const [searchParams] = useSearchParams();
@@ -11,6 +12,10 @@ export default function MyPage() {
 
   return (
     <div className='flex gap-5'>
+      <Helmet>
+        <meta name='description' content='마이페이지입니다.' />
+        <title>JuGa | MyPage</title>
+      </Helmet>
       <Nav />
       <div className='flex-1'>
         {
diff --git a/FE/src/page/Rank.tsx b/FE/src/page/Rank.tsx
index a6476f97..acd8cc98 100644
--- a/FE/src/page/Rank.tsx
+++ b/FE/src/page/Rank.tsx
@@ -2,6 +2,7 @@ import Nav from 'components/Rank/Nav.tsx';
 import List from '../components/Rank/List.tsx';
 import { getRanking } from '../service/ranking.ts';
 import { useQuery } from '@tanstack/react-query';
+import { Helmet } from 'react-helmet';
 
 export default function Rank() {
   const { data, isLoading, isError } = useQuery({
@@ -13,7 +14,11 @@ export default function Rank() {
   if (isError) return <div>Error!!</div>;
 
   return (
-    <div className='px-4 rounded-xl'>
+    <div className='rounded-xl px-4'>
+      <Helmet>
+        <meta name='description' content='랭킹입니다.' />
+        <title>JuGa | Ranking</title>
+      </Helmet>
       <div className='mb-2'>
         <Nav />
       </div>
diff --git a/FE/src/page/StocksDetail.tsx b/FE/src/page/StocksDetail.tsx
index 42e336eb..022b8285 100644
--- a/FE/src/page/StocksDetail.tsx
+++ b/FE/src/page/StocksDetail.tsx
@@ -5,6 +5,7 @@ import PriceSection from 'components/StocksDetail/PriceSection';
 import TradeSection from 'components/StocksDetail/TradeSection';
 import { useParams } from 'react-router-dom';
 import { getStocksByCode } from 'service/stocks';
+import { Helmet } from 'react-helmet';
 
 export default function StocksDetail() {
   const params = useParams();
@@ -22,6 +23,10 @@ export default function StocksDetail() {
 
   return (
     <div className='flex flex-col'>
+      <Helmet>
+        <meta name='description' content='주식 상세페이지입니다.' />
+        <title>{`${(+data.stck_prpr).toLocaleString()}원 ${+data.prdy_ctrt}% | ${data.hts_kor_isnm}`}</title>
+      </Helmet>
       <Header code={code} data={data} />
       <div className='flex h-[500px]'>
         <div className='flex min-w-[850px] flex-col'>

From 831a1eb1421fde4d5836cf9515cc8f39b0abfdd2 Mon Sep 17 00:00:00 2001
From: Seo San <dannysir@naver.com>
Date: Tue, 3 Dec 2024 13:39:31 +0900
Subject: [PATCH 02/11] =?UTF-8?q?=E2=9C=A8=20feat:=20=EB=AF=B8=EB=A6=AC?=
 =?UTF-8?q?=EB=B3=B4=EA=B8=B0=EB=A5=BC=20=EC=9C=84=ED=95=9C=20open=20graph?=
 =?UTF-8?q?=20=EB=A9=94=ED=83=80=ED=85=8C=EA=B7=B8=20=EC=B6=94=EA=B0=80.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FE/src/App.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/FE/src/App.tsx b/FE/src/App.tsx
index d9ca391b..6ce36fb0 100644
--- a/FE/src/App.tsx
+++ b/FE/src/App.tsx
@@ -42,6 +42,17 @@ function Layout() {
           name='description'
           content='실시간 주식 데이터를 활용한 모의투자 경험을 통해 주식 투자에 대해 배울 수 있는 서비스.'
         />
+        <meta property='og:title' content='JuGa' />
+        <meta property='og:url' content='https://juga.kro.kr/' />
+        <meta
+          property='og:image'
+          content='https://juga.kro.kr/assets/logo-BUoSezEL.webp'
+        />
+        <meta property='og:image:alt' content='JuGa Logo' />
+        <meta
+          property='og:description'
+          content='실시간 주식 데이터를 활용한 모의투자 경험을 통해 주식 투자에 대해 배울 수 있는 서비스.'
+        />
         <title>JuGa</title>
       </Helmet>
       <Header />

From d456d7cd0fa7ae60d8e2819405c3310b99add6a0 Mon Sep 17 00:00:00 2001
From: Seo San <dannysir@naver.com>
Date: Tue, 3 Dec 2024 14:15:12 +0900
Subject: [PATCH 03/11] =?UTF-8?q?=F0=9F=94=A7=20fix:=20react-helmet-async?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD.=20=ED=81=AC=EB=A1=AC=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=EB=A1=9C=20=EC=9D=B8=ED=95=B4=20react-helmet?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FE/package-lock.json         | 63 +++++++++++++++---------------------
 FE/package.json              |  2 +-
 FE/src/App.tsx               |  2 +-
 FE/src/main.tsx              |  5 ++-
 FE/src/page/Home.tsx         |  2 +-
 FE/src/page/MyPage.tsx       |  2 +-
 FE/src/page/Rank.tsx         |  2 +-
 FE/src/page/StocksDetail.tsx |  2 +-
 8 files changed, 36 insertions(+), 44 deletions(-)

diff --git a/FE/package-lock.json b/FE/package-lock.json
index 09bb14fb..762e3fb5 100644
--- a/FE/package-lock.json
+++ b/FE/package-lock.json
@@ -14,7 +14,7 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-error-boundary": "^4.1.2",
-        "react-helmet": "^6.1.0",
+        "react-helmet-async": "^2.0.5",
         "react-router-dom": "^6.27.0",
         "react-toastify": "^10.0.6",
         "socket.io-client": "^4.8.1",
@@ -2626,6 +2626,15 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -2989,6 +2998,7 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3406,17 +3416,6 @@
         }
       }
     },
-    "node_modules/prop-types": {
-      "version": "15.8.1",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
-      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "license": "MIT",
-      "dependencies": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.13.1"
-      }
-    },
     "node_modules/punycode": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
@@ -3486,27 +3485,20 @@
       "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==",
       "license": "MIT"
     },
-    "node_modules/react-helmet": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
-      "integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
-      "license": "MIT",
+    "node_modules/react-helmet-async": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/react-helmet-async/-/react-helmet-async-2.0.5.tgz",
+      "integrity": "sha512-rYUYHeus+i27MvFE+Jaa4WsyBKGkL6qVgbJvSBoX8mbsWoABJXdEO0bZyi0F6i+4f0NuIb8AvqPMj3iXFHkMwg==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.7.2",
-        "react-fast-compare": "^3.1.1",
-        "react-side-effect": "^2.1.0"
+        "invariant": "^2.2.4",
+        "react-fast-compare": "^3.2.2",
+        "shallowequal": "^1.1.0"
       },
       "peerDependencies": {
-        "react": ">=16.3.0"
+        "react": "^16.6.0 || ^17.0.0 || ^18.0.0"
       }
     },
-    "node_modules/react-is": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "license": "MIT"
-    },
     "node_modules/react-refresh": {
       "version": "0.14.2",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
@@ -3546,15 +3538,6 @@
         "react-dom": ">=16.8"
       }
     },
-    "node_modules/react-side-effect": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.2.tgz",
-      "integrity": "sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "^16.3.0 || ^17.0.0 || ^18.0.0"
-      }
-    },
     "node_modules/react-toastify": {
       "version": "10.0.6",
       "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.6.tgz",
@@ -3706,6 +3689,12 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==",
+      "license": "MIT"
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
diff --git a/FE/package.json b/FE/package.json
index e0a75f6a..683aacf6 100644
--- a/FE/package.json
+++ b/FE/package.json
@@ -16,7 +16,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.1.2",
-    "react-helmet": "^6.1.0",
+    "react-helmet-async": "^2.0.5",
     "react-router-dom": "^6.27.0",
     "react-toastify": "^10.0.6",
     "socket.io-client": "^4.8.1",
diff --git a/FE/src/App.tsx b/FE/src/App.tsx
index 6ce36fb0..7edc497c 100644
--- a/FE/src/App.tsx
+++ b/FE/src/App.tsx
@@ -14,7 +14,7 @@ import MyPage from 'page/MyPage';
 import Rank from 'page/Rank.tsx';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 
 function App() {
   return (
diff --git a/FE/src/main.tsx b/FE/src/main.tsx
index 99fbaf0e..8e7cbb66 100644
--- a/FE/src/main.tsx
+++ b/FE/src/main.tsx
@@ -9,6 +9,7 @@ import {
 } from '@tanstack/react-query';
 import { ErrorBoundary } from 'react-error-boundary';
 import FallbackUI from 'components/FallbackUI.tsx';
+import { HelmetProvider } from 'react-helmet-async';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -24,7 +25,9 @@ createRoot(document.getElementById('root')!).render(
       <QueryErrorResetBoundary>
         {({ reset }) => (
           <ErrorBoundary onReset={reset} FallbackComponent={FallbackUI}>
-            <App />
+            <HelmetProvider>
+              <App />
+            </HelmetProvider>
           </ErrorBoundary>
         )}
       </QueryErrorResetBoundary>
diff --git a/FE/src/page/Home.tsx b/FE/src/page/Home.tsx
index abd6c99a..290ade75 100644
--- a/FE/src/page/Home.tsx
+++ b/FE/src/page/Home.tsx
@@ -1,7 +1,7 @@
 import TopFive from 'components/TopFive';
 import StockIndex from 'components/StockIndex/index.tsx';
 import News from 'components/News/News.tsx';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 
 export default function Home() {
   return (
diff --git a/FE/src/page/MyPage.tsx b/FE/src/page/MyPage.tsx
index 3a230519..3690d6e0 100644
--- a/FE/src/page/MyPage.tsx
+++ b/FE/src/page/MyPage.tsx
@@ -4,7 +4,7 @@ import MyInfo from 'components/Mypage/MyInfo';
 import Nav from 'components/Mypage/Nav';
 import Order from 'components/Mypage/Order';
 import { useSearchParams } from 'react-router-dom';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 
 export default function MyPage() {
   const [searchParams] = useSearchParams();
diff --git a/FE/src/page/Rank.tsx b/FE/src/page/Rank.tsx
index acd8cc98..c4532c75 100644
--- a/FE/src/page/Rank.tsx
+++ b/FE/src/page/Rank.tsx
@@ -2,7 +2,7 @@ import Nav from 'components/Rank/Nav.tsx';
 import List from '../components/Rank/List.tsx';
 import { getRanking } from '../service/ranking.ts';
 import { useQuery } from '@tanstack/react-query';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 
 export default function Rank() {
   const { data, isLoading, isError } = useQuery({
diff --git a/FE/src/page/StocksDetail.tsx b/FE/src/page/StocksDetail.tsx
index 022b8285..146efc1e 100644
--- a/FE/src/page/StocksDetail.tsx
+++ b/FE/src/page/StocksDetail.tsx
@@ -5,7 +5,7 @@ import PriceSection from 'components/StocksDetail/PriceSection';
 import TradeSection from 'components/StocksDetail/TradeSection';
 import { useParams } from 'react-router-dom';
 import { getStocksByCode } from 'service/stocks';
-import { Helmet } from 'react-helmet';
+import { Helmet } from 'react-helmet-async';
 
 export default function StocksDetail() {
   const params = useParams();

From 0948d04b5d3a10981299617d10b280c91eb5950a Mon Sep 17 00:00:00 2001
From: Seo San <dannysir@naver.com>
Date: Tue, 3 Dec 2024 14:15:59 +0900
Subject: [PATCH 04/11] =?UTF-8?q?=F0=9F=9A=9A=20rename:=20=ED=8C=8C?=
 =?UTF-8?q?=EC=9D=BC=EB=AA=85=20=EC=98=A4=ED=83=80=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?&=20=EC=A3=BC=EC=84=9D=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ...ncleAlertModal.tsx => CancelAlertModal.tsx} |  2 +-
 FE/src/components/Mypage/Order.tsx             | 18 +++++++++---------
 .../StocksDetail/PriceSection/TableColumn.tsx  |  4 +---
 3 files changed, 11 insertions(+), 13 deletions(-)
 rename FE/src/components/Mypage/{CancleAlertModal.tsx => CancelAlertModal.tsx} (96%)

diff --git a/FE/src/components/Mypage/CancleAlertModal.tsx b/FE/src/components/Mypage/CancelAlertModal.tsx
similarity index 96%
rename from FE/src/components/Mypage/CancleAlertModal.tsx
rename to FE/src/components/Mypage/CancelAlertModal.tsx
index 10ba69bc..66a378bd 100644
--- a/FE/src/components/Mypage/CancleAlertModal.tsx
+++ b/FE/src/components/Mypage/CancelAlertModal.tsx
@@ -1,7 +1,7 @@
 import Overay from 'components/ModalOveray';
 import useOrderCancelAlertModalStore from 'store/useOrderCancleAlertModalStore';
 
-export default function CancleAlertModal() {
+export default function CancelAlertModal() {
   const { close, onSuccess, order } = useOrderCancelAlertModalStore();
   if (!order) return;
 
diff --git a/FE/src/components/Mypage/Order.tsx b/FE/src/components/Mypage/Order.tsx
index 95e8b3c7..cc4fcefe 100644
--- a/FE/src/components/Mypage/Order.tsx
+++ b/FE/src/components/Mypage/Order.tsx
@@ -1,6 +1,6 @@
 import useOrders from 'hooks/useOrder';
 import useOrderCancelAlertModalStore from 'store/useOrderCancleAlertModalStore';
-import CancleAlertModal from './CancleAlertModal';
+import CancelAlertModal from './CancelAlertModal.tsx';
 import { formatTimestamp } from 'utils/format';
 
 export default function Order() {
@@ -15,8 +15,8 @@ export default function Order() {
 
   return (
     <div className='mx-auto flex min-h-[500px] w-full flex-col rounded-md bg-white p-4 shadow-md'>
-      <div className='flex pb-2 text-sm font-bold border-b'>
-        <p className='w-1/3 text-left truncate'>종목</p>
+      <div className='flex border-b pb-2 text-sm font-bold'>
+        <p className='w-1/3 truncate text-left'>종목</p>
         <p className='w-1/4 text-center'>요청 유형</p>
         <p className='w-1/4 text-center'>수량</p>
         <p className='w-1/4 text-center'>요청 가격</p>
@@ -24,7 +24,7 @@ export default function Order() {
         <p className='w-1/6 text-right'></p>
       </div>
 
-      <ul className='flex flex-col text-sm divide-y'>
+      <ul className='flex flex-col divide-y text-sm'>
         {data.map((order) => {
           const {
             id,
@@ -38,7 +38,7 @@ export default function Order() {
 
           return (
             <li className='flex py-2' key={id}>
-              <div className='flex w-1/3 gap-2 text-left truncate'>
+              <div className='flex w-1/3 gap-2 truncate text-left'>
                 <p className='font-semibold'>{stock_name}</p>
                 <p className='text-gray-500'>{stock_code}</p>
               </div>
@@ -51,15 +51,15 @@ export default function Order() {
               >
                 {trade_type === 'BUY' ? '매수' : '매도'}
               </p>
-              <p className='w-1/4 text-center truncate'>{amount}</p>
+              <p className='w-1/4 truncate text-center'>{amount}</p>
               <p className='w-1/4 text-center'>{price.toLocaleString()}원</p>
-              <p className='w-1/4 text-right truncate'>
+              <p className='w-1/4 truncate text-right'>
                 {formatTimestamp(created_at)}
               </p>
               <p className='w-1/6 text-right'>
                 <button
                   onClick={() => open(order, () => removeOrder.mutate(id))}
-                  className='px-2 py-1 text-xs text-white transition rounded-lg bg-juga-grayscale-500 hover:bg-juga-grayscale-black'
+                  className='rounded-lg bg-juga-grayscale-500 px-2 py-1 text-xs text-white transition hover:bg-juga-grayscale-black'
                 >
                   취소
                 </button>
@@ -68,7 +68,7 @@ export default function Order() {
           );
         })}
       </ul>
-      {isOpen && <CancleAlertModal />}
+      {isOpen && <CancelAlertModal />}
     </div>
   );
 }
diff --git a/FE/src/components/StocksDetail/PriceSection/TableColumn.tsx b/FE/src/components/StocksDetail/PriceSection/TableColumn.tsx
index 92642593..3fedb558 100644
--- a/FE/src/components/StocksDetail/PriceSection/TableColumn.tsx
+++ b/FE/src/components/StocksDetail/PriceSection/TableColumn.tsx
@@ -5,7 +5,7 @@ type Props = {
 };
 
 export default function TableColumn({ viewMode }: Props) {
-  if (!viewMode) {
+  if (viewMode !== 'today') {
     return (
       <thead className={'z-1 sticky top-0 bg-white'}>
         <tr className={'h-10 border-b text-gray-500'}>
@@ -13,7 +13,6 @@ export default function TableColumn({ viewMode }: Props) {
           <th className={'px-4 py-1 text-right font-medium'}>종가</th>
           <th className={'px-4 py-1 text-right font-medium'}>등락률</th>
           <th className={'px-4 py-1 text-right font-medium'}>거래량(주)</th>
-          {/*<th className={'px-4 py-1 text-right font-medium'}>거래대금</th>*/}
           <th className={'px-4 py-1 text-right font-medium'}>시가</th>
           <th className={'px-4 py-1 text-right font-medium'}>고가</th>
           <th className={'px-4 py-1 text-right font-medium'}>저가</th>
@@ -27,7 +26,6 @@ export default function TableColumn({ viewMode }: Props) {
         <th className={'px-4 py-1 text-left font-medium'}>체결가</th>
         <th className={'px-4 py-1 text-right font-medium'}>체결량(주)</th>
         <th className={'px-4 py-1 text-right font-medium'}>등락률</th>
-        {/*<th className={'px-4 py-1 text-right font-medium'}>거래량(주)</th>*/}
         <th className={'px-4 py-1 text-right font-medium'}>시간</th>
       </tr>
     </thead>

From cf19387b66eaaaaf5a053b7648a42e10a58abeda Mon Sep 17 00:00:00 2001
From: Seo San <dannysir@naver.com>
Date: Tue, 3 Dec 2024 14:21:50 +0900
Subject: [PATCH 05/11] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20refactor:=20useCallb?=
 =?UTF-8?q?ack=EC=9D=84=20=EC=9D=B4=EC=9A=A9=ED=95=B4=20=EB=B6=88=ED=95=84?=
 =?UTF-8?q?=EC=9A=94=ED=95=9C=20=ED=95=A8=EC=88=98=20=EC=83=9D=EC=84=B1=20?=
 =?UTF-8?q?=EC=A0=9C=EC=96=B4=20#254?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/StocksDetail/TradeSection/BuySection.tsx  | 9 +++++----
 .../components/StocksDetail/TradeSection/SellSection.tsx | 9 +++++----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/FE/src/components/StocksDetail/TradeSection/BuySection.tsx b/FE/src/components/StocksDetail/TradeSection/BuySection.tsx
index 88cbc29c..ba17325d 100644
--- a/FE/src/components/StocksDetail/TradeSection/BuySection.tsx
+++ b/FE/src/components/StocksDetail/TradeSection/BuySection.tsx
@@ -2,6 +2,7 @@ import {
   ChangeEvent,
   FocusEvent,
   FormEvent,
+  useCallback,
   useEffect,
   useRef,
   useState,
@@ -44,17 +45,17 @@ export default function BuySection({ code, detailInfo }: BuySectionProps) {
   const [lackAssetFlag, setLackAssetFlag] = useState<boolean>(false);
   const timerRef = useRef<number | null>(null);
 
-  const handlePriceChange = (e: ChangeEvent<HTMLInputElement>) => {
+  const handlePriceChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
     const s = e.target.value.replace(/,/g, '');
     if (!isNumericString(s)) return;
     setCurrPrice(s);
-  };
+  }, []);
 
-  const handleCountChange = (e: ChangeEvent<HTMLInputElement>) => {
+  const handleCountChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
     const s = e.target.value;
     if (!isNumericString(s)) return;
     setCount(+s);
-  };
+  }, []);
 
   if (isLoading) return <div>loading</div>;
   if (!data) return <div>No data</div>;
diff --git a/FE/src/components/StocksDetail/TradeSection/SellSection.tsx b/FE/src/components/StocksDetail/TradeSection/SellSection.tsx
index 085b49ce..0cf493a8 100644
--- a/FE/src/components/StocksDetail/TradeSection/SellSection.tsx
+++ b/FE/src/components/StocksDetail/TradeSection/SellSection.tsx
@@ -6,6 +6,7 @@ import {
   ChangeEvent,
   FocusEvent,
   FormEvent,
+  useCallback,
   useEffect,
   useRef,
   useState,
@@ -56,17 +57,17 @@ export default function SellSection({ code, detailInfo }: SellSectionProps) {
   const totalPrice = +currPrice * count;
   const plRate = calcYield(avg_price, +currPrice);
 
-  const handlePriceChange = (e: ChangeEvent<HTMLInputElement>) => {
+  const handlePriceChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
     const s = e.target.value.replace(/,/g, '');
     if (!isNumericString(s)) return;
     setCurrPrice(s);
-  };
+  }, []);
 
-  const handleCountChange = (e: ChangeEvent<HTMLInputElement>) => {
+  const handleCountChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
     const s = e.target.value;
     if (!isNumericString(s)) return;
     setCount(+s);
-  };
+  }, []);
 
   const handlePriceInputBlur = (e: FocusEvent<HTMLInputElement>) => {
     const n = +e.target.value.replace(/,/g, '');

From 922934656f8a694420fa5723eac2fe4321bd1efb Mon Sep 17 00:00:00 2001
From: dongree <dongwoo0307@naver.com>
Date: Tue, 3 Dec 2024 15:47:12 +0900
Subject: [PATCH 06/11] =?UTF-8?q?=E2=9C=A8=20feat:=20GlobalErrorFallback?=
 =?UTF-8?q?=20UI=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FE/src/components/GlobalErrorFallback.tsx | 31 +++++++++++++++++++++++
 FE/src/main.tsx                           | 21 ++++++++-------
 2 files changed, 43 insertions(+), 9 deletions(-)
 create mode 100644 FE/src/components/GlobalErrorFallback.tsx

diff --git a/FE/src/components/GlobalErrorFallback.tsx b/FE/src/components/GlobalErrorFallback.tsx
new file mode 100644
index 00000000..b1c99052
--- /dev/null
+++ b/FE/src/components/GlobalErrorFallback.tsx
@@ -0,0 +1,31 @@
+import { FallbackProps } from 'react-error-boundary';
+import logoPng from 'assets/logo.png';
+import logoWebp from 'assets/logo.webp';
+
+export default function GlobalErrorFallback({ error }: FallbackProps) {
+  return (
+    <div className='flex flex-col items-center justify-center mt-40 text-gray-800'>
+      <div className='flex items-center mb-6'>
+        <picture>
+          <source srcSet={logoWebp} type='image/webp' />
+          <img src={logoPng} alt='Logo' className='h-48' />
+        </picture>
+      </div>
+      <h1 className='mb-4 text-2xl font-bold'>오류가 발생했습니다!</h1>
+      <p className='mb-6 text-lg text-center'>
+        문제가 지속적으로 발생하면 관리자에게 문의해주세요.
+      </p>
+      <pre className='w-full max-w-lg p-4 mb-6 text-sm text-left bg-gray-200 rounded-md shadow-md'>
+        {error.message}
+      </pre>
+      <div className='flex space-x-4'>
+        <a
+          href='/'
+          className='px-6 py-2 font-medium text-white transition bg-blue-500 rounded-md shadow hover:bg-blue-600'
+        >
+          Home으로 돌아가기
+        </a>
+      </div>
+    </div>
+  );
+}
diff --git a/FE/src/main.tsx b/FE/src/main.tsx
index 8e7cbb66..08dac630 100644
--- a/FE/src/main.tsx
+++ b/FE/src/main.tsx
@@ -8,8 +8,8 @@ import {
   QueryErrorResetBoundary,
 } from '@tanstack/react-query';
 import { ErrorBoundary } from 'react-error-boundary';
-import FallbackUI from 'components/FallbackUI.tsx';
 import { HelmetProvider } from 'react-helmet-async';
+import GlobalErrorFallback from 'components/GlobalErrorFallback.tsx';
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -22,15 +22,18 @@ const queryClient = new QueryClient({
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <QueryClientProvider client={queryClient}>
-      <QueryErrorResetBoundary>
-        {({ reset }) => (
-          <ErrorBoundary onReset={reset} FallbackComponent={FallbackUI}>
-            <HelmetProvider>
+      <HelmetProvider>
+        <QueryErrorResetBoundary>
+          {({ reset }) => (
+            <ErrorBoundary
+              onReset={reset}
+              FallbackComponent={GlobalErrorFallback}
+            >
               <App />
-            </HelmetProvider>
-          </ErrorBoundary>
-        )}
-      </QueryErrorResetBoundary>
+            </ErrorBoundary>
+          )}
+        </QueryErrorResetBoundary>
+      </HelmetProvider>
     </QueryClientProvider>
   </StrictMode>,
 );

From 1b9b2c44f030fac6f364908e3209b44b97c4cf01 Mon Sep 17 00:00:00 2001
From: dongree <dongwoo0307@naver.com>
Date: Tue, 3 Dec 2024 15:48:22 +0900
Subject: [PATCH 07/11] =?UTF-8?q?=F0=9F=94=A7=20fix:=20=EB=A1=9C=EA=B7=B8?=
 =?UTF-8?q?=EC=9D=B8=20=EC=95=88=20=EB=90=98=EC=97=88=EC=9D=84=20=EB=95=8C?=
 =?UTF-8?q?=20mypage=20=EC=A0=91=EA=B7=BC=20=EB=B0=A9=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FE/src/components/Header.tsx         |  8 +++++---
 FE/src/components/Mypage/Account.tsx | 11 +++++++++--
 2 files changed, 14 insertions(+), 5 deletions(-)

diff --git a/FE/src/components/Header.tsx b/FE/src/components/Header.tsx
index ae5cec10..b9589508 100644
--- a/FE/src/components/Header.tsx
+++ b/FE/src/components/Header.tsx
@@ -7,6 +7,7 @@ import logoPng from 'assets/logo.png';
 import logoWebp from 'assets/logo.webp';
 import { checkAuth, logout } from 'service/auth.ts';
 import { useEffect } from 'react';
+import Toast from './Toast';
 
 export default function Header() {
   const { toggleModal } = useLoginModalStore();
@@ -29,6 +30,7 @@ export default function Header() {
   const handleLogout = () => {
     logout().then(() => {
       setIsLogin(false);
+      Toast({ message: '로그아웃 되었습니다!', type: 'success' });
     });
   };
 
@@ -58,20 +60,20 @@ export default function Header() {
           <nav className='flex items-center gap-6 text-sm font-bold text-juga-grayscale-500'>
             <div
               onClick={() => handleLink('/')}
-              className='cursor-pointer px-1 py-2'
+              className='px-1 py-2 cursor-pointer'
             >
               홈
             </div>
             <div
               onClick={() => handleLink('/rank')}
-              className='cursor-pointer px-1 py-2'
+              className='px-1 py-2 cursor-pointer'
             >
               랭킹
             </div>
             {isLogin && (
               <div
                 onClick={() => handleLink('/mypage')}
-                className='cursor-pointer px-1 py-2'
+                className='px-1 py-2 cursor-pointer'
               >
                 마이페이지
               </div>
diff --git a/FE/src/components/Mypage/Account.tsx b/FE/src/components/Mypage/Account.tsx
index 456abb9a..045a3192 100644
--- a/FE/src/components/Mypage/Account.tsx
+++ b/FE/src/components/Mypage/Account.tsx
@@ -3,9 +3,11 @@ import AccountCondition from './AccountCondition';
 import MyStocksList from './MyStocksList';
 import { getAssets } from 'service/assets';
 import { isWithinTimeRange } from 'utils/common';
+import useAuthStore from 'store/useAuthStore';
+import { useNavigate } from 'react-router-dom';
 
 export default function Account() {
-  const { data, isLoading, isError } = useQuery(
+  const { data, isLoading } = useQuery(
     ['account', 'assets'],
     () => getAssets(),
     {
@@ -14,9 +16,14 @@ export default function Account() {
     },
   );
 
+  const navigate = useNavigate();
+  const { isLogin } = useAuthStore();
+  if (!isLogin) {
+    navigate('/');
+  }
+
   if (isLoading) return <div>loading</div>;
   if (!data) return <div>No data</div>;
-  if (isError) return <div>error</div>;
 
   const { asset, stocks } = data;
 

From 34cb90a3132661344705fa30bdacf2a2fc242dd6 Mon Sep 17 00:00:00 2001
From: dongree <dongwoo0307@naver.com>
Date: Tue, 3 Dec 2024 16:07:15 +0900
Subject: [PATCH 08/11] =?UTF-8?q?=F0=9F=92=84=20design:=20=EB=A7=A4?=
 =?UTF-8?q?=EC=88=98,=20=EB=A7=A4=EB=8F=84=ED=95=A0=20=EB=95=8C=20toast=20?=
 =?UTF-8?q?UI=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../StocksDetail/TradeSection/SellSection.tsx | 36 +++++++++----------
 FE/src/hooks/useOrder.ts                      | 20 +++++++++--
 2 files changed, 35 insertions(+), 21 deletions(-)

diff --git a/FE/src/components/StocksDetail/TradeSection/SellSection.tsx b/FE/src/components/StocksDetail/TradeSection/SellSection.tsx
index 0cf493a8..aa1f674f 100644
--- a/FE/src/components/StocksDetail/TradeSection/SellSection.tsx
+++ b/FE/src/components/StocksDetail/TradeSection/SellSection.tsx
@@ -46,17 +46,6 @@ export default function SellSection({ code, detailInfo }: SellSectionProps) {
     setCurrPrice(stck_prpr);
   }, [stck_prpr]);
 
-  if (isLoading) return <div>loading</div>;
-  if (!data) return <div>No data</div>;
-  if (isError) return <div>error</div>;
-
-  const quantity = data.quantity;
-  const avg_price = data.avg_price;
-
-  const pl = (+currPrice - avg_price) * count;
-  const totalPrice = +currPrice * count;
-  const plRate = calcYield(avg_price, +currPrice);
-
   const handlePriceChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
     const s = e.target.value.replace(/,/g, '');
     if (!isNumericString(s)) return;
@@ -69,6 +58,17 @@ export default function SellSection({ code, detailInfo }: SellSectionProps) {
     setCount(+s);
   }, []);
 
+  if (isLoading) return <div>loading</div>;
+  if (!data) return <div>No data</div>;
+  if (isError) return <div>error</div>;
+
+  const quantity = data.quantity;
+  const avg_price = data.avg_price;
+
+  const pl = (+currPrice - avg_price) * count;
+  const totalPrice = +currPrice * count;
+  const plRate = calcYield(avg_price, +currPrice);
+
   const handlePriceInputBlur = (e: FocusEvent<HTMLInputElement>) => {
     const n = +e.target.value.replace(/,/g, '');
     if (n > +stck_mxpr) {
@@ -121,10 +121,10 @@ export default function SellSection({ code, detailInfo }: SellSectionProps) {
 
   if (!isLogin || quantity === 0) {
     return (
-      <div className='flex h-full flex-col items-center justify-center'>
+      <div className='flex flex-col items-center justify-center h-full'>
         <Lottie
           animationData={emptyAnimation}
-          className='h-40 w-40'
+          className='w-40 h-40'
           loop={false}
         />
         <p>매도할 주식이 없어요</p>
@@ -136,14 +136,14 @@ export default function SellSection({ code, detailInfo }: SellSectionProps) {
     <>
       <form className='flex flex-col' onSubmit={handleSell}>
         <div className='my-4'>
-          <div className='flex h-12 items-center justify-between'>
+          <div className='flex items-center justify-between h-12'>
             <p className='mr-3 w-14'>매도 가격</p>
             <input
               type='text'
               value={(+currPrice).toLocaleString()}
               onChange={handlePriceChange}
               onBlur={handlePriceInputBlur}
-              className='flex-1 rounded-lg py-1'
+              className='flex-1 py-1 rounded-lg'
             />
           </div>
           {lowerLimitFlag && (
@@ -156,14 +156,14 @@ export default function SellSection({ code, detailInfo }: SellSectionProps) {
               이 주식의 최대 가격은 {(+stck_mxpr).toLocaleString()}입니다.
             </div>
           )}
-          <div className='flex h-12 items-center justify-between'>
+          <div className='flex items-center justify-between h-12'>
             <p className='mr-3 w-14'> 수량</p>
             <input
               type='text'
               value={count}
               onChange={handleCountChange}
               onBlur={handleCntInputBlur}
-              className='flex-1 rounded-lg py-1'
+              className='flex-1 py-1 rounded-lg'
               min={1}
               max={quantity}
             />
@@ -199,7 +199,7 @@ export default function SellSection({ code, detailInfo }: SellSectionProps) {
             <p>{totalPrice.toLocaleString()}원</p>
           </div>
         </div>
-        <div className='flex h-10 flex-col justify-center'></div>
+        <div className='flex flex-col justify-center h-10'></div>
         <button
           className={
             'rounded-lg bg-juga-blue-50 py-2 text-white disabled:bg-juga-grayscale-100'
diff --git a/FE/src/hooks/useOrder.ts b/FE/src/hooks/useOrder.ts
index 6d4f73f8..ac1ea661 100644
--- a/FE/src/hooks/useOrder.ts
+++ b/FE/src/hooks/useOrder.ts
@@ -1,4 +1,5 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import Toast from 'components/Toast';
 import {
   deleteOrder,
   getOrders,
@@ -20,15 +21,28 @@ export default function useOrders() {
   const orderBuy = useMutation(
     ({ code, price, count }: { code: string; price: number; count: number }) =>
       orderBuyStock(code, price, count),
-    { onSuccess: () => queryClient.invalidateQueries(['detail', 'cash']) },
+    {
+      onSuccess: () => {
+        queryClient.invalidateQueries(['detail', 'cash']);
+        Toast({
+          message: '매수 요청되었습니다.',
+          type: 'success',
+        });
+      },
+    },
   );
 
   const orderSell = useMutation(
     ({ code, price, count }: { code: string; price: number; count: number }) =>
       orderSellStock(code, price, count),
     {
-      onSuccess: (_, { code }) =>
-        queryClient.invalidateQueries(['detail', 'sellPosiible', code]),
+      onSuccess: (_, { code }) => {
+        queryClient.invalidateQueries(['detail', 'sellPosiible', code]);
+        Toast({
+          message: '매도 요청되었습니다.',
+          type: 'success',
+        });
+      },
     },
   );
 

From 586d1fa0bbfde9f0eda2452f48e11b85e8908bb9 Mon Sep 17 00:00:00 2001
From: Seo San <dannysir@naver.com>
Date: Tue, 3 Dec 2024 17:57:58 +0900
Subject: [PATCH 09/11] =?UTF-8?q?=E2=9C=A8=20feat:=20Suspense=EB=A5=BC=20?=
 =?UTF-8?q?=EC=9D=B4=EC=9A=A9=ED=95=B4=20=EC=8A=A4=EC=BC=88=EB=A0=88?=
 =?UTF-8?q?=ED=86=A4=20UI=20=EC=A0=81=EC=9A=A9=20#254?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FE/src/App.tsx                                | 11 ++-
 FE/src/components/News/News.tsx               |  8 +-
 FE/src/components/News/NewsCardSkeleton.tsx   | 20 +++++
 FE/src/components/News/NewsSkeleton.tsx       | 18 ++++
 FE/src/components/Rank/RankingSkeleton.tsx    | 89 +++++++++++++++++++
 .../StockIndex/StockIndexSekleton.tsx         | 23 +++++
 FE/src/components/StockIndex/index.tsx        |  3 +-
 FE/src/components/StocksDetail/Chart.tsx      |  7 +-
 .../components/StocksDetail/ChartSkeleton.tsx | 48 ++++++++++
 FE/src/components/TopFive/List.tsx            | 40 ++++-----
 FE/src/components/TopFive/SkeletonCard.tsx    | 25 ++++--
 FE/src/components/TopFive/SkeletonList.tsx    | 72 +++++++++++++++
 FE/src/components/TopFive/index.tsx           | 16 +---
 FE/src/page/Home.tsx                          | 16 +++-
 FE/src/page/Rank.tsx                          |  5 +-
 FE/src/page/StocksDetail.tsx                  |  6 +-
 16 files changed, 346 insertions(+), 61 deletions(-)
 create mode 100644 FE/src/components/News/NewsCardSkeleton.tsx
 create mode 100644 FE/src/components/News/NewsSkeleton.tsx
 create mode 100644 FE/src/components/Rank/RankingSkeleton.tsx
 create mode 100644 FE/src/components/StockIndex/StockIndexSekleton.tsx
 create mode 100644 FE/src/components/StocksDetail/ChartSkeleton.tsx
 create mode 100644 FE/src/components/TopFive/SkeletonList.tsx

diff --git a/FE/src/App.tsx b/FE/src/App.tsx
index 7edc497c..30064b00 100644
--- a/FE/src/App.tsx
+++ b/FE/src/App.tsx
@@ -15,6 +15,8 @@ import Rank from 'page/Rank.tsx';
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { Helmet } from 'react-helmet-async';
+import { Suspense } from 'react';
+import { RankingSkeleton } from './components/Rank/RankingSkeleton.tsx';
 
 function App() {
   return (
@@ -24,7 +26,14 @@ function App() {
           <Route index element={<Home />} />
           <Route path='stocks/:id' element={<StocksDetail />} />
           <Route path='mypage' element={<MyPage />} />
-          <Route path='rank' element={<Rank />} />
+          <Route
+            path='rank'
+            element={
+              <Suspense fallback={<RankingSkeleton />}>
+                <Rank />
+              </Suspense>
+            }
+          />
         </Route>
       </Routes>
     </Router>
diff --git a/FE/src/components/News/News.tsx b/FE/src/components/News/News.tsx
index aaf48a77..2d9de3ee 100644
--- a/FE/src/components/News/News.tsx
+++ b/FE/src/components/News/News.tsx
@@ -4,20 +4,18 @@ import { getNewsData } from '../../service/news.ts';
 import { NewsDataType } from './type.ts';
 
 export default function News() {
-  const { data, isLoading, isError } = useQuery({
+  const { data } = useQuery({
     queryKey: ['News'],
     queryFn: () => getNewsData(),
     staleTime: 1000 * 60,
+    suspense: true,
   });
 
-  if (isError) return <div>Error!!</div>;
-  if (isLoading) return <div>Loading...</div>;
-
   const randomNewsIndex = Math.floor(Math.random() * 16);
 
   return (
     <div className='w-full'>
-      <div className='flex items-center justify-between mb-4'>
+      <div className='mb-4 flex items-center justify-between'>
         <h2 className='text-xl font-bold'>주요 뉴스</h2>
       </div>
 
diff --git a/FE/src/components/News/NewsCardSkeleton.tsx b/FE/src/components/News/NewsCardSkeleton.tsx
new file mode 100644
index 00000000..6ef20a43
--- /dev/null
+++ b/FE/src/components/News/NewsCardSkeleton.tsx
@@ -0,0 +1,20 @@
+export const NewsCardSkeleton = () => {
+  return (
+    <div className='flex flex-col rounded-lg border p-4'>
+      <div className='mb-2 flex w-full flex-row items-center justify-between'>
+        <div className='flex flex-row items-center gap-3'>
+          {/* 제목 스켈레톤 */}
+          <div className='h-5 w-[320px] animate-pulse rounded bg-gray-200' />
+        </div>
+        {/* 날짜 스켈레톤 */}
+        <div className='h-4 w-20 animate-pulse rounded bg-gray-200' />
+      </div>
+      <div className='flex w-full items-center justify-between gap-4'>
+        {/* 본문 스켈레톤 */}
+        <div className='h-4 w-96 animate-pulse rounded bg-gray-200' />
+        {/* 태그 스켈레톤 */}
+        <div className='h-5 w-16 animate-pulse rounded-full bg-gray-200' />
+      </div>
+    </div>
+  );
+};
diff --git a/FE/src/components/News/NewsSkeleton.tsx b/FE/src/components/News/NewsSkeleton.tsx
new file mode 100644
index 00000000..fae4c9db
--- /dev/null
+++ b/FE/src/components/News/NewsSkeleton.tsx
@@ -0,0 +1,18 @@
+import { NewsCardSkeleton } from './NewsCardSkeleton.tsx';
+
+export const NewsSkeleton = () => {
+  return (
+    <div className='w-full'>
+      <div className='mb-4 flex items-center justify-between'>
+        {/* 제목 스켈레톤 */}
+        <div className='h-7 w-32 animate-pulse rounded bg-gray-200' />
+      </div>
+
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-2'>
+        {Array.from({ length: 4 }).map((_, index) => (
+          <NewsCardSkeleton key={index} />
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/FE/src/components/Rank/RankingSkeleton.tsx b/FE/src/components/Rank/RankingSkeleton.tsx
new file mode 100644
index 00000000..8a76ef04
--- /dev/null
+++ b/FE/src/components/Rank/RankingSkeleton.tsx
@@ -0,0 +1,89 @@
+export const RankingSkeleton = () => {
+  return (
+    <div className='grid grid-cols-1 gap-4 lg:grid-cols-2'>
+      {/* Left List */}
+      <div className='flex flex-col gap-4'>
+        <div className='w-full rounded-lg bg-white p-2 shadow-lg'>
+          <div className='mb-1 border-b pb-1'>
+            <div className='h-5 w-24 animate-pulse rounded bg-gray-200' />
+          </div>
+
+          <div className='space-y-1'>
+            {Array(10)
+              .fill(0)
+              .map((_, index) => (
+                <div
+                  key={index}
+                  className='flex items-center justify-between rounded p-1.5'
+                >
+                  <div className='flex items-center gap-2'>
+                    <div className='h-5 w-5 animate-pulse rounded-full bg-gray-200' />
+                    <div className='h-3.5 w-20 animate-pulse rounded bg-gray-200' />
+                  </div>
+                  <div className='h-3.5 w-16 animate-pulse rounded bg-gray-200' />
+                </div>
+              ))}
+          </div>
+        </div>
+
+        <div className='w-full rounded-lg bg-white px-2 pb-1 pt-1.5 shadow-lg'>
+          <div className='border-b'>
+            <div className='h-5 w-32 animate-pulse rounded bg-gray-200' />
+          </div>
+
+          <div className='space-y-1'>
+            <div className='flex items-center justify-between rounded p-1.5'>
+              <div className='flex items-center gap-2'>
+                <div className='h-5 w-5 animate-pulse rounded-full bg-gray-200' />
+                <div className='h-3.5 w-20 animate-pulse rounded bg-gray-200' />
+              </div>
+              <div className='h-3.5 w-16 animate-pulse rounded bg-gray-200' />
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Right List */}
+      <div className='flex flex-col gap-4'>
+        <div className='w-full rounded-lg bg-white p-2 shadow-lg'>
+          <div className='mb-1 border-b pb-1'>
+            <div className='h-5 w-24 animate-pulse rounded bg-gray-200' />
+          </div>
+
+          <div className='space-y-1'>
+            {Array(10)
+              .fill(0)
+              .map((_, index) => (
+                <div
+                  key={index}
+                  className='flex items-center justify-between rounded p-1.5'
+                >
+                  <div className='flex items-center gap-2'>
+                    <div className='h-5 w-5 animate-pulse rounded-full bg-gray-200' />
+                    <div className='h-3.5 w-20 animate-pulse rounded bg-gray-200' />
+                  </div>
+                  <div className='h-3.5 w-16 animate-pulse rounded bg-gray-200' />
+                </div>
+              ))}
+          </div>
+        </div>
+
+        <div className='w-full rounded-lg bg-white px-2 pb-1 pt-1.5 shadow-lg'>
+          <div className='border-b'>
+            <div className='h-5 w-32 animate-pulse rounded bg-gray-200' />
+          </div>
+
+          <div className='space-y-1'>
+            <div className='flex items-center justify-between rounded p-1.5'>
+              <div className='flex items-center gap-2'>
+                <div className='h-5 w-5 animate-pulse rounded-full bg-gray-200' />
+                <div className='h-3.5 w-20 animate-pulse rounded bg-gray-200' />
+              </div>
+              <div className='h-3.5 w-16 animate-pulse rounded bg-gray-200' />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/FE/src/components/StockIndex/StockIndexSekleton.tsx b/FE/src/components/StockIndex/StockIndexSekleton.tsx
new file mode 100644
index 00000000..aeaaa70a
--- /dev/null
+++ b/FE/src/components/StockIndex/StockIndexSekleton.tsx
@@ -0,0 +1,23 @@
+export const StockIndexSkeleton = () => {
+  return (
+    <div className='my-2 flex w-full items-center justify-between gap-2'>
+      {[1, 2, 3, 4].map((index) => (
+        <div
+          key={index}
+          className='flex h-[100px] w-full items-center justify-between rounded-lg bg-juga-grayscale-50 p-3'
+        >
+          <div className='flex h-full w-[108px] flex-1 flex-col items-start justify-center gap-2'>
+            {/* 종목명 스켈레톤 */}
+            <div className='h-4 w-16 animate-pulse rounded bg-gray-200' />
+            {/* 가격 스켈레톤 */}
+            <div className='h-6 w-24 animate-pulse rounded bg-gray-200' />
+            {/* 등락률 스켈레톤 */}
+            <div className='h-4 w-20 animate-pulse rounded bg-gray-200' />
+          </div>
+          {/* 차트 영역 스켈레톤 */}
+          <div className='h-[52px] flex-1 animate-pulse rounded bg-gray-200' />
+        </div>
+      ))}
+    </div>
+  );
+};
diff --git a/FE/src/components/StockIndex/index.tsx b/FE/src/components/StockIndex/index.tsx
index 3523d417..3d8de293 100644
--- a/FE/src/components/StockIndex/index.tsx
+++ b/FE/src/components/StockIndex/index.tsx
@@ -8,6 +8,7 @@ export default function StockIndex() {
     queryFn: () => getStockIndex(),
     staleTime: 1000,
     cacheTime: 60000,
+    suspense: true,
   });
 
   if (isLoading) return <div>Loading...</div>;
@@ -16,7 +17,7 @@ export default function StockIndex() {
   const { KOSPI, KOSDAQ, KOSPI200, KSQ150 } = data;
 
   return (
-    <div className='flex items-center justify-between w-full gap-2 my-2'>
+    <div className='my-2 flex w-full items-center justify-between gap-2'>
       <Card name='코스피' id='KOSPI' initialData={KOSPI} />
       <Card name='코스닥' id='KOSDAQ' initialData={KOSDAQ} />
       <Card name='코스피200' id='KOSPI200' initialData={KOSPI200} />
diff --git a/FE/src/components/StocksDetail/Chart.tsx b/FE/src/components/StocksDetail/Chart.tsx
index 445bfa2d..8aa0f270 100644
--- a/FE/src/components/StocksDetail/Chart.tsx
+++ b/FE/src/components/StocksDetail/Chart.tsx
@@ -30,10 +30,10 @@ export default function Chart({ code }: StocksDetailChartProps) {
 
   const [mouseIndex, setMouseIndex] = useState<number | null>(null);
 
-  const { data, isLoading } = useQuery(
+  const { data } = useQuery(
     ['stocksChartData', code, timeCategory],
     () => getStocksChartDataByCode(code, timeCategory),
-    { staleTime: 1000 * 60 },
+    { staleTime: 1000 * 60, suspense: true, keepPreviousData: true },
   );
 
   const { mousePosition, getCanvasMousePosition } = useMouseMove(containerRef);
@@ -53,7 +53,7 @@ export default function Chart({ code }: StocksDetailChartProps) {
   );
 
   useEffect(() => {
-    if (isLoading || !data) return;
+    if (!data) return;
 
     if (
       !upperChartCanvasRef.current ||
@@ -83,7 +83,6 @@ export default function Chart({ code }: StocksDetailChartProps) {
   }, [
     timeCategory,
     data,
-    isLoading,
     setCanvasSize,
     renderChart,
     chartSizeConfig,
diff --git a/FE/src/components/StocksDetail/ChartSkeleton.tsx b/FE/src/components/StocksDetail/ChartSkeleton.tsx
new file mode 100644
index 00000000..57b6071b
--- /dev/null
+++ b/FE/src/components/StocksDetail/ChartSkeleton.tsx
@@ -0,0 +1,48 @@
+const ChartSkeleton = () => {
+  return (
+    <div className='box-border flex h-[260px] flex-col items-center rounded-lg bg-white p-3'>
+      {/* 상단 헤더 영역 */}
+      <div className='flex h-fit w-full items-center justify-between'>
+        {/* 차트 제목 */}
+        <div className='h-5 w-12 animate-pulse rounded bg-gray-200' />
+
+        {/* 카테고리 버튼들 */}
+        <nav className='flex gap-4'>
+          {Array.from({ length: 5 }).map((_, index) => (
+            <div
+              key={index}
+              className='h-7 w-7 animate-pulse rounded-lg bg-gray-200'
+            />
+          ))}
+        </nav>
+      </div>
+
+      {/* 차트 컨테이너 */}
+      <div className='mt-2 flex h-[200px] w-full flex-col'>
+        {/* Upper 차트 영역 */}
+        <div className='relative flex flex-1 flex-row'>
+          {/* 메인 차트 영역 */}
+          <div className='flex-1 animate-pulse bg-gray-200' />
+          {/* Y축 */}
+          <div className='ml-1 h-full w-12 animate-pulse bg-gray-200' />
+        </div>
+
+        {/* 구분선 */}
+        <div className='h-[1px] w-full bg-juga-grayscale-100' />
+
+        {/* Lower 차트 영역 */}
+        <div className='relative flex h-[60px] flex-row'>
+          {/* 메인 차트 영역 */}
+          <div className='flex-1 animate-pulse bg-gray-200' />
+          {/* Y축 */}
+          <div className='ml-1 h-full w-12 animate-pulse bg-gray-200' />
+        </div>
+
+        {/* X축 영역 */}
+        <div className='mt-1 h-5 w-full animate-pulse bg-gray-200' />
+      </div>
+    </div>
+  );
+};
+
+export default ChartSkeleton;
diff --git a/FE/src/components/TopFive/List.tsx b/FE/src/components/TopFive/List.tsx
index 5e05004a..78452801 100644
--- a/FE/src/components/TopFive/List.tsx
+++ b/FE/src/components/TopFive/List.tsx
@@ -1,14 +1,12 @@
 import Card from './Card';
-import { SkeletonCard } from './SkeletonCard.tsx';
 import { StockData } from './type.ts';
 
 type ListProps = {
   listTitle: string;
   data: StockData[];
-  isLoading: boolean;
 };
 
-export default function List({ listTitle, data, isLoading }: ListProps) {
+export default function List({ listTitle, data }: ListProps) {
   return (
     <div className='w-full rounded-lg bg-white px-1'>
       <div className={'my-5 flex text-xl font-bold'}>{listTitle}</div>
@@ -19,26 +17,22 @@ export default function List({ listTitle, data, isLoading }: ListProps) {
       </div>
 
       <ul>
-        {isLoading
-          ? Array.from({ length: 5 }).map((_, index) => (
-              <SkeletonCard key={`skeleton-${index}`} />
-            ))
-          : data.map((stock: StockData, index) => (
-              <li
-                key={`${stock.hts_kor_isnm}-${index}`}
-                className='transition-colors hover:bg-gray-50'
-              >
-                <Card
-                  code={stock.stck_shrn_iscd}
-                  name={stock.hts_kor_isnm}
-                  price={stock.stck_prpr}
-                  changePercentage={stock.prdy_ctrt}
-                  changePrice={stock.prdy_vrss}
-                  flag={stock.prdy_vrss_sign}
-                  index={index}
-                />
-              </li>
-            ))}
+        {data.map((stock: StockData, index) => (
+          <li
+            key={`${stock.hts_kor_isnm}-${index}`}
+            className='transition-colors hover:bg-gray-50'
+          >
+            <Card
+              code={stock.stck_shrn_iscd}
+              name={stock.hts_kor_isnm}
+              price={stock.stck_prpr}
+              changePercentage={stock.prdy_ctrt}
+              changePrice={stock.prdy_vrss}
+              flag={stock.prdy_vrss_sign}
+              index={index}
+            />
+          </li>
+        ))}
       </ul>
     </div>
   );
diff --git a/FE/src/components/TopFive/SkeletonCard.tsx b/FE/src/components/TopFive/SkeletonCard.tsx
index 79b9066c..8f70747b 100644
--- a/FE/src/components/TopFive/SkeletonCard.tsx
+++ b/FE/src/components/TopFive/SkeletonCard.tsx
@@ -1,12 +1,21 @@
 export function SkeletonCard() {
   return (
-    <li className='animate-pulse px-4 py-3'>
-      <div className='flex items-center space-x-4'>
-        <div className='h-4 w-4 rounded bg-gray-200'></div>
-        <div className='h-4 w-[200px] rounded bg-gray-200'></div>
-        <div className='ml-auto h-4 w-[100px] rounded bg-gray-200'></div>
-        <div className='h-4 w-[80px] rounded bg-gray-200'></div>
-      </div>
-    </li>
+    <div className='flex flex-row items-center justify-between py-3'>
+      <div className='ml-2'>
+        <div className='h-4 w-4 animate-pulse rounded bg-gray-200' />
+      </div>
+
+      <div className='ml-4 w-[180px]'>
+        <div className='h-4 w-32 animate-pulse rounded bg-gray-200' />
+      </div>
+
+      <div className='w-[120px] text-right'>
+        <div className='ml-auto h-4 w-24 animate-pulse rounded bg-gray-200' />
+      </div>
+
+      <div className='w-[150px] text-right'>
+        <div className='ml-auto h-4 w-28 animate-pulse rounded bg-gray-200' />
+      </div>
+    </div>
   );
 }
diff --git a/FE/src/components/TopFive/SkeletonList.tsx b/FE/src/components/TopFive/SkeletonList.tsx
new file mode 100644
index 00000000..577681af
--- /dev/null
+++ b/FE/src/components/TopFive/SkeletonList.tsx
@@ -0,0 +1,72 @@
+import { SkeletonCard } from './SkeletonCard.tsx';
+
+export const SkeletonList = () => {
+  return (
+    <div className='flex flex-col gap-4'>
+      {/* Nav 영역 스켈레톤 */}
+      <div className='h-10 w-full animate-pulse rounded bg-gray-200' />
+
+      <div className='flex flex-row justify-between gap-[64px]'>
+        {/* 급상승 리스트 */}
+        <div className='w-full rounded-lg bg-white px-1'>
+          {/* 제목 */}
+          <div className='my-5'>
+            <div className='h-6 w-32 animate-pulse rounded bg-gray-200' />
+          </div>
+
+          {/* 헤더 */}
+          <div className='flex flex-row items-center justify-between py-3'>
+            <div className='w-[200px]'>
+              <div className='h-4 w-16 animate-pulse rounded bg-gray-200' />
+            </div>
+            <div className='w-[140px] text-right'>
+              <div className='ml-auto h-4 w-16 animate-pulse rounded bg-gray-200' />
+            </div>
+            <div className='w-[150px] text-right'>
+              <div className='ml-auto h-4 w-16 animate-pulse rounded bg-gray-200' />
+            </div>
+          </div>
+
+          {/* 카드 리스트 */}
+          <ul>
+            {Array.from({ length: 5 }).map((_, index) => (
+              <li key={index} className='transition-colors'>
+                <SkeletonCard />
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        {/* 급하락 리스트 */}
+        <div className='w-full rounded-lg bg-white px-1'>
+          {/* 제목 */}
+          <div className='my-5'>
+            <div className='h-6 w-32 animate-pulse rounded bg-gray-200' />
+          </div>
+
+          {/* 헤더 */}
+          <div className='flex flex-row items-center justify-between py-3'>
+            <div className='w-[200px]'>
+              <div className='h-4 w-16 animate-pulse rounded bg-gray-200' />
+            </div>
+            <div className='w-[140px] text-right'>
+              <div className='ml-auto h-4 w-16 animate-pulse rounded bg-gray-200' />
+            </div>
+            <div className='w-[150px] text-right'>
+              <div className='ml-auto h-4 w-16 animate-pulse rounded bg-gray-200' />
+            </div>
+          </div>
+
+          {/* 카드 리스트 */}
+          <ul>
+            {Array.from({ length: 5 }).map((_, index) => (
+              <li key={index} className='transition-colors'>
+                <SkeletonCard />
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/FE/src/components/TopFive/index.tsx b/FE/src/components/TopFive/index.tsx
index acb3a6a1..1ebd80a0 100644
--- a/FE/src/components/TopFive/index.tsx
+++ b/FE/src/components/TopFive/index.tsx
@@ -10,28 +10,20 @@ export default function TopFive() {
   const [searchParams] = useSearchParams();
   const currentMarket = (searchParams.get('top') || '전체') as MarketType;
 
-  const { data, isLoading } = useQuery({
+  const { data } = useQuery({
     queryKey: ['topfive', currentMarket],
     queryFn: () => getTopFiveStocks(stockIndexMap[currentMarket]),
     keepPreviousData: true,
     staleTime: 1000,
     cacheTime: 30000,
-    // refetchInterval: 1000,
+    suspense: true,
   });
   return (
     <div className='flex flex-col gap-4'>
       <Nav />
       <div className={'flex flex-row justify-between gap-[64px]'}>
-        <List
-          listTitle={'급상승 Top 5'}
-          data={data?.high}
-          isLoading={isLoading}
-        />
-        <List
-          listTitle={'급하락 Top 5'}
-          data={data?.low}
-          isLoading={isLoading}
-        />
+        <List listTitle={'급상승 Top 5'} data={data?.high} />
+        <List listTitle={'급하락 Top 5'} data={data?.low} />
       </div>
     </div>
   );
diff --git a/FE/src/page/Home.tsx b/FE/src/page/Home.tsx
index 290ade75..fba441a8 100644
--- a/FE/src/page/Home.tsx
+++ b/FE/src/page/Home.tsx
@@ -2,6 +2,10 @@ import TopFive from 'components/TopFive';
 import StockIndex from 'components/StockIndex/index.tsx';
 import News from 'components/News/News.tsx';
 import { Helmet } from 'react-helmet-async';
+import { Suspense } from 'react';
+import { StockIndexSkeleton } from '../components/StockIndex/StockIndexSekleton.tsx';
+import { SkeletonList } from '../components/TopFive/SkeletonList.tsx';
+import { NewsSkeleton } from '../components/News/NewsSkeleton.tsx';
 
 export default function Home() {
   return (
@@ -10,9 +14,15 @@ export default function Home() {
         <meta name='description' content='Stock Simulation Service' />
         <title>JuGa</title>
       </Helmet>
-      <StockIndex />
-      <TopFive />
-      <News />
+      <Suspense fallback={<StockIndexSkeleton />}>
+        <StockIndex />
+      </Suspense>
+      <Suspense fallback={<SkeletonList />}>
+        <TopFive />
+      </Suspense>
+      <Suspense fallback={<NewsSkeleton />}>
+        <News />
+      </Suspense>
     </>
   );
 }
diff --git a/FE/src/page/Rank.tsx b/FE/src/page/Rank.tsx
index c4532c75..35c5fa7f 100644
--- a/FE/src/page/Rank.tsx
+++ b/FE/src/page/Rank.tsx
@@ -5,14 +5,13 @@ import { useQuery } from '@tanstack/react-query';
 import { Helmet } from 'react-helmet-async';
 
 export default function Rank() {
-  const { data, isLoading, isError } = useQuery({
+  const { data, isError } = useQuery({
     queryKey: ['Rank'],
     queryFn: () => getRanking(),
+    suspense: true,
   });
 
-  if (isLoading) return <div>Loading...</div>;
   if (isError) return <div>Error!!</div>;
-
   return (
     <div className='rounded-xl px-4'>
       <Helmet>
diff --git a/FE/src/page/StocksDetail.tsx b/FE/src/page/StocksDetail.tsx
index 146efc1e..c7b49d92 100644
--- a/FE/src/page/StocksDetail.tsx
+++ b/FE/src/page/StocksDetail.tsx
@@ -6,6 +6,8 @@ import TradeSection from 'components/StocksDetail/TradeSection';
 import { useParams } from 'react-router-dom';
 import { getStocksByCode } from 'service/stocks';
 import { Helmet } from 'react-helmet-async';
+import { Suspense } from 'react';
+import ChartSkeleton from 'components/StocksDetail/ChartSkeleton.tsx';
 
 export default function StocksDetail() {
   const params = useParams();
@@ -30,7 +32,9 @@ export default function StocksDetail() {
       <Header code={code} data={data} />
       <div className='flex h-[500px]'>
         <div className='flex min-w-[850px] flex-col'>
-          <Chart code={code} />
+          <Suspense fallback={<ChartSkeleton />}>
+            <Chart code={code} />
+          </Suspense>
           <PriceSection />
         </div>
         <TradeSection code={code} data={data} />

From eaa7e81141c862772b5b5cfec6a52858a24cfe28 Mon Sep 17 00:00:00 2001
From: Seo San <dannysir@naver.com>
Date: Tue, 3 Dec 2024 18:03:39 +0900
Subject: [PATCH 10/11] =?UTF-8?q?=F0=9F=94=A7=20fix:=20=EB=A7=88=EC=9D=B4?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B9=84=EC=A0=95=EC=83=81=20?=
 =?UTF-8?q?=EC=A0=91=EA=B7=BC=20=EC=A0=9C=EC=96=B4=20#254?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FE/src/components/Mypage/Account.tsx | 8 --------
 FE/src/page/MyPage.tsx               | 9 ++++++++-
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/FE/src/components/Mypage/Account.tsx b/FE/src/components/Mypage/Account.tsx
index 045a3192..49e2c8d6 100644
--- a/FE/src/components/Mypage/Account.tsx
+++ b/FE/src/components/Mypage/Account.tsx
@@ -3,8 +3,6 @@ import AccountCondition from './AccountCondition';
 import MyStocksList from './MyStocksList';
 import { getAssets } from 'service/assets';
 import { isWithinTimeRange } from 'utils/common';
-import useAuthStore from 'store/useAuthStore';
-import { useNavigate } from 'react-router-dom';
 
 export default function Account() {
   const { data, isLoading } = useQuery(
@@ -16,12 +14,6 @@ export default function Account() {
     },
   );
 
-  const navigate = useNavigate();
-  const { isLogin } = useAuthStore();
-  if (!isLogin) {
-    navigate('/');
-  }
-
   if (isLoading) return <div>loading</div>;
   if (!data) return <div>No data</div>;
 
diff --git a/FE/src/page/MyPage.tsx b/FE/src/page/MyPage.tsx
index 3690d6e0..cd7e6153 100644
--- a/FE/src/page/MyPage.tsx
+++ b/FE/src/page/MyPage.tsx
@@ -3,13 +3,20 @@ import BookMark from 'components/Mypage/BookMark';
 import MyInfo from 'components/Mypage/MyInfo';
 import Nav from 'components/Mypage/Nav';
 import Order from 'components/Mypage/Order';
-import { useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { Helmet } from 'react-helmet-async';
+import useAuthStore from '../store/useAuthStore.ts';
 
 export default function MyPage() {
   const [searchParams] = useSearchParams();
   const currentPage = searchParams.get('section') || 'account';
 
+  const navigate = useNavigate();
+  const { isLogin } = useAuthStore();
+  if (!isLogin) {
+    navigate('/');
+  }
+
   return (
     <div className='flex gap-5'>
       <Helmet>

From fe35690250cc22454baf7d33c98b826746ef87b8 Mon Sep 17 00:00:00 2001
From: Seo San <dannysir@naver.com>
Date: Tue, 3 Dec 2024 18:19:27 +0900
Subject: [PATCH 11/11] =?UTF-8?q?=E2=9C=A8=20feat:=20MyPage=20Skeleton=20U?=
 =?UTF-8?q?I=20=EC=A0=81=EC=9A=A9.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 FE/src/components/Mypage/Account.tsx          | 14 ++---
 FE/src/components/Mypage/AccountSkeleton.tsx  | 61 +++++++++++++++++++
 FE/src/components/Mypage/BookMark.tsx         | 19 +++---
 FE/src/components/Mypage/BookMarkSkeleton.tsx | 39 ++++++++++++
 FE/src/components/Mypage/MyInfo.tsx           | 30 +++++----
 FE/src/components/Mypage/MyInfoSkeleton.tsx   | 26 ++++++++
 FE/src/components/Mypage/Order.tsx            |  8 +--
 FE/src/components/Mypage/OrderSkeleton.tsx    | 58 ++++++++++++++++++
 FE/src/hooks/useOrder.ts                      |  1 +
 FE/src/hooks/useUser.ts                       |  3 +-
 FE/src/page/MyPage.tsx                        | 29 +++++++--
 11 files changed, 241 insertions(+), 47 deletions(-)
 create mode 100644 FE/src/components/Mypage/AccountSkeleton.tsx
 create mode 100644 FE/src/components/Mypage/BookMarkSkeleton.tsx
 create mode 100644 FE/src/components/Mypage/MyInfoSkeleton.tsx
 create mode 100644 FE/src/components/Mypage/OrderSkeleton.tsx

diff --git a/FE/src/components/Mypage/Account.tsx b/FE/src/components/Mypage/Account.tsx
index 49e2c8d6..d0d7db17 100644
--- a/FE/src/components/Mypage/Account.tsx
+++ b/FE/src/components/Mypage/Account.tsx
@@ -5,16 +5,12 @@ import { getAssets } from 'service/assets';
 import { isWithinTimeRange } from 'utils/common';
 
 export default function Account() {
-  const { data, isLoading } = useQuery(
-    ['account', 'assets'],
-    () => getAssets(),
-    {
-      staleTime: 1000,
-      refetchInterval: isWithinTimeRange('09:00', '15:30') ? 5000 : false,
-    },
-  );
+  const { data } = useQuery(['account', 'assets'], () => getAssets(), {
+    staleTime: 1000,
+    refetchInterval: isWithinTimeRange('09:00', '15:30') ? 5000 : false,
+    suspense: true,
+  });
 
-  if (isLoading) return <div>loading</div>;
   if (!data) return <div>No data</div>;
 
   const { asset, stocks } = data;
diff --git a/FE/src/components/Mypage/AccountSkeleton.tsx b/FE/src/components/Mypage/AccountSkeleton.tsx
new file mode 100644
index 00000000..4d01657e
--- /dev/null
+++ b/FE/src/components/Mypage/AccountSkeleton.tsx
@@ -0,0 +1,61 @@
+const AccountConditionSkeleton = () => {
+  return (
+    <div className='flex flex-col gap-4 rounded-lg bg-white p-4'>
+      <div className='flex items-center justify-between'>
+        {/* 계좌 정보 타이틀 */}
+        <div className='h-6 w-24 animate-pulse rounded bg-gray-200' />
+        {/* 날짜 정보 */}
+        <div className='h-5 w-32 animate-pulse rounded bg-gray-200' />
+      </div>
+
+      <div className='flex flex-col gap-2'>
+        {/* 총자산, 수익률 등의 정보 */}
+        <div className='flex items-center justify-between'>
+          <div className='h-5 w-20 animate-pulse rounded bg-gray-200' />
+          <div className='h-7 w-32 animate-pulse rounded bg-gray-200' />
+        </div>
+        <div className='flex items-center justify-between'>
+          <div className='h-5 w-20 animate-pulse rounded bg-gray-200' />
+          <div className='h-7 w-32 animate-pulse rounded bg-gray-200' />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const MyStocksListSkeleton = () => {
+  return (
+    <div className='flex flex-col gap-2 rounded-lg bg-white p-4'>
+      {/* 보유종목 타이틀 */}
+      <div className='mb-2 h-6 w-24 animate-pulse rounded bg-gray-200' />
+
+      {/* 테이블 헤더 */}
+      <div className='flex items-center justify-between border-b pb-2'>
+        <div className='h-4 w-32 animate-pulse rounded bg-gray-200' />
+        <div className='h-4 w-20 animate-pulse rounded bg-gray-200' />
+        <div className='h-4 w-24 animate-pulse rounded bg-gray-200' />
+      </div>
+
+      {/* 보유주식 리스트 */}
+      {Array.from({ length: 5 }).map((_, index) => (
+        <div
+          key={index}
+          className='flex items-center justify-between border-b py-3'
+        >
+          <div className='h-5 w-40 animate-pulse rounded bg-gray-200' />
+          <div className='h-5 w-24 animate-pulse rounded bg-gray-200' />
+          <div className='h-5 w-28 animate-pulse rounded bg-gray-200' />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export const AccountSkeleton = () => {
+  return (
+    <div className='flex min-h-[500px] flex-col gap-3'>
+      <AccountConditionSkeleton />
+      <MyStocksListSkeleton />
+    </div>
+  );
+};
diff --git a/FE/src/components/Mypage/BookMark.tsx b/FE/src/components/Mypage/BookMark.tsx
index 7731bf1b..25218a9e 100644
--- a/FE/src/components/Mypage/BookMark.tsx
+++ b/FE/src/components/Mypage/BookMark.tsx
@@ -9,28 +9,25 @@ export default function BookMark() {
     navigation(`/stocks/${code}`);
   };
 
-  const { data, isLoading, isError } = useQuery(
+  const { data } = useQuery(
     ['bookmark', 'stock'],
     () => getBookmarkedStocks(),
     {
       staleTime: 1000,
+      suspense: true,
     },
   );
 
-  if (isLoading) return <div>loading</div>;
-  if (!data) return <div>No data</div>;
-  if (isError) return <div>error</div>;
-
   return (
     <div className='mx-auto flex min-h-[500px] w-full flex-1 flex-col rounded-md bg-white p-4 shadow-md'>
-      <div className='flex pb-2 text-sm font-bold border-b'>
-        <p className='w-1/2 text-left truncate'>종목</p>
+      <div className='flex border-b pb-2 text-sm font-bold'>
+        <p className='w-1/2 truncate text-left'>종목</p>
         <p className='w-1/4 text-center'>현재가</p>
         <p className='w-1/4 text-right'>등락률</p>
       </div>
 
-      <ul className='flex flex-col text-sm divide-y'>
-        {data.map((stock) => {
+      <ul className='flex flex-col divide-y text-sm'>
+        {data?.map((stock) => {
           const { code, name, stck_prpr, prdy_ctrt, prdy_vrss_sign } = stock;
 
           return (
@@ -39,11 +36,11 @@ export default function BookMark() {
               key={code}
               onClick={() => handleClick(code)}
             >
-              <div className='flex w-1/2 gap-2 text-left truncate'>
+              <div className='flex w-1/2 gap-2 truncate text-left'>
                 <p className='font-semibold'>{name}</p>
                 <p className='text-gray-500'>{code}</p>
               </div>
-              <p className='w-1/4 text-center truncate'>
+              <p className='w-1/4 truncate text-center'>
                 {(+stck_prpr).toLocaleString()}원
               </p>
               <p
diff --git a/FE/src/components/Mypage/BookMarkSkeleton.tsx b/FE/src/components/Mypage/BookMarkSkeleton.tsx
new file mode 100644
index 00000000..02970090
--- /dev/null
+++ b/FE/src/components/Mypage/BookMarkSkeleton.tsx
@@ -0,0 +1,39 @@
+export const BookmarkSkeleton = () => {
+  return (
+    <div className='mx-auto flex min-h-[500px] w-full flex-1 flex-col rounded-md bg-white p-4 shadow-md'>
+      {/* 헤더 */}
+      <div className='flex border-b pb-2 text-sm font-bold'>
+        <div className='w-1/2'>
+          <div className='h-4 w-16 animate-pulse rounded bg-gray-200' />
+        </div>
+        <div className='w-1/4 text-center'>
+          <div className='mx-auto h-4 w-16 animate-pulse rounded bg-gray-200' />
+        </div>
+        <div className='flex w-1/4 justify-end'>
+          <div className='h-4 w-16 animate-pulse rounded bg-gray-200' />
+        </div>
+      </div>
+
+      {/* 북마크 리스트 */}
+      <ul className='flex flex-col divide-y text-sm'>
+        {Array.from({ length: 8 }).map((_, index) => (
+          <li key={index} className='flex py-2'>
+            {/* 종목명과 코드 */}
+            <div className='flex w-1/2 gap-2'>
+              <div className='h-4 w-24 animate-pulse rounded bg-gray-200' />
+              <div className='h-4 w-16 animate-pulse rounded bg-gray-200' />
+            </div>
+            {/* 현재가 */}
+            <div className='flex w-1/4 justify-center'>
+              <div className='h-4 w-20 animate-pulse rounded bg-gray-200' />
+            </div>
+            {/* 등락률 */}
+            <div className='flex w-1/4 justify-end'>
+              <div className='h-4 w-16 animate-pulse rounded bg-gray-200' />
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
diff --git a/FE/src/components/Mypage/MyInfo.tsx b/FE/src/components/Mypage/MyInfo.tsx
index ee0ef344..c38f6a9f 100644
--- a/FE/src/components/Mypage/MyInfo.tsx
+++ b/FE/src/components/Mypage/MyInfo.tsx
@@ -6,9 +6,9 @@ import { useEffect, useState } from 'react';
 
 export default function MyInfo() {
   const [isEditMode, setIsEditMode] = useState(false);
-  const { userQuery, updateNickame } = useUser();
+  const { userQuery, updateNickname } = useUser();
 
-  const { data, isLoading, isError } = userQuery;
+  const { data } = userQuery;
 
   const [nickname, setNickname] = useState('');
 
@@ -17,17 +17,13 @@ export default function MyInfo() {
     setNickname(data.name);
   }, [data]);
 
-  if (isLoading) return <div>loading</div>;
-  if (!data) return <div>No data</div>;
-  if (isError) return <div>error</div>;
-
-  const handeleEditBtnClick = () => {
-    if (nickname === data.name) {
+  const handleEditBtnClick = () => {
+    if (nickname === data?.name) {
       setIsEditMode(false);
       return;
     }
 
-    updateNickame.mutate(nickname, {
+    updateNickname.mutate(nickname, {
       onSuccess: (res) => {
         if (res.statusCode === 400) {
           Toast({ message: res.message, type: 'error' });
@@ -41,7 +37,7 @@ export default function MyInfo() {
   return (
     <div className='flex flex-col items-center p-6 text-lg'>
       <div className='flex w-full max-w-[600px] items-center gap-2 py-2 sm:w-[80%] lg:w-[50%]'>
-        <div className='flex items-center justify-between w-full'>
+        <div className='flex w-full items-center justify-between'>
           <p className='w-28 min-w-[80px] truncate font-medium text-juga-grayscale-black sm:min-w-[100px]'>
             닉네임
           </p>
@@ -56,17 +52,19 @@ export default function MyInfo() {
                   autoFocus
                 />
                 <button
-                  onClick={handeleEditBtnClick}
-                  className='w-10 p-1 text-sm font-semibold text-white rounded-lg bg-juga-blue-40'
+                  onClick={handleEditBtnClick}
+                  className='w-10 rounded-lg bg-juga-blue-40 p-1 text-sm font-semibold text-white'
                 >
                   수정
                 </button>
                 <button
                   onClick={() => {
-                    setNickname(data.name);
+                    if (data) {
+                      setNickname(data.name);
+                    }
                     setIsEditMode(false);
                   }}
-                  className='w-10 p-1 text-sm font-semibold text-white rounded-lg bg-juga-grayscale-500'
+                  className='w-10 rounded-lg bg-juga-grayscale-500 p-1 text-sm font-semibold text-white'
                 >
                   취소
                 </button>
@@ -76,9 +74,9 @@ export default function MyInfo() {
                 <p className='min-w-[60px] truncate font-semibold text-juga-grayscale-500 sm:min-w-[80px]'>
                   {nickname}
                 </p>
-                <div className='flex items-center justify-end w-9'>
+                <div className='flex w-9 items-center justify-end'>
                   <button onClick={() => setIsEditMode(true)}>
-                    <PencilSquareIcon className='w-5 h-5' />
+                    <PencilSquareIcon className='h-5 w-5' />
                   </button>
                 </div>
               </>
diff --git a/FE/src/components/Mypage/MyInfoSkeleton.tsx b/FE/src/components/Mypage/MyInfoSkeleton.tsx
new file mode 100644
index 00000000..7e8e61ff
--- /dev/null
+++ b/FE/src/components/Mypage/MyInfoSkeleton.tsx
@@ -0,0 +1,26 @@
+export const MyInfoSkeleton = () => {
+  return (
+    <div className='flex flex-col items-center p-6 text-lg'>
+      <div className='flex w-full max-w-[600px] items-center gap-2 py-2 sm:w-[80%] lg:w-[50%]'>
+        <div className='flex w-full items-center justify-between'>
+          {/* 닉네임 라벨 */}
+          <div className='w-28 min-w-[80px] sm:min-w-[100px]'>
+            <div className='h-6 w-16 animate-pulse rounded bg-gray-200' />
+          </div>
+
+          <div className='flex items-center gap-2'>
+            {/* 닉네임 값 */}
+            <div className='min-w-[60px] sm:min-w-[80px]'>
+              <div className='h-6 w-24 animate-pulse rounded bg-gray-200' />
+            </div>
+
+            {/* 편집 아이콘 */}
+            <div className='flex w-9 items-center justify-end'>
+              <div className='h-5 w-5 animate-pulse rounded bg-gray-200' />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/FE/src/components/Mypage/Order.tsx b/FE/src/components/Mypage/Order.tsx
index cc4fcefe..df228bb8 100644
--- a/FE/src/components/Mypage/Order.tsx
+++ b/FE/src/components/Mypage/Order.tsx
@@ -6,13 +6,9 @@ import { formatTimestamp } from 'utils/format';
 export default function Order() {
   const { orderQuery, removeOrder } = useOrders();
 
-  const { data, isLoading, isError } = orderQuery;
+  const { data } = orderQuery;
   const { isOpen, open } = useOrderCancelAlertModalStore();
 
-  if (isLoading) return <div>loading</div>;
-  if (!data) return <div>No data</div>;
-  if (isError) return <div>error</div>;
-
   return (
     <div className='mx-auto flex min-h-[500px] w-full flex-col rounded-md bg-white p-4 shadow-md'>
       <div className='flex border-b pb-2 text-sm font-bold'>
@@ -25,7 +21,7 @@ export default function Order() {
       </div>
 
       <ul className='flex flex-col divide-y text-sm'>
-        {data.map((order) => {
+        {data?.map((order) => {
           const {
             id,
             stock_code,
diff --git a/FE/src/components/Mypage/OrderSkeleton.tsx b/FE/src/components/Mypage/OrderSkeleton.tsx
new file mode 100644
index 00000000..5972ce7d
--- /dev/null
+++ b/FE/src/components/Mypage/OrderSkeleton.tsx
@@ -0,0 +1,58 @@
+export const OrderSkeleton = () => {
+  return (
+    <div className='mx-auto flex min-h-[500px] w-full flex-col rounded-md bg-white p-4 shadow-md'>
+      {/* 헤더 */}
+      <div className='flex border-b pb-2 text-sm font-bold'>
+        <div className='w-1/3'>
+          <div className='h-4 w-16 animate-pulse rounded bg-gray-200' />
+        </div>
+        <div className='flex w-1/4 justify-center'>
+          <div className='h-4 w-16 animate-pulse rounded bg-gray-200' />
+        </div>
+        <div className='flex w-1/4 justify-center'>
+          <div className='h-4 w-16 animate-pulse rounded bg-gray-200' />
+        </div>
+        <div className='flex w-1/4 justify-center'>
+          <div className='h-4 w-20 animate-pulse rounded bg-gray-200' />
+        </div>
+        <div className='flex w-1/4 justify-end'>
+          <div className='h-4 w-20 animate-pulse rounded bg-gray-200' />
+        </div>
+        <div className='w-1/6'></div>
+      </div>
+
+      {/* 주문 리스트 */}
+      <ul className='flex flex-col divide-y text-sm'>
+        {Array.from({ length: 5 }).map((_, index) => (
+          <li className='flex py-2' key={index}>
+            {/* 종목명과 코드 */}
+            <div className='flex w-1/3 gap-2'>
+              <div className='h-4 w-24 animate-pulse rounded bg-gray-200' />
+              <div className='h-4 w-16 animate-pulse rounded bg-gray-200' />
+            </div>
+            {/* 요청 유형 */}
+            <div className='flex w-1/4 justify-center'>
+              <div className='h-4 w-12 animate-pulse rounded bg-gray-200' />
+            </div>
+            {/* 수량 */}
+            <div className='flex w-1/4 justify-center'>
+              <div className='h-4 w-16 animate-pulse rounded bg-gray-200' />
+            </div>
+            {/* 요청 가격 */}
+            <div className='flex w-1/4 justify-center'>
+              <div className='h-4 w-20 animate-pulse rounded bg-gray-200' />
+            </div>
+            {/* 요청 시간 */}
+            <div className='flex w-1/4 justify-end'>
+              <div className='h-4 w-24 animate-pulse rounded bg-gray-200' />
+            </div>
+            {/* 취소 버튼 */}
+            <div className='flex w-1/6 justify-end'>
+              <div className='h-6 w-12 animate-pulse rounded-lg bg-gray-200' />
+            </div>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+};
diff --git a/FE/src/hooks/useOrder.ts b/FE/src/hooks/useOrder.ts
index ac1ea661..35754661 100644
--- a/FE/src/hooks/useOrder.ts
+++ b/FE/src/hooks/useOrder.ts
@@ -12,6 +12,7 @@ export default function useOrders() {
 
   const orderQuery = useQuery(['account', 'order'], () => getOrders(), {
     staleTime: 1000,
+    suspense: true,
   });
 
   const removeOrder = useMutation((id: number) => deleteOrder(id), {
diff --git a/FE/src/hooks/useUser.ts b/FE/src/hooks/useUser.ts
index 77513a4b..d2b38c18 100644
--- a/FE/src/hooks/useUser.ts
+++ b/FE/src/hooks/useUser.ts
@@ -7,11 +7,12 @@ export default function useUser() {
 
   const userQuery = useQuery(['myInfo', 'profile'], () => getMyProfile(), {
     staleTime: 1000,
+    suspense: true,
   });
 
   const updateNickame = useMutation((nickname: string) => rename(nickname), {
     onSuccess: () => queryClient.invalidateQueries(['myInfo', 'profile']),
   });
 
-  return { userQuery, updateNickame };
+  return { userQuery, updateNickname: updateNickame };
 }
diff --git a/FE/src/page/MyPage.tsx b/FE/src/page/MyPage.tsx
index cd7e6153..fbeb1160 100644
--- a/FE/src/page/MyPage.tsx
+++ b/FE/src/page/MyPage.tsx
@@ -6,6 +6,11 @@ import Order from 'components/Mypage/Order';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { Helmet } from 'react-helmet-async';
 import useAuthStore from '../store/useAuthStore.ts';
+import { Suspense } from 'react';
+import { AccountSkeleton } from '../components/Mypage/AccountSkeleton.tsx';
+import { BookmarkSkeleton } from '../components/Mypage/BookMarkSkeleton.tsx';
+import { OrderSkeleton } from '../components/Mypage/OrderSkeleton.tsx';
+import { MyInfoSkeleton } from '../components/Mypage/MyInfoSkeleton.tsx';
 
 export default function MyPage() {
   const [searchParams] = useSearchParams();
@@ -27,10 +32,26 @@ export default function MyPage() {
       <div className='flex-1'>
         {
           {
-            account: <Account />,
-            order: <Order />,
-            bookmark: <BookMark />,
-            info: <MyInfo />,
+            account: (
+              <Suspense fallback={<AccountSkeleton />}>
+                <Account />
+              </Suspense>
+            ),
+            order: (
+              <Suspense fallback={<OrderSkeleton />}>
+                <Order />
+              </Suspense>
+            ),
+            bookmark: (
+              <Suspense fallback={<BookmarkSkeleton />}>
+                <BookMark />
+              </Suspense>
+            ),
+            info: (
+              <Suspense fallback={<MyInfoSkeleton />}>
+                <MyInfo />
+              </Suspense>
+            ),
           }[currentPage]
         }
       </div>