From 11ebea8ccdbe8c817b76800b627431567e836f0a Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Thu, 10 Apr 2025 15:14:53 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B6=8C=ED=95=9C=EB=B6=80=EC=97=AC=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js                  |   2 +-
 src/views/admin/TheAuthorization.vue | 133 +++++++++++++++------------
 2 files changed, 75 insertions(+), 60 deletions(-)

diff --git a/src/router/index.js b/src/router/index.js
index f0e7e0b..c4bd7b1 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -148,7 +148,7 @@ router.beforeEach(async (to, from, next) => {
 
     // Authorization 페이지는 ID가 26이 아니면 접근 차단
     if (to.path === '/authorization' && userId !== allowedUserId) {
-        return next('/');
+        return next();
     }
 
     // 비로그인 사용자만 접근 가능한 페이지인데 로그인된 경우 → 홈으로 이동
diff --git a/src/views/admin/TheAuthorization.vue b/src/views/admin/TheAuthorization.vue
index f75ae67..96da833 100644
--- a/src/views/admin/TheAuthorization.vue
+++ b/src/views/admin/TheAuthorization.vue
@@ -1,26 +1,35 @@
 <template>
-    <div class="container text-center flex-grow-1 container-p-y">
-        <div class="card">
-            <div class="card-header d-flex flex-column">
-                <h3>관리자 권한 부여</h3>
-                <div class="user-card-container">
-                    <div v-for="user in users" :key="user.id" class="user-card">
-                        <!-- 프로필 사진 -->
-                        <img :src="getProfileImage(user.photo)" class="profile-img" alt="프로필 사진" @error="setDefaultImage" />
-                        <!-- 사용자 정보 -->
-                        <div class="user-info">
-                            <h5>{{ user.name }}</h5>
-                        </div>
-                        <!-- 권한 토글 버튼 -->
-                        <label class="switch me-0">
-                            <input type="checkbox" :checked="user.isAdmin" @change="toggleAdmin(user)" />
-                            <span class="slider round"></span>
-                        </label>
-                    </div>
-                </div>
+<div class="container text-center flex-grow-1 container-p-y">
+    <div class="card">
+    <div class="card-header d-flex flex-column">
+        <h3>관리자 권한 부여</h3>
+        <div class="user-card-container">
+        <div v-for="user in users" :key="user.id" class="user-card">
+            <!-- 프로필 사진 -->
+            <img
+            :src="getProfileImage(user.photo)"
+            class="profile-img"
+            alt="프로필 사진"
+            @error="setDefaultImage"
+            />
+            <!-- 사용자 정보 -->
+            <div class="user-info">
+            <h5>{{ user.name }}</h5>
             </div>
+            <!-- 권한 토글 버튼 (기본 동작 막고 클릭시 직접 토글 처리) -->
+            <label class="switch me-0">
+            <input
+                type="checkbox"
+                :checked="user.isAdmin"
+                @click="handleToggle($event, user)"
+            />
+            <span class="slider round"></span>
+            </label>
+        </div>
         </div>
     </div>
+    </div>
+</div>
 </template>
 
 <script setup>
@@ -32,65 +41,71 @@ const users = ref([]);
 const toastStore = useToastStore();
 const baseUrl = axios.defaults.baseURL.replace(/api\/$/, "");
 const defaultProfile = "/img/icons/icon.png";
-const allowedUserId = 1;  // 특정 ID (변경필요!!)
+const allowedUserId = 1; // 특정 ID (필요에 따라 변경)
+
 // 사용자 목록 가져오기
 async function fetchUsers() {
-    try {
-        const response = await axios.get('admin/users'); // API 경로 확인 필요
-
-        // API 응답 구조 확인 후 데이터가 배열인지 체크
-        if (!response.data || !Array.isArray(response.data.data)) {
-            throw new Error("올바른 데이터 형식이 아닙니다.");
-        }
-
-        // MEMBERSEQ가 1이 아닌 회원만 필터링하여 데이터 매핑
-        users.value = response.data.data
-            .filter(user => user.MEMBERSEQ !== allowedUserId) // MEMBERSEQ가 1이면 제외
-            .map(user => ({
-                id: user.MEMBERSEQ,
-                name: user.MEMBERNAM,
-                photo: user.MEMBERPRF ? `${baseUrl}upload/img/profile/${user.MEMBERPRF}` : defaultProfile,
-                color: user.MEMBERCOL,
-                isAdmin: user.MEMBERROL === 'ROLE_ADMIN',
-            }));
-
-    } catch (error) {
-        toastStore.onToast('사용자 목록을 불러오지 못했습니다.', 'e');
+try {
+    const response = await axios.get('admin/users'); // API 경로 확인
+    if (!response.data || !Array.isArray(response.data.data)) {
+    throw new Error("올바른 데이터 형식이 아닙니다.");
     }
+    users.value = response.data.data
+    .filter(user => user.MEMBERSEQ !== allowedUserId)
+    .map(user => ({
+        id: user.MEMBERSEQ,
+        name: user.MEMBERNAM,
+        photo: user.MEMBERPRF ? `${baseUrl}upload/img/profile/${user.MEMBERPRF}` : defaultProfile,
+        color: user.MEMBERCOL,
+        isAdmin: user.MEMBERROL === 'ROLE_ADMIN',
+    }));
+} catch (error) {
+    toastStore.onToast('사용자 목록을 불러오지 못했습니다.', 'e');
+}
 }
 
 // 프로필 이미지 가져오기
 function getProfileImage(photo) {
-    return photo || defaultProfile;
+return photo || defaultProfile;
 }
 
 // 이미지 로드 오류 시 기본 이미지 설정
 function setDefaultImage(event) {
-    event.target.src = defaultProfile;
+event.target.src = defaultProfile;
 }
 
-// 관리자 권한 토글 함수
-async function toggleAdmin(user) {
-    const requestData = {
-        id: user.id,
-        role: user.isAdmin ? 'MEMBER' : 'ADMIN'
-    };
-    try {
-        const response = await axios.put('admin/role', requestData);
+// 권한 토글 시 기본 동작 막고 직접 제어하는 함수
+async function handleToggle(event, user) {
+// Prevent the default checkbox toggle behavior
+event.preventDefault();
 
-        if (response.status === 200) {
-            user.isAdmin = !user.isAdmin;
-            toastStore.onToast(`'${user.name}'의 권한이 '${requestData.role}'(으)로 변경되었습니다.`, 's');
-        } else {
-            throw new Error('권한 변경 실패');
-        }
-    } catch (error) {
-        toastStore.onToast('권한 변경에 실패했습니다.', 'e');
+// 저장: 현재 상태를 기반으로 변경 요청 (체크박스는 아직 변하지 않았음)
+const originalState = user.isAdmin;
+const newState = !originalState;
+
+const requestData = {
+    id: user.id,
+    role: originalState ? 'MEMBER' : 'ADMIN'
+};
+
+try {
+    const response = await axios.put('admin/role', requestData);
+    if (response.status === 200) {
+    // 서버 요청 성공 시에만 상태를 업데이트
+    user.isAdmin = newState;
+    toastStore.onToast(`'${user.name}'의 권한이 '${requestData.role}'(으)로 변경되었습니다.`, 's');
+    } else {
+    throw new Error('권한 변경 실패');
     }
+} catch (error) {
+    // 에러 발생 시 상태를 변경하지 않음
+    toastStore.onToast('권한 변경에 실패했습니다.', 'e');
+}
 }
 
 onMounted(fetchUsers);
 </script>
 
 <style scoped>
+/* 필요에 따라 스타일 추가 */
 </style>