팀 지식 베이스 위키 - 문서 버전 관리 & 검색
team-knowledge-base-wiki
문제 설명
프로젝트 개요
팀 내부에서 사용하는 지식 베이스 위키 시스템을 만듭니다. 마크다운으로 문서를 작성하고, 카테고리별로 정리하며, 문서 버전 히스토리를 추적할 수 있습니다. Laravel + Inertia.js + React로 구현하여 SPA 경험을 제공하면서도 서버 사이드 렌더링의 장점을 활용합니다.
필수 기능
- 문서 CRUD: 마크다운 에디터로 문서 작성/수정/삭제
- 카테고리 관리: 문서를 카테고리별로 분류 (개발, 디자인, 마케팅 등)
- 버전 히스토리: 문서 수정 시 이전 버전 자동 저장 및 비교 기능
- 전체 검색: 제목과 내용 전체에서 키워드 검색
- 마크다운 프리뷰: 실시간 마크다운 렌더링
- 최근 수정 문서: 대시보드에 최근 업데이트된 문서 목록 표시
- 태그 시스템: 문서에 다중 태그 추가 및 태그별 필터링
보너스 기능
- 문서 즐겨찾기 기능
- 댓글/피드백 시스템
- 문서 공유 링크 생성
- 다크모드 지원
- 문서 내 목차(TOC) 자동 생성
제약 조건
- • Laravel 12.x + Inertia.js + React 19 모노리스 구조 (별도 API 라우트 없음)
- • Laravel Breeze (React + Inertia) starter kit 사용
- • SQLite 데이터베이스 사용
- • 마크다운 파싱 라이브러리 사용 (react-markdown 또는 marked.js)
- • Tailwind CSS로 스타일링
- • Laravel Eloquent ORM으로 DB 관리
- • 문서 버전은 별도 테이블에 저장
- • 검색 기능은 Laravel의 where + like 쿼리 사용
프롬프트 레시피
아래 프롬프트를 순서대로 AI에게 보내면 됩니다. 복사 버튼을 눌러 바로 사용하세요.
Laravel 12.x + Inertia.js + React 19 프로젝트를 생성해주세요. 요구사항: - Laravel Breeze with React and Inertia.js starter kit 사용 - SQLite 데이터베이스 설정 - Tailwind CSS 포함 - 기본 인증 시스템 (로그인/회원가입) 포함 프로젝트 구조: - Laravel 백엔드 (컨트롤러, 모델, 마이그레이션) - Inertia.js로 Laravel과 React 연결 - React 컴포넌트는 resources/js/Pages/ 디렉토리에 위치 초기 설정 후 localhost에서 실행 가능하도록 구성해주세요.
기대 결과: Laravel Breeze + Inertia + React 프로젝트가 생성되고, 기본 인증 페이지(로그인/회원가입)가 작동합니다. SQLite 데이터베이스가 설정되어 있고, Tailwind CSS가 적용된 상태입니다.
지식 베이스 위키의 데이터베이스 스키마를 설계하고 마이그레이션을 생성해주세요. 필요한 테이블: 1. **categories** 테이블 - id (primary key) - name (string, unique) - slug (string, unique) - description (text, nullable) - created_at, updated_at 2. **documents** 테이블 - id (primary key) - user_id (foreign key to users) - category_id (foreign key to categories, nullable) - title (string) - slug (string, unique) - content (longtext, 마크다운) - version (integer, default 1) - is_published (boolean, default true) - created_at, updated_at 3. **document_versions** 테이블 - id (primary key) - document_id (foreign key to documents) - version_number (integer) - title (string) - content (longtext) - changed_by (foreign key to users) - created_at 4. **tags** 테이블 - id (primary key) - name (string, unique) - created_at, updated_at 5. **document_tag** 테이블 (pivot) - document_id (foreign key) - tag_id (foreign key) Eloquent 모델도 함께 생성해주세요: - Category, Document, DocumentVersion, Tag - 모델 간 관계 설정 (hasMany, belongsTo, belongsToMany)
기대 결과: 5개의 마이그레이션 파일과 4개의 Eloquent 모델이 생성됩니다. 모델에는 적절한 관계(relationships)가 정의되어 있고, php artisan migrate 실행 시 모든 테이블이 생성됩니다.
대시보드와 문서 목록 페이지를 구현해주세요.
**Laravel 컨트롤러 (app/Http/Controllers/DocumentController.php)**:
- index() 메서드: 모든 문서 목록을 카테고리, 작성자 정보와 함께 조회
- Inertia::render('Documents/Index', [...])로 React 컴포넌트에 데이터 전달
- 최근 수정 순으로 정렬
- 페이지네이션 적용 (15개씩)
**React 컴포넌트 (resources/js/Pages/Documents/Index.jsx)**:
- 문서 목록을 카드 형태로 표시
- 각 카드에 제목, 카테고리 배지, 작성자, 수정일 표시
- 검색 바 UI (아직 기능은 없어도 됨)
- "새 문서 작성" 버튼
- Tailwind CSS로 깔끔한 그리드 레이아웃
**라우트 (routes/web.php)**:
- GET /documents -> DocumentController@index
테스트용 시더(Seeder)도 만들어서 카테고리 3개, 문서 10개 정도 생성해주세요.
기대 결과: /documents 경로에 접속하면 문서 목록이 카드 형태로 표시됩니다. 시더 데이터가 들어가 있어서 실제 문서들이 보입니다. 검색 바와 새 문서 작성 버튼이 UI에 배치되어 있습니다.
문서 작성 및 수정 기능을 구현해주세요.
**Laravel 컨트롤러 메서드 추가**:
- create(): 새 문서 작성 폼 렌더링 (카테고리 목록 전달)
- store(Request $request): 문서 저장
- title, content, category_id, tags 검증
- slug 자동 생성 (Str::slug 사용)
- 문서 저장 시 document_versions 테이블에도 첫 버전 저장
- 태그 처리 (없으면 생성, 있으면 연결)
- edit($id): 문서 수정 폼 (기존 데이터, 카테고리, 태그 전달)
- update(Request $request, $id): 문서 업데이트
- version 번호 증가
- 새 버전을 document_versions에 저장
- 태그 동기화
**React 컴포넌트**:
- Documents/Create.jsx: 문서 작성 폼
- 제목 입력
- 카테고리 선택 (드롭다운)
- 마크다운 에디터 (textarea)
- 실시간 마크다운 프리뷰 (react-markdown 사용)
- 태그 입력 (쉼표로 구분)
- 저장 버튼
- Documents/Edit.jsx: 문서 수정 폼 (Create와 유사, 기존 데이터 채워짐)
**라우트 추가**:
- GET /documents/create
- POST /documents
- GET /documents/{id}/edit
- PUT /documents/{id}
react-markdown 패키지를 npm으로 설치해주세요.
기대 결과: 문서 작성 및 수정 페이지가 작동합니다. 마크다운 에디터에 입력하면 오른쪽에 실시간 프리뷰가 표시됩니다. 문서 저장 시 데이터베이스에 저장되고, 버전 히스토리도 자동으로 기록됩니다. 태그도 함께 저장됩니다.
문서 상세 페이지와 버전 히스토리 기능을 구현해주세요.
**Laravel 컨트롤러 메서드 추가**:
- show($id): 문서 상세 정보 조회
- 문서 내용, 카테고리, 태그, 작성자 정보 포함
- 마크다운을 HTML로 변환해서 전달 (또는 React에서 렌더링)
- Inertia::render('Documents/Show', [...])
- versions($id): 특정 문서의 버전 히스토리 목록
- document_versions 테이블에서 해당 문서의 모든 버전 조회
- 버전 번호, 수정자, 수정 시간 포함
- showVersion($documentId, $versionId): 특정 버전의 내용 조회
**React 컴포넌트**:
- Documents/Show.jsx: 문서 상세 페이지
- 제목, 카테고리 배지, 태그 목록
- 마크다운 렌더링된 내용 표시 (react-markdown)
- "수정" 버튼, "버전 히스토리" 버튼
- 작성자 및 최종 수정일 표시
- Documents/Versions.jsx: 버전 히스토리 목록
- 각 버전을 타임라인 형태로 표시
- 버전 번호, 수정자, 수정 시간
- 각 버전 클릭 시 해당 버전 내용 모달로 표시
**라우트 추가**:
- GET /documents/{id}
- GET /documents/{id}/versions
- GET /documents/{id}/versions/{versionId}
Tailwind CSS로 타임라인 UI를 구현해주세요.
기대 결과: 문서 상세 페이지에서 마크다운이 예쁘게 렌더링되어 보입니다. 버전 히스토리 버튼을 클릭하면 타임라인 형태로 모든 수정 내역이 표시되고, 각 버전을 클릭하면 그 시점의 내용을 볼 수 있습니다.
검색 기능과 필터링을 구현해주세요. **Laravel 컨트롤러 메서드 수정**: - DocumentController@index 메서드 업데이트: - 쿼리 파라미터로 search, category, tag 받기 - search가 있으면 title과 content에서 LIKE 검색 - category가 있으면 해당 카테고리로 필터링 - tag가 있으면 해당 태그를 가진 문서만 필터링 - 검색 결과도 페이지네이션 적용 **React 컴포넌트 업데이트**: - Documents/Index.jsx 수정: - 검색 바에 실제 검색 기능 연결 - 카테고리 필터 드롭다운 추가 - 태그 필터 (인기 태그 목록 표시, 클릭 시 필터링) - Inertia의 router.get()을 사용해 검색/필터 시 페이지 새로고침 없이 데이터 갱신 - 현재 적용된 필터를 배지 형태로 표시 - 필터 초기화 버튼 **추가 컨트롤러 메서드**: - CategoryController@index: 모든 카테고리 목록 (문서 개수 포함) - TagController@popular: 인기 태그 Top 10 **라우트 추가**: - GET /categories - GET /tags/popular 검색 결과가 없을 때 "결과 없음" 메시지도 표시해주세요.
기대 결과: 검색 바에 키워드를 입력하면 실시간으로 문서가 필터링됩니다. 카테고리와 태그 필터도 작동하며, 여러 필터를 동시에 적용할 수 있습니다. 현재 적용된 필터가 배지로 표시되고, 페이지 새로고침 없이 부드럽게 결과가 업데이트됩니다.