🎯 g5se 오늘의 명언 생성기 - 랜덤 영감 & 공유하기

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

**Step 1: 프로젝트 구조 & modern shell 골격 생성**

1. `app/modules/daily-quote/index.php` 파일을 생성하세요.

2. 다음 modern shell 골격을 작성하세요:

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

// 명언 데이터 배열 (카테고리별 분류)
$quotes = [
    ['text' => '성공은 매일 반복한 작은 노력들의 합이다.', 'author' => '로버트 콜리어', 'category' => '성공'],
    ['text' => '행복은 습관이다. 그것을 몸에 지니라.', 'author' => '허버드', 'category' => '행복'],
    ['text' => '당신이 할 수 있다고 믿든 할 수 없다고 믿든 믿는 대로 될 것이다.', 'author' => '헨리 포드', 'category' => '동기부여'],
    ['text' => '위대한 일을 하려면 행동하는 것뿐만 아니라 꿈을 꾸는 것도 필요하다.', 'author' => '아나톨 프랑스', 'category' => '도전'],
    ['text' => '지혜는 경험의 딸이다.', 'author' => '레오나르도 다 빈치', 'category' => '지혜'],
    ['text' => '오늘 할 수 있는 일을 내일로 미루지 마라.', 'author' => '벤자민 프랭클린', 'category' => '동기부여'],
    ['text' => '실패는 성공의 어머니다.', 'author' => '토마스 에디슨', 'category' => '성공'],
    ['text' => '행복의 문이 하나 닫히면 다른 문이 열린다.', 'author' => '헬렌 켈러', 'category' => '행복'],
    ['text' => '도전은 인생을 흥미롭게 만들며, 도전의 극복이 인생을 의미있게 한다.', 'author' => '조슈아 마린', 'category' => '도전'],
    ['text' => '배움에는 끝이 없다.', 'author' => '공자', 'category' => '지혜']
];

// JSON 인코딩 (JavaScript에서 사용)
$quotesJson = json_encode($quotes, JSON_UNESCAPED_UNICODE);

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 class="quote-generator">
            <h1 class="page-title">🎯 오늘의 명언</h1>
            <p class="page-subtitle">매일 새로운 영감을 받아보세요</p>
            
            <div class="quote-card" id="quoteCard">
                <div class="quote-category" id="quoteCategory"></div>
                <p class="quote-text" id="quoteText"></p>
                <p class="quote-author" id="quoteAuthor"></p>
            </div>
            
            <div class="action-buttons">
                <button class="btn btn-primary" id="newQuoteBtn">
                    ✨ 새 명언 보기
                </button>
                <button class="btn btn-secondary" id="copyBtn">
                    📋 복사하기
                </button>
            </div>
            
            <div class="share-buttons">
                <a href="#" class="share-btn" id="twitterShare" target="_blank">
                    🐦 트위터
                </a>
                <a href="#" class="share-btn" id="facebookShare" target="_blank">
                    📘 페이스북
                </a>
            </div>
        </div>
        
        <div class="toast" id="toast">명언이 복사되었습니다!</div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>

<script>
const quotes = <?php echo $quotesJson; ?>;
let currentQuoteIndex = -1;

// 페이지 로드 시 랜덤 명언 표시
window.addEventListener('DOMContentLoaded', () => {
    showRandomQuote();
});
</script>

<?php include_once('./tail.sub.php');
```

3. 파일을 저장하고 브라우저에서 `/daily-quote` 경로로 접속하여 페이지가 로드되는지 확인하세요.

**예상 결과:**
- modern shell이 적용된 페이지 골격이 보임
- 명언 카드 영역과 버튼들이 표시됨 (아직 스타일 없음)
- 콘솔에 JavaScript 에러 없음

**Step 2: 명언 표시 & 랜덤 선택 로직 구현**

`app/modules/daily-quote/index.php`의 `<script>` 블록에 다음 코드를 추가하세요:

```javascript
// 카테고리별 색상 매핑
const categoryColors = {
    '동기부여': '#FF6B6B',
    '성공': '#4ECDC4',
    '행복': '#FFD93D',
    '지혜': '#95E1D3',
    '도전': '#A8E6CF'
};

// 랜덤 명언 표시 함수
function showRandomQuote() {
    let newIndex;
    do {
        newIndex = Math.floor(Math.random() * quotes.length);
    } while (newIndex === currentQuoteIndex && quotes.length > 1);
    
    currentQuoteIndex = newIndex;
    const quote = quotes[currentQuoteIndex];
    
    // 페이드 아웃
    const card = document.getElementById('quoteCard');
    card.style.opacity = '0';
    
    setTimeout(() => {
        // 내용 업데이트
        document.getElementById('quoteCategory').textContent = quote.category;
        document.getElementById('quoteCategory').style.backgroundColor = categoryColors[quote.category] || '#999';
        document.getElementById('quoteText').textContent = `"${quote.text}"`;
        document.getElementById('quoteAuthor').textContent = `— ${quote.author}`;
        
        // SNS 공유 링크 업데이트
        updateShareLinks(quote);
        
        // 페이드 인
        card.style.opacity = '1';
    }, 300);
}

