🎯 g5se 랜덤 팀 빌더 - 공정한 팀 편성 생성기

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

**목표**: 랜덤 팀 빌더 페이지의 기본 골격을 만듭니다.

다음 파일을 생성하세요:

**파일**: `app/modules/team-builder/index.php`

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

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; color: var(--m-text);">🎯 랜덤 팀 빌더</h1>
            <p style="color: var(--m-text-muted); margin-bottom: 32px;">참가자를 공정하게 팀으로 나누어 드립니다</p>

            <!-- 입력 섹션 -->
            <div style="background: var(--m-surface); padding: 24px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); margin-bottom: 24px;">
                <label style="display: block; font-weight: 600; margin-bottom: 8px; color: var(--m-text);">참가자 명단 (한 줄에 한 명씩)</label>
                <textarea id="participants" rows="8" placeholder="홍길동&#10;김철수&#10;이영희&#10;박민수" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; font-family: inherit; resize: vertical; background: var(--m-surface); color: var(--m-text);"></textarea>
                
                <div style="margin-top: 16px; display: flex; gap: 16px; align-items: center;">
                    <div style="flex: 1;">
                        <label style="display: block; font-weight: 600; margin-bottom: 8px; color: var(--m-text);">팀 개수</label>
                        <select id="teamCount" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; background: var(--m-surface); color: var(--m-text);">
                            <option value="2">2개 팀</option>
                            <option value="3">3개 팀</option>
                            <option value="4" selected>4개 팀</option>
                            <option value="5">5개 팀</option>
                            <option value="6">6개 팀</option>
                            <option value="8">8개 팀</option>
                            <option value="10">10개 팀</option>
                        </select>
                    </div>
                    <div style="flex: 1; display: flex; align-items: flex-end;">
                        <button id="buildTeams" style="width: 100%; padding: 12px 24px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; transition: all 0.2s;">
                            🎲 팀 편성하기
                        </button>
                    </div>
                </div>
            </div>

            <!-- 결과 섹션 -->
            <div id="result" style="display: none;">
                <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
                    <h2 style="font-size: 20px; font-weight: 700; color: var(--m-text);">팀 편성 결과</h2>
                    <button id="reshuffleBtn" style="padding: 8px 16px; background: var(--m-surface); color: var(--m-text); border: 1px solid #ddd; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer;">
                        🔄 재편성
                    </button>
                </div>
                <div id="teams" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px;">
                    <!-- 팀 카드가 여기 들어감 -->
                </div>
            </div>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>

<style>
#buildTeams:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

#reshuffleBtn:hover {
    background: #f0f0f0;
}

@media (prefers-color-scheme: dark) {
    #participants, #teamCount {
        border-color: #444;
    }
    #reshuffleBtn:hover {
        background: #333;
    }
}
</style>

<script>
// JavaScript 로직은 다음 단계에서 추가
console.log('팀 빌더 페이지 로드됨');
</script>

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

**기대 결과**:
- `http://your-domain/team-builder` URL로 접속하면 페이지가 표시됨
- modern shell이 적용되어 사이트 nav/footer/다크모드 토글이 자동으로 나타남
- 참가자 입력 폼과 팀 개수 선택 드롭다운이 보임
- "팀 편성하기" 버튼이 있지만 아직 동작하지 않음

**목표**: 참가자 입력을 파싱하고 랜덤 팀 편성 로직을 JavaScript로 구현합니다.

`app/modules/team-builder/index.php` 파일의 `<script>` 블록을 다음과 같이 교체하세요:

