Alpine.js와 XE/Rhymix의 완벽한 만남: HTMX에서 Alpine.js로의 진화

<!-- HTMX: 서버 왕복 필요 (제거함) ❌ -->
<button hx-post="/api/toggle" hx-target="#status">
    토글
</button>

<!-- Alpine.js: 클라이언트 사이드 (도입함) ✅ -->
<button @click="isActive = !isActive">
    {{ isActive ? '활성' : '비활성' }}
</button>

<!-- layout.html -->
@version(2)

<!-- Alpine.js 로드 -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

<!-- 또는 로컬 경로 -->
<load target="js/alpine.min.js" type="head" />

<div id="app" x-data="initApp()">
    <!-- 앱 콘텐츠 -->
</div>

<script>
function initApp() {
    return {
        // 상태 정의
        isLoading: false,
        notification: null,

        // 메서드
        async loadData() {
            this.isLoading = true;
            try {
                // 비동기 작업
            } finally {
                this.isLoading = false;
            }
        }
    }
}
</script>

<!-- 조건부 렌더링 -->
<div x-show="isVisible">보이기/숨기기 (DOM 유지)</div>
<div x-if="isVisible">조건부 렌더링 (DOM 제거/추가)</div>

<!-- 반복 -->
@foreach($items as $item)
<div x-data="{ item: {{ json_encode($item) }} }">
    <h3 x-text="item.title"></h3>
    <p x-text="item.description"></p>
</div>
@endforeach

<!-- 이벤트 처리 -->
<button @click="count++">
    클릭 횟수: <span x-text="count"></span>
</button>

<!-- 클래스 바인딩 -->
<div :class="{ active: isActive, 'text-danger': hasError }">
    상태에 따른 스타일
</div>

<!-- 속성 바인딩 -->
<input type="text" :value="username" @input="username = $event.target.value">

<!-- 양방향 바인딩 -->
<input type="checkbox" x-model="agree">
<p x-show="agree">동의했습니다</p>

<!-- Blade 템플릿에서 XE 데이터 주입 -->
<div x-data="userModule()">
    <p>로그인 사용자: <span x-text="currentUser"></span></p>
    <p>권한: <span x-text="userRole"></span></p>
</div>

<script>
function userModule() {
    return {
        // PHP에서 출력된 JSON 데이터 사용
        currentUser: '{{ $logged_info->nick_name ?? "게스트" }}',
        userRole: '{{ $logged_info->is_admin ? "관리자" : "일반 사용자" }}',
        moduleId: {{ $module_info->module_srl }},

        // XE API 호출
        async checkPermission(act) {
            const response = await fetch('/index.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: new URLSearchParams({
                    module: 'api',
                    act: act,
                    _rx_csrf_token: this.getCsrfToken()
                })
            });

            return response.ok;
        },

        getCsrfToken() {
            return document.querySelector('meta[name="csrf-token"]')
                ?.getAttribute('content') || '';
        }
    }
}
</script>

<!-- view.html -->
<div x-data="commentModule()" class="comment-section">

    <!-- 댓글 목록 -->
    <div class="comment-list">
        <template x-for="comment in comments" :key="comment.comment_srl">
            <div class="comment-item" :id="'comment-' + comment.comment_srl">
                <div class="comment-header">
                    <strong x-text="comment.nick_name"></strong>
                    <time :datetime="comment.regdate_raw">
                        <span x-text="formatDate(comment.regdate)"></span>
                    </time>
                </div>

                <div class="comment-content" x-show="!comment.editing">
                    <p x-html="comment.content"></p>

                    <div class="comment-actions" x-show="comment.can_edit">
                        <button @click="editComment(comment)">수정</button>
                        <button @click="deleteComment(comment.comment_srl)">삭제</button>
                    </div>
                </div>

                <!-- 댓글 수정 폼 -->
                <form @submit.prevent="saveComment(comment)" x-show="comment.editing">
                    <textarea
                        x-model="comment.content"
                        class="form-control">
                    </textarea>
                    <div class="form-actions">
                        <button type="submit" class="btn btn-primary">저장</button>
                        <button type="button" class="btn btn-cancel"
                                @click="cancelEdit(comment)">취소</button>
                    </div>
                </form>
            </div>
        </template>
    </div>

    <!-- 댓글 작성 폼 -->
    <form @submit.prevent="createComment()" class="comment-form">
        <textarea
            x-model="newComment"
            placeholder="댓글을 입력하세요"
            class="form-control">
        </textarea>

        <div class="form-actions">
            <button type="submit" class="btn btn-primary"
                    :disabled="!newComment.trim() || isSubmitting">
                <span x-show="!isSubmitting">등록</span>
                <span x-show="isSubmitting">처리 중...</span>
            </button>
        </div>
    </form>

    <!-- 에러 메시지 -->
    <div x-show="error" class="alert alert-danger" @click="error = null">
        <span x-text="error"></span>
    </div>

    <!-- 로딩 상태 -->
    <div x-show="isLoading" class="spinner">
        로드 중...
    </div>
