refine: ui, prompt, and desc card

* ui improved * prompt:realisic+noHuman * prompt:editRefinement * fix: map DescriptionCard truncation and truncateAt typo Prevent result/map card overflow with character limits and line-clamp; fix buildMapOrderDescription calling undefined truncateAt. Co-authored-by: Cursor <cursoragent@cursor.com> --------- Co-authored-by: 이지은 <ijieun@ijieun-ui-MacBookPro.local> Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-16 10:27:27 +09:00
parent 71da3f2c17
commit 3e0ff5df70
28 changed files with 1321 additions and 312 deletions
--- a/src/lib/components/ui/Artwork/Artwork.svelte
+++ b/src/lib/components/ui/Artwork/Artwork.svelte
@@ -1,9 +1,14 @@
 <script>
 	// The exhibited artwork — always shown on the left, acting like a step indicator.
-	import Vase from './Vase.svelte';
 	import DescriptionCard from './DescriptionCard.svelte';
 	import ComingSoonTape from './ComingSoonTape.svelte';
+	import MuseumFrame from './MuseumFrame.svelte';
 	import { downloadGeneratedImage } from '$lib/flowerFlow/downloadGeneratedImage.js';
+	import {
+		ARTWORK_SLOT_FLOWER,
+		ARTWORK_SLOT_WRAPPER,
+		ARTWORK_SLOT_CARD
+	} from '$lib/artwork/artworkSlotLayout.js';

 	let {
 		title = 'Title',
@@ -23,6 +28,8 @@
 	let downloading = $state(false);
 	let downloadError = $state('');

+	const frameMode = $derived(imageSrc ? 'bouquet' : 'artwork');
+
 	async function handleDownload() {
 		if (!downloadImage || downloading) return;

@@ -45,41 +52,27 @@
 	<!--
 		mobile: row · desktop: 꽃 슬롯 높이 고정 → 설명 카드 길이와 무관하게 Y·크기 유지
 	-->
-	<div
-		class="mx-auto flex min-h-0 w-full max-w-100 flex-1 flex-row items-start gap-8 px-6 pt-6 pb-8 lg:flex-col lg:items-center lg:justify-start lg:gap-4 lg:px-6 lg:pt-[calc(50%-5rem)] lg:pb-12"
-	>
-		<div
-			class="flex h-[11rem] shrink-0 items-end justify-center sm:h-[13rem] lg:h-[min(24rem,36vh)] lg:w-full"
-		>
-			{#if imageSrc}
-				<div class="mx-auto flex w-full max-w-24 shrink-0 flex-col items-center sm:max-w-28 lg:max-w-75">
-					<div class="w-full overflow-hidden">
-						<img
-							src={imageSrc}
-							alt="Selected bouquet"
-							class="aspect-[3/4] h-auto w-full object-contain object-center"
-						/>
-					</div>
-					{#if downloadImage}
-						<button
-							type="button"
-							disabled={downloading}
-							onclick={handleDownload}
-							class="mt-2 text-xs text-muted underline-offset-4 hover:text-ink hover:underline disabled:opacity-50"
-						>
-							{downloading ? 'Downloading...' : 'Download image'}
-						</button>
-						{#if downloadError}
-							<p class="mt-1 text-center text-[0.65rem] text-red-600">{downloadError}</p>
-						{/if}
+	<div class={ARTWORK_SLOT_WRAPPER}>
+		<div class={ARTWORK_SLOT_FLOWER}>
+			<div class="mx-auto flex w-full flex-col items-center">
+				<MuseumFrame mode={frameMode} {variant} {imageSrc} imageAlt="Selected bouquet" />
+				{#if imageSrc && downloadImage}
+					<button
+						type="button"
+						disabled={downloading}
+						onclick={handleDownload}
+						class="mt-2 text-xs text-muted underline-offset-4 hover:text-ink hover:underline disabled:opacity-50"
+					>
+						{downloading ? 'Downloading...' : 'Download image'}
+					</button>
+					{#if downloadError}
+						<p class="mt-1 text-center text-[0.65rem] text-red-600">{downloadError}</p>
 					{/if}
-				</div>
-			{:else}
-				<Vase {variant} />
-			{/if}
+				{/if}
+			</div>
 		</div>

-		<div class="min-w-0 shrink-0 lg:flex lg:w-full lg:justify-center">
+		<div class={ARTWORK_SLOT_CARD}>
 			<DescriptionCard {title} {description} mode={cardMode} />
 		</div>
 	</div>
--- a/src/lib/components/ui/Artwork/DescriptionCard.svelte
+++ b/src/lib/components/ui/Artwork/DescriptionCard.svelte
@@ -20,7 +20,7 @@
 	</h3>
 	<p
 		class={[
-			'mt-2 text-xs',
+			'mt-2 line-clamp-4 text-xs',
 			mode === 'instruction' ? 'leading-snug text-muted' : 'leading-relaxed text-ink'
 		]}
 	>
--- a/src/lib/components/ui/Artwork/MuseumFrame.svelte
+++ b/src/lib/components/ui/Artwork/MuseumFrame.svelte
@@ -0,0 +1,94 @@
+<script>
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
+	import { createMuseumFrameSketch } from '$lib/artwork/drawMuseumFrame.js';
+	import {
+		APERTURE_HEIGHT_PCT,
+		APERTURE_LEFT_PCT,
+		APERTURE_TOP_PCT,
+		APERTURE_WIDTH_PCT,
+		ARTWORK_INNER_SCALE,
+		OUTER_ASPECT_RATIO
+	} from '$lib/artwork/museumFrameGeometry.js';
+	import { ARTWORK_FRAME_MAX_W } from '$lib/artwork/artworkSlotLayout.js';
+	import { getArtworkSrc } from './artworkVariants.js';
+
+	let {
+		/** @type {'bouquet' | 'artwork'} */
+		mode = 'artwork',
+		/** @type {import('./artworkVariants.js').ArtworkVariant} */
+		variant = 'create1',
+		imageSrc = null,
+		imageAlt = 'Selected bouquet',
+		/** bouquet 로딩 플레이스홀더 */
+		loading = false
+	} = $props();
+
+	const artworkSrc = $derived(getArtworkSrc(variant));
+
+	/** @type {HTMLElement | null} */
+	let frameHost = $state(null);
+	/** @type {import('p5') | null} */
+	let p5Instance = $state(null);
+
+	onMount(() => {
+		if (!browser || !frameHost) return;
+
+		let cancelled = false;
+
+		createMuseumFrameSketch(frameHost).then((instance) => {
+			if (cancelled) {
+				instance.remove();
+				return;
+			}
+			p5Instance = instance;
+		});
+
+		return () => {
+			cancelled = true;
+			p5Instance?.remove();
+			p5Instance = null;
+		};
+	});
+</script>
+
+<div class="mx-auto shrink-0 {ARTWORK_FRAME_MAX_W}">
+	<div class="relative w-full" style:aspect-ratio={OUTER_ASPECT_RATIO}>
+		<!-- 개구부: 꽃다발 또는 아트워크 -->
+		<div
+			class="absolute z-0 flex items-center justify-center overflow-hidden bg-surface"
+			style:left="{APERTURE_LEFT_PCT}%"
+			style:top="{APERTURE_TOP_PCT}%"
+			style:width="{APERTURE_WIDTH_PCT}%"
+			style:height="{APERTURE_HEIGHT_PCT}%"
+		>
+			{#if mode === 'bouquet'}
+				{#if loading}
+					<div class="h-full w-full animate-pulse bg-placeholder"></div>
+				{:else if imageSrc}
+					<img
+						src={imageSrc}
+						alt={imageAlt}
+						class="h-full w-full object-cover object-center"
+						draggable="false"
+					/>
+				{:else}
+					<div class="h-full w-full bg-placeholder"></div>
+				{/if}
+			{:else}
+				{#key variant}
+					<img
+						src={artworkSrc}
+						alt=""
+						class="h-auto max-h-full w-auto object-contain object-center"
+						style:width="{ARTWORK_INNER_SCALE * 100}%"
+						draggable="false"
+					/>
+				{/key}
+			{/if}
+		</div>
+
+		<!-- p5 액자 링 (고정, 내용과 무관) -->
+		<div bind:this={frameHost} class="absolute inset-0 z-10" aria-hidden="true"></div>
+	</div>
+</div>
--- a/src/lib/components/ui/Artwork/Vase.svelte
+++ b/src/lib/components/ui/Artwork/Vase.svelte
@@ -7,10 +7,11 @@
 	const src = $derived(getArtworkSrc(variant));
 </script>

+<!-- MuseumFrame artwork 모드에서 크기·위치 제어. 단독 사용 시 fallback. -->
 <img
 	{src}
 	alt=""
-	class="mx-auto h-auto w-full max-w-24 shrink-0 sm:max-w-28 lg:max-w-75"
+	class="mx-auto h-auto w-full object-contain object-center"
 	width="328"
 	height="443"
 />
--- a/src/lib/components/ui/create/OptionGroup.svelte
+++ b/src/lib/components/ui/create/OptionGroup.svelte
@@ -10,7 +10,7 @@
 				type="button"
 				onclick={() => onchange(option)}
 				class={[
-					'text-xl tracking-wide transition-colors',
+					'text-lg tracking-wide transition-colors',
 					selected === option ? 'text-ink' : 'text-muted hover:text-ink'
 				]}
 			>
--- a/src/lib/components/ui/landing/LandingHero.svelte
+++ b/src/lib/components/ui/landing/LandingHero.svelte
@@ -1,7 +1,7 @@
 <script>
 	import { goto } from '$app/navigation';
 	import { resolve } from '$app/paths';
-	import FlowNav from '$lib/components/ui/FlowNav.svelte';
+	import Button from '$lib/components/ui/Button.svelte';
 	import GrowthMetaphorIllustration from '$lib/components/ui/landing/GrowthMetaphorIllustration.svelte';

 	function handleStart() {
@@ -10,25 +10,28 @@
 </script>

 <section
-	class="relative flex min-h-dvh flex-col bg-surface font-sans text-ink"
+	class="relative flex min-h-dvh flex-col bg-surface px-6 py-8 font-sans text-ink sm:px-10 sm:py-10 lg:px-14"
 	aria-label="Every bouquet starts with a muse — seed to bouquet growth metaphor"
 >
-	<FlowNav showBack={false} continueLabel="Start Creating ->" onContinue={handleStart} />
+	<div class="mx-auto flex w-full max-w-6xl min-h-0 flex-1 flex-col justify-center">
+		<GrowthMetaphorIllustration />

-	<div class="flex flex-1 flex-col px-6 pt-8 pb-8 sm:px-10 sm:pt-10 sm:pb-10 lg:px-14">
-		<div class="mx-auto flex min-h-0 w-full max-w-6xl flex-1 flex-col justify-center">
-			<GrowthMetaphorIllustration />
+		<p class="mt-3 text-left text-sm tracking-[0.18em] text-muted sm:mt-4 sm:text-base">
+			Every Bouquet Starts with a Muse
+		</p>
+	</div>

-			<p class="mt-3 text-left text-sm tracking-[0.18em] text-muted sm:mt-4 sm:text-base">
-				Every Bouquet Starts with a Muse
-			</p>
-		</div>
+	<!--
+		아트워크 하단 선과 동일한 max-w-6xl 기준:
+		Fleumuse — 선 왼쪽 끝 / start creating — 선 오른쪽 끝, y축 가운데 정렬
+	-->
+	<div class="mx-auto flex w-full max-w-6xl items-center justify-between gap-6 pt-10 pb-2">
+		<h1 class="text-4xl leading-none font-bold tracking-wide sm:text-5xl lg:text-6xl">
+			Fleumuse
+		</h1>

-		<div class="mx-auto w-full max-w-6xl pt-10 pb-2">
-			<p class="text-lg leading-none tracking-wide text-ink">AI Florist</p>
-			<h1 class="mt-2 text-4xl leading-none font-bold tracking-wide sm:text-5xl lg:text-6xl">
-				Fleumuse
-			</h1>
+		<div class="shrink-0">
+			<Button onclick={handleStart}>start creating</Button>
 		</div>
 	</div>
 </section>
--- a/src/lib/components/ui/map/KakaoMap.svelte
+++ b/src/lib/components/ui/map/KakaoMap.svelte
@@ -52,12 +52,12 @@
 			? `<p style="margin:4px 0 0;font-size:12px;color:#666">${escapeHtml(shop.distance)}</p>`
 			: '';
 		const phone = shop.phone
-			? `<p style="margin:4px 0 0;font-size:12px;color:#666">${escapeHtml(shop.phone)}</p>`
+			? `<p style="display:block;margin:4px 0 0;font-size:12px;color:#666;word-break:break-all;overflow-wrap:anywhere">${escapeHtml(shop.phone)}</p>`
 			: '';

-		return `<div style="padding:15px 12px;min-width:200px;max-width:240px;font-family:system-ui,sans-serif;line-height:1.4">
-			<p style="margin:0;font-size:15px;font-weight:600;color:#1a1a1a">${escapeHtml(shop.name)}</p>
-			<p style="margin:4px 0 0;font-size:13px;color:#555">${escapeHtml(shop.address)}</p>
+		return `<div style="display:block;padding:12px;min-width:0;width:min(260px,72vw);max-width:72vw;box-sizing:border-box;font-family:system-ui,sans-serif;line-height:1.45;overflow:visible;word-wrap:break-word;overflow-wrap:anywhere;white-space:normal">
+			<p style="display:block;margin:0;font-size:15px;font-weight:600;color:#38322f;word-break:break-word;overflow-wrap:anywhere">${escapeHtml(shop.name)}</p>
+			<p style="display:block;margin:4px 0 0;font-size:13px;color:#555;word-break:break-word;overflow-wrap:anywhere">${escapeHtml(shop.address)}</p>
 			${distance}
 			${phone}
 		</div>`;
--- a/src/lib/components/ui/map/MapPanel.svelte
+++ b/src/lib/components/ui/map/MapPanel.svelte
@@ -48,8 +48,8 @@
 </script>

 <div class="flex min-h-0 flex-1 flex-col">
-	<header class="shrink-0 px-6 py-8 md:px-10 lg:px-12 lg:py-10">
-		<h1 class="text-2xl leading-relaxed font-light text-muted md:text-3xl lg:text-[2rem]">
+	<header class="shrink-0 px-6 pt-8 pb-3 md:px-10 lg:px-12 lg:pt-10 lg:pb-4">
+		<h1 class="text-2xl leading-relaxed font-light text-ink md:text-3xl lg:text-[2rem]">
 			Find a nearby florist
 		</h1>
 		<p class="mt-3 text-sm text-muted">Move the map, then refresh to search this area.</p>
@@ -59,7 +59,6 @@
 		{#if mock}
 			<p class="mt-2 text-xs text-muted">Showing sample shops (no Kakao API key).</p>
 		{/if}
-		<div class="mt-6 border-b border-pill lg:mt-8"></div>
 	</header>

 	<div class="shrink-0 px-6 pb-4 md:px-10 lg:px-12">
@@ -94,7 +93,7 @@
 			</button>
 		</div>

-		<div class="w-full shrink-0 lg:w-72 lg:overflow-y-auto">
+		<div class="w-full min-w-0 shrink-0 lg:w-72 lg:overflow-y-auto">
 			{#if loading && shops.length === 0}
 				<p class="text-sm text-muted">Searching for flower shops...</p>
 			{:else}
--- a/src/lib/components/ui/map/ShopList.svelte
+++ b/src/lib/components/ui/map/ShopList.svelte
@@ -2,25 +2,29 @@
 	let { shops = [], selectedId = $bindable(null), onselect } = $props();
 </script>

-<div class="flex flex-col gap-2">
+<div class="flex min-w-0 flex-col gap-2">
 	{#each shops as shop (shop.id)}
 		<button
 			type="button"
 			onclick={() => onselect(shop.id)}
 			class={[
-				'rounded border px-4 py-3 text-left transition-colors',
+				'box-border h-auto w-full min-w-0 overflow-hidden rounded border px-4 py-3 text-left transition-colors',
 				selectedId === shop.id
 					? 'border-pill bg-pill text-surface'
 					: 'border-line-strong bg-surface text-ink hover:border-ink/30'
 			]}
 		>
-			<p class="text-sm font-medium">{shop.name}</p>
-			<p class="mt-1 text-xs opacity-80">{shop.address}</p>
+			<p class="text-sm leading-snug font-medium [overflow-wrap:anywhere] break-words">
+				{shop.name}
+			</p>
+			<p class="mt-1 text-xs leading-snug [overflow-wrap:anywhere] break-words opacity-80">
+				{shop.address}
+			</p>
 			{#if shop.distance}
-				<p class="mt-1 text-xs opacity-70">{shop.distance}</p>
+				<p class="mt-1 text-xs leading-snug break-words opacity-70">{shop.distance}</p>
 			{/if}
 			{#if selectedId === shop.id && shop.phone}
-				<p class="mt-1 text-xs opacity-70">{shop.phone}</p>
+				<p class="mt-1 text-xs leading-snug break-all opacity-70">{shop.phone}</p>
 			{/if}
 		</button>
 	{:else}
--- a/src/lib/components/ui/upload/MoodboardGrid.svelte
+++ b/src/lib/components/ui/upload/MoodboardGrid.svelte
@@ -65,10 +65,30 @@
 </script>

 <div class="moodboard min-h-0 w-full flex-1">
-	<UploadTile label="Color" bind:file={colorFile} class="tile tile-color" />
-	<UploadTile label="Season" bind:file={seasonFile} class="tile tile-season" />
-	<UploadTile label="Character" bind:file={characterFile} class="tile tile-character" />
-	<UploadTile label="Location" bind:file={locationFile} class="tile tile-location" />
+	<UploadTile
+		label="Fashion"
+		prompt="What outfit reminds you of them?"
+		bind:file={colorFile}
+		class="tile tile-color"
+	/>
+	<UploadTile
+		label="Season"
+		prompt="What season reminds you of them?"
+		bind:file={seasonFile}
+		class="tile tile-season"
+	/>
+	<UploadTile
+		label="Location"
+		prompt="What place matches their vibe?"
+		bind:file={characterFile}
+		class="tile tile-character"
+	/>
+	<UploadTile
+		label="Cafe"
+		prompt="What kind of cafe feels like them?"
+		bind:file={locationFile}
+		class="tile tile-location"
+	/>
 </div>

 <style>
--- a/src/lib/components/ui/upload/SnsFeedUpload.svelte
+++ b/src/lib/components/ui/upload/SnsFeedUpload.svelte
@@ -40,7 +40,11 @@
 </script>

 <div class="feed min-h-0 w-full flex-1">
-	<UploadTile bind:file={firstFile} class="sns-tile" />
+	<UploadTile
+		prompt="Upload screenshots of their social feed"
+		bind:file={firstFile}
+		class="sns-tile"
+	/>
 </div>

 <style>
--- a/src/lib/components/ui/upload/UploadTile.svelte
+++ b/src/lib/components/ui/upload/UploadTile.svelte
@@ -5,6 +5,8 @@
 	// both the moodboard and the SNS feed.
 	let {
 		label = null,
+		/** 빈 타일 중앙에 표시할 안내 문장 */
+		prompt = null,
 		showLabel = true,
 		class: klass = '',
 		style = '',
@@ -44,7 +46,7 @@
 		type="file"
 		accept="image/*"
 		class="sr-only"
-		aria-label={label ? `Add a ${label} image` : 'Add an image'}
+		aria-label={prompt ?? (label ? `Add a ${label} image` : 'Add an image')}
 		onchange={pick}
 	/>

@@ -63,13 +65,15 @@
 		</span>
 	{:else}
 		<div
-			class="flex flex-col items-center gap-3 text-subtle transition-transform group-hover:scale-105"
+			class="flex flex-col items-center gap-3 px-4 text-center text-subtle transition-transform group-hover:scale-105"
 		>
 			<span
-				class="flex size-10 items-center justify-center rounded-full border border-current text-xl leading-none"
+				class="flex size-10 shrink-0 items-center justify-center rounded-full border border-current text-xl leading-none"
 				aria-hidden="true">+</span
 			>
-			{#if label && showLabel}
+			{#if prompt}
+				<span class="max-w-[14rem] text-sm leading-snug text-muted">{prompt}</span>
+			{:else if label && showLabel}
 				<span class="text-sm tracking-[0.15em] uppercase">{label}</span>
 			{/if}
 		</div>