Laravel 미니 포토 갤러리 - 이미지 업로드 & 좋아요

mkdir laravel-photo-gallery-likes && cd laravel-photo-gallery-likes

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

다음 작업을 수행해주세요:

1. Laravel 13.x 프로젝트 생성 (composer create-project laravel/laravel . 명령 사용)
2. .env 파일을 SQLite 사용하도록 설정:
   - DB_CONNECTION=sqlite
   - DB_DATABASE 경로를 database/database.sqlite로 지정
   - database/database.sqlite 파일 생성
3. Tailwind CSS 설치 및 설정 (npm install -D tailwindcss postcss autoprefixer, npx tailwindcss init -p)
4. tailwind.config.js에서 content 경로 설정 (resources/**/*.blade.php, resources/**/*.js)
5. resources/css/app.css에 Tailwind 디렉티브 추가 (@tailwind base; @tailwind components; @tailwind utilities;)
6. npm run build 실행하여 CSS 컴파일
7. 프로젝트가 정상 작동하는지 php artisan serve로 확인

모든 설정이 완료되면 "Laravel 13.x 프로젝트 초기 설정 완료" 메시지를 출력해주세요.

사진 정보를 저장할 데이터베이스 테이블과 모델을 생성합니다.

다음 작업을 수행해주세요:

1. Photo 모델과 마이그레이션 파일 생성 (php artisan make:model Photo -m)
2. 마이그레이션 파일에 다음 컬럼 추가:
   - title (string, 사진 제목)
   - description (text, nullable, 사진 설명)
   - image_path (string, 이미지 파일 경로)
   - likes_count (integer, default 0, 좋아요 수)
   - timestamps (created_at, updated_at)
3. php artisan migrate 실행하여 테이블 생성
4. Photo 모델에 $fillable 속성 추가 (title, description, image_path, likes_count)
5. storage/app/public 폴더와 public/storage 심볼릭 링크 생성 (php artisan storage:link)

완료되면 "Photo 모델 및 데이터베이스 테이블 생성 완료" 메시지를 출력해주세요.

사진 업로드 및 갤러리 표시 기능을 구현합니다.

다음 작업을 수행해주세요:

1. PhotoController 생성 (php artisan make:controller PhotoController)
2. 라우트 설정 (routes/web.php):
   - GET / : 갤러리 메인 페이지 (PhotoController@index)
   - GET /upload : 사진 업로드 폼 페이지 (PhotoController@create)
   - POST /upload : 사진 업로드 처리 (PhotoController@store)
   - GET /photos/{id} : 사진 상세 보기 (PhotoController@show)
   - POST /photos/{id}/like : 좋아요 증가 (PhotoController@like)
3. PhotoController의 index 메서드:
   - 모든 사진을 최신순으로 가져오기 (Photo::latest()->get())
   - resources/views/gallery/index.blade.php 뷰로 전달
4. PhotoController의 create 메서드:
   - resources/views/gallery/upload.blade.php 뷰 반환
5. PhotoController의 store 메서드:
   - 업로드된 이미지 파일을 storage/app/public/photos 폴더에 저장
   - 파일명은 유니크하게 생성 (예: time() . '_' . 원본파일명)
   - Photo 모델에 데이터 저장 (title, description, image_path)
   - 갤러리 메인 페이지로 리다이렉트
6. PhotoController의 show 메서드:
   - id로 사진 찾기 (Photo::findOrFail($id))
   - resources/views/gallery/show.blade.php 뷰로 전달
7. PhotoController의 like 메서드:
   - id로 사진 찾기
   - likes_count 1 증가 (increment('likes_count'))
   - 이전 페이지로 리다이렉트

완료되면 "PhotoController 및 라우트 설정 완료" 메시지를 출력해주세요.

Blade 템플릿으로 갤러리 UI를 구현합니다.

다음 작업을 수행해주세요:

1. resources/views/layouts/app.blade.php 레이아웃 파일 생성:
   - HTML 기본 구조 (<!DOCTYPE html>, <html>, <head>, <body>)
   - <head>에 Tailwind CSS 포함 (@vite(['resources/css/app.css']))
   - <body>에 네비게이션 바 (홈, 업로드 링크)
   - @yield('content')로 본문 영역 지정
2. resources/views/gallery/index.blade.php 생성:
   - @extends('layouts.app')로 레이아웃 상속
   - 사진 그리드 레이아웃 (Tailwind grid, 3열 또는 4열)
   - 각 사진 카드:
     * 이미지 (Storage::url($photo->image_path)로 경로 생성)
     * 제목, 설명 일부, 좋아요 수
     * 상세 보기 링크
     * 좋아요 버튼 (하트 아이콘 또는 이모지)
   - 사진이 없을 경우 "아직 업로드된 사진이 없습니다" 메시지
3. resources/views/gallery/upload.blade.php 생성:
   - 사진 업로드 폼 (POST /upload, enctype="multipart/form-data")
   - @csrf 토큰 포함
   - 입력 필드: 제목 (required), 설명 (textarea), 이미지 파일 (required, accept="image/*")
   - 제출 버튼
   - Tailwind CSS로 깔끔한 폼 스타일링
4. resources/views/gallery/show.blade.php 생성:
   - 사진 상세 정보 (큰 이미지, 제목, 설명, 좋아요 수)
   - 좋아요 버튼 (POST /photos/{id}/like 폼)
   - 갤러리로 돌아가기 링크
5. 모든 뷰에서 Tailwind CSS 유틸리티 클래스를 사용하여 반응형 디자인 구현

완료되면 "갤러리 UI 구현 완료" 메시지를 출력하고, 브라우저에서 테스트할 수 있도록 안내해주세요.