[#44] Feat/44/워크스페이스관리페이지

[LMS10]

❓이슈

• close Feat: 워크스페이스 관리 페이지 작업 #44

📝 Description

/workspace/{workspaceId}/settings 페이지를 반응형으로 구현합니다.
워크스페이스 어드민이 이름·색상 변경, 멤버 강퇴, 초대 취소/추가, 워크스페이스 삭제를 한 페이지에서 수행할 수 있습니다.
추가로 프로필 이미지가 없는 유저에 대해 기존 아이콘 대신 이니셜 아바타를 표시하도록 Avatar, HeaderUserProfile 컴포넌트를 수정했습니다.

📝 구현 상세

API 레이어 (apis/workspace/)

기존 파일에 아래 엔드포인트들을 추가했습니다.

메서드	엔드포인트	설명
GET	/api/v1/workspaces/{workspaceId}/members?status={status}	멤버 및 초대 내역 조회
PATCH	/api/v1/workspaces/{workspaceId}/settings	워크스페이스 이름·색상 수정
DELETE	/api/v1/workspaces/{workspaceId}/members/{userId}	멤버 강퇴 및 초대 취소
DELETE	/api/v1/workspaces/{workspaceId}	워크스페이스 삭제

멤버 강퇴와 초대 취소는 동일한 DELETE /members/{userId} 엔드포인트를 공유하므로 useDeleteWorkspaceMember 훅 하나로 두 케이스를 처리합니다. status=ACCEPTED이면 강퇴, status=PENDING이면 초대 취소로 동작합니다.

에러 상태코드별로 403 / 404 / 기타 케이스를 분기해 의미 있는 에러 메시지를 throw합니다.

페이지 (settings/page.tsx)

페이지는 4개의 <section>으로 구성됩니다.

Section 1 — 워크스페이스 설정 수정

• useGetWorkspace로 현재 이름·색상을 가져와 초기값으로 사용합니다.
• name, color state가 원본과 달라졌을 때만 isSettingsChanged가 true가 되어 변경 버튼이 활성화됩니다.
• 변경 성공 시 invalidateQueries로 워크스페이스 상세 및 목록 캐시를 갱신해 화면에 즉시 반영됩니다.

Section 2 — 멤버 조회 및 강퇴

• useGetWorkspaceMembers(workspaceId, 'ACCEPTED')로 멤버 목록을 조회합니다.
• 강퇴 성공 시 kickedIds 배열에 추가하고 렌더 시 filter로 제거해 별도 refetch 없이 즉시 반영합니다.
• role === 'ADMIN'인 멤버는 삭제 버튼을 렌더링하지 않습니다.
• 프로필 이미지는 Avatar 컴포넌트를 사용합니다.

Section 3 — 초대 내역 및 초대

• useGetWorkspaceMembers(workspaceId, 'PENDING')으로 대기 초대 목록을 조회합니다.
• 취소 성공 시 Section 2와 동일하게 cancelledIds로 즉시 제거합니다.
• 초대하기 버튼 클릭 시 기존 InviteModal을 재사용합니다.

Section 4 — 워크스페이스 삭제

• ConfirmModal 확인 후 DELETE /workspaces/{workspaceId} 요청을 보냅니다.
• 성공 시 토스트 메시지를 표시하고 /workspace로 이동합니다.

이니셜 아바타 (Avatar.tsx, HeaderUserProfile.tsx)

프로필 이미지가 없을 때 기존 profile 아이콘 대신 bg-blue-100 배경에 text-blue-200 색상으로 유저 이름 첫 글자를 표시하는 원형 div로 변경했습니다.

토스트 & 에러 처리

모든 API 요청의 onSuccess / onError 콜백에서 toast.success / toast.error를 호출합니다. 에러 메시지는 서비스 레이어에서 throw한 메시지를 우선 사용하고, 없으면 기본 메시지로 폴백합니다.

🌀 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 14, 2026 11:58am

[minzx23]

굿굿 고생하셨습니당