배포용 PR

package.json

@@ -4,18 +4,26 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host 0.0.0.0",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@egjs/react-infinitegrid": "^4.12.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/icons-material": "^6.4.4",
+    "@mui/material": "^6.4.4",
     "@tailwindcss/vite": "^4.0.6",
     "@tanstack/react-query": "^5.66.0",
     "axios": "^1.7.9",
+    "gsap": "^3.12.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-intersection-observer": "^9.15.1",
     "react-router": "^7.1.5",
+    "swiper": "^11.2.4",
     "tailwind-merge": "^3.0.1",
     "tailwindcss": "^4.0.6",
     "zustand": "^5.0.3"

src/App.tsx

@@ -1,39 +1,74 @@
 import { Route, Routes } from 'react-router';
 
+import useViewport from './hooks/useViewport';
+import Layout from './layouts/Layout';
+import MobileLayout from './layouts/MobileLayout';
+import PrivateRoute from './layouts/PrivateRoute';
+import AdminPage from './pages/Admin';
+import FilteredLetterManage from './pages/Admin/FilteredLetter';
+import FilteringManage from './pages/Admin/Filtering';
+import ReportManage from './pages/Admin/Report';
+import AuthCallbackPage from './pages/Auth';
 import Home from './pages/Home';
+import Landing from './pages/Landing';
 import LetterBoardPage from './pages/LetterBoard';
 import LetterBoardDetailPage from './pages/LetterBoardDetail';
 import LetterBoxPage from './pages/LetterBox';
+import LetterBoxDetailPage from './pages/LetterBoxDetail';
 import LetterDetailPage from './pages/LetterDetail';
 import LoginPage from './pages/Login';
 import MyPage from './pages/MyPage';
