계정 관리 사용자 목록에 상태(사용/미사용) 표시 및 다국어 지원 추가

- 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:
Jay Sheen
2025-11-21 16:22:12 +09:00
parent c370aeba41
commit 622515485c

View File

@@ -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>