[#42] Feat/42/워크스페이스상세페이지

[LMS10]

❓이슈

• close Feat: 워크스페이스 상세 페이지 작업 #42

📝 Description

/workspace/[workspaceId] 워크스페이스 상세 페이지를 구현한 PR입니다.

변경된 파일

파일	변경 내용
receipt.type.ts	통계·목록·내보내기 관련 타입 추가
receipt.service.ts	getReceiptStats, getReceiptList, exportReceipts 추가
receipt.queries.ts	useGetReceiptStats, useGetReceiptList, useExportReceipts 추가
workspace.type.ts	WorkspaceMemberStatus, WorkspaceMember, WorkspaceMembersResponse 타입 추가
workspace.service.ts	getWorkspaceMembers 추가
workspace.queries.ts	workspaceKeys.members, useGetWorkspaceMembers 추가
Dropdown.tsx	placeholder 로직, 스타일 수정
workspace/[workspaceId]/page.tsx	페이지 전체 신규 구현

---

1. 통계 섹션

useGetReceiptStats(workspaceId)로 데이터를 가져와 StatCard 4개를 그리드로 배치합니다.

---

2. 영수증 목록 섹션

역할 분기

useGetWorkspace로 가져온 워크스페이스 정보의 role 필드로 isAdmin을 도출합니다. 관리자일 때만 다운로드 버튼을 렌더링합니다.

필터

필터	구현 방식
가맹점 검색	Input (search variant), onChange로 실시간 반영
게시자	useGetWorkspaceMembers(workspaceId, 'ACCEPTED')로 멤버 목록 조회 후 Dropdown에 주입
상태	전체 / 대기 / 승인 / 반려 → WAITING / APPROVED / REJECTED 매핑
정렬	최신순 / 오래된순 → LATEST / OLDEST 매핑

필터 초기값은 null로 관리하여 미선택 시 placeholder가 표시되고, '전체' 선택 시 다시 null로 리셋됩니다. 필터 변경 시 page를 0으로 초기화합니다.

레이아웃

• PC·태블릿: 검색창 + 드롭다운 3개 한 줄, 영수증 테이블
• 모바일: 검색창 한 줄 → 드롭다운 3개 균등 분배 한 줄, 리스트 형태 (가맹점명 + StatusChip / 게시자 | 금액 | 날짜)

다운로드

exportReceipts(workspaceId) mutate 직접 호출 → 응답 Blob을 <a download> 트리거로 브라우저 다운로드. isPending 상태를 버튼 loading prop에 연결합니다.

페이지네이션

useMediaQuery('(max-width: 767px)') 결과로 size를 모바일 5 / PC·태블릿 6으로 분기합니다.

---

3. Dropdown.tsx 수정

문제	원인	해결
placeholder가 보이지 않음	value || placeholder에서 '전체' 같은 빈 문자열이 아닌 값이 있으면 placeholder 무시	value를 null로 관리, value == null일 때 placeholder 표시
드롭다운 하단 잘림	overflow: hidden이 ul의 padding을 clip	래퍼 div에 overflow: clip 적용
스크롤바가 border-radius 밖으로 노출	overflow: auto와 border-radius가 같은 요소에 있으면 WebKit에서 스크롤바가 radius 무시	border + radius는 래퍼 div, 스크롤은 내부 ul로 분리
모바일에서 드롭다운 3개가 고정 너비	w- 고정값	default/status variant에 flex-1 md:flex-none 적용, profile variant는 그대로 유지

---

🌀 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 13, 2026 11:42am

[minzx23]

좋네요 ㅜ.,ㅜ