feat: 모바일 일정·지도·채팅 사용성 개선 배포

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",

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}

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"

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)
+                      }
                     />
                   );
                 })

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>
           );
         })()}