Skip to content

Commit

Permalink
Merge pull request #84 from hhhhyelim/test
Browse files Browse the repository at this point in the history 
Rename: 메뉴 이미지 추가 및 파일명 수정
  • Loading branch information
@marinesnow34
marinesnow34 authored Nov 24, 2023
2 parents f58016b + 6f072a7 commit ee107a1
Show file tree
Hide file tree
Showing 15 changed files with 270 additions and 208 deletions.
0 ...c/images/cafe_dream/setmenu_hotdogset.svg → public/images/cafe_dream/set.svg
View file
File renamed without changes
9 changes: 9 additions & 0 deletions public/images/harang/americano.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
181 changes: 95 additions & 86 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,14 @@
import { Navigate, Route, Routes } from "react-router-dom";
import axios from "axios";
import React, { Suspense } from "react";
import { useCookies } from "react-cookie";
import { Route, Routes, useNavigate } from "react-router-dom";
import { RecoilRoot } from "recoil";
import HomePage from "../src/pages/HomePage/Homepage";
import MyPage from "../src/pages/MyPage/MyPage";
import StoreDetailPage from "../src/pages/StoreDetailPage/StoreDetailPage";
import "./App.css";
import Auth from "./hoc/auth";
import useInterval from "./hooks/useInterval";
import CafeSearchPage from "./pages/CafeSearch/CafeSearch";
import CartPage from "./pages/CartPage/CartPage";
import KakaoLoginPage from "./pages/LoginPage/Login";
Expand All @@ -26,6 +31,9 @@ import PaymentSuccessPage from "./pages/PaymentPage/Redirect/PaymentSuccessPage"
import ReadyPage from "./pages/ReadyPage/ReadyPage";

