From b6e2623fe370fd0b0cc474e90b6299916d531f13 Mon Sep 17 00:00:00 2001
From: nevermoregb <nevermoregb@local-host.co.kr>
Date: Tue, 1 Apr 2025 13:10:19 +0900
Subject: [PATCH] =?UTF-8?q?=EC=82=AC=EC=9B=90=20=EB=93=B1=EB=A1=9D=20api?=
 =?UTF-8?q?=20=EC=9E=91=EC=97=85=20=EC=99=84=EB=A3=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/main/EventModal.vue       |   6 +-
 src/components/main/MemberManagement.vue | 117 ++++++++++++++---------
 2 files changed, 74 insertions(+), 49 deletions(-)

diff --git a/src/components/main/EventModal.vue b/src/components/main/EventModal.vue
index 3a99077..a83d2ca 100644
--- a/src/components/main/EventModal.vue
+++ b/src/components/main/EventModal.vue
@@ -17,7 +17,7 @@
         <!-- 입력 폼 화면 -->
         <div v-else class="p-2" style="min-width: 200px">
             <div class="d-flex justify-content-between align-items-center mb-2">
-                <small class="text-muted">{{ getEventTitle(selectedEventType) }}</small>
+                <small>{{ getEventTitle(selectedEventType) }}</small>
                 <button class="btn-close btn-close-sm" style="font-size: 8px" @click="resetForm"></button>
             </div>
             <div class="mb-2">
