Skeleton 적용

src/app/event/[organization]/[id]/page.tsx

@@ -6,14 +6,13 @@ import { usePathname } from 'next/navigation';
 
 const page = () => {
   const pathname = usePathname();
-  const organization = pathname.split('/')[2];
   const id = pathname.split('/')[3];
 
   const { returnEventDetailItem } = useCommonDetail();
 
-  let noticeItem = returnEventDetailItem(organization, parseInt(id));
+  let { data: noticeItem, isLoading } = returnEventDetailItem(parseInt(id));
 
-  return <CommonDetailComponent content={noticeItem} />;
+  return <CommonDetailComponent content={noticeItem} isLoading={isLoading} />;
 };
 
 export default page;

src/app/faq/[organization]/page.tsx

@@ -6,6 +6,7 @@ import useOrganizationRouter from '@/features/contentList/model/useOrganizationR
 import AccordionComponent from '@/features/content/ui/AccordionComponent';
 import { usePathname } from 'next/navigation';
 import useCommonDetail from '@/features/content/model/useCommonDetail';
+import { Skeleton } from '@/shared/ui/ui/skeleton';
 
 const Page = () => {
   useOrganizationRouter();
@@ -14,14 +15,22 @@ const Page = () => {
 
   const { returnFaqDetailItem } = useCommonDetail();
 
-  let faqData = returnFaqDetailItem(organization);
-  const faqItem = faqData?.pages.flatMap((page) => page.content);
+  const { data, isLoading } = returnFaqDetailItem(organization);
+  const faqItem = data?.pages.flatMap((page) => page.content);
 
   return (
     <div className="flex flex-col space-y-3">
       <Title text="FAQ" />
       <OrganizationTitleSelectComponent />
-      <AccordionComponent items={faqItem} />
+      {isLoading ? (
+        <div className="flex flex-col gap-6">
+          {Array.from({ length: 6 }).map((_, index) => (
+            <Skeleton key={index} className="h-7 w-80" />
+          ))}
+        </div>
+      ) : (
+        <AccordionComponent items={faqItem} />
+      )}
     </div>
   );
 };

src/app/notice/[organization]/[id]/page.tsx

@@ -11,9 +11,12 @@ const page = () => {
 
   const { returnNoticeDetailItem } = useCommonDetail();
 
-  let noticeItem = returnNoticeDetailItem(organization, parseInt(id));
+  let { data: noticeItem, isLoading } = returnNoticeDetailItem(
+    organization,
+    parseInt(id),
+  );
 
-  return <CommonDetailComponent content={noticeItem} />;
+  return <CommonDetailComponent content={noticeItem} isLoading={isLoading} />;
 };
 
 export default page;

src/app/proceeding/[organization]/[id]/page.tsx

@@ -6,13 +6,14 @@ import { usePathname } from 'next/navigation';
 
 const page = () => {
   const pathname = usePathname();
-  const organization = pathname.split('/')[2];
   const id = pathname.split('/')[3];
 
   const { returnProceedingDetailItem } = usePdfDetail();
-  const ruleItem = returnProceedingDetailItem(organization, parseInt(id));
+  const { data: ruleItem, isLoading } = returnProceedingDetailItem(
+    parseInt(id),
+  );
 
-  return <PdfViewerDetailComponent item={ruleItem} />;
+  return <PdfViewerDetailComponent item={ruleItem} isLoading={isLoading} />;
 };
 
 export default page;

src/app/rule/[organization]/[id]/page.tsx

@@ -6,13 +6,12 @@ import { usePathname } from 'next/navigation';
 
 const page = () => {
   const pathname = usePathname();
-  const organization = pathname.split('/')[2];
   const id = pathname.split('/')[3];
 
   const { returnRuleDetailItem } = usePdfDetail();
-  const ruleItem = returnRuleDetailItem(organization, parseInt(id));
+  const { data: ruleItem, isLoading } = returnRuleDetailItem(parseInt(id));
 
-  return <PdfViewerDetailComponent item={ruleItem} />;
+  return <PdfViewerDetailComponent item={ruleItem} isLoading={isLoading} />;
 };
 
 export default page;

src/features/account/ui/Profile.tsx

@@ -6,6 +6,7 @@ import Link from 'next/link';
 
 import { useProfile } from '../model/useProfile';
 import { useEffect } from 'react';
+import { Skeleton } from '@/shared/ui/ui/skeleton';
 
 const Profile = () => {
   const { data, isLoading, isError, refetch } = useProfile();
@@ -14,36 +15,38 @@ const Profile = () => {
     refetch();
   }, []);
 
-  if (isLoading) {
-    return <div>프로필 로딩중...</div>;
-  }
-
   if (isError) {
     return <div>프로필을 불러오는 데 실패했습니다. 관리자에게 문의하세요.</div>;
   }
 
-  if (data) {
-    const college = data.data.affiliationListDto?.affiliationTypeList[0];
-    const department = data.data.affiliationListDto?.affiliationTypeList[1];
+  const college = data?.data.affiliationListDto?.affiliationTypeList[0];
+  const department = data?.data.affiliationListDto?.affiliationTypeList[1];
 
-    return (
-      <div className="flex justify-between items-center">
+  return (
+    <div className="flex justify-between items-center">
+      {isLoading ? (
+        <div className="flex flex-col gap-3">
+          <Skeleton className="h-8 w-20" />
+          <Skeleton className="h-4 w-32" />
+          <Skeleton className="h-4 w-40" />
+        </div>
+      ) : (
         <div className="flex flex-col space-y-2">
-          <Title text={`${data.data.memberName} 님`} />
+          <Title text={`${data?.data.memberName} 님`} />
           <div className="flex flex-col space-y-1">
-            <p>{data.data.email}</p>
+            <p>{data?.data.email}</p>
             <div className="flex items-center space-x-1 text-gray-300 text-sm">
               <p>{college?.affiliationCode}</p>
               <p>{department?.affiliationCode}</p>
             </div>
           </div>
         </div>
-        <Button variant="secondary">
-          <Link href="/modify">정보 수정</Link>
-        </Button>
-      </div>
-    );
-  }
+      )}
+      <Button variant="secondary">
+        <Link href="/modify">정보 수정</Link>
+      </Button>
+    </div>
+  );
 };
 
 export default Profile;

