Refactor: Detail페이지 useSkeleton 적용 (#305)

co-KKIRI · Apr 2, 2024 · f0165bc · f0165bc
1 parent a41a5ac
commit f0165bc
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 6 deletions.
diff --git a/co-kkiri/src/components/commons/Skeleton/elements/DefaultSkeleton.ts b/co-kkiri/src/components/commons/Skeleton/elements/DefaultSkeleton.ts
@@ -14,7 +14,7 @@ const DefaultSkeleton = styled.div`
   background-color: #dbdbdb;
   position: relative;
   overflow: hidden;
-  animation: ${loading} 1.7s ease-in-out infinite;
+  animation: ${loading} 1.5s ease-in-out infinite;
 
   &:before {
     content: "";

diff --git a/co-kkiri/src/components/domains/detail/DetailCard.tsx b/co-kkiri/src/components/domains/detail/DetailCard.tsx
@@ -4,6 +4,7 @@ import DetailCardSkeleton from "@/components/commons/Skeleton/DetailCardSkeleton
 import { PostDetails } from "@/lib/api/post/type";
 import { formatDate } from "@/utils/formatDate";
 import { postDetailInitialData } from "@/lib/initialData/detail";
+import useSkeleton from "@/hooks/useSkeleton";
 
 interface DetailCardProps {
   postDetails: PostDetails;
@@ -15,10 +16,11 @@ interface DetailCardProps {
 export default function DetailCard({ postDetails, className, cardRef, isLoading }: DetailCardProps) {
   const { type, recruitEndAt, progressPeriod, positions, progressWay, contactWay, capacity, stacks, link } =
     postDetails;
+  const isVisibleSkeleton = useSkeleton(isLoading);
 
   return (
     <div className={className} ref={cardRef}>
-      {isLoading || postDetails === postDetailInitialData ? (
+      {isVisibleSkeleton || postDetails === postDetailInitialData ? (
         <DetailCardSkeleton page="detail" />
       ) : (
         <ProjectDetailCard

diff --git a/co-kkiri/src/components/domains/detail/RecruitmentPost/index.tsx b/co-kkiri/src/components/domains/detail/RecruitmentPost/index.tsx
@@ -9,6 +9,7 @@ import { PostDetails, PostApplyStatus } from "@/lib/api/post/type";
 import { ContentSkeleton, TitleSkeleton } from "@/components/commons/Skeleton/TextSkeleton";
 import UserProfileSkeleton from "@/components/commons/Skeleton/UserProfileSkeleton";
 import { postDetailInitialData } from "@/lib/initialData/detail";
+import useSkeleton from "@/hooks/useSkeleton";
 
 interface RecruitmentPostProps {
   postDetails: PostDetails;
@@ -28,6 +29,7 @@ export default function RecruitmentPost({ isLoading, postDetails, postApplyStatu
     viewCount,
     scrapCount,
   } = postDetails;
+  const isVisibleSkeleton = useSkeleton(isLoading);
 
   const userInfo = { nickname, profileImageUrl, id };
   const isMine = postApplyStatus === "OWNER";
@@ -36,14 +38,14 @@ export default function RecruitmentPost({ isLoading, postDetails, postApplyStatu
 
   return (
     <S.Container className={className}>
-      {isLoading || postDetails === postDetailInitialData ? (
+      {isVisibleSkeleton || postDetails === postDetailInitialData ? (
         <TitleSkeleton page="detail" />
       ) : (
         <S.Title>{postTitle}</S.Title>
       )}
       <S.Box>
         <S.PostInfoWrapper>
-          {isLoading || postDetails === postDetailInitialData ? (
+          {isVisibleSkeleton || postDetails === postDetailInitialData ? (
             <UserProfileSkeleton />
           ) : (
             <>
@@ -56,7 +58,7 @@ export default function RecruitmentPost({ isLoading, postDetails, postApplyStatu
         {isMine && <PostManagementButtons />}
       </S.Box>
       <S.HorizontalDivider />
-      {isLoading || postDetails === postDetailInitialData ? (
+      {isVisibleSkeleton || postDetails === postDetailInitialData ? (
         <ContentSkeleton />
       ) : (
         <S.Content dangerouslySetInnerHTML={sanitizedContent} />

diff --git a/co-kkiri/src/components/domains/detail/StatusBasedButton.tsx b/co-kkiri/src/components/domains/detail/StatusBasedButton.tsx
@@ -13,6 +13,7 @@ import TOAST from "@/constants/toast";
 import { useNavigate } from "react-router-dom";
 import { useHandleError } from "@/hooks/useHandleError";
 import ButtonSkeleton from "@/components/commons/Skeleton/ButtonSkeleton";
+import useSkeleton from "@/hooks/useSkeleton";
 
 interface MappedButtonProps {
   postApplyStatus: PostApplyStatus;
@@ -37,6 +38,7 @@ export default function StatusBasedButton({
   const pushToast = useToast();
   const navigate = useNavigate();
   const handleError = useHandleError();
+  const isVisibleSkeleton = useSkeleton(isLoading);
 
   const { applyMutation, cancelMutation } = usePostMutation();
 
@@ -93,7 +95,7 @@ export default function StatusBasedButton({
 
   return (
     <div className={className}>
-      {isLoading || !postApplyStatus ? (
+      {isVisibleSkeleton || !postApplyStatus ? (
         <ButtonSkeleton />
       ) : (
         <StyledButton