🎨 온라인 포트폴리오 CMS - 드래그 앤 드롭 페이지 빌더 & 미디어 라이브러리

mkdir portfolio-cms-drag-drop && cd portfolio-cms-drag-drop

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

# 단계 1: 프로젝트 초기 설정 및 데이터베이스 스키마 구축

## 작업 내용

1. **디렉토리 구조 생성**
   - `admin/`, `api/`, `includes/`, `uploads/original/`, `uploads/thumbnails/`, `assets/css/`, `assets/js/` 폴더 생성

2. **SQLite 데이터베이스 초기화**
   - `includes/db.php` 파일 생성
   - PDO로 `database.sqlite` 연결
   - 테이블 생성 SQL:
     ```sql
     CREATE TABLE IF NOT EXISTS users (
       id INTEGER PRIMARY KEY AUTOINCREMENT,
       username TEXT UNIQUE NOT NULL,
       email TEXT UNIQUE NOT NULL,
       password TEXT NOT NULL,
       created_at DATETIME DEFAULT CURRENT_TIMESTAMP
     );

     CREATE TABLE IF NOT EXISTS sections (
       id INTEGER PRIMARY KEY AUTOINCREMENT,
       user_id INTEGER NOT NULL,
       type TEXT NOT NULL CHECK(type IN ('hero', 'about', 'gallery', 'contact', 'testimonial', 'skills')),
       title TEXT NOT NULL,
       content TEXT,
       image_id INTEGER,
       sort_order INTEGER NOT NULL DEFAULT 0,
       created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
       FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE,
       FOREIGN KEY (image_id) REFERENCES media(id) ON DELETE SET NULL
     );

     CREATE TABLE IF NOT EXISTS media (
       id INTEGER PRIMARY KEY AUTOINCREMENT,
       user_id INTEGER NOT NULL,
       filename TEXT NOT NULL,
       path TEXT NOT NULL,
       thumbnail_path TEXT NOT NULL,
       size INTEGER NOT NULL,
       mime_type TEXT NOT NULL,
       created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
       FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
     );

     CREATE TABLE IF NOT EXISTS stats (
       id INTEGER PRIMARY KEY AUTOINCREMENT,
       user_id INTEGER NOT NULL,
       date DATE NOT NULL,
       views INTEGER DEFAULT 0,
       UNIQUE(user_id, date),
       FOREIGN KEY (user_id) REFERENCES users(id) ON DELETE CASCADE
     );

     CREATE INDEX idx_sections_user_sort ON sections(user_id, sort_order);
     CREATE INDEX idx_media_user ON media(user_id);
     CREATE INDEX idx_stats_user_date ON stats(user_id, date);
     ```

3. **인증 헬퍼 함수 작성**
   - `includes/auth.php` 파일 생성
   - 함수 목록:
     - `isLoggedIn()`: 세션에서 로그인 상태 확인
     - `requireAuth()`: 로그인 필수 페이지에서 호출, 미인증 시 리다이렉트
     - `getCurrentUserId()`: 세션에서 현재 사용자 ID 반환

4. **CSRF 토큰 헬퍼 함수 작성**
   - `includes/csrf.php` 파일 생성
   - 함수 목록:
     - `generateCSRFToken()`: 세션에 토큰 생성 및 저장
     - `verifyCSRFToken($token)`: POST 요청의 토큰 검증
     - `csrfField()`: HTML 폼에 삽입할 hidden input 생성

5. **기본 사용자 계정 생성 (테스트용)**
   - `setup.php` 파일 생성
   - 실행 시 관리자 계정 자동 생성:
     - username: `admin`
     - email: `admin@example.com`
     - password: `password123` (해시 저장)
   - 터미널에서 `php setup.php` 실행 후 "Setup complete!" 메시지 출력

## 요구사항

- PHP 8.3+ 문법 사용 (타입 힌팅, readonly 속성 등)
- PDO 에러 모드는 `PDO::ERRMODE_EXCEPTION`으로 설정
- 비밀번호는 `password_hash($password, PASSWORD_BCRYPT)` 사용
- 데이터베이스 파일은 프로젝트 루트에 `database.sqlite`로 생성
- 모든 파일은 UTF-8 인코딩

## 예상 결과

- `database.sqlite` 파일 생성 및 4개 테이블 생성 완료
- `includes/db.php`, `includes/auth.php`, `includes/csrf.php` 파일 생성
- `setup.php` 실행 시 관리자 계정 생성 확인
- 터미널에서 `php -S localhost:8000` 실행 준비 완료

# 단계 2: 로그인 시스템 구축 (프론트엔드 + API)

## 작업 내용

1. **로그인 페이지 생성**
   - `admin/login.php` 파일 생성
   - Tailwind CSS CDN으로 스타일링
   - 폼 구성:
     - 이메일 입력 필드 (type="email", required)
     - 비밀번호 입력 필드 (type="password", required)
     - CSRF 토큰 hidden input (`csrfField()` 사용)
     - 로그인 버튼
   - 폼 액션: `POST /api/auth.php?action=login`
   - 에러 메시지 출력 영역 (GET 파라미터 `error` 체크)

