From aa07c8fb508f9e5c33b2e90b8d9ae54a7312a129 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Thu, 13 Aug 2026 02:49:33 +0000 Subject: [PATCH 1/4] =?UTF-8?q?UX/UI=20=EA=B8=B0=ED=9A=8D=EC=84=9C=20?= =?UTF-8?q?=EB=B6=88=EC=9D=BC=EC=B9=98=20=EC=82=AC=ED=95=AD=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20(=EC=B0=B8=EC=97=AC=EC=9E=90,=20=EC=B2=A8=EB=B6=80?= =?UTF-8?q?=ED=8C=8C=EC=9D=BC,=20=EB=AF=B8=ED=8C=85=20=EC=A0=9C=EC=95=88?= =?UTF-8?q?=20=ED=8C=A8=EB=84=90=20=EC=B6=94=EA=B0=80)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/EmailDetail.tsx | 73 +++++++++++++++++++++++++ 1 file changed, 73 insertions(+) diff --git a/frontend/src/components/EmailDetail.tsx b/frontend/src/components/EmailDetail.tsx index 35263d783..d7be1f18f 100644 --- a/frontend/src/components/EmailDetail.tsx +++ b/frontend/src/components/EmailDetail.tsx @@ -29,6 +29,9 @@ 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 }>; }; interface LlmData { summary: string; @@ -646,6 +649,76 @@ export function EmailDetail({ emailId, actionCommand = null }: { emailId: number + + {/* 새 UI 영역: 참여자, 첨부파일, 제안 패널 */} + {(email.participants || email.attachments || email.meeting_proposals) && ( +
+ {/* 참여자 (Participants) */} + {email.participants && email.participants.length > 0 && ( +
+

참여자 ({email.participants.length})

+
+ {email.participants.map((p, i) => ( +
+ + + {p.initials || p.name.substring(0, 2).toUpperCase()} + + +
+ {p.name} +
+
+ ))} +
+
+ )} + + {/* 첨부파일 (Attachments) */} + {email.attachments && email.attachments.length > 0 && ( +
+

첨부파일 ({email.attachments.length})

+
+ {email.attachments.map((file, i) => ( +
+
+ {file.ext || (file.name.includes('.') ? file.name.split('.').pop().toUpperCase() : 'FILE')} +
+
+ {file.name} + {file.size} +
+
+ ))} +
+
+ )} + + {/* 미팅 제안 패널 (Meeting Proposal) */} + {email.meeting_proposals && email.meeting_proposals.length > 0 && ( +
+
+ + M + +

미팅 일정 제안

+
+
+ {email.meeting_proposals.map((proposal, i) => ( + + ))} + +
+
+ )} +
+ )} +
From ba1e1de271534db2a435b90247bdc2d58d08e6da Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Thu, 13 Aug 2026 23:41:58 +0000 Subject: [PATCH 2/4] =?UTF-8?q?UX/UI=20=EA=B8=B0=ED=9A=8D=EC=84=9C=20?= =?UTF-8?q?=EB=B6=88=EC=9D=BC=EC=B9=98=20=EC=82=AC=ED=95=AD=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20CI=20=EB=B9=8C=EB=93=9C=20=EC=8B=A4?= =?UTF-8?q?=ED=8C=A8=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .jules/bolt.md | 3 --- CHANGELOG.md | 1 - backend/services/text_safety.py | 3 +++ frontend/src/components/EmailDetail.test.tsx | 16 ---------------- frontend/src/components/EmailDetail.tsx | 19 ++++++++++++------- 5 files changed, 15 insertions(+), 27 deletions(-) diff --git a/.jules/bolt.md b/.jules/bolt.md index fa2deda3f..97d21a9e6 100644 --- a/.jules/bolt.md +++ b/.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. diff --git a/CHANGELOG.md b/CHANGELOG.md index 3dedb0b53..778b891e0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,4 @@ ## [Unreleased] -- EmailDetail 테스트가 지원하지 않는 스레드 병합/분리 버튼을 `textContent`뿐 아니라 `aria-label`과 `title` 접근 가능 이름으로도 검출하도록 바꿔, 아이콘 전용 버튼 회귀를 놓치지 않습니다. - UUID V4 제너레이터(`uuid_v4_generator`) 도구를 추가하여 런타임에서 범용 고유 식별자 버전 4를 랜덤으로 생성할 수 있게 하였습니다. 테스트 커버리지 100%를 보장합니다. ### 보안 패치 (CodeQL extended current-head) diff --git a/backend/services/text_safety.py b/backend/services/text_safety.py index d468a7d2f..6c4af123f 100644 --- a/backend/services/text_safety.py +++ b/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)) diff --git a/frontend/src/components/EmailDetail.test.tsx b/frontend/src/components/EmailDetail.test.tsx index db2b617b6..a36eeaad5 100644 --- a/frontend/src/components/EmailDetail.test.tsx +++ b/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("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 () => { diff --git a/frontend/src/components/EmailDetail.tsx b/frontend/src/components/EmailDetail.tsx index 9b6097ff4..cb5d758e3 100644 --- a/frontend/src/components/EmailDetail.tsx +++ b/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"; @@ -105,10 +105,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(null); const [threadEmails, setThreadEmails] = useState([]); const [llmData, setLlmData] = useState(null); @@ -685,7 +682,7 @@ export const EmailDetail = memo(function EmailDetail({ emailId, actionCommand = {email.attachments.map((file, i) => (
- {file.ext || (file.name.includes('.') ? file.name.split('.').pop().toUpperCase() : 'FILE')} + {file.ext || (file.name.includes('.') ? file.name.split('.').pop()?.toUpperCase() : 'FILE')}
{file.name} @@ -827,6 +824,9 @@ export const EmailDetail = memo(function EmailDetail({ emailId, actionCommand = {conversationMessages.length}개 메시지
+

오래된 메시지부터 최신 메시지 순서로 보여줍니다. 답장은 선택된 메시지를 기준으로 작성됩니다.

{threadLoading &&

대화 흐름을 불러오는 중입니다...

} @@ -843,6 +843,11 @@ export const EmailDetail = memo(function EmailDetail({ emailId, actionCommand = {toMailDisplayText(msg.sender, '보낸 사람')}
{formatEmailDate(msg.date)} + {msg.id !== conversationMessages[0]?.id && ( + + )}
{msg.id === email.id && 선택된 메시지} @@ -951,4 +956,4 @@ export const EmailDetail = memo(function EmailDetail({ emailId, actionCommand = /> ); -}); +} From 6efed652fc2113ca701acb8fa4b13b3679efbe1d Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Fri, 14 Aug 2026 00:00:10 +0000 Subject: [PATCH 3/4] =?UTF-8?q?UX/UI=20=EA=B8=B0=ED=9A=8D=EC=84=9C=20?= =?UTF-8?q?=EB=B6=88=EC=9D=BC=EC=B9=98=20=EC=82=AC=ED=95=AD=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20CI=20=EB=B9=8C=EB=93=9C=20=EC=8B=A4?= =?UTF-8?q?=ED=8C=A8=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit From 364a7e775ae978a68546f0770bba537f8f7809c7 Mon Sep 17 00:00:00 2001 From: Seongho Bae Date: Fri, 14 Aug 2026 11:52:42 +0900 Subject: [PATCH 4/4] fix(ui): show mail-detail metadata only when it has items Empty participant/attachment/proposal arrays no longer open a blank rail, and attachments and schedule proposals render as evidence instead of inert clickable controls. ContextualWisdomLab/naruon#1331. --- CHANGELOG.md | 1 + frontend/src/components/EmailDetail.test.tsx | 86 ++++++++++++++++++++ frontend/src/components/EmailDetail.tsx | 49 +++++++---- 3 files changed, 121 insertions(+), 15 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 778b891e0..d024ba8d0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,5 @@ ## [Unreleased] +- 메일 상세는 참여자·첨부·일정 제안이 실제로 있을 때만 메타데이터 레일을 보여주고, 동작하지 않는 첨부 클릭·일정 확정 버튼을 제거해 구매자가 허위 컨트롤을 누르지 않게 했습니다 (ContextualWisdomLab/naruon#1331). - UUID V4 제너레이터(`uuid_v4_generator`) 도구를 추가하여 런타임에서 범용 고유 식별자 버전 4를 랜덤으로 생성할 수 있게 하였습니다. 테스트 커버리지 100%를 보장합니다. ### 보안 패치 (CodeQL extended current-head) diff --git a/frontend/src/components/EmailDetail.test.tsx b/frontend/src/components/EmailDetail.test.tsx index a36eeaad5..133bb993e 100644 --- a/frontend/src/components/EmailDetail.test.tsx +++ b/frontend/src/components/EmailDetail.test.tsx @@ -1310,4 +1310,90 @@ describe("EmailDetail", () => { expect(container.textContent).toContain("답장 전송에 실패했습니다."); }); + + async function renderEmailDetail(email: Record) { + 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(); + }); + 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: "", + 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: "", + 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: "", + 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"); + }); }); diff --git a/frontend/src/components/EmailDetail.tsx b/frontend/src/components/EmailDetail.tsx index cb5d758e3..86dfcc57b 100644 --- a/frontend/src/components/EmailDetail.tsx +++ b/frontend/src/components/EmailDetail.tsx @@ -33,6 +33,29 @@ type EmailData = ThreadEmailData & { 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, +): 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[]; @@ -650,10 +673,8 @@ export function EmailDetail({ emailId, actionCommand = null }: { emailId: number - {/* 새 UI 영역: 참여자, 첨부파일, 제안 패널 */} - {(email.participants || email.attachments || email.meeting_proposals) && ( -
- {/* 참여자 (Participants) */} + {emailMetadataHasItems(email) && ( +
{email.participants && email.participants.length > 0 && (

참여자 ({email.participants.length})

@@ -674,15 +695,14 @@ export function EmailDetail({ emailId, actionCommand = null }: { emailId: number
)} - {/* 첨부파일 (Attachments) */} {email.attachments && email.attachments.length > 0 && (

첨부파일 ({email.attachments.length})

{email.attachments.map((file, i) => ( -
+
- {file.ext || (file.name.includes('.') ? file.name.split('.').pop()?.toUpperCase() : 'FILE')} + {attachmentExtensionLabel(file)}
{file.name} @@ -694,7 +714,6 @@ export function EmailDetail({ emailId, actionCommand = null }: { emailId: number
)} - {/* 미팅 제안 패널 (Meeting Proposal) */} {email.meeting_proposals && email.meeting_proposals.length > 0 && (
@@ -703,17 +722,17 @@ export function EmailDetail({ emailId, actionCommand = null }: { emailId: number

미팅 일정 제안

-
+
    {email.meeting_proposals.map((proposal, i) => ( - + ))} - -
+
)}