브랜드 에셋 사운드 스튜디오UI 수정

Merge branch 'main' of https://gitea.o2o.kr/castad/o2o-castad-frontend
Merge branch 'feature-dashboard'
2026-03-06 10:47:51 +09:00 · 2026-03-06 10:18:36 +09:00 · 2026-03-06 10:17:24 +09:00 · 2026-03-05 14:56:35 +09:00 · 2026-03-03 15:26:26 +09:00 · 2026-02-27 14:03:01 +09:00
14 changed files with 1647 additions and 1027 deletions
--- a/.env.example
+++ b/.env.example
@ -1,6 +0,0 @@
-# Local server
-VITE_PORT=3000
-VITE_HOST=localhost
-
-# API server
-VITE_API_URL=http://40.82.133.44
--- a/README.md
+++ b/README.md
@ -38,6 +38,9 @@ CASTAD 프론트엔드 프로젝트 입니다.
 # 의존성 설치
 npm install

+# recharts 설치 (대시보드용 차트 라이브러리)
+npm install recharts
+
 # 개발 서버 실행 (http://localhost:3000)
 npm run dev

--- a/index.css
+++ b/index.css
--- a/package-lock.json
+++ b/package-lock.json
@ -11,7 +11,8 @@
        "i18next": "^25.8.4",
        "react": "^19.2.3",
        "react-dom": "^19.2.3",
-        "react-i18next": "^16.5.4"
+        "react-i18next": "^16.5.4",
+        "recharts": "^3.7.0"
      },
      "devDependencies": {
        "@types/node": "^22.14.0",
@ -804,6 +805,42 @@
        "@jridgewell/sourcemap-codec": "^1.4.14"
      }
    },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
+      "integrity": "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^11.0.0",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reduxjs/toolkit/node_modules/immer": {
+      "version": "11.1.4",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.4.tgz",
+      "integrity": "sha512-XREFCPo6ksxVzP4E0ekD5aMdf8WMwmdNaz6vuvxgI40UaEiu6q3p8X52aU6GdyvLY3XXX/8R7JOTXStz/nBbRw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
    "node_modules/@rolldown/pluginutils": {
      "version": "1.0.0-beta.53",
      "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.53.tgz",
@ -1119,6 +1156,18 @@
        "win32"
      ]
    },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
    "node_modules/@types/babel__core": {
      "version": "7.20.5",
      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@ -1164,6 +1213,69 @@
        "@babel/types": "^7.28.2"
      }
    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
    "node_modules/@types/estree": {
      "version": "1.0.8",
      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@ -1182,6 +1294,12 @@
        "undici-types": "~6.21.0"
      }
    },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
    "node_modules/@vitejs/plugin-react": {
      "version": "5.1.2",
      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-5.1.2.tgz",
@ -1269,6 +1387,15 @@
      ],
      "license": "CC-BY-4.0"
    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/convert-source-map": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@ -1276,6 +1403,127 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/debug": {
      "version": "4.4.3",
      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
@ -1294,6 +1542,12 @@
        }
      }
    },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
    "node_modules/electron-to-chromium": {
      "version": "1.5.267",
      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.267.tgz",
@ -1301,6 +1555,16 @@
      "dev": true,
      "license": "ISC"
    },
+    "node_modules/es-toolkit": {
+      "version": "1.44.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.44.0.tgz",
+      "integrity": "sha512-6penXeZalaV88MM3cGkFZZfOoLGWshWWfdy0tWw/RlVVyhvMaWSBTOvXNeiW3e5FwdS5ePW0LGEu17zT139ktg==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
    "node_modules/esbuild": {
      "version": "0.25.12",
      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.25.12.tgz",
@ -1353,6 +1617,12 @@
        "node": ">=6"
      }
    },
+    "node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+      "license": "MIT"
+    },
    "node_modules/fdir": {
      "version": "6.5.0",
      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
@ -1437,6 +1707,25 @@
        }
      }
    },
