From 44daac67bbfc5a58a97e35b77322a9da47fbaafc Mon Sep 17 00:00:00 2001
From: GUARDiA AutoDeploy <deploy@zioinfo.co.kr>
Date: Wed, 3 Jun 2026 19:48:04 +0900
Subject: [PATCH] =?UTF-8?q?fix(org):=20=EC=A1=B0=EC=A7=81=EB=8F=84=20?=
 =?UTF-8?q?=EC=97=B0=EA=B2=B0=EC=84=A0=20=EC=88=98=EC=A0=95=20+=20AI=20Age?=
 =?UTF-8?q?nt=20=ED=91=9C=EC=8B=9C=20[auto-sync]?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/pages/Company.jsx | 200 +++++++++++++++++++++++++--------
 1 file changed, 153 insertions(+), 47 deletions(-)

diff --git a/frontend/src/pages/Company.jsx b/frontend/src/pages/Company.jsx
index 62dd097..c1575ae 100644
--- a/frontend/src/pages/Company.jsx
+++ b/frontend/src/pages/Company.jsx
@@ -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() {
   return (
     <main id="main-content" className="inner-page">
-      <SubNav title="조직도(모두 AI AGENT 입니다)" />
+      <SubNav title="조직도" />
       <section className="section">
-        <div className="container" style={{ maxWidth: '960px' }}>
+        <div className="container" style={{ maxWidth: '1000px' }}>
           <div className="section-header">
             <span className="section-label">Organization</span>
             <h2 className="section-title">조직 구성</h2>
+            <p className="section-desc">
+              🤖 표시는 <strong>AI Agent</strong>가 담당하는 팀입니다 — 24시간 자율 운영
+            </p>
           </div>
-          <div className="org-chart">
+
+          {/* ── 조직도 ── */}
+          <div style={{ textAlign: 'center', userSelect: 'none' }}>
+
             {/* 대표이사 */}
-            <div className="org-top">
-              <div className="org-box ceo">대표이사</div>
+            <div style={{ display: 'flex', justifyContent: 'center' }}>
+              <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 className="org-line-v" />
-            {/* 본부 */}
-            <div className="org-depts">
-              {[
-                {
-                  name: '개발본부', color: 'var(--primary)',
-                  teams: ['AI개발팀', '플랫폼개발팀', '프론트엔드팀']
-                },
-                {
-                  name: '기술본부', color: 'var(--accent)',
-                  teams: ['인프라팀', 'DBA팀', '보안팀']
-                },
-                {
-                  name: 'PM본부', color: '#7c3aed',
-                  teams: ['SI사업팀', 'SM운영팀', 'PMO팀']
-                },
-                {
-                  name: '경영지원본부', color: '#059669',
-                  teams: ['경영기획팀', '영업팀', '인사·총무팀']
-                },
-              ].map((dept, i) => (
-                <div key={i} className="org-dept-col">
-                  <div className="org-line-h" />
-                  <div className="org-line-v-short" />
-                  <div className="org-box dept" style={{ borderColor: dept.color, color: dept.color }}>
-                    {dept.name}
+
+            {/* CEO → 수평선 연결 수직선 */}
+            <div style={{ display: 'flex', justifyContent: 'center' }}>
+              <div style={{ width: '2px', height: '36px', background: LINE }} />
+            </div>
+
+            {/* 수평 연결선 + 각 본부 수직 드롭 */}
+            <div style={{ position: 'relative', display: 'flex', justifyContent: 'center' }}>
+              {/* 수평 연결선 (본부들을 가로지름) */}
+              <div style={{
+                position: 'absolute', top: '0', left: '12.5%', right: '12.5%',
+                height: '2px', background: LINE,
+              }} />
+
+              {/* 본부 컬럼들 */}
+              <div style={{
+                display: 'flex', justifyContent: 'center',
+                gap: '0', width: '100%',
+              }}>
+                {DEPTS.map((dept, i) => (
+                  <div key={i} style={{
+                    flex: '1', display: 'flex', flexDirection: 'column', alignItems: 'center',
+                  }}>
+                    {/* 수평선 → 본부 수직 드롭 */}
+                    <div style={{ width: '2px', height: '36px', background: LINE }} />
+
+                    {/* 본부 박스 */}
+                    <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 className="org-teams">
-                    {dept.teams.map((t, j) => (
-                      <div key={j} className="org-box team">{t}</div>
-                    ))}
-                  </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 className="grid-4" style={{ marginTop: '64px' }}>
+          <div className="grid-4" style={{ marginTop: '40px' }}>
             {[
-              { label: '전체 임직원', value: '50+', unit: '명' },
-              { label: '개발 인력', value: '70', unit: '%' },
-              { label: '평균 경력', value: '8', unit: '년+' },
-              { label: '국가 공인 자격', value: '30+', unit: '개' },
+              { label: 'AI Agent', value: '50+', unit: '개', icon: '🤖' },
+              { label: 'AI 운영 비율', value: '75', unit: '%', icon: '⚡' },
+              { label: '평균 응답시간', value: '0.3', unit: '초', icon: '🚀' },
+              { label: '운영 가용성', value: '99.9', unit: '%', icon: '🛡️' },
             ].map((s, i) => (
-              <div key={i} className="card" style={{ padding: '32px', textAlign: 'center' }}>
-                <div style={{ fontSize: '36px', fontWeight: '900', color: 'var(--primary)' }}>
-                  {s.value}<span style={{ fontSize: '18px' }}>{s.unit}</span>
+              <div key={i} className="card" style={{ padding: '28px', textAlign: 'center' }}>
+                <div style={{ fontSize: '28px', marginBottom: '6px' }}>{s.icon}</div>
+                <div style={{ fontSize: '32px', fontWeight: '900', color: 'var(--primary)' }}>
+                  {s.value}<span style={{ fontSize: '16px' }}>{s.unit}</span>
                 </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>