[#60] Refactor/60/워크스페이스상세페이지

[LMS10]

❓이슈

• close Refactor: 워크스페이스 상세 페이지 리팩토링 #60

📝 Description

워크스페이스 상세 페이지(/workspace/[workspaceId]/page.tsx)의 3가지 문제를 리팩토링합니다.

1. 관리자 전용 선택 다운로드

• isAdmin 조건부로 체크박스 컬럼을 렌더링합니다 (데스크탑 테이블 / 모바일 리스트 모두 적용).
• 헤더 체크박스 클릭 시 현재 페이지 전체 선택/해제가 동작합니다.
• selectedReceiptIds: Set<number>로 선택 상태를 관리하며, 페이지나 데이터가 변경되면 자동 초기화됩니다.
• selectedReceiptIds.size > 0일 때만 선택 다운로드 (N) 버튼이 노출됩니다.
• 행 클릭(상세 이동)과 체크박스 클릭이 충돌하지 않도록 e.stopPropagation()을 적용했습니다.
• useExportSelectedReceipts 훅을 사용하며, payload에 workspaceId와 receiptIds 모두 포함합니다.

2. 게시자 드롭다운 자동 갱신

기존에는 useGetWorkspaceMembers의 staleTime이 5분이라 마이페이지에서 이름 변경 후 돌아와도 캐시된 멤버 목록이 그대로 노출되는 문제가 있었습니다.

• 마운트 시 강제 갱신: SPA 라우팅으로 페이지에 진입할 때마다 refetchMembers()를 호출합니다. refetch()는 staleTime을 무시하고 서버에 요청합니다.
• 탭 전환 시 갱신: visibilitychange 이벤트로 브라우저 탭이 포커스될 때도 갱신합니다.

// 마운트 시 (SPA 내비게이션 대응)
useEffect(() => {
  refetchMembers();
}, [workspaceId, refetchMembers]);

// 탭 전환 시
useEffect(() => {
  const handleVisibilityChange = () => {
    if (document.visibilityState === 'visible') refetchMembers();
  };
  document.addEventListener('visibilitychange', handleVisibilityChange);
  return () => document.removeEventListener('visibilitychange', handleVisibilityChange);
}, [refetchMembers]);

3. 페이지네이션 상태 복원

useSearchParams + router.replace 방식은 Next.js App Router 뒤로가기에서 안정적으로 동작하지 않아 sessionStorage로 교체했습니다.

• sessionStorage에 workspace_page_{workspaceId} 키로 현재 페이지를 저장합니다.
• useState의 lazy initializer에서 sessionStorage를 바로 읽어 초기 렌더부터 올바른 페이지를 표시합니다.
• 필터 변경 시 setPage(0)으로 리셋, sessionStorage도 함께 초기화됩니다.

const storageKey = `workspace_page_${workspaceId}`;

const [page, setPageState] = useState(() => {
  if (typeof window === 'undefined') return 0;
  const saved = sessionStorage.getItem(storageKey);
  return saved !== null ? Number(saved) : 0;
});

const setPage = useCallback((newPage: number) => {
  setPageState(newPage);
  sessionStorage.setItem(storageKey, String(newPage));
}, [storageKey]);

🌀 PR Type

어떤 변경 사항이 있나요?

• 새로운 기능 추가
• 버그 수정
• CSS 등 사용자 UI 디자인 변경
• 코드에 영향을 주지 않는 변경사항 (오타 수정, 탭 사이즈 변경, 변수명 변경)
• 코드 리팩토링
• 주석 추가 및 수정
• 문서 수정
• 테스트 추가, 테스트 리팩토링
• 빌드 부분 혹은 패키지 매니저 수정
• 파일 혹은 폴더명 수정
• 파일 혹은 폴더 삭제

✅ Checklist

PR Checklist

PR이 다음 요구 사항을 충족하는지 확인하세요.

• Branch Convention 확인

  feat/ 기능 구현, fix/ 버그 수정, refactor/ 개선

• Base Branch 확인
• 커밋 메시지 컨벤션 준수
• 적절한 Label 지정
• Assignee 및 Reviewer 지정

Test Checklist

• 로컬 작동 확인

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
remate	Ready	Preview, Comment	May 28, 2026 8:38am

[minzx23]

고생하셨습니다잉