풀스택 즐겨찾기 관리 - 카테고리별 링크 북마크

mkdir fullstack-bookmark-manager && cd fullstack-bookmark-manager

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

# 프로젝트 초기 설정

1. Laravel 13.x 최신 버전으로 프로젝트 생성
2. SQLite 데이터베이스 설정 (.env 파일에서 DB_CONNECTION=sqlite 설정)
3. database/database.sqlite 파일 생성
4. Tailwind CSS 설치 및 설정 (Laravel Mix 또는 Vite 사용)
5. 기본 레이아웃 파일 생성 (resources/views/layouts/app.blade.php)
   - 헤더에 "즐겨찾기 관리" 타이틀
   - Tailwind CSS CDN 또는 컴파일된 CSS 링크
   - 네비게이션 바 (홈, 북마크 추가, 카테고리 관리)
   - 반응형 모바일 메뉴

레이아웃은 깔끔한 화이트/블루 톤으로 디자인하고, 그림자와 라운드 처리로 모던한 느낌을 주세요.

# 데이터베이스 마이그레이션 생성

북마크와 카테고리를 저장할 데이터베이스 테이블을 생성합니다.

## 1. categories 테이블 마이그레이션

`php artisan make:migration create_categories_table` 명령으로 마이그레이션 파일 생성 후 다음 컬럼 추가:

- id (bigIncrements)
- name (string, unique) - 카테고리 이름
- color (string, nullable) - 카테고리 색상 (예: "blue", "red", "green")
- icon (string, nullable) - 아이콘 이름 (예: "code", "design", "news")
- timestamps

## 2. bookmarks 테이블 마이그레이션

`php artisan make:migration create_bookmarks_table` 명령으로 마이그레이션 파일 생성 후 다음 컬럼 추가:

