From 3d0a5799ff1a029b9bf550c43c730fe7252fa90b Mon Sep 17 00:00:00 2001
From: sheetEasy AI Team <team@sheeteasy.ai>
Date: Fri, 27 Jun 2025 16:22:58 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=94=84=EB=A1=AC=ED=94=84=ED=8A=B8=20?=
 =?UTF-8?q?=EC=9E=85=EB=A0=A5=EC=B0=BD=EC=9D=84=20Univer=20=EC=9C=84=20?=
 =?UTF-8?q?=EC=98=A4=EB=B2=84=EB=A0=88=EC=9D=B4=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20=EB=B0=8F=20=EA=B8=B0=EB=B3=B8=EC=A0=81=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=ED=95=AD=EC=83=81=20=ED=91=9C=EC=8B=9C=EB=90=98?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EA=B0=9C=EC=84=A0\n\n-=20=ED=94=84?=
 =?UTF-8?q?=EB=A1=AC=ED=94=84=ED=8A=B8=20=EC=9E=85=EB=A0=A5=EC=B0=BD?=
 =?UTF-8?q?=EC=9D=84=20Univer=20=EC=8B=9C=ED=8A=B8=20=EC=9C=84=EC=97=90=20?=
 =?UTF-8?q?=EB=B0=98=ED=88=AC=EB=AA=85=20=EC=98=A4=EB=B2=84=EB=A0=88?=
 =?UTF-8?q?=EC=9D=B4=EB=A1=9C=20=EA=B5=AC=ED=98=84\n-=20=EC=9A=B0=ED=95=98?=
 =?UTF-8?q?=EB=8B=A8=20=ED=94=8C=EB=A1=9C=ED=8C=85=20=EB=B2=84=ED=8A=BC?=
 =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=ED=86=A0=EA=B8=80=20=EA=B0=80=EB=8A=A5=20?=
 =?UTF-8?q?(=EA=B8=B0=EB=B3=B8=EA=B0=92:=20=ED=95=AD=EC=83=81=20=ED=91=9C?=
 =?UTF-8?q?=EC=8B=9C)\n-=20=EC=9E=85=EB=A0=A5=EC=B0=BD=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=EC=9D=84=20=EC=BB=B4=ED=8C=A9=ED=8A=B8?=
 =?UTF-8?q?=ED=95=98=EA=B2=8C=20=EA=B0=9C=EC=84=A0,=20=EB=B0=98=EC=9D=91?=
 =?UTF-8?q?=ED=98=95=20=EC=98=A4=EB=B2=84=EB=A0=88=EC=9D=B4=20=EC=A0=81?=
 =?UTF-8?q?=EC=9A=A9\n-=20=EA=B8=B0=EC=A1=B4=20=ED=95=98=EB=8B=A8=20?=
 =?UTF-8?q?=EA=B3=A0=EC=A0=95=20=EB=B0=A9=EC=8B=9D=20=EC=A0=9C=EA=B1=B0,?=
 =?UTF-8?q?=20Univer=20=EC=A0=84=EC=B2=B4=20=ED=99=94=EB=A9=B4=20=ED=99=9C?=
 =?UTF-8?q?=EC=9A=A9\n-=20=EC=82=AC=EC=9A=A9=EC=9E=90=20=EA=B2=BD=ED=97=98?=
 =?UTF-8?q?=20=EB=B0=8F=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=ED=96=A5=EC=83=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/sheet/EditSheetViewer.tsx | 478 +++++++++++++----------
 src/components/sheet/PromptInput.tsx     |  55 ++-
 2 files changed, 291 insertions(+), 242 deletions(-)

