From 205428533d1dda44753648b8737095628960bf7d Mon Sep 17 00:00:00 2001
From: hjjeong <hjjeong@wace.me>
Date: Thu, 30 Apr 2026 07:11:39 +0900
Subject: [PATCH] =?UTF-8?q?fix(rolesList):=20=EC=A7=81=EC=9B=90=20?=
 =?UTF-8?q?=EC=B2=B4=ED=81=AC=EB=B0=95=EC=8A=A4=20=ED=81=B4=EB=A6=AD=20?=
 =?UTF-8?q?=EC=8B=9C=20=EC=9D=B4=EC=A4=91=20=ED=86=A0=EA=B8=80=EB=A1=9C=20?=
 =?UTF-8?q?=ED=95=B4=EC=A0=9C=20=EC=95=88=20=EB=90=98=EB=8D=98=20=EB=B2=84?=
 =?UTF-8?q?=EA=B7=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

증상: 권한있는/없는 직원 영역의 체크박스를 클릭하면 즉시 다시 해제됨
처럼 보이고 (사실은 두 번 토글됨), 체크 상태 자체가 유지 안 됨.
전체선택 버튼 (별개 핸들러) 만 정상 동작.

원인: <li onClick={토글}><Checkbox onCheckedChange={토글} /></li> 구조에서
체크박스 클릭 → onCheckedChange 트리거 (토글 1회) → 이벤트가 li 로 버블 →
li onClick 트리거 (토글 1회 더) → 합쳐서 2회 토글 = 원상복귀.

수정: Checkbox 에 onClick={(e) => e.stopPropagation()} 추가해서 li 로
버블 차단. li 빈 영역 클릭 시는 li onClick 만 동작, 체크박스 직접 클릭
시는 onCheckedChange 만 동작 — 둘 다 정확히 1회 토글.

권한있는 직원 + 권한없는 직원 두 곳 모두 수정.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 frontend/app/(main)/admin/userMng/rolesList/page.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/app/(main)/admin/userMng/rolesList/page.tsx b/frontend/app/(main)/admin/userMng/rolesList/page.tsx
index 825b50b0..74c29633 100644
--- a/frontend/app/(main)/admin/userMng/rolesList/page.tsx
+++ b/frontend/app/(main)/admin/userMng/rolesList/page.tsx
@@ -781,6 +781,7 @@ export default function RolesPage() {
                       <Checkbox
                         checked={checkedMembers.has(u.user_id)}
                         onCheckedChange={() => toggleMemberCheck(u.user_id)}
+                        onClick={(e) => e.stopPropagation()}
                       />
                       <div className="min-w-0 flex-1">
                         <div className="truncate text-sm">{u.user_name || u.user_id}</div>
@@ -877,6 +878,7 @@ export default function RolesPage() {
                       <Checkbox
                         checked={checkedNonMembers.has(u.user_id)}
                         onCheckedChange={() => toggleNonMemberCheck(u.user_id)}
+                        onClick={(e) => e.stopPropagation()}
                       />
                       <div className="min-w-0 flex-1">
                         <div className="truncate text-sm">{u.user_name || u.user_id}</div>