</div>

<script>
function commentModule() {
    return {
        comments: {{ json_encode($comments ?? []) }},
        newComment: '',
        isLoading: false,
        isSubmitting: false,
        error: null,
        documentSrl: {{ $document_srl }},

        async createComment() {
            this.isSubmitting = true;
            this.error = null;

            try {
                const response = await fetch('/index.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: new URLSearchParams({
                        module: 'board',
                        act: 'procBoardInsertComment',
                        document_srl: this.documentSrl,
                        content: this.newComment,
                        _rx_csrf_token: this.getCsrfToken()
                    })
                });

                if (!response.ok) {
                    throw new Error('댓글 작성 실패');
                }

                // XE의 응답은 HTML 리다이렉트이므로,
                // 성공 시 댓글 목록을 API로 다시 조회
                await this.refreshComments();
                this.newComment = '';

            } catch (err) {
                this.error = err.message;
            } finally {
                this.isSubmitting = false;
            }
        },

        editComment(comment) {
            comment.editing = true;
            comment.originalContent = comment.content;
        },

        cancelEdit(comment) {
            comment.editing = false;
            comment.content = comment.originalContent;
        },

        async saveComment(comment) {
            try {
                const response = await fetch('/index.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: new URLSearchParams({
                        module: 'board',
                        act: 'procBoardUpdateComment',
                        comment_srl: comment.comment_srl,
                        content: comment.content,
                        _rx_csrf_token: this.getCsrfToken()
                    })
                });

                if (!response.ok) {
                    throw new Error('댓글 수정 실패');
                }

                comment.editing = false;
                await this.refreshComments();

            } catch (err) {
                this.error = err.message;
            }
        },

        async deleteComment(commentSrl) {
            if (!confirm('댓글을 삭제하시겠습니까?')) return;

            try {
                const response = await fetch('/index.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: new URLSearchParams({
                        module: 'board',
                        act: 'procBoardDeleteComment',
                        comment_srl: commentSrl,
                        _rx_csrf_token: this.getCsrfToken()
                    })
                });

                if (!response.ok) {
                    throw new Error('댓글 삭제 실패');
                }

                // 목록에서 제거
                this.comments = this.comments.filter(
                    c => c.comment_srl !== commentSrl
                );

            } catch (err) {
                this.error = err.message;
            }
        },

        async refreshComments() {
            try {
                const response = await fetch(
                    `/api/board/comments?document_srl=${this.documentSrl}`
                );
                if (response.ok) {
                    this.comments = await response.json();
                }
            } catch (err) {
                console.error('댓글 새로고침 실패:', err);
            }
        },

        formatDate(dateStr) {
            const date = new Date(dateStr);
            return new Intl.DateTimeFormat('ko-KR', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit'
            }).format(date);
        },

        getCsrfToken() {
            return document.querySelector('meta[name="csrf-token"]')
                ?.getAttribute('content') || '';
        }
    }
}
</script>

