fix: popup spinner 심기

src/components/common/draggable/WithDraggable.jsx

@@ -2,9 +2,13 @@
 
 import { useState } from 'react'
 import Draggable from 'react-draggable'
+import PopSpinner from '../spinner/PopSpinner'
+import { popSpinnerState } from '@/store/popupAtom'
+import { useRecoilState } from 'recoil'
 
 export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 }, handle = '', className = '', hasFooter = true, isHidden = false }) {
   const [position, setPosition] = useState(pos)
+  const [popSpinnerStore, setPopSpinnerStore] = useRecoilState(popSpinnerState)
 
   const handleOnDrag = (e, data) => {
     e.stopPropagation()
@@ -25,6 +29,7 @@ export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 },
           <div className={`modal-pop-wrap ${className}`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
             {children}
             {hasFooter && <WithDraggableFooter />}
+            {popSpinnerStore && <PopSpinner />}
           </div>
         </Draggable>
       )}

src/components/footer/PromisePopup.jsx

@@ -0,0 +1,71 @@
+import React, { useEffect } from 'react'
+import { popSpinnerState, promisePopupState } from '@/store/popupAtom'
+import { useRecoilState } from 'recoil'
+import WithDraggable from '../common/draggable/WithDraggable'
+import { useMessage } from '@/hooks/useMessage'
+
+export default function PromisePopup() {
+  const { getMessage } = useMessage()
+  const [promisePopupStore, setPromisePopupStore] = useRecoilState(promisePopupState)
+  const [popSpinnerStore, setPopSpinnerStore] = useRecoilState(popSpinnerState)
+
+  const handleSpinner = () => {
+    setPopSpinnerStore(true)
+    setTimeout(() => {
+      setPopSpinnerStore(false)
+    }, 1000)
+  }
+
+  return (
+    <WithDraggable isShow={promisePopupStore} pos={{ x: 1000, y: 200 }} className="r">
+      <WithDraggable.Header title={'popup promise test'} onClose={() => setPromisePopupStore(false)} />
+
+      <WithDraggable.Body>
+        <div className="img-flex-box">
+          <span className="normal-font mr10">{getMessage('modal.image.load.size.rotate')}</span>
+          <label className="toggle-btn">
+            <input type="checkbox" checked={true} value="1" />
+            <span className="slider"></span>
+          </label>
+        </div>
+        <div className="img-load-from">
+          <div className="img-load-item">
+            <div className="d-check-radio pop">
+              <input type="radio" name="radio03" id="ra06" value={'1'} />
+              <label htmlFor="ra06">{getMessage('common.input.file')}</label>
+            </div>
+            <div className="img-flex-box">
+              <div className="img-edit-wrap">
+                <label className="img-edit-btn" htmlFor="img_file">
+                  <span className="img-edit"></span>
+                  {getMessage('common.load')}
+                </label>
+                <input type="file" id="img_file" style={{ display: 'none' }} />
+              </div>
+              <div className="img-name-wrap">
+                <input type="text" className="input-origin al-l" value={'test'} readOnly />
+              </div>
+            </div>
+          </div>
+          <div className="img-load-item">
+            <div className="d-check-radio pop">
+              <input type="radio" name="radio03" id="ra07" value={'2'} />
+              <label htmlFor="ra07">{getMessage('common.input.address.load')}</label>
+            </div>
+            <div className="img-flex-box for-address">
+              <input type="text" className="input-origin al-l mr10" placeholder={'住所入力'} value={'test'} />
+              <div className="img-edit-wrap">
+                <button className={`img-edit-btn`}>{getMessage('common.finish')}</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="grid-btn-wrap">
+          <button className="btn-frame modal act" onClick={handleSpinner}>
+            {getMessage('common.finish')}
+          </button>
+        </div>
+      </WithDraggable.Body>
+    </WithDraggable>
+  )
+}

src/store/popupAtom.js

@@ -27,3 +27,15 @@ export const contextPopupPositionState = atom({
   },
   dangerouslyAllowMutability: true,
 })
+
+/** 팝업 스피너 상태 */
+export const popSpinnerState = atom({
+  key: 'popSpinnerStore',
+  default: false,
+})
+
+/** 프로미스 팝업 상태 - 테스트용(삭제 예정) */
+export const promisePopupState = atom({
+  key: 'promisePopupStore',
+  default: false,
+})