feat: 실시간 알림(인앱+SSE, Redis pub/sub) + Redis 캐싱 (8단계)

알림(8-2): - Notification 모듈 + SSE 스트림(@Sse, @SkipTransform 으로 표준 래퍼 우회). - 12종 알림 적재(업무 지시/해제/승인요청/승인/수정요청/시작/마감변경/삭제/댓글·답글, 멤버 초대/역할변경/제거). 행위자 제외 + 중복 dedup. AppShell 종(미읽음 뱃지·드롭다운). - 실시간 fan-out: REDIS_HOST 시 ioredis pub/sub(다중 인스턴스), 미설정 시 인메모리 폴백. Redis 캐싱(8-3): - CacheModule → @keyv/redis(미설정 시 인메모리 폴백). 저장소 목록을 버전 네임스페이스로 캐시, 생성/수정/삭제·동기화·멤버 초대/제거 시 무효화(공유 버전 키라 다중 인스턴스 정합). - enableShutdownHooks 로 종료 시 Redis 연결 graceful close. 검증: 백엔드 build/lint 0·20 tests, 프론트 build/lint/type-check 0. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-19 13:12:47 +09:00
parent ef858f6e34
commit d87726194b
23 changed files with 1539 additions and 42 deletions
@@ -1,9 +1,12 @@
 <script setup lang="ts">
 // 앱 공통 셸 — 상단 탑바(브랜드/네비/우측 액션) + 본문 슬롯
 // 모든 인증 이후 화면이 이 레이아웃을 공유한다.
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import { storeToRefs } from 'pinia'
 import { useRoute, useRouter, RouterLink } from 'vue-router'
 import { useAuthStore } from '@/stores/auth.store'
+import { useNotificationStore } from '@/stores/notification.store'
+import type { NotificationView } from '@/types/notification'

 const route = useRoute()
 const router = useRouter()
@@ -21,9 +24,35 @@ const meInitial = computed(() => me.value?.name?.charAt(0) ?? '?')
 // 사용자 메뉴 토글
 const menuOpen = ref(false)

-// 로그아웃 → 로그인 화면으로
+// --- 알림(실시간 SSE) ---
+const notiStore = useNotificationStore()
+const {
+  views: notiViews,
+  unreadCount,
+  loading: notiLoading,
+  loadingMore: notiLoadingMore,
+  hasMore: notiHasMore,
+} = storeToRefs(notiStore)
+
+const notiOpen = ref(false)
+
+// 알림 항목 클릭 — 읽음 처리 후 대상 화면으로 이동
+async function onNotiClick(v: NotificationView) {
+  notiOpen.value = false
+  await notiStore.markRead(v.id)
+  if (v.to) await router.push(v.to)
+}
+
+// AppShell 은 인증 이후 화면에서만 마운트되므로 여기서 스트림 연결(멱등)
+// (store 싱글톤이 연결을 보유 → 화면 전환에도 끊기지 않음. 해제는 로그아웃 시에만)
+onMounted(() => {
+  if (authStore.isLoggedIn) void notiStore.connect()
+})
+
+// 로그아웃 → 알림 스트림 해제 후 로그인 화면으로
 async function onLogout() {
  menuOpen.value = false
+  notiStore.disconnect()
  await authStore.logout()
  await router.push('/login')
 }
