[Refactor] RollingPaperItemPage 로딩 시 SkeletonUI 보여지도록 수정

src/contexts/ModalProvider.jsx

@@ -13,6 +13,8 @@ export const ModalProvider = ({ children }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [isClosing, setIsClosing] = useState(false);
 
+  const onModalCloseEventRef = useRef(null);
+
   const modalWrapperRef = useRef(null);
   const isMouseDownInsideModal = useRef(false);
 
@@ -27,17 +29,20 @@ export const ModalProvider = ({ children }) => {
 
   const pendingForClosingAnimation = () => {
     closeTimeoutRef.current = setTimeout(() => {
-      setIsOpen(false);
-      setIsClosing(false);
-      closeTimeoutRef.current = null;
+      if (isClosing) {
+        setIsOpen(false);
+        setIsClosing(false);
+        closeTimeoutRef.current = null;
+      }
     }, MODAL_CLOSE_DELAY);
   };
 
-  const showModal = (ModalComponent) => {
+  const showModal = (ModalComponent, { onModalClose } = {}) => {
     resetTimer();
     setModal(ModalComponent);
     setIsOpen(true);
     setIsClosing(false);
+    onModalCloseEventRef.current = onModalClose;
   };
 
   const closeModal = () => {
@@ -64,7 +69,12 @@ export const ModalProvider = ({ children }) => {
         !modalWrapperRef.current?.contains(e.target) &&
         isMouseDownInsideModal.current === false
       ) {
-        closeModal();
+        if (typeof onModalCloseEventRef.current === 'function') {
+          onModalCloseEventRef.current();
+          closeModal();
+        } else {
+          closeModal();
+        }
       }
     };
 

src/pages/RollingPaperItemPage/RollingPaperItemPage.jsx

@@ -14,6 +14,7 @@ import ListButtonGroup from '@/pages/RollingPaperItemPage/components/ListButtonG
 import RequestDeletePaperModal from '@/pages/RollingPaperItemPage/components/RequestDeletePaperModal';
 import DeletePaperSuccessModal from '@/pages/RollingPaperItemPage/components/DeletePaperSuccessModal';
 import InfinityScrollWrapper from '@/components/InfinityScrollWrapper/InfinityScrollWrapper';
+import { getBackgroundStylesFromPostData } from '../../utils/getBackgroundStylesFromPostData';
 
 const RollingPaperItemPage = () => {
   const navigate = useNavigate();
@@ -35,19 +36,10 @@ const RollingPaperItemPage = () => {
   } = useMessageItemsList(id); // 리스트 데이터 API 및 동작
 
   /* 전체 배경 스타일 적용 */
-  const containerStyle = recipientData
-    ? {
-        backgroundColor: !recipientData?.backgroundImageURL
-          ? COLOR_STYLES[recipientData?.backgroundColor]?.primary
-          : '',
-        backgroundImage: recipientData?.backgroundImageURL
-          ? `url(${recipientData?.backgroundImageURL})`
-          : 'none',
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'center',
-        backgroundSize: 'cover',
-      }
-    : {};
+  const containerStyle = getBackgroundStylesFromPostData({
+    backgroundColor: recipientData?.backgroundColor,
+    backgroundImageURL: recipientData?.backgroundImageURL,
+  });
 
   const paperDeleteModalData = {
     title: (
@@ -145,14 +137,17 @@ const RollingPaperItemPage = () => {
     );
   };
 
-  if (showOverlay || isLoading) {
+  if (showOverlay) {
     return <LoadingOverlay description={loadingDescription} />;
   }
   return (
     <>
       {/* 헤더 영역 */}
       <PostHeader id={id} name={recipientData?.name} />
-      <section style={containerStyle} className={styles['list']}>
+      <section
+        style={itemList.length === 0 && isLoading ? {} : containerStyle}
+        className={itemList.length === 0 && isLoading ? styles['skeleton-list'] : styles['list']}
+      >
         <div className={styles['list__container']}>
           <ListButtonGroup
             showDelete={isEditMode}
@@ -164,6 +159,9 @@ const RollingPaperItemPage = () => {
             <div className={styles['list__grid']}>
               {!isEditMode && <ActionCard isAdd onAction={handleOnClickAddMessage} />}
               {isEditMode && <ActionCard onAction={handleOnClickDeletePaper} />}
+              {itemList.length === 0 &&
+                isLoading &&
+                new Array(5).fill(0).map((_, i) => <ListCard.skeleton key={i} />)}
               {itemList?.map((item) => (
                 <ListCard
                   key={item.id}

src/pages/RollingPaperItemPage/RollingPaperItemPage.module.scss

@@ -46,3 +46,20 @@
     }
   }
 }
+
+.skeleton-list {
+	@include skeleton-style;
+	min-height: 100dvh;
+  padding: 24px 20px;
+  display: flex;
+  justify-content: center;
+  align-items: start;
+
+  @include tablet {
+    padding: 92px 24px;
+  }
+
+  @include desktop {
+    padding: 113px 24px;
+  }
+}

src/pages/RollingPaperItemPage/components/ListCard.jsx

@@ -64,4 +64,19 @@ const ListCard = ({ cardData, showDelete, onClick, onDelete }) => {
   );
 };
 
+const Skeleton = () => {
+  return (
+    <article className={styles['skeleton-card']}>
+      <div className={styles['skeleton-card__container']}>
+        <div className={styles['skeleton-card__profile']} />
+        <hr className={styles['card__divider']} />
+        <div className={styles['skeleton-card__context']} />
+        <div className={styles['skeleton-card__date']} />
+      </div>
+    </article>
+  );
+};
+
+ListCard.skeleton = Skeleton;
+
 export default ListCard;

src/pages/RollingPaperItemPage/components/ListCard.module.scss

@@ -131,3 +131,44 @@
   font-size: var(--font-size-18);
   color: var(--color-gray-600);
 }
+
+.skeleton-card {
+  min-width: 272px;
+  width: 100%;
+  max-width: 384px;
+  aspect-ratio: 320 / 230;
+  background-color: var(--color-white);
+  border-radius: 16px;
+  padding: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0px 2px 12px 0px #00000014;
+
+	&__container {
+		width: clamp(272px, 80vw, 384px);
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+	}
+
+	&__profile {
+		@include skeleton-style;
+		width: 100%;
+		height: 56px;
+	}
+
+	&__context {
+		@include skeleton-style;
+    width: 100%;
+		flex-grow: 1;
+		margin-bottom: 10px;
+	}
+
+	&__date {
+		@include skeleton-style;
+		width: 70px;
+		height: 12px;
+	}
+}