2. **인증 API 구현**
   - `api/auth.php` 파일 생성
   - 액션 분기:
     - `action=login`: 로그인 처리
       - CSRF 토큰 검증
       - 이메일로 사용자 조회 (PDO Prepared Statement)
       - `password_verify()`로 비밀번호 확인
       - 성공 시 세션에 `user_id`, `username` 저장 후 `/admin/dashboard.php` 리다이렉트
       - 실패 시 `/admin/login.php?error=invalid` 리다이렉트
     - `action=logout`: 로그아웃 처리
       - 세션 파괴 (`session_destroy()`)
       - `/admin/login.php` 리다이렉트

3. **관리자 대시보드 생성 (임시)**
   - `admin/dashboard.php` 파일 생성
   - `requireAuth()` 호출로 인증 확인
   - 간단한 환영 메시지 출력: "Welcome, {username}!"
   - 로그아웃 버튼 (링크: `/api/auth.php?action=logout`)
   - 다음 단계에서 페이지 빌더 링크 추가 예정

4. **세션 초기화 코드 추가**
   - 모든 PHP 파일 상단에 `session_start()` 추가
   - `includes/auth.php`에서 세션 시작 확인

## 보안 요구사항

- CSRF 토큰 검증 실패 시 403 에러 반환
- 비밀번호 입력 실패 시 구체적인 이유 노출 금지 ("Invalid credentials" 메시지만)
- SQL Injection 방지: PDO Prepared Statement 사용
- XSS 방지: 모든 출력에 `htmlspecialchars()` 적용

## 디자인 가이드

- Tailwind CSS 유틸리티 클래스 사용
- 로그인 폼은 화면 중앙 정렬 (`flex items-center justify-center min-h-screen`)
- 입력 필드는 `border rounded-lg px-4 py-2` 스타일
- 버튼은 `bg-blue-600 text-white px-6 py-2 rounded-lg hover:bg-blue-700` 스타일

## 예상 결과

- `/admin/login.php` 접속 시 로그인 폼 표시
- 올바른 이메일/비밀번호 입력 시 대시보드로 이동
- 잘못된 정보 입력 시 에러 메시지 출력
- 로그아웃 버튼 클릭 시 세션 파괴 및 로그인 페이지로 리다이렉트

# 단계 3: 미디어 라이브러리 구축 (업로드 + 썸네일 생성)

## 작업 내용

1. **미디어 라이브러리 페이지 생성**
   - `admin/media.php` 파일 생성
   - `requireAuth()` 호출로 인증 확인
   - 상단 네비게이션: Dashboard, Page Builder, Media Library (현재 페이지 강조)
   - 업로드 폼:
     - `<input type="file" name="image" accept="image/jpeg,image/png,image/webp" multiple>`
     - CSRF 토큰 hidden input
     - 폼 액션: `POST /api/media.php?action=upload`
     - enctype="multipart/form-data"
   - 미디어 그리드:
     - 데이터베이스에서 현재 사용자의 미디어 조회 (최신순 정렬)
     - 각 미디어 카드:
       - 썸네일 이미지 표시 (`<img src="/uploads/thumbnails/{filename}">`)
       - 파일명, 크기(KB), 업로드 날짜 표시
       - 삭제 버튼 (AJAX로 `/api/media.php?action=delete` 호출)

2. **미디어 업로드 API 구현**
   - `api/media.php` 파일 생성
   - 액션 분기:
     - `action=upload`: 이미지 업로드
       - CSRF 토큰 검증
       - 파일 검증:
         - MIME 타입 체크 (`image/jpeg`, `image/png`, `image/webp`만 허용)
         - 파일 크기 체크 (최대 5MB)
         - 파일 확장자 체크 (화이트리스트 방식)
       - 고유 파일명 생성: `{timestamp}_{random}_{original_name}`
       - 원본 이미지 저장: `/uploads/original/`
       - 썸네일 생성 (GD 라이브러리):
         - 최대 300x300px로 리사이즈
         - 비율 유지하며 크롭
         - 저장 경로: `/uploads/thumbnails/`
       - 데이터베이스에 미디어 정보 저장 (PDO Prepared Statement)
       - 성공 시 JSON 응답: `{"success": true, "media_id": 123}`
     - `action=delete`: 이미지 삭제
       - CSRF 토큰 검증
       - 미디어 소유권 확인 (user_id 일치 여부)
       - 파일 시스템에서 원본 및 썸네일 삭제
       - 데이터베이스에서 레코드 삭제
       - 성공 시 JSON 응답: `{"success": true}`
     - `action=list`: 미디어 목록 조회 (JSON)
       - 현재 사용자의 미디어 목록 반환
       - 페이지네이션 지원 (선택 사항)

3. **썸네일 생성 헬퍼 함수**
   - `includes/image.php` 파일 생성
   - 함수: `createThumbnail($sourcePath, $destPath, $maxWidth = 300, $maxHeight = 300)`
   - GD 라이브러리 사용:
     - `imagecreatefromjpeg()`, `imagecreatefrompng()`, `imagecreatefromwebp()`
     - `imagecopyresampled()` 로 리사이즈
     - `imagejpeg()`, `imagepng()`, `imagewebp()`로 저장
   - 비율 유지 계산 로직 포함

