-
장소 정보를 불러오지 못했어요.
-
void refetch()} className="mt-2 text-primary underline">다시 시도
+
+
+ 장소 정보를 불러오지 못했어요.
+
+ void refetch()} className="text-primary underline">다시 시도
+
+
);
if (showSkeleton) return (
-
);
return (
diff --git a/src/app/(main)/member-settings/_components/AddMemberPanel.tsx b/src/app/(main)/member-settings/_components/AddMemberPanel.tsx
index 3ae9471a..c8a91c7f 100644
--- a/src/app/(main)/member-settings/_components/AddMemberPanel.tsx
+++ b/src/app/(main)/member-settings/_components/AddMemberPanel.tsx
@@ -1,7 +1,7 @@
"use client";
import { CopyCheckIcon, CopyIcon, RefreshIcon, ShareIcon } from "@/assets/icons";
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
import { useEffect, useRef, useState } from "react";
import { toast } from "sonner";
@@ -37,7 +37,7 @@ function InviteFallback({ canIssue, inviteCode, isRoomDetailLoading, isRoomDetai
isRegenerating: boolean;
}>) {
if (isRoomDetailLoading || isRegenerating) {
- return
;
+ return
;
}
let message = "발급에 실패했어요. 아래에서 재발급을 눌러 주세요.";
if (isRoomDetailError) message = "방 정보를 불러오지 못했어요.";
diff --git a/src/app/(main)/member-settings/_components/JoinRequestsSection.tsx b/src/app/(main)/member-settings/_components/JoinRequestsSection.tsx
index 69886680..109cc620 100644
--- a/src/app/(main)/member-settings/_components/JoinRequestsSection.tsx
+++ b/src/app/(main)/member-settings/_components/JoinRequestsSection.tsx
@@ -55,8 +55,7 @@ function JoinRequestCard({
diff --git a/src/app/(main)/member-settings/_components/MemberCard.tsx b/src/app/(main)/member-settings/_components/MemberCard.tsx
index ba2dc313..eb2cff13 100644
--- a/src/app/(main)/member-settings/_components/MemberCard.tsx
+++ b/src/app/(main)/member-settings/_components/MemberCard.tsx
@@ -1,9 +1,8 @@
"use client";
-import { useEffect, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-
import { MenuDotHorizontalIcon, UserEditIcon, UserXIcon } from "@/assets/icons";
+import { Badge } from "@/components/ui/badge";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { UserAvatar } from "@/components/user/UserAvatar";
import type { RoomMemberStatus } from "@/lib/api/rooms";
import { cn } from "@/lib/utils";
@@ -51,46 +50,13 @@ export function MemberCard({ member, isViewerHost, onKick, onTransfer }: Readonl
member.role !== "HOST" &&
!isLeft;
- // 스크롤 영역(헤더 드롭다운) 안에서도 잘리지 않도록 메뉴는 body에 화면 기준 위치로 띄운다
- const [menuPosition, setMenuPosition] = useState<{ top: number; right: number } | null>(null);
- const open = menuPosition !== null;
- const buttonRef = useRef
(null);
- const menuRef = useRef(null);
-
- function toggleMenu() {
- const rect = buttonRef.current?.getBoundingClientRect();
- setMenuPosition(open || !rect ? null : { top: rect.bottom + 4, right: window.innerWidth - rect.right });
- }
-
- useEffect(() => {
- if (!open) return;
- const close = () => setMenuPosition(null);
- function handleClickOutside(e: MouseEvent) {
- const target = e.target as Node;
- if (!buttonRef.current?.contains(target) && !menuRef.current?.contains(target)) close();
- }
- function handleEscape(e: KeyboardEvent) {
- if (e.key === "Escape") close();
- }
- document.addEventListener("mousedown", handleClickOutside);
- document.addEventListener("keydown", handleEscape);
- window.addEventListener("scroll", close, true);
- window.addEventListener("resize", close);
- return () => {
- document.removeEventListener("mousedown", handleClickOutside);
- document.removeEventListener("keydown", handleEscape);
- window.removeEventListener("scroll", close, true);
- window.removeEventListener("resize", close);
- };
- }, [open]);
-
return (
@@ -99,68 +65,34 @@ export function MemberCard({ member, isViewerHost, onKick, onTransfer }: Readonl
{member.isCurrentUser ? " (나)" : ""}
-
+
{member.role === "HOST" ? "방장" : "참여자"}
-
+
{canAct && (
-
-
+
-
- {menuPosition && createPortal(
-
- {
- onTransfer(member.id);
- setMenuPosition(null);
- }}
- className="flex h-10 w-full cursor-pointer items-center gap-2.5 border-b-[0.5px] border-border-subtle pl-3.5 text-left text-label-m-regular text-text transition-colors hover:bg-fill"
- >
-
- {
- onKick(member.id);
- setMenuPosition(null);
- }}
- className="flex h-10 w-full cursor-pointer items-center gap-2.5 pl-3.5 text-left text-label-m-regular text-status-negative transition-colors hover:bg-fill"
- >
-
-
,
- document.body,
- )}
-
+
+ {/* 지금 메뉴 폭 w-60을 유지한다 */}
+
+ onTransfer(member.id)}>
+
+ onKick(member.id)}>
+
+
+
)}
);
diff --git a/src/app/(main)/member-settings/_components/RoomMembersSection.tsx b/src/app/(main)/member-settings/_components/RoomMembersSection.tsx
index 36c2bac3..386cc879 100644
--- a/src/app/(main)/member-settings/_components/RoomMembersSection.tsx
+++ b/src/app/(main)/member-settings/_components/RoomMembersSection.tsx
@@ -1,6 +1,6 @@
"use client";
-import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
+import { Spinner } from "@/components/ui/spinner";
import { MainPageHeader } from "@/components/layout/MainPageHeader";
import { AddMemberPanel } from "./AddMemberPanel";
import { JoinRequestsSection } from "./JoinRequestsSection";
@@ -54,7 +54,7 @@ export function RoomMembersSection() {
) : null}
{isMembersLoading ? (
-
- {description}
-
- {actionLabel}
-
-
+ {
+ if (!open) onClose();
+ }}
+ >
+ {/* 지금처럼 딤을 눌러도 닫힌다 */}
+
+
+ {title}
+ {description}
+
+
+ {/* AlertDialogAction은 눌러도 저절로 닫히지 않는다 */}
+ {actionLabel}
+
+
+
);
}
@@ -97,7 +117,6 @@ export function useMemberActions() {
<>
{leaveDialog === "confirm" ? (
{
- const onKey = (e: KeyboardEvent) => {
- if (e.key === "Escape") onClose();
- };
- window.addEventListener("keydown", onKey);
- return () => window.removeEventListener("keydown", onKey);
- }, [onClose]);
-
const {
data: bookmarkRows,
isPending: bookmarksLoading,
@@ -148,7 +149,6 @@ export function AddFromBookmarkModal({
useCreateScheduleItem();
const busy = isCreatingItem || addingGooglePlaceId != null;
- const sheetDrag = useSheetDrag(onClose, busy);
const handleAddPlace = useCallback(
async (googlePlaceId: string) => {
@@ -224,52 +224,29 @@ export function AddFromBookmarkModal({
);
return (
- {
+ 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.route-switch.test.tsx b/src/app/(main)/plan/_components/itinerary/PlanDaySection.route-switch.test.tsx
new file mode 100644
index 00000000..717c8d81
--- /dev/null
+++ b/src/app/(main)/plan/_components/itinerary/PlanDaySection.route-switch.test.tsx
@@ -0,0 +1,30 @@
+// @vitest-environment jsdom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { expect, it } from "vitest";
+import { PlanDaySection } from "./PlanDaySection";
+import { usePlanScheduleRouteVisibilityStore } from "@/stores/plan-schedule-route-visibility-store";
+
+Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true });
+
+it("label and switch change route visibility without collapsing the day", async () => {
+ usePlanScheduleRouteVisibilityStore.setState({ visibleByScheduleId: {}, visibilityOrder: [] });
+ const host = document.createElement("div");
+ document.body.append(host);
+ const root = createRoot(host);
+ try {
+ await act(async () => root.render(장소 ));
+ const heading = host.querySelector('button[aria-expanded]')!;
+ const toggle = host.querySelector('[role="switch"]')!;
+ await act(async () => host.querySelector("label")!.click());
+ expect(toggle.getAttribute("aria-checked")).toBe("false");
+ expect(usePlanScheduleRouteVisibilityStore.getState().visibleByScheduleId[10]).toBe(false);
+ expect(heading.getAttribute("aria-expanded")).toBe("true");
+ await act(async () => toggle.click());
+ expect(toggle.getAttribute("aria-checked")).toBe("true");
+ expect(heading.getAttribute("aria-expanded")).toBe("true");
+ } finally {
+ await act(async () => root.unmount());
+ host.remove();
+ }
+});
diff --git a/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx b/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx
index b13f43ff..eed0eb6c 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanDaySection.tsx
@@ -1,22 +1,23 @@
"use client";
+import { MenuDotHorizontalIcon, PlusIcon, TrashIcon } from "@/assets/icons";
import { ExpenseIcon } from "@/components/icons/ExpenseIcon";
-import { useOnClickOutside } from "@/hooks/useOnClickOutside";
+import { Badge } from "@/components/ui/badge";
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Switch } from "@/components/ui/switch";
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;
@@ -61,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,
@@ -119,10 +130,6 @@ export function PlanDaySection({
const setRouteVisible = usePlanScheduleRouteVisibilityStore(
(s) => s.setRouteVisible,
);
- const toggleRouteVisible = useCallback(() => {
- if (trackedSid === undefined) return;
- setRouteVisible(trackedSid, !routeVisible);
- }, [trackedSid, routeVisible, setRouteVisible]);
const toggle = useCallback(() => {
if (trackedSid !== undefined) {
@@ -151,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 (
{subtitle ? (
- // 디자인 시스템 Badge / Weak / Brand / md — 배경색은 시맨틱 토큰이 없어 원시 토큰을 쓴다
-
+
{title}
-
+
) : null}
@@ -229,88 +233,45 @@ export function PlanDaySection({
{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 ? (
@@ -320,27 +281,16 @@ export function PlanDaySection({
)}>
{summaryAction}
{trackedSid !== undefined ? (
-
{
- event.stopPropagation();
- toggleRouteVisible();
- }}
- aria-checked={routeVisible}
- className="flex min-h-8 shrink-0 cursor-pointer items-center gap-2 rounded-lg px-2 text-label-xs-regular text-text-subtle transition-colors hover:bg-bubble-gray/60 focus-visible:outline-2 focus-visible:outline-primary"
+
지도에 경로 표시
-
-
-
+
setRouteVisible(trackedSid, checked)}
+ />
+
) : null}
{
- 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 ? "저장 중…" : "확인"}
-
-
-
-
-