[Feat] 무한 스크롤 시 로딩 스피너 적용, 카드 내부 컨텐츠 잘리는 오류 수정

src/components/ContentViewer/ContentViewer.jsx

@@ -37,7 +37,6 @@ export default function ContentViewer({
       className={className}
       style={{
         width: '100%',
-        overflow: 'auto',
         whiteSpace: 'pre-wrap',
         wordBreak: 'break-word',
 

src/components/LoadingOverlay.module.scss

@@ -1,31 +1,30 @@
 .loading-overlay {
+  width: 100%;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  left: 0;
+  opacity: 0.9;
+  background-color: var(--color-white);
+  z-index: 99;
 
-	width: 100%;
-	height: 100vh;
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-items: center;
-	position: fixed;
-	top: 0;
-	left: 0;
-	opacity: 0.9;
-	background-color: var(--color-white);
-	z-index: 99;
+  &__title {
+    font-size: 38px;
+    color: var(--color-purple-600);
+    font-weight: 700;
+    margin-top: 40px;
+    margin-bottom: 30px;
+    letter-spacing: 0.03em;
+  }
 
-	&__title {
-		font-size: 38px;
-		color: var(--color-purple-600);
-		font-weight: 700;
-		margin-top: 40px;
-		margin-bottom: 30px;
-		letter-spacing: 0.03em;
-	}
-
-	&__description {
-		font-size: 20px;
-		color: var(--color-gray-600);
-		font-weight: 700;
-		letter-spacing: 0.02em;
-	}
-}
+  &__description {
+    font-size: 20px;
+    color: var(--color-gray-600);
+    font-weight: 700;
+    letter-spacing: 0.02em;
+  }
+}

src/hooks/useMessageItemsList.jsx

@@ -32,22 +32,9 @@ export const useMessageItemsList = (id) => {
   );
 
   const [showOverlay, setShowOverlay] = useState(false);
-  const isLoading =
-    recipientDataLoading || messageLoading || deleteMessageLoading || deleteRecipientLoading;
-
-  const getLoadingDescription = () => {
-    let description = '';
-    if (recipientDataLoading || messageLoading) {
-      description = '롤링페이퍼 메시지 목록을 불러오고 있어요';
-    } else if (deleteMessageLoading) {
-      description = '롤링페이퍼 메시지를 삭제하고 있어요';
-    } else if (deleteRecipientLoading) {
-      description = '롤링페이퍼를 삭제하고 있어요';
-    }
-    return description;
-  };
-
-  const loadingDescription = getLoadingDescription();
+  const [showInfinityLoading, setShowInfinityLoading] = useState(false);
+  const isLoading = recipientDataLoading || messageLoading || deleteMessageLoading;
+  const [isInitialize, setIsInitialize] = useState(false);
 
   const [itemList, setItemList] = useState([]);
   const hasNext = !!messageList?.next;
@@ -69,6 +56,16 @@ export const useMessageItemsList = (id) => {
     }
   }, [deleteRecipientLoading]);
 
+  /* 무한스크롤 로딩: 초기, 메시지 삭제 시 로딩X */
+  useEffect(() => {
+    if (isFirstCall || isInitialize) return;
+    if (messageLoading) {
+      setShowInfinityLoading(true);
+    } else {
+      setShowInfinityLoading(false);
+    }
+  }, [messageLoading, isFirstCall, isInitialize]);
+
   /* 스크롤 시 데이터 다시 불러옴  */
   const loadMore = () => {
     if (messageLoading || !hasNext) return;
@@ -80,6 +77,7 @@ export const useMessageItemsList = (id) => {
   /* 삭제 후 데이터 초기 상태로 불러옴 */
   const initializeList = () => {
     if (messageLoading) return;
+    setIsInitialize(true);
     setOffset(0);
     getMessageListRefetch({ recipientId: id, limit: 8, offset: 0 });
   };
@@ -109,7 +107,7 @@ export const useMessageItemsList = (id) => {
     hasNext,
     isLoading,
     showOverlay,
-    loadingDescription,
+    showInfinityLoading,
     loadMore,
     onClickDeleteMessage,
     onDeletePaperConfirm,

src/pages/RollingPaperItemPage/RollingPaperItemPage.jsx

@@ -7,6 +7,7 @@ import { COLOR_STYLES } from '@/constants/colorThemeStyle';
 import CardModal from '@/components/CardModal';
 import PostHeader from '@/components/PostHeader/PostHeader';
 import LoadingOverlay from '@/components/LoadingOverlay';
+import LoadingSpinner from '@/components/LoadingSpinner/LoadingSpinner';
 import styles from '@/pages/RollingPaperItemPage/RollingPaperItemPage.module.scss';
 import ListCard from '@/pages/RollingPaperItemPage/components/ListCard';
 import ActionCard from '@/pages/RollingPaperItemPage/components/ActionCard';
@@ -28,8 +29,8 @@ const RollingPaperItemPage = () => {
     itemList,
     hasNext,
     showOverlay,
+    showInfinityLoading,
     isLoading,
-    loadingDescription,
     loadMore,
     onClickDeleteMessage,
     onDeletePaperConfirm,
@@ -133,12 +134,17 @@ const RollingPaperItemPage = () => {
             navigate('/list');
           }}
         />,
+        {
+          onModalClose: () => {
+            navigate('/list');
+          },
+        },
       ),
     );
   };
 
   if (showOverlay) {
-    return <LoadingOverlay description={loadingDescription} />;
+    return <LoadingOverlay description='롤링페이퍼를 삭제하고 있어요' />;
   }
   return (
     <>
@@ -173,6 +179,11 @@ const RollingPaperItemPage = () => {
               ))}
             </div>
           </InfinityScrollWrapper>
+          {showInfinityLoading && (
+            <div className={styles['list__loading']}>
+              <LoadingSpinner.dotCircle dotCount={8} dotSize={12} distanceFromCenter={30} />
+            </div>
+          )}
         </div>
       </section>
     </>

src/pages/RollingPaperItemPage/RollingPaperItemPage.module.scss

@@ -1,16 +1,16 @@
 .list {
   min-height: 100dvh;
-  padding: 24px 20px;
+  padding: 32px 20px;
   display: flex;
   justify-content: center;
   align-items: start;
 
   @include tablet {
-    padding: 92px 24px;
+    padding: 49px 24px;
   }
 
   @include desktop {
-    padding: 113px 24px;
+    padding: 63px 24px;
   }
 
   &__container {
@@ -45,21 +45,28 @@
       gap: 24px;
     }
   }
+
+  &__loading {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: 20px;
+  }
 }
 
 .skeleton-list {
-	@include skeleton-style;
-	min-height: 100dvh;
-  padding: 24px 20px;
+  @include skeleton-style;
+  min-height: 100dvh;
+  padding: 32px 20px;
   display: flex;
   justify-content: center;
   align-items: start;
-	
+
   @include tablet {
-    padding: 92px 24px;
+    padding: 49px 24px;
   }
 
   @include desktop {
-    padding: 113px 24px;
+    padding: 62px 24px;
   }
-}
+}

src/pages/RollingPaperItemPage/components/ActionCard.jsx

@@ -8,7 +8,7 @@ const ActionCard = ({ onAction, isAdd }) => {
       {!isAdd && (
         <>
           <DeleteIcon className={`${styles['card__icon--delete']}`} />
-          <div className={`${styles['card__text--delete']}`}>게시판 삭제하기</div>
+          <div className={`${styles['card__text--delete']}`}>롤링 페이퍼 삭제하기</div>
         </>
       )}
       {isAdd && (