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

공개 화면 카드 상호작용 수정

Browse Source
This commit is contained in:
zenn
2026-07-01 10:28:46 +09:00
parent e1455e9064
commit 7ec07bb7ea
12 changed files with 70 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
components/site/PostCard.vue
View File

@@ -8,7 +8,7 @@ defineProps({
</script>
<template>
<article class="post-card site-section site-panel-hover group">
<article class="post-card site-section site-panel-hover group relative">
<div class="post-card__body site-section-body flex gap-4">
<PostCardMedia
:to="post.to"
@@ -30,20 +30,45 @@ defineProps({
>
{{ post.excerpt }}
</p>
<p class="post-card__meta mt-2 text-xs site-muted">
<p class="post-card__meta mt-2 flex flex-wrap items-center gap-1.5 text-xs site-muted">
{{ post.publishedAt }}<template v-if="post.tag"> / </template>
<NuxtLink
v-if="post.tag && post.tagSlug"
class="post-card__tag-link site-interactive hover:text-[var(--site-accent)]"
class="post-card__tag-link site-interactive rounded-md px-1.5 py-px font-medium text-[var(--site-text)] hover:text-[var(--site-accent)]"
:style="post.tagColor ? { backgroundColor: `${post.tagColor}1a` } : undefined"
:to="`/tag/${post.tagSlug}`"
>
{{ post.tag }}
</NuxtLink>
<template v-else-if="post.tag">
<span
v-else-if="post.tag"
class="post-card__tag-label rounded-md px-1.5 py-px font-medium text-[var(--site-text)]"
:style="post.tagColor ? { backgroundColor: `${post.tagColor}1a` } : undefined"
>
{{ post.tag }}
</template>
</span>
</p>
</div>
<NuxtLink
class="post-card__arrow absolute right-6 bottom-4 flex cursor-pointer items-center gap-1 text-[var(--site-text)] opacity-100 transition-[opacity,visibility] duration-200 hover:opacity-75 md:invisible md:opacity-0 md:group-hover:visible md:group-hover:opacity-100"
:to="post.to"
aria-label="게시물 보기"
>
<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"
aria-hidden="true"
>
<path d="M17 7 7 17" />
<path d="M8 7h9v9" />
</svg>
</NuxtLink>
</div>
</article>
</template>

2
components/site/RightSidebar.vue
View File

@@ -197,7 +197,7 @@ watch([postTocItems, () => route.fullPath], async () => {
</script>
<template>
<aside class="right-sidebar site-sidebar flex w-full flex-col overflow-hidden border-[var(--site-line)] max-lg:border-l-0 max-lg:border-t max-lg:px-4 max-lg:pb-10 lg:sticky lg:top-[57px] lg:z-10 lg:h-[calc(100vh-57px)] lg:max-h-[calc(100vh-57px)] lg:w-[287px] lg:self-start lg:border-l lg:border-t-0 lg:px-0">
<aside class="right-sidebar site-sidebar flex w-full flex-col overflow-hidden border-[var(--site-line)] max-lg:border-l-0 max-lg:border-t max-lg:px-4 max-lg:pb-10 lg:sticky lg:top-[57px] lg:z-10 lg:h-[calc(100vh-57px)] lg:max-h-[calc(100vh-57px)] lg:w-[287px] lg:self-start lg:border-l-0 lg:border-t-0 lg:px-0">
<div class="right-sidebar__scroll site-sidebar-scroll flex min-h-0 flex-1 flex-col">
<div v-if="!isPostDetailRoute" class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-5 sm:pr-0 max-lg:px-0">
<div class="right-sidebar__profile flex items-center gap-3">