🎨 프리랜서 포트폴리오 랜딩페이지 - 작업물 갤러리 & 문의 폼

mkdir freelancer-portfolio-landing && cd freelancer-portfolio-landing

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

**요구사항:**

1. Laravel 13.x 프로젝트를 생성하세요.
   - `composer create-project laravel/laravel .` 명령 사용
   - 현재 폴더(.)에 직접 설치

2. Tailwind CSS 설정:
   - `npm install -D tailwindcss postcss autoprefixer` 실행
   - `npx tailwindcss init -p`로 설정 파일 생성
   - `tailwind.config.js`에서 content 경로를 `['./resources/**/*.blade.php', './resources/**/*.js']`로 설정
   - `resources/css/app.css`에 Tailwind 디렉티브 추가:
     ```css
     @tailwind base;
     @tailwind components;
     @tailwind utilities;
     ```
   - `vite.config.js`에서 Tailwind CSS가 빌드되도록 설정

3. 데이터베이스 설정:
   - `.env` 파일에서 `DB_CONNECTION=sqlite`로 변경
   - `DB_DATABASE=database/database.sqlite` 설정
   - `database/database.sqlite` 파일 생성 (빈 파일)

4. 개발 서버 실행 준비:
   - `php artisan serve` 명령으로 Laravel 서버 실행 가능하도록
   - `npm run dev` 명령으로 Vite 개발 서버 실행 가능하도록

5. 확인:
   - `http://localhost:8000` 접속 시 Laravel 기본 페이지가 보이면 성공
   - Tailwind CSS가 정상적으로 로드되는지 확인 (간단한 클래스 테스트)

**데이터베이스 마이그레이션과 모델을 생성합니다.**

1. **Portfolio 모델과 마이그레이션 생성:**
   - `php artisan make:model Portfolio -m` 명령 실행
   - 마이그레이션 파일(`database/migrations/xxxx_create_portfolios_table.php`)에 다음 컬럼 추가:
     - `title` (string, 작업물 제목)
     - `description` (text, 작업물 설명)
     - `image_url` (string, 이미지 URL 또는 경로)
     - `tech_stack` (string, 사용 기술 - 쉼표로 구분)
     - `category` (string, 카테고리 예: 'web', 'mobile', 'design')
     - `project_url` (string, nullable, 프로젝트 링크)
     - `timestamps`

2. **Inquiry 모델과 마이그레이션 생성:**
   - `php artisan make:model Inquiry -m` 명령 실행
   - 마이그레이션 파일에 다음 컬럼 추가:
     - `name` (string, 문의자 이름)
     - `email` (string, 문의자 이메일)
     - `message` (text, 문의 내용)
     - `timestamps`

3. **마이그레이션 실행:**
   - `php artisan migrate` 실행하여 테이블 생성

4. **모델 설정:**
   - `Portfolio` 모델에 `$fillable` 속성 추가:
     ```php
     protected $fillable = ['title', 'description', 'image_url', 'tech_stack', 'category', 'project_url'];
     ```
   - `Inquiry` 모델에 `$fillable` 속성 추가:
     ```php
     protected $fillable = ['name', 'email', 'message'];
     ```

5. **확인:**
   - `php artisan tinker`로 모델 접근 가능 여부 확인
   - `Portfolio::count()`, `Inquiry::count()` 명령이 정상 작동하면 성공

**시더(Seeder)로 샘플 포트폴리오 데이터를 생성합니다.**

1. **Portfolio Seeder 생성:**
   - `php artisan make:seeder PortfolioSeeder` 명령 실행
   - `database/seeders/PortfolioSeeder.php` 파일에 샘플 데이터 5~8개 추가:
     ```php
     use App\Models\Portfolio;
     use Illuminate\Database\Seeder;

     class PortfolioSeeder extends Seeder
     {
         public function run()
         {
             Portfolio::create([
                 'title' => '이커머스 쇼핑몰 웹사이트',
                 'description' => '반응형 온라인 쇼핑몰 프론트엔드 구현. 장바구니, 결제, 주문 관리 기능 포함.',
                 'image_url' => 'https://images.unsplash.com/photo-1557821552-17105176677c?w=800',
                 'tech_stack' => 'Laravel, Tailwind CSS, MySQL',
                 'category' => 'web',
                 'project_url' => 'https://example.com/ecommerce'
             ]);

             Portfolio::create([
                 'title' => '모바일 투두 앱 UI',
                 'description' => 'iOS/Android 투두 앱 디자인 및 프로토타입. 다크모드 지원.',
                 'image_url' => 'https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?w=800',
                 'tech_stack' => 'Figma, React Native',
                 'category' => 'mobile',
                 'project_url' => null
             ]);

             Portfolio::create([
                 'title' => '브랜드 아이덴티티 디자인',
                 'description' => '스타트업 로고, 명함, 브로슈어 디자인 패키지.',
                 'image_url' => 'https://images.unsplash.com/photo-1561070791-2526d30994b5?w=800',
                 'tech_stack' => 'Adobe Illustrator, Photoshop',
                 'category' => 'design',
                 'project_url' => 'https://behance.net/example'
             ]);

             // 나머지 샘플 데이터 추가 (총 5~8개)
         }
     }
     ```

