WIP: 파티 프로필 관련 api 재수정 작업 진행중(파티 현황, 초대 요청 관련 작업까지 완료)

pages/profile/index.tsx

@@ -1,4 +1,5 @@
 import BackgroundImage from '@components/common/BackgroundImage';
+import { DefaultButton } from '@components/common/DefaultButton';
 import { DefaultHeader } from '@components/common/DefaultHeader';
 import { HeaderBackButton } from '@components/common/HeaderBackButton';
 import QuerySuspenseErrorBoundary from '@components/hoc/QuerySuspenseErrorBoundary';
@@ -10,6 +11,7 @@ import ProfileTab from '@components/profile/ProfileTab';
 import styled from '@emotion/styled';
 import { GetServerSideProps } from 'next';
 import Link from 'next/link';
+import { useRouter } from 'next/router';
 import { useRef } from 'react';
 import { useScroll } from 'react-use';
 
@@ -28,7 +30,6 @@ const Container = styled.div`
 const ProfileInfoContainer = styled.div`
     display: flex;
     flex-direction: column;
-    height: 200px;
     width: 100%;
 `;
 
@@ -40,6 +41,15 @@ const RightAreaContainer = styled.div`
     cursor: pointer;
 `;
 
+const ProfileLoginButtonWrapper = styled.div`
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 120px;
+    padding: 0 30px;
+`;
+
 const RightArea = () => {
     return (
         <Link href={'/setting'}>
@@ -51,14 +61,29 @@ const RightArea = () => {
 const Profile = () => {
     const scrollRef = useRef(null);
     const { y } = useScroll(scrollRef);
+    const { push } = useRouter();
+    const onClickLoginButton = () => {
+        push('/signin');
+    };
 
     return (
         <Container ref={scrollRef}>
             <DefaultHeader leftArea={<HeaderBackButton />} rightArea={<RightArea />} />
             <BackgroundImage scrollY={y} src="/images/profile/profilebackground.jpg" height={200} />
             <ProfileInfoContainer>
                 <QuerySuspenseErrorBoundary
-                    errorFallback={ProfileError}
+                    errorFallback={({ error }) => {
+                        if (error?.response?.status === 401) {
+                            return (
+                                <ProfileLoginButtonWrapper>
+                                    <DefaultButton
+                                        text="로그인 하러 가기"
+                                        onClick={onClickLoginButton}
+                                    />
+                                </ProfileLoginButtonWrapper>
+                            );
+                        }
+                    }}
                     suspenseFallback={<ProfileLoading />}
                 >
                     <ProfileInfo />
@@ -79,7 +104,7 @@ export const getServerSideProps: GetServerSideProps = async (context) => {
         return {
             redirect: {
                 permanent: false,
-                destination: '/profile?category=situation&role=HOST',
+                destination: '/profile?category=situation&role=HOST&status=RECRUIT',
             },
         };
     }

src/api/getPartyCurrentSituation.ts

@@ -0,0 +1,24 @@
+import defaultRequest from 'src/lib/axios/defaultRequest';
+import { GetPartyCurrentSituationResponse } from 'types/party';
+
+type GetPartyCurrentSituationRequestRole = 'HOST' | 'VOLUNTEER';
+export type GetPartyCurrentSituationRequestStatus = 'RECRUIT' | 'RECRUIT_FINISH' | 'PARTY_FINISH';
+interface GetPartyCurrentSituationParameter {
+    page: number;
+    size: number;
+    role: GetPartyCurrentSituationRequestRole;
+    status: GetPartyCurrentSituationRequestStatus;
+}
+
+export const API_GET_PARTY_STATUS_KEY = '/api/party/party-status';
+
+const getPartyStatus = async (params: GetPartyCurrentSituationParameter) => {
+    const { data } = await defaultRequest.get<
+        InfinitePaginationDataType<'partyList', GetPartyCurrentSituationResponse>
+    >(API_GET_PARTY_STATUS_KEY, {
+        params,
+    });
+    return data;
+};
+
+export default getPartyStatus;

src/api/getPartyJoin.ts

@@ -1,20 +1,23 @@
-import variableAssignMent from "@utils/variableAssignment";
-import defaultRequest from "src/lib/axios/defaultRequest";
-import { PartyJoinResponse } from "types/party/join/PartyJoinResponse";
+import variableAssignMent from '@utils/variableAssignment';
+import defaultRequest from 'src/lib/axios/defaultRequest';
+import { PartyJoinResponse } from 'types/party/join/PartyJoinResponse';
 
-interface getPartyJoinParameter {
-  role: string;
+type GetPartyJoinRequestRole = 'HOST' | 'VOLUNTEER';
+interface GetPartyJoinParameter {
+    page: number;
+    size: number;
+    role: GetPartyJoinRequestRole;
 }
 
-export const API_GET_PARTY_JOIN_KEY = "/api/party/party-join?role={{role}}";
+export const API_GET_PARTY_JOIN_KEY = '/api/party/party-join';
 
-const getPartyJoin = async ({
-  role,
-}: getPartyJoinParameter): Promise<PartyJoinResponse[]> => {
-  const { data } = await defaultRequest.get(
-    variableAssignMent(API_GET_PARTY_JOIN_KEY, { role: role })
-  );
-  return data;
+const getPartyJoin = async (params: GetPartyJoinParameter) => {
+    const { data } = await defaultRequest.get<
+        InfinitePaginationDataType<'partyList', PartyJoinResponse>
+    >(API_GET_PARTY_JOIN_KEY, {
+        params,
+    });
+    return data;
 };
 
 export default getPartyJoin;

src/api/getPartyMainPage.ts

@@ -1,28 +1,23 @@
-import variableAssignMent from "@utils/variableAssignment";
-import defaultRequest from "src/lib/axios/defaultRequest";
-import { PartyListResponse } from "types/common/PartyListResponse";
+import variableAssignMent from '@utils/variableAssignment';
+import defaultRequest from 'src/lib/axios/defaultRequest';
+import { PartyListResponse } from 'types/common/PartyListResponse';
 
 interface GetMainPageParameter {
-  longitude: number;
-  latitude: number;
-  lastPartyId?: number;
-  size?: number;
+    longitude: number;
+    latitude: number;
+    lastPartyId?: number;
+    size?: number;
 }
 
-export const API_GET_MAIN_PAGE =
-  "/api/main";
+export const API_GET_MAIN_PAGE = '/api/main';
 
 const getMainPageData = async (params: GetMainPageParameter) => {
-  const { data } = await defaultRequest.get<
-    InfinitePaginationDataType<"partyList", PartyListResponse>
-  >(
-   API_GET_MAIN_PAGE, {
-    params:{
-      ...params
-    }
-   }
-  );
-  return data;
+    const { data } = await defaultRequest.get<
+        InfinitePaginationDataType<'partyList', PartyListResponse>
+    >(API_GET_MAIN_PAGE, {
+        params,
+    });
+    return data;
 };
 
 export default getMainPageData;

src/components/hoc/QuerySuspenseErrorBoundary.tsx

@@ -1,41 +1,48 @@
-import DefaultError from "@components/common/DefaultError";
-import DefaultLoading from "@components/common/DefaultLoading";
-import { Suspense } from "@suspensive/react";
-import { QueryErrorResetBoundary } from "@tanstack/react-query"; // (*)
-import { FC, PropsWithChildren, ReactEventHandler } from "react";
-import { ErrorBoundary } from "react-error-boundary";
+import DefaultError from '@components/common/DefaultError';
+import DefaultLoading from '@components/common/DefaultLoading';
+import { Suspense } from '@suspensive/react';
+import { QueryErrorResetBoundary } from '@tanstack/react-query'; // (*)
+import { AxiosError } from 'axios';
+import { FC, PropsWithChildren, ReactEventHandler } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 
 interface QuerySuspenseErrorBoundaryProps {
-  children: React.ReactNode;
-  suspenseFallback?: React.ReactNode | string;
-  errorFallback?: (
-    resetErrorBoundary: ReactEventHandler<HTMLButtonElement>
-  ) => React.ReactNode;
+    children: React.ReactNode;
+    suspenseFallback?: React.ReactNode | string;
+    errorFallback?: ({
+        resetErrorBoundary,
+        error,
+    }: {
+        resetErrorBoundary: ReactEventHandler<HTMLButtonElement>;
+        error?: AxiosError;
+    }) => React.ReactNode;
 }
 
-const QuerySuspenseErrorBoundary: FC<
-  PropsWithChildren<QuerySuspenseErrorBoundaryProps>
-> = ({ children, suspenseFallback, errorFallback }) => {
-  return (
-    <QueryErrorResetBoundary>
-      {({ reset }) => (
-        <ErrorBoundary
-          onReset={reset}
-          fallbackRender={({ resetErrorBoundary }) =>
-            errorFallback ? (
-              errorFallback(resetErrorBoundary)
-            ) : (
-              <DefaultError onClick={resetErrorBoundary} />
-            )
-          }
-        >
-          <Suspense.CSROnly fallback={suspenseFallback ?? <DefaultLoading />}>
-            {children}
-          </Suspense.CSROnly>
-        </ErrorBoundary>
-      )}
-    </QueryErrorResetBoundary>
-  );
+const QuerySuspenseErrorBoundary: FC<PropsWithChildren<QuerySuspenseErrorBoundaryProps>> = ({
+    children,
+    suspenseFallback,
+    errorFallback,
+}) => {
+    return (
+        <QueryErrorResetBoundary>
+            {({ reset }) => (
+                <ErrorBoundary
+                    onReset={reset}
+                    fallbackRender={({ resetErrorBoundary, error }) =>
+                        errorFallback ? (
+                            errorFallback({ resetErrorBoundary, error })
+                        ) : (
+                            <DefaultError onClick={resetErrorBoundary} />
+                        )
+                    }
+                >
+                    <Suspense.CSROnly fallback={suspenseFallback ?? <DefaultLoading />}>
+                        {children}
+                    </Suspense.CSROnly>
+                </ErrorBoundary>
+            )}
+        </QueryErrorResetBoundary>
+    );
 };
 
 export default QuerySuspenseErrorBoundary;

src/components/home/HomeList.tsx

@@ -41,7 +41,7 @@ export const HomeList: FC = () => {
                   })
                 : Promise.resolve(null),
         initialPageParam: 0,
-        getNextPageParam: (lastPage) => lastPage?.pageInfo?.lastPartyId,
+        getNextPageParam: (lastPage) => lastPage?.pageInfo?.page,
     });
 
     const onClickPartyCard = (id: number) => {