narang-ai
79135f24b0
- Backend: NestJS + Prisma 7 (MariaDB adapter) scaffold - PrismaService with @prisma/adapter-mariadb driver - SistersService: SSH 상태 체크 with graceful fallback - HealthController: GET /health - 시드 스크립트: 자매 4명 초기 데이터 - 테스트 5/5 pass - Frontend: Next.js 16 + styled-components - styled-components SSR registry (next.config 컴파일러) - 다크 테마 글로벌 스타일 + 테마 토큰 - SisterCard: glassmorphism 상태 카드 (온라인 pulse 애니메이션) - StatusBadge: 상태 표시 컴포넌트 - Sidebar: 접이식 네비게이션 - 대시보드 메인 페이지 (API 미연결 시 mock 데이터 fallback) - build 성공 확인 - DB credential 이랑이 대기 중
62 lines
1.3 KiB
TypeScript
62 lines
1.3 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import styled from 'styled-components';
|
|
|
|
type Status = 'online' | 'offline' | 'working' | 'unknown';
|
|
|
|
interface StatusBadgeProps {
|
|
status: Status;
|
|
}
|
|
|
|
const statusLabels: Record<Status, string> = {
|
|
online: '온라인',
|
|
offline: '오프라인',
|
|
working: '작업중',
|
|
unknown: '알 수 없음',
|
|
};
|
|
|
|
const statusColors: Record<Status, string> = {
|
|
online: '#00E676',
|
|
offline: '#FF1744',
|
|
working: '#2979FF',
|
|
unknown: '#8B949E',
|
|
};
|
|
|
|
const BadgeWrapper = styled.span<{ $status: Status }>`
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: ${({ $status }) => statusColors[$status]};
|
|
`;
|
|
|
|
const Dot = styled.span<{ $status: Status }>`
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
background-color: ${({ $status }) => statusColors[$status]};
|
|
flex-shrink: 0;
|
|
${({ $status }) =>
|
|
$status === 'online' &&
|
|
`
|
|
box-shadow: 0 0 6px #00E676;
|
|
animation: pulse 2s infinite;
|
|
`}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
`;
|
|
|
|
export default function StatusBadge({ status }: StatusBadgeProps) {
|
|
return (
|
|
<BadgeWrapper $status={status}>
|
|
<Dot $status={status} />
|
|
{statusLabels[status]}
|
|
</BadgeWrapper>
|
|
);
|
|
}
|