오류 수정, 통계 보강

frontend/src/views/club/MemberManagement.vue

@@ -36,11 +36,15 @@
           </div>
         </template>
       </Column>
-      <Column field="gender" header="성별" sortable style="width: 10%"></Column>
+      <Column field="gender" header="성별" sortable style="width: 10%">
+        <template #body="slotProps">
+          {{ getGenderLabel(slotProps.data.gender) }}
+        </template>
+      </Column>
       <Column field="memberType" header="회원 유형" sortable style="width: 15%">
         <template #body="slotProps">
-          <span :class="getMemberTypeClass(slotProps.data.memberType)">
-            {{ slotProps.data.memberType }}
+          <span>
+            {{ getMemberTypeLabel(slotProps.data.memberType) }}
           </span>
         </template>
       </Column>
@@ -54,7 +58,7 @@
       </Column>
       <Column field="status" header="상태" sortable style="width: 10%">
         <template #body="slotProps">
-          <span :class="`status-${slotProps.data.status}`">
+          <span>
             {{ getStatusLabel(slotProps.data.status) }}
           </span>
         </template>
@@ -81,11 +85,11 @@
         </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" />
+          <Select id="gender" v-model="member.gender" :options="GENDER_OPTIONS" optionLabel="name" optionValue="value" 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="memberTypeOptions" optionLabel="name" optionValue="code" placeholder="회원 유형 선택" class="w-full" />
+          <Select id="memberType" v-model="member.memberType" :options="filteredMemberTypeOptions" optionLabel="name" optionValue="code" placeholder="회원 유형 선택" class="w-full" />
         </div>
         <div class="field col-6 mb-3">
           <label for="phone" class="mb-1">전화번호</label>
@@ -101,7 +105,7 @@
         </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" />
+          <Select id="status" v-model="member.status" :options="STATUS_OPTIONS" optionLabel="name" optionValue="value" placeholder="상태 선택" class="w-full" />
         </div>
       </div>
       <div class="flex justify-content-end gap-2 mt-4">
@@ -129,7 +133,7 @@
         <div class="col-12 md:col-4">
           <div class="field">
             <label>회원 유형</label>
-            <MultiSelect v-model="filters.memberTypes" :options="memberTypes" optionLabel="name" 
+            <MultiSelect v-model="filters.memberTypes" :options="filteredMemberTypeOptions" optionLabel="name" 
                         placeholder="선택" class="w-full" />
           </div>
         </div>
@@ -190,23 +194,21 @@ import { ref, reactive, computed, onMounted, watch } from 'vue';
 import clubService from '@/services/clubService';
 import { useClubStore } from '@/stores/clubStore';
 import { useToast } from 'primevue/usetoast';
+import {
+  MEMBER_TYPE_OPTIONS,
+  GENDER_OPTIONS,
+  STATUS_OPTIONS,
+  getGenderLabel,
+  getMemberTypeLabel,
+  getStatusLabel
+} from '@/utils/enumMappings';
+// 모임장(owner) 옵션을 제외한 회원 유형 옵션만 노출
+const filteredMemberTypeOptions = computed(() => MEMBER_TYPE_OPTIONS.filter(opt => opt.value !== 'owner' && opt.code !== 'owner'));
 
 const clubStore = useClubStore();
 const toast = useToast();
 
-// 회원 유형 옵션
-const memberTypeOptions = ref([
-  { name: '정회원', code: '정회원' },
-  { name: '준회원', code: '준회원' },
-  { name: '운영진', code: '운영진' }
-  // 모임장 옵션은 제거 - 클럽 설정에서만 변경 가능하도록 제한
-]);
 
-// 성별 옵션
-const genderOptions = ref([
-  { name: '남성', code: '남성' },
-  { name: '여성', code: '여성' }
-]);
 
 // 회원 목록
 const members = ref([]);
@@ -327,16 +329,7 @@ const formatDate = (dateStr) => {
   return `${date.getFullYear()}.${String(date.getMonth() + 1).padStart(2, '0')}.${String(date.getDate()).padStart(2, '0')}`;
 };
 
-// 회원 상태 표시 함수
-const getStatusLabel = (status) => {
-  switch (status) {
-    case 'active': return '활성';
-    case 'inactive': return '비활성';
-    case 'suspended': return '정지';
-    case 'deleted': return '삭제됨';
-    default: return status;
-  }
-};
+
 
 // 컴포넌트 마운트 시 데이터 로드
 onMounted(async () => {
@@ -367,16 +360,7 @@ const loadMembers = async () => {
   }
 };
 
-// 회원 유형에 따른 클래스 반환
-const getMemberTypeClass = (type) => {
-  switch (type) {
-    case '모임장': return 'member-type-owner';
-    case '운영진': return 'member-type-admin';
-    case '정회원': return 'member-type-regular';
-    case '준회원': return 'member-type-associate';
-    default: return '';
-  }
-};
+
 
 // 새 회원 추가 다이얼로그 열기
 const openNewMemberDialog = () => {
@@ -464,11 +448,7 @@ const deleteMember = async () => {
   }
 };
 
-const statusOptions = ref([
-  { label: '활성', value: 'active' },
-  { label: '비활성', value: 'inactive' },
-  { label: '정지', value: 'suspended' }
-]);
+
 </script>
 
 <style scoped>