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 (
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 (
);
})()}
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
[] = [
+ { value: "AM", label: "오전" },
+ { value: "PM", label: "오후" },
+];
+const HOUR_OPTIONS: WheelPickerOption[] = Array.from(
+ { length: 12 },
+ (_, i) => ({ value: i, label: String(i) }),
+);
+const MINUTE_OPTIONS: WheelPickerOption[] = 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(null);
- const settleTimerRef = useRef(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) => {
- 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 (
{
+ if (e.key !== "Tab" && e.key !== "Escape") onInteract();
}}
>
-
- {items.map((v, i) => {
- const isSelected = i === selectedIndex;
- return (
-
- );
- })}
-
-
-
-
- onChange({ hour: h, minute: value.minute })}
- ariaLabel="시"
- disabled={disabled}
- />
-
- :
-
- onChange({ hour: value.hour, minute: m })}
- ariaLabel="분"
- disabled={disabled}
- />
-
+
+
+ onChange(joinHm(next, hour, minute))}
+ />
+
+
+ onChange(joinHm(period, next, minute))}
+ />
+
+
+ onChange(joinHm(period, hour, next))}
+ />
+
+