From 39d325758adac5cd3e3c45594918c542316a6402 Mon Sep 17 00:00:00 2001
From: KangShingyu <103213494+KangShinGyu98@users.noreply.github.com>
Date: Sat, 3 Oct 2026 18:49:39 +0900
Subject: [PATCH 1/8] =?UTF-8?q?fix(chat):=EC=B1=84=ED=8C=85=20=ED=94=84?=
 =?UTF-8?q?=EB=A6=AC=EB=B7=B0=EC=99=80=20=ED=95=98=EB=8B=A8=EC=97=90=20---?=
 =?UTF-8?q?"=EC=97=AC=EA=B8=B0=EA=B9=8C=EC=A7=80=20=EC=9D=BD=EC=97=88?=
 =?UTF-8?q?=EC=8A=B5=EB=8B=88=EB=8B=A4."---=20=EC=9E=91=EB=8F=99=20?=
 =?UTF-8?q?=EB=B0=A9=EC=8B=9D=20=EC=88=98=EC=A0=95=20(#205)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(chat):새 메시지가 없는데 --- 표시 제거

* feat(chat):하단에 프리뷰 작성

* fix(chat):우하단 아래로 내려가기 버튼 약간 왼쪽으로 수정

* fix(chat): 프리뷰 디자인 수정

---------

Co-authored-by: “KangShinGyu” <“rkdtlseb@naver.com”>
---
 .../chat/messages/ChatMemberAvatarRing.tsx    |  2 +
 .../chat/messages/ChatMessageList.tsx         | 64 +++++++++++++++--
 .../chat/messages/JumpToBottomButton.tsx      |  8 ++-
 .../chat/messages/NewMessagePreviewButton.tsx | 68 +++++++++++++++++++
 src/hooks/useChatMessages.ts                  |  2 +
 src/lib/chat/readBoundary.test.ts             | 41 +++++++++++
 src/lib/chat/readBoundary.ts                  | 10 ++-
 7 files changed, 188 insertions(+), 7 deletions(-)
 create mode 100644 src/components/chat/messages/NewMessagePreviewButton.tsx
 create mode 100644 src/lib/chat/readBoundary.test.ts

diff --git a/src/components/chat/messages/ChatMemberAvatarRing.tsx b/src/components/chat/messages/ChatMemberAvatarRing.tsx
index 75de9447..3cd76a01 100644
--- a/src/components/chat/messages/ChatMemberAvatarRing.tsx
+++ b/src/components/chat/messages/ChatMemberAvatarRing.tsx
@@ -37,6 +37,8 @@ export function ChatMemberAvatarRing({
         <img
           src={avatarUrl}
           alt={alt}
+          // 구글 프로필(lh3.googleusercontent.com/a/…)은 Referer가 붙으면 로드를 거부한다
+          referrerPolicy="no-referrer"
           className={cn(
             "h-full w-full object-cover",
             !reduceMotion && "transition-opacity duration-150 ease-out",
diff --git a/src/components/chat/messages/ChatMessageList.tsx b/src/components/chat/messages/ChatMessageList.tsx
index ad718399..1bbeebe4 100644
--- a/src/components/chat/messages/ChatMessageList.tsx
+++ b/src/components/chat/messages/ChatMessageList.tsx
@@ -36,8 +36,18 @@ import {
 } from "./ChatMessageGroup";
 import { PlaceShareCard } from "./PlaceShareCard";
 import { JumpToBottomButton } from "./JumpToBottomButton";
+import { NewMessagePreviewButton } from "./NewMessagePreviewButton";
 import { ChatReadDivider } from "./ChatReadDivider";
 
+/** 일반 채팅(내 것 포함)·장소 공유만 하단 미리보기 대상 — AI·시스템 제외 */
+function isPreviewMessage(message: ChatMessage): boolean {
+  return (
+    message.type === "other" ||
+    message.type === "mine" ||
+    message.type === "place"
+  );
+}
+
 function syncFollowTailFromScrollRoot(
   root: HTMLDivElement,
   followTailRef: MutableRefObject<boolean>,
@@ -106,12 +116,18 @@ export function ChatMessageList({
   const [isAtBottom, setIsAtBottom] = useState(true);
   /** 하단으로 부드럽게 이동 중 상태 정리용 */
   const [smoothJumpToBottom, setSmoothJumpToBottom] = useState(false);
+  /** 위로 스크롤한 동안 도착한 다른 멤버의 최신 메시지 */
+  const [newMessagePreview, setNewMessagePreview] =
+    useState<ChatMessage | null>(null);
+  /** 스크롤바 폭(px) — 하단 버튼이 스크롤바에 가리지 않게 그만큼 오른쪽을 비운다 */
+  const [scrollbarWidth, setScrollbarWidth] = useState(0);
 
   const scrollToBottomSmooth = useCallback(() => {
     bottomRef.current?.scrollIntoView({ behavior: "smooth", block: "end" });
   }, []);
 
   const handleJumpClick = useCallback(() => {
+    setNewMessagePreview(null);
     restoringReadBoundaryRef.current = false;
     followTailRef.current = true;
     if (hasMoreNewer && onJumpToLatest) {
@@ -150,7 +166,10 @@ export function ChatMessageList({
     const near = dist < CHAT_NEAR_BOTTOM_PX;
     followTailRef.current = near;
     setIsAtBottomIfChanged(setIsAtBottom, near);
-    if (near) onAtBottom?.();
+    if (near) {
+      setNewMessagePreview(null);
+      onAtBottom?.();
+    }
   }, [onAtBottom]);
 
   useLayoutEffect(() => {
@@ -225,6 +244,22 @@ export function ChatMessageList({
     const nearAfter = distAfter < CHAT_NEAR_BOTTOM_PX;
     setIsAtBottomIfChanged(setIsAtBottom, nearAfter);
 
+    const newest = messages[count - 1];
+    if (
+      appended &&
+      !nearAfter &&
+      newest &&
+      isPreviewMessage(newest)
+    ) {
+      // 스크롤 보정이 끝난 다음 프레임에 표시 — 그 사이 하단에 닿았으면 띄우지 않는다
+      requestAnimationFrame(() => {
+        const r = scrollRootRef.current;
+        if (!r) return;
+        const d = r.scrollHeight - r.scrollTop - r.clientHeight;
+        if (d >= CHAT_NEAR_BOTTOM_PX) setNewMessagePreview(newest);
+      });
+    }
+
     if (scrollToAnchor && lastScrollAnchorKeyRef.current !== scrollToAnchor.key) {
       lastScrollAnchorKeyRef.current = scrollToAnchor.key;
       const targetId = scrollToAnchor.anchorId;
@@ -281,7 +316,13 @@ export function ChatMessageList({
         setIsAtBottomIfChanged(setIsAtBottom, d < CHAT_NEAR_BOTTOM_PX);
       });
     }
-  }, [messages, scrollToAnchor, groups, readMarkerMessageId, readDividerPlacement]);
+  }, [
+    messages,
+    scrollToAnchor,
+    groups,
+    readMarkerMessageId,
+    readDividerPlacement,
+  ]);
 
   useEffect(() => {
     const root = scrollRootRef.current;
@@ -370,6 +411,9 @@ export function ChatMessageList({
     const lastClientHeightRef = { current: root.clientHeight };
 
     const ro = new ResizeObserver(() => {
+      const sbw = root.offsetWidth - root.clientWidth;
+      setScrollbarWidth((prev) => (prev === sbw ? prev : sbw));
+
       const ch = root.clientHeight;
       if (ch === lastClientHeightRef.current) return;
       lastClientHeightRef.current = ch;
@@ -493,8 +537,20 @@ export function ChatMessageList({
           <div ref={bottomRef} className="h-0 shrink-0" />
         </div>
       </div>
-      {!isAtBottom ? (
-        <JumpToBottomButton isMinimized={isMinimized} onClick={handleJumpClick} />
+      {!isAtBottom && newMessagePreview ? (
+        <NewMessagePreviewButton
+          scrollbarWidth={scrollbarWidth}
+          message={newMessagePreview}
+          isMinimized={isMinimized}
+          onClick={handleJumpClick}
+        />
+      ) : null}
+      {!isAtBottom && !newMessagePreview ? (
+        <JumpToBottomButton
+          isMinimized={isMinimized}
+          scrollbarWidth={scrollbarWidth}
+          onClick={handleJumpClick}
+        />
       ) : null}
     </div>
   );
diff --git a/src/components/chat/messages/JumpToBottomButton.tsx b/src/components/chat/messages/JumpToBottomButton.tsx
index ebade42b..5f525e5c 100644
--- a/src/components/chat/messages/JumpToBottomButton.tsx
+++ b/src/components/chat/messages/JumpToBottomButton.tsx
@@ -6,12 +6,18 @@ import { cn } from "@/lib/utils";
 export function JumpToBottomButton({
   onClick,
   isMinimized = false,
+  scrollbarWidth = 0,
 }: {
   onClick: () => void;
   isMinimized?: boolean;
+  /** 메시지 목록 스크롤바 폭 — 버튼을 스크롤바 바깥(왼쪽)에 둔다 */
+  scrollbarWidth?: number;
 }) {
   return (
-    <div className="pointer-events-none absolute bottom-3 right-3 z-10">
+    <div
+      className="pointer-events-none absolute bottom-3 z-10"
+      style={{ right: 12 + scrollbarWidth }}
+    >
       <button
         type="button"
         onClick={onClick}
diff --git a/src/components/chat/messages/NewMessagePreviewButton.tsx b/src/components/chat/messages/NewMessagePreviewButton.tsx
new file mode 100644
index 00000000..9aac7ce9
--- /dev/null
+++ b/src/components/chat/messages/NewMessagePreviewButton.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import type { ChatMessage } from "@/types/chat";
+import { ChatMemberAvatarRing } from "./ChatMemberAvatarRing";
+
+export const PLACE_SHARE_PREVIEW_TEXT = "장소를 공유했습니다.";
+
+/** 위로 스크롤한 상태에서 새 메시지 도착 시 하단 미리보기 — 누르면 최하단으로 */
+export function NewMessagePreviewButton({
+  message,
+  onClick,
+  isMinimized = false,
+  scrollbarWidth = 0,
+}: {
+  message: ChatMessage;
+  onClick: () => void;
+  isMinimized?: boolean;
+  /** 메시지 목록 스크롤바 폭 — 스크롤바를 뺀 영역 기준으로 가운데 정렬 */
+  scrollbarWidth?: number;
+}) {
+  const text =
+    message.type === "place" ? PLACE_SHARE_PREVIEW_TEXT : message.text;
+
+  return (
+    <div
+      className="pointer-events-none absolute bottom-3 left-3 z-10 flex justify-center"
+      style={{ right: 12 + scrollbarWidth }}
+    >
+      <button
+        type="button"
+        onClick={onClick}
+        aria-label={`${message.sender ?? ""}님의 새 메시지: ${text}. 가장 아래로 이동`}
+        className={cn(
+          "pointer-events-auto flex min-w-0 max-w-full cursor-pointer items-center gap-2 rounded-xl bg-background-strong py-1.5 pl-1.5 pr-3.5 text-left shadow-md transition hover:brightness-[0.98]",
+          isMinimized && "gap-1.5 py-1 pl-1 pr-3",
+        )}
+      >
+        <ChatMemberAvatarRing
+          chromeAvatarClassName={cn(
+            "shrink-0 overflow-hidden rounded-lg ring-1 ring-border",
+            isMinimized ? "h-6 w-6" : "h-7 w-7",
+          )}
+          avatarUrl={message.avatar}
+          alt=""
+          senderNotInRoom={message.senderNotInRoom}
+          reduceMotion
+        />
+        <span
+          className={cn(
+            "shrink-0 text-primary",
+            isMinimized ? "text-body-xs-emphasis" : "text-body-s-emphasis",
+          )}
+        >
+          {message.sender}
+        </span>
+        <span
+          className={cn(
+            "min-w-0 truncate text-text",
+            isMinimized ? "text-body-xs-regular" : "text-body-s-regular",
+          )}
+        >
+          {text}
+        </span>
+      </button>
+    </div>
+  );
+}
diff --git a/src/hooks/useChatMessages.ts b/src/hooks/useChatMessages.ts
index 6f40afa5..976e3089 100644
--- a/src/hooks/useChatMessages.ts
+++ b/src/hooks/useChatMessages.ts
@@ -339,6 +339,7 @@ export function useChatMessages(
           bridged.slice,
           lastReadMessageId,
           bridged.placementBeforeSlice,
+          hasMoreNewerByRoomRef.current.get(targetRoomId) === true,
         );
         applySessionReadBoundary(rid, lastReadMessageId, placement);
 
@@ -462,6 +463,7 @@ export function useChatMessages(
               slice,
               out.lastReadMessageId,
               placementBeforeSlice,
+              hasMoreNewer,
             )
           : EMPTY_READ_DIVIDER_PLACEMENT;
         applySessionReadBoundary(ridTrim, out.lastReadMessageId, placement);
diff --git a/src/lib/chat/readBoundary.test.ts b/src/lib/chat/readBoundary.test.ts
new file mode 100644
index 00000000..5191cd1f
--- /dev/null
+++ b/src/lib/chat/readBoundary.test.ts
@@ -0,0 +1,41 @@
+import { expect, it, vi } from "vitest";
+import type { ServerChatMessage } from "@/types/chat";
+import {
+  EMPTY_READ_DIVIDER_PLACEMENT,
+  resolveReadDividerPlacement,
+} from "./readBoundary";
+
+vi.mock("@/lib/api/rooms", () => ({ getRoomMessages: vi.fn() }));
+
+function msg(id: string, minute: number): ServerChatMessage {
+  return {
+    id,
+    roomId: "room",
+    senderId: 1,
+    messageType: "CHAT",
+    content: id,
+    createdAt: `2026-10-01T00:${String(minute).padStart(2, "0")}:00Z`,
+  };
+}
+
+const slice = [msg("a", 0), msg("b", 1)];
+
+it("does not draw the read divider when nothing comes after the last read message", () => {
+  expect(resolveReadDividerPlacement(slice, "b", slice)).toEqual(
+    EMPTY_READ_DIVIDER_PLACEMENT,
+  );
+});
+
+it("draws the read divider before unread messages", () => {
+  expect(resolveReadDividerPlacement(slice, "a", slice)).toEqual({
+    afterMessageId: "a",
+    beforeFirst: false,
+  });
+});
+
+it("keeps the divider at the loaded tail when newer pages remain", () => {
+  expect(resolveReadDividerPlacement(slice, "b", slice, true)).toEqual({
+    afterMessageId: "b",
+    beforeFirst: false,
+  });
+});
diff --git a/src/lib/chat/readBoundary.ts b/src/lib/chat/readBoundary.ts
index 215c87cf..333f6ac7 100644
--- a/src/lib/chat/readBoundary.ts
+++ b/src/lib/chat/readBoundary.ts
@@ -31,16 +31,22 @@ export function resolveReadDividerPlacement(
   slice: readonly ServerChatMessage[],
   lastReadMessageId: string | null,
   beforeSlice: readonly ServerChatMessage[],
+  hasMoreNewer = false,
 ): ReadDividerPlacement {
   if (!lastReadMessageId) {
     return EMPTY_READ_DIVIDER_PLACEMENT;
   }
+  // 경계 뒤에 새 메시지가 없으면 목록 맨 아래에 구분선만 남으므로 그리지 않는다
+  const placeAfter = (messageId: string): ReadDividerPlacement =>
+    !hasMoreNewer && newestServerMessageByCreatedAt([...slice])?.id === messageId
+      ? EMPTY_READ_DIVIDER_PLACEMENT
+      : { afterMessageId: messageId, beforeFirst: false };
   if (slice.some((m) => m.id === lastReadMessageId)) {
-    return { afterMessageId: lastReadMessageId, beforeFirst: false };
+    return placeAfter(lastReadMessageId);
   }
   const beforeNewest = newestServerMessageByCreatedAt([...beforeSlice]);
   if (beforeNewest) {
-    return { afterMessageId: beforeNewest.id, beforeFirst: false };
+    return placeAfter(beforeNewest.id);
   }
   if (slice.length > 0) {
     return { afterMessageId: null, beforeFirst: true };

From 529a1ae08f197c218b977e429ac9e814f219e968 Mon Sep 17 00:00:00 2001
From: KangShingyu <103213494+KangShinGyu98@users.noreply.github.com>
Date: Sat, 3 Oct 2026 18:49:57 +0900
Subject: [PATCH 2/8] =?UTF-8?q?fix(bottom-sheet):=EB=A9=94=EB=AA=A8=20?=
 =?UTF-8?q?=EB=B0=94=ED=85=80=EC=8B=9C=ED=8A=B8=20=EC=A2=8C=EC=9A=B0=20?=
 =?UTF-8?q?=EC=A7=A4=EB=A6=AC=EB=8D=98=EA=B1=B0=20=EC=88=98=EC=A0=95=20(#2?=
 =?UTF-8?q?06)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: “KangShinGyu” <“rkdtlseb@naver.com”>
---
 .../_components/mobile/MobileMemoSheet.tsx    | 26 ++++++++++---------
 src/components/mobile/MobileBottomSheet.tsx   |  2 +-
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/app/(main)/plan/_components/mobile/MobileMemoSheet.tsx b/src/app/(main)/plan/_components/mobile/MobileMemoSheet.tsx
index 5c9ffb2c..d6bf4add 100644
--- a/src/app/(main)/plan/_components/mobile/MobileMemoSheet.tsx
+++ b/src/app/(main)/plan/_components/mobile/MobileMemoSheet.tsx
@@ -62,16 +62,18 @@ export function MobileMemoSheet({
     >
       <label className="flex flex-col gap-4">
         <span className="text-label-m-regular text-text">메모</span>
-        <textarea
-          ref={textareaRef}
-          value={draft}
-          maxLength={MEMO_MAX_LENGTH}
-          onChange={(e) => setDraft(e.target.value)}
-          disabled={isPending}
-          rows={5}
-          placeholder="메모를 입력하세요"
-          className="h-36 w-full resize-none rounded-xl bg-fill p-3 text-body-s-regular text-text outline-none placeholder:text-text-subtle focus:ring-2 focus:ring-primary/30"
-        />
+        <div className="h-36 rounded-[12px] bg-fill py-3 focus-within:ring-2 focus-within:ring-primary/30">
+          <textarea
+            ref={textareaRef}
+            value={draft}
+            maxLength={MEMO_MAX_LENGTH}
+            onChange={(e) => setDraft(e.target.value)}
+            disabled={isPending}
+            rows={5}
+            placeholder="메모를 입력하세요"
+            className="block size-full resize-none bg-transparent px-3 text-body-s-regular text-text outline-none [scrollbar-color:var(--color-border-default)_transparent] [scrollbar-width:thin] placeholder:text-text-subtle"
+          />
+        </div>
       </label>
       <p className="text-caption-l-regular text-text-subtle">
         예약 정보나 함께 기억할 내용을 남겨보세요.
@@ -82,7 +84,7 @@ export function MobileMemoSheet({
             type="button"
             onClick={() => void saveMemo("")}
             disabled={isPending}
-            className="min-h-12 flex-1 rounded-xl border border-border text-label-m-regular text-status-negative disabled:opacity-40"
+            className="min-h-12 flex-1 rounded-[12px] border border-border text-label-m-regular text-status-negative disabled:opacity-40"
           >
             삭제
           </button>
@@ -91,7 +93,7 @@ export function MobileMemoSheet({
           type="button"
           onClick={() => void saveMemo(draft.trim())}
           disabled={isPending || !dirty}
-          className="min-h-12 flex-1 rounded-xl bg-primary text-label-m-regular text-fill-elevate disabled:opacity-40"
+          className="min-h-12 flex-1 rounded-[12px] bg-primary text-label-m-regular text-fill-elevate disabled:opacity-40"
         >
           {isPending ? "저장 중…" : "저장"}
         </button>
diff --git a/src/components/mobile/MobileBottomSheet.tsx b/src/components/mobile/MobileBottomSheet.tsx
index d63cef01..c5711c9a 100644
--- a/src/components/mobile/MobileBottomSheet.tsx
+++ b/src/components/mobile/MobileBottomSheet.tsx
@@ -97,7 +97,7 @@ function MobileBottomSheetContent({
           <p className="shrink-0 truncate text-caption-l-regular text-text-subtle">{subtitle}</p>
         ) : null}
         </BottomSheetDragHandle>
-        <div className={cn("flex min-h-0 flex-col overflow-y-auto overscroll-contain", variant === "menu" ? "gap-2" : "gap-4")}>{children}</div>
+        <div className={cn("-m-1 flex min-h-0 flex-col overflow-y-auto overscroll-contain p-1", variant === "menu" ? "gap-2" : "gap-4")}>{children}</div>
       </dialog>
     </div>,
     document.body,

From 4ae2db26783093bed4249652942a657d0be4b1ce Mon Sep 17 00:00:00 2001
From: KangShingyu <103213494+KangShinGyu98@users.noreply.github.com>
Date: Sat, 3 Oct 2026 18:50:15 +0900
Subject: [PATCH 3/8] =?UTF-8?q?feat(policy):=EC=95=BD=EA=B4=80=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=ED=99=88=EC=9C=BC=EB=A1=9C=20=EB=8F=8C?=
 =?UTF-8?q?=EC=95=84=EA=B0=80=EA=B8=B0=20=EB=B2=84=ED=8A=BC=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20(#207)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: “KangShinGyu” <“rkdtlseb@naver.com”>
---
 src/components/agreements/PolicyDocumentView.tsx  |  5 +++++
 src/components/agreements/PolicyHomeLink.tsx      | 15 +++++++++++++++
 .../agreements/StaticPolicyDocumentView.tsx       |  2 ++
 3 files changed, 22 insertions(+)
 create mode 100644 src/components/agreements/PolicyHomeLink.tsx

diff --git a/src/components/agreements/PolicyDocumentView.tsx b/src/components/agreements/PolicyDocumentView.tsx
index 143ae38f..ccfdcd47 100644
--- a/src/components/agreements/PolicyDocumentView.tsx
+++ b/src/components/agreements/PolicyDocumentView.tsx
@@ -7,6 +7,7 @@ import { findAgreementByType } from "@/lib/agreements/paths";
 import type { AgreementType } from "@/lib/agreements/types";
 
 import { AgreementMarkdownContent } from "./AgreementMarkdownContent";
+import { PolicyHomeLink } from "./PolicyHomeLink";
 
 type Props = {
   agreementType: AgreementType;
@@ -19,6 +20,7 @@ export function PolicyDocumentView({ agreementType }: Props) {
   if (isPending) {
     return (
       <div className="mx-auto w-full max-w-3xl rounded-3xl border border-gray-border bg-white/95 px-6 py-10 text-center shadow-[0_24px_80px_-12px_rgba(15,23,42,0.12)] backdrop-blur-sm">
+        <PolicyHomeLink />
         <LoadingIndicator label="문서 불러오는 중" />
       </div>
     );
@@ -27,6 +29,7 @@ export function PolicyDocumentView({ agreementType }: Props) {
   if (isError) {
     return (
       <div className="mx-auto w-full max-w-3xl rounded-3xl border border-primary/35 bg-primary/[0.06] px-6 py-8 text-center shadow-[0_24px_80px_-12px_rgba(15,23,42,0.12)]">
+        <PolicyHomeLink />
         <p className="text-body-m-emphasis mobile:text-body-s-emphasis font-medium text-primary">
           문서를 불러오지 못했습니다
         </p>
@@ -49,6 +52,7 @@ export function PolicyDocumentView({ agreementType }: Props) {
   if (!agreement) {
     return (
       <div className="mx-auto w-full max-w-3xl rounded-3xl border border-gray-border bg-white/95 px-6 py-10 text-center shadow-[0_24px_80px_-12px_rgba(15,23,42,0.12)] backdrop-blur-sm">
+        <PolicyHomeLink />
         <p className="text-body-m-regular mobile:text-body-s-regular text-dark-gray">
           현재 게시된 문서를 찾을 수 없습니다.
         </p>
@@ -58,6 +62,7 @@ export function PolicyDocumentView({ agreementType }: Props) {
 
   return (
     <article className="mx-auto w-full max-w-3xl rounded-3xl border border-gray-border bg-white/95 px-6 py-8 shadow-[0_24px_80px_-12px_rgba(15,23,42,0.12)] backdrop-blur-sm sm:px-8 sm:py-10">
+      <PolicyHomeLink />
       <header className="border-b border-gray-border pb-6">
         <h2 className="text-heading-m mobile:text-heading-s font-bold text-neutral-900">{agreement.title}</h2>
         <p className="mt-2 text-body-m-regular mobile:text-body-s-regular text-dark-gray">버전 {agreement.version}</p>
diff --git a/src/components/agreements/PolicyHomeLink.tsx b/src/components/agreements/PolicyHomeLink.tsx
new file mode 100644
index 00000000..f1f4da3e
--- /dev/null
+++ b/src/components/agreements/PolicyHomeLink.tsx
@@ -0,0 +1,15 @@
+import Link from "next/link";
+import { ArrowLeft } from "lucide-react";
+
+// "/"는 세션이 있으면 /home으로, 없으면 랜딩으로 proxy에서 분기된다
+export function PolicyHomeLink() {
+  return (
+    <Link
+      href="/"
+      className="mb-6 flex w-fit items-center gap-1 text-label-m-regular mobile:text-label-s-regular text-dark-gray transition hover:text-neutral-900"
+    >
+      <ArrowLeft className="h-4 w-4" aria-hidden />
+      홈으로 돌아가기
+    </Link>
+  );
+}
diff --git a/src/components/agreements/StaticPolicyDocumentView.tsx b/src/components/agreements/StaticPolicyDocumentView.tsx
index a2d62b0d..9b714e5f 100644
--- a/src/components/agreements/StaticPolicyDocumentView.tsx
+++ b/src/components/agreements/StaticPolicyDocumentView.tsx
@@ -1,4 +1,5 @@
 import { AgreementMarkdownContent } from "@/components/agreements/AgreementMarkdownContent";
+import { PolicyHomeLink } from "@/components/agreements/PolicyHomeLink";
 
 type StaticPolicyDocumentViewProps = {
   title: string;
@@ -13,6 +14,7 @@ export function StaticPolicyDocumentView({
 }: StaticPolicyDocumentViewProps) {
   return (
     <article className="mx-auto w-full max-w-3xl rounded-3xl border border-gray-border bg-white/95 px-6 py-8 shadow-[0_24px_80px_-12px_rgba(15,23,42,0.12)] backdrop-blur-sm sm:px-8 sm:py-10">
+      <PolicyHomeLink />
       <header className="border-b border-gray-border pb-6">
         <h2 className="text-heading-m mobile:text-heading-s font-bold text-neutral-900">{title}</h2>
         {effectiveDate ? (

From 4aea085980da60a9d66d63ab1f2540a4055e485b Mon Sep 17 00:00:00 2001
From: KangShingyu <103213494+KangShinGyu98@users.noreply.github.com>
Date: Sat, 3 Oct 2026 18:50:32 +0900
Subject: [PATCH 4/8] =?UTF-8?q?feat(sidebar):PC=20=ED=99=94=EB=A9=B4=20?=
 =?UTF-8?q?=EC=82=AC=EC=9D=B4=EB=93=9C=EB=B0=94=20=EC=9A=B0=EC=B8=A1?=
 =?UTF-8?q?=EC=97=90=20=EA=B5=AC=EB=B6=84=EC=84=A0=20=EC=B6=94=EA=B0=80,pr?=
 =?UTF-8?q?ess,=20hover=EC=9D=B4=ED=8E=99=ED=8A=B8=20=EC=B6=94=EA=B0=80=20?=
 =?UTF-8?q?(#208)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: “KangShinGyu” <“rkdtlseb@naver.com”>
---
 src/components/layout/SideBar.tsx                | 2 +-
 src/components/layout/SidebarChatUnreadBadge.tsx | 2 +-
 src/components/layout/sidebarNavButton.ts        | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/layout/SideBar.tsx b/src/components/layout/SideBar.tsx
index 7126c58d..c899435d 100644
--- a/src/components/layout/SideBar.tsx
+++ b/src/components/layout/SideBar.tsx
@@ -48,7 +48,7 @@ function SideBar() {
 
   return (
     <aside
-      className="flex h-full shrink-0 flex-col items-center overflow-y-auto bg-background [scrollbar-gutter:auto] [scrollbar-width:thin]"
+      className="flex h-full shrink-0 flex-col items-center overflow-y-auto border-r border-border-subtle bg-fill-subtle [scrollbar-gutter:auto] [scrollbar-width:thin]"
       style={{ width: MAIN_SIDEBAR_RAIL_WIDTH }}
     >
       <nav aria-label="여행 주요 메뉴" className="flex w-full shrink-0 flex-col items-center">
diff --git a/src/components/layout/SidebarChatUnreadBadge.tsx b/src/components/layout/SidebarChatUnreadBadge.tsx
index e9112305..b35eddde 100644
--- a/src/components/layout/SidebarChatUnreadBadge.tsx
+++ b/src/components/layout/SidebarChatUnreadBadge.tsx
@@ -12,7 +12,7 @@ export function SidebarChatUnreadBadge() {
   const label = formatUnreadCountBadge(unreadCount);
 
   return (
-    <span className="pointer-events-none absolute left-1/2 top-2.5 flex h-4 min-w-4 items-center justify-center rounded-full border border-background bg-primary px-0.5 text-caption-s-emphasis font-semibold leading-none tracking-[-0.02em] text-text-inverse">
+    <span className="pointer-events-none absolute left-1/2 top-2.5 flex h-4 min-w-4 items-center justify-center rounded-full border border-fill-subtle bg-primary px-0.5 text-caption-s-emphasis text-text-inverse">
       {label}
     </span>
   );
diff --git a/src/components/layout/sidebarNavButton.ts b/src/components/layout/sidebarNavButton.ts
index 984657eb..b3f23ddc 100644
--- a/src/components/layout/sidebarNavButton.ts
+++ b/src/components/layout/sidebarNavButton.ts
@@ -2,7 +2,7 @@ import { cn } from "@/lib/utils";
 
 export function sidebarNavButtonClassName(isActive = false) {
   return cn(
-    "flex h-[68px] w-full shrink-0 cursor-pointer flex-col items-center justify-center gap-0.5 pt-0.5 text-label-xs-regular leading-4 tracking-[-0.02em] transition-colors focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary-strong",
-    isActive ? "bg-primary font-bold text-text-inverse" : "bg-transparent font-medium text-text hover:bg-fill-subtle",
+    "flex h-[68px] w-full shrink-0 cursor-pointer flex-col items-center justify-center gap-0.5 pt-0.5 transition-colors focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-primary-strong",
+    isActive ? "bg-primary text-label-xs-emphasis text-text-inverse" : "bg-transparent text-label-xs-regular text-text hover:bg-fill active:bg-fill-strong",
   );
 }

From 74dcfe0b5ae3ce0dd200ca25f9005cb424a9595b Mon Sep 17 00:00:00 2001
From: KangShingyu <103213494+KangShinGyu98@users.noreply.github.com>
Date: Sat, 3 Oct 2026 18:50:43 +0900
Subject: [PATCH 5/8] =?UTF-8?q?chore(tanstack):=20=EA=B0=9C=EB=B0=9C?=
 =?UTF-8?q?=EC=A4=91=EC=97=90=20tanstack=20floating=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=20=EC=97=86=EC=95=A0=EA=B8=B0=20(#209)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: “KangShinGyu” <“rkdtlseb@naver.com”>
---
 src/providers/full-app-provider-stack.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/providers/full-app-provider-stack.tsx b/src/providers/full-app-provider-stack.tsx
index efc3f002..0bd92d0e 100644
--- a/src/providers/full-app-provider-stack.tsx
+++ b/src/providers/full-app-provider-stack.tsx
@@ -53,7 +53,10 @@ export function FullAppProviderStack({ children }: { children: ReactNode }) {
           </AppChromeShell>
         </GoogleMapsProvider>
       </StompProvider>
-      <ReactQueryDevtools initialIsOpen={false} />
+      {/* 개발 중 캐시 확인이 필요할 때만 .env.local에 NEXT_PUBLIC_RQ_DEVTOOLS=1 */}
+      {process.env.NEXT_PUBLIC_RQ_DEVTOOLS === "1" ? (
+        <ReactQueryDevtools initialIsOpen={false} />
+      ) : null}
     </QueryClientProvider>
   );
 }

From cf7543218a744918201296d12769327c199361b0 Mon Sep 17 00:00:00 2001
From: KangShingyu <103213494+KangShinGyu98@users.noreply.github.com>
Date: Tue, 6 Oct 2026 10:35:35 +0900
Subject: [PATCH 6/8] =?UTF-8?q?fix(expense):=EC=82=AC=ED=8C=8C=EB=A6=AC=20?=
 =?UTF-8?q?=EC=A7=80=EC=B6=9C=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20?=
 =?UTF-8?q?=EB=B0=94=ED=85=80=EC=8B=9C=ED=8A=B8=20=EB=86=92=EC=9D=B4?=
 =?UTF-8?q?=EC=A7=80=EC=A0=95=20(#215)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: “KangShinGyu” <“rkdtlseb@naver.com”>
---
 src/components/expenses/ExpenseDialog.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/expenses/ExpenseDialog.tsx b/src/components/expenses/ExpenseDialog.tsx
index 3fa022a2..ac126bd8 100644
--- a/src/components/expenses/ExpenseDialog.tsx
+++ b/src/components/expenses/ExpenseDialog.tsx
@@ -53,7 +53,7 @@ export function ExpenseDialog({
         event.preventDefault();
         onClose();
       }}
-      className={`fixed inset-0 m-auto ${settlement ? "mobile:h-[calc(100dvh-92px)] mobile:max-h-[calc(100dvh-92px)] max-sm:h-[calc(100dvh-92px)] max-sm:max-h-[calc(100dvh-92px)]" : ""} max-h-[calc(100dvh-3rem)] w-[calc(100%-2rem)] max-w-[720px] overflow-hidden rounded-xl border-0 bg-white p-0 text-text shadow-xl backdrop:bg-black/40 max-sm:mb-0 max-sm:w-full max-sm:rounded-b-none mobile:mb-0 mobile:w-full mobile:rounded-b-none mobile:rounded-t-[20px] max-sm:rounded-t-[20px]`}
+      className={`fixed inset-0 m-auto ${settlement ? "mobile:h-[calc(100dvh-92px)] mobile:max-h-[calc(100dvh-92px)] max-sm:h-[calc(100dvh-92px)] max-sm:max-h-[calc(100dvh-92px)]" : "mobile:h-[70dvh] mobile:max-h-[70dvh] max-sm:h-[70dvh] max-sm:max-h-[70dvh]"} max-h-[calc(100dvh-3rem)] w-[calc(100%-2rem)] max-w-[720px] overflow-hidden rounded-xl border-0 bg-white p-0 text-text shadow-xl backdrop:bg-black/40 max-sm:mb-0 max-sm:w-full max-sm:rounded-b-none mobile:mb-0 mobile:w-full mobile:rounded-b-none mobile:rounded-t-[20px] max-sm:rounded-t-[20px]`}
     >
       <div className="flex max-h-[calc(100dvh-3rem)] flex-col mobile:h-full mobile:max-h-full max-sm:h-full max-sm:max-h-full">
         <BottomSheetDragHandle drag={sheetDrag} className="max-sm:pt-5 mobile:pt-5">

From 65d4234d9c4eac233e20eb8c907896944967692d Mon Sep 17 00:00:00 2001
From: KangShingyu <103213494+KangShinGyu98@users.noreply.github.com>
Date: Tue, 6 Oct 2026 10:35:48 +0900
Subject: [PATCH 7/8] =?UTF-8?q?feat(map):=EC=B9=B4=EB=93=9C=20=EC=9D=B4?=
 =?UTF-8?q?=EB=AF=B8=EC=A7=80=20=ED=81=B4=EB=A6=AD=EC=8B=9C=20=EC=9D=B8?=
 =?UTF-8?q?=EC=95=B1=20=EC=A7=80=EB=8F=84=EB=A1=9C=20=EC=9D=B4=EB=8F=99=20?=
 =?UTF-8?q?=20(#216)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat(plan):일정 페이지 사진 클릭시 인앱 지도로 이동

* feat(bookmark): 일정-북마크에서 추가 모달, 북마크 페이지 사진 클릭시 인앱으로 이동

---------

Co-authored-by: “KangShinGyu” <“rkdtlseb@naver.com”>
---
 .../_components/BookmarkPlacePreviewCard.tsx  | 31 +++++++------------
 .../bookmark/_components/BookmarkPlaceRow.tsx |  1 +
 .../itinerary/AddFromBookmarkModal.tsx        | 31 +++++++++++++++++++
 .../_components/itinerary/PlanPlaceCard.tsx   | 26 +++-------------
 4 files changed, 48 insertions(+), 41 deletions(-)

diff --git a/src/app/(main)/bookmark/_components/BookmarkPlacePreviewCard.tsx b/src/app/(main)/bookmark/_components/BookmarkPlacePreviewCard.tsx
index 398f129e..8599dd87 100644
--- a/src/app/(main)/bookmark/_components/BookmarkPlacePreviewCard.tsx
+++ b/src/app/(main)/bookmark/_components/BookmarkPlacePreviewCard.tsx
@@ -6,19 +6,15 @@ import { useInViewport } from "@/hooks/useInViewport";
 import { usePlacePhotoUrlQuery } from "@/hooks/usePlacePhotoUrl";
 import { MAIN_CARD_INNER_PADDING_X_CLASS } from "@/lib/layout-tokens";
 import { handlePlacePhotoImageError } from "@/lib/places/place-photo-refresh";
-import {
-  buildGoogleMapsPlaceUrl,
-  normalizeGooglePlaceResourceId,
-} from "@/lib/maps";
 import { cn } from "@/lib/utils";
 
 export type BookmarkPlacePreviewCardProps = {
   name: string;
   address?: string;
   primaryTypeDisplayName?: string;
-  /** 있으면 사진 클릭 시 Google Maps로 이동 */
   googlePlaceId?: string;
   onClick?: () => void;
+  onThumbnailClick?: () => void;
   className?: string;
   contentClassName?: string;
 };
@@ -29,6 +25,7 @@ export function BookmarkPlacePreviewCard({
   primaryTypeDisplayName,
   googlePlaceId,
   onClick,
+  onThumbnailClick,
   className,
   contentClassName,
 }: BookmarkPlacePreviewCardProps) {
@@ -38,12 +35,6 @@ export function BookmarkPlacePreviewCard({
   });
 
   const rawGid = typeof googlePlaceId === "string" ? googlePlaceId.trim() : "";
-  const googleMapsPlaceUrl = rawGid.length
-    ? buildGoogleMapsPlaceUrl({
-        placeId: normalizeGooglePlaceResourceId(rawGid),
-        query: name,
-      })
-    : null;
 
   const thumbnailMedia = imageUrl ? (
     // eslint-disable-next-line @next/next/no-img-element -- remote place photo URL
@@ -100,15 +91,15 @@ export function BookmarkPlacePreviewCard({
         ) : null}
       </div>
 
-      {googleMapsPlaceUrl ? (
-        <a
+      {rawGid.length && onThumbnailClick ? (
+        <button
           ref={thumbnailRef}
-          href={googleMapsPlaceUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-          onClick={(e) => e.stopPropagation()}
-          onMouseDown={(e) => e.stopPropagation()}
-          aria-label={`${name} — Google Maps에서 열기`}
+          type="button"
+          onClick={(e) => {
+            e.stopPropagation();
+            onThumbnailClick();
+          }}
+          aria-label={`${name} 지도에서 보기`}
           className="relative block h-[80px] w-[80px] shrink-0 cursor-pointer overflow-hidden rounded-lg bg-light-gray transition hover:brightness-105"
           draggable={false}
         >
@@ -119,7 +110,7 @@ export function BookmarkPlacePreviewCard({
           >
             <MapPin className="h-3 w-3" strokeWidth={2.4} />
           </span>
-        </a>
+        </button>
       ) : (
         <div
           ref={thumbnailRef}
diff --git a/src/app/(main)/bookmark/_components/BookmarkPlaceRow.tsx b/src/app/(main)/bookmark/_components/BookmarkPlaceRow.tsx
index de3a7fcb..d3b7dad9 100644
--- a/src/app/(main)/bookmark/_components/BookmarkPlaceRow.tsx
+++ b/src/app/(main)/bookmark/_components/BookmarkPlaceRow.tsx
@@ -181,6 +181,7 @@ export function BookmarkPlaceRow({
         className="min-w-0 w-full border-0 hover:bg-gray-50 active:bg-gray-100"
         contentClassName="pr-7"
         onClick={onOpenDetail}
+        onThumbnailClick={onOpenDetail}
       />
       <div
         className="absolute right-[6.25rem] top-3 z-10 flex"
diff --git a/src/app/(main)/plan/_components/itinerary/AddFromBookmarkModal.tsx b/src/app/(main)/plan/_components/itinerary/AddFromBookmarkModal.tsx
index d45896ba..842d97d6 100644
--- a/src/app/(main)/plan/_components/itinerary/AddFromBookmarkModal.tsx
+++ b/src/app/(main)/plan/_components/itinerary/AddFromBookmarkModal.tsx
@@ -16,9 +16,11 @@ import {
   useCreateScheduleItem,
   useRoomBookmarks,
 } from "@/hooks/useRooms";
+import { useOpenPlaceOnMap } from "@/hooks/useOpenPlaceOnMap";
 import { AnalyticsEvents, trackAnalyticsEvent } from "@/lib/analytics/track";
 import { bucketItemCount } from "@/lib/analytics/context";
 import { placePreviewQueryOptions } from "@/lib/places/place-queries";
+import type { PlacePreview } from "@/lib/api/places";
 import type { RoomBookmark } from "@/lib/api/rooms";
 import type { PlanPlace } from "@/lib/plan/types";
 import { cn } from "@/lib/utils";
@@ -189,6 +191,32 @@ export function AddFromBookmarkModal({
     ],
   );
 
+  const openPlaceOnMap = useOpenPlaceOnMap();
+  const selectedCategoryColor = categories?.find(
+    (c) => c.categoryId === selectedCategoryId,
+  )?.colorCode;
+
+  const handleOpenOnMap = useCallback(
+    (googlePlaceId: string, preview: PlacePreview) => {
+      if (busy) return;
+      onClose();
+      openPlaceOnMap(
+        {
+          name: preview.name,
+          category: "",
+          rating: null,
+          address: preview.formattedAddress,
+          googlePlaceId: googlePlaceId.trim(),
+          location: preview.location,
+          fromBookmark: true,
+          bookmarkCategoryColor: selectedCategoryColor,
+        },
+        { itinerarySource: "bookmark" },
+      );
+    },
+    [busy, onClose, openPlaceOnMap, selectedCategoryColor],
+  );
+
   return (
     <div
       role="presentation"
@@ -328,6 +356,9 @@ export function AddFromBookmarkModal({
                         busy && !rowAdding && "pointer-events-none opacity-60",
                       )}
                       onClick={() => void handleAddPlace(googlePlaceId)}
+                      onThumbnailClick={() =>
+                        handleOpenOnMap(googlePlaceId, preview)
+                      }
                     />
                   );
                 })
diff --git a/src/app/(main)/plan/_components/itinerary/PlanPlaceCard.tsx b/src/app/(main)/plan/_components/itinerary/PlanPlaceCard.tsx
index f42a211e..9bfab2ea 100644
--- a/src/app/(main)/plan/_components/itinerary/PlanPlaceCard.tsx
+++ b/src/app/(main)/plan/_components/itinerary/PlanPlaceCard.tsx
@@ -21,10 +21,7 @@ import {
 import { usePlanPlaceCardPhoto } from "@/hooks/usePlanPlaceCardPhoto";
 import { bucketItemCount } from "@/lib/analytics/context";
 import { AnalyticsEvents, trackAnalyticsEvent } from "@/lib/analytics/track";
-import {
-  buildGoogleMapsPlaceUrl,
-  normalizeGooglePlaceResourceId,
-} from "@/lib/maps";
+import { normalizeGooglePlaceResourceId } from "@/lib/maps";
 import { PLAN_PLACE_CARD_TW } from "@/lib/layout-tokens";
 import { handlePlacePhotoImageError } from "@/lib/places/place-photo-refresh";
 import {
@@ -218,12 +215,7 @@ export function PlanPlaceCard({
 
   const rawGooglePlaceId =
     typeof place.googlePlaceId === "string" ? place.googlePlaceId.trim() : "";
-  const googleMapsPlaceUrl = rawGooglePlaceId.length
-    ? buildGoogleMapsPlaceUrl({
-        placeId: normalizeGooglePlaceResourceId(rawGooglePlaceId),
-        query: place.title,
-      })
-    : null;
+  const hasGooglePlace = rawGooglePlaceId.length > 0;
 
   const memoText = typeof place.memo === "string" ? place.memo.trim() : "";
   const hasMemo = memoText.length > 0;
@@ -334,7 +326,7 @@ export function PlanPlaceCard({
             />
           ) : null;
 
-          if (!googleMapsPlaceUrl) {
+          if (!hasGooglePlace) {
             return (
               <div ref={thumbnailRef} className={PLAN_PLACE_CARD_TW.thumbnail}>
                 {media}
@@ -343,16 +335,8 @@ export function PlanPlaceCard({
           }
 
           return (
-            <a
+            <div
               ref={thumbnailRef}
-              href={googleMapsPlaceUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-              data-plan-card-no-drag
-              draggable={false}
-              onMouseDown={(e) => e.stopPropagation()}
-              onClick={(e) => e.stopPropagation()}
-              aria-label={`${place.title} — Google Maps에서 열기`}
               className={cn(
                 PLAN_PLACE_CARD_TW.thumbnail,
                 "block cursor-pointer transition hover:brightness-105",
@@ -365,7 +349,7 @@ export function PlanPlaceCard({
               >
                 <MapPin className="h-3 w-3" strokeWidth={2.4} />
               </span>
-            </a>
+            </div>
           );
         })()}
 

From ee7dedbf407e5592f591941d6a3e048ae10bddbf Mon Sep 17 00:00:00 2001
From: KangShingyu <103213494+KangShinGyu98@users.noreply.github.com>
Date: Tue, 6 Oct 2026 10:36:00 +0900
Subject: [PATCH 8/8] =?UTF-8?q?feat(time-picker):=EB=AA=A8=EB=B0=94?=
 =?UTF-8?q?=EC=9D=BC=20=ED=83=80=EC=9E=84=ED=94=BC=EC=BB=A4=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20(#217)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: “KangShinGyu” <“rkdtlseb@naver.com”>
---
 package-lock.json                             |  13 +
 package.json                                  |   1 +
 .../_components/itinerary/TimeWheelPicker.tsx | 285 ++++++------------
 .../mobile/MobilePlanDaySection.tsx           |   4 +
 .../mobile/MobilePlanItinerary.tsx            |   4 +
 .../_components/mobile/MobilePlanView.tsx     |   3 +-
 .../_components/mobile/MobileTimeSheet.tsx    | 139 ++++++---
 src/app/globals.css                           |   2 +
 src/components/mobile/MobileBottomSheet.tsx   |   2 +-
 src/lib/plan/mobilePlanFormat.test.ts         |  13 +-
 src/lib/plan/mobilePlanFormat.ts              |   7 +
 11 files changed, 223 insertions(+), 250 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1d16790e..675fe989 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "0.1.0",
       "dependencies": {
         "@amplitude/unified": "^1.1.28",
+        "@ncdai/react-wheel-picker": "^1.2.3",
         "@next/third-parties": "^16.2.1",
         "@stomp/stompjs": "^7.3.0",
         "@tanstack/react-query": "^5.95.2",
@@ -3211,6 +3212,18 @@
         "@tybys/wasm-util": "^0.10.0"
       }
     },
+    "node_modules/@ncdai/react-wheel-picker": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@ncdai/react-wheel-picker/-/react-wheel-picker-1.2.3.tgz",
+      "integrity": "sha512-TQjDfuDH9Ss7sgacSRPnakqWfkR8E1w6g7Pkt7bTYX35SfdHbGSzC8g/lXKFeMyNIikOWD9wC3uFPLy+Ui/R0g==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ncdai"
+      },
+      "peerDependencies": {
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/@next/env": {
       "version": "16.2.1",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-16.2.1.tgz",
diff --git a/package.json b/package.json
index c327e613..9432c968 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@amplitude/unified": "^1.1.28",
+    "@ncdai/react-wheel-picker": "^1.2.3",
     "@next/third-parties": "^16.2.1",
     "@stomp/stompjs": "^7.3.0",
     "@tanstack/react-query": "^5.95.2",
diff --git a/src/app/(main)/plan/_components/itinerary/TimeWheelPicker.tsx b/src/app/(main)/plan/_components/itinerary/TimeWheelPicker.tsx
index 2b1d75ca..56ebcb59 100644
--- a/src/app/(main)/plan/_components/itinerary/TimeWheelPicker.tsx
+++ b/src/app/(main)/plan/_components/itinerary/TimeWheelPicker.tsx
@@ -1,216 +1,107 @@
 "use client";
 
-import { useCallback, useEffect, useMemo, useRef } from "react";
-
-import { cn } from "@/lib/utils";
-
-const ITEM_HEIGHT = 40;
-const VISIBLE_ROWS = 5;
-const CENTER_INDEX = Math.floor(VISIBLE_ROWS / 2);
-const CONTAINER_HEIGHT = VISIBLE_ROWS * ITEM_HEIGHT;
-const CENTER_PADDING = CENTER_INDEX * ITEM_HEIGHT;
-const SCROLL_SETTLE_MS = 110;
-
-type WheelColumnProps = {
-  items: number[];
-  value: number;
-  onChange: (next: number) => void;
-  ariaLabel: string;
-  disabled?: boolean;
-};
+import {
+  WheelPicker,
+  WheelPickerWrapper,
+  type WheelPickerOption,
+} from "@ncdai/react-wheel-picker";
+
+type Period = "AM" | "PM";
+
+/** Figma Time Picker Base — 행 44px, 5행(≈220px)이 보이도록 링 개수 16 */
+const OPTION_HEIGHT = 44;
+const VISIBLE_COUNT = 16;
+
+const PERIOD_OPTIONS: WheelPickerOption<Period>[] = [
+  { value: "AM", label: "오전" },
+  { value: "PM", label: "오후" },
+];
+const HOUR_OPTIONS: WheelPickerOption<number>[] = Array.from(
+  { length: 12 },
+  (_, i) => ({ value: i, label: String(i) }),
+);
+const MINUTE_OPTIONS: WheelPickerOption<number>[] = Array.from(
+  { length: 60 },
+  (_, i) => ({ value: i, label: String(i).padStart(2, "0") }),
+);
+
+function splitHm(hm: string): { period: Period; hour: number; minute: number } {
+  const [h, m] = hm.split(":").map(Number);
+  return { period: h < 12 ? "AM" : "PM", hour: h % 12, minute: m };
+}
 
-function nearestIndex(items: number[], value: number): number {
-  let best = 0;
-  let bestDelta = Number.POSITIVE_INFINITY;
-  for (let i = 0; i < items.length; i += 1) {
-    const d = Math.abs(items[i]! - value);
-    if (d < bestDelta) {
-      best = i;
-      bestDelta = d;
-    }
-  }
-  return best;
+function joinHm(period: Period, hour: number, minute: number): string {
+  const h = hour + (period === "PM" ? 12 : 0);
+  return `${String(h).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
 }
 
-function WheelColumn({
-  items,
+/** 12시간제 휠 — `value`/`onChange`는 24시간 HH:mm */
+export function TimeWheelPicker({
   value,
   onChange,
-  ariaLabel,
-  disabled = false,
-}: WheelColumnProps) {
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const settleTimerRef = useRef<number | null>(null);
-  const suppressScrollRef = useRef(false);
-
-  const selectedIndex = nearestIndex(items, value);
-
-  const scrollToIndex = useCallback((index: number, smooth: boolean) => {
-    const el = scrollRef.current;
-    if (!el) return;
-    const target = index * ITEM_HEIGHT;
-    if (Math.abs(el.scrollTop - target) < 0.5) return;
-    suppressScrollRef.current = true;
-    el.scrollTo({ top: target, behavior: smooth ? "smooth" : "auto" });
-    window.setTimeout(() => {
-      suppressScrollRef.current = false;
-    }, smooth ? 260 : 40);
-  }, []);
-
-  useEffect(() => {
-    scrollToIndex(selectedIndex, false);
-  }, [selectedIndex, scrollToIndex]);
-
-  useEffect(() => {
-    return () => {
-      if (settleTimerRef.current !== null) {
-        window.clearTimeout(settleTimerRef.current);
-      }
-    };
-  }, []);
-
-  const commit = useCallback(
-    (index: number) => {
-      const clamped = Math.max(0, Math.min(items.length - 1, index));
-      onChange(items[clamped]!);
-    },
-    [items, onChange],
-  );
-
-  const handleScroll = () => {
-    if (suppressScrollRef.current) return;
-    const el = scrollRef.current;
-    if (!el) return;
-    if (settleTimerRef.current !== null) {
-      window.clearTimeout(settleTimerRef.current);
-    }
-    settleTimerRef.current = window.setTimeout(() => {
-      const idx = Math.round(el.scrollTop / ITEM_HEIGHT);
-      commit(idx);
-    }, SCROLL_SETTLE_MS);
+  active,
+  onInteract,
+}: Readonly<{
+  value: string;
+  onChange: (hm: string) => void;
+  /** 편집 중인 필드가 있을 때만 중앙 값을 진하게 표시 */
+  active: boolean;
+  /** 휠을 건드리는 순간 — 편집 대상 필드가 없으면 부모가 지정 */
+  onInteract: () => void;
+}>) {
+  const { period, hour, minute } = splitHm(value);
+  const classNames = {
+    optionItem: "text-heading-s text-text-disabled",
+    highlightWrapper: "bg-fill text-heading-s",
+    highlightItem: active ? "text-text" : "text-text-disabled",
   };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    if (disabled) return;
-    if (e.key === "ArrowUp") {
-      e.preventDefault();
-      commit(selectedIndex - 1);
-    } else if (e.key === "ArrowDown") {
-      e.preventDefault();
-      commit(selectedIndex + 1);
-    } else if (e.key === "PageUp") {
-      e.preventDefault();
-      commit(selectedIndex - 5);
-    } else if (e.key === "PageDown") {
-      e.preventDefault();
-      commit(selectedIndex + 5);
-    } else if (e.key === "Home") {
-      e.preventDefault();
-      commit(0);
-    } else if (e.key === "End") {
-      e.preventDefault();
-      commit(items.length - 1);
-    }
+  const shared = {
+    classNames,
+    optionItemHeight: OPTION_HEIGHT,
+    visibleCount: VISIBLE_COUNT,
   };
 
   return (
     <div
-      ref={scrollRef}
-      role="listbox"
-      aria-label={ariaLabel}
-      aria-activedescendant={`${ariaLabel}-${items[selectedIndex]}`}
-      tabIndex={disabled ? -1 : 0}
-      onScroll={disabled ? undefined : handleScroll}
-      onKeyDown={handleKeyDown}
-      className={cn(
-        "w-14 snap-y snap-mandatory overflow-y-scroll outline-none",
-        "[&::-webkit-scrollbar]:hidden [scrollbar-width:none] [-ms-overflow-style:none]",
-        "rounded-lg focus-visible:ring-2 focus-visible:ring-primary/40",
-        disabled && "pointer-events-none opacity-60",
-      )}
-      style={{
-        height: CONTAINER_HEIGHT,
-        maskImage:
-          "linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%)",
-        WebkitMaskImage:
-          "linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%)",
+      className="relative w-full p-2"
+      onPointerDownCapture={onInteract}
+      onWheelCapture={onInteract}
+      onKeyDownCapture={(e) => {
+        if (e.key !== "Tab" && e.key !== "Escape") onInteract();
       }}
     >
-      <div style={{ paddingTop: CENTER_PADDING, paddingBottom: CENTER_PADDING }}>
-        {items.map((v, i) => {
-          const isSelected = i === selectedIndex;
-          return (
-            <button
-              type="button"
-              key={v}
-              id={`${ariaLabel}-${v}`}
-              role="option"
-              aria-selected={isSelected}
-              tabIndex={-1}
-              onClick={() => commit(i)}
-              className={cn(
-                "flex w-full snap-center items-center justify-center text-title-m mobile:text-title-s font-semibold tabular-nums transition-colors",
-                isSelected ? "text-gray-900" : "text-dark-gray/50",
-              )}
-              style={{ height: ITEM_HEIGHT }}
-            >
-              {String(v).padStart(2, "0")}
-            </button>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-export type TimeWheelValue = { hour: number; minute: number };
-
-type TimeWheelPickerProps = {
-  value: TimeWheelValue;
-  onChange: (next: TimeWheelValue) => void;
-  disabled?: boolean;
-};
-
-export function TimeWheelPicker({
-  value,
-  onChange,
-  disabled,
-}: TimeWheelPickerProps) {
-  const hours = useMemo(() => Array.from({ length: 24 }, (_, i) => i), []);
-  const minutes = useMemo(() => Array.from({ length: 60 }, (_, i) => i), []);
-
-  return (
-    <div className="relative isolate flex items-center justify-center gap-2">
-      <span
+      <div
         aria-hidden
-        className="pointer-events-none absolute inset-x-0 z-0 rounded-xl bg-primary/[0.08] ring-1 ring-primary/25"
-        style={{
-          top: CENTER_INDEX * ITEM_HEIGHT,
-          height: ITEM_HEIGHT,
-        }}
+        className="absolute inset-x-0 top-1/2 h-11 -translate-y-1/2 rounded-md bg-fill"
       />
-      <div className="relative z-10 flex items-center gap-2">
-        <WheelColumn
-          items={hours}
-          value={value.hour}
-          onChange={(h) => onChange({ hour: h, minute: value.minute })}
-          ariaLabel="시"
-          disabled={disabled}
-        />
-        <span
-          aria-hidden
-          className="pt-[2px] text-title-m mobile:text-title-s font-semibold text-gray-400"
-        >
-          :
-        </span>
-        <WheelColumn
-          items={minutes}
-          value={value.minute}
-          onChange={(m) => onChange({ hour: value.hour, minute: m })}
-          ariaLabel="분"
-          disabled={disabled}
-        />
-      </div>
+      <WheelPickerWrapper className="justify-center gap-2">
+        <div role="group" aria-label="오전/오후" className="w-[88px]">
+          <WheelPicker
+            {...shared}
+            options={PERIOD_OPTIONS}
+            value={period}
+            onValueChange={(next) => onChange(joinHm(next, hour, minute))}
+          />
+        </div>
+        <div role="group" aria-label="시" className="w-16">
+          <WheelPicker
+            {...shared}
+            infinite
+            options={HOUR_OPTIONS}
+            value={hour}
+            onValueChange={(next) => onChange(joinHm(period, next, minute))}
+          />
+        </div>
+        <div role="group" aria-label="분" className="w-16">
+          <WheelPicker
+            {...shared}
+            infinite
+            options={MINUTE_OPTIONS}
+            value={minute}
+            onValueChange={(next) => onChange(joinHm(period, hour, next))}
+          />
+        </div>
+      </WheelPickerWrapper>
     </div>
   );
 }
diff --git a/src/app/(main)/plan/_components/mobile/MobilePlanDaySection.tsx b/src/app/(main)/plan/_components/mobile/MobilePlanDaySection.tsx
index 9566de6e..44466517 100644
--- a/src/app/(main)/plan/_components/mobile/MobilePlanDaySection.tsx
+++ b/src/app/(main)/plan/_components/mobile/MobilePlanDaySection.tsx
@@ -27,6 +27,8 @@ type MobilePlanDaySectionProps = Readonly<{
   dayLabel: string;
   /** `09. 21 수` */
   dateLabel: string;
+  /** `9월 21일` — 방문 시간 시트에 표시 */
+  monthDayLabel: string;
   menuDisabled: boolean;
   /** 순서 편집 모드 — 모든 일차가 함께 들어가고 나온다 */
   editing: boolean;
@@ -43,6 +45,7 @@ export function MobilePlanDaySection({
   scheduleId,
   dayLabel,
   dateLabel,
+  monthDayLabel,
   menuDisabled,
   editing,
   onStartEditing,
@@ -104,6 +107,7 @@ export function MobilePlanDaySection({
       <MobilePlanItinerary
         roomId={roomId}
         scheduleId={scheduleId}
+        monthDayLabel={monthDayLabel}
         onRequestAddPlace={(places) => onRequestAddPlace(scheduleId, places)}
       />
 
diff --git a/src/app/(main)/plan/_components/mobile/MobilePlanItinerary.tsx b/src/app/(main)/plan/_components/mobile/MobilePlanItinerary.tsx
index 4222fd56..6fd9f315 100644
--- a/src/app/(main)/plan/_components/mobile/MobilePlanItinerary.tsx
+++ b/src/app/(main)/plan/_components/mobile/MobilePlanItinerary.tsx
@@ -54,6 +54,8 @@ type SheetState =
 type MobilePlanItineraryProps = Readonly<{
   roomId: string;
   scheduleId: number;
+  /** `9월 21일` — 방문 시간 시트에 표시 */
+  monthDayLabel?: string;
   /** 전체 화면 검색으로 이 일차에 장소 추가 — 탭 제스처 안에서 호출해야 한다 */
   onRequestAddPlace: (places: PlanPlace[]) => void;
 }>;
@@ -62,6 +64,7 @@ type MobilePlanItineraryProps = Readonly<{
 export function MobilePlanItinerary({
   roomId,
   scheduleId,
+  monthDayLabel,
   onRequestAddPlace,
 }: MobilePlanItineraryProps) {
   const expenses = useExpenseContext();
@@ -256,6 +259,7 @@ export function MobilePlanItinerary({
           scheduleId={scheduleId}
           itemId={sheetItemId}
           placeName={sheetPlace.title}
+          dateLabel={monthDayLabel}
           startTime={sheetPlace.startTime}
           endTime={sheetPlace.endTime}
           onClose={() => setSheet(null)}
diff --git a/src/app/(main)/plan/_components/mobile/MobilePlanView.tsx b/src/app/(main)/plan/_components/mobile/MobilePlanView.tsx
index f3023d91..39da4092 100644
--- a/src/app/(main)/plan/_components/mobile/MobilePlanView.tsx
+++ b/src/app/(main)/plan/_components/mobile/MobilePlanView.tsx
@@ -10,7 +10,7 @@ import type { RoomSchedule } from "@/lib/api/rooms/schedules";
 import { bucketItemCount } from "@/lib/analytics/context";
 import { AnalyticsEvents, trackAnalyticsEvent } from "@/lib/analytics/track";
 import type { MapSearchPlaceEntry } from "@/lib/map-search-history";
-import { formatMobileDayDate } from "@/lib/plan/mobilePlanFormat";
+import { formatMobileDayDate, formatMonthDayKo } from "@/lib/plan/mobilePlanFormat";
 import { planCopy } from "@/lib/plan/planCopy";
 import { dayNumberForInsertAfterDayIndex } from "@/lib/plan/scheduleMerge";
 import type { PlanPlace } from "@/lib/plan/types";
@@ -154,6 +154,7 @@ export function MobilePlanView({
           scheduleId={schedule.scheduleId}
           dayLabel={`${dayIndex + 1}일차`}
           dateLabel={formatMobileDayDate(schedule.date)}
+          monthDayLabel={formatMonthDayKo(schedule.date)}
           menuDisabled={menuDisabled || isCreatingDay}
           editing={editing}
           onStartEditing={() => setEditing(true)}
diff --git a/src/app/(main)/plan/_components/mobile/MobileTimeSheet.tsx b/src/app/(main)/plan/_components/mobile/MobileTimeSheet.tsx
index 43a17c99..5414f7f2 100644
--- a/src/app/(main)/plan/_components/mobile/MobileTimeSheet.tsx
+++ b/src/app/(main)/plan/_components/mobile/MobileTimeSheet.tsx
@@ -3,15 +3,18 @@
 import { useState } from "react";
 import { toast } from "sonner";
 
+import { LoadingIndicator } from "@/components/loading/LoadingIndicator";
 import { MobileBottomSheet } from "@/components/mobile/MobileBottomSheet";
 import { useUpdateScheduleItem } from "@/hooks/useRooms";
 import {
+  addMinutesToHm,
+  computeDurationMinutesFromRange,
   normalizeStartTimeToHm,
   validateScheduleTimeDraft,
 } from "@/lib/plan/scheduleTime";
 import { cn } from "@/lib/utils";
 
-import { TimeWheelPicker, type TimeWheelValue } from "../itinerary/TimeWheelPicker";
+import { TimeWheelPicker } from "../itinerary/TimeWheelPicker";
 
 type Field = "start" | "end";
 
@@ -20,19 +23,20 @@ type MobileTimeSheetProps = Readonly<{
   scheduleId: number;
   itemId: number;
   placeName: string;
+  /** `9월 21일` */
+  dateLabel?: string;
   startTime: string | null | undefined;
   endTime: string | null | undefined;
   onClose: () => void;
 }>;
 
-function toWheel(hm: string, fallback: TimeWheelValue): TimeWheelValue {
-  if (!hm) return fallback;
-  const [h, m] = hm.split(":").map(Number);
-  return { hour: h ?? fallback.hour, minute: m ?? fallback.minute };
-}
+const DEFAULT_HM = "10:00";
 
-function toHm({ hour, minute }: TimeWheelValue): string {
-  return `${String(hour).padStart(2, "0")}:${String(minute).padStart(2, "0")}`;
+/** "13:05" → "오후 1:05" — 휠과 같이 시를 0~11로 표기 */
+function formatHm12h(hm: string): string {
+  if (!hm) return "";
+  const [h, m] = hm.split(":").map(Number);
+  return `${h < 12 ? "오전" : "오후"} ${h % 12}:${String(m).padStart(2, "0")}`;
 }
 
 /** 방문 시간 시트 — 시작·종료 칸을 누르면 휠 피커로 고른다 */
@@ -41,29 +45,35 @@ export function MobileTimeSheet({
   scheduleId,
   itemId,
   placeName,
+  dateLabel,
   startTime,
   endTime,
   onClose,
 }: MobileTimeSheetProps) {
   const serverStart = normalizeStartTimeToHm(startTime ?? "");
   const serverEnd = normalizeStartTimeToHm(endTime ?? "");
-  const [start, setStart] = useState(serverStart);
+  const [start, setStart] = useState(serverStart || DEFAULT_HM);
   const [end, setEnd] = useState(serverEnd);
-  const [activeField, setActiveField] = useState<Field | null>(null);
+  const [activeField, setActiveField] = useState<Field | null>("start");
   const { mutateAsync, isPending } = useUpdateScheduleItem();
 
   const dirty = start !== serverStart || end !== serverEnd;
+  const duration = computeDurationMinutesFromRange(start, end);
+  const subtitle = [
+    dateLabel,
+    duration != null && end < start ? "다음 날 종료(+1일)" : null,
+    duration != null ? `${Math.floor(duration / 60)}시간 ${duration % 60}분` : null,
+  ]
+    .filter(Boolean)
+    .join(" · ");
   const validation = validateScheduleTimeDraft(start, end);
 
   function openField(field: Field) {
     if (field === "end" && !start) return;
     setActiveField((current) => (current === field ? null : field));
     // 비어 있는 칸을 처음 열면 휠 기본값으로 채운다
-    if (field === "start" && !start) setStart("12:00");
-    if (field === "end" && !end) {
-      const base = toWheel(start, { hour: 12, minute: 0 });
-      setEnd(toHm({ hour: (base.hour + 1) % 24, minute: base.minute }));
-    }
+    if (field === "start" && !start) setStart(DEFAULT_HM);
+    if (field === "end" && !end) setEnd(addMinutesToHm(start, 60));
   }
 
   async function handleSave() {
@@ -90,61 +100,65 @@ export function MobileTimeSheet({
   }
 
   const fields: { key: Field; label: string; value: string }[] = [
-    { key: "start", label: "시작", value: start },
-    { key: "end", label: "종료", value: end },
+    { key: "start", label: "시작 시간", value: start },
+    { key: "end", label: "종료 시간", value: end },
   ];
 
   return (
     <MobileBottomSheet
       open
       onClose={onClose}
-      title="방문 시간"
-      subtitle={placeName}
+      title={placeName}
+      subtitle={subtitle || undefined}
       variant="form"
       closeDisabled={isPending}
     >
-      <div className="grid grid-cols-2 gap-3">
-        {fields.map(({ key, label, value }) => (
-          <div key={key} className="flex min-w-0 flex-col gap-2">
-            <span className="text-caption-l-regular text-text-subtle">{label}</span>
+      <div className="flex w-full items-end gap-2">
+        {fields.map(({ key, label, value }) => {
+          const active = activeField === key;
+          const display = formatHm12h(value);
+          return (
             <button
+              key={key}
               type="button"
               onClick={() => openField(key)}
               disabled={isPending || (key === "end" && !start)}
-              aria-expanded={activeField === key}
+              aria-expanded={active}
+              aria-label={`${label} ${display || "미설정"}`}
               className={cn(
-                "rounded-xl bg-fill p-3 text-left text-body-l-regular font-medium tabular-nums disabled:opacity-40",
-                value ? "text-text" : "text-text-subtle",
-                activeField === key && "ring-2 ring-primary",
+                "flex min-w-0 flex-1 flex-col gap-0.5 rounded-lg border bg-fill-subtle px-2 pb-1.5 pt-3 disabled:opacity-40",
+                active ? "border-primary" : "border-border",
               )}
             >
-              {value || "--:--"}
+              <span
+                className={cn(
+                  "w-full px-1 text-center text-label-xs-regular",
+                  active ? "text-primary-strong" : "text-text-subtle",
+                )}
+              >
+                {label}
+              </span>
+              <span className="flex h-8 w-full items-center justify-center truncate px-1 text-body-m-regular tabular-nums text-text">
+                {display || "-- : --"}
+              </span>
             </button>
-          </div>
-        ))}
+          );
+        })}
       </div>
 
       {activeField ? (
-        <TimeWheelPicker
-          value={toWheel(activeField === "start" ? start : end, { hour: 12, minute: 0 })}
-          onChange={(next) => (activeField === "start" ? setStart : setEnd)(toHm(next))}
-          disabled={isPending}
-        />
+        <div inert={isPending} className={cn(isPending && "opacity-60")}>
+          <TimeWheelPicker
+            value={(activeField === "start" ? start : end) || DEFAULT_HM}
+            onChange={activeField === "start" ? setStart : setEnd}
+            active
+            onInteract={() => {}}
+          />
+        </div>
       ) : null}
 
-      <button
-        type="button"
-        onClick={() => void handleSave()}
-        disabled={isPending || !dirty || !validation.valid}
-        className="min-h-12 w-full rounded-xl bg-primary text-label-m-regular text-fill-elevate disabled:opacity-40"
-      >
-        {isPending ? "저장 중…" : "저장"}
-      </button>
-      <div className="flex items-center justify-between gap-3">
-        <p className="text-caption-l-regular text-text-subtle">
-          종료가 시작보다 이르면 다음 날로 표시
-        </p>
-        {start || end ? (
+      {start || end ? (
+        <div className="flex justify-end">
           <button
             type="button"
             onClick={() => {
@@ -153,11 +167,36 @@ export function MobileTimeSheet({
               setActiveField(null);
             }}
             disabled={isPending}
-            className="shrink-0 text-caption-l-regular text-text-subtle underline underline-offset-2 disabled:opacity-40"
+            className="text-caption-l-regular text-text-subtle underline underline-offset-2 disabled:opacity-40"
           >
             시간 지우기
           </button>
-        ) : null}
+        </div>
+      ) : null}
+
+      <div className="flex h-11 w-full items-center gap-4 px-1">
+        <button
+          type="button"
+          onClick={onClose}
+          disabled={isPending}
+          className="flex-1 rounded-lg bg-fill-subtle px-2.5 py-2 text-label-m-emphasis text-text transition-colors enabled:hover:bg-fill enabled:hover:text-text-subtle enabled:active:bg-fill-strong enabled:active:text-text disabled:bg-fill disabled:text-text-disabled"
+        >
+          취소
+        </button>
+        <button
+          type="button"
+          onClick={() => void handleSave()}
+          disabled={isPending || !dirty || !validation.valid}
+          aria-busy={isPending}
+          className={cn(
+            "flex flex-1 items-center justify-center rounded-lg px-2.5 py-2 text-label-m-emphasis text-text-inverse transition-colors",
+            isPending
+              ? "bg-[var(--gray-900)]"
+              : "bg-[var(--gray-800)] enabled:hover:bg-[var(--gray-700)] enabled:active:bg-[var(--gray-900)] disabled:bg-fill disabled:text-text-disabled",
+          )}
+        >
+          {isPending ? <LoadingIndicator label="저장 중" className="text-text-inverse" /> : "확인"}
+        </button>
       </div>
     </MobileBottomSheet>
   );
diff --git a/src/app/globals.css b/src/app/globals.css
index 92f6a7de..c9a88420 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -1,6 +1,8 @@
 @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
 @import "tailwindcss";
 @import "tw-animate-css";
+/* 휠 피커 기본 스타일 — components 레이어에 둬서 Tailwind 유틸리티가 덮어쓸 수 있게 한다 */
+@import "@ncdai/react-wheel-picker/style.css" layer(components);
 @config "../../tailwind.config.js";
 /* 제품 서체 Pretendard — Figma Typography/Foundation 기준 */
 
diff --git a/src/components/mobile/MobileBottomSheet.tsx b/src/components/mobile/MobileBottomSheet.tsx
index c5711c9a..01b209c1 100644
--- a/src/components/mobile/MobileBottomSheet.tsx
+++ b/src/components/mobile/MobileBottomSheet.tsx
@@ -94,7 +94,7 @@ function MobileBottomSheetContent({
           </button>
         </div>
         {subtitle ? (
-          <p className="shrink-0 truncate text-caption-l-regular text-text-subtle">{subtitle}</p>
+          <p className="shrink-0 truncate text-caption-m-regular text-text-subtle">{subtitle}</p>
         ) : null}
         </BottomSheetDragHandle>
         <div className={cn("-m-1 flex min-h-0 flex-col overflow-y-auto overscroll-contain p-1", variant === "menu" ? "gap-2" : "gap-4")}>{children}</div>
diff --git a/src/lib/plan/mobilePlanFormat.test.ts b/src/lib/plan/mobilePlanFormat.test.ts
index cac81784..1ff51485 100644
--- a/src/lib/plan/mobilePlanFormat.test.ts
+++ b/src/lib/plan/mobilePlanFormat.test.ts
@@ -2,12 +2,23 @@ import { describe, expect, it } from "vitest";
 
 import type { Expense } from "@/lib/api/rooms/expenses";
 
-import { formatMobileDayDate, summarizeExpensesForMobile } from "./mobilePlanFormat";
+import { formatMobileDayDate, formatMonthDayKo, summarizeExpensesForMobile } from "./mobilePlanFormat";
 
 function expense(currency: string, totalAmount: string, id: number): Expense {
   return { id, currency, totalAmount } as Expense;
 }
 
+describe("formatMonthDayKo", () => {
+  it("월·일을 앞자리 0 없이 표시한다", () => {
+    expect(formatMonthDayKo("2026-09-08")).toBe("9월 8일");
+    expect(formatMonthDayKo("2026-12-25")).toBe("12월 25일");
+  });
+
+  it("형식이 맞지 않으면 빈 문자열", () => {
+    expect(formatMonthDayKo("")).toBe("");
+  });
+});
+
 describe("formatMobileDayDate", () => {
   it("월·일을 두 자리로 맞추고 요일을 붙인다", () => {
     expect(formatMobileDayDate("2026-09-21")).toBe("09. 21 월");
diff --git a/src/lib/plan/mobilePlanFormat.ts b/src/lib/plan/mobilePlanFormat.ts
index 7831c9ad..58a994b5 100644
--- a/src/lib/plan/mobilePlanFormat.ts
+++ b/src/lib/plan/mobilePlanFormat.ts
@@ -14,6 +14,13 @@ export function formatMobileDayDate(ymd: string): string {
   return `${mm}. ${dd} ${WEEKDAYS_KO[d.getDay()]}`;
 }
 
+/** `2026-09-28` → `9월 28일` */
+export function formatMonthDayKo(ymd: string): string {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(ymd)) return "";
+  const d = parseLocalYmd(ymd);
+  return `${d.getMonth() + 1}월 ${d.getDate()}일`;
+}
+
 /**
  * 모바일 비용 요약 — 지출이 가장 많은 통화의 합계만 보여주고, 다른 통화 지출은 건수로 붙인다.
  * 예: `357 KRW`, `357 KRW 외 1건`. 지출이 없으면 null.