zenn
d47134c46d
좌측 네비게이션과 카테고리의 간격 및 hover 인터랙션을 원본 패턴에 맞게 보정하고, 테마 전환/사이드바 전환 애니메이션과 샘플 폴더 Git 제외 설정을 함께 반영해 사용자 화면 일관성을 높였다. Co-authored-by: Cursor <cursoragent@cursor.com>
103 lines
3.8 KiB
Vue
103 lines
3.8 KiB
Vue
<script setup>
|
||
const { data: posts } = await useFetch('/api/posts', {
|
||
default: () => []
|
||
})
|
||
|
||
/**
|
||
* 날짜 표시 형식 변환
|
||
* @param {string | null} value - ISO 날짜 문자열
|
||
* @returns {string} 화면 표시 날짜
|
||
*/
|
||
const formatPostDate = (value) => {
|
||
if (!value) {
|
||
return ''
|
||
}
|
||
|
||
const date = new Date(value)
|
||
const year = date.getFullYear()
|
||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||
const day = String(date.getDate()).padStart(2, '0')
|
||
|
||
return `${year}.${month}.${day}`
|
||
}
|
||
|
||
/**
|
||
* 게시물 카드 데이터 변환
|
||
* @param {Object} post - API 게시물
|
||
* @returns {Object} 게시물 카드 데이터
|
||
*/
|
||
const mapPostCard = (post) => ({
|
||
title: post.title,
|
||
excerpt: post.excerpt,
|
||
featuredImage: post.featuredImage,
|
||
tag: post.tags?.[0]?.toUpperCase() || 'POST',
|
||
publishedAt: formatPostDate(post.publishedAt),
|
||
to: `/post/${post.slug}`
|
||
})
|
||
|
||
const postCards = computed(() => posts.value.map(mapPostCard))
|
||
</script>
|
||
|
||
<template>
|
||
<MainColumn>
|
||
<section class="home-hero site-section">
|
||
<div class="home-hero__inner site-section-header text-center">
|
||
<h1 class="home-hero__title mx-auto max-w-[620px] text-3xl font-semibold leading-tight tracking-normal md:text-[28px]">
|
||
Ideas <em>published</em> for meaningful conversation, discussed and shaped by the community
|
||
</h1>
|
||
<p class="home-hero__description mx-auto mt-3 max-w-[500px] text-base leading-7 site-muted">
|
||
글을 쌓고, 프로젝트와 링크를 연결하고, 오래 쓰기 좋은 개인 블로그를 직접 구축합니다.
|
||
</p>
|
||
<form class="home-hero__subscribe mx-auto mt-5 flex max-w-[345px] gap-2">
|
||
<input class="home-hero__input min-w-0 flex-1 rounded-lg px-3 py-2 text-sm site-input" placeholder="Your email">
|
||
<button class="home-hero__button rounded-lg px-5 py-2 text-sm font-semibold site-button" type="button">
|
||
Subscribe
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="home-featured site-section">
|
||
<div class="home-featured__header site-section-body flex items-center justify-between">
|
||
<h2 class="home-featured__title text-sm font-semibold uppercase site-muted">
|
||
Featured
|
||
</h2>
|
||
<div class="home-featured__controls flex gap-4">
|
||
<span>‹</span>
|
||
<span>›</span>
|
||
</div>
|
||
</div>
|
||
<div class="home-featured__items grid grid-cols-1 gap-4 px-6 pb-6 md:grid-cols-3">
|
||
<article class="home-featured__card h-[146px] rounded-lg bg-[linear-gradient(135deg,#071b22,#0f827c)] p-4 text-white">
|
||
<h3 class="mt-20 text-sm font-semibold leading-tight">
|
||
Essential tools and techniques for getting started
|
||
</h3>
|
||
</article>
|
||
<article class="home-featured__card h-[146px] rounded-lg bg-[linear-gradient(135deg,#182434,#d4b06b)] p-4 text-white">
|
||
<h3 class="mt-20 text-sm font-semibold leading-tight">
|
||
Setting up your first home server from scratch
|
||
</h3>
|
||
</article>
|
||
<article class="home-featured__card h-[146px] rounded-lg bg-[linear-gradient(135deg,#141414,#8a5a44)] p-4 text-white">
|
||
<h3 class="mt-20 text-sm font-semibold leading-tight">
|
||
Writing notes that stay useful over time
|
||
</h3>
|
||
</article>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="home-latest site-section">
|
||
<div class="home-latest__header site-section-body flex items-center justify-between">
|
||
<h2 class="home-latest__title text-sm font-semibold uppercase site-muted">
|
||
Latest
|
||
</h2>
|
||
<button class="home-latest__view site-interactive rounded-lg px-3 py-2 text-sm site-input" type="button">
|
||
목록
|
||
</button>
|
||
</div>
|
||
</section>
|
||
|
||
<PostCard v-for="post in postCards" :key="post.to" :post="post" />
|
||
</MainColumn>
|
||
</template>
|