```javascript
<script>
const participantsInput = document.getElementById('participants');
const teamCountSelect = document.getElementById('teamCount');
const buildBtn = document.getElementById('buildTeams');
const reshuffleBtn = document.getElementById('reshuffleBtn');
const resultDiv = document.getElementById('result');
const teamsContainer = document.getElementById('teams');

let currentParticipants = [];

// 배열 셔플 (Fisher-Yates)
function shuffleArray(array) {
    const arr = [...array];
    for (let i = arr.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [arr[i], arr[j]] = [arr[j], arr[i]];
    }
    return arr;
}

// 팀 색상 팔레트
const teamColors = [
    '#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A',
    '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E2',
    '#F8B88B', '#A8E6CF'
];

// 팀 편성 함수
function buildTeams() {
    const input = participantsInput.value.trim();
    if (!input) {
        alert('참가자를 입력해주세요!');
        return;
    }

    // 참가자 파싱 (줄바꿈 또는 쉼표로 구분)
    const participants = input.split(/[\n,]+/)
        .map(name => name.trim())
        .filter(name => name.length > 0);

    if (participants.length === 0) {
        alert('유효한 참가자가 없습니다!');
        return;
    }

    const teamCount = parseInt(teamCountSelect.value);

    if (participants.length < teamCount) {
        alert(`참가자 수(${participants.length}명)가 팀 개수(${teamCount}개)보다 적습니다!`);
        return;
    }

    currentParticipants = participants;
    distributeTeams(participants, teamCount);
}

// 팀 분배 및 렌더링
function distributeTeams(participants, teamCount) {
    const shuffled = shuffleArray(participants);
    const teams = Array.from({ length: teamCount }, () => []);

    // 균등 분배
    shuffled.forEach((participant, index) => {
        teams[index % teamCount].push(participant);
    });

    renderTeams(teams);
    resultDiv.style.display = 'block';
    resultDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}

// 팀 카드 렌더링
function renderTeams(teams) {
    teamsContainer.innerHTML = teams.map((team, index) => {
        const color = teamColors[index % teamColors.length];
        return `
            <div style="background: var(--m-surface); border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); padding: 20px; border-top: 4px solid ${color}; animation: fadeIn 0.3s ease-out;">
                <h3 style="font-size: 18px; font-weight: 700; margin-bottom: 12px; color: var(--m-text); display: flex; align-items: center; gap: 8px;">
                    <span style="width: 12px; height: 12px; border-radius: 50%; background: ${color};"></span>
                    팀 ${index + 1}
                </h3>
                <div style="color: var(--m-text-muted); font-size: 14px; line-height: 1.8;">
                    ${team.map(name => `<div>• ${name}</div>`).join('')}
                </div>
                <div style="margin-top: 12px; padding-top: 12px; border-top: 1px solid #eee; font-size: 12px; color: var(--m-text-muted);">
                    👥 ${team.length}명
                </div>
            </div>
        `;
    }).join('');
}

// 재편성
function reshuffle() {
    const teamCount = parseInt(teamCountSelect.value);
    distributeTeams(currentParticipants, teamCount);
}

buildBtn.addEventListener('click', buildTeams);
reshuffleBtn.addEventListener('click', reshuffle);

// Enter 키로도 팀 편성 가능
participantsInput.addEventListener('keydown', (e) => {
    if (e.ctrlKey && e.key === 'Enter') {
        buildTeams();
    }
});
</script>

<style>
/* 기존 style 블록에 추가 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-color-scheme: dark) {
    #teams > div {
        border-top-width: 4px;
    }
    #teams > div > div:last-child {
        border-top-color: #444;
    }
}
</style>
```

**기대 결과**:
- 참가자를 입력하고 "팀 편성하기" 버튼을 누르면 랜덤하게 팀이 나뉨
- 각 팀은 색상이 다른 카드로 표시되며, 균등하게 인원이 배분됨
- "재편성" 버튼을 누르면 같은 참가자로 다시 랜덤 편성됨
- 참가자 수가 팀 개수보다 적으면 경고 메시지가 표시됨
- 팀 카드가 부드럽게 나타나는 애니메이션 효과

**목표**: 보너스 기능을 추가합니다 — 팀 이름 자동 생성, 결과 복사, localStorage 히스토리.

`app/modules/team-builder/index.php` 파일의 `<script>` 블록을 다음과 같이 확장하세요 (기존 코드 유지하고 추가):

