From 2bd64142ac3c6f65da1120eef0afce00384f59e0 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Thu, 10 Apr 2025 15:44:30 +0900
Subject: [PATCH] ..

---
 src/components/main/MemberManagement.vue | 232 +++++++++++++----------
 1 file changed, 133 insertions(+), 99 deletions(-)

diff --git a/src/components/main/MemberManagement.vue b/src/components/main/MemberManagement.vue
index ee5923e..866446f 100644
--- a/src/components/main/MemberManagement.vue
+++ b/src/components/main/MemberManagement.vue
@@ -1,116 +1,150 @@
 <template>
-    <div class="row g-4 mt-2" v-if="memberList?.length">
-        <div>
+<div class="row g-4 mt-2" v-if="memberList?.length">
+    <div>
+    <div class="card">
+        <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-4 col-12 col-lg-6" v-for="member in memberList" :key="member.MEMBERSEQ">
             <div class="card">
-                <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-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-thumbnail mx-auto d-block"
-                                        style="max-height: 140px"
-                                        @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="font-bold">{{ member.MEMBERNAM }}</div>
-                                        <div class="ms-2">
-                                            ({{ member.MBTI }})
-                                            <img
-                                                role="img"
-                                                class="w-px-30 h-px-40"
-                                                :src="`/img/mbti/${member.MBTI.toLowerCase()}.png`"
-                                                alt="MBTI image"
-                                            />
-                                        </div>
-                                    </div>
-                                    <div class="d-flex flex-sm-row align-items-center pb-2">
-                                        <i class="bx bx-id-card"></i>
-                                        <div class="ms-2">{{ member.MEMBERIDS }}</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.MEMBERCDT) }}</div>
-                                    </div>
-                                </div>
-                                <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>
+            <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-thumbnail mx-auto d-block"
+                    style="max-height: 140px"
+                    @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="font-bold">{{ member.MEMBERNAM }}</div>
+                    <div class="ms-2">
+                    ({{ member.MBTI }})
+                    <img
+                        role="img"
+                        class="w-px-30 h-px-40"
+                        :src="`/img/mbti/${member.MBTI.toLowerCase()}.png`"
+                        alt="MBTI image"
+                    />
                     </div>
                 </div>
+                <div class="d-flex flex-sm-row align-items-center pb-2">
+                    <i class="bx bx-id-card"></i>
+                    <div class="ms-2">{{ member.MEMBERIDS }}</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.MEMBERCDT) }}</div>
+                </div>
+                </div>
+                <div class="col-2 d-flex align-items-center">
+                <div>
+                    <div>
+                    <label class="switch">
+                        <input
+                        type="checkbox"
+                        :checked="member.isAccepted"
+                        @click="handleToggle($event, member)"
+                        />
+                        <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>
         </div>
+        </div>
     </div>
+    </div>
+</div>
 </template>
 
 <script setup>
-    import { onMounted, ref } from 'vue';
-    import { useToastStore } from '@s/toastStore';
-    import $api from '@api';
+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;
+const memberList = ref([]);
+const imgURL = import.meta.env.VITE_SERVER_IMG_URL;
+const toast = useToastStore();
 
-    // 조회 api
-    const fetchRegisterMemberList = async () => {
-        const { data } = await $api.get('main/registerMemberList');
-        if (data?.data) memberList.value = data.data;
-    };
+// 회원 목록 조회 API
+const fetchRegisterMemberList = async () => {
+try {
+    const { data } = await $api.get('main/registerMemberList');
+    if (data?.data) {
+    // 예시: MEMBERROL이 'ROLE_REGISTERED'이면 등록(수락)된 것으로 가정
+    memberList.value = data.data
+        .filter(member => member.MEMBERSEQ !== 1)
+        .map(member => ({
+        ...member,
+        isAccepted: member.MEMBERROL === 'ROLE_REGISTERED'
+        }));
+    }
+} catch (error) {
+    toast.onToast('사용자 목록을 불러오지 못했습니다.', 'e');
+}
+};
 
-    // 사원 등록 api
-    const handleRegisterMember = async memberSeq => {
-        const { data } = await $api.post('main/registerMember', { memberSeq: memberSeq });
-        if (data?.data) {
-            toast.onToast(data.data, 's');
-            fetchRegisterMemberList();
-        } else {
-            if (data?.message) toast.onToast(data.message, 'e');
-        }
-    };
+// 사원 등록 API (수락)
+// 수정: 이벤트 객체를 받아 기본 동작을 막음으로써 체크박스 상태 변화 자체를 방지함
+const handleRegisterMember = async (memberSeq, event) => {
+event.preventDefault(); // 체크박스의 기본 동작을 막음
+try {
+    const { data } = await $api.post('main/registerMember2', { memberSeq });
+    if (data?.data) {
+    toast.onToast(data.data, 's');
+    await fetchRegisterMemberList();
+    return true;
+    } else {
+    if (data?.message) toast.onToast(data.message, 'e');
+    return false;
+    }
+} catch (error) {
+    toast.onToast('사원 등록에 실패했습니다.', 'e');
+    return false;
+}
+};
 
-    // 사원 등록 미승인 api
-    const handleRejectMember = async memberSeq => {
-        if (!confirm('해당 사원 등록을 거절하시겠습니까?')) return;
+// 사원 등록 거절 API
+const handleRejectMember = async memberSeq => {
+if (!confirm('해당 사원 등록을 거절하시겠습니까?')) return;
+try {
+    const { data } = await $api.post('main/rejectMember', { memberSeq });
+    if (data?.data) {
+    toast.onToast(data.data, 's');
+    await fetchRegisterMemberList();
+    } else {
+    if (data?.message) toast.onToast(data.message, 'e');
+    }
+} catch (error) {
+    toast.onToast('사원 등록 거절에 실패했습니다.', 'e');
+}
+};
 
-        const { data } = await $api.post('main/rejectMember', { memberSeq: memberSeq });
-        if (data?.data) {
-            toast.onToast(data.data, 's');
-            fetchRegisterMemberList();
-        } else {
-            if (data?.message) toast.onToast(data.message, 'e');
-        }
-    };
+// 토글 이벤트 핸들러: API 호출 실패 시 체크박스 상태 변화 자체를 막음
+async function handleToggle(event, member) {
+event.preventDefault(); // 기본 동작을 막아서 체크박스 UI가 바뀌지 않음
+await handleRegisterMember(member.MEMBERSEQ, event);
+}
 
-    onMounted(async () => {
-        await fetchRegisterMemberList();
-    });
+onMounted(async () => {
+await fetchRegisterMemberList();
+});
 </script>
+
+<style scoped>
+</style>