code2

Running

App Files Files Community

code2 / index.html

kimhyunwoo

Update index.html

4daea0d verified 3 days ago

raw

history blame

25.6 kB

	<!DOCTYPE html>
	<html lang="ko">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>AI 코딩 파트너</title>
	<!-- Monaco Editor 로더 CSS -->
	<link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs/editor/editor.main.min.css">
	<!-- Google Fonts (macOS 느낌 폰트) -->
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
	<style>
	:root {
	--bg-color: #f0f2f5; /* 밝은 회색 배경 */
	--app-bg-color: #ffffff; /* 앱 배경 */
	--sidebar-bg-color: #e8e8e8; /* 사이드바 배경 (더 밝게) */
	--text-color: #1c1e21; /* 기본 텍스트 */
	--text-secondary-color: #606770; /* 보조 텍스트 */
	--accent-color: #007aff; /* macOS 블루 */
	--border-color: #d1d1d7;
	--editor-bg: #282c34; /* 어두운 에디터 배경 */
	--font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--border-radius: 12px;
	--box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	--box-shadow-light: 0 1px 3px rgba(0,0,0,0.05);
	}

	/* 스크롤바 스타일 (선택 사항) */
	::-webkit-scrollbar { width: 8px; height: 8px; }
	::-webkit-scrollbar-track { background: transparent; }
	::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
	::-webkit-scrollbar-thumb:hover { background: #a1a1a1; }

	body {
	font-family: var(--font-family);
	margin: 0;
	background-color: var(--bg-color);
	color: var(--text-color);
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	padding: 20px;
	box-sizing: border-box;
	}

	.app-container {
	display: flex;
	width: 95%;
	max-width: 1400px;
	height: 90vh;
	max-height: 800px;
	background-color: var(--app-bg-color);
	border-radius: var(--border-radius);
	box-shadow: var(--box-shadow);
	overflow: hidden;
	}

	/* 사이드바 (선택 사항 - 여기서는 채팅, 에디터, 미리보기를 주 영역으로) */
	/* .sidebar { flex: 0 0 280px; background-color: var(--sidebar-bg-color); padding: 20px; border-right: 1px solid var(--border-color); display: flex; flex-direction: column; } */

	.main-content {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	}

	.chat-editor-area {
	display: flex;
	flex-grow: 1;
	overflow: hidden; /* 내부 스크롤 관리 */
	}

	.chat-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 20px;
	border-right: 1px solid var(--border-color);
	overflow-y: auto; /* 채팅 스크롤 */
	}

	.chat-messages {
	flex-grow: 1;
	margin-bottom: 15px;
	overflow-y: auto;
	padding-right: 10px; /* 스크롤바 공간 */
	}

	.message {
	display: flex;
	margin-bottom: 15px;
	max-width: 90%;
	}

	.message.user {
	margin-left: auto; /* 사용자 메시지는 오른쪽 정렬 */
	flex-direction: row-reverse;
	}

	.avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: var(--accent-color);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 500;
	font-size: 16px;
	margin-right: 10px;
	flex-shrink: 0;
	}
	.message.user .avatar { margin-left: 10px; margin-right: 0; background-color: #6c757d; }

	.message-content {
	padding: 10px 15px;
	border-radius: 18px;
	background-color: #e4e6eb; /* AI 메시지 배경 */
	color: var(--text-color);
	word-wrap: break-word; /* 긴 단어 줄바꿈 */
	}
	.message.user .message-content { background-color: var(--accent-color); color: white; }

	.message-content pre { /* 코드 블록 스타일 */
	background-color: var(--editor-bg) !important; /* Monaco 테마와 유사하게 */
	color: #abb2bf !important; /* Monaco 기본 텍스트 색상 */
	padding: 10px;
	border-radius: 8px;
	overflow-x: auto;
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
	font-size: 0.9em;
	white-space: pre-wrap; /* 자동 줄바꿈 */
	word-break: break-all; /* 긴 코드 줄바꿈 */
	}
	/* Monaco 에디터가 렌더링한 코드 블록에 대한 스타일 (필요 시) */
	.monaco-editor-code-block {
	border-radius: 8px !important;
	box-shadow: var(--box-shadow-light);
	}


	.chat-input-area {
	display: flex;
	align-items: center;
	padding-top: 15px;
	border-top: 1px solid var(--border-color);
	}

	.chat-input-area textarea {
	flex-grow: 1;
	padding: 10px 15px;
	border: 1px solid var(--border-color);
	border-radius: 18px;
	resize: none;
	font-family: var(--font-family);
	font-size: 15px;
	min-height: 22px; /* 1줄 높이 */
	max-height: 100px; /* 최대 높이 */
	line-height: 1.4;
	margin-right: 10px;
	box-sizing: border-box;
	overflow-y: auto; /* 내용 많아지면 스크롤 */
	}
	.chat-input-area textarea:focus { border-color: var(--accent-color); outline: none; box-shadow: 0 0 0 2px rgba(0,122,255,0.2); }

	.chat-input-area button {
	background-color: var(--accent-color);
	color: white;
	border: none;
	border-radius: 50%; /* 원형 버튼 */
	width: 40px;
	height: 40px;
	font-size: 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s;
	}
	.chat-input-area button:hover { background-color: #0056b3; }
	.chat-input-area button:disabled { background-color: #b0c4de; cursor: not-allowed; }

	.editor-preview-area {
	flex: 2; /* 에디터와 미리보기 영역을 더 넓게 */
	display: flex;
	flex-direction: column;
	overflow: hidden;
	}

	.editor-wrapper {
	flex-basis: 60%; /* 에디터가 차지할 기본 높이 비율 */
	min-height: 200px; /* 최소 높이 */
	padding: 10px; /* 에디터 주변 여백 */
	background-color: #f9f9f9; /* 에디터 영역 배경 */
	display: flex;
	flex-direction: column;
	}
	#editor-container {
	width: 100% !important;
	height: 100% !important; /* 부모 높이에 맞춤 */
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	overflow: hidden; /* Monaco 에디터의 자체 스크롤 사용 */
	}
	.editor-controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 8px 0;
	}
	.editor-controls select, .editor-controls button {
	padding: 6px 12px;
	border-radius: 6px;
	border: 1px solid var(--border-color);
	background-color: white;
	font-family: var(--font-family);
	font-size: 13px;
	cursor: pointer;
	}
	.editor-controls button { background-color: #e9ecef; color: var(--text-color); }
	.editor-controls button:hover { background-color: #d1d5db; }


	.preview-wrapper {
	flex-basis: 40%; /* 미리보기가 차지할 기본 높이 비율 */
	min-height: 150px;
	border-top: 1px solid var(--border-color);
	padding: 10px;
	background-color: #f9f9f9; /* 미리보기 영역 배경 */
	display: flex; /* 내부 iframe 크기 조절 위해 */
	flex-direction: column;
	}
	.preview-wrapper h3 {
	margin: 0 0 8px 0;
	font-size: 14px;
	font-weight: 500;
	color: var(--text-secondary-color);
	}
	#html-preview {
	flex-grow: 1; /* 남은 공간 모두 차지 */
	width: 100%;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	background-color: white;
	}

	/* 로딩 스피너 */
	.loader {
	display: flex;
	align-items: center;
	font-size: 13px;
	color: var(--text-secondary-color);
	margin-left: 10px; /* 입력창 옆에 표시될 때 */
	}
	.loader.inline-editor { margin-top: 5px; justify-content: center; }

	.spinner {
	width: 16px;
	height: 16px;
	border: 2px solid var(--accent-color);
	border-top-color: transparent;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	margin-right: 8px;
	}
	@keyframes spin { to { transform: rotate(360deg); } }

	/* 반응형 조정 */
	@media (max-width: 1024px) {
	.app-container { flex-direction: column; height: auto; max-height: none; }
	.chat-editor-area { flex-direction: column; }
	.chat-panel { border-right: none; border-bottom: 1px solid var(--border-color); max-height: 50vh; }
	.editor-preview-area { flex: 1; } /* 남은 공간 모두 차지 */
	}
	@media (max-width: 768px) {
	body { padding: 0; }
	.app-container { width: 100%; height: 100vh; border-radius: 0; }
	.chat-panel { padding: 15px; }
	.editor-wrapper, .preview-wrapper { padding: 8px; }
	.chat-input-area textarea { font-size: 14px; }
	.chat-input-area button { width: 36px; height: 36px; font-size: 18px; }
	}

	</style>
	</head>
	<body>
	<div class="app-container">
	<!-- <div class="sidebar">Sidebar Content (Optional)</div> -->
	<div class="main-content">
	<div class="chat-editor-area">
	<div class="chat-panel">
	<div class="chat-messages" id="chatMessages">
	<!-- AI 시작 메시지 -->
	<div class="message ai">
	<div class="avatar">AI</div>
	<div class="message-content">
	안녕하세요! 무엇을 도와드릴까요? HTML 생성, 코드 작성, 또는 기존 코드 자동 완성을 요청하실 수 있습니다.
	</div>
	</div>
	</div>
	<div class="chat-input-area">
	<textarea id="chatInput" placeholder="여기에 메시지를 입력하세요..." rows="1"></textarea>
	<button id="sendButton" title="전송">
	<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"></line><polygon points="22 2 15 22 11 13 2 9 22 2"></polygon></svg>
	</button>
	<div class="loader" id="chatLoader" style="display: none;"><div class="spinner"></div>처리 중...</div>
	</div>
	</div>

	<div class="editor-preview-area">
	<div class="editor-wrapper">
	<div class="editor-controls">
	<select id="languageSelect">
	<option value="html">HTML</option>
	<option value="css">CSS</option>
	<option value="javascript" selected>JavaScript</option>
	<option value="python">Python</option>
	<option value="java">Java</option>
	<option value="csharp">C#</option>
	</select>
	<button id="getCompletionBtn">AI 코드 채우기 (FIM)</button>
	</div>
	<div id="editor-container"></div>
	<div class="loader inline-editor" id="completionLoader" style="display: none;"><div class="spinner"></div>AI가 코드를 채우는 중...</div>
	</div>
	<div class="preview-wrapper">
	<h3>HTML 미리보기</h3>
	<iframe id="html-preview" sandbox="allow-scripts allow-same-origin"></iframe>
	</div>
	</div>
	</div>
	</div>
	</div>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs/loader.min.js"></script>
	<script>
	let editor;
	const chatMessages = document.getElementById('chatMessages');
	const chatInput = document.getElementById('chatInput');
	const sendButton = document.getElementById('sendButton');
	const languageSelect = document.getElementById('languageSelect');
	const getCompletionBtn = document.getElementById('getCompletionBtn');
	const htmlPreviewEl = document.getElementById('html-preview');
	const chatLoader = document.getElementById('chatLoader');
	const completionLoader = document.getElementById('completionLoader');

	// --- 로더 표시/숨김 함수 ---
	function showLoader(loaderElement) { if (loaderElement) loaderElement.style.display = 'flex'; }
	function hideLoader(loaderElement) { if (loaderElement) loaderElement.style.display = 'none'; }

	// --- Monaco Editor 초기화 ---
	require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.45.0/min/vs' }});
	require(['vs/editor/editor.main'], function() {
	editor = monaco.editor.create(document.getElementById('editor-container'), {
	value: '// 코드를 작성하거나 AI에게 요청하세요.\n// 채팅창에 "사각형 버튼 만들어줘" 같이 입력해보세요.',
	language: languageSelect.value,
	theme: 'vs-dark', // 어두운 테마
	automaticLayout: true,
	wordWrap: 'on',
	minimap: { enabled: true, scale: 1 },
	fontSize: 14,
	lineNumbers: 'on',
	roundedSelection: false,
	scrollBeyondLastLine: false,
	readOnly: false, // 사용자가 직접 편집 가능하도록
	padding: { top: 10, bottom: 10 }
	});

	// 언어 선택 시 에디터 언어 변경
	languageSelect.addEventListener('change', () => {
	monaco.editor.setModelLanguage(editor.getModel(), languageSelect.value);
	});

	// FIM 버튼 클릭 이벤트
	getCompletionBtn.addEventListener('click', handleFIMRequest);
	});

	// --- 채팅 메시지 처리 ---
	function addMessage(text, sender, isCode = false, lang = 'plaintext') {
	const messageDiv = document.createElement('div');
	messageDiv.classList.add('message', sender);

	const avatarDiv = document.createElement('div');
	avatarDiv.classList.add('avatar');
	avatarDiv.textContent = sender === 'user' ? '나' : 'AI';
	messageDiv.appendChild(avatarDiv);

	const contentDiv = document.createElement('div');
	contentDiv.classList.add('message-content');

	if (isCode) {
	// 코드를 Monaco Editor를 사용해 렌더링 (읽기 전용)
	const pre = document.createElement('pre');
	// 간단히 텍스트로 넣거나, 새로운 Monaco 인스턴스를 만들 수 있음.
	// 여기서는 간단히 pre 태그로 처리하고, CSS로 스타일링.
	// 실제로는 AI 응답에서 ```html ... ``` 같은 마크다운 코드블록 파싱 필요
	let codeContent = text;
	const codeBlockMatch = text.match(/```(\w)\n([\s\S]?)```/);
	if (codeBlockMatch) {
	lang = codeBlockMatch[1] \|\| lang;
	codeContent = codeBlockMatch[2];
	}
	pre.textContent = codeContent; // 실제로는 highlight.js 등으로 하이라이팅 적용
	contentDiv.appendChild(pre);

	// 코드 에디터에 코드 삽입 버튼 추가 (선택 사항)
	const insertButton = document.createElement('button');
	insertButton.textContent = '에디터에 삽입';
	insertButton.style.marginTop = '8px';
	insertButton.style.padding = '5px 10px';
	insertButton.style.fontSize = '12px';
	insertButton.style.backgroundColor = '#f0f0f0';
	insertButton.style.color = '#333';
	insertButton.style.border = '1px solid #ccc';
	insertButton.style.borderRadius = '4px';
	insertButton.style.cursor = 'pointer';
	insertButton.onclick = () => {
	if (editor) {
	editor.setValue(codeContent);
	monaco.editor.setModelLanguage(editor.getModel(), lang);
	if (lang.toLowerCase() === 'html') {
	htmlPreviewEl.srcdoc = codeContent;
	}
	}
	};
	contentDiv.appendChild(insertButton);

	} else {
	contentDiv.textContent = text;
	}

	messageDiv.appendChild(contentDiv);
	chatMessages.appendChild(messageDiv);
	chatMessages.scrollTop = chatMessages.scrollHeight; // 항상 최신 메시지 보이도록 스크롤
	}

	// --- 채팅 입력 처리 ---
	chatInput.addEventListener('input', () => { // textarea 높이 자동 조절
	chatInput.style.height = 'auto';
	chatInput.style.height = (chatInput.scrollHeight) + 'px';
	});

	chatInput.addEventListener('keypress', (e) => {
	if (e.key === 'Enter' && !e.shiftKey) { // Shift+Enter는 줄바꿈
	e.preventDefault();
	handleSendMessage();
	}
	});
	sendButton.addEventListener('click', handleSendMessage);

	async function handleSendMessage() {
	const messageText = chatInput.value.trim();
	if (!messageText) return;

	addMessage(messageText, 'user');
	chatInput.value = '';
	chatInput.style.height = 'auto'; // 높이 초기화
	sendButton.disabled = true;
	showLoader(chatLoader);

	// AI 응답 처리 (간단한 규칙 기반으로 어떤 API 호출할지 결정)
	let endpoint = '/api/generate-code'; // 기본은 코드 생성
	let payload = { prompt: messageText, language: languageSelect.value };
	let responseIsCode = true;
	let responseLang = languageSelect.value;

	if (messageText.toLowerCase().includes('html 만들어줘') \|\| messageText.toLowerCase().includes('웹페이지 만들어줘') \|\| messageText.toLowerCase().includes('html로')) {
	endpoint = '/api/generate-html';
	payload = { prompt: messageText };
	responseLang = 'html';
	} else if (messageText.toLowerCase().includes('다음 코드 완성해줘') \|\| messageText.toLowerCase().includes('코드 채워줘')) {
	// 이 경우는 FIM 버튼을 사용하도록 유도하거나, 에디터 내용을 가져와야 함.
	// 여기서는 일반 코드 생성으로 처리.
	addMessage("AI: 코드 자동 완성(FIM)은 에디터 위의 'AI 코드 채우기' 버튼을 사용해주세요.", 'ai');
	hideLoader(chatLoader);
	sendButton.disabled = false;
	return;
	}


	try {
	const response = await fetch(endpoint, {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify(payload)
	});

	if (!response.ok) {
	const errorData = await response.json();
	throw new Error(errorData.error \|\| `HTTP error! status: ${response.status}`);
	}
	const data = await response.json();

	let aiResponseText = '';
	if (endpoint === '/api/generate-html') {
	aiResponseText = data.html;
	addMessage("AI: 요청하신 HTML 코드입니다.", 'ai');
	addMessage(aiResponseText, 'ai', true, 'html');
	if (editor && confirm("생성된 HTML을 에디터에 표시하고 미리보기를 업데이트할까요?")) {
	editor.setValue(aiResponseText);
	monaco.editor.setModelLanguage(editor.getModel(), 'html');
	htmlPreviewEl.srcdoc = aiResponseText;
	} else {
	htmlPreviewEl.srcdoc = aiResponseText; // 미리보기는 항상 업데이트
	}
	} else if (endpoint === '/api/generate-code') {
	aiResponseText = data.code;
	addMessage(`AI: 요청하신 ${responseLang} 코드입니다.`, 'ai');
	addMessage(aiResponseText, 'ai', true, responseLang);
	if (editor && confirm(`생성된 ${responseLang} 코드를 에디터에 표시할까요?`)) {
	editor.setValue(aiResponseText);
	monaco.editor.setModelLanguage(editor.getModel(), responseLang);
	}
	}

	} catch (error) {
	console.error('API Error:', error);
	addMessage(`AI: 죄송합니다. 요청 처리 중 오류가 발생했습니다: ${error.message}`, 'ai');
	} finally {
	hideLoader(chatLoader);
	sendButton.disabled = false;
	}
	}

	// --- FIM 요청 처리 ---
	async function handleFIMRequest() {
	if (!editor) return;

	const model = editor.getModel();
	const position = editor.getPosition();
	const fullCode = model.getValue();
	const offset = model.getOffsetAt(position);
	const prefix = fullCode.substring(0, offset);
	const suffix = fullCode.substring(offset);
	const language = languageSelect.value;

	showLoader(completionLoader);
	getCompletionBtn.disabled = true;

	try {
	const response = await fetch('/api/complete-code', {
	method: 'POST',
	headers: { 'Content-Type': 'application/json' },
	body: JSON.stringify({ prefix, suffix, language })
	});
	if (!response.ok) {
	const errorData = await response.json();
	throw new Error(errorData.error \|\| `HTTP error! status: ${response.status}`);
	}
	const data = await response.json();

	editor.executeEdits("api-fim-completion", [{
	range: new monaco.Range(position.lineNumber, position.column, position.lineNumber, position.column),
	text: data.completion
	}]);
	addMessage(`AI: 코드를 채워 넣었습니다. (에디터 확인)`, 'ai');


	} catch (error)
	{
	console.error('FIM Error:', error);
	addMessage(`AI: 코드 자동 완성 중 오류: ${error.message}`, 'ai');
	alert(`코드 자동 완성 중 오류: ${error.message}`);
	} finally {
	hideLoader(completionLoader);
	getCompletionBtn.disabled = false;
	}
	}

	// 초기 메시지 이후 첫 입력 시 안내 (선택)
	// chatInput.addEventListener('focus', () => { ... }, { once: true });

	</script>
	</body>
	</html>