개발자 북마크 태그 라이브러리 - 바이브코딩 레시피
입문 PHP Laravel AI: Claude

개발자 북마크 태그 라이브러리

리포지토리명 dev-bookmark-tag-library
조회수 143 1건 제출

문제 설명

📚 개발자 북마크 태그 라이브러리

개발자들이 유용한 링크를 태그 기반으로 정리하고 검색할 수 있는 북마크 관리 시스템입니다. Laravel 13.x + Blade 템플릿으로 구현하며, 태그를 통한 필터링과 검색 기능을 제공합니다.

필수 기능

  • 북마크 추가/수정/삭제 (제목, URL, 설명, 태그)
  • 태그는 쉼표로 구분하여 입력 (예: "Laravel, PHP, Backend")
  • 태그별 필터링 기능 (태그 클릭 시 해당 태그가 포함된 북마크만 표시)
  • 북마크 제목/설명 검색 기능
  • 태그 클라우드 (사용 빈도에 따라 태그 크기 다르게 표시)
  • 북마크 카드 형태로 깔끔하게 표시 (Tailwind CSS 사용)
  • SQLite 데이터베이스 사용

선택 추가 기능 (보너스)

  • 북마크 즐겨찾기 기능 (별표 아이콘)
  • 북마크 방문 횟수 카운트
  • 최근 추가된 북마크 하이라이트
  • 태그별 북마크 개수 뱃지
  • 다크 모드 토글
  • URL 유효성 검사 및 파비콘 자동 표시

제약 조건

  • • Laravel 13.x 프레임워크 사용 (최신 버전)
  • • Blade 템플릿 엔진만 사용 (React/Vue 등 SPA 프레임워크 사용 금지)
  • • Tailwind CSS로 스타일링
  • • SQLite 데이터베이스 사용
  • • Eloquent ORM으로 데이터베이스 조작
  • • 라우트는 web.php에 정의
  • • 폼 검증은 Laravel Validation 사용
  • • Blade 컴포넌트를 활용하여 UI 재사용성 높이기
  • • 태그는 단순 문자열 배열로 저장 (별도 tags 테이블 불필요)

프롬프트 레시피

아래 프롬프트를 순서대로 AI에게 보내면 됩니다. 복사 버튼을 눌러 바로 사용하세요.

1
Step 1
mkdir dev-bookmark-tag-library && cd dev-bookmark-tag-library

이 폴더에서 Laravel 13.x 프로젝트를 시작합니다.

Laravel 13.x 프로젝트를 생성하고 기본 설정을 완료해주세요.

요구사항:
1. Laravel 13.x 최신 버전으로 프로젝트 생성
2. .env 파일에서 데이터베이스를 SQLite로 설정 (DB_CONNECTION=sqlite)
3. database/database.sqlite 파일 생성
4. Tailwind CSS 설치 및 설정 (Laravel Mix 또는 Vite 사용)
5. 기본 레이아웃 Blade 파일 생성 (resources/views/layouts/app.blade.php)
   - Tailwind CSS 포함
   - 헤더에 "📚 개발자 북마크 라이브러리" 제목
   - 깔끔한 네비게이션 바
   - 반응형 컨테이너
6. Welcome 페이지를 간단한 대시보드로 수정하여 레이아웃 테스트

레이아웃은 모던하고 개발자 친화적인 디자인으로 만들어주세요.

기대 결과: Laravel 13.x 프로젝트가 생성되고, SQLite 데이터베이스가 설정되며, Tailwind CSS가 적용된 기본 레이아웃이 완성됩니다. 브라우저에서 접속 시 깔끔한 헤더와 네비게이션이 보여야 합니다.

2
Step 2
북마크 데이터베이스 구조를 설계하고 마이그레이션을 생성해주세요.

요구사항:
1. bookmarks 테이블 마이그레이션 생성
   - id (primary key)
   - title (string, 북마크 제목)
   - url (string, 링크 URL)
   - description (text, nullable, 설명)
   - tags (json, 태그 배열 저장)
   - is_favorite (boolean, default false, 즐겨찾기 여부)
   - visit_count (integer, default 0, 방문 횟수)
   - timestamps (created_at, updated_at)

2. Bookmark 모델 생성 (app/Models/Bookmark.php)
   - $fillable 속성 정의
   - tags 컬럼을 배열로 자동 캐스팅 (protected $casts)
   - 최신순 정렬 스코프 메서드 (scopeLatest)
   - 즐겨찾기만 필터링하는 스코프 메서드 (scopeFavorites)

3. 마이그레이션 실행

4. 테스트용 시더 생성 (DatabaseSeeder.php)
   - 10개 정도의 샘플 북마크 데이터 생성
   - 다양한 태그 조합 ("Laravel", "PHP", "JavaScript", "React", "Tailwind", "API", "Database" 등)
   - 시더 실행

