팀 문서 공동 편집기 - 버전 히스토리 & 실시간 알림

mkdir team-document-collaborative-editor && cd team-document-collaborative-editor

이 폴더에서 Laravel 13.x + Inertia.js + React 19 프로젝트를 생성합니다.

다음 작업을 수행해주세요:

1. Laravel Breeze (React + Inertia) starter kit으로 프로젝트 초기화
   - `composer create-project laravel/laravel . "13.*"`
   - `composer require laravel/breeze --dev`
   - `php artisan breeze:install react --inertia`
   - `npm install`

2. .env 파일 설정
   - DB_CONNECTION=sqlite
   - DB_DATABASE=database/database.sqlite 경로 설정
   - database/database.sqlite 파일 생성

3. 기본 마이그레이션 실행
   - `php artisan migrate`

4. 개발 서버 실행 확인
   - `php artisan serve` (백엔드)
   - `npm run dev` (프론트엔드)
   - 브라우저에서 localhost:8000 접속하여 Laravel Breeze 기본 화면 확인

5. 프로젝트 구조 확인
   - app/Http/Controllers/ (Laravel 컨트롤러)
   - resources/js/Pages/ (React 페이지 컴포넌트)
   - routes/web.php (라우트 정의)

모든 설정이 완료되면 "Laravel + Inertia + React 프로젝트 초기화 완료" 메시지를 출력해주세요.

문서(Document)와 버전(DocumentVersion) 모델 및 마이그레이션을 생성합니다.

다음 작업을 수행해주세요:

1. Document 모델 및 마이그레이션 생성
   - `php artisan make:model Document -m`
   - 마이그레이션 파일에 다음 컬럼 추가:
     - title (string, 255)
     - content (text, nullable)
     - user_id (foreignId, users 테이블 참조, onDelete cascade)
     - last_edited_at (timestamp, nullable)
     - timestamps

2. DocumentVersion 모델 및 마이그레이션 생성
   - `php artisan make:model DocumentVersion -m`
   - 마이그레이션 파일에 다음 컬럼 추가:
     - document_id (foreignId, documents 테이블 참조, onDelete cascade)
     - version_number (integer)
     - title (string, 255)
     - content (text, nullable)
     - user_id (foreignId, users 테이블 참조)
     - timestamps

3. 모델 관계 설정
   - Document 모델:
     - belongsTo(User::class)
     - hasMany(DocumentVersion::class)
   - DocumentVersion 모델:
     - belongsTo(Document::class)
     - belongsTo(User::class)

4. 마이그레이션 실행
   - `php artisan migrate`

5. Document 모델에 fillable 속성 추가
   - ['title', 'content', 'user_id', 'last_edited_at']

6. DocumentVersion 모델에 fillable 속성 추가
   - ['document_id', 'version_number', 'title', 'content', 'user_id']

완료되면 "Document 및 DocumentVersion 모델 생성 완료" 메시지를 출력해주세요.

문서 목록 및 생성 기능을 구현합니다.

다음 작업을 수행해주세요:

1. DocumentController 생성
   - `php artisan make:controller DocumentController`

2. DocumentController에 index 메서드 구현
   - 로그인한 사용자의 모든 문서를 최근 수정순(last_edited_at desc)으로 조회
   - 검색어(query 파라미터)가 있으면 제목으로 필터링
   - Inertia::render('Documents/Index', ['documents' => $documents]) 반환

3. DocumentController에 create 메서드 구현
   - Inertia::render('Documents/Create') 반환

4. DocumentController에 store 메서드 구현
   - 요청 검증: title(required, max:255), content(nullable)
   - Document 생성 (user_id는 auth()->id(), last_edited_at은 now())
   - 첫 번째 버전(version_number = 1)을 DocumentVersion에 저장
   - 문서 목록으로 리다이렉트