```javascript
<script>
// 기존 코드는 그대로 두고 아래 코드를 추가

// 팀 이름 풀
const teamNames = [
    '🔥 화이팅', '⚡ 번개', '🌟 스타', '🚀 로켓',
    '💎 다이아몬드', '🦁 라이온', '🐉 드래곤', '🦅 이글',
    '🌊 웨이브', '🎯 타겟'
];

// 팀 이름 셔플해서 할당
function getTeamNames(count) {
    const shuffled = shuffleArray(teamNames);
    return shuffled.slice(0, count);
}

// renderTeams 함수를 수정 (팀 이름 추가)
function renderTeams(teams) {
    const names = getTeamNames(teams.length);
    teamsContainer.innerHTML = teams.map((team, index) => {
        const color = teamColors[index % teamColors.length];
        const teamName = names[index];
        return `
            <div style="background: var(--m-surface); border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); padding: 20px; border-top: 4px solid ${color}; animation: fadeIn 0.3s ease-out;">
                <h3 style="font-size: 18px; font-weight: 700; margin-bottom: 4px; color: var(--m-text); display: flex; align-items: center; gap: 8px;">
                    <span style="width: 12px; height: 12px; border-radius: 50%; background: ${color};"></span>
                    ${teamName} 팀
                </h3>
                <div style="font-size: 12px; color: var(--m-text-muted); margin-bottom: 12px;">Team ${index + 1}</div>
                <div style="color: var(--m-text-muted); font-size: 14px; line-height: 1.8;">
                    ${team.map(name => `<div>• ${name}</div>`).join('')}
                </div>
                <div style="margin-top: 12px; padding-top: 12px; border-top: 1px solid #eee; font-size: 12px; color: var(--m-text-muted);">
                    👥 ${team.length}명
                </div>
            </div>
        `;
    }).join('');
}

// 결과 복사 버튼 추가
const copyBtn = document.createElement('button');
copyBtn.id = 'copyResult';
copyBtn.textContent = '📋 결과 복사';
copyBtn.style.cssText = 'padding: 8px 16px; background: var(--m-surface); color: var(--m-text); border: 1px solid #ddd; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; margin-left: 8px;';
reshuffleBtn.parentElement.appendChild(copyBtn);

// 결과를 텍스트로 변환
function getResultText(teams) {
    const names = getTeamNames(teams.length);
    return teams.map((team, index) => {
        return `${names[index]} 팀 (${team.length}명):\n${team.map(name => `  • ${name}`).join('\n')}`;
    }).join('\n\n');
}

// 클립보드 복사
copyBtn.addEventListener('click', () => {
    const teamCount = parseInt(teamCountSelect.value);
    const shuffled = shuffleArray(currentParticipants);
    const teams = Array.from({ length: teamCount }, () => []);
    shuffled.forEach((participant, index) => {
        teams[index % teamCount].push(participant);
    });
    
    const text = getResultText(teams);
    navigator.clipboard.writeText(text).then(() => {
        const originalText = copyBtn.textContent;
        copyBtn.textContent = '✅ 복사됨!';
        setTimeout(() => {
            copyBtn.textContent = originalText;
        }, 2000);
    }).catch(() => {
        alert('복사 실패! 브라우저가 클립보드 접근을 지원하지 않습니다.');
    });
});

// localStorage에 참가자 저장
function saveParticipants() {
    if (currentParticipants.length > 0) {
        localStorage.setItem('teamBuilderHistory', JSON.stringify(currentParticipants));
    }
}

// 페이지 로드 시 히스토리 불러오기
window.addEventListener('load', () => {
    const history = localStorage.getItem('teamBuilderHistory');
    if (history) {
        const participants = JSON.parse(history);
        participantsInput.value = participants.join('\n');
    }
});

// buildTeams 함수 수정 (저장 추가)
const originalBuildTeams = buildTeams;
function buildTeams() {
    originalBuildTeams();
    saveParticipants();
}
</script>
```

또한 `<style>` 블록에 hover 효과를 추가하세요:

```css
#copyResult:hover {
    background: #f0f0f0;
}

@media (prefers-color-scheme: dark) {
    #copyResult:hover {
        background: #333;
    }
}
```

**기대 결과**:
- 각 팀에 "🔥 화이팅 팀", "⚡ 번개 팀" 같은 랜덤 이름이 자동 부여됨
- "📋 결과 복사" 버튼을 누르면 팀 편성 결과가 클립보드에 복사됨
- 참가자 명단이 localStorage에 자동 저장되어 다음 방문 시 불러와짐
- 다크모드에서도 모든 버튼이 자연스럽게 동작함