🎨 프리랜서 디자이너 포트폴리오 샵 - 작품 갤러리 & 견적 문의 통합 플랫폼

mkdir designer-portfolio-inquiry-shop && cd designer-portfolio-inquiry-shop

이 폴더에서 Laravel + Inertia.js + React 프로젝트를 시작합니다.

**프로젝트 초기화:**

1. Laravel Breeze (React + Inertia) starter kit으로 프로젝트 생성:
   ```bash
   composer create-project laravel/laravel .
   composer require laravel/breeze --dev
   php artisan breeze:install react
   npm install
   npm run dev
   ```

2. `.env` 파일 설정:
   - `DB_CONNECTION=sqlite` 변경
   - `DB_DATABASE` 주석 처리 또는 절대 경로로 `database/database.sqlite` 지정

3. SQLite 데이터베이스 파일 생성:
   ```bash
   touch database/database.sqlite
   ```

4. 기본 마이그레이션 실행:
   ```bash
   php artisan migrate
   ```

5. Storage 심볼릭 링크 생성 (이미지 업로드용):
   ```bash
   php artisan storage:link
   ```

6. Tailwind CSS 설정 확인 (`tailwind.config.js`에 `./resources/**/*.jsx` 경로 포함 여부)

**프로젝트 구조 확인:**

- `app/Http/Controllers/` : Laravel 컨트롤러
- `app/Models/` : Eloquent 모델
- `database/migrations/` : DB 마이그레이션
- `resources/js/Pages/` : React 페이지 컴포넌트 (Inertia.js)
- `resources/js/Components/` : 재사용 가능한 React 컴포넌트
- `routes/web.php` : 웹 라우트 정의

**다음 단계 준비:**

- 포트폴리오 작품(Portfolio)과 견적 문의(Inquiry) 모델 설계 준비
- Breeze의 기본 인증 기능은 유지하되, 디자이너 전용 관리 페이지로 활용 예정

개발 서버 실행 후 `http://localhost:8000` 접속하여 기본 화면 확인.

**데이터베이스 설계 및 마이그레이션 생성**

포트폴리오 작품(Portfolio)과 견적 문의(Inquiry) 테이블을 설계합니다.

1. **Portfolio 모델 및 마이그레이션 생성:**
   ```bash
   php artisan make:model Portfolio -m
   ```

   `database/migrations/xxxx_create_portfolios_table.php` 파일 편집:
   ```php
   public function up()
   {
       Schema::create('portfolios', function (Blueprint $table) {
           $table->id();
           $table->string('title'); // 작품 제목
           $table->text('description')->nullable(); // 작품 설명
           $table->string('category'); // 카테고리 (로고, 웹디자인, 패키징 등)
           $table->string('image_path'); // 이미지 저장 경로
           $table->json('tools')->nullable(); // 사용 툴 (JSON 배열: ["Photoshop", "Illustrator"])
           $table->integer('views')->default(0); // 조회수
           $table->timestamps();
       });
   }
   ```

2. **Inquiry 모델 및 마이그레이션 생성:**
   ```bash
   php artisan make:model Inquiry -m
   ```

   `database/migrations/xxxx_create_inquiries_table.php` 파일 편집:
   ```php
   public function up()
   {
       Schema::create('inquiries', function (Blueprint $table) {
           $table->id();
           $table->string('service'); // 요청 서비스 (로고 디자인, 명함 디자인 등)
           $table->string('client_name'); // 의뢰인 이름
           $table->string('client_email'); // 의뢰인 이메일
           $table->text('project_details'); // 프로젝트 상세 설명
           $table->string('budget_range')->nullable(); // 예산 범위
           $table->date('desired_date')->nullable(); // 희망 완료 일정
           $table->string('reference_image')->nullable(); // 참고 이미지 경로
           $table->enum('status', ['pending', 'reviewed', 'in_progress', 'completed'])->default('pending'); // 문의 상태
           $table->timestamps();
       });
   }
   ```