4. **프론트엔드 JavaScript (AJAX 삭제)**
   - `assets/js/media.js` 파일 생성
   - 삭제 버튼 클릭 시:
     - `fetch('/api/media.php?action=delete', { method: 'POST', body: formData })`
     - 성공 시 해당 미디어 카드 DOM에서 제거
     - 실패 시 alert 표시

## 보안 요구사항

- 업로드 파일은 반드시 `$_FILES['image']['tmp_name']`에서 읽기
- `move_uploaded_file()` 사용 (보안 검증 포함)
- 파일명은 사용자 입력 그대로 사용 금지 (랜덤 문자열 추가)
- 미디어 삭제 시 소유권 확인 필수
- MIME 타입은 `mime_content_type()` 함수로 재검증

## 디자인 가이드

- 미디어 그리드는 `grid grid-cols-3 gap-4` (반응형: `md:grid-cols-4 lg:grid-cols-6`)
- 썸네일은 `aspect-square object-cover rounded-lg` 스타일
- 삭제 버튼은 카드 우측 상단에 절대 위치 (`absolute top-2 right-2`)

## 예상 결과

- `/admin/media.php` 접속 시 업로드 폼 및 미디어 그리드 표시
- 이미지 업로드 시 원본 및 썸네일 생성 확인
- 미디어 그리드에 업로드된 이미지 카드 표시
- 삭제 버튼 클릭 시 AJAX로 삭제 및 카드 제거

# 단계 4: 드래그 앤 드롭 페이지 빌더 UI 구축

## 작업 내용

1. **페이지 빌더 페이지 생성**
   - `admin/builder.php` 파일 생성
   - `requireAuth()` 호출로 인증 확인
   - 레이아웃 구성:
     - 좌측 사이드바 (섹션 타입 선택):
       - Hero, About, Gallery, Contact, Testimonial, Skills
       - 각 타입별 "+ Add" 버튼
     - 중앙 캔버스 (드래그 앤 드롭 영역):
       - 섹션 카드 목록 (sortable)
       - 각 카드:
         - 타입 아이콘 및 제목 표시
         - 드래그 핸들 (⋮⋮ 아이콘)
         - 편집 버튼 (모달 오픈)
         - 삭제 버튼
     - 우측 프리뷰 (선택 사항, 다음 단계에서 구현)

2. **Sortable.js 통합**
   - `<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>` CDN 추가
   - `assets/js/builder.js` 파일 생성
   - Sortable 초기화:
     ```javascript
     const sortable = Sortable.create(document.getElementById('sections-canvas'), {
       animation: 150,
       handle: '.drag-handle',
       onEnd: function(evt) {
         updateSortOrder();
       }
     });
     ```
   - `updateSortOrder()` 함수:
     - 현재 섹션 순서를 배열로 수집
     - AJAX로 `/api/sections.php?action=reorder` 호출
     - 서버에서 `sort_order` 컬럼 업데이트

3. **섹션 추가 기능**
   - 좌측 사이드바의 "+ Add" 버튼 클릭 시:
     - AJAX로 `/api/sections.php?action=create` 호출
     - POST 데이터: `{ type: 'hero', title: 'New Hero Section', content: '' }`
     - 성공 시 캔버스에 새 섹션 카드 추가

4. **섹션 편집 모달**
   - 편집 버튼 클릭 시 모달 오픈
   - 모달 구성:
     - 섹션 타입별 입력 필드:
       - Hero: 제목, 부제목, 배경 이미지 선택 버튼
       - About: 제목, 본문 텍스트 (textarea), 프로필 이미지 선택
       - Gallery: 제목, 이미지 선택 (다중 선택, 다음 단계에서 구현)
       - Contact: 제목, 이메일, 전화번호
       - Testimonial: 제목, 인용문, 작성자명, 작성자 사진
       - Skills: 제목, 스킬 목록 (JSON 형식)
     - 이미지 선택 버튼 클릭 시:
       - 미디어 라이브러리 모달 오픈
       - 썸네일 그리드 표시
       - 이미지 클릭 시 선택 및 모달 닫기
     - 저장 버튼: AJAX로 `/api/sections.php?action=update` 호출

5. **섹션 삭제 기능**
   - 삭제 버튼 클릭 시 확인 다이얼로그 표시
   - 확인 시 AJAX로 `/api/sections.php?action=delete` 호출
   - 성공 시 캔버스에서 섹션 카드 제거

6. **초기 데이터 로드**
   - 페이지 로드 시 `/api/sections.php?action=list` 호출
   - 현재 사용자의 섹션 목록 조회 (sort_order 순)
   - 캔버스에 섹션 카드 렌더링

## 디자인 가이드

