diff --git a/.env.development b/.env.development
new file mode 100644
index 0000000..a8cf54a
--- /dev/null
+++ b/.env.development
@@ -0,0 +1 @@
+VITE_API_BASE_URL=http://localhost:8080
diff --git a/package-lock.json b/package-lock.json
index e6b66c2..ded61c0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -36,6 +36,7 @@
         "@radix-ui/react-toggle": "^1.1.9",
         "@radix-ui/react-toggle-group": "^1.1.10",
         "@radix-ui/react-tooltip": "^1.2.7",
+        "@stomp/stompjs": "^7.2.1",
         "@tanstack/react-query": "^5.83.0",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -53,6 +54,7 @@
         "react-resizable-panels": "^2.1.9",
         "react-router-dom": "^6.30.1",
         "recharts": "^2.15.4",
+        "sockjs-client": "^1.6.1",
         "sonner": "^1.7.4",
         "tailwind-merge": "^2.6.0",
         "tailwindcss-animate": "^1.0.7",
@@ -65,6 +67,7 @@
         "@types/node": "^22.16.5",
         "@types/react": "^18.3.23",
         "@types/react-dom": "^18.3.7",
+        "@types/sockjs-client": "^1.5.4",
         "@vitejs/plugin-react-swc": "^3.11.0",
         "autoprefixer": "^10.4.21",
         "eslint": "^9.32.0",
@@ -2512,9 +2515,9 @@
       "license": "MIT"
     },
     "node_modules/@remix-run/router": {
-      "version": "1.23.1",
-      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.1.tgz",
-      "integrity": "sha512-vDbaOzF7yT2Qs4vO6XV1MHcJv+3dgR1sT+l3B8xxOVhUC336prMvqrvsLL/9Dnw2xr6Qhz4J0dmS0llNAbnUmQ==",
+      "version": "1.23.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.23.2.tgz",
+      "integrity": "sha512-Ic6m2U/rMjTkhERIa/0ZtXJP17QUi2CbWE7cqx4J58M8aA3QTfW+2UlQ4psvTX9IO1RfNVhK3pcpdjej7L+t2w==",
       "license": "MIT",
       "engines": {
         "node": ">=14.0.0"
@@ -2528,9 +2531,9 @@
       "license": "MIT"
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.54.0.tgz",
-      "integrity": "sha512-OywsdRHrFvCdvsewAInDKCNyR3laPA2mc9bRYJ6LBp5IyvF3fvXbbNR0bSzHlZVFtn6E0xw2oZlyjg4rKCVcng==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.55.1.tgz",
+      "integrity": "sha512-9R0DM/ykwfGIlNu6+2U09ga0WXeZ9MRC2Ter8jnz8415VbuIykVuc6bhdrbORFZANDmTDvq26mJrEVTl8TdnDg==",
       "cpu": [
         "arm"
       ],
@@ -2542,9 +2545,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.54.0.tgz",
-      "integrity": "sha512-Skx39Uv+u7H224Af+bDgNinitlmHyQX1K/atIA32JP3JQw6hVODX5tkbi2zof/E69M1qH2UoN3Xdxgs90mmNYw==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.55.1.tgz",
+      "integrity": "sha512-eFZCb1YUqhTysgW3sj/55du5cG57S7UTNtdMjCW7LwVcj3dTTcowCsC8p7uBdzKsZYa8J7IDE8lhMI+HX1vQvg==",
       "cpu": [
         "arm64"
       ],
@@ -2556,9 +2559,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.54.0.tgz",
-      "integrity": "sha512-k43D4qta/+6Fq+nCDhhv9yP2HdeKeP56QrUUTW7E6PhZP1US6NDqpJj4MY0jBHlJivVJD5P8NxrjuobZBJTCRw==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.55.1.tgz",
+      "integrity": "sha512-p3grE2PHcQm2e8PSGZdzIhCKbMCw/xi9XvMPErPhwO17vxtvCN5FEA2mSLgmKlCjHGMQTP6phuQTYWUnKewwGg==",
       "cpu": [
         "arm64"
       ],
@@ -2570,9 +2573,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.54.0.tgz",
-      "integrity": "sha512-cOo7biqwkpawslEfox5Vs8/qj83M/aZCSSNIWpVzfU2CYHa2G3P1UN5WF01RdTHSgCkri7XOlTdtk17BezlV3A==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.55.1.tgz",
+      "integrity": "sha512-rDUjG25C9qoTm+e02Esi+aqTKSBYwVTaoS1wxcN47/Luqef57Vgp96xNANwt5npq9GDxsH7kXxNkJVEsWEOEaQ==",
       "cpu": [
         "x64"
       ],
@@ -2584,9 +2587,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.54.0.tgz",
-      "integrity": "sha512-miSvuFkmvFbgJ1BevMa4CPCFt5MPGw094knM64W9I0giUIMMmRYcGW/JWZDriaw/k1kOBtsWh1z6nIFV1vPNtA==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.55.1.tgz",
+      "integrity": "sha512-+JiU7Jbp5cdxekIgdte0jfcu5oqw4GCKr6i3PJTlXTCU5H5Fvtkpbs4XJHRmWNXF+hKmn4v7ogI5OQPaupJgOg==",
       "cpu": [
         "arm64"
       ],
@@ -2598,9 +2601,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.54.0.tgz",
-      "integrity": "sha512-KGXIs55+b/ZfZsq9aR026tmr/+7tq6VG6MsnrvF4H8VhwflTIuYh+LFUlIsRdQSgrgmtM3fVATzEAj4hBQlaqQ==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.55.1.tgz",
+      "integrity": "sha512-V5xC1tOVWtLLmr3YUk2f6EJK4qksksOYiz/TCsFHu/R+woubcLWdC9nZQmwjOAbmExBIVKsm1/wKmEy4z4u4Bw==",
       "cpu": [
         "x64"
       ],
@@ -2612,9 +2615,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.54.0.tgz",
-      "integrity": "sha512-EHMUcDwhtdRGlXZsGSIuXSYwD5kOT9NVnx9sqzYiwAc91wfYOE1g1djOEDseZJKKqtHAHGwnGPQu3kytmfaXLQ==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.55.1.tgz",
+      "integrity": "sha512-Rn3n+FUk2J5VWx+ywrG/HGPTD9jXNbicRtTM11e/uorplArnXZYsVifnPPqNNP5BsO3roI4n8332ukpY/zN7rQ==",
       "cpu": [
         "arm"
       ],
@@ -2626,9 +2629,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.54.0.tgz",
-      "integrity": "sha512-+pBrqEjaakN2ySv5RVrj/qLytYhPKEUwk+e3SFU5jTLHIcAtqh2rLrd/OkbNuHJpsBgxsD8ccJt5ga/SeG0JmA==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.55.1.tgz",
+      "integrity": "sha512-grPNWydeKtc1aEdrJDWk4opD7nFtQbMmV7769hiAaYyUKCT1faPRm2av8CX1YJsZ4TLAZcg9gTR1KvEzoLjXkg==",
       "cpu": [
         "arm"
       ],
@@ -2640,9 +2643,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.54.0.tgz",
-      "integrity": "sha512-NSqc7rE9wuUaRBsBp5ckQ5CVz5aIRKCwsoa6WMF7G01sX3/qHUw/z4pv+D+ahL1EIKy6Enpcnz1RY8pf7bjwng==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.55.1.tgz",
+      "integrity": "sha512-a59mwd1k6x8tXKcUxSyISiquLwB5pX+fJW9TkWU46lCqD/GRDe9uDN31jrMmVP3feI3mhAdvcCClhV8V5MhJFQ==",
       "cpu": [
         "arm64"
       ],
@@ -2654,9 +2657,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.54.0.tgz",
-      "integrity": "sha512-gr5vDbg3Bakga5kbdpqx81m2n9IX8M6gIMlQQIXiLTNeQW6CucvuInJ91EuCJ/JYvc+rcLLsDFcfAD1K7fMofg==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.55.1.tgz",
+      "integrity": "sha512-puS1MEgWX5GsHSoiAsF0TYrpomdvkaXm0CofIMG5uVkP6IBV+ZO9xhC5YEN49nsgYo1DuuMquF9+7EDBVYu4uA==",
       "cpu": [
         "arm64"
       ],
@@ -2668,9 +2671,23 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loong64-gnu": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.54.0.tgz",
-      "integrity": "sha512-gsrtB1NA3ZYj2vq0Rzkylo9ylCtW/PhpLEivlgWe0bpgtX5+9j9EZa0wtZiCjgu6zmSeZWyI/e2YRX1URozpIw==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-gnu/-/rollup-linux-loong64-gnu-4.55.1.tgz",
+      "integrity": "sha512-r3Wv40in+lTsULSb6nnoudVbARdOwb2u5fpeoOAZjFLznp6tDU8kd+GTHmJoqZ9lt6/Sys33KdIHUaQihFcu7g==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-loong64-musl": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loong64-musl/-/rollup-linux-loong64-musl-4.55.1.tgz",
+      "integrity": "sha512-MR8c0+UxAlB22Fq4R+aQSPBayvYa3+9DrwG/i1TKQXFYEaoW3B5b/rkSRIypcZDdWjWnpcvxbNaAJDcSbJU3Lw==",
       "cpu": [
         "loong64"
       ],
@@ -2682,9 +2699,23 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-ppc64-gnu": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.54.0.tgz",
-      "integrity": "sha512-y3qNOfTBStmFNq+t4s7Tmc9hW2ENtPg8FeUD/VShI7rKxNW7O4fFeaYbMsd3tpFlIg1Q8IapFgy7Q9i2BqeBvA==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.55.1.tgz",
+      "integrity": "sha512-3KhoECe1BRlSYpMTeVrD4sh2Pw2xgt4jzNSZIIPLFEsnQn9gAnZagW9+VqDqAHgm1Xc77LzJOo2LdigS5qZ+gw==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-ppc64-musl": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-musl/-/rollup-linux-ppc64-musl-4.55.1.tgz",
+      "integrity": "sha512-ziR1OuZx0vdYZZ30vueNZTg73alF59DicYrPViG0NEgDVN8/Jl87zkAPu4u6VjZST2llgEUjaiNl9JM6HH1Vdw==",
       "cpu": [
         "ppc64"
       ],
@@ -2696,9 +2727,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.54.0.tgz",
-      "integrity": "sha512-89sepv7h2lIVPsFma8iwmccN7Yjjtgz0Rj/Ou6fEqg3HDhpCa+Et+YSufy27i6b0Wav69Qv4WBNl3Rs6pwhebQ==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.55.1.tgz",
+      "integrity": "sha512-uW0Y12ih2XJRERZ4jAfKamTyIHVMPQnTZcQjme2HMVDAHY4amf5u414OqNYC+x+LzRdRcnIG1YodLrrtA8xsxw==",
       "cpu": [
         "riscv64"
       ],
@@ -2710,9 +2741,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-musl": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.54.0.tgz",
-      "integrity": "sha512-ZcU77ieh0M2Q8Ur7D5X7KvK+UxbXeDHwiOt/CPSBTI1fBmeDMivW0dPkdqkT4rOgDjrDDBUed9x4EgraIKoR2A==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.55.1.tgz",
+      "integrity": "sha512-u9yZ0jUkOED1BFrqu3BwMQoixvGHGZ+JhJNkNKY/hyoEgOwlqKb62qu+7UjbPSHYjiVy8kKJHvXKv5coH4wDeg==",
       "cpu": [
         "riscv64"
       ],
@@ -2724,9 +2755,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.54.0.tgz",
-      "integrity": "sha512-2AdWy5RdDF5+4YfG/YesGDDtbyJlC9LHmL6rZw6FurBJ5n4vFGupsOBGfwMRjBYH7qRQowT8D/U4LoSvVwOhSQ==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.55.1.tgz",
+      "integrity": "sha512-/0PenBCmqM4ZUd0190j7J0UsQ/1nsi735iPRakO8iPciE7BQ495Y6msPzaOmvx0/pn+eJVVlZrNrSh4WSYLxNg==",
       "cpu": [
         "s390x"
       ],
@@ -2738,9 +2769,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.54.0.tgz",
-      "integrity": "sha512-WGt5J8Ij/rvyqpFexxk3ffKqqbLf9AqrTBbWDk7ApGUzaIs6V+s2s84kAxklFwmMF/vBNGrVdYgbblCOFFezMQ==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.55.1.tgz",
+      "integrity": "sha512-a8G4wiQxQG2BAvo+gU6XrReRRqj+pLS2NGXKm8io19goR+K8lw269eTrPkSdDTALwMmJp4th2Uh0D8J9bEV1vg==",
       "cpu": [
         "x64"
       ],
@@ -2752,9 +2783,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.54.0.tgz",
-      "integrity": "sha512-JzQmb38ATzHjxlPHuTH6tE7ojnMKM2kYNzt44LO/jJi8BpceEC8QuXYA908n8r3CNuG/B3BV8VR3Hi1rYtmPiw==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.55.1.tgz",
+      "integrity": "sha512-bD+zjpFrMpP/hqkfEcnjXWHMw5BIghGisOKPj+2NaNDuVT+8Ds4mPf3XcPHuat1tz89WRL+1wbcxKY3WSbiT7w==",
       "cpu": [
         "x64"
       ],
@@ -2765,10 +2796,24 @@
         "linux"
       ]
     },
