control-plane: Move save button to filename header bar

limeburst · claude · limeburst · commit 86ed3653e9f8 · 2026-03-14T15:30:38.000+09:00
Use forwardRef/useImperativeHandle to expose a save method from
FileViewer, and place the save button in the filename header bar of
both FileExplorer and FileExplorerWithSelected.

Co-Authored-By: Claude Opus 4.6 (1M context) &lt;noreply@anthropic.com&gt;
diff --git a/control-plane/src/components/browser/FileExplorer.tsx b/control-plane/src/components/browser/FileExplorer.tsx
@@ -2,10 +2,11 @@
 
 import { useState, useRef } from "react";
 import DirectoryTree from "./DirectoryTree";
-import FileViewer from "./FileViewer";
+import FileViewer, { FileViewerRef } from "./FileViewer";
 import { FileNode } from "@/lib/fileUtils";
 import { EDITABLE_FILE_EXTENSIONS, IMAGE_FILE_EXTENSIONS, AUDIO_FILE_EXTENSIONS } from "@/lib/const";
 import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
 
 interface FileExplorerProps {
   initialFiles: FileNode[];
@@ -57,6 +58,7 @@ export default function FileExplorer({ initialFiles, userLoginName }: FileExplor
   const [isRenaming, setIsRenaming] = useState(false);
   const [newFileName, setNewFileName] = useState("");
   const dragCounterRef = useRef(0);
+  const fileViewerRef = useRef<FileViewerRef>(null);
 
   const handleFileSelect = (filePath: string, isDirectory: boolean) => {
     if (isDirectory) {
@@ -384,49 +386,54 @@ export default function FileExplorer({ initialFiles, userLoginName }: FileExplor
                   </div>
                 </div>
               ) : (
-                <div className="flex items-center space-x-2 flex-1">
-                  {(() => {
-                    // Check if selected item is a directory
-                    const findNode = (nodes: FileNode[], path: string): FileNode | null => {
-                      for (const node of nodes) {
-                        if (node.path === path) return node;
-                        if (node.children) {
-                          const found = findNode(node.children, path);
-                          if (found) return found;
+                <>
+                  <div className="flex items-center space-x-2 flex-1">
+                    {(() => {
+                      // Check if selected item is a directory
+                      const findNode = (nodes: FileNode[], path: string): FileNode | null => {
+                        for (const node of nodes) {
+                          if (node.path === path) return node;
+                          if (node.children) {
+                            const found = findNode(node.children, path);
+                            if (found) return found;
+                          }
                         }
+                        return null;
+                      };
+
+                      const selectedNode = findNode(files, selectedFile);
+                      const isDirectory = selectedNode?.isDirectory;
+
+                      if (isDirectory) {
+                        return (
+                          <h3 className="font-medium text-foreground truncate">
+                            {getFileIcon(selectedFile.split('/').pop() || "", true)} {selectedFile.split('/').pop() || "루트"} (작업 폴더)
+                          </h3>
+                        );
+                      } else {
+                        return (
+                          <h3
+                            className="font-medium text-foreground truncate cursor-pointer hover:text-primary transition-colors"
+                            onClick={handleStartRename}
+                            title="클릭하여 이름 변경"
+                          >
+                            {getFileIcon(selectedFile.split('/').pop() || "", false)} {selectedFile.split('/').pop()}
+                          </h3>
+                        );
                       }
-                      return null;
-                    };
-
-                    const selectedNode = findNode(files, selectedFile);
-                    const isDirectory = selectedNode?.isDirectory;
-
-                    if (isDirectory) {
-                      return (
-                        <h3 className="font-medium text-foreground truncate">
-                          {getFileIcon(selectedFile.split('/').pop() || "", true)} {selectedFile.split('/').pop() || "루트"} (작업 폴더)
-                        </h3>
-                      );
-                    } else {
-                      return (
-                        <h3
-                          className="font-medium text-foreground truncate cursor-pointer hover:text-primary transition-colors"
-                          onClick={handleStartRename}
-                          title="클릭하여 이름 변경"
-                        >
-                          {getFileIcon(selectedFile.split('/').pop() || "", false)} {selectedFile.split('/').pop()}
-                        </h3>
-                      );
-                    }
-                  })()}
-                </div>
+                    })()}
+                  </div>
+                  <Button size="sm" onClick={() => fileViewerRef.current?.save()}>
+                    저장
+                  </Button>
+                </>
               )}
             </div>
           ) : (
             <h3 className="font-medium text-foreground">파일을 선택하세요</h3>
           )}
         </div>
-        <div className="flex-1 overflow-hidden">
+        <div className="flex-1 overflow-auto">
           {selectedFile ? (
             (() => {
               // Check if selected item is a directory
@@ -454,7 +461,7 @@ export default function FileExplorer({ initialFiles, userLoginName }: FileExplor
                   </div>
                 );
               } else {
-                return <FileViewer filePath={selectedFile} userLoginName={userLoginName} />;
+                return <FileViewer ref={fileViewerRef} filePath={selectedFile} userLoginName={userLoginName} />;
               }
             })()
           ) : (
diff --git a/control-plane/src/components/browser/FileExplorerWithSelected.tsx b/control-plane/src/components/browser/FileExplorerWithSelected.tsx
@@ -1,9 +1,10 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useRef } from "react";
 import DirectoryTree from "./DirectoryTree";
-import FileViewer from "./FileViewer";
+import FileViewer, { FileViewerRef } from "./FileViewer";
 import { FileNode } from "@/lib/fileUtils";
+import { Button } from "@/components/ui/button";
 
 interface FileExplorerWithSelectedProps {
   initialFiles: FileNode[];
@@ -18,7 +19,8 @@ export default function FileExplorerWithSelected({
 }: FileExplorerWithSelectedProps) {
   const [files, setFiles] = useState<FileNode[]>(initialFiles);
   const [selectedFile, setSelectedFile] = useState<string | null>(initialSelectedFile);
-  
+  const fileViewerRef = useRef<FileViewerRef>(null);
+
   // Build expanded folders set based on the initially selected file
   const buildInitialExpandedFolders = (selectedFilePath: string | null): Set<string> => {
     const expanded = new Set<string>([""]); // Always expand root
@@ -93,14 +95,19 @@ export default function FileExplorerWithSelected({
 
       {/* Right Main Area - File Viewer */}
       <div className="flex-1 flex flex-col">
-        <div className="p-3 border-b border-border bg-secondary">
+        <div className="p-3 border-b border-border bg-secondary flex items-center justify-between">
           <h3 className="font-medium text-foreground">
             {selectedFile ? `📄 ${selectedFile.split('/').pop()}` : "파일을 선택하세요"}
           </h3>
+          {selectedFile && (
+            <Button size="sm" onClick={() => fileViewerRef.current?.save()}>
+              저장
+            </Button>
+          )}
         </div>
-        <div className="flex-1 overflow-hidden">
+        <div className="flex-1 overflow-auto">
           {selectedFile ? (
-            <FileViewer filePath={selectedFile} userLoginName={userLoginName} />
+            <FileViewer ref={fileViewerRef} filePath={selectedFile} userLoginName={userLoginName} />
           ) : (
             <div className="flex items-center justify-center h-full text-muted-foreground">
               <div className="text-center">
diff --git a/control-plane/src/components/browser/FileViewer.tsx b/control-plane/src/components/browser/FileViewer.tsx
@@ -1,62 +1,23 @@
 "use client";
 
-import { useState, useEffect, createContext, useContext } from "react";
+import { useState, useEffect, useImperativeHandle, forwardRef } from "react";
 import { EDITABLE_FILE_EXTENSIONS, IMAGE_FILE_EXTENSIONS, AUDIO_FILE_EXTENSIONS } from "@/lib/const";
 import { getPublicAssetUrl } from "@/lib/utils";
 import Editor from "@/components/Editor";
 import ImageViewer from "./ImageViewer";
 import { Button } from "@/components/ui/button";
 import { toast } from "sonner";
 
-const EditorContext = createContext<{
-  value: string;
-  setValue: (value: string) => void;
-} | null>(null);
-
-function SaveButton({ filename }: { filename: string }) {
-  const context = useContext(EditorContext);
-  if (!context) return null;
-
-  const { value } = context;
-
-  const handleSave = async () => {
-    try {
-      const response = await fetch("/api/files/save", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ filename, contents: value }),
-      });
-
-      const res = await response.json();
-      if (res.success) {
-        toast.success(`${res.message}: ${filename}`);
-      } else {
-        toast.error(`저장 실패: ${res.message}`);
-      }
-    } catch (error) {
-      toast.error(`파일 저장에 실패했습니다: ${filename}`);
-    }
-  };
-
-  return (
-    <Button
-      type="button"
-      onClick={handleSave}
-      className="w-full"
-    >
-      저장
-    </Button>
-  );
+export interface FileViewerRef {
+  save: () => Promise<void>;
 }
 
 interface FileViewerProps {
   filePath: string;
   userLoginName: string;
 }
 
-export default function FileViewer({ filePath, userLoginName }: FileViewerProps) {
+const FileViewer = forwardRef<FileViewerRef, FileViewerProps>(function FileViewer({ filePath, userLoginName }, ref) {
   const [fileContent, setFileContent] = useState<string>("");
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -122,25 +83,43 @@ export default function FileViewer({ filePath, userLoginName }: FileViewerProps)
     );
   }
 
+  const handleSave = async () => {
+    try {
+      const response = await fetch("/api/files/save", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ filename: filePath, contents: editorValue }),
+      });
+
+      const res = await response.json();
+      if (res.success) {
+        toast.success(`${res.message}: ${filePath}`);
+      } else {
+        toast.error(`저장 실패: ${res.message}`);
+      }
+    } catch (error) {
+      toast.error(`파일 저장에 실패했습니다: ${filePath}`);
+    }
+  };
+
+  useImperativeHandle(ref, () => ({
+    save: handleSave,
+  }), [editorValue, filePath]);
+
   // Handle different file types
   if (isEditable) {
     return (
-      <EditorContext.Provider value={{ value: editorValue, setValue: setEditorValue }}>
-        <div className="h-full flex flex-col">
-          <div className="shrink-0 p-2 border-b border-border bg-muted">
-            <SaveButton filename={filePath} />
-          </div>
-          <div className="flex-1 min-h-0 overflow-auto p-4">
-            <Editor
-              filename={filePath}
-              contents={fileContent}
-              showSaveButton={false}
-              value={editorValue}
-              onChange={setEditorValue}
-            />
-          </div>
-        </div>
-      </EditorContext.Provider>
+      <div className="h-full overflow-auto p-4">
+        <Editor
+          filename={filePath}
+          contents={fileContent}
+          showSaveButton={false}
+          value={editorValue}
+          onChange={setEditorValue}
+        />
+      </div>
     );
   }
 
@@ -205,4 +184,6 @@ export default function FileViewer({ filePath, userLoginName }: FileViewerProps)
       </div>
     </div>
   );
-}
+});
+
+export default FileViewer;
