git_workflow.html•10.9 kB
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자연어 Git Workflow - MCP GitHub</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 900px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
h1 {
color: #2c3e50;
text-align: center;
margin-bottom: 30px;
}
.input-section {
margin-bottom: 25px;
padding: 20px;
border: 2px solid #3498db;
border-radius: 8px;
background-color: #f8f9fa;
}
.input-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #2c3e50;
}
input[type="text"], textarea {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 16px;
box-sizing: border-box;
}
textarea {
height: 80px;
resize: vertical;
}
.execute-btn {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 15px 30px;
border-radius: 8px;
font-size: 18px;
font-weight: 600;
cursor: pointer;
width: 100%;
transition: all 0.3s ease;
}
.execute-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.execute-btn:disabled {
background: #ccc;
cursor: not-allowed;
transform: none;
}
.result-section {
margin-top: 25px;
padding: 20px;
border: 1px solid #e0e0e0;
border-radius: 8px;
background-color: #f8f9fa;
}
.result-content {
background: #2c3e50;
color: #ecf0f1;
padding: 15px;
border-radius: 6px;
font-family: 'Courier New', monospace;
white-space: pre-wrap;
max-height: 400px;
overflow-y: auto;
}
.status {
padding: 10px;
border-radius: 6px;
margin-bottom: 15px;
font-weight: 600;
}
.status.success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.status.error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
.status.info { background-color: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
.examples {
margin-top: 20px;
padding: 15px;
background-color: #e8f4f8;
border-radius: 6px;
border-left: 4px solid #3498db;
}
.examples h4 {
margin-top: 0;
color: #2c3e50;
}
.example-item {
margin: 8px 0;
padding: 8px;
background: white;
border-radius: 4px;
border: 1px solid #ddd;
cursor: pointer;
transition: background-color 0.2s;
}
.example-item:hover {
background-color: #f0f0f0;
}
.loading {
display: none;
text-align: center;
padding: 20px;
}
.spinner {
border: 4px solid #f3f3f3;
border-top: 4px solid #3498db;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 0 auto 15px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
<h1>🚀 자연어 Git Workflow - MCP GitHub</h1>
<div class="input-section">
<div class="input-group">
<label for="query">💬 Git 작업을 자연어로 입력하세요:</label>
<textarea id="query" placeholder="예: 현재 저장소 상태를 확인하고 변경사항을 커밋한 후 푸시해주세요"></textarea>
</div>
<div class="input-group">
<label for="threadId">🧵 스레드 ID (선택사항):</label>
<input type="text" id="threadId" placeholder="예: git-workflow-001" value="git-workflow-001">
</div>
<button class="execute-btn" onclick="executeGitWorkflow()">🚀 실행하기</button>
</div>
<div class="examples">
<h4>💡 사용 예시 (클릭하면 자동 입력):</h4>
<div class="example-item" onclick="fillExample('현재 저장소 상태를 확인하고 변경된 파일들을 보여주세요')">
📊 저장소 상태 확인
</div>
<div class="example-item" onclick="fillExample('변경된 파일들을 스테이징하고 커밋해주세요')">
📝 변경사항 스테이징 및 커밋
</div>
<div class="example-item" onclick="fillExample('현재 브랜치를 원격 저장소에 푸시해주세요')">
🚀 원격 저장소 푸시
</div>
<div class="example-item" onclick="fillExample('전체 Git 워크플로우를 실행해주세요: 상태확인 → 스테이징 → 커밋 → 푸시')">
🔄 전체 워크플로우 실행
</div>
<div class="example-item" onclick="fillExample('최근 커밋 히스토리를 보여주세요')">
📜 커밋 히스토리 확인
</div>
</div>
<div class="loading" id="loading">
<div class="spinner"></div>
<p>Git 작업을 실행하고 있습니다...</p>
</div>
<div class="result-section" id="resultSection" style="display: none;">
<h3>📋 실행 결과</h3>
<div id="status" class="status info">준비됨</div>
<div class="result-content" id="resultContent">결과가 여기에 표시됩니다.</div>
</div>
</div>
<script>
const API_BASE = 'http://localhost:8081';
function fillExample(text) {
document.getElementById('query').value = text;
}
async function executeGitWorkflow() {
const query = document.getElementById('query').value.trim();
const threadId = document.getElementById('threadId').value.trim() || 'git-workflow-001';
if (!query) {
alert('Git 작업을 입력해주세요!');
return;
}
// UI 상태 변경
const executeBtn = document.querySelector('.execute-btn');
const loading = document.getElementById('loading');
const resultSection = document.getElementById('resultSection');
const status = document.getElementById('status');
const resultContent = document.getElementById('resultContent');
executeBtn.disabled = true;
executeBtn.textContent = '실행 중...';
loading.style.display = 'block';
resultSection.style.display = 'none';
try {
// MCP GitHub 도구를 통해 Git 작업 실행
const response = await fetch(`${API_BASE}/chat`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
query: query,
thread_id: threadId
})
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
// 결과 표시
if (result.status === 'success') {
status.className = 'status success';
status.textContent = '✅ 성공적으로 실행되었습니다!';
} else if (result.status === 'error') {
status.className = 'status error';
status.textContent = '❌ 실행 중 오류가 발생했습니다.';
} else {
status.className = 'status info';
status.textContent = 'ℹ️ 실행 완료';
}
// 응답 내용 표시
let displayContent = '';
if (result.response) {
displayContent += `📝 응답:\n${result.response}\n\n`;
}
if (result.used_tools && result.used_tools.length > 0) {
displayContent += `🛠️ 사용된 도구들:\n${result.used_tools.join(', ')}\n\n`;
}
if (result.trace) {
displayContent += `🔍 실행 추적:\n${JSON.stringify(result.trace, null, 2)}`;
}
resultContent.textContent = displayContent || '결과가 없습니다.';
resultSection.style.display = 'block';
} catch (error) {
console.error('Error:', error);
status.className = 'status error';
status.textContent = '❌ 오류가 발생했습니다: ' + error.message;
resultContent.textContent = `오류 상세:\n${error.stack || error.message}`;
resultSection.style.display = 'block';
} finally {
// UI 상태 복원
executeBtn.disabled = false;
executeBtn.textContent = '🚀 실행하기';
loading.style.display = 'none';
}
}
// Enter 키로 실행
document.getElementById('query').addEventListener('keypress', function(e) {
if (e.key === 'Enter' && e.ctrlKey) {
executeGitWorkflow();
}
});
// 페이지 로드 시 포커스
window.addEventListener('load', function() {
document.getElementById('query').focus();
});
</script>
</body>
</html>