feat: 스쿼드 기능 구현 트래킹

[ryuwldnjs]

개요

팀 내 소그룹(스쿼드)으로 난이도별 분반을 지원합니다.
스쿼드별로 완전히 독립적인 문제 추천을 받으며, 팀원 실력 차이에 따라 유연하게 구성할 수 있습니다.

---

UX 설계

스쿼드 탭 바

[⚙ 스쿼드관리]  [스쿼드A]  [스쿼드B ⚙]  [스쿼드C]
  rect 버튼       pill 탭     선택됨 + 추천설정 기어 (팀장만)

• 좌측 ⚙ 스쿼드관리: 스쿼드 CRUD + 멤버 배정 모달 — 팀장 전용, rounded-lg로 탭과 시각 구분
• 탭 클릭: 해당 스쿼드 선택, 진한 배경 하이라이트
• 선택된 탭 우측 ⚙: 문제추천설정 모달 — 팀장 전용, 호버 시 즉시 툴팁 "문제추천설정" 표시
• 기본 선택: 내 스쿼드 자동 선택 (없으면 첫 번째 스쿼드)

스쿼드 선택 시 동작

섹션	동작
오늘의 문제	해당 스쿼드 문제 (완전 독립)
새로고침 버튼	스쿼드 전용 API 호출
팀 활동/리더보드	팀 전체 유지 (스쿼드 영향 없음)
멤버 목록	전체 표시 + 각 멤버 옆 스쿼드 뱃지

Default 스쿼드 정책

• isDefault: true 스쿼드는 항상 존재, 삭제 불가 (수정은 가능)
• 새 팀원 / 스쿼드 삭제 시 → default 스쿼드로 자동 이동
• 스쿼드 헤더에 "default" 뱃지 표시

---

✅ 완료된 작업

UI 컴포넌트

• SquadsList — 관리 버튼 좌측 배치, pill 탭과 rect 버튼 시각 구분, 추천설정 기어 툴팁
• SquadManagementPage — 전체화면 스쿼드 관리 모달 (max-h-[85vh] 컨텐츠 적응형)
• SquadMemberTab — 스쿼드 CRUD + 멤버 드래그&드롭 배정
  • default 스쿼드 삭제 불가 / 수정 가능
  • 수정·삭제 버튼 시인성 개선
  • 새 스쿼드 버튼 고정 높이 (h-32) 로 기존 스쿼드 카드와 동일
  • 데모 모드 멤버 배정 저장 동작
  • 스쿼드 CRUD 시 onSquadsChange 콜백으로 TeamDetailPage 실시간 반영
  • 버그 수정: localIdCounter 초기값(-1) ↔ UNASSIGNED_DROP_ID(-1) 충돌 → 1000으로 변경
• CreateSquadModal — isEdit prop 분리, 생성 시 자동 이름 채우기 (스쿼드A→B→C 순)
• AssignMembersModal — 팀원별 스쿼드 일괄 배정
• SquadSettingsModal — 스쿼드별 추천 설정 (요일/난이도/태그)

상태 관리 & 데이터

• teamStore 스쿼드 액션: createSquad, updateSquad, deleteSquad, assignMember
• TeamDetailPage — squads를 useState로 변환, onSquadsChange 연결
• src/api/squads.ts — 11개 엔드포인트 선언 완료
• 데모 데이터 — 스쿼드A (isDefault: true, HARD, 월/수/금) / 스쿼드B (EASY, 화/목)

팀 활동 UI

• TeamActivityBoard — 스쿼드별 구분선(divider) 추가로 참여현황에서 스쿼드 그루핑 시각화

---

🔲 남은 작업

[UI] 멤버 목록 스쿼드 뱃지 (TeamMembersList.tsx)

• 각 멤버 행에 소속 스쿼드 이름 뱃지 표시

[API] 프로덕션 데이터 연동

• teamStore에 squads: SquadResponse[] 상태 + fetchSquads(teamId) 액션 추가
  • TeamDetailResponse에 squads 미포함 → squadsApi.getTeamSquads() 별도 호출
• TeamDetailPage 수정: isDemo ? demoSquads : squads (store 연동)

[API] TodayProblems 스쿼드 대응 (TodayProblems.tsx)

• props에 squadId?: number 추가
• 새로고침: squadId 있으면 squadsApi.refreshProblems(), 없으면 기존 팀 API
• 스쿼드 전환 시 squadsApi.getTodayProblems()로 해당 스쿼드 문제 로드

---

관련 파일

파일	상태
src/pages/teams/teamDetail/TeamDetailPage.tsx	🟡 squads 상태 관리 중 (프로덕션 연동 필요)
src/pages/teams/components/TodayProblems.tsx	🔴 squadId prop 미선언
src/pages/teams/teamDetail/components/SquadsList.tsx	✅ UX 완료
src/pages/teams/teamDetail/components/SquadMemberTab.tsx	✅ 완료
src/pages/teams/teamDetail/components/TeamMembersList.tsx	🟡 뱃지 추가 필요
src/pages/teams/teamDetail/components/TeamActivityBoard.tsx	✅ 스쿼드 구분선 완료
src/store/teamStore.ts	🟡 squads 상태 없음 (프로덕션 연동 필요)
src/api/squads.ts	✅ 전체 선언 완료

관련 브랜치

feat/squad-ui