+    "node_modules/immer": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
+      "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
    "node_modules/js-tokens": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@ -1578,6 +1867,7 @@
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.3.tgz",
      "integrity": "sha512-yELu4WmLPw5Mr/lmeEpox5rw3RETacE++JgHqQzd2dg+YbJuat3jH4ingc+WPZhxaoFzdv9y33G+F7Nl5O0GBg==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "scheduler": "^0.27.0"
      },
@ -1612,6 +1902,37 @@
        }
      }
    },
+    "node_modules/react-is": {
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.4.tgz",
+      "integrity": "sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
    "node_modules/react-refresh": {
      "version": "0.18.0",
      "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.18.0.tgz",
@ -1622,6 +1943,58 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/recharts": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.7.0.tgz",
+      "integrity": "sha512-l2VCsy3XXeraxIID9fx23eCb6iCBsxUQDnE8tWm6DFdszVAO7WVY/ChAD9wVit01y6B2PMupYiMmQwhgPHc9Ew==",
+      "license": "MIT",
+      "workspaces": [
+        "www"
+      ],
+      "dependencies": {
+        "@reduxjs/toolkit": "1.x.x || 2.x.x",
+        "clsx": "^2.1.1",
+        "decimal.js-light": "^2.5.1",
+        "es-toolkit": "^1.39.3",
+        "eventemitter3": "^5.0.1",
+        "immer": "^10.1.1",
+        "react-redux": "8.x.x || 9.x.x",
+        "reselect": "5.1.1",
+        "tiny-invariant": "^1.3.3",
+        "use-sync-external-store": "^1.2.2",
+        "victory-vendor": "^37.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
    "node_modules/rollup": {
      "version": "4.54.0",
      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.54.0.tgz",
@ -1690,6 +2063,12 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
    "node_modules/tinyglobby": {
      "version": "0.2.15",
      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@ -1769,6 +2148,28 @@
        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
      }
    },
+    "node_modules/victory-vendor": {
+      "version": "37.3.6",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
+      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
    "node_modules/vite": {
      "version": "6.4.1",
      "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
--- a/package.json
+++ b/package.json
@ -12,7 +12,8 @@
    "i18next": "^25.8.4",
    "react": "^19.2.3",
    "react-dom": "^19.2.3",
-    "react-i18next": "^16.5.4"
+    "react-i18next": "^16.5.4",
+    "recharts": "^3.7.0"
  },
  "devDependencies": {
    "@types/node": "^22.14.0",
--- a/src/components/SocialPostingModal.tsx
+++ b/src/components/SocialPostingModal.tsx
@ -131,6 +131,7 @@ const SocialPostingModal: React.FC<SocialPostingModalProps> = ({
  const [isChannelDropdownOpen, setIsChannelDropdownOpen] = useState(false);
  const [isPrivacyDropdownOpen, setIsPrivacyDropdownOpen] = useState(false);
  const [isLoadingAutoDescription, setIsLoadingAutoDescription] = useState(false);
+  const [isHorizontalVideo, setIsHorizontalVideo] = useState(false);
  const channelDropdownRef = useRef<HTMLDivElement>(null);
  const privacyDropdownRef = useRef<HTMLDivElement>(null);

@ -159,6 +160,16 @@ const SocialPostingModal: React.FC<SocialPostingModalProps> = ({
    return () => document.removeEventListener('mousedown', handleClickOutside);
  }, []);

+  // 모달 열릴 때 배경 스크롤 차단
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => { document.body.style.overflow = ''; };
+  }, [isOpen]);
+
  // 소셜 계정 로드
  useEffect(() => {
    if (isOpen) {
@ -419,9 +430,13 @@ const SocialPostingModal: React.FC<SocialPostingModalProps> = ({
              <div className="social-posting-video-container">
                <video
                  src={video.result_movie_url}
-                  className="social-posting-video"
+                  className={`social-posting-video ${isHorizontalVideo ? 'horizontal' : 'vertical'}`}
                  controls
                  playsInline
+                  onLoadedMetadata={(e) => {
+                    const v = e.currentTarget;
+                    setIsHorizontalVideo(v.videoWidth > v.videoHeight);
+                  }}
                />
              </div>
            </div>
--- a/src/locales/en.json
+++ b/src/locales/en.json
@ -129,6 +129,11 @@
    "imageUpload": "Image Upload",
    "dragAndDrop": "Drag and drop\nimages to upload",
    "videoRatio": "Video Ratio",
+    "minImages": "Min. 5 images",
+    "youtubeShorts": "YouTube Shorts",
+    "youtubeVideo": "YouTube Video",
+    "back": "Go Back",
+    "loadMore": "Load more",
    "uploadFailed": "Image upload failed.",
    "uploading": "Uploading...",
    "nextStep": "Next Step"
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@ -129,6 +129,11 @@
    "imageUpload": "이미지 업로드",
    "dragAndDrop": "이미지를 드래그하여\n업로드",
    "videoRatio": "영상 비율",
+    "minImages": "최소 5장",
+    "youtubeShorts": "유튜브 쇼츠",
+    "youtubeVideo": "유튜브 일반",
+    "back": "뒤로가기",
+    "loadMore": "더보기",
    "uploadFailed": "이미지 업로드에 실패했습니다.",
    "uploading": "업로드 중...",
    "nextStep": "다음 단계"
--- a/src/pages/Dashboard/AssetManagementContent.tsx
+++ b/src/pages/Dashboard/AssetManagementContent.tsx
@ -6,6 +6,7 @@ import { uploadImages } from '../../utils/api';

 interface AssetManagementContentProps {
  onNext: (imageTaskId: string) => void;
+  onBack?: () => void;
  imageList: ImageItem[];
  onRemoveImage: (index: number) => void;
  onAddImages: (files: File[]) => void;
@ -13,20 +14,22 @@ interface AssetManagementContentProps {

 type VideoRatio = 'vertical' | 'horizontal';

+const IMAGES_PER_PAGE = 12;
+
 const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
  onNext,
+  onBack,
  imageList,
  onRemoveImage,
  onAddImages,
 }) => {
  const { t } = useTranslation();
  const fileInputRef = useRef<HTMLInputElement>(null);
-  const imageListRef = useRef<HTMLDivElement>(null);
  const [isUploading, setIsUploading] = useState(false);
  const [uploadError, setUploadError] = useState<string | null>(null);
  const [videoRatio, setVideoRatio] = useState<VideoRatio>('vertical');
+  const [displayCount, setDisplayCount] = useState(IMAGES_PER_PAGE);

-  // Load video ratio from localStorage on mount
  useEffect(() => {
    const savedRatio = localStorage.getItem('castad_video_ratio') as VideoRatio;
    if (savedRatio === 'vertical' || savedRatio === 'horizontal') {
@ -34,7 +37,6 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
    }
  }, []);

-  // Save video ratio to localStorage when it changes
  const handleVideoRatioChange = (ratio: VideoRatio) => {
    setVideoRatio(ratio);
    localStorage.setItem('castad_video_ratio', ratio);
@ -51,7 +53,6 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
    setUploadError(null);

    try {
-      // URL 이미지와 파일 이미지 분리
      const urlImages: ImageUrlItem[] = imageList
        .filter((item: ImageItem): item is ImageItem & { type: 'url' } => item.type === 'url')
        .map((item) => ({ url: item.url }));
@ -60,7 +61,6 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
        .filter((item: ImageItem): item is ImageItem & { type: 'file' } => item.type === 'file')
        .map((item) => item.file);

-      // 이미지가 하나라도 있으면 업로드
      if (urlImages.length > 0 || fileImages.length > 0) {
        const response = await uploadImages(urlImages, fileImages);
        onNext(response.task_id);
@ -73,11 +73,6 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
    }
  };

-  const handleImageListWheel = (e: React.WheelEvent) => {
-    // 이 영역 안에서는 항상 스크롤 이벤트 전파 차단
-    e.stopPropagation();
-  };
-
  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
@ -86,14 +81,10 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
  const handleDrop = (e: React.DragEvent) => {
    e.preventDefault();
    e.stopPropagation();
-
-    const files = Array.from(e.dataTransfer.files).filter(file =>
+    const files = Array.from(e.dataTransfer.files).filter((file: File) =>
      file.type.startsWith('image/')
    );
-
-    if (files.length > 0) {
-      onAddImages(files);
-    }
+    if (files.length > 0) onAddImages(files);
  };

  const handleFileSelect = () => {
@ -108,104 +99,132 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
    }
  };

+  const visibleImages = imageList.slice(0, displayCount);
+  const hasMore = imageList.length > displayCount;
+
  return (
-    <main className="page-container">
-      {/* Title */}
-      <h1 className="asset-title">{t('assetManagement.title')}</h1>
+    <main className="asset-page">
+      {/* Fixed Header - 뒤로가기 버튼 */}
+      <div className="asset-sticky-header">
+        {onBack && (
+          <button onClick={onBack} className="asset-back-btn">
+            <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+              <polyline points="15 18 9 12 15 6"/>
+            </svg>
+            {t('assetManagement.back')}
+          </button>
+        )}
+      </div>

-      {/* Main Content Container */}
-      <div className="asset-container">
-        {/* Left Column - Selected Images */}
-        <div className="asset-column asset-column-left">
-          <h3 className="asset-section-title">{t('assetManagement.selectedImages')}</h3>
-          <div
-            ref={imageListRef}
-            onWheel={handleImageListWheel}
-            className="asset-image-list"
-          >
-            {imageList.length > 0 ? (
-              <div className="asset-image-grid">
-                {imageList.map((item, i) => (
-                  <div key={i} className="asset-image-item">
-                    <img
-                      src={getImageSrc(item)}
-                      alt={`${t('assetManagement.imageAlt')} ${i + 1}`}
-                    />
-                    {item.type === 'file' && (
-                      <div className="asset-image-badge">{t('assetManagement.uploadBadge')}</div>
-                    )}
-                    <button
-                      onClick={() => onRemoveImage(i)}
-                      className="asset-image-remove"
-                    >
-                      <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
-                        <line x1="18" y1="6" x2="6" y2="18"/>
-                        <line x1="6" y1="6" x2="18" y2="18"/>
-                      </svg>
-                    </button>
-                  </div>
-                ))}
+      {/* Single Scrollable Content Area */}
+      <div className="asset-scroll-area">
+        <h1 className="asset-title">{t('assetManagement.title')}</h1>
+
+        <div className="asset-container">
+          {/* Left Column - Selected Images */}
+          <div className="asset-column asset-column-left">
+            <div className="asset-section-header">
+              <div className="asset-section-header-left">
+                <h3 className="asset-section-title">{t('assetManagement.selectedImages')}</h3>
+                <span className="asset-section-subtitle">{t('assetManagement.minImages')}</span>
              </div>
-            ) : null}
-          </div>
-        </div>
-
-        {/* Right Column - Upload and Video Ratio */}
-        <div className="asset-column asset-column-right">
-          {/* Image Upload Section */}
-          <div className="asset-upload-section">
-            <h3 className="asset-section-title">{t('assetManagement.imageUpload')}</h3>
-            <div
-              onClick={handleFileSelect}
-              onDragOver={handleDragOver}
-              onDrop={handleDrop}
-              className="asset-upload-zone"
-            >
-              <p className="asset-upload-text">
-                {t('assetManagement.dragAndDrop').split('\n').map((line, i) => (
-                  <React.Fragment key={i}>{i > 0 && <br/>}{line}</React.Fragment>
-                ))}
-              </p>
+              <button onClick={handleFileSelect} className="asset-mobile-upload-btn">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+                  <line x1="8" y1="2" x2="8" y2="14" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
+                  <line x1="2" y1="8" x2="14" y2="8" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/>
+                </svg>
+                {t('assetManagement.imageUpload')}
+              </button>
            </div>
-            <input
-              ref={fileInputRef}
-              type="file"
-              accept="image/*"
-              multiple
-              onChange={handleFileChange}
-              className="hidden"
-            />
+
+            <div className="asset-image-list">
+              {visibleImages.length > 0 && (
+                <div className="asset-image-grid">
+                  {visibleImages.map((item, i) => (
+                    <div key={i} className="asset-image-item">
+                      <img
+                        src={getImageSrc(item)}
+                        alt={`${t('assetManagement.imageAlt')} ${i + 1}`}
+                      />
+                      {item.type === 'file' && (
+                        <div className="asset-image-badge">{t('assetManagement.uploadBadge')}</div>
+                      )}
+                      <button
+                        onClick={() => onRemoveImage(i)}
+                        className="asset-image-remove"
+                      >
+                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                          <line x1="18" y1="6" x2="6" y2="18"/>
+                          <line x1="6" y1="6" x2="18" y2="18"/>
+                        </svg>
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            {hasMore && (
+              <button
+                className="asset-load-more"
+                onClick={() => setDisplayCount(prev => prev + IMAGES_PER_PAGE)}
+              >
+                {t('assetManagement.loadMore')}
+              </button>
+            )}
          </div>

-          {/* Video Ratio Section */}
-          <div className="asset-ratio-section">
-            <h3 className="asset-section-title">{t('assetManagement.videoRatio')}</h3>
-            <div className="asset-ratio-buttons">
-              <button
-                onClick={() => handleVideoRatioChange('vertical')}
-                className={`asset-ratio-button ${videoRatio === 'vertical' ? 'active' : ''}`}
+          {/* Right Column - Upload and Video Ratio */}
+          <div className="asset-column asset-column-right">
+            {/* Image Upload Section (desktop only) */}
+            <div className="asset-upload-section">
+              <h3 className="asset-section-title">{t('assetManagement.imageUpload')}</h3>
+              <div
+                onClick={handleFileSelect}
+                onDragOver={handleDragOver}
+                onDrop={handleDrop}
+                className="asset-upload-zone"
              >
-                <div className="asset-ratio-icon asset-ratio-icon-vertical">
-                  <div className="asset-ratio-box"></div>
-                </div>
-                <span>9:16</span>
-              </button>
-              <button
-                onClick={() => handleVideoRatioChange('horizontal')}
-                className={`asset-ratio-button ${videoRatio === 'horizontal' ? 'active' : ''}`}
-              >
-                <div className="asset-ratio-icon asset-ratio-icon-horizontal">
-                  <div className="asset-ratio-box"></div>
-                </div>
-                <span>16:9</span>
-              </button>
+                <p className="asset-upload-text">
+                  {t('assetManagement.dragAndDrop').split('\n').map((line, i) => (
+                    <React.Fragment key={i}>{i > 0 && <br/>}{line}</React.Fragment>
+                  ))}
+                </p>
+              </div>
+            </div>
+
+            {/* Video Ratio Section */}
+            <div className="asset-ratio-section">
+              <h3 className="asset-section-title">{t('assetManagement.videoRatio')}</h3>
+              <div className="asset-ratio-buttons">
+                <button
+                  onClick={() => handleVideoRatioChange('vertical')}
+                  className={`asset-ratio-button ${videoRatio === 'vertical' ? 'active' : ''}`}
+                >
+                  <div className="asset-ratio-icon asset-ratio-icon-vertical">
+                    <div className="asset-ratio-box"></div>
+                  </div>
+                  <span className="asset-ratio-label">9:16</span>
+                  <span className="asset-ratio-subtitle">{t('assetManagement.youtubeShorts')}</span>
+                </button>
+                <button
+                  onClick={() => handleVideoRatioChange('horizontal')}
+                  className={`asset-ratio-button ${videoRatio === 'horizontal' ? 'active' : ''}`}
+                >
+                  <div className="asset-ratio-icon asset-ratio-icon-horizontal">
+                    <div className="asset-ratio-box"></div>
+                  </div>
+                  <span className="asset-ratio-label">16:9</span>
+                  <span className="asset-ratio-subtitle">{t('assetManagement.youtubeVideo')}</span>
+                </button>
+              </div>
            </div>
          </div>
        </div>
      </div>

-      {/* Bottom Button */}
-      <div className="asset-bottom">
+      {/* Fixed Footer - 다음 단계 버튼 */}
+      <div className="asset-sticky-footer">
        {uploadError && (
          <p className="text-red-500 text-sm mb-2">{uploadError}</p>
        )}
@ -217,6 +236,15 @@ const AssetManagementContent: React.FC<AssetManagementContentProps> = ({
          {isUploading ? t('assetManagement.uploading') : t('assetManagement.nextStep')}
        </button>
      </div>
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/*"
+        multiple
+        onChange={handleFileChange}
+        className="hidden"
+      />
    </main>
  );
 };
--- a/src/pages/Dashboard/CompletionContent.tsx
+++ b/src/pages/Dashboard/CompletionContent.tsx
@ -37,12 +37,7 @@ const CompletionContent: React.FC<CompletionContentProps> = ({
  const [errorMessage, setErrorMessage] = useState<string | null>(null);
  const [statusMessage, setStatusMessage] = useState('');
  const [renderProgress, setRenderProgress] = useState(0);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [progress, setProgress] = useState(0);
-  const [showControls, setShowControls] = useState(true);
-  const videoRef = useRef<HTMLVideoElement>(null);
  const hasStartedGeneration = useRef(false);
-  const hideControlsTimer = useRef<ReturnType<typeof setTimeout> | null>(null);

  // 소셜 미디어 포스팅 모달
  const [showSocialModal, setShowSocialModal] = useState(false);
@ -284,62 +279,6 @@ const CompletionContent: React.FC<CompletionContentProps> = ({
    }
  }, []);

-  const togglePlayPause = () => {
-    if (!videoRef.current || !videoUrl) return;
-    if (isPlaying) {
-      videoRef.current.pause();
-      setShowControls(true);
-      if (hideControlsTimer.current) clearTimeout(hideControlsTimer.current);
-    } else {
-      videoRef.current.play();
-      hideControlsTimer.current = setTimeout(() => {
-        setShowControls(false);
-      }, 3000);
-    }
-    setIsPlaying(!isPlaying);
-  };
-
-  const handleTimeUpdate = () => {
-    if (videoRef.current && videoRef.current.duration > 0) {
-      setProgress((videoRef.current.currentTime / videoRef.current.duration) * 100);
-    }
-  };
-
-  const handleVideoEnded = () => {
-    setIsPlaying(false);
-    setProgress(0);
-    setShowControls(true);
-  };
-
-  const resetHideControlsTimer = () => {
-    if (hideControlsTimer.current) {
-      clearTimeout(hideControlsTimer.current);
-    }
-    setShowControls(true);
-    if (isPlaying) {
-      hideControlsTimer.current = setTimeout(() => {
-        setShowControls(false);
-      }, 3000);
-    }
-  };
-
-  const handleVideoMouseEnter = () => {
-    resetHideControlsTimer();
-  };
-
-  const handleVideoMouseMove = () => {
-    resetHideControlsTimer();
-  };
-
-  const handleVideoMouseLeave = () => {
-    if (isPlaying) {
-      if (hideControlsTimer.current) clearTimeout(hideControlsTimer.current);
-      hideControlsTimer.current = setTimeout(() => {
-        setShowControls(false);
-      }, 1000);
-    }
-  };
-
  const handleDownload = () => {
    if (videoUrl) {
      const link = document.createElement('a');
@ -374,7 +313,7 @@ const CompletionContent: React.FC<CompletionContentProps> = ({
  // 비디오 해상도 계산
  const getVideoResolution = () => {
    const savedRatio = localStorage.getItem('castad_video_ratio');
-    return savedRatio === 'horizontal' ? '1234×720' : '720×1234';
+    return savedRatio === 'horizontal' ? '1280×720' : '720×1280';
  };

  // 파일명 생성
@ -403,7 +342,7 @@ const CompletionContent: React.FC<CompletionContentProps> = ({
          <div className="comp2-grid">
            {/* 왼쪽: 영상 */}
            <div className="comp2-video-section">
-              <div className="comp2-video-wrapper" onMouseEnter={handleVideoMouseEnter} onMouseMove={handleVideoMouseMove} onMouseLeave={handleVideoMouseLeave}>
+              <div className="comp2-video-wrapper">
                {isLoading ? (
                  <div className="comp2-video-loading">
                    <div className="loading-spinner">
@ -426,47 +365,12 @@ const CompletionContent: React.FC<CompletionContentProps> = ({
                    </button>
                  </div>
                ) : videoUrl ? (
-                  <>
-                    <video
-                      ref={videoRef}
-                      src={videoUrl}
-                      className="comp2-video-player"
-                      onTimeUpdate={handleTimeUpdate}
-                      onEnded={handleVideoEnded}
-                      onClick={togglePlayPause}
-                    />
-                    <div className={`comp2-video-controls ${showControls ? 'visible' : 'hidden'}`}>
-                      <div className="comp2-progress-bar">
-                        <div className="comp2-progress-fill" style={{ width: `${progress}%` }}></div>
-                      </div>
-                      <div className="comp2-controls-row">
-                        <button className="comp2-play-btn" onClick={togglePlayPause}>
-                          {isPlaying ? (
-                            <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
-                              <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
-                            </svg>
-                          ) : (
-                            <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
-                              <path d="M8 5v14l11-7z"/>
-                            </svg>
-                          )}
-                        </button>
-                        <div className="comp2-volume-control">
-                          <svg width="32" height="32" viewBox="0 0 24 24" fill="currentColor">
-                            <path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>
-                          </svg>
-                          <div className="comp2-volume-bar">
-                            <div className="comp2-volume-fill"></div>
-                          </div>
-                        </div>
-                        <div className="comp2-time-display">
-                          <span className="comp2-time-current">00:04</span>
-                          <span className="comp2-time-divider">/</span>
-                          <span className="comp2-time-total">00:34</span>
-                        </div>
-                      </div>
-                    </div>
-                  </>
+                  <video
+                    src={videoUrl}
+                    className="comp2-video-player"
+                    controls
+                    playsInline
+                  />
                ) : (
                  <div className="comp2-video-placeholder"></div>
                )}
--- a/src/pages/Dashboard/DashboardContent.tsx
+++ b/src/pages/Dashboard/DashboardContent.tsx
--- a/src/pages/Dashboard/GenerationFlow.tsx
+++ b/src/pages/Dashboard/GenerationFlow.tsx
@ -363,6 +363,7 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
      case 1:
        return (
          <AssetManagementContent
+            onBack={() => goToWizardStep(0)}
            onNext={(taskId: string) => {
              // Clear video generation state to start fresh
              localStorage.removeItem(VIDEO_GENERATION_KEY);
@ -420,7 +421,7 @@ const GenerationFlow: React.FC<GenerationFlowProps> = ({
  const renderContent = () => {
    switch (activeItem) {
      case '대시보드':
-        return <DashboardContent />;
+        return <DashboardContent onNavigate={handleNavigate} />;
      case '비즈니스 설정':
        return <BusinessSettingsContent />;
      case 'ADO2 콘텐츠':
--- a/src/pages/Dashboard/SoundStudioContent.tsx
+++ b/src/pages/Dashboard/SoundStudioContent.tsx
@ -386,7 +386,7 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({
  const isGenerating = status === 'generating_lyric' || status === 'generating_song' || status === 'polling';

  return (
-    <main className="page-container">
+    <main className="sound-studio-page">
      {audioUrl && (
        <audio ref={audioRef} src={audioUrl} preload="metadata" />
      )}
@ -517,6 +517,41 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({
                )}
              </div>
            </div>
+
+          {/* Generate Button */}
+          <button
+            onClick={handleGenerateMusic}
+            disabled={isGenerating}
+            className={`btn-generate-sound ${isGenerating ? 'disabled' : ''}`}
+          >
+            {isGenerating ? (
+              <>
+                <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
+                  <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"/>
+                  <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
+                </svg>
+                {t('soundStudio.generating')}
+              </>
+            ) : (
+              t('soundStudio.generateButton')
+            )}
+          </button>
+
+          {errorMessage && (
+            <div className="error-message-new">
+              {errorMessage}
+            </div>
+          )}
+
+          {isGenerating && statusMessage && (
+            <div className="status-message-new">
+              <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
+                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"/>
+                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
+              </svg>
+              {statusMessage}
+            </div>
+          )}
          </div>

          {/* Right Column - Lyrics */}
@ -578,41 +613,6 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({
            </div>
          </div>
        </div>
-
-        {/* Generate Button */}
-        <button
-          onClick={handleGenerateMusic}
-          disabled={isGenerating}
-          className={`btn-generate-sound ${isGenerating ? 'disabled' : ''}`}
-        >
-          {isGenerating ? (
-            <>
-              <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
-                <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"/>
-                <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
-              </svg>
-              {t('soundStudio.generating')}
-            </>
-          ) : (
-            t('soundStudio.generateButton')
-          )}
-        </button>
-
-        {errorMessage && (
-          <div className="error-message-new">
-            {errorMessage}
-          </div>
-        )}
-
-        {isGenerating && statusMessage && (
-          <div className="status-message-new">
-            <svg className="animate-spin h-4 w-4" viewBox="0 0 24 24">
-              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none"/>
-              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
-            </svg>
-            {statusMessage}
-          </div>
-        )}
      </div>

      {/* Bottom Button */}
@ -653,3 +653,4 @@ const SoundStudioContent: React.FC<SoundStudioContentProps> = ({
 };

 export default SoundStudioContent;
+
--- a/src/utils/api.ts
+++ b/src/utils/api.ts
@ -30,7 +30,7 @@ import {
  YTAutoSeoResponse,
 } from '../types/api';

-const API_URL = import.meta.env.VITE_API_URL || 'http://40.82.133.44';
+export const API_URL = import.meta.env.VITE_API_URL || 'http://40.82.133.44';
 console.log('[API] API_URL:', API_URL);
 console.log('[API] VITE_API_URL env:', import.meta.env.VITE_API_URL);

@ -462,7 +462,7 @@ function redirectToLogin() {
 }

 // 401 에러 시 자동으로 토큰 갱신 후 재요청하는 래퍼 함수
-async function authenticatedFetch(
+export async function authenticatedFetch(
  url: string,
  options: RequestInit = {}
 ): Promise<Response> {
Author	SHA1	Message	Date
김성경	b05c7bd080	브랜드 에셋 사운드 스튜디오UI 수정	2026-03-06 10:47:51 +09:00
김성경	cd4114f74d	Merge branch 'main' of https://gitea.o2o.kr/castad/o2o-castad-frontend	2026-03-06 10:18:36 +09:00
김성경	ed13c83ae0	Merge branch 'feature-dashboard'	2026-03-06 10:17:24 +09:00
김성경	be32a04dd0	영상생성 완료 화면 및 소셜 미디어 포스팅 화면 UI수정	2026-03-05 14:56:35 +09:00
김성경	cab67c711a	UI수정 및 블러처리 조건 변경	2026-03-03 15:26:26 +09:00
김성경	440a6c8b72	대시보드 블러 추가	2026-02-27 14:03:01 +09:00
김성경	ba4d143189	Merge branch 'main' of https://gitea.o2o.kr/castad/o2o-castad-frontend into feature-dashboard	2026-02-26 16:08:30 +09:00
김성경	1a4155da9b	대시보드 기능 추가	2026-02-26 10:34:26 +09:00