🎨 design(#166): 대시보드 페이지, 컬럼 섹션에 로딩 스피너 적용

src/containers/dashboard/ColumnsSection.tsx

@@ -3,7 +3,6 @@ import Image from 'next/image';
 import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
 
 import Column from './Column';
-import ColumnSkeleton from './ColumnSkeleton';
 
 import useFetchData from '@/hooks/useFetchData';
 import useModal from '@/hooks/useModal';
@@ -59,7 +58,11 @@ export default function ColumnsSection({ dashboardId }: ColumnsSectionProps) {
   }
 
   return isLoading ? (
-    <ColumnSkeleton />
+    <div className='flex h-screen items-center justify-center'>
+      <div className='align-center opacity-50 invert dark:invert-0'>
+        <Image src='/icons/spinner.svg' alt='스피너 아이콘' width={50} height={50} />
+      </div>
+    </div>
   ) : (
     <DragDropContext onDragEnd={onDragEnd}>
       <section className='block h-full overflow-x-auto lg:flex lg:w-[calc(100dvw-300px)]'>

src/pages/dashboard/[id]/index.tsx

@@ -1,14 +1,20 @@
+import Image from 'next/image';
 import { useRouter } from 'next/router';
 
-import ColumnSkeleton from '@/containers/dashboard/ColumnSkeleton';
 import ColumnsSection from '@/containers/dashboard/ColumnsSection';
 
 function DashboardIdPage() {
   const router = useRouter();
   const { id } = router.query;
 
   if (typeof id !== 'string') {
-    return <ColumnSkeleton />;
+    return (
+      <div className='flex h-screen items-center justify-center'>
+        <div className='align-center opacity-50 invert dark:invert-0'>
+          <Image src='/icons/spinner.svg' alt='스피너 아이콘' width={50} height={50} />
+        </div>
+      </div>
+    );
   }
 
   return <ColumnsSection dashboardId={id} />;