fix(homepage): white screen fix + login message + vibe coding manual

- useMemberAuth: return null to loading spinner
- MemberOnly: add login/register message
- manual/40: vibe coding guide (closed/open network)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

manual/40_바이브코딩_운영가이드.md

@@ -0,0 +1,180 @@
+# GUARDiA 바이브 코딩(Vibe Coding) 운영 가이드
+
+> 최종 업데이트: 2026-05-31
+
+---
+
+## 1. 개요
+
+**바이브 코딩(VibeSession)**은 GUARDiA ITSM의 AI 보조 개발 세션 기능입니다.  
+메신저 명령 한 줄로 SR(서비스 요청)에 연결된 코딩 세션을 시작하고, 빌드·배포까지 자동화합니다.
+
+---
+
+## 2. 폐쇄망 환경에서의 바이브 코딩
+
+### 2-1. 폐쇄망 환경 정의
+
+| 항목 | 설명 |
+|------|------|
+| 정의 | 인터넷 차단, 내부망 전용 운영 환경 |
+| 해당 고객 | 공공기관, 금융, 국방 등 보안 규정 적용 기관 |
+| LLM | Ollama 로컬 모델 (llama3:8b, codellama:7b) |
+| 소스 저장소 | 내부 Gitea (Git 호환 오픈소스) |
+| CI/CD | 내부 Jenkins |
+
+### 2-2. 폐쇄망 바이브 코딩 흐름
+
+```
+[메신저 채널]
+  ↓  !vibe SR-20260531-XXXX
+[GUARDiA ITSM - 내부망]
+  ↓  SR 조회 → VibeSession 생성
+  ↓  워크스페이스 생성: /opt/guardia/workspaces/{session_id}/
+  ↓  내부 Gitea에서 소스 클론 (git clone http://gitea.내부망/...)
+[AI 코딩 보조 - Ollama 로컬]
+  ↓  codellama:7b 코드 분석 (외부 API 불필요)
+  ↓  변경 파일 목록 생성
+  ↓  !build {session_id}
+[Jenkins CI - 내부망]
+  ↓  빌드 실행 (Maven/Gradle/npm)
+  ↓  테스트 실행
+  ↓  !deploy {session_id}
+[SSH 배포 - paramiko]
+  ↓  대상 서버에 SSH 접속 (에이전트리스)
+  ↓  백업 → 배포 → 헬스체크 → 롤백(실패 시)
+[메신저 채널]
+  ← 배포 성공/실패 알림
+```
+
+### 2-3. 폐쇄망 전제 조건
+
+| 항목 | 설치 위치 | 확인 명령 |
+|------|----------|---------|
+| Ollama | GUARDiA 서버 로컬 | `curl http://localhost:11434/api/tags` |
+| codellama:7b | Ollama 모델 | `ollama list` |
+| Gitea | 내부 서버 (3000번 포트) | `curl http://내부IP:3000` |
+| Jenkins | 내부 서버 (8080번 포트) | `curl http://내부IP:8080` |
+| SSH opsagent | 각 대상 서버 계정 | `ssh opsagent@대상IP` |
+
+### 2-4. 폐쇄망 설정 (ITSM .env)
+
+```bash
+# 폐쇄망 환경 필수 설정
+OLLAMA_BASE_URL=http://127.0.0.1:11434   # 로컬 Ollama
+GITEA_URL=http://내부Gitea서버:3000       # 내부 Git 서버
+JENKINS_URL=http://내부Jenkins서버:8080   # 내부 CI/CD
+JENKINS_USER=admin
+JENKINS_TOKEN=<Jenkins API Token>
+EXTERNAL_API_ALLOWED=false               # 외부 API 차단
+```
+
+---
+
+## 3. 개방망 환경에서의 바이브 코딩
+
+### 3-1. 개방망 환경 정의
+
+| 항목 | 설명 |
+|------|------|
+| 정의 | 인터넷 접근 가능, 클라우드 연동 허용 환경 |
+| 해당 고객 | 민간 기업, SaaS 서비스, 개발 환경 |
+| LLM | Ollama 로컬 (온프레미스 원칙) 또는 대체 모델 |
+| 소스 저장소 | GitHub, GitLab, 내부 Gitea 선택 |
+| CI/CD | Jenkins, GitHub Actions, GitLab CI 선택 |
+
+### 3-2. 개방망 바이브 코딩 흐름
+
+```
+[메신저 채널]
+  ↓  !vibe SR-20260531-XXXX
+[GUARDiA ITSM - 개방망 포트]
+  ↓  SR 조회 → VibeSession 생성
+  ↓  워크스페이스 생성
+  ↓  GitHub/GitLab에서 소스 클론 (HTTPS)
+[AI 코딩 보조 - Ollama 로컬 (원칙)]
+  ↓  코드 분석 + 수정 제안
+[CI/CD - GitHub Actions / Jenkins]
+  ↓  빌드 → 테스트 → 배포
+[외부 알림]
+  ← Slack/카카오워크/Teams로 결과 전송
+```
+
+### 3-3. 개방망 설정 (ITSM .env)
+
+```bash
+# 개방망 환경 설정 (GUARDiA OpenNet 사용)
+GUARDIA_OPENNET=true
+OPENNET_API_KEY=goa-xxxx                # API 키 (헤더 X-API-Key)
+OPENNET_BASE_URL=https://zioinfo.co.kr  # GUARDiA 개방망 주소
+GITEA_URL=https://github.com            # 또는 내부 Gitea
+EXTERNAL_API_ALLOWED=false             # 외부 LLM API는 여전히 차단
+```
+
+### 3-4. 개방망 vs 폐쇄망 차이점
+
+| 항목 | 폐쇄망 | 개방망 |
+|------|--------|--------|
+| LLM | localhost:11434 (Ollama 필수) | localhost:11434 (Ollama 권장) |
+| Git 서버 | 내부 Gitea 전용 | GitHub/GitLab/Gitea 모두 가능 |
+| CI/CD | 내부 Jenkins 전용 | Jenkins, GitHub Actions 가능 |
+| 메신저 | 내부 메신저 또는 GUARDiA Messenger | 카카오워크, Slack, Teams 연동 가능 |
+| 배포 대상 | 내부 서버만 | 내부 + 클라우드(AWS/NCloud) 가능 |
+| 외부 API | 완전 차단 | 내부 LLM만 허용 (외부 LLM 불가) |
+
+---
+
+## 4. 바이브 코딩 메신저 명령어
+
+```
+!vibe <SR-ID> [project_id]    → 바이브 세션 시작
+!build <session_id>            → 빌드 실행
+!deploy <session_id>           → 배포 실행
+!status <SR-ID>                → 세션 상태 조회
+!cancel <session_id>           → 세션 취소
+/rollback <session_id>         → 긴급 롤백
+```
+
+### 4-1. 세션 상태 흐름
+
+```
+CREATED → CODING → BUILT → DEPLOYED
+                 ↘ FAILED (빌드 실패 → 자동 롤백 없음)
+                           ↘ FAILED_ROLLBACK (배포 실패 → 자동 롤백)
+```
+
+---
+
+## 5. 워크스페이스 구조
+
+```
+/opt/guardia/workspaces/{session_id}/
+├── source/          # Git 클론된 소스
+├── build/           # 빌드 결과물
+├── backup/          # 배포 전 백업 (롤백용)
+└── logs/            # 세션 로그
+```
+
+---
+
+## 6. 보안 원칙
+
+| 원칙 | 설명 |
+|------|------|
+| 에이전트리스 | 대상 서버에 어떤 소프트웨어도 설치 안 함 |
+| 최소 권한 | opsagent 계정 사용, root SSH 금지 |
+| 자격증명 암호화 | AES-256-GCM, API 응답에 노출 절대 금지 |
+| 외부 API 차단 | 폐쇄망/개방망 모두 외부 LLM API 사용 금지 |
+| 감사 추적 | 모든 명령·배포는 tb_audit_log에 기록 |
+
+---
+
+## 7. 자주 발생하는 오류와 해결 방법
+
+| 오류 | 원인 | 해결 |
+|------|------|------|
+| `Ollama 연결 실패` | Ollama 미설치 또는 중단 | `systemctl restart ollama` |
+| `Git 클론 실패 (폐쇄망)` | Gitea URL 설정 오류 | `.env`의 `GITEA_URL` 확인 |
+| `SSH 접속 거부` | opsagent 계정 미생성 또는 키 문제 | 대상 서버에서 `useradd opsagent` |
+| `빌드 실패` | 의존성 문제 | 빌드 로그 확인: `!status <session_id>` |
+| `배포 후 헬스체크 실패` | 서비스 기동 지연 | 자동 롤백 → 수동 확인 필요 |