모델과 마이그레이션이 Laravel 13.x 최신 문법을 따르도록 작성해주세요.

기대 결과: bookmarks 테이블이 생성되고, Bookmark 모델이 완성되며, 10개의 샘플 데이터가 데이터베이스에 저장됩니다. php artisan tinker로 Bookmark::all()을 실행하면 데이터가 조회되어야 합니다.

3
Step 3
북마크 목록을 표시하는 메인 페이지와 컨트롤러를 구현해주세요.

요구사항:
1. BookmarkController 생성 (app/Http/Controllers/BookmarkController.php)
   - index 메서드: 모든 북마크를 최신순으로 조회하여 뷰에 전달
   - 태그 필터링 기능 (쿼리 파라미터 ?tag=Laravel 형태)
   - 검색 기능 (쿼리 파라미터 ?search=키워드 형태)

2. 라우트 정의 (routes/web.php)
   - GET / -> BookmarkController@index (북마크 목록)

3. 북마크 목록 뷰 생성 (resources/views/bookmarks/index.blade.php)
   - 상단에 검색창 (제목/설명 검색)
   - 태그 클라우드 섹션 (모든 태그를 빈도순으로 표시, 크기 차등)
   - 북마크 카드 그리드 레이아웃 (Tailwind CSS 사용)
   - 각 카드에 표시:
     * 제목 (클릭 시 URL로 이동, 새 탭)
     * 설명
     * 태그 배지들 (클릭 시 해당 태그로 필터링)
     * 즐겨찾기 별 아이콘 (채워진/빈 별)
     * 방문 횟수
     * 등록일
   - 반응형 그리드 (모바일 1열, 태블릿 2열, 데스크탑 3열)

4. Blade 컴포넌트 생성 (resources/views/components/bookmark-card.blade.php)
   - 북마크 카드 UI를 재사용 가능한 컴포넌트로 분리

디자인은 깔끔하고 모던하게, 개발자 감성으로 만들어주세요.

기대 결과: 브라우저에서 메인 페이지 접속 시 10개의 샘플 북마크가 카드 형태로 표시됩니다. 태그 클라우드가 보이고, 태그를 클릭하면 해당 태그가 포함된 북마크만 필터링되며, 검색창에 키워드를 입력하면 제목/설명에서 검색됩니다.

4
Step 4
북마크 추가/수정/삭제 기능을 구현해주세요.

요구사항:
1. BookmarkController에 메서드 추가
   - create: 북마크 생성 폼 표시
   - store: 북마크 저장 (폼 검증 포함)
   - edit: 북마크 수정 폼 표시
   - update: 북마크 업데이트
   - destroy: 북마크 삭제

2. 라우트 추가 (routes/web.php)
   - GET /bookmarks/create -> create
   - POST /bookmarks -> store
   - GET /bookmarks/{id}/edit -> edit
   - PUT /bookmarks/{id} -> update
   - DELETE /bookmarks/{id} -> destroy

3. 북마크 생성/수정 폼 뷰 (resources/views/bookmarks/form.blade.php)
   - 제목 입력 (필수)
   - URL 입력 (필수, URL 형식 검증)
   - 설명 입력 (선택, textarea)
   - 태그 입력 (쉼표로 구분, 예: "Laravel, PHP, Backend")
   - 즐겨찾기 체크박스
   - 저장/취소 버튼
   - create와 edit에서 공통으로 사용 (Blade @if로 분기)

4. 폼 검증 규칙 (store, update 메서드)
   - title: required, max:255
   - url: required, url
   - description: nullable
   - tags: nullable, string (쉼표로 구분된 문자열을 배열로 변환)
   - is_favorite: boolean

5. 메인 페이지에 "+ 새 북마크 추가" 버튼 추가
6. 각 북마크 카드에 수정/삭제 버튼 추가
7. 삭제 시 확인 모달 또는 JavaScript confirm 사용

폼 디자인은 Tailwind CSS로 깔끔하게 만들어주세요.

기대 결과: "+ 새 북마크 추가" 버튼을 클릭하면 생성 폼이 표시되고, 북마크를 입력하여 저장할 수 있습니다. 각 북마크 카드의 수정 버튼을 클릭하면 수정 폼이 표시되며, 삭제 버튼을 클릭하면 확인 후 삭제됩니다. 폼 검증이 작동하여 잘못된 입력 시 에러 메시지가 표시됩니다.

제출된 작품 (1)

로그인 후 제출

아이디어를 실행 단계와 결과까지 연결해 구조화하고 탐색 가능하게 만드는 기록 시스템

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

댓글 (0)

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