코드 에디터와 파일 목록

import { useCallback, useEffect, useRef, useState } from 'react';
import { useParams } from 'react-router';
import Editor from '@monaco-editor/react';
import type { editor } from 'monaco-editor';
import { io, type Socket } from 'socket.io-client';
import api, { API_URL } from '../api/axiosInstance';

interface FileInfo {
  id: string;
  name: string;
  path: string;
  content: string | null;
  type: string | null;
}
interface ProjectDetails {
  id: string;
  name: string;
  files: FileInfo[];
}
interface Ack {
  ok: boolean;
  content?: string;
  message?: string;
}

export default function EditorPage() {
  const { projectId } = useParams<{ projectId: string }>();
  const [project, setProject] = useState<ProjectDetails | null>(null);
  const [selectedFile, setSelectedFile] = useState<FileInfo | null>(null);
  const [content, setContent] = useState('');
  const [realtime, setRealtime] = useState(false);
  const [joined, setJoined] = useState(false);
  const [saving, setSaving] = useState(false);
  const [dirty, setDirty] = useState(false);
  const [selecting, setSelecting] = useState(false);
  const [status, setStatus] = useState('파일을 불러오는 중');
  const socketRef = useRef<Socket | null>(null);
  const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
  const timerRef = useRef<number | null>(null);
  const dirtyRef = useRef(false);
  const savingRef = useRef(false);
  const applyingRemoteRef = useRef(false);
  const generationRef = useRef(0);
  const selectionRef = useRef(0);
  const selectingRef = useRef(false);
  const conflictRef = useRef(false);

  const cancelTimer = useCallback(() => {
    if (timerRef.current !== null) window.clearTimeout(timerRef.current);
    timerRef.current = null;
  }, []);
  const markDirty = useCallback((value: boolean) => {
    dirtyRef.current = value;
    setDirty(value);
  }, []);
  const applyContent = useCallback((value: string) => {
    applyingRemoteRef.current = true;
    editorRef.current?.setValue(value);
    setContent(value);
    applyingRemoteRef.current = false;
  }, []);

  useEffect(() => {
    let active = true;
    ++selectionRef.current;
    cancelTimer();
    selectingRef.current = false;
    savingRef.current = false;
    markDirty(false);
    setSelecting(false);
    setSaving(false);
    setProject(null);
    setSelectedFile(null);
    api.get<ProjectDetails>(`/projects/${projectId}`).then(({ data }) => {
      if (!active) return;
      setProject(data);
      const first = data.files[0] ?? null;
      setSelectedFile(first);
      applyContent(first?.content ?? '');
      setStatus(first ? 'REST 저장 준비' : 'API로 파일을 먼저 만드세요.');
    }).catch(() => {
      if (active) setStatus('프로젝트 조회 실패: 토큰·프로젝트 ID를 확인하세요.');
    });
    return () => { active = false; };
  }, [projectId, applyContent, cancelTimer, markDirty]);

  useEffect(() => {
    setJoined(false);
    conflictRef.current = false;
    const generation = ++generationRef.current;
    if (!realtime || !projectId || !selectedFile) return;
    const socket = io(API_URL, {
      auth: { token: localStorage.getItem('accessToken') },
      reconnection: false,
    });
    socketRef.current = socket;
    const fileId = selectedFile.id;
    const active = () => generationRef.current === generation;
    socket.on('connect', () => {
      socket.timeout(3000).emit('join_file', { projectId, fileId },
        (error: Error | null, ack: Ack) => {
          if (!active()) return;
          if (error || !ack?.ok) {
            setStatus('파일 참가 실패: 토큰·ID·소유권을 확인하세요.');
            return;
          }
          applyContent(ack.content ?? '');
          setJoined(true);
          setStatus('협업 저장 준비');
        });
    });
    socket.on('code_update', (update: { fileId: string; changes: string }) => {
      if (!active() || update.fileId !== fileId) return;
      if (dirtyRef.current || savingRef.current) {
        conflictRef.current = true;
        cancelTimer();
        setJoined(false);
        setStatus('편집이 겹쳤습니다. 현재 내용을 복사한 뒤 페이지를 새로 불러오세요.');
        return;
      }
      applyContent(update.changes);
      setStatus('상대 변경 반영');
    });
    socket.on('connect_error', () => {
      if (active()) setStatus('Socket 인증·접속 실패');
    });
    socket.on('disconnect', () => {
      if (!active()) return;
      cancelTimer();
      setJoined(false);
      setStatus('연결이 끊겼습니다. 미저장 내용을 복사한 뒤 페이지를 새로 불러오세요.');
    });
    return () => {
      ++generationRef.current;
      cancelTimer();
      socket.removeAllListeners();
      socket.disconnect();
      socketRef.current = null;
    };
  }, [realtime, projectId, selectedFile?.id, applyContent, cancelTimer]);

  useEffect(() => () => {
    ++generationRef.current;
    ++selectionRef.current;
    cancelTimer();
  }, [cancelTimer]);

  const handleChange = (value: string | undefined, event: editor.IModelContentChangedEvent) => {
    // 초기 내용·상대 변경을 적용할 때는 새 저장 요청을 만들지 않습니다.
    if (value === undefined || applyingRemoteRef.current || event.isFlush ||
        !selectedFile || savingRef.current || selectingRef.current || (realtime && !joined)) return;
    setContent(value);
    markDirty(true);
    setStatus('마지막 입력 뒤 800ms에 저장');
    cancelTimer();
    const fileId = selectedFile.id;
    const generation = generationRef.current;
    timerRef.current = window.setTimeout(async () => {
      timerRef.current = null;
      savingRef.current = true;
      setSaving(true);
      setStatus('저장 응답을 기다리는 중');
      const complete = (ok: boolean, message: string) => {
        if (generation !== generationRef.current) return;
        savingRef.current = false;
        setSaving(false);
        if (conflictRef.current) return;
        if (ok) markDirty(false);
        setStatus(message);
      };
      if (realtime) {
        const socket = socketRef.current;
        if (!socket?.connected) {
          complete(false, '연결 없음: 현재 내용은 미저장입니다.');
          return;
        }
        socket.timeout(3000).emit('code_change', { projectId, fileId, changes: value },
          (error: Error | null, ack: Ack) => {
            if (error) complete(false, 'ACK timeout: GET으로 저장 내용을 확인하세요.');
            else complete(!!ack?.ok, ack?.ok ? '저장 완료' : ack?.message || '저장 거부');
          });
      } else {
        try {
          await api.patch(`/projects/${projectId}/files/${fileId}/content`, { content: value });
          complete(true, 'REST 저장 완료');
        } catch {
          complete(false, 'REST 저장 실패: 토큰·응답을 확인하세요.');
        }
      }
    }, 800);
  };

  const selectFile = async (file: FileInfo) => {
    if (dirtyRef.current || savingRef.current || selectingRef.current ||
        file.id === selectedFile?.id) return;
    selectingRef.current = true;
    setSelecting(true);
    const selection = ++selectionRef.current;
    cancelTimer();
    try {
      const { data } = await api.get<FileInfo>(`/projects/${projectId}/files/${file.id}`);
      if (selection !== selectionRef.current) return;
      ++generationRef.current;
      setJoined(false);
      setSelectedFile(data);
      applyContent(data.content ?? '');
      setStatus(realtime ? '파일 참가 중' : 'REST 저장 준비');
    } catch {
      if (selection === selectionRef.current) setStatus('파일 조회 실패: 토큰·파일 ID를 확인하세요.');
    } finally {
      if (selection === selectionRef.current) {
        selectingRef.current = false;
        setSelecting(false);
      }
    }
  };

  return <main>
    <h2>Project: {project?.name ?? 'Loading'}</h2>
    <label>
      <input type="checkbox" checked={realtime} disabled={dirty || saving || selecting}
        onChange={(event) => setRealtime(event.target.checked)} />협업 모드 사용
    </label>
    <p role="status">{status}</p>
    <div style={{ display: 'flex' }}>
      <aside style={{ width: '20%' }}>
        <h3>Files</h3>
        {project?.files.map((file) => <button key={file.id}
          disabled={dirty || saving || selecting} onClick={() => void selectFile(file)}>{file.name}</button>)}
      </aside>
      <section style={{ width: '80%' }}>
        <h3>Editing: {selectedFile?.path}</h3>
        {selectedFile && <Editor height="70vh" language={selectedFile.type || 'plaintext'}
          value={content} onMount={(instance) => { editorRef.current = instance; }}
          onChange={handleChange}
          options={{ readOnly: saving || selecting || (realtime && !joined), minimap: { enabled: false } }} />}
      </section>
    </div>
  </main>;
}