3e0ff5df70
* 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>
67 lines
1.5 KiB
Svelte
67 lines
1.5 KiB
Svelte
<script>
|
|
import { onMount } from 'svelte';
|
|
import UploadTile from './UploadTile.svelte';
|
|
import { hydrateDevUpload } from '$lib/dev/hydrateUpload.js';
|
|
import { getFlowObject, isDevSeeded } from '$lib/flowerFlow/session.js';
|
|
import { readSnsFile, writeSnsFile } from '$lib/flowerFlow/uploadDraft.js';
|
|
|
|
let { primaryFile = $bindable(null), hasImage = $bindable() } = $props();
|
|
|
|
let firstFile = $state(readSnsFile());
|
|
|
|
$effect(() => {
|
|
const next = firstFile ?? null;
|
|
if (primaryFile !== next) primaryFile = next;
|
|
});
|
|
|
|
$effect(() => {
|
|
const next = !!firstFile;
|
|
if (hasImage !== next) hasImage = next;
|
|
});
|
|
|
|
$effect(() => {
|
|
writeSnsFile(firstFile);
|
|
});
|
|
|
|
onMount(async () => {
|
|
const devUpload = getFlowObject('devUpload');
|
|
if (!isDevSeeded() || !devUpload?.active) return;
|
|
|
|
const tiles = devUpload.sns;
|
|
if (!tiles || typeof tiles !== 'object') return;
|
|
|
|
try {
|
|
const files = await hydrateDevUpload(/** @type {Record<string, string>} */ (tiles));
|
|
if (files.first) firstFile = files.first;
|
|
} catch {
|
|
// dev seed 실패 시 캐시/빈 타일 유지
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div class="feed min-h-0 w-full flex-1">
|
|
<UploadTile
|
|
prompt="Upload screenshots of their social feed"
|
|
bind:file={firstFile}
|
|
class="sns-tile"
|
|
/>
|
|
</div>
|
|
|
|
<style>
|
|
.feed {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
padding: 0.75rem 1.5rem 0;
|
|
}
|
|
|
|
.feed :global(.sns-tile) {
|
|
height: 100%;
|
|
max-height: 100%;
|
|
width: auto;
|
|
max-width: min(20rem, 100%);
|
|
aspect-ratio: 4 / 5;
|
|
}
|
|
</style>
|