feat: 데이트 코스짜기 UI 구현

package.json

@@ -14,6 +14,9 @@
     "typecheck": "tsc -b"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@fontsource-variable/noto-sans": "^5.2.10",
     "@fontsource-variable/noto-sans-kr": "^5.2.10",
     "@tanstack/react-query": "^5.96.2",

src/app/router/index.tsx

@@ -30,6 +30,7 @@ export const router = createBrowserRouter([
       { path: "dev/click_place", element: <DevClickPlacePage /> },
       { path: "dev/SelectOption", element: <DevSelectOptionPage /> },
       { path: "login", element: <LoginPage /> },
+      { path: "dev/course", element: <CoursePlannerPage skipRoomGuard /> },
       { path: "app", element: <Navigate to="/" replace /> },
       {
         path: "auth/callback",

src/components/common/BottomNavToast.tsx

@@ -1,19 +1,28 @@
 import { AnimatePresence, motion } from "framer-motion";
 
+import type { BottomNavToastPlacement } from "@/hooks/use-bottom-nav-controller";
+
 export type BottomNavToastProps = {
   message: string;
+  placement?: BottomNavToastPlacement;
 };
 
-export function BottomNavToast({ message }: BottomNavToastProps) {
+export function BottomNavToast({ message, placement = "bottom" }: BottomNavToastProps) {
+  const isTop = placement === "top";
+
   return (
     <AnimatePresence>
       {message ? (
         <motion.div
-          initial={{ opacity: 0, y: 8, scale: 0.96 }}
+          initial={{ opacity: 0, y: isTop ? -8 : 8, scale: 0.96 }}
           animate={{ opacity: 1, y: 0, scale: 1 }}
-          exit={{ opacity: 0, y: 6, scale: 0.97 }}
+          exit={{ opacity: 0, y: isTop ? -6 : 6, scale: 0.97 }}
           transition={{ duration: 0.22, ease: "easeOut" }}
-          className="pointer-events-none fixed inset-x-0 bottom-[calc(env(safe-area-inset-bottom)+7.0rem)] z-[90] flex justify-center px-5"
+          className={
+            isTop
+              ? "pointer-events-none fixed inset-x-0 top-[calc(env(safe-area-inset-top)+0.75rem)] z-[90] flex justify-center px-5"
+              : "pointer-events-none fixed inset-x-0 bottom-[calc(env(safe-area-inset-bottom)+7.0rem)] z-[90] flex justify-center px-5"
+          }
         >
           <p className="bg-foreground/88 text-background rounded-full px-3 py-1.5 text-xs font-medium shadow-lg backdrop-blur-sm">
             {message}