public 기능 완료

frontend/src/views/club/EventManagement.vue

@@ -23,31 +23,26 @@
       v-model:filters="filters"
       class="mt-4"
     >
-      <Column field="id" header="ID" sortable style="width: 5%"></Column>
-      <Column field="title" header="제목" sortable style="width: 20%">
-        <template #filter="{ filterModel, filterCallback }">
-          <InputText v-model="filterModel.value" @input="filterCallback()" class="p-column-filter" placeholder="제목으로 검색" />
-        </template>
-      </Column>
       <Column field="eventType" header="유형" sortable style="width: 10%">
         <template #body="slotProps">
           <Badge :value="getEventTypeName(slotProps.data.eventType)" :severity="getEventTypeSeverity(slotProps.data.eventType)" />
         </template>
         <template #filter="{ filterModel, filterCallback }">
-          <Dropdown v-model="filterModel.value" @change="filterCallback()" :options="eventTypeOptions" optionLabel="name" optionValue="value" placeholder="유형 선택" class="p-column-filter" />
+          <Select v-model="filterModel.value" @change="filterCallback()" :options="eventTypeOptions" optionLabel="name" optionValue="value" placeholder="유형 선택" class="p-column-filter" />
         </template>
       </Column>
+      <Column field="title" header="제목" sortable>
+        <template #filter="{ filterModel, filterCallback }">
+          <InputText v-model="filterModel.value" @input="filterCallback()" class="p-column-filter" placeholder="제목으로 검색" />
+        </template>
+      </Column>
+      
       <Column field="startDate" header="시작일" sortable style="width: 12%">
         <template #body="slotProps">
           {{ formatDate(slotProps.data.startDate) }}
         </template>
         <template #filter="{ filterModel, filterCallback }">
-          <Calendar v-model="filterModel.value" @date-select="filterCallback()" dateFormat="yy-mm-dd" placeholder="날짜 선택" />
-        </template>
-      </Column>
-      <Column field="endDate" header="종료일" sortable style="width: 12%">
-        <template #body="slotProps">
-          {{ formatDate(slotProps.data.endDate) }}
+          <Datepicker v-model="filterModel.value" @date-select="filterCallback()" dateFormat="yy-mm-dd" placeholder="날짜 선택" />
         </template>
       </Column>
       <Column field="location" header="장소" sortable style="width: 15%"></Column>
@@ -236,15 +231,20 @@ const getEventTypeName = (type) => {
 };
 
 // 이벤트 상태 이름 반환
-const getStatusName = (status) => {
-  switch (status) {
-    case '준비': return '준비';
-    case '진행중': return '진행중';
-    case '완료': return '완료';
-    case '취소': return '취소';
-    default: return '알 수 없음';
-  }
+const STATUS_LABELS = {
+  '준비': '준비',
+  '진행중': '진행중',
+  '완료': '완료',
+  '취소': '취소',
+  '예정됨': '예정됨',
+  'in_progress': '진행중',
+  'completed': '완료',
+  'cancelled': '취소',
+  '활성': '활성',
+  '비활성': '비활성',
+  '삭제': '삭제',
 };
+const getStatusName = (status) => STATUS_LABELS[status] || status;
 
 // 이벤트 상태에 따른 Badge 스타일
 const getStatusSeverity = (status) => {
@@ -468,4 +468,22 @@ const navigateToCalendar = () => {
 :deep(.p-column-filter) {
   width: 100%;
 }
+
+/* 테이블 헤더(정렬/필터 버튼) 한 줄 정렬 및 공간 최소화 */
+:deep(.p-column-header-content) {
+  white-space: nowrap;
+  align-items: center;
+}
+:deep(.p-sortable-column-icon),
+:deep(.p-column-filter-menu-button) {
+  margin-left: 2px !important;
+  margin-right: 2px !important;
+  padding: 0 !important;
+  font-size: 13px !important;
+  vertical-align: middle;
+}
+:deep(.p-column-title) {
+  vertical-align: middle;
+}
+
 </style>