public 정리

2025-05-08 00:50:12 +09:00
parent 1684fbf5d1
commit 744a0db3bd
5 changed files with 189 additions and 145 deletions
@@ -0,0 +1,257 @@
+<template>
+  <Dialog
+    :visible="visible"
+    @update:visible="val => $emit('update:visible', val)"
+    modal
+    header="참가 신청/수정"
+    :style="{ width: '400px' }"
+    :closable="true"
+    @hide="$emit('close')"
+  >
+    <div class="flex flex-wrap gap-3">
+      <!-- 회원 선택 -->
+      <div class="w-full min-w-[200px]">
+        <label>회원</label>
+        <Select
+          v-model="selectedMember"
+          :options="memberOptions"
+          optionLabel="name"
+          placeholder="회원 선택"
+          class="w-full"
+          filter
+          filterPlaceholder="이름으로 검색"
+        >
+          <!-- 선택된 값 표시 -->
+          <template #value="slotProps">
+            <div v-if="slotProps.value && slotProps.value.isNewGuest" class="flex align-items-center text-primary font-bold">
+              <i class="pi pi-user-plus mr-2" /> 신규 게스트 추가
+            </div>
+            <div v-else-if="slotProps.value" class="flex align-items-center">
+              <Tag :value="slotProps.value.group" :severity="slotProps.value.group === '참가자' ? 'success' : 'info'" class="mr-2" />
+              <span style="font-weight:bold;">{{ slotProps.value.name }}</span>
+              <span style="color:#888; font-size:0.93em; margin-left: 0.5em;">
+                {{ slotProps.value.memberType }} / {{ slotProps.value.gender }} / 에버리지: {{ slotProps.value.average ?? '-' }}
+              </span>
+            </div>
+            <span v-else>
+              {{ slotProps.placeholder }}
+            </span>
+          </template>
+          <!-- 옵션 목록 표시 -->
+          <template #option="slotProps">
+            <div v-if="slotProps.option.isNewGuest" class="flex align-items-center text-primary font-bold">
+              <i class="pi pi-user-plus mr-2" /> 신규 게스트 추가
+            </div>
+            <div v-else class="flex align-items-center">
+              <Tag :value="slotProps.option.group" :severity="slotProps.option.group === '참가자' ? 'success' : 'info'" class="mr-2" />
+              <span style="font-weight:bold;">{{ slotProps.option.name }}</span>
+              <span style="color:#888; font-size:0.93em; margin-left: 0.5em;">
+                {{ slotProps.option.memberType }} / {{ slotProps.option.gender }} / 에버리지: {{ slotProps.option.average ?? '-' }}
+              </span>
+            </div>
+          </template>
+        </Select>
+        <small v-if="submitted && !selectedMemberId" class="p-error">회원을 선택해주세요.</small>
+
+        <!-- 신규 게스트 추가 입력폼 -->
+        <div v-if="selectedMember && selectedMember.isNewGuest" class="w-full border p-3 rounded bg-gray-50 mt-2">
+          <div class="mb-2">
+            <label>이름</label>
+            <InputText v-model="newGuest.name" class="w-full" />
+          </div>
+          <div class="mb-2">
+            <label>연락처</label>
+            <InputText v-model="newGuest.phone" class="w-full" />
+          </div>
+          <div class="mb-2">
+            <label>성별</label>
+            <Select v-model="newGuest.gender" :options="genderOptions" optionLabel="label" optionValue="value" placeholder="성별 선택" class="w-full" />
+          </div>
+          <div class="mb-2">
+            <label>에버리지</label>
+            <InputText v-model="newGuest.average" class="w-full" />
+          </div>
+          <Button label="게스트 추가" class="mt-1" @click="addNewGuest" :disabled="!newGuest.name || !newGuest.phone || !newGuest.gender" />
+        </div>
+      </div>
+      
+      <!-- 참가 상태 -->
+      <div class="w-full min-w-[200px]">
+        <label>참가 상태</label>
+        <Select
+          v-model="status"
+          :options="statusOptions"
+          optionLabel="label"
+          optionValue="value"
+          placeholder="상태를 선택하세요"
+          checkmark
+          class="w-full"
+        />
+        <small v-if="submitted && !status" class="p-error">참가 상태를 선택해주세요.</small>
+      </div>
+      <!-- 회비 납부 상태 -->
+      <div class="flex-1 min-w-[200px]">
+        <label>회비 납부 상태</label>
+        <Select
+          v-model="paymentStatus"
+          :options="paymentStatusOptions"
+          optionLabel="label"
+          optionValue="value"
+          placeholder="납부 상태를 선택하세요"
+          checkmark
+          class="w-full"
+        />
+        <small v-if="submitted && !paymentStatus" class="p-error">납부 상태를 선택해주세요.</small>
+      </div>
+      <!-- 비고 -->
+      <div class="w-full">
+        <label>비고</label>
+        <InputText v-model="comment" class="w-full" />
+      </div>
+      <div v-if="error" class="w-full p-error p-mb-2">{{ error }}</div>
+      <div class="w-full flex justify-content-end gap-2 mt-3">
+        <Button type="submit" label="확인" @click="submit" />
+        <Button type="button" label="취소" severity="secondary" @click="$emit('close')" />
+      </div>
+    </div>
+  </Dialog>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import Tag from 'primevue/tag';
+import InputText from 'primevue/inputtext';
+import Select from 'primevue/select';
+import Button from 'primevue/button';
+const props = defineProps({
+  publicHash: String,
+  participants: Array,
+  availableMembers: Array,
+  visible: Boolean, // Dialog의 v-model:visible과 연결
+  eventStatus: String
+});
+const emits = defineEmits(['close', 'updated', 'update:visible']);
+
+const selectedMember = ref(null);
+const memberOptions = computed(() => {
+  const baseOptions = [
+    ...(props.participants || []).map(m => ({ ...m, group: '참가자', id: m.participantId, participantId: m.participantId, memberId: m.memberId })),
+    ...(props.availableMembers || []).map(m => ({ ...m, group: '미신청', id: m.memberId, participantId: null, memberId: m.memberId }))
+  ].sort((a, b) => {
+    const nameA = a.name || '';
+    const nameB = b.name || '';
+    return nameA.localeCompare(nameB, 'ko');
+  });
+  if (props.eventStatus === '준비') {
+    baseOptions.push({ name: '신규 게스트 추가', isNewGuest: true });
+  }
+  return baseOptions;
+});
+
+  
+const selectedParticipantId = ref('');
+const selectedMemberId = ref('');
+watch(selectedMember, (val) => {
+  selectedParticipantId.value = val ? val.participantId : '';
+  selectedMemberId.value = val ? val.memberId : '';
+
+  // 참가자라면 기존 정보 자동 세팅
+  if (val) {
+    const found = (props.participants || []).find(m => m.memberId === val.memberId);
+    status.value = found?.status || '';
+    paymentStatus.value = found?.paymentStatus || '';
+    comment.value = found?.comment || '';
+  }
+});
+
+const comment = ref('');
+const status = ref('');
+const paymentStatus = ref('');
+const error = ref('');
+const submitted = ref(false);
+
+const statusOptions = [
+  { label: '참가예정', value: '참가예정' },
+  { label: '참가확정', value: '참가확정' },
+  { label: '취소', value: '취소' }
+];
+const paymentStatusOptions = [
+  { label: '미납', value: '미납' },
+  { label: '납부완료', value: '납부완료' }
+];
+
+
+import PublicEventService from '@/services/PublicEventService';
+
+const newGuest = ref({ name: '', phone: '', gender: '' });
+const genderOptions = [
+  { label: '남', value: '남성' },
+  { label: '여', value: '여성' }
+];
+
+async function addNewGuest() {
+  error.value = '';
+  if (!newGuest.value.name || !newGuest.value.phone || !newGuest.value.gender) {
+    error.value = '이름, 연락처, 성별을 모두 입력하세요.';
+    return;
+  }
+  try {
+    // 실제 API 경로/파라미터는 상황에 맞게 수정 필요
+    const res = await PublicEventService.createGuest(props.publicHash, {
+      name: newGuest.value.name,
+      phone: newGuest.value.phone,
+      gender: newGuest.value.gender,
+      average: newGuest.value.average
+    });
+    if (!res || !res.data || !res.data.memberId) throw new Error('게스트 등록 실패');
+    // 새 게스트를 멤버 옵션에 추가하고 자동 선택
+    const guest = {
+      ...res.data,
+      group: '참가자',
+      id: res.data.participantId,
+      participantId: res.data.participantId,
+      memberId: res.data.memberId
+    };
+    // options에 직접 push (reactivity 보장 위해 availableMembers에도 추가)
+    props.availableMembers.push(guest);
+    // 참가자 목록에도 추가
+    props.participants.push(guest);
+    // 선택값 세팅
+    selectedMember.value = guest;
+    selectedParticipantId.value = guest.participantId;
+    selectedMemberId.value = guest.memberId;
+    // 입력폼 초기화
+    newGuest.value = { name: '', phone: '', gender: '', average: '' };
+  } catch (e) {
+    error.value = e.message || '게스트 등록 중 오류 발생';
+  }
+}
+
+
+async function submit() {
+  submitted.value = true;
+  error.value = '';
+  if (!selectedMemberId.value || !status.value || !paymentStatus.value) {
+    error.value = '모든 항목을 입력해주세요.';
+    return;
+  }
+  try {
+    const res = await PublicEventService.registerParticipant(props.publicHash, {
+      participantId: selectedParticipantId.value,
+      memberId: selectedMemberId.value,
+      comment: comment.value,
+      status: status.value,
+      paymentStatus: paymentStatus.value
+    });
+    if (!res.ok) throw new Error('참가 신청에 실패했습니다.');
+    emits('updated');
+    emits('close');
+  } catch (e) {
+    error.value = e.message;
+  }
+}
+</script>
+
+<style scoped>
+
+</style>