@@ -82,24 +111,108 @@ async function onLogout() {
          <path d="m21 21-4-4" />
        </svg>
      </button>
-      <button
-        class="icon-btn"
-        type="button"
-        title="알림"
-        aria-label="알림"
-      >
-        <svg
-          width="17"
-          height="17"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          stroke-width="2"
+      <div class="noti-wrap">
+        <button
+          class="icon-btn noti-btn"
+          type="button"
+          title="알림"
+          aria-label="알림"
+          aria-haspopup="menu"
+          :aria-expanded="notiOpen"
+          @click="notiOpen = !notiOpen"
        >
-          <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
-          <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
-        </svg>
-      </button>
+          <svg
+            width="17"
+            height="17"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
+            <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+          </svg>
+          <span
+            v-if="unreadCount > 0"
+            class="noti-badge"
+            :aria-label="`읽지 않은 알림 ${unreadCount}건`"
+          >{{ unreadCount > 99 ? '99+' : unreadCount }}</span>
+        </button>
+
+        <!-- 알림 드롭다운 -->
+        <div
+          v-if="notiOpen"
+          class="noti-panel"
+          role="menu"
+        >
+          <div class="noti-head">
+            <span class="noti-title">알림</span>
+            <button
+              v-if="unreadCount > 0"
+              type="button"
+              class="noti-readall"
+              @click="notiStore.markAllRead()"
+            >
+              모두 읽음
+            </button>
+          </div>
+          <div class="noti-list">
+            <div
+              v-if="notiLoading && notiViews.length === 0"
+              class="noti-empty"
+            >
+              불러오는 중…
+            </div>
+            <div
+              v-else-if="notiViews.length === 0"
+              class="noti-empty"
+            >
+              새 알림이 없습니다.
+            </div>
+            <template v-else>
+              <button
+                v-for="v in notiViews"
+                :key="v.id"
+                type="button"
+                class="noti-item"
+                :class="{ unread: !v.read }"
+                role="menuitem"
+                @click="onNotiClick(v)"
+              >
+                <span
+                  class="noti-dot"
+                  :class="`tone-${v.tone || 'none'}`"
+                />
+                <span class="noti-body">
+                  <!-- noti-text 의 v-html 은 store 에서 사용자 입력을 escapeHtml 한 뒤 신뢰 태그(<b>)만 조립한 마크업이다 (XSS 위험 없음) -->
+                  <!-- eslint-disable vue/no-v-html -->
+                  <span
+                    class="noti-text"
+                    v-html="v.html"
+                  />
+                  <!-- eslint-enable vue/no-v-html -->
+                  <span class="noti-time">{{ v.time }}</span>
+                </span>
+              </button>
+              <button
+                v-if="notiHasMore"
+                type="button"
+                class="noti-more"
+                :disabled="notiLoadingMore"
+                @click="notiStore.loadMore()"
+              >
+                {{ notiLoadingMore ? '불러오는 중…' : '더보기' }}
+              </button>
+            </template>
+          </div>
+        </div>
+        <!-- 메뉴 바깥 클릭 시 닫기 -->
+        <div
+          v-if="notiOpen"
+          class="noti-overlay"
+          @click="notiOpen = false"
+        />
+      </div>
      <div class="me-wrap">
        <button
          class="me"
@@ -232,6 +345,170 @@ async function onLogout() {
  background: #f1f2f4;
  color: var(--text);
 }
+/* 알림 종 + 드롭다운 */
+.noti-wrap {
+  position: relative;
+}
+.noti-btn {
+  position: relative;
+}
+.noti-badge {
+  position: absolute;
+  top: -0.125rem;
+  right: -0.125rem;
+  min-width: 1rem;
+  height: 1rem;
+  padding: 0 0.25rem;
+  border-radius: 0.5rem;
+  background: var(--red);
+  color: #fff;
+  font-size: 0.625rem;
+  font-weight: 700;
+  line-height: 1rem;
+  text-align: center;
+  box-shadow: 0 0 0 2px var(--panel);
+}
+.noti-panel {
+  position: absolute;
+  top: calc(100% + 0.5rem);
+  right: 0;
+  z-index: 60;
+  width: 22rem;
+  max-width: 90vw;
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+}
+.noti-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.6875rem 0.875rem;
+  border-bottom: 1px solid var(--border);
+}
+.noti-title {
+  font-size: 0.844rem;
+  font-weight: 700;
+  color: var(--text);
+}
+.noti-readall {
+  border: none;
+  background: transparent;
+  color: var(--accent);
+  font-family: inherit;
+  font-size: 0.75rem;
+  font-weight: 600;
+  cursor: pointer;
+  padding: 0.125rem 0.25rem;
+  border-radius: var(--radius-sm);
+}
+.noti-readall:hover {
+  background: var(--accent-weak);
+}
+.noti-list {
+  max-height: 24rem;
+  overflow-y: auto;
+}
+.noti-empty {
+  padding: 1.75rem 0.875rem;
+  text-align: center;
+  font-size: 0.781rem;
+  color: var(--text-3);
+}
+.noti-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.625rem;
+  width: 100%;
+  padding: 0.6875rem 0.875rem;
+  border: none;
+  border-top: 1px solid var(--border);
+  background: transparent;
+  font-family: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.noti-item:first-child {
+  border-top: none;
+}
+.noti-item:hover {
+  background: #fafbfc;
+}
+.noti-item.unread {
+  background: var(--accent-weak);
+}
+.noti-item.unread:hover {
+  background: #eceafd;
+}
+.noti-dot {
+  width: 0.4375rem;
+  height: 0.4375rem;
+  border-radius: 50%;
+  margin-top: 0.375rem;
+  flex-shrink: 0;
+  background: var(--text-3);
+}
+.noti-dot.tone-blue {
+  background: var(--blue);
+}
+.noti-dot.tone-amber {
+  background: var(--amber);
+}
+.noti-dot.tone-green {
+  background: var(--green);
+}
+.noti-dot.tone-red {
+  background: var(--red);
+}
+.noti-dot.tone-accent {
+  background: var(--accent);
+}
+.noti-body {
+  flex: 1;
+  min-width: 0;
+}
+.noti-text {
+  display: block;
+  font-size: 0.8125rem;
+  color: var(--text);
+  line-height: 1.45;
+}
+.noti-text :deep(b) {
+  font-weight: 600;
+}
+.noti-time {
+  display: block;
+  margin-top: 0.1875rem;
+  font-size: 0.6875rem;
+  color: var(--text-3);
+}
+.noti-more {
+  width: 100%;
+  padding: 0.625rem;
+  border: none;
+  border-top: 1px solid var(--border);
+  background: transparent;
+  font-family: inherit;
+  font-size: 0.781rem;
+  font-weight: 600;
+  color: var(--accent);
+  cursor: pointer;
+}
+.noti-more:hover {
+  background: #fafbfc;
+}
+.noti-more:disabled {
+  color: var(--text-3);
+  cursor: default;
+}
+.noti-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 55;
+}
+
 .me-wrap {
  position: relative;
  margin-left: 0.25rem;