테마 적용

2025-12-09 18:53:21 +09:00
parent 9d8c4538c7
commit 676e58cad7
71 changed files with 3394 additions and 498 deletions
@@ -90,8 +90,11 @@ export function BlocksSidebar() {
  const [isTemplatesOpen, setIsTemplatesOpen] = useState(true);

  return (
-    <aside className="w-60 border-r border-slate-800 p-4 text-sm space-y-3 overflow-y-auto pb-scroll bg-slate-950/40">
-      <h2 className="font-medium flex items-center gap-2 text-slate-200">
+    <aside
+      data-testid="blocks-sidebar"
+      className="w-60 border-r border-slate-200 bg-white p-4 text-sm space-y-3 overflow-y-auto pb-scroll dark:border-slate-800 dark:bg-slate-950/40"
+    >
+      <h2 className="font-medium flex items-center gap-2 text-slate-900 dark:text-slate-100">
        <button
          type="button"
          className="flex items-center justify-between w-full text-left"
@@ -108,7 +111,7 @@ export function BlocksSidebar() {
        <>
          <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"
+            className="w-full rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
            onClick={handleAddText}
          >
            <span className="inline-flex items-center gap-2">
@@ -118,7 +121,7 @@ export function BlocksSidebar() {
          </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"
+            className="w-full rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
            onClick={handleAddButton}
          >
            <span className="inline-flex items-center gap-2">
@@ -128,7 +131,7 @@ export function BlocksSidebar() {
          </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"
+            className="w-full rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
            onClick={handleAddImage}
          >
            <span className="inline-flex items-center gap-2">
@@ -138,7 +141,7 @@ export function BlocksSidebar() {
          </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"
+            className="w-full rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
            onClick={handleAddVideo}
          >
            <span className="inline-flex items-center gap-2">
@@ -148,7 +151,7 @@ export function BlocksSidebar() {
          </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"
+            className="w-full rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
            onClick={handleAddDivider}
          >
            <span className="inline-flex items-center gap-2">
@@ -158,7 +161,7 @@ export function BlocksSidebar() {
          </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"
+            className="w-full rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
            onClick={handleAddList}
          >
            <span className="inline-flex items-center gap-2">
@@ -168,7 +171,7 @@ export function BlocksSidebar() {
          </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"
+            className="w-full rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
            onClick={handleAddSection}
          >
            <span className="inline-flex items-center gap-2">
@@ -179,8 +182,8 @@ export function BlocksSidebar() {
        </>
      )}

-      <div className="pt-3 border-t border-slate-800 mt-3 space-y-2">
-        <h3 className="text-[11px] font-medium text-slate-300 flex items-center gap-2">
+      <div className="pt-3 border-t border-slate-200 mt-3 space-y-2 dark:border-slate-800">
+        <h3 className="text-[11px] font-medium text-slate-800 flex items-center gap-2 dark:text-slate-200">
          <button
            type="button"
            className="flex items-center justify-between w-full text-left"
@@ -197,7 +200,7 @@ export function BlocksSidebar() {
          <>
            <button
              type="button"
-              className="w-full rounded border border-emerald-700 bg-emerald-950 px-3 py-2 text-left text-xs text-emerald-100 hover:bg-emerald-900"
+              className="w-full rounded border border-emerald-200 bg-emerald-50 px-3 py-2 text-left text-xs text-emerald-900 hover:bg-emerald-100 dark:border-emerald-700 dark:bg-emerald-950 dark:text-emerald-100 dark:hover:bg-emerald-900"
              onClick={handleAddFormBlock}
            >
              <span className="inline-flex items-center gap-2">
@@ -207,7 +210,7 @@ export function BlocksSidebar() {
            </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"
+              className="w-full rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
              onClick={handleAddFormInput}
            >
              <span className="inline-flex items-center gap-2">
@@ -217,7 +220,7 @@ export function BlocksSidebar() {
            </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"
+              className="w-full rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
              onClick={handleAddFormSelect}
            >
              <span className="inline-flex items-center gap-2">
@@ -227,7 +230,7 @@ export function BlocksSidebar() {
            </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"
+              className="w-full rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
              onClick={handleAddFormRadio}
            >
              <span className="inline-flex items-center gap-2">
@@ -237,7 +240,7 @@ export function BlocksSidebar() {
            </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"
+              className="w-full rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
              onClick={handleAddFormCheckbox}
            >
              <span className="inline-flex items-center gap-2">
@@ -249,8 +252,8 @@ export function BlocksSidebar() {
        )}
      </div>

-      <div className="pt-3 border-t border-slate-800 mt-3 space-y-3">
-        <h3 className="text-[11px] font-medium text-slate-300 flex items-center gap-2">
+      <div className="pt-3 border-t border-slate-200 mt-3 space-y-3 dark:border-slate-800">
+        <h3 className="text-[11px] font-medium text-slate-800 flex items-center gap-2 dark:text-slate-200">
          <button
            type="button"
            className="flex items-center justify-between w-full text-left"
@@ -267,20 +270,20 @@ export function BlocksSidebar() {
        {isTemplatesOpen && (
          <div className="space-y-3">
            <div className="space-y-2">
-              <p className="text-[10px] font-semibold text-slate-400">히어로 · CTA</p>
+              <p className="text-[10px] font-semibold text-slate-600 dark: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="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
                  <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"
+                      className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
                      onClick={handleAddHeroTemplate}
                    >
                      Hero 템플릿
                    </button>
                    <div
                      data-testid="template-preview-hero"
-                      className="shrink-0 flex h-6 w-10 rounded border border-slate-700 bg-slate-900 p-[2px]"
+                      className="shrink-0 flex h-6 w-10 rounded border border-slate-300 bg-slate-100 p-[2px] dark:border-slate-700 dark:bg-slate-900"
                    >
                      <div className="flex h-full w-full flex-col items-center justify-center gap-[2px]">
                        <div className="h-[2px] w-3/4 bg-slate-700/70" />
@@ -294,18 +297,18 @@ export function BlocksSidebar() {
                  </p>
                </div>

-                <div className="rounded border border-slate-800 bg-slate-950/50 p-2 space-y-1">
+                <div className="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
                  <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"
+                      className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
                      onClick={handleAddCtaTemplate}
                    >
                      CTA 템플릿
                    </button>
                    <div
                      data-testid="template-preview-cta"
-                      className="shrink-0 flex h-6 w-10 rounded border border-slate-700 bg-slate-900 p-[2px]"
+                      className="shrink-0 flex h-6 w-10 rounded border border-slate-300 bg-slate-100 p-[2px] dark:border-slate-700 dark:bg-slate-900"
                    >
                      <div className="flex h-full w-full items-center gap-[2px]">
                        <div className="flex-1 flex flex-col justify-center gap-[1px]">
@@ -322,20 +325,20 @@ export function BlocksSidebar() {
            </div>

            <div className="space-y-2">
-              <p className="text-[10px] font-semibold text-slate-400">콘텐츠 섹션</p>
+              <p className="text-[10px] font-semibold text-slate-600 dark: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="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
                  <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"
+                      className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
                      onClick={handleAddFeaturesTemplate}
                    >
                      기능 템플릿
                    </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 p-[2px]"
+                      className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-300 bg-slate-100 p-[2px] dark:border-slate-700 dark:bg-slate-900"
                    >
                      <div className="flex-1 flex flex-col gap-[1px]">
                        <div className="h-[2px] w-full bg-slate-700/70" />
@@ -354,18 +357,18 @@ export function BlocksSidebar() {
                  <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="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
                  <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"
+                      className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
                      onClick={handleAddFaqTemplate}
                    >
                      FAQ 템플릿
                    </button>
                    <div
                      data-testid="template-preview-faq"
-                      className="shrink-0 flex h-6 w-10 items-start gap-[2px] rounded border border-slate-700 bg-slate-900 p-[2px]"
+                      className="shrink-0 flex h-6 w-10 items-start gap-[2px] rounded border border-slate-300 bg-slate-100 p-[2px] dark:border-slate-700 dark:bg-slate-900"
                    >
                      <div className="w-2 flex flex-col gap-[1px]">
                        <div className="h-[2px] w-full bg-slate-700/70" />
@@ -380,18 +383,18 @@ export function BlocksSidebar() {
                  <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="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
                  <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"
+                      className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
                      onClick={handleAddPricingTemplate}
                    >
                      상품 템플릿
                    </button>
                    <div
                      data-testid="template-preview-pricing"
-                      className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-700 bg-slate-900 p-[2px]"
+                      className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-300 bg-slate-100 p-[2px] dark:border-slate-700 dark:bg-slate-900"
                    >
                      <div className="flex-1 flex flex-col items-center justify-end gap-[1px] border border-slate-700/30 rounded-[1px]">
                        <div className="h-[1px] w-1/2 bg-slate-700/70" />
@@ -411,18 +414,18 @@ export function BlocksSidebar() {
                  <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="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
                  <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"
+                      className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
                      onClick={handleAddBlogTemplate}
                    >
                      블로그 템플릿
                    </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 p-[2px]"
+                      className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-300 bg-slate-100 p-[2px] dark:border-slate-700 dark:bg-slate-900"
                    >
                      <div className="flex-1 flex flex-col gap-[1px]">
                        <div className="h-2 w-full bg-slate-600/50 rounded-[1px]" />
@@ -447,20 +450,20 @@ export function BlocksSidebar() {
            </div>

            <div className="space-y-2">
-              <p className="text-[10px] font-semibold text-slate-400">신뢰/소개</p>
+              <p className="text-[10px] font-semibold text-slate-600 dark: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="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
                  <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"
+                      className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
                      onClick={handleAddTestimonialsTemplate}
                    >
                      후기 템플릿
                    </button>
                    <div
                      data-testid="template-preview-testimonials"
-                      className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-700 bg-slate-900 p-[2px]"
+                      className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-300 bg-slate-100 p-[2px] dark:border-slate-700 dark:bg-slate-900"
                    >
                      <div className="flex-1 flex flex-col justify-between border border-slate-700/30 rounded-[1px] p-[1px]">
                        <div className="h-[1px] w-full bg-slate-700/50" />
@@ -479,18 +482,18 @@ export function BlocksSidebar() {
                  <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="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
                  <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"
+                      className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
                      onClick={handleAddTeamTemplate}
                    >
                      Team 템플릿
                    </button>
                    <div
                      data-testid="template-preview-team"
-                      className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-700 bg-slate-900 p-[2px]"
+                      className="shrink-0 flex h-6 w-10 items-stretch gap-[2px] rounded border border-slate-300 bg-slate-100 p-[2px] dark:border-slate-700 dark:bg-slate-900"
                    >
                      <div className="flex-1 flex flex-col items-center gap-[1px]">
                        <div className="h-2 w-2 rounded-full bg-slate-600/80" />
@@ -515,20 +518,20 @@ export function BlocksSidebar() {
            </div>

            <div className="space-y-2">
-              <p className="text-[10px] font-semibold text-slate-400">푸터/기타</p>
+              <p className="text-[10px] font-semibold text-slate-600 dark: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="rounded border border-slate-200 bg-slate-50 p-2 space-y-1 dark:border-slate-800 dark:bg-slate-950/50">
                  <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"
+                      className="flex-1 rounded border border-slate-200 bg-slate-50 px-3 py-2 text-left text-xs text-slate-900 hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100 dark:hover:bg-slate-800"
                      onClick={handleAddFooterTemplate}
                    >
                      Footer 템플릿
                    </button>
                    <div
                      data-testid="template-preview-footer"
-                      className="shrink-0 flex h-6 w-10 items-center justify-between gap-[2px] rounded border border-slate-700 bg-slate-900 p-[2px]"
+                      className="shrink-0 flex h-6 w-10 items-center justify-between gap-[2px] rounded border border-slate-300 bg-slate-100 p-[2px] dark:border-slate-700 dark:bg-slate-900"
                    >
                      <div className="flex-1 h-[2px] bg-slate-700/70" />
                      <div className="flex-1 flex flex-col gap-[1px]">