+import MyBoardPage from './pages/MyPage/components/MyBoardPage';
+import NotFoundPage from './pages/NotFound';
 import NotificationsPage from './pages/Notifications';
 import OnboardingPage from './pages/Onboarding';
 import RandomLettersPage from './pages/RandomLetters';
 import RollingPaperPage from './pages/RollingPaper';
 import WritePage from './pages/Write';
 
 const App = () => {
+  useViewport();
+
   return (
     <Routes>
-      <Route>
-        <Route index element={<Home />} />
+      <Route element={<MobileLayout />}>
         <Route path="login" element={<LoginPage />} />
+        <Route path="landing" element={<Landing />} />
+        <Route path="*" element={<NotFoundPage />} />
+        <Route path="auth-callback" element={<AuthCallbackPage />} />
+        <Route index element={<Home />} />
         <Route path="onboarding" element={<OnboardingPage />} />
-        <Route path="letter">
-          <Route path="random" element={<RandomLettersPage />} />
-          <Route path="box" element={<LetterBoxPage />} />
-          <Route path="write" element={<WritePage />} />
-          <Route path=":id" element={<LetterDetailPage />} />
-        </Route>
-        <Route path="board">
-          <Route path="letter" element={<LetterBoardPage />} />
-          <Route path="letter/:id" element={<LetterBoardDetailPage />} />
-          <Route path="rolling/:id" element={<RollingPaperPage />} />
+
+        <Route element={<PrivateRoute />}>
+          <Route path="letter">
+            <Route element={<Layout />}>
+              <Route path="random" element={<RandomLettersPage />} />
+              <Route path="box" element={<LetterBoxPage />} />
+              <Route path="box/:id" element={<LetterBoxDetailPage />} />
+            </Route>
+            <Route path="write" element={<WritePage />} />
+            <Route path=":id" element={<LetterDetailPage />} />
+          </Route>
+          <Route path="board">
+            <Route element={<Layout />}>
+              <Route path="rolling/:id" element={<RollingPaperPage />} />
+              <Route path="letter" element={<LetterBoardPage />} />
+            </Route>
+            <Route path="letter/:id" element={<LetterBoardDetailPage />} />
+          </Route>
+          <Route path="mypage" element={<Layout />}>
+            <Route index element={<MyPage />} />
+            <Route path="board" element={<MyBoardPage />} />
+            <Route path="notifications" element={<NotificationsPage />} />
+          </Route>
         </Route>
-        <Route path="mypage">
-          <Route index element={<MyPage />} />
-          <Route path="notifications" element={<NotificationsPage />} />
+      </Route>
+
+      <Route element={<PrivateRoute />}>
+        <Route path="admin" element={<AdminPage />}>
+          <Route path="report" element={<ReportManage />} />
+          <Route path="badwords" element={<FilteringManage />} />
+          <Route path="filtered-letter" element={<FilteredLetterManage />} />
         </Route>
       </Route>
     </Routes>

src/apis/admin.ts

@@ -0,0 +1,79 @@
+import client from './client';
+
+const postReports = async (postReportRequest: PostReportRequest) => {
+  try {
+    const res = await client.post(`/api/reports`, postReportRequest);
+    if (res.status === 200) {
+      return res;
+    }
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+const getReports = async (reportQueryString: ReportQueryString) => {
+  try {
+    const queryParams = new URLSearchParams();
+    if (reportQueryString.reportType !== null)
+      queryParams.append('reportType', reportQueryString.reportType);
+    if (reportQueryString.status !== null) queryParams.append('status', reportQueryString.status);
+    if (reportQueryString.page !== null) queryParams.append('page', reportQueryString.page);
+    if (reportQueryString.size !== null) queryParams.append('size', reportQueryString.size);
+
+    const queryStrings = queryParams.toString();
+    const res = await client.get(`/api/reports?${queryStrings}`);
+    if (!res) throw new Error('신고 목록 데이터 조회 도중 에러가 발생했습니다.');
+    console.log(res);
+    return res;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+const patchReport = async (reportId: number, patchReportRequest: PatchReportRequest) => {
+  try {
+    console.log(`/api/reports/${reportId}`, patchReportRequest);
+    const res = await client.patch(`/api/reports/${reportId}`, patchReportRequest);
+    console.log(res);
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+// badwords
+const getBadWords = async (setBadWords: React.Dispatch<React.SetStateAction<BadWords[]>>) => {
+  try {
+    const res = await client.get('/api/bad-words');
+    setBadWords(res.data.data);
+    console.log(res);
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+const postBadWords = async (badWordsRequest: BadWords, callBack?: () => void) => {
+  try {
+    const res = await client.post('/api/bad-words', badWordsRequest);
+    if (callBack) callBack();
+    console.log(res);
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+// 내 상상대로 만든 필터링 단어 취소 버튼
+const patchBadWords = async (
+  badWordId: number,
+  badWordsRequest: BadWords,
+  callBack?: () => void,
+) => {
+  try {
+    const res = await client.patch(`/api/bad-words/${badWordId}/status`, badWordsRequest);
+    if (callBack) callBack();
+    console.log(res);
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export { postReports, getReports, patchReport, getBadWords, postBadWords, patchBadWords };

src/apis/auth.ts

@@ -0,0 +1,77 @@
+import client from './client';
+
+export const socialLogin = (loginType: LoginType) => {
+  window.location.href = `${import.meta.env.VITE_API_URL}/oauth2/authorization/${loginType}`;
+};
+
+export const getUserToken = async (stateToken: string) => {
+  try {
+    const response = await client.get(`/api/auth/token?state=${stateToken}`);
+    if (!response) throw new Error('getUserToken: Error while fetching user token');
+    const userInfo = response.data;
+    if (userInfo) {
+      return userInfo;
+    }
+    return response;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+};
+
+export const postZipCode = async () => {
+  try {
+    const response = await client.post(`/api/members/zipCode`);
+    if (!response) throw new Error('fail to post ZipCode');
+    return response;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export const getNewToken = async () => {
+  try {
+    const response = await client.post('/api/reissue', {}, { withCredentials: true });
+    if (!response) throw new Error('getNewToken: no response data');
+    return response;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export const getMydata = async () => {
+  try {
+    const response = await client.get('/api/members/me');
+    if (!response) throw new Error('getNewToken: no response data');
+    return response;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export const deleteUserInfo = async () => {
+  try {
+    const response = await client.delete('/api/members/me', {
+      withCredentials: true,
+    });
+    if (!response) throw new Error('deleteUserInfo: no response');
+    return response;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+export const postLogout = async () => {
+  try {
+    console.log(' before logout');
+
+    const response = await client.post('/api/logout', { withCredentials: true });
+    console.log('logout', response);
+    if (!response) throw new Error('postLogout: failed to logout');
+    return response;
+  } catch (error) {
+    console.log('logout error');
+
+    console.error(error);
+  }
+};

src/apis/client.ts

@@ -1,5 +1,113 @@
 import axios from 'axios';
 
-export const client = axios.create({
+import useAuthStore from '@/stores/authStore';
+
+import { getNewToken } from './auth';
+
+const client = axios.create({
   baseURL: import.meta.env.VITE_API_URL,
+  headers: { 'Content-Type': 'application/json' },
 });
+
+// type FailedRequest = {
+//   resolve: (token: string) => void;
+//   reject: (error: unknown) => void;
+// };
+
+let isRefreshing = false;
+// let failedQueue: FailedRequest[] = [];
+
+// const processQueue = (error: unknown, token: string | null = null) => {
+//   failedQueue.forEach((prom) => {
+//     if (error) {
+//       prom.reject(error);
+//     } else {
+//       if (token) {
+//         prom.resolve(token);
+//       }
+//     }
+//   });
+
+//   failedQueue = [];
+// };
+
+const callReissue = async () => {
+  try {
+    const response = await getNewToken();
+    const newToken = response?.data.accessToken;
+    return newToken;
+  } catch (e) {
+    return Promise.reject(e);
+  }
+};
+
+let retry = false;
+
+client.interceptors.request.use(
+  (config) => {
+    console.log('response again', config);
+
+    const accessToken = useAuthStore.getState().accessToken;
+    if (config.url !== '/auth/reissue' && accessToken) {
+      config.headers.Authorization = `Bearer ${accessToken}`;
+    }
+    return config;
+  },
+  (error) => Promise.reject(error),
+);
+
+client.interceptors.response.use(
+  (response) => response,
+  async (error) => {
+    const setAccessToken = useAuthStore.getState().setAccessToken;
+    const logout = useAuthStore.getState().logout;
+    const isLoggedIn = useAuthStore.getState().isLoggedIn;
+
+    const originalRequest = error.config;
+
+    if (!originalRequest || originalRequest.url === '/auth/reissue') {
+      if (isLoggedIn) logout();
+      return Promise.reject(error);
+    }
+
+    if ((error.response?.status === 401 || error.response?.status === 403) && !retry) {
+      retry = true;
+      if (isRefreshing) {
+        if (isLoggedIn) logout();
+        // try {
+        //   return new Promise((resolve, reject) => {
+        //     failedQueue.push({
+        //       resolve: (token: string) => {
+        //         originalRequest.headers.Authorization = `Bearer ${token}`;
+        //         resolve(client(originalRequest));
+        //       },
+        //       reject: (err: unknown) => reject(err),
+        //     });
+        //   });
+        // } catch (e) {
+        //   return Promise.reject(e);
+        // }
+      } else {
+        isRefreshing = true;
+        try {
+          const newToken = await callReissue();
+          setAccessToken(newToken);
+          // processQueue(null, newToken);
+          isRefreshing = false;
+          originalRequest.headers.Authorization = `Bearer ${newToken}`;
+          return client(originalRequest);
+        } catch (e) {
+          // processQueue(e, null);
+          isRefreshing = false;
+          if (isLoggedIn) logout();
+          return Promise.reject(e);
+        }
+      }
+    }
+    if (isLoggedIn) logout();
+    console.error('Failed to refresh token', error);
+    return Promise.reject(error);
+  },
+);
+
+export default client;