+    "node_modules/@rollup/rollup-openbsd-x64": {
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openbsd-x64/-/rollup-openbsd-x64-4.55.1.tgz",
+      "integrity": "sha512-eLXw0dOiqE4QmvikfQ6yjgkg/xDM+MdU9YJuP4ySTibXU0oAvnEWXt7UDJmD4UkYialMfOGFPJnIHSe/kdzPxg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "openbsd"
+      ]
+    },
     "node_modules/@rollup/rollup-openharmony-arm64": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.54.0.tgz",
-      "integrity": "sha512-huT3fd0iC7jigGh7n3q/+lfPcXxBi+om/Rs3yiFxjvSxbSB6aohDFXbWvlspaqjeOh+hx7DDHS+5Es5qRkWkZg==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-openharmony-arm64/-/rollup-openharmony-arm64-4.55.1.tgz",
+      "integrity": "sha512-xzm44KgEP11te3S2HCSyYf5zIzWmx3n8HDCc7EE59+lTcswEWNpvMLfd9uJvVX8LCg9QWG67Xt75AuHn4vgsXw==",
       "cpu": [
         "arm64"
       ],
@@ -2780,9 +2825,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.54.0.tgz",
-      "integrity": "sha512-c2V0W1bsKIKfbLMBu/WGBz6Yci8nJ/ZJdheE0EwB73N3MvHYKiKGs3mVilX4Gs70eGeDaMqEob25Tw2Gb9Nqyw==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.55.1.tgz",
+      "integrity": "sha512-yR6Bl3tMC/gBok5cz/Qi0xYnVbIxGx5Fcf/ca0eB6/6JwOY+SRUcJfI0OpeTpPls7f194as62thCt/2BjxYN8g==",
       "cpu": [
         "arm64"
       ],
@@ -2794,9 +2839,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.54.0.tgz",
-      "integrity": "sha512-woEHgqQqDCkAzrDhvDipnSirm5vxUXtSKDYTVpZG3nUdW/VVB5VdCYA2iReSj/u3yCZzXID4kuKG7OynPnB3WQ==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.55.1.tgz",
+      "integrity": "sha512-3fZBidchE0eY0oFZBnekYCfg+5wAB0mbpCBuofh5mZuzIU/4jIVkbESmd2dOsFNS78b53CYv3OAtwqkZZmU5nA==",
       "cpu": [
         "ia32"
       ],
@@ -2808,9 +2853,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-gnu": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.54.0.tgz",
-      "integrity": "sha512-dzAc53LOuFvHwbCEOS0rPbXp6SIhAf2txMP5p6mGyOXXw5mWY8NGGbPMPrs4P1WItkfApDathBj/NzMLUZ9rtQ==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-gnu/-/rollup-win32-x64-gnu-4.55.1.tgz",
+      "integrity": "sha512-xGGY5pXj69IxKb4yv/POoocPy/qmEGhimy/FoTpTSVju3FYXUQQMFCaZZXJVidsmGxRioZAwpThl/4zX41gRKg==",
       "cpu": [
         "x64"
       ],
@@ -2822,9 +2867,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.54.0.tgz",
-      "integrity": "sha512-hYT5d3YNdSh3mbCU1gwQyPgQd3T2ne0A3KG8KSBdav5TiBg6eInVmV+TeR5uHufiIgSFg0XsOWGW5/RhNcSvPg==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.55.1.tgz",
+      "integrity": "sha512-SPEpaL6DX4rmcXtnhdrQYgzQ5W2uW3SCJch88lB2zImhJRhIIK44fkUrgIV/Q8yUNfw5oyZ5vkeQsZLhCb06lw==",
       "cpu": [
         "x64"
       ],
@@ -2835,6 +2880,12 @@
         "win32"
       ]
     },
+    "node_modules/@stomp/stompjs": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/@stomp/stompjs/-/stompjs-7.2.1.tgz",
+      "integrity": "sha512-DLd/WeicnHS5SsWWSk3x6/pcivqchNaEvg9UEGVqAcfYEBVmS9D6980ckXjTtfpXLjdLDsd96M7IuX4w7nzq5g==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@swc/core": {
       "version": "1.15.8",
       "resolved": "https://registry.npmjs.org/@swc/core/-/core-1.15.8.tgz",
@@ -3215,21 +3266,28 @@
         "@types/react": "^18.0.0"
       }
     },
