fix: 왼쪽 패널 스텝을 2 카테고리 9스텝으로 업데이트

- Smart Account 업/다운그레이드 (4): 계정메뉴, 네트워크토글, 업그레이드, 다운그레이드
- 배치 서명 UI (5): 요약&상세, 콜목록, 고급정보&수수료, 자동업그레이드, 수수료모달
- 각 카테고리별 라벨과 카운트 표시

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: jungcome7

apps/web/src/smart-account-prototype/control-panel.tsx

@@ -448,33 +448,32 @@ const FixedTitle = styled.div`
 // Data — order: A (Full Control), B (Seamless), C (Invisible)
 // ---------------------------------------------------------------------------
 
+interface FeatureItem {
+  title: string;
+  desc: string;
+}
+
+interface FeatureCategory {
+  label: string;
+  features: FeatureItem[];
+}
+
 interface ModeConfig {
   key: PrototypeMode;
   letter: string;
   color: string;
   name: string;
   subtitle: string;
-  features: { title: string; desc: string }[];
+  categories: FeatureCategory[];
 }
 
-const getModeData = (): ModeConfig[] => [
+const getFeatureCategories = (): FeatureCategory[] => [
   {
-    key: "seamless",
-    letter: "A",
-    color: "#2DCE89",
-    name: "A. Keplr",
-    subtitle: t(
-      "MetaMask Smart Account에 Keplr 스타일의 디자인 터치를 가미한 버전",
-      "MetaMask Smart Account with Keplr-style design touches"
+    label: t(
+      "Smart Account 업/다운그레이드",
+      "Smart Account Upgrade/Downgrade"
     ),
     features: [
-      {
-        title: t("홈 — 활성화 안내 모달", "Home — Activation Modal"),
-        desc: t(
-          "changelog 스타일 모달로 안내",
-          "Changelog-style modal notification"
-        ),
-      },
       {
         title: t(
           "계정 메뉴 — Smart Account 진입",
@@ -490,84 +489,97 @@ const getModeData = (): ModeConfig[] => [
         desc: t("체인별 개별 ON/OFF", "Individual ON/OFF per chain"),
       },
       {
-        title: t("설정 — 업그레이드 확인", "Settings — Upgrade Confirmation"),
+        title: t("트랜잭션 확인 — 업그레이드", "TX Confirm — Upgrade"),
         desc: t(
-          "계정 유형 전환 확인 페이지",
-          "Account type switch confirmation page"
+          "EIP-7702 위임 TX 확인, 수수료 조정",
+          "EIP-7702 delegation TX confirmation, fee adjustment"
         ),
       },
       {
-        title: t("스왑 — 배치 트랜잭션", "Swap — Batch Transaction"),
-        desc: t("Approve + Swap 자동 묶음 처리", "Auto-bundled Approve + Swap"),
-      },
-      {
-        title: t(
-          "트랜잭션 확인 — 자동 업그레이드",
-          "TX Confirm — Auto Upgrade"
-        ),
+        title: t("트랜잭션 확인 — 다운그레이드", "TX Confirm — Downgrade"),
         desc: t(
-          "지원 dApp+네트워크에서 업그레이드 자동 포함",
-          "Auto-include upgrade on supported dApp+network"
+          "일반 계정으로 복원 TX 확인",
+          "Revert to regular account TX confirmation"
         ),
       },
     ],
   },
   {
-    key: "explicit",
-    letter: "B",
-    color: "#FA6410",
-    name: "B. MetaMask",
-    subtitle: t(
-      "MetaMask Smart Account UI를 그대로 옮긴 오리지널 버전",
-      "Original version directly porting MetaMask Smart Account UI"
-    ),
+    label: t("배치 서명 UI", "Batch Signing UI"),
     features: [
-      {
-        title: t("홈 — 활성화 유도 카드", "Home — Activation Promo Card"),
-        desc: t(
-          "미활성 사용자에게 프로모 카드 표시",
-          "Promo card shown to inactive users"
-        ),
-      },
       {
         title: t(
-          "계정 메뉴 — Smart Account 진입",
-          "Account Menu — Smart Account Entry"
+          "배치 서명 — 요약 & 상세",
+          "Batch Signing — Summary & Details"
         ),
         desc: t(
-          "계정 ⋯ 메뉴에서 관리 페이지로 이동",
-          "Navigate to management page from account ⋯ menu"
+          "콜 수, 계정/요청자/네트워크 확인",
+          "Call count, account/requester/network review"
         ),
       },
       {
-        title: t("설정 — 네트워크별 토글", "Settings — Per-Network Toggle"),
-        desc: t("체인별 개별 ON/OFF", "Individual ON/OFF per chain"),
+        title: t("배치 서명 — 콜 목록", "Batch Signing — Calls List"),
+        desc: t(
+          "4-byte 셀렉터 디코딩, 접기/펼치기",
+          "4-byte selector decoding, expand/collapse"
+        ),
       },
       {
-        title: t("설정 — 업그레이드 확인", "Settings — Upgrade Confirmation"),
+        title: t(
+          "배치 서명 — 고급 정보 & 수수료",
+          "Batch Signing — Advanced Details & Fee"
+        ),
         desc: t(
-          "계정 유형 전환 확인 페이지",
-          "Account type switch confirmation page"
+          "Nonce, Raw JSON, 수수료 조정",
+          "Nonce, Raw JSON, fee adjustment"
         ),
       },
       {
-        title: t("스왑 — 배치 트랜잭션", "Swap — Batch Transaction"),
-        desc: t("Approve + Swap 자동 묶음 처리", "Auto-bundled Approve + Swap"),
+        title: t("배치 서명 — 자동 업그레이드", "Batch Signing — Auto Upgrade"),
+        desc: t(
+          "EOA 미위임 시 업그레이드 배너 표시",
+          "Upgrade banner when EOA not yet delegated"
+        ),
       },
       {
-        title: t(
-          "트랜잭션 확인 — 자동 업그레이드",
-          "TX Confirm — Auto Upgrade"
-        ),
+        title: t("수수료 모달", "Fee Modal"),
         desc: t(
-          "지원 dApp+네트워크에서 업그레이드 자동 포함",
-          "Auto-include upgrade on supported dApp+network"
+          "Low/Average/High 선택, Gas Limit, Max Fee",
+          "Low/Average/High selection, Gas Limit, Max Fee"
         ),
       },
     ],
   },
 ];
 
+const getModeData = (): ModeConfig[] => {
+  const categories = getFeatureCategories();
+  return [
+    {
+      key: "seamless",
+      letter: "A",
+      color: "#2DCE89",
+      name: "A. Keplr",
+      subtitle: t(
+        "MetaMask Smart Account에 Keplr 스타일의 디자인 터치를 가미한 버전",
+        "MetaMask Smart Account with Keplr-style design touches"
+      ),
+      categories,
+    },
+    {
+      key: "explicit",
+      letter: "B",
+      color: "#FA6410",
+      name: "B. MetaMask",
+      subtitle: t(
+        "MetaMask Smart Account UI를 그대로 옮긴 오리지널 버전",
+        "Original version directly porting MetaMask Smart Account UI"
+      ),
+      categories,
+    },
+  ];
+};
+
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
@@ -709,48 +721,70 @@ export const ControlPanel: FunctionComponent = () => {
             {mode.subtitle}
           </div>
 
-          {/* Features → each = 1 tour step. Click to jump to that step. */}
-          <FeatureListLabel>
-            <span>
-              {t(
-                `확인할 기능 (${mode.features.length})`,
-                `Features (${mode.features.length})`
-              )}
-            </span>
-            <span
-              style={{
-                fontWeight: 400,
-                textTransform: "none",
-                letterSpacing: 0,
-                fontSize: 10,
-                color: "#5d5e6e",
-                whiteSpace: "nowrap",
-                flexShrink: 0,
-              }}
-            >
-              {t("클릭 → 투어", "Click → Tour")}
-            </span>
-          </FeatureListLabel>
-          {mode.features.map((f, i) => (
-            <FeatureCard
-              key={i}
-              data-feature-index={i}
-              $active={currentTourStep === i}
-              $color={mode.color}
-              onClick={() => handleFeatureClick(i)}
-            >
-              <FeatureIdx $active={currentTourStep === i} $color={mode.color}>
-                {i + 1}
-              </FeatureIdx>
-              <FeatureBody>
-                <FeatureNameRow>
-                  <FeatureName>{f.title}</FeatureName>
-                  <FeatureArrow>→</FeatureArrow>
-                </FeatureNameRow>
-                <FeatureDesc>{f.desc}</FeatureDesc>
-              </FeatureBody>
-            </FeatureCard>
-          ))}
+          {/* Features by category → each = 1 tour step. Click to jump. */}
+          {(() => {
+            let globalIdx = 0;
+            const totalFeatures = mode.categories.reduce(
+              (sum, cat) => sum + cat.features.length,
+              0
+            );
+            return mode.categories.map((cat, catIdx) => (
+              <React.Fragment key={catIdx}>
+                <FeatureListLabel>
+                  <span>
+                    {cat.label}{" "}
+                    <span style={{ fontWeight: 400, color: "#5d5e6e" }}>
+                      ({cat.features.length})
+                    </span>
+                  </span>
+                  {catIdx === 0 && (
+                    <span
+                      style={{
+                        fontWeight: 400,
+                        textTransform: "none",
+                        letterSpacing: 0,
+                        fontSize: 10,
+                        color: "#5d5e6e",
+                        whiteSpace: "nowrap",
+                        flexShrink: 0,
+                      }}
+                    >
+                      {t(
+                        `전체 ${totalFeatures}개 · 클릭 → 투어`,
+                        `${totalFeatures} total · Click → Tour`
+                      )}
+                    </span>
+                  )}
+                </FeatureListLabel>
+                {cat.features.map((f) => {
+                  const idx = globalIdx++;
+                  return (
+                    <FeatureCard
+                      key={idx}
+                      data-feature-index={idx}
+                      $active={currentTourStep === idx}
+                      $color={mode.color}
+                      onClick={() => handleFeatureClick(idx)}
+                    >
+                      <FeatureIdx
+                        $active={currentTourStep === idx}
+                        $color={mode.color}
+                      >
+                        {idx + 1}
+                      </FeatureIdx>
+                      <FeatureBody>
+                        <FeatureNameRow>
+                          <FeatureName>{f.title}</FeatureName>
+                          <FeatureArrow>→</FeatureArrow>
+                        </FeatureNameRow>
+                        <FeatureDesc>{f.desc}</FeatureDesc>
+                      </FeatureBody>
+                    </FeatureCard>
+                  );
+                })}
+              </React.Fragment>
+            ));
+          })()}
         </ScrollArea>
 
         {/* Bottom bar */}