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>