클럽 설정 기능

frontend/src/views/club/MemberManagement.vue

@@ -22,6 +22,8 @@
     
     <DataTable :value="filteredMembers" :paginator="true" :rows="10" 
                :rowsPerPageOptions="[5, 10, 20]" 
+               sortField="name"
+               :sortOrder="1"
                stripedRows responsiveLayout="scroll">
       <Column field="name" header="이름" sortable style="width: 15%"></Column>
       <Column field="gender" header="성별" sortable style="width: 10%"></Column>
@@ -62,29 +64,35 @@
             :header="dialogMode === 'new' ? '새 회원 추가' : '회원 정보 수정'" 
             :modal="true" class="p-fluid">
       <!-- 회원 정보 다이얼로그 내부 폼 예시 -->
-      <div class="field mb-3">
-        <label for="gender" class="mb-1">성별</label>
-        <Select id="gender" v-model="member.gender" :options="genderOptions" optionLabel="name" placeholder="성별 선택" class="w-full" />
-      </div>
-      <div class="field mb-3">
-        <label for="memberType" class="mb-1">회원 유형</label>
-        <Select id="memberType" v-model="member.memberTypeObj" :options="memberTypes" optionLabel="name" placeholder="회원 유형 선택" class="w-full" />
-      </div>
-      <div class="field mb-3">
-        <label for="phone" class="mb-1">전화번호</label>
-        <InputText id="phone" v-model="member.phone" class="w-full" />
-      </div>
-      <div class="field mb-3">
-        <label for="email" class="mb-1">이메일</label>
-        <InputText id="email" v-model="member.email" class="w-full" />
-      </div>
-      <div class="field mb-3">
-        <label for="handicap" class="mb-1">핸디캡</label>
-        <InputText id="handicap" v-model="member.handicap" type="number" min="0" max="50" class="w-full" />
-      </div>
-      <div class="field mb-3">
-        <label for="status" class="mb-1">상태</label>
-        <Select id="status" v-model="member.status" :options="statusOptions" optionLabel="label" optionValue="value" placeholder="상태 선택" class="w-full" />
+      <div class="grid">
+        <div class="field col-12 mb-3">
+          <label for="name" class="mb-1">이름</label>
+          <InputText id="name" v-model="member.name" class="w-full" />
+        </div>
+        <div class="field col-6 mb-3">
+          <label for="gender" class="mb-1">성별</label>
+          <Select id="gender" v-model="member.gender" :options="genderOptions" optionLabel="name" optionValue="code" placeholder="성별 선택" class="w-full" />
+        </div>
+        <div class="field col-6 mb-3">
+          <label for="memberType" class="mb-1">회원 유형</label>
+          <Select id="memberType" v-model="member.memberType" :options="memberTypes" optionLabel="name" optionValue="code" placeholder="회원 유형 선택" class="w-full" />
+        </div>
+        <div class="field col-6 mb-3">
+          <label for="phone" class="mb-1">전화번호</label>
+          <InputText id="phone" v-model="member.phone" class="w-full" />
+        </div>
+        <div class="field col-6 mb-3">
+          <label for="email" class="mb-1">이메일</label>
+          <InputText id="email" v-model="member.email" class="w-full" />
+        </div>
+        <div class="field col-6 mb-3">
+          <label for="handicap" class="mb-1">핸디캡</label>
+          <InputText id="handicap" v-model="member.handicap" type="number" min="0" max="50" class="w-full" />
+        </div>
+        <div class="field col-6 mb-3">
+          <label for="status" class="mb-1">상태</label>
+          <Select id="status" v-model="member.status" :options="statusOptions" optionLabel="label" optionValue="value" placeholder="상태 선택" class="w-full" />
+        </div>
       </div>
       <div class="flex justify-content-end gap-2 mt-4">
         <Button label="취소" icon="pi pi-times" class="p-button-text" @click="hideDialog" />
@@ -168,25 +176,27 @@
 </template>
 
 <script setup>
-import { ref, reactive, computed, onMounted } from 'vue';
+import { ref, reactive, computed, onMounted, watch } from 'vue';
 import { useToast } from 'primevue/usetoast';
 import apiClient from '@/services/api';
 import clubService from '@/services/clubService';
+import { useClubStore } from '@/stores/clubStore';
 
 const toast = useToast();
+const clubStore = useClubStore();
 
 // 회원 유형 목록
 const memberTypes = ref([
-  { name: '정회원', code: 'regular' },
-  { name: '준회원', code: 'associate' },
-  { name: '운영진', code: 'admin' },
-  { name: '모임장', code: 'owner' }
+  { name: '정회원', code: '정회원' },
+  { name: '준회원', code: '준회원' },
+  { name: '운영진', code: '운영진' },
+  { name: '모임장', code: '모임장' }
 ]);
 
 // 성별 옵션
 const genderOptions = ref([
-  { name: '남성', code: 'male' },
-  { name: '여성', code: 'female' }
+  { name: '남성', code: '남성' },
+  { name: '여성', code: '여성' }
 ]);
 
 // 회원 목록
@@ -373,9 +383,23 @@ const openNewMemberDialog = () => {
   memberDialog.value = true;
 };
 
+// 성별 선택 시 핸디캡 자동 설정
+watch(() => member.value.gender, (newGender) => {
+  if (dialogMode.value === 'new' && newGender && clubStore.selectedClub) {
+    if (newGender.name === '여성' && clubStore.selectedClub.femaleHandicap) {
+      member.value.handicap = clubStore.selectedClub.femaleHandicap;
+    } else if (newGender.name === '남성') {
+      member.value.handicap = 0;
+    }
+  }
+});
+
 // 회원 수정 다이얼로그 열기
 const editMember = (data) => {
-  member.value = { ...data };
+  member.value = { 
+    ...data
+  };
+  
   dialogMode.value = 'edit';
   memberDialog.value = true;
 };
@@ -388,11 +412,15 @@ const hideDialog = () => {
 // 회원 저장
 const saveMember = async () => {
   try {
+    const memberData = {
+      ...member.value
+    };
+    
     if (dialogMode.value === 'new') {
-      await clubService.addClubMember(clubId.value, member.value);
+      await clubService.addClubMember(clubId.value, memberData);
       toast.add({ severity: 'success', summary: '성공', detail: '새 회원이 추가되었습니다.', life: 3000 });
     } else {
-      await clubService.updateClubMember(clubId.value, member.value.id, member.value);
+      await clubService.updateClubMember(clubId.value, memberData.id, memberData);
       toast.add({ severity: 'success', summary: '성공', detail: '회원 정보가 수정되었습니다.', life: 3000 });
     }