팀 지식 베이스 위키 - 문서 버전 관리 & 검색 - 바이브코딩 레시피
중급 PHP + JavaScript Laravel + React + Inertia.js AI: Claude

팀 지식 베이스 위키 - 문서 버전 관리 & 검색

리포지토리명 team-knowledge-base-wiki
조회수 86 1건 제출

문제 설명

프로젝트 개요

팀 내부에서 사용하는 지식 베이스 위키 시스템을 만듭니다. 마크다운으로 문서를 작성하고, 카테고리별로 정리하며, 문서 버전 히스토리를 추적할 수 있습니다. 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에게 보내면 됩니다. 복사 버튼을 눌러 바로 사용하세요.

1
Step 1
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가 적용된 상태입니다.

2
Step 2
지식 베이스 위키의 데이터베이스 스키마를 설계하고 마이그레이션을 생성해주세요.

필요한 테이블:

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 실행 시 모든 테이블이 생성됩니다.

3
Step 3
대시보드와 문서 목록 페이지를 구현해주세요.

**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에 배치되어 있습니다.

4
Step 4
문서 작성 및 수정 기능을 구현해주세요.

**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으로 설치해주세요.

기대 결과: 문서 작성 및 수정 페이지가 작동합니다. 마크다운 에디터에 입력하면 오른쪽에 실시간 프리뷰가 표시됩니다. 문서 저장 시 데이터베이스에 저장되고, 버전 히스토리도 자동으로 기록됩니다. 태그도 함께 저장됩니다.

5
Step 5
문서 상세 페이지와 버전 히스토리 기능을 구현해주세요.

**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를 구현해주세요.

기대 결과: 문서 상세 페이지에서 마크다운이 예쁘게 렌더링되어 보입니다. 버전 히스토리 버튼을 클릭하면 타임라인 형태로 모든 수정 내역이 표시되고, 각 버전을 클릭하면 그 시점의 내용을 볼 수 있습니다.

6
Step 6
검색 기능과 필터링을 구현해주세요.

**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

검색 결과가 없을 때 "결과 없음" 메시지도 표시해주세요.

기대 결과: 검색 바에 키워드를 입력하면 실시간으로 문서가 필터링됩니다. 카테고리와 태그 필터도 작동하며, 여러 필터를 동시에 적용할 수 있습니다. 현재 적용된 필터가 배지로 표시되고, 페이지 새로고침 없이 부드럽게 결과가 업데이트됩니다.

제출된 작품 (1)

로그인 후 제출

팀 지식 베이스 위키

리자
리자
· Claude Code

문서 버전 관리와 검색 기능을 갖춘 팀 협업용 지식 관리 시스템

조회수 89 댓글수 0 추천수 0

댓글 (0)

로그인 후 댓글을 남길 수 있습니다.
아직 댓글이 없습니다. 첫 번째 댓글을 남겨보세요!