2. **DatabaseSeeder에 등록:**
   - `database/seeders/DatabaseSeeder.php` 파일에서 `run()` 메서드에 추가:
     ```php
     $this->call(PortfolioSeeder::class);
     ```

3. **시더 실행:**
   - `php artisan db:seed` 명령 실행

4. **확인:**
   - `php artisan tinker`에서 `Portfolio::all()`로 데이터 확인
   - 5~8개의 샘플 포트폴리오가 조회되면 성공

**메인 페이지 라우트와 컨트롤러를 생성하고, Blade 뷰를 만듭니다.**

1. **HomeController 생성:**
   - `php artisan make:controller HomeController` 명령 실행
   - `app/Http/Controllers/HomeController.php`에 `index()` 메서드 작성:
     ```php
     use App\Models\Portfolio;

     public function index()
     {
         $portfolios = Portfolio::all();
         return view('home', compact('portfolios'));
     }
     ```

2. **라우트 설정:**
   - `routes/web.php`에서 기본 라우트를 다음으로 변경:
     ```php
     use App\Http\Controllers\HomeController;

     Route::get('/', [HomeController::class, 'index'])->name('home');
     ```

3. **Blade 뷰 생성:**
   - `resources/views/home.blade.php` 파일 생성
   - 다음 섹션 구조로 HTML 작성:
     - **헤더**: 네비게이션 바 (로고, 섹션 링크)
     - **히어로 섹션**: 프로필 사진, 이름, 직업, 소개 문구
       - 예: "안녕하세요, 프리랜서 웹 개발자 홍길동입니다."
       - Tailwind CSS로 중앙 정렬, 큰 폰트, 그라디언트 배경
     - **포트폴리오 갤러리**: 작업물 카드 그리드 (3열 레이아웃)
       - 각 카드: 이미지, 제목, 설명, 기술 스택 뱃지
       - `@foreach($portfolios as $portfolio)` 반복문 사용
       - 호버 시 그림자 효과 (`hover:shadow-2xl transition`)
     - **기술 스택 섹션**: 사용 가능한 기술 뱃지 표시
       - 예: Laravel, React, Tailwind CSS, Figma 등
     - **문의하기 폼 섹션**: (다음 단계에서 구현)

4. **Tailwind CSS 스타일링:**
   - 반응형 그리드: `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6`
   - 카드 스타일: `bg-white rounded-lg shadow-lg overflow-hidden`
   - 뱃지 스타일: `bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm`

5. **확인:**
   - `http://localhost:8000` 접속 시 포트폴리오 갤러리가 보이면 성공
   - 이미지, 제목, 설명이 정상적으로 렌더링되는지 확인

**문의하기 폼을 구현하고, DB에 저장하는 기능을 추가합니다.**

1. **InquiryController 생성:**
   - `php artisan make:controller InquiryController` 명령 실행
   - `store()` 메서드 작성:
     ```php
     use App\Models\Inquiry;
     use Illuminate\Http\Request;

     public function store(Request $request)
     {
         $validated = $request->validate([
             'name' => 'required|string|max:255',
             'email' => 'required|email|max:255',
             'message' => 'required|string|max:1000'
         ]);

         Inquiry::create($validated);

         return redirect()->back()->with('success', '문의가 성공적으로 접수되었습니다!');
     }
     ```

2. **라우트 추가:**
   - `routes/web.php`에 POST 라우트 추가:
     ```php
     use App\Http\Controllers\InquiryController;

     Route::post('/inquiry', [InquiryController::class, 'store'])->name('inquiry.store');
     ```

3. **home.blade.php에 문의 폼 추가:**
   - 문의하기 섹션에 폼 추가:
     ```blade
     <section id="contact" class="py-16 bg-gray-50">
         <div class="container mx-auto px-4 max-w-2xl">
             <h2 class="text-3xl font-bold text-center mb-8">문의하기</h2>
             
             @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

             <form action="{{ route('inquiry.store') }}" method="POST" class="space-y-4">
                 @csrf
                 <div>
                     <label class="block text-sm font-medium mb-2">이름</label>
                     <input type="text" name="name" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500">
                     @error('name')
                         <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                     @enderror
                 </div>
                 <div>
                     <label class="block text-sm font-medium mb-2">이메일</label>
                     <input type="email" name="email" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500">
                     @error('email')
                         <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                     @enderror
                 </div>
                 <div>
                     <label class="block text-sm font-medium mb-2">프로젝트 내용</label>
                     <textarea name="message" rows="5" required class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500"></textarea>
                     @error('message')
                         <p class="text-red-500 text-sm mt-1">{{ $message }}</p>
                     @enderror
                 </div>
                 <button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition">
                     문의하기
                 </button>
             </form>
         </div>
     </section>
     ```

4. **확인:**
   - 문의 폼에 데이터를 입력하고 제출
   - 성공 메시지가 표시되고, DB에 데이터가 저장되는지 확인
   - `php artisan tinker`에서 `Inquiry::all()`로 확인