memi-board 0.36.0 → 0.37.1

package/README.md

@@ -221,6 +221,7 @@ const { post: postSeo } = await useMemiBoardPostSeo({
 - [ ] 목록·상세 페이지에 `await useMemiBoard*Seo(…)` 한 줄
 - [ ] 호스트 SEO API **만들지 않음**
 - [ ] CSS `@source` (아래)
+- [ ] (선택) 읽은 글 표시 CSS (아래)
 - [ ] Rules·indexes **deploy**
 - [ ] 최초 admin + 첫 카테고리
 
@@ -235,7 +236,26 @@ const { post: postSeo } = await useMemiBoardPostSeo({
 @source "../../../node_modules/memi-board/dist/runtime/components";
 ```
 
-### 5. Security Rules + 인덱스 배포
+### 5. 읽은 글 표시 (선택)
+
+목록·미니 컴포넌트의 글 링크는 `.memi-board-post-link` 클래스가 붙어 있고, 제목 텍스트는 `text-inherit`로 링크 색을 따른다. 패키지는 색을 강제하지 않으므로, 방문한 글을 흐리게 보이고 싶으면 호스트 CSS에 `:visited` 스타일만 추가하면 된다.
+
+```css
+/* app/assets/css/main.css */
+a.memi-board-post-link:visited {
+  color: #737373;
+}
+
+.dark a.memi-board-post-link:visited {
+  color: #a3a3a3;
+}
+```
+
+**`:visited`는 `color`만 허용하고, 그마저도 `var()`·알파값은 브라우저가 무시한다** (히스토리 스니핑 방지). 그래서 Nuxt UI 토큰(`var(--ui-text-muted)`)을 그대로 못 쓰고 라이트/다크용 리터럴 색상을 각각 지정해야 한다(위 값은 Tailwind `neutral-500`/`neutral-400`).
+
+브라우저 네이티브 `:visited` 라서 서버·DB 저장이 필요 없다. 단, SPA 클라이언트 라우팅(`NuxtLink`)으로만 이동한 경우 브라우저에 "실제 방문"으로 기록되지 않을 수 있어 완전히 신뢰할 수는 없다 — 정확한 읽음 추적이 필요하면 별도로 방문 글 ID를 저장하는 방식을 구현해야 한다.
+
+### 6. Security Rules + 인덱스 배포
 
 1. [docs/firestore.rules.example](docs/firestore.rules.example) → 호스트 `firestore.rules`에 병합  
    (`memiBoardPosts`/`memiBoardComments`/`memiBoardLikes`/`memiBoardSettings`/`memiBoardUsers` — 전부 최상위 flat 컬렉션)
@@ -257,7 +277,7 @@ const { post: postSeo } = await useMemiBoardPostSeo({
 
 > ⚠️ npm 패키지 tarball에도 `docs/` 가 포함된다(0.4.7+). 구버전이면 GitHub의 `docs/`를 보면 된다.
 
-### 6. 최초 관리자와 카테고리 만들기
+### 7. 최초 관리자와 카테고리 만들기
 
 Rules는 일반 사용자가 스스로 관리자가 되는 것을 막는다. 따라서 최초 한 번은 다음 순서가 필요하다.
 
@@ -493,6 +513,7 @@ export default defineNuxtPlugin(() => {
 - [ ] 목록·상세 페이지에 `await useMemiBoardListSeo` / `useMemiBoardPostSeo`
 - [ ] 호스트 SEO API 없음
 - [ ] CSS `@source` …/memi-board/dist/runtime/components
+- [ ] (선택) `.memi-board-post-link:visited` 읽은 글 표시 CSS
 - [ ] Rules 예시 병합 + **deploy**
 - [ ] 카테고리·listed 쿼리 사용 시 indexes deploy
 - [ ] 페이지·미들웨어 직접 작성 (또는 playground 복사)

package/dist/runtime/components/ListDefault.vue

@@ -35,7 +35,7 @@ function image(post: PostModel): string | undefined {
         <component
           :is="postTo(post) ? NuxtLink : 'button'"
           :to="postTo(post)"
-          class="flex min-w-0 flex-1 text-left transition-colors hover:bg-elevated/50"
+          class="memi-board-post-link flex min-w-0 flex-1 text-left text-highlighted transition-colors hover:bg-elevated/50"
           @click="!postTo(post) && emit('select', post)"
         >
           <div class="min-w-0 flex-1 flex flex-col justify-center gap-1 overflow-hidden py-2 pl-3 pr-2">
@@ -56,7 +56,7 @@ function image(post: PostModel): string | undefined {
                   size="sm"
                   class="mt-0.5 shrink-0"
                 />
-                <h3 class="min-w-0 line-clamp-2 break-words text-sm font-medium leading-snug sm:text-base">
+                <h3 class="min-w-0 line-clamp-2 break-words text-sm font-medium leading-snug text-inherit sm:text-base">
                   {{ post.title?.trim() || post.summary || '사진' }}
                 </h3>
                 <span

package/dist/runtime/components/ListDense.vue

@@ -31,7 +31,7 @@ function thumb(post: PostModel): string | undefined {
         <component
           :is="postTo(post) ? NuxtLink : 'button'"
           :to="postTo(post)"
-          class="group flex min-w-0 w-full items-baseline gap-1.5 rounded-lg text-left transition-colors hover:bg-elevated/60"
+          class="memi-board-post-link group flex min-w-0 w-full items-baseline gap-1.5 rounded-lg text-left text-highlighted transition-colors hover:bg-elevated/60"
           @click="!postTo(post) && emit('select', post)"
         >
           <UBadge
@@ -42,7 +42,7 @@ function thumb(post: PostModel): string | undefined {
             size="sm"
             class="shrink-0"
           />
-          <h3 class="min-w-0 truncate text-sm font-medium leading-snug text-highlighted transition-colors group-hover:text-primary">
+          <h3 class="min-w-0 truncate text-sm font-medium leading-snug text-inherit transition-colors group-hover:text-primary">
             {{ post.title?.trim() || post.summary || '사진' }}
           </h3>
           <span

package/dist/runtime/components/ListVideo.vue

@@ -32,7 +32,7 @@ function cover(post: PostModel): string | undefined {
       <component
         :is="postTo(post) ? NuxtLink : 'button'"
         :to="postTo(post)"
-        class="block w-full text-left transition hover:bg-elevated/50"
+        class="memi-board-post-link block w-full text-left text-highlighted transition hover:bg-elevated/50"
         @click="!postTo(post) && emit('select', post)"
       >
         <div class="relative aspect-video overflow-hidden bg-elevated">
@@ -52,7 +52,7 @@ function cover(post: PostModel): string | undefined {
               size="sm"
               class="mt-0.5 shrink-0"
             />
-            <h3 class="min-w-0 line-clamp-2 font-medium">{{ post.title }}</h3>
+            <h3 class="min-w-0 line-clamp-2 font-medium text-inherit">{{ post.title }}</h3>
             <span
               v-if="(post.commentCount ?? 0) > 0"
               class="mt-0.5 inline-flex shrink-0 items-center rounded-full bg-primary/10 px-1.5 py-px text-[11px] font-semibold tabular-nums text-primary"

package/dist/runtime/components/MiniCard.vue

@@ -19,7 +19,7 @@ const to = computed(() => props.getPostLink?.(props.post) ?? miniPostLink(props.
   <component
     :is="to ? NuxtLink : 'div'"
     :to="to"
-    class="group flex h-full min-w-0 flex-col overflow-hidden rounded-lg bg-elevated/40 text-left"
+    class="memi-board-post-link group flex h-full min-w-0 flex-col overflow-hidden rounded-lg bg-elevated/40 text-left text-highlighted"
   >
     <div
       class="overflow-hidden bg-muted"
@@ -39,7 +39,7 @@ const to = computed(() => props.getPostLink?.(props.post) ?? miniPostLink(props.
       </div>
     </div>
     <div class="flex flex-1 flex-col gap-0.5 p-2.5">
-      <p class="line-clamp-2 text-sm font-medium leading-snug text-highlighted group-hover:text-primary">
+      <p class="line-clamp-2 text-sm font-medium leading-snug text-inherit group-hover:text-primary">
         {{ title }}
       </p>
       <span class="mt-1 inline-flex items-center gap-0.5 text-[11px] tabular-nums text-muted">

package/dist/runtime/components/MiniPosts.vue

@@ -80,11 +80,11 @@ function postTo(post: PostModel) {
       <component
         :is="postTo(post) ? NuxtLink : 'div'"
         :to="postTo(post)"
-        class="flex items-center gap-2 px-3 py-2 transition-colors hover:bg-elevated/60"
+        class="memi-board-post-link flex items-center gap-2 px-3 py-2 text-highlighted transition-colors hover:bg-elevated/60"
       >
         <div class="min-w-0 flex-1">
           <div class="flex min-w-0 items-start gap-1.5">
-            <p class="min-w-0 flex-1 truncate text-sm font-medium text-highlighted">
+            <p class="min-w-0 flex-1 truncate text-sm font-medium text-inherit">
               {{ miniPostTitle(post) }}
             </p>
             <span class="mt-0.5 inline-flex shrink-0 items-center gap-0.5 text-[11px] tabular-nums text-muted">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "memi-board",
-  "version": "0.36.0",
+  "version": "0.37.1",
   "type": "module",
   "description": "Nuxt 4 + Nuxt UI + VueFire/Firebase 전용 게시판 모듈",
   "license": "MIT",