모의투자 화면수정

frontend/src/components/layout/BuilderPageShell.tsx

@@ -27,6 +27,8 @@ export interface BuilderPageShellProps {
   headerActions?: React.ReactNode;
   /** 타이틀 우측·중앙 그리드 시작선 정렬 (가상투자 등) */
   headerCenter?: React.ReactNode;
+  /** grid: 좌패널폭 기준 3열 / between: 타이틀·버튼 사이 중앙 (모의투자 안내 등) */
+  headerCenterMode?: 'grid' | 'between';
   pageClassName?: string;
   banner?: React.ReactNode;
   leftTitle?: string;
@@ -103,6 +105,7 @@ export default function BuilderPageShell({
   subtitle,
   headerActions,
   headerCenter,
+  headerCenterMode = 'grid',
   pageClassName,
   banner,
   leftTitle,
@@ -252,21 +255,34 @@ export default function BuilderPageShell({
       className={`bps-page se-page se-page--${theme}${pageClassName ? ` ${pageClassName}` : ''}`}
       style={pageStyle}
     >
-      <header className={`bps-header${headerCenter ? ' bps-header--vtd' : ''}`}>
+      <header
+        className={[
+          'bps-header',
+          headerCenter && headerCenterMode === 'between' ? 'bps-header--between' : '',
+          headerCenter && headerCenterMode === 'grid' ? 'bps-header--vtd' : '',
+        ].filter(Boolean).join(' ')}
+      >
         <div className="bps-header-left">
           <h1 className="bps-title">{title}</h1>
           {subtitle && <span className="bps-subtitle">{subtitle}</span>}
         </div>
         {headerCenter ? (
-          <>
-            <div className="bps-header-center">{headerCenter}</div>
-            {headerActions && (
-              <>
-                <span className="header-toolbar-divider" aria-hidden="true" />
-                <div className="bps-header-actions">{headerActions}</div>
-              </>
-            )}
-          </>
+          headerCenterMode === 'between' ? (
+            <>
+              <div className="bps-header-center">{headerCenter}</div>
+              {headerActions && <div className="bps-header-actions">{headerActions}</div>}
+            </>
+          ) : (
+            <>
+              <div className="bps-header-center">{headerCenter}</div>
+              {headerActions && (
+                <>
+                  <span className="header-toolbar-divider" aria-hidden="true" />
+                  <div className="bps-header-actions">{headerActions}</div>
+                </>
+              )}
+            </>
+          )
         ) : (
           headerActions && <div className="bps-header-actions">{headerActions}</div>
         )}