팀 생성 임시 완료

frontend/src/components/event/EventDetailsDialog.vue

@@ -45,7 +45,7 @@
         <ParticipantManagement
           :eventId="eventModel.id"
           :availableMembers="availableMembers"
-          @participant-updated="$emit('participant-updated')"
+          @participant-updated="handleParticipantUpdated"
         />
       </TabPanel>
 
@@ -60,49 +60,7 @@
       </TabPanel>
       <!-- 팀 편성 탭 -->
       <TabPanel header="팀 편성">
-        <div class="team-generation-section">
-          <div class="flex align-items-center gap-2 mb-3">
-            <label>
-              <input type="radio" value="byMemberCount" v-model="teamOption" /> 팀 인원수로 나누기
-            </label>
-            <InputNumber v-if="teamOption==='byMemberCount'" v-model="teamOptionValue" :min="2" :max="eventModel.participants?.length || 2" placeholder="팀 인원수" style="width:120px;" />
-            <label class="ml-4">
-              <input type="radio" value="byTeamCount" v-model="teamOption" /> 팀 개수로 나누기
-            </label>
-            <InputNumber v-if="teamOption==='byTeamCount'" v-model="teamOptionValue" :min="2" :max="eventModel.participants?.length || 2" placeholder="팀 개수" style="width:120px;" />
-            <Button label="팀 생성" icon="pi pi-users" class="ml-3" :disabled="!canGenerateTeams" @click="generateTeams" />
-          </div>
-          <div v-if="teams.length > 0">
-            <div v-for="(team, idx) in teams" :key="idx" class="team-box mb-3 p-3">
-              <div class="flex align-items-center gap-2 mb-2">
-                <strong>팀 {{ idx + 1 }}</strong>
-                <span class="ml-2">(인원: {{ team.members.length }}명)</span>
-                <span class="ml-3">팀 에버리지: <span class="text-primary">{{ getTeamAverage(team).toFixed(1) }}</span></span>
-                <span class="ml-3">핸디캡:</span>
-                <InputNumber v-model="team.handicap" :min="-100" :max="100" style="width:80px;" />
-              </div>
-              <ul class="pl-3">
-                <li v-for="(member, mIdx) in team.members" :key="member.id || mIdx" class="flex align-items-center gap-2 mb-1">
-                  <InputText v-model="member.name" style="width: 140px;" placeholder="이름 입력" />
-                  <span v-if="getMemberAverage(member) !== null" class="text-xs text-gray-700 ml-1">({{ getMemberAverage(member) }})</span>
-                  <Button icon="pi pi-times" class="p-button-text p-button-danger p-0" @click="team.members.splice(mIdx,1)" v-if="team.members.length > 1" />
-                </li>
-              </ul>
-              <div class="flex align-items-center gap-2 mt-2">
-                <Dropdown
-                  v-model="team._selectedMemberId"
-                  :options="availableMembersForTeam(idx)"
-                  optionLabel="name"
-                  optionValue="id"
-                  placeholder="팀원 선택"
-                  style="width: 140px;"
-                />
-                <Button icon="pi pi-plus" class="p-button-text p-0" :disabled="!team._selectedMemberId" @click="addMemberToTeam(idx)" />
-              </div>
-            </div>
-          </div>
-          <div v-else class="text-gray-500 mt-3">팀을 생성하려면 옵션을 선택 후 '팀 생성'을 눌러주세요.</div>
-        </div>
+        <TeamGeneration :participants="confirmedParticipants" :teams="teams" @update:teams="teams = $event" @teams-generated="teams = $event" @save-teams="handleSaveTeams" />
       </TabPanel>
     </TabView>
 
@@ -115,7 +73,8 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
+import TeamGeneration from './TeamGeneration.vue';
 import Dialog from 'primevue/dialog';
 import TabView from 'primevue/tabview';
 import TabPanel from 'primevue/tabpanel';
