Merge pull request #237 from codeitFE11-part3-team7/feature/#218_모든-로딩-상태-로딩-컴포넌트-사용

Feature/#218 모든 로딩 상태 로딩 컴포넌트 사용

Author: junghwaYang

components/boards.page/CommentEmpty.tsx

@@ -0,0 +1,10 @@
+export default function CommentEmpty() {
+  return (
+    <div className="flex h-[192px] w-full flex-col items-center justify-center gap-[20px] rounded-custom text-gray-400 mo:h-[184px] mo:gap-[16px]">
+      <div className="text-center text-16 mo:text-14">
+        <p>아직 작성된 댓글이 없네요.</p>
+        <p>댓글을 남겨주세요!</p>
+      </div>
+    </div>
+  );
+}

pages/boards/[articleId].tsx

@@ -28,6 +28,7 @@ import {
 import { CommentsData, CommentType } from 'types/board';
 import SnackBar, { SnackBarProps } from '@/components/SnackBar';
 import ModalDefault from '@/components/Modal/ModalDefault';
+import CommentEmpty from '@/components/boards.page/CommentEmpty';
 
 export default function BoardsDetails() {
   const [boardData, setBoardData] = useState<ArticleData | null>(null);
@@ -272,7 +273,7 @@ export default function BoardsDetails() {
                 ))}
               </ul>
             ) : (
-              <div className="text-gray-500">작성된 댓글이 없습니다.</div>
+              <CommentEmpty />
             )}
 
             {/* 무한 스크롤 로더 */}

pages/boards/index.tsx

@@ -18,6 +18,7 @@ import { useProfileContext } from '@/hooks/useProfileContext';
 import SnackBar, { SnackBarProps } from '@/components/SnackBar';
 import Router from 'next/router';
 import EmptyList from '@/components/EmptyList';
+import Spinner from '@/components/Spinner';
 
 const BoardCardList_Swiper = dynamic(
   () => import('@/components/boards.page/BoardCardList.swiper'),
@@ -81,6 +82,7 @@ export default function Boards({
   const [snackStyled, setSnackStyled] =
     useState<SnackBarProps['severity']>(undefined);
 
+  const [isLoading, setIsLoading] = useState(false);
   const isMobile = useCheckMobile();
   const PAGE_SIZE = 10;
 
@@ -90,16 +92,19 @@ export default function Boards({
   useEffect(() => {
     const fetchBoards = async () => {
       const orderBy = selectedOption === '최신순' ? 'recent' : 'like';
-      const res = await getBoards({
-        orderBy,
-        pageSize: PAGE_SIZE,
-        page: currentPage,
-        keyword: searchValue,
-      });
-      if (Array.isArray(res.list) && res.list.length > 0) {
+      try {
+        setIsLoading(true);
+        const res = await getBoards({
+          orderBy,
+          pageSize: PAGE_SIZE,
+          page: currentPage,
+          keyword: searchValue,
+        });
         setBoards(res.list);
-      } else {
+      } catch {
         setBoards([]);
+      } finally {
+        setIsLoading(false);
       }
     };
 
@@ -177,23 +182,31 @@ export default function Boards({
 
           {/* 게시글 목록 */}
           {boards.length > 0 ? (
-            <BoardList data={boards} />
+            <>
+              {isLoading ? (
+                <div className="flex h-[540px] items-center justify-center">
+                  <Spinner />
+                </div>
+              ) : (
+                <>
+                  <BoardList data={boards} />
+
+                  {/* 페이지네이션 */}
+                  <div className="mt-[60px] mo:mt-8">
+                    <Pagination
+                      totalCount={totalCount}
+                      currentPage={currentPage}
+                      pageSize={PAGE_SIZE}
+                      onPageChange={(page) => setCurrentPage(page)}
+                    />
+                  </div>
+                </>
+              )}
+            </>
           ) : (
             <EmptyList classNames="mt-[60px] mo:mt-10" text={emptyListText} />
           )}
         </div>
-
-        {/* 페이지네이션 */}
-        {boards.length > 0 && (
-          <div className="mo:-mt-2">
-            <Pagination
-              totalCount={totalCount}
-              currentPage={currentPage}
-              pageSize={PAGE_SIZE}
-              onPageChange={(page) => setCurrentPage(page)}
-            />
-          </div>
-        )}
       </div>
       <SnackBar
         severity={snackStyled}