3. **마이그레이션 실행:**
   ```bash
   php artisan migrate
   ```

4. **모델에 Fillable 속성 추가:**

   `app/Models/Portfolio.php`:
   ```php
   protected $fillable = ['title', 'description', 'category', 'image_path', 'tools', 'views'];
   protected $casts = ['tools' => 'array']; // JSON을 배열로 자동 변환
   ```

   `app/Models/Inquiry.php`:
   ```php
   protected $fillable = ['service', 'client_name', 'client_email', 'project_details', 'budget_range', 'desired_date', 'reference_image', 'status'];
   ```

**다음 단계 준비:**

- 포트폴리오 갤러리 페이지와 컨트롤러 구현
- 더미 데이터 시딩 (선택사항)

**포트폴리오 갤러리 페이지 구현 (Laravel 컨트롤러 + React 컴포넌트)**

1. **PortfolioController 생성:**
   ```bash
   php artisan make:controller PortfolioController
   ```

   `app/Http/Controllers/PortfolioController.php`:
   ```php
   <?php

   namespace App\Http\Controllers;

   use App\Models\Portfolio;
   use Illuminate\Http\Request;
   use Inertia\Inertia;

   class PortfolioController extends Controller
   {
       public function index(Request $request)
       {
           $category = $request->query('category');
           
           $portfolios = Portfolio::query()
               ->when($category, function ($query, $category) {
                   return $query->where('category', $category);
               })
               ->latest()
               ->paginate(9);

           $categories = Portfolio::distinct()->pluck('category');

           return Inertia::render('Portfolio/Index', [
               'portfolios' => $portfolios,
               'categories' => $categories,
               'selectedCategory' => $category,
           ]);
       }

       public function show($id)
       {
           $portfolio = Portfolio::findOrFail($id);
           $portfolio->increment('views'); // 조회수 증가

           $prev = Portfolio::where('id', '<', $id)->orderBy('id', 'desc')->first();
           $next = Portfolio::where('id', '>', $id)->orderBy('id', 'asc')->first();

           return Inertia::render('Portfolio/Show', [
               'portfolio' => $portfolio,
               'prev' => $prev,
               'next' => $next,
           ]);
       }
   }
   ```

2. **라우트 추가 (`routes/web.php`):**
   ```php
   use App\Http\Controllers\PortfolioController;

   Route::get('/', [PortfolioController::class, 'index'])->name('portfolio.index');
   Route::get('/portfolio/{id}', [PortfolioController::class, 'show'])->name('portfolio.show');
   ```

