🔀 :: 기업, 모집의뢰서 리스트 스켈레톤 UI 추가

src/app/companies/page.tsx

@@ -4,7 +4,7 @@ import TextFiled from "@/components/common/TextFiled";
 import useForm from "@/hook/useForm";
 import { useEffect, useState } from "react";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
-import CompanyCard from "@/components/CompanyCard";
+import CompanyCard from "@/components/company/CompanyCard";
 import Pagination from "@/components/common/Pagination";
 
 export default function CompanyListPage() {

src/app/globals.css

@@ -2,6 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer components {
+  .skeltonUi {
+    @apply bg-[#f7f7f7] relative;
+  }
+}
+
 * {
   margin: 0;
   padding: 0;

src/app/recruitments/page.tsx

@@ -1,6 +1,6 @@
 import Pagination from "@/components/common/Pagination";
 import Filter from "@/components/recruitments/filter";
-import RecruitmentsCard from "@/components/RecruitmentsCard";
+import RecruitmentsCard from "@/components/recruitments/RecruitmentsCard";
 
 export default function Recruitments() {
   return (

src/components/CardList.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import CompanyCard from "./CompanyCard";
-import RecruitmentsCard from "./RecruitmentsCard";
+import CompanyCard from "./company/CompanyCard";
+import RecruitmentsCard from "./recruitments/RecruitmentsCard";
 
 interface PropsType {
   listType: "Company" | "Recruitments" | "BookMark";

src/components/Suggestion.tsx

@@ -1,12 +1,12 @@
-import CompanyCard from "./CompanyCard";
-import RecruitmentsCard from "./RecruitmentsCard";
+
+import CompanyCard from "./company/CompanyCard";
+import RecruitmentsCard from "./recruitments/RecruitmentsCard";
 import SuggestionHeader from "./SuggestionHeader";
 
 interface PropsType {
   listType: "Company" | "Recruitments" | "BookMark";
 }
 
-
 export default function Suggestion({ listType }: PropsType) {
   return (
     <div className="flex flex-col items-start w-full">

src/components/SuggestionHeader.tsx

@@ -2,22 +2,23 @@
 
 import { Icon } from "@team-return/design-system";
 import { MyProfile } from "@/apis/students";
+import Link from "next/link";
 
 interface PropsType {
   listType: "Company" | "Recruitments" | "BookMark";
 }
 
 export default function SuggestionHeader({ listType }: PropsType) {
   const { data } = MyProfile();
-  
-  const fix_data = {
+
+  const suggestionHeaderDummy = {
     Company: {
       title: "🏢 이런 기업은 어떠세요?",
-      router: "/company",
+      router: "/companies",
     },
     Recruitments: {
-      title: `👩‍💻 ${data?.data.student_name || '사용자'}님의 관심 분야에요`,
-      router: "/recruitements",
+      title: `👩‍💻 ${data?.data.student_name || "사용자"}님의 관심 분야에요`,
+      router: "/recruitments",
     },
     BookMark: {
       title: "📌 내가 저장한 모집의뢰서",
@@ -26,12 +27,17 @@ export default function SuggestionHeader({ listType }: PropsType) {
   return (
     <header className="flex mb-[12px]">
       <div className="flex gap-[10px] items-center text-h5 leading-h5 font-b">
-        <p>{fix_data[listType].title}</p>
+        <p>{suggestionHeaderDummy[listType].title}</p>
       </div>
-      <button className="w-[120px] h-[32px] flex items-end justify-center text-b3 leading-b3 text-[#7f7f7f] font-m bg-none border-none cursor-pointer">
-        전체보기
-        <Icon icon="Chevron" direction="right" size={18} color="gray60" />
-      </button>
+      {listType !== "BookMark" && (
+        <Link
+          href={suggestionHeaderDummy[listType].router}
+          className="w-[120px] h-[32px] flex items-end justify-center text-b3 leading-b3 text-[#7f7f7f] font-m bg-none border-none cursor-pointer"
+        >
+          전체보기
+          <Icon icon="Chevron" direction="right" size={18} color="gray60" />
+        </Link>
+      )}
     </header>
   );
 }

src/components/common/Skelton/CompanySkelton.tsx

@@ -0,0 +1,21 @@
+import Shimmer from "./Shimmer";
+
+export default function CompaniesSkelton() {
+  return (
+    <>
+      {Array.from({ length: 9 }, () => (
+        <div className="bg-[#ffffff] w-full rounded-[14px]">
+          <div className="skeltonUi w-full h-[12vw] rounded-[14px] relative overflow-hidden">
+            <Shimmer />
+          </div>
+          <div className="skeltonUi w-full h-8 rounded-[6px] mt-4 relative overflow-hidden">
+            <Shimmer />
+          </div>
+          <div className="skeltonUi w-2/3 h-6 rounded-[6px] mt-2 relative overflow-hidden">
+            <Shimmer />
+          </div>
+        </div>
+      ))}
+    </>
+  );
+}

src/components/common/Skelton/Shimmer.tsx

@@ -0,0 +1,7 @@
+export default function Shimmer() {
+  return (
+    <div className="absolute top-0 left-0 w-full h-full animate-loading">
+      <div className="w-1/2 h-full bg-[rgba(255,255,255,0.4)] skew-x-[-20deg] shadow-[0_0_30px_30px_rgba(255,255,255,0.05)]" />
+    </div>
+  );
+}

src/components/common/Skelton/SkeltonElement.tsx

@@ -0,0 +1,24 @@
+import Shimmer from "./Shimmer";
+
+export default function RecruitmentSkelton() {
+  return (
+    <>
+      {Array.from({ length: 12 }, () => (
+        <div className="w-full rounded-[14px] overflow-hidden">
+          <div className="w-full h-[10vw] skeltonUi relative ">
+            <Shimmer />
+          </div>
+          <div className="w-full h-8 rounded-[6px] skeltonUi mt-4 ">
+            <Shimmer />
+          </div>
+          <div className="w-2/3 h-6 rounded-[6px] skeltonUi mt-2 ">
+            <Shimmer />
+          </div>
+          <div className="w-1/3 h-8 rounded-[20px] skeltonUi mt-2 mb-5 ">
+            <Shimmer />
+          </div>
+        </div>
+      ))}
+    </>
+  );
+}

src/components/CompanyCard.tsx → src/components/company/CompanyCard.tsx

@@ -5,25 +5,27 @@ import { useSearchParams } from "next/navigation";
 import { GetCompaniesList } from "@/apis/companies";
 import { useEffect, useState } from "react";
 import { CompaniesListType } from "@/apis/companies/type";
-import HoverPrefetchLink from "./common/HoverPrefetchLink";
+import HoverPrefetchLink from "../common/HoverPrefetchLink";
 import { Icon } from "@team-return/design-system";
+import CompaniesSkelton from "../common/Skelton/CompanySkelton";
 
 export default function CompanyCard() {
   const getParams = useSearchParams();
   const [companyList, setCompanyList] = useState<CompaniesListType[]>([]);
 
-  const res = GetCompaniesList(getParams.toString());
+  const {data: compnayList, isLoading} = GetCompaniesList(getParams.toString());
 
   useEffect(() => {
-    if (res.data?.data.companies) {
+    if (compnayList?.data.companies) {
       (() => {
-        setCompanyList(res.data.data.companies);
+        setCompanyList(compnayList.data.companies);
       })();
     }
-  }, [res]);
+  }, [compnayList]);
 
   return (
     <div className="w-full my-[10px] grid grid-cols-2 md:grid-cols-3 gap-[2vw]">
+      {isLoading && <CompaniesSkelton />}
       {companyList.map(
         ({ logo_url, name, take, has_recruitment, id }, index) => (
           <HoverPrefetchLink href={`/companies/detail?id=${id}`} key={index}>

src/components/RecruitmentsCard.tsx → src/components/recruitments/RecruitmentsCard.tsx

@@ -6,22 +6,24 @@ import React, { useEffect, useState } from "react";
 import { useSearchParams } from "next/navigation";
 import { RecruitmentsListType } from "@/apis/recruitments/type";
 import { GetRecruitmentsList } from "@/apis/recruitments";
-import HoverPrefetchLink from "./common/HoverPrefetchLink";
+import HoverPrefetchLink from "../common/HoverPrefetchLink";
+import RecruitmentSkelton from "../common/Skelton/SkeltonElement";
 
 export default function RecruitmentsCard() {
   const getParams = useSearchParams();
   const [list, setList] = useState<RecruitmentsListType[]>([]);
 
-  const res = GetRecruitmentsList(getParams.toString());
+  const {data:recruitmentsList, isLoading} = GetRecruitmentsList(getParams.toString());
   useEffect(() => {
-    setList((prev) => res.data?.data.recruitments || prev);
-  }, [res]);
+    setList((prev) => recruitmentsList?.data.recruitments || prev);
+  }, [recruitmentsList]);
 
   const tagStyle =
     "text-caption leading-caption text-lightBlue font-r border rounded-full border-[#135C9D] py-1 px-2";
 
   return (
     <div className="w-full mt-5 grid grid-cols-3 md:grid-cols-4 gap-[1.5vw]">
+      {isLoading && <RecruitmentSkelton />}
       {list.map(
         (
           {

tailwind.config.js

@@ -3,6 +3,17 @@ module.exports = {
   content: ["./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     extend: {
+      keyframes: {
+        loading: {
+          "0%": { transform: "translateX(-150%)" },
+          "50%": { transform: "translateX(-60%)" },
+          "100%": { transform: "translateX(150%)" },
+        },
+      },
+      animation: {
+        loading: "loading 2.5s linear infinite",
+      },
+
       boxShadow: {
         elevaiton: "0px 4px 20px 0px rgba(112, 144, 176, 0.15);",
       },