Merge pull request #276 from KKangHHee/test

Feat: 로딩중 적용
readyvery · Mar 26, 2024 · c074872 · c074872
2 parents 3eab799 + 4a0b3f6
commit c074872
Show file tree

Hide file tree

Showing 11 changed files with 356 additions and 325 deletions.
diff --git a/src/App.css b/src/App.css
@@ -192,46 +192,4 @@
   src: url("./assets/font/Kotrahope-Bold.otf");
 }
 
-/* app에 로딩화면 css추가 */
-.loading-div {
-  /* width: 100%;
-  height: 100vh; */
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  /* 위에 주석 아니면 이거 쓰기 */
-  background-color: #ffffff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.loading-loader {
-  position: relative;
-  border: none;
-  background-image: url("./assets/images/ic_loading.png");
-  width: 6.25rem;
-  height: 6.25rem;
-  animation: spin 1.35s linear infinite; /* 회전하는 애니메이션을 적용합니다. */
-}
 
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.loading-berry {
-  position: fixed;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-.loading-berry img {
-  width: 2.08431rem;
-  height: 2.08431rem;
-}
diff --git a/src/App.js b/src/App.js
@@ -6,7 +6,7 @@ import StoreDetailPage from "../src/pages/StoreDetailPage/StoreDetailPage";
 import "./App.css";
 // import loading from "./assets/animation/loading.json";
 import MembershipPage from "../src/pages/MembershipPage/MembershipPage";
-import ic_berry from "./assets/images/ic_berry.png";
+import Loading from "./components/views/PageComponent/Loading";
 import Auth from "./hoc/auth";
 import AuthenticationPage from "./pages/Authentication/AuthenticationPage";
 import CartPage from "./pages/CartPage/CartPage";
@@ -31,7 +31,6 @@ import PaymentFailPage from "./pages/PaymentPage/Redirect/PaymentFailPage";
 import PaymentLoadingPage from "./pages/PaymentPage/Redirect/PaymentLoadingPage";
 import Splash from "./pages/Splash/Splash";
 import StoreSearchPage from "./pages/StoreSearch/StoreSearch";
-
 function App() {
   // const [cookies, , removeCookies] = useCookies();
   // const [isAuth, setIsAuth] = useRecoilState(isAuthenticatedState);
@@ -40,10 +39,9 @@ function App() {
   // const apiVer = "api/v1";
   // const apiUrl = `${apiRoot}/${apiVer}/refresh/token`;
 
-
   //false : 로그인 한 유저 못들어감
   const NewLoginPage = Auth(LoginPage, false); // 로그인 페이지
-  
+
   //true : 로그인 한 유저 들어감
   const NewHomePage = Auth(HomePage, true); // 홈페이지
   const NewAuthentication = Auth(AuthenticationPage, true, 1);
@@ -108,16 +106,7 @@ function App() {
   return (
     <div className="App">
       <RecoilRoot>
-        <Suspense
-          fallback={
-            <div className="loading-div">
-              <div className="loading-loader" />
-              <div className="loading-berry">
-                <img src={ic_berry} alt="berry" />
-              </div>
-            </div>
-          }
-        >
+        <Suspense fallback={<Loading />}>
           <Routes>
             {/* 로그인 하지 않아도 볼 수 있는 페이지 */}
             <Route path="/splash" element={<Splash />} />
@@ -130,7 +119,7 @@ function App() {
             {/* 로그인*/}
             <Route path="/login" element={<NewLoginPage />} />
             {/* 번호인증 페이지 */}
-            <Route path="/authentication" element={<NewAuthentication/>} />
+            <Route path="/authentication" element={<NewAuthentication />} />
             {/* 쿠폰 및 포인트  faq페이지*/}
             <Route path="/faq" element={<FrequentlyAskedQuestionPage />} />
             {/* 마이페이지-약관정책 페이지 */}

diff --git a/src/components/views/PageComponent/Loading.css b/src/components/views/PageComponent/Loading.css
@@ -0,0 +1,38 @@
+.loading-div {
+  width: 100%;
+  height: 100vh;
+  background-color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.spinLodingBar-container{
+  position: relative;
+}
+.loading-loader {
+  border: none;
+  background-image: url("../../../assets/images/ic_loading.png");
+  width: 6.25rem;
+  height: 6.25rem;
+  animation: spin 1.35s linear infinite; /* 회전하는 애니메이션을 적용합니다. */
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.loading-berry {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.loading-berry img {
+  width: 2.08431rem;
+  height: 2.08431rem;
+}
diff --git a/src/components/views/PageComponent/Loading.jsx b/src/components/views/PageComponent/Loading.jsx
@@ -0,0 +1,25 @@
+import React from "react";
+import { IMAGES } from "../../../constants/images";
+import "./Loading.css";
+
+const SpinLodingBar = () => {
+  return (
+    <div className="spinLodingBar-container">
+      <div className="loading-loader" />
+      <div className="loading-berry">
+        <img src={IMAGES.berry} alt="berry" />
+      </div>
+    </div>
+  );
+};
+// 로딩창
+const Loading = ({ styleBackground }) => {
+  const Background = styleBackground || "none"; //기본값 흰색
+  return (
+    <div className="loading-div" style={{ background: Background }}>
+      <SpinLodingBar />
+    </div>
+  );
+};
+
+export default Loading;