3. **React 페이지 컴포넌트 생성:**

   `resources/js/Pages/Portfolio/Index.jsx`:
   ```jsx
   import { Head, Link } from '@inertiajs/react';

   export default function Index({ portfolios, categories, selectedCategory }) {
       return (
           <>
               <Head title="포트폴리오" />
               <div className="min-h-screen bg-gray-50">
                   <header className="bg-white shadow">
                       <div className="max-w-7xl mx-auto py-6 px-4">
                           <h1 className="text-3xl font-bold text-gray-900">디자이너 포트폴리오</h1>
                       </div>
                   </header>

                   <main className="max-w-7xl mx-auto py-8 px-4">
                       {/* 카테고리 필터 */}
                       <div className="flex gap-2 mb-6 flex-wrap">
                           <Link
                               href="/"
                               className={`px-4 py-2 rounded-full ${
                                   !selectedCategory
                                       ? 'bg-blue-600 text-white'
                                       : 'bg-white text-gray-700 hover:bg-gray-100'
                               }`}
                           >
                               전체
                           </Link>
                           {categories.map((cat) => (
                               <Link
                                   key={cat}
                                   href={`/?category=${cat}`}
                                   className={`px-4 py-2 rounded-full ${
                                       selectedCategory === cat
                                           ? 'bg-blue-600 text-white'
                                           : 'bg-white text-gray-700 hover:bg-gray-100'
                                   }`}
                               >
                                   {cat}
                               </Link>
                           ))}
                       </div>

                       {/* 작품 그리드 */}
                       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                           {portfolios.data.map((item) => (
                               <Link
                                   key={item.id}
                                   href={`/portfolio/${item.id}`}
                                   className="bg-white rounded-lg shadow overflow-hidden hover:shadow-lg transition"
                               >
                                   <img
                                       src={`/storage/${item.image_path}`}
                                       alt={item.title}
                                       className="w-full h-64 object-cover"
                                   />
                                   <div className="p-4">
                                       <h3 className="font-semibold text-lg mb-2">{item.title}</h3>
                                       <p className="text-sm text-gray-600 mb-2">{item.category}</p>
                                       <p className="text-xs text-gray-500">조회수: {item.views}</p>
                                   </div>
                               </Link>
                           ))}
                       </div>

                       {/* 페이지네이션 */}
                       <div className="mt-8 flex justify-center gap-2">
                           {portfolios.links.map((link, index) => (
                               <Link
                                   key={index}
                                   href={link.url || '#'}
                                   className={`px-4 py-2 rounded ${
                                       link.active
                                           ? 'bg-blue-600 text-white'
                                           : 'bg-white text-gray-700 hover:bg-gray-100'
                                   }`}
                                   dangerouslySetInnerHTML={{ __html: link.label }}
                               />
                           ))}
                       </div>
                   </main>
               </div>
           </>
       );
   }
   ```

**다음 단계 준비:**

- 작품 상세 페이지 구현
- 더미 데이터 추가하여 갤러리 테스트

**작품 상세 페이지 구현 (라이트박스 모달, 이전/다음 네비게이션)**

`resources/js/Pages/Portfolio/Show.jsx`:
```jsx
import { Head, Link } from '@inertiajs/react';
import { useState } from 'react';

export default function Show({ portfolio, prev, next }) {
    const [isModalOpen, setIsModalOpen] = useState(false);

    return (
        <>
            <Head title={portfolio.title} />
            <div className="min-h-screen bg-gray-50">
                <header className="bg-white shadow">
                    <div className="max-w-7xl mx-auto py-6 px-4">
                        <Link href="/" className="text-blue-600 hover:underline">
                            ← 갤러리로 돌아가기
                        </Link>
                    </div>
                </header>

                <main className="max-w-4xl mx-auto py-8 px-4">
                    {/* 작품 이미지 */}
                    <div className="bg-white rounded-lg shadow overflow-hidden mb-6">
                        <img
                            src={`/storage/${portfolio.image_path}`}
                            alt={portfolio.title}
                            className="w-full cursor-pointer"
                            onClick={() => setIsModalOpen(true)}
                        />
                    </div>

                    {/* 작품 정보 */}
                    <div className="bg-white rounded-lg shadow p-6 mb-6">
                        <h1 className="text-3xl font-bold mb-2">{portfolio.title}</h1>
                        <p className="text-gray-600 mb-4">{portfolio.category}</p>
                        <p className="text-gray-700 mb-4">{portfolio.description}</p>
                        
                        {portfolio.tools && portfolio.tools.length > 0 && (
                            <div className="mb-4">
                                <h3 className="font-semibold mb-2">사용 툴:</h3>
                                <div className="flex gap-2 flex-wrap">
                                    {portfolio.tools.map((tool, index) => (
                                        <span
                                            key={index}
                                            className="px-3 py-1 bg-gray-200 text-gray-700 rounded-full text-sm"
                                        >
                                            {tool}
                                        </span>
                                    ))}
                                </div>
                            </div>
                        )}

                        <p className="text-sm text-gray-500">조회수: {portfolio.views}</p>
                    </div>

                    {/* 이전/다음 네비게이션 */}
                    <div className="flex justify-between">
                        {prev ? (
                            <Link
                                href={`/portfolio/${prev.id}`}
                                className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
                            >
                                ← 이전 작품
                            </Link>
                        ) : (
                            <div></div>
                        )}
                        {next ? (
                            <Link
                                href={`/portfolio/${next.id}`}
                                className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
                            >
                                다음 작품 →
                            </Link>
                        ) : (
                            <div></div>
                        )}
                    </div>
                </main>
            </div>

            {/* 라이트박스 모달 */}
            {isModalOpen && (
                <div
                    className="fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50"
                    onClick={() => setIsModalOpen(false)}
                >
                    <img
                        src={`/storage/${portfolio.image_path}`}
                        alt={portfolio.title}
                        className="max-w-full max-h-full"
                    />
                    <button
                        className="absolute top-4 right-4 text-white text-4xl"
                        onClick={() => setIsModalOpen(false)}
                    >
                        ×
                    </button>
                </div>
            )}
        </>
    );
}
```