- 좌측 사이드바: `w-64 bg-gray-100 p-4`
- 중앙 캔버스: `flex-1 bg-white p-6`
- 섹션 카드: `border rounded-lg p-4 mb-4 bg-white shadow-sm hover:shadow-md`
- 드래그 핸들: `cursor-move text-gray-400`
- 모달: `fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50`
- 모달 컨텐츠: `bg-white rounded-lg p-6 max-w-2xl w-full max-h-screen overflow-y-auto`

## JavaScript 요구사항

- 모든 AJAX 요청은 `fetch()` API 사용
- CSRF 토큰은 hidden input에서 읽어서 FormData에 추가
- 에러 처리: `catch()` 블록에서 alert 표시
- 성공 메시지: 화면 우측 상단에 토스트 알림 (선택 사항)

## 예상 결과

- `/admin/builder.php` 접속 시 페이지 빌더 UI 표시
- 좌측 사이드바에서 섹션 타입 선택 후 추가 가능
- 캔버스에서 섹션 카드 드래그 앤 드롭으로 순서 변경
- 편집 버튼 클릭 시 모달 오픈 및 입력 필드 표시
- 삭제 버튼 클릭 시 확인 후 섹션 제거

# 단계 5: 섹션 CRUD API 구현 (백엔드)

## 작업 내용

1. **섹션 API 파일 생성**
   - `api/sections.php` 파일 생성
   - 액션 분기:
     - `action=list`: 섹션 목록 조회
     - `action=create`: 섹션 생성
     - `action=update`: 섹션 수정
     - `action=delete`: 섹션 삭제
     - `action=reorder`: 섹션 순서 변경

2. **섹션 목록 조회 API**
   - GET 요청 처리
   - 현재 사용자의 섹션 목록 조회:
     ```sql
     SELECT s.*, m.path as image_path, m.thumbnail_path
     FROM sections s
     LEFT JOIN media m ON s.image_id = m.id
     WHERE s.user_id = :user_id
     ORDER BY s.sort_order ASC
     ```
   - JSON 응답:
     ```json
     {
       "success": true,
       "sections": [
         {
           "id": 1,
           "type": "hero",
           "title": "Welcome",
           "content": "{\"subtitle\":\"My Portfolio\",\"image_id\":5}",
           "image_path": "/uploads/original/hero.jpg",
           "thumbnail_path": "/uploads/thumbnails/hero.jpg",
           "sort_order": 0
         }
       ]
     }
     ```

3. **섹션 생성 API**
   - POST 요청 처리
   - CSRF 토큰 검증
   - 입력 검증:
     - `type`: hero, about, gallery, contact, testimonial, skills 중 하나
     - `title`: 최대 255자
     - `content`: JSON 형식 (선택 사항)
   - 새 섹션 삽입:
     ```sql
     INSERT INTO sections (user_id, type, title, content, sort_order)
     VALUES (:user_id, :type, :title, :content, :sort_order)
     ```
   - `sort_order`는 현재 최대값 + 1
   - JSON 응답:
     ```json
     {
       "success": true,
       "section_id": 123
     }
     ```

4. **섹션 수정 API**
   - POST 요청 처리
   - CSRF 토큰 검증
   - 섹션 소유권 확인 (user_id 일치 여부)
   - 입력 검증 (생성 API와 동일)
   - 섹션 업데이트:
     ```sql
     UPDATE sections
     SET title = :title, content = :content, image_id = :image_id
     WHERE id = :id AND user_id = :user_id
     ```
   - JSON 응답:
     ```json
     {
       "success": true
     }
     ```

5. **섹션 삭제 API**
   - POST 요청 처리
   - CSRF 토큰 검증
   - 섹션 소유권 확인
   - 섹션 삭제:
     ```sql
     DELETE FROM sections
     WHERE id = :id AND user_id = :user_id
     ```
   - 삭제 후 `sort_order` 재정렬 (선택 사항)
   - JSON 응답:
     ```json
     {
       "success": true
     }
     ```

6. **섹션 순서 변경 API**
   - POST 요청 처리
   - CSRF 토큰 검증
   - 입력: `section_ids` 배열 (정렬된 섹션 ID 목록)
   - 트랜잭션으로 처리:
     ```php
     $pdo->beginTransaction();
     foreach ($section_ids as $index => $id) {
       $stmt = $pdo->prepare("UPDATE sections SET sort_order = :order WHERE id = :id AND user_id = :user_id");
       $stmt->execute(['order' => $index, 'id' => $id, 'user_id' => $user_id]);
     }
     $pdo->commit();
     ```
   - JSON 응답:
     ```json
     {
       "success": true
     }
     ```

## 보안 요구사항

- 모든 POST 요청에서 CSRF 토큰 검증
- PDO Prepared Statement 사용 (SQL Injection 방지)
- 섹션 수정/삭제 시 소유권 확인 필수
- `content` 필드는 JSON 형식으로 저장 (XSS 방지를 위해 출력 시 이스케이프)
- 입력 길이 제한 (title: 255자, content: 10000자)

## 에러 처리

- 인증 실패: `{"success": false, "error": "Unauthorized"}` (HTTP 401)
- CSRF 검증 실패: `{"success": false, "error": "Invalid CSRF token"}` (HTTP 403)
- 입력 검증 실패: `{"success": false, "error": "Invalid input"}` (HTTP 400)
- 소유권 확인 실패: `{"success": false, "error": "Forbidden"}` (HTTP 403)
- 서버 오류: `{"success": false, "error": "Internal server error"}` (HTTP 500)