diff --git a/src/components/sheet/EditSheetViewer.tsx b/src/components/sheet/EditSheetViewer.tsx
index abceae0..088684c 100644
--- a/src/components/sheet/EditSheetViewer.tsx
+++ b/src/components/sheet/EditSheetViewer.tsx
@@ -332,6 +332,7 @@ const TestSheetViewer: React.FC = () => {
   const [isProcessing, setIsProcessing] = useState(false);
   const [currentFile, setCurrentFile] = useState<File | null>(null);
   const [prompt, setPrompt] = useState("");
+  const [showPromptInput, setShowPromptInput] = useState(true);
 
   const appStore = useAppStore();
 
@@ -862,241 +863,290 @@ const TestSheetViewer: React.FC = () => {
   }, []);
 
   return (
-    <div className="w-full h-screen flex flex-col relative">
-      {/* 헤더 */}
-      <div className="bg-white border-b p-4 flex-shrink-0 relative z-10">
-        <div
-          className="mt-2 flex items-center gap-4"
-          style={{ position: "relative" }}
-        >
-          {currentFile && (
-            <span className="text-sm text-blue-600 font-medium">
-              📄 {currentFile.name}
-            </span>
-          )}
-          <button
-            onClick={handleNewUpload}
-            className="text-xs px-2 py-1 bg-blue-100 text-blue-700 rounded hover:bg-blue-200 transition-colors"
-            style={{
-              position: "absolute",
-              right: "0%",
-              top: "50%",
-              transform: "translateY(-50%)",
-            }}
-          >
-            새 파일 업로드
-          </button>
+    <div className="min-h-screen bg-gray-50 flex flex-col relative">
+      {/* 헤더 - App.tsx와 동일한 스타일 적용 */}
+      <header className="bg-white shadow-sm border-b">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-16">
+            <div className="flex items-center">
+              {currentFile && (
+                <span className="text-sm text-blue-600 font-medium">
+                  📄 {currentFile.name}
+                </span>
+              )}
+            </div>
+            <div className="flex items-center space-x-4">
+              <button
+                onClick={handleNewUpload}
+                className="px-3 py-1.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors"
+              >
+                새 파일 업로드
+              </button>
+            </div>
+          </div>
         </div>
-      </div>
+      </header>
 
-      {/* Univer 컨테이너 (항상 렌더링) */}
-      <div
-        ref={containerRef}
-        className="flex-1 relative"
-        style={{
-          minHeight: "0",
-          width: "100%",
-          height: "100%",
-          flexGrow: 0.85,
-        }}
-      />
-
-      {/* Univer와 입력창 사이 여백 */}
-      <div style={{ height: "1rem" }} />
-
-      {/* 프롬프트 입력창 - Univer 하단에 이어서 */}
-      <PromptInput
-        value={prompt}
-        onChange={(e) => setPrompt(e.target.value)}
-        onExecute={handlePromptExecute}
-        onHistoryToggle={handleHistoryToggle}
-        historyCount={history.length}
-        disabled={isProcessing}
-      />
-
-      {/* 히스토리 패널 - 파일이 업로드된 후에만 표시 */}
-      {!showUploadOverlay && (
-        <HistoryPanel
-          isOpen={isHistoryOpen}
-          onClose={() => setIsHistoryOpen(false)}
-          history={history}
-          onReapply={handleHistoryReapply}
-          onClear={handleHistoryClear}
-        />
-      )}
-
-      {/* 파일 업로드 오버레이 - 레이어 분리 */}
-      {showUploadOverlay && (
-        <>
-          {/* 1. Univer CE 영역만 흐리게 하는 반투명 레이어 */}
+      {/* 메인 콘텐츠 - App.tsx와 동일한 패턴 */}
+      <main className="h-[calc(100vh-4rem)]">
+        <div className="h-full">
+          {/* Univer 컨테이너 - 전체 화면 사용 */}
           <div
+            ref={containerRef}
+            className="relative bg-white"
             style={{
-              position: "absolute",
-              top: "0px", // 헤더 높이만큼 아래로 (헤더는 약 80px)
-              left: 0,
-              right: 0,
-              bottom: 0,
-              zIndex: 40,
-              backgroundColor: "rgba(255, 255, 255, 0.01)",
-              backdropFilter: "blur(8px)",
-              WebkitBackdropFilter: "blur(8px)", // Safari 지원
-              pointerEvents: "auto",
+              minHeight: "0",
+              width: "100%",
+              height: "100%", // 전체 높이 사용
             }}
           />
 
-          {/* 2. Univer 영역 중앙의 업로드 UI */}
-          <div
-            style={{
-              position: "absolute",
-              top: "-100px", // 헤더 높이만큼 아래로
-              left: 0,
-              right: 0,
-              bottom: 0,
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              padding: "1rem",
-              zIndex: 50,
-            }}
-          >
-            <div
-              className="max-w-2xl w-full"
-              style={{ transform: "scale(0.8)" }}
-            >
+          {/* 히스토리 패널 - 파일이 업로드된 후에만 표시 */}
+          {!showUploadOverlay && (
+            <HistoryPanel
+              isOpen={isHistoryOpen}
+              onClose={() => setIsHistoryOpen(false)}
+              history={history}
+              onReapply={handleHistoryReapply}
+              onClear={handleHistoryClear}
+            />
+          )}
+
+          {/* 파일 업로드 오버레이 - 레이어 분리 */}
+          {showUploadOverlay && (
+            <>
+              {/* 1. Univer CE 영역만 흐리게 하는 반투명 레이어 */}
               <div
-                className="bg-white rounded-lg shadow-xl border p-8 md:p-12"
                 style={{
-                  backgroundColor: "#ffffff",
-                  boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+                  position: "absolute",
+                  top: "0px", // 헤더 높이만큼 아래로 (헤더는 약 80px)
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  zIndex: 40,
+                  backgroundColor: "rgba(255, 255, 255, 0.01)",
+                  backdropFilter: "blur(8px)",
+                  WebkitBackdropFilter: "blur(8px)", // Safari 지원
+                  pointerEvents: "auto",
+                }}
+              />
+
+              {/* 2. Univer 영역 중앙의 업로드 UI */}
+              <div
+                style={{
+                  position: "absolute",
+                  top: "-100px", // 헤더 높이만큼 아래로
+                  left: 0,
+                  right: 0,
+                  bottom: 0,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  padding: "1rem",
+                  zIndex: 50,
                 }}
               >
-                <div className="text-center">
-                  {/* 아이콘 및 제목 */}
-                  <div className="mb-8">
-                    <div
-                      className={cn(
-                        "mx-auto h-20 w-20 md:h-24 md:w-24 rounded-full flex items-center justify-center mb-4",
-                        isProcessing ? "bg-blue-100" : "bg-blue-50",
-                      )}
-                    >
-                      {isProcessing ? (
-                        <svg
-                          className="h-10 w-10 md:h-12 md:w-12 text-blue-600 animate-spin"
-                          fill="none"
-                          viewBox="0 0 24 24"
-                        >
-                          <circle
-                            className="opacity-25"
-                            cx="12"
-                            cy="12"
-                            r="10"
-                            stroke="currentColor"
-                            strokeWidth="4"
-                          />
-                          <path
-                            className="opacity-75"
-                            fill="currentColor"
-                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-                          />
-                        </svg>
-                      ) : (
-                        <svg
-                          className="h-10 w-10 md:h-12 md:w-12 text-blue-600"
-                          fill="none"
-                          stroke="currentColor"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            strokeWidth={2}
-                            d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
-                          />
-                        </svg>
-                      )}
-                    </div>
-                    <h2 className="text-xl md:text-2xl font-semibold mb-2 text-gray-900">
-                      {isProcessing
-                        ? "파일 처리 중..."
-                        : "Excel 파일을 업로드하세요"}
-                    </h2>
-                    <p className="text-sm md:text-base text-gray-600 mb-6">
-                      {isProcessing ? (
-                        <span className="text-blue-600">
-                          잠시만 기다려주세요...
-                        </span>
-                      ) : (
-                        <>
-                          <span className="font-medium text-gray-900">
-                            .xlsx
-                          </span>{" "}
-                          파일을 드래그 앤 드롭하거나 클릭하여 업로드
-                        </>
-                      )}
-                    </p>
-                  </div>
-
-                  {/* 드래그 앤 드롭 영역 */}
+                <div
+                  className="max-w-2xl w-full"
+                  style={{ transform: "scale(0.8)" }}
+                >
                   <div
-                    className={cn(
-                      "border-2 border-dashed rounded-lg p-8 md:p-12 transition-all duration-200 cursor-pointer",
-                      "hover:border-blue-400 hover:bg-blue-50",
-                      "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
-                      isDragOver
-                        ? "border-blue-500 bg-blue-100 scale-105"
-                        : "border-gray-300",
-                      isProcessing && "opacity-50 cursor-not-allowed",
-                    )}
-                    onDragEnter={handleDragEnter}
-                    onDragLeave={handleDragLeave}
-                    onDragOver={handleDragOver}
-                    onDrop={handleDrop}
-                    onClick={handleFilePickerClick}
-                    tabIndex={isProcessing ? -1 : 0}
-                    role="button"
+                    className="bg-white rounded-lg shadow-xl border p-8 md:p-12"
+                    style={{
+                      backgroundColor: "#ffffff",
+                      boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.25)",
+                    }}
                   >
-                    <div className="flex flex-col items-center justify-center space-y-4">
-                      <div className="text-4xl md:text-6xl">
-                        {isDragOver ? "📂" : "📄"}
-                      </div>
-                      <div className="text-center">
-                        <p className="text-base md:text-lg font-medium mb-2 text-gray-900">
-                          {isDragOver
-                            ? "파일을 여기에 놓으세요"
-                            : "파일을 드래그하거나 클릭하세요"}
+                    <div className="text-center">
+                      {/* 아이콘 및 제목 */}
+                      <div className="mb-8">
+                        <div
+                          className={cn(
+                            "mx-auto h-20 w-20 md:h-24 md:w-24 rounded-full flex items-center justify-center mb-4",
+                            isProcessing ? "bg-blue-100" : "bg-blue-50",
+                          )}
+                        >
+                          {isProcessing ? (
+                            <svg
+                              className="h-10 w-10 md:h-12 md:w-12 text-blue-600 animate-spin"
+                              fill="none"
+                              viewBox="0 0 24 24"
+                            >
+                              <circle
+                                className="opacity-25"
+                                cx="12"
+                                cy="12"
+                                r="10"
+                                stroke="currentColor"
+                                strokeWidth="4"
+                              />
+                              <path
+                                className="opacity-75"
+                                fill="currentColor"
+                                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                              />
+                            </svg>
+                          ) : (
+                            <svg
+                              className="h-10 w-10 md:h-12 md:w-12 text-blue-600"
+                              fill="none"
+                              stroke="currentColor"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth={2}
+                                d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                              />
+                            </svg>
+                          )}
+                        </div>
+                        <h2 className="text-xl md:text-2xl font-semibold mb-2 text-gray-900">
+                          {isProcessing
+                            ? "파일 처리 중..."
+                            : "Excel 파일을 업로드하세요"}
+                        </h2>
+                        <p className="text-sm md:text-base text-gray-600 mb-6">
+                          {isProcessing ? (
+                            <span className="text-blue-600">
+                              잠시만 기다려주세요...
+                            </span>
+                          ) : (
+                            <>
+                              <span className="font-medium text-gray-900">
+                                .xlsx
+                              </span>{" "}
+                              파일을 드래그 앤 드롭하거나 클릭하여 업로드
+                            </>
+                          )}
                         </p>
-                        <p className="text-sm text-gray-600">
-                          최대 50MB까지 업로드 가능
+                      </div>
+
+                      {/* 드래그 앤 드롭 영역 */}
+                      <div
+                        className={cn(
+                          "border-2 border-dashed rounded-lg p-8 md:p-12 transition-all duration-200 cursor-pointer",
+                          "hover:border-blue-400 hover:bg-blue-50",
+                          "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
+                          isDragOver
+                            ? "border-blue-500 bg-blue-100 scale-105"
+                            : "border-gray-300",
+                          isProcessing && "opacity-50 cursor-not-allowed",
+                        )}
+                        onDragEnter={handleDragEnter}
+                        onDragLeave={handleDragLeave}
+                        onDragOver={handleDragOver}
+                        onDrop={handleDrop}
+                        onClick={handleFilePickerClick}
+                        tabIndex={isProcessing ? -1 : 0}
+                        role="button"
+                      >
+                        <div className="flex flex-col items-center justify-center space-y-4">
+                          <div className="text-4xl md:text-6xl">
+                            {isDragOver ? "📂" : "📄"}
+                          </div>
+                          <div className="text-center">
+                            <p className="text-base md:text-lg font-medium mb-2 text-gray-900">
+                              {isDragOver
+                                ? "파일을 여기에 놓으세요"
+                                : "파일을 드래그하거나 클릭하세요"}
+                            </p>
+                            <p className="text-sm text-gray-600">
+                              최대 50MB까지 업로드 가능
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* 숨겨진 파일 입력 */}
+                      <input
+                        ref={fileInputRef}
+                        type="file"
+                        accept=".xlsx"
+                        onChange={handleFileInputChange}
+                        className="hidden"
+                        disabled={isProcessing}
+                      />
+
+                      {/* 지원 형식 안내 */}
+                      <div className="mt-6 text-xs text-gray-500">
+                        <p>지원 형식: Excel (.xlsx)</p>
+                        <p>최대 파일 크기: 50MB</p>
+                        <p className="mt-2 text-blue-600">
+                          💡 브라우저 콘솔에서 window.__UNIVER_DEBUG__ 로 디버깅
+                          가능
                         </p>
                       </div>
                     </div>
                   </div>
-
-                  {/* 숨겨진 파일 입력 */}
-                  <input
-                    ref={fileInputRef}
-                    type="file"
-                    accept=".xlsx"
-                    onChange={handleFileInputChange}
-                    className="hidden"
-                    disabled={isProcessing}
-                  />
-
-                  {/* 지원 형식 안내 */}
-                  <div className="mt-6 text-xs text-gray-500">
-                    <p>지원 형식: Excel (.xlsx)</p>
-                    <p>최대 파일 크기: 50MB</p>
-                    <p className="mt-2 text-blue-600">
-                      💡 브라우저 콘솔에서 window.__UNIVER_DEBUG__ 로 디버깅
-                      가능
-                    </p>
-                  </div>
                 </div>
               </div>
+            </>
+          )}
+
+          {/* 프롬프트 입력창 - Univer 위 오버레이 */}
+          {showPromptInput && (
+            <div className="absolute bottom-6 left-1/2 transform -translate-x-1/2 z-40">
+              <div className="bg-white/95 backdrop-blur-sm border border-gray-200 rounded-2xl shadow-2xl p-4 max-w-4xl w-[90vw] sm:w-[80vw] md:w-[70vw] lg:w-[60vw]">
+                <PromptInput
+                  value={prompt}
+                  onChange={(e) => setPrompt(e.target.value)}
+                  onExecute={handlePromptExecute}
+                  onHistoryToggle={handleHistoryToggle}
+                  historyCount={history.length}
+                  disabled={isProcessing}
+                />
+              </div>
             </div>
-          </div>
-        </>
-      )}
+          )}
+
+          {/* AI 프롬프트 토글 버튼 - 플로팅 */}
+          {!showUploadOverlay && (
+            <button
+              onClick={() => setShowPromptInput(!showPromptInput)}
+              className={`fixed bottom-6 right-6 z-50 w-14 h-14 rounded-full shadow-2xl transition-all duration-300 flex items-center justify-center ${
+                showPromptInput
+                  ? "bg-red-500 hover:bg-red-600 text-white"
+                  : "bg-green-500 hover:bg-green-600 text-white"
+              }`}
+              aria-label={
+                showPromptInput ? "AI 프롬프트 닫기" : "AI 프롬프트 열기"
+              }
+            >
+              {showPromptInput ? (
+                <svg
+                  className="w-6 h-6"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M6 18L18 6M6 6l12 12"
+                  />
+                </svg>
+              ) : (
+                <svg
+                  className="w-6 h-6"
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"
+                  />
+                </svg>
+              )}
+            </button>
+          )}
+        </div>
+      </main>
     </div>
   );
 };
