07e4eeaca3
* refine: move upload mode toggle to top and compact it * refine: simplify upload layout and remove editorial numbers * refine: unify flow continue bar and redesign result page layout * refine: show bouquet flowers as scrollable cards on result page * refine: add flip-to-Korean on result flower cards * refine: improve result rationale and sync recipe on edit * refine: shorten edit title and align bouquet image framing to 3:4
105 lines
3.0 KiB
Svelte
105 lines
3.0 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte';
|
|
import { goto } from '$app/navigation';
|
|
import { resolve } from '$app/paths';
|
|
import Header from '$lib/components/ui/Header.svelte';
|
|
import Artwork from '$lib/components/ui/Artwork/Artwork.svelte';
|
|
import ContextForm from '$lib/components/ui/create/ContextForm.svelte';
|
|
import FlowContinueBar, {
|
|
FLOW_CONTINUE_BUTTON
|
|
} from '$lib/components/ui/FlowContinueBar.svelte';
|
|
import {
|
|
consumeDevCreateSnapshot,
|
|
deleteFlowKey,
|
|
getFlowObject,
|
|
isDevSeeded,
|
|
saveFlow
|
|
} from '$lib/flowerFlow/session.js';
|
|
|
|
// 항상 빈 폼으로 시작 — Dev Fill은 onMount에서 1회만 스냅샷 적용
|
|
let who = $state(null);
|
|
let whatFor = $state(null);
|
|
let style = $state(null);
|
|
let budget = $state(50_000);
|
|
|
|
const hasAnySelection = $derived(who !== null || whatFor !== null || style !== null);
|
|
|
|
const artworkTitle = $derived.by(() => {
|
|
if (!hasAnySelection) return 'Title';
|
|
const occasion = whatFor ? `A ${whatFor} bouquet for` : 'A bouquet for';
|
|
return `${occasion} ${who ?? '...'}`;
|
|
});
|
|
|
|
const artworkVariant = $derived(hasAnySelection ? 'create2' : 'create1');
|
|
|
|
const artworkDescription = $derived(
|
|
hasAnySelection
|
|
? `${style ?? '...'} style · ₩${budget.toLocaleString('ko-KR')} budget`
|
|
: 'Description Description Description'
|
|
);
|
|
|
|
onMount(() => {
|
|
const hadSnapshot = !!getFlowObject('devCreateSnapshot');
|
|
const snap = consumeDevCreateSnapshot();
|
|
|
|
if (snap) {
|
|
who = snap.who;
|
|
whatFor = snap.whatFor;
|
|
style = snap.style;
|
|
budget = snap.budget;
|
|
return;
|
|
}
|
|
|
|
// 예전 세션에 devSeeded만 남은 경우 — 더미 폼 복원 차단
|
|
if (isDevSeeded() && !hadSnapshot) {
|
|
deleteFlowKey('devSeeded');
|
|
deleteFlowKey('devUpload');
|
|
deleteFlowKey('devMessageSnapshot');
|
|
deleteFlowKey('cardMessage');
|
|
}
|
|
});
|
|
|
|
function handleContinue() {
|
|
deleteFlowKey('devUpload');
|
|
deleteFlowKey('devSeeded');
|
|
deleteFlowKey('devCreateSnapshot');
|
|
deleteFlowKey('devMessageSnapshot');
|
|
deleteFlowKey('cardMessage');
|
|
saveFlow({
|
|
userInput: {
|
|
relationship: who ?? undefined,
|
|
occasion: whatFor ?? undefined,
|
|
style: style ?? undefined,
|
|
budget: Number(budget)
|
|
}
|
|
});
|
|
goto(resolve('/upload'));
|
|
}
|
|
</script>
|
|
|
|
<!--
|
|
upload와 같은 2열 레이아웃: 좌측 Artwork 고정, 우측 ContextForm.
|
|
선택값이 바뀌면 create1 → create2 헤드라인·요약이 반응형으로 전환됩니다.
|
|
-->
|
|
<div
|
|
class="flex h-dvh flex-col overflow-x-hidden bg-surface text-ink lg:h-screen lg:overflow-hidden"
|
|
>
|
|
<Header step={1} total={7} />
|
|
|
|
<main class="flex min-h-0 flex-1 flex-col lg:flex-row">
|
|
<Artwork variant={artworkVariant} title={artworkTitle} description={artworkDescription} />
|
|
|
|
<section class="relative flex min-h-0 flex-1 flex-col pb-[3.75rem] lg:overflow-hidden lg:pb-8">
|
|
<div class="min-h-0 flex-1 overflow-y-auto">
|
|
<ContextForm bind:who bind:whatFor bind:style bind:budget />
|
|
</div>
|
|
|
|
<FlowContinueBar>
|
|
<button type="button" onclick={handleContinue} class={FLOW_CONTINUE_BUTTON}>
|
|
Continue to upload ->
|
|
</button>
|
|
</FlowContinueBar>
|
|
</section>
|
|
</main>
|
|
</div>
|