{stop.name}
+{stop.address}
+ + + {!isLast ? ( +
+
+ ) : null}
+
{message}
diff --git a/src/components/course-planner/AmPmTimeWheelGroup.tsx b/src/components/course-planner/AmPmTimeWheelGroup.tsx
new file mode 100644
index 0000000..f1133ad
--- /dev/null
+++ b/src/components/course-planner/AmPmTimeWheelGroup.tsx
@@ -0,0 +1,374 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+
+import { isHmString } from "@/components/course-planner/course-date-time";
+import { cn } from "@/lib/utils";
+
+const ITEM_HEIGHT_PX = 44;
+const WHEEL_HEIGHT_PX = 216;
+const EDGE_PADDING_PX = (WHEEL_HEIGHT_PX - ITEM_HEIGHT_PX) / 2;
+
+type Period = "AM" | "PM";
+type Minute = "00" | "30";
+
+type CompleteTriplet = {
+ period: Period;
+ hour12: string;
+ minute: Minute;
+};
+
+const DEFAULT_TRIPLET: CompleteTriplet = {
+ period: "AM",
+ hour12: "12",
+ minute: "00",
+};
+
+const PERIOD_ITEMS: { value: Period; label: string }[] = [
+ { value: "AM", label: "오전" },
+ { value: "PM", label: "오후" },
+];
+
+const HOUR_ORDER = ["12", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"] as const;
+
+const MINUTE_ITEMS: { value: Minute; label: string }[] = [
+ { value: "00", label: "00" },
+ { value: "30", label: "30" },
+];
+
+function hmToTriplet(hm: string): CompleteTriplet {
+ const [hs, ms] = hm.split(":");
+ const h24 = Number(hs);
+ const minute: Minute = ms === "30" ? "30" : "00";
+ const period: Period = h24 >= 12 ? "PM" : "AM";
+ let hour12 = h24 % 12;
+ if (hour12 === 0) hour12 = 12;
+ return { period, hour12: String(hour12), minute };
+}
+
+function tripletToHm(t: CompleteTriplet): string {
+ const hour12 = Number(t.hour12);
+ let h24 = hour12;
+ if (t.period === "AM") {
+ if (hour12 === 12) h24 = 0;
+ } else if (hour12 !== 12) {
+ h24 = hour12 + 12;
+ }
+
+ const mm = t.minute === "30" ? "30" : "00";
+ return `${String(h24).padStart(2, "0")}:${mm}`;
+}
+
+function parseTripletFromValue(value: string | null): CompleteTriplet {
+ if (!value || !isHmString(value)) return { ...DEFAULT_TRIPLET };
+ return hmToTriplet(value);
+}
+
+function scrollTopForIndex(index: number) {
+ return index * ITEM_HEIGHT_PX;
+}
+
+type WheelColumnProps {description}
+ {label}
+ 맞춤 데이트코스를 생성하고 있어요
+ {stop.address}
+ 마음에 드는 코스를 선택해서 장소 정보를 확인해보세요.
+
+ {formatSelectedDateLine(selectedDate)}
+ 영업시간 정보 없음 영업시간 정보 없음 영업시간 {buildStatusSummary(businessHours)} 영업시간 {buildStatusSummary(businessHours)} {businessHours.holidayNotice}
+ {businessHours.holidayNotice}
+
+
{todayHours.label} {todayHours.hours}
+
+ );
+}
+
+type AmPmTimeWheelGroupProps = {
+ label: string;
+ value: string | null;
+ onChange: (next: string | null) => void;
+};
+
+export function AmPmTimeWheelGroup({ label, value, onChange }: AmPmTimeWheelGroupProps) {
+ const [triplet, setTriplet] = useState
+
+
+ {items.map((item, index) => {
+ const atCenter = index === centerIdx;
+ const dist = Math.abs(index - centerIdx);
+ return (
+
+ {
+ setCenterIdx(index);
+ scrollToIndex(index, false);
+ onSelect(item.value);
+ }}
+ className={cn(
+ "flex shrink-0 cursor-pointer snap-center snap-always items-center justify-center text-[15px] tracking-tight",
+ atCenter && "text-brand-coral font-semibold",
+ !atCenter &&
+ dist === 1 &&
+ "text-muted-foreground/55 dark:text-muted-foreground/50 font-normal",
+ !atCenter &&
+ dist >= 2 &&
+ "text-muted-foreground/38 dark:text-muted-foreground/35 font-normal",
+ )}
+ style={{
+ height: ITEM_HEIGHT_PX,
+ scrollSnapAlign: "center",
+ scrollSnapStop: "always",
+ }}
+ >
+ {item.label}
+
+ );
+ })}
+
+
+ {label}
+
+
+
+ );
+}
diff --git a/src/components/course-planner/CourseConfirmModal.tsx b/src/components/course-planner/CourseConfirmModal.tsx
new file mode 100644
index 0000000..11264e3
--- /dev/null
+++ b/src/components/course-planner/CourseConfirmModal.tsx
@@ -0,0 +1,71 @@
+import { createPortal } from "react-dom";
+
+import { RoomModalShell } from "@/components/room/RoomModalShell";
+import { useOverlayFlowController } from "@/features/room/hooks";
+import { cn } from "@/lib/utils";
+
+type CourseConfirmModalVariant = "default" | "danger";
+
+type CourseConfirmModalProps = {
+ open: boolean;
+ title: string;
+ description: string;
+ confirmLabel: string;
+ historyStateKey: string;
+ variant?: CourseConfirmModalVariant;
+ onClose: () => void;
+ onConfirm: () => void;
+};
+
+export function CourseConfirmModal({
+ open,
+ title,
+ description,
+ confirmLabel,
+ historyStateKey,
+ variant = "default",
+ onClose,
+ onConfirm,
+}: CourseConfirmModalProps) {
+ const { isRendered, isVisible, requestClose } = useOverlayFlowController({
+ open,
+ onClose,
+ historyStateKey,
+ });
+
+ if (!isRendered) {
+ return null;
+ }
+
+ return createPortal(
+
+
+
+
+
+
+
+
+
+ {title}
+
+
+
+
+
+
+
+ {isEditing ? (
+ setDraftTitle(event.target.value)}
+ className="text-foreground placeholder:text-muted-foreground border-border focus:border-primary min-w-0 flex-1 shrink border-b bg-transparent pt-0.5 pb-2 text-lg leading-snug font-semibold transition-colors outline-none"
+ placeholder="코스 이름"
+ aria-label="코스 이름 편집"
+ />
+ ) : (
+ <>
+
+
+ {courseTitle}
+
+
+
+ )}
+
+ {isEditing ? (
+
+
+ {isEditing ? (
+
+
+ );
+ })
+ )}
+
+
+ {!isLast ? (
+
+
+
+
+
+ ) : null}
+ {stop.name}
+
+
+ ) : null}
+
+
+
+
+ ) : (
+
+ )}
+
+
+ {Array.from({ length: CATEGORY_CHIP_SKELETON_COUNT }, (_, index) => (
+
+ );
+}
+
+export function CoursePlaceTagSelector({
+ categories,
+ categoryNameByCode,
+ filterCategories,
+ isCategoryLoading,
+ isCategoryError,
+ onRetryLoadCategories,
+ activeCategories,
+ focusedCategory,
+ onToggleCategory,
+ isTagPanelOpen,
+ selectedTagKeysByCategory,
+ selectedTagCountByCategory,
+ onToggleTagInCategory,
+}: MapFilterBarProps) {
+ const highlightCtx = { activeCategories, focusedCategory };
+ const focusedSection =
+ isTagPanelOpen && focusedCategory
+ ? (filterCategories.find((category) => category.code === focusedCategory) ?? null)
+ : null;
+ const selectedKeys = focusedSection ? (selectedTagKeysByCategory[focusedSection.code] ?? []) : [];
+ const focusedTags =
+ focusedSection?.tagGroups.flatMap((group) => group.tags).filter((tag) => tag.name.trim()) ?? [];
+
+ return (
+
+ {isCategoryLoading ? (
+
+ );
+}
diff --git a/src/components/course-planner/CoursePlannerActions.tsx b/src/components/course-planner/CoursePlannerActions.tsx
new file mode 100644
index 0000000..228c1b6
--- /dev/null
+++ b/src/components/course-planner/CoursePlannerActions.tsx
@@ -0,0 +1,40 @@
+import { RotateCcw } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+type CoursePlannerActionsProps = {
+ canGenerate: boolean;
+ onGenerate: () => void;
+ onReset: () => void;
+};
+
+export function CoursePlannerActions({
+ canGenerate,
+ onGenerate,
+ onReset,
+}: CoursePlannerActionsProps) {
+ return (
+
+ {categories.map((category) => (
+
+ )}
+
+ {isCategoryError ? (
+
+
+
+ ) : null}
+
+ {focusedSection && focusedTags.length > 0 ? (
+
+ {focusedTags.map((tag) => (
+
+ ) : null}
+
+
+
+
+
+ );
+}
diff --git a/src/components/course-planner/CoursePlannerBottomSheet.tsx b/src/components/course-planner/CoursePlannerBottomSheet.tsx
new file mode 100644
index 0000000..498a613
--- /dev/null
+++ b/src/components/course-planner/CoursePlannerBottomSheet.tsx
@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+
+import { BottomSheet } from "@/components/ui/BottomSheet";
+
+type CoursePlannerBottomSheetProps = {
+ open: boolean;
+ onClose: () => void;
+ children: ReactNode;
+};
+
+export function CoursePlannerBottomSheet({
+ open,
+ onClose,
+ children,
+}: CoursePlannerBottomSheetProps) {
+ return (
+
+
+ {label}
+ {required ? * : null}
+
+
+
+
+ );
+}
diff --git a/src/components/course-planner/CoursePlannerMapPreview.tsx b/src/components/course-planner/CoursePlannerMapPreview.tsx
new file mode 100644
index 0000000..f2b8396
--- /dev/null
+++ b/src/components/course-planner/CoursePlannerMapPreview.tsx
@@ -0,0 +1,17 @@
+type CoursePlannerMapPreviewProps = {
+ statusMessage?: string;
+};
+
+export function CoursePlannerMapPreview({ statusMessage }: CoursePlannerMapPreviewProps) {
+ return (
+
+ {statusMessage ? (
+
+ );
+}
diff --git a/src/components/course-planner/CoursePlannerPanel.tsx b/src/components/course-planner/CoursePlannerPanel.tsx
new file mode 100644
index 0000000..b80bbe0
--- /dev/null
+++ b/src/components/course-planner/CoursePlannerPanel.tsx
@@ -0,0 +1,61 @@
+import { CalendarDays } from "lucide-react";
+
+import { CoursePlaceTagSelector } from "@/components/course-planner/CoursePlaceTagSelector";
+import { CoursePlannerActions } from "@/components/course-planner/CoursePlannerActions";
+import { CoursePlannerField } from "@/components/course-planner/CoursePlannerField";
+import type { MapFilterBarProps } from "@/components/map/filters/map-filter-bar-props";
+
+type CoursePlannerPanelProps = {
+ regionValue: string;
+ dateTimeValue: string;
+ canGenerate: boolean;
+ placeFilterBarProps: MapFilterBarProps;
+ onOpenRegionSelect: () => void;
+ onOpenDateTimeSelect: () => void;
+ onGenerate: () => void;
+ onReset: () => void;
+};
+
+export function CoursePlannerPanel({
+ regionValue,
+ dateTimeValue,
+ canGenerate,
+ placeFilterBarProps,
+ onOpenRegionSelect,
+ onOpenDateTimeSelect,
+ onGenerate,
+ onReset,
+}: CoursePlannerPanelProps) {
+ return (
+
+
+ ) : null}
+
+ {statusMessage}
+
+
+ 맞춤 데이트코스 설정하기
+
+
+
+
+
+
+ 장소 종류
+
+
+ 맞춤 데이트코스 확인하기
+
+
+ {courses.map((course) => {
+ const selected = course.id === selectedCourseId;
+ return (
+
+ );
+ })}
+
+
+
+ );
+}
diff --git a/src/components/course-planner/DateTimeSelectionPanel.tsx b/src/components/course-planner/DateTimeSelectionPanel.tsx
new file mode 100644
index 0000000..b5dd183
--- /dev/null
+++ b/src/components/course-planner/DateTimeSelectionPanel.tsx
@@ -0,0 +1,209 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { useEffect, useMemo, useState } from "react";
+
+import { AmPmTimeWheelGroup } from "@/components/course-planner/AmPmTimeWheelGroup";
+import { isEndAfterStart, isHmString } from "@/components/course-planner/course-date-time";
+import { cn } from "@/lib/utils";
+
+const weekdayLabels = ["일", "월", "화", "수", "목", "금", "토"];
+
+function parseDateAnchor(value: string | null) {
+ if (!value) return new Date();
+
+ const match = /^(\d{4})\.(\d{2})\.(\d{2})$/.exec(value);
+ if (!match) return new Date();
+
+ const [, year, month, day] = match;
+ return new Date(Number(year), Number(month) - 1, Number(day));
+}
+
+function startOfMonth(date: Date) {
+ return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+
+function formatDateValue(date: Date) {
+ const year = date.getFullYear();
+ const month = String(date.getMonth() + 1).padStart(2, "0");
+ const day = String(date.getDate()).padStart(2, "0");
+ return `${year}.${month}.${day}`;
+}
+
+function getMonthMatrixBase(date: Date) {
+ const year = date.getFullYear();
+ const month = date.getMonth();
+ const firstDay = new Date(year, month, 1);
+ const lastDay = new Date(year, month + 1, 0);
+
+ return {
+ year,
+ month,
+ startBlankCount: firstDay.getDay(),
+ dayCount: lastDay.getDate(),
+ };
+}
+
+type DateCalendarPanelProps = {
+ selectedDate: string | null;
+ onSelectDate: (date: string) => void;
+};
+
+/** 날짜만 선택하는 캘린더 카드 */
+export function DateCalendarPanel({ selectedDate, onSelectDate }: DateCalendarPanelProps) {
+ const parsedAnchorDate = useMemo(() => parseDateAnchor(selectedDate), [selectedDate]);
+ const [visibleMonth, setVisibleMonth] = useState(() => startOfMonth(parsedAnchorDate));
+
+ useEffect(() => {
+ if (selectedDate !== null) return;
+ const id = requestAnimationFrame(() => {
+ const now = new Date();
+ setVisibleMonth(new Date(now.getFullYear(), now.getMonth(), 1));
+ });
+ return () => cancelAnimationFrame(id);
+ }, [selectedDate]);
+
+ const { year, month, startBlankCount, dayCount } = useMemo(
+ () => getMonthMatrixBase(visibleMonth),
+ [visibleMonth],
+ );
+ const monthLabel = `${visibleMonth.getFullYear()}년 ${visibleMonth.getMonth() + 1}월`;
+
+ const moveMonth = (offset: number) => {
+ setVisibleMonth((current) => new Date(current.getFullYear(), current.getMonth() + offset, 1));
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+type DateTimeWheelsPanelProps = {
+ selectedDate: string | null;
+ selectedStartTime: string | null;
+ selectedEndTime: string | null;
+ onSelectStartTime: (time: string | null) => void;
+ onSelectEndTime: (time: string | null) => void;
+};
+
+/** 시작·종료 시간 휠 (날짜가 정해진 뒤 단계 화면에서만 사용) */
+export function DateTimeWheelsPanel({
+ selectedDate,
+ selectedStartTime,
+ selectedEndTime,
+ onSelectStartTime,
+ onSelectEndTime,
+}: DateTimeWheelsPanelProps) {
+ const showStartWheels = selectedDate !== null;
+ const showEndWheels = showStartWheels && isHmString(selectedStartTime);
+
+ if (!showStartWheels) return null;
+
+ return (
+
+ {monthLabel}
+
+
+
+
+
+
+ {weekdayLabels.map((weekday) => (
+
+ {weekday}
+
+ ))}
+
+
+
+ {Array.from({ length: startBlankCount }).map((_, index) => (
+
+ ))}
+ {Array.from({ length: dayCount }).map((_, index) => {
+ const day = index + 1;
+ const date = new Date(year, month, day);
+ const dateValue = formatDateValue(date);
+ const selected = selectedDate !== null && dateValue === selectedDate;
+
+ return (
+
+ );
+ })}
+
+
+
+ );
+}
diff --git a/src/components/course-planner/DateTimeSelectionScreen.tsx b/src/components/course-planner/DateTimeSelectionScreen.tsx
new file mode 100644
index 0000000..5f54c96
--- /dev/null
+++ b/src/components/course-planner/DateTimeSelectionScreen.tsx
@@ -0,0 +1,128 @@
+import { ChevronLeft, X } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import { isEndAfterStart, isHmString } from "@/components/course-planner/course-date-time";
+import {
+ DateCalendarPanel,
+ DateTimeWheelsPanel,
+} from "@/components/course-planner/DateTimeSelectionPanel";
+import { cn } from "@/lib/utils";
+
+type DateTimeStep = "date" | "time";
+
+type DateTimeSelectionScreenProps = {
+ selectedDate: string | null;
+ selectedStartTime: string | null;
+ selectedEndTime: string | null;
+ onSelectDate: (date: string) => void;
+ onSelectStartTime: (time: string | null) => void;
+ onSelectEndTime: (time: string | null) => void;
+ onClose: () => void;
+ onConfirm: () => void;
+};
+
+function formatSelectedDateLine(dateStr: string) {
+ const d = new Date(dateStr.replaceAll(".", "/"));
+ const weekday = d.toLocaleDateString("ko-KR", { weekday: "long" });
+ return `${dateStr} ${weekday}`;
+}
+
+export function DateTimeSelectionScreen({
+ selectedDate,
+ selectedStartTime,
+ selectedEndTime,
+ onSelectDate,
+ onSelectStartTime,
+ onSelectEndTime,
+ onClose,
+ onConfirm,
+}: DateTimeSelectionScreenProps) {
+ const [step, setStep] = useState
+ {step === "time" ? (
+
+ ) : (
+
+ )}
+
+
+
+ {step === "time" && selectedDate !== null ? (
+ {headerTitle}
+
+
+
+ {step === "date" ? (
+
+
+ {step === "time" ? (
+
+ ) : null}
+
+
+
+ 지역설정
+
+
+
+
+
+
+
+
+
+ 시/도
+
+
+ {cities.map((city) => {
+ const selected = city === selectedCity;
+ return (
+
+ );
+ })}
+
+
+
+
+ 시/구/군
+
+
+ {districts.map((district) => {
+ const selected = district === selectedDistrict;
+ return (
+
+ );
+ })}
+
+
-
{todayHours ? (
-
-
+