+    "node_modules/@types/sockjs-client": {
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@types/sockjs-client/-/sockjs-client-1.5.4.tgz",
+      "integrity": "sha512-zk+uFZeWyvJ5ZFkLIwoGA/DfJ+pYzcZ8eH4H/EILCm2OBZyHH6Hkdna1/UWL/CFruh5wj6ES7g75SvUB0VsH5w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "8.51.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.51.0.tgz",
-      "integrity": "sha512-XtssGWJvypyM2ytBnSnKtHYOGT+4ZwTnBVl36TA4nRO2f4PRNGz5/1OszHzcZCvcBMh+qb7I06uoCmLTRdR9og==",
+      "version": "8.52.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.52.0.tgz",
+      "integrity": "sha512-okqtOgqu2qmZJ5iN4TWlgfF171dZmx2FzdOv2K/ixL2LZWDStL8+JgQerI2sa8eAEfoydG9+0V96m7V+P8yE1Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@eslint-community/regexpp": "^4.10.0",
-        "@typescript-eslint/scope-manager": "8.51.0",
-        "@typescript-eslint/type-utils": "8.51.0",
-        "@typescript-eslint/utils": "8.51.0",
-        "@typescript-eslint/visitor-keys": "8.51.0",
-        "ignore": "^7.0.0",
+        "@eslint-community/regexpp": "^4.12.2",
+        "@typescript-eslint/scope-manager": "8.52.0",
+        "@typescript-eslint/type-utils": "8.52.0",
+        "@typescript-eslint/utils": "8.52.0",
+        "@typescript-eslint/visitor-keys": "8.52.0",
+        "ignore": "^7.0.5",
         "natural-compare": "^1.4.0",
-        "ts-api-utils": "^2.2.0"
+        "ts-api-utils": "^2.4.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3239,7 +3297,7 @@
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^8.51.0",
+        "@typescript-eslint/parser": "^8.52.0",
         "eslint": "^8.57.0 || ^9.0.0",
         "typescript": ">=4.8.4 <6.0.0"
       }
@@ -3255,17 +3313,17 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "8.51.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.51.0.tgz",
-      "integrity": "sha512-3xP4XzzDNQOIqBMWogftkwxhg5oMKApqY0BAflmLZiFYHqyhSOxv/cd/zPQLTcCXr4AkaKb25joocY0BD1WC6A==",
+      "version": "8.52.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.52.0.tgz",
+      "integrity": "sha512-iIACsx8pxRnguSYhHiMn2PvhvfpopO9FXHyn1mG5txZIsAaB6F0KwbFnUQN3KCiG3Jcuad/Cao2FAs1Wp7vAyg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "8.51.0",
-        "@typescript-eslint/types": "8.51.0",
-        "@typescript-eslint/typescript-estree": "8.51.0",
-        "@typescript-eslint/visitor-keys": "8.51.0",
-        "debug": "^4.3.4"
+        "@typescript-eslint/scope-manager": "8.52.0",
+        "@typescript-eslint/types": "8.52.0",
+        "@typescript-eslint/typescript-estree": "8.52.0",
+        "@typescript-eslint/visitor-keys": "8.52.0",
+        "debug": "^4.4.3"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3280,15 +3338,15 @@
       }
     },
     "node_modules/@typescript-eslint/project-service": {
-      "version": "8.51.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.51.0.tgz",
-      "integrity": "sha512-Luv/GafO07Z7HpiI7qeEW5NW8HUtZI/fo/kE0YbtQEFpJRUuR0ajcWfCE5bnMvL7QQFrmT/odMe8QZww8X2nfQ==",
+      "version": "8.52.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.52.0.tgz",
+      "integrity": "sha512-xD0MfdSdEmeFa3OmVqonHi+Cciab96ls1UhIF/qX/O/gPu5KXD0bY9lu33jj04fjzrXHcuvjBcBC+D3SNSadaw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/tsconfig-utils": "^8.51.0",
-        "@typescript-eslint/types": "^8.51.0",
-        "debug": "^4.3.4"
+        "@typescript-eslint/tsconfig-utils": "^8.52.0",
+        "@typescript-eslint/types": "^8.52.0",
+        "debug": "^4.4.3"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3302,14 +3360,14 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "8.51.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.51.0.tgz",
-      "integrity": "sha512-JhhJDVwsSx4hiOEQPeajGhCWgBMBwVkxC/Pet53EpBVs7zHHtayKefw1jtPaNRXpI9RA2uocdmpdfE7T+NrizA==",
+      "version": "8.52.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.52.0.tgz",
+      "integrity": "sha512-ixxqmmCcc1Nf8S0mS0TkJ/3LKcC8mruYJPOU6Ia2F/zUUR4pApW7LzrpU3JmtePbRUTes9bEqRc1Gg4iyRnDzA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.51.0",
-        "@typescript-eslint/visitor-keys": "8.51.0"
+        "@typescript-eslint/types": "8.52.0",
+        "@typescript-eslint/visitor-keys": "8.52.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3320,9 +3378,9 @@
       }
     },
     "node_modules/@typescript-eslint/tsconfig-utils": {
-      "version": "8.51.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.51.0.tgz",
-      "integrity": "sha512-Qi5bSy/vuHeWyir2C8u/uqGMIlIDu8fuiYWv48ZGlZ/k+PRPHtaAu7erpc7p5bzw2WNNSniuxoMSO4Ar6V9OXw==",
+      "version": "8.52.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.52.0.tgz",
+      "integrity": "sha512-jl+8fzr/SdzdxWJznq5nvoI7qn2tNYV/ZBAEcaFMVXf+K6jmXvAFrgo/+5rxgnL152f//pDEAYAhhBAZGrVfwg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3337,17 +3395,17 @@
       }
     },
     "node_modules/@typescript-eslint/type-utils": {
-      "version": "8.51.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.51.0.tgz",
-      "integrity": "sha512-0XVtYzxnobc9K0VU7wRWg1yiUrw4oQzexCG2V2IDxxCxhqBMSMbjB+6o91A+Uc0GWtgjCa3Y8bi7hwI0Tu4n5Q==",
+      "version": "8.52.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.52.0.tgz",
+      "integrity": "sha512-JD3wKBRWglYRQkAtsyGz1AewDu3mTc7NtRjR/ceTyGoPqmdS5oCdx/oZMWD5Zuqmo6/MpsYs0wp6axNt88/2EQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.51.0",
-        "@typescript-eslint/typescript-estree": "8.51.0",
-        "@typescript-eslint/utils": "8.51.0",
-        "debug": "^4.3.4",
-        "ts-api-utils": "^2.2.0"
+        "@typescript-eslint/types": "8.52.0",
+        "@typescript-eslint/typescript-estree": "8.52.0",
+        "@typescript-eslint/utils": "8.52.0",
+        "debug": "^4.4.3",
+        "ts-api-utils": "^2.4.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3362,9 +3420,9 @@
       }
     },
     "node_modules/@typescript-eslint/types": {
-      "version": "8.51.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.51.0.tgz",
-      "integrity": "sha512-TizAvWYFM6sSscmEakjY3sPqGwxZRSywSsPEiuZF6d5GmGD9Gvlsv0f6N8FvAAA0CD06l3rIcWNbsN1e5F/9Ag==",
+      "version": "8.52.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.52.0.tgz",
+      "integrity": "sha512-LWQV1V4q9V4cT4H5JCIx3481iIFxH1UkVk+ZkGGAV1ZGcjGI9IoFOfg3O6ywz8QqCDEp7Inlg6kovMofsNRaGg==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -3376,21 +3434,21 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "8.51.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.51.0.tgz",
-      "integrity": "sha512-1qNjGqFRmlq0VW5iVlcyHBbCjPB7y6SxpBkrbhNWMy/65ZoncXCEPJxkRZL8McrseNH6lFhaxCIaX+vBuFnRng==",
+      "version": "8.52.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.52.0.tgz",
+      "integrity": "sha512-XP3LClsCc0FsTK5/frGjolyADTh3QmsLp6nKd476xNI9CsSsLnmn4f0jrzNoAulmxlmNIpeXuHYeEQv61Q6qeQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/project-service": "8.51.0",
-        "@typescript-eslint/tsconfig-utils": "8.51.0",
-        "@typescript-eslint/types": "8.51.0",
-        "@typescript-eslint/visitor-keys": "8.51.0",
-        "debug": "^4.3.4",
-        "minimatch": "^9.0.4",
-        "semver": "^7.6.0",
+        "@typescript-eslint/project-service": "8.52.0",
+        "@typescript-eslint/tsconfig-utils": "8.52.0",
+        "@typescript-eslint/types": "8.52.0",
+        "@typescript-eslint/visitor-keys": "8.52.0",
+        "debug": "^4.4.3",
+        "minimatch": "^9.0.5",
+        "semver": "^7.7.3",
         "tinyglobby": "^0.2.15",
-        "ts-api-utils": "^2.2.0"
+        "ts-api-utils": "^2.4.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3430,16 +3488,16 @@
       }
     },
     "node_modules/@typescript-eslint/utils": {
-      "version": "8.51.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.51.0.tgz",
-      "integrity": "sha512-11rZYxSe0zabiKaCP2QAwRf/dnmgFgvTmeDTtZvUvXG3UuAdg/GU02NExmmIXzz3vLGgMdtrIosI84jITQOxUA==",
+      "version": "8.52.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.52.0.tgz",
+      "integrity": "sha512-wYndVMWkweqHpEpwPhwqE2lnD2DxC6WVLupU/DOt/0/v+/+iQbbzO3jOHjmBMnhu0DgLULvOaU4h4pwHYi2oRQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@eslint-community/eslint-utils": "^4.7.0",
-        "@typescript-eslint/scope-manager": "8.51.0",
-        "@typescript-eslint/types": "8.51.0",
-        "@typescript-eslint/typescript-estree": "8.51.0"
+        "@eslint-community/eslint-utils": "^4.9.1",
+        "@typescript-eslint/scope-manager": "8.52.0",
+        "@typescript-eslint/types": "8.52.0",
+        "@typescript-eslint/typescript-estree": "8.52.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3454,13 +3512,13 @@
       }
     },
     "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "8.51.0",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.51.0.tgz",