## 예상 결과

- `/api/sections.php?action=list` 호출 시 현재 사용자의 섹션 목록 반환
- 페이지 빌더에서 섹션 추가/수정/삭제 시 API 호출 성공
- 드래그 앤 드롭으로 순서 변경 시 `reorder` API 호출 및 데이터베이스 업데이트
- 에러 발생 시 적절한 HTTP 상태 코드 및 메시지 반환

# 단계 6: 프론트엔드 포트폴리오 렌더링 (공개 페이지)

## 작업 내용

1. **프론트엔드 메인 페이지 생성**
   - `index.php` 파일 수정
   - URL 파라미터로 사용자 식별: `?user=admin` (또는 user_id)
   - 해당 사용자의 섹션 목록 조회 (sort_order 순)
   - 섹션 타입별 렌더링 함수 호출

2. **섹션 타입별 렌더링 함수**
   - `includes/render.php` 파일 생성
   - 함수 목록:
     - `renderHeroSection($section)`: 히어로 섹션 렌더링
       - 배경 이미지 표시 (`background-image: url(...)`)
       - 제목 및 부제목 표시
       - CTA 버튼 (선택 사항)
     - `renderAboutSection($section)`: 소개 섹션 렌더링
       - 프로필 이미지 및 텍스트 표시
       - 2열 레이아웃 (이미지 좌측, 텍스트 우측)
     - `renderGallerySection($section)`: 갤러리 섹션 렌더링
       - 이미지 그리드 표시 (`grid grid-cols-3 gap-4`)
       - 각 이미지에 라이트박스 링크 (`data-glightbox` 속성)
     - `renderContactSection($section)`: 연락처 섹션 렌더링
       - 이메일, 전화번호, 소셜 미디어 링크 표시
     - `renderTestimonialSection($section)`: 후기 섹션 렌더링
       - 인용문, 작성자명, 작성자 사진 표시
     - `renderSkillsSection($section)`: 스킬 섹션 렌더링
       - 스킬 목록 (JSON 파싱)
       - 프로그레스 바 또는 태그 형태로 표시

3. **GLightbox 라이브러리 통합**
   - `<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css">` CDN 추가
   - `<script src="https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js"></script>` CDN 추가
   - JavaScript 초기화:
     ```javascript
     const lightbox = GLightbox({
       selector: '[data-glightbox]'
     });
     ```
   - 갤러리 이미지에 `data-glightbox` 속성 추가:
     ```html
     <a href="/uploads/original/image.jpg" data-glightbox>
       <img src="/uploads/thumbnails/image.jpg" alt="Gallery Image">
     </a>
     ```

4. **SEO 메타 태그 생성**
   - `index.php` 상단에 동적 메타 태그 삽입:
     ```html
     <title><?= htmlspecialchars($user['username']) ?>'s Portfolio</title>
     <meta name="description" content="<?= htmlspecialchars($user['bio'] ?? 'Portfolio') ?>">
     <meta property="og:title" content="<?= htmlspecialchars($user['username']) ?>'s Portfolio">
     <meta property="og:image" content="<?= htmlspecialchars($hero_image ?? '/default.jpg') ?>">
     <meta property="og:type" content="website">
     ```

5. **방문자 통계 집계**
   - 페이지 로드 시 `stats` 테이블 업데이트:
     ```sql
     INSERT INTO stats (user_id, date, views)
     VALUES (:user_id, DATE('now'), 1)
     ON CONFLICT(user_id, date)
     DO UPDATE SET views = views + 1
     ```

6. **반응형 디자인**
   - Tailwind CSS 반응형 유틸리티 클래스 사용
   - 모바일: 단일 컬럼 레이아웃
   - 태블릿: 2컬럼 레이아웃
   - 데스크탑: 3컬럼 레이아웃

## 디자인 가이드

- 히어로 섹션: `min-h-screen flex items-center justify-center text-white`
- 섹션 간격: `py-16`
- 제목: `text-4xl font-bold mb-4`
- 본문: `text-lg text-gray-700`
- 갤러리 이미지: `aspect-square object-cover rounded-lg`

## 보안 요구사항

- 모든 출력에 `htmlspecialchars()` 적용 (XSS 방지)
- JSON 파싱 시 `json_decode()` 에러 처리
- 이미지 경로 검증 (디렉토리 트래버설 방지)

## 예상 결과

- `/index.php?user=admin` 접속 시 해당 사용자의 포트폴리오 표시
- 섹션 타입별로 다른 레이아웃 렌더링
- 갤러리 이미지 클릭 시 라이트박스 오픈
- 반응형 디자인으로 모바일/태블릿/데스크탑 모두 지원
- 방문자 통계 자동 집계

# 단계 7: 공개/비공개 전환 & 방문자 통계 대시보드

## 작업 내용