5. routes/web.php에 라우트 추가
   - Route::middleware('auth')->group(function () {
       Route::get('/documents', [DocumentController::class, 'index'])->name('documents.index');
       Route::get('/documents/create', [DocumentController::class, 'create'])->name('documents.create');
       Route::post('/documents', [DocumentController::class, 'store'])->name('documents.store');
     });

6. React 페이지 컴포넌트 생성
   - resources/js/Pages/Documents/Index.jsx
     - 문서 목록을 테이블로 표시 (제목, 최종 수정일, 작성자)
     - 검색 입력 필드 (Inertia.get()으로 검색)
     - "새 문서 작성" 버튼 (Inertia.visit('/documents/create'))
   - resources/js/Pages/Documents/Create.jsx
     - 제목, 내용 입력 폼
     - Inertia.post('/documents', data)로 제출
     - Tailwind CSS로 스타일링

7. 네비게이션 메뉴에 "문서" 링크 추가
   - resources/js/Layouts/AuthenticatedLayout.jsx에 문서 목록 링크 추가

완료되면 "문서 목록 및 생성 기능 구현 완료" 메시지를 출력해주세요.

문서 상세 조회 및 편집 기능을 구현합니다.

다음 작업을 수행해주세요:

1. DocumentController에 show 메서드 구현
   - Document와 user, versions 관계를 eager load하여 조회
   - Inertia::render('Documents/Show', ['document' => $document]) 반환

2. DocumentController에 edit 메서드 구현
   - Document 조회 (작성자 본인만 수정 가능하도록 검증)
   - Inertia::render('Documents/Edit', ['document' => $document]) 반환

3. DocumentController에 update 메서드 구현
   - 요청 검증: title(required, max:255), content(nullable)
   - 기존 문서의 최신 버전 번호 조회
   - 새 버전(version_number + 1)을 DocumentVersion에 저장
   - Document의 title, content, last_edited_at 업데이트
   - 문서 상세 페이지로 리다이렉트

4. routes/web.php에 라우트 추가
   - Route::get('/documents/{document}', [DocumentController::class, 'show'])->name('documents.show');
   - Route::get('/documents/{document}/edit', [DocumentController::class, 'edit'])->name('documents.edit');
   - Route::put('/documents/{document}', [DocumentController::class, 'update'])->name('documents.update');

5. React 페이지 컴포넌트 생성
   - resources/js/Pages/Documents/Show.jsx
     - 문서 제목, 내용(Markdown 렌더링), 작성자, 최종 수정일 표시
     - react-markdown 라이브러리 설치 및 사용 (`npm install react-markdown`)
     - "편집" 버튼 (작성자 본인만 표시)
     - "목록으로" 버튼
   - resources/js/Pages/Documents/Edit.jsx
     - 제목, 내용 입력 폼 (기존 값 pre-fill)
     - Markdown 프리뷰 토글 버튼 (useState로 프리뷰 모드 관리)
     - Inertia.put(`/documents/${document.id}`, data)로 제출
     - Tailwind CSS로 스타일링

6. Documents/Index.jsx 수정
   - 문서 제목 클릭 시 상세 페이지로 이동 (Inertia.visit())

완료되면 "문서 상세 조회 및 편집 기능 구현 완료" 메시지를 출력해주세요.

버전 히스토리 조회 및 복원 기능을 구현합니다.

다음 작업을 수행해주세요:

1. DocumentController에 versions 메서드 구현
   - Document의 모든 버전을 최신순으로 조회 (user 관계 포함)
   - Inertia::render('Documents/Versions', ['document' => $document, 'versions' => $versions]) 반환

2. DocumentController에 restore 메서드 구현
   - 특정 버전(DocumentVersion)을 조회
   - 해당 버전의 title, content를 Document에 반영
   - 새 버전(복원 버전)을 DocumentVersion에 저장
   - last_edited_at 업데이트
   - 문서 상세 페이지로 리다이렉트 ("버전 X로 복원되었습니다" 플래시 메시지)

