나만의 북마크 정리함 - 폴더별 링크 아카이브 - 바이브코딩 레시피
입문 PHP Laravel

나만의 북마크 정리함 - 폴더별 링크 아카이브

리포지토리명 bookmark-organizer-laravel
조회수 8 1건 제출 14시간 전

문제 설명

📚 나만의 북마크 정리함

웹서핑하다 발견한 유용한 링크들을 체계적으로 정리하는 북마크 관리 앱을 만듭니다. Laravel 12.x와 Blade 템플릿, Tailwind CSS를 사용하여 깔끔한 UI로 북마크를 폴더별로 분류하고 관리할 수 있습니다.

필수 기능

  • 북마크 추가/수정/삭제 (제목, URL, 메모)
  • 폴더(카테고리) 생성 및 북마크 분류
  • 폴더별 북마크 목록 보기
  • 북마크 검색 기능 (제목/URL/메모)
  • 북마크 클릭 시 새 탭에서 열기
  • 반응형 디자인 (모바일/태블릿/데스크톱)

보너스 기능

  • 북마크 즐겨찾기(별표) 기능
  • 최근 추가한 북마크 상단 표시
  • 폴더별 색상 태그
  • URL 자동 유효성 검사
  • 북마크 추가 시 웹사이트 파비콘 자동 표시

이 프로젝트를 통해 Laravel의 기본 CRUD, Blade 컴포넌트, 라우팅, SQLite 데이터베이스 연동을 익힐 수 있습니다.

제약 조건

  • Laravel 12.x 사용 (구버전 금지)
  • Blade 템플릿 엔진 사용 (React/Vue 등 SPA 프레임워크 사용 금지)
  • Tailwind CSS로 스타일링
  • SQLite 데이터베이스 사용
  • 별도 인증 시스템 불필요 (단일 사용자 가정)
  • 외부 API 사용 금지 (모든 기능은 로컬에서 동작)

프롬프트 레시피

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

1
Step 1
Laravel 12.x 프로젝트를 생성하고 북마크 정리함 앱의 기본 구조를 설정해주세요.

요구사항:
1. 프로젝트명: bookmark-organizer
2. SQLite 데이터베이스 설정 (.env 파일 수정)
3. Tailwind CSS 설치 및 설정 (Laravel Mix 또는 Vite 사용)
4. 두 개의 마이그레이션 파일 생성:
   - folders 테이블: id, name(폴더명), color(색상코드, nullable), created_at, updated_at
   - bookmarks 테이블: id, folder_id(외래키), title(제목), url(링크), description(메모, nullable), is_favorite(즐겨찾기 여부, boolean, 기본값 false), created_at, updated_at
5. 테이블 간 관계 설정 (Folder 모델 hasMany Bookmark, Bookmark 모델 belongsTo Folder)
6. 기본 라우트 설정 (web.php):
   - GET / : 메인 페이지 (모든 북마크 목록)
   - 북마크 CRUD 라우트 (resource controller)
   - 폴더 CRUD 라우트
7. FolderController와 BookmarkController 생성
8. 마이그레이션 실행 및 시더로 샘플 데이터 3-4개 추가

프로젝트 초기 설정을 완료하고, php artisan serve로 서버가 정상 실행되는지 확인해주세요.

기대 결과: Laravel 12.x 프로젝트가 생성되고, SQLite 데이터베이스에 folders와 bookmarks 테이블이 생성됩니다. Tailwind CSS가 설정되고, 기본 라우트와 컨트롤러가 준비됩니다. 샘플 데이터가 포함되어 localhost:8000 접속 시 Laravel 기본 화면이 표시됩니다.

2
Step 2
메인 레이아웃과 북마크 목록 페이지를 Blade 템플릿으로 구현해주세요.

요구사항:
1. resources/views/layouts/app.blade.php 생성:
   - Tailwind CSS CDN 또는 빌드된 CSS 포함
   - 상단 네비게이션 바 (앱 제목, 새 북마크 추가 버튼, 새 폴더 추가 버튼)
   - 사이드바 (폴더 목록 표시, '전체 보기' 옵션)
   - 메인 콘텐츠 영역 (@yield('content'))
   - 반응형 디자인 (모바일에서는 사이드바가 토글 메뉴로 변경)

