[Feature] 당겨서 새로 고침 기능 추가

apps/web/src/entities/user/model/user.model.ts

@@ -1,3 +1,5 @@
+import type { RequiredDeep } from 'type-fest';
+
 import type { components, operations } from '@/shared/api/apiTypes';
 import type { ScheduleCalendarItem } from '@/shared/types/schedule';
 
@@ -6,8 +8,9 @@ import type { ScheduleCalendarItem } from '@/shared/types/schedule';
 export type MyInfoResponse = components['schemas']['MyInfoResponse'];
 export type CrewMemberListResponse =
   components['schemas']['CrewMemberListResponse'];
-export type CrewMemberDetailResponse =
-  components['schemas']['CrewMemberDetailResponse'];
+export type CrewMemberDetailResponse = RequiredDeep<
+  components['schemas']['CrewMemberDetailResponse']
+>;
 
 export type MyAttendanceCalendarResponse = ScheduleCalendarItem[];
 export type MyAttendanceCalendarRequest = NonNullable<

apps/web/src/features/order/model/useOrder.ts

@@ -1,11 +1,10 @@
 import { useActivityParams } from '@stackflow/react';
-import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
 
 import { PAYMENT_METHOD_MAP } from '@/shared/constants/order';
 import { parseOrderParams } from '@/shared/lib/orderParams';
 import type { OrderPageParams } from '@/shared/lib/orderParams';
-import { memberQueries } from '@/shared/queries';
 import { orderQueries } from '@/shared/queries/order';
 import { toastError } from '@/shared/ui/toast';
 
