폼전송 기능 수정

2025-12-07 19:11:06 +09:00
parent 96fa34cd86
commit 243083261f
27 changed files with 1025 additions and 5 deletions
@@ -0,0 +1,155 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { render, cleanup, waitFor } from "@testing-library/react";
+import EditorPage from "@/app/editor/page";
+import type { Block, ProjectConfig } from "@/features/editor/state/editorStore";
+
+let mockState: any;
+let searchParamsSlug: string | null = null;
+let searchParamsNew: string | null = null;
+
+beforeEach(() => {
+  const baseProjectConfig: ProjectConfig = {
+    title: "기존 프로젝트",
+    slug: "existing-slug",
+    canvasPreset: "full",
+  } as ProjectConfig;
+
+  mockState = {
+    blocks: [
+      {
+        id: "blk_existing",
+        type: "text",
+        props: {
+          text: "기존 프로젝트 블록",
+          align: "left",
+          size: "base",
+        },
+      },
+    ] as Block[],
+    projectConfig: baseProjectConfig,
+    selectedBlockId: null as string | null,
+    selectedListItemId: null as string | null,
+    undo: vi.fn(),
+    redo: vi.fn(),
+    removeBlock: vi.fn(),
+    duplicateBlock: vi.fn(),
+    selectBlock: vi.fn(),
+    selectListItem: vi.fn(),
+    replaceBlocks: vi.fn((nextBlocks: Block[]) => {
+      mockState.blocks = nextBlocks;
+    }),
+    reorderBlocks: vi.fn(),
+    moveBlock: vi.fn(),
+    addTextBlock: vi.fn(),
+    addButtonBlock: vi.fn(),
+    addImageBlock: vi.fn(),
+    addDividerBlock: vi.fn(),
+    addListBlock: vi.fn(),
+    addSectionBlock: vi.fn(),
+    addFormBlock: vi.fn(),
+    addFormInputBlock: vi.fn(),
+    addFormSelectBlock: vi.fn(),
+    addFormCheckboxBlock: vi.fn(),
+    addFormRadioBlock: vi.fn(),
+    addHeroTemplateSection: vi.fn(),
+    addFeaturesTemplateSection: vi.fn(),
+    addCtaTemplateSection: vi.fn(),
+    addFaqTemplateSection: vi.fn(),
+    addPricingTemplateSection: vi.fn(),
+    addTestimonialsTemplateSection: vi.fn(),
+    addBlogTemplateSection: vi.fn(),
+    addTeamTemplateSection: vi.fn(),
+    addFooterTemplateSection: vi.fn(),
+    updateBlock: vi.fn(),
+    updateProjectConfig: vi.fn((partial: Partial<ProjectConfig>) => {
+      mockState.projectConfig = {
+        ...(mockState.projectConfig as ProjectConfig),
+        ...partial,
+      } as ProjectConfig;
+    }),
+    resetHistory: vi.fn(),
+  };
+
+  window.localStorage.clear();
+  searchParamsSlug = null;
+  searchParamsNew = null;
+});
+
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
+vi.mock("@/features/editor/state/editorStore", () => {
+  const useEditorStore = (selector: (state: any) => any) => selector(mockState);
+  (useEditorStore as any).getState = () => mockState;
+
+  return {
+    __esModule: true,
+    useEditorStore,
+  };
+});
+
+vi.mock("next/link", () => {
+  return {
+    __esModule: true,
+    default: ({ href, children }: any) => <a href={href}>{children}</a>,
+  };
+});
+
+vi.mock("next/navigation", () => {
+  return {
+    __esModule: true,
+    useRouter: () => ({
+      push: vi.fn(),
+    }),
+    useSearchParams: () => ({
+      get: (key: string) => {
+        if (key === "slug") return searchParamsSlug;
+        if (key === "new") return searchParamsNew;
+        return null;
+      },
+    }),
+  };
+});
+
+describe("EditorPage - 프로젝트 목록에서 새 프로젝트 만들기", () => {
+  it("/editor?new=1 로 진입하면 기존 프로젝트 상태를 초기화하고 새 캔버스를 열어야 한다", async () => {
+    searchParamsNew = "1";
+
+    const fetchMock = vi.fn().mockImplementation((input: any, init?: any) => {
+      const url = typeof input === "string" ? input : input.url;
+      const method = init?.method ?? "GET";
+
+      if (url === "/api/auth/me" && method === "GET") {
+        return Promise.resolve(
+          new Response(
+            JSON.stringify({ id: "user-1", email: "user@example.com", tokenVersion: 1 }),
+            {
+              status: 200,
+              headers: { "Content-Type": "application/json" },
+            },
+          ),
+        );
+      }
+
+      return Promise.resolve(new Response(null, { status: 200 }));
+    });
+
+    vi.stubGlobal("fetch", fetchMock as any);
+
+    render(<EditorPage />);
+
+    await waitFor(() => {
+      expect(fetchMock).toHaveBeenCalled();
+    });
+
+    await waitFor(() => {
+      expect(Array.isArray(mockState.blocks)).toBe(true);
+      expect(mockState.blocks.length).toBe(0);
+
+      const slug = (mockState.projectConfig as ProjectConfig).slug;
+      expect(slug).not.toBe("existing-slug");
+    });
+  });
+});
@@ -0,0 +1,289 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { render, cleanup, waitFor } from "@testing-library/react";
+import EditorPage from "@/app/editor/page";
+import type { Block, ProjectConfig } from "@/features/editor/state/editorStore";
+
+let mockState: any;
+let searchParamsSlug: string | null = null;
+
+beforeEach(() => {
+  const baseProjectConfig: ProjectConfig = {
+    title: "서버 자동저장 테스트",
+    slug: "my-landing",
+    canvasPreset: "full",
+  } as ProjectConfig;
+
+  mockState = {
+    blocks: [
+      {
+        id: "blk_1",
+        type: "text",
+        props: {
+          text: "서버 자동저장 블록",
+          align: "left",
+          size: "base",
+        },
+      },
+    ] as Block[],
+    projectConfig: baseProjectConfig,
+    selectedBlockId: null as string | null,
+    selectedListItemId: null as string | null,
+    undo: vi.fn(),
+    redo: vi.fn(),
+    removeBlock: vi.fn(),
+    duplicateBlock: vi.fn(),
+    selectBlock: vi.fn(),
+    selectListItem: vi.fn(),
+    replaceBlocks: vi.fn(),
+    reorderBlocks: vi.fn(),
+    moveBlock: vi.fn(),
+    addTextBlock: vi.fn(),
+    addButtonBlock: vi.fn(),
+    addImageBlock: vi.fn(),
+    addDividerBlock: vi.fn(),
+    addListBlock: vi.fn(),
+    addSectionBlock: vi.fn(),
+    addFormBlock: vi.fn(),
+    addFormInputBlock: vi.fn(),
+    addFormSelectBlock: vi.fn(),
+    addFormCheckboxBlock: vi.fn(),
+    addFormRadioBlock: vi.fn(),
+    addHeroTemplateSection: vi.fn(),
+    addFeaturesTemplateSection: vi.fn(),
+    addCtaTemplateSection: vi.fn(),
+    addFaqTemplateSection: vi.fn(),
+    addPricingTemplateSection: vi.fn(),
+    addTestimonialsTemplateSection: vi.fn(),
+    addBlogTemplateSection: vi.fn(),
+    addTeamTemplateSection: vi.fn(),
+    addFooterTemplateSection: vi.fn(),
+    updateBlock: vi.fn(),
+    updateProjectConfig: vi.fn((partial: Partial<ProjectConfig>) => {
+      mockState.projectConfig = {
+        ...(mockState.projectConfig as ProjectConfig),
+        ...partial,
+      } as ProjectConfig;
+    }),
+    resetHistory: vi.fn(),
+  };
+
+  window.localStorage.clear();
+  searchParamsSlug = null;
+
+  vi.useFakeTimers();
+});
+
+afterEach(() => {
+  cleanup();
+  vi.useRealTimers();
+  vi.unstubAllGlobals();
+});
+
+vi.mock("@/features/editor/state/editorStore", () => {
+  const useEditorStore = (selector: (state: any) => any) => selector(mockState);
+  (useEditorStore as any).getState = () => mockState;
+
+  return {
+    __esModule: true,
+    useEditorStore,
+  };
+});
+
+vi.mock("next/link", () => {
+  return {
+    __esModule: true,
+    default: ({ href, children }: any) => <a href={href}>{children}</a>,
+  };
+});
+
+vi.mock("next/navigation", () => {
+  return {
+    __esModule: true,
+    useRouter: () => ({
+      push: vi.fn(),
+    }),
+    useSearchParams: () => ({
+      get: (key: string) => (key === "slug" ? searchParamsSlug : null),
+    }),
+  };
+});
+
+describe("EditorPage - 서버 자동 저장", () => {
+  it("로그인된 사용자가 새 페이지를 편집하면 자동 생성된 slug 로 /api/projects 에 주기적으로 저장해야 한다", async () => {
+    const fetchMock = vi.fn().mockImplementation((input: any, init?: any) => {
+      const url = typeof input === "string" ? input : input.url;
+      const method = init?.method ?? "GET";
+
+      if (url === "/api/auth/me" && method === "GET") {
+        return Promise.resolve(
+          new Response(
+            JSON.stringify({ id: "user-1", email: "user@example.com", tokenVersion: 1 }),
+            {
+              status: 200,
+              headers: { "Content-Type": "application/json" },
+            },
+          ),
+        );
+      }
+
+      if (url === "/api/projects" && method === "POST") {
+        return Promise.resolve(
+          new Response(
+            JSON.stringify({ slug: JSON.parse((init?.body as string) ?? "{}").slug }),
+            {
+              status: 201,
+              headers: { "Content-Type": "application/json" },
+            },
+          ),
+        );
+      }
+
+      return Promise.resolve(new Response(null, { status: 200 }));
+    });
+
+    vi.stubGlobal("fetch", fetchMock as any);
+
+    render(<EditorPage />);
+
+    await waitFor(() => {
+      expect(
+        fetchMock.mock.calls.some(
+          ([url, options]: any[]) => url === "/api/auth/me" && (options?.method ?? "GET") === "GET",
+        ),
+      ).toBe(true);
+    });
+
+    await vi.advanceTimersByTimeAsync(20000);
+
+    await waitFor(() => {
+      expect(
+        fetchMock.mock.calls.some(
+          ([url, options]: any[]) => url === "/api/projects" && (options?.method ?? "GET") === "POST",
+        ),
+      ).toBe(true);
+    });
+
+    const projectCall = fetchMock.mock.calls.find(
+      ([url, options]: any[]) => url === "/api/projects" && (options?.method ?? "GET") === "POST",
+    ) as any;
+
+    const [, options] = projectCall;
+    const body = JSON.parse((options.body as string) ?? "{}");
+
+    expect(typeof body.slug).toBe("string");
+    expect(body.slug).not.toBe("my-landing");
+    expect(mockState.projectConfig.slug).toBe(body.slug);
+  });
+
+  it("authUserId 가 없으면 /api/projects 자동 저장을 호출하지 않아야 한다", async () => {
+    const fetchMock = vi.fn().mockImplementation((input: any, init?: any) => {
+      const url = typeof input === "string" ? input : input.url;
+      const method = init?.method ?? "GET";
+
+      if (url === "/api/auth/me" && method === "GET") {
+        return Promise.resolve(new Response(null, { status: 200 }));
+      }
+
+      return Promise.resolve(new Response(null, { status: 200 }));
+    });
+
+    vi.stubGlobal("fetch", fetchMock as any);
+
+    render(<EditorPage />);
+
+    await waitFor(() => {
+      expect(
+        fetchMock.mock.calls.some(
+          ([url]: any[]) => url === "/api/auth/me",
+        ),
+      ).toBe(true);
+    });
+
+    await vi.advanceTimersByTimeAsync(20000);
+
+    const projectCalls = fetchMock.mock.calls.filter(
+      ([url, options]: any[]) => url === "/api/projects" && (options?.method ?? "GET") === "POST",
+    );
+
+    expect(projectCalls.length).toBe(0);
+  });
+
+  it("slug 쿼리 파라미터로 기존 프로젝트를 열었을 때는 해당 slug 로 서버 자동 저장을 해야 한다", async () => {
+    searchParamsSlug = "existing-slug";
+    mockState.projectConfig.slug = "my-landing" as any;
+
+    const fetchMock = vi.fn().mockImplementation((input: any, init?: any) => {
+      const url = typeof input === "string" ? input : input.url;
+      const method = init?.method ?? "GET";
+
+      if (url === "/api/auth/me" && method === "GET") {
+        return Promise.resolve(
+          new Response(
+            JSON.stringify({ id: "user-1", email: "user@example.com", tokenVersion: 1 }),
+            {
+              status: 200,
+              headers: { "Content-Type": "application/json" },
+            },
+          ),
+        );
+      }
+
+      if (url === "/api/projects/existing-slug" && method === "GET") {
+        return Promise.resolve(
+          new Response(
+            JSON.stringify({
+              slug: "existing-slug",
+              title: "기존 프로젝트",
+              contentJson: mockState.blocks,
+            }),
+            {
+              status: 200,
+              headers: { "Content-Type": "application/json" },
+            },
+          ),
+        );
+      }
+
+      if (url === "/api/projects" && method === "POST") {
+        return Promise.resolve(
+          new Response(
+            JSON.stringify({ slug: JSON.parse((init?.body as string) ?? "{}").slug }),
+            {
+              status: 201,
+              headers: { "Content-Type": "application/json" },
+            },
+          ),
+        );
+      }
+
+      return Promise.resolve(new Response(null, { status: 200 }));
+    });
+
+    vi.stubGlobal("fetch", fetchMock as any);
+
+    render(<EditorPage />);
+
+    await waitFor(() => {
+      expect(
+        fetchMock.mock.calls.some(
+          ([url, options]: any[]) =>
+            url === "/api/projects/existing-slug" && (options?.method ?? "GET") === "GET",
+        ),
+      ).toBe(true);
+    });
+
+    await vi.advanceTimersByTimeAsync(20000);
+
+    const projectCall = fetchMock.mock.calls.find(
+      ([url, options]: any[]) => url === "/api/projects" && (options?.method ?? "GET") === "POST",
+    ) as any;
+
+    expect(projectCall).toBeTruthy();
+
+    const [, options] = projectCall;
+    const body = JSON.parse((options.body as string) ?? "{}");
+
+    expect(body.slug).toBe("existing-slug");
+    expect(mockState.projectConfig.slug).toBe("existing-slug");
+  });
+});
@@ -151,4 +151,75 @@ describe("FormControllerPanel", () => {
    // 기본 선택 값은 FormBlock.submitButtonId 이어야 한다.
    expect(select.value).toBe("btn-1");
  });
