Merge pull request 9oormthonUniv-seoultech#57 from 9oormthonUniv-seou…

…ltech/develop

2차 배포 머지

index.html

@@ -9,7 +9,7 @@
       crossorigin
       href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css"
     />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
     <title>포켓네컷</title>
     <script
       type="text/javascript"

src/@types/booth.ts

@@ -13,3 +13,13 @@ export type SpecificBoothInfo = {
   x: number;
   y: number;
 };
+
+export type BoothModalReviewInfo = {
+  name: string;
+  features: string[];
+  rating: number;
+  imageCount: number;
+  reviewCount: number;
+  x: number;
+  y: number;
+};

src/@types/review.ts

@@ -10,6 +10,14 @@ export type Review = {
   imageCount: number;
 };
 
+export type MyReview = {
+  reviewId: string;
+  imageUrl: string;
+  month: number;
+  date: number;
+  photoboothName: string;
+  rating: number;
+};
 export type Feature = {
   id: number;
   featureName: string;

src/App.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Navigate, Outlet, Route, Routes, useNavigate } from "react-router-dom";
 import Home from "./pages/Home";
 import SplashScreen from "./pages/SplashScreen";
 import Album from "./pages/Album";
@@ -24,20 +24,31 @@ import FavoritesPage from "./pages/My/FavoritesPage";
 import MyReviewPage from "./pages/My/MyReviewPage";
 import LikeBoothsPage from "./pages/My/LikeBoothsPage";
 import VisitedBoothsPage from "./pages/My/VisitedBoothsPage";
