From d0ba482451f5335e1ea8acd9f72d8368a40726f7 Mon Sep 17 00:00:00 2001
From: Chaewon Lee <codenamewont@gmail.com>
Date: Tue, 9 Jun 2026 16:11:36 +0900
Subject: [PATCH] feat: add create and message page UI
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 이지은 <ijieun@ijieun-ui-MacBookPro.local>
---
 .gitignore                                    |  3 +
 .../components/ui/create/BudgetSlider.svelte  | 71 +++++++++++++++++++
 .../components/ui/create/ContextForm.svelte   | 66 +++++++++++++++++
 .../components/ui/create/OptionGroup.svelte   | 21 ++++++
 .../components/ui/message/MessageForm.svelte  | 34 +++++++++
 .../ui/message/MessagePresetList.svelte       | 19 +++++
 src/routes/create/+page.svelte                | 43 ++++++++++-
 src/routes/message/+page.svelte               | 29 ++++++++
 8 files changed, 285 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/components/ui/create/BudgetSlider.svelte
 create mode 100644 src/lib/components/ui/create/ContextForm.svelte
 create mode 100644 src/lib/components/ui/create/OptionGroup.svelte
 create mode 100644 src/lib/components/ui/message/MessageForm.svelte
 create mode 100644 src/lib/components/ui/message/MessagePresetList.svelte
 create mode 100644 src/routes/message/+page.svelte

