[배포] 이미지 전처리, 광고 기능, 하단바 리디자인, 인앱 알림 페이지 및 토스트 프로덕션 배포

src/App.tsx

@@ -42,6 +42,7 @@ const ManagedMemberList = lazy(() => import('./pages/Manager/ManagedMemberList')
 const ManagedRecruitment = lazy(() => import('./pages/Manager/ManagedRecruitment'));
 const ManagedRecruitmentForm = lazy(() => import('./pages/Manager/ManagedRecruitmentForm'));
 const ManagedRecruitmentWrite = lazy(() => import('./pages/Manager/ManagedRecruitmentWrite'));
+const NotificationsPage = lazy(() => import('./pages/Notifications'));
 const Schedule = lazy(() => import('./pages/Schedule'));
 const Timer = lazy(() => import('./pages/Timer'));
 const MyPage = lazy(() => import('./pages/User/MyPage'));
@@ -84,6 +85,11 @@ function App() {
           <Route element={<ProtectedRoute />}>
             <Route element={<Layout showBottomNav />}>
               <Route path="home" element={<Home />} />
+              <Route path="notifications" element={<NotificationsPage />} />
+              <Route path="council">
+                <Route index element={<CouncilDetail />} />
+                <Route path="notice/:noticeId" element={<CouncilNotice />} />
+              </Route>
               <Route path="mypage">
                 <Route index element={<MyPage />} />
                 <Route path="manager">
@@ -97,6 +103,7 @@ function App() {
                 </Route>
               </Route>
               <Route path="timer" element={<Timer />} />
+              <Route path="chats" element={<ChatListPage />} />
               <Route path="clubs">
                 <Route index element={<ClubList />} />
                 <Route path="search" element={<ClubSearch />} />
@@ -113,14 +120,7 @@ function App() {
               <Route path="mypage/manager/:clubId/recruitment/write" element={<ManagedRecruitmentWrite />} />
               <Route path="mypage/manager/:clubId/recruitment/account" element={<ManagedAccount />} />
               <Route path="profile" element={<Profile />} />
-              <Route path="council">
-                <Route index element={<CouncilDetail />} />
-                <Route path="notice/:noticeId" element={<CouncilNotice />} />
-              </Route>
-              <Route path="chats">
-                <Route index element={<ChatListPage />} />
-                <Route path=":chatRoomId" element={<ChatRoom />} />
-              </Route>
+              <Route path="chats/:chatRoomId" element={<ChatRoom />} />
             </Route>
           </Route>
 

src/apis/advertisement/entity.ts

@@ -0,0 +1,15 @@
+export interface Advertisement {
+  id: number;
+  title: string;
+  description: string;
+  imageUrl: string;
+  linkUrl: string;
+}
+
+export interface AdvertisementsRequestParams {
+  count?: number;
+}
+
+export interface AdvertisementsResponse {
+  advertisements: Advertisement[];
+}

src/apis/advertisement/index.ts

@@ -0,0 +1,19 @@
+import { apiClient } from '../client';
+import type { AdvertisementsRequestParams, AdvertisementsResponse } from './entity';
+
+export const getAdvertisements = async (params: AdvertisementsRequestParams = {}) => {
+  const response = await apiClient.get<AdvertisementsResponse, AdvertisementsRequestParams>('advertisements', {
+    params,
+    requiresAuth: true,
+  });
+
+  return response;
+};
+
+export const postAdvertisementClick = async (advertisementId: number) => {
+  const response = await apiClient.post<void>(`advertisements/${advertisementId}/clicks`, {
+    requiresAuth: true,
+  });
+
+  return response;
+};

src/apis/advertisement/mutations.ts

@@ -0,0 +1,15 @@
+import { mutationOptions } from '@tanstack/react-query';
+import { postAdvertisementClick } from '.';
+
+export const advertisementMutationKeys = {
+  click: () => ['advertisements', 'click'] as const,
+};
+
+export const advertisementMutations = {
+  click: () =>
+    mutationOptions({
+      mutationKey: advertisementMutationKeys.click(),
+      mutationFn: postAdvertisementClick,
+      retry: false,
+    }),
+};

src/apis/advertisement/queries.ts

@@ -0,0 +1,17 @@
+import { queryOptions } from '@tanstack/react-query';
+import { getAdvertisements } from '@/apis/advertisement';
+
+export const advertisementQueryKeys = {
+  all: ['advertisements'] as const,
+  randomBatch: (scope: string, batchIndex: number) =>
+    [...advertisementQueryKeys.all, scope, 'random-batch', batchIndex] as const,
+};
+
+export const advertisementQueries = {
+  randomBatch: (scope: string, batchIndex: number) =>
+    queryOptions({
+      queryKey: advertisementQueryKeys.randomBatch(scope, batchIndex),
+      queryFn: () => getAdvertisements({ count: 2 }),
+      staleTime: Infinity,
+    }),
+};

src/apis/auth/index.ts

@@ -1,5 +1,5 @@
-import type { ApiError } from '@/interface/error';
-import { isServerErrorStatus, redirectToServerErrorPage } from '@/utils/ts/errorRedirect';
+import type { ApiError } from '@/utils/ts/error/apiError';
+import { isServerErrorStatus, redirectToServerErrorPage } from '@/utils/ts/error/errorRedirect';
 import { NORMALIZED_API_BASE_URL } from '@/utils/ts/oauth';
 import { apiClient } from '../client';
 import type {
@@ -10,7 +10,9 @@ import type {
   SignupRequest,
 } from './entity';
 
-export const refreshAccessToken = async (): Promise<string> => {
+let refreshAccessTokenPromise: Promise<string> | null = null;
+
+const requestAccessTokenRefresh = async (): Promise<string> => {
   const url = `${NORMALIZED_API_BASE_URL}/users/refresh`;
 
   let response: Response;
@@ -49,6 +51,16 @@ export const refreshAccessToken = async (): Promise<string> => {
   return data.accessToken;
 };
 
+export const refreshAccessToken = async (): Promise<string> => {
+  if (!refreshAccessTokenPromise) {
+    refreshAccessTokenPromise = requestAccessTokenRefresh().finally(() => {
+      refreshAccessTokenPromise = null;
+    });
+  }
+
+  return refreshAccessTokenPromise;
+};
+
 export const signup = async (data: SignupRequest) => {
   const response = await apiClient.post('users/signup', {
     body: data,

src/apis/auth/mutations.ts

@@ -0,0 +1,32 @@
+import { mutationOptions } from '@tanstack/react-query';
+import { deleteMyAccount, logout, putMyInfo, signup } from '.';
+
+export const authMutationKeys = {
+  signup: () => ['signup'] as const,
+  logout: () => ['logout'] as const,
+  withdraw: () => ['withdraw'] as const,
+  updateMyInfo: () => ['modifyMyInfo'] as const,
+};
+
+export const authMutations = {
+  signup: () =>
+    mutationOptions({
+      mutationKey: authMutationKeys.signup(),
+      mutationFn: signup,
+    }),
+  logout: () =>
+    mutationOptions({
+      mutationKey: authMutationKeys.logout(),
+      mutationFn: logout,
+    }),
+  withdraw: () =>
+    mutationOptions({
+      mutationKey: authMutationKeys.withdraw(),
+      mutationFn: deleteMyAccount,
+    }),
+  updateMyInfo: () =>
+    mutationOptions({
+      mutationKey: authMutationKeys.updateMyInfo(),
+      mutationFn: putMyInfo,
+    }),
+};

src/apis/auth/queries.ts

@@ -0,0 +1,27 @@
+import { queryOptions } from '@tanstack/react-query';
+import { getMyInfo, getMyOAuthLinks, getSignupPrefill } from '.';
+
+export const authQueryKeys = {
+  all: ['user'] as const,
+  myInfo: () => [...authQueryKeys.all, 'myInfo'] as const,
+  oauthLinks: () => [...authQueryKeys.all, 'oauthLinks'] as const,
+  signupPrefill: () => [...authQueryKeys.all, 'prefill'] as const,
+};
+
+export const authQueries = {
+  myInfo: () =>
+    queryOptions({
+      queryKey: authQueryKeys.myInfo(),
+      queryFn: getMyInfo,
+    }),
+  oauthLinks: () =>
+    queryOptions({
+      queryKey: authQueryKeys.oauthLinks(),
+      queryFn: getMyOAuthLinks,
+    }),
+  signupPrefill: () =>
+    queryOptions({
+      queryKey: authQueryKeys.signupPrefill(),
+      queryFn: getSignupPrefill,
+    }),
+};

src/apis/chat/mutations.ts

@@ -0,0 +1,38 @@
+import { mutationOptions } from '@tanstack/react-query';
+import { postAdminChatRoom, postChatMessage, postChatMute, postChatRooms } from '@/apis/chat';
+
+export const chatMutationKeys = {
+  createRoom: () => ['chat', 'createRoom'] as const,
+  createAdminRoom: () => ['chat', 'createAdminRoom'] as const,
+  sendMessage: () => ['chat', 'sendMessage'] as const,
+  toggleMute: (chatRoomId?: number) => ['chat', 'toggleMute', chatRoomId ?? 'unknown'] as const,
+};
+
+export const chatMutations = {
+  createRoom: () =>
+    mutationOptions({
+      mutationKey: chatMutationKeys.createRoom(),
+      mutationFn: postChatRooms,
+    }),
+  createAdminRoom: () =>
+    mutationOptions({
+      mutationKey: chatMutationKeys.createAdminRoom(),
+      mutationFn: postAdminChatRoom,
+    }),
+  sendMessage: () =>
+    mutationOptions({
+      mutationKey: chatMutationKeys.sendMessage(),
+      mutationFn: postChatMessage,
+    }),
+  toggleMute: (chatRoomId?: number) =>
+    mutationOptions({
+      mutationKey: chatMutationKeys.toggleMute(chatRoomId),
+      mutationFn: async () => {
+        if (!chatRoomId) {
+          throw new Error('chatRoomId is missing');
+        }
+
+        return postChatMute(chatRoomId);
+      },
+    }),
+};

src/apis/chat/queries.ts

@@ -0,0 +1,32 @@
+import { infiniteQueryOptions, queryOptions } from '@tanstack/react-query';
+import type { ChatMessagesResponse } from './entity';
+import { getChatMessages, getChatRooms } from '.';
+
+export const chatQueryKeys = {
+  all: ['chat'] as const,
+  rooms: () => [...chatQueryKeys.all, 'rooms'] as const,
+  messages: (chatRoomId: number) => [...chatQueryKeys.all, 'messages', chatRoomId] as const,
+  disabledMessages: () => [...chatQueryKeys.all, 'messages', 'disabled'] as const,
+};
+
+export const chatQueries = {
+  rooms: () =>
+    queryOptions({
+      queryKey: chatQueryKeys.rooms(),
+      queryFn: getChatRooms,
+    }),
+  messages: (chatRoomId?: number, limit = 20) =>
+    infiniteQueryOptions({
+      queryKey: chatRoomId ? chatQueryKeys.messages(chatRoomId) : chatQueryKeys.disabledMessages(),
+      queryFn: ({ pageParam }) =>
+        getChatMessages({
+          chatRoomId: chatRoomId!,
+          page: pageParam,
+          limit,
+        }),
+      initialPageParam: 1,
+      getNextPageParam: (lastPage: ChatMessagesResponse) =>
+        lastPage.currentPage < lastPage.totalPage ? lastPage.currentPage + 1 : undefined,
+      enabled: Boolean(chatRoomId),
+    }),
+};