Fix: 충돌 해결

package.json

@@ -13,6 +13,7 @@
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.16.0",
     "react-scripts": "5.0.1",
+    "recoil": "^0.7.7",
     "redux": "^4.2.1",
     "redux-promise": "^0.6.0",
     "redux-thunk": "^2.4.2",

src/App.css

@@ -14,7 +14,7 @@
     max-width: 390px;
     height: 94vh;
     background-color: white;
-    padding-top: 2.75rem;
+    padding-top: 3.5rem;
   }
   .bottom_navbar {
     left: calc(50% - 207px); /* Center the navbar */
@@ -36,7 +36,7 @@
     max-width: 430px;
     height: 94vh;
     background-color: white;
-    padding-top: 2.75rem;
+    padding-top: 3.5rem;
   }
   .bottom_navbar {
     left: calc(50% - 215px); /* Center the navbar */
@@ -51,15 +51,14 @@
     left: calc(50% - 215px); /* Center the navbar */
     right: calc(50% - 215px); /* Center the navbar */
   }
-
 }
 
 @media (min-width: 800px) {
   .App {
     width: 600px;
     height: 94vh;
     background-color: white;
-    padding-top: 2.75rem;
+    padding-top: 3.5rem;
   }
   .bottom_navbar {
     left: calc(50% - 300px); /* Center the navbar */
@@ -82,8 +81,8 @@
   font-display: swap;
   src: local("Pretendard"),
     url("./assets/font/Pretendard-Bold.woff2") format("woff2");
-unicode-range: U+AC00-D7A3, U+0061-007A, U+AC00-D7A3, U+0030-0039;
-  }
+  unicode-range: U+AC00-D7A3, U+0061-007A, U+AC00-D7A3, U+0030-0039;
+}
 
 @font-face {
   font-family: "ExtraBold";

src/App.js

@@ -4,6 +4,8 @@ import MyPage from "../src/pages/MyPage/MyPage";
 import StoreDetailPage from "../src/pages/StoreDetailPage/StoreDetailPage";
 import TestPage from "../src/pages/TestPage/TestPage";
 import "./App.css";
+import CafeSearchPage from "./pages/CafeSearch/CafeSearch";
+import CartPage from "./pages/CartPage/CartPage";
 import KakaoLoginPage from "./pages/LoginPage/Login";
 import CouponPage from "./pages/MyPage/CouponPage";
 import EventingPage from "./pages/MyPage/EventingPage";
@@ -14,6 +16,7 @@ import OrderProcessPage from "./pages/OrderProcessPage/OrderProcessPage";
 import OrderStatus from "./pages/OrderStatus/OrderStatus";
 import OrderStorage from "./pages/OrderStorage/OrderStorage";
 import PackagingStatusPage from "./pages/PackagingStatusPage/PackagingStatusPage";
+import PaymentPage from "./pages/PaymentPage/PaymentPage";
 import ReadyPage from "./pages/ReadyPage/ReadyPage";
 
 function App() {
@@ -25,7 +28,7 @@ function App() {
         {/* 없는 경로로 갈 경우 메인페이지로 강제 이동 */}
         <Route path="/*" element={<Navigate to="/"></Navigate>}></Route>
         {/* 테스트 페이지 - 카페검색*/}
-        <Route path="/search" element={<TestPage />} />
+        <Route path="/search" element={<CafeSearchPage />} />
         {/* 주문내역 페이지*/}
         <Route path="/storage" element={<OrderStorage />} />
         {/* 주문상태 페이지 - 추후 병합 예정*/}
@@ -54,6 +57,10 @@ function App() {
         <Route path="/eventing" element={<EventingPage />} />
         {/* 마이페이지-약관정책 페이지 */}
         <Route path="/policy" element={<PolicyPage />} />
+        {/* 장바구니 페이지 */}
+        <Route path="/cart" element={<CartPage />} />
+        {/* 결제 페이지 */}
+        <Route path="/payment" element={<PaymentPage />} />
       </Routes>
     </div>
   );

src/components/views/Header/Header.css

@@ -4,7 +4,7 @@
   top: 0;
   left: 0;
   right: 0;
-  height: 2.6875rem;
+  height: 3.5rem;
   background-color: #ffffff;
   display: flex;
   align-items: center;
@@ -15,7 +15,7 @@
   top: 0;
   left: 0;
   right: 0;
-  height: 2.6875rem;
+  height: 3.5rem;
   background-color: #ffffff;
   display: flex;
   align-items: center;
@@ -25,7 +25,7 @@
   margin-left: 1.5rem;
 }
 
-.header-main__warpper{
+.header-main__warpper {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -34,12 +34,12 @@
   margin: 0 auto;
 }
 
-.header-main__warpper span{
+.header-main__warpper span {
   color: #000;
   font-size: 1.25rem;
   font-family: "Bold";
 }
 
-.header-main__warpper div{
+.header-main__warpper div {
   width: 1.5rem;
-}
+}

src/components/views/StateBox/StateBox.jsx

@@ -2,30 +2,37 @@ import "./StateBox.css";
 
 import cafe from "../../../assets/images/cafe_logo.png";
 
-const StateBox = ( {id, date, name, menu, state} ) => {
-    const stateList = ["취소완료", "진행중", "수령완료"];
+const StateBox = ({ id, date, name, menu, state }) => {
+  const stateList = ["취소완료", "진행중", "수령완료"];
 
-    return(
-        <>
-        <div className={`order-box ${state === 1 && "selected"}`}>
-            <div className="status-bar">
-                <div className="status-date">{date}</div>
-                <div className={`status-box ${state === 1 && "selected"}`}>
-                    {stateList.filter((e, i) => i === state)}
-                </div>
-            </div>
-            <div className="order-content">
-                <div className="cafe-img-box">
-                    <img src={cafe} alt={cafe}/>
-                </div>
-                <div className="cafe-box">
-                    <div className="cafe-name">{name}</div>
-                    <div className="menu-name">{menu}</div>
-                </div>
-            </div> 
+  return (
+    <>
+      <div className={`order-box ${state === 1 && "selected"}`}>
+        <div className="status-bar">
+          <div className="status-date">{date}</div>
+          <div className={`status-box ${state === 1 && "selected"}`}>
+            {stateList.filter((e, i) => i === state)}
+          </div>
         </div>
-        </>
-    )
-}
+        <div className="order-content">
+          <div className="cafe-img-box">
+            <img src={cafe} alt={cafe} />
+          </div>
+          <div className="cafe-box">
+            <div className="cafe-name">{name}</div>
+            <div className="menu-name">{menu}</div>
+          </div>
+        </div>
+      </div>
+      <div className="order-content">
+        <img src={cafe} alt={cafe} />
+        <div className="cafe-box">
+          <div className="cafe-name">{name}</div>
+          <div className="menu-name">{menu}</div>
+        </div>
+      </div>
+    </>
+  );
+};
 
-export default StateBox;
+export default StateBox;

src/hoc/auth.jsx

@@ -0,0 +1,44 @@
+// // ../hoc/auth.js
+
+// import React, { useEffect } from "react";
+// import { useLocation, useNavigate } from "react-router-dom";
+// import { useRecoilState } from "recoil";
+// import { accessTokenState, isAuthenticatedState } from "../recoil/authAtoms";
+
+// export default function Auth(SpecificComponent, option, adminRoute = null) {
+//   function AuthenticationCheck() {
+//     const navigate = useNavigate();
+//     const location = useLocation();
+//     const [isAuthenticated, setIsAuthenticated] =
+//       useRecoilState(isAuthenticatedState);
+//     const [accessToken, setAccessToken] = useRecoilState(accessTokenState);
+
+//     useEffect(() => {
+//       // 여기서 적절한 방법으로 사용자의 인증 상태를 확인하고 accessToken을 Recoil 상태에 업데이트합니다.
+//       // 이 예시에서는 option이 false일 때만 인증 상태를 true로 설정합니다.
+//       if (!option) {
+//         setIsAuthenticated(true);
+//         // 여기서 세션 또는 토큰을 가져와서 Recoil 상태에 업데이트합니다.
+//         // 이 예시에서는 accessToken을 예시로 사용하고, 실제로는 여러분의 인증 방식에 맞게 수정해야 합니다.
+//         setAccessToken("exampleAccessToken");
+//       }
+//     }, [option, setIsAuthenticated, setAccessToken]);
+
+//     useEffect(() => {
+//       // 인증 상태에 따라 페이지 접근을 처리합니다.
+//       if (!isAuthenticated) {
+//         // 인증되지 않은 경우 로그인 페이지로 리다이렉트
+//         if (location.pathname !== "/kakaologin") {
+//           navigate("/kakologin", { replace: true });
+//         }
+//       } else if (isAuthenticated && option === false) {
+//         // 인증된 상태이고 option이 false인 경우 특정 조건에 따라 리다이렉트
+//         // 이 예시에서는 특별한 조건이 없으므로 특별한 동작을 추가할 수 있습니다.
+//       }
+//     }, [isAuthenticated, option, navigate, location.pathname]);
+
+//     return <SpecificComponent />;
+//   }
+
+//   return AuthenticationCheck;
+// }

src/hoc/useInterval.jsx

@@ -0,0 +1,22 @@
+import { useEffect, useRef } from "react";
+
+function useInterval(callback, delay) {
+  const savedCallback = useRef();
+
+  useEffect(() => {
+    savedCallback.current = callback;
+  }, [callback]);
+
+  useEffect(() => {
+    function tick() {
+      savedCallback.current();
+    }
+
+    if (delay !== null) {
+      const intervalId = setInterval(tick, delay);
+      return () => clearInterval(intervalId);
+    }
+  }, [delay]);
+}
+
+export default useInterval;

src/index.js

@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
+import { RecoilRoot } from "recoil";
 import { ThemeProvider } from "styled-components";
 import App from "./App";
 import "./index.css";
@@ -11,7 +12,9 @@ root.render(
   <React.StrictMode>
     <BrowserRouter>
       <ThemeProvider theme={theme}>
-        <App />
+        <RecoilRoot>
+          <App />
+        </RecoilRoot>
       </ThemeProvider>
     </BrowserRouter>
   </React.StrictMode>

src/pages/CafeSearch/CafeSearch.css

@@ -0,0 +1,59 @@
+.search-container {
+  width: 100%;
+}
+
+.search-list {
+  width: 90%;
+  margin: 5% auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.search-link {
+  text-decoration: none;
+  color: black;
+}
+
+.search-details {
+  display: flex;
+  flex-direction: row;
+  margin: 2% 0;
+  align-items: center;
+}
+
+.search-detail {
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 5%;
+}
+
+.search-status-time {
+  display: flex;
+  flex-direction: row;
+  margin-top: 2%;
+}
+
+.search-name {
+  color: #000;
+  font-family: "Bold";
+  font-size: 0.875rem;
+}
+
+.search-status {
+  color: #4f4f4f;
+  font-family: "Bold";
+  font-size: 0.75rem;
+}
+
+.search-time {
+  color: #000;
+  font-family: "ExtraLight";
+  font-size: 0.75rem;
+  margin-top: 1.5%;
+}
+
+.search-address {
+  color: #838383;
+  font-family: "ExtraLight";
+  font-size: 0.75rem;
+}