Refactor gitignore and package.json

.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.vscode
+.idea

package.json

@@ -16,6 +16,7 @@
     "react-colorful": "^5.6.1",
     "react-datepicker": "^7.3.0",
     "react-dom": "^18",
+    "react-draggable": "^4.4.6",
     "react-responsive-modal": "^6.4.2",
     "recoil": "^0.7.7"
   },

src/app/draggable/page.jsx

@@ -0,0 +1,23 @@
+'use client'
+
+import { useState } from 'react'
+import WithDraggable from '@/components/common/draggable/withDraggable'
+
+export default function DraggablePage() {
+  const [divIsShow, setDivIsShow] = useState(true)
+
+  return (
+    <>
+      {!divIsShow ? <button onClick={() => setDivIsShow(true)}>show draggable div</button> : ''}
+      {/* WithDraggable 태그로 이동하고 싶은 컴포넌트나 엘리먼트등을 감싸주면 WithDraggable 컴포넌트가 드래그 가능하게 만들어줍니다. */}
+      <WithDraggable isShow={divIsShow}>
+        <div style={{ width: '200px', height: '200px', margin: '5px', padding: '5px', background: '#00ffee' }}>
+          <h1>test draggable div</h1>
+          <div>
+            <button onClick={() => setDivIsShow(false)}>close</button>
+          </div>
+        </div>
+      </WithDraggable>
+    </>
+  )
+}

src/components/common/draggable/withDraggable.jsx

@@ -0,0 +1,22 @@
+'use client'
+
+import { useState } from 'react'
+import Draggable from 'react-draggable'
+
+export default function WithDraggable({ isShow, children }) {
+  const [position, setPosition] = useState({ x: 0, y: 0 })
+
+  const handleOnDrag = (data) => {
+    setPosition({ x: data.x, y: data.y })
+  }
+
+  return (
+    <>
+      {isShow && (
+        <Draggable position={{ x: position.x, y: position.y }} onDrag={(_, data) => handleOnDrag(data)}>
+          {children}
+        </Draggable>
+      )}
+    </>
+  )
+}

yarn.lock

@@ -333,6 +333,11 @@ client-only@0.0.1:
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
   integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
 
+clsx@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 clsx@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
@@ -840,6 +845,14 @@ react-dom@^18:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
+react-draggable@^4.4.6:
+  version "4.4.6"
+  resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.6.tgz#63343ee945770881ca1256a5b6fa5c9f5983fe1e"
+  integrity sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==
+  dependencies:
+    clsx "^1.1.1"
+    prop-types "^15.8.1"
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"