fix: loading

T1F5 · Apr 6, 2024 · ce71f52 · ce71f52
1 parent 405d54c
commit ce71f52
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 43 deletions.
diff --git a/src/components/HomeSwiper.tsx b/src/components/HomeSwiper.tsx
@@ -17,17 +17,22 @@ const HomeSwiper = () => {
   const [data, setData] = useState<GetDaybookResponse[]>([]);
   const [currentIndex, setCurrentIndex] = useState<number>(0);
 
+  const [isLoading, setIsLoading] = useState(false);
+
   useEffect(() => {
     (async () => {
+      setIsLoading(true);
+
       const { data } = await getRandomDaybooks();
       setData(data);
+
+      setIsLoading(false);
     })();
   }, []);
 
-  if (!data?.length) return <LoadingSpinner />;
-
   return (
     <>
+      {isLoading && <LoadingSpinner />}
       <Swiper
         css={css`
           margin-top: 30px;

diff --git a/src/components/MyWritingSwiper.tsx b/src/components/MyWritingSwiper.tsx
@@ -17,17 +17,22 @@ const MyWritingSwiper = () => {
   const [data, setData] = useState<GetDaybookResponse[]>([]);
   const [currentIndex, setCurrentIndex] = useState<number>(0);
 
+  const [isLoading, setIsLoading] = useState(false);
+
   useEffect(() => {
     (async () => {
+      setIsLoading(true);
+
       const { data } = await getDaybookList();
       setData(data);
+
+      setIsLoading(false);
     })();
   }, []);
 
-  if (!data?.length) return <LoadingSpinner />;
-
   return (
     <>
+      {isLoading && <LoadingSpinner />}
       <Swiper
         css={css`
           margin-top: 30px;

diff --git a/src/components/OthersDayBook.tsx b/src/components/OthersDayBook.tsx
@@ -10,51 +10,56 @@ import { getDaybook } from "@api";
 import LoadingSpinner from "./LoadingSpinner";
 
 const OthersWriting = () => {
+  const { id } = useParams();
 
-    const { id } = useParams();
+  const [daybookData, setDaybookData] = useState<GetDaybookResponse | null>(
+    null
+  );
 
-    const [daybookData, setDaybookData] = useState<GetDaybookResponse | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
 
-    const getData = async (id: string) => {
-        const res = await getDaybook(id);
-        if (!res || !res.data) return;
+  const getData = async (id: string) => {
+    setIsLoading(true);
 
-        setDaybookData(res.data);
+    try {
+      const res = await getDaybook(id);
+      if (!res || !res.data) return;
+      setDaybookData(res.data);
+    } finally {
+      setIsLoading(false);
     }
+  };
 
-    useEffect(() => {
-        if (!id) return;
+  useEffect(() => {
+    if (!id) return;
 
-        getData(id);
-    }, [id]);
+    getData(id);
+  }, [id]);
 
-    if (!daybookData) return <LoadingSpinner />;
-
-    return (
-        <>
-            <Header>
-                <Header.Button variety="back" />
-                다른 사람 일지
-            </Header>
-
-            <Wrapper>
-                {daybookData && <Card isDetail daybook={daybookData} />}
-            </Wrapper>
-
-            <OthersWritingFooter />
-        </>
-    );
+  return (
+    <>
+      {isLoading && <LoadingSpinner />}
+      <Header>
+        <Header.Button variety="back" />
+        다른 사람 일지
+      </Header>
+      <Wrapper>
+        {daybookData && <Card isDetail daybook={daybookData} />}
+      </Wrapper>
+      <OthersWritingFooter />
+    </>
+  );
 };
 
 export default OthersWriting;
 
 const Wrapper = styled.div`
-    width: 100%;
-    padding-left: 16px;
-    padding-right: 16px;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    ${fadeLeftDelayAnimation};
-`
+  width: 100%;
+  padding-left: 16px;
+  padding-right: 16px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  ${fadeLeftDelayAnimation};
+`;
diff --git a/src/components/OthersDayBookFooter.tsx b/src/components/OthersDayBookFooter.tsx
@@ -6,9 +6,7 @@ const OthersWritingFooter = () => {
   return (
     <Footer>
       <div>
-        <Link to={'/write'}>
-          나도 일지 작성하기
-        </Link>
+        <Link to={"/write"}>나도 일지 작성하기</Link>
       </div>
     </Footer>
   );
@@ -43,7 +41,7 @@ const Footer = styled.footer`
     display: flex;
     justify-content: center;
     align-items: center;
-  
+
     max-width: 362px;
   }
 `;