[KB] feat[#267]: 모든 페이지 로딩 중에서 로딩 스피너 적용

min06150315 · min06150315 · commit b19e28809915 · 2025-02-20T15:32:13.000+09:00
diff --git a/src/components/Board/Detail/BoardDetail.tsx b/src/components/Board/Detail/BoardDetail.tsx
@@ -8,6 +8,7 @@ import { getCommentsCountByCategory } from '~/api/comment.ts';
 import { Board } from '~/models/Board.ts';
 import BoardDetailItem from './BoardDetailItem.tsx';
 import styles from './BoardDetail.module.css';
+import LoadingSpinner from '~/components/Common/LoadingSpinner.tsx';
 
 export default function BoardDetail({ category }: { category: number }) {
   const currentUrl = window.location.href;
@@ -70,7 +71,7 @@ export default function BoardDetail({ category }: { category: number }) {
   });
 
   if (boardQuery.isFetching || commentCountQuery.isFetching) {
-    return <div>로딩 중...</div>;
+    return <LoadingSpinner />;
   }
 
   if (boardQuery.isSuccess && commentCountQuery.isSuccess) {
diff --git a/src/components/Board/Edit/BoardEdit.tsx b/src/components/Board/Edit/BoardEdit.tsx
@@ -155,7 +155,7 @@ export default function BoardEdit({ category }: BoardEditProps) {
 
   // 로딩 상태 처리
   if (boardQuery.isLoading || boardQuery.isLoading) {
-    return <div>데이터를 불러오는 중입니다...</div>;
+    return <LoadingSpinner />;
   }
 
   if (boardQuery.isError || boardQuery.isError) {
diff --git a/src/components/Board/List/BoardList.tsx b/src/components/Board/List/BoardList.tsx
@@ -6,6 +6,7 @@ import { CATEGORY_STRINGS_EN } from '~/constants/category_strings_en.ts';
 import BoardItem from '~/components/Board/Item/BoardItem.tsx';
 import Pagination from '~/components/Pagination/Pagination.tsx';
 import styles from './BoardList.module.css';
+import LoadingSpinner from '~/components/Common/LoadingSpinner';
 
 interface BoardListProps {
   category: number;
@@ -23,14 +24,11 @@ export default function BoardList({
   onPageChange,
 }: BoardListProps) {
   const renderBoardContent = () => {
+    if (boardsQuery.isLoading) return <LoadingSpinner />;
+
     if (totalPages === 0)
       return <div className={styles.noBoards}>현재 게시물이 없습니다.</div>;
 
-    if (boardsQuery.isLoading)
-      return (
-        <div className={styles.loading}>데이터를 불러오는 중입니다...</div>
-      );
-
     if (boardsQuery.isError)
       return <div className={styles.error}>에러가 발생했습니다!</div>;
 
diff --git a/src/components/Book/Detail/BookAdminDetail.tsx b/src/components/Book/Detail/BookAdminDetail.tsx
@@ -3,6 +3,7 @@ import { QUERY_KEY } from '~/api/queryKey.ts';
 import { Item } from '~/models/Item.ts';
 import { getItemById } from '~/api/item.ts';
 import styled from 'styled-components';
+import LoadingSpinner from '~/components/Common/LoadingSpinner';
 
 const Container = styled.div`
   padding: 10rem;
@@ -29,7 +30,7 @@ function BookAdminDetail() {
   let content;
 
   if (itemQuery.isLoading) {
-    content = <div className="loading">데이터를 불러오는 중입니다...</div>;
+    content = <LoadingSpinner />;
   } else if (itemQuery.isError) {
     content = <div className="error">에러가 발생했습니다!</div>;
   } else if (itemQuery.isSuccess) {
diff --git a/src/components/Book/Edit/BookAdminEdit.tsx b/src/components/Book/Edit/BookAdminEdit.tsx
@@ -6,6 +6,7 @@ import { Item } from '~/models/Item.ts';
 import { getItemById, updateItem } from '~/api/item.ts';
 import { onUploadImage } from '~/api/board.ts';
 import styles from '../../Project/Project.module.css';
+import LoadingSpinner from '~/components/Common/LoadingSpinner';
 
 function BookAdminEdit() {
   const navigate = useNavigate();
@@ -78,7 +79,7 @@ function BookAdminEdit() {
   };
 
   if (itemQuery.isLoading) {
-    content = <div className="loading">데이터를 불러오는 중입니다...</div>;
+    content = <LoadingSpinner />;
   } else if (itemQuery.isError) {
     content = <div className="error">에러가 발생했습니다!</div>;
   } else if (itemQuery.isSuccess) {
diff --git a/src/components/Book/List/BookAdminList.tsx b/src/components/Book/List/BookAdminList.tsx
@@ -6,6 +6,7 @@ import { getItems } from '~/api/item.ts';
 import { ITEMCATEGORY } from '~/constants/itemCategory.ts';
 import ItemAdminDelete from '~/components/Book/Delete/BookAdminDelete.tsx';
 import styled from 'styled-components';
+import LoadingSpinner from '~/components/Common/LoadingSpinner';
 
 const Container = styled.div`
   padding: 10rem;
@@ -61,7 +62,7 @@ function BookAdminList() {
   let content;
 
   if (itemQuery.isLoading) {
-    content = <div>로딩중...</div>;
+    content = <LoadingSpinner />;
   } else if (itemQuery.isError) {
     content = <div>에러가 발생했습니다!</div>;
   } else if (itemQuery.isSuccess) {
diff --git a/src/components/Book/List/BookList.tsx b/src/components/Book/List/BookList.tsx
@@ -4,6 +4,7 @@ import { QUERY_KEY } from '~/api/queryKey.ts';
 import { Item } from '~/models/Item.ts';
 import ItemItem from '~/components/Book/Item/BookItem.tsx';
 import styles from '~/components/Book/List/BookList.module.css';
+import LoadingSpinner from '~/components/Common/LoadingSpinner';
 
 export default function BookList({ itemCategory }: { itemCategory: number }) {
   const ItemQuery = useQuery<Item[]>({
@@ -14,7 +15,7 @@ export default function BookList({ itemCategory }: { itemCategory: number }) {
   let content;
 
   if (ItemQuery.isLoading) {
-    content = <div>로딩중...</div>;
+    content = <LoadingSpinner />;
   } else if (ItemQuery.isError) {
     content = <div className="error">에러가 발생했습니다!</div>;
   } else if (ItemQuery.isSuccess) {
diff --git a/src/components/Comment/List/CommetList.tsx b/src/components/Comment/List/CommetList.tsx
@@ -3,6 +3,7 @@ import { Comment } from '~/models/Comment.ts';
 import { QUERY_KEY } from '~/api/queryKey.ts';
 import { getCommentsByBoardId } from '~/api/comment.ts';
 import CommentItem from '~/components/Comment/Item/CommentItem.tsx';
+import LoadingSpinner from '~/components/Common/LoadingSpinner';
 
 export default function CommentList({ id }: { id: number }) {
   const commentsQuery = useQuery<Comment[]>({
@@ -13,7 +14,7 @@ export default function CommentList({ id }: { id: number }) {
   let content;
 
   if (commentsQuery.isLoading) {
-    content = <div className="loading">데이터를 불러오는 중입니다...</div>;
+    content = <LoadingSpinner />;
   } else if (commentsQuery.isError) {
     content = <div className="error">에러가 발생했습니다!</div>;
   } else if (commentsQuery.isSuccess) {
diff --git a/src/components/Havruta/Havruta/Edit/HavrutaEdit.tsx b/src/components/Havruta/Havruta/Edit/HavrutaEdit.tsx
@@ -5,6 +5,7 @@ import { getHavrutaById, updateHavruta } from '~/api/havruta/havruta';
 import { Havruta } from '~/models/Havruta';
 import styled from 'styled-components';
 import { QUERY_KEY } from '~/api/queryKey';
+import LoadingSpinner from '~/components/Common/LoadingSpinner';
 
 const Container = styled.div`
   padding: 10rem;
@@ -62,7 +63,7 @@ function HavrutaEdit() {
   };
 
   if (havrutaQuery.isLoading) {
-    content = <div>데이터를 불러오는 중입니다...</div>;
+    content = <LoadingSpinner />;
   } else if (havrutaQuery.isError) {
     content = <div>에러가 발생했습니다!!</div>;
   } else if (havrutaQuery.isSuccess) {
diff --git a/src/components/Havruta/Havruta/List/HavrutaList.tsx b/src/components/Havruta/Havruta/List/HavrutaList.tsx
@@ -5,6 +5,7 @@ import { Havruta } from '~/models/Havruta';
 import { getAllHavrutas } from '~/api/havruta/havruta';
 import HavrutaDelete from '~/components/Havruta/Havruta/Delete/HavrutaDelete';
 import styled from 'styled-components';
+import LoadingSpinner from '~/components/Common/LoadingSpinner';
 
 const Container = styled.div``;
 
@@ -59,7 +60,7 @@ function HavrutaList() {
   let content;
 
   if (havrutaQuery.isLoading) {
-    content = <div>로딩중...</div>;
+    content = <LoadingSpinner />;
   } else if (havrutaQuery.isError) {
     content = <div>에러가 발생했습니다!</div>;
   } else if (havrutaQuery.isSuccess) {
diff --git a/src/components/Havruta/HavrutaBoard/Detail/HavrutaBoardDetail.tsx b/src/components/Havruta/HavrutaBoard/Detail/HavrutaBoardDetail.tsx
@@ -9,6 +9,7 @@ import { Board } from '~/models/Board.ts';
 import { CATEGORY } from '~/constants/category.ts';
 import HavrutaBoardDetailItem from './Item/HavrutaBoardDetailIItem.tsx';
 import styles from './HavrutaBoardDetail.module.css';
+import LoadingSpinner from '~/components/Common/LoadingSpinner.tsx';
 
 export default function HavrutaBoardDetail() {
   const currentUrl = window.location.href;
@@ -70,7 +71,7 @@ export default function HavrutaBoardDetail() {
   });
 
   if (boardQuery.isFetching || commentCountQuery.isFetching) {
-    return <div>로딩 중...</div>;
+    return <LoadingSpinner />;
   }
 
   if (boardQuery.isSuccess && commentCountQuery.isSuccess) {
diff --git a/src/components/Havruta/HavrutaBoard/Edit/HavrutaBoardEdit.tsx b/src/components/Havruta/HavrutaBoard/Edit/HavrutaBoardEdit.tsx
@@ -11,6 +11,7 @@ import { useMarkdownEditor } from '../../../Board/Write/Markdown';
 import { Editor } from '@toast-ui/react-editor';
 import { CATEGORY } from '~/constants/category.ts';
 import { Havruta } from '~/models/Havruta.ts';
+import LoadingSpinner from '~/components/Common/LoadingSpinner';
 
 export default function HavrutaBoardEdit() {
   const navigate = useNavigate();
@@ -197,7 +198,7 @@ export default function HavrutaBoardEdit() {
 
   // 로딩 상태 처리
   if (boardQuery.isLoading || havrutaQuery.isLoading) {
-    return <div>데이터를 불러오는 중입니다...</div>;
+    return <LoadingSpinner />;
   }
 
   if (boardQuery.isError || havrutaQuery.isError) {
diff --git a/src/components/Havruta/HavrutaBoard/List/HavrutaBoardList.tsx b/src/components/Havruta/HavrutaBoard/List/HavrutaBoardList.tsx
@@ -5,6 +5,7 @@ import Sidebar from './Sidebar/HavrutaSidebar.tsx';
 import Pagination from '~/components/Pagination/Pagination.tsx';
 import HavrutaBoardItem from '~/components/Havruta/HavrutaBoard/Item/HavrutaBoardItem.tsx';
 import styles from './HavrutaBoardList.module.css';
+import LoadingSpinner from '~/components/Common/LoadingSpinner.tsx';
 
 interface HavrutaBoardListProps {
   havrutaQuery: UseQueryResult<Havruta[], unknown>;
@@ -27,13 +28,7 @@ export default function HavrutaBoardList({
 }: HavrutaBoardListProps) {
   const renderBoardContent = () => {
     if (havrutaBoardQuery.isLoading) {
-      return (
-        <div>
-          <div className={styles['board-wrapper']}>
-            데이터를 불러오는 중입니다...
-          </div>
-        </div>
-      );
+      return <LoadingSpinner />;
     }
 
     if (havrutaBoardQuery.isError) {
diff --git a/src/components/Havruta/HavrutaBoard/List/Sidebar/HavrutaSidebar.tsx b/src/components/Havruta/HavrutaBoard/List/Sidebar/HavrutaSidebar.tsx
@@ -4,6 +4,7 @@ import { UseQueryResult } from '@tanstack/react-query';
 import { Havruta } from '~/models/Havruta.ts';
 import SelectedDot from '~/assets/images/Dot/Selected-Dot.png';
 import styles from './HavrutaSidebar.module.css';
+import LoadingSpinner from '~/components/Common/LoadingSpinner';
 
 interface HavrutaSidebarProps {
   havrutaQuery: UseQueryResult<Havruta[], unknown>;
@@ -20,7 +21,7 @@ function HavrutaSidebar({
 }: HavrutaSidebarProps) {
   const navigate = useNavigate();
 
-  if (havrutaQuery.isLoading) return <div>로딩중...</div>;
+  if (havrutaQuery.isLoading) return <LoadingSpinner />;
   if (havrutaQuery.isError) return <div>ERROR!</div>;
 
   const handleHavrutaChange = (id: number | null, event: React.MouseEvent) => {
diff --git a/src/components/Havruta/HavrutaBoard/Write/HavrutaBoardWrite.tsx b/src/components/Havruta/HavrutaBoard/Write/HavrutaBoardWrite.tsx
@@ -9,6 +9,7 @@ import { QUERY_KEY } from '~/api/queryKey.ts';
 import styles from './HavrutaBoardWrite.module.css';
 import { useMarkdownEditor } from '../../../Board/Write/Markdown';
 import { Editor } from '@toast-ui/react-editor';
+import LoadingSpinner from '~/components/Common/LoadingSpinner';
 
 export default function HavrutaBoardWrite() {
   const havrutaCategory = CATEGORY.HAVRUTA;
@@ -206,7 +207,7 @@ export default function HavrutaBoardWrite() {
 
         <label htmlFor="havrutaId">과목명</label>
         {havrutaQuery.isLoading ? (
-          <p>과목 목록을 불러오는 중입니다...</p>
+          <LoadingSpinner />
         ) : havrutaQuery.isError ? (
           <p>과목 목록을 불러오는데 실패했습니다.</p>
         ) : havrutaQuery.data?.length === 0 ? (
diff --git a/src/components/Item/Detail/ItemAdminDetail.tsx b/src/components/Item/Detail/ItemAdminDetail.tsx
@@ -3,6 +3,7 @@ import { QUERY_KEY } from '~/api/queryKey.ts';
 import { getItemById } from '~/api/item.ts';
 import { Item } from '~/models/Item.ts';
 import styled from 'styled-components';
+import LoadingSpinner from '~/components/Common/LoadingSpinner';
 
 const Container = styled.div`
   padding: 10rem;
@@ -29,7 +30,7 @@ function ItemAdminDetail() {
   let content;
 
   if (itemQuery.isLoading) {
-    content = <div className="loading">데이터를 불러오는 중입니다...</div>;
+    content = <LoadingSpinner />;
   } else if (itemQuery.isError) {
     content = <div className="error">에러가 발생했습니다!</div>;
   } else if (itemQuery.isSuccess) {
diff --git a/src/components/Item/Edit/ItemAdminEdit.tsx b/src/components/Item/Edit/ItemAdminEdit.tsx
@@ -6,6 +6,7 @@ import { Item } from '~/models/Item.ts';
 import { getItemById, updateItem } from '~/api/item.ts';
 import { onUploadImage } from '~/api/board.ts';
 import styles from '../../Project/Project.module.css';
+import LoadingSpinner from '~/components/Common/LoadingSpinner';
 
 function ItemAdminEdit() {
   const navigate = useNavigate();
@@ -79,7 +80,7 @@ function ItemAdminEdit() {
   };
 
   if (itemQuery.isLoading) {
-    content = <div className="loading">데이터를 불러오는 중입니다...</div>;
+    content = <LoadingSpinner />;
   } else if (itemQuery.isError) {
     content = <div className="error">에러가 발생했습니다!</div>;
   } else if (itemQuery.isSuccess) {
diff --git a/src/components/Item/List/ItemAdminList.tsx b/src/components/Item/List/ItemAdminList.tsx
@@ -6,6 +6,7 @@ import { getItems } from '~/api/item.ts';
 import { ITEMCATEGORY } from '~/constants/itemCategory.ts';
 import ItemAdminDelete from '~/components/Item/Delete/ItemAdminDelete.tsx';
 import styled from 'styled-components';
+import LoadingSpinner from '~/components/Common/LoadingSpinner';
 
 const Container = styled.div`
   padding: 10rem;
@@ -61,7 +62,7 @@ function ItemAdminList() {
   let content;
 
   if (itemQuery.isLoading) {
-    content = <div>로딩중...</div>;
+    content = <LoadingSpinner />;
   } else if (itemQuery.isError) {
     content = <div>에러가 발생했습니다!</div>;
   } else if (itemQuery.isSuccess) {
diff --git a/src/components/Item/List/ItemList.tsx b/src/components/Item/List/ItemList.tsx
@@ -4,6 +4,7 @@ import { QUERY_KEY } from '~/api/queryKey.ts';
 import { Item } from '~/models/Item.ts';
 import ItemItem from '~/components/Item/Item/ItemItem.tsx';
 import styles from '~/components/Item/List/ItemList.module.css';
+import LoadingSpinner from '~/components/Common/LoadingSpinner';
 
 export default function ItemList({ itemCategory }: { itemCategory: number }) {
   const ItemQuery = useQuery<Item[]>({
@@ -14,7 +15,7 @@ export default function ItemList({ itemCategory }: { itemCategory: number }) {
   let content;
 
   if (ItemQuery.isLoading) {
-    content = <div>로딩중...</div>;
+    content = <LoadingSpinner />;
   } else if (ItemQuery.isError) {
     content = <div className="error">에러가 발생했습니다!</div>;
   } else if (ItemQuery.isSuccess) {
diff --git a/src/components/Modal/Project/ProjectModal.tsx b/src/components/Modal/Project/ProjectModal.tsx
@@ -4,6 +4,7 @@ import { QUERY_KEY } from '~/api/queryKey.ts';
 import Modal from 'react-modal';
 import styles from '../Project/ProjectModal.module.css';
 import { Link } from 'react-router-dom';
+import LoadingSpinner from '~/components/Common/LoadingSpinner';
 
 const ProjectModal = ({
   projectId,
@@ -24,7 +25,7 @@ const ProjectModal = ({
   if (isLoading) {
     return (
       <Modal isOpen onRequestClose={closeModal}>
-        Loading...
+        <LoadingSpinner />;
       </Modal>
     );
   }
diff --git a/src/components/Project/Detail/ProjectAdminDetail.tsx b/src/components/Project/Detail/ProjectAdminDetail.tsx
@@ -3,6 +3,7 @@ import { Project } from '~/models/Project.ts';
 import { QUERY_KEY } from '~/api/queryKey.ts';
 import { getProjectById } from '~/api/project.ts';
 import styled from 'styled-components';
+import LoadingSpinner from '~/components/Common/LoadingSpinner';
 
 const Container = styled.div`
   padding: 10rem;
@@ -30,7 +31,7 @@ function ProjectAdminDetail() {
   let content;
 
   if (projectQuery.isLoading) {
-    content = <div className="loading">데이터를 불러오는 중입니다...</div>;
+    content = <LoadingSpinner />;
   } else if (projectQuery.isError) {
     content = <div className="error">에러가 발생했습니다!</div>;
   } else if (projectQuery.isSuccess) {
diff --git a/src/components/Project/Edit/ProjectAdminEdit.tsx b/src/components/Project/Edit/ProjectAdminEdit.tsx
@@ -6,6 +6,7 @@ import { QUERY_KEY } from '~/api/queryKey.ts';
 import { onUploadImage } from '~/api/board.ts';
 import { Project } from '~/models/Project.ts';
 import styles from '../Project.module.css';
+import LoadingSpinner from '~/components/Common/LoadingSpinner';
 
 function ProjectAdminEdit() {
   const navigate = useNavigate();
@@ -76,7 +77,7 @@ function ProjectAdminEdit() {
   };
 
   if (projectQuery.isLoading) {
-    content = <div className="loading">데이터를 불러오는 중입니다...</div>;
+    content = <LoadingSpinner />;
   } else if (projectQuery.isError) {
     content = <div className="error">에러가 발생했습니다!</div>;
   } else if (projectQuery.isSuccess) {
diff --git a/src/components/Project/List/ProjectAdminList.tsx b/src/components/Project/List/ProjectAdminList.tsx
@@ -5,6 +5,7 @@ import { QUERY_KEY } from '~/api/queryKey.ts';
 import { Project } from '~/models/Project.ts';
 import ProjectDelete from '../Delete/ProjectAdminDelete.tsx';
 import styled from 'styled-components';
+import LoadingSpinner from '~/components/Common/LoadingSpinner.tsx';
 
 const Container = styled.div`
   padding: 10rem;
@@ -60,7 +61,7 @@ function ProjectAdminList() {
   let content;
 
   if (projectQuery.isLoading) {
-    content = <div>로딩중...</div>;
+    content = <LoadingSpinner />;
   } else if (projectQuery.isError) {
     content = <div>에러가 발생했습니다!</div>;
   } else if (projectQuery.isSuccess) {
diff --git a/src/components/Project/List/ProjectList.tsx b/src/components/Project/List/ProjectList.tsx
diff --git a/src/pages/Main/MainBoardList.tsx b/src/pages/Main/MainBoardList.tsx

Original file line number	Diff line number	Diff line change
`@@ -155,7 +155,7 @@ export default function BoardEdit({ category }: BoardEditProps) {`
`155`	`155`
`156`	`156`	`// 로딩 상태 처리`
`157`	`157`	`if (boardQuery.isLoading \|\| boardQuery.isLoading) {`
`158`		`- return <div>데이터를 불러오는 중입니다...</div>;`
	`158`	`+ return <LoadingSpinner />;`
`159`	`159`	`}`
`160`	`160`
`161`	`161`	`if (boardQuery.isError \|\| boardQuery.isError) {`