fix: loading

Author: kyoung-jnn

src/components/HomeSwiper.tsx

@@ -30,9 +30,10 @@ const HomeSwiper = () => {
     })();
   }, []);
 
+  if (isLoading) return <LoadingSpinner />;
+
   return (
     <>
-      {isLoading && <LoadingSpinner />}
       <Swiper
         css={css`
           margin-top: 30px;

src/components/MyWritingSwiper.tsx

@@ -30,9 +30,10 @@ const MyWritingSwiper = () => {
     })();
   }, []);
 
+  if (isLoading) return <LoadingSpinner />;
+
   return (
     <>
-      {isLoading && <LoadingSpinner />}
       <Swiper
         css={css`
           margin-top: 30px;

src/components/OthersDayBook.tsx

@@ -36,9 +36,10 @@ const OthersWriting = () => {
     getData(id);
   }, [id]);
 
+  if (isLoading) return <LoadingSpinner />;
+
   return (
     <>
-      {isLoading && <LoadingSpinner />}
       <Header>
         <Header.Button variety="back" />
         다른 사람 일지

src/components/SwiperFooter.tsx

@@ -1,39 +1,37 @@
-import styled from '@emotion/styled';
-import SwipePrevButton from './SwipePrevButton';
-import SwipeNextButton from './SwipeNextButton';
-import CardIndicator, { CardIndicatorProps } from './CardIndicator';
-import { FC } from 'react';
+import styled from "@emotion/styled";
+import SwipePrevButton from "./SwipePrevButton";
+import SwipeNextButton from "./SwipeNextButton";
+import CardIndicator, { CardIndicatorProps } from "./CardIndicator";
+import { FC } from "react";
 
-interface SwiperFooterProps extends CardIndicatorProps { }
+interface SwiperFooterProps extends CardIndicatorProps {}
 
 const SwiperFooter: FC<SwiperFooterProps> = ({ maxIndex, currentIndex }) => {
-
-    return (
-        <Wrapper>
-            <div>
-                <SwipePrevButton />
-                <CardIndicator maxIndex={maxIndex} currentIndex={currentIndex} />
-                <SwipeNextButton />
-            </div>
-        </Wrapper>
-    );
+  return (
+    <Wrapper>
+      <div>
+        <SwipePrevButton />
+        <CardIndicator maxIndex={maxIndex} currentIndex={currentIndex} />
+        <SwipeNextButton />
+      </div>
+    </Wrapper>
+  );
 };
 
 export default SwiperFooter;
 
 const Wrapper = styled.article`
-    width: 100%;
-    height: 56px;
+  width: 100%;
+  height: 56px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
+  & > div {
+    width: 336px;
     display: flex;
-    justify-content: center;
+    justify-content: space-between;
     align-items: center;
-
-    & > div {
-        width: 336px;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-
-`
+  }
+`;

src/pages/write/index.tsx

@@ -1,22 +1,22 @@
-import Header from '@components/Header';
-import Button from '@components/Button';
-import { css } from '@emotion/react';
-import styled from '@emotion/styled';
-import useStep, { STEP, StepContent, StepContentMap } from '@hooks/useStep';
-import getFontStyle from '@theme/font/getFontSize';
-import 쓰기 from '@pages/write/쓰기';
-import 완료 from '@pages/write/완료';
-import 탄생 from '@pages/write/탄생';
-import 형태 from '@pages/write/형태';
-import 선택 from '@pages/write/선택';
-import { useAtom, useAtomValue } from 'jotai';
-import { daybookAtom, tagInputAtom } from '@state/daybook';
-import { useEffect } from 'react';
-import { RESET } from 'jotai/utils';
-import { fadeLeftAnimation } from '@theme/animation';
-import { useSearchParams } from 'react-router-dom';
-import { paperTypeState } from '@state/paperType';
-import LoadingSpinner from '@components/LoadingSpinner';
+import Header from "@components/Header";
+import Button from "@components/Button";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import useStep, { STEP, StepContent, StepContentMap } from "@hooks/useStep";
+import getFontStyle from "@theme/font/getFontSize";
+import 쓰기 from "@pages/write/쓰기";
+import 완료 from "@pages/write/완료";
+import 탄생 from "@pages/write/탄생";
+import 형태 from "@pages/write/형태";
+import 선택 from "@pages/write/선택";
+import { useAtom, useAtomValue } from "jotai";
+import { daybookAtom, tagInputAtom } from "@state/daybook";
+import { useEffect } from "react";
+import { RESET } from "jotai/utils";
+import { fadeLeftAnimation } from "@theme/animation";
+import { useSearchParams } from "react-router-dom";
+import { paperTypeState } from "@state/paperType";
+import LoadingSpinner from "@components/LoadingSpinner";
 
 const STEP_COMPONENTS = {
   [STEP.선택]: 선택,
@@ -29,7 +29,7 @@ const STEP_COMPONENTS = {
 function Write() {
   const { isLoading, step, nextStep, previousStep } = useStep();
   const [searchParams] = useSearchParams();
-  const query = searchParams.get('from');
+  const query = searchParams.get("from");
 
   const StepComponent = STEP_COMPONENTS[step];
   const { title, description, buttonText } = StepContentMap.get(
@@ -42,41 +42,42 @@ function Write() {
 
   const buttonDisableHandler = () => {
     if (!paperTypeAtom) return true;
-    if (step === '쓰기' && daybook.content.trim().length === 0) return true;
-    if (step === '탄생' && daybook.category.length === 0) return true;
-    if (step === '형태' && daybook.hashtags.length === 0) return true;
+    if (step === "쓰기" && daybook.content.trim().length === 0) return true;
+    if (step === "탄생" && daybook.category.length === 0) return true;
+    if (step === "형태" && daybook.hashtags.length === 0) return true;
     return false;
   };
 
   useEffect(() => {
     setDaybook(RESET);
   }, [setDaybook]);
 
+  if (isLoading) return <LoadingSpinner />;
+
   return (
     <>
-      {isLoading && <LoadingSpinner />}
       <Header title="일지 작성하기">
-        {step !== '완료' && (
+        {step !== "완료" && (
           <Header.Button variety="back" onClick={previousStep} />
         )}
       </Header>
       <Wrapper>
         <p
           css={css`
             white-space: pre-wrap;
-            ${getFontStyle('header1')}
+            ${getFontStyle("header1")}
             ${fadeLeftAnimation}
           `}
         >
-          {step === '완료' && query === 'new'
-            ? '축하합니다!\n첫 일지 기록을 완료하였습니다'
+          {step === "완료" && query === "new"
+            ? "축하합니다!\n첫 일지 기록을 완료하였습니다"
             : title}
         </p>
         <p
           css={css`
             white-space: pre-wrap;
             margin-top: 9px;
-            ${getFontStyle('title4')}
+            ${getFontStyle("title4")}
             ${fadeLeftAnimation}
           `}
         >