Merge pull request #63 from dib3474/feature/my-page

마이페이지 채팅, 좋아요, 리뷰 축제 보기 추가

Author: skybluesharkk

src/App.tsx

@@ -6,7 +6,8 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { AuthProvider } from '@/context/AuthContext';
 import { ToastContainer } from 'react-toastify';
 import { ErrorBoundary } from 'react-error-boundary';
-import ErrorComponent from './components/common/ErrorComponent';
+import ErrorComponent from '@/components/error/ErrorComponent';
+import { WebSocketProvider } from '@/context/WebSocketContext';
 
 const App = () => {
   return (
@@ -15,9 +16,11 @@ const App = () => {
     >
       <QueryClientProvider client={queryClient}>
         <AuthProvider>
-          <BrowserRouter>
-            <Routes />
-          </BrowserRouter>
+          <WebSocketProvider>
+            <BrowserRouter>
+              <Routes />
+            </BrowserRouter>
+          </WebSocketProvider>
         </AuthProvider>
         <ToastContainer />
         {import.meta.env.VITE_ENABLE_RQ_DEVTOOLS === 'true' && <ReactQueryDevtools />}

src/apis/chat/getMyChats.ts

@@ -0,0 +1,24 @@
+import { apiInstance, type ApiErrorResponse } from '@/apis/apiInstance';
+import type { ApiResponseList } from '@/apis/apiResponse';
+import API_ENDPOINTS from '@/constants/apiEndpoints';
+import type { AxiosResponse } from 'axios';
+
+export interface MyChat {
+  roomId: number;
+  roomName: string;
+  festivalId: number;
+  posterInfo: string;
+  existNewMessage: boolean;
+}
+
+export const getMyChats = async (
+  page = 0,
+  size = 5,
+): Promise<AxiosResponse<ApiResponseList<MyChat>, ApiErrorResponse>> => {
+  return await apiInstance.get<ApiResponseList<MyChat>>(API_ENDPOINTS.MY_CHATS, {
+    params: {
+      page,
+      size,
+    },
+  });
+};

src/apis/review/getMyReviewFestivals.ts

@@ -0,0 +1,14 @@
+import { apiInstance, type ApiErrorResponse } from '@/apis/apiInstance';
+import type { ApiResponseList } from '@/apis/apiResponse';
+import API_ENDPOINTS from '@/constants/apiEndpoints';
+import type { Festival } from '@/types/FestivalType';
+import type { AxiosResponse } from 'axios';
+
+export const getMyReviewFestivals = async (
+  page = 0,
+  size = 5,
+): Promise<AxiosResponse<ApiResponseList<Festival>, ApiErrorResponse>> => {
+  return await apiInstance.get<ApiResponseList<Festival>>(API_ENDPOINTS.MY_REVIEWS_FESTIVAL, {
+    params: { page, size },
+  });
+};

src/apis/wish/getMyWishFestivals.ts

@@ -0,0 +1,14 @@
+import { apiInstance, type ApiErrorResponse } from '@/apis/apiInstance';
+import type { ApiResponseList } from '@/apis/apiResponse';
+import API_ENDPOINTS from '@/constants/apiEndpoints';
+import type { Festival } from '@/types/FestivalType';
+import type { AxiosResponse } from 'axios';
+
+export const getMyWishFestivals = async (
+  page = 0,
+  size = 5,
+): Promise<AxiosResponse<ApiResponseList<Festival>, ApiErrorResponse>> => {
+  return await apiInstance.get<ApiResponseList<Festival>>(API_ENDPOINTS.MY_WISHES_FESTIVAL, {
+    params: { page, size },
+  });
+};

src/components/common/Header.tsx

@@ -8,7 +8,7 @@ import { ROUTE_PATH } from '@/constants/routes';
 import { Link, useNavigate } from 'react-router-dom';
 import Settings from '@/components/icon/SettingIcon';
 
-interface HeaderProps {
+export interface HeaderProps {
   variant?: 'logo' | 'page' | 'all' | 'mypage';
   title?: string;
 }

src/components/common/ErrorComponent.tsx src/components/error/ErrorComponent.tsxsrc/components/common/ErrorComponent.tsx renamed to src/components/error/ErrorComponent.tsx

@@ -1,12 +1,12 @@
 import Button from '@/components/common/Button';
-import useNav from '@/hooks/useNav';
 
 interface ErrorComponentProps {
   title?: string;
   message?: string;
   showBackButton?: boolean;
   onRetry?: () => void;
   isGlobal?: boolean;
+  className?: string;
 }
 
 /**
@@ -25,9 +25,8 @@ const ErrorComponent = ({
   showBackButton = true,
   onRetry,
   isGlobal = false,
+  className,
 }: ErrorComponentProps) => {
-  const { goBack } = useNav();
-
   // 기본값 설정
   const displayTitle = title || (isGlobal ? '문제가 발생했습니다' : '오류가 발생했습니다');
   const displayMessage =
@@ -42,7 +41,7 @@ const ErrorComponent = ({
     : 'flex flex-col items-center justify-center h-[calc(100vh-110px)]';
 
   return (
-    <div className={containerClass}>
+    <div className={`${containerClass} ${className}`}>
       <div className="text-center flex flex-col gap-10">
         <div className="flex flex-col gap-1">
           <h2 className="text-xl font-semibold mb-2">{displayTitle}</h2>
@@ -66,7 +65,12 @@ const ErrorComponent = ({
             </Button>
           ) : (
             showBackButton && (
-              <Button variant={onRetry ? 'secondary' : 'primary'} onClick={goBack} fullWidth>
+              <Button
+                variant={onRetry ? 'secondary' : 'primary'}
+                // 에러 컴포넌트가 라우터에서 벗어나면 이전 페이지로 돌아가는 것이 불가능해지므로 이 방법을 사용했습니다.
+                onClick={() => window.history.back()}
+                fullWidth
+              >
                 이전 페이지로 돌아가기
               </Button>
             )

src/components/error/ErrorPage.tsx

@@ -0,0 +1,30 @@
+import Container from '@/components/common/Container';
+import Header from '@/components/common/Header';
+import ErrorComponent from '@/components/error/ErrorComponent';
+import Footer from '@/components/common/Footer';
+import type { HeaderProps } from '@/components/common/Header';
+
+interface ErrorPageProps {
+  title?: string;
+  message?: string;
+  variant: HeaderProps['variant'];
+}
+
+/**
+ * 에러 페이지
+ * @param title - 에러 페이지 제목
+ * @param message - 에러 페이지 메시지
+ * @param variant - 에러 페이지 변형 타입
+ * @returns 에러 페이지
+ */
+const ErrorPage = ({ title, message, variant }: ErrorPageProps) => {
+  return (
+    <Container>
+      <Header variant={variant} title={title} />
+      <ErrorComponent title={title} message={message} />
+      <Footer />
+    </Container>
+  );
+};
+
+export default ErrorPage;

src/components/loading/LoadingPage.tsx

@@ -0,0 +1,30 @@
+import LoadingSpinner from '@/components/loading/LoadingSpinner';
+import Container from '@/components/common/Container';
+import Footer from '@/components/common/Footer';
+import Header from '@/components/common/Header';
+import type { HeaderProps } from '@/components/common/Header';
+
+interface LoadingPageProps {
+  title?: string;
+  message?: string;
+  variant: HeaderProps['variant'];
+}
+
+/**
+ * 로딩 페이지
+ * @param title - 로딩 페이지 제목
+ * @param message - 로딩 페이지 메시지
+ * @param variant - 로딩 페이지 변형 타입
+ * @returns 로딩 페이지
+ */
+const LoadingPage = ({ title, message, variant }: LoadingPageProps) => {
+  return (
+    <Container>
+      <Header variant={variant} title={title} />
+      <LoadingSpinner size="lg" className="h-[calc(100dvh-110px)]" message={message} />
+      <Footer />
+    </Container>
+  );
+};
+
+export default LoadingPage;

src/constants/apiEndpoints.ts

@@ -9,7 +9,7 @@ const API_ENDPOINTS = {
   FESTIVAL_CHAT_ROOM_MESSAGES: '/api/chatRooms/:chatRoomId/messages',
   FESTIVAL_SEARCH: '/api/festivals',
   FESTIVAL_PICK: '/api/recommendations',
-  CHAT: '/stomp',
+  STOMP: '/stomp',
   // OAuth 로그인
   GOOGLE_LOGIN: '/oauth2/authorization/google',
   KAKAO_LOGIN: '/oauth2/authorization/kakao',
@@ -23,6 +23,12 @@ const API_ENDPOINTS = {
   LOGOUT: '/api/users/logout',
   // 회원탈퇴
   DELETE_USER: '/api/users',
+  // 내가 참여한 채팅 방 조회
+  MY_CHATS: '/api/chatRooms/me',
+  // 내가 좋아요한 축제 목록 조회
+  MY_WISHES_FESTIVAL: '/api/festivals/wishedBy/me',
+  // 내가 작성한 리뷰의 축제 목록 조회
+  MY_REVIEWS_FESTIVAL: '/api/festivals/reviewedBy/me',
   // 내가 작성한 리뷰
   MY_REVIEWS: '/api/reviews/my',
   // 리뷰 (조회/수정/삭제)