3. routes/web.php에 라우트 추가
   - Route::get('/documents/{document}/versions', [DocumentController::class, 'versions'])->name('documents.versions');
   - Route::post('/documents/{document}/versions/{version}/restore', [DocumentController::class, 'restore'])->name('documents.versions.restore');

4. React 페이지 컴포넌트 생성
   - resources/js/Pages/Documents/Versions.jsx
     - 버전 목록을 카드 형태로 표시 (버전 번호, 수정 시간, 수정자)
     - 각 버전 클릭 시 해당 버전의 title, content 프리뷰 표시 (모달 또는 아코디언)
     - "이 버전으로 복원" 버튼 (Inertia.post()로 복원 요청)
     - 현재 버전 표시 (최신 버전 강조)
     - Tailwind CSS로 스타일링

5. Documents/Show.jsx 수정
   - "버전 히스토리" 버튼 추가 (Inertia.visit('/documents/{id}/versions'))

6. 플래시 메시지 표시
   - resources/js/Layouts/AuthenticatedLayout.jsx에 flash 메시지 표시 로직 추가
   - Laravel 세션 flash('success', '메시지')를 Inertia props로 전달

완료되면 "버전 히스토리 조회 및 복원 기능 구현 완료" 메시지를 출력해주세요.

문서 수정 알림 및 삭제 기능을 구현하여 프로젝트를 완성합니다.

다음 작업을 수행해주세요:

1. 문서 삭제 기능 구현
   - DocumentController에 destroy 메서드 추가
     - Document 및 관련 버전 삭제 (onDelete cascade로 자동 처리)
     - 문서 목록으로 리다이렉트
   - routes/web.php에 라우트 추가
     - Route::delete('/documents/{document}', [DocumentController::class, 'destroy'])->name('documents.destroy');
   - Documents/Show.jsx에 "삭제" 버튼 추가 (작성자만 표시, 확인 다이얼로그 포함)

2. 문서 수정 알림 기능 구현 (폴링 방식)
   - DocumentController에 checkUpdates 메서드 추가
     - 클라이언트가 마지막으로 확인한 시간(last_check) 이후 수정된 문서 목록 반환
     - JSON 응답: { updated_documents: [{id, title, last_edited_at}] }
   - routes/web.php에 라우트 추가
     - Route::get('/documents/check-updates', [DocumentController::class, 'checkUpdates'])->name('documents.checkUpdates');
   - Documents/Show.jsx 수정
     - useEffect로 5초마다 fetch('/documents/check-updates?last_check={timestamp}') 호출
     - 현재 보고 있는 문서가 수정되었으면 상단에 알림 배너 표시 ("이 문서가 수정되었습니다. 새로고침하시겠습니까?")
     - 새로고침 버튼 클릭 시 페이지 리로드 (Inertia.reload())

3. 검색 기능 개선
   - Documents/Index.jsx에 검색 입력 필드 추가
   - 입력값 변경 시 debounce 처리 (lodash.debounce 사용)
   - Inertia.get('/documents', { query: searchTerm }, { preserveState: true })로 검색

4. UI/UX 개선
   - 문서 목록에 페이지네이션 추가 (Laravel paginate() + Inertia Links)
   - 버튼 hover 효과, 로딩 상태 표시
   - 반응형 디자인 (모바일/태블릿 대응)

5. README.md 작성
   - 프로젝트 개요, 기능 목록, 설치 방법, 실행 방법 작성
   - 스크린샷 추가 (선택)

6. 최종 테스트
   - 문서 생성/수정/삭제 동작 확인
   - 버전 히스토리 및 복원 동작 확인
   - 알림 폴링 동작 확인
   - 검색 기능 확인

완료되면 "팀 문서 공동 편집기 프로젝트 완성" 메시지를 출력하고, 주요 기능 및 접근 URL을 요약해주세요.