diff --git a/public/logo.svg b/public/logo.svg new file mode 100644 index 00000000..ca75de0b --- /dev/null +++ b/public/logo.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/public/next.svg b/public/next.svg deleted file mode 100644 index 5174b28c..00000000 --- a/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index d2f84222..00000000 --- a/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/app/(sidebar)/my-recruit/containers/AllRecruitment/AllRecruitment.tsx b/src/app/(sidebar)/my-recruit/containers/AllRecruitment/AllRecruitment.tsx index cce676b9..cc4b4669 100644 --- a/src/app/(sidebar)/my-recruit/containers/AllRecruitment/AllRecruitment.tsx +++ b/src/app/(sidebar)/my-recruit/containers/AllRecruitment/AllRecruitment.tsx @@ -8,6 +8,7 @@ import { AsyncBoundaryWithQuery } from '@/lib'; import { SeasonDropdownContent } from '../components/SeasonDropdownContent'; import { useState } from 'react'; import { ALL_RECRUITMENT } from '../components/SeasonDropdownContent'; +import { CardSkeleton } from '@/app/(sidebar)/my-recruit/containers/components/CardSkeleton/CardSkeleton'; export function AllRecruitment() { const [selectedSeason, setSelectedSeason] = useState(ALL_RECRUITMENT); @@ -30,7 +31,19 @@ export function AllRecruitment() { - <>} pendingFallback={<>}> + + + + + } + pendingFallback={ + <> + + + + }> diff --git a/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment/ProgressingRecruitment.tsx b/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment/ProgressingRecruitment.tsx index 66cb2f6f..1d355703 100644 --- a/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment/ProgressingRecruitment.tsx +++ b/src/app/(sidebar)/my-recruit/containers/ProgressingRecruitment/ProgressingRecruitment.tsx @@ -2,6 +2,7 @@ import { Spacing } from '@/system/utils/Spacing'; import { ShoeIcon } from '../components/ShoeIcon'; import { AsyncBoundaryWithQuery } from '@/lib'; import { ProgressingRecruitList } from './ProgressingRecruitList'; +import { CardSkeleton } from '../components/CardSkeleton/CardSkeleton'; export function ProgressingRecruitment() { return ( @@ -11,7 +12,19 @@ export function ProgressingRecruitment() { 현재 진행중인 공고 모아보기 - + + + + + } + pendingFallback={ + <> + + + + }> diff --git a/src/app/(sidebar)/my-recruit/containers/components/CardSkeleton/CardSkeleton.tsx b/src/app/(sidebar)/my-recruit/containers/components/CardSkeleton/CardSkeleton.tsx new file mode 100644 index 00000000..295e385b --- /dev/null +++ b/src/app/(sidebar)/my-recruit/containers/components/CardSkeleton/CardSkeleton.tsx @@ -0,0 +1,46 @@ +import { motion } from 'framer-motion'; +import { match } from 'ts-pattern'; + +interface Props { + variant: 'box' | 'row'; + count: number; +} + +export function CardSkeleton({ variant, count }: Props) { + const wrapperClassName = match(variant) + .with('box', () => 'flex gap-[16px]') + .with('row', () => 'flex flex-col gap-[12px]') + .exhaustive(); + + const itemClassName = match(variant) + .with('box', () => 'w-[280px] h-[142px] bg-neutral-3 rounded-[10px]') + .with('row', () => 'w-full h-[70px] bg-neutral-3 rounded-[10px]') + .exhaustive(); + + return ( + + {Array(count) + .fill(0) + .map((_, index) => ( + + ))} + + ); +} diff --git a/src/app/favicon.ico b/src/app/favicon.ico deleted file mode 100644 index 718d6fea..00000000 Binary files a/src/app/favicon.ico and /dev/null differ diff --git a/src/app/layout.tsx b/src/app/layout.tsx index b09f50b5..8208e1c2 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -9,7 +9,10 @@ const inter = Inter({ subsets: ['latin'] }); export const metadata: Metadata = { title: '뽀각', - description: 'Generated by create next app', + description: '취업 자료 아카이빙 서비스 뽀각입니다.', + icons: { + icon: '/logo.svg', + }, }; export default function RootLayout({ diff --git a/src/components/Logo.tsx b/src/components/Logo.tsx new file mode 100644 index 00000000..c00db96a --- /dev/null +++ b/src/components/Logo.tsx @@ -0,0 +1,49 @@ +export function Logo() { + return ( + + + + + + + + + + + + + ); +} diff --git a/src/container/Sidebar/Sidebar.tsx b/src/container/Sidebar/Sidebar.tsx index 24ba5f37..fb6963b7 100644 --- a/src/container/Sidebar/Sidebar.tsx +++ b/src/container/Sidebar/Sidebar.tsx @@ -6,6 +6,8 @@ import { useState } from 'react'; import { Collapsible } from './Collapsible/Collapsible'; import { useRouter, usePathname } from 'next/navigation'; import { MY_RECRUIT_PATH, MY_INFO_PATH } from '@/route'; +import { Logo } from '@/components/Logo'; +import { cn } from '@/utils'; const SIDEBAR_CLASSNAME = { expanded: 'w-[220px]', @@ -21,12 +23,12 @@ export function Sidebar() { return (