1. **공개/비공개 설정 추가**
   - `users` 테이블에 `is_public` 컬럼 추가 (BOOLEAN, 기본값 1)
   - 마이그레이션 SQL:
     ```sql
     ALTER TABLE users ADD COLUMN is_public INTEGER DEFAULT 1;
     ```
   - `admin/dashboard.php`에 공개/비공개 토글 버튼 추가
   - AJAX로 `/api/settings.php?action=toggle_public` 호출
   - 비공개 시 `index.php`에서 "This portfolio is private" 메시지 표시

2. **설정 API 구현**
   - `api/settings.php` 파일 생성
   - 액션 분기:
     - `action=toggle_public`: 공개/비공개 토글
       - CSRF 토큰 검증
       - `UPDATE users SET is_public = NOT is_public WHERE id = :user_id`
       - JSON 응답: `{"success": true, "is_public": true/false}`

3. **방문자 통계 대시보드**
   - `admin/dashboard.php`에 통계 위젯 추가
   - 통계 항목:
     - 오늘 방문자 수
     - 이번 주 방문자 수
     - 총 방문자 수
     - 최근 7일 방문자 추이 (차트)
   - SQL 쿼리:
     ```sql
     -- 오늘 방문자
     SELECT views FROM stats WHERE user_id = :user_id AND date = DATE('now')

     -- 이번 주 방문자
     SELECT SUM(views) FROM stats
     WHERE user_id = :user_id AND date >= DATE('now', '-7 days')

     -- 총 방문자
     SELECT SUM(views) FROM stats WHERE user_id = :user_id

     -- 최근 7일 추이
     SELECT date, views FROM stats
     WHERE user_id = :user_id AND date >= DATE('now', '-7 days')
     ORDER BY date ASC
     ```

4. **차트 라이브러리 통합 (선택 사항)**
   - Chart.js CDN 추가: `<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>`
   - 라인 차트로 방문자 추이 시각화:
     ```javascript
     const ctx = document.getElementById('visitsChart').getContext('2d');
     const chart = new Chart(ctx, {
       type: 'line',
       data: {
         labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
         datasets: [{
           label: 'Visits',
           data: [12, 19, 3, 5, 2, 3, 7],
           borderColor: 'rgb(59, 130, 246)',
           backgroundColor: 'rgba(59, 130, 246, 0.1)'
         }]
       }
     });
     ```

5. **대시보드 네비게이션 개선**
   - `admin/dashboard.php` 상단에 네비게이션 메뉴 추가:
     - Dashboard (현재 페이지)
     - Page Builder (`/admin/builder.php`)
     - Media Library (`/admin/media.php`)
     - Logout (`/api/auth.php?action=logout`)
   - 현재 페이지는 하이라이트 표시

## 디자인 가이드

- 통계 위젯: `grid grid-cols-3 gap-4 mb-8`
- 각 위젯: `bg-white rounded-lg shadow p-6`
- 숫자: `text-3xl font-bold text-blue-600`
- 라벨: `text-sm text-gray-600`
- 차트: `bg-white rounded-lg shadow p-6 mt-8`

## 보안 요구사항

- 공개/비공개 토글은 인증된 사용자만 가능
- CSRF 토큰 검증 필수
- 비공개 포트폴리오는 소유자만 볼 수 있도록 세션 체크

## 예상 결과

- `/admin/dashboard.php` 접속 시 방문자 통계 위젯 표시
- 공개/비공개 토글 버튼 클릭 시 설정 변경
- 비공개 설정 시 프론트엔드에서 "Private" 메시지 표시
- 차트로 최근 7일 방문자 추이 시각화

# 단계 8: 섹션별 커스텀 CSS & JSON 설정 고도화

## 작업 내용

1. **섹션 테이블에 커스텀 CSS 컬럼 추가**
   - 마이그레이션 SQL:
     ```sql
     ALTER TABLE sections ADD COLUMN custom_css TEXT;
     ```
   - 편집 모달에 "Custom CSS" textarea 추가
   - 입력 예시:
     ```css
     .section-123 {
       background-color: #f3f4f6;
       padding: 4rem 0;
     }
     ```

2. **섹션별 CSS 클래스 자동 생성**
   - 각 섹션에 고유 클래스 부여: `section-{id}`
   - `index.php`에서 섹션 렌더링 시:
     ```html
     <section class="section-<?= $section['id'] ?> <?= htmlspecialchars($section['custom_css_class'] ?? '') ?>">
       <!-- 섹션 내용 -->
     </section>
     ```

3. **커스텀 CSS 인라인 삽입**
   - `index.php` `<head>` 태그에 동적 `<style>` 태그 추가:
     ```php
     <style>
     <?php foreach ($sections as $section): ?>
       <?php if (!empty($section['custom_css'])): ?>
         <?= $section['custom_css'] ?>
       <?php endif; ?>
     <?php endforeach; ?>
     </style>
     ```

