+
+ 
+
+ }
+ footer={
+
+ }
+ />
+
+ );
+}
diff --git a/solution/frontend/src/features/auth/SignInForm.tsx b/solution/frontend/src/features/auth/SignInForm.tsx
new file mode 100644
index 0000000..b9d04de
--- /dev/null
+++ b/solution/frontend/src/features/auth/SignInForm.tsx
@@ -0,0 +1,104 @@
+/**
+ * 로그인 폼 한 벌.
+ *
+ * ★ 로그인 화면과 에디터 진입 관문이 같은 폼을 쓴다. 두 벌로 두면 토큰을 심는 순서
+ * (signIn → me)가 한쪽에서만 지켜지고, 그 실수는 "로그인은 됐는데 계속 401" 로 나타난다.
+ */
+import {useState, type FormEvent, type ReactNode} from 'react';
+import {LogIn} from 'lucide-react';
+import {login, me, UserRole} from '@/api';
+import {Button} from '@/components/ui/button';
+import {Input} from '@/components/ui/input';
+import {notifyApiError} from '@/lib/notify';
+import {toAuthUser, useAuthStore} from '@/stores/auth';
+
+interface SignInFormProps {
+ /** 폼 위에 붙는 제목·설명. 화면마다 하는 말이 다르다. */
+ header: ReactNode;
+ /** 폼 아래 각주(빌더로 돌아가기 등). */
+ footer?: ReactNode;
+ submitLabel?: string;
+ onSignedIn?: () => void;
+}
+
+export function SignInForm({header, footer, submitLabel = '로그인', onSignedIn}: SignInFormProps) {
+ const signIn = useAuthStore((s) => s.signIn);
+ const [id, setId] = useState('');
+ const [password, setPassword] = useState('');
+ const [isSubmitting, setIsSubmitting] = useState(false);
+
+ const handleSubmit = async (event: FormEvent) => {
+ event.preventDefault();
+ setIsSubmitting(true);
+ try {
+ const res = await login({id, password});
+ if (res.result?.success === false) {
+ notifyApiError({data: res}, '아이디 또는 비밀번호를 확인해 주세요.');
+ return;
+ }
+ // ★ RemoveNoneResponse 라 성공 응답에서도 토큰 필드가 빠져 올 수 있다.
+ // 빈 토큰으로 로그인 상태를 만들면 이후 모든 요청이 401 로 흐른다 — 여기서 끊는다.
+ if (!res.access_token || !res.refresh_token) {
+ notifyApiError({data: res}, '로그인 응답에 토큰이 없습니다.');
+ return;
+ }
+ const tokens = {accessToken: res.access_token, refreshToken: res.refresh_token};
+
+ // 토큰을 먼저 심어야 뒤이은 me() 가 Authorization 을 달고 나간다.
+ signIn(tokens, {userId: '', id, role: UserRole.USER});
+
+ const meRes = await me();
+ // 신원이 안 왔으면 방금 심은 임시 사용자를 그대로 둔다 — 토큰은 유효하므로 화면은 진행시킨다.
+ if (meRes.user_id && meRes.id) signIn(tokens, toAuthUser(meRes));
+ onSignedIn?.();
+ } catch (error) {
+ notifyApiError(error, '로그인에 실패했습니다.');
+ } finally {
+ setIsSubmitting(false);
+ }
+ };
+
+ return (
+
+ );
+}
diff --git a/solution/frontend/src/features/builder/CanvasView.tsx b/solution/frontend/src/features/builder/CanvasView.tsx
index 7588037..4ed1789 100644
--- a/solution/frontend/src/features/builder/CanvasView.tsx
+++ b/solution/frontend/src/features/builder/CanvasView.tsx
@@ -60,6 +60,8 @@ export function CanvasView() {
// 템플릿을 바꿔도 화면 면적의 대부분이 그대로다 — 쇼케이스와 같은 식(lib/color.ts)을 쓴다.
const surfaces = deriveSurfaces(template.colors);
+ const look = template.look;
+
const themeVars = {
'--tpl-surface': surfaces.surface,
'--tpl-surface-alt': surfaces.surfaceAlt,
@@ -71,6 +73,28 @@ export function CanvasView() {
'--tpl-card': template.colors.card,
'--tpl-text': template.colors.text,
'--tpl-accent': template.colors.accent,
+
+ // 색만 바꾸면 템플릿이 다 같아 보인다 — 생김새를 가르는 건 아래쪽이다.
+ '--tpl-font-heading': look.fontHeading,
+ '--tpl-font-body': look.fontBody,
+ '--tpl-heading-tracking': look.headingTracking,
+ '--tpl-heading-weight': look.headingWeight,
+ '--tpl-section-space': look.sectionSpace,
+ '--tpl-border-width': look.borderWidth,
+
+ // ★ Tailwind v4 의 테마 변수를 캔버스 안에서만 덮는다. 이러면 변이 파일 40여 개에 흩어진
+ // rounded-* · shadow-* 를 하나도 안 고치고 전부 템플릿을 따르게 된다.
+ // 배수는 Tailwind 기본 비율(0.25/0.375/0.5/0.75/1/1.5rem)을 그대로 옮긴 것이라,
+ // 기준값이 0.75rem 이면 지금까지와 픽셀 단위로 같고 0 이면 전부 각진다.
+ '--radius-sm': `calc(${look.radius} * 0.34)`,
+ '--radius-md': `calc(${look.radius} * 0.5)`,
+ '--radius-lg': `calc(${look.radius} * 0.67)`,
+ '--radius-xl': look.radius,
+ '--radius-2xl': `calc(${look.radius} * 1.34)`,
+ '--radius-3xl': `calc(${look.radius} * 2)`,
+ '--shadow-xs': look.shadow,
+ '--shadow-sm': look.shadow,
+ '--shadow-md': look.shadow,
} as CSSProperties;
/**
diff --git a/solution/frontend/src/features/builder/RightTabsPanel.tsx b/solution/frontend/src/features/builder/RightTabsPanel.tsx
index 8d7c5d8..c8ad7cb 100644
--- a/solution/frontend/src/features/builder/RightTabsPanel.tsx
+++ b/solution/frontend/src/features/builder/RightTabsPanel.tsx
@@ -2,6 +2,7 @@ import {useState} from 'react';
import {
AlertTriangle,
Check,
+ ClipboardCopy,
Image as ImageIcon,
Info,
FileText,
@@ -10,7 +11,9 @@ import {
Pencil,
Plus,
Shapes,
+ Sparkles,
Trash2,
+ Wand2,
X,
} from 'lucide-react';
import type {InfoField} from '@o2o/shared';
@@ -20,9 +23,16 @@ import {Input} from '@/components/ui/input';
import {PasteFactsPanel, RecollectPanel} from '@/features/onboarding';
import {cn} from '@/lib/utils';
import {useBuilderStore, useUnverifiedFields, type RightTab} from '@/stores/builder';
+import {INDUSTRY_CONFIGS} from '@/data/industryData';
import {FaqPanel} from './FaqPanel';
import {SectionDesignPanel} from './SectionDesignPanel';
import {resolveVariant} from './canvas/registry';
+import {
+ buildPrompt,
+ dataSpecFor,
+ parseSectionData,
+ SECTION_DATA_MAX_CHARS,
+} from './canvas/dataSpec';
const TABS: {id: RightTab; label: string; icon: typeof Info}[] = [
{id: 'content', label: '콘텐츠', icon: FileText},
@@ -148,7 +158,8 @@ function ContentTab() {
className="w-full resize-y rounded-md border border-input bg-background px-3 py-2 text-xs leading-relaxed outline-none focus:border-ring focus:ring-2 focus:ring-ring/30"
/>
}
- {!supportsTitle && !supportsDescription && !supportsBody && (
+ {dataSpecFor(section.type) &&
+ 편집을 시작하려면 로그인해 주세요
++ 여기까지 만든 내용은 그대로 있습니다. 편집한 것을 저장하고 발행하는 데 계정이 필요합니다. +
+이 레이아웃에는 직접 입력하는 문구가 없습니다. 수집된 데이터만 표시합니다.
@@ -160,6 +171,159 @@ function ContentTab() { ); } +/** + * 붙여넣기 아이템의 JSON 입력. + * + * ★ 원문을 그대로 저장한다. 깨진 JSON 도 담아 두고, 왜 깨졌는지만 아래에 말한다 — + * 저장을 막으면 사장님은 고칠 기회 없이 쓰던 걸 잃는다. + */ +function SectionDataPanel({sectionId, sectionType}: {sectionId: string; sectionType: string}) { + const spec = dataSpecFor(sectionType); + const sections = useBuilderStore((s) => s.sections); + const updateSectionData = useBuilderStore((s) => s.updateSectionData); + const storeName = useBuilderStore((s) => s.storeName); + const location = useBuilderStore((s) => s.location); + const industry = useBuilderStore((s) => s.industry); + const [copied, setCopied] = useState(false); + const [showPrompt, setShowPrompt] = useState(false); + + const section = sections.find((item) => item.id === sectionId); + if (!spec || !section) return null; + + const raw = section.data ?? ''; + const parsed = parseSectionData(sectionType, raw); + const tooLong = raw.length > SECTION_DATA_MAX_CHARS; + + // 상호·주소가 이미 박혀 있는 프롬프트. 사장님이 빈칸을 채울 일이 없어야 한다. + const promptText = buildPrompt(spec, { + storeName, + location, + industryLabel: INDUSTRY_CONFIGS[industry].name, + }); + + const copyPrompt = async () => { + const text = promptText; + try { + await navigator.clipboard.writeText(text); + setCopied(true); + setTimeout(() => setCopied(false), 1600); + } catch { + // 클립보드가 막힌 브라우저 — 프롬프트를 화면에 띄워 직접 긁을 수 있게 한다. + window.prompt('아래 프롬프트를 복사해 ChatGPT 에 붙여넣으세요', text); + } + }; + + /** 유효한 JSON 만 2칸 들여쓰기로 다시 쓴다. 깨져 있으면 손대지 않는다. */ + const tidy = () => { + try { + updateSectionData(sectionId, JSON.stringify(JSON.parse(raw), null, 2)); + } catch { + // 그대로 둔다 — 아래 오류 줄이 이미 어디가 깨졌는지 말하고 있다. + } + }; + + return ( +
+
+
+ + 프롬프트를 복사해 ChatGPT·Claude 에 그대로 붙여넣으면 JSON 을 줍니다. 받은 JSON 을 아래에 붙여넣으세요. +
+ +
+
+
+
+
+
+
+ {showPrompt && (
+
+
+ 아래 내용이 그대로 복사됩니다. 상호와 지역은 이미 채워져 있습니다. +
+