feat: GUI 칼럼 설정 저장, 010 전화번호 UX 개선, 품목 상세 조회

- GUI: SALES_COLUMNS 상수 정의, 칼럼 폭/윈도우 위치 gui_settings.json에 저장 - 전화번호 입력: 적립페이지/마이페이지에서 010 고정 + 뒷번호만 입력 - 적립페이지: MSSQL SALE_SUB에서 구매 품목 조회 및 토글 표시 - 마이페이지: 적립 내역 탭 시 품목 상세 AJAX 조회 (캐시 적용) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-25 01:17:45 +09:00
parent 774c199c1a
commit 82220a4a44
6 changed files with 390 additions and 81 deletions
--- a/backend/templates/claim_form.html
+++ b/backend/templates/claim_form.html
@@ -121,6 +121,81 @@
            margin-right: 2px;
        }

+        /* 구매 품목 리스트 */
+        .items-section {
+            margin-bottom: 20px;
+        }
+
+        .items-toggle {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 12px 0;
+            cursor: pointer;
+            border: none;
+            background: none;
+            width: 100%;
+            color: #495057;
+            font-size: 14px;
+            font-weight: 600;
+            letter-spacing: -0.2px;
+        }
+
+        .items-toggle .arrow {
+            transition: transform 0.2s ease;
+            font-size: 12px;
+            color: #adb5bd;
+        }
+
+        .items-toggle.open .arrow {
+            transform: rotate(180deg);
+        }
+
+        .items-list {
+            display: none;
+            border-top: 1px solid #f1f3f5;
+        }
+
+        .items-list.open {
+            display: block;
+        }
+
+        .item-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 10px 0;
+            border-bottom: 1px solid #f8f9fa;
+            font-size: 13px;
+        }
+
+        .item-row:last-child {
+            border-bottom: none;
+        }
+
+        .item-name {
+            color: #495057;
+            flex: 1;
+            font-weight: 500;
+            letter-spacing: -0.2px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin-right: 8px;
+        }
+
+        .item-qty {
+            color: #868e96;
+            margin-right: 12px;
+            white-space: nowrap;
+        }
+
+        .item-price {
+            color: #212529;
+            font-weight: 600;
+            white-space: nowrap;
+        }
+
        .form-section {
            padding: 8px 0;
        }
@@ -426,15 +501,36 @@
                    <div class="points-badge">{{ "{:,}".format(token_info.claimable_points) }}P 적립</div>
                </div>

+                {% if sale_items %}
+                <div class="items-section">
+                    <button type="button" class="items-toggle" id="itemsToggle" onclick="toggleItems()">
+                        <span>구매 품목 ({{ sale_items|length }}건)</span>
+                        <span class="arrow">▼</span>
+                    </button>
+                    <div class="items-list" id="itemsList">
+                        {% for item in sale_items %}
+                        <div class="item-row">
+                            <span class="item-name">{{ item.name }}</span>
+                            <span class="item-qty">{{ item.qty }}개</span>
+                            <span class="item-price">{{ "{:,}".format(item.total) }}원</span>
+                        </div>
+                        {% endfor %}
+                    </div>
+                </div>
+                {% endif %}
+
                <form id="formClaim" class="form-section">
                    <div class="input-group">
                        <label for="phone">전화번호</label>
-                        <div class="input-wrapper">
+                        <div class="input-wrapper" style="display: flex; align-items: center; gap: 8px;">
+                            <span style="font-size: 18px; font-weight: 600; color: #495057; white-space: nowrap; padding: 16px 0 16px 4px;">010 -</span>
                            <input type="tel" id="phone" name="phone"
-                                   placeholder="010-0000-0000"
-                                   pattern="[0-9-]*"
+                                   placeholder="0000-0000"
+                                   inputmode="numeric"
+                                   maxlength="9"
                                   autocomplete="tel"
-                                   required>
+                                   required
+                                   style="flex: 1;">
                        </div>
                    </div>