4. **섹션 설정 JSON 구조 정의**
   - `content` 컬럼에 저장되는 JSON 형식 표준화:
     - Hero:
       ```json
       {
         "subtitle": "My Creative Portfolio",
         "image_id": 5,
         "cta_text": "View My Work",
         "cta_link": "#gallery"
       }
       ```
     - About:
       ```json
       {
         "bio": "I'm a freelance designer...",
         "image_id": 3,
         "skills": ["Photoshop", "Illustrator", "Figma"]
       }
       ```
     - Gallery:
       ```json
       {
         "image_ids": [1, 2, 3, 4, 5, 6],
         "layout": "grid",
         "columns": 3
       }
       ```
     - Contact:
       ```json
       {
         "email": "hello@example.com",
         "phone": "+1234567890",
         "social": {
           "instagram": "@username",
           "twitter": "@username"
         }
       }
       ```
     - Testimonial:
       ```json
       {
         "quote": "Amazing work!",
         "author": "Jane Doe",
         "author_image_id": 7,
         "rating": 5
       }
       ```
     - Skills:
       ```json
       {
         "skills": [
           {"name": "PHP", "level": 90},
           {"name": "JavaScript", "level": 85}
         ]
       }
       ```

5. **편집 모달 입력 필드 개선**
   - JSON 구조에 맞춰 입력 필드 동적 생성
   - 예: Gallery 섹션 편집 시:
     - 이미지 선택 버튼 (다중 선택)
     - 레이아웃 선택 (Grid / Masonry)
     - 컬럼 수 선택 (2 / 3 / 4)
   - 저장 시 JavaScript로 JSON 객체 생성 후 서버 전송

6. **프론트엔드 렌더링 함수 업데이트**
   - `includes/render.php`의 각 함수에서 JSON 파싱:
     ```php
     function renderGallerySection($section) {
       $config = json_decode($section['content'], true);
       $image_ids = $config['image_ids'] ?? [];
       $columns = $config['columns'] ?? 3;
       // 이미지 조회 및 그리드 렌더링
     }
     ```

## 보안 요구사항

- 커스텀 CSS는 XSS 위험이 있으므로 관리자만 입력 가능
- CSS 입력 시 `<script>` 태그 필터링 (선택 사항)
- JSON 파싱 시 `json_decode()` 에러 처리 필수

## 디자인 가이드

- 편집 모달의 "Custom CSS" textarea는 `font-mono` 스타일
- JSON 입력 필드는 가독성을 위해 세로로 배치

## 예상 결과

- 섹션 편집 모달에서 "Custom CSS" 입력 가능
- 프론트엔드에서 각 섹션에 커스텀 CSS 적용
- JSON 설정에 따라 섹션 렌더링 동적 변경
- Gallery 섹션에서 이미지 다중 선택 및 레이아웃 설정 가능

# 단계 9: 이미지 캐싱 & 성능 최적화

## 작업 내용

1. **이미지 캐싱 헤더 추가**
   - `uploads/.htaccess` 파일 생성 (Apache 환경)
   - 캐싱 규칙 설정:
     ```apache
     <IfModule mod_expires.c>
       ExpiresActive On
       ExpiresByType image/jpeg "access plus 1 year"
       ExpiresByType image/png "access plus 1 year"
       ExpiresByType image/webp "access plus 1 year"
     </IfModule>

     <IfModule mod_headers.c>
       Header set Cache-Control "public, max-age=31536000"
     </IfModule>
     ```
   - PHP 내장 서버 사용 시 `index.php`에서 수동 헤더 추가:
     ```php
     if (preg_match('/\.(jpg|jpeg|png|webp)$/', $_SERVER['REQUEST_URI'])) {
       header('Cache-Control: public, max-age=31536000');
       header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 31536000) . ' GMT');
     }
     ```

2. **이미지 Lazy Loading**
   - 프론트엔드 `index.php`의 모든 `<img>` 태그에 `loading="lazy"` 속성 추가:
     ```html
     <img src="/uploads/thumbnails/image.jpg" alt="Gallery" loading="lazy">
     ```

3. **데이터베이스 쿼리 최적화**
   - 섹션 목록 조회 시 LEFT JOIN으로 미디어 정보 한 번에 가져오기:
     ```sql
     SELECT s.*, m.path, m.thumbnail_path
     FROM sections s
     LEFT JOIN media m ON s.image_id = m.id
     WHERE s.user_id = :user_id
     ORDER BY s.sort_order ASC
     ```
   - N+1 쿼리 문제 해결

4. **Gallery 섹션 이미지 일괄 조회**
   - Gallery 섹션의 `image_ids` 배열을 파싱하여 IN 쿼리로 일괄 조회:
     ```php
     $image_ids = json_decode($section['content'], true)['image_ids'] ?? [];
     if (!empty($image_ids)) {
       $placeholders = implode(',', array_fill(0, count($image_ids), '?'));
       $stmt = $pdo->prepare("SELECT * FROM media WHERE id IN ($placeholders)");
       $stmt->execute($image_ids);
       $images = $stmt->fetchAll();
     }
     ```

5. **CSS/JS 파일 최소화 (선택 사항)**
   - `assets/css/style.css` 파일 생성 (Tailwind 커스텀 스타일)
   - `assets/js/main.js` 파일 생성 (공통 JavaScript)
   - HTML에서 인라인 스타일/스크립트를 외부 파일로 분리