<!-- write_form.html -->
<form x-data="documentForm()" @submit.prevent="submit">

    <!-- 제목 입력 -->
    <div class="form-group" :class="{ 'has-error': errors.title }">
        <label for="title">제목 *</label>
        <input
            id="title"
            type="text"
            x-model="form.title"
            @blur="validateTitle()"
            class="form-control"
            required>
        <small class="error-message" x-show="errors.title" x-text="errors.title"></small>
    </div>

    <!-- 카테고리 선택 -->
    <div class="form-group">
        <label for="category">카테고리</label>
        <select
            id="category"
            x-model="form.category"
            @change="filterTags()"
            class="form-control">
            <option value="">선택하세요</option>
            @foreach($categories as $cat)
            <option value="{{ $cat->category_srl }}">
                {{ $cat->category_name }}
            </option>
            @endforeach
        </select>
    </div>

    <!-- 동적 태그 (카테고리에 따라 변경) -->
    <div class="form-group" x-show="availableTags.length">
        <label>태그 선택</label>
        <div class="tag-group">
            <template x-for="tag in availableTags" :key="tag.id">
                <label class="tag-checkbox">
                    <input
                        type="checkbox"
                        :value="tag.id"
                        @change="form.tags = $event.target.checked
                            ? [...form.tags, tag.id]
                            : form.tags.filter(t => t !== tag.id)">
                    <span x-text="tag.name"></span>
                </label>
            </template>
        </div>
    </div>

    <!-- 콘텐츠 -->
    <div class="form-group">
        <label for="content">내용 *</label>
        <textarea
            id="content"
            x-model="form.content"
            class="form-control editor"
            rows="10"
            required>
        </textarea>
    </div>

    <!-- 실시간 글자 수 카운트 -->
    <div class="form-help">
        <span x-text="`${form.content.length} / 5000자`"></span>
        <span x-show="form.content.length > 4500" class="text-warning">
            곧 글자 수 제한에 도달합니다
        </span>
    </div>

    <!-- 폼 상태 -->
    <div class="form-status">
        <small x-show="isDirty" class="text-info">변경사항이 있습니다</small>

        <div x-show="successMessage" class="alert alert-success">
            <span x-text="successMessage"></span>
        </div>

        <div x-show="Object.keys(errors).length > 0" class="alert alert-danger">
            <p>다음 항목들을 확인하세요:</p>
            <ul>
                <template x-for="(message, field) in errors" :key="field">
                    <li x-text="message"></li>
                </template>
            </ul>
        </div>
    </div>

    <!-- 제출 버튼 -->
    <div class="form-actions">
        <button
            type="submit"
            class="btn btn-primary"
            :disabled="isSubmitting || !isValid()">
            <span x-show="!isSubmitting">저장</span>
            <span x-show="isSubmitting">저장 중...</span>
        </button>
        <button type="button" class="btn btn-secondary" @click="resetForm()">
            초기화
        </button>
    </div>
</form>

<script>
function documentForm() {
    return {
        form: {
            title: '',
            content: '',
            category: '',
            tags: []
        },
        allTags: {{ json_encode($all_tags ?? []) }},
        originalForm: null,
        errors: {},
        isSubmitting: false,
        isDirty: false,
        successMessage: '',

        availableTags: [],

        init() {
            // 초기 상태 저장 (더티 체크용)
            this.originalForm = JSON.parse(JSON.stringify(this.form));

            // 입력 감시
            this.$watch('form', () => {
                this.isDirty = JSON.stringify(this.form) !==
                              JSON.stringify(this.originalForm);
            }, { deep: true });
        },

        filterTags() {
            if (this.form.category) {
                this.availableTags = this.allTags.filter(
                    tag => tag.category_srl === parseInt(this.form.category)
                );
            } else {
                this.availableTags = [];
                this.form.tags = [];
            }
        },

        validateTitle() {
            this.errors.title = '';

            if (!this.form.title.trim()) {
                this.errors.title = '제목을 입력하세요';
            } else if (this.form.title.length < 3) {
                this.errors.title = '제목은 3글자 이상이어야 합니다';
            } else if (this.form.title.length > 100) {
                this.errors.title = '제목은 100글자 이하여야 합니다';
            }
        },

        isValid() {
            return this.form.title.trim() &&
                   this.form.content.trim() &&
                   Object.keys(this.errors).length === 0;
        },

        async submit() {
            // 최종 검증
            this.validateTitle();

            if (!this.isValid()) {
                return;
            }

            this.isSubmitting = true;
            this.successMessage = '';

            try {
                const response = await fetch('/index.php', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    body: new URLSearchParams({
                        module: 'board',
                        act: 'procBoardInsertDocument',
                        title: this.form.title,
                        content: this.form.content,
                        category_srl: this.form.category,
                        tag: this.form.tags.join(','),
                        _rx_csrf_token: this.getCsrfToken()
                    })
                });

                if (response.ok) {
                    this.successMessage = '글이 저장되었습니다';
                    // 2초 후 목록으로 이동
                    setTimeout(() => {
                        window.location.href = '/board/';
                    }, 2000);
                } else {
                    throw new Error('저장에 실패했습니다');
                }

            } catch (err) {
                this.errors.form = err.message;
            } finally {
                this.isSubmitting = false;
            }
        },

        resetForm() {
            this.form = JSON.parse(JSON.stringify(this.originalForm));
            this.errors = {};
            this.isDirty = false;
        },

        getCsrfToken() {
            return document.querySelector('meta[name="csrf-token"]')
                ?.getAttribute('content') || '';
        }
    }
}
</script>