workspace/zioinfo-web/frontend/src/hooks/useMemberAuth.jsx

@@ -58,21 +58,41 @@ export function MemberOnly({ children, feature = '이 기능' }) {
   const { isLoggedIn, loaded } = useMemberAuth();
   const navigate = useNavigate();
 
-  if (!loaded) return null;
+  if (!loaded) {
+    return (
+      <div style={{ minHeight: 200, display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#94a3b8' }}>
+        <span>로딩 중...</span>
+      </div>
+    );
+  }
 
   if (!isLoggedIn) {
     return (
-      <div className="member-guard" style={{ position:'relative', minHeight:120 }}>
+      <div style={{
-        {children}
+        minHeight: 260, display: 'flex', flexDirection: 'column',
-        <div className="member-guard-overlay">
+        alignItems: 'center', justifyContent: 'center', padding: '40px 24px',
-          <div className="member-guard-icon">🔒</div>
+        background: '#f8fafc', borderRadius: 12, border: '1px solid #e2e8f0',
-          <div className="member-guard-text">{feature}은 회원 전용입니다</div>
+        margin: '20px 0', textAlign: 'center', gap: 12,
-          <div className="member-guard-sub">로그인 후 이용하실 수 있습니다</div>
+      }}>
+        <div style={{ fontSize: 40 }}>🔒</div>
+        <div style={{ fontSize: 16, fontWeight: 700, color: '#1e293b' }}>
+          로그인 또는 회원가입을 하셔야 사용할 수 있는 기능입니다.
+        </div>
+        <div style={{ fontSize: 14, color: '#64748b' }}>
+          {feature} 서비스는 회원 전용입니다.
+        </div>
+        <div style={{ display: 'flex', gap: 10, marginTop: 8 }}>
           <button
             onClick={() => navigate('/login')}
-            style={{ marginTop:8, padding:'8px 24px', background:'#1a5fd8', color:'#fff',
+            style={{ padding: '10px 28px', background: '#1a5fd8', color: '#fff',
-                     border:'none', borderRadius:8, cursor:'pointer', fontWeight:600, fontSize:14 }}>
+                     border: 'none', borderRadius: 8, cursor: 'pointer', fontWeight: 700, fontSize: 14 }}>
-            로그인 / 회원가입
+            로그인
+          </button>
+          <button
+            onClick={() => navigate('/login?tab=register')}
+            style={{ padding: '10px 28px', background: '#fff', color: '#1a5fd8',
+                     border: '2px solid #1a5fd8', borderRadius: 8, cursor: 'pointer', fontWeight: 700, fontSize: 14 }}>
+            회원가입
           </button>
         </div>
       </div>