diff --git a/src/components/Loading/FixedLoading.tsx b/src/components/Loading/FixedLoading.tsx
new file mode 100644
index 0000000..a06c605
--- /dev/null
+++ b/src/components/Loading/FixedLoading.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const FixedLoading = () => {
+ return (
+
+
+
+ );
+};
+
+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;
+`;
diff --git a/src/components/PromotionAdmin/Artwork/ArtworkDefault/ArtworkDetail.tsx b/src/components/PromotionAdmin/Artwork/ArtworkDefault/ArtworkDetail.tsx
index 5e5e2e7..ecd3937 100644
--- a/src/components/PromotionAdmin/Artwork/ArtworkDefault/ArtworkDetail.tsx
+++ b/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('');
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 && }
{isModalOpen && (
} isOpen={isModalOpen} />
)}