2. resources/views/bookmarks/index.blade.php 생성:
   - 북마크 카드 형태로 표시 (그리드 레이아웃, 3-4열)
   - 각 카드에 표시할 정보: 제목, URL (축약), 메모 (일부), 폴더명, 즐겨찾기 별표, 추가 날짜
   - 카드 hover 시 그림자 효과
   - 각 카드에 수정/삭제 버튼
   - 빈 상태일 때 "아직 북마크가 없습니다" 메시지

3. BookmarkController의 index 메서드 구현:
   - 모든 북마크를 최신순으로 조회 (with('folder')로 폴더 정보 eager loading)
   - 쿼리 파라미터로 folder_id 받으면 해당 폴더의 북마크만 필터링
   - 즐겨찾기 북마크를 상단에 표시

4. 라우트 연결 및 컨트롤러에서 뷰로 데이터 전달

Tailwind CSS를 활용해 모던하고 깔끔한 디자인으로 만들어주세요. 색상은 파란색 계열을 메인으로 사용하세요.

기대 결과: 메인 페이지(/)에 접속하면 네비게이션 바, 사이드바(폴더 목록), 북마크 카드 그리드가 표시됩니다. 샘플 북마크 데이터가 카드 형태로 보기 좋게 나열되며, 반응형으로 동작합니다. 아직 추가/수정/삭제 기능은 동작하지 않지만 UI는 완성되어 있습니다.

3
Step 3
북마크 추가 및 수정 기능을 구현해주세요.

요구사항:
1. resources/views/bookmarks/create.blade.php 생성:
   - 북마크 추가 폼 (제목, URL, 메모, 폴더 선택 드롭다운, 즐겨찾기 체크박스)
   - Tailwind CSS로 스타일링된 폼 (라벨, 인풋 필드, 버튼)
   - 유효성 검사 에러 메시지 표시 영역 (@error 디렉티브 사용)
   - 취소 버튼 (목록으로 돌아가기)

2. resources/views/bookmarks/edit.blade.php 생성:
   - create.blade.php와 유사하지만 기존 데이터가 채워진 폼
   - 폼 메서드는 POST이지만 @method('PUT') 사용

3. BookmarkController 메서드 구현:
   - create(): 폴더 목록을 조회하여 뷰로 전달
   - store(): 폼 데이터 유효성 검사 (title, url 필수, url 형식 검증) 후 저장, 성공 메시지와 함께 목록으로 리다이렉트
   - edit($id): 해당 북마크와 폴더 목록 조회하여 뷰로 전달
   - update($id): 유효성 검사 후 업데이트, 성공 메시지와 함께 목록으로 리다이렉트

4. 유효성 검사 규칙:
   - title: required|max:255
   - url: required|url|max:500
   - description: nullable|max:1000
   - folder_id: required|exists:folders,id
   - is_favorite: boolean

5. 세션 플래시 메시지 표시 (성공/에러 알림)
   - layouts/app.blade.php에 @if(session('success')) 알림 추가

6. 라우트 연결 확인

폼은 깔끔하고 사용하기 쉽게 디자인해주세요.

기대 결과: 네비게이션 바의 '새 북마크 추가' 버튼을 클릭하면 추가 폼 페이지로 이동하고, 폼을 작성하여 제출하면 북마크가 DB에 저장되고 목록 페이지로 돌아갑니다. 성공 메시지가 표시되며, 새로 추가된 북마크가 목록에 나타납니다. 각 북마크 카드의 수정 버튼을 클릭하면 수정 폼이 나타나고, 수정 후 저장하면 변경사항이 반영됩니다. 유효성 검사 실패 시 에러 메시지가 표시됩니다.

4
Step 4
북마크 삭제 기능과 폴더 관리 기능을 추가해주세요.

요구사항:
1. 북마크 삭제 기능:
   - BookmarkController의 destroy($id) 메서드 구현
   - 삭제 확인 모달 또는 JavaScript confirm() 사용
   - 삭제 후 성공 메시지와 함께 목록으로 리다이렉트
   - 각 북마크 카드에 삭제 버튼 추가 (휴지통 아이콘)

2. resources/views/folders/index.blade.php 생성:
   - 폴더 목록을 테이블 또는 카드 형태로 표시
   - 각 폴더에 포함된 북마크 개수 표시
   - 폴더 추가/수정/삭제 버튼

3. resources/views/folders/create.blade.php & edit.blade.php:
   - 폴더명 입력 필드
   - 색상 선택 (color picker 또는 미리 정의된 색상 팔레트)
   - 유효성 검사 에러 표시

