20220552/ai-florist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refine: ui, prompt, and desc card

Browse Source 
* 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>
This commit is contained in:
Chaewon Lee
2026-06-16 10:27:27 +09:00
committed by GitHub
parent 71da3f2c17
commit 3e0ff5df70
28 changed files with 1321 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/lib/components/ui/map/KakaoMap.svelte
View File

@@ -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>`;

7
src/lib/components/ui/map/MapPanel.svelte
View File

@@ -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}

16
src/lib/components/ui/map/ShopList.svelte
View File

@@ -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}