feat(mail): 메일 리스트에 메모 인라인 표시 + 숨김 토글 + 동기화 버튼

- 각 메일 행에 공동 메모 미리보기(📝), 펼치면 편집
- 메일 숨기기/다시보기, '숨긴 메일 보기(N)' 토글
- 마지막 동기화 시각 + 수동 '동기화' 버튼, 참조(CC) 표시

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

src/lib/api.ts

@@ -148,6 +148,10 @@ export const getMailNotes = (id: string) =>
   api.get<MailNote[]>(`/projects/${id}/mail-notes`).then((r) => r.data);
 export const putMailNote = (id: string, messageId: string, body: string) =>
   api.put<MailNote>(`/projects/${id}/mail-notes`, { messageId, body }).then((r) => r.data);
+export const syncProjectMails = (id: string) =>
+  api.post(`/projects/${id}/mails/sync`).then((r) => r.data);
+export const hideMail = (id: string, messageId: string, hidden: boolean) =>
+  api.put(`/projects/${id}/mail-hide`, { messageId, hidden }).then((r) => r.data);
 
 export const getTaskComments = (tId: string) =>
   api.get<TaskComment[]>(`/tasks/${tId}/comments`).then((r) => r.data);

src/pages/ProjectDetail.tsx

@@ -3,13 +3,13 @@ import { useParams, Link } from "react-router-dom";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   ArrowLeft, Plus, GanttChartSquare, Columns3, CalendarDays, Trash2, Upload, Download, Lock, Pencil,
-  Mail, ChevronDown, ChevronRight,
+  Mail, ChevronDown, ChevronRight, RefreshCw, EyeOff, Eye,
 } from "lucide-react";
 import {
   getProject, getProjectMembers, getContacts, getTasks, getContract, getContractFiles,
   getPayments, upsertProjectMember, deleteProjectMember, createTask, updateTask, deleteTask,
   getTaskComments, createTaskComment, deleteTaskComment,
-  getProjectMails, getMailNotes, putMailNote,
+  getProjectMails, putMailNote, syncProjectMails, hideMail,
   upsertContact, deleteContact, putContract, uploadContractFile, getFileDownloadUrl,
   deleteContractFile, createPayment, updatePayment, deletePayment, recomputeProject,
   updateProject,
@@ -28,7 +28,7 @@ import {
   formatDate, formatDateTime, formatWon, formatSize, PROJECT_STATUS_META, LANE_LABELS,
   PRIORITY_META, classNames,
 } from "@/lib/format";
-import type { Lane, MailNote, PaymentSplit, Project, ProjectMail, ProjectTask, TaskPriority } from "@/types";
+import type { Lane, PaymentSplit, Project, ProjectMail, ProjectTask, TaskPriority } from "@/types";
 
 export function ProjectDetailPage() {
   const { id = "" } = useParams();
@@ -485,9 +485,13 @@ function Contacts({ projectId, isAdmin }: { projectId: string; isAdmin: boolean
 /* ---- project mail (Google Workspace) + 공동 메모 ---- */
 function MailTab({ projectId }: { projectId: string }) {
   const { nameOf } = useDirectory();
+  const qc = useQueryClient();
   const q = useQuery({ queryKey: ["mails", projectId], queryFn: () => getProjectMails(projectId) });
-  const notesQ = useQuery({ queryKey: ["mail-notes", projectId], queryFn: () => getMailNotes(projectId) });
-  const noteByMsg = new Map((notesQ.data ?? []).map((n) => [n.messageId, n]));
+  const [showHidden, setShowHidden] = useState(false);
+  const sync = useMutation({
+    mutationFn: () => syncProjectMails(projectId),
+    onSuccess: () => setTimeout(() => qc.invalidateQueries({ queryKey: ["mails", projectId] }), 2500),
+  });
 
   if (q.isLoading) return <LoadingState />;
   const data = q.data;
@@ -499,66 +503,97 @@ function MailTab({ projectId }: { projectId: string }) {
     return <EmptyState title="고객사 메일 도메인이 없습니다" icon={<Mail size={28} />}
       description="‘프로젝트 수정’에서 고객사 메일 도메인(예: meditech.com)을 입력하면 관련 메일을 모아 봅니다." />;
   }
+  const visible = data.messages.filter((m) => showHidden || !m.hidden);
+  const hiddenCount = data.messages.filter((m) => m.hidden).length;
+
   return (
     <div>
       <div className="flex items-center justify-between mb-3 gap-2 flex-wrap">
-        <p className="text-sm text-ink-secondary">
-          <span className="font-medium text-ink">@{data.domain}</span> 와(과) 주고받은 메일 · <span className="text-ink-muted">내가 수신·참조(CC)된 메일만 표시</span>
-        </p>
-        {data.error && <span className="text-xs text-status-pending-fg">일부 메일함을 읽지 못했습니다</span>}
+        <div className="min-w-0">
+          <p className="text-sm text-ink-secondary">
+            <span className="font-medium text-ink">@{data.domain}</span> 와(과) 주고받은 메일 · <span className="text-ink-muted">내가 수신·참조(CC)된 메일만</span>
+          </p>
+          <p className="text-[11px] text-ink-muted mt-0.5">
+            {data.lastSyncedAt ? `마지막 동기화 ${formatDateTime(data.lastSyncedAt)}` : data.syncing ? "처음 동기화 중…" : "아직 동기화 안 됨"}
+            {data.error && <span className="text-status-pending-fg"> · 일부 메일함 오류</span>}
+          </p>
+        </div>
+        <div className="flex items-center gap-2 shrink-0">
+          {hiddenCount > 0 && (
+            <button onClick={() => setShowHidden((v) => !v)} className="text-xs text-ink-secondary hover:text-ink px-2 py-1 rounded-control hover:bg-canvas">
+              {showHidden ? "숨긴 메일 가리기" : `숨긴 메일 보기 (${hiddenCount})`}
+            </button>
+          )}
+          <Button size="sm" variant="secondary" icon={<RefreshCw size={14} className={sync.isPending ? "animate-spin" : ""} />}
+            onClick={() => sync.mutate()} disabled={sync.isPending}>동기화</Button>
+        </div>
       </div>
-      {data.messages.length === 0 ? (
-        <EmptyState title="해당 도메인 메일이 없습니다" icon={<Mail size={28} />} description="팀 구성원이 이 고객사 도메인과 주고받은 메일이 없습니다." />
+      {visible.length === 0 ? (
+        <EmptyState title={data.syncing ? "메일을 불러오는 중입니다" : "표시할 메일이 없습니다"} icon={<Mail size={28} />}
+          description={data.syncing ? "잠시 후 자동으로 표시됩니다. (처음 동기화는 시간이 걸릴 수 있어요)" : "내가 참여한 이 고객사 도메인 메일이 없습니다."} />
       ) : (
         <div className="space-y-2">
-          {data.messages.map((m) => (
-            <MailRow key={m.id} projectId={projectId} mail={m} note={noteByMsg.get(m.id)} nameOf={nameOf} />
-          ))}
+          {visible.map((m) => <MailRow key={m.messageId} projectId={projectId} mail={m} nameOf={nameOf} />)}
         </div>
       )}
     </div>
   );
 }
 
-function MailRow({ projectId, mail, note, nameOf }: { projectId: string; mail: ProjectMail; note?: MailNote; nameOf: (e?: string | null) => string }) {
+function MailRow({ projectId, mail, nameOf }: { projectId: string; mail: ProjectMail; nameOf: (e?: string | null) => string }) {
   const qc = useQueryClient();
   const [open, setOpen] = useState(false);
-  const [memo, setMemo] = useState(note?.body ?? "");
-  useEffect(() => { setMemo(note?.body ?? ""); }, [note?.updatedAt]);
-  const save = useMutation({
-    mutationFn: () => putMailNote(projectId, mail.id, memo),
-    onSuccess: () => qc.invalidateQueries({ queryKey: ["mail-notes", projectId] }),
-  });
+  const [memo, setMemo] = useState(mail.note ?? "");
+  useEffect(() => { setMemo(mail.note ?? ""); }, [mail.note]);
+  const invalidate = () => qc.invalidateQueries({ queryKey: ["mails", projectId] });
+  const save = useMutation({ mutationFn: () => putMailNote(projectId, mail.messageId, memo), onSuccess: invalidate });
+  const hide = useMutation({ mutationFn: () => hideMail(projectId, mail.messageId, !mail.hidden), onSuccess: invalidate });
   const when = mail.ts ? formatDateTime(new Date(mail.ts).toISOString()) : mail.date;
 
   return (
-    <Card className="overflow-hidden">
-      <button onClick={() => setOpen((o) => !o)} className="w-full text-left flex items-start gap-3 px-4 py-3 hover:bg-canvas transition-colors">
-        <span className="mt-0.5 text-ink-muted shrink-0">{open ? <ChevronDown size={16} /> : <ChevronRight size={16} />}</span>
-        <span className="min-w-0 flex-1">
+    <Card className={classNames("overflow-hidden", mail.hidden && "opacity-60")}>
+      <div className="flex items-start gap-1 px-2 sm:px-3 py-3">
+        <button onClick={() => setOpen((o) => !o)} className="mt-0.5 text-ink-muted shrink-0 p-1 rounded hover:bg-canvas">
+          {open ? <ChevronDown size={16} /> : <ChevronRight size={16} />}
+        </button>
+        <button onClick={() => setOpen((o) => !o)} className="min-w-0 flex-1 text-left">
           <span className="flex items-center gap-2">
             <span className="text-sm font-semibold text-ink truncate">{mail.subject || "(제목 없음)"}</span>
-            {note?.body && <span className="text-[10px] bg-chip-bg text-navy rounded-pill px-1.5 py-0.5 shrink-0">메모</span>}
+            {mail.note && <span className="text-[10px] bg-chip-bg text-navy rounded-pill px-1.5 py-0.5 shrink-0">메모</span>}
+            {mail.hidden && <span className="text-[10px] bg-divider text-ink-muted rounded-pill px-1.5 py-0.5 shrink-0">숨김</span>}
           </span>
           <span className="block text-xs text-ink-muted truncate mt-0.5">{mail.from}</span>
           <span className="block text-sm text-ink-secondary truncate mt-1">{mail.snippet}</span>
-        </span>
-        <span className="text-[11px] text-ink-muted tabular shrink-0">{when}</span>
-      </button>
+          {/* 메일 리스트에 메모도 함께 표시 */}
+          {mail.note && (
+            <span className="mt-2 block text-xs text-ink bg-navy-subtle/40 border border-navy-subtle rounded-control px-2.5 py-1.5 line-clamp-2">
+              📝 {mail.note}
+            </span>
+          )}
+        </button>
+        <div className="flex items-center gap-1 shrink-0">
+          <span className="text-[11px] text-ink-muted tabular hidden sm:block">{when}</span>
+          <button onClick={() => hide.mutate()} title={mail.hidden ? "다시 보이기" : "숨기기"}
+            className="p-1.5 rounded text-ink-muted hover:text-ink hover:bg-canvas">
+            {mail.hidden ? <Eye size={15} /> : <EyeOff size={15} />}
+          </button>
+        </div>
+      </div>
       {open && (
         <div className="px-4 pb-4 pt-1 border-t border-divider space-y-3">
           <div className="text-xs text-ink-muted grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-1">
             <div><span className="text-ink-secondary font-medium">보낸사람</span> {mail.from}</div>
             <div><span className="text-ink-secondary font-medium">받는사람</span> {mail.to}</div>
-            <div className="sm:col-span-2"><span className="text-ink-secondary font-medium">발견된 메일함</span> {nameOf(mail.mailbox)} <span className="text-ink-muted">({mail.mailbox})</span></div>
+            {mail.cc && <div className="sm:col-span-2"><span className="text-ink-secondary font-medium">참조</span> {mail.cc}</div>}
+            <div className="sm:col-span-2 sm:hidden"><span className="text-ink-secondary font-medium">시각</span> {when}</div>
           </div>
           <div>
             <div className="flex items-center justify-between mb-1">
               <span className="form-label !mb-0">공동 메모 <span className="text-ink-muted font-normal">· 프로젝트 구성원 누구나 수정</span></span>
-              {note?.lastEditedBy && <span className="text-[11px] text-ink-muted">마지막 수정 {nameOf(note.lastEditedBy)}</span>}
+              {mail.noteEditedBy && <span className="text-[11px] text-ink-muted">마지막 수정 {nameOf(mail.noteEditedBy)}</span>}
             </div>
             <Textarea value={memo} onChange={(e) => setMemo(e.target.value)}
-              onBlur={() => { if (memo !== (note?.body ?? "")) save.mutate(); }}
+              onBlur={() => { if (memo !== (mail.note ?? "")) save.mutate(); }}
               placeholder="이 메일에 대한 팀 메모를 남기세요. (대응 방향·할 일·합의 내용 등)" style={{ minHeight: 80 }} />
           </div>
         </div>

src/types.ts

@@ -196,14 +196,20 @@ export interface Project {
 
 export interface ProjectMail {
   id: string;
+  messageId: string;
   threadId: string;
   from: string;
   to: string;
+  cc: string;
   subject: string;
   date: string;
   snippet: string;
   mailbox: string;
   ts: number;
+  hidden: boolean;
+  hiddenBy: string;
+  note: string;         // 공동 메모 본문 (인라인 표시)
+  noteEditedBy: string; // 메모 마지막 수정자
 }
 
 export interface ProjectMailsResponse {
@@ -211,6 +217,8 @@ export interface ProjectMailsResponse {
   domain: string;
   messages: ProjectMail[];
   error?: string;
+  lastSyncedAt?: string;
+  syncing?: boolean;
 }
 
 export interface MailNote {