fix(org): 조직도 연결선 수정 + AI Agent 표시 [auto-sync]
This commit is contained in:
GUARDiA AutoDeploy
DESKTOP-TKLFCPR\ython
parent
f00bdf5943
commit
44daac67bb
@ -174,71 +174,177 @@ function History() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* ── 조직도 ── */
|
/* ── 조직도 ── */
|
||||||
|
const DEPTS = [
|
||||||
|
{
|
||||||
|
name: '개발본부', color: '#0051A2', icon: '💻',
|
||||||
|
teams: [
|
||||||
|
{ name: 'AI개발팀', ai: true },
|
||||||
|
{ name: '플랫폼개발팀', ai: true },
|
||||||
|
{ name: '프론트엔드팀', ai: true },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '기술본부', color: '#0891b2', icon: '⚙️',
|
||||||
|
teams: [
|
||||||
|
{ name: '인프라팀', ai: true },
|
||||||
|
{ name: 'DBA팀', ai: true },
|
||||||
|
{ name: '보안팀', ai: true },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'PM본부', color: '#7c3aed', icon: '📋',
|
||||||
|
teams: [
|
||||||
|
{ name: 'SI사업팀', ai: true },
|
||||||
|
{ name: 'SM운영팀', ai: true },
|
||||||
|
{ name: 'PMO팀', ai: true },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '경영지원본부', color: '#059669', icon: '🏢',
|
||||||
|
teams: [
|
||||||
|
{ name: '경영기획팀', ai: false },
|
||||||
|
{ name: '영업팀', ai: false },
|
||||||
|
{ name: '인사·총무팀',ai: false },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const LINE = '#c7d2da';
|
||||||
|
|
||||||
function Organization() {
|
function Organization() {
|
||||||
return (
|
return (
|
||||||
<main id="main-content" className="inner-page">
|
<main id="main-content" className="inner-page">
|
||||||
<SubNav title="조직도(모두 AI AGENT 입니다)" />
|
<SubNav title="조직도" />
|
||||||
<section className="section">
|
<section className="section">
|
||||||
<div className="container" style={{ maxWidth: '960px' }}>
|
<div className="container" style={{ maxWidth: '1000px' }}>
|
||||||
<div className="section-header">
|
<div className="section-header">
|
||||||
<span className="section-label">Organization</span>
|
<span className="section-label">Organization</span>
|
||||||
<h2 className="section-title">조직 구성</h2>
|
<h2 className="section-title">조직 구성</h2>
|
||||||
|
<p className="section-desc">
|
||||||
|
🤖 표시는 <strong>AI Agent</strong>가 담당하는 팀입니다 — 24시간 자율 운영
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="org-chart">
|
|
||||||
|
{/* ── 조직도 ── */}
|
||||||
|
<div style={{ textAlign: 'center', userSelect: 'none' }}>
|
||||||
|
|
||||||
{/* 대표이사 */}
|
{/* 대표이사 */}
|
||||||
<div className="org-top">
|
<div style={{ display: 'flex', justifyContent: 'center' }}>
|
||||||
<div className="org-box ceo">대표이사</div>
|
<div style={{
|
||||||
|
background: 'var(--secondary)', color: '#fff',
|
||||||
|
padding: '14px 48px', borderRadius: '10px',
|
||||||
|
fontWeight: '800', fontSize: '17px', letterSpacing: '.5px',
|
||||||
|
boxShadow: '0 4px 14px rgba(0,81,162,.25)'
|
||||||
|
}}>
|
||||||
|
👤 대표이사
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="org-line-v" />
|
|
||||||
{/* 본부 */}
|
{/* CEO → 수평선 연결 수직선 */}
|
||||||
<div className="org-depts">
|
<div style={{ display: 'flex', justifyContent: 'center' }}>
|
||||||
{[
|
<div style={{ width: '2px', height: '36px', background: LINE }} />
|
||||||
{
|
</div>
|
||||||
name: '개발본부', color: 'var(--primary)',
|
|
||||||
teams: ['AI개발팀', '플랫폼개발팀', '프론트엔드팀']
|
{/* 수평 연결선 + 각 본부 수직 드롭 */}
|
||||||
},
|
<div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
|
||||||
{
|
{/* 수평 연결선 (본부들을 가로지름) */}
|
||||||
name: '기술본부', color: 'var(--accent)',
|
<div style={{
|
||||||
teams: ['인프라팀', 'DBA팀', '보안팀']
|
position: 'absolute', top: '0', left: '12.5%', right: '12.5%',
|
||||||
},
|
height: '2px', background: LINE,
|
||||||
{
|
}} />
|
||||||
name: 'PM본부', color: '#7c3aed',
|
|
||||||
teams: ['SI사업팀', 'SM운영팀', 'PMO팀']
|
{/* 본부 컬럼들 */}
|
||||||
},
|
<div style={{
|
||||||
{
|
display: 'flex', justifyContent: 'center',
|
||||||
name: '경영지원본부', color: '#059669',
|
gap: '0', width: '100%',
|
||||||
teams: ['경영기획팀', '영업팀', '인사·총무팀']
|
}}>
|
||||||
},
|
{DEPTS.map((dept, i) => (
|
||||||
].map((dept, i) => (
|
<div key={i} style={{
|
||||||
<div key={i} className="org-dept-col">
|
flex: '1', display: 'flex', flexDirection: 'column', alignItems: 'center',
|
||||||
<div className="org-line-h" />
|
}}>
|
||||||
<div className="org-line-v-short" />
|
{/* 수평선 → 본부 수직 드롭 */}
|
||||||
<div className="org-box dept" style={{ borderColor: dept.color, color: dept.color }}>
|
<div style={{ width: '2px', height: '36px', background: LINE }} />
|
||||||
{dept.name}
|
|
||||||
|
{/* 본부 박스 */}
|
||||||
|
<div style={{
|
||||||
|
border: `2px solid ${dept.color}`, color: dept.color,
|
||||||
|
background: dept.color + '0d',
|
||||||
|
padding: '10px 16px', borderRadius: '8px',
|
||||||
|
fontWeight: '700', fontSize: '14px', whiteSpace: 'nowrap',
|
||||||
|
width: '90%', maxWidth: '160px',
|
||||||
|
}}>
|
||||||
|
{dept.icon} {dept.name}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 본부 → 팀 수직선 */}
|
||||||
|
<div style={{ width: '2px', height: '24px', background: LINE }} />
|
||||||
|
|
||||||
|
{/* 팀 목록 — 세로 연결선 포함 */}
|
||||||
|
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '0', width: '100%' }}>
|
||||||
|
{dept.teams.map((team, j) => (
|
||||||
|
<div key={j} style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
|
||||||
|
{j > 0 && <div style={{ width: '2px', height: '10px', background: LINE }} />}
|
||||||
|
<div style={{
|
||||||
|
background: team.ai ? '#eff6ff' : '#f8fafc',
|
||||||
|
border: `1.5px solid ${team.ai ? '#bfdbfe' : '#e2e8f0'}`,
|
||||||
|
color: team.ai ? '#1d4ed8' : '#475569',
|
||||||
|
padding: '7px 12px', borderRadius: '6px',
|
||||||
|
fontSize: '13px', fontWeight: '600', whiteSpace: 'nowrap',
|
||||||
|
display: 'flex', alignItems: 'center', gap: '5px',
|
||||||
|
minWidth: '110px', justifyContent: 'center',
|
||||||
|
}}>
|
||||||
|
{team.ai ? '🤖' : '👤'} {team.name}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="org-teams">
|
))}
|
||||||
{dept.teams.map((t, j) => (
|
</div>
|
||||||
<div key={j} className="org-box team">{t}</div>
|
</div>
|
||||||
))}
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
{/* AI Agent 범례 */}
|
||||||
))}
|
<div style={{
|
||||||
|
marginTop: '48px', padding: '20px 28px',
|
||||||
|
background: '#eff6ff', borderRadius: '12px',
|
||||||
|
border: '1px solid #bfdbfe',
|
||||||
|
display: 'flex', gap: '32px', flexWrap: 'wrap', justifyContent: 'center',
|
||||||
|
}}>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||||
|
<span style={{ fontSize: '20px' }}>🤖</span>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontWeight: '700', fontSize: '14px', color: '#1d4ed8' }}>AI Agent 팀</div>
|
||||||
|
<div style={{ fontSize: '12px', color: '#3b82f6' }}>Ollama 온프레미스 · 24시간 자율 운영</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
|
||||||
|
<span style={{ fontSize: '20px' }}>👤</span>
|
||||||
|
<div>
|
||||||
|
<div style={{ fontWeight: '700', fontSize: '14px', color: '#475569' }}>인간 담당 팀</div>
|
||||||
|
<div style={{ fontSize: '12px', color: '#94a3b8' }}>전략 결정 · 최종 승인</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style={{ display: 'flex', alignItems: 'center', gap: '8px', paddingLeft: '16px', borderLeft: '1px solid #bfdbfe' }}>
|
||||||
|
<span style={{ fontSize: '22px', fontWeight: '900', color: '#1d4ed8' }}>75%</span>
|
||||||
|
<div style={{ fontSize: '13px', color: '#3b82f6', fontWeight: '600' }}>AI Agent 운영 비율</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* 인원 현황 */}
|
{/* 인원 현황 */}
|
||||||
<div className="grid-4" style={{ marginTop: '64px' }}>
|
<div className="grid-4" style={{ marginTop: '40px' }}>
|
||||||
{[
|
{[
|
||||||
{ label: '전체 임직원', value: '50+', unit: '명' },
|
{ label: 'AI Agent', value: '50+', unit: '개', icon: '🤖' },
|
||||||
{ label: '개발 인력', value: '70', unit: '%' },
|
{ label: 'AI 운영 비율', value: '75', unit: '%', icon: '⚡' },
|
||||||
{ label: '평균 경력', value: '8', unit: '년+' },
|
{ label: '평균 응답시간', value: '0.3', unit: '초', icon: '🚀' },
|
||||||
{ label: '국가 공인 자격', value: '30+', unit: '개' },
|
{ label: '운영 가용성', value: '99.9', unit: '%', icon: '🛡️' },
|
||||||
].map((s, i) => (
|
].map((s, i) => (
|
||||||
<div key={i} className="card" style={{ padding: '32px', textAlign: 'center' }}>
|
<div key={i} className="card" style={{ padding: '28px', textAlign: 'center' }}>
|
||||||
<div style={{ fontSize: '36px', fontWeight: '900', color: 'var(--primary)' }}>
|
<div style={{ fontSize: '28px', marginBottom: '6px' }}>{s.icon}</div>
|
||||||
{s.value}<span style={{ fontSize: '18px' }}>{s.unit}</span>
|
<div style={{ fontSize: '32px', fontWeight: '900', color: 'var(--primary)' }}>
|
||||||
|
{s.value}<span style={{ fontSize: '16px' }}>{s.unit}</span>
|
||||||
</div>
|
</div>
|
||||||
<p style={{ marginTop: '8px', color: 'var(--gray-600)', fontSize: '14px' }}>{s.label}</p>
|
<p style={{ marginTop: '6px', color: 'var(--gray-600)', fontSize: '13px' }}>{s.label}</p>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user