@@ -147,107 +106,68 @@ const formattedEndDate = computed(() => props.formatDate(eventModel.value.endDat
 const hideDialog = () => {
   emit('hide');
 };
-console.log("props", props);
-console.log("eventModel", eventModel.value);
-console.log("참가자", JSON.stringify(eventModel.value.participants, null, 2));
-// 팀 생성 관련 상태
-const teamOption = ref('byMemberCount');
-const teamOptionValue = ref(2);
+// 팀 생성 결과 저장
 const teams = ref([]);
 
-const canGenerateTeams = computed(() => {
-  const n = eventModel.value.participants?.length || 0;
-  if (n < 2) return false;
-  if (teamOption.value === 'byMemberCount') {
-    return teamOptionValue.value >= 2 && teamOptionValue.value <= n;
-  } else {
-    return teamOptionValue.value >= 2 && teamOptionValue.value <= n;
+// 이벤트 상세 다이얼로그가 열릴 때마다 팀 목록 불러오기
+watch(() => eventModel.value.id, async (eventId) => {
+  if (eventId) {
+    const latestTeams = await teamService.getTeams(eventId);
+    teams.value = latestTeams;
   }
+}, { immediate: true });
+
+// 참가확정 참가자 목록을 계산하는 computed 속성
+const confirmedParticipants = computed(() => {
+  const arr = eventModel.value.EventParticipants?.filter(p => p.status === '참가확정') || [];
+  console.log('[상위] 참가확정:', arr);
+  return arr;
 });
 
-function shuffle(array) {
-  // Fisher-Yates shuffle
-  let arr = array.slice();
-  for (let i = arr.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [arr[i], arr[j]] = [arr[j], arr[i]];
+// 참가확정 인원 수
+const confirmedCount = computed(() => confirmedParticipants.value.length);
+
+
+// 팀 배정 저장 핸들러
+import teamService from '@/services/teamService';
+import { useToast } from 'primevue/usetoast';
+const toast = useToast();
+
+async function handleSaveTeams(savedTeams) {
+  const eventId = eventModel.value.id;
+  try {
+    await teamService.saveTeams(eventId, savedTeams);
+    toast.add({ severity: 'success', summary: '저장 완료', detail: '팀 배정이 저장되었습니다.', life: 2000 });
+    // 저장 후 최신 팀 목록 불러오기
+    const latestTeams = await teamService.getTeams(eventId);
+    teams.value = latestTeams;
+  } catch (e) {
+    toast.add({ severity: 'error', summary: '저장 실패', detail: '팀 저장 중 오류가 발생했습니다.', life: 3000 });
   }
-  return arr;
 }
 
-function generateTeams() {
-  const participants = (eventModel.value.participants || []).map(p => ({ id: p.id, name: p.name }));
-  const shuffled = shuffle(participants);
-  let result = [];
-  if (teamOption.value === 'byMemberCount') {
-    const size = teamOptionValue.value;
-    const teamCount = Math.ceil(shuffled.length / size);
-    for (let i = 0; i < teamCount; i++) {
-      result.push({ members: [], handicap: 0, _selectedMemberId: null });
-    }
-    shuffled.forEach((member, idx) => {
-      result[Math.floor(idx / size)].members.push(member);
-    });
-  } else {
-    const teamCount = teamOptionValue.value;
-    for (let i = 0; i < teamCount; i++) {
-      result.push({ members: [], handicap: 0, _selectedMemberId: null });
-    }
-    shuffled.forEach((member, idx) => {
-      result[idx % teamCount].members.push(member);
-    });
+// 참가자 상태 변경 처리 함수
+function handleParticipantUpdated(data) {
+  // 부모 컴포넌트에 이벤트 전달
+  emit('participant-updated', data);
+  
+  // 전체 참가자 목록이 있는 경우 직접 업데이트
+  if (data.allParticipants) {
+    // EventParticipants 속성을 완전히 대체
+    eventModel.value.EventParticipants = [...data.allParticipants];
   }
-  teams.value = result;
-}
+};
 
-// 팀별로 아직 배정되지 않은 참가자만 선택지로 제공
-function availableMembersForTeam(teamIdx) {
-  const usedIds = new Set();
-  teams.value.forEach((team, idx) => {
-    if (idx === teamIdx) return;
-    team.members.forEach(m => usedIds.add(m.id));
-  });
-  // 팀 내 중복도 막기 위해 현재 팀 내 id도 추가
-  teams.value[teamIdx]?.members.forEach((m, i, arr) => {
-    if (arr.findIndex(x => x.id === m.id) !== i) usedIds.add(m.id);
-  });
-  return (eventModel.value.participants || [])
-    .filter(p => p.id && p.Member && p.Member.name &&
-      !usedIds.has(p.id) &&
-      !teams.value[teamIdx].members.some(m => m.id === p.id)
-    )
-    .map(p => ({ id: p.id, name: p.Member.name }));
-}
-
-function addMemberToTeam(teamIdx) {
-  const team = teams.value[teamIdx];
-  const memberId = team._selectedMemberId;
-  if (!memberId) return;
-  const participant = (eventModel.value.participants || []).find(p => p.id === memberId);
-  if (participant && !team.members.some(m => m.id === participant.id)) {
-    team.members.push({ id: participant.id, name: participant.Member?.name });
-  }
-  team._selectedMemberId = null;
-}
-
-function getMemberAverage(member) {
-  // 참가자 정보에서 Member.average 필드 사용
-  if (!member.id) return null;
-  const p = (eventModel.value.participants || []).find(x => x.id === member.id);
-  if (!p) return null;
-  if (p.Member && typeof p.Member.average === 'number') return p.Member.average;
-  if (typeof p.average === 'number') return p.average; // 혹시 백엔드에서 이미 넣어주는 경우도 대비
-  if (typeof p.averageScore === 'number') return p.averageScore;
-  return null;
-}
-
-function getTeamAverage(team) {
-  const avgs = team.members.map(getMemberAverage).filter(v => typeof v === 'number');
-  if (!avgs.length) return 0;
-  return avgs.reduce((a, b) => a + b, 0) / avgs.length;
-}
 </script>
 
+<style scoped>
+:deep(.mini-inputnumber .p-inputnumber-input) {
+  width: 60px !important;
+  min-width: 0 !important;
+  max-width: 100% !important;
+}
+</style>
+
 <style scoped>
 .team-generation-section {
   margin-top: 1rem;