diff --git a/src/components/sheet/PromptInput.tsx b/src/components/sheet/PromptInput.tsx
index 3af9efd..89066e0 100644
--- a/src/components/sheet/PromptInput.tsx
+++ b/src/components/sheet/PromptInput.tsx
@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import { useAppStore } from "../../stores/useAppStore";
 import { aiProcessor } from "../../utils/aiProcessor";
+import { Button } from "../ui/button";
 
 interface PromptInputProps {
   value: string;
@@ -176,45 +177,43 @@ const PromptInput: React.FC<PromptInputProps> = ({
   }, [cellAddressToInsert, onChange, setCellAddressToInsert]);
 
   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 flex items-end gap-2">
+    <div className="w-full z-10 flex flex-col items-center">
+      <div className="w-full flex items-end gap-3">
         <textarea
           ref={textareaRef}
-          className="flex-1 resize-none rounded-lg border border-gray-300 bg-gray-50 px-4 py-3 text-base text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-400 disabled:bg-gray-100 disabled:cursor-not-allowed min-h-[48px] max-h-32 shadow-sm"
-          placeholder="질문을 입력하세요.
-예시) A1부터 A10까지 합계를 구해서 B1에 입력하는 수식을 입력해줘
-
-💡 팁: 시트에서 셀을 선택하면 자동으로 주소가 입력됩니다"
+          className="flex-1 resize-none rounded-xl border border-gray-300 bg-white px-4 py-3 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-400 disabled:bg-gray-100 disabled:cursor-not-allowed min-h-[44px] max-h-28 shadow-sm"
+          placeholder="AI에게 명령하세요...
+예: A1부터 A10까지 합계를 B1에 입력해줘"
           value={value}
           onChange={onChange}
           disabled={isProcessing}
           maxLength={maxLength}
