✨feat:메인페이지 스켈레톤 UI및 빈컨텐츠 레이아웃 추가 #51

src/components/features/noticeList/noticeEmpty.tsx

@@ -0,0 +1,36 @@
+import { Button } from '@/components/ui';
+import { useRouter } from 'next/router';
+
+interface NoticeEmptyProps {
+  q?: string;
+  onReset?: () => void;
+}
+
+const NoticeEmpty = ({ q, onReset }: NoticeEmptyProps) => {
+  const router = useRouter();
+  return (
+    <div className='flex flex-col items-center justify-center py-16 text-center text-gray-500'>
+      <h3 className='text-heading-sm font-semibold text-gray-700'>
+        {q ? `"${q}"에 대한 공고를 찾을 수 없습니다.` : '검색 조건에 맞는 공고가 없습니다.'}
+      </h3>
+      {!q && (
+        <p className='mt-2 text-body-s text-gray-500'>
+          새로운 아르바이트 공고가 올라오면 이곳에서 확인할 수 있어요.
+        </p>
+      )}
+
+      <div className='mt-10 flex gap-3'>
+        {q ? (
+          <Button variant='primary' size='xs38' onClick={() => router.push('/')}>
+            홈으로 돌아가기
+          </Button>
+        ) : (
+          <Button variant='secondary' size='sm' onClick={onReset}>
+            전체 공고 보기
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+};
+export default NoticeEmpty;

src/components/layout/header/logo.tsx

@@ -12,7 +12,6 @@ const Logo = () => {
           alt='더 줄게 로고'
           className='object-contain'
           fill
-          priority
           sizes='(max-width: 744px) 84px, 112px'
         />
       </Link>

src/components/ui/index.ts

@@ -16,3 +16,4 @@ export { Filter } from './filter';
 export { Icon } from './icon';
 export { Modal, Notification } from './modal';
 export { Pagination } from './pagination';
+export { SkeletonUI } from './skeleton';

src/components/ui/pagination/pagination.tsx

@@ -34,7 +34,7 @@ const Pagination = ({ total, offset, limit, onPageChange, className }: Paginatio
     setPageGroup(newGroup);
   }, [currentPage, pageGroupSize]);
 
-  if (totalPages < 1) return null;
+  if (totalPages <= 1) return null;
 
   const startPage = pageGroup * pageGroupSize + 1;
   const endPage = Math.min(startPage + pageGroupSize - 1, totalPages);

src/components/ui/skeleton/index.ts

@@ -0,0 +1 @@
+export { default as SkeletonUI } from './skeletonUI';

src/components/ui/skeleton/skeletonUI.tsx

@@ -0,0 +1,21 @@
+import { cn } from '@/lib/utils/cn';
+
+const SkeletonUI = ({ count = 0, className = '' }) => {
+  return (
+    <div className={cn('grid gap-x-4 gap-y-8 sm:grid-cols-2 desktop:grid-cols-3', className)}>
+      {Array.from({ length: count }).map((_, i) => (
+        <div
+          key={i}
+          className={cn(
+            'flex-0 aspect-square w-full rounded-2xl',
+            'bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200',
+            'bg-[length:400%_100%]',
+            'animate-skeleton-shimmer',
+            className
+          )}
+        ></div>
+      ))}
+    </div>
+  );
+};
+export default SkeletonUI;

src/context/appProvider.tsx → src/context/appProviderWrapper.tsx

@@ -3,7 +3,7 @@ import AuthProvider from './authProvider';
 import { ToastProvider } from './toastContext';
 import { UserApplicationsProvider } from './userApplicationsProvider';
 
-const AppProvider = ({ children }: { children: ReactNode }) => {
+const AppProviderWrapper = ({ children }: { children: ReactNode }) => {
   return (
     <AuthProvider>
       <UserApplicationsProvider>
@@ -12,4 +12,4 @@ const AppProvider = ({ children }: { children: ReactNode }) => {
     </AuthProvider>
   );
 };
-export default AppProvider;
+export default AppProviderWrapper;

src/pages/_app.tsx

@@ -1,5 +1,5 @@
 import { Footer, Header, Wrapper } from '@/components/layout';
-import AppProvider from '@/context/appProvider';
+import AppProviderWrapper from '@/context/appProviderWrapper';
 import '@/styles/fonts.css';
 import '@/styles/globals.css';
 import type { NextPage } from 'next';
@@ -29,7 +29,7 @@ export default function App({ Component, pageProps }: AppPropsWithLayout) {
         <link rel='icon' href='/favicon.ico' sizes='any' />
         <link rel='icon' href='/favicon.png' type='image/png' sizes='192x192' />
       </Head>
-      <AppProvider>{getLayout(<Component {...pageProps} />)}</AppProvider>
+      <AppProviderWrapper>{getLayout(<Component {...pageProps} />)}</AppProviderWrapper>
     </>
   );
 }

tailwind.config.ts

@@ -89,6 +89,12 @@ const config: Config = {
       boxShadow: {
         'inset-top': '0 -4px 25px 0 rgba(0,0,0,0.1)',
       },
+      keyframes: {
+        'skeleton-shimmer': {
+          '0%': { backgroundPosition: '-400% 0' },
+          '100%': { backgroundPosition: '400% 0' },
+        },
+      },
     },
   },
   plugins: [],