나만의 북마크 정리함 - 폴더별 링크 아카이브
bookmark-organizer-laravel
문제 설명
📚 나만의 북마크 정리함
웹서핑하다 발견한 유용한 링크들을 체계적으로 정리하는 북마크 관리 앱을 만듭니다. 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에게 보내면 됩니다. 복사 버튼을 눌러 바로 사용하세요.
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 기본 화면이 표시됩니다.
메인 레이아웃과 북마크 목록 페이지를 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는 완성되어 있습니다.
북마크 추가 및 수정 기능을 구현해주세요.
요구사항:
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에 저장되고 목록 페이지로 돌아갑니다. 성공 메시지가 표시되며, 새로 추가된 북마크가 목록에 나타납니다. 각 북마크 카드의 수정 버튼을 클릭하면 수정 폼이 나타나고, 수정 후 저장하면 변경사항이 반영됩니다. 유효성 검사 실패 시 에러 메시지가 표시됩니다.
북마크 삭제 기능과 폴더 관리 기능을 추가해주세요.
요구사항:
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개 있습니다. 삭제하시겠습니까?" 경고를 표시하세요.
기대 결과: 북마크 카드의 삭제 버튼을 클릭하면 확인 후 북마크가 삭제되고, 목록에서 사라집니다. 네비게이션의 '새 폴더 추가' 버튼을 클릭하면 폴더 추가 폼이 나타나고, 폴더를 생성하면 사이드바에 새 폴더가 추가됩니다. 사이드바에서 폴더를 클릭하면 해당 폴더의 북마크만 필터링되어 표시됩니다. 폴더 관리 페이지에서 폴더를 수정하거나 삭제할 수 있습니다.
검색 기능과 즐겨찾기 토글 기능을 추가하여 앱을 완성해주세요.
요구사항:
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 기반으로 제작된 개인용 북마크 관리 시스템. 폴더 구조로 링크를 체계적으로 정리하고 보관할 수 있습니다.