+import { useAuthStore } from "./store/useAuthStore";
+import Modal from "./components/Common/Modal";
 
 function App() {
+  const { isLoggedIn } = useAuthStore();
+
+  //로그인한 회원은 들어갈 수 없는 페이지
+  const PublicRoute = () => {
+    return isLoggedIn ? <Navigate to="/home" /> : <Outlet />;
+  };
+
+  //로그인한 회원만 들어갈 수 있는 페이지
+  const PrivateRoute = () => {
+    return isLoggedIn ? (
+      <Outlet /> //로그인 모달창
+    ) : (
+      <Navigate to="/login" />
+    );
+  };
+
   return (
     <BrowserRouter basename="/page">
       <Routes>
         <Route path="/" element={<SplashScreen />} />
         <Route path="/home" element={<Home />} />
-        <Route path="/album" element={<Album />} />
-
-        <Route path="/photo-upload" element={<PhotoUpload />} />
-
-        <Route path="/qr-scan" element={<QRScan />} />
-        <Route path="/photo-review" element={<PhotoReview />} />
-        <Route path="/photo-check" element={<PhotoCheck />} />
 
         <Route path="/login" element={<LoginPage />} />
         <Route path="/token" element={<Token />} />
@@ -47,18 +58,30 @@ function App() {
           <Route path="review" element={<ReviewPage />} />
           <Route path="image" element={<ImagePage />} />
         </Route>
-        <Route path="/my" element={<My />}>
-          <Route path="booth-records" element={<RecordPage />} />
-          <Route path="favorites" element={<FavoritesPage />} />
-        </Route>
-        <Route path="my-reviews" element={<MyReviewPage />} />
-        <Route path="like-booths" element={<LikeBoothsPage />} />
-        <Route path="visited-booths" element={<VisitedBoothsPage />} />
-        <Route path="/write-review/:boothId" element={<WriteReview />}>
-          <Route path="step/1" element={<Step1 />} />
-          <Route path="step/2" element={<Step2 />} />
+
+        <Route element={<PrivateRoute />}>
+          <Route path="/my" element={<My />}>
+            <Route path="booth-records" element={<RecordPage />} />
+            <Route path="favorites" element={<FavoritesPage />} />
+          </Route>
+
+          <Route path="my-reviews" element={<MyReviewPage />} />
+          <Route path="like-booths" element={<LikeBoothsPage />} />
+          <Route path="visited-booths" element={<VisitedBoothsPage />} />
+
+          <Route path="/write-review/:boothId" element={<WriteReview />}>
+            <Route path="step/1" element={<Step1 />} />
+            <Route path="step/2" element={<Step2 />} />
+          </Route>
+          <Route path="/write-review/complete" element={<CompleteScreen />} />
+
+          <Route path="/photo-upload" element={<PhotoUpload />} />
+
+          <Route path="/qr-scan" element={<QRScan />} />
+          <Route path="/photo-review" element={<PhotoReview />} />
+          <Route path="/photo-check" element={<PhotoCheck />} />
+          <Route path="/album" element={<Album />} />
         </Route>
-        <Route path="/write-review/complete" element={<CompleteScreen />} />
       </Routes>
     </BrowserRouter>
   );

src/api/booth.ts

@@ -1,7 +1,7 @@
 import { Get } from ".";
-import { BoothInfo, SpecificBoothInfo } from "../@types/booth";
+import { BoothInfo, BoothModalReviewInfo, SpecificBoothInfo } from "../@types/booth";
 
-export const getBoothLatLng = async (lat: number, lng: number, brands: string[], token: string) => {
+export const getBoothLatLng = async (lat: number, lng: number, brands: string[]) => {
   let queryParams;
   if (brands?.length > 0) {
     queryParams = brands.map((brand) => `lat=${lat}&lon=${lng}&brand=${brand}`).join("&");
@@ -10,37 +10,42 @@ export const getBoothLatLng = async (lat: number, lng: number, brands: string[],
   }
 
   try {
-    const res = await Get<BoothInfo[]>(`/api/v1/photobooth?${queryParams}`, {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    });
+    const res = await Get<BoothInfo[]>(`/api/v1/photobooth?${queryParams}`);
     return res.data.payload;
   } catch (error) {
     console.log(error);
   }
 };
 
-export const getBoothInfo = async (id: string, token: string) => {
+export const getBoothInfo = async (id: string) => {
   try {
-    const res = await Get<SpecificBoothInfo>(`/api/v1/photobooth/${id}`, {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    });
+    const res = await Get<SpecificBoothInfo>(`/api/v1/photobooth/${id}`);
     return res.data.payload;
   } catch (error) {
     console.log(error);
   }
 };
 
-export const searchPhotoBoothName = async (id: string, token: string) => {
+export const getBoothModalInfo = async (id: string) => {
   try {
-    const res = await Get<string>(`/api/v1/photobooth/name/${id}`, {
-      headers: {
-        Authorization: `Bearer ${token}`,
-      },
-    });
+    const res = await Get<BoothModalReviewInfo>(`/api/v1/photobooth/modal/${id}`);
+    return res.data.payload;
+  } catch (error) {
+    console.log(error);
+  }
+};
+export const searchPhotoBoothName = async (id: string) => {
+  try {
+    const res = await Get<string>(`/api/v1/photobooth/name/${id}`);
+    return res.data.payload;
+  } catch (error) {
+    console.log(error);
+  }
+};
+
+export const searchBoothId = async (name: string) => {
+  try {
+    const res = await Get<{ id: number; name: string }[]>(`/api/v1/photobooth/search?keyword=${name}`);
     return res.data.payload;
   } catch (error) {
     console.log(error);

src/api/index.ts

@@ -1,5 +1,7 @@
-import axios, { AxiosRequestConfig, AxiosResponse } from "axios";
-import { CommonResponse } from "../@types/api";
+import axios, { AxiosError, AxiosRequestConfig, AxiosResponse } from "axios";
+import { CommonError, CommonResponse } from "../@types/api";
+import { useAuthStore } from "../store/useAuthStore";
+import { reissueToken } from "./user";
 
 export const axiosInstance = axios.create({
   baseURL: "https://pocket4cut.link",
@@ -9,10 +11,44 @@ export const axiosInstance = axios.create({
   withCredentials: true,
 });
 
+const errorCodes = ["SEC4001", "SEC4011", "SEC4012"];
+
+axiosInstance.interceptors.response.use(
+  (response) => response,
+  async (error: AxiosError<CommonError>) => {
+    if (error.config && error.response && error.response.data.errorCode in errorCodes) {
+      // 토큰 재발급 수행
+      const accessToken = useAuthStore((state) => state.accessToken);
+
+      try {
+        const res = await reissueToken(accessToken!);
+        if (res) {
+          useAuthStore.setState({
+            isLoggedIn: true,
+            accessToken: res.accessToken,
+          });
+
+          // 새로 발급 받은 accessToken을 에러가 발생한 요청의 헤더에 설정
+          error.config.headers.Authorization = `Bearer ${res.accessToken}`;
+          //로직 재수행
+          return await axiosInstance(error.config);
+        }
+      } catch (error) {
+        console.error("Error in reissuing token:", error);
+        useAuthStore.getState().logout();
+        window.location.href = "/login";
+      }
+    }
+
+    return Promise.reject(error);
+  }
+);
+
 export const Get = async <T>(url: string, config?: AxiosRequestConfig): Promise<AxiosResponse<CommonResponse<T>>> => {
   const response = await axiosInstance.get(url, config);
   return response;
 };
+
 export const Post = async <T>(
   url: string,
   body: any,

src/api/my.ts

@@ -0,0 +1,29 @@
+import { Get } from ".";
+import { MyReview } from "../@types/review";
+
+export const getMyReviews = async (accessToken: string) => {
+  try {
+    const res = await Get<{
+      reviewCount: number;
+      reviewMypageDetailDtoList: MyReview[];
+    }>("/api/v1/review/mypage", {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    return res.data.payload;
+  } catch (error) {}
+};
+
+export const getVisitedBooths = async (accessToken: string) => {
+  try {
+    const res = await Get("/api/v1/photobooth/visited", {
+      headers: {
+        Authorization: `Bearer ${accessToken}`,
+      },
+    });
+
+    return res.data.payload;
+  } catch (error) {}
+};

src/api/photoupload.ts

@@ -0,0 +1,35 @@
+import { Post } from "./index.ts";
+
+export const uploadPhoto = async (
+  accessToken: string,
+  photoboothId: number,
+  year: string,
+  month: string,
+  date: string,
+  hashtag: string[],
+  memo: string,
+  filePath: string
+) => {
+  try {
+    const res = await Post(
+      "/api/v1/album",
+      {
+        photoboothId: photoboothId,
+        year: year,
+        month: month,
+        date: date,
+        hashtag: hashtag,
+        memo: memo,
+        filePath: filePath,
+      },
+      {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      }
+    );
+    return res.data.result;
+  } catch (error) {
+    console.log(error);
+  }
+};