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

2
docs/spec.md
View File

@@ -458,6 +458,6 @@ APP_PORT=43118
## 버전 관리
- 현재 버전: v0.0.45
- 현재 버전: v0.0.46
- 첫 커밋 이후 변경사항을 커밋할 때마다 패치 버전 증가
- 메이저/마이너 버전은 구조 변경 또는 기능 묶음 단위로 결정

13
docs/update.md
View File

@@ -1,5 +1,18 @@
# 업데이트 이력
## v0.0.46
- 홈 Latest 피드 보기 방식 토글(4종) 드롭다운과 localStorage 저장 추가.
- 홈 Latest 피드 Default 아이콘을 원본(restore) SVG로 보정.
- 홈/태그 상세 목록 Featured 번개 아이콘을 SVG로 교체.
- 홈/태그 상세 목록 댓글 아이콘을 SVG로 교체.
- Nuxt future 호환성 버전을 명시해 설정 resolve 오류를 예방.
- 개발 서버 실행 스크립트에서 종료 시 최근 로그를 함께 출력하도록 보강.
- 로컬 개발 환경 파일 감시(EMFILE) 이슈 완화를 위해 Vite watch polling 옵션 추가.
- 게시물 레이아웃에서 누락된 그리드 클래스를 복구해 `/post/:slug` 화면 깨짐을 수정.
- 게시물 상세 헤더를 Thred 패턴(제목+메타+썸네일) 기준으로 재구성.
- 태그 목록 카드의 ↗ 텍스트 아이콘을 SVG 아이콘으로 교체.
## v0.0.45
- 사용자 화면 기본 배경을 `#fcfcfc`로 통일하고 보더 기준 구분으로 정리.

9
layouts/post.vue
View File

@@ -5,9 +5,12 @@ const { menuOpen } = useMenuState()
<template>
<div class="site-shell post-layout">
<SiteHeader />
<div class="site-content-grid post-layout__grid" :class="{ 'site-content-grid--menu-closed': !menuOpen }">
<LeftSidebar v-show="menuOpen" />
<main class="site-main post-main w-full px-5 py-8 lg:w-[720px]" :class="{ 'site-main--menu-closed': !menuOpen }">
<div
class="post-layout__grid mx-auto grid min-h-[calc(100vh-57px)] max-w-[1294px] grid-cols-1 bg-[var(--site-bg)] px-4 transition-[grid-template-columns,max-width] duration-300 ease-out lg:px-0 lg:[grid-template-columns:287px_minmax(0,720px)_287px]"
:class="menuOpen ? '' : 'max-w-[1007px] lg:[grid-template-columns:0_minmax(0,720px)_287px]'"
>
<LeftSidebar :menu-open="menuOpen" />
<main class="site-main w-full lg:w-[720px]" :class="{ 'site-main--menu-closed': !menuOpen }">
<slot />
</main>
<RightSidebar />

11
nuxt.config.js
View File

