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 이랑이 대기 중
157 lines
3.2 KiB
TypeScript
157 lines
3.2 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import styled from 'styled-components';
|
|
import StatusBadge from '../common/StatusBadge';
|
|
|
|
type Status = 'online' | 'offline' | 'working' | 'unknown';
|
|
|
|
interface SisterCardProps {
|
|
name: string;
|
|
role: string;
|
|
status: Status;
|
|
lastSeen: string | null;
|
|
currentTask: string | null;
|
|
ip: string;
|
|
}
|
|
|
|
const statusBorderColors: Record<Status, string> = {
|
|
online: '#00E676',
|
|
offline: '#FF1744',
|
|
working: '#2979FF',
|
|
unknown: '#8B949E',
|
|
};
|
|
|
|
const sisterEmojis: Record<string, string> = {
|
|
harang: '🦊',
|
|
narang: '🦊',
|
|
darang: '🐱',
|
|
erang: '🐺',
|
|
};
|
|
|
|
const sisterDisplayNames: Record<string, string> = {
|
|
harang: '하랑이',
|
|
narang: '나랑이',
|
|
darang: '다랑이',
|
|
erang: '이랑이',
|
|
};
|
|
|
|
const Card = styled.div<{ $status: Status }>`
|
|
background: rgba(22, 27, 34, 0.8);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border: 1px solid rgba(240, 246, 252, 0.1);
|
|
border-left: 3px solid ${({ $status }) => statusBorderColors[$status]};
|
|
border-radius: 12px;
|
|
padding: 20px;
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
cursor: default;
|
|
flex: 1;
|
|
min-width: 0;
|
|
|
|
&:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
|
}
|
|
`;
|
|
|
|
const CardHeader = styled.div`
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 12px;
|
|
`;
|
|
|
|
const Emoji = styled.span`
|
|
font-size: 24px;
|
|
line-height: 1;
|
|
`;
|
|
|
|
const NameBlock = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
`;
|
|
|
|
const Name = styled.span`
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: #E6EDF3;
|
|
`;
|
|
|
|
const Role = styled.span`
|
|
font-size: 12px;
|
|
color: #8B949E;
|
|
`;
|
|
|
|
const StatusRow = styled.div`
|
|
margin-bottom: 10px;
|
|
`;
|
|
|
|
const MetaRow = styled.div`
|
|
font-size: 12px;
|
|
color: #8B949E;
|
|
margin-top: 6px;
|
|
`;
|
|
|
|
const CurrentTask = styled.div`
|
|
font-size: 12px;
|
|
color: #58A6FF;
|
|
margin-top: 8px;
|
|
padding: 6px 10px;
|
|
background: rgba(88, 166, 255, 0.08);
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
`;
|
|
|
|
const IpBadge = styled.span`
|
|
font-size: 11px;
|
|
color: rgba(139, 148, 158, 0.6);
|
|
font-family: monospace;
|
|
`;
|
|
|
|
function formatLastSeen(lastSeen: string | null): string {
|
|
if (!lastSeen) return '기록 없음';
|
|
const date = new Date(lastSeen);
|
|
const diff = Date.now() - date.getTime();
|
|
const min = Math.floor(diff / 60000);
|
|
if (min < 1) return '방금 전';
|
|
if (min < 60) return `${min}분 전`;
|
|
const hr = Math.floor(min / 60);
|
|
if (hr < 24) return `${hr}시간 전`;
|
|
return `${Math.floor(hr / 24)}일 전`;
|
|
}
|
|
|
|
export default function SisterCard({
|
|
name,
|
|
role,
|
|
status,
|
|
lastSeen,
|
|
currentTask,
|
|
ip,
|
|
}: SisterCardProps) {
|
|
return (
|
|
<Card $status={status}>
|
|
<CardHeader>
|
|
<Emoji>{sisterEmojis[name] ?? '🤖'}</Emoji>
|
|
<NameBlock>
|
|
<Name>{sisterDisplayNames[name] ?? name}</Name>
|
|
<Role>{role}</Role>
|
|
</NameBlock>
|
|
</CardHeader>
|
|
<StatusRow>
|
|
<StatusBadge status={status} />
|
|
</StatusRow>
|
|
<MetaRow>
|
|
마지막 활동: {formatLastSeen(lastSeen)}
|
|
</MetaRow>
|
|
<MetaRow>
|
|
<IpBadge>{ip}</IpBadge>
|
|
</MetaRow>
|
|
{currentTask && <CurrentTask>📌 {currentTask}</CurrentTask>}
|
|
</Card>
|
|
);
|
|
}
|