**테스트용 더미 데이터 추가:**

`php artisan tinker` 실행 후:
```php
App\Models\Portfolio::create([
    'title' => '미니멀 로고 디자인',
    'description' => '깔끔하고 현대적인 로고 작업',
    'category' => '로고',
    'image_path' => 'portfolios/sample1.jpg', // public/storage/portfolios/sample1.jpg 준비 필요
    'tools' => ['Illustrator', 'Photoshop'],
]);

App\Models\Portfolio::create([
    'title' => '반응형 웹사이트 디자인',
    'description' => '모바일 친화적 UI/UX',
    'category' => '웹디자인',
    'image_path' => 'portfolios/sample2.jpg',
    'tools' => ['Figma', 'Adobe XD'],
]);
```

*참고: 실제 이미지를 `public/storage/portfolios/` 폴더에 배치하거나, placeholder 이미지 서비스 사용 (예: `https://via.placeholder.com/800x600`)*

**다음 단계 준비:**

- 견적 문의 폼 페이지 구현

**견적 문의 폼 페이지 구현 (서비스 선택, 파일 업로드, 유효성 검사)**

1. **InquiryController 생성:**
   ```bash
   php artisan make:controller InquiryController
   ```

   `app/Http/Controllers/InquiryController.php`:
   ```php
   <?php

   namespace App\Http\Controllers;

   use App\Models\Inquiry;
   use Illuminate\Http\Request;
   use Inertia\Inertia;

   class InquiryController extends Controller
   {
       public function create()
       {
           $services = ['로고 디자인', '명함 디자인', '웹 배너', '패키징 디자인', '브랜드 아이덴티티'];
           
           return Inertia::render('Inquiry/Create', [
               'services' => $services,
           ]);
       }

       public function store(Request $request)
       {
           $validated = $request->validate([
               'service' => 'required|string',
               'client_name' => 'required|string|max:255',
               'client_email' => 'required|email',
               'project_details' => 'required|string|min:20',
               'budget_range' => 'nullable|string',
               'desired_date' => 'nullable|date|after:today',
               'reference_image' => 'nullable|image|max:5120', // 최대 5MB
           ]);

           if ($request->hasFile('reference_image')) {
               $path = $request->file('reference_image')->store('inquiries', 'public');
               $validated['reference_image'] = $path;
           }

           Inquiry::create($validated);

           return redirect()->route('inquiry.success');
       }

       public function success()
       {
           return Inertia::render('Inquiry/Success');
       }
   }
   ```

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

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