6. **Gzip 압축 활성화**
   - `.htaccess`에 Gzip 규칙 추가:
     ```apache
     <IfModule mod_deflate.c>
       AddOutputFilterByType DEFLATE text/html text/plain text/css application/json application/javascript
     </IfModule>
     ```

7. **섹션 렌더링 캐싱 (고급, 선택 사항)**
   - `includes/cache.php` 파일 생성
   - 함수: `getCachedHTML($key, $callback, $ttl = 3600)`
   - 섹션 HTML을 파일 캐시에 저장 (`cache/{user_id}_{section_id}.html`)
   - TTL 만료 시 재생성

## 성능 테스트

- 브라우저 개발자 도구 Network 탭에서 이미지 캐싱 확인
- Lighthouse 스코어 측정 (Performance 90+ 목표)

## 예상 결과

- 이미지 재방문 시 브라우저 캐시에서 로드 (304 Not Modified)
- 페이지 로드 속도 개선 (First Contentful Paint 1초 이내)
- 데이터베이스 쿼리 횟수 감소
- Lazy Loading으로 초기 로딩 시간 단축

# 단계 10: 테스트 & 보안 강화 & 배포 준비

## 작업 내용

1. **보안 체크리스트**
   - [ ] 모든 POST 요청에서 CSRF 토큰 검증
   - [ ] PDO Prepared Statement 사용 (SQL Injection 방지)
   - [ ] `htmlspecialchars()` 출력 이스케이프 (XSS 방지)
   - [ ] 파일 업로드 MIME 타입 검증
   - [ ] 비밀번호 해시 저장 (`password_hash()`)
   - [ ] 세션 하이재킹 방지 (`session_regenerate_id()`)
   - [ ] 디렉토리 트래버설 방지 (파일 경로 검증)
   - [ ] Rate Limiting (선택 사항, 로그인 시도 제한)

2. **에러 핸들링 개선**
   - `includes/error.php` 파일 생성
   - 함수: `handleException($e)`, `handleError($errno, $errstr, $errfile, $errline)`
   - 프로덕션 환경에서는 상세 에러 메시지 숨기기
   - 로그 파일에 에러 기록 (`logs/error.log`)

3. **환경 변수 설정**
   - `.env.example` 파일 생성:
     ```
     DB_PATH=database.sqlite
     UPLOAD_DIR=uploads
     MAX_UPLOAD_SIZE=5242880
     SESSION_LIFETIME=7200
     ```
   - `includes/config.php` 파일 생성
   - `.env` 파일 파싱 함수 작성
   - `.gitignore`에 `.env` 추가

4. **데이터베이스 백업 스크립트**
   - `backup.php` 파일 생성
   - SQLite 파일을 `backups/` 폴더에 복사
   - 파일명: `database_{timestamp}.sqlite`
   - 크론잡으로 자동 백업 설정 가능

5. **통합 테스트**
   - 테스트 시나리오:
     1. 회원가입 → 로그인 → 섹션 추가 → 이미지 업로드 → 섹션 편집 → 공개 포트폴리오 확인
     2. 비공개 전환 → 프론트엔드에서 "Private" 메시지 확인
     3. 드래그 앤 드롭으로 섹션 순서 변경 → 프론트엔드 반영 확인
     4. 미디어 삭제 → 섹션에서 이미지 제거 확인
     5. 방문자 통계 집계 확인
   - 각 시나리오를 수동으로 테스트하고 결과 기록

6. **README.md 작성**
   - 프로젝트 설명
   - 설치 방법:
     ```bash
     git clone https://github.com/yourusername/portfolio-cms-drag-drop.git
     cd portfolio-cms-drag-drop
     php setup.php
     php -S localhost:8000
     ```
   - 기본 계정 정보 (admin@example.com / password123)
   - 주요 기능 목록
   - 스크린샷 (선택 사항)
   - 라이선스 정보

7. **배포 체크리스트**
   - [ ] `.env` 파일 설정 (프로덕션 값)
   - [ ] 에러 로깅 활성화
   - [ ] 디버그 모드 비활성화
   - [ ] HTTPS 설정 (Let's Encrypt)
   - [ ] 파일 권한 설정 (`uploads/` 폴더 쓰기 권한)
   - [ ] 데이터베이스 백업 크론잡 설정

8. **성능 모니터링 (선택 사항)**
   - `includes/monitor.php` 파일 생성
   - 페이지 로드 시간 측정
   - 데이터베이스 쿼리 횟수 카운트
   - 결과를 `logs/performance.log`에 기록

## 최종 점검

- PHP 8.3+ 환경에서 실행 확인
- 모든 기능 정상 작동 확인
- 보안 취약점 점검
- 코드 주석 추가 (중요 함수에 PHPDoc)

## 예상 결과

- 보안 체크리스트 모두 통과
- 에러 핸들링으로 안정적인 서비스 제공
- 환경 변수로 설정 관리
- 데이터베이스 백업 스크립트 작동
- README.md로 설치 및 사용 가이드 제공
- 프로덕션 환경 배포 준비 완료