[기능] 코스 생성 페이지 드래그앤드롭 기능 추가 및 장소 검색 ui 추가

package.json

@@ -9,15 +9,16 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
     "next": "^14.2.18",
     "react": "^18.2.0",
-    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
-    "@types/react-beautiful-dnd": "^13.1.8",
     "@types/react-dom": "^18",
     "antd": "^5.21.6",
     "eslint": "^8",

src/app/courses/new/components/NewPlaceReview.tsx

@@ -0,0 +1,3 @@
+export default function NewPlaceReview() {
+  return null
+}

src/app/courses/new/components/SearchPlace.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react'
+import { Input, Space } from 'antd'
+
+export default function SearchPlace() {
+  const [results, setResults] = useState([
+    { id: 10, name: '김밥천국' },
+    { id: 11, name: '신김밥천국' },
+    { id: 12, name: '김밥의 민족' },
+    { id: 13, name: '김밥천국 압구정점' },
+    { id: 14, name: '김밥천국 삼성점' },
+    { id: 15, name: '김밥천국 수서점' },
+    { id: 16, name: '김밥의 민족' },
+    { id: 17, name: '푸트카페김밥천국 역삼역점' },
+    { id: 18, name: '푸트카페김밥천국 신사점' },
+    { id: 19, name: '김밥천국 포이점' },
+    { id: 20, name: '김밥천국 개포점' },
+  ])
+
+  return (
+    <div className='max-w-[375px] w-full m-auto'>
+      <div className='flex flex-col gap-[10px]'>
+        <span className='text-[15px] font-semibold'>장소명</span>
+        <Input.Search
+          placeholder='장소 이름을 입력해주세요.'
+          className='w-full'
+        />
+      </div>
+      <div className='w-full mt-[20px] mb-[20px] h-[2px] bg-gray-100' />
+      <div className='flex flex-col gap-[10px] justify-center items-center'>
+        {results.map((result) => {
+          return (
+            <span
+              key={result.id}
+              className='text-[12px] border-blue-100 rounded-[5px] border-[1px] w-full h-[40px] px-[16px] flex items-center justify-items-start'
+            >
+              {result.name}
+            </span>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

src/app/courses/new/components/SortableItem.tsx

@@ -0,0 +1,49 @@
+import { Button } from 'antd'
+import { useSortable } from '@dnd-kit/sortable'
+import { CSS } from '@dnd-kit/utilities'
+import dragIcon from '@images/drag_icon.png'
+import Image from 'next/image'
+
+export default function SortableItem({ id, place, onEdit, onDelete }: any) {
+  const { attributes, listeners, setNodeRef, transform, transition } =
+    useSortable({ id })
+
+  return (
+    <div
+      style={{
+        transform: CSS.Transform.toString(transform),
+        transition,
+        touchAction: 'none',
+      }}
+      className='flex items-center justify-between gap-[10px] h-[40px] px-[10px] py-[10px] border text-[15px] rounded-[5px] bg-white'
+    >
+      <div className='flex items-center gap-[10px]'>
+        <Image
+          {...attributes}
+          {...listeners}
+          ref={setNodeRef}
+          src={dragIcon}
+          width={20}
+          height={15}
+          className='w-[20px] h-[15px]'
+          alt='드래그'
+        />
+        <span className='text-[13px]'>{place.name}</span>
+      </div>
+      <div className='flex gap-[5px]'>
+        <Button
+          className='text-[10px] border-0 h-[20px] w-[20px]'
+          onClick={() => onEdit(place.id)}
+        >
+          수정
+        </Button>
+        <Button
+          className='text-[10px] shadow-none border-0 h-[20px] w-[30px]'
+          onClick={() => onDelete(place.id)}
+        >
+          X
+        </Button>
+      </div>
+    </div>
+  )
+}

src/app/courses/new/page.tsx

@@ -1,12 +1,15 @@
 'use client'
 
 import { useState } from 'react'
-import { Input, Button, Drawer, Radio, Space } from 'antd'
-import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'
-import PlaceListComponent from './components/PlaceListComponent'
-import type { DrawerProps, RadioChangeEvent } from 'antd'
-import dragIcon from '@images/drag_icon.png'
-import Image from 'next/image'
+import { Input, Drawer } from 'antd'
+import { DndContext, closestCenter } from '@dnd-kit/core'
+import {
+  SortableContext,
+  arrayMove,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable'
+import SortableItem from './components/SortableItem'
+import SearchPlace from './components/SearchPlace'
 
 export default function Page() {
   const [clickedCategory, setClickedCategory] = useState<number[]>([])
@@ -16,7 +19,6 @@ export default function Page() {
     { id: 3, name: '미도인 강남' },
     { id: 4, name: '정돈 강남점' },
   ])
-
   const [open, setOpen] = useState(false)
 
   const showDrawer = () => {
@@ -27,39 +29,45 @@ export default function Page() {
     setOpen(false)
   }
 
-  const categories = [
-    { id: 1, value: '맛집' },
-    { id: 2, value: '액티비티' },
-    { id: 3, value: 'SNS 핫플' },
-    { id: 4, value: '문화/예술' },
-    { id: 5, value: '기타' },
-  ]
-
   const handleCategoryClick = (id: number) => {
-    setClickedCategory((prev) => {
-      if (prev.includes(id)) {
-        return prev.filter((categoryId) => categoryId !== id)
-      } else {
-        return [...prev, id]
-      }
-    })
+    setClickedCategory((prev) =>
+      prev.includes(id)
+        ? prev.filter((categoryId) => categoryId !== id)
+        : [...prev, id]
+    )
   }
 
-  const handleOnDragEnd = (result: any) => {
-    const { source, destination } = result
+  const handleDragEnd = (event: any) => {
+    const { active, over } = event
 
-    if (!destination) return
+    if (active.id !== over.id) {
+      setPlaces((items) => {
+        const oldIndex = items.findIndex((item) => item.id === active.id)
+        const newIndex = items.findIndex((item) => item.id === over.id)
+        return arrayMove(items, oldIndex, newIndex)
+      })
+    }
+  }
 
-    const reorderedPlaces = Array.from(places)
-    const [removed] = reorderedPlaces.splice(source.index, 1)
-    reorderedPlaces.splice(destination.index, 0, removed)
+  const handleDelete = (id: number) => {
+    setPlaces((prev) => prev.filter((place) => place.id !== id))
+  }
 
-    setPlaces(reorderedPlaces)
+  const handleEdit = (id: number) => {
+    alert(`${id}번 장소를 수정합니다.`)
   }
 
+  const categories = [
+    { id: 1, value: '맛집' },
+    { id: 2, value: '액티비티' },
+    { id: 3, value: 'SNS 핫플' },
+    { id: 4, value: '문화/예술' },
+    { id: 5, value: '기타' },
+  ]
+
   return (
     <div className='pt-[20px] pb-[32px] px-[16px] w-full flex flex-col justify-between'>
-      <div className='w-full  flex flex-col items-end'>
+      <div className='w-full flex flex-col items-end'>
         <p className='m-auto border-b font-semibold text-[18px]'>코스 작성</p>
         <div className='w-full mt-[20px] flex flex-col gap-[5px]'>
           <span className='text-[15px]'>코스 이름</span>
@@ -90,63 +98,45 @@ export default function Page() {
         <div className='w-full mt-[20px] mb-[20px] h-[2px] bg-gray-100' />
         <div className='w-full flex flex-col gap-[10px]'>
           <span className='text-[15px]'>코스 내 장소 정보</span>
-          <div className='flex flex-col gap-[10px]'>
-            <DragDropContext onDragEnd={handleOnDragEnd}>
-              <Droppable droppableId='droppable'>
-                {(provided) => (
-                  <div
-                    {...provided.droppableProps}
-                    ref={provided.innerRef}
-                    className='flex flex-col gap-[10px]'
-                  >
-                    {places.map((place, index) => (
-                      <Draggable
-                        draggableId={`${place.id}`}
-                        key={`${index}`}
-                        index={place.id}
-                      >
-                        {(provided) => (
-                          <div
-                            ref={provided.innerRef}
-                            {...provided.draggableProps}
-                            {...provided.dragHandleProps}
-                            className='flex items-center gap-[10px] h-[40px] px-[10px] py-[10px] border text-[15px] rounded-[5px] bg-white'
-                          >
-                            <Image
-                              src={dragIcon}
-                              width={20}
-                              height={15}
-                              className='w-[20px] h-[15px]'
-                              alt='드래그'
-                            />
-                            <span className='text-[13px]'>{place.name}</span>
-                          </div>
-                        )}
-                      </Draggable>
-                    ))}
-                    {provided.placeholder}
-                  </div>
-                )}
-              </Droppable>
-            </DragDropContext>
-            <button
-              onClick={showDrawer}
-              className='w-full h-[40px] text-[15px] rounded-[5px] border border-blue-100 flex items-center justify-center'
+          <DndContext
+            collisionDetection={closestCenter}
+            onDragEnd={handleDragEnd}
+          >
+            <SortableContext
+              items={places}
+              strategy={verticalListSortingStrategy}
             >
-              +
-            </button>
-            <Drawer
-              title='추가할 장소 검색'
-              size={'large'}
-              placement={'bottom'}
-              className='w-[375px] rounded-[10px]'
-              onClose={onClose}
-              open={open}
-            ></Drawer>
-          </div>
+              {places.map((place) => (
+                <SortableItem
+                  key={place.id}
+                  id={place.id}
+                  place={place}
+                  onEdit={handleEdit}
+                  onDelete={handleDelete}
+                />
+              ))}
+            </SortableContext>
+          </DndContext>
+          <button
+            onClick={showDrawer}
+            className='w-full h-[40px] text-[15px] rounded-[5px] border border-blue-100 flex items-center justify-center'
+          >
+            +
+          </button>
+          <Drawer
+            title='장소 검색'
+            height={600}
+            placement={'bottom'}
+            className='w-full rounded-[10px]'
+            onClose={onClose}
+            open={open}
+            mask={true}
+          >
+            <SearchPlace />
+          </Drawer>
         </div>
       </div>
-      <button className='w-full rounded-[5px] mt-[30px] text-[12px] h-[40px] flex items-center justify-center bg-blue-100'>
+      <button className='w-full rounded-[5px] mt-[40px] text-[12px] h-[40px] flex items-center justify-center bg-blue-100'>
         완료
       </button>
     </div>