3. **React 폼 컴포넌트 생성:**

   `resources/js/Pages/Inquiry/Create.jsx`:
   ```jsx
   import { Head, useForm } from '@inertiajs/react';

   export default function Create({ services }) {
       const { data, setData, post, processing, errors } = useForm({
           service: '',
           client_name: '',
           client_email: '',
           project_details: '',
           budget_range: '',
           desired_date: '',
           reference_image: null,
       });

       function submit(e) {
           e.preventDefault();
           post('/inquiry');
       }

       return (
           <>
               <Head title="견적 문의" />
               <div className="min-h-screen bg-gray-50">
                   <header className="bg-white shadow">
                       <div className="max-w-7xl mx-auto py-6 px-4">
                           <h1 className="text-3xl font-bold text-gray-900">견적 문의</h1>
                       </div>
                   </header>

                   <main className="max-w-2xl mx-auto py-8 px-4">
                       <form onSubmit={submit} className="bg-white rounded-lg shadow p-6 space-y-4">
                           {/* 서비스 선택 */}
                           <div>
                               <label className="block text-sm font-medium text-gray-700 mb-1">
                                   요청 서비스 *
                               </label>
                               <select
                                   value={data.service}
                                   onChange={(e) => setData('service', e.target.value)}
                                   className="w-full border border-gray-300 rounded px-3 py-2"
                               >
                                   <option value="">선택하세요</option>
                                   {services.map((service) => (
                                       <option key={service} value={service}>
                                           {service}
                                       </option>
                                   ))}
                               </select>
                               {errors.service && (
                                   <p className="text-red-600 text-sm mt-1">{errors.service}</p>
                               )}
                           </div>

                           {/* 이름 */}
                           <div>
                               <label className="block text-sm font-medium text-gray-700 mb-1">
                                   이름 *
                               </label>
                               <input
                                   type="text"
                                   value={data.client_name}
                                   onChange={(e) => setData('client_name', e.target.value)}
                                   className="w-full border border-gray-300 rounded px-3 py-2"
                               />
                               {errors.client_name && (
                                   <p className="text-red-600 text-sm mt-1">{errors.client_name}</p>
                               )}
                           </div>

                           {/* 이메일 */}
                           <div>
                               <label className="block text-sm font-medium text-gray-700 mb-1">
                                   이메일 *
                               </label>
                               <input
                                   type="email"
                                   value={data.client_email}
                                   onChange={(e) => setData('client_email', e.target.value)}
                                   className="w-full border border-gray-300 rounded px-3 py-2"
                               />
                               {errors.client_email && (
                                   <p className="text-red-600 text-sm mt-1">{errors.client_email}</p>
                               )}
                           </div>

                           {/* 프로젝트 상세 */}
                           <div>
                               <label className="block text-sm font-medium text-gray-700 mb-1">
                                   프로젝트 상세 설명 * (최소 20자)
                               </label>
                               <textarea
                                   value={data.project_details}
                                   onChange={(e) => setData('project_details', e.target.value)}
                                   rows="5"
                                   className="w-full border border-gray-300 rounded px-3 py-2"
                               />
                               {errors.project_details && (
                                   <p className="text-red-600 text-sm mt-1">{errors.project_details}</p>
                               )}
                           </div>

                           {/* 예산 범위 */}
                           <div>
                               <label className="block text-sm font-medium text-gray-700 mb-1">
                                   예산 범위 (선택)
                               </label>
                               <select
                                   value={data.budget_range}
                                   onChange={(e) => setData('budget_range', e.target.value)}
                                   className="w-full border border-gray-300 rounded px-3 py-2"
                               >
                                   <option value="">선택하세요</option>
                                   <option value="50만원 이하">50만원 이하</option>
                                   <option value="50만원 ~ 100만원">50만원 ~ 100만원</option>
                                   <option value="100만원 ~ 200만원">100만원 ~ 200만원</option>
                                   <option value="200만원 이상">200만원 이상</option>
                               </select>
                           </div>

                           {/* 희망 완료 일정 */}
                           <div>
                               <label className="block text-sm font-medium text-gray-700 mb-1">
                                   희망 완료 일정 (선택)
                               </label>
                               <input
                                   type="date"
                                   value={data.desired_date}
                                   onChange={(e) => setData('desired_date', e.target.value)}
                                   className="w-full border border-gray-300 rounded px-3 py-2"
                               />
                               {errors.desired_date && (
                                   <p className="text-red-600 text-sm mt-1">{errors.desired_date}</p>
                               )}
                           </div>

                           {/* 참고 이미지 */}
                           <div>
                               <label className="block text-sm font-medium text-gray-700 mb-1">
                                   참고 이미지 (선택, 최대 5MB)
                               </label>
                               <input
                                   type="file"
                                   accept="image/*"
                                   onChange={(e) => setData('reference_image', e.target.files[0])}
                                   className="w-full border border-gray-300 rounded px-3 py-2"
                               />
                               {errors.reference_image && (
                                   <p className="text-red-600 text-sm mt-1">{errors.reference_image}</p>
                               )}
                           </div>

                           {/* 제출 버튼 */}
                           <button
                               type="submit"
                               disabled={processing}
                               className="w-full bg-blue-600 text-white py-3 rounded hover:bg-blue-700 disabled:bg-gray-400"
                           >
                               {processing ? '전송 중...' : '견적 문의 보내기'}
                           </button>
                       </form>
                   </main>
               </div>
           </>
       );
   }
   ```

