AI커맨드 반영 셀 선택 완료
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
import { useAppStore } from "../../stores/useAppStore";
|
||||
import { aiProcessor } from "../../utils/aiProcessor";
|
||||
|
||||
interface PromptInputProps {
|
||||
value: string;
|
||||
@@ -15,6 +16,7 @@ interface PromptInputProps {
|
||||
* - 유니버 시트에서 셀 선택 시 자동으로 셀 주소 삽입 기능 포함
|
||||
* - 선택된 셀 정보 실시간 표시 및 시각적 피드백 제공
|
||||
* - 현재 선택된 셀 정보 상태바 표시
|
||||
* - AI 프로세서 연동으로 전송하기 버튼 기능 구현
|
||||
*/
|
||||
const PromptInput: React.FC<PromptInputProps> = ({
|
||||
value,
|
||||
@@ -29,11 +31,13 @@ const PromptInput: React.FC<PromptInputProps> = ({
|
||||
const [currentSelectedCell, setCurrentSelectedCell] = useState<string | null>(
|
||||
null,
|
||||
);
|
||||
const [processingMessage, setProcessingMessage] = useState<string>("");
|
||||
|
||||
const cellAddressToInsert = useAppStore((state) => state.cellAddressToInsert);
|
||||
const setCellAddressToInsert = useAppStore(
|
||||
(state) => state.setCellAddressToInsert,
|
||||
);
|
||||
const isProcessing = useAppStore((state) => state.isProcessing);
|
||||
|
||||
/**
|
||||
* 현재 선택된 셀 추적
|
||||
@@ -44,6 +48,65 @@ const PromptInput: React.FC<PromptInputProps> = ({
|
||||
}
|
||||
}, [cellAddressToInsert]);
|
||||
|
||||
/**
|
||||
* 전송하기 버튼 클릭 핸들러
|
||||
*/
|
||||
const handleExecute = async () => {
|
||||
if (!value.trim()) {
|
||||
alert("프롬프트를 입력해주세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
if (isProcessing || aiProcessor.isCurrentlyProcessing()) {
|
||||
alert("이미 처리 중입니다. 잠시 후 다시 시도해주세요.");
|
||||
return;
|
||||
}
|
||||
|
||||
setProcessingMessage("AI가 요청을 처리하고 있습니다...");
|
||||
|
||||
try {
|
||||
console.log("🚀 전송하기 버튼 클릭 - 프롬프트:", value);
|
||||
|
||||
// AI 프로세서에 프롬프트 전송 (테스트 모드)
|
||||
const result = await aiProcessor.processPrompt(value, true);
|
||||
|
||||
console.log("🎉 AI 처리 결과:", result);
|
||||
|
||||
if (result.success) {
|
||||
setProcessingMessage(`✅ 완료: ${result.message}`);
|
||||
|
||||
// 성공 시 프롬프트 입력창 초기화 (선택사항)
|
||||
if (onChange && textareaRef.current) {
|
||||
textareaRef.current.value = "";
|
||||
const syntheticEvent = {
|
||||
target: textareaRef.current,
|
||||
currentTarget: textareaRef.current,
|
||||
} as React.ChangeEvent<HTMLTextAreaElement>;
|
||||
onChange(syntheticEvent);
|
||||
}
|
||||
|
||||
// 3초 후 메시지 숨김
|
||||
setTimeout(() => {
|
||||
setProcessingMessage("");
|
||||
}, 3000);
|
||||
} else {
|
||||
setProcessingMessage(`❌ 실패: ${result.message}`);
|
||||
|
||||
// 에러 메시지는 5초 후 숨김
|
||||
setTimeout(() => {
|
||||
setProcessingMessage("");
|
||||
}, 5000);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("❌ AI 프로세싱 오류:", error);
|
||||
setProcessingMessage("❌ 처리 중 오류가 발생했습니다.");
|
||||
|
||||
setTimeout(() => {
|
||||
setProcessingMessage("");
|
||||
}, 5000);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 셀 주소 삽입 효과
|
||||
* cellAddressToInsert가 변경되면 textarea의 현재 커서 위치에 해당 주소를 삽입
|
||||
@@ -104,26 +167,6 @@ const PromptInput: React.FC<PromptInputProps> = ({
|
||||
|
||||
return (
|
||||
<div className="w-[60%] mx-auto bg-white z-10 flex flex-col items-center py-4 px-2">
|
||||
{/* 현재 선택된 셀 정보 상태바
|
||||
<div className="w-full max-w-3xl mb-2">
|
||||
<div className="flex items-center justify-between px-3 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-gray-600">현재 선택된 셀:</span>
|
||||
<span className="font-mono font-semibold text-blue-600">
|
||||
{currentSelectedCell || "없음"}
|
||||
</span>
|
||||
</div>
|
||||
<span className="text-xs text-gray-500">셀을 클릭하여 주소 확인</span>
|
||||
</div>
|
||||
</div> */}
|
||||
|
||||
{/* 셀 선택 피드백 알림 */}
|
||||
{/* {showCellInsertFeedback && lastInsertedCell && (
|
||||
<div className="mb-2 px-3 py-2 bg-green-100 border border-green-300 rounded-lg text-sm text-green-800 animate-pulse">
|
||||
📍 셀 주소 "{lastInsertedCell}"이(가) 입력창에 삽입되었습니다
|
||||
</div>
|
||||
)} */}
|
||||
|
||||
<div className="w-full max-w-3xl flex items-end gap-2">
|
||||
<textarea
|
||||
ref={textareaRef}
|
||||
@@ -134,7 +177,7 @@ const PromptInput: React.FC<PromptInputProps> = ({
|
||||
💡 팁: 시트에서 셀을 선택하면 자동으로 주소가 입력됩니다"
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
disabled={false}
|
||||
disabled={isProcessing}
|
||||
maxLength={maxLength}
|
||||
rows={5}
|
||||
/>
|
||||
@@ -142,12 +185,14 @@ const PromptInput: React.FC<PromptInputProps> = ({
|
||||
<button
|
||||
className="ml-2 px-6 py-2 rounded-lg text-white font-semibold text-base shadow transition disabled:opacity-60 disabled:cursor-not-allowed"
|
||||
style={{
|
||||
background: "linear-gradient(90deg, #a18fff 0%, #6f6fff 100%)",
|
||||
background: isProcessing
|
||||
? "#6b7280"
|
||||
: "linear-gradient(90deg, #a18fff 0%, #6f6fff 100%)",
|
||||
}}
|
||||
onClick={onExecute}
|
||||
disabled={disabled || !value.trim()}
|
||||
onClick={handleExecute}
|
||||
disabled={isProcessing || !value.trim()}
|
||||
>
|
||||
전송하기
|
||||
{isProcessing ? "처리 중..." : "전송하기"}
|
||||
</button>
|
||||
</div>
|
||||
<div className="w-full max-w-3xl flex justify-between items-center mt-1 px-1">
|
||||
|
||||
Reference in New Issue
Block a user