refactor: 활동 피드 공용 컴포넌트 추출 및 드라이브 기록 디자인 통일

프로젝트 활동 페이지에 인라인 중복 구현돼 있던 활동 피드(원형 아이콘+
아바타+본문+날짜그룹) 마크업·아이콘맵·스타일을 공용 ActivityFeed로
추출한다. 드라이브 '기록' 패널도 단색 점 목록에서 이 공용 컴포넌트로
교체해 다른 화면과 동일한 디자인 시스템을 쓰도록 통일한다.

- 신규 components/common/ActivityFeed.vue (모달 임베드용 bare 옵션 포함)
- ProjectActivityPage: 인라인 피드 제거 → ActivityFeed 사용
- drive.store: 감사 로그를 ProjectActivityDay[]로 변환(activityDays),
  tone setting·repo/pencil 아이콘, escapeHtml로 XSS 방지

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/components/common/ActivityFeed.vue

@@ -0,0 +1,210 @@
+<script setup lang="ts">
+// 공용 활동 피드 — 날짜 그룹 단위로 "원형 아이콘 + 아바타 + 본문 + 시간" 행을 렌더한다.
+// 프로젝트 활동 페이지와 드라이브 기록 패널이 동일한 디자인을 공유하기 위한 컴포넌트.
+// 본문(item.html)은 스토어에서 사용자 입력을 escapeHtml 로 이스케이프한 뒤 신뢰 태그만 조립한 마크업이다.
+import { defineComponent, h } from 'vue'
+import UserAvatar from '@/components/UserAvatar.vue'
+import type { ActivityIcon, ProjectActivityDay } from '@/mock/relay.mock'
+
+withDefaults(
+  defineProps<{
+    days: ProjectActivityDay[]
+    // 카드 테두리/배경 없이(모달 등 내부에 임베드할 때) 본문만 렌더
+    bare?: boolean
+  }>(),
+  { bare: false },
+)
+
+// 활동 아이콘 — name 으로 SVG path 분기
+const ACT_PATHS: Record<ActivityIcon, string> = {
+  check: '<path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>',
+  pencil: '<path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/>',
+  'member-add': '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M19 8v6M22 11h-6"/>',
+  'member-check': '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="m17 11 2 2 4-4"/>',
+  'member-remove': '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 11h-6"/>',
+  lock: '<rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
+  repo: '<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>',
+}
+const ActIcon = defineComponent({
+  props: { name: { type: String, required: true } },
+  setup(props) {
+    return () =>
+      h('svg', {
+        viewBox: '0 0 24 24',
+        fill: 'none',
+        stroke: 'currentColor',
+        'stroke-width': '2',
+        'stroke-linecap': 'round',
+        'stroke-linejoin': 'round',
+        innerHTML: ACT_PATHS[props.name as ActivityIcon] ?? '',
+      })
+  },
+})
+</script>
+
+<template>
+  <!-- act-text 의 v-html 은 스토어에서 사용자 입력을 escapeHtml 로 이스케이프한 뒤 신뢰 태그만 조립한 마크업이다 (XSS 위험 없음) -->
+  <!-- eslint-disable vue/no-v-html -->
+  <div
+    class="feed"
+    :class="{ bare }"
+  >
+    <div class="feed-inner">
+      <template
+        v-for="group in days"
+        :key="group.day"
+      >
+        <div class="day">
+          {{ group.day }}
+        </div>
+        <div
+          v-for="(item, i) in group.items"
+          :key="group.day + i"
+          class="act"
+          :class="{ 'last-in-group': i === group.items.length - 1 }"
+        >
+          <span
+            class="act-ico"
+            :class="item.tone"
+          ><ActIcon :name="item.icon" /></span>
+          <div class="act-main">
+            <span class="act-av"><UserAvatar :url="item.avatarUrl" /></span>
+            <span
+              class="act-text"
+              v-html="item.html"
+            />
+          </div>
+          <span class="act-time">{{ item.time }}</span>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* 활동 피드 */
+.feed {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: 0.625rem;
+  box-shadow: var(--shadow-sm);
+  padding: 0.375rem 1.25rem 1.125rem;
+}
+/* 모달 등 내부 임베드 — 카드 외곽 제거 */
+.feed.bare {
+  background: transparent;
+  border: none;
+  box-shadow: none;
+  padding: 0;
+}
+.feed-inner {
+  position: relative;
+}
+.day {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--text-3);
+  letter-spacing: 0.0125rem;
+  padding: 1.125rem 0 0.375rem;
+}
+/* bare 모드의 첫 날짜 헤더는 위 여백 축소(모달 본문 padding 과 중복 방지) */
+.feed.bare .feed-inner > .day:first-child {
+  padding-top: 0.25rem;
+}
+.act {
+  display: flex;
+  align-items: center;
+  gap: 0.8125rem;
+  padding: 0.5625rem 0;
+  position: relative;
+}
+.act::before {
+  content: '';
+  position: absolute;
+  left: 0.969rem;
+  top: 50%;
+  bottom: -0.5625rem;
+  width: 1.5px;
+  background: var(--border);
+  z-index: 0;
+}
+.act.last-in-group::before {
+  display: none;
+}
+.act-ico {
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  z-index: 1;
+}
+.act-ico svg {
+  width: 1rem;
+  height: 1rem;
+}
+.act-ico.task {
+  background: var(--blue-weak);
+  color: var(--blue);
+}
+.act-ico.member {
+  background: var(--green-weak);
+  color: var(--green);
+}
+.act-ico.setting {
+  background: var(--amber-weak);
+  color: var(--amber);
+}
+.act-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+.act-av {
+  width: 1.375rem;
+  height: 1.375rem;
+  border-radius: 50%;
+  display: grid;
+  place-items: center;
+  font-size: 0.625rem;
+  font-weight: 700;
+  color: #fff;
+  flex-shrink: 0;
+}
+.act-text {
+  font-size: 0.844rem;
+  color: var(--text-2);
+  line-height: 1.5;
+}
+.act-text :deep(b) {
+  color: var(--text);
+  font-weight: 600;
+}
+.act-text :deep(.tgt) {
+  color: var(--accent);
+  font-weight: 600;
+  text-decoration: none;
+}
+.act-text :deep(.tgt:hover) {
+  text-decoration: underline;
+}
+.act-text :deep(.st) {
+  font-weight: 600;
+}
+.act-text :deep(.st.prog) {
+  color: var(--blue);
+}
+.act-text :deep(.st.done) {
+  color: var(--green);
+}
+.act-time {
+  font-size: 0.75rem;
+  color: var(--text-3);
+  white-space: nowrap;
+  flex-shrink: 0;
+  margin-left: 0.75rem;
+}
+</style>

