feat: add upload page UI (moodboard + SNS feed)

* feat: add upload page initial UI

* feat: add moodboard and SNS feed upload layouts

* fix: improve mobile upload page layout
This commit is contained in:
Chaewon Lee
2026-06-08 15:02:44 +09:00
committed by GitHub
parent 8186066d3a
commit e9dcd22b53
11 changed files with 347 additions and 1 deletions

View File

@@ -0,0 +1,45 @@
<script>
import UploadTile from './UploadTile.svelte';
// Two SNS feed screenshots. On desktop they fill the panel edge-to-edge in
// a staggered composition (one raised on the right, one dropped on the
// left); below that they fall back to a simple side-by-side / stacked grid.
</script>
<div class="feed w-full min-h-0 flex-1">
<UploadTile class="tile-one h-full min-h-0 w-full max-lg:aspect-auto lg:aspect-auto aspect-4/5" />
<UploadTile class="tile-two h-full min-h-0 w-full max-lg:aspect-auto lg:aspect-auto aspect-4/5" />
</div>
<style>
.feed {
display: grid;
gap: 0;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
width: 100%;
flex: 1;
min-height: 0;
}
@media (min-width: 1024px) {
.feed {
grid-template-rows: repeat(5, 1fr);
grid-template-areas:
'. two'
'one two'
'one two'
'one two'
'one .';
min-height: 34rem;
}
:global(.tile-one) {
grid-area: one;
}
:global(.tile-two) {
grid-area: two;
}
}
</style>