feat: 설정 페이지 구현

[Kwon812]

Issue

작업 유형

• Feat: 새로운 기능 추가
• Fix: 버그 수정
• Docs: 문서 수정
• Refactor: 리팩토링
• Design: UI/CSS 수정
• Chore: 설정, 패키지, 기타 작업
• Hotfix: 긴급 수정

작업 내용

워크스페이스 설정 페이지를 구현합니다. 사이드바의 설정 메뉴(href: 'settings')로 진입하며, 세 개의 탭으로 구성됩니다.

• 워크스페이스 정보 탭: 워크스페이스 이름·설명 조회 및 수정
• 팀원 관리 탭: 이메일/초대 링크로 팀원 초대 + 멤버 목록 조회
• 프로필 탭: 현재 사용자의 워크스페이스 닉네임 수정

작업 배경

To Do

라우팅 / 뷰

• src/app/workspaces/[workspaceId]/settings/page.tsx 라우트 추가 (workspaceId 전달)
• src/views/settings 뷰 생성 (탭 전환 컨테이너, public 배럴 index.ts)

탭 1 — 워크스페이스 정보

• 이름 입력 필드 (기존 값 프리필)
• 설명 텍스트영역 (placeholder: 워크스페이스를 소개하는 문구를 입력하세요.)
• 저장 버튼 및 저장 동작(우선 목업/로컬 상태)
• 섹션 헤더/설명 문구 (워크스페이스 이름과 설명을 수정할 수 있어요.)

탭 2 — 팀원 관리

• 팀원 초대 섹션: 이메일 / 초대 링크 세그먼트 토글
• 이메일 모드: 이메일 입력 + 초대 버튼, 안내 문구(아직 가입하지 않은 사용자는 가입 시 자동으로 연결됩니다.)
• 초대 링크 모드: 링크 표시 + 복사 버튼(클립보드 복사), 안내 문구(링크를 아는 사람은 누구나 이 워크스페이스에 참여할 수 있어요.)
• 멤버 (n) 목록: 아바타 · 이름 · 이메일 · 역할 뱃지(팀장/팀원) · 상태 뱃지(참여 중/초대됨)

탭 3 — 프로필

• 닉네임 입력 필드 (현재 사용자의 워크스페이스 닉네임 프리필)
• 저장 버튼 및 저장 동작(우선 목업/로컬 상태)
• 섹션 헤더/설명 문구 (해당 워크스페이스에서 표시되는 닉네임임을 안내)

엔티티 / 데이터

• WorkspaceMember 타입 확장 검토: email, 초대 상태(joined | invited) 필드 추가 (디자인에 존재하나 현재 타입에 없음)
• 목업 멤버 데이터 임시로 하나 만들고 Email, 초대상태 필드 추가
• 워크스페이스 이름/설명 편집을 위한 목업 API/모델 정리
• 현재 사용자 닉네임 수정을 위한 mockCurrentWorkspaceMember 기반 모델/업데이트 정리

완료 기준

• 사이드바 설정 클릭 시 /workspaces/{workspaceId}/settings 로 이동한다.
• 세 탭(워크스페이스 정보, 팀원 관리, 프로필)이 전환되며 Figma 디자인과 시각적으로 일치한다.
• 워크스페이스 정보 탭에서 이름/설명을 입력·저장할 수 있다(목업 기준).
• 팀원 관리 탭에서 이메일/초대 링크 모드를 전환하고, 초대 링크를 복사할 수 있다.
• 멤버 목록이 역할·상태 뱃지와 함께 렌더링된다.
• 프로필 탭에서 닉네임을 입력·저장할 수 있다(목업 기준).
• 타입 에러 / 린트 에러가 없다.
• FSD 레이어 규칙과 기존 코드 컨벤션(배럴 export, 목업 분리 등)을 준수한다.

참고 자료

• Figma: https://www.figma.com/design/MGUbA8bYzUb4WdjSm5KKkq/Syncly?node-id=579-5

예상 브랜치명

feat/#31/workspace-settings-page