1차 싱크 완료

src/app/editor/panels/BlocksSidebar.tsx

@@ -68,7 +68,7 @@ export function BlocksSidebar() {
   );
 
   return (
-    <aside className="w-60 border-r border-slate-800 p-4 text-sm space-y-3">
+    <aside className="w-60 border-r border-slate-800 p-4 text-sm space-y-3 overflow-y-auto pb-scroll">
       <h2 className="font-medium">블록</h2>
       <button
         type="button"
@@ -152,71 +152,213 @@ export function BlocksSidebar() {
         </button>
       </div>
 
-      <div className="pt-3 border-t border-slate-800 mt-3 space-y-2">
+      <div className="pt-3 border-t border-slate-800 mt-3 space-y-3">
         <h3 className="text-[11px] font-medium text-slate-300">템플릿</h3>
-        <button
-          type="button"
-          className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
-          onClick={handleAddHeroTemplate}
-        >
-          Hero 템플릿 추가
-        </button>
-        <button
-          type="button"
-          className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
-          onClick={handleAddFeaturesTemplate}
-        >
-          Features 템플릿 추가
-        </button>
-        <button
-          type="button"
-          className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
-          onClick={handleAddCtaTemplate}
-        >
-          CTA 템플릿 추가
-        </button>
-        <button
-          type="button"
-          className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
-          onClick={handleAddFaqTemplate}
-        >
-          FAQ 템플릿 추가
-        </button>
-        <button
-          type="button"
-          className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
-          onClick={handleAddPricingTemplate}
-        >
-          Pricing 템플릿 추가
-        </button>
-        <button
-          type="button"
-          className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
-          onClick={handleAddTestimonialsTemplate}
-        >
-          Testimonials 템플릿 추가
-        </button>
-        <button
-          type="button"
-          className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
-          onClick={handleAddBlogTemplate}
-        >
-          Blog 템플릿 추가
-        </button>
-        <button
-          type="button"
-          className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
-          onClick={handleAddTeamTemplate}
-        >
-          Team 템플릿 추가
-        </button>
-        <button
-          type="button"
-          className="w-full rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
-          onClick={handleAddFooterTemplate}
-        >
-          Footer 템플릿 추가
-        </button>
+
+        <div className="space-y-2">
+          <p className="text-[10px] font-semibold text-slate-400">히어로 · CTA</p>
+          <div className="space-y-2">
+            <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
+              <div className="flex items-center justify-between gap-2">
+                <button
+                  type="button"
+                  className="flex-1 rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+                  onClick={handleAddHeroTemplate}
+                >
+                  Hero 템플릿 추가
+                </button>
+                <div
+                  data-testid="template-preview-hero"
+                  className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-700 bg-slate-900"
+                >
+                  <div className="flex-1 bg-slate-700/70" />
+                </div>
+              </div>
+              <p className="text-[10px] text-slate-400 leading-snug">
+                페이지 상단 Hero 섹션 (큰 제목 + 서브텍스트 + 버튼)
+              </p>
+            </div>
+
+            <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
+              <div className="flex items-center justify-between gap-2">
+                <button
+                  type="button"
+                  className="flex-1 rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+                  onClick={handleAddCtaTemplate}
+                >
+                  CTA 템플릿 추가
+                </button>
+                <div
+                  data-testid="template-preview-cta"
+                  className="shrink-0 flex h-6 w-10 items-center justify-center gap-[2px] rounded border border-slate-700 bg-slate-900"
+                >
+                  <div className="h-2 w-6 rounded bg-slate-700/70" />
+                </div>
+              </div>
+              <p className="text-[10px] text-slate-400 leading-snug">콜투액션(CTA) 섹션</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <p className="text-[10px] font-semibold text-slate-400">콘텐츠 섹션</p>
+          <div className="space-y-2">
+            <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
+              <div className="flex items-center justify-between gap-2">
+                <button
+                  type="button"
+                  className="flex-1 rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+                  onClick={handleAddFeaturesTemplate}
+                >
+                  Features 템플릿 추가
+                </button>
+                <div
+                  data-testid="template-preview-features"
+                  className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-700 bg-slate-900"
+                >
+                  <div className="flex-1 bg-slate-700/70" />
+                  <div className="flex-1 bg-slate-700/50" />
+                  <div className="flex-1 bg-slate-700/70" />
+                </div>
+              </div>
+              <p className="text-[10px] text-slate-400 leading-snug">3컬럼 기능 소개 섹션</p>
+            </div>
+
+            <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
+              <div className="flex items-center justify-between gap-2">
+                <button
+                  type="button"
+                  className="flex-1 rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+                  onClick={handleAddFaqTemplate}
+                >
+                  FAQ 템플릿 추가
+                </button>
+                <div
+                  data-testid="template-preview-faq"
+                  className="shrink-0 flex h-6 w-10 flex-col justify-center gap-[2px] rounded border border-slate-700 bg-slate-900"
+                >
+                  <div className="h-[2px] w-full bg-slate-700/70" />
+                  <div className="h-[2px] w-full bg-slate-700/40" />
+                  <div className="h-[2px] w-full bg-slate-700/70" />
+                </div>
+              </div>
+              <p className="text-[10px] text-slate-400 leading-snug">자주 묻는 질문(FAQ) 섹션</p>
+            </div>
+
+            <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
+              <div className="flex items-center justify-between gap-2">
+                <button
+                  type="button"
+                  className="flex-1 rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+                  onClick={handleAddPricingTemplate}
+                >
+                  Pricing 템플릿 추가
+                </button>
+                <div
+                  data-testid="template-preview-pricing"
+                  className="shrink-0 flex h-6 w-10 items-end gap-[2px] rounded border border-slate-700 bg-slate-900"
+                >
+                  <div className="h-2 flex-1 bg-slate-700/40" />
+                  <div className="h-4 flex-1 bg-slate-700/70" />
+                  <div className="h-3 flex-1 bg-slate-700/50" />
+                </div>
+              </div>
+              <p className="text-[10px] text-slate-400 leading-snug">요금제/플랜 소개 섹션</p>
+            </div>
+
+            <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
+              <div className="flex items-center justify-between gap-2">
+                <button
+                  type="button"
+                  className="flex-1 rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+                  onClick={handleAddBlogTemplate}
+                >
+                  Blog 템플릿 추가
+                </button>
+                <div
+                  data-testid="template-preview-blog"
+                  className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-700 bg-slate-900"
+                >
+                  <div className="flex-1 bg-slate-700/70" />
+                  <div className="flex-1 bg-slate-700/50" />
+                  <div className="flex-1 bg-slate-700/70" />
+                </div>
+              </div>
+              <p className="text-[10px] text-slate-400 leading-snug">블로그 포스트 목록 섹션</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <p className="text-[10px] font-semibold text-slate-400">신뢰/소개</p>
+          <div className="space-y-2">
+            <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
+              <div className="flex items-center justify-between gap-2">
+                <button
+                  type="button"
+                  className="flex-1 rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+                  onClick={handleAddTestimonialsTemplate}
+                >
+                  Testimonials 템플릿 추가
+                </button>
+                <div
+                  data-testid="template-preview-testimonials"
+                  className="shrink-0 flex h-6 w-10 flex-col justify-center gap-[2px] rounded border border-slate-700 bg-slate-900"
+                >
+                  <div className="h-[2px] w-full bg-slate-700/70" />
+                  <div className="h-[2px] w-3/4 bg-slate-700/50" />
+                </div>
+              </div>
+              <p className="text-[10px] text-slate-400 leading-snug">고객 후기(Testimonials) 섹션</p>
+            </div>
+
+            <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
+              <div className="flex items-center justify-between gap-2">
+                <button
+                  type="button"
+                  className="flex-1 rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+                  onClick={handleAddTeamTemplate}
+                >
+                  Team 템플릿 추가
+                </button>
+                <div
+                  data-testid="template-preview-team"
+                  className="shrink-0 flex h-6 w-10 items-end gap-[2px] rounded border border-slate-700 bg-slate-900"
+                >
+                  <div className="h-3 flex-1 bg-slate-700/60" />
+                  <div className="h-4 flex-1 bg-slate-700/80" />
+                  <div className="h-2 flex-1 bg-slate-700/50" />
+                </div>
+              </div>
+              <p className="text-[10px] text-slate-400 leading-snug">팀 소개 섹션</p>
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-2">
+          <p className="text-[10px] font-semibold text-slate-400">푸터/기타</p>
+          <div className="space-y-2">
+            <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
+              <div className="flex items-center justify-between gap-2">
+                <button
+                  type="button"
+                  className="flex-1 rounded border border-slate-700 bg-slate-900 px-3 py-2 text-left text-xs hover:bg-slate-800"
+                  onClick={handleAddFooterTemplate}
+                >
+                  Footer 템플릿 추가
+                </button>
+                <div
+                  data-testid="template-preview-footer"
+                  className="shrink-0 flex h-6 w-10 flex-col justify-end gap-[2px] rounded border border-slate-700 bg-slate-900"
+                >
+                  <div className="h-[2px] w-full bg-slate-700/40" />
+                  <div className="h-[2px] w-3/4 bg-slate-700/70" />
+                </div>
+              </div>
+              <p className="text-[10px] text-slate-400 leading-snug">페이지 푸터 섹션</p>
+            </div>
+          </div>
+        </div>
       </div>
     </aside>
   );