feat(my-recruit): 로딩 스켈레톤 구현 (#34)

* feat(my-recruit): 로딩 스켈레톤 구현

* feat

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() {
       </Dropdown>
       <Spacing size={24} />
 
-      <AsyncBoundaryWithQuery errorFallback={() => <></>} pendingFallback={<></>}>
+      <AsyncBoundaryWithQuery
+        errorFallback={
+          <>
+            <CardSkeleton variant="row" count={5} />
+            <Spacing size={88} />
+          </>
+        }
+        pendingFallback={
+          <>
+            <CardSkeleton variant="row" count={5} />
+            <Spacing size={88} />
+          </>
+        }>
         <AllRecruitList selectedSeason={selectedSeason} />
       </AsyncBoundaryWithQuery>
 

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() {
         <span className="text-heading2 font-semibold">현재 진행중인 공고 모아보기</span>
       </div>
       <Spacing size={24} />
-      <AsyncBoundaryWithQuery>
+      <AsyncBoundaryWithQuery
+        errorFallback={
+          <>
+            <CardSkeleton variant="box" count={2} />
+            <Spacing size={88} />
+          </>
+        }
+        pendingFallback={
+          <>
+            <CardSkeleton variant="box" count={2} />
+            <Spacing size={88} />
+          </>
+        }>
         <ProgressingRecruitList />
       </AsyncBoundaryWithQuery>
     </>

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 (
+    <motion.div
+      variants={{
+        show: {
+          transition: {
+            staggerChildren: 0.1,
+          },
+        },
+      }}
+      initial="hide"
+      animate="show"
+      className={wrapperClassName}>
+      {Array(count)
+        .fill(0)
+        .map((_, index) => (
+          <motion.div
+            key={index}
+            variants={{
+              hide: { opacity: 0.1, scale: 1 },
+              show: { opacity: 1, scale: 0.98, transition: { repeat: Infinity, repeatType: 'reverse', duration: 0.5 } },
+            }}
+            className={itemClassName}
+          />
+        ))}
+    </motion.div>
+  );
+}

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({

src/components/Logo.tsx

@@ -0,0 +1,49 @@
+export function Logo() {
+  return (
+    <svg width="42" height="18" viewBox="0 0 42 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path d="M3.43441 16.071L5.42343 12.4775L1.39249 13.5772L3.43441 16.071Z" fill="#0CC47F" />
+      <path
+        d="M8.20584 5.31051L7.91584 3.64064L9.8988 1.75699L13.0741 2.90586L14.4516 4.38111L13.6354 6.18728L15.3317 6.09142L16.6988 8.32846L16.1945 11.5653L14.2046 12.4462L12.3386 11.8763L11.8024 13.9501L10.1266 15.116L6.75294 13.8613L6.75097 11.3615L4.42429 10.8235L3.52081 8.9727L4.10093 5.24913L6.34823 4.47444L8.20584 5.31051Z"
+        fill="#0CC47F"
+      />
+      <path
+        opacity="0.9"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M13.0036 10.1666L11.1957 9.34769L11.438 8.64078L13.3344 9.10947L13.0036 10.1666Z"
+        fill="#007D4F"
+      />
+      <path
+        opacity="0.9"
+        d="M10.2031 7.46296L10.5432 5.62869L11.6003 5.90878L10.9235 7.6614L10.2031 7.46296Z"
+        fill="#007D4F"
+      />
+      <path
+        opacity="0.9"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8.83031 8.70624L6.84901 8.3798L7.06104 7.48553L8.95683 8.03165L8.83031 8.70624Z"
+        fill="#007D4F"
+      />
+      <path
+        opacity="0.9"
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10.3933 9.70135L10.14 11.4766L9.14099 11.3758L9.66329 9.5415L10.3933 9.70135Z"
+        fill="#007D4F"
+      />
+      <path
+        d="M31.2208 5.62317V3.75693H36.8853V5.62317L35.5765 9.53033L33.5597 8.92262L34.6325 5.62317H31.2208Z"
+        fill="#00A467"
+      />
+      <path d="M40.1037 3.75693H38.1298V9.53033H40.1037V7.62037H41.2838V5.62317H40.1037V3.75693Z" fill="#00A467" />
+      <path d="M31.5857 11.8744V9.96441H40.1037V13.958H38.1298V11.8744H31.5857Z" fill="#00A467" />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M20.4014 3.61185V10.0369H23.8956V11.5309H19.9814V13.4904H29.8072V11.5309H25.913V10.0369H29.4078V3.61185H27.4307V5.08679H25.913V3.61185H23.8956V5.08679H22.3983V3.61185H20.4014ZM22.385 6.91295V8.14636H23.8832V6.91295H22.385ZM25.8437 6.91295V8.14636H27.3658V6.91295H25.8437Z"
+        fill="#00A467"
+      />
+    </svg>
+  );
+}

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 (
     <nav
-      className={`relative flex flex-col items-center px-[16px] py-[32px] h-screen bg-black ${SIDEBAR_CLASSNAME[expanded ? 'expanded' : 'shrinked']}`}>
+      className={`z-[10000] relative flex flex-col px-[16px] py-[32px] h-screen bg-black ${SIDEBAR_CLASSNAME[expanded ? 'expanded' : 'shrinked']}`}>
       <div className="relative mb-[32px]">
-        <div className="w-[40px] h-[40px]" />
+        <Logo />
         <button
           aria-label={expanded ? '사이드바 축소' : '사이드바 확장'}
-          className="absolute top-[50%] translate-y-[-50%] left-[72px]"
+          className={cn('absolute top-[50%] translate-y-[-50%]', expanded ? 'right-0' : 'right-[-62px]')}
           onClick={() => setExpanded(!expanded)}>
           <Icon name="division" color={expanded ? '#5A5C63' : '#AEB0B6'} />
         </button>

src/system/token/zIndex.ts

@@ -1,4 +1,4 @@
 export const zIndex = {
-  tooltip: 10000,
-  overlay: 20000,
+  tooltip: 20000,
+  overlay: 30000,
 } as const;