TDD,E2E 개선, 미적용 스타일 개선

tests/unit/PreviewAutosave.spec.tsx

@@ -100,4 +100,49 @@ describe("PreviewPage - 자동 복원", () => {
     expect(mockState.updateProjectConfig).toHaveBeenCalledTimes(1);
     expect(mockState.updateProjectConfig).toHaveBeenCalledWith(savedConfig as ProjectConfig);
   });
+
+  it("URL 쿼리의 slug 가 projectConfig.slug 와 달라도 URL slug 기준 autosave 를 복원해야 한다", () => {
+    const savedBlocks: Block[] = [
+      {
+        id: "saved_query_1",
+        type: "text",
+        props: {
+          text: "쿼리 슬러그 기반 프리뷰 블록",
+          align: "center",
+          size: "lg",
+        },
+      } as any,
+    ];
+
+    const savedConfig: ProjectConfig = {
+      title: "쿼리 슬러그 프리뷰 프로젝트",
+      slug: "preview-autosave-from-query",
+      canvasPreset: "full",
+    } as ProjectConfig;
+
+    const payload = {
+      blocks: savedBlocks,
+      projectConfig: savedConfig,
+    };
+
+    // projectConfig.slug 는 다른 값으로 시작하지만,
+    // /preview?slug=preview-autosave-from-query URL 기준으로 autosave 를 복원해야 한다.
+    (mockState.projectConfig as ProjectConfig).slug = "other-slug" as any;
+
+    window.localStorage.setItem(
+      "pb:autosave:preview-autosave-from-query",
+      JSON.stringify(payload),
+    );
+
+    // jsdom 환경에서 URL 쿼리 슬러그를 시뮬레이션한다.
+    window.history.pushState({}, "", "/preview?slug=preview-autosave-from-query");
+
+    render(<PreviewPage />);
+
+    expect(mockState.replaceBlocks).toHaveBeenCalledTimes(1);
+    expect(mockState.replaceBlocks).toHaveBeenCalledWith(savedBlocks as any);
+
+    expect(mockState.updateProjectConfig).toHaveBeenCalledTimes(1);
+    expect(mockState.updateProjectConfig).toHaveBeenCalledWith(savedConfig as ProjectConfig);
+  });
 });