<div x-data="searchModule()" class="search-container">

    <!-- 검색 입력 -->
    <div class="search-input-group">
        <input
            type="text"
            x-model.debounce.300ms="query"
            placeholder="검색어를 입력하세요"
            @focus="showSuggestions = true"
            @blur="setTimeout(() => showSuggestions = false, 200)"
            class="form-control">

        <!-- 검색 중 로딩 상태 -->
        <div x-show="isSearching" class="spinner-small"></div>
    </div>

    <!-- 자동완성 제안 -->
    <div x-show="showSuggestions && suggestions.length > 0" class="suggestions">
        <template x-for="(suggestion, index) in suggestions" :key="index">
            <div
                @click="selectSuggestion(suggestion)"
                :class="{ active: index === selectedIndex }"
                class="suggestion-item">
                <!-- 쿼리 부분 강조 -->
                <span x-html="highlightQuery(suggestion)"></span>
            </div>
        </template>
    </div>

    <!-- 최근 검색어 -->
    <div x-show="showSuggestions && !query && recentSearches.length > 0"
         class="recent-searches">
        <p class="label">최근 검색어</p>
        <template x-for="search in recentSearches" :key="search">
            <button
                type="button"
                @click="query = search; executeSearch()"
                class="recent-item">
                <span x-text="search"></span>
                <button @click.stop="removeRecentSearch(search)" class="remove">×</button>
            </button>
        </template>
    </div>

    <!-- 검색 결과 -->
    <div x-show="results.length > 0" class="search-results">
        <template x-for="result in results" :key="result.document_srl">
            <a :href="`/board/view/${result.document_srl}`" class="result-item">
                <h4 x-text="result.title"></h4>
                <p x-html="result.summary"></p>
                <small>
                    <span x-text="result.nick_name"></span> ·
                    <time :datetime="result.regdate_raw">
                        <span x-text="formatDate(result.regdate)"></span>
                    </time>
                </small>
            </a>
        </template>
    </div>

    <!-- 결과 없음 -->
    <div x-show="searched && results.length === 0" class="no-results">
        검색 결과가 없습니다
    </div>
</div>

<script>
function searchModule() {
    return {
        query: '',
        suggestions: [],
        recentSearches: JSON.parse(
            localStorage.getItem('recentSearches') || '[]'
        ),
        results: [],
        isSearching: false,
        showSuggestions: false,
        selectedIndex: -1,
        searched: false,

        async init() {
            // 쿼리 변경 시 검색
            this.$watch('query', async (value) => {
                if (value.length >= 2) {
                    await this.fetchSuggestions();
                } else {
                    this.suggestions = [];
                    this.results = [];
                    this.searched = false;
                }
            });
        },

        async fetchSuggestions() {
            this.isSearching = true;

            try {
                const response = await fetch(
                    `/api/board/search-suggestions?q=${encodeURIComponent(this.query)}`
                );

                if (response.ok) {
                    const data = await response.json();
                    this.suggestions = data.suggestions || [];
                } else {
                    this.suggestions = [];
                }

            } catch (err) {
                console.error('검색 실패:', err);
                this.suggestions = [];
            } finally {
                this.isSearching = false;
            }
        },

        selectSuggestion(suggestion) {
            this.query = suggestion;
            this.executeSearch();
        },

        async executeSearch() {
            if (!this.query.trim()) return;

            this.isSearching = true;
            this.searched = true;
            this.showSuggestions = false;

            // 최근 검색어 저장
            this.saveRecentSearch(this.query);

            try {
                const response = await fetch(
                    `/api/board/search?q=${encodeURIComponent(this.query)}`
                );

                if (response.ok) {
                    const data = await response.json();
                    this.results = data.results || [];
                }

            } catch (err) {
                console.error('검색 실패:', err);
                this.results = [];
            } finally {
                this.isSearching = false;
            }
        },

        saveRecentSearch(search) {
            this.recentSearches = [
                search,
                ...this.recentSearches.filter(s => s !== search)
            ].slice(0, 10);

            localStorage.setItem(
                'recentSearches',
                JSON.stringify(this.recentSearches)
            );
        },

        removeRecentSearch(search) {
            this.recentSearches = this.recentSearches.filter(s => s !== search);
            localStorage.setItem(
                'recentSearches',
                JSON.stringify(this.recentSearches)
            );
        },

        highlightQuery(suggestion) {
            const regex = new RegExp(`(${this.query})`, 'gi');
            return suggestion.replace(
                regex,
                '<mark>$1</mark>'
            );
        },

        formatDate(dateStr) {
            const date = new Date(dateStr);
            const now = new Date();
            const diff = now - date;
            const hours = Math.floor(diff / (1000 * 60 * 60));
            const days = Math.floor(diff / (1000 * 60 * 60 * 24));

            if (hours < 1) return '방금 전';
            if (hours < 24) return `${hours}시간 전`;
            if (days < 30) return `${days}일 전`;

            return new Intl.DateTimeFormat('ko-KR', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit'
            }).format(date);
        }
    }
}
</script>

