From 02cacb9aab3b069d0b835afe56cb686329b16f7b Mon Sep 17 00:00:00 2001 From: Jay Sheen Date: Thu, 23 Oct 2025 10:32:24 +0900 Subject: [PATCH] =?UTF-8?q?refactor:=20XKeypad=20=EA=B5=AC=ED=98=84=20?= =?UTF-8?q?=EB=A1=A4=EB=B0=B1=20=EB=B0=8F=20=EC=9D=BC=EB=B0=98=20password?= =?UTF-8?q?=20input=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - XKeypad 관련 모든 코드 제거 - 일반 password input 필드로 복원 - 불필요한 ref, useEffect 제거 - select 요소 value 속성으로 변경 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../password/modify-cancel-password-page.tsx | 176 ++---------------- 1 file changed, 17 insertions(+), 159 deletions(-) diff --git a/src/pages/account/password/modify-cancel-password-page.tsx b/src/pages/account/password/modify-cancel-password-page.tsx index 19f884d..41a60dd 100644 --- a/src/pages/account/password/modify-cancel-password-page.tsx +++ b/src/pages/account/password/modify-cancel-password-page.tsx @@ -1,4 +1,4 @@ -import { useState, useRef, useEffect, ChangeEvent } from 'react'; +import { useState } from 'react'; import { PATHS } from '@/shared/constants/paths'; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { HeaderType } from '@/entities/common/model/types'; @@ -10,7 +10,7 @@ import { } from '@/widgets/sub-layout/use-sub-layout'; import { useUserChangeCancelPasswordMutation } from '@/entities/user/api/use-user-change-cancel-password-mutation'; import { useStore } from '@/shared/model/store'; -import { XKeypad, XKeypadManager, createPasswordKeypad } from '@/utils/xkeypad'; +import { snackBar } from '@/shared/lib/toast'; export const PasswordModifyCancelPasswordPage = () => { const { navigate } = useNavigate(); @@ -20,69 +20,20 @@ export const PasswordModifyCancelPasswordPage = () => { const [mid, setMid] = useState(userMid); const [password, setPassword] = useState(''); const [confirmPassword, setConfirmPassword] = useState(''); - const [isKeypadLoaded, setIsKeypadLoaded] = useState(false); - - // Input refs for xkeypad - const passwordInputRef = useRef(null); - const confirmPasswordInputRef = useRef(null); - - // XKeypad instances - const passwordKeypadRef = useRef(null); - const confirmPasswordKeypadRef = useRef(null); - - // RSA Keys (실제 프로덕션에서는 서버에서 받아와야 함) - const RSA_MODULUS = "C4F7B39E2E93DB19C016C7A0C1C05B028A1D57CB9B91E13F5B7353F8FB5AC6CE6BE31ABEB8E8F7AD18B90C08F4EBC011A6A8FCE614EA879ED5B96296B969CE92923BC9BAD6FD87F00E08F529F93010EA77E40937BDAC1C866E79ACE2F2822A3ECD982F90532D5301CF90D9BF89E953A0593AB6C5F31E99B690DD582FB85F85A9"; - const RSA_EXPONENT = "10001"; const changeCancelPasswordMutation = useUserChangeCancelPasswordMutation({ onSuccess: () => { - // snackBar('비밀번호가 성공적으로 변경되었습니다.'); - // Clear form and keypads + snackBar('비밀번호가 성공적으로 변경되었습니다.'); + // Clear form setPassword(''); setConfirmPassword(''); - if (passwordKeypadRef.current) passwordKeypadRef.current.clear(); - if (confirmPasswordKeypadRef.current) confirmPasswordKeypadRef.current.clear(); - if (passwordInputRef.current) passwordInputRef.current.value = ''; - if (confirmPasswordInputRef.current) confirmPasswordInputRef.current.value = ''; // Navigate back navigate(PATHS.account.password.manage); }, onError: (error) => { - // snackBar(error?.response?.data?.message || '비밀번호 변경에 실패했습니다.'); + snackBar(error?.response?.data?.message || '비밀번호 변경에 실패했습니다.'); } }); - // Initialize XKeypad - useEffect(() => { - const initializeKeypad = async () => { - try { - const manager = XKeypadManager.getInstance({ - modulus: RSA_MODULUS, - exponent: RSA_EXPONENT - }); - - await manager.loadScripts(); - - // RSA 키 설정을 명시적으로 다시 한번 수행 - manager.setRSAPublicKey(RSA_MODULUS, RSA_EXPONENT); - - setIsKeypadLoaded(true); - } catch (error) { - console.error('Failed to load XKeypad:', error); - } - }; - - initializeKeypad(); - - return () => { - // Cleanup keypads on unmount - if (passwordKeypadRef.current) { - passwordKeypadRef.current.destroy(); - } - if (confirmPasswordKeypadRef.current) { - confirmPasswordKeypadRef.current.destroy(); - } - }; - }, []); useSetHeaderTitle('거래취소 비밀번호 변경'); useSetHeaderType(HeaderType.LeftArrow); @@ -100,97 +51,10 @@ export const PasswordModifyCancelPasswordPage = () => { ); }; - // Handle password keypad - const handlePasswordKeypad = async () => { - if (!passwordInputRef.current || !isKeypadLoaded) return; - - // Close other keypad if open - if (confirmPasswordKeypadRef.current) { - confirmPasswordKeypadRef.current.close(); - } - - // Create or initialize password keypad - if (!passwordKeypadRef.current) { - passwordKeypadRef.current = createPasswordKeypad(passwordInputRef.current, { - keyType: 'qwertysmart', - viewType: 'half', - maxInputSize: 16, - useOverlay: true, - useModal: false, - hasPressEffect: true, - isE2E: false, // E2E 모드 비활성화 - onInputChange: (length: number) => { - // Update password state as typing - if (passwordKeypadRef.current) { - const plainText = passwordKeypadRef.current.getPlainText(); - console.log('passwordKeypadRef:', plainText, passwordInputRef.current?.value); - setPassword(plainText); - } - }, - onKeypadClose: () => { - // Final update when keypad closes - if (passwordKeypadRef.current) { - const plainText = passwordKeypadRef.current.getPlainText(); - setPassword(plainText); - } - } - }); - } - - const result = await passwordKeypadRef.current.initialize(passwordInputRef.current); - if (result !== 0) { - console.error('Failed to initialize password keypad'); - } - }; - - // Handle confirm password keypad - const handleConfirmPasswordKeypad = async () => { - if (!confirmPasswordInputRef.current || !isKeypadLoaded) return; - - // Close other keypad if open - if (passwordKeypadRef.current) { - passwordKeypadRef.current.close(); - } - - // Create or initialize confirm password keypad - if (!confirmPasswordKeypadRef.current) { - confirmPasswordKeypadRef.current = createPasswordKeypad(confirmPasswordInputRef.current, { - keyType: 'qwertysmart', - viewType: 'half', - maxInputSize: 16, - useOverlay: true, - useModal: false, - hasPressEffect: true, - isE2E: false, // E2E 모드 비활성화 - onInputChange: (length: number) => { - // Update confirm password state as typing - if (confirmPasswordKeypadRef.current) { - const plainText = confirmPasswordKeypadRef.current.getPlainText(); - console.log('confirmPasswordKeypadRef:', plainText, confirmPasswordInputRef.current?.value); - setConfirmPassword(plainText); - } - }, - onKeypadClose: () => { - // Final update when keypad closes - if (confirmPasswordKeypadRef.current) { - const plainText = confirmPasswordKeypadRef.current.getPlainText(); - setConfirmPassword(plainText); - } - } - }); - } - - const result = await confirmPasswordKeypadRef.current.initialize(confirmPasswordInputRef.current); - if (result !== 0) { - console.error('Failed to initialize confirm password keypad'); - } - }; - // 저장 버튼 클릭 핸들러 const handleSave = () => { if (!isFormValid()) return; - // 평문 비밀번호 사용 (E2E 모드가 꺼져있으므로) changeCancelPasswordMutation.mutate({ mid, password: password @@ -206,17 +70,17 @@ export const PasswordModifyCancelPasswordPage = () => {
가맹점 *
- setMid(e.target.value)} > { - midOptions.map((value, index) => ( + midOptions.map((value) => ( + key={value.value} + value={value.value} + >{value.name} )) } @@ -224,27 +88,21 @@ export const PasswordModifyCancelPasswordPage = () => {
변경 비밀번호 *
setPassword(e.target.value)} />
변경 비밀번호 재입력 *
setConfirmPassword(e.target.value)} />
{confirmPassword && password !== confirmPassword && (