-          rows={5}
+          rows={3}
         />
         <div style={{ width: "1rem" }} />
 
-        {/* 버튼들을 세로로 배치 */}
-        <div className="flex flex-col gap-3">
-          {/* 히스토리 버튼 - 맨 위 */}
+        {/* 버튼들을 세로로 배치 - 오버레이에 맞게 컴팩트 */}
+        <div className="flex flex-col gap-2">
+          {/* 히스토리 버튼 */}
           {onHistoryToggle && (
             <button
-              className="px-4 py-2 rounded-lg text-gray-600 border border-gray-300 hover:bg-gray-50 font-semibold text-base shadow transition disabled:opacity-60 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+              className="px-2 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-lg shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors disabled:opacity-60 disabled:cursor-not-allowed flex items-center justify-center gap-1"
               onClick={onHistoryToggle}
               disabled={isProcessing}
               aria-label="작업 히스토리 보기"
             >
               📝
               {historyCount !== undefined && historyCount > 0 && (
-                <span className="text-xs bg-blue-500 text-white rounded-full px-2 py-0.5 min-w-[20px] h-5 flex items-center justify-center">
+                <span className="text-xs bg-blue-500 text-white rounded-full px-1.5 py-0.5 min-w-[16px] h-4 flex items-center justify-center text-[10px]">
                   {historyCount > 99 ? "99+" : historyCount}
                 </span>
               )}
             </button>
           )}
 
