🎯 g5se 매일 한 줄 영어 일기 - 간단 작문 & 문장 저장소

g5se가 설치된 디렉터리(루트에 `index.php`·`app/`이 있는 곳)에서 작업을 시작합니다. (g5se 설치는 https://github.com/gnuboard/g5se 참고)

**Step 1: 프로젝트 기본 구조 생성 & Modern Shell 적용**

1. `app/modules/daily-english-diary/` 폴더를 생성하세요.
2. `app/modules/daily-english-diary/index.php` 파일을 생성하세요.
3. 다음 내용으로 파일을 작성하세요:

```php
<?php
include_once('./_common.php');

// SQLite DB 연결 (첫 접근 시 자동 생성)
@mkdir(G5_DATA_PATH.'/modules', 0707, true);
$db_path = G5_DATA_PATH.'/modules/daily-english-diary.sqlite';
$pdo = new PDO('sqlite:'.$db_path);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 테이블 생성 (첫 실행 시)
$pdo->exec("
    CREATE TABLE IF NOT EXISTS entries (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        date TEXT NOT NULL,
        english_text TEXT NOT NULL,
        korean_memo TEXT,
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP
    )
");

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>
<div class="m-shell">
    <?php require G5_THEME_PATH.'/modern/_nav.inc.php'; ?>
    <main class="m-container" style="padding: 32px 20px 48px;">
        <div style="max-width: 800px; margin: 0 auto;">
            <h1 style="font-size: 28px; font-weight: 700; margin-bottom: 8px;">📝 매일 한 줄 영어 일기</h1>
            <p style="color: var(--m-text-muted); margin-bottom: 32px;">간단한 영어 문장으로 매일의 생각을 기록하세요</p>
            
            <!-- 작성 폼 -->
            <div style="background: var(--m-surface); border-radius: var(--m-radius-lg); padding: 24px; box-shadow: var(--m-shadow); margin-bottom: 32px;">
                <h2 style="font-size: 18px; font-weight: 600; margin-bottom: 16px;">✍️ 오늘의 일기 작성</h2>
                <form method="POST" style="display: flex; flex-direction: column; gap: 16px;">
                    <div>
                        <label style="display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px;">📅 날짜</label>
                        <input type="date" name="date" value="<?php echo date('Y-m-d'); ?>" required
                               style="width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px;">
                    </div>
                    <div>
                        <label style="display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px;">🇬🇧 영어 문장 (최대 300자)</label>
                        <textarea name="english_text" maxlength="300" rows="4" required placeholder="Today I learned something new..."
                                  style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; resize: vertical;"></textarea>
                    </div>
                    <div>
                        <label style="display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px;">🇰🇷 한글 메모 (선택, 최대 100자)</label>
                        <input type="text" name="korean_memo" maxlength="100" placeholder="오늘 배운 표현에 대한 메모..."
                               style="width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px;">
                    </div>
                    <button type="submit" name="action" value="add"
                            style="padding: 12px 24px; background: #3b82f6; color: white; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer;">
                        💾 저장하기
                    </button>
                </form>
            </div>
            
            <!-- 일기 목록 (추후 구현) -->
            <div style="background: var(--m-surface); border-radius: var(--m-radius-lg); padding: 24px; box-shadow: var(--m-shadow);">
                <h2 style="font-size: 18px; font-weight: 600; margin-bottom: 16px;">📚 나의 일기 목록</h2>
                <p style="color: var(--m-text-muted); text-align: center; padding: 40px 0;">아직 작성한 일기가 없습니다.</p>
            </div>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<?php include_once('./tail.sub.php'); ?>
```

4. 브라우저에서 `/daily-english-diary` 접속하여 페이지가 정상적으로 로드되는지 확인하세요.
5. 작성 폼이 표시되고 날짜가 오늘 날짜로 자동 입력되는지 확인하세요.

**Step 2: 일기 저장 기능 구현 & 목록 표시**

1. `app/modules/daily-english-diary/index.php` 파일을 열고 `// (페이지 로직 — 데이터, AJAX 분기 등)` 주석 부분(DB 연결 직후, `require_once` 이전)에 다음 코드를 추가하세요:

```php
// POST 처리: 일기 추가
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
    if ($_POST['action'] === 'add') {
        $date = trim($_POST['date']);
        $english_text = trim($_POST['english_text']);
        $korean_memo = trim($_POST['korean_memo'] ?? '');
        
        if ($date && $english_text) {
            $stmt = $pdo->prepare("
                INSERT INTO entries (date, english_text, korean_memo)
                VALUES (?, ?, ?)
            ");
            $stmt->execute([$date, $english_text, $korean_memo]);
            header('Location: /daily-english-diary');
            exit;
        }
    }
}

// 일기 목록 조회 (최신순)
$stmt = $pdo->query("SELECT * FROM entries ORDER BY date DESC, created_at DESC");
$entries = $stmt->fetchAll(PDO::FETCH_ASSOC);
```

2. 일기 목록 표시 부분을 다음과 같이 수정하세요 (기존 "나의 일기 목록" div 내부를 교체):

```php
<div style="background: var(--m-surface); border-radius: var(--m-radius-lg); padding: 24px; box-shadow: var(--m-shadow);">
    <h2 style="font-size: 18px; font-weight: 600; margin-bottom: 16px;">📚 나의 일기 목록 (<?php echo count($entries); ?>개)</h2>
    
    <?php if (empty($entries)): ?>
        <p style="color: var(--m-text-muted); text-align: center; padding: 40px 0;">아직 작성한 일기가 없습니다. 첫 일기를 작성해보세요! ✨</p>
    <?php else: ?>
        <div style="display: flex; flex-direction: column; gap: 16px;">
            <?php foreach ($entries as $entry): ?>
                <div style="border-left: 4px solid #3b82f6; padding: 16px; background: rgba(59, 130, 246, 0.05); border-radius: 8px;">
                    <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 8px;">
                        <span style="font-size: 13px; font-weight: 600; color: #3b82f6;">
                            📅 <?php echo htmlspecialchars($entry['date']); ?>
                        </span>
                        <div style="display: flex; gap: 8px;">
                            <!-- 수정/삭제 버튼 (다음 단계에서 구현) -->
                        </div>
                    </div>
                    <p style="font-size: 15px; line-height: 1.6; margin-bottom: 8px; color: var(--m-text);">
                        <?php echo nl2br(htmlspecialchars($entry['english_text'])); ?>
                    </p>
                    <?php if (!empty($entry['korean_memo'])): ?>
                        <p style="font-size: 13px; color: var(--m-text-muted); font-style: italic;">
                            💭 <?php echo htmlspecialchars($entry['korean_memo']); ?>
                        </p>
                    <?php endif; ?>
                </div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
</div>
```

3. 브라우저에서 `/daily-english-diary`에 접속하여 일기를 작성하고 저장해보세요.
4. 저장 후 페이지가 새로고침되고 작성한 일기가 목록에 표시되는지 확인하세요.
5. 여러 개의 일기를 작성하여 최신순으로 정렬되는지 확인하세요.

**Step 3: 통계 표시 & 삭제 기능 추가**

1. 통계 계산 코드를 일기 목록 조회 코드 직후에 추가하세요:

```php
// 통계 계산
$total_count = count($entries);
$this_month = date('Y-m');
$this_month_count = 0;
foreach ($entries as $entry) {
    if (strpos($entry['date'], $this_month) === 0) {
        $this_month_count++;
    }
}

// 연속 작성 일수 계산 (streak)
$streak = 0;
if (!empty($entries)) {
    $dates = array_unique(array_column($entries, 'date'));
    rsort($dates); // 최신순 정렬
    $today = date('Y-m-d');
    $yesterday = date('Y-m-d', strtotime('-1 day'));
    
    if ($dates[0] === $today || $dates[0] === $yesterday) {
        $streak = 1;
        $current_date = $dates[0];
        for ($i = 1; $i < count($dates); $i++) {
            $expected_date = date('Y-m-d', strtotime($current_date . ' -1 day'));
            if ($dates[$i] === $expected_date) {
                $streak++;
                $current_date = $dates[$i];
            } else {
                break;
            }
        }
    }
}
```

2. 삭제 처리 코드를 POST 처리 부분에 추가하세요 (기존 `if ($_POST['action'] === 'add')` 블록 직후):

```php
    elseif ($_POST['action'] === 'delete') {
        $id = intval($_POST['id']);
        $stmt = $pdo->prepare("DELETE FROM entries WHERE id = ?");
        $stmt->execute([$id]);
        header('Location: /daily-english-diary');
        exit;
    }
```

3. 통계 카드를 작성 폼과 일기 목록 사이에 추가하세요:

```php
<!-- 통계 카드 -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 32px;">
    <div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: var(--m-radius-lg); padding: 20px; color: white; box-shadow: var(--m-shadow);">
        <div style="font-size: 13px; opacity: 0.9; margin-bottom: 4px;">📊 총 작성 일수</div>
        <div style="font-size: 32px; font-weight: 700;"><?php echo $total_count; ?></div>
    </div>
    <div style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); border-radius: var(--m-radius-lg); padding: 20px; color: white; box-shadow: var(--m-shadow);">
        <div style="font-size: 13px; opacity: 0.9; margin-bottom: 4px;">📅 이번 달 작성</div>
        <div style="font-size: 32px; font-weight: 700;"><?php echo $this_month_count; ?></div>
    </div>
    <div style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); border-radius: var(--m-radius-lg); padding: 20px; color: white; box-shadow: var(--m-shadow);">
        <div style="font-size: 13px; opacity: 0.9; margin-bottom: 4px;">🔥 연속 작성 일수</div>
        <div style="font-size: 32px; font-weight: 700;"><?php echo $streak; ?></div>
    </div>
</div>
```

4. 일기 목록의 각 항목에 삭제 버튼을 추가하세요 (기존 `<!-- 수정/삭제 버튼 (다음 단계에서 구현) -->` 주석 부분을 교체):

```php
<form method="POST" style="display: inline;" onsubmit="return confirm('정말 삭제하시겠습니까?');">
    <input type="hidden" name="action" value="delete">
    <input type="hidden" name="id" value="<?php echo $entry['id']; ?>">
    <button type="submit" style="padding: 4px 12px; background: #ef4444; color: white; border: none; border-radius: 6px; font-size: 12px; cursor: pointer;">
        🗑️ 삭제
    </button>
</form>
```

5. 브라우저에서 테스트하세요:
   - 통계 카드가 표시되는지 확인
   - 여러 날짜에 일기를 작성하여 연속 작성 일수가 올바르게 계산되는지 확인
   - 삭제 버튼 클릭 시 확인 메시지가 나타나고 삭제되는지 확인