📂 File System Access API 완벽 가이드: 브라우저에서 사용자 로컬 파일을 직접 열고 수정하는 차세대 웹 I/O

// 파일 열기 옵션 설정
const pickerOptions = {
  types: [
    {
      description: '텍스트 및 마크다운 파일',
      accept: {
        'text/plain': ['.txt', '.md'],
        'text/markdown': ['.md']
      }
    }
  ],
  excludeAcceptAllOption: false,
  multiple: false // true 지정 시 여러 파일 선택 가능
};

async function openFile() {
  try {
    // 1. 파일 선택 창 표시 및 핸들 배열 반환
    const [fileHandle] = await window.showOpenFilePicker(pickerOptions);
    
    // 2. File 객체 획득 (메모리 상의 스냅샷)
    const file = await fileHandle.getFile();
    
    // 3. 내용 읽기
    const content = await file.text();
    console.log(`파일명: ${file.name}, 파일 크기: ${file.size} bytes`);
    
    return { fileHandle, content };
  } catch (err) {
    if (err.name === 'AbortError') {
      console.log('사용자가 파일 선택을 취소했습니다.');
    } else {
      console.error('파일 열기 중 오류 발생:', err);
    }
  }
}

async function saveFileContent(fileHandle, newContent) {
  try {
    // 1. 쓰기 가능한 스트림 생성
    // (이 시점에 OS 레벨에서 임시 백업 파일이 생성됨)
    const writable = await fileHandle.createWritable();
    
    // 2. 데이터 쓰기 (Blob, ArrayBuffer, TypedArray, string 모두 지원)
    await writable.write(newContent);
    
    // 3. 스트림 닫기
    // (close가 성공적으로 호출되는 순간 원본 파일에 원자적으로 커밋됨)
    await writable.close();
    
    console.log('파일 저장 완료!');
  } catch (err) {
    console.error('파일 저장 실패:', err);
  }
}

async function saveNewFile(data) {
  const options = {
    suggestedName: 'untitled.md',
    types: [{
      description: 'Markdown File',
      accept: { 'text/markdown': ['.md'] }
    }]
  };

  try {
    // 사용자가 저장 위치와 파일 이름을 선택
    const handle = await window.showSaveFilePicker(options);
    
    const writable = await handle.createWritable();
    await writable.write(data);
    await writable.close();
    
    // 이제 handle을 보관하면 추후 Ctrl+S로 계속 저장 가능!
    return handle;
  } catch (err) {
    if (err.name !== 'AbortError') {
      console.error('새 파일 저장 에러:', err);
    }
  }
}

async function readWorkspace() {
  try {
    const dirHandle = await window.showDirectoryPicker({
      mode: 'readwrite' // 'read' 또는 'readwrite'
    });
    
    console.log(`선택한 디렉토리명: ${dirHandle.name}`);
    
    // 디렉토리 내부 파일 및 폴더 재귀 순회
    for await (const [name, handle] of dirHandle.entries()) {
      if (handle.kind === 'file') {
        console.log(`📄 파일: ${name}`);
      } else if (handle.kind === 'directory') {
        console.log(`📁 폴더: ${name}`);
      }
    }
    
    // 특정 파일 생성 또는 가져오기
    const newFileHandle = await dirHandle.getFileHandle('config.json', { create: true });
    
    // 파일 삭제
    // await dirHandle.removeEntry('old-file.txt');
    
  } catch (err) {
    console.error('디렉토리 접근 에러:', err);
  }
}

async function verifyPermission(fileHandle, readWrite) {
  const options = {};
  if (readWrite) {
    options.mode = 'readwrite';
  }
  
  // 1. 현재 권한 상태 확인 ('granted', 'denied', 'prompt')
  if ((await fileHandle.queryPermission(options)) === 'granted') {
    return true;
  }
  
  // 2. 권한 프롬프트 표시
  if ((await fileHandle.requestPermission(options)) === 'granted') {
    return true;
  }
  
  return false;
}

import React, { useState, useEffect, useRef } from 'react';

export function MarkdownEditor() {
  const [content, setContent] = useState('');
  const [fileName, setFileName] = useState('열린 파일 없음');
  const handleRef = useRef(null);

  // 키보드 단축키 Ctrl+S / Cmd+S 바인딩
  useEffect(() => {
    const handleKeyDown = (e) => {
      if ((e.ctrlKey || e.metaKey) && e.key === 's') {
        e.preventDefault();
        saveCurrentFile();
      }
    };
    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [content]);

  // 파일 열기
  const openFile = async () => {
    try {
      const [handle] = await window.showOpenFilePicker({
        types: [{ accept: { 'text/markdown': ['.md'], 'text/plain': ['.txt'] } }]
      });
      
      const file = await handle.getFile();
      const text = await file.text();
      
      handleRef.current = handle;
      setFileName(file.name);
      setContent(text);
    } catch (err) {
      if (err.name !== 'AbortError') alert('파일 열기 실패');
    }
  };

  // 파일 저장 (기존 파일 원본 수정)
  const saveCurrentFile = async () => {
    if (!handleRef.current) {
      return saveAsNewFile();
    }
    
    try {
      const writable = await handleRef.current.createWritable();
      await writable.write(content);
      await writable.close();
      alert('저장되었습니다!');
    } catch (err) {
      console.error(err);
      alert('저장 중 오류가 발생했습니다.');
    }
  };

  // 다른 이름으로 저장
  const saveAsNewFile = async () => {
    try {
      const handle = await window.showSaveFilePicker({
        suggestedName: 'document.md',
        types: [{ accept: { 'text/markdown': ['.md'] } }]
      });
      const writable = await handle.createWritable();
      await writable.write(content);
      await writable.close();
      
      handleRef.current = handle;
      setFileName(handle.name);
      alert('새 파일로 저장되었습니다.');
    } catch (err) {
      if (err.name !== 'AbortError') alert('저장 실패');
    }
  };

  return (
    <div style={{ padding: '20px', fontFamily: 'sans-serif' }}>
      <div style={{ marginBottom: '10px', display: 'flex', gap: '10px', alignItems: 'center' }}>
        <button onClick={openFile}>📂 파일 열기</button>
        <button onClick={saveCurrentFile}>💾 저장 (Ctrl+S)</button>
        <button onClick={saveAsNewFile}>📝 다른 이름으로 저장</button>
        <span>현재 파일: <strong>{fileName}</strong></span>
      </div>
      <textarea
        value={content}
        onChange={(e) => setContent(e.target.value)}
        rows={20}
        style={{ width: '100%', fontFamily: 'monospace', fontSize: '14px' }}
      />
    </div>
  );
}