readyvery · marinesnow34 · Mar 26, 2024 · Mar 25, 2024 · Mar 25, 2024 · Mar 25, 2024
diff --git a/public/index.html b/public/index.html
@@ -52,6 +52,7 @@
       crossorigin="anonymous"
       href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
     /> -->
+    <!-- Google tag (gtag.js) -->
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta
       name="viewport"
@@ -67,6 +68,7 @@
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
 
     <title>ReadyVery</title>
+
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/App.css b/src/App.css
@@ -8,107 +8,25 @@
   flex-direction: column;
   position: relative;
 }
-@media only screen and (max-width: 375px) {
-  .App {
-    max-width: 360px;
-  }
 
-  .navbar,
-  .top_header,
-  .top_header_page {
-    left: calc(50% - 180px); /* Center the navbar */
-    right: calc(50% - 180px); /* Center the navbar */
-  }
-  .navbar,
-  .top_header {
-    width: 100%;
-    margin: 0 auto;
-  }
-}
-@media only screen and (min-width: 375px) and (max-width: 380px) {
+@media only screen and (max-width: 430px) {
   .App {
-    max-width: 375px;
+    min-width: 320px;
     background-color: white;
   }
-
   .navbar,
-  .top_header,
-  .top_header_page {
-    left: calc(50% - 187.5px); /* Center the navbar */
-    right: calc(50% - 187.5px); /* Center the navbar */
-  }
-}
-@media only screen and (min-width: 380px) and (max-width: 400px) {
-  .App {
-    max-width: 380px;
-  }
-
-  .navbar,
-  .top_header,
-  .top_header_page {
-    left: calc(50% - 190px); /* Center the navbar */
-    right: calc(50% - 190px); /* Center the navbar */
-  }
-  .navbar,
-  .top_header {
+  .top_header{
     width: 100%;
     margin: 0 auto;
   }
-}
-@media only screen and (min-width: 400px) and (max-width: 410px) {
-  .App {
-    max-width: 400px;
-  }
-
-  .navbar,
-  .top_header,
-  .top_header_page {
-    left: calc(50% - 200px); /* Center the navbar */
-    right: calc(50% - 200px); /* Center the navbar */
-  }
-  .navbar,
-  .top_header {
+  .top_header_page{
     width: 100%;
     margin: 0 auto;
+left: 0;
+right: 0;
+    top: 0.94rem;
   }
 }
-@media only screen and (min-width: 410px) and (max-width: 420px) {
-  .App {
-    max-width: 410px;
-  }
-
-  .navbar,
-  .top_header,
-  .top_header_page {
-    left: calc(50% - 205px); /* Center the navbar */
-    right: calc(50% - 205px); /* Center the navbar */
-  }
-  .navbar,
-  .top_header {
-    width: 100%;
-    margin: 0 auto;
-  }
-}
-
-/* iphone 14 Pro */
-@media only screen and (min-width: 420px) and (max-width: 430px) {
-  .App {
-    max-width: 420px;
-  }
-
-  .navbar,
-  .top_header,
-  .top_header_page {
-    left: calc(50% - 210px); /* Center the navbar */
-    right: calc(50% - 210px); /* Center the navbar */
-  }
-  .navbar,
-  .top_header {
-    width: 100%;
-    margin: 0 auto;
-  }
-}
-
 @media only screen and (min-width: 430px) and (max-width: 800px) {
   .App {
     max-width: 430px;
@@ -191,47 +109,3 @@
   font-family: "KBold";
   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/Authentication/UserInputNumber.css b/src/components/Authentication/UserInputNumber.css
@@ -15,7 +15,7 @@
 .user-input-phone-number-input {
   border-radius: 0.24788rem;
   border: 1px solid rgba(131, 131, 131, 1);
-  padding-left: 0.94rem;
+  padding: 0 0.94rem;
   margin-right: 0.25rem;
   font-size: 0.75rem;
   font-weight: 500;
@@ -30,7 +30,9 @@
   font-weight: 500;
   font-size: 0.75rem;
   width: 3.46981rem;
-  height: 2.48rem;
+  height: 2.47844rem;
+  color: var(--frame-text, #838383);
+  cursor: pointer;
 }
 
 .user-input-phone-number-button-clicked {

diff --git a/src/components/Authentication/UserInputNumber.jsx b/src/components/Authentication/UserInputNumber.jsx
@@ -6,7 +6,8 @@ import RedButton from "./RedButton";
 import "./UserInputNumber.css";
 import UserInputNumberMessage from "./UserInputNumberMessage";
 
-const TIMER_DURATION = 600; //타이머 시간 설정(600초)
+const TIMER_DURATION = 180; //타이머 시간 설정(3분)
+
 
 const UserInputNumber = () => {
   const [chkButton, setChkButton] = useState(false); // 인증버튼 클릭 여부

diff --git a/src/components/views/Header/Header.css b/src/components/views/Header/Header.css
@@ -29,8 +29,8 @@
   flex-direction: row;
   justify-content: space-between;
   margin-top: 0.94rem;
-  padding-left: 1.56rem;
-  padding-right: 1.59rem;
+  /* padding-left: 1.56rem;
+  padding-right: 1.59rem; */
 }
 
 .top_header_page span {
@@ -107,11 +107,3 @@
   width: 2rem;
   height: 2rem;
 }
-
-/* 이거 왜 걸어놓으신건가요..?! 
-  @media only screen and (min-width: 400px) and (max-width: 800px) {
-    .top_header {
-      left: calc(50% - 215px);
-      right: calc(50% - 215px);
-    }
-  } */
diff --git a/src/components/views/Header/Header.jsx b/src/components/views/Header/Header.jsx
@@ -47,6 +47,7 @@ const Header = ({ headerProps }) => {
             src={IMAGES.headerBack}
             alt="back"
             className="header_back"
+            style={{marginLeft:"1.56rem"}}
             // onClick={() => handleGoBack()}
             // onClick={() => navigate(headerProps.linkTo, { replace: true })}
             onClick={() => {
@@ -58,7 +59,7 @@ const Header = ({ headerProps }) => {
             }}
           />
           <span>{headerProps.pageName}</span>
-          <div className="homeAndCart">
+          <div className="homeAndCart" style={{marginRight:"1.56rem"}}>
             {/* 현재 페이지가 홈이 아니고 장바구니 페이지가 아닌 경우에만 장바구니 아이콘 표시 */}
             {!isCartPage ? (
               <div className="homeAndCart">

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;