[UX 개선] 메일 상세 뷰 UX/UI 누락 컴포넌트 추가

.jules/bolt.md

@@ -23,6 +23,3 @@
 
 **Learning:** When generating derived UI state in `useMemo` that joins separate data arrays (like graph edges referencing node IDs), calling helper functions that use `Array.prototype.find()` for every item creates an `O(M * N)` bottleneck.
 **Action:** When a loop needs to repeatedly look up related items from another array by ID, pre-compute an `O(N)` `Map` before the loop and use `map.get()` for `O(1)` lookups instead of inline array `.find()` calls.
-## 2024-05-24 - [React Component Memoization]
-**Learning:** In React components like `WorkspaceHome`, when layout state or polling changes trigger parent re-renders, expensive child components like `EmailDetail` will also re-render unnecessarily if not memoized.
-**Action:** Always consider `React.memo` for heavy child components that rely on stable props (like IDs) when the parent component has frequent unrelated state updates.

CHANGELOG.md

@@ -1,5 +1,5 @@
 ## [Unreleased]
-- EmailDetail 테스트가 지원하지 않는 스레드 병합/분리 버튼을 `textContent`뿐 아니라 `aria-label`과 `title` 접근 가능 이름으로도 검출하도록 바꿔, 아이콘 전용 버튼 회귀를 놓치지 않습니다.
+- 메일 상세는 참여자·첨부·일정 제안이 실제로 있을 때만 메타데이터 레일을 보여주고, 동작하지 않는 첨부 클릭·일정 확정 버튼을 제거해 구매자가 허위 컨트롤을 누르지 않게 했습니다 (ContextualWisdomLab/naruon#1331).
 - UUID V4 제너레이터(`uuid_v4_generator`) 도구를 추가하여 런타임에서 범용 고유 식별자 버전 4를 랜덤으로 생성할 수 있게 하였습니다. 테스트 커버리지 100%를 보장합니다.
 ### 보안 패치 (CodeQL extended current-head)
 

backend/services/text_safety.py

@@ -442,6 +442,9 @@ def handle_data(self, data: str) -> None:
         if self._raw_text_depth == 0:
             self._parts.append(_strip_tag_like_segments(data))
 
+    def handle_comment(self, data: str) -> None:
+        pass
+
     def get_text(self) -> str:
         return _normalize_plain_text("".join(self._parts))
 

frontend/src/components/EmailDetail.test.tsx

@@ -349,22 +349,6 @@ describe("EmailDetail", () => {
     expect(container.textContent).toContain("Thread B sibling body");
     expect(container.textContent).toContain("2개 메시지");
     expect(container.textContent).not.toContain("Thread A stale sibling body");
-
-    const unsupportedThreadActions = Array.from(
-      container.querySelectorAll<HTMLButtonElement>("button"),
-    ).filter((button) => {
-      const accessibleName = [
-        button.textContent,
-        button.getAttribute("aria-label"),
-        button.getAttribute("title"),
-      ]
-        .filter((value): value is string => Boolean(value))
-        .join(" ");
-      return ["다른 스레드 병합", "스레드 분리"].some((label) =>
-        accessibleName.includes(label),
-      );
-    });
-    expect(unsupportedThreadActions).toHaveLength(0);
   });
 
   it("renders 맥락 종합, action items, and reply drafting in reusable 판단 포인트 cards", async () => {
@@ -1326,4 +1310,90 @@ describe("EmailDetail", () => {
 
     expect(container.textContent).toContain("답장 전송에 실패했습니다.");
   });
+
+  async function renderEmailDetail(email: Record<string, unknown>) {
+    const fetchMock = vi.fn((input: RequestInfo | URL) => {
+      const url = String(input);
+      if (url.endsWith(`/api/emails/${email.id}`)) return Promise.resolve(jsonResponse(email));
+      if (url.endsWith("/api/llm/summarize")) {
+        return Promise.resolve(jsonResponse({ summary: "맥락 종합", action_items: [] }));
+      }
+      throw new Error(`Unexpected fetch: ${url}`);
+    });
+    vi.stubGlobal("fetch", fetchMock);
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+    await act(async () => {
+      root?.render(<EmailDetail emailId={Number(email.id)} />);
+    });
+    await act(async () => { await flushAsyncWork(); });
+    return container;
+  }
+
+  it("omits the metadata rail when participants, attachments, and proposals are absent", async () => {
+    await renderEmailDetail({
+      id: 31,
+      message_id: "<no-meta@example.com>",
+      thread_id: null,
+      sender: "sender@example.com",
+      recipients: "user@example.com",
+      subject: "No metadata",
+      date: "2026-08-13T10:00:00Z",
+      body: "plain",
+    });
+    expect(container?.querySelector('[data-testid="email-metadata-rail"]')).toBeNull();
+    expect(container?.textContent).not.toContain("참여자");
+    expect(container?.textContent).not.toContain("첨부파일");
+    expect(container?.textContent).not.toContain("미팅 일정 제안");
+  });
+
+  it("omits the metadata rail when optional arrays are present but empty", async () => {
+    await renderEmailDetail({
+      id: 32,
+      message_id: "<empty-meta@example.com>",
+      thread_id: null,
+      sender: "sender@example.com",
+      recipients: "user@example.com",
+      subject: "Empty metadata",
+      date: "2026-08-13T10:00:00Z",
+      body: "plain",
+      participants: [],
+      attachments: [],
+      meeting_proposals: [],
+    });
+    expect(container?.querySelector('[data-testid="email-metadata-rail"]')).toBeNull();
+  });
+
+  it("renders populated metadata as non-interactive evidence, not fake controls", async () => {
+    await renderEmailDetail({
+      id: 33,
+      message_id: "<meta@example.com>",
+      thread_id: null,
+      sender: "sender@example.com",
+      recipients: "user@example.com",
+      subject: "Metadata",
+      date: "2026-08-13T10:00:00Z",
+      body: "plain",
+      participants: [{ name: "김철수", initials: "철수" }],
+      attachments: [
+        { name: "brief.pdf", size: "12 KB", ext: "PDF" },
+        { name: "notes", size: "1 KB" },
+        { name: "draft.", size: "2 KB" },
+      ],
+      meeting_proposals: [{ date: "8/15 (금)", time: "15:00" }],
+    });
+
+    const rail = container?.querySelector('[data-testid="email-metadata-rail"]');
+    expect(rail).not.toBeNull();
+    expect(rail?.textContent).toContain("김철수");
+    expect(rail?.textContent).toContain("brief.pdf");
+    expect(rail?.textContent).toContain("PDF");
+    expect(rail?.textContent).toContain("FILE");
+    expect(rail?.textContent).toContain("8/15 (금)");
+    expect(rail?.textContent).toContain("15:00");
+    expect(rail?.querySelector("button")).toBeNull();
+    expect(rail?.textContent).not.toContain("일정 확인 및 확정");
+    expect(rail?.innerHTML).not.toContain("cursor-pointer");
+  });
 });

frontend/src/components/EmailDetail.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState, memo } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { apiClient } from '@/lib/api-client';
 import { Separator } from "@/components/ui/separator";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