- id (bigIncrements)
- category_id (foreignId) - categories 테이블 참조, onDelete('cascade')
- title (string) - 북마크 제목
- url (text) - 웹사이트 URL
- description (text, nullable) - 설명
- favicon_url (string, nullable) - 파비콘 URL (예: https://www.google.com/favicon.ico)
- is_favorite (boolean, default false) - 즐겨찾기 여부
- visit_count (integer, default 0) - 방문 횟수
- timestamps

마이그레이션 실행: `php artisan migrate`

## 3. 시더 생성

`php artisan make:seeder CategorySeeder` 명령으로 시더 생성 후 기본 카테고리 5개 추가:
- 개발 (color: blue, icon: code)
- 디자인 (color: purple, icon: palette)
- 뉴스 (color: red, icon: newspaper)
- 쇼핑 (color: green, icon: shopping-cart)
- 기타 (color: gray, icon: folder)

`php artisan db:seed --class=CategorySeeder` 명령으로 시더 실행

# 모델과 컨트롤러 생성

## 1. Category 모델 생성

`php artisan make:model Category` 명령으로 모델 생성 후:

- $fillable = ['name', 'color', 'icon']
- bookmarks() 관계 메서드 추가 (hasMany 관계)

## 2. Bookmark 모델 생성

`php artisan make:model Bookmark` 명령으로 모델 생성 후:

- $fillable = ['category_id', 'title', 'url', 'description', 'favicon_url', 'is_favorite', 'visit_count']
- category() 관계 메서드 추가 (belongsTo 관계)
- getFaviconUrlAttribute() 접근자 추가: URL에서 자동으로 파비콘 URL 생성 (예: https://www.google.com/s2/favicons?domain={domain})

## 3. BookmarkController 생성

`php artisan make:controller BookmarkController` 명령으로 컨트롤러 생성 후 다음 메서드 구현:

- **index()**: 모든 북마크 조회 (카테고리별 그룹핑, 최신순 정렬)
  - 쿼리 파라미터로 category_id 필터링 가능
  - 쿼리 파라미터로 search 검색 가능 (title, url 검색)
  - resources/views/bookmarks/index.blade.php 반환

- **create()**: 북마크 생성 폼 표시
  - 모든 카테고리 목록 전달
  - resources/views/bookmarks/create.blade.php 반환

- **store(Request $request)**: 북마크 저장
  - 유효성 검사: title, url, category_id 필수
  - 파비콘 URL 자동 생성
  - 저장 후 index 페이지로 리다이렉트

- **edit($id)**: 북마크 수정 폼 표시
  - resources/views/bookmarks/edit.blade.php 반환

- **update(Request $request, $id)**: 북마크 업데이트
  - 저장 후 index 페이지로 리다이렉트

- **destroy($id)**: 북마크 삭제
  - 삭제 후 index 페이지로 리다이렉트

## 4. 라우트 등록

routes/web.php 파일에 다음 라우트 추가:

```php
Route::get('/', [BookmarkController::class, 'index'])->name('bookmarks.index');
Route::resource('bookmarks', BookmarkController::class);
```

# Blade 뷰 파일 생성 - 북마크 목록 페이지

resources/views/bookmarks/index.blade.php 파일을 생성하고 다음 기능을 구현하세요:

## 레이아웃 구조

1. **헤더 섹션**
   - 페이지 제목: "내 북마크"
   - "새 북마크 추가" 버튼 (우측 상단, 파란색)
   - 검색 입력 필드 (실시간 검색, Alpine.js 또는 form 제출)

2. **카테고리 필터 탭**
   - 전체 / 개발 / 디자인 / 뉴스 / 쇼핑 / 기타 탭
   - 각 카테고리 색상으로 탭 스타일링
   - 현재 선택된 카테고리 하이라이트
   - 클릭 시 쿼리 파라미터로 필터링 (?category_id=1)

3. **북마크 카드 그리드**
   - 3열 그리드 레이아웃 (데스크톱), 1열 (모바일)
   - 각 북마크 카드 구성:
     - 파비콘 이미지 (왼쪽 상단)
     - 북마크 제목 (큰 글씨, 볼드)
     - URL (작은 글씨, 회색, 말줄임표)
     - 설명 (2줄까지 표시, 말줄임표)
     - 카테고리 배지 (색상 태그)
     - 즐겨찾기 별 아이콘 (is_favorite가 true일 때)
     - 방문 횟수 (작은 아이콘과 숫자)
     - 수정/삭제 버튼 (카드 우측 하단)
   - 카드 호버 시 그림자 효과
   - 카드 클릭 시 새 탭에서 URL 열기 (target="_blank")

4. **빈 상태 처리**
   - 북마크가 없을 때 "아직 북마크가 없습니다" 메시지와 추가 버튼 표시

## 스타일링

- Tailwind CSS 유틸리티 클래스 사용
- 카드: bg-white, shadow-md, rounded-lg, p-4
- 반응형: grid-cols-1 md:grid-cols-2 lg:grid-cols-3
- 색상: 파란색 주조색, 회색 보조색

## 인터랙션

- 삭제 버튼 클릭 시 확인 알림창 (JavaScript confirm)
- 카드 클릭 시 visit_count 증가 (선택적 구현)

# Blade 뷰 파일 생성 - 북마크 추가/수정 폼

## 1. resources/views/bookmarks/create.blade.php 생성

새 북마크 추가 폼을 만듭니다.

### 폼 구성

- **제목 입력**: text input, required, placeholder="예: Google"
- **URL 입력**: url input, required, placeholder="https://example.com"
- **설명 입력**: textarea, 3줄, placeholder="이 북마크에 대한 간단한 설명"
- **카테고리 선택**: select dropdown, 모든 카테고리 목록 표시
- **즐겨찾기 체크박스**: "즐겨찾기로 설정"
- **제출 버튼**: "북마크 추가" (파란색, 전체 너비)
- **취소 버튼**: "취소" (회색, 목록으로 돌아가기)

### 스타일링

- 폼 컨테이너: max-w-2xl mx-auto, bg-white, shadow-lg, rounded-lg, p-8
- 각 입력 필드: border, rounded, p-2, focus:ring-2 focus:ring-blue-500
- 라벨: block, mb-2, font-semibold
- 에러 메시지 표시 영역 (Laravel validation errors)

## 2. resources/views/bookmarks/edit.blade.php 생성

기존 북마크 수정 폼을 만듭니다.

- create.blade.php와 거의 동일한 구조
- 폼 액션: route('bookmarks.update', $bookmark->id), method="POST", @method('PUT')
- 기존 값으로 입력 필드 채우기 (old() 헬퍼와 $bookmark 값 사용)
- 제출 버튼 텍스트: "북마크 수정"
- 삭제 버튼 추가 (빨간색, 폼 하단 왼쪽)

## 3. 유효성 검사 에러 메시지 표시

두 폼 모두에 다음 코드 추가:

```blade
@if ($errors->any())
    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
        <ul>
            @foreach ($errors->all() as $error)
                <li>{{ $error }}</li>
            @endforeach
        </ul>
    </div>
@endif
```

## 4. 성공 메시지 표시 (선택적)

layouts/app.blade.php에 세션 플래시 메시지 표시 영역 추가:

```blade
@if (session('success'))
    <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
        {{ session('success') }}
    </div>
@endif
```

BookmarkController의 store()와 update() 메서드에서 리다이렉트 시 `->with('success', '북마크가 추가되었습니다!')` 추가

# 최종 테스트 및 개선

## 1. 더미 데이터 추가

`php artisan make:seeder BookmarkSeeder` 명령으로 시더 생성 후 다양한 카테고리의 북마크 10~15개 추가:

- 개발: GitHub, Stack Overflow, MDN Web Docs
- 디자인: Dribbble, Behance, Figma
- 뉴스: BBC News, TechCrunch
- 쇼핑: Amazon, 쿠팡
- 기타: Gmail, Notion

각 북마크에 실제 URL, 설명, 파비콘 URL 설정

`php artisan db:seed --class=BookmarkSeeder` 실행

## 2. 검색 기능 테스트

BookmarkController의 index() 메서드에 검색 기능 추가:

```php
$query = Bookmark::with('category');

if ($request->has('search')) {
    $search = $request->get('search');
    $query->where('title', 'like', "%{$search}%")
          ->orWhere('url', 'like', "%{$search}%");
}

if ($request->has('category_id')) {
    $query->where('category_id', $request->get('category_id'));
}

$bookmarks = $query->latest()->get();
```

## 3. 파비콘 자동 로드 개선

Bookmark 모델의 getFaviconUrlAttribute() 메서드를 다음과 같이 수정:

```php
public function getFaviconUrlAttribute()
{
    if ($this->attributes['favicon_url']) {
        return $this->attributes['favicon_url'];
    }
    
    $domain = parse_url($this->url, PHP_URL_HOST);
    return "https://www.google.com/s2/favicons?domain={$domain}&sz=64";
}
```

## 4. 반응형 테스트

- 브라우저 개발자 도구로 모바일 뷰 확인
- 네비게이션 바가 모바일에서 햄버거 메뉴로 변경되는지 확인
- 북마크 카드 그리드가 1열로 변경되는지 확인

## 5. 최종 개선 사항

- 북마크 카드에 호버 효과 추가 (scale, shadow 증가)
- 카테고리 배지에 아이콘 추가 (Heroicons 또는 Font Awesome 사용)
- 즐겨찾기 북마크를 목록 상단에 고정
- 방문 횟수 증가 기능 구현 (선택적)

모든 기능이 정상 작동하는지 확인하고, 사용자 경험을 개선하세요.