frontend/src/pages/relay/DrivePage.vue

@@ -8,6 +8,7 @@ import AppShell from '@/layouts/AppShell.vue'
 import EmptyState from '@/components/common/EmptyState.vue'
 import BaseModal from '@/components/common/BaseModal.vue'
 import LoadMore from '@/components/common/LoadMore.vue'
+import ActivityFeed from '@/components/common/ActivityFeed.vue'
 import DriveNameModal from '@/components/drive/DriveNameModal.vue'
 import { useDriveStore } from '@/stores/drive.store'
 import { useDialog } from '@/composables/useDialog'
@@ -18,7 +19,7 @@ import {
   isAllowedDriveMime,
   resolveMimeType,
 } from '@/shared/utils/drive'
-import type { DriveActivity, DriveFile, DriveFolder } from '@/types/drive'
+import type { DriveFile, DriveFolder } from '@/types/drive'
 
 const route = useRoute()
 const router = useRouter()
@@ -33,7 +34,7 @@ const {
   uploads,
   itemCount,
   isEmpty,
-  activities,
+  activityDays,
   activityLoading,
   hasMoreActivity,
 } = storeToRefs(store)
@@ -188,56 +189,6 @@ function openActivity(): void {
   showActivity.value = true
   void store.fetchActivity() // 열 때마다 최신으로 갱신
 }
