feat: 데이트 코스짜기 페이지 카테고리 설정 UI 변경 및 추가

src/app/router/index.tsx

@@ -19,6 +19,7 @@ import TermsAgreementPage from "@/pages/onboarding/TermsAgreementPage";
 import RoomLinkCandidatesPage from "@/pages/rooms/RoomLinkCandidatesPage";
 import RoomPlaceFromLinkPage from "@/pages/rooms/RoomPlaceFromLinkPage";
 import RoomPlaceSearchPage from "@/pages/rooms/RoomPlaceSearchPage";
+import CoursePlannerPagePreview from "@/pages/tabs/CoursePlannerPage";
 
 const MapHomePage = lazy(() => import("@/pages/MapHomePage"));
 const RoomMainPage = lazy(() => import("@/pages/room/RoomMainPage"));
@@ -37,6 +38,7 @@ export const router = createBrowserRouter([
       { path: "login", element: <LoginPage /> },
       { path: "privacys", element: <PrivacyPolicyPage /> },
       { path: "terms", element: <TermsOfServicePage /> },
+      { path: "dev/course", element: <CoursePlannerPagePreview skipRoomGuard /> },
       {
         path: "auth/callback",
         element: <AuthCallbackPage />,

src/components/course-planner/CourseGenerationLoadingPanel.tsx

@@ -1,24 +1,27 @@
-import { Loader2 } from "lucide-react";
+import { BrandMarkerLoader } from "@/components/ui/BrandMarkerLoader";
+import { cn } from "@/lib/utils";
 
 type CourseGenerationLoadingPanelProps = {
-  /** 현재 컨텍스트 방 이름 (`useRoomSelectionStore`) */
   roomName: string;
+  className?: string;
 };
 
-export function CourseGenerationLoadingPanel({ roomName }: CourseGenerationLoadingPanelProps) {
+export function CourseGenerationLoadingPanel({
+  roomName,
+  className,
+}: CourseGenerationLoadingPanelProps) {
   const label = roomName.trim() || "방";
 
   return (
-    <section className="bg-background px-6 pt-8 pb-6">
-      <div className="flex min-h-[250px] flex-col items-center justify-center text-center">
-        <p className="text-foreground text-base leading-7 font-semibold">
-          <span className="block">{label}</span>
-          <span className="mt-2 block">맞춤 데이트 코스를 생성하고 있어요</span>
+    <section className={cn("bg-background flex min-h-0 flex-1 flex-col px-6 pt-8 pb-6", className)}>
+      <div className="flex min-h-0 flex-1 flex-col items-center justify-center text-center">
+        <div className="flex shrink-0 flex-col items-center">
+          <BrandMarkerLoader aria-label="데이트 코스 생성 중" />
+        </div>
+        <p className="text-foreground mt-12 text-base leading-7 font-semibold">
+          <span className="block">{label}의 장소들로</span>
+          <span className="mt-2 block">데이트 코스를 생성하고 있어요</span>
         </p>
-        <Loader2
-          className="text-muted-foreground mt-8 size-7 animate-spin"
-          aria-label="데이트 코스 생성 중"
-        />
       </div>
     </section>
   );

src/components/course-planner/CoursePlaceAddSheet.tsx

@@ -1,68 +1,96 @@
 import { useMemo, useState } from "react";
 import { createPortal } from "react-dom";
 
-import { EditPlaceResultCard } from "@/components/link-place/EditPlaceResultCard";
-import { PlaceFlowSearchEmptyRow } from "@/components/place-flow/PlaceFlowSearchEmptyRow";
-import { PlaceFlowSearchFieldRow } from "@/components/place-flow/PlaceFlowSearchFieldRow";
-import { BottomSheet } from "@/components/ui/BottomSheet";
-import { PillButton } from "@/components/ui/PillButton";
-import { PLACE_FLOW_COPY } from "@/features/place-flow/place-flow-copy";
-import { PROMPT_FLOW_LIST_TOP_BORDER_CLASS } from "@/features/place-flow/prompt-flow-layout";
-import { SAVED_PLACE_MOCKS } from "@/shared/mocks/place-mocks";
+import { PlaceSearchMapSheet } from "@/components/place-flow/PlaceSearchMapSheet";
+import type { PlaceCandidate } from "@/features/place-candidates";
+import {
+  canSubmitPlaceCandidate,
+  placeCandidateToSavedPlace,
+  usePlaceCandidates,
+} from "@/features/place-candidates";
+import { cn } from "@/lib/utils";
 import type { SavedPlace } from "@/shared/types/map-home";
+import {
+  FULLSCREEN_FLOW_PANEL_CLASSES,
+  FULLSCREEN_FLOW_ROUTE_OUTER_CLASSES,
+} from "@/shared/ui/fullscreen-flow-layout";
 
 type CoursePlaceAddSheetProps = {
   open: boolean;
+  roomId?: string | null;
   excludedPlaceIds: string[];
   onClose: () => void;
   onConfirm: (place: SavedPlace) => void;
 };
 
-function findPlaceMatches(keyword: string): SavedPlace[] {
-  const trimmedKeyword = keyword.trim();
-  if (!trimmedKeyword) {
-    return [];
-  }
-
-  return SAVED_PLACE_MOCKS.filter(
-    (place) => place.name.includes(trimmedKeyword) || place.address.includes(trimmedKeyword),
-  );
-}
+const EMPTY_PLACE_CANDIDATES: PlaceCandidate[] = [];
 
 export function CoursePlaceAddSheet({
   open,
+  roomId = null,
   excludedPlaceIds,
   onClose,
   onConfirm,
 }: CoursePlaceAddSheetProps) {
   const [keyword, setKeyword] = useState("");
+  const [submittedKeyword, setSubmittedKeyword] = useState("");
   const [selectedPlaceId, setSelectedPlaceId] = useState<string | null>(null);
   const excludedPlaceIdSet = useMemo(() => new Set(excludedPlaceIds), [excludedPlaceIds]);
-
-  const searchResults = useMemo(() => findPlaceMatches(keyword), [keyword]);
-  const availableResults = useMemo(
-    () => searchResults.filter((place) => !excludedPlaceIdSet.has(place.id)),
-    [excludedPlaceIdSet, searchResults],
-  );
-  const selectedPlace = availableResults.find((place) => place.id === selectedPlaceId) ?? null;
   const trimmedKeyword = keyword.trim();
-  const canSearch = trimmedKeyword.length > 0;
-  const canConfirm = selectedPlace != null;
+  const submittedTrimmedKeyword = submittedKeyword.trim();
+  const isSubmittedKeywordCurrent = submittedTrimmedKeyword === trimmedKeyword;
+
+  const placeCandidatesQuery = usePlaceCandidates({
+    roomId: roomId ?? null,
+    params: {
+      keyword: submittedTrimmedKeyword,
+      limit: 10,
+    },
+    enabled: open && Boolean(roomId) && submittedTrimmedKeyword.length > 0,
+  });
+  const placeCandidates = placeCandidatesQuery.data ?? EMPTY_PLACE_CANDIDATES;
+
+  const availableResults = useMemo(() => {
+    if (!isSubmittedKeywordCurrent || submittedTrimmedKeyword.length === 0) {
+      return [];
+    }
+
+    return placeCandidates
+      .map((place, index) => ({
+        candidate: place,
+        savedPlace: placeCandidateToSavedPlace(place, index),
+      }))
+      .filter(({ candidate, savedPlace }) => {
+        if (!canSubmitPlaceCandidate(candidate)) {
+          return false;
+        }
+
+        return (
+          !excludedPlaceIdSet.has(savedPlace.id) &&
+          !(savedPlace.kakaoPlaceId && excludedPlaceIdSet.has(savedPlace.kakaoPlaceId))
+        );
+      });
+  }, [excludedPlaceIdSet, isSubmittedKeywordCurrent, placeCandidates, submittedTrimmedKeyword]);
+
+  const selectedPlace =
+    availableResults.find(({ savedPlace }) => savedPlace.id === selectedPlaceId)?.savedPlace ??
+    null;
+  const searchResults = availableResults.map(({ savedPlace }) => savedPlace);
 
   const resetAndClose = () => {
     setKeyword("");
+    setSubmittedKeyword("");
     setSelectedPlaceId(null);
     onClose();
   };
 
   const handleSubmitSearch = () => {
-    if (!canSearch) {
+    if (trimmedKeyword.length === 0) {
       return;
     }
 
-    if (availableResults.length === 1) {
-      setSelectedPlaceId(availableResults[0].id);
-    }
+    setSubmittedKeyword(trimmedKeyword);
+    setSelectedPlaceId(null);
   };
 
   const handleConfirm = () => {
@@ -72,86 +100,40 @@ export function CoursePlaceAddSheet({
 
     onConfirm(selectedPlace);
     setKeyword("");
+    setSubmittedKeyword("");
     setSelectedPlaceId(null);
   };
 
-  const hasOnlyDuplicateMatches =
-    trimmedKeyword.length > 0 && searchResults.length > 0 && availableResults.length === 0;
+  if (!open) {
+    return null;
+  }
 
   return createPortal(
-    <BottomSheet open={open} onClose={resetAndClose} intrinsicPanelHeight enableHistory={false}>
-      <section className="bg-background px-6 pt-8 pb-0">
-        <div className="space-y-1">
-          <h2 className="text-foreground text-[1.25rem] leading-tight font-semibold tracking-[-0.01em]">
-            장소 추가하기
-          </h2>
-          <p className="text-muted-foreground text-sm">코스에 추가할 장소를 검색해 주세요</p>
-        </div>
-
-        <div className="mt-5">
-          <PlaceFlowSearchFieldRow
-            id="course-place-add-search"
-            value={keyword}
-            onChange={(next) => {
-              setKeyword(next);
-              setSelectedPlaceId(null);
-            }}
-            placeholder={PLACE_FLOW_COPY.searchPlaceholder}
-            searchButtonLabel={PLACE_FLOW_COPY.searchButton}
-            onSubmitSearch={handleSubmitSearch}
-            searchButtonDisabled={!canSearch}
-          />
-        </div>
-
-        <div className="mt-4 max-h-[min(40dvh,20rem)] overflow-y-auto">
-          {trimmedKeyword ? (
-            <ul className={PROMPT_FLOW_LIST_TOP_BORDER_CLASS}>
-              {availableResults.length === 0 ? (
-                <PlaceFlowSearchEmptyRow
-                  title={hasOnlyDuplicateMatches ? "이미 추가된 장소예요" : undefined}
-                  hint={
-                    hasOnlyDuplicateMatches ? "코스에 없는 다른 장소를 검색해 주세요" : undefined
-                  }
-                />
-              ) : (
-                availableResults.map((place) => (
-                  <EditPlaceResultCard
-                    key={place.id}
-                    place={place}
-                    selected={selectedPlaceId === place.id}
-                    onSelect={() => setSelectedPlaceId(place.id)}
-                  />
-                ))
-              )}
-            </ul>
-          ) : null}
-        </div>
-
-        <div className="mt-6 flex w-full gap-2">
-          <div className="min-w-0 flex-1">
-            <PillButton
-              type="button"
-              variant="outline"
-              onClick={resetAndClose}
-              className="border-border text-muted-foreground hover:bg-muted/50 h-11 min-h-11 rounded-lg text-sm"
-            >
-              취소
-            </PillButton>
-          </div>
-          <div className="min-w-0 flex-1">
-            <PillButton
-              type="button"
-              variant={canConfirm ? "onboarding" : "onboardingMuted"}
-              disabled={!canConfirm}
-              onClick={handleConfirm}
-              className="h-11 min-h-11 rounded-lg text-sm"
-            >
-              확인
-            </PillButton>
-          </div>
-        </div>
+    <div className={cn(FULLSCREEN_FLOW_ROUTE_OUTER_CLASSES, "z-[80]")}>
+      <section className={FULLSCREEN_FLOW_PANEL_CLASSES}>
+        <PlaceSearchMapSheet
+          title="장소 추가하기"
+          subtitle="코스에 추가할 장소를 검색해 주세요."
+          initialMode="search"
+          keyword={keyword}
+          selectedPlaceId={selectedPlaceId}
+          searchResults={searchResults}
+          isSearching={placeCandidatesQuery.isFetching}
+          isSearchError={placeCandidatesQuery.isError && isSubmittedKeywordCurrent}
+          showEmptyResult={submittedTrimmedKeyword.length > 0 && isSubmittedKeywordCurrent}
+          canConfirm={selectedPlace != null}
+          onKeywordChange={(next) => {
+            setKeyword(next);
+            setSelectedPlaceId(null);
+          }}
+          onSubmitSearch={handleSubmitSearch}
+          onSelectPlace={setSelectedPlaceId}
+          onClearSelectedPlace={() => setSelectedPlaceId(null)}
+          onCancel={resetAndClose}
+          onConfirm={handleConfirm}
+        />
       </section>
-    </BottomSheet>,
+    </div>,
     document.body,
   );
 }

src/components/course-planner/CoursePlaceInfoPanel.tsx

@@ -34,18 +34,22 @@ type SaveConfirmKind = "create" | "edit";
 type CoursePlaceInfoPanelProps = {
   courseTitle: string;
   stops: CourseStop[];
+  roomId?: string | null;
   onBack: () => void;
   onSave: (payload: CourseSavePayload) => void;
   /** true면 조회 모드에서 「데이트 코스 저장하기」 버튼을 숨김 — 이미 저장된 코스(마이 페이지 등) */
   hideNewCourseSaveButton?: boolean;
+  className?: string;
 };
 
 export function CoursePlaceInfoPanel({
   courseTitle,
   stops,
+  roomId = null,
   onBack,
   onSave,
   hideNewCourseSaveButton = false,
+  className,
 }: CoursePlaceInfoPanelProps) {
   const openDetail = usePlaceDetailStore((s) => s.openDetail);
 
@@ -135,6 +139,7 @@ export function CoursePlaceInfoPanel({
         hideNewCourseSaveButton && !isEditing
           ? "pb-[max(1.25rem,calc(env(safe-area-inset-bottom)+1rem))]"
           : "pb-0",
+        className,
       )}
     >
       {isEditing ? (
@@ -309,6 +314,7 @@ export function CoursePlaceInfoPanel({
 
       <CoursePlaceAddSheet
         open={isAddPlaceOpen}
+        roomId={roomId}
         excludedPlaceIds={draftStops.map((stop) => stop.placeId)}
         onClose={() => setIsAddPlaceOpen(false)}
         onConfirm={handleAddPlace}

src/components/course-planner/CoursePlannerActions.tsx

@@ -6,15 +6,17 @@ type CoursePlannerActionsProps = {
   canGenerate: boolean;
   onGenerate: () => void;
   onReset: () => void;
+  className?: string;
 };
 
 export function CoursePlannerActions({
   canGenerate,
   onGenerate,
   onReset,
+  className,
 }: CoursePlannerActionsProps) {
   return (
-    <div className="mt-4 flex gap-2">
+    <div className={cn("mt-4 flex gap-2", className)}>
       <button
         type="button"
         onClick={onReset}