랭킹표시 수정

frontend/src/views/club/MemberManagement.vue

@@ -25,7 +25,17 @@
                sortField="name"
                :sortOrder="1"
                stripedRows responsiveLayout="scroll">
-      <Column field="name" header="이름" sortable style="width: 15%"></Column>
+      <Column field="name" header="이름" sortable style="width: 15%">
+        <template #body="slotProps">
+          <div class="member-name">
+            <div class="name">{{ slotProps.data.name }}</div>
+            <div class="contact-info">
+              <div v-if="slotProps.data.phone" class="phone">{{ slotProps.data.phone }}</div>
+              <div v-if="slotProps.data.email" class="email">{{ slotProps.data.email }}</div>
+            </div>
+          </div>
+        </template>
+      </Column>
       <Column field="gender" header="성별" sortable style="width: 10%"></Column>
       <Column field="memberType" header="회원 유형" sortable style="width: 15%">
         <template #body="slotProps">
@@ -177,13 +187,12 @@
 
 <script setup>
 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';
+import { useToast } from 'primevue/usetoast';
 
-const toast = useToast();
 const clubStore = useClubStore();
+const toast = useToast();
 
 // 회원 유형 목록
 const memberTypes = ref([
@@ -412,23 +421,27 @@ const hideDialog = () => {
 // 회원 저장
 const saveMember = async () => {
   try {
-    const memberData = {
-      ...member.value
-    };
+    const memberData = { ...member.value };
     
-    if (dialogMode.value === 'new') {
-      await clubService.addClubMember(clubId.value, memberData);
-      toast.add({ severity: 'success', summary: '성공', detail: '새 회원이 추가되었습니다.', life: 3000 });
-    } else {
-      await clubService.updateClubMember(clubId.value, memberData.id, memberData);
-      toast.add({ severity: 'success', summary: '성공', detail: '회원 정보가 수정되었습니다.', life: 3000 });
-    }
+    const isNew = dialogMode.value === 'new';
+    const response = isNew 
+      ? await clubService.addClubMember(clubId.value, memberData)
+      : await clubService.updateClubMember(clubId.value, memberData.id, memberData);
+    
+    toast.add({ 
+      severity: 'success', 
+      summary: '성공', 
+      detail: isNew ? '새 회원이 추가되었습니다.' : '회원 정보가 수정되었습니다.', 
+      life: 3000 
+    });
     
     hideDialog();
     await loadMembers();
   } catch (error) {
     console.error('회원 저장 중 오류:', error);
-    toast.add({ severity: 'error', summary: '오류', detail: '회원 정보 저장 중 오류가 발생했습니다.', life: 3000 });
+    // 서버에서 오류 메시지가 있는 경우 해당 메시지 표시
+    const errorMessage = error.response?.data?.message || '회원 정보 저장 중 오류가 발생했습니다.';
+    toast.add({ severity: 'error', summary: '오류', detail: errorMessage, life: 3000 });
   }
 };
 
@@ -498,6 +511,31 @@ const statusOptions = ref([
   font-weight: bold;
 }
 
+/* 회원 이름, 연락처 스타일 */
+.member-name {
+  display: flex;
+  flex-direction: column;
+}
+
+.member-name .name {
+  font-weight: bold;
+  margin-bottom: 2px;
+}
+
+.member-name .contact-info {
+  display: flex;
+  flex-direction: column;
+  font-size: 0.75rem;
+  color: var(--text-color-secondary);
+}
+
+.member-name .phone,
+.member-name .email {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 /* 필터 다이얼로그 스타일 */
 :deep(.p-dialog-content) {
   padding: 1rem;