나랑이
ad0b489633
TASK-052: 프로젝트 목록 3구역 구조로 재배치 (avatar/name-desc | progress+sprint counts | status+updated) TASK-053: 프로젝트 대표 avatar를 자매 프로필 사진으로 교체 (ownerSister 기반) TASK-054: 자매 상세 탭에 세션/활동/하네스/로그 통합 TASK-055: 메인 대시보드에 실데이터 막대 그래프 2종 추가 (sister load, project progress) TASK-056: 관리자 상단 탭에서 하네스 제거 (자매 상세로 이동) 테스트 23/23 pass, FE 16 routes build 성공
64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import React from 'react';
|
|
import styled from 'styled-components';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
|
|
const ADMIN_TABS = [
|
|
{ href: '/admin', label: '자매 관리' },
|
|
{ href: '/admin/logs', label: '로그 뷰어' },
|
|
{ href: '/admin/costs', label: '비용 모니터' },
|
|
{ href: '/admin/repos', label: '저장소' },
|
|
];
|
|
|
|
const Wrapper = styled.div`
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-lg);
|
|
`;
|
|
|
|
const AdminHeader = styled.div`
|
|
border-bottom: 1px solid var(--border-color);
|
|
padding-bottom: var(--space-md);
|
|
`;
|
|
|
|
const TabNav = styled.div`
|
|
display: flex;
|
|
gap: var(--space-lg);
|
|
flex-wrap: wrap;
|
|
`;
|
|
|
|
const TabLink = styled(Link)<{ $active: boolean }>`
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: ${({ $active }) => $active ? 'var(--text-primary)' : 'var(--text-secondary)'};
|
|
text-decoration: none;
|
|
padding: var(--space-sm) 0;
|
|
border-bottom: 1px solid ${({ $active }) => $active ? 'var(--text-primary)' : 'transparent'};
|
|
transition: color 0.15s, border-color 0.15s;
|
|
&:hover { color: var(--text-primary); }
|
|
`;
|
|
|
|
export default function AdminLayout({ children }: { children: React.ReactNode }) {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<Wrapper>
|
|
<AdminHeader>
|
|
<div style={{ fontSize: '28px', fontWeight: 600, letterSpacing: '-0.02em', marginBottom: 'var(--space-md)' }}>
|
|
관리자
|
|
</div>
|
|
<TabNav>
|
|
{ADMIN_TABS.map((tab) => (
|
|
<TabLink key={tab.href} href={tab.href} $active={pathname === tab.href}>
|
|
{tab.label}
|
|
</TabLink>
|
|
))}
|
|
</TabNav>
|
|
</AdminHeader>
|
|
{children}
|
|
</Wrapper>
|
|
);
|
|
}
|