-          {/* UNDO 버튼 - 중간 */}
+          {/* UNDO 버튼 */}
           <button
-            className="px-4 py-2 rounded-lg text-gray-600 border border-gray-300 hover:bg-gray-50 font-semibold text-base shadow transition disabled:opacity-60 disabled:cursor-not-allowed flex items-center justify-center gap-2"
+            className="px-2 py-1.5 text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-lg shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors disabled:opacity-60 disabled:cursor-not-allowed flex items-center justify-center"
             onClick={() => {
               // TODO: UNDO 기능 구현
               console.log("🔄 UNDO 버튼 클릭");
@@ -225,25 +224,25 @@ const PromptInput: React.FC<PromptInputProps> = ({
             ↶
           </button>
 
-          {/* 전송하기 버튼 - 맨 아래 */}
-          <button
-            className="px-6 py-2 rounded-lg text-white font-semibold text-base shadow transition disabled:opacity-60 disabled:cursor-not-allowed"
-            style={{
-              background: isProcessing
-                ? "#6b7280"
-                : "linear-gradient(90deg, #a18fff 0%, #6f6fff 100%)",
-            }}
+          {/* 전송하기 버튼 */}
+          <Button
+            variant="outline"
+            size="sm"
+            className={`text-xs px-3 py-1.5 ${
+              isProcessing || !value.trim()
+                ? "bg-gray-400 text-white cursor-not-allowed border-gray-400"
+                : "bg-green-500 hover:bg-green-600 text-white border-green-500"
+            }`}
             onClick={handleExecute}
             disabled={isProcessing || !value.trim()}
           >
-            {isProcessing ? "처리 중..." : "전송하기"}
-          </button>
+            {isProcessing ? "처리중" : "전송"}
+          </Button>
         </div>
       </div>
-      <div className="w-full max-w-3xl flex justify-between items-center mt-1 px-1">
+      <div className="w-full flex justify-between items-center mt-2 px-1">
         <span className="text-xs text-gray-500">
-          Press Enter to send, Shift+Enter for new line | 시트에서 셀 클릭하여
-          주소 자동 입력
+          시트에서 셀 클릭시 자동 입력 | Enter로 전송
         </span>
         <span className="text-xs text-gray-400">
           {value.length}/{maxLength}