WIP: mypage api

src/api/getPartyCurrentSituation.ts

@@ -0,0 +1,25 @@
+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;
+    sort: string;
+    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,24 @@
-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;
+    sort: string;
+    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/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) => {

src/components/profile/PartyRequestItemList.tsx

@@ -1,11 +1,12 @@
-import { useSuspenseQuery } from '@tanstack/react-query';
+import { useSuspenseInfiniteQuery, useSuspenseQuery } from '@tanstack/react-query';
 import { FC } from 'react';
 import getPartyJoin, { API_GET_PARTY_JOIN_KEY } from 'src/api/getPartyJoin';
 import { PartyRequestRole } from './PartyRequest';
 import PartyRequestList from './PartyRequestCard';
 import { DefaultText } from '@components/common/DefaultText';
 import styled from '@emotion/styled';
 import PartyRequestCard from './PartyRequestCard';
+import { ObserverTrigger } from '@components/hoc/ObserverTrigger';
 
 interface PartyRequestItemListProps {
     role: PartyRequestRole;
@@ -20,22 +21,43 @@ const Container = styled.div`
 `;
 
 const PartyRequestItemList: FC<PartyRequestItemListProps> = ({ role }) => {
-    const requestList = useSuspenseQuery({
-        queryKey: [API_GET_PARTY_JOIN_KEY, { role }],
-        queryFn: () => getPartyJoin({ role }),
+    const partyRequestList = useSuspenseInfiniteQuery({
+        queryKey: [API_GET_PARTY_JOIN_KEY, , { role }],
+        queryFn: ({ pageParam = 0 }) =>
+            getPartyJoin({
+                page: pageParam,
+                role,
+                sort: '',
+                size: 5,
+            }),
+        initialPageParam: 0,
+        getNextPageParam: (lastPage) => lastPage?.pageInfo?.page,
     });
+    const onObserve = () => {
+        if (partyRequestList.hasNextPage) partyRequestList.fetchNextPage();
+    };
 
-    if (!requestList.data.length) {
+    if (!partyRequestList.data.pages[0].partyList.length) {
         return (
             <Container>
                 <DefaultText text="현재 조회된 요청이 없습니다." size={18} weight={700} />
             </Container>
         );
     }
 
-    return requestList.data.map((request) => (
-        <PartyRequestCard key={request.partyId} data={request} role={role} />
-    ));
+    return (
+        <ObserverTrigger onObserve={onObserve} observerMinHeight="30px">
+            {partyRequestList.data.pages.map((request) =>
+                request.partyList.map((individualRequest) => (
+                    <PartyRequestCard
+                        key={individualRequest.partyId}
+                        data={individualRequest}
+                        role={role}
+                    />
+                )),
+            )}
+        </ObserverTrigger>
+    );
 };
 
 export default PartyRequestItemList;

src/components/profile/PartySituation.tsx

@@ -5,15 +5,22 @@ import PartySituationItemList from './PartySituationItemList';
 import ProfileTabSortingButton from './ProfileTabSortingButton';
 import { useRouter } from 'next/router';
 import { useSearchParam } from 'react-use';
+import { PartyCurrentSituationRequestStatus } from 'types/party';
 
 type PartySituationType = '모집중' | '참가중';
 export type PartySituationRole = 'HOST' | 'VOLUNTEER';
+type PartyCurrentStatus = '모집중' | '모집완료' | '파티종료';
 
 interface CategoryItemType {
     id: PartySituationRole;
     label: PartySituationType;
 }
 
+interface StatusItemType {
+    id: PartyCurrentSituationRequestStatus;
+    label: PartyCurrentStatus;
+}
+
 const Container = styled.div`
     display: flex;
     flex-direction: column;
@@ -27,47 +34,90 @@ const PartyListContainer = styled.div`
 `;
 const TabWrapper = styled.div`
     display: flex;
+    flex-direction: column;
     gap: 10px;
     padding: 10px;
 `;
 
+const TabSection = styled.section`
+    display: flex;
+    gap: 10px;
+`;
+
 const categoryTab: CategoryItemType[] = [
     { id: 'HOST', label: '모집중' },
     { id: 'VOLUNTEER', label: '참가중' },
 ];
 
+const statusTab: StatusItemType[] = [
+    { id: 'RECRUIT', label: '모집중' },
+    {
+        id: 'RECRUIT_FINISH',
+        label: '모집완료',
+    },
+    { id: 'PARTY_FINISH', label: '파티종료' },
+];
+
 function isPartySituationRole(value: unknown): value is PartySituationRole {
     return value === 'HOST' || value === 'VOLUNTEER';
 }
+function isPartySituation(value: unknown): value is PartyCurrentSituationRequestStatus {
+    return value === 'RECRUIT' || value === 'RECRUIT_FINISH' || value === 'PARTY_FINISH';
+}
 
 const PartySituation = () => {
-    // const [selectedRole, setSelectedRole] = useState<PartySituationRole>('HOST');
     const { replace, query } = useRouter();
     const situationRole = useSearchParam('role');
+    const situation = useSearchParam('situation');
     const selectedRole = useMemo(() => {
         if (!situationRole || !isPartySituationRole(situationRole)) {
             return;
         }
         return situationRole;
     }, [situationRole]);
 
+    const selectedSituation = useMemo(() => {
+        if (!situation || !isPartySituation(situation)) {
+            return;
+        }
+        return situation;
+    }, [situation]);
+
     return (
         <Container>
             <TabWrapper>
-                {categoryTab.map((tab) => {
-                    const onClick = () => {
-                        replace({ query: { ...query, role: tab.id } });
-                    };
+                <TabSection>
+                    {categoryTab.map((tab) => {
+                        const onClick = () => {
+                            replace({ query: { ...query, role: tab.id } });
+                        };
+
+                        return (
+                            <ProfileTabSortingButton
+                                key={tab.id}
+                                text={tab.label}
+                                filled={tab.id === selectedRole}
+                                onClick={onClick}
+                            />
+                        );
+                    })}
+                </TabSection>
+                <TabSection>
+                    {statusTab.map((tab) => {
+                        const onClick = () => {
+                            replace({ query: { ...query, status: tab.id } });
+                        };
 
-                    return (
-                        <ProfileTabSortingButton
-                            key={tab.id}
-                            text={tab.label}
-                            filled={tab.id === selectedRole}
-                            onClick={onClick}
-                        />
-                    );
-                })}
+                        return (
+                            <ProfileTabSortingButton
+                                key={tab.id}
+                                text={tab.label}
+                                filled={tab.id === selectedSituation}
+                                onClick={onClick}
+                            />
+                        );
+                    })}
+                </TabSection>
             </TabWrapper>
 
             <PartyListContainer>

src/components/profile/PartySituationItemList.tsx

@@ -1,6 +1,6 @@
 import { useSuspenseQuery } from '@tanstack/react-query';
 import { FC } from 'react';
-import getPartyStatus, { API_GET_PARTY_STATUS_KEY } from 'src/api/getPartyStatus';
+import getPartyStatus, { API_GET_PARTY_STATUS_KEY } from 'src/api/getPartyCurrentSituation';
 import { PartySituationRole } from './PartySituation';
 import PartyList from './PartyList';
 import { DefaultText } from '@components/common/DefaultText';