init

2025-04-17 23:32:39 +09:00
commit 5b719b6766
105 changed files with 25653 additions and 0 deletions
@@ -0,0 +1,158 @@
+<template>
+  <Dialog 
+    :visible="visible" 
+    @update:visible="$emit('update:visible', $event)" 
+    :header="eventModel.title" 
+    :style="{ width: '90vw', maxWidth: '1200px' }" 
+    :modal="true"
+    class="event-details-dialog"
+  >
+    <TabView>
+      <!-- 기본 정보 탭 -->
+      <TabPanel header="기본 정보">
+        <div class="event-details">
+          <div class="event-details-header">
+            <Badge :value="getEventTypeName(eventModel.eventType)" :severity="getStatusSeverity(eventModel.status)" />
+            <Badge :value="getStatusName(eventModel.status)" :severity="getStatusSeverity(eventModel.status)" />
+          </div>
+          
+          <div class="event-details-content">
+            <div class="event-details-section">
+              <h4>이벤트 정보</h4>
+              <div class="grid">
+                <div class="col-12 md:col-6">
+                  <p><strong>시작일:</strong> {{ formattedStartDate }}</p>
+                  <p><strong>종료일:</strong> {{ formattedEndDate }}</p>
+                  <p><strong>장소:</strong> {{ eventModel.location }}</p>
+                </div>
+                <div class="col-12 md:col-6">
+                  <p><strong>최대 참가자 수:</strong> {{ eventModel.maxParticipants || '제한 없음' }}</p>
+                  <p><strong>현재 참가자 수:</strong> {{ eventModel.participants?.length || 0 }}</p>
+                </div>
+              </div>
+            </div>
+            
+            <div class="event-details-section">
+              <h4>설명</h4>
+              <p>{{ eventModel.description || '설명이 없습니다.' }}</p>
+            </div>
+          </div>
+        </div>
+      </TabPanel>
+
+      <!-- 참가자 관리 탭 -->
+      <TabPanel header="참가자 관리">
+        <ParticipantManagement
+          :eventId="eventModel.id"
+          :availableMembers="availableMembers"
+          @participant-updated="$emit('participant-updated')"
+        />
+      </TabPanel>
+
+      <!-- 점수 관리 탭 -->
+      <TabPanel header="점수 관리">
+        <ScoreManagement 
+          :eventId="eventModel.id"
+          :participants="eventModel.participants || []"
+          :maxGames="eventModel.gameCount"
+          @score-updated="$emit('score-updated')"
+        />
+      </TabPanel>
+    </TabView>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <Button label="수정" icon="pi pi-pencil" class="p-button-text" @click="$emit('edit')" />
+      </div>
+    </template>
+  </Dialog>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import Dialog from 'primevue/dialog';
+import TabView from 'primevue/tabview';
+import TabPanel from 'primevue/tabpanel';
+import Badge from 'primevue/badge';
+import Button from 'primevue/button';
+import ParticipantManagement from './ParticipantManagement.vue';
+import ScoreManagement from './ScoreManagement.vue';
+import dayjs from 'dayjs';
+
+const props = defineProps({
+  visible: {
+    type: Boolean,
+    required: true
+  },
+  event: {
+    type: Object,
+    required: true
+  },
+  getEventTypeName: {
+    type: Function,
+    required: true
+  },
+  getStatusName: {
+    type: Function,
+    required: true
+  },
+  getStatusSeverity: {
+    type: Function,
+    required: true
+  },
+  formatDate: {
+    type: Function,
+    required: true
+  },
+  availableMembers: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(['update:visible', 'hide', 'edit', 'participant-updated', 'score-updated']);
+
+const eventModel = computed(() => props.event);
+
+const formattedStartDate = computed(() => props.formatDate(eventModel.value.startDate));
+const formattedEndDate = computed(() => props.formatDate(eventModel.value.endDate));
+
+const hideDialog = () => {
+  emit('hide');
+};
+</script>
+
+<style scoped>
+.event-details {
+  margin-top: 1rem;
+}
+
+.event-details-header {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+}
+
+.event-details-section {
+  margin-bottom: 2rem;
+}
+
+.event-details-section h4 {
+  margin-bottom: 1rem;
+  color: var(--primary-color);
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 0.5rem;
+}
+
+:deep(.p-dialog-content) {
+  padding: 0 !important;
+}
+
+:deep(.p-tabview-panels) {
+  padding: 1.5rem !important;
+}
+</style>