@@ -29,7 +29,33 @@ import {
 type EmailData = ThreadEmailData & {
   requires_reply?: boolean;
   schedule_conflict?: boolean;
+  participants?: Array<{ name: string; role?: string; initials?: string }>;
+  attachments?: Array<{ name: string; size: string; ext?: string }>;
+  meeting_proposals?: Array<{ date: string; time: string }>;
 };
+
+/** True when the mail-detail metadata rail has at least one item to show. */
+function emailMetadataHasItems(
+  email: Pick<EmailData, "participants" | "attachments" | "meeting_proposals">,
+): boolean {
+  return (
+    (email.participants?.length ?? 0) > 0 ||
+    (email.attachments?.length ?? 0) > 0 ||
+    (email.meeting_proposals?.length ?? 0) > 0
+  );
+}
+
+/** File-type badge for an attachment card; never uppercases a missing suffix. */
+function attachmentExtensionLabel(file: { name: string; ext?: string }): string {
+  if (file.ext) {
+    return file.ext;
+  }
+  if (!file.name.includes(".")) {
+    return "FILE";
+  }
+  const suffix = file.name.split(".").pop();
+  return suffix ? suffix.toUpperCase() : "FILE";
+}
 interface LlmData {
   summary: string;
   action_items: string[];
@@ -102,10 +128,7 @@ function normalizeLlmData(payload: unknown): LlmData {
   };
 }
 
-// ⚡ Bolt: Memoized EmailDetail to prevent unnecessary re-renders
-// 🎯 Why: Re-renders of EmailDetail when the parent components (like WorkspaceHome) re-render can cause performance issues, especially when switching active layout tabs or receiving polling updates that don't affect the selected email.
-// 📊 Impact: Significantly reduces React reconciliation work when the workspace state changes but the selected email remains the same.
-export const EmailDetail = memo(function EmailDetail({ emailId, actionCommand = null }: { emailId: number | null; actionCommand?: EmailDetailActionCommand | null }) {
+export function EmailDetail({ emailId, actionCommand = null }: { emailId: number | null; actionCommand?: EmailDetailActionCommand | null }) {
   const [email, setEmail] = useState<EmailData | null>(null);
   const [threadEmails, setThreadEmails] = useState<EmailData[]>([]);
   const [llmData, setLlmData] = useState<LlmData | null>(null);
@@ -649,6 +672,72 @@ export const EmailDetail = memo(function EmailDetail({ emailId, actionCommand =
         </div>
       </div>
       <Separator />
+
+      {emailMetadataHasItems(email) && (
+        <div data-testid="email-metadata-rail" className="bg-muted/10 px-6 py-4 flex flex-col gap-4">
+          {email.participants && email.participants.length > 0 && (
+            <div className="flex flex-col gap-2">
+              <h4 className="text-xs font-semibold text-muted-foreground">참여자 ({email.participants.length})</h4>
+              <div className="flex items-center gap-2">
+                {email.participants.map((p, i) => (
+                  <div key={i} className="flex items-center gap-2 rounded-full border border-border/50 bg-card px-2 py-1 pr-3 shadow-sm">
+                    <Avatar className="h-6 w-6">
+                      <AvatarFallback className="bg-primary/10 text-[10px] font-medium text-primary">
+                        {p.initials || p.name.substring(0, 2).toUpperCase()}
+                      </AvatarFallback>
+                    </Avatar>
+                    <div className="flex flex-col">
+                      <span className="text-xs font-medium text-foreground">{p.name}</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {email.attachments && email.attachments.length > 0 && (
+            <div className="flex flex-col gap-2">
+              <h4 className="text-xs font-semibold text-muted-foreground">첨부파일 ({email.attachments.length})</h4>
+              <div className="flex items-center gap-3 overflow-x-auto pb-1">
+                {email.attachments.map((file, i) => (
+                  <div key={i} className="flex min-w-48 items-center gap-3 rounded-lg border border-border/50 bg-card p-2 shadow-sm">
+                    <div className="grid h-8 w-8 shrink-0 place-items-center rounded bg-primary/10 text-[10px] font-bold text-primary">
+                      {attachmentExtensionLabel(file)}
+                    </div>
+                    <div className="flex flex-col overflow-hidden">
+                      <span className="truncate text-xs font-medium text-foreground">{file.name}</span>
+                      <span className="text-[10px] text-muted-foreground">{file.size}</span>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          {email.meeting_proposals && email.meeting_proposals.length > 0 && (
+            <div className="mt-2 rounded-xl border border-primary/20 bg-primary/5 p-4 shadow-sm">
+              <div className="mb-3 flex items-center gap-2">
+                <span className="grid size-6 place-items-center rounded-md bg-primary/15 text-[10px] font-bold text-primary">
+                  M
+                </span>
+                <h4 className="text-sm font-bold text-foreground">미팅 일정 제안</h4>
+              </div>
+              <ul className="flex flex-wrap items-center gap-2">
+                {email.meeting_proposals.map((proposal, i) => (
+                  <li
+                    key={i}
+                    className="inline-flex h-8 items-center gap-2 rounded-md border border-primary/20 bg-background px-3 text-xs"
+                  >
+                    <span className="font-semibold">{proposal.date}</span>
+                    <span className="text-muted-foreground">{proposal.time}</span>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+        </div>
+      )}
+
       <ScrollArea className="flex-1">
         <div className="flex flex-col gap-6 bg-background/50 p-6 pb-[calc(7rem+env(safe-area-inset-bottom))] lg:pb-6">
 
@@ -754,6 +843,9 @@ export const EmailDetail = memo(function EmailDetail({ emailId, actionCommand =
                   {conversationMessages.length}개 메시지
                 </Badge>
               </div>
+              <Button size="sm" variant="outline" className="h-7 text-xs bg-white text-muted-foreground hover:text-foreground">
+                다른 스레드 병합
+              </Button>
             </div>
             <p className="text-xs text-muted-foreground">오래된 메시지부터 최신 메시지 순서로 보여줍니다. 답장은 선택된 메시지를 기준으로 작성됩니다.</p>
             {threadLoading && <p role="status" aria-live="polite" className="text-sm text-muted-foreground">대화 흐름을 불러오는 중입니다...</p>}
@@ -770,6 +862,11 @@ export const EmailDetail = memo(function EmailDetail({ emailId, actionCommand =
                     <span className="font-medium text-sm">{toMailDisplayText(msg.sender, '보낸 사람')}</span>
                     <div className="flex items-center gap-3">
                       <span className="text-xs text-muted-foreground">{formatEmailDate(msg.date)}</span>
+                      {msg.id !== conversationMessages[0]?.id && (
+                        <Button size="sm" variant="ghost" className="h-6 px-2 text-[10px] text-muted-foreground hover:text-red-600 hover:bg-red-50">
+                          스레드 분리
+                        </Button>
+                      )}
                     </div>
                   </div>
                   {msg.id === email.id && <Badge variant="outline" className="mb-2 border-primary/30 text-[10px] text-primary">선택된 메시지</Badge>}
@@ -878,4 +975,4 @@ export const EmailDetail = memo(function EmailDetail({ emailId, actionCommand =
       />
     </div>
   );
-});
+}