<!-- Alpine.js 버전: 간단하고 직관적 -->
<div x-data="{ count: 0 }">
    <button @click="count++">증가</button>
    <p x-text="`카운트: ${count}`"></p>
</div>

// React 버전: 더 명시적이지만 보일러플레이트 필요
function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <button onClick={() => setCount(count + 1)}>증가</button>
            <p>카운트: {count}</p>
        </div>
    );
}

// Alpine.js의 fetch와 XE API 통합
function xeAPI(module, act, data = {}) {
    return {
        async call(params = {}) {
            const formData = new URLSearchParams({
                module,
                act,
                ...data,
                ...params,
                _rx_csrf_token: this.getCsrfToken()
            });

            const response = await fetch('/index.php', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
                body: formData,
                credentials: 'same-origin'
            });

            // XE의 proc* 액션은 HTML 리다이렉트 반환
            if (response.ok) {
                return { success: true, status: response.status };
            }

            throw new Error(`HTTP ${response.status}`);
        },

        getCsrfToken() {
            return document.querySelector('meta[name="csrf-token"]')
                ?.getAttribute('content') || '';
        }
    };
}

// 사용 예
const api = xeAPI('board', 'procBoardInsertComment');
await api.call({ document_srl: 123, content: '댓글' });

<div x-data="permissionModule()">
    <!-- 쓰기 권한 있을 때만 표시 -->
    <button x-show="can.write" @click="openWriteForm()">
        글쓰기
    </button>

    <!-- 댓글 쓰기 권한 -->
    <form x-show="can.comment" @submit.prevent="submitComment()">
        <textarea x-model="commentContent"></textarea>
        <button type="submit">등록</button>
    </form>

    <!-- 관리자 메뉴 -->
    <div x-show="is.admin">
        <a href="/admin/board/">게시판 관리</a>
    </div>
</div>

<script>
function permissionModule() {
    return {
        can: {
            write: {{ $grant->write_document ? 'true' : 'false' }},
            comment: {{ $grant->write_comment ? 'true' : 'false' }},
            delete: {{ $grant->delete_document ? 'true' : 'false' }}
        },
        is: {
            admin: {{ $logged_info->is_admin === 'Y' ? 'true' : 'false' }},
            logged: {{ $is_logged ? 'true' : 'false' }}
        },

        openWriteForm() {
            // 로그인 확인
            if (!this.is.logged) {
                alert('로그인이 필요합니다');
                return;
            }

            // 권한 확인
            if (!this.can.write) {
                alert('글쓰기 권한이 없습니다');
                return;
            }

            window.location.href = '/board/write/';
        }
    }
}
</script>

<div x-data="cachedDataModule()" x-init="init()">
    <div x-show="isLoading" class="spinner">로드 중...</div>

    <div x-show="!isLoading" class="data-container">
        <template x-for="item in cachedData" :key="item.id">
            <div class="item" x-text="item.name"></div>
        </template>
    </div>

    <!-- 캐시 새로고침 -->
    <button @click="refreshCache()" x-show="!isLoading">
        새로고침
    </button>
</div>

<script>
function cachedDataModule() {
    const CACHE_KEY = 'board_data_cache';
    const CACHE_TTL = 5 * 60 * 1000; // 5분

    return {
        cachedData: [],
        isLoading: true,
        lastFetch: null,

        async init() {
            // 캐시 확인
            const cached = this.getCachedData();

            if (cached && this.isCacheValid()) {
                this.cachedData = cached;
                this.isLoading = false;
            } else {
                await this.fetchData();
            }
        },

        async fetchData() {
            this.isLoading = true;

            try {
                const response = await fetch(
                    '/api/board/documents?limit=20'
                );

                if (response.ok) {
                    const data = await response.json();
                    this.cachedData = data.documents || [];
                    this.setCachedData(this.cachedData);
                    this.lastFetch = Date.now();
                }

            } catch (err) {
                console.error('데이터 로드 실패:', err);
            } finally {
                this.isLoading = false;
            }
        },

        async refreshCache() {
            this.lastFetch = 0; // 캐시 무효화
            await this.fetchData();
        },

        getCachedData() {
            const item = localStorage.getItem(CACHE_KEY);
            return item ? JSON.parse(item) : null;
        },

        setCachedData(data) {
            localStorage.setItem(
                CACHE_KEY,
                JSON.stringify(data)
            );
        },

        isCacheValid() {
            if (!this.lastFetch) return false;
            return Date.now() - this.lastFetch < CACHE_TTL;
        }
    }
}
</script>