src/features/content/model/useCommonDetail.ts

@@ -6,79 +6,50 @@ import {
 } from '../api/queries';
 
 const useCommonDetail = () => {
-  //공지사항 detail
   const returnNoticeDetailItem = (organization: string, id: number) => {
+    let data;
+    let isLoading = true;
+
     if (organization === 'general') {
-      const { data: generalData, isSuccess: isSuccessGeneral } =
-        useGetCampusNoticeDetail(id);
-      if (isSuccessGeneral) {
-        return generalData;
-      }
-    } else if (organization === 'studentCouncil') {
-      const { data: studentCouncilData, isSuccess: isSuccessStudentCouncil } =
-        useGetNoticeDetail(id);
-      if (isSuccessStudentCouncil) {
-        return studentCouncilData;
-      }
-    } else if (organization === 'college') {
-      const { data: collegeData, isSuccess: isSuccessCollege } =
-        useGetNoticeDetail(id);
-      if (isSuccessCollege) {
-        return collegeData;
-      }
-    } else if (organization === 'department') {
-      const { data: departmentData, isSuccess: isSuccessDepartment } =
-        useGetNoticeDetail(id);
-      if (isSuccessDepartment) {
-        return departmentData;
-      }
+      const response = useGetCampusNoticeDetail(id);
+      data = response.data;
+      isLoading = response.isLoading;
+    } else {
+      const response = useGetNoticeDetail(id);
+      data = response.data;
+      isLoading = response.isLoading;
     }
+
+    return { data, isLoading };
   };
 
-  //행사 detail
-  const returnEventDetailItem = (organization: string, id: number) => {
-    if (organization === 'studentCouncil') {
-      const { data: studentCouncilData, isSuccess: isSuccessStudentCouncil } =
-        useGetEventDetail(id);
-      if (isSuccessStudentCouncil) {
-        return studentCouncilData;
-      }
-    } else if (organization === 'college') {
-      const { data: collegeData, isSuccess: isSuccessCollege } =
-        useGetEventDetail(id);
-      if (isSuccessCollege) {
-        return collegeData;
-      }
-    } else if (organization === 'department') {
-      const { data: departmentData, isSuccess: isSuccessDepartment } =
-        useGetEventDetail(id);
-      if (isSuccessDepartment) {
-        return departmentData;
-      }
-    }
+  // 행사 detail
+  const returnEventDetailItem = (id: number) => {
+    let data;
+    let isLoading = true;
+
+    const response = useGetEventDetail(id);
+    data = response.data;
+    isLoading = response.isLoading;
+
+    return { data, isLoading };
   };
 
   //faq detail
-  const returnFaqDetailItem = (organization: string) => {
+  const getFaq = (organization: string) => {
     if (organization === 'studentCouncil') {
-      const { data: studentCouncilData, isSuccess: isSuccessStudentCouncil } =
-        useGetFaq('총학');
-      if (isSuccessStudentCouncil) {
-        return studentCouncilData;
-      }
+      return useGetFaq('총학');
     } else if (organization === 'college') {
-      const { data: collegeData, isSuccess: isSuccessCollege } =
-        useGetFaq('단과대');
-      if (isSuccessCollege) {
-        return collegeData;
-      }
+      return useGetFaq('단과대');
     } else if (organization === 'department') {
-      const { data: departmentData, isSuccess: isSuccessDepartment } =
-        useGetFaq('학과');
-      if (isSuccessDepartment) {
-        return departmentData;
-      }
+      return useGetFaq('학과');
     }
+    return { data: undefined, isLoading: false };
+  };
+
+  const returnFaqDetailItem = (organization: string) => {
+    const { data, isLoading } = getFaq(organization);
+    return { data, isLoading };
   };
 
   return { returnNoticeDetailItem, returnEventDetailItem, returnFaqDetailItem };

src/features/content/model/usePdfDetail.ts

@@ -1,50 +1,16 @@
 import { useGetRuleDetail, useGetProceedingDetail } from '../api/queries';
 
 const usePdfDetail = () => {
-  //회칙/학칙 detail
-  const returnRuleDetailItem = (organization: string, id: number) => {
-    if (organization === 'studentCouncil') {
-      const { data: studentCouncilData, isSuccess: isSuccessStudentCouncil } =
-        useGetRuleDetail(id);
-      if (isSuccessStudentCouncil) {
-        return studentCouncilData;
-      }
-    } else if (organization === 'college') {
-      const { data: collegeData, isSuccess: isSuccessCollege } =
-        useGetRuleDetail(id);
-      if (isSuccessCollege) {
-        return collegeData;
-      }
-    } else if (organization === 'department') {
-      const { data: departmentData, isSuccess: isSuccessDepartment } =
-        useGetRuleDetail(id);
-      if (isSuccessDepartment) {
-        return departmentData;
-      }
-    }
+  // 회칙/학칙 detail
+  const returnRuleDetailItem = (id: number) => {
+    const { data, isLoading } = useGetRuleDetail(id);
+    return { data, isLoading };
   };
 
-  //회의록 detail
-  const returnProceedingDetailItem = (organization: string, id: number) => {
-    if (organization === 'studentCouncil') {
-      const { data: studentCouncilData, isSuccess: isSuccessStudentCouncil } =
-        useGetProceedingDetail(id);
-      if (isSuccessStudentCouncil) {
-        return studentCouncilData;
-      }
-    } else if (organization === 'college') {
-      const { data: collegeData, isSuccess: isSuccessCollege } =
-        useGetProceedingDetail(id);
-      if (isSuccessCollege) {
-        return collegeData;
-      }
-    } else if (organization === 'department') {
-      const { data: departmentData, isSuccess: isSuccessDepartment } =
-        useGetProceedingDetail(id);
-      if (isSuccessDepartment) {
-        return departmentData;
-      }
-    }
+  // 회의록 detail
+  const returnProceedingDetailItem = (id: number) => {
+    const { data, isLoading } = useGetProceedingDetail(id);
+    return { data, isLoading };
   };
 
   return { returnRuleDetailItem, returnProceedingDetailItem };