4. **성공 페이지 생성:**

   `resources/js/Pages/Inquiry/Success.jsx`:
   ```jsx
   import { Head, Link } from '@inertiajs/react';

   export default function Success() {
       return (
           <>
               <Head title="문의 완료" />
               <div className="min-h-screen bg-gray-50 flex items-center justify-center">
                   <div className="bg-white rounded-lg shadow p-8 text-center max-w-md">
                       <div className="text-6xl mb-4">✅</div>
                       <h1 className="text-2xl font-bold mb-4">문의가 접수되었습니다!</h1>
                       <p className="text-gray-600 mb-6">
                           빠른 시일 내에 이메일로 답변 드리겠습니다.
                       </p>
                       <Link
                           href="/"
                           className="inline-block bg-blue-600 text-white px-6 py-3 rounded hover:bg-blue-700"
                       >
                           갤러리로 돌아가기
                       </Link>
                   </div>
               </div>
           </>
       );
   }
   ```

**다음 단계 준비:**

- 네비게이션 메뉴에 견적 문의 링크 추가
- 디자이너용 문의 관리 페이지 구현

**디자이너용 문의 관리 페이지 구현 (인증 필요, 상태 변경)**

1. **InquiryController에 관리 메서드 추가:**

   `app/Http/Controllers/InquiryController.php`에 추가:
   ```php
   public function manage()
   {
       $inquiries = Inquiry::latest()->paginate(10);
       
       return Inertia::render('Inquiry/Manage', [
           'inquiries' => $inquiries,
       ]);
   }

   public function updateStatus(Request $request, $id)
   {
       $validated = $request->validate([
           'status' => 'required|in:pending,reviewed,in_progress,completed',
       ]);

       $inquiry = Inquiry::findOrFail($id);
       $inquiry->update($validated);

       return back();
   }
   ```

2. **라우트 추가 (인증 필요):**

   `routes/web.php`:
   ```php
   Route::middleware('auth')->group(function () {
       Route::get('/manage/inquiries', [InquiryController::class, 'manage'])->name('inquiry.manage');
       Route::patch('/manage/inquiries/{id}/status', [InquiryController::class, 'updateStatus'])->name('inquiry.updateStatus');
   });
   ```