function App() {
const [cookies, , removeCookies] = useCookies();
const navigate = useNavigate();
const apiUrl = process.env.REACT_APP_API_ROOT;
// const navigate = useNavigate();
// // const [isLoggedIn, setisLoggedIn] = useRecoilState(isAuthenticatedState); // 인증 상태 (로그인이 되어있으면 true, 아니면 false)
// // 토큰 받아서 시간관리
Expand All @@ -51,95 +59,96 @@ function App() {
const NewPaymentFailPage = Auth(PaymentFailPage, true);
const NewPackagingStatusPage = Auth(PackagingStatusPage, true);

// const minute = 1000 * 60 * 60 * 24; // 24시간
// // 주기적으로 실행되는 함수
// useInterval(() => {
// // 리프레시 토큰이 존재하고, 비어 있지 않은 경우
// if (
// cookies.refreshToken !== "undefined" &&
// cookies.refreshToken !== undefined &&
// cookies.refreshToken
// ) {
// // http 요청에 사용될 헤더 설정과 함께 서버에 토큰 갱신 요청
// let config = {
// headers: {
// Authorization: `${cookies.refreshToken}`,
// },
// withCredentials: true,
// };
// axios
// .get(`${process.env.REACT_APP_API_ROOT}/api/v1/refresh/token`, config)
// .then((response) => {
// // 현재 쿠키 삭제
// removeCookies();

// // 서버에서 받은 새로운 리프레시 토큰을 쿠키에 저장
// setCookie("refreshToken", response.data.refreshToken);

// // 홈 화면으로 이동
// navigate("/");
// })

// .catch((error) => {
// navigate("/kakaologin");
// });
// } else {
// // 리프레시 토큰이 존재하지 않거나 비어 있으면 쿠키 제거
// removeCookies();
// }
// }, minute - 60000); // 24시간 주기에서 1분을 뺀 주기로 주기적 실행
const minute = 1000 * 60 * 60 * 24; // 24시간
// 주기적으로 실행되는 함수
useInterval(() => {
// 리프레시 토큰이 존재하고, 비어 있지 않은 경우
if (
cookies.refreshToken !== "undefined" &&
cookies.refreshToken !== undefined &&
cookies.refreshToken
) {
// http 요청에 사용될 헤더 설정과 함께 서버에 토큰 갱신 요청
let config = {
withCredentials: true,
};
axios
.get(`${apiUrl}/api/v1/refresh/token`, config)
.then((response) => {
console.log(response);
// 현재 쿠키 삭제
if (!response.data) {
removeCookies();
navigate("/kakaologin");
}
})
.catch((error) => {
navigate("/kakaologin");
});
}
}, minute - 60000); // 24시간 주기에서 1분을 뺀 주기로 주기적 실행

return (
<div className="App">
<Routes>
{/* 로그인 하지 않아도 볼 수 있는 페이지 */}
{/* 메인페이지 */}
<Route path="/" element={<HomePage />} />
{/* 없는 경로로 갈 경우 메인페이지로 강제 이동 */}
<Route path="/*" element={<Navigate to="/"></Navigate>}></Route>
{/* 카페검색*/}
<Route path="/search" element={<CafeSearchPage />} />
{/* 로그인*/}
<Route path="/kakaologin" element={<NewLoginPage />} />
{/* 마이페이지-약관정책 페이지 */}
<Route path="/policy" element={<PolicyPage />} />
<Route path="/termsofuse" element={<TermsOfUse />} />
<Route path="/privacypolicy" element={<PrivacyPolicy />} />
<Route path="/thirdparty" element={<ThirdpartyPage />} />
<Route path="/position" element={<PositionpolicyPage />} />
{/* 마이페이지-이벤트 페이지 */}
<Route path="/eventing" element={<EventingPage />} />
{/* 카페 상세 페이지*/}
<Route path="/store" element={<StoreDetailPage />} />
{/* 마이페이지*/}
<Route path="/mypage" element={<MyPage />} />
<RecoilRoot>
<Suspense fallback={<div>Loading...</div>}>
<Routes>
{/* 로그인 하지 않아도 볼 수 있는 페이지 */}
{/* 메인페이지 */}
<Route path="/" element={<HomePage />} />
{/* 없는 경로로 갈 경우 메인페이지로 강제 이동 */}
{/* <Route path="/*" element={<Navigate to="/"></Navigate>}></Route> */}
{/* 카페검색*/}
<Route path="/search" element={<CafeSearchPage />} />
{/* 로그인*/}
<Route path="/kakaologin" element={<NewLoginPage />} />
{/* 마이페이지-약관정책 페이지 */}
<Route path="/policy" element={<PolicyPage />} />
<Route path="/termsofuse" element={<TermsOfUse />} />
<Route path="/privacypolicy" element={<PrivacyPolicy />} />
<Route path="/thirdparty" element={<ThirdpartyPage />} />
<Route path="/position" element={<PositionpolicyPage />} />
{/* 마이페이지-이벤트 페이지 */}
<Route path="/eventing" element={<EventingPage />} />
{/* 카페 상세 페이지*/}
<Route path="/store" element={<StoreDetailPage />} />
{/* 마이페이지*/}
<Route path="/mypage" element={<MyPage />} />

{/* 로그인 해야지 볼 수 있는 페이지 */}
{/* 주문내역 페이지*/}
<Route path="/storage" element={<NewOrderStorage />} />
{/* 주문상태 페이지 - 추후 병합 예정*/}
<Route path="/status" element={<NewOrderStatus />} />
{/* 주문상세 페이지 - 추후 병합 예정*/}
<Route path="/orderDetail" element={<NewOrderDetail />} />
{/* 바로주문*/}
<Route path="/ready" element={<NewReadyPage />} />
{/* 마이페이지-마이프로필 확인 페이지 */}
<Route path="/myprofile" element={<NewMyprofilePage />} />
{/* 포장 여부 선택 페이지 */}
<Route path="/packagingStatus" element={<NewPackagingStatusPage />} />
{/* 주문 과정 페이지 */}
<Route path="/order" element={<NewOrderProcessPage />} />
{/* 마이페이지-쿠폰 확인 페이지 */}
<Route path="/coupon" element={<NewCouponPage />} />
{/* 장바구니 페이지 */}
<Route path="/cart" element={<NewCartPage />} />
{/* 결제 페이지 */}
<Route path="/payment" element={<NewPaymentPage />} />
{/* 결제 성공 리다이렉트 페이지 */}
<Route path="/payment/success" element={<NewPaymentSuccessPage />} />
{/* 결제 실패 리다이렉트 페이지 */}
<Route path="/payment/fail" element={<NewPaymentFailPage />} />
</Routes>
{/* 로그인 해야지 볼 수 있는 페이지 */}
{/* 주문내역 페이지*/}
<Route path="/storage" element={<NewOrderStorage />} />
{/* 주문상태 페이지 - 추후 병합 예정*/}
<Route path="/status" element={<NewOrderStatus />} />
{/* 주문상세 페이지 - 추후 병합 예정*/}
<Route path="/orderDetail" element={<NewOrderDetail />} />
{/* 바로주문*/}
<Route path="/ready" element={<NewReadyPage />} />
{/* 마이페이지-마이프로필 확인 페이지 */}
<Route path="/myprofile" element={<NewMyprofilePage />} />
{/* 포장 여부 선택 페이지 */}
<Route
path="/packagingStatus"
element={<NewPackagingStatusPage />}
/>
{/* 주문 과정 페이지 */}
<Route path="/order" element={<NewOrderProcessPage />} />
{/* 마이페이지-쿠폰 확인 페이지 */}
<Route path="/coupon" element={<NewCouponPage />} />
{/* 장바구니 페이지 */}
<Route path="/cart" element={<NewCartPage />} />
{/* 결제 페이지 */}
<Route path="/payment" element={<NewPaymentPage />} />
{/* 결제 성공 리다이렉트 페이지 */}
<Route
path="/payment/success"
element={<NewPaymentSuccessPage />}
/>
{/* 결제 실패 리다이렉트 페이지 */}
<Route path="/payment/fail" element={<NewPaymentFailPage />} />
</Routes>
</Suspense>
</RecoilRoot>
</div>
);
}
Expand Down
68 changes: 68 additions & 0 deletions src/Atom/status.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
import axios from "axios";
import { atom, selector } from "recoil";

// 현재 사용자가 인증되었는지 여부를 나타내는 상태
export const isAuthenticatedState = atom({
key: "isAuthenticatedState",
default: false, // 인증되지 않았다고 가정
});

// 현재 사용자의 인증 상태를 가져오거나 토글하는 selector
export const getAuthenticatedSelector = selector({
key: "auth/get",
get: async ({ get }) => {
// 현재 isAuthenticatedState의 값을 가져옴
return get(isAuthenticatedState);
},

set: ({ set }) => {
// 현재 isAuthenticatedState의 값을 반전
set(isAuthenticatedState, (currentValue) => !currentValue);
},
});

// 사용자의 로그인 상태 및 토큰 정보를 저장하는 상태
export const loginState = atom({
key: "loginState",
default: {
accessToken: null,
expiredTime: null,
},
});

// 사용자 정보를 저장하는 상태
export const userState = atom({
key: "userState",
dafault: null,
});

// 사용자 정보를 가져오는 selector
export const getUserSelector = selector({
key: "user/get",
get: async ({ get, set }) => {
// 백엔드에서 사용자 정보 가져옴
try {
// 성공시 해당 정보 반환
const apiUrl = process.env.REACT_APP_API_ROOT;
const config = {
withCredentials: true,
};
const response = await axios.get(`${apiUrl}/api/v1/auth`, config);
const userData = response.data;
// if (JSON.stringify(userState) !== JSON.stringify(userData)) {
// // 다르면 userInfo 업데이트
// // set(userState, userData);
// }
return userData;
} catch (err) {
// 실해시 404 반환
// 에러처리
return "404";
}
},

set: ({ set }, newValue) => {
// 가져온 사용자 정보 userState에 저장
set(userState, newValue);
},
});
Loading

0 comments on commit ee107a1

Please sign in to comment.