-
-// payload(자유형) 안전 추출
-function ps(payload: Record<string, unknown>, key: string): string {
-  const v = payload[key]
-  return typeof v === 'string' ? v : ''
-}
-// 행위자 표시명(탈퇴 시 대체 문구)
-function actorName(a: DriveActivity): string {
-  return a.actor?.name ?? '(탈퇴한 사용자)'
-}
-// 행위 문구 조립 — 대상 이름을 강조하기 위해 앞/대상/뒤 3토막으로 반환
-function actionParts(a: DriveActivity): { pre: string; target: string; post: string } {
-  const p = a.payload
-  switch (a.type) {
-    case 'file_uploaded':
-      return { pre: '파일 ', target: ps(p, 'name'), post: '을(를) 업로드했습니다' }
-    case 'file_deleted':
-      return { pre: '파일 ', target: ps(p, 'name'), post: '을(를) 삭제했습니다' }
-    case 'file_renamed':
-      return {
-        pre: '파일 이름을 ',
-        target: `${ps(p, 'fromName')} → ${ps(p, 'toName')}`,
-        post: '(으)로 변경했습니다',
-      }
-    case 'folder_created':
-      return { pre: '폴더 ', target: ps(p, 'name'), post: '을(를) 만들었습니다' }
-    case 'folder_deleted': {
-      const cnt = typeof p.fileCount === 'number' ? p.fileCount : 0
-      return {
-        pre: '폴더 ',
-        target: ps(p, 'name'),
-        post: `을(를) 삭제했습니다 (파일 ${cnt}개 포함)`,
-      }
-    }
-    case 'folder_renamed':
-      return {
-        pre: '폴더 이름을 ',
-        target: `${ps(p, 'fromName')} → ${ps(p, 'toName')}`,
-        post: '(으)로 변경했습니다',
-      }
-    default:
-      return { pre: '', target: '', post: '' }
-  }
-}
-// 타입별 아이콘 톤(업로드/생성=accent, 삭제=danger, 이름변경=muted)
-function actionTone(type: DriveActivity['type']): 'up' | 'del' | 'edit' {
-  if (type === 'file_deleted' || type === 'folder_deleted') return 'del'
-  if (type === 'file_renamed' || type === 'folder_renamed') return 'edit'
-  return 'up'
-}
 </script>
 
 <template>
@@ -603,31 +554,17 @@ function actionTone(type: DriveActivity['type']): 'up' | 'del' | 'edit' {
         누가 무엇을 추가·변경·삭제했는지 전체 기록입니다.
       </template>
 
-      <EmptyState v-if="activityLoading && activities.length === 0">
+      <EmptyState v-if="activityLoading && activityDays.length === 0">
         불러오는 중…
       </EmptyState>
-      <EmptyState v-else-if="activities.length === 0">
+      <EmptyState v-else-if="activityDays.length === 0">
         아직 기록이 없습니다.
       </EmptyState>
-      <ul
+      <ActivityFeed
         v-else
-        class="dr-log"
-      >
-        <li
-          v-for="a in activities"
-          :key="a.id"
-          class="dr-log-row"
-        >
-          <span
-            class="dr-log-dot"
-            :class="'is-' + actionTone(a.type)"
-          />
-          <span class="dr-log-text">
-            <b>{{ actorName(a) }}</b>님이 {{ actionParts(a).pre }}<b>{{ actionParts(a).target }}</b>{{ actionParts(a).post }}
-            <span class="dr-log-time">{{ relativeTimeKo(a.createdAt) }}</span>
-          </span>
-        </li>
-      </ul>
+        :days="activityDays"
+        bare
+      />
       <LoadMore
         v-if="hasMoreActivity"
         :loading="activityLoading"
@@ -883,53 +820,6 @@ function actionTone(type: DriveActivity['type']): 'up' | 'del' | 'edit' {
   }
 }
 
