refactor: 프로젝트 상세 AI 검토 문서를 버튼+모달 리스트로 변경

인라인 wrap 나열 제거, 'AI 검토 문서' 버튼 클릭 시 모달에서 파일종류 배지·AI상태·크기를 세로 리스트로 표시 Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-06-30 20:56:01 +09:00
parent 65796a0893
commit 2cbd19e791
2 changed files with 178 additions and 116 deletions
@@ -0,0 +1,153 @@
+<script setup lang="ts">
+// 프로젝트 AI 검토 문서 모달 — 연동 드라이브 폴더 내 문서를 리스트로 표시(다운로드 전용)
+import BaseModal from '@/components/common/BaseModal.vue'
+import EmptyState from '@/components/common/EmptyState.vue'
+import AttachmentAiBadge from '@/components/common/AttachmentAiBadge.vue'
+import { useDrive } from '@/composables/useDrive'
+import { fileBadgeOf, formatBytes } from '@/shared/utils/format'
+import type { ApiProjectDocument, ApiProjectDriveLink } from '@/types/project'
+
+defineProps<{
+  documents: ApiProjectDocument[]
+  driveLinks: ApiProjectDriveLink[]
+}>()
+defineEmits<{ (e: 'close'): void }>()
+
+const drive = useDrive()
+
+// 드라이브 단기 presigned URL 발급 후 다운로드
+async function download(fileId: string): Promise<void> {
+  const url = await drive.getDownloadUrl(fileId)
+  const a = document.createElement('a')
+  a.href = url
+  a.rel = 'noopener'
+  document.body.appendChild(a)
+  a.click()
+  a.remove()
+}
+</script>
+
+<template>
+  <BaseModal
+    title="AI 검토 문서"
+    @close="$emit('close')"
+  >
+    <template #subtitle>
+      연동된 드라이브 폴더 <b>{{ driveLinks.length }}</b>개의 문서를 AI 업무 추천에 활용합니다.
+    </template>
+
+    <EmptyState v-if="documents.length === 0">
+      연동 폴더에 문서가 없습니다. 설정에서 드라이브 폴더를 연동해 보세요.
+    </EmptyState>
+    <div
+      v-else
+      class="pdm-list"
+    >
+      <button
+        v-for="d in documents"
+        :key="d.id"
+        class="pdm-row"
+        type="button"
+        title="다운로드"
+        @click="download(d.id)"
+      >
+        <span
+          class="pdm-ico"
+          :class="fileBadgeOf(d.name).cls"
+        >{{ fileBadgeOf(d.name).label }}</span>
+        <span class="pdm-main">
+          <span class="pdm-name">{{ d.name }}</span>
+          <span class="pdm-size">{{ formatBytes(d.size) }}</span>
+        </span>
+        <AttachmentAiBadge :status="d.aiStatus" />
+      </button>
+    </div>
+  </BaseModal>
+</template>
+
+<style scoped>
+.pdm-list {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--border);
+  border-radius: 0.625rem;
+  overflow: hidden;
+  max-height: 24rem;
+  overflow-y: auto;
+}
+.pdm-row {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.625rem 0.75rem;
+  border: none;
+  border-top: 1px solid var(--border);
+  background: transparent;
+  cursor: pointer;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+}
+.pdm-row:first-child {
+  border-top: none;
+}
+.pdm-row:hover {
+  background: #fafbfc;
+}
+.pdm-ico {
+  flex: 0 0 auto;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 0.5rem;
+  display: grid;
+  place-items: center;
+  font-size: 0.6875rem;
+  font-weight: 800;
+  letter-spacing: 0.02em;
+  color: #fff;
+}
+.pdm-main {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+.pdm-name {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.pdm-size {
+  font-size: 0.75rem;
+  color: var(--text-3);
+}
+/* 파일 종류 배지 색상(format.fileBadgeOf 와 동일) */
+.fi-img {
+  background: #2aa775;
+}
+.fi-pdf {
+  background: #e25950;
+}
+.fi-doc {
+  background: #3d8bf2;
+}
+.fi-xls {
+  background: #1f9d57;
+}
+.fi-ppt {
+  background: #e0823d;
+}
+.fi-zip {
+  background: #8a64d6;
+}
+.fi-txt {
+  background: #5b6470;
+}
+.fi-media {
+  background: #c0469d;
+}
+</style>