전 저장소 리팩터링과 SSOT 정비

apps/web/src/components/shell/AppShell.tsx

@@ -5,6 +5,8 @@ import { designRoleOf, useAuth, type Role } from "../../lib/auth";
 
 export interface AppShellProps {
   children: ReactNode;
+  /** 페이지 전용 셸 표면을 위한 추가 클래스 */
+  className?: string;
   /** 역할 컨텍스트 라벨 오버라이드 (없으면 user.role 라벨) */
   contextLabel?: string;
   /** 좌측 네비 숨김 (세션 화면처럼 집중 모드) */
@@ -24,7 +26,7 @@ export interface AppShellProps {
  * body[data-role] 은 AuthProvider 가 관리(여기선 셸 골격만).
  * 미인증 시에도 안전하게 렌더(네비 없이) — 가드는 라우터(RequireAuth)가 담당.
  */
-export function AppShell({ children, contextLabel, hideNav, bleed, wide, hideTopbar, navRole }: AppShellProps) {
+export function AppShell({ children, className, contextLabel, hideNav, bleed, wide, hideTopbar, navRole }: AppShellProps) {
   const { user } = useAuth();
   const showNav = !hideNav && !!user;
   const shellRole = navRole ?? user?.role;
@@ -46,7 +48,16 @@ export function AppShell({ children, contextLabel, hideNav, bleed, wide, hideTop
   }, [shellRole, user]);
 
   return (
-    <div className={"vg-shell" + (hideTopbar ? " vg-shell--fullscreen" : "")}>
+    <div
+      className={[
+        "vg-shell",
+        "vg-shell--botanical",
+        hideTopbar ? "vg-shell--fullscreen" : "",
+        className ?? "",
+      ]
+        .filter(Boolean)
+        .join(" ")}
+    >
       {hideTopbar ? null : <Topbar contextLabel={contextLabel} />}
       <div className={"vg-shell__body" + (showNav ? "" : " vg-shell__body--bare")}>
         {showNav ? <Sidebar role={shellRole ?? user.role} /> : null}