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

src/app/preview/page.tsx

@@ -39,27 +39,35 @@ export default function PreviewPage() {
   useEffect(() => {
     if (typeof window === "undefined") return;
 
-    let slug = (projectConfig as any)?.slug?.trim?.();
+    const configSlugRaw = (projectConfig as any)?.slug?.trim?.();
+    const configSlug =
+      typeof configSlugRaw === "string" && configSlugRaw.length > 0 ? configSlugRaw : "";
 
-    if (!slug) {
-      try {
-        const url = new URL(window.location.href);
-        const fromQuery = url.searchParams.get("slug")?.trim();
+    let querySlug = "";
+    try {
+      const url = new URL(window.location.href);
+      const fromQuery = url.searchParams.get("slug")?.trim();
 
-        if (fromQuery && fromQuery !== slug) {
-          slug = fromQuery;
-          updateProjectConfig({ slug: fromQuery } as any);
-        }
-      } catch {
-        // URL 파싱 오류는 무시하고, autosave 복원 없이 진행한다.
+      if (fromQuery) {
+        querySlug = fromQuery;
       }
+    } catch {
+      // URL 파싱 오류는 무시하고, autosave 복원 없이 진행한다.
     }
 
-    if (!slug) return;
+    const effectiveSlug = querySlug || configSlug;
+    if (!effectiveSlug) return;
 
-    const key = `pb:autosave:${slug}`;
+    const key = `pb:autosave:${effectiveSlug}`;
     const raw = window.localStorage.getItem(key);
-    if (!raw) return;
+
+    if (!raw) {
+      // autosave 스냅샷이 없을 때만 URL 쿼리 슬러그를 projectConfig.slug 에 동기화한다.
+      if (querySlug && querySlug !== configSlug) {
+        updateProjectConfig({ slug: querySlug } as any);
+      }
+      return;
+    }
 
     try {
       const parsed = JSON.parse(raw) as { blocks?: any[]; projectConfig?: any };
@@ -68,6 +76,9 @@ export default function PreviewPage() {
       }
       if (parsed.projectConfig) {
         updateProjectConfig(parsed.projectConfig as any);
+      } else if (querySlug && querySlug !== configSlug) {
+        // 스냅샷에 projectConfig 가 없을 때만 쿼리 슬러그를 반영한다.
+        updateProjectConfig({ slug: querySlug } as any);
       }
 
       // 프리뷰 진입 시 autosave 프로젝트를 복원하는 경우에도 에디터 히스토리는 새 프로젝트 기준으로만 유지되도록 초기화한다.
@@ -125,6 +136,13 @@ export default function PreviewPage() {
       ? projectConfig.canvasWidthPx
       : null;
 
+  const projectSlugRaw = (projectConfig as any)?.slug?.trim?.();
+  const projectSlug =
+    typeof projectSlugRaw === "string" && projectSlugRaw.length > 0 ? projectSlugRaw : "";
+  const editorHref = projectSlug
+    ? `/editor?slug=${encodeURIComponent(projectSlug)}`
+    : "/editor";
+
   if (widthPx != null) {
     canvasStyle.maxWidth = `${widthPx}px`;
   } else if (preset === "mobile") {
@@ -163,7 +181,7 @@ export default function PreviewPage() {
             프로젝트 목록
           </Link>
           <Link
-            href="/editor"
+            href={editorHref}
             className="inline-flex items-center rounded border border-slate-700 bg-slate-900 px-3 py-1 text-xs text-slate-100 hover:bg-slate-800"
           >
             에디터로 돌아가기