@@ -79,7 +79,9 @@
     ];
 
     const getEventTitle = type => {
-        return eventTypes.find(event => event.type === type)?.title || '';
+        console.log('type: ', type);
+        console.log('event.type: ', eventTypes);
+        return eventTypes.find(event => event.code === type)?.title || '';
     };
 
     const isEventExists = type => {
diff --git a/src/components/main/MemberManagement.vue b/src/components/main/MemberManagement.vue
index ed9d93e..2932166 100644
--- a/src/components/main/MemberManagement.vue
+++ b/src/components/main/MemberManagement.vue
@@ -1,48 +1,57 @@
 <template>
-    <div class="row g-4 mt-2">
-        <!-- lg 이상에서는 2개, 그 이하에서는 1개씩 -->
-        <div v-for="member in memberList" :key="member.MEMBERSEQ">
+    <div class="row g-4 mt-2" v-if="memberList?.length">
+        <div>
             <div class="card">
-                <div class="card-body p-3">
+                <div class="card-body p-3 row">
                     <div class="d-flex justify-content-between mb-2">
                         <h5 class="card-title fw-bold">사원 등록 관리</h5>
                     </div>
-                    <div class="g-2 card col-12 col-lg-6">
-                        <div class="row card-body">
-                            <div class="col-2">
-                                <img
-                                    :src="`upload/img/profile/`"
-                                    alt="Profile Image"
-                                    class="img-fluid"
-                                    @error="$event.target.src = '/img/icons/icon.png'"
-                                />
-                            </div>
-                            <div class="col-7">
-                                <!-- 날짜 -->
-                                <div class="d-flex flex-sm-row align-items-center pb-2">
-                                    <div class="">{{ member.MEMBERNAM }}</div>
+                    <div class="g-4 col-12 col-lg-6" v-for="member in memberList" :key="member.MEMBERSEQ">
+                        <div class="card">
+                            <div class="row card-body">
+                                <div class="col-3 d-flex align-items-center">
+                                    <img
+                                        :src="`${imgURL}profile/${member.MEMBERPRF}`"
+                                        alt="Profile Image"
+                                        class="img-fluid mx-auto d-block"
+                                        @error="$event.target.src = '/img/icons/icon.png'"
+                                    />
                                 </div>
-                                <!-- 참여자 -->
-                                <div class="d-flex flex-sm-row align-items-center pb-2">
-                                    <i class="bx bxs-envelope"></i>
-                                    <div class="ms-2">{{ member.MEMBERIDS }}@local-host.co.kr</div>
+                                <div class="col-7">
+                                    <!-- 날짜 -->
+                                    <div class="d-flex flex-sm-row align-items-center pb-2">
+                                        <div class="">{{ member.MEMBERNAM }}</div>
+                                    </div>
+                                    <!-- 참여자 -->
+                                    <div class="d-flex flex-sm-row align-items-center pb-2">
+                                        <i class="bx bxs-envelope"></i>
+                                        <div class="ms-2">{{ member.MEMBERIDS }}@local-host.co.kr</div>
+                                    </div>
+                                    <div class="d-flex flex-sm-row align-items-center pb-2">
+                                        <i class="bx bxs-phone"></i>
+                                        <div class="ms-2">{{ $common.addHyphenToPhoneNumber(member.MEMBERTEL) }}</div>
+                                    </div>
+                                    <div class="d-flex flex-sm-row align-items-center pb-2">
+                                        <i class="bx bx-calendar"></i>
+                                        <div class="ms-2">{{ $common.dateFormatter(member.MEMBERRDT) }}</div>
+                                    </div>
                                 </div>
-                                <div class="d-flex flex-sm-row align-items-center pb-2">
-                                    <i class="bx bxs-phone"></i>
-                                    <div class="ms-2">{{ $common.addHyphenToPhoneNumber(member.MEMBERTEL) }}</div>
-                                </div>
-                                <div class="d-flex flex-sm-row align-items-center pb-2">
-                                    <i class="bx bx-calendar"></i>
-                                    <div class="ms-2">{{ $common.dateFormatter(member.MEMBERRDT) }}</div>
-                                </div>
-                            </div>
-                            <div class="col-3">
-                                <div class="align-items-center">
-                                    <label class="switch"
-                                        ><input type="checkbox" :checked="checked" @change="handleRegisterMember($event)" /><span
-                                            class="slider round"
-                                        ></span
-                                    ></label>
+                                <div class="col-2 d-flex align-items-center">
+                                    <div>
+                                        <div>
+                                            <label class="switch"
+                                                ><input
+                                                    type="checkbox"
+                                                    :checked="checked"
+                                                    @change="handleRegisterMember(member.MEMBERSEQ)" /><span class="slider round"></span
+                                            ></label>
+                                        </div>
+                                        <button
+                                            class="btn-close btn-close-sm"
+                                            style="position: absolute; top: 10px; right: 10px"
+                                            @click="handleRejectMember(member.MEMBERSEQ)"
+                                        ></button>
+                                    </div>
                                 </div>
                             </div>
                         </div>
@@ -54,28 +63,42 @@
 </template>
 
 <script setup>
-    import { inject, onMounted, ref } from 'vue';
+    import { onMounted, ref } from 'vue';
+    import { useToastStore } from '@s/toastStore';
     import $api from '@api';
 
     const memberList = ref([]);
     const checked = ref(false);
+    const toast = useToastStore();
+    const imgURL = import.meta.env.VITE_SERVER_IMG_URL;
 
+    // 조회 api
     const fetchRegisterMemberList = async () => {
         const { data } = await $api.get('main/registerMemberList');
         if (data?.data) memberList.value = data.data;
     };
 
-    const handleRegisterMember = async e => {
-        console.log(e);
+    // 사원 등록 api
+    const handleRegisterMember = async memberSeq => {
+        const { data } = await $api.post('main/registerMember', { memberSeq: memberSeq });
+        if (data?.data) {
+            toast.onToast(data.data, 's');
+            fetchRegisterMemberList();
+        }
+    };
+
+    // 사원 등록 미승인 api
+    const handleRejectMember = async memberSeq => {
+        if (!confirm('해당 사원 등록을 거절하시겠습니까?')) return;
+
+        const { data } = await $api.post('main/rejectMember', { memberSeq: memberSeq });
+        if (data?.data) {
+            toast.onToast(data.data, 's');
+            fetchRegisterMemberList();
+        }
     };
 
     onMounted(async () => {
         await fetchRegisterMemberList();
     });
 </script>
-
-<style scoped>
-    .card {
-        font-size: 0.9rem;
-    }
-</style>