-/* 기록(감사 로그) 패널 */
-.dr-log {
-  display: flex;
-  flex-direction: column;
-  gap: 0.875rem;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.dr-log-row {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.625rem;
-}
-.dr-log-dot {
-  flex: 0 0 auto;
-  width: 0.5rem;
-  height: 0.5rem;
-  margin-top: 0.4375rem;
-  border-radius: 999px;
-  background: var(--text-3);
-}
-.dr-log-dot.is-up {
-  background: var(--accent);
-}
-.dr-log-dot.is-del {
-  background: var(--red);
-}
-.dr-log-dot.is-edit {
-  background: #e0823d;
-}
-.dr-log-text {
-  font-size: 0.875rem;
-  color: var(--text-2);
-  line-height: 1.5;
-}
-.dr-log-text b {
-  color: var(--text);
-  font-weight: 600;
-}
-.dr-log-time {
-  display: block;
-  font-size: 0.75rem;
-  color: var(--text-3);
-  margin-top: 0.125rem;
-}
-
 /* 드래그 오버레이 */
 .dr-drop {
   position: absolute;

frontend/src/pages/relay/ProjectActivityPage.vue

@@ -1,18 +1,18 @@
 <script setup lang="ts">
 // 프로젝트 활동 — 날짜 그룹 단위 활동 피드 (API 연동)
-import { computed, defineComponent, h, ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useRoute, RouterLink } from 'vue-router'
 import AppShell from '@/layouts/AppShell.vue'
 import ProjectHeader from '@/components/ProjectHeader.vue'
 import ProjectTabs from '@/components/ProjectTabs.vue'
-import UserAvatar from '@/components/UserAvatar.vue'
 import DropdownSelect from '@/components/DropdownSelect.vue'
 import SegmentedTabs from '@/components/common/SegmentedTabs.vue'
 import LoadMore from '@/components/common/LoadMore.vue'
 import EmptyState from '@/components/common/EmptyState.vue'
+import ActivityFeed from '@/components/common/ActivityFeed.vue'
 import { useProjectStore } from '@/stores/project.store'
 import { useActivityStore } from '@/stores/activity.store'
-import type { Project, ActivityIcon } from '@/mock/relay.mock'
+import type { Project } from '@/mock/relay.mock'
 
 type Filter = 'all' | 'task' | 'member' | 'setting'
 const FILTER_OPTIONS: { value: Filter; label: string }[] = [
@@ -82,32 +82,6 @@ const memberCount = computed(() =>
 )
 const loading = computed(() => activityStore.loading)
 const isEmpty = computed(() => !loading.value && days.value.length === 0)
-
-// 활동 아이콘 — name 으로 SVG path 분기
-const ACT_PATHS: Record<ActivityIcon, string> = {
-  check: '<path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>',
-  pencil: '<path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/>',
-  'member-add': '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M19 8v6M22 11h-6"/>',
-  'member-check': '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="m17 11 2 2 4-4"/>',
-  'member-remove': '<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 11h-6"/>',
-  lock: '<rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
-  repo: '<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>',
-}
-const ActIcon = defineComponent({
-  props: { name: { type: String, required: true } },
-  setup(props) {
-    return () =>
-      h('svg', {
-        viewBox: '0 0 24 24',
-        fill: 'none',
-        stroke: 'currentColor',
-        'stroke-width': '2',
-        'stroke-linecap': 'round',
-        'stroke-linejoin': 'round',
-        innerHTML: ACT_PATHS[props.name as ActivityIcon] ?? '',
-      })
-  },
-})
 </script>
 
 <template>
@@ -187,42 +161,10 @@ const ActIcon = defineComponent({
       </EmptyState>
 
       <!-- 활동 피드 -->
-      <!-- act-text 의 v-html 은 store 에서 사용자 입력을 escapeHtml 로 이스케이프한 뒤 신뢰 태그만 조립한 마크업이다 (XSS 위험 없음) -->
-      <!-- eslint-disable vue/no-v-html -->
-      <div
+      <ActivityFeed
         v-else
-        class="feed"
-      >
-        <div class="feed-inner">
-          <template
-            v-for="group in days"
-            :key="group.day"
-          >
-            <div class="day">
-              {{ group.day }}
-            </div>
-            <div
-              v-for="(item, i) in group.items"
-              :key="group.day + i"
-              class="act"
-              :class="{ 'last-in-group': i === group.items.length - 1 }"
-            >
-              <span
-                class="act-ico"
-                :class="item.tone"
-              ><ActIcon :name="item.icon" /></span>
-              <div class="act-main">
-                <span class="act-av"><UserAvatar :url="item.avatarUrl" /></span>
-                <span
-                  class="act-text"
-                  v-html="item.html"
-                />
-              </div>
-              <span class="act-time">{{ item.time }}</span>
-            </div>
-          </template>
-        </div>
-      </div>
+        :days="days"
+      />
 
       <!-- 더보기 — 서버 페이지네이션(누적). 필터와 무관하게 다음 페이지를 불러온다 -->
       <LoadMore
@@ -245,120 +187,4 @@ const ActIcon = defineComponent({
   gap: 0.625rem;
   margin-bottom: 0.5rem;
 }
-
-/* 활동 피드 */
-.feed {
-  background: var(--panel);
-  border: 1px solid var(--border);
-  border-radius: 0.625rem;
-  box-shadow: var(--shadow-sm);
-  padding: 0.375rem 1.25rem 1.125rem;
-}
-.feed-inner {
-  position: relative;
-}
-.day {
-  font-size: 0.75rem;
-  font-weight: 700;
-  color: var(--text-3);
-  letter-spacing: 0.0125rem;
-  padding: 1.125rem 0 0.375rem;
-}
-.act {
-  display: flex;
-  align-items: center;
-  gap: 0.8125rem;
-  padding: 0.5625rem 0;
-  position: relative;
-}
-.act::before {
-  content: '';
-  position: absolute;
-  left: 0.969rem;
-  top: 50%;
-  bottom: -0.5625rem;
-  width: 1.5px;
-  background: var(--border);
-  z-index: 0;
-}
-.act.last-in-group::before {
-  display: none;
-}
-.act-ico {
-  width: 2rem;
-  height: 2rem;
-  border-radius: 50%;
-  display: grid;
-  place-items: center;
-  flex-shrink: 0;
-  z-index: 1;
-}
-.act-ico svg {
-  width: 1rem;
-  height: 1rem;
-}
-.act-ico.task {
-  background: var(--blue-weak);
-  color: var(--blue);
-}
-.act-ico.member {
-  background: var(--green-weak);
-  color: var(--green);
-}
-.act-ico.setting {
-  background: var(--amber-weak);
-  color: var(--amber);
-}
-.act-main {
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-.act-av {
-  width: 1.375rem;
-  height: 1.375rem;
-  border-radius: 50%;
-  display: grid;
-  place-items: center;
-  font-size: 0.625rem;
-  font-weight: 700;
-  color: #fff;
-  flex-shrink: 0;
-}
-.act-text {
-  font-size: 0.844rem;
-  color: var(--text-2);
-  line-height: 1.5;
-}
-.act-text :deep(b) {
-  color: var(--text);
-  font-weight: 600;
-}
-.act-text :deep(.tgt) {
-  color: var(--accent);
-  font-weight: 600;
-  text-decoration: none;
-}
-.act-text :deep(.tgt:hover) {
-  text-decoration: underline;
-}
-.act-text :deep(.st) {
-  font-weight: 600;
-}
-.act-text :deep(.st.prog) {
-  color: var(--blue);
-}
-.act-text :deep(.st.done) {
-  color: var(--green);
-}
-.act-time {
-  font-size: 0.75rem;
-  color: var(--text-3);
-  white-space: nowrap;
-  flex-shrink: 0;
-  margin-left: 0.75rem;
-}
-
 </style>

frontend/src/stores/drive.store.ts

@@ -1,6 +1,11 @@
 import { defineStore } from 'pinia'
 import { computed, ref } from 'vue'
 import { useDrive } from '@/composables/useDrive'
+import {
+  dayGroupKo,
+  escapeHtml,
+  relativeTimeKo,
+} from '@/shared/utils/format'
 import type {
   DriveActivity,
   DriveCrumb,
@@ -8,10 +13,56 @@ import type {
   DriveFolder,
 } from '@/types/drive'
 import type { PresignedUpload } from '@/types/drive'
+import type { ProjectActivityDay, ProjectActivityItem } from '@/mock/relay.mock'
 
 // 감사 로그 페이지 크기
 const ACTIVITY_PAGE_SIZE = 20
 
+// payload(자유형)에서 문자열 안전 추출
+function pstr(payload: Record<string, unknown>, key: string): string {
+  const v = payload[key]
+  return typeof v === 'string' ? v : ''
+}
+
+// 드라이브 감사 로그 1건 → 공용 활동 아이템(프로젝트 활동과 동일 디자인 토큰).
+// 드라이브 행위는 모두 tone 'setting'(앰버), 추가/생성=repo·변경/삭제=pencil 아이콘.
+// 사용자 입력(파일/폴더명)은 escapeHtml 로 감싸 XSS 를 방지한다.
+function toDriveActivityItem(a: DriveActivity): ProjectActivityItem {
+  const base: Pick<
+    ProjectActivityItem,
+    'avatarUrl' | 'actorId' | 'actorName' | 'time'
+  > = {
+    avatarUrl: a.actor?.avatarUrl ?? null,
+    actorId: a.actor?.id ?? null,
+    actorName: a.actor?.name ?? null,
+    time: relativeTimeKo(a.createdAt),
+  }
+  const actor = escapeHtml(a.actor?.name ?? '알 수 없음')
+  const p = a.payload
+  const name = `<b>${escapeHtml(pstr(p, 'name'))}</b>`
+  const renamePair = `<b>${escapeHtml(pstr(p, 'fromName'))}</b> → <b>${escapeHtml(pstr(p, 'toName'))}</b>`
+
+  switch (a.type) {
+    case 'file_uploaded':
+      return { ...base, tone: 'setting', icon: 'repo', html: `<b>${actor}</b>님이 파일 ${name}을(를) 업로드했습니다` }
+    case 'file_renamed':
+      return { ...base, tone: 'setting', icon: 'pencil', html: `<b>${actor}</b>님이 파일 이름을 ${renamePair}(으)로 변경했습니다` }
+    case 'file_deleted':
+      return { ...base, tone: 'setting', icon: 'pencil', html: `<b>${actor}</b>님이 파일 ${name}을(를) 삭제했습니다` }
+    case 'folder_created':
+      return { ...base, tone: 'setting', icon: 'repo', html: `<b>${actor}</b>님이 폴더 ${name}을(를) 만들었습니다` }
+    case 'folder_renamed':
+      return { ...base, tone: 'setting', icon: 'pencil', html: `<b>${actor}</b>님이 폴더 이름을 ${renamePair}(으)로 변경했습니다` }
+    case 'folder_deleted': {
+      const cnt = typeof p.fileCount === 'number' ? p.fileCount : 0
+      const suffix = cnt > 0 ? ` (파일 ${cnt}개 포함)` : ''
+      return { ...base, tone: 'setting', icon: 'pencil', html: `<b>${actor}</b>님이 폴더 ${name}을(를) 삭제했습니다${suffix}` }
+    }
+    default:
+      return { ...base, tone: 'setting', icon: 'repo', html: `<b>${actor}</b>님의 활동` }
+  }
+}
+
 // 진행 중 업로드 1건(UI 표시용)
 export interface UploadItem {
   id: number // 로컬 임시 id
@@ -75,6 +126,21 @@ export const useDriveStore = defineStore('drive', () => {
     () => activities.value.length < activityTotal.value,
   )
 
+  // 누적 감사 로그 → 날짜 그룹(최신순이라 같은 날은 연속) — 공용 ActivityFeed 입력
+  const activityDays = computed<ProjectActivityDay[]>(() => {
+    const groups: ProjectActivityDay[] = []
+    let current: ProjectActivityDay | null = null
+    for (const a of activities.value) {
+      const day = dayGroupKo(a.createdAt)
+      if (!current || current.day !== day) {
+        current = { day, items: [] }
+        groups.push(current)
+      }
+      current.items.push(toDriveActivityItem(a))
+    }
+    return groups
+  })
+
   const isEmpty = computed(
     () => folders.value.length === 0 && files.value.length === 0,
   )
@@ -210,6 +276,7 @@ export const useDriveStore = defineStore('drive', () => {
     loading,
     uploads,
     activities,
+    activityDays,
     activityLoading,
     hasMoreActivity,
     isEmpty,