refactor: Update account authentication and password input components
- Replace XKeypad with standard password input fields - Update user authentication and login info components - Modify password modification and account pages - Add sub-layout widget enhancements 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -111,7 +111,7 @@ export const UserAccountAuthWrap = ({
|
|||||||
]
|
]
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="ing-list pdtop">
|
<div className="ing-list pdtop pb-86">
|
||||||
<div className="perm-form">
|
<div className="perm-form">
|
||||||
<div className="perm-field">
|
<div className="perm-field">
|
||||||
<div className="perm-label">계정 상태</div>
|
<div className="perm-label">계정 상태</div>
|
||||||
@@ -144,7 +144,7 @@ export const UserAccountAuthWrap = ({
|
|||||||
menuGrants={ permissions }
|
menuGrants={ permissions }
|
||||||
></UserAccountAuthPermList>
|
></UserAccountAuthPermList>
|
||||||
|
|
||||||
<div className="apply-row bottom-padding">
|
<div className="apply-row">
|
||||||
<button
|
<button
|
||||||
className="btn-50 btn-blue flex-1"
|
className="btn-50 btn-blue flex-1"
|
||||||
type="button"
|
type="button"
|
||||||
|
|||||||
@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
|
|||||||
import { useUserModifyAuthMethodMutation } from '@/entities/user/api/use-user-modify-authmethod-mutation';
|
import { useUserModifyAuthMethodMutation } from '@/entities/user/api/use-user-modify-authmethod-mutation';
|
||||||
import { PATHS } from '@/shared/constants/paths';
|
import { PATHS } from '@/shared/constants/paths';
|
||||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||||
|
import { snackBar } from '@/shared/lib/toast';
|
||||||
|
|
||||||
export const UserLoginAuthInfoWrap = ({
|
export const UserLoginAuthInfoWrap = ({
|
||||||
mid,
|
mid,
|
||||||
@@ -25,7 +26,7 @@ export const UserLoginAuthInfoWrap = ({
|
|||||||
const { mutateAsync: userFindAuthMethod } = useUserFindAuthMethodMutation();
|
const { mutateAsync: userFindAuthMethod } = useUserFindAuthMethodMutation();
|
||||||
const { mutateAsync: userModifyAuthMethod } = useUserModifyAuthMethodMutation({
|
const { mutateAsync: userModifyAuthMethod } = useUserModifyAuthMethodMutation({
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
// snackBar('사용자 정보가 성공적으로 저장되었습니다.');
|
snackBar('사용자 정보가 성공적으로 저장되었습니다.');
|
||||||
navigate(PATHS.account.user.manage, {
|
navigate(PATHS.account.user.manage, {
|
||||||
state: {
|
state: {
|
||||||
mid: mid,
|
mid: mid,
|
||||||
@@ -33,7 +34,7 @@ export const UserLoginAuthInfoWrap = ({
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
onError: (error) => {
|
onError: (error) => {
|
||||||
// snackBar(error?.response?.data?.message || '사용자 정보 저장에 실패했습니다.');
|
snackBar(error?.response?.data?.message || '사용자 정보 저장에 실패했습니다.');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -391,7 +392,7 @@ export const UserLoginAuthInfoWrap = ({
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="ing-list pdtop">
|
<div className="ing-list pdtop">
|
||||||
<div className="settings-login-auth">
|
<div className="settings-login-auth pb-86">
|
||||||
<div className="group">
|
<div className="group">
|
||||||
<div className="group-header">
|
<div className="group-header">
|
||||||
<div className="title">이메일 주소</div>
|
<div className="title">이메일 주소</div>
|
||||||
@@ -489,7 +490,7 @@ export const UserLoginAuthInfoWrap = ({
|
|||||||
<div className="notice-bar">※ 탭을 변경하면 미저장 내용은 초기화됩니다.</div>
|
<div className="notice-bar">※ 탭을 변경하면 미저장 내용은 초기화됩니다.</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="apply-row bottom-padding">
|
<div className="apply-row">
|
||||||
<button
|
<button
|
||||||
className="btn-50 btn-blue flex-1"
|
className="btn-50 btn-blue flex-1"
|
||||||
disabled={!isSaveButtonEnabled()}
|
disabled={!isSaveButtonEnabled()}
|
||||||
|
|||||||
@@ -41,7 +41,8 @@ export const UserManageWrap = () => {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="ing-list" style={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 200px)' }}>
|
{/* <div className="ing-list" style={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 86px)' }}> */}
|
||||||
|
<div className="ing-list pb-86">
|
||||||
<div style={{ flexShrink: 0 }}>
|
<div style={{ flexShrink: 0 }}>
|
||||||
<div className="input-wrapper top-select mt-16">
|
<div className="input-wrapper top-select mt-16">
|
||||||
<select
|
<select
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ import {
|
|||||||
useSetOnBack
|
useSetOnBack
|
||||||
} from '@/widgets/sub-layout/use-sub-layout';
|
} from '@/widgets/sub-layout/use-sub-layout';
|
||||||
import { useUserChangePasswordMutation } from '@/entities/user/api/use-user-change-password-mutation';
|
import { useUserChangePasswordMutation } from '@/entities/user/api/use-user-change-password-mutation';
|
||||||
|
import { snackBar } from '@/shared/lib/toast';
|
||||||
|
|
||||||
export const PasswordModifyLoginPasswordPage = () => {
|
export const PasswordModifyLoginPasswordPage = () => {
|
||||||
const { navigate } = useNavigate();
|
const { navigate } = useNavigate();
|
||||||
@@ -19,7 +20,7 @@ export const PasswordModifyLoginPasswordPage = () => {
|
|||||||
|
|
||||||
const changePasswordMutation = useUserChangePasswordMutation({
|
const changePasswordMutation = useUserChangePasswordMutation({
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
// snackBar('비밀번호가 성공적으로 변경되었습니다.');
|
snackBar('비밀번호가 성공적으로 변경되었습니다.');
|
||||||
// Clear form
|
// Clear form
|
||||||
setCurrentPassword('');
|
setCurrentPassword('');
|
||||||
setNewPassword('');
|
setNewPassword('');
|
||||||
@@ -28,7 +29,7 @@ export const PasswordModifyLoginPasswordPage = () => {
|
|||||||
navigate(PATHS.account.password.manage);
|
navigate(PATHS.account.password.manage);
|
||||||
},
|
},
|
||||||
onError: (error) => {
|
onError: (error) => {
|
||||||
// snackBar(error?.response?.data?.message || '비밀번호 변경에 실패했습니다.');
|
snackBar(error?.response?.data?.message || '비밀번호 변경에 실패했습니다.');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ import { VerificationItem } from '@/entities/account/model/types';
|
|||||||
import { useUserCreateMutation } from '@/entities/user/api/use-user-create-mutation';
|
import { useUserCreateMutation } from '@/entities/user/api/use-user-create-mutation';
|
||||||
import { useUserExistsUseridQuery } from '@/entities/user/api/use-user-exists-userid-query';
|
import { useUserExistsUseridQuery } from '@/entities/user/api/use-user-exists-userid-query';
|
||||||
import { useLocation } from 'react-router';
|
import { useLocation } from 'react-router';
|
||||||
|
import { snackBar } from '@/shared/lib/toast';
|
||||||
|
|
||||||
export const UserAddAccountPage = () => {
|
export const UserAddAccountPage = () => {
|
||||||
const { navigate } = useNavigate();
|
const { navigate } = useNavigate();
|
||||||
@@ -20,10 +21,10 @@ export const UserAddAccountPage = () => {
|
|||||||
|
|
||||||
const { mutateAsync: userCreate, isPending } = useUserCreateMutation({
|
const { mutateAsync: userCreate, isPending } = useUserCreateMutation({
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
// snackBar('사용자가 성공적으로 추가되었습니다.');
|
snackBar('사용자가 성공적으로 추가되었습니다.');
|
||||||
},
|
},
|
||||||
onError: (error) => {
|
onError: (error) => {
|
||||||
// snackBar(error?.response?.data?.message || '사용자 추가에 실패했습니다.');
|
snackBar(error?.response?.data?.message || '사용자 추가에 실패했습니다.');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -381,7 +382,7 @@ export const UserAddAccountPage = () => {
|
|||||||
|
|
||||||
if (response.status) {
|
if (response.status) {
|
||||||
// 성공 시 사용자 관리 페이지로 이동
|
// 성공 시 사용자 관리 페이지로 이동
|
||||||
// snackBar('사용자가 성공적으로 추가되었습니다.');
|
snackBar('사용자가 성공적으로 추가되었습니다.');
|
||||||
navigate(PATHS.account.user.manage);
|
navigate(PATHS.account.user.manage);
|
||||||
} else if (response.error) {
|
} else if (response.error) {
|
||||||
// 에러 처리
|
// 에러 처리
|
||||||
@@ -409,7 +410,7 @@ export const UserAddAccountPage = () => {
|
|||||||
<main>
|
<main>
|
||||||
<div className="tab-content">
|
<div className="tab-content">
|
||||||
<div className="tab-pane sub active">
|
<div className="tab-pane sub active">
|
||||||
<div className="ing-list add">
|
<div className="ing-list pb-86">
|
||||||
<div className="user-add">
|
<div className="user-add">
|
||||||
<div className="ua-row">
|
<div className="ua-row">
|
||||||
<div className="ua-label">사용자ID <span className="red">*</span></div>
|
<div className="ua-label">사용자ID <span className="red">*</span></div>
|
||||||
@@ -537,7 +538,7 @@ export const UserAddAccountPage = () => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="apply-row bottom-padding">
|
<div className="apply-row">
|
||||||
<button
|
<button
|
||||||
className="btn-50 btn-blue flex-1"
|
className="btn-50 btn-blue flex-1"
|
||||||
type="button"
|
type="button"
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ import { useLocation } from 'react-router';
|
|||||||
import { useUserMenuPermissionsSaveMutation } from '@/entities/user/api/use-user-menu-permission-save-mutation';
|
import { useUserMenuPermissionsSaveMutation } from '@/entities/user/api/use-user-menu-permission-save-mutation';
|
||||||
// import { useUserMenuPermissionsMutation } from '@/entities/user/api/use-user-menu-permission-mutation';
|
// import { useUserMenuPermissionsMutation } from '@/entities/user/api/use-user-menu-permission-mutation';
|
||||||
import { UserMenuPermissionData } from '@/entities/user/model/types';
|
import { UserMenuPermissionData } from '@/entities/user/model/types';
|
||||||
//import { snackBar } from '@/shared/lib/toast';
|
import { snackBar } from '@/shared/lib/toast';
|
||||||
|
|
||||||
// 권한 비트 플래그 (실제 API 데이터 기준)
|
// 권한 비트 플래그 (실제 API 데이터 기준)
|
||||||
const PERMISSION = {
|
const PERMISSION = {
|
||||||
@@ -35,7 +35,7 @@ export const UserMenuAuthPage = () => {
|
|||||||
const [isInitialLoad, setIsInitialLoad] = useState(true);
|
const [isInitialLoad, setIsInitialLoad] = useState(true);
|
||||||
const savePermissionsMutation = useUserMenuPermissionsSaveMutation({
|
const savePermissionsMutation = useUserMenuPermissionsSaveMutation({
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
//snackBar('권한이 성공적으로 저장되었습니다.');
|
snackBar('권한이 성공적으로 저장되었습니다.');
|
||||||
navigate(PATHS.account.user.accountAuth, {
|
navigate(PATHS.account.user.accountAuth, {
|
||||||
state: {
|
state: {
|
||||||
mid,
|
mid,
|
||||||
@@ -46,7 +46,7 @@ export const UserMenuAuthPage = () => {
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
onError: (error) => {
|
onError: (error) => {
|
||||||
// snackBar(error?.response?.data?.message || '권한 저장에 실패했습니다.');
|
snackBar(error?.response?.data?.message || '권한 저장에 실패했습니다.');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -181,7 +181,7 @@ export const UserMenuAuthPage = () => {
|
|||||||
{ mid, namsUserMenuAccess },
|
{ mid, namsUserMenuAccess },
|
||||||
{
|
{
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
alert('권한이 저장되었습니다.');
|
snackBar('권한이 저장되었습니다.');
|
||||||
// 저장 성공 후 초기값 업데이트
|
// 저장 성공 후 초기값 업데이트
|
||||||
setInitialPermissions({...permissions});
|
setInitialPermissions({...permissions});
|
||||||
setHasChanges(false);
|
setHasChanges(false);
|
||||||
@@ -199,7 +199,7 @@ export const UserMenuAuthPage = () => {
|
|||||||
<main>
|
<main>
|
||||||
<div className="tab-content">
|
<div className="tab-content">
|
||||||
<div className="tab-pane pt-46 active">
|
<div className="tab-pane pt-46 active">
|
||||||
<div className="ing-list sev">
|
<div className="ing-list pb-86">
|
||||||
<div className="desc service-tip">메뉴별 사용 권한을 설정해 주세요.</div>
|
<div className="desc service-tip">메뉴별 사용 권한을 설정해 주세요.</div>
|
||||||
<div className="desc service-tip">선택한 권한에 따라 기능 이용이 제한됩니다.</div>
|
<div className="desc service-tip">선택한 권한에 따라 기능 이용이 제한됩니다.</div>
|
||||||
|
|
||||||
@@ -281,8 +281,9 @@ export const UserMenuAuthPage = () => {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
})}
|
})}
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="apply-row">
|
<div className="apply-row">
|
||||||
<button
|
<button
|
||||||
className="btn-50 btn-blue flex-1"
|
className="btn-50 btn-blue flex-1"
|
||||||
type="button"
|
type="button"
|
||||||
@@ -292,7 +293,6 @@ export const UserMenuAuthPage = () => {
|
|||||||
{savePermissionsMutation.isPending ? '저장 중...' : '저장'}
|
{savePermissionsMutation.isPending ? '저장 중...' : '저장'}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@@ -151,6 +151,12 @@ export const SubLayout = () => {
|
|||||||
id: 'nictest00',
|
id: 'nictest00',
|
||||||
password: 'nictest00'
|
password: 'nictest00'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// userParmas = {
|
||||||
|
// id: 'medi9332',
|
||||||
|
// password: 'medi9332'
|
||||||
|
// };
|
||||||
|
|
||||||
}
|
}
|
||||||
callLogin(userParmas).then(() => {
|
callLogin(userParmas).then(() => {
|
||||||
callHomeGroups();
|
callHomeGroups();
|
||||||
|
|||||||
Reference in New Issue
Block a user