-      "integrity": "sha512-mM/JRQOzhVN1ykejrvwnBRV3+7yTKK8tVANVN3o1O0t0v7o+jqdVu9crPy5Y9dov15TJk/FTIgoUGHrTOVL3Zg==",
+      "version": "8.52.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.52.0.tgz",
+      "integrity": "sha512-ink3/Zofus34nmBsPjow63FP5M7IGff0RKAgqR6+CFpdk22M7aLwC9gOcLGYqr7MczLPzZVERW9hRog3O4n1sQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/types": "8.51.0",
+        "@typescript-eslint/types": "8.52.0",
         "eslint-visitor-keys": "^4.2.1"
       },
       "engines": {
@@ -3630,9 +3688,9 @@
       "license": "MIT"
     },
     "node_modules/baseline-browser-mapping": {
-      "version": "2.9.11",
-      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.11.tgz",
-      "integrity": "sha512-Sg0xJUNDU1sJNGdfGWhVHX0kkZ+HWcvmVymJbj6NSgZZmW/8S9Y2HQ5euytnIgakgxN6papOAWiwDo1ctFDcoQ==",
+      "version": "2.9.12",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.12.tgz",
+      "integrity": "sha512-Mij6Lij93pTAIsSYy5cyBQ975Qh9uLEc5rwGTpomiZeXZL9yIS6uORJakb3ScHgfs0serMMfIbXzokPMuEiRyw==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -3728,9 +3786,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001762",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001762.tgz",
-      "integrity": "sha512-PxZwGNvH7Ak8WX5iXzoK1KPZttBXNPuaOvI2ZYU7NrlM+d9Ov+TUvlLOBNGzVXAntMSMMlJPd+jY6ovrVjSmUw==",
+      "version": "1.0.30001763",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001763.tgz",
+      "integrity": "sha512-mh/dGtq56uN98LlNX9qdbKnzINhX0QzhiWBFEkFfsFO4QyCvL8YegrJAazCwXIeqkIob8BlZPGM3xdnY+sgmvQ==",
       "dev": true,
       "funding": [
         {
@@ -4380,6 +4438,15 @@
       "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==",
       "license": "MIT"
     },
+    "node_modules/eventsource": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
+      "integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/fancy-canvas": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/fancy-canvas/-/fancy-canvas-2.1.0.tgz",
@@ -4453,6 +4520,18 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/faye-websocket": {
+      "version": "0.11.4",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
+      "integrity": "sha512-CzbClwlXAuiRQAlUyfqPgvPoNKTckTPGfwZV4ZdAhVcP2lh9KUxJg2b5GkE7XbjKQ3YJnQ9z6D9ntLAlB+tP8g==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "websocket-driver": ">=0.5.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -4609,6 +4688,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/http-parser-js": {
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.10.tgz",
+      "integrity": "sha512-Pysuw9XpUq5dVc/2SMHpuTY01RFl8fttgcyunjL7eEMhGM3cI4eOmiCycJDVCo/7O7ClfQD3SaI6ftDzqOXYMA==",
+      "license": "MIT"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -4646,6 +4731,12 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/inherits": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
+      "license": "ISC"
+    },
     "node_modules/input-otp": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/input-otp/-/input-otp-1.4.2.tgz",
@@ -4932,7 +5023,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/mz": {
@@ -5347,6 +5437,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==",
+      "license": "MIT"
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -5407,9 +5503,9 @@
       }
     },
     "node_modules/react-hook-form": {
-      "version": "7.69.0",
-      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.69.0.tgz",
-      "integrity": "sha512-yt6ZGME9f4F6WHwevrvpAjh42HMvocuSnSIHUGycBqXIJdhqGSPQzTpGF+1NLREk/58IdPxEMfPcFCjlMhclGw==",
+      "version": "7.70.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.70.0.tgz",
+      "integrity": "sha512-COOMajS4FI3Wuwrs3GPpi/Jeef/5W1DRR84Yl5/ShlT3dKVFUfoGiEZ/QE6Uw8P4T2/CLJdcTVYKvWBMQTEpvw==",
       "license": "MIT",
       "engines": {
         "node": ">=18.0.0"
@@ -5486,12 +5582,12 @@
       }
     },
     "node_modules/react-router": {
-      "version": "6.30.2",
-      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.2.tgz",
-      "integrity": "sha512-H2Bm38Zu1bm8KUE5NVWRMzuIyAV8p/JrOaBJAwVmp37AXG72+CZJlEBw6pdn9i5TBgLMhNDgijS4ZlblpHyWTA==",
+      "version": "6.30.3",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.30.3.tgz",
+      "integrity": "sha512-XRnlbKMTmktBkjCLE8/XcZFlnHvr2Ltdr1eJX4idL55/9BbORzyZEaIkBFDhFGCEWBBItsVrDxwx3gnisMitdw==",
       "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.23.1"
+        "@remix-run/router": "1.23.2"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -5501,13 +5597,13 @@
       }
     },
     "node_modules/react-router-dom": {
-      "version": "6.30.2",
-      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.2.tgz",
-      "integrity": "sha512-l2OwHn3UUnEVUqc6/1VMmR1cvZryZ3j3NzapC2eUXO1dB0sYp5mvwdjiXhpUbRb21eFow3qSxpP8Yv6oAU824Q==",
+      "version": "6.30.3",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.30.3.tgz",
+      "integrity": "sha512-pxPcv1AczD4vso7G4Z3TKcvlxK7g7TNt3/FNGMhfqyntocvYKj+GCatfigGDjbLozC4baguJ0ReCigoDJXb0ag==",
       "license": "MIT",
       "dependencies": {
-        "@remix-run/router": "1.23.1",
-        "react-router": "6.30.2"
+        "@remix-run/router": "1.23.2",
+        "react-router": "6.30.3"
       },
       "engines": {
         "node": ">=14.0.0"
@@ -5623,6 +5719,12 @@
         "decimal.js-light": "^2.4.1"
       }
     },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -5664,9 +5766,9 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.54.0",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.54.0.tgz",
