diff --git a/src/app/router/index.tsx b/src/app/router/index.tsx
index 8750823..eb7c8e3 100644
--- a/src/app/router/index.tsx
+++ b/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 />,
diff --git a/src/components/course-planner/CourseGenerationLoadingPanel.tsx b/src/components/course-planner/CourseGenerationLoadingPanel.tsx
index b866a3e..2373546 100644
--- a/src/components/course-planner/CourseGenerationLoadingPanel.tsx
+++ b/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>
   );
diff --git a/src/components/course-planner/CoursePlaceAddSheet.tsx b/src/components/course-planner/CoursePlaceAddSheet.tsx
index c2d3336..90def9e 100644
--- a/src/components/course-planner/CoursePlaceAddSheet.tsx
+++ b/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,
   );
 }
diff --git a/src/components/course-planner/CoursePlaceInfoPanel.tsx b/src/components/course-planner/CoursePlaceInfoPanel.tsx
index b1136fd..bd2c956 100644
--- a/src/components/course-planner/CoursePlaceInfoPanel.tsx
+++ b/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}
diff --git a/src/components/course-planner/CoursePlannerActions.tsx b/src/components/course-planner/CoursePlannerActions.tsx
index 2b5a78b..d1fbfd0 100644
--- a/src/components/course-planner/CoursePlannerActions.tsx
+++ b/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}
diff --git a/src/components/course-planner/CoursePlannerPanel.tsx b/src/components/course-planner/CoursePlannerPanel.tsx
index ad78c4c..ce4a7eb 100644
--- a/src/components/course-planner/CoursePlannerPanel.tsx
+++ b/src/components/course-planner/CoursePlannerPanel.tsx
@@ -1,61 +1,227 @@
-import { CalendarDays } from "lucide-react";
+import { CalendarDays, Plus, RefreshCcw, Trash2 } 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";
+import { CategoryChipGrid, CategoryChipSkeletonList } from "@/components/map/CategoryChipGrid";
+import { TagChipGroup } from "@/components/map/TagChipGroup";
+import { isDefaultGroup, isEmptyGroup } from "@/features/map/utils/filter-panel-group";
+import { cn } from "@/lib/utils";
+
+export type PlaceTypeId = string;
+
+export type CoursePlannerTag = {
+  code: string;
+  name: string;
+  sortOrder: number;
+};
+
+export type CoursePlannerCategory = {
+  id: PlaceTypeId;
+  label: string;
+  tagGroups: {
+    code: string;
+    name: string | null;
+    sortOrder: number;
+    tags: CoursePlannerTag[];
+  }[];
+  tags: CoursePlannerTag[];
+};
+
+export type CourseCategoryOrder = {
+  id: number;
+  category: PlaceTypeId;
+  tags: string[];
+};
 
 type CoursePlannerPanelProps = {
   regionValue: string;
   dateTimeValue: string;
-  canGenerate: boolean;
-  placeFilterBarProps: MapFilterBarProps;
+  courseOrders: CourseCategoryOrder[];
+  categoryOptions: CoursePlannerCategory[];
+  isCategoryLoading?: boolean;
+  isCategoryError?: boolean;
+  className?: string;
   onOpenRegionSelect: () => void;
   onOpenDateTimeSelect: () => void;
-  onGenerate: () => void;
-  onReset: () => void;
+  onAddOrder: () => void;
+  onRemoveOrder: (orderId: number) => void;
+  onSelectOrderCategory: (orderId: number, placeTypeId: PlaceTypeId) => void;
+  onToggleOrderTag: (orderId: number, tag: string) => void;
+  onRetryLoadCategories?: () => void;
 };
 
 export function CoursePlannerPanel({
   regionValue,
   dateTimeValue,
-  canGenerate,
-  placeFilterBarProps,
+  courseOrders,
+  categoryOptions,
+  isCategoryLoading = false,
+  isCategoryError = false,
+  className,
   onOpenRegionSelect,
   onOpenDateTimeSelect,
-  onGenerate,
-  onReset,
+  onAddOrder,
+  onRemoveOrder,
+  onSelectOrderCategory,
+  onToggleOrderTag,
+  onRetryLoadCategories,
 }: CoursePlannerPanelProps) {
+  const categoryCodes = categoryOptions.map((category) => category.id);
+  const showAddButton = !isCategoryLoading && !(isCategoryError && categoryOptions.length === 0);
+
   return (
-    <section className="bg-background px-6 pt-8 pb-0">
-      <h1 className="text-foreground text-[1.25rem] leading-tight font-semibold tracking-[-0.01em]">
+    <section className={cn("bg-background w-full max-w-full min-w-0 px-6 pt-8 pb-0", className)}>
+      <h1 className="text-foreground text-[1.25rem] leading-tight font-semibold">
         맞춤 데이트 코스 만들기
       </h1>
 
       <div className="mt-6 grid gap-5">
         <CoursePlannerField
-          label="지역"
+          label="지역 설정"
           required
           value={regionValue}
-          placeholder="지역을 선택해주세요."
+          placeholder="지역을 선택해 주세요."
           onClick={onOpenRegionSelect}
         />
 
         <CoursePlannerField
-          label="날짜 및 시간"
+          label="날짜 및 시간 설정"
           value={dateTimeValue}
-          placeholder="날짜 및 시간을 설정해주세요."
+          placeholder="날짜 및 시간을 설정해 주세요."
           icon={<CalendarDays className="size-4" aria-hidden />}
           onClick={onOpenDateTimeSelect}
         />
 
-        <div className="grid gap-2">
-          <span className="text-foreground text-sm font-semibold">장소 유형</span>
-          <CoursePlaceTagSelector {...placeFilterBarProps} />
+        <div className="grid gap-3">
+          <div>
+            <span className="text-foreground text-sm font-semibold">
+              어떤 장소를 넣을까요?
+              <span className="ml-0.5 text-[#f06f6b]">*</span>
+            </span>
+            <p className="text-muted-foreground mt-1 text-xs">
+              코스에 넣고 싶은 장소를 순서대로 골라주세요.
+            </p>
+          </div>
+
+          {isCategoryLoading ? (
+            <CategoryChipSkeletonList
+              keyPrefix="course-category-chip-skeleton"
+              itemClassName="bg-background/85"
+            />
+          ) : isCategoryError && categoryOptions.length === 0 ? (
+            <div className="rounded-lg border border-dashed px-4 py-4">
+              <p className="text-muted-foreground text-sm">카테고리를 불러오지 못했어요.</p>
+              {onRetryLoadCategories ? (
+                <button
+                  type="button"
+                  onClick={onRetryLoadCategories}
+                  className="text-primary mt-3 inline-flex items-center gap-1.5 text-sm font-semibold"
+                >
+                  <RefreshCcw className="size-3.5" aria-hidden />
+                  다시 불러오기
+                </button>
+              ) : null}
+            </div>
+          ) : (
+            <div className="grid gap-3">
+              {courseOrders.map((order, index) => {
+                const selectedCategory = categoryOptions.find((type) => type.id === order.category);
+
+                return (
+                  <div
+                    key={order.id}
+                    className="border-border/55 bg-background/85 rounded-2xl border px-3 py-3.5"
+                  >
+                    <div className="mb-3 flex items-center justify-between gap-3">
+                      <div className="flex min-w-0 items-center gap-2">
+                        <span className="bg-primary text-primary-foreground inline-flex size-6 shrink-0 items-center justify-center rounded-full text-[0.68rem] font-bold">
+                          {index + 1}
+                        </span>
+                        <div className="min-w-0">
+                          <p className="text-foreground truncate text-sm font-semibold">
+                            {index + 1}번째로 갈 장소
+                          </p>
+                          <p className="text-muted-foreground text-xs">
+                            이 순서에 넣을 장소 유형을 골라주세요.
+                          </p>
+                        </div>
+                      </div>
+
+                      {courseOrders.length > 1 ? (
+                        <button
+                          type="button"
+                          onClick={() => onRemoveOrder(order.id)}
+                          className="text-muted-foreground hover:bg-muted/45 focus-visible:ring-ring/50 inline-flex size-7 shrink-0 items-center justify-center rounded-full transition-colors focus-visible:ring-3 focus-visible:outline-none"
+                          aria-label="방문 순서 삭제"
+                        >
+                          <Trash2 className="size-4" aria-hidden />
+                        </button>
+                      ) : null}
+                    </div>
+
+                    <div>
+                      <CategoryChipGrid
+                        categories={categoryCodes}
+                        isLoading={false}
+                        getCategoryLabel={(category) =>
+                          categoryOptions.find((option) => option.id === category)?.label ??
+                          category
+                        }
+                        isHighlighted={(category) => order.category === category}
+                        isPanelFocused={() => false}
+                        getSelectedTagCount={(category) =>
+                          order.category === category ? order.tags.length : 0
+                        }
+                        onToggleCategory={(category) => onSelectOrderCategory(order.id, category)}
+                      />
+                    </div>
+
+                    <div className="border-border/60 mt-3 space-y-3 border-t pt-3">
+                      {selectedCategory && selectedCategory.tagGroups.length > 0 ? (
+                        selectedCategory.tagGroups.map((group) => {
+                          if (isEmptyGroup(group)) {
+                            return null;
+                          }
+
+                          return (
+                            <div key={`${selectedCategory.id}-${group.code}`}>
+                              {!isDefaultGroup(group) ? (
+                                <div className="text-muted-foreground/90 mb-1.5 text-[0.75rem] font-semibold tracking-tight">
+                                  {group.name}
+                                </div>
+                              ) : null}
+                              <TagChipGroup
+                                tags={group.tags}
+                                selectedKeys={order.tags}
+                                onToggleTagKey={(tag) => onToggleOrderTag(order.id, tag)}
+                              />
+                            </div>
+                          );
+                        })
+                      ) : (
+                        <p className="text-muted-foreground text-xs">
+                          선택할 수 있는 세부 태그가 없어요.
+                        </p>
+                      )}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+
+          {showAddButton ? (
+            <button
+              type="button"
+              onClick={onAddOrder}
+              className="border-border bg-background text-muted-foreground hover:bg-muted/35 focus-visible:ring-ring/50 inline-flex h-11 w-full items-center justify-center gap-1.5 rounded-lg border border-dashed text-sm font-semibold transition-colors focus-visible:ring-3 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
+              disabled={categoryOptions.length === 0}
+            >
+              <Plus className="size-4" aria-hidden />
+              방문할 장소 추가하기
+            </button>
+          ) : null}
         </div>
       </div>
-
-      <CoursePlannerActions canGenerate={canGenerate} onGenerate={onGenerate} onReset={onReset} />
     </section>
   );
 }
diff --git a/src/components/course-planner/CourseResultPanel.tsx b/src/components/course-planner/CourseResultPanel.tsx
index bafb9df..f461c19 100644
--- a/src/components/course-planner/CourseResultPanel.tsx
+++ b/src/components/course-planner/CourseResultPanel.tsx
@@ -8,16 +8,18 @@ export type { CourseOption };
 type CourseResultPanelProps = {
   courses: CourseOption[];
   selectedCourseId: string;
+  className?: string;
   onSelectCourse: (courseId: string) => void;
 };
 
 export function CourseResultPanel({
   courses,
   selectedCourseId,
+  className,
   onSelectCourse,
 }: CourseResultPanelProps) {
   return (
-    <section className="bg-background px-6 pt-8 pb-0">
+    <section className={cn("bg-background px-6 pt-8 pb-0", className)}>
       <h1 className="text-foreground text-[1.25rem] leading-tight font-semibold tracking-[-0.01em]">
         맞춤 데이트 코스 확인하기
       </h1>
diff --git a/src/components/course-planner/DateTimeSelectionScreen.tsx b/src/components/course-planner/DateTimeSelectionScreen.tsx
index 5f54c96..f1e9a14 100644
--- a/src/components/course-planner/DateTimeSelectionScreen.tsx
+++ b/src/components/course-planner/DateTimeSelectionScreen.tsx
@@ -14,6 +14,7 @@ type DateTimeSelectionScreenProps = {
   selectedDate: string | null;
   selectedStartTime: string | null;
   selectedEndTime: string | null;
+  className?: string;
   onSelectDate: (date: string) => void;
   onSelectStartTime: (time: string | null) => void;
   onSelectEndTime: (time: string | null) => void;
@@ -31,6 +32,7 @@ export function DateTimeSelectionScreen({
   selectedDate,
   selectedStartTime,
   selectedEndTime,
+  className,
   onSelectDate,
   onSelectStartTime,
   onSelectEndTime,
@@ -61,7 +63,7 @@ export function DateTimeSelectionScreen({
   const headerTitle = step === "date" ? "날짜 선택" : "시간 설정";
 
   return (
-    <section className="bg-background px-6 pt-8 pb-0">
+    <section className={cn("bg-background px-6 pt-8 pb-0", className)}>
       <div className="flex items-center gap-2">
         {step === "time" ? (
           <button
diff --git a/src/components/course-planner/PlaceTypeChip.tsx b/src/components/course-planner/PlaceTypeChip.tsx
new file mode 100644
index 0000000..ba71645
--- /dev/null
+++ b/src/components/course-planner/PlaceTypeChip.tsx
@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+
+import { cn } from "@/lib/utils";
+
+type PlaceTypeChipProps = {
+  label: string;
+  icon: ReactNode;
+  selected?: boolean;
+  selectedStyle?: "accent" | "muted";
+  onClick?: () => void;
+};
+
+export function PlaceTypeChip({
+  label,
+  icon,
+  selected = false,
+  selectedStyle = "accent",
+  onClick,
+}: PlaceTypeChipProps) {
+  const selectedClassName =
+    selectedStyle === "muted"
+      ? "border-[#d9d9d9] bg-[#f1f1f1] text-[#4b5563]"
+      : "border-[#f06f6b] bg-[#fff0ee] text-[#d95f5b]";
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-pressed={selected}
+      className={cn(
+        "focus-visible:ring-ring/50 inline-flex h-8 items-center gap-1.5 rounded-lg border px-3 text-xs font-medium transition-colors focus-visible:ring-3 focus-visible:outline-none",
+        selected
+          ? selectedClassName
+          : "border-[#e5e7eb] bg-white text-[#4b5563] hover:bg-[#fafafa]",
+      )}
+    >
+      <span aria-hidden>{icon}</span>
+      {label}
+    </button>
+  );
+}
diff --git a/src/components/course-planner/RegionSelectionPanel.tsx b/src/components/course-planner/RegionSelectionPanel.tsx
index 6a81db5..b230636 100644
--- a/src/components/course-planner/RegionSelectionPanel.tsx
+++ b/src/components/course-planner/RegionSelectionPanel.tsx
@@ -19,6 +19,7 @@ type RegionSelectionPanelProps = {
   cityErrorMessage?: string | null;
   districtErrorMessage?: string | null;
   searchKeyword?: string;
+  className?: string;
   onSearchKeywordChange?: (keyword: string) => void;
   onSelectCity: (city: string, option?: RegionSelectionOption) => void;
   onSelectDistrict: (district: string, option?: RegionSelectionOption) => void;
@@ -36,6 +37,7 @@ export function RegionSelectionPanel({
   cityErrorMessage = null,
   districtErrorMessage = null,
   searchKeyword,
+  className,
   onSearchKeywordChange,
   onSelectCity,
   onSelectDistrict,
@@ -108,7 +110,7 @@ export function RegionSelectionPanel({
   };
 
   return (
-    <section className="bg-background px-6 pt-8 pb-0">
+    <section className={cn("bg-background px-6 pt-8 pb-0", className)}>
       <div className="flex items-center justify-between">
         <h1 className="text-foreground text-base font-bold">지역설정</h1>
         <button
diff --git a/src/features/course-planner/hooks/use-course-planner-state.ts b/src/features/course-planner/hooks/use-course-planner-state.ts
index ceacb37..853894b 100644
--- a/src/features/course-planner/hooks/use-course-planner-state.ts
+++ b/src/features/course-planner/hooks/use-course-planner-state.ts
@@ -25,6 +25,9 @@ type UseCoursePlannerStateParams = {
   showToast: (message: string, durationMs?: number) => void;
 };
 
+const COURSE_DEFAULT_START_TIME = "13:00";
+const COURSE_DEFAULT_END_TIME = "18:00";
+
 export function useCoursePlannerState({
   courses,
   defaultCourseId,
@@ -39,8 +42,8 @@ export function useCoursePlannerState({
   const [draftDistrict, setDraftDistrict] = useState<string>(COURSE_DEFAULT_REGION.district);
   const [dateTimeValue, setDateTimeValue] = useState<DateTimeSelection | null>(null);
   const [draftDate, setDraftDate] = useState<string | null>(null);
-  const [draftStartTime, setDraftStartTime] = useState<string | null>(null);
-  const [draftEndTime, setDraftEndTime] = useState<string | null>(null);
+  const [draftStartTime, setDraftStartTime] = useState<string | null>(COURSE_DEFAULT_START_TIME);
+  const [draftEndTime, setDraftEndTime] = useState<string | null>(COURSE_DEFAULT_END_TIME);
   const [selectedCourseId, setSelectedCourseId] = useState("");
   const [courseTitle, setCourseTitle] = useState(courses[0]?.title ?? COURSE_FALLBACK_TITLE);
   const [courseStops, setCourseStops] = useState<CourseStop[]>(() =>
@@ -79,6 +82,8 @@ export function useCoursePlannerState({
 
   const handleOpenDateTimeSelect = useCallback(() => {
     closeTagPanel();
+    setDraftStartTime((current) => current ?? COURSE_DEFAULT_START_TIME);
+    setDraftEndTime((current) => current ?? COURSE_DEFAULT_END_TIME);
     setMode("datetime");
   }, [closeTagPanel]);
 
@@ -120,8 +125,8 @@ export function useCoursePlannerState({
     setDraftDistrict(COURSE_DEFAULT_REGION.district);
     setDateTimeValue(null);
     setDraftDate(null);
-    setDraftStartTime(null);
-    setDraftEndTime(null);
+    setDraftStartTime(COURSE_DEFAULT_START_TIME);
+    setDraftEndTime(COURSE_DEFAULT_END_TIME);
     resetCategorySelection();
     setSelectedCourseId("");
     setCourseTitle(courses[0]?.title ?? COURSE_FALLBACK_TITLE);
diff --git a/src/pages/tabs/CoursePlannerPage.tsx b/src/pages/tabs/CoursePlannerPage.tsx
index 1088a77..f5ad9cc 100644
--- a/src/pages/tabs/CoursePlannerPage.tsx
+++ b/src/pages/tabs/CoursePlannerPage.tsx
@@ -1,20 +1,27 @@
-import { useCallback, useMemo, useState } from "react";
-import { Navigate, useNavigate } from "react-router-dom";
+import { lazy, Suspense, useCallback, useMemo, useState } from "react";
+import { Navigate } from "react-router-dom";
 
+import { BottomNavigationBar } from "@/components/common/BottomNavigationBar";
 import { BottomNavToast } from "@/components/common/BottomNavToast";
+import { MapBackdropLayer } from "@/components/common/MapBackdropLayer";
 import { CourseGenerationLoadingPanel } from "@/components/course-planner/CourseGenerationLoadingPanel";
 import { CoursePlaceInfoPanel } from "@/components/course-planner/CoursePlaceInfoPanel";
+import { CoursePlannerActions } from "@/components/course-planner/CoursePlannerActions";
 import { CoursePlannerBottomSheet } from "@/components/course-planner/CoursePlannerBottomSheet";
-import { CoursePlannerPanel } from "@/components/course-planner/CoursePlannerPanel";
+import {
+  type CourseCategoryOrder,
+  type CoursePlannerCategory,
+  CoursePlannerPanel,
+  type PlaceTypeId,
+} from "@/components/course-planner/CoursePlannerPanel";
 import { CourseResultPanel } from "@/components/course-planner/CourseResultPanel";
 import { DateTimeSelectionScreen } from "@/components/course-planner/DateTimeSelectionScreen";
 import { RegionSelectionPanel } from "@/components/course-planner/RegionSelectionPanel";
+import { weightedMapCenter } from "@/components/mypage/map-places-from-my-saved";
 import { PlaceDetailSheet } from "@/components/place/PlaceDetailSheet";
-import { CourseDevMapBackground } from "@/features/course-planner/components/CourseDevMapBackground";
 import { COURSE_LOADING_ROOM_FALLBACK } from "@/features/course-planner/constants";
 import { useCoursePlannerCourses } from "@/features/course-planner/hooks/use-course-planner-courses";
 import { useCoursePlannerState } from "@/features/course-planner/hooks/use-course-planner-state";
-import { useMapSearchFilters } from "@/features/map/hooks/use-map-search-filters";
 import { usePlaceFilterViewModel } from "@/features/map/hooks/use-place-filter-view-model";
 import {
   REGION_ALL_CODE,
@@ -25,52 +32,40 @@ import {
   useSigungusQuery,
 } from "@/features/regions";
 import { useBottomNavController } from "@/hooks/use-bottom-nav-controller";
-import MapHomeWithDetail from "@/pages/map/MapHomeWithDetail";
 import { APP_ROUTES } from "@/shared/config/routes";
-import { SAVED_PLACE_MOCKS } from "@/shared/mocks/place-mocks";
-import { MAP_ALL_CATEGORY_FILTER_CHIP } from "@/shared/types/map-home";
+import { MAP_INITIAL_CENTER, SAVED_PLACE_BY_ID } from "@/shared/mocks/place-mocks";
 import { useRoomSelectionStore } from "@/store/room-selection-store";
 
 type CoursePlannerPageProps = {
   skipRoomGuard?: boolean;
 };
 
+const KAKAO_MAP_APP_KEY = import.meta.env.VITE_KAKAO_MAP_APP_KEY;
+const KakaoMapView = lazy(() =>
+  import("@/components/map/KakaoMapView").then((module) => ({ default: module.KakaoMapView })),
+);
+
+function createOrder(category: PlaceTypeId): CourseCategoryOrder {
+  return {
+    id: Date.now() + Math.floor(Math.random() * 1000),
+    category,
+    tags: [],
+  };
+}
+
 export default function CoursePlannerPage({ skipRoomGuard = false }: CoursePlannerPageProps) {
-  const navigate = useNavigate();
   const selectedRoom = useRoomSelectionStore((s) => s.selectedRoom);
   const { toastMessage, toastPlacement, handleSelectBottomNav, showToast } =
     useBottomNavController();
   const { courses, defaultCourseId, getCourseStops } = useCoursePlannerCourses();
-  const [regionSearchKeyword, setRegionSearchKeyword] = useState("");
-
   const {
     filterCategories,
-    categories,
-    categoryNameByCode,
     isCategoryLoading,
     isCategoryError,
-    retryLoad,
+    retryLoad: retryLoadCategories,
   } = usePlaceFilterViewModel();
-
-  const {
-    activeCategories,
-    focusedCategory,
-    toggleCategory,
-    closeTagPanel,
-    isTagPanelOpen,
-    selectedTagKeysByCategory,
-    selectedTagCountByCategory,
-    toggleTagInCategory,
-    resetFocusedCategoryTags,
-  } = useMapSearchFilters({
-    places: SAVED_PLACE_MOCKS,
-    filterCategories,
-    initialFocusedCategory: "놀거리",
-  });
-
-  const resetCategorySelection = useCallback(() => {
-    toggleCategory(MAP_ALL_CATEGORY_FILTER_CHIP);
-  }, [toggleCategory]);
+  const [regionSearchKeyword, setRegionSearchKeyword] = useState("");
+  const [courseOrders, setCourseOrders] = useState<CourseCategoryOrder[]>([]);
 
   const {
     mode,
@@ -84,7 +79,7 @@ export default function CoursePlannerPage({ skipRoomGuard = false }: CoursePlann
     courseTitle,
     courseStops,
     dateTimeDisplayValue,
-    canGenerate,
+    canGenerate: canGenerateByRegion,
     setMode,
     setDraftDistrict,
     setDraftDate,
@@ -95,8 +90,8 @@ export default function CoursePlannerPage({ skipRoomGuard = false }: CoursePlann
     handleConfirmDateTime,
     handleSelectCity,
     handleConfirmRegion,
-    handleResetPlanner,
-    handleGenerateCourse,
+    handleResetPlanner: resetPlannerBase,
+    handleGenerateCourse: generateCourseBase,
     handleSelectCourse,
     handleBackToCourseResults,
     handleSaveCourse,
@@ -104,10 +99,11 @@ export default function CoursePlannerPage({ skipRoomGuard = false }: CoursePlann
     courses,
     defaultCourseId,
     getCourseStops,
-    closeTagPanel,
-    resetCategorySelection,
+    closeTagPanel: () => undefined,
+    resetCategorySelection: () => undefined,
     showToast,
   });
+
   const sidosQuery = useSidosQuery();
   const sidoOptions = sidosQuery.data?.length ? sidosQuery.data : [REGION_ALL_OPTION];
   const searchableSidoOptions = useMemo(
@@ -163,6 +159,40 @@ export default function CoursePlannerPage({ skipRoomGuard = false }: CoursePlann
     isRegionSearching &&
     allSigungusQueries.length > 0 &&
     allSigungusQueries.every((query) => query.isError);
+  const categoryOptions = useMemo<CoursePlannerCategory[]>(() => {
+    return filterCategories
+      .filter((category) => {
+        const code = category.code.trim().toLocaleLowerCase("ko-KR");
+        const name = category.name.trim();
+        return code !== "all" && name !== "전체";
+      })
+      .map((category) => {
+        const tagGroups = category.tagGroups
+          .slice()
+          .sort((a, b) => a.sortOrder - b.sortOrder)
+          .map((group) => ({
+            code: group.code,
+            name: group.name,
+            sortOrder: group.sortOrder,
+            tags: group.tags
+              .slice()
+              .sort((a, b) => a.sortOrder - b.sortOrder)
+              .map((tag) => ({
+                code: tag.code,
+                name: tag.name,
+                sortOrder: tag.sortOrder,
+              })),
+          }));
+        const tags = tagGroups.flatMap((group) => group.tags);
+
+        return {
+          id: category.code,
+          label: category.name,
+          tagGroups,
+          tags,
+        };
+      });
+  }, [filterCategories]);
 
   const handleSelectRegionCity = useCallback(
     (city: string, option?: RegionSelectionOption) => {
@@ -194,49 +224,116 @@ export default function CoursePlannerPage({ skipRoomGuard = false }: CoursePlann
     handleConfirmRegion();
   }, [handleConfirmRegion]);
 
-  const handleRetryLoadCategories = useCallback(() => {
-    void retryLoad();
-  }, [retryLoad]);
-
-  const handleDismissCourse = useCallback(() => {
-    navigate(APP_ROUTES.map);
-  }, [navigate]);
-
-  const placeFilterBarProps = useMemo(
-    () => ({
-      categories,
-      categoryNameByCode,
-      filterCategories,
-      isCategoryLoading,
-      isCategoryError,
-      onRetryLoadCategories: handleRetryLoadCategories,
-      activeCategories,
-      focusedCategory,
-      onToggleCategory: toggleCategory,
-      isTagPanelOpen,
-      selectedTagKeysByCategory,
-      selectedTagCountByCategory,
-      onToggleTagInCategory: toggleTagInCategory,
-      onResetFocusedCategoryTags: resetFocusedCategoryTags,
-      onCloseTagPanel: closeTagPanel,
-    }),
-    [
-      activeCategories,
-      categories,
-      categoryNameByCode,
-      closeTagPanel,
-      filterCategories,
-      focusedCategory,
-      handleRetryLoadCategories,
-      isCategoryError,
-      isCategoryLoading,
-      isTagPanelOpen,
-      resetFocusedCategoryTags,
-      selectedTagCountByCategory,
-      selectedTagKeysByCategory,
-      toggleCategory,
-      toggleTagInCategory,
-    ],
+  const handleAddOrder = useCallback(() => {
+    const defaultCategory = categoryOptions[0]?.id;
+    if (!defaultCategory) {
+      return;
+    }
+
+    setCourseOrders((current) =>
+      current.length > 0
+        ? [...current, createOrder(defaultCategory)]
+        : [createOrder(defaultCategory), createOrder(defaultCategory)],
+    );
+  }, [categoryOptions]);
+
+  const handleRemoveOrder = useCallback((orderId: number) => {
+    setCourseOrders((current) => current.filter((order) => order.id !== orderId));
+  }, []);
+
+  const handleSelectOrderCategory = useCallback((orderId: number, placeTypeId: PlaceTypeId) => {
+    setCourseOrders((current) =>
+      current.some((order) => order.id === orderId)
+        ? current.map((order) =>
+            order.id === orderId
+              ? {
+                  ...order,
+                  category: placeTypeId,
+                  tags: [],
+                }
+              : order,
+          )
+        : [createOrder(placeTypeId)],
+    );
+  }, []);
+
+  const handleToggleOrderTag = useCallback(
+    (orderId: number, tag: string) => {
+      setCourseOrders((current) =>
+        current.some((order) => order.id === orderId)
+          ? current.map((order) => {
+              if (order.id !== orderId) {
+                return order;
+              }
+
+              const selectedCategory = categoryOptions.find(
+                (category) => category.id === order.category,
+              );
+              const allTagCode = selectedCategory?.tags.find((item) => item.code === "ALL")?.code;
+              const hasTag = order.tags.includes(tag);
+              const tagsWithoutAll = allTagCode
+                ? order.tags.filter((item) => item !== allTagCode)
+                : order.tags;
+
+              return {
+                ...order,
+                tags:
+                  allTagCode && tag === allTagCode
+                    ? hasTag
+                      ? []
+                      : [allTagCode]
+                    : hasTag
+                      ? tagsWithoutAll.filter((item) => item !== tag)
+                      : [...tagsWithoutAll, tag],
+              };
+            })
+          : categoryOptions[0]?.id
+            ? [{ ...createOrder(categoryOptions[0].id), tags: [tag] }]
+            : current,
+      );
+    },
+    [categoryOptions],
+  );
+
+  const handleResetPlanner = useCallback(() => {
+    setCourseOrders([]);
+    resetPlannerBase();
+  }, [resetPlannerBase]);
+
+  const canGenerate =
+    canGenerateByRegion &&
+    courseOrders.length > 0 &&
+    courseOrders.every((order) => order.tags.length > 0);
+
+  const handleGenerateCourse = useCallback(() => {
+    if (!canGenerate) {
+      return;
+    }
+    generateCourseBase();
+  }, [canGenerate, generateCourseBase]);
+
+  const displayedCourseOrders = useMemo(() => {
+    const defaultCategory = categoryOptions[0]?.id;
+    if (courseOrders.length > 0 || !defaultCategory) {
+      return courseOrders;
+    }
+
+    return [{ ...createOrder(defaultCategory), id: -1 }];
+  }, [categoryOptions, courseOrders]);
+
+  const selectedCourseMapPins = useMemo(
+    () =>
+      courseStops
+        .map((stop) => SAVED_PLACE_BY_ID.get(stop.placeId))
+        .filter((place) => place != null),
+    [courseStops],
+  );
+  const selectedCourseMapCenter = useMemo(
+    () =>
+      selectedCourseMapPins.length > 0
+        ? weightedMapCenter(selectedCourseMapPins)
+        : MAP_INITIAL_CENTER,
+    [selectedCourseMapPins],
   );
 
   if (!skipRoomGuard && !selectedRoom) {
@@ -244,95 +341,131 @@ export default function CoursePlannerPage({ skipRoomGuard = false }: CoursePlann
   }
 
   return (
-    <>
-      {selectedRoom ? (
-        <MapHomeWithDetail />
-      ) : (
-        <CourseDevMapBackground onSelectBottomNav={handleSelectBottomNav} />
-      )}
-
-      <BottomNavToast message={toastMessage} placement={toastPlacement} />
-
-      {skipRoomGuard && !selectedRoom ? <PlaceDetailSheet /> : null}
-
-      <CoursePlannerBottomSheet open onClose={handleDismissCourse}>
-        {mode === "region" ? (
-          <RegionSelectionPanel
-            selectedCity={draftCity}
-            selectedDistrict={draftDistrict}
-            cityOptions={sidoOptions}
-            districtOptions={sigunguOptions}
-            isCityLoading={sidosQuery.isLoading}
-            isDistrictLoading={
-              isAllSigunguSearchLoading ||
-              (!isRegionSearching && Boolean(draftSidoOption) && sigungusQuery.isLoading)
-            }
-            cityErrorMessage={sidosQuery.isError ? "지역 정보를 불러오지 못했어요." : null}
-            districtErrorMessage={
-              isAllSigunguSearchError
-                ? "시/군/구 정보를 확인할 수 없어요."
-                : !isRegionSearching && draftSidoOption && sigungusQuery.isError
-                  ? "시/군/구 정보를 확인할 수 없어요."
-                  : null
-            }
-            searchKeyword={regionSearchKeyword}
-            onSearchKeywordChange={setRegionSearchKeyword}
-            onSelectCity={handleSelectRegionCity}
-            onSelectDistrict={handleSelectRegionDistrict}
-            onClose={handleCloseRegionPanel}
-            onConfirm={handleConfirmCourseRegion}
-          />
-        ) : null}
-
-        {mode === "datetime" ? (
-          <DateTimeSelectionScreen
-            selectedDate={draftDate}
-            selectedStartTime={draftStartTime}
-            selectedEndTime={draftEndTime}
-            onSelectDate={setDraftDate}
-            onSelectStartTime={setDraftStartTime}
-            onSelectEndTime={setDraftEndTime}
-            onClose={handleCloseDateTimeScreen}
-            onConfirm={handleConfirmDateTime}
-          />
-        ) : null}
-
-        {mode === "form" ? (
-          <CoursePlannerPanel
-            regionValue={regionValue}
-            dateTimeValue={dateTimeDisplayValue}
-            canGenerate={canGenerate}
-            placeFilterBarProps={placeFilterBarProps}
-            onOpenRegionSelect={() => setMode("region")}
-            onOpenDateTimeSelect={handleOpenDateTimeSelect}
-            onGenerate={handleGenerateCourse}
-            onReset={handleResetPlanner}
-          />
-        ) : null}
-
-        {mode === "loading" ? (
-          <CourseGenerationLoadingPanel
-            roomName={selectedRoom?.name ?? COURSE_LOADING_ROOM_FALLBACK}
-          />
-        ) : null}
-
-        {mode === "result" ? (
-          <CourseResultPanel
-            courses={courses}
-            selectedCourseId={selectedCourseId}
-            onSelectCourse={handleSelectCourse}
-          />
-        ) : null}
-
-        {mode === "detail" ? (
-          <CoursePlaceInfoPanel
-            courseTitle={courseTitle}
-            stops={courseStops}
-            onBack={handleBackToCourseResults}
-            onSave={handleSaveCourse}
-          />
-        ) : null}
+    <div className="room-no-caret -m-page bg-background relative flex min-h-0 flex-1 flex-col overflow-hidden">
+      {mode === "detail" ? (
+        <MapBackdropLayer>
+          <Suspense fallback={<div className="bg-muted h-full w-full" aria-hidden />}>
+            <KakaoMapView
+              appKey={KAKAO_MAP_APP_KEY}
+              places={selectedCourseMapPins}
+              center={selectedCourseMapCenter}
+              fitBoundsPlaces={selectedCourseMapPins}
+              viewportKey={`course-detail-${selectedCourseId ?? "default"}`}
+              className="h-full w-full"
+            />
+          </Suspense>
+        </MapBackdropLayer>
+      ) : null}
+
+      <main className="scrollbar-hide flex min-h-0 flex-1 flex-col overflow-y-auto pb-[max(7rem,calc(env(safe-area-inset-bottom)+7rem))]">
+        <div className="flex min-h-0 w-full max-w-full min-w-0 flex-1 flex-col">
+          {mode === "form" || mode === "region" || mode === "datetime" ? (
+            <>
+              <CoursePlannerPanel
+                regionValue={regionValue}
+                dateTimeValue={dateTimeDisplayValue}
+                courseOrders={displayedCourseOrders}
+                categoryOptions={categoryOptions}
+                isCategoryLoading={isCategoryLoading}
+                isCategoryError={isCategoryError}
+                className="pt-16 pb-0"
+                onOpenRegionSelect={() => setMode("region")}
+                onOpenDateTimeSelect={handleOpenDateTimeSelect}
+                onAddOrder={handleAddOrder}
+                onRemoveOrder={handleRemoveOrder}
+                onSelectOrderCategory={handleSelectOrderCategory}
+                onToggleOrderTag={handleToggleOrderTag}
+                onRetryLoadCategories={() => {
+                  void retryLoadCategories();
+                }}
+              />
+
+              <div className="bg-background px-6 pt-6 pb-[max(5rem,calc(env(safe-area-inset-bottom)+5rem))]">
+                <CoursePlannerActions
+                  canGenerate={canGenerate}
+                  onGenerate={handleGenerateCourse}
+                  onReset={handleResetPlanner}
+                  className="mt-0"
+                />
+              </div>
+            </>
+          ) : null}
+
+          {mode === "loading" ? (
+            <CourseGenerationLoadingPanel
+              roomName={selectedRoom?.name ?? COURSE_LOADING_ROOM_FALLBACK}
+              className="pt-16 pb-8"
+            />
+          ) : null}
+
+          {mode === "result" ? (
+            <CourseResultPanel
+              courses={courses}
+              selectedCourseId={selectedCourseId}
+              onSelectCourse={handleSelectCourse}
+              className="pt-16 pb-8"
+            />
+          ) : null}
+        </div>
+      </main>
+
+      <div className="pointer-events-none absolute inset-x-0 bottom-0 z-30 *:pointer-events-auto">
+        <BottomNavToast message={toastMessage} placement={toastPlacement} />
+        <BottomNavigationBar activeId="course" onSelect={handleSelectBottomNav} />
+      </div>
+
+      <CoursePlannerBottomSheet open={mode === "region"} onClose={handleCloseRegionPanel}>
+        <RegionSelectionPanel
+          selectedCity={draftCity}
+          selectedDistrict={draftDistrict}
+          cityOptions={sidoOptions}
+          districtOptions={sigunguOptions}
+          isCityLoading={sidosQuery.isLoading}
+          isDistrictLoading={
+            isAllSigunguSearchLoading ||
+            (!isRegionSearching && Boolean(draftSidoOption) && sigungusQuery.isLoading)
+          }
+          cityErrorMessage={sidosQuery.isError ? "지역 정보를 불러오지 못했어요." : null}
+          districtErrorMessage={
+            isAllSigunguSearchError
+              ? "시군구 정보를 확인할 수 없어요."
+              : !isRegionSearching && draftSidoOption && sigungusQuery.isError
+                ? "시군구 정보를 확인할 수 없어요."
+                : null
+          }
+          searchKeyword={regionSearchKeyword}
+          onSearchKeywordChange={setRegionSearchKeyword}
+          onSelectCity={handleSelectRegionCity}
+          onSelectDistrict={handleSelectRegionDistrict}
+          onClose={handleCloseRegionPanel}
+          onConfirm={handleConfirmCourseRegion}
+        />
       </CoursePlannerBottomSheet>
-    </>
+
+      <CoursePlannerBottomSheet open={mode === "datetime"} onClose={handleCloseDateTimeScreen}>
+        <DateTimeSelectionScreen
+          selectedDate={draftDate}
+          selectedStartTime={draftStartTime}
+          selectedEndTime={draftEndTime}
+          onSelectDate={setDraftDate}
+          onSelectStartTime={setDraftStartTime}
+          onSelectEndTime={setDraftEndTime}
+          onClose={handleCloseDateTimeScreen}
+          onConfirm={handleConfirmDateTime}
+        />
+      </CoursePlannerBottomSheet>
+
+      <CoursePlannerBottomSheet open={mode === "detail"} onClose={handleBackToCourseResults}>
+        <CoursePlaceInfoPanel
+          courseTitle={courseTitle}
+          stops={courseStops}
+          roomId={selectedRoom?.id}
+          onBack={handleBackToCourseResults}
+          onSave={handleSaveCourse}
+        />
+      </CoursePlannerBottomSheet>
+
+      <PlaceDetailSheet roomId={selectedRoom?.id} />
+    </div>
   );
 }