zenn
a439af5b62
브레이크포인트별 카드 노출 비율(1.4/1.6/2.6)에 맞춘 폭 계산식을 적용하고, 좌우 이동량도 실제 카드 폭 기준으로 계산해 슬라이드 이동 감각을 원본에 가깝게 보정했다. Co-authored-by: Cursor <cursoragent@cursor.com>
240 lines
9.4 KiB
Vue
240 lines
9.4 KiB
Vue
<script setup>
|
||
const { data: posts } = await useFetch('/api/posts', {
|
||
default: () => []
|
||
})
|
||
|
||
const { data: tags } = await useFetch('/api/tags', {
|
||
default: () => []
|
||
})
|
||
|
||
/**
|
||
* 날짜 표시 형식 변환
|
||
* @param {string | null} value - ISO 날짜 문자열
|
||
* @returns {string} 화면 표시 날짜
|
||
*/
|
||
const formatPostDate = (value) => {
|
||
if (!value) {
|
||
return ''
|
||
}
|
||
|
||
return new Intl.DateTimeFormat('en-US', {
|
||
month: 'short',
|
||
day: 'numeric'
|
||
}).format(new Date(value))
|
||
}
|
||
|
||
/**
|
||
* 태그 슬러그로 태그 정보 조회
|
||
* @param {string | undefined} slug - 태그 슬러그
|
||
* @returns {{name: string, color: string}} 태그 정보
|
||
*/
|
||
const getTagMeta = (slug) => {
|
||
const matchedTag = tags.value.find((item) => item.slug === slug)
|
||
|
||
return {
|
||
name: matchedTag?.name || (slug ? slug.toUpperCase() : 'POST'),
|
||
color: matchedTag?.color || '#4d4d4d'
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Latest 목록 데이터 변환
|
||
* @param {Object} post - API 게시물
|
||
* @param {number} index - 목록 인덱스
|
||
* @returns {Object} 화면 표시 데이터
|
||
*/
|
||
const mapLatestPost = (post, index) => {
|
||
const primaryTagSlug = post.tags?.[0]
|
||
const tagMeta = getTagMeta(primaryTagSlug)
|
||
|
||
return {
|
||
title: post.title,
|
||
excerpt: post.excerpt,
|
||
featuredImage: post.featuredImage,
|
||
tagName: tagMeta.name,
|
||
tagColor: tagMeta.color,
|
||
publishedAt: formatPostDate(post.publishedAt),
|
||
to: `/post/${post.slug}`,
|
||
isFeatured: index === 0
|
||
}
|
||
}
|
||
|
||
const featuredPosts = computed(() => posts.value.slice(0, 6))
|
||
const latestPosts = computed(() => posts.value.map(mapLatestPost))
|
||
|
||
const featuredTrackRef = ref(null)
|
||
|
||
/**
|
||
* Featured 가로 트랙을 좌우로 이동한다.
|
||
* @param {'left' | 'right'} direction - 이동 방향
|
||
* @returns {void}
|
||
*/
|
||
const scrollFeatured = (direction) => {
|
||
if (!featuredTrackRef.value) {
|
||
return
|
||
}
|
||
|
||
const firstCard = featuredTrackRef.value.querySelector('[data-featured-slide]')
|
||
const cardWidth = firstCard ? firstCard.getBoundingClientRect().width : 244
|
||
const gap = 24
|
||
const offset = direction === 'left' ? -(cardWidth + gap) : cardWidth + gap
|
||
|
||
featuredTrackRef.value.scrollBy({
|
||
left: offset,
|
||
behavior: 'smooth'
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<MainColumn>
|
||
<section class="px-5 py-6 sm:px-6 md:py-8">
|
||
<div class="mx-auto flex max-w-[720px] flex-col-reverse gap-6">
|
||
<div class="z-[2] flex flex-col items-center justify-center gap-2 text-center">
|
||
<h1 class="text-xl font-semibold leading-[1.125] md:text-2xl">
|
||
Ideas <em>published</em> for meaningful conversation, <em>discussed</em> and shaped by the community
|
||
</h1>
|
||
<p class="max-w-md text-base leading-snug site-muted">
|
||
A modern Ghost theme for curated, community-driven publishing, where members join the conversation.
|
||
</p>
|
||
<form class="group relative mt-1 flex w-full max-w-xs flex-col items-start">
|
||
<fieldset class="flex w-full flex-wrap gap-2 text-sm">
|
||
<legend class="sr-only">Personal information</legend>
|
||
<input class="site-input flex-[2] rounded-[10px] px-3 py-1.5 text-sm" type="email" placeholder="Your email" aria-label="Your email">
|
||
<button class="site-button flex-1 cursor-pointer rounded-[10px] border border-[var(--site-invert)] bg-gradient-to-b from-[rgba(17,17,17,0.75)] to-[rgba(17,17,17,0.95)] px-3 py-1.5 font-medium text-[var(--site-invert-text)] hover:opacity-90" type="button">
|
||
Subscribe
|
||
</button>
|
||
</fieldset>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="px-5 py-4 sm:px-6">
|
||
<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">Featured</h2>
|
||
<div class="flex justify-between gap-2">
|
||
<button class="cursor-pointer p-1 hover:opacity-75" type="button" aria-label="Previous" @click="scrollFeatured('left')">‹</button>
|
||
<button class="cursor-pointer p-1 hover:opacity-75" type="button" aria-label="Next" @click="scrollFeatured('right')">›</button>
|
||
</div>
|
||
</div>
|
||
<div
|
||
ref="featuredTrackRef"
|
||
class="mt-4 flex snap-x snap-mandatory gap-6 overflow-x-auto scroll-smooth pb-1 [--slides:1.4] sm:[--slides:1.6] lg:[--slides:2.6] [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
|
||
>
|
||
<NuxtLink
|
||
v-for="post in featuredPosts"
|
||
:key="`featured-${post.slug}`"
|
||
:to="`/post/${post.slug}`"
|
||
class="group relative block aspect-video w-[calc((100%-(24px*(var(--slides)-1)))/var(--slides))] shrink-0 snap-start overflow-hidden rounded-[10px]"
|
||
data-featured-slide
|
||
>
|
||
<img
|
||
v-if="post.featuredImage"
|
||
:src="post.featuredImage"
|
||
:alt="post.title"
|
||
class="h-full w-full object-cover brightness-75 contrast-125 transition-all duration-200 group-hover:brightness-90 group-hover:contrast-110"
|
||
loading="lazy"
|
||
>
|
||
<div
|
||
v-else
|
||
class="h-full w-full bg-[linear-gradient(135deg,#071b22,#5f6f85)]"
|
||
/>
|
||
<h3 class="absolute right-0 bottom-2.5 left-0 px-3 text-sm font-medium leading-tight text-white line-clamp-2">
|
||
{{ post.title }}
|
||
</h3>
|
||
</NuxtLink>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="px-5 py-4 sm:px-6">
|
||
<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>
|
||
<div class="mb-8 flex flex-col">
|
||
<div class="flex flex-col divide-y divide-[var(--site-line)]">
|
||
<article
|
||
v-for="post in latestPosts"
|
||
:key="post.to"
|
||
class="group relative flex flex-row gap-3 py-4"
|
||
>
|
||
<NuxtLink :to="post.to" class="relative aspect-square min-w-16 flex-1 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"
|
||
loading="lazy"
|
||
>
|
||
<div
|
||
v-else
|
||
class="aspect-square w-full rounded-[inherit] bg-[linear-gradient(135deg,#253444,#8f9dad)] sm:aspect-video"
|
||
/>
|
||
</figure>
|
||
</NuxtLink>
|
||
|
||
<div class="relative flex-[3] md:flex-[4]">
|
||
<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>
|
||
{{ post.title }}
|
||
</NuxtLink>
|
||
</h2>
|
||
|
||
<p class="line-clamp-2 flex-1 text-[0.8rem] leading-tight site-muted">
|
||
{{ post.excerpt }}
|
||
</p>
|
||
|
||
<div class="flex flex-wrap items-center gap-2 text-xs site-muted sm:gap-1.5">
|
||
<time>{{ post.publishedAt }}</time>
|
||
<span class="text-[var(--site-line)]">/</span>
|
||
<span
|
||
class="rounded-sm px-1.5 py-px font-medium text-[var(--site-text)]"
|
||
:style="{ backgroundColor: `${post.tagColor}1a` }"
|
||
>
|
||
{{ post.tagName }}
|
||
</span>
|
||
<span class="text-[var(--site-line)]">/</span>
|
||
<span class="flex items-center gap-0.5">
|
||
<span>◌</span>
|
||
<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"
|
||
type="button"
|
||
aria-label="Share this post"
|
||
>
|
||
<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>
|
||
</button>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</MainColumn>
|
||
</template>
|