feat: 로딩 적용

apps/jurumarble/src/app/drink-info/[id]/components/DrinkInfoContainer.tsx

@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { Button } from "components/button";
 import Chip from "components/Chip";
+import Loading from "components/Loading";
 import VoteHeader from "components/VoteHeader";
 import Image from "next/image";
 import { useParams, useRouter } from "next/navigation";
@@ -22,9 +23,9 @@ const DrinkInfoContainer = () => {
   const { colors } = useTheme();
   const stampColor = isStampedDrink?.enjoyed ? colors.main_01 : colors.black_05;
 
-  if (isLoading) return <div>loading...</div>;
-  if (isError) return <div>error...</div>;
-  if (!data) return <div>no data...</div>;
+  if (isLoading) return <Loading />;
+  if (isError) return <></>;
+  if (!data) return <></>;
 
   const {
     name,

apps/jurumarble/src/app/page.tsx

@@ -20,7 +20,9 @@ function MainPage() {
         type="text/javascript"
         src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${KAKAO_MAP_API_KEY}&libraries=services&autoload=false`}
       ></Script>
+
       <Header />
+
       <TopSection>
         <BannerImageWrapper>
           <Image alt="배너" src={MainBannerImage} fill style={{ borderRadius: "16px" }} />

apps/jurumarble/src/app/vote/[id]/page.tsx

@@ -17,6 +17,7 @@ import useFilteredStatisticsService from "./services/useFilterStatisticsService"
 import VoteAnalyzeBar from "./components/VoteAnalyzeBar";
 import { useState } from "react";
 import useBookmarkService from "services/useBookmarkService";
+import Loading from "components/Loading";
 
 function Detail() {
   const params = useParams();
@@ -50,7 +51,7 @@ function Detail() {
     isError: isStatisticsError,
   } = voteStatisticsQuery;
 
-  if (isLoading || isStatisticsLoading) return <div>로딩중</div>;
+  if (isLoading || isStatisticsLoading) return <Loading />;
   if (isError || isStatisticsError) return <div>에러</div>;
   if (!data || !statistics) return <div></div>;
   const {

apps/jurumarble/src/app/vote/page.tsx

@@ -15,6 +15,7 @@ import useExecuteVoteService from "./[id]/services/useExecuteVoteService";
 import useInfiniteMainListService from "./services/useGetVoteListService";
 import { toast } from "react-toastify";
 import useBookmarkService from "services/useBookmarkService";
+import Loading from "components/Loading";
 
 export type Drag = "up" | "down" | null;
 
@@ -58,7 +59,7 @@ function VoteHomePage() {
     mutate(select);
   };
 
-  if (isLoading) return <PageInner drag={drag}>로딩중</PageInner>;
+  if (isLoading) return <Loading />;
   if (isError) return <PageInner drag={drag}>에러</PageInner>;
 
   return (

apps/jurumarble/src/components/Loading.tsx

@@ -0,0 +1,106 @@
+"use client";
+
+import React from "react";
+import styled from "styled-components";
+
+const Loading = () => {
+  return (
+    <Box>
+      <div className="loader4"></div>
+    </Box>
+  );
+};
+
+const Box = styled.div`
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #4a3c3c53;
+  z-index: 999;
+  transition: all 0.2s ease;
+
+  .loader4 {
+    position: relative;
+    width: 150px;
+    height: 20px;
+    top: 45%;
+    top: -webkit-calc(50% - 10px);
+    top: calc(50% - 10px);
+    left: 25%;
+    left: -webkit-calc(50% - 75px);
+    left: calc(50% - 75px);
+
+    background-color: #fff;
+  }
+
+  .loader4:before {
+    content: "";
+    position: absolute;
+    background-color: ${({ theme }) => theme.colors.main_01};
+    top: 0px;
+    left: 0px;
+    height: 20px;
+    width: 0px;
+    z-index: 0;
+    opacity: 1;
+    -webkit-transform-origin: 100% 0%;
+    transform-origin: 100% 0%;
+    -webkit-animation: loader4 10s ease-in-out infinite;
+    animation: loader4 2s ease-in-out infinite;
+  }
+
+  .loader4:after {
+    content: "LOADING ...";
+    color: ${({ theme }) => theme.colors.main_01};
+    font-weight: 200;
+    font-size: 16px;
+    position: absolute;
+    width: 100%;
+    height: 20px;
+    line-height: 20px;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    top: 0;
+  }
+
+  @-webkit-keyframes loader4 {
+    0% {
+      width: 0px;
+    }
+    70% {
+      width: 100%;
+      opacity: 1;
+    }
+    90% {
+      opacity: 0;
+      width: 100%;
+    }
+    100% {
+      opacity: 0;
+      width: 0px;
+    }
+  }
+
+  @keyframes loader4 {
+    0% {
+      width: 0px;
+    }
+    70% {
+      width: 100%;
+      opacity: 1;
+    }
+    90% {
+      opacity: 0;
+      width: 100%;
+    }
+    100% {
+      opacity: 0;
+      width: 0px;
+    }
+  }
+`;
+
+export default Loading;