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} /> )}