hotfix: 아트워크 수정 로딩 추가

src/components/Loading/FixedLoading.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const FixedLoading = () => {
+  return (
+    <Container>
+      <RotatingCircle />
+    </Container>
+  );
+};
+
+export default FixedLoading;
+
+const Container = styled.div`
+  position: fixed; /* 화면 전체를 차지하도록 설정 */
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999; /* 최상위로 설정 */
+`;
+
+const rotate = keyframes`
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+
+const RotatingCircle = styled.div`
+  width: 50px;
+  height: 50px;
+  border: 6px solid #6e6e6e;
+  border-top: 6px solid #ffa42e; /* Change this color for customization */
+  border-radius: 50%;
+  animation: ${rotate} 1s linear infinite;
+`;

src/components/PromotionAdmin/Artwork/ArtworkDefault/ArtworkDetail.tsx

@@ -13,8 +13,10 @@ import { MSG } from '@/constants/messages';
 import BackDrop from '@/components/Backdrop/Backdrop';
 import ArtworkImgView from './ArtworkImgView';
 import { urlToFile } from '@/utils/urlToFile';
+import FixedLoading from '@/components/Loading/FixedLoading';
 
 const ArtworkDetail = () => {
+  const [isLoading, setIsLoading] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [modalImgSrc, setModalImgSrc] = useState<string>('');
   const [getModeMainImg, setGetModeMainImg] = useState('');
@@ -207,6 +209,7 @@ const ArtworkDetail = () => {
   };
 
   const handleSubmit = async () => {
+    setIsLoading(true);
     const formData = new FormData();
     const requestData = {
       projectId: artworkData?.id,
@@ -242,6 +245,7 @@ const ArtworkDetail = () => {
       const response = await putArtwork(formData);
       if (response.code === 400 && response.data === null && response.message) {
         alert(response.message);
+        setIsLoading(false);
         return;
       }
       alert(MSG.ALERT_MSG.SAVE);
@@ -251,6 +255,8 @@ const ArtworkDetail = () => {
       window.scrollTo({ top: 0, behavior: 'smooth' });
     } catch (error: any) {
       console.log('[artwork updating error]', error);
+    } finally {
+      setIsLoading(false);
     }
   };
 
@@ -312,6 +318,7 @@ const ArtworkDetail = () => {
 
   return (
     <>
+      {isLoading && <FixedLoading />}
       {isModalOpen && (
         <BackDrop children={<ArtworkImgView src={modalImgSrc} closeModal={closeModal} />} isOpen={isModalOpen} />
       )}