-      "integrity": "sha512-3nk8Y3a9Ea8szgKhinMlGMhGMw89mqule3KWczxhIzqudyHdCIOHw8WJlj/r329fACjKLEh13ZSk7oE22kyeIw==",
+      "version": "4.55.1",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.55.1.tgz",
+      "integrity": "sha512-wDv/Ht1BNHB4upNbK74s9usvl7hObDnvVzknxqY/E/O3X6rW1U1rV1aENEfJ54eFZDTNo7zv1f5N4edCluH7+A==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -5680,28 +5782,31 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.54.0",
-        "@rollup/rollup-android-arm64": "4.54.0",
-        "@rollup/rollup-darwin-arm64": "4.54.0",
-        "@rollup/rollup-darwin-x64": "4.54.0",
-        "@rollup/rollup-freebsd-arm64": "4.54.0",
-        "@rollup/rollup-freebsd-x64": "4.54.0",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.54.0",
-        "@rollup/rollup-linux-arm-musleabihf": "4.54.0",
-        "@rollup/rollup-linux-arm64-gnu": "4.54.0",
-        "@rollup/rollup-linux-arm64-musl": "4.54.0",
-        "@rollup/rollup-linux-loong64-gnu": "4.54.0",
-        "@rollup/rollup-linux-ppc64-gnu": "4.54.0",
-        "@rollup/rollup-linux-riscv64-gnu": "4.54.0",
-        "@rollup/rollup-linux-riscv64-musl": "4.54.0",
-        "@rollup/rollup-linux-s390x-gnu": "4.54.0",
-        "@rollup/rollup-linux-x64-gnu": "4.54.0",
-        "@rollup/rollup-linux-x64-musl": "4.54.0",
-        "@rollup/rollup-openharmony-arm64": "4.54.0",
-        "@rollup/rollup-win32-arm64-msvc": "4.54.0",
-        "@rollup/rollup-win32-ia32-msvc": "4.54.0",
-        "@rollup/rollup-win32-x64-gnu": "4.54.0",
-        "@rollup/rollup-win32-x64-msvc": "4.54.0",
+        "@rollup/rollup-android-arm-eabi": "4.55.1",
+        "@rollup/rollup-android-arm64": "4.55.1",
+        "@rollup/rollup-darwin-arm64": "4.55.1",
+        "@rollup/rollup-darwin-x64": "4.55.1",
+        "@rollup/rollup-freebsd-arm64": "4.55.1",
+        "@rollup/rollup-freebsd-x64": "4.55.1",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.55.1",
+        "@rollup/rollup-linux-arm-musleabihf": "4.55.1",
+        "@rollup/rollup-linux-arm64-gnu": "4.55.1",
+        "@rollup/rollup-linux-arm64-musl": "4.55.1",
+        "@rollup/rollup-linux-loong64-gnu": "4.55.1",
+        "@rollup/rollup-linux-loong64-musl": "4.55.1",
+        "@rollup/rollup-linux-ppc64-gnu": "4.55.1",
+        "@rollup/rollup-linux-ppc64-musl": "4.55.1",
+        "@rollup/rollup-linux-riscv64-gnu": "4.55.1",
+        "@rollup/rollup-linux-riscv64-musl": "4.55.1",
+        "@rollup/rollup-linux-s390x-gnu": "4.55.1",
+        "@rollup/rollup-linux-x64-gnu": "4.55.1",
+        "@rollup/rollup-linux-x64-musl": "4.55.1",
+        "@rollup/rollup-openbsd-x64": "4.55.1",
+        "@rollup/rollup-openharmony-arm64": "4.55.1",
+        "@rollup/rollup-win32-arm64-msvc": "4.55.1",
+        "@rollup/rollup-win32-ia32-msvc": "4.55.1",
+        "@rollup/rollup-win32-x64-gnu": "4.55.1",
+        "@rollup/rollup-win32-x64-msvc": "4.55.1",
         "fsevents": "~2.3.2"
       }
     },
@@ -5728,6 +5833,26 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/safe-buffer": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/scheduler": {
       "version": "0.23.2",
       "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
@@ -5773,6 +5898,34 @@
         "node": ">=8"
       }
     },
+    "node_modules/sockjs-client": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.6.1.tgz",
+      "integrity": "sha512-2g0tjOR+fRs0amxENLi/q5TiJTqY+WXFOzb5UwXndlK6TO3U/mirZznpx6w34HVMoc3g7cY24yC/ZMIYnDlfkw==",
+      "license": "MIT",
+      "dependencies": {
+        "debug": "^3.2.7",
+        "eventsource": "^2.0.2",
+        "faye-websocket": "^0.11.4",
+        "inherits": "^2.0.4",
+        "url-parse": "^1.5.10"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://tidelift.com/funding/github/npm/sockjs-client"
+      }
+    },
+    "node_modules/sockjs-client/node_modules/debug": {
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+      "license": "MIT",
+      "dependencies": {
+        "ms": "^2.1.1"
+      }
+    },
     "node_modules/sonner": {
       "version": "1.7.4",
       "resolved": "https://registry.npmjs.org/sonner/-/sonner-1.7.4.tgz",
@@ -6006,9 +6159,9 @@
       }
     },
     "node_modules/ts-api-utils": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.3.0.tgz",