4. FolderController 구현:
   - index(): 모든 폴더 조회 (withCount('bookmarks')로 북마크 개수 포함)
   - create(), store(): 폴더 추가 (name 필수, color nullable)
   - edit($id), update($id): 폴더 수정
   - destroy($id): 폴더 삭제 (해당 폴더의 북마크가 있으면 삭제 방지 또는 경고)

5. 사이드바 폴더 목록 업데이트:
   - 각 폴더 클릭 시 해당 폴더의 북마크만 필터링하여 표시 (?folder_id=X)
   - 폴더 색상을 사이드바에 표시 (작은 색상 원 또는 배경색)

6. 라우트 추가 및 네비게이션 연결

폴더 삭제 시 북마크가 있으면 "이 폴더에 북마크가 X개 있습니다. 삭제하시겠습니까?" 경고를 표시하세요.

기대 결과: 북마크 카드의 삭제 버튼을 클릭하면 확인 후 북마크가 삭제되고, 목록에서 사라집니다. 네비게이션의 '새 폴더 추가' 버튼을 클릭하면 폴더 추가 폼이 나타나고, 폴더를 생성하면 사이드바에 새 폴더가 추가됩니다. 사이드바에서 폴더를 클릭하면 해당 폴더의 북마크만 필터링되어 표시됩니다. 폴더 관리 페이지에서 폴더를 수정하거나 삭제할 수 있습니다.

5
Step 5
검색 기능과 즐겨찾기 토글 기능을 추가하여 앱을 완성해주세요.

요구사항:
1. 검색 기능:
   - 네비게이션 바에 검색 입력 필드 추가 (돋보기 아이콘)
   - GET 요청으로 ?search=키워드 파라미터 전달
   - BookmarkController의 index 메서드에서 search 파라미터 처리
   - 제목, URL, 메모에서 키워드 검색 (LIKE 쿼리)
   - 검색 결과가 없으면 "검색 결과가 없습니다" 메시지
   - 검색어를 입력 필드에 유지 (old() 헬퍼 사용)

2. 즐겨찾기 토글:
   - 각 북마크 카드에 별표 아이콘 (즐겨찾기 여부에 따라 채워진 별/빈 별)
   - 별표 클릭 시 AJAX 또는 폼 제출로 is_favorite 값 토글
   - BookmarkController에 toggleFavorite($id) 메서드 추가 (POST 라우트)
   - 토글 후 JSON 응답 또는 리다이렉트
   - 즐겨찾기 북마크는 목록 상단에 표시 (orderBy('is_favorite', 'desc'))

3. UI/UX 개선:
   - 북마크 카드에 URL 클릭 시 새 탭에서 열기 (target="_blank")
   - 긴 URL은 말줄임(...) 처리
   - 북마크 추가/수정 폼에서 URL 입력 시 자동으로 http:// 추가 (JavaScript)
   - 반응형 디자인 최종 점검 (모바일, 태블릿, 데스크톱)
   - 로딩 애니메이션 또는 스켈레톤 UI (선택)

4. 최종 테스트:
   - 모든 CRUD 기능 동작 확인
   - 검색, 필터링, 정렬 기능 테스트
   - 유효성 검사 에러 처리 확인
   - 다양한 화면 크기에서 레이아웃 확인

5. README.md 작성:
   - 프로젝트 설명
   - 설치 및 실행 방법
   - 주요 기능 목록
   - 스크린샷 (선택)

AJAX를 사용한다면 Axios나 Fetch API를 사용하고, CSRF 토큰을 포함하세요.

기대 결과: 검색 기능이 동작하여 네비게이션 바의 검색창에 키워드를 입력하면 관련 북마크가 필터링되어 표시됩니다. 각 북마크의 별표 아이콘을 클릭하면 즐겨찾기 상태가 토글되고, 즐겨찾기 북마크가 목록 상단에 나타납니다. 모든 기능이 정상 동작하며, 반응형 디자인이 완벽하게 적용되어 모바일/태블릿/데스크톱 모든 환경에서 사용하기 편리합니다. README 파일에 프로젝트 정보가 잘 정리되어 있습니다.

제출된 작품 (1)

로그인 후 제출

Laravel 기반으로 제작된 개인용 북마크 관리 시스템. 폴더 구조로 링크를 체계적으로 정리하고 보관할 수 있습니다.

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

댓글 (0)

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