@@ -1,6 +1,9 @@
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
compatibilityDate: '2026-04-29',
future: {
compatibilityVersion: 3
},
devtools: {
enabled: false
},
@@ -14,6 +17,14 @@ export default defineNuxtConfig({
experimental: {
appManifest: false
},
vite: {
server: {
watch: {
usePolling: true,
interval: 150
}
}
},
css: ['~/assets/css/main.css'],
app: {
head: {

2
package.json
View File

@@ -1,6 +1,6 @@
{
"name": "sori.studio",
"version": "0.0.43",
"version": "0.0.46",
"private": true,
"type": "module",
"scripts": {

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"
>

169
pages/post/[slug].vue
View File

@@ -7,6 +7,12 @@ const route = useRoute()
const slug = computed(() => String(route.params.slug || ''))
const { data: post } = await useFetch(() => `/api/posts/${slug.value}`)
const { data: tags } = await useFetch('/api/tags', {
default: () => []
})
const { data: posts } = await useFetch('/api/posts', {
default: () => []
})
if (!post.value) {
throw createError({
@@ -15,7 +21,55 @@ if (!post.value) {
})
}
const postTag = computed(() => post.value.tags?.[0]?.toUpperCase() || 'POST')
/**
* 게시물 날짜 표시 형식 변환 (Thred 참고)
* @param {string | null} value - ISO 날짜 문자열
* @returns {string} 화면 표시 날짜
*/
const formatPostDate = (value) => {
if (!value) {
return ''
}
return new Intl.DateTimeFormat('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric'
}).format(new Date(value))
}
const primaryTagSlug = computed(() => post.value.tags?.[0] || '')
const primaryTagMeta = computed(() => {
const matchedTag = tags.value.find((item) => item.slug === primaryTagSlug.value)
return {
name: matchedTag?.name || (primaryTagSlug.value ? primaryTagSlug.value.toUpperCase() : 'POST'),
color: matchedTag?.color || '#4d4d4d',
to: primaryTagSlug.value ? `/tag/${primaryTagSlug.value}` : '/tags'
}
})
const publishedAtLabel = computed(() => formatPostDate(post.value.publishedAt || null))
const authorLabel = computed(() => 'sori.studio')
const currentIndex = computed(() => posts.value.findIndex((item) => item.slug === post.value.slug))
const previousPost = computed(() => {
if (currentIndex.value <= 0) {
return null
}
const candidate = posts.value[currentIndex.value - 1]
return candidate ? { title: candidate.title, to: `/post/${candidate.slug}` } : null
})
const nextPost = computed(() => {
if (currentIndex.value === -1 || currentIndex.value >= posts.value.length - 1) {
return null
}
const candidate = posts.value[currentIndex.value + 1]
return candidate ? { title: candidate.title, to: `/post/${candidate.slug}` } : null
})
const config = useRuntimeConfig()
const siteUrl = computed(() => String(config.public.siteUrl || '').replace(/\/$/g, ''))
const pageUrl = computed(() => `${siteUrl.value}/post/${post.value.slug}`)
@@ -86,16 +140,107 @@ useHead(() => ({
</script>
<template>
<ContentRenderer>
<ProseHeaderCard>
<p class="post-detail__eyebrow text-sm uppercase text-white/70">
{{ postTag }}
</p>
<h1 class="post-detail__title mt-3 text-4xl font-semibold leading-tight">
{{ post.title }}
</h1>
</ProseHeaderCard>
<div class="post-detail">
<section class="px-4 mt-6 mb-8 sm:px-5">
<div class="mx-auto flex max-w-[720px] flex-col gap-2.5">
<h1 class="text-xl font-semibold leading-[1.125] sm:text-2xl">
{{ post.title }}
</h1>
<ContentMarkdownRenderer class="post-detail__content" :content="post.content" />
</ContentRenderer>
<div class="relative border-b border-[var(--site-line)] pb-4">
<div class="flex flex-wrap items-center gap-2 text-xs site-muted sm:gap-1.5">
<time v-if="publishedAtLabel" :datetime="post.publishedAt">
{{ publishedAtLabel }}
</time>
<a href="#" class="hover:opacity-75">
{{ authorLabel }}
</a>
<ul class="flex flex-wrap items-center font-medium">
<li v-if="primaryTagMeta.name" :style="{ '--color-accent': primaryTagMeta.color }">
<NuxtLink
class="rounded-sm px-1.5 py-px text-[var(--site-text)] hover:opacity-75"
:style="{ backgroundColor: `${primaryTagMeta.color}1a` }"
:to="primaryTagMeta.to"
>
{{ primaryTagMeta.name }}
</NuxtLink>
</li>
</ul>
<a class="flex items-center gap-0.75 hover:opacity-75" :href="`${pageUrl}#comments`">
<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 class="pointer-events-none">0</span>
</a>
</div>
<button class="absolute right-0 bottom-4 flex cursor-pointer items-center gap-1 hover:opacity-75" type="button" aria-label="Share this post">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M13 4v4c-6.575 1.028-9.02 6.788-10 12c-.037.206 5.384-5.962 10-6v4l8-7-8-7z" />
</svg>
</button>
</div>
<figure v-if="post.featuredImage" class="relative mt-2.5 w-full">
<img
class="aspect-video w-full rounded-[10px] object-cover bg-[var(--site-panel-strong)]"
:src="post.featuredImage"
:alt="post.title"
loading="eager"
>
</figure>
</div>
</section>
<section class="px-4 sm:px-5">
<div class="mx-auto max-w-[720px]">
<ContentRenderer>
<ContentMarkdownRenderer class="post-detail__content" :content="post.content" />
</ContentRenderer>
</div>
</section>
<section id="comments" class="mb-6 border-y border-[var(--site-line)] bg-[var(--site-panel-strong)] px-5 py-5 scroll-mt-14 sm:px-6">
<div class="mx-auto max-w-[720px] text-sm">
<p class="font-medium">Comments</p>
<p class="mt-2 site-muted">
댓글 UI는 추후 연결 예정입니다.
</p>
</div>
</section>
<section class="mb-6 px-5 sm:px-6" aria-label="Previous and next post">
<div class="mx-auto max-w-[720px]">
<div class="grid gap-4 text-sm font-medium leading-tight md:grid-cols-2">
<NuxtLink v-if="previousPost" :to="previousPost.to" class="flex flex-col items-start gap-1 hover:opacity-75">
<span class="flex items-center gap-1 text-[0.7rem] font-medium uppercase opacity-75 site-muted">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="M15 6 9 12l6 6" />
</svg>
Previous post
</span>
<h3 class="ml-4 text-left">
{{ previousPost.title }}
</h3>
</NuxtLink>
<div v-else />
<NuxtLink v-if="nextPost" :to="nextPost.to" class="flex flex-col items-end gap-1 hover:opacity-75">
<span class="flex items-center gap-1 text-[0.7rem] font-medium uppercase opacity-75 site-muted">
Next post
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
<path d="m9 6 6 6-6 6" />
</svg>
</span>
<h3 class="mr-4 text-right">
{{ nextPost.title }}
</h3>
</NuxtLink>
</div>
</div>
</section>
</div>
</template>

12
pages/tag/[slug].vue
View File

@@ -90,7 +90,11 @@ const tagPosts = computed(() => posts.value
<div class="flex h-full flex-col gap-1.5">
<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>
@@ -107,8 +111,10 @@ const tagPosts = computed(() => posts.value
{{ post.tag }}
</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>

16
pages/tags/index.vue
View File

@@ -46,7 +46,21 @@ const getPostCount = (slug) => posts.value.filter((post) => post.tags.includes(s
<h2 class="flex items-center justify-between gap-1 pr-5 text-sm font-medium leading-tight">
{{ tag.name }}
</h2>
<span class="absolute top-4 right-4 text-sm transition-transform duration-200 group-hover:translate-x-[1px] group-hover:-translate-y-[1px]">↗</span>
<span class="absolute top-4 right-4 text-sm transition-transform duration-200 group-hover:translate-x-[1px] group-hover:-translate-y-[1px]">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="h-4 w-4"
>
<path d="M17 7 7 17" />
<path d="M8 7h9v9" />
</svg>
</span>
<p class="flex-1 text-[0.8rem] leading-tight site-muted line-clamp-3">
{{ tag.description || `${tag.name} 관련 주제를 확인하세요.` }}
</p>

20
scripts/dev-server.js
View File

@@ -3,6 +3,8 @@ import { spawn } from 'node:child_process'
const host = '127.0.0.1'
const port = '43117'
let printedLinks = false
let collectedLines = []
const maxCollectedLines = 400
const nuxtProcess = spawn('nuxt', [
'dev',
@@ -40,6 +42,13 @@ const handleNuxtLog = (chunk) => {
const text = chunk.toString()
for (const line of text.split('\n')) {
if (line) {
collectedLines.push(line)
if (collectedLines.length > maxCollectedLines) {
collectedLines = collectedLines.slice(-maxCollectedLines)
}
}
const localMatch = line.match(/Local:\s+(https?:\/\/[^\s]+)/)
if (localMatch && !printedLinks) {
@@ -48,7 +57,7 @@ const handleNuxtLog = (chunk) => {
continue
}
if (/(^|\s)(error:|warn:|warning:|failed|fatal|eaddrinuse|cannot)\b/i.test(line)) {
if (/(^|\s)(error:|warn:|warning:|failed|fatal|eaddrinuse|cannot|emfile|epipe|eacces|eperm)\b/i.test(line) || /\bat\s.+\(.+\)/.test(line) || /Object\.\$resolve/.test(line)) {
console.log(line)
}
}
@@ -58,6 +67,15 @@ nuxtProcess.stdout.on('data', handleNuxtLog)
nuxtProcess.stderr.on('data', handleNuxtLog)
nuxtProcess.on('close', (code) => {
if (code && collectedLines.length) {
console.log('')
console.log('--- Nuxt 종료 로그 (최근) ---')
for (const line of collectedLines) {
console.log(line)
}
console.log('--- 종료 로그 끝 ---')
console.log('')
}
process.exit(code || 0)
})