@@ -24,7 +23,6 @@ export function useOrder(options: UseOrderOptions = {}) {
   const params = useActivityParams<OrderPageParams>();
   const { skuId, quantity, cartItemIds } = parseOrderParams(params);
   const isDirectOrder = skuId > 0;
-  const queryClient = useQueryClient();
 
   const [selectedPaymentCode, setSelectedPaymentCode] = useState<
     string | undefined

apps/web/src/pages/mypage/styles/MemberManagePage.css.ts

@@ -35,3 +35,30 @@ export const sentinel = style({
   height: 1,
   width: '100%',
 });
+
+export const pullIndicator = style({
+  width: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  paddingTop: 8,
+  paddingBottom: 8,
+  gap: 4,
+});
+
+export const pullHint = style([
+  typography.body.b2,
+  {
+    color: vars.colors.gray70,
+    textAlign: 'center',
+  },
+]);
+
+export const pullText = style([
+  typography.body.b2,
+  {
+    color: vars.colors.gray70,
+    textAlign: 'center',
+  },
+]);

apps/web/src/pages/mypage/ui/MemberManagePage.tsx

@@ -6,7 +6,7 @@ import {
   useQuery,
   useQueryClient,
 } from '@tanstack/react-query';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 
 import * as styles from '@/pages/mypage/styles/MemberManagePage.css';
 
@@ -20,9 +20,11 @@ import { RequestList } from '@/features/crew-manage/ui';
 
 import { MEMBER_ROLE } from '@/shared/constants/member-role';
 import { useInfiniteScroll } from '@/shared/lib/useInfiniteScroll';
+import { usePullToRefresh } from '@/shared/lib/usePullToRefresh';
 import { memberQueries } from '@/shared/queries';
 import { BackButton } from '@/shared/ui/button';
 import { AppLayout } from '@/shared/ui/layout';
+import { spinner as pageLoaderSpinner } from '@/shared/ui/loading/PageLoader.css.ts';
 
 import type { MemberRequestItem } from '@/entities/crew/model/crew.types';
 import type { MemberItem } from '@/entities/user/model';
@@ -40,44 +42,66 @@ export function MemberManagePage({ params }: { params?: { id?: string } }) {
     fetchNextPage,
     hasNextPage,
     isFetchingNextPage,
+    refetch: refetchMembers,
   } = useInfiniteQuery({
     ...memberQueries.crewMembersQuery(crewId),
     enabled: crewId > 0 && activeTab === 'member',
   });
 
-  const { scrollRef, bottomSentinelRef } = useInfiniteScroll({
-    hasNextPage: hasNextPage ?? false,
-    isFetchingNextPage,
-    fetchNextPage,
-  });
+  const { scrollRef: infiniteScrollRef, bottomSentinelRef } = useInfiniteScroll(
+    {
+      hasNextPage: hasNextPage ?? false,
+      isFetchingNextPage,
+      fetchNextPage,
+    }
+  );
 
   const members: MemberItem[] =
     membersData?.pages.flatMap(
       (page) =>
-        page.result?.content.map((member) => ({
-          id: member.id ?? 0,
-          memberId: member.memberId ?? member.id ?? 0,
-          nickname: member.nickname ?? '',
-          profileImageUrl: member.profileImageUrl ?? '',
-          role: member.role ?? 'MEMBER',
-          joinedDate: member.joinedDate ?? '',
+        page.result.content?.map((member) => ({
+          id: member.id!,
+          memberId: member.memberId!,
+          nickname: member.nickname!,
+          profileImageUrl: member.profileImageUrl!,
+          role: member.role!,
+          joinedDate: member.joinedDate!,
         })) ?? []
     ) ?? [];
 
   const totalCount = membersData?.pages[0]?.result?.totalCount;
 
-  const { data: joinRequestsData } = useQuery({
+  const { data: joinRequestsData, refetch: refetchRequests } = useQuery({
     ...memberQueries.joinRequestsQuery(crewId),
     enabled: crewId > 0,
   });
 
   const requests = joinRequestsData?.result ?? [];
 
-  if (isLoading || !myInfoData?.result) {
-    return <></>;
-  }
+  const {
+    scrollRef: pullToRefreshScrollRef,
+    isRefreshing: isPullRefreshing,
+    pullProgress,
+  } = usePullToRefresh({
+    enabled: crewId > 0,
+    onRefresh: async () => {
+      if (crewId <= 0) return;
+
+      if (activeTab === 'member') {
+        await refetchMembers();
+      } else {
+        await refetchRequests();
+      }
+    },
+  });
 
-  const isLeader = myInfo?.crewMemberRole === MEMBER_ROLE.LEADER;
+  const setMainContainerRef = useCallback(
+    (el: HTMLDivElement | null) => {
+      pullToRefreshScrollRef.current = el;
+      infiniteScrollRef.current = activeTab === 'member' ? el : null;
+    },
+    [activeTab, infiniteScrollRef, pullToRefreshScrollRef]
+  );
 
   const queryClient = useQueryClient();
 
@@ -90,6 +114,12 @@ export function MemberManagePage({ params }: { params?: { id?: string } }) {
     },
   });
 
+  if (isLoading || !myInfoData?.result) {
+    return <></>;
+  }
+
+  const isLeader = myInfo?.crewMemberRole === MEMBER_ROLE.LEADER;
+
   const handleDeleteMember = isLeader
     ? (targetMemberId: number) =>
         deleteMutation.mutate({ crewId, targetMemberId })
@@ -106,10 +136,21 @@ export function MemberManagePage({ params }: { params?: { id?: string } }) {
             requestCount={requests.length}
           />
         </div>
-        <div
-          className={styles.mainContainer}
-          ref={activeTab === 'member' ? scrollRef : undefined}
-        >
+        <div className={styles.mainContainer} ref={setMainContainerRef}>
+          {(isPullRefreshing || pullProgress > 0) && (
+            <div className={styles.pullIndicator} aria-hidden>
+              {isPullRefreshing ? (
+                <>
+                  <div className={pageLoaderSpinner} />
+                  <p className={styles.pullText}>새로고침 중</p>
+                </>
+              ) : (
+                <p className={styles.pullHint}>
+                  {pullProgress >= 1 ? '놓으면 새로고침' : '당겨서 새로고침'}
+                </p>
+              )}
+            </div>
+          )}
           {activeTab === 'request' ? (
             <RequestListView crewId={crewId} requests={requests} />
           ) : (