계정 관리 사용자 목록에 상태(사용/미사용) 표시 및 다국어 지원 추가
- status prop에 따라 사용(NORMAL)/미사용(SUSPENDED) 배지 표시 - tag-pill 클래스를 활용한 파란색/빨간색 상태 구분 디자인 적용 - react-i18next를 통한 다국어 지원 (한국어: 사용/미사용, English: Active/Inactive) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { UserManageAuthItemProps } from '../model/types';
|
||||
|
||||
export const UserManageAuthItem = ({
|
||||
@@ -9,6 +10,7 @@ export const UserManageAuthItem = ({
|
||||
status,
|
||||
}: UserManageAuthItemProps) => {
|
||||
const { navigate } = useNavigate();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const handleClick = () => {
|
||||
navigate(PATHS.account.user.loginAuthInfo, {
|
||||
@@ -16,9 +18,14 @@ export const UserManageAuthItem = ({
|
||||
});
|
||||
};
|
||||
|
||||
const isActive = status === 'NORMAL';
|
||||
|
||||
return (
|
||||
<div className="auth-item" onClick={handleClick}>
|
||||
<div className="auth-item-left">
|
||||
<span className={`tag-pill ${!isActive ? 'red' : ''}`}>
|
||||
{isActive ? t('account.active') : t('account.inactive')}
|
||||
</span>
|
||||
<span className="auth-name">{usrid}</span>
|
||||
</div>
|
||||
<span className="ic20 arrow-right"></span>
|
||||
|
||||
Reference in New Issue
Block a user