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

components/site/PostCard.vue

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