{
+ if (!open) onClose();
+ }}
+ closeDisabled={busy}
>
- {/* 딤은 시트와 따로 둬서 기준 시트처럼 딤만 서서히 나타나고 시트는 아래에서 올라온다 */}
-
-
e.stopPropagation()}
- className={cn(
- "relative flex max-h-[min(85vh,560px)] w-full flex-col overflow-hidden",
- // PC는 가운데 모달, 모바일 기기는 화면 폭과 관계없이 바텀시트
- "mx-auto max-w-md rounded-2xl border border-gray-border bg-white shadow-lg",
- "mobile:max-w-none mobile:rounded-b-none mobile:rounded-t-[20px] mobile:border-x-0 mobile:border-b-0 mobile:shadow-[0_-8px_32px_-8px_rgba(0,0,0,0.12)]",
- "mobile:animate-in mobile:slide-in-from-bottom mobile:duration-200",
- "pb-[max(env(safe-area-inset-bottom,0px),12px)]",
- )}
+ {/* 높이 상한은 지금 값. 폴더 칩·제목은 고정하고 장소 목록만 스크롤한다. 지금 PC 모달에는 닫기 X가 없다(아래 닫기 버튼) */}
+
-
-
-
-
-
- 북마크에서 추가
-
-
- 북마크 장소를 이 일차에 추가해요.
-
-
+ 북마크에서 추가
+ 북마크 장소를 이 일차에 추가해요.
+
-
+
{categoriesLoading ? (
) : categoriesError ? (
@@ -293,7 +270,8 @@ export function AddFromBookmarkModal({
) : (
<>
-
+ {/* 칩 줄과 목록은 지금처럼 표면 끝까지 닿는다. 표면(Dialog p-5·시트 Body px-5)의 좌우 20px만큼 넓힌다 */}
+
{categories.map((c) => {
const selected = selectedCategoryId === c.categoryId;
@@ -322,7 +300,7 @@ export function AddFromBookmarkModal({
-
+
{bookmarksLoading ? (
) : bookmarksError ? (
@@ -377,17 +355,12 @@ export function AddFromBookmarkModal({
)}
-
-
- 닫기
-
-
-
-
+
+
+
+
+
+
);
}
diff --git a/src/app/(main)/plan/_components/itinerary/PlanDaySection.menu.test.tsx b/src/app/(main)/plan/_components/itinerary/PlanDaySection.menu.test.tsx
new file mode 100644
index 00000000..9808da82
--- /dev/null
+++ b/src/app/(main)/plan/_components/itinerary/PlanDaySection.menu.test.tsx
@@ -0,0 +1,50 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import { PlanDaySection } from "./PlanDaySection";
+
+let host: HTMLDivElement;
+let root: Root;
+const outer = vi.fn();
+const addDay = vi.fn();
+const hostEvents = { onClick: outer, onMouseDown: outer, onPointerDown: outer, onTouchStart: outer };
+beforeEach(() => {
+ vi.stubGlobal("IS_REACT_ACT_ENVIRONMENT", true);
+ vi.clearAllMocks();
+ host = document.createElement("div");
+ document.body.append(host);
+ root = createRoot(host);
+});
+afterEach(async () => {
+ await act(async () => root.unmount());
+ host.remove();
+ vi.unstubAllGlobals();
+});
+
+it("keeps menu trigger and portal actions out of the day host while retaining keyboard controls", async () => {
+ await act(async () => root.render(
+
,
+ ));
+ const trigger = document.querySelector
('[aria-label="일차 메뉴"]')!;
+ for (const type of ["mousedown", "pointerdown", "touchstart"]) {
+ await act(async () => trigger.dispatchEvent(new MouseEvent(type, { bubbles: true })));
+ }
+ await act(async () => trigger.click());
+ expect(outer).not.toHaveBeenCalled();
+ const item = document.querySelector('[role="menuitem"]')!;
+ expect(item).not.toBeNull();
+ for (const type of ["mousedown", "pointerdown", "touchstart"]) {
+ await act(async () => item.dispatchEvent(new MouseEvent(type, { bubbles: true })));
+ }
+ await act(async () => item.click());
+ expect(addDay).toHaveBeenCalledOnce();
+ expect(outer).not.toHaveBeenCalled();
+ await act(async () => trigger.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowDown", bubbles: true, cancelable: true })));
+ expect(trigger.getAttribute("aria-expanded")).toBe("true");
+ await act(async () => document.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape", bubbles: true })));
+ expect(trigger.getAttribute("aria-expanded")).toBe("false");
+ expect(document.querySelector('[aria-controls$="-panel"]')?.getAttribute("aria-expanded")).toBe("true");
+});
diff --git a/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx b/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx
index d6423df0..eed0eb6c 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx
@@ -1,24 +1,23 @@
"use client";
+import { MenuDotHorizontalIcon, PlusIcon, TrashIcon } from "@/assets/icons";
import { ExpenseIcon } from "@/components/icons/ExpenseIcon";
import { Badge } from "@/components/ui/badge";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
import { Switch } from "@/components/ui/switch";
-import { useOnClickOutside } from "@/hooks/useOnClickOutside";
import { MAIN_CARD_INNER_PADDING_X_CLASS } from "@/lib/layout-tokens";
import { usePlanItineraryExpandedStore } from "@/stores/plan-itinerary-expanded-store";
import { usePlanScheduleRouteVisibilityStore } from "@/stores/plan-schedule-route-visibility-store";
import { usePlanItemCrossDayDragStore } from "@/stores/plan-item-cross-day-drag-store";
import { cn } from "@/lib/utils";
-import {
- ChevronDown,
- ChevronUp,
- GripVertical,
- MoreHorizontal,
- Plus,
- Trash2,
-} from "lucide-react";
-import { useCallback, useId, useRef, useState } from "react";
-import type { CSSProperties, DragEvent, ReactNode, Ref } from "react";
+import { ChevronDown, ChevronUp, GripVertical } from "lucide-react";
+import { useCallback, useId, useState } from "react";
+import type { CSSProperties, DragEvent, ReactNode, Ref, SyntheticEvent } from "react";
export type PlanDaySectionDragHandleProps = {
dragDisabled?: boolean;
@@ -63,6 +62,16 @@ export type PlanDaySectionProps = {
};
};
+// 메뉴는 body로 포털되지만 React 이벤트는 트리를 따라 섹션(일차 간 드롭 핸들러)으로 올라간다.
+// 트리거와 포털 표면에서만 포인터 전파를 끊고, 키보드는 Base UI에 전달한다
+const stopPropagation = (event: SyntheticEvent) => event.stopPropagation();
+const pointerBoundary = {
+ onClick: stopPropagation,
+ onMouseDown: stopPropagation,
+ onPointerDown: stopPropagation,
+ onTouchStart: stopPropagation,
+};
+
export function PlanDaySection({
title,
subtitle,
@@ -149,8 +158,6 @@ export function PlanDaySection({
onRequestAddExpense != null || onRequestDeleteSchedule != null || onRequestInsertScheduleAfter != null;
const [menuOpen, setMenuOpen] = useState(false);
- const menuRef = useRef(null);
- useOnClickOutside(menuRef, () => setMenuOpen(false));
return (
{showScheduleMenu ? (
-
-
+ {
- e.stopPropagation();
- if (isScheduleMenuDisabled) return;
- setMenuOpen((v) => !v);
- }}
className={cn(
- "rounded-lg p-2 text-dark-gray transition-colors",
+ "shrink-0 self-center rounded-lg p-2 text-dark-gray transition-colors",
isScheduleMenuDisabled
? "cursor-not-allowed opacity-40"
: "cursor-pointer hover:bg-bubble-gray/60",
)}
>
-
- {menuOpen && !isScheduleMenuDisabled ? (
-
- {onRequestAddExpense ? (
-
{
- e.stopPropagation();
- setMenuOpen(false);
- onRequestAddExpense();
- }}
- >
-
- ) : null}
- {onRequestInsertScheduleAfter ? (
-
{
- e.stopPropagation();
- setMenuOpen(false);
- onRequestInsertScheduleAfter();
- }}
- >
-
- ) : null}
- {onRequestDeleteSchedule ? (
-
{
- e.stopPropagation();
- setMenuOpen(false);
- if (isDeleteScheduleDisabled) return;
- onRequestDeleteSchedule();
- }}
- >
-
- ) : null}
-
- ) : null}
-
+ {onRequestAddExpense ? (
+
+
+ ) : null}
+ {onRequestInsertScheduleAfter ? (
+
+
+ ) : null}
+ {onRequestDeleteSchedule ? (
+
+
+ ) : null}
+
+
) : null}
{summaryAction || trackedSid !== undefined ? (
diff --git a/src/app/(main)/plan/_components/itinerary/PlanItemMemoForm.tsx b/src/app/(main)/plan/_components/itinerary/PlanItemMemoForm.tsx
index 6341196f..b80310a2 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanItemMemoForm.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanItemMemoForm.tsx
@@ -5,6 +5,8 @@ import { MemoIcon } from "@/components/icons";
import { useCallback, useEffect, useState } from "react";
import { toast } from "sonner";
+import { ConfirmDialog } from "@/components/settings/ConfirmDialog";
+import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import { useUpdateScheduleItem } from "@/hooks/useRooms";
import { PLAN_PLACE_CARD_TW } from "@/lib/layout-tokens";
@@ -36,73 +38,6 @@ function isLocallyDirty(draft: string, editStartMemo: string): boolean {
return draft !== editStartMemo;
}
-function MemoOverwriteConfirmDialog({
- open,
- isPending,
- onCancel,
- onConfirm,
-}: {
- open: boolean;
- isPending: boolean;
- onCancel: () => void;
- onConfirm: () => void;
-}) {
- useEffect(() => {
- if (!open) return;
- const onKeyDown = (e: KeyboardEvent) => {
- if (e.key === "Escape") onCancel();
- };
- window.addEventListener("keydown", onKeyDown);
- return () => window.removeEventListener("keydown", onKeyDown);
- }, [open, onCancel]);
-
- if (!open) return null;
-
- return (
-
{
- if (ev.target === ev.currentTarget) onCancel();
- }}
- >
-
e.stopPropagation()}
- className="w-full max-w-sm rounded-2xl border border-gray-border bg-white p-5 shadow-lg"
- >
-
- 다른 사람의 입력을 덮어씁니다!
-
-
- 다른 멤버가 메모를 수정했어요. 저장하면 그 내용 대신 지금 작성 중인 메모로 바뀝니다.
-
-
-
- 취소
-
-
- {isPending ? "저장 중…" : "확인"}
-
-
-
-
- );
-}
-
export function PlanItemMemoReadOnly({
memo,
onDelete,
@@ -241,8 +176,9 @@ export function PlanItemMemoEditor({
{draft.length}/{SCHEDULE_ITEM_MEMO_MAX_LENGTH}
-
{
setDraft(incomingMemo);
setEditStartMemo(normalizeMemoDraft(incomingMemo));
@@ -250,34 +186,32 @@ export function PlanItemMemoEditor({
onClose();
}}
disabled={isPending}
- className={cn(
- "cursor-pointer border border-gray-border bg-white text-gray-800 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-40",
- PLAN_PLACE_CARD_TW.timeSaveButtonCompact
- )}
>
취소
-
-
+ void handleSave()}
- disabled={isPending || !dirty}
- className={cn(
- "cursor-pointer bg-primary text-white transition hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-40",
- PLAN_PLACE_CARD_TW.timeSaveButtonCompact
- )}
+ disabled={!dirty}
+ loading={isPending}
+ loadingLabel="저장 중"
>
- {isPending ? "저장 중…" : "저장"}
-
+ 저장
+