3. **React 관리 페이지 생성:**

   `resources/js/Pages/Inquiry/Manage.jsx`:
   ```jsx
   import { Head, Link, router } from '@inertiajs/react';
   import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';

   export default function Manage({ auth, inquiries }) {
       const statusColors = {
           pending: 'bg-yellow-100 text-yellow-800',
           reviewed: 'bg-blue-100 text-blue-800',
           in_progress: 'bg-purple-100 text-purple-800',
           completed: 'bg-green-100 text-green-800',
       };

       const statusLabels = {
           pending: '검토 대기',
           reviewed: '검토 완료',
           in_progress: '진행 중',
           completed: '완료',
       };

       function changeStatus(id, newStatus) {
           router.patch(`/manage/inquiries/${id}/status`, { status: newStatus });
       }

       return (
           <AuthenticatedLayout
               user={auth.user}
               header={<h2 className="font-semibold text-xl text-gray-800 leading-tight">문의 관리</h2>}
           >
               <Head title="문의 관리" />

               <div className="py-12">
                   <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                       <div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                           <div className="p-6">
                               <div className="overflow-x-auto">
                                   <table className="min-w-full divide-y divide-gray-200">
                                       <thead className="bg-gray-50">
                                           <tr>
                                               <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                   서비스
                                               </th>
                                               <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                   의뢰인
                                               </th>
                                               <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                   이메일
                                               </th>
                                               <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                   상태
                                               </th>
                                               <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                   접수일
                                               </th>
                                               <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                                   액션
                                               </th>
                                           </tr>
                                       </thead>
                                       <tbody className="bg-white divide-y divide-gray-200">
                                           {inquiries.data.map((inquiry) => (
                                               <tr key={inquiry.id}>
                                                   <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                                       {inquiry.service}
                                                   </td>
                                                   <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                       {inquiry.client_name}
                                                   </td>
                                                   <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                       {inquiry.client_email}
                                                   </td>
                                                   <td className="px-6 py-4 whitespace-nowrap">
                                                       <span
                                                           className={`px-2 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${
                                                               statusColors[inquiry.status]
                                                           }`}
                                                       >
                                                           {statusLabels[inquiry.status]}
                                                       </span>
                                                   </td>
                                                   <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                                       {new Date(inquiry.created_at).toLocaleDateString('ko-KR')}
                                                   </td>
                                                   <td className="px-6 py-4 whitespace-nowrap text-sm">
                                                       <select
                                                           value={inquiry.status}
                                                           onChange={(e) => changeStatus(inquiry.id, e.target.value)}
                                                           className="border border-gray-300 rounded px-2 py-1 text-xs"
                                                       >
                                                           <option value="pending">검토 대기</option>
                                                           <option value="reviewed">검토 완료</option>
                                                           <option value="in_progress">진행 중</option>
                                                           <option value="completed">완료</option>
                                                       </select>
                                                   </td>
                                               </tr>
                                           ))}
                                       </tbody>
                                   </table>
                               </div>

                               {/* 페이지네이션 */}
                               <div className="mt-4 flex justify-center gap-2">
                                   {inquiries.links.map((link, index) => (
                                       <Link
                                           key={index}
                                           href={link.url || '#'}
                                           className={`px-4 py-2 rounded ${
                                               link.active
                                                   ? 'bg-blue-600 text-white'
                                                   : 'bg-white text-gray-700 hover:bg-gray-100'
                                           }`}
                                           dangerouslySetInnerHTML={{ __html: link.label }}
                                       />
                                   ))}
                               </div>
                           </div>
                       </div>
                   </div>
               </div>
           </AuthenticatedLayout>
       );
   }
   ```

4. **네비게이션 메뉴에 링크 추가:**

   `resources/js/Layouts/AuthenticatedLayout.jsx`의 네비게이션 부분에 추가:
   ```jsx
   <NavLink href={route('inquiry.manage')} active={route().current('inquiry.manage')}>
       문의 관리
   </NavLink>
   ```

5. **공개 페이지에 견적 문의 버튼 추가:**

   `resources/js/Pages/Portfolio/Index.jsx`의 헤더에 버튼 추가:
   ```jsx
   <header className="bg-white shadow">
       <div className="max-w-7xl mx-auto py-6 px-4 flex justify-between items-center">
           <h1 className="text-3xl font-bold text-gray-900">디자이너 포트폴리오</h1>
           <Link
               href="/inquiry"
               className="bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700"
           >
               견적 문의하기
           </Link>
       </div>
   </header>
   ```

**최종 테스트:**

1. 회원가입/로그인 (Breeze 기본 기능)
2. 갤러리에서 작품 확인
3. 견적 문의 폼 제출
4. 로그인 후 문의 관리 페이지에서 상태 변경

**프로젝트 완성!**