diff --git a/.gitignore b/.gitignore
index 3b462cb..4683401 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,3 +21,6 @@ Thumbs.db
 # Vite
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+
+# Local notes (not pushed)
+docs/
diff --git a/src/lib/components/ui/create/BudgetSlider.svelte b/src/lib/components/ui/create/BudgetSlider.svelte
new file mode 100644
index 0000000..73c4a0d
--- /dev/null
+++ b/src/lib/components/ui/create/BudgetSlider.svelte
@@ -0,0 +1,71 @@
+<script>
+	let { budget = $bindable(50_000) } = $props();
+
+	const min = 10_000;
+	const max = 150_000;
+	const step = 5_000;
+
+	const fillPercent = $derived(((budget - min) / (max - min)) * 100);
+</script>
+
+<div class="space-y-4">
+	<div>
+		<p class="text-xs tracking-[0.2em] text-muted uppercase">Budget</p>
+		<p class="mt-2 text-3xl font-semibold tracking-tight">
+			₩{budget.toLocaleString('ko-KR')}
+		</p>
+	</div>
+
+	<div class="space-y-2">
+		<div class="relative h-6">
+			<div class="absolute top-1/2 right-0 left-0 h-px -translate-y-1/2 bg-placeholder"></div>
+			<div
+				class="absolute top-1/2 left-0 h-px -translate-y-1/2 bg-subtle"
+				style="width: {fillPercent}%"
+			></div>
+			<input
+				type="range"
+				{min}
+				{max}
+				{step}
+				bind:value={budget}
+				aria-label="Budget"
+				class="budget-slider absolute inset-0 w-full cursor-pointer appearance-none bg-transparent"
+			/>
+		</div>
+		<div class="flex justify-between text-xs text-muted">
+			<span>₩10,000</span>
+			<span>₩150,000+</span>
+		</div>
+	</div>
+</div>
+
+<style>
+	.budget-slider::-webkit-slider-thumb {
+		appearance: none;
+		width: 1rem;
+		height: 1rem;
+		border-radius: 9999px;
+		background: var(--color-pill);
+		border: none;
+		margin-top: -0.4375rem;
+	}
+
+	.budget-slider::-moz-range-thumb {
+		width: 1rem;
+		height: 1rem;
+		border-radius: 9999px;
+		background: var(--color-pill);
+		border: none;
+	}
+
+	.budget-slider::-webkit-slider-runnable-track {
+		height: 1px;
+		background: transparent;
+	}
+
+	.budget-slider::-moz-range-track {
+		height: 1px;
+		background: transparent;
+	}
+</style>
diff --git a/src/lib/components/ui/create/ContextForm.svelte b/src/lib/components/ui/create/ContextForm.svelte
new file mode 100644
index 0000000..2e66d3e
--- /dev/null
+++ b/src/lib/components/ui/create/ContextForm.svelte
@@ -0,0 +1,66 @@
+<script>
+	import OptionGroup from './OptionGroup.svelte';
+	import BudgetSlider from './BudgetSlider.svelte';
+
+	let {
+		who = $bindable(null),
+		whatFor = $bindable(null),
+		style = $bindable(null),
+		budget = $bindable(50_000)
+	} = $props();
+
+	const hasAnySelection = $derived(who !== null || whatFor !== null || style !== null);
+
+	const whoOptions = ['Friend', 'Family', 'Partner', 'Teacher', 'Others'];
+	const whatForOptions = ['Birthday', 'Anniversary', 'Thanks', 'Daily'];
+	const styleOptions = ['Feminine', 'Masculine', 'Neutral'];
+</script>
+
+<div class="flex flex-1 flex-col justify-center px-6 py-10 md:px-12 lg:px-16 lg:py-16">
+	<header class="mb-10 space-y-3 lg:mb-14">
+		{#if !hasAnySelection}
+			<h1 class="text-3xl leading-relaxed font-light text-muted md:text-4xl lg:text-[2.75rem]">
+				Who are we making flowers for?
+			</h1>
+			<p class="text-sm text-muted">Pick a few details below</p>
+		{:else}
+			<h1 class="text-3xl leading-tight font-light text-muted md:text-4xl lg:text-[2.75rem]">
+				{#if whatFor}
+					A <span class="font-semibold text-ink underline decoration-ink/30 underline-offset-4"
+						>{whatFor}</span
+					>
+					bouquet for
+				{:else}
+					A bouquet for
+				{/if}
+				{#if who}
+					<span class="font-semibold text-ink underline decoration-ink/30 underline-offset-4"
+						>{who}</span
+					>
+				{:else}
+					<span class="text-muted">...</span>
+				{/if}
+			</h1>
+			<p class="text-sm text-muted">
+				{style ?? '—'} | ₩{budget.toLocaleString('ko-KR')}
+			</p>
+		{/if}
+	</header>
+
+	<div class="space-y-8 lg:space-y-10">
+		<OptionGroup label="Who" options={whoOptions} selected={who} onchange={(v) => (who = v)} />
+		<OptionGroup
+			label="What for"
+			options={whatForOptions}
+			selected={whatFor}
+			onchange={(v) => (whatFor = v)}
+		/>
+		<OptionGroup
+			label="Style"
+			options={styleOptions}
+			selected={style}
+			onchange={(v) => (style = v)}
+		/>
+		<BudgetSlider bind:budget />
+	</div>
+</div>
diff --git a/src/lib/components/ui/create/OptionGroup.svelte b/src/lib/components/ui/create/OptionGroup.svelte
new file mode 100644
index 0000000..5781c43
--- /dev/null
+++ b/src/lib/components/ui/create/OptionGroup.svelte
@@ -0,0 +1,21 @@
+<script>
+	let { label, options, selected, onchange } = $props();
+</script>
+
+<div class="space-y-3">
+	<p class="text-sm tracking-[0.2em] text-muted uppercase">{label}</p>
+	<div class="flex flex-wrap gap-x-5 gap-y-2">
+		{#each options as option (option)}
+			<button
+				type="button"
+				onclick={() => onchange(option)}
+				class={[
+					'text-xl tracking-wide transition-colors',
+					selected === option ? 'text-ink' : 'text-muted hover:text-ink'
+				]}
+			>
+				{option}
+			</button>
+		{/each}
+	</div>
+</div>
diff --git a/src/lib/components/ui/message/MessageForm.svelte b/src/lib/components/ui/message/MessageForm.svelte
new file mode 100644
index 0000000..c422bc6
--- /dev/null
+++ b/src/lib/components/ui/message/MessageForm.svelte
@@ -0,0 +1,34 @@
+<script>
+	import MessagePresetList from './MessagePresetList.svelte';
+
+	let { message = $bindable('') } = $props();
+
+	const presets = [
+		'Happy Birthday!',
+		'Thank you for always being there',
+		'I love you',
+		"I'm proud of you",
+		'Congratulations!',
+	];
+
+	const selectedPreset = $derived(presets.find((preset) => preset === message) ?? null);
+</script>
+
+<div class="flex flex-1 flex-col justify-center px-6 py-10 md:px-12 lg:px-16 lg:py-16">
+	<header class="mb-8 lg:mb-10">
+		<textarea
+			bind:value={message}
+			placeholder="Write something from your heart"
+			rows="1"
+			aria-label="Write your message"
+			class="w-full resize-none border-none bg-transparent text-3xl leading-relaxed font-light text-ink placeholder:text-muted focus:outline-none md:text-4xl lg:text-[2.75rem]"
+		></textarea>
+		<div class="mt-6 border-b border-pill lg:mt-3"></div>
+	</header>
+
+	<MessagePresetList
+		options={presets}
+		selected={selectedPreset}
+		onchange={(preset) => (message = preset)}
+	/>
+</div>
diff --git a/src/lib/components/ui/message/MessagePresetList.svelte b/src/lib/components/ui/message/MessagePresetList.svelte
new file mode 100644
index 0000000..b4d0e17
--- /dev/null
+++ b/src/lib/components/ui/message/MessagePresetList.svelte
@@ -0,0 +1,19 @@
+<script>
+	// OptionGroup과 같은 선택 버튼 스타일 — message는 세로 목록
+	let { options, selected, onchange } = $props();
+</script>
+
+<div class="flex max-w-md flex-col gap-y-8">
+	{#each options as option (option)}
+		<button
+			type="button"
+			onclick={() => onchange(option)}
+			class={[
+				'text-left text-xl tracking-wide transition-colors',
+				selected === option ? 'text-ink' : 'text-muted hover:text-ink'
+			]}
+		>
+			{option}
+		</button>
+	{/each}
+</div>
diff --git a/src/routes/create/+page.svelte b/src/routes/create/+page.svelte
index 5d368c1..8baa806 100644
--- a/src/routes/create/+page.svelte
+++ b/src/routes/create/+page.svelte
@@ -1 +1,42 @@
-<h1>/create page</h1>
+<script>
+	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';
+
+	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 artworkDescription = $derived(
+		hasAnySelection
+			? `${style ?? '—'} style · ₩${budget.toLocaleString('ko-KR')} budget`
+			: 'Description Description Description'
+	);
+</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={6} />
+
+	<main class="flex min-h-0 flex-1 flex-col lg:flex-row">
+		<Artwork title={artworkTitle} description={artworkDescription} />
+
+		<section class="relative flex min-h-0 flex-1 flex-col lg:overflow-y-auto">
+			<ContextForm bind:who bind:whatFor bind:style bind:budget />
+		</section>
+	</main>
+</div>
diff --git a/src/routes/message/+page.svelte b/src/routes/message/+page.svelte
new file mode 100644
index 0000000..12b7c98
--- /dev/null
+++ b/src/routes/message/+page.svelte
@@ -0,0 +1,29 @@
+<script>
+	import Header from '$lib/components/ui/Header.svelte';
+	import Artwork from '$lib/components/ui/Artwork/Artwork.svelte';
+	import MessageForm from '$lib/components/ui/message/MessageForm.svelte';
+
+	let message = $state('');
+
+	const artworkTitle = $derived(message ? 'Your message' : 'Title');
+
+	const artworkDescription = $derived(message || 'Description Description Description');
+</script>
+
+<!--
+	create / upload와 같은 2열 레이아웃.
+	우측 MessageForm에서 프리셋 메시지를 pill 버튼으로 선택합니다.
+-->
+<div
+	class="flex h-dvh flex-col overflow-x-hidden bg-surface text-ink lg:h-screen lg:overflow-hidden"
+>
+	<Header step={4} total={6} />
+
+	<main class="flex min-h-0 flex-1 flex-col lg:flex-row">
+		<Artwork title={artworkTitle} description={artworkDescription} />
+
+		<section class="relative flex min-h-0 flex-1 flex-col lg:overflow-y-auto">
+			<MessageForm bind:message />
+		</section>
+	</main>
+</div>