feat: add visual green board activation presets

src/routes/data/+page.svelte

@@ -7,6 +7,7 @@
   import memorySummary from '$lib/data/memory-summary.json';
   import MemberBoardEffectSummary from '$lib/components/MemberBoardEffectSummary.svelte';
   import { summarizeMemberBoardEffects } from '$lib/engine/board-effects';
+  import { activateGreenNodePreset, greenNodePresetPositions, type GreenNodePreset } from '$lib/engine/board-green-presets.ts';
   import { calculateBoardEffects, calculateUnitPower, cardMatchesSearch, maximumWeightMatching, plainSkillText } from '$lib/engine/index.ts';
   import { memoryParameterPermil } from '$lib/engine/memory.ts';
   import type { BoardCardPlacements, CardListPreferences, CollectionCardState } from '$lib/models/user-data';
@@ -539,16 +540,10 @@
     });
   }
 
-  function activateCommonGreenNodesForAllMembers() {
-    const memberBoards = { ...userData.memberBoards };
-    for (const member of boardMembers) {
-      const commonGreenNodes = boardModels[member.positionGroupId]
-        .filter((position) => position.x === 0 && [-1, -2, -3].includes(position.y) && boardColor(position.groupId) === 'green')
-        .map((position) => position.groupId);
-      memberBoards[member.id] = [...new Set([...(memberBoards[member.id] ?? []), ...commonGreenNodes])];
-    }
+  function activateCommonGreenNodesForAllMembers(count: GreenNodePreset) {
+    const memberBoards = activateGreenNodePreset(userData.memberBoards, boardMembers, boardModels, count);
     persist({ ...userData, memberBoards });
-    showMessage('모든 멤버의 중심 아래 초록 노드 3개를 활성화했습니다.');
+    showMessage(`모든 멤버의 초록 ${count}칸을 활성화했습니다. 기존 활성 노드는 유지됩니다.`);
   }
 
   function toggleBoardNode(groupId: string) {
@@ -1204,11 +1199,25 @@
     </aside>
     <div class="automatic-placement">
       <div>
-        <strong>간편 설정</strong>
+        <strong>모든 멤버 간편 설정</strong>
         <small>모든 멤버의 기본 초록 노드를 활성화하거나, 기존 배치를 유지한 채 중앙 연결 노드의 빈 슬롯에 보유 카드를 자동 배치합니다.</small>
+        <small>초록색으로 채워진 노드가 적용 범위입니다. 맨 위 마름모는 중앙 연결 노드이며, 기존 활성 노드는 유지됩니다.</small>
       </div>
       <div class="automatic-placement-actions">
-        <button type="button" on:click={activateCommonGreenNodesForAllMembers}>모든 멤버 초록 3칸 활성화</button>
+        <div class="green-presets" role="group" aria-label="모든 멤버 초록 노드 활성화">
+          {#each [3, 5, 7] as count}
+            <button type="button" class="green-preset" aria-label={`모든 멤버 초록 ${count}칸 활성화`} on:click={() => activateCommonGreenNodesForAllMembers(count as GreenNodePreset)}>
+              <svg viewBox="0 0 76 126" aria-hidden="true">
+                <path class="preset-edge" d="M38 12V112 M18 52H58" />
+                <path class="preset-center" d="M38 5L45 12L38 19L31 12Z" />
+                {#each greenNodePresetPositions as position, index}
+                  <circle class="preset-node" class:included={index < count} cx={38 + position.x * 20} cy={12 - position.y * 20} r="6" />
+                {/each}
+              </svg>
+              <span>{count}칸</span>
+            </button>
+          {/each}
+        </div>
         {#if automaticPlacementSnapshot}<button type="button" class="undo" on:click={undoAutomaticPlacement}>방금 배치 취소</button>{/if}
         <button type="button" class="primary" on:click={optimizeEmptyGreenSlots}>중앙 연결 노드 자동 배치</button>
       </div>
@@ -1616,7 +1625,14 @@
   .automatic-placement > div:first-child { display: grid; gap: 4px; min-width: 0; }
   .automatic-placement strong { color: #b7dec7; font-size: 14px; }
   .automatic-placement small { color: #82988c; font-size: 12px; line-height: 1.45; }
-  .automatic-placement-actions { display: flex; flex: 0 0 auto; gap: 7px; }
+  .automatic-placement-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
+  .green-presets { display: flex; gap: 7px; }
+  .automatic-placement button.green-preset { display: grid; justify-items: center; gap: 4px; width: 78px; padding: 8px; }
+  .green-preset svg { display: block; width: 60px; height: 100px; }
+  .preset-edge { fill: none; stroke: #4e6658; stroke-width: 2; }
+  .preset-center { fill: #bec8d5; stroke: #e4ebf2; stroke-width: 1.5; }
+  .preset-node { fill: #202d26; stroke: #71867a; stroke-width: 1.5; }
+  .preset-node.included { fill: #86e3a6; stroke: #b5f5ca; stroke-width: 2; }
   .automatic-placement button { min-height: 34px; padding: 7px 11px; border: 1px solid #466151; border-radius: 8px; color: #b9d7c5; background: #202d26; font-size: 12px; font-weight: 800; cursor: pointer; }
   .automatic-placement button.primary { border-color: #62aa7e; color: #101913; background: #78c493; }
   .automatic-placement button.undo { color: #c4ccd5; background: transparent; }