zenn/sori.studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v0.0.46 공개 화면 피드/포스트 UI 정리

Browse Source 
Latest 보기 방식 토글과 아이콘을 SVG 기반으로 정리하고, 게시물 상세 헤더를 Thred 패턴으로 재구성했다.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
zenn
2026-05-07 18:51:16 +09:00
parent a439af5b62
commit 41406ca852
10 changed files with 439 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
pages/index.vue
View File

@@ -7,6 +7,46 @@ const { data: tags } = await useFetch('/api/tags', {
default: () => []
})
const postFeedStyleStorageKey = 'POST_FEED_STYLE'
const postFeedStyleOpen = ref(false)
const postFeedStyle = ref('compact')
/**
* Latest 피드 보기 방식을 저장한다.
* @param {'list' | 'compact' | 'cards' | 'articles'} value - 보기 방식
* @returns {void}
*/
const setPostFeedStyle = (value) => {
postFeedStyle.value = value
if (import.meta.client) {
localStorage.setItem(postFeedStyleStorageKey, value)
}
}
const closePostFeedStyleMenu = () => {
postFeedStyleOpen.value = false
}
const onDocumentPointerDown = (event) => {
if (!postFeedStyleOpen.value) {
return
}
const target = /** @type {HTMLElement | null} */ (event.target instanceof HTMLElement ? event.target : null)
if (!target) {
closePostFeedStyleMenu()
return
}
if (target.closest('[data-feed-style-root]')) {
return
}
closePostFeedStyleMenu()
}
/**
* 날짜 표시 형식 변환
* @param {string | null} value - ISO 날짜 문자열
@@ -64,6 +104,27 @@ const latestPosts = computed(() => posts.value.map(mapLatestPost))
const featuredTrackRef = ref(null)
onMounted(() => {
if (!import.meta.client) {
return
}
const storedStyle = localStorage.getItem(postFeedStyleStorageKey)
if (storedStyle === 'list' || storedStyle === 'compact' || storedStyle === 'cards' || storedStyle === 'articles') {
postFeedStyle.value = storedStyle
}
document.addEventListener('pointerdown', onDocumentPointerDown)
})
onBeforeUnmount(() => {
if (!import.meta.client) {
return
}
document.removeEventListener('pointerdown', onDocumentPointerDown)
})
/**
* Featured 가로 트랙을 좌우로 이동한다.
* @param {'left' | 'right'} direction - 이동 방향
@@ -153,44 +214,170 @@ const scrollFeatured = (direction) => {
<div class="mx-auto max-w-[720px]">
<div class="flex items-end justify-between gap-2 border-b border-[var(--site-line)] pb-2">
<h2 class="text-sm font-medium uppercase site-muted">Latest</h2>
<button class="site-input flex cursor-pointer items-center justify-center gap-1 rounded-[10px] border px-2 py-1.5 text-sm hover:bg-[var(--site-panel)]" type="button">
<span>☷</span>
<span>⌄</span>
</button>
<div class="relative flex flex-col gap-1 text-sm font-medium" data-feed-style-root>
<button
class="site-input relative flex cursor-pointer items-center justify-center gap-1 rounded-[10px] border px-2 py-1.5 pr-1.5 leading-none hover:bg-[var(--site-panel)]"
type="button"
aria-label="피드 보기 방식 선택"
data-feed-style-toggle
@click="postFeedStyleOpen = !postFeedStyleOpen"
>
<span class="pointer-events-none" v-show="postFeedStyle === 'list'">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 6h11" />
<path d="M9 12h11" />
<path d="M9 18h11" />
<path d="M5 6v.01" />
<path d="M5 12v.01" />
<path d="M5 18v.01" />
</svg>
</span>
<span class="pointer-events-none" v-show="postFeedStyle === 'compact'">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M13 5h8" />
<path d="M13 9h5" />
<path d="M13 15h8" />
<path d="M13 19h5" />
<path d="M3 5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5" />
<path d="M3 15a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-4" />
</svg>
</span>
<span class="pointer-events-none" v-show="postFeedStyle === 'cards'">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6" />
<path d="M4 16a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2" />
</svg>
</span>
<span class="pointer-events-none" v-show="postFeedStyle === 'articles'">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M3.06 13a9 9 0 1 0 .49-4.087" />
<path d="M3 4.001v5h5" />
<path d="M11 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0" />
</svg>
</span>
<span class="pointer-events-none opacity-75">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="m6 9 6 6 6-6" />
</svg>
</span>
</button>
<menu
class="absolute top-9 right-0 z-10 flex w-44 flex-col gap-0.5 rounded-[10px] border border-[var(--site-line)] bg-[var(--site-bg)] p-1.5 shadow transition-[transform,opacity,visibility,scale] duration-200"
:class="postFeedStyleOpen ? 'visible translate-y-0 scale-100 opacity-100' : 'invisible -translate-y-3 scale-95 opacity-0'"
>
<li class="w-full">
<button class="flex w-full cursor-pointer items-center gap-1.5 rounded-[10px] px-2 py-1 hover:bg-[var(--site-panel)]" type="button" @click="setPostFeedStyle('list'); closePostFeedStyleMenu()">
<span class="pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M9 6h11" />
<path d="M9 12h11" />
<path d="M9 18h11" />
<path d="M5 6v.01" />
<path d="M5 12v.01" />
<path d="M5 18v.01" />
</svg>
</span>
<span>List</span>
</button>
</li>
<li class="w-full">
<button class="flex w-full cursor-pointer items-center gap-1.5 rounded-[10px] px-2 py-1 hover:bg-[var(--site-panel)]" type="button" @click="setPostFeedStyle('compact'); closePostFeedStyleMenu()">
<span class="pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M13 5h8" />
<path d="M13 9h5" />
<path d="M13 15h8" />
<path d="M13 19h5" />
<path d="M3 5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V5" />
<path d="M3 15a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-4" />
</svg>
</span>
<span>Compact</span>
</button>
</li>
<li class="w-full">
<button class="flex w-full cursor-pointer items-center gap-1.5 rounded-[10px] px-2 py-1 hover:bg-[var(--site-panel)]" type="button" @click="setPostFeedStyle('cards'); closePostFeedStyleMenu()">
<span class="pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 6a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6" />
<path d="M4 16a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-2" />
</svg>
</span>
<span>Cards</span>
</button>
</li>
<li class="w-full">
<button class="flex w-full cursor-pointer items-center gap-1.5 rounded-[10px] px-2 py-1 hover:bg-[var(--site-panel)]" type="button" @click="setPostFeedStyle('articles'); closePostFeedStyleMenu()">
<span class="pointer-events-none">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M3.06 13a9 9 0 1 0 .49-4.087" />
<path d="M3 4.001v5h5" />
<path d="M11 12a1 1 0 1 0 2 0a1 1 0 1 0-2 0" />
</svg>
</span>
<span>Default</span>
</button>
</li>
</menu>
</div>
</div>
<div class="mb-8 flex flex-col">
<div class="flex flex-col divide-y divide-[var(--site-line)]">
<div
class="flex flex-col divide-y divide-[var(--site-line)]"
:class="postFeedStyle === 'cards' ? 'divide-y-0 gap-4 sm:grid sm:grid-cols-2 sm:gap-4' : ''"
>
<article
v-for="post in latestPosts"
:key="post.to"
class="group relative flex flex-row gap-3 py-4"
class="group relative overflow-hidden"
:class="postFeedStyle === 'cards' ? 'rounded-[10px] border border-[var(--site-line)] p-3' : 'flex flex-row gap-3 py-4'"
>
<NuxtLink :to="post.to" class="relative aspect-square min-w-16 flex-1 sm:aspect-video">
<NuxtLink
:to="post.to"
class="relative flex-1"
:class="postFeedStyle === 'cards' ? 'mb-3 block aspect-video w-full' : 'aspect-square min-w-16 sm:aspect-video'"
>
<figure class="overflow-hidden rounded-[10px]">
<img
v-if="post.featuredImage"
:src="post.featuredImage"
:alt="post.title"
class="aspect-square w-full rounded-[inherit] object-cover transition-opacity duration-200 group-hover:opacity-90 sm:aspect-video"
class="w-full rounded-[inherit] object-cover transition-opacity duration-200 group-hover:opacity-90"
:class="postFeedStyle === 'cards' ? 'aspect-video' : 'aspect-square sm:aspect-video'"
loading="lazy"
>
<div
v-else
class="aspect-square w-full rounded-[inherit] bg-[linear-gradient(135deg,#253444,#8f9dad)] sm:aspect-video"
class="w-full rounded-[inherit] bg-[linear-gradient(135deg,#253444,#8f9dad)]"
:class="postFeedStyle === 'cards' ? 'aspect-video' : 'aspect-square sm:aspect-video'"
/>
</figure>
</NuxtLink>
<div class="relative flex-[3] md:flex-[4]">
<div class="flex h-full flex-col gap-1.5">
<div
class="relative"
:class="postFeedStyle === 'cards' ? '' : 'flex-[3] md:flex-[4]'"
>
<div
class="flex h-full flex-col gap-1.5"
:class="postFeedStyle === 'cards' ? '' : ''"
>
<h2 class="max-w-[90%] text-sm font-medium leading-tight">
<NuxtLink :to="post.to" class="transition-opacity duration-200 hover:opacity-75">
<span v-if="post.isFeatured" class="mr-1 inline-flex text-[var(--site-accent)]">⚡</span>
<span v-if="post.isFeatured" class="mr-1 inline-flex text-[var(--site-accent)] [&_svg]:-mt-0.5">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M13 3v7h6l-8 11v-7H5l8-11" />
</svg>
</span>
{{ post.title }}
</NuxtLink>
</h2>
<p class="line-clamp-2 flex-1 text-[0.8rem] leading-tight site-muted">
<p
class="flex-1 text-[0.8rem] leading-tight site-muted"
:class="postFeedStyle === 'list' ? 'line-clamp-3' : postFeedStyle === 'articles' ? 'line-clamp-4' : 'line-clamp-2'"
>
{{ post.excerpt }}
</p>
@@ -204,14 +391,18 @@ const scrollFeatured = (direction) => {
{{ post.tagName }}
</span>
<span class="text-[var(--site-line)]">/</span>
<span class="flex items-center gap-0.5">
<span>◌</span>
<span class="flex items-center gap-0.75">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="-mt-px">
<path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
</svg>
<span>0</span>
</span>
</div>
</div>
<button
class="absolute top-0 right-0 flex cursor-pointer items-center gap-1 hover:opacity-75 md:top-auto md:right-0 md:bottom-0 md:invisible md:opacity-0 md:transition-[opacity,visibility] md:duration-200 md:group-hover:visible md:group-hover:opacity-100"
class="absolute top-0 right-0 flex cursor-pointer items-center gap-1 hover:opacity-75"
:class="postFeedStyle === 'cards' ? '' : 'md:top-auto md:right-0 md:bottom-0 md:invisible md:opacity-0 md:transition-[opacity,visibility] md:duration-200 md:group-hover:visible md:group-hover:opacity-100'"
type="button"
aria-label="Share this post"
>