+
+  it("submitTarget 이 webhook 인 경우 Google Sheets 연동 가이드 텍스트를 보여줘야 한다", () => {
+    const formBlock = makeFormBlock("form-webhook", {
+      submitTarget: "webhook",
+    } as any);
+
+    const updateBlock = vi.fn();
+
+    render(
+      <FormControllerPanel
+        block={formBlock}
+        blocks={[formBlock]}
+        selectedBlockId="form-webhook"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const guideButton = screen.getByRole("button", { name: "Google Sheets 연동 가이드" });
+    guideButton.click();
+
+    // Google Sheets 연동 가이드 헤딩과 Apps Script 안내 문구가 노출되어야 한다.
+    expect(screen.getByText("Google Sheets 연동 가이드")).toBeTruthy();
+    expect(
+      screen.getByText(/Apps Script 웹 앱 URL/i),
+    ).toBeTruthy();
+  });
+
+  it("Google Sheets 가이드 모달의 Apps Script 코드가 컨트롤러에 매핑된 전송 키와 작성일시를 포함해야 한다", () => {
+    const formBlock = makeFormBlock("form-webhook", {
+      submitTarget: "webhook",
+      fieldIds: ["input-name", "input-email"],
+    } as any);
+
+    const inputNameBlock: Block = {
+      id: "input-name",
+      type: "formInput",
+      props: {
+        label: "이름",
+        formFieldName: "name",
+      } as any,
+    } as any;
+
+    const inputEmailBlock: Block = {
+      id: "input-email",
+      type: "formInput",
+      props: {
+        label: "이메일",
+        formFieldName: "email",
+      } as any,
+    } as any;
+
+    const updateBlock = vi.fn();
+
+    render(
+      <FormControllerPanel
+        block={formBlock}
+        blocks={[formBlock, inputNameBlock, inputEmailBlock]}
+        selectedBlockId="form-webhook"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const guideButton = screen.getByRole("button", { name: "Google Sheets 연동 가이드" });
+    guideButton.click();
+
+    const scriptTextarea = screen.getByDisplayValue(/function doPost/) as HTMLTextAreaElement;
+
+    expect(scriptTextarea.value).toContain("params.name || \"\"");
+    expect(scriptTextarea.value).toContain("params.email || \"\"");
+    expect(scriptTextarea.value).toContain("new Date()");
+  });
 });