-      "integrity": "sha512-6eg3Y9SF7SsAvGzRHQvvc1skDAhwI4YQ32ui1scxD1Ccr0G5qIIbUBT3pFTKX8kmWIQClHobtUdNuaBgwdfdWg==",
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.4.0.tgz",
+      "integrity": "sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -6058,16 +6211,16 @@
       }
     },
     "node_modules/typescript-eslint": {
-      "version": "8.51.0",
-      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.51.0.tgz",
-      "integrity": "sha512-jh8ZuM5oEh2PSdyQG9YAEM1TCGuWenLSuSUhf/irbVUNW9O5FhbFVONviN2TgMTBnUmyHv7E56rYnfLZK6TkiA==",
+      "version": "8.52.0",
+      "resolved": "https://registry.npmjs.org/typescript-eslint/-/typescript-eslint-8.52.0.tgz",
+      "integrity": "sha512-atlQQJ2YkO4pfTVQmQ+wvYQwexPDOIgo+RaVcD7gHgzy/IQA+XTyuxNM9M9TVXvttkF7koBHmcwisKdOAf2EcA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/eslint-plugin": "8.51.0",
-        "@typescript-eslint/parser": "8.51.0",
-        "@typescript-eslint/typescript-estree": "8.51.0",
-        "@typescript-eslint/utils": "8.51.0"
+        "@typescript-eslint/eslint-plugin": "8.52.0",
+        "@typescript-eslint/parser": "8.52.0",
+        "@typescript-eslint/typescript-estree": "8.52.0",
+        "@typescript-eslint/utils": "8.52.0"
       },
       "engines": {
         "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -6129,6 +6282,16 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url-parse": {
+      "version": "1.5.10",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.10.tgz",
+      "integrity": "sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==",
+      "license": "MIT",
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
     "node_modules/use-callback-ref": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
@@ -6223,9 +6386,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "7.3.0",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.0.tgz",
-      "integrity": "sha512-dZwN5L1VlUBewiP6H9s2+B3e3Jg96D0vzN+Ry73sOefebhYr9f94wwkMNN/9ouoU8pV1BqA1d1zGk8928cx0rg==",
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",
+      "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6812,6 +6975,29 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/websocket-driver": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
+      "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "http-parser-js": ">=0.5.1",
+        "safe-buffer": ">=5.1.0",
+        "websocket-extensions": ">=0.1.1"
+      },
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
+    "node_modules/websocket-extensions": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.4.tgz",
+      "integrity": "sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/package.json b/package.json
index 195a18a..3db030c 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
     "@radix-ui/react-toggle": "^1.1.9",
     "@radix-ui/react-toggle-group": "^1.1.10",
     "@radix-ui/react-tooltip": "^1.2.7",
+    "@stomp/stompjs": "^7.2.1",
     "@tanstack/react-query": "^5.83.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -56,6 +57,7 @@
     "react-resizable-panels": "^2.1.9",
     "react-router-dom": "^6.30.1",
     "recharts": "^2.15.4",
+    "sockjs-client": "^1.6.1",
     "sonner": "^1.7.4",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
@@ -68,6 +70,7 @@
     "@types/node": "^22.16.5",
     "@types/react": "^18.3.23",
     "@types/react-dom": "^18.3.7",
+    "@types/sockjs-client": "^1.5.4",
     "@vitejs/plugin-react-swc": "^3.11.0",
     "autoprefixer": "^10.4.21",
     "eslint": "^9.32.0",
diff --git a/src/components/StockChart.tsx b/src/components/StockChart.tsx
index 2325d6d..07538a5 100644
--- a/src/components/StockChart.tsx
+++ b/src/components/StockChart.tsx
@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import { createChart, ColorType, IChartApi, UTCTimestamp } from "lightweight-charts";
 import { cn } from "@/lib/utils";
 import { chartService } from "@/services/chartService";
+import { websocketService, StockExecutionData, StockAskBidData } from "@/services/websocketService";
 import { ChartData } from "@/types/chart";
 
 interface StockChartProps {
@@ -54,6 +55,7 @@ const StockChart = ({ stockCode, basePrice, change }: StockChartProps) => {
   const [chartData, setChartData] = useState<ChartData[]>([]);
   const [loading, setLoading] = useState(false);
   const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [shortCode, setShortCode] = useState<string | null>(null);
   const chartContainerRef = useRef<HTMLDivElement>(null);
   const chartInstanceRef = useRef<IChartApi | null>(null);
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -63,6 +65,8 @@ const StockChart = ({ stockCode, basePrice, change }: StockChartProps) => {
   const isLoadingRef = useRef(false);
   const shouldLoadMoreRef = useRef(false);
   const isInitialLoadRef = useRef(true); // 초기 로드 여부 추적
+  const lastUpdateTimeRef = useRef<string | null>(null); // 마지막 실시간 업데이트 시간
+  const realtimeCandleRef = useRef<Map<string, ChartData>>(new Map()); // 실시간 캔들 데이터 저장
 
   const isPositive = change >= 0;
   const selectedOption = periodGroups[selectedGroupIndex].options[selectedOptionIndex];
@@ -148,6 +152,9 @@ const StockChart = ({ stockCode, basePrice, change }: StockChartProps) => {
 
       setChartData(response.candles);
       nextDateTimeRef.current = response.nextDateTime;
+
+      // stockCode가 실제로는 shortCode이므로 WebSocket 구독에 사용
+      setShortCode(response.stockCode);
     } catch (error) {
       console.error("Failed to fetch chart data:", error);
       setChartData([]);
@@ -158,6 +165,9 @@ const StockChart = ({ stockCode, basePrice, change }: StockChartProps) => {
   };
 
   useEffect(() => {
+    // 차트 변경 시 실시간 캔들 데이터 초기화
+    realtimeCandleRef.current.clear();
+    lastUpdateTimeRef.current = null;
     loadInitialData();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [stockCode, selectedGroupIndex, selectedOptionIndex]);
@@ -258,15 +268,15 @@ const StockChart = ({ stockCode, basePrice, change }: StockChartProps) => {
       // 최대 줌 아웃 제한 (interval별로 다르게 설정)
       let maxVisibleBars: number;
       if (selectedOption.interval.startsWith('min:')) {
-        maxVisibleBars = 200; // 분봉: 최대 200개 캔들
+        maxVisibleBars = 300; // 분봉: 최대 300개 캔들
       } else if (selectedOption.interval.startsWith('day:')) {
         maxVisibleBars = 180; // 일봉: 최대 180개 캔들 (약 6개월)
       } else if (selectedOption.interval.startsWith('week:')) {
         maxVisibleBars = 104; // 주봉: 최대 104개 캔들 (약 2년)
       } else if (selectedOption.interval.startsWith('month:')) {
-        maxVisibleBars = 60; // 월봉: 최대 60개 캔들 (약 5년)
+        maxVisibleBars = 110; // 월봉: 최대 110개 캔들 (약 9년)
       } else {
-        maxVisibleBars = 20; // 년봉: 최대 20개 캔들
+        maxVisibleBars = 30; // 년봉: 최대 30개 캔들
       }
 
       if (rangeSize > maxVisibleBars) {
@@ -477,6 +487,200 @@ const StockChart = ({ stockCode, basePrice, change }: StockChartProps) => {
     }
   }, [chartData, selectedOption.interval, chartType]);
 
+  // WebSocket 구독 관리 (모든 차트 타입에서 실시간 데이터 구독)
+  useEffect(() => {
+    // shortCode가 없으면 구독하지 않음
+    if (!shortCode) {
+      return;
+    }
+
+    console.log('[StockChart] Subscribing to WebSocket for:', shortCode);
+
+    // 선택된 차트 간격 파싱
+    const [intervalType, intervalValueStr] = selectedOption.interval.split(':');
+    const intervalValue = parseInt(intervalValueStr);
+
+    // WebSocket 구독
+    websocketService.subscribe(
+      shortCode,
+      // onAskBid - 호가 데이터 (차트에는 사용하지 않음)
+      (askBidData: StockAskBidData) => {
+        console.log('[StockChart] AskBid data received:', askBidData);
+        // 호가 데이터는 차트에 반영하지 않음
+      },
+      // onExecution - 체결 데이터 (차트에 반영)
+      (executionData: StockExecutionData) => {
+        console.log('[StockChart] Execution data received:', executionData);
+
+        // businessDate(YYYYMMDD)와 executionTime(HHmmss)을 결합
+        const parseExecutionDateTime = (businessDate: string, executionTime: string): string => {
+          if (businessDate.length === 8 && executionTime.length === 6) {
+            const year = businessDate.substring(0, 4);
+            const month = businessDate.substring(4, 6);
+            const day = businessDate.substring(6, 8);
+            const hour = executionTime.substring(0, 2);
+            const minute = executionTime.substring(2, 4);
+            const second = executionTime.substring(4, 6);
+
+            return `${year}-${month}-${day}T${hour}:${minute}:${second}`;
+          }
+
+          // 파싱 실패 시 현재 KST 시간 반환
+          const kstNow = new Date(Date.now() + 9 * 60 * 60 * 1000);
+          return kstNow.toISOString().slice(0, 19);
+        };
+
+        const executionDateTime = parseExecutionDateTime(executionData.businessDate, executionData.executionTime);
+        console.log('[StockChart] Parsed execution dateTime:', executionDateTime);
+
+        // 차트 간격에 맞춰 시간을 정규화
+        const normalizeDateTime = (dateTimeStr: string, type: string, value: number): string => {
+          const date = new Date(dateTimeStr);
+
+          switch (type) {
+            case 'min': {
+              // 분봉: 분 단위로 정규화
+              const minutes = date.getMinutes();
+              const normalizedMinutes = Math.floor(minutes / value) * value;
+              date.setMinutes(normalizedMinutes);
+              date.setSeconds(0);
+              break;
+            }
+            case 'day': {
+              // 일봉: 날짜 단위로 정규화 (시간/분/초 = 0)
+              date.setHours(0, 0, 0, 0);
+              break;
+            }
+            case 'week': {
+              // 주봉: 주의 시작일(월요일)로 정규화
+              const dayOfWeek = date.getDay();
+              const diff = dayOfWeek === 0 ? 6 : dayOfWeek - 1; // 일요일이면 6일 전, 아니면 요일-1
+              date.setDate(date.getDate() - diff);
+              date.setHours(0, 0, 0, 0);
+              break;
+            }
+            case 'month': {
+              // 월봉: 월의 1일로 정규화
+              date.setDate(1);
+              date.setHours(0, 0, 0, 0);
+              break;
+            }
+            case 'year': {
+              // 년봉: 연도의 1월 1일로 정규화
+              date.setMonth(0, 1);
+              date.setHours(0, 0, 0, 0);
+              break;
+            }
+          }
+
+          const year = date.getFullYear();
+          const month = String(date.getMonth() + 1).padStart(2, '0');
+          const day = String(date.getDate()).padStart(2, '0');
+          const hour = String(date.getHours()).padStart(2, '0');
+          const minute = String(date.getMinutes()).padStart(2, '0');
+          const second = String(date.getSeconds()).padStart(2, '0');
+
+          return `${year}-${month}-${day}T${hour}:${minute}:${second}`;
+        };
+
+        const normalizedDateTime = normalizeDateTime(executionDateTime, intervalType, intervalValue);
+
+        if (!seriesRef.current) return;
+
+        const currentPrice = parseFloat(executionData.currentPrice);
+        const volume = parseInt(executionData.executionVolume);
+        const accumulatedAmount = parseFloat(executionData.accumulatedTradeAmount);
+
+        // timestamp로 변환
+        const parseKSTtoTimestamp = (dateTimeStr: string): UTCTimestamp => {
+          const [datePart, timePart] = dateTimeStr.split('T');
+          const [year, month, day] = datePart.split('-').map(Number);
+          const [hour, minute, second] = timePart.split(':').map(Number);
+          const timestamp = Date.UTC(year, month - 1, day, hour, minute, second);
+          return Math.floor(timestamp / 1000) as UTCTimestamp;
+        };
+
+        const timestamp = parseKSTtoTimestamp(normalizedDateTime);
+
+        // chartData에서 기존 캔들 찾기
+        const existingIndex = chartData.findIndex((item) => item.dateTime === normalizedDateTime);
+
+        let realtimeCandle: ChartData;
+        let updatedChartData: ChartData[];
+
+        if (existingIndex >= 0) {
+          // chartData에 이미 존재하는 캔들 업데이트
+          const existingCandle = chartData[existingIndex];
+          realtimeCandle = {
+            ...existingCandle,
+            high: Math.max(existingCandle.high, currentPrice),
+            low: Math.min(existingCandle.low, currentPrice),
+            close: currentPrice,
+            volume: existingCandle.volume + volume,
+            accumulatedAmount: accumulatedAmount,
+          };
+
+          // chartData 업데이트 (불변성 유지)
+          updatedChartData = [...chartData];
+          updatedChartData[existingIndex] = realtimeCandle;
+          setChartData(updatedChartData);
+        } else {
+          // 새로운 캔들 생성
+          realtimeCandle = {
+            dateTime: normalizedDateTime,
+            base: basePrice,
+            open: currentPrice,
+            high: currentPrice,
+            low: currentPrice,
+            close: currentPrice,
+            volume: volume,
+            accumulatedAmount: accumulatedAmount,
+          };
+
+          // chartData에 추가 (불변성 유지)
+          updatedChartData = [...chartData, realtimeCandle];
+          updatedChartData.sort((a, b) => new Date(a.dateTime).getTime() - new Date(b.dateTime).getTime());
+          setChartData(updatedChartData);
+        }
+
+        // 실시간 캔들 저장
+        realtimeCandleRef.current.set(normalizedDateTime, realtimeCandle);
+
+        // 차트에 직접 update (setData가 아닌 update 사용)
+        if (chartType === 'candlestick') {
+          seriesRef.current.update({
+            time: timestamp,
+            open: realtimeCandle.open,
+            high: realtimeCandle.high,
+            low: realtimeCandle.low,
+            close: realtimeCandle.close,
+          });
+        } else {
+          seriesRef.current.update({
+            time: timestamp,
+            value: realtimeCandle.close,
+          });
+        }
+
+        lastUpdateTimeRef.current = normalizedDateTime;
+      },
+      // onReply
+      (response) => {
+        console.log('[StockChart] Subscription response:', response);
+      },
+      // onError
+      (error) => {
+        console.error('[StockChart] WebSocket error:', error);
+      }
+    );
+
+    // 컴포넌트 언마운트 또는 stockCode 변경 시 구독 해제
+    return () => {
+      console.log('[StockChart] Unsubscribing from WebSocket for:', shortCode);
+      websocketService.unsubscribe(shortCode);
+    };
+  }, [shortCode, selectedOption.interval, basePrice, chartType, chartData]);
+
   const handleGroupChange = (groupIndex: number) => {
     setSelectedGroupIndex(groupIndex);
     setSelectedOptionIndex(0);
diff --git a/src/pages/StockDetail.tsx b/src/pages/StockDetail.tsx
index 734bcaf..6fd308b 100644
--- a/src/pages/StockDetail.tsx
+++ b/src/pages/StockDetail.tsx
@@ -106,9 +106,11 @@ const StockDetail = () => {
           </div>
 
           {/* Chart */}
-          <div className="mb-6">
-            <StockChart basePrice={stock.price} change={stock.change} />
-          </div>
+          {code && (
+            <div className="mb-6">
+              <StockChart stockCode={code} basePrice={stock.price} change={stock.change} />
+            </div>
+          )}
 
           {/* Info Grid */}
           <div className="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
diff --git a/src/services/chartService.ts b/src/services/chartService.ts
index 046aa66..fb3e8e5 100644
--- a/src/services/chartService.ts
+++ b/src/services/chartService.ts
@@ -1,6 +1,6 @@
 import { ChartResponse, ApiResponse } from "@/types/chart";
 
-const API_BASE_URL = import.meta.env.LOCAL_API_BASE_URL || "http://localhost:8080";
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || "http://localhost:8080";
 
 export interface GetChartParams {
   stockCode: string;
diff --git a/src/services/websocketService.ts b/src/services/websocketService.ts
new file mode 100644
index 0000000..c7935da
--- /dev/null
+++ b/src/services/websocketService.ts
@@ -0,0 +1,406 @@
+import { Client, IMessage, StompSubscription } from '@stomp/stompjs';
+import SockJS from 'sockjs-client';
+
+const WS_BASE_URL = import.meta.env.VITE_API_BASE_URL || "http://localhost:8080";
+const WS_ENDPOINT = "/stock";
+
+export interface WebSocketSubscriptionResponse {
+  status: string;
+  message: string;
+  stockCode: string;
+  dataEndpoint?: string;
+}
+
+export interface RealtimeStockData {
+  dateTime: string;
+  base: number;
+  open: number;
+  high: number;
+  low: number;
+  close: number;
+  volume: number;
+  accumulatedAmount: number;
+}
+
+export interface PriceLevel {
+  price: string;
+  volume: string;
+}
+
+export interface ExpectedTrade {
+  price: string;
+  volume: string;
+  totalVolume: string;
+  priceChange: string;
+  priceSign: string;
+  priceChangeRate: string;
+}
+
+export interface StockAskBidData {
+  stockCode: string;
+  businessTime: string;
+  timeCode: string;
+  askPrices: PriceLevel[];
+  bidPrices: PriceLevel[];
+  totalAskVolume: string;
+  totalAskVolumeChange: string;
+  totalBidVolume: string;
+  totalBidVolumeChange: string;
+  afterHoursTotalAskVolume: string;
+  afterHoursTotalBidVolume: string;
+  afterHoursTotalAskVolumeChange: string;
+  afterHoursTotalBidVolumeChange: string;
+  expectedTrade: ExpectedTrade;
+  accumulatedVolume: string;
+  tradeTypeCode: string;
+}
+
+export interface StockExecutionData {
+  stockCode: string;
+  executionTime: string;
+  currentPrice: string;
+  priceChangeSign: string;
+  priceChange: string;
+  priceChangeRate: string;
+  weightedAveragePrice: string;
+  openPrice: string;
+  highPrice: string;
+  lowPrice: string;
+  askPrice1: string;
+  bidPrice1: string;
+  executionVolume: string;
+  accumulatedVolume: string;
+  accumulatedTradeAmount: string;
+  sellExecutionCount: string;
+  buyExecutionCount: string;
+  netBuyExecutionCount: string;
+  executionStrength: string;
+  totalSellVolume: string;
+  totalBuyVolume: string;
+  executionType: string;
+  buyRate: string;
+  volumeChangeRate: string;
+  openPriceTime: string;
+  openPriceChangeSign: string;
+  openPriceChange: string;
+  highPriceTime: string;
+  highPriceChangeSign: string;
+  highPriceChange: string;
+  lowPriceTime: string;
+  lowPriceChangeSign: string;
+  lowPriceChange: string;
+  businessDate: string;
+  marketOperationCode: string;
+  tradingHaltYn: string;
+  askVolume1: string;
+  bidVolume1: string;
+  totalAskVolume: string;
+  totalBidVolume: string;
+  volumeTurnoverRate: string;
+  previousDaySameTimeVolume: string;
+  previousDaySameTimeVolumeRate: string;
+  timeClassCode: string;
+  marketClosureTypeCode: string;
+  viStandardPrice: string;
+}
+
+type AskBidCallback = (data: StockAskBidData) => void;
+type ExecutionCallback = (data: StockExecutionData) => void;
+type ReplyCallback = (response: WebSocketSubscriptionResponse) => void;
+type ErrorCallback = (error: Error) => void;
+
+class WebSocketService {
+  private client: Client | null = null;
+  private subscriptions: Map<string, StompSubscription> = new Map();
+  private replySubscription: StompSubscription | null = null;
+  private connected = false;
+  private connectPromise: Promise<void> | null = null;
+  // 재연결을 위한 구독 정보 저장
+  private pendingSubscriptions: Map<string, {
+    onAskBid: AskBidCallback;
+    onExecution: ExecutionCallback;
+    onReply?: ReplyCallback;
+    onError?: ErrorCallback;
+  }> = new Map();
+
+  constructor() {
+    this.initializeClient();
+  }
+
+  private initializeClient() {
+    this.client = new Client({
+      webSocketFactory: () => new SockJS(`${WS_BASE_URL}${WS_ENDPOINT}`) as WebSocket,
+      debug: (str) => {
+        console.log('[STOMP Debug]:', str);
+      },
+      reconnectDelay: 5000,
+      heartbeatIncoming: 4000,
+      heartbeatOutgoing: 4000,
+      onConnect: () => {
+        console.log('[WebSocket] Connected');
+        this.connected = true;
+        this.setupReplySubscription();
+        this.restoreSubscriptions();
+      },
+      onDisconnect: () => {
+        console.log('[WebSocket] Disconnected');
+        this.connected = false;
+        // 구독 정보는 유지하고 subscription 객체만 정리
+        this.subscriptions.clear();
+        this.replySubscription = null;
+      },
+      onStompError: (frame) => {
+        console.error('[STOMP Error]:', frame.headers['message'], frame.body);
+      },
+    });
+  }
+
+  private setupReplySubscription() {
+    if (!this.client) return;
+
+    // 구독/구독 해제 응답을 받기 위한 개인 큐 구독
+    this.replySubscription = this.client.subscribe('/user/queue/reply', (message: IMessage) => {
+      try {
+        const response: WebSocketSubscriptionResponse = JSON.parse(message.body);
+        console.log('[WebSocket] Reply received:', response);
+      } catch (error) {
+        console.error('[WebSocket] Failed to parse reply:', error);
+      }
+    });
+  }
+
+  private restoreSubscriptions() {
+    console.log('[WebSocket] Restoring subscriptions...');
+
+    // pendingSubscriptions에 저장된 구독 정보로 재구독
+    this.pendingSubscriptions.forEach((callbacks, stockCode) => {
+      console.log(`[WebSocket] Restoring subscription for ${stockCode}`);
+      this.subscribe(
+        stockCode,
+        callbacks.onAskBid,
+        callbacks.onExecution,
+        callbacks.onReply,
+        callbacks.onError
+      ).catch(error => {
+        console.error(`[WebSocket] Failed to restore subscription for ${stockCode}:`, error);
+      });
+    });
+  }
+
+  async connect(): Promise<void> {
+    if (this.connected) {
+      return Promise.resolve();
+    }
+
+    if (this.connectPromise) {
+      return this.connectPromise;
+    }
+
+    this.connectPromise = new Promise((resolve, reject) => {
+      if (!this.client) {
+        reject(new Error('Client not initialized'));
+        return;
+      }
+
+      const timeoutId = setTimeout(() => {
+        reject(new Error('Connection timeout'));
+        this.connectPromise = null;
+      }, 10000);
+
+      this.client.onConnect = () => {
+        clearTimeout(timeoutId);
+        console.log('[WebSocket] Connected');
+        this.connected = true;
+        this.setupReplySubscription();
+        this.connectPromise = null;
+        resolve();
+      };
+
+      this.client.activate();
+    });
+
+    return this.connectPromise;
+  }
+
+  disconnect() {
+    if (this.client) {
+      // 모든 구독 해제
+      this.subscriptions.forEach((subscription) => {
+        subscription.unsubscribe();
+      });
+      this.subscriptions.clear();
+
+      if (this.replySubscription) {
+        this.replySubscription.unsubscribe();
+        this.replySubscription = null;
+      }
+
+      this.client.deactivate();
+      this.connected = false;
+      this.connectPromise = null;
+    }
+  }
+
+  async subscribe(
+    stockCode: string,
+    onAskBid: AskBidCallback,
+    onExecution: ExecutionCallback,
+    onReply?: ReplyCallback,
+    onError?: ErrorCallback
+  ): Promise<void> {
+    try {
+      await this.connect();
+
+      if (!this.client || !this.connected) {
+        throw new Error('WebSocket not connected');
+      }
+
+      // 이미 완전히 구독 중이면 무시 (두 채널 모두 구독되어 있어야 함)
+      const hasAskBid = this.subscriptions.has(`askbid-${stockCode}`);
+      const hasExecution = this.subscriptions.has(`execution-${stockCode}`);
+
+      if (hasAskBid && hasExecution) {
+        console.log(`[WebSocket] Already subscribed to ${stockCode}`);
+        return;
+      }
+
+      // 부분 구독 상태면 정리
+      if (hasAskBid && !hasExecution) {
+        console.warn(`[WebSocket] Partial subscription detected for ${stockCode}, cleaning up askbid`);
+        const askBidSub = this.subscriptions.get(`askbid-${stockCode}`);
+        askBidSub?.unsubscribe();
+        this.subscriptions.delete(`askbid-${stockCode}`);
+      }
+      if (hasExecution && !hasAskBid) {
+        console.warn(`[WebSocket] Partial subscription detected for ${stockCode}, cleaning up execution`);
+        const executionSub = this.subscriptions.get(`execution-${stockCode}`);
+        executionSub?.unsubscribe();
+        this.subscriptions.delete(`execution-${stockCode}`);
+      }
+
+      // 1. /topic/stock/askbid/{shortCode} 구독
+      const askBidSubscription = this.client.subscribe(
+        `/topic/stock/askbid/${stockCode}`,
+        (message: IMessage) => {
+          try {
+            const data: StockAskBidData = JSON.parse(message.body);
+            console.log(`[WebSocket] AskBid data received for ${stockCode}:`, data);
+            onAskBid(data);
+          } catch (error) {
+            console.error('[WebSocket] Failed to parse askbid message:', error);
+            if (onError) {
+              onError(error as Error);
+            }
+          }
+        }
+      );
+      this.subscriptions.set(`askbid-${stockCode}`, askBidSubscription);
+      console.log(`[WebSocket] Subscribed to /topic/stock/askbid/${stockCode}`);
+
+      // 2. /topic/stock/execution/{shortCode} 구독
+      const executionSubscription = this.client.subscribe(
+        `/topic/stock/execution/${stockCode}`,
+        (message: IMessage) => {
+          try {
+            const data: StockExecutionData = JSON.parse(message.body);
+            console.log(`[WebSocket] Execution data received for ${stockCode}:`, data);
+            onExecution(data);
+          } catch (error) {
+            console.error('[WebSocket] Failed to parse execution message:', error);
+            if (onError) {
+              onError(error as Error);
+            }
+          }
+        }
+      );
+      this.subscriptions.set(`execution-${stockCode}`, executionSubscription);
+      console.log(`[WebSocket] Subscribed to /topic/stock/execution/${stockCode}`);
+
+      // 3. 구독 요청 전송 to /app/stock/subscribe
+      this.client.publish({
+        destination: '/app/stock/subscribe',
+        body: JSON.stringify({ stockCode }),
+      });
+
+      console.log(`[WebSocket] Subscription request sent for ${stockCode}`);
+
+      // 재연결을 위해 구독 정보 저장
+      this.pendingSubscriptions.set(stockCode, {
+        onAskBid,
+        onExecution,
+        onReply,
+        onError,
+      });
+
+      if (onReply) {
+        onReply({
+          status: 'success',
+          message: 'subscribed',
+          stockCode,
+        });
+      }
+    } catch (error) {
+      console.error('[WebSocket] Subscribe error:', error);
+      if (onError) {
+        onError(error as Error);
+      }
+      throw error;
+    }
+  }
+
+  async unsubscribe(stockCode: string): Promise<void> {
+    try {
+      if (!this.client || !this.connected) {
+        console.warn('[WebSocket] Not connected, skipping unsubscribe');
+        return;
+      }
+
+      const askBidSubscription = this.subscriptions.get(`askbid-${stockCode}`);
+      const executionSubscription = this.subscriptions.get(`execution-${stockCode}`);
+
+      if (!askBidSubscription && !executionSubscription) {
+        console.log(`[WebSocket] Not subscribed to ${stockCode}`);
+        return;
+      }
+
+      // 구독 해제 요청 전송
+      this.client.publish({
+        destination: '/app/stock/unsubscribe',
+        body: JSON.stringify({ stockCode }),
+      });
+
+      // askbid 토픽 구독 해제
+      if (askBidSubscription) {
+        askBidSubscription.unsubscribe();
+        this.subscriptions.delete(`askbid-${stockCode}`);
+        console.log(`[WebSocket] Unsubscribed from /topic/stock/askbid/${stockCode}`);
+      }
+
+      // execution 토픽 구독 해제
+      if (executionSubscription) {
+        executionSubscription.unsubscribe();
+        this.subscriptions.delete(`execution-${stockCode}`);
+        console.log(`[WebSocket] Unsubscribed from /topic/stock/execution/${stockCode}`);
+      }
+
+      // pendingSubscriptions에서도 제거
+      this.pendingSubscriptions.delete(stockCode);
+
+      console.log(`[WebSocket] Unsubscribed from ${stockCode}`);
+    } catch (error) {
+      console.error('[WebSocket] Unsubscribe error:', error);
+      throw error;
+    }
+  }
+
+  isConnected(): boolean {
+    return this.connected;
+  }
+
+  isSubscribed(stockCode: string): boolean {
+    return this.subscriptions.has(`askbid-${stockCode}`) || this.subscriptions.has(`execution-${stockCode}`);
+  }
+}
+
+// 싱글톤 인스턴스 생성
+export const websocketService = new WebSocketService();
diff --git a/src/types/chart.ts b/src/types/chart.ts
index 615b35b..39fc847 100644
--- a/src/types/chart.ts
+++ b/src/types/chart.ts
@@ -10,7 +10,7 @@ export interface ChartData {
 }
 
 export interface ChartResponse {
-  stockCode: string;
+  stockCode: string; // 서버에서 반환되는 stockCode는 실제로 shortCode
   nextDateTime: string;
   candles: ChartData[];
 }
@@ -20,3 +20,22 @@ export interface ApiResponse<T> {
   message?: string;
   status?: string;
 }
+
+// WebSocket 실시간 데이터 타입
+export interface RealtimeStockData {
+  dateTime: string;
+  base: number;
+  open: number;
+  high: number;
+  low: number;
+  close: number;
+  volume: number;
+  accumulatedAmount: number;
+}
+
+export interface WebSocketSubscriptionResponse {
+  status: string;
+  message: string;
+  stockCode: string;
+  dataEndpoint?: string;
+}
diff --git a/vite.config.ts b/vite.config.ts
index 838edf5..8c2275c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -15,4 +15,7 @@ export default defineConfig(({ mode }) => ({
       "@": path.resolve(__dirname, "./src"),
     },
   },
+  define: {
+    global: 'globalThis',
+  },
 }));