// SNS 공유 링크 업데이트
function updateShareLinks(quote) {
    const text = encodeURIComponent(`"${quote.text}" — ${quote.author}`);
    const url = encodeURIComponent(window.location.href);
    
    document.getElementById('twitterShare').href = 
        `https://twitter.com/intent/tweet?text=${text}&url=${url}`;
    document.getElementById('facebookShare').href = 
        `https://www.facebook.com/sharer/sharer.php?u=${url}&quote=${text}`;
}

// 새 명언 버튼 클릭
document.getElementById('newQuoteBtn').addEventListener('click', () => {
    showRandomQuote();
});

// 복사 버튼 클릭
document.getElementById('copyBtn').addEventListener('click', () => {
    const quote = quotes[currentQuoteIndex];
    const text = `"${quote.text}" — ${quote.author}`;
    
    navigator.clipboard.writeText(text).then(() => {
        showToast();
    }).catch(err => {
        console.error('복사 실패:', err);
    });
});

// 토스트 알림 표시
function showToast() {
    const toast = document.getElementById('toast');
    toast.classList.add('show');
    setTimeout(() => {
        toast.classList.remove('show');
    }, 2000);
}
```

**예상 결과:**
- 페이지 로드 시 랜덤 명언이 표시됨
- "새 명언 보기" 버튼 클릭 시 다른 명언으로 교체됨 (부드러운 페이드 애니메이션)
- 카테고리별로 다른 색상의 배지가 표시됨
- 복사 버튼 클릭 시 명언이 클립보드에 복사되고 토스트 알림이 뜸
- SNS 공유 버튼 클릭 시 해당 플랫폼 공유 창이 열림

**Step 3: CSS 스타일링 & 반응형 디자인**

`app/modules/daily-quote/index.php`의 `</main>` 태그 직전에 다음 `<style>` 블록을 추가하세요:

```html
<style>
.quote-generator {
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.page-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--m-text);
    margin-bottom: 8px;
}

.page-subtitle {
    font-size: 1.1rem;
    color: var(--m-text-muted);
    margin-bottom: 40px;
}

.quote-card {
    background: var(--m-surface);
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
    padding: 48px 32px;
    margin-bottom: 32px;
    transition: opacity 0.3s ease;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.quote-category {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: white;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.quote-text {
    font-size: 1.6rem;
    line-height: 1.6;
    color: var(--m-text);
    margin-bottom: 20px;
    font-weight: 500;
}

.quote-author {
    font-size: 1.1rem;
    color: var(--m-text-muted);
    font-style: italic;
    text-align: right;
}

.action-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 20px;
}

.btn {
    padding: 12px 28px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary {
    background: var(--m-primary);
    color: white;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-secondary {
    background: var(--m-surface);
    color: var(--m-text);
    border: 2px solid var(--m-border, #e0e0e0);
}

.btn-secondary:hover {
    background: var(--m-hover, #f5f5f5);
}

.share-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.share-btn {
    padding: 10px 20px;
    background: var(--m-surface);
    color: var(--m-text);
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s;
    border: 1px solid var(--m-border, #e0e0e0);
}

.share-btn:hover {
    background: var(--m-hover, #f5f5f5);
    transform: translateY(-2px);
}

.toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #333;
    color: white;
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 0.95rem;
    opacity: 0;
    transition: all 0.3s;
    z-index: 1000;
}

.toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

@media (max-width: 768px) {
    .page-title {
        font-size: 2rem;
    }
    
    .quote-card {
        padding: 32px 20px;
        min-height: 240px;
    }
    
    .quote-text {
        font-size: 1.3rem;
    }
    
    .action-buttons {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
    }
    
    .share-buttons {
        flex-direction: column;
    }
    
    .share-btn {
        width: 100%;
    }
}
</style>
```

**예상 결과:**
- 명언 카드가 중앙 정렬되고 큰 타이포그래피로 표시됨
- 카테고리 배지가 명언 상단에 색상별로 표시됨
- 버튼들이 깔끔하게 정렬되고 호버 효과가 작동함
- 모바일에서 버튼들이 세로로 배치됨
- 다크모드 전환 시 색상이 자동으로 변경됨 (디자인 토큰 덕분)
- 토스트 알림이 하단에서 부드럽게 나타남

**최종 확인 사항:**
1. `/daily-quote` 경로로 접속
2. 페이지 로드 시 랜덤 명언 표시 확인
3. "새 명언 보기" 버튼 클릭 시 다른 명언으로 교체되는지 확인
4. 복사 버튼 클릭 후 Ctrl+V로 붙여넣기 테스트
5. SNS 공유 버튼 클릭 시 새 창에서 공유 페이지가 열리는지 확인
6. 다크모드 토글 버튼 클릭 시 색상이 자연스럽게 변경되는지 확인
7. 모바일 화면 크기로 줄였을 때 레이아웃이 반응형으로 변경되는지 확인