계정 관리 사용자 목록에 상태(사용/미사용) 표시 및 다국어 지원 추가
- 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 { PATHS } from '@/shared/constants/paths';
|
||||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
import { UserManageAuthItemProps } from '../model/types';
|
import { UserManageAuthItemProps } from '../model/types';
|
||||||
|
|
||||||
export const UserManageAuthItem = ({
|
export const UserManageAuthItem = ({
|
||||||
@@ -9,6 +10,7 @@ export const UserManageAuthItem = ({
|
|||||||
status,
|
status,
|
||||||
}: UserManageAuthItemProps) => {
|
}: UserManageAuthItemProps) => {
|
||||||
const { navigate } = useNavigate();
|
const { navigate } = useNavigate();
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
const handleClick = () => {
|
const handleClick = () => {
|
||||||
navigate(PATHS.account.user.loginAuthInfo, {
|
navigate(PATHS.account.user.loginAuthInfo, {
|
||||||
@@ -16,9 +18,14 @@ export const UserManageAuthItem = ({
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const isActive = status === 'NORMAL';
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="auth-item" onClick={handleClick}>
|
<div className="auth-item" onClick={handleClick}>
|
||||||
<div className="auth-item-left">
|
<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>
|
<span className="auth-name">{usrid}</span>
|
||||||
</div>
|
</div>
|
||||||
<span className="ic20 arrow-right"></span>
|
<span className="ic20 arrow-right"></span>
|
||||||
|
|||||||
Reference in New Issue
Block a user