@@ -496,25 +592,36 @@
        const claimFormDiv = document.getElementById('claimForm');
        const successScreen = document.getElementById('successScreen');

-        // 전화번호 자동 하이픈
+        // 품목 토글
+        function toggleItems() {
+            const btn = document.getElementById('itemsToggle');
+            const list = document.getElementById('itemsList');
+            if (btn && list) {
+                btn.classList.toggle('open');
+                list.classList.toggle('open');
+            }
+        }
+
+        // 뒷번호 자동 하이픈 (010 고정)
        const phoneInput = document.getElementById('phone');
        phoneInput.addEventListener('input', function(e) {
            let value = e.target.value.replace(/[^0-9]/g, '');
-
-            if (value.length <= 3) {
+            if (value.length <= 4) {
                e.target.value = value;
-            } else if (value.length <= 7) {
-                e.target.value = value.slice(0, 3) + '-' + value.slice(3);
            } else {
-                e.target.value = value.slice(0, 3) + '-' + value.slice(3, 7) + '-' + value.slice(7, 11);
+                e.target.value = value.slice(0, 4) + '-' + value.slice(4, 8);
            }
        });

+        // 포커스 시 자동으로 전화번호 필드로
+        phoneInput.focus();
+
        // 폼 제출
        form.addEventListener('submit', async function(e) {
            e.preventDefault();

-            const phone = document.getElementById('phone').value.trim();
+            const phoneRaw = document.getElementById('phone').value.trim().replace(/[^0-9]/g, '');
+            const phone = '010-' + phoneRaw.slice(0, 4) + '-' + phoneRaw.slice(4, 8);
            const name = document.getElementById('name').value.trim();
            const privacyConsent = document.getElementById('privacyConsent').checked;

--- a/backend/templates/my_page.html
+++ b/backend/templates/my_page.html
@@ -194,6 +194,64 @@
            letter-spacing: -0.2px;
        }

+        /* 품목 상세 */
+        .transaction-item.clickable {
+            cursor: pointer;
+        }
+
+        .item-detail {
+            display: none;
+            margin-top: 12px;
+            padding-top: 12px;
+            border-top: 1px solid #f1f3f5;
+        }
+
+        .item-detail.open {
+            display: block;
+        }
+
+        .item-detail-row {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 6px 0;
+            font-size: 13px;
+        }
+
+        .item-detail-name {
+            color: #495057;
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin-right: 8px;
+        }
+
+        .item-detail-qty {
+            color: #868e96;
+            margin-right: 10px;
+            white-space: nowrap;
+        }
+
+        .item-detail-price {
+            color: #212529;
+            font-weight: 600;
+            white-space: nowrap;
+        }
+
+        .item-detail-loading {
+            text-align: center;
+            color: #adb5bd;
+            font-size: 13px;
+            padding: 8px 0;
+        }
+
+        .item-detail-hint {
+            color: #adb5bd;
+            font-size: 11px;
+            margin-top: 4px;
+        }
+
        /* 모바일 최적화 */
        @media (max-width: 480px) {
            .header {
@@ -228,7 +286,8 @@
            {% if transactions %}
            <ul class="transaction-list">
                {% for tx in transactions %}
-                <li class="transaction-item">
+                <li class="transaction-item {% if tx.transaction_id %}clickable{% endif %}"
+                    {% if tx.transaction_id %}onclick="toggleDetail(this, '{{ tx.transaction_id }}')"{% endif %}>
                    <div class="transaction-header">
                        <div class="transaction-reason">
                            {% if tx.reason == 'CLAIM' %}
@@ -246,7 +305,13 @@
                    {% if tx.description %}
                    <div class="transaction-desc">{{ tx.description }}</div>
                    {% endif %}
-                    <div class="transaction-date">{{ tx.created_at }}</div>
+                    <div class="transaction-date">
+                        {{ tx.created_at }}
+                        {% if tx.transaction_id %}
+                        <span class="item-detail-hint">탭하여 품목 보기</span>
+                        {% endif %}
+                    </div>
+                    <div class="item-detail" id="detail-{{ tx.transaction_id }}"></div>
                </li>
                {% endfor %}
            </ul>
@@ -258,5 +323,53 @@
            {% endif %}
        </div>
    </div>
+
+    <script>
+    const detailCache = {};
+
+    async function toggleDetail(el, txId) {
+        const detail = document.getElementById('detail-' + txId);
+        if (!detail) return;
+
+        // 이미 열려있으면 닫기
+        if (detail.classList.contains('open')) {
+            detail.classList.remove('open');
+            return;
+        }
+
+        // 캐시에 있으면 바로 표시
+        if (detailCache[txId]) {
+            detail.innerHTML = detailCache[txId];
+            detail.classList.add('open');
+            return;
+        }
+
+        // 로딩 표시
+        detail.innerHTML = '<div class="item-detail-loading">품목 조회 중...</div>';
+        detail.classList.add('open');
+
+        try {
+            const res = await fetch('/admin/transaction/' + txId);
+            const data = await res.json();
+
+            if (data.success && data.items && data.items.length > 0) {
+                let html = '';
+                data.items.forEach(item => {
+                    html += `<div class="item-detail-row">
+                        <span class="item-detail-name">${item.name}</span>
+                        <span class="item-detail-qty">${item.qty}개</span>
+                        <span class="item-detail-price">${item.total.toLocaleString()}원</span>
+                    </div>`;
+                });
+                detailCache[txId] = html;
+                detail.innerHTML = html;
+            } else {
+                detail.innerHTML = '<div class="item-detail-loading">품목 정보를 불러올 수 없습니다</div>';
+            }
+        } catch (e) {
+            detail.innerHTML = '<div class="item-detail-loading">조회 실패</div>';
+        }
+    }
+    </script>
 </body>
 </html>
--- a/backend/templates/my_page_login.html
+++ b/backend/templates/my_page_login.html
@@ -149,11 +149,17 @@
        <form method="GET" action="/my-page">
            <div class="form-group">
                <label for="phone">전화번호</label>
-                <input type="tel" id="phone" name="phone"
-                       placeholder="010-0000-0000"
-                       pattern="[0-9-]*"
-                       autocomplete="tel"
-                       required>
+                <div style="display: flex; align-items: center; gap: 8px;">
+                    <span style="font-size: 18px; font-weight: 600; color: #495057; white-space: nowrap; padding: 16px 0 16px 4px;">010 -</span>
+                    <input type="tel" id="phoneInput"
+                           placeholder="0000-0000"
+                           inputmode="numeric"
+                           maxlength="9"
+                           autocomplete="tel"
+                           required
+                           style="flex: 1;">
+                    <input type="hidden" id="phone" name="phone">
+                </div>
            </div>

            <button type="submit" class="btn-submit">
@@ -165,19 +171,26 @@
    </div>

    <script>
-        // 전화번호 자동 하이픈
-        const phoneInput = document.getElementById('phone');
+        // 뒷번호 자동 하이픈 (010 고정)
+        const phoneInput = document.getElementById('phoneInput');
+        const phoneHidden = document.getElementById('phone');
+
        phoneInput.addEventListener('input', function(e) {
            let value = e.target.value.replace(/[^0-9]/g, '');
-
-            if (value.length <= 3) {
+            if (value.length <= 4) {
                e.target.value = value;
-            } else if (value.length <= 7) {
-                e.target.value = value.slice(0, 3) + '-' + value.slice(3);
            } else {
-                e.target.value = value.slice(0, 3) + '-' + value.slice(3, 7) + '-' + value.slice(7, 11);
+                e.target.value = value.slice(0, 4) + '-' + value.slice(4, 8);
            }
        });
+
+        // 제출 시 010 합쳐서 hidden 필드에 전달
+        phoneInput.closest('form').addEventListener('submit', function() {
+            const raw = phoneInput.value.replace(/[^0-9]/g, '');
+            phoneHidden.value = '010' + raw;
+        });
+
+        phoneInput.focus();
    </script>
 </body>
 </html>