..

src/components/main/MemberManagement.vue

@@ -47,12 +47,14 @@
                 <div class="col-2 d-flex align-items-center">
                 <div>
                     <div>
-                                            <label class="switch"
+                    <label class="switch">
-                                                ><input
+                        <input
                         type="checkbox"
-                                                    :checked="checked"
+                        :checked="member.isAccepted"
-                                                    @change="handleRegisterMember(member.MEMBERSEQ)" /><span class="slider round"></span
+                        @click="handleToggle($event, member)"
-                                            ></label>
+                        />
+                        <span class="slider round"></span>
+                    </label>
                     </div>
                     <button
                     class="btn-close btn-close-sm"
@@ -76,41 +78,73 @@
 import $api from '@api';
 
 const memberList = ref([]);
-    const checked = ref(false);
-    const toast = useToastStore();
 const imgURL = import.meta.env.VITE_SERVER_IMG_URL;
+const toast = useToastStore();
 
-    // 조회 api
+// 회원 목록 조회 API
 const fetchRegisterMemberList = async () => {
+try {
     const { data } = await $api.get('main/registerMemberList');
-        if (data?.data) memberList.value = data.data;
-    };
-
-    // 사원 등록 api
-    const handleRegisterMember = async memberSeq => {
-        const { data } = await $api.post('main/registerMember', { memberSeq: memberSeq });
     if (data?.data) {
-            toast.onToast(data.data, 's');
+    // 예시: MEMBERROL이 'ROLE_REGISTERED'이면 등록(수락)된 것으로 가정
-            fetchRegisterMemberList();
+    memberList.value = data.data
-        } else {
+        .filter(member => member.MEMBERSEQ !== 1)
-            if (data?.message) toast.onToast(data.message, 'e');
+        .map(member => ({
+        ...member,
+        isAccepted: member.MEMBERROL === 'ROLE_REGISTERED'
+        }));
+    }
+} catch (error) {
+    toast.onToast('사용자 목록을 불러오지 못했습니다.', 'e');
 }
 };
 
-    // 사원 등록 미승인 api
+// 사원 등록 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;
-
+try {
-        const { data } = await $api.post('main/rejectMember', { memberSeq: memberSeq });
+    const { data } = await $api.post('main/rejectMember', { memberSeq });
     if (data?.data) {
     toast.onToast(data.data, 's');
-            fetchRegisterMemberList();
+    await fetchRegisterMemberList();
     } else {
     if (data?.message) toast.onToast(data.message, 'e');
     }
+} catch (error) {
+    toast.onToast('사원 등록 거절에 실패했습니다.', 'e');
+}
 };
 
+// 토글 이벤트 핸들러: API 호출 실패 시 체크박스 상태 변화 자체를 막음
+async function handleToggle(event, member) {
+event.preventDefault(); // 기본 동작을 막아서 체크박스 UI가 바뀌지 않음
+await handleRegisterMember(member.MEMBERSEQ, event);
+}
+
 onMounted(async () => {
 await fetchRegisterMemberList();
 });
 </script>
+
+<style scoped>
+</style>