itsm_ysm/deploy/apk/mobile-app.html
itms-merge-dev 5e5ccc0ec7 docs+build(itms): CI/CD 정본 문서·APK 게시 자산·모바일 빌드 수정 (v1.0.0 APK 게시)
- docs/CICD_PIPELINE.md 정본(LIVE) + deploy/README.md 가동중 갱신
- deploy/apk/: publish_app_manifest.sh·mobile-app.html(WISE QR)·itms-latest.json
- deploy/nginx: /mobile-app(ITMS 전용)+/downloads/(APK)+매니페스트 서빙 반영
- mobile: EAS 빌드 의존 승격(react-navigation/expo-modules-core/metro)·.easignore·eas appVersionSource

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-19 19:41:29 +09:00

90 lines
5.0 KiB
HTML

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ITMS 모바일 앱 설치</title>
<style>
:root{ --brand:#1f29fc; --accent:#11c3ff; --bg:#f4f6f9; --card:#fff; --text:#252525; --muted:#6b7280; --border:#e6eaf0; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:'Pretendard',system-ui,-apple-system,'Malgun Gothic',sans-serif; background:var(--bg); color:var(--text); }
.wrap{ max-width:520px; margin:0 auto; padding:32px 20px 56px; }
.hero{ background:linear-gradient(135deg,var(--accent),var(--brand)); border-radius:20px; padding:34px 24px; text-align:center; color:#fff; }
.hero h1{ margin:0; font-size:34px; font-weight:900; letter-spacing:3px; }
.hero p{ margin:8px 0 0; font-size:14px; opacity:.92; }
.card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:22px; margin-top:18px; }
.qr{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.qr img{ width:220px; height:220px; border-radius:12px; background:#fff; padding:10px; border:1px solid var(--border); }
.qr .hint{ color:var(--muted); font-size:13px; text-align:center; }
.cta{ display:block; text-align:center; text-decoration:none; background:var(--brand); color:#fff; font-weight:800; font-size:16px; padding:15px; border-radius:14px; margin-top:16px; }
.meta{ margin-top:14px; }
.row{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--border); font-size:14px; }
.row .k{ color:var(--muted); } .row .v{ font-weight:600; word-break:break-all; text-align:right; margin-left:12px; }
.sha{ font-size:11px; color:var(--muted); word-break:break-all; margin-top:8px; }
.note{ color:var(--muted); font-size:12px; line-height:1.7; margin-top:18px; }
.steps{ counter-reset:s; padding:0; margin:12px 0 0; list-style:none; }
.steps li{ counter-increment:s; position:relative; padding:6px 0 6px 30px; font-size:13px; color:var(--text); }
.steps li::before{ content:counter(s); position:absolute; left:0; top:5px; width:20px; height:20px; border-radius:50%; background:var(--brand); color:#fff; font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; }
@media (prefers-color-scheme: dark){
:root{ --bg:#0b0f17; --card:#141a26; --text:#e6edf3; --muted:#8b97a8; --border:#283142; }
}
</style>
</head>
<body>
<div class="wrap">
<div class="hero">
<h1>ITMS</h1>
<p>IT 유지보수관리 모바일 앱</p>
</div>
<div class="card qr">
<img id="qr" src="itms-apk-qr.png" alt="설치 QR" onerror="this.style.display='none';document.getElementById('qrHint').textContent='아래 다운로드 버튼으로 설치하세요. (QR 이미지는 서버에서 생성)';" />
<div class="hint" id="qrHint">카메라로 QR을 스캔하면 앱 다운로드가 시작됩니다.</div>
<a class="cta" id="dl" href="#">APK 다운로드</a>
</div>
<div class="card">
<div class="meta">
<div class="row"><span class="k"></span><span class="v" id="appName">ITMS 유지보수관리 모바일 앱</span></div>
<div class="row"><span class="k">버전</span><span class="v" id="version">-</span></div>
<div class="row"><span class="k">플랫폼</span><span class="v" id="platform">Android</span></div>
<div class="row"><span class="k">크기</span><span class="v" id="size">-</span></div>
<div class="row"><span class="k">배포일</span><span class="v" id="publishedAt">-</span></div>
</div>
<div class="sha" id="sha"></div>
</div>
<div class="card">
<strong>설치 방법</strong>
<ol class="steps">
<li>QR 스캔 또는 다운로드 버튼으로 APK를 내려받습니다.</li>
<li>Android 설정에서 '출처를 알 수 없는 앱 설치'를 허용합니다.</li>
<li>내려받은 APK를 실행해 설치합니다.</li>
<li>ITMS 계정(아이디/비밀번호)으로 로그인합니다.</li>
</ol>
<p class="note">사내/기관 내부 배포용입니다. iOS는 별도 배포 채널을 통해 제공됩니다.</p>
</div>
</div>
<script>
// itms-latest.json(매니페스트)을 읽어 화면 최신화. 백엔드 공개 엔드포인트로 대체 가능(fetch 경로만 변경).
(function(){
fetch('itms-latest.json', { cache: 'no-store' })
.then(function(r){ return r.json(); })
.then(function(m){
var $ = function(id){ return document.getElementById(id); };
if (m.appName) $('appName').textContent = m.appName;
$('version').textContent = m.version || '-';
$('platform').textContent = m.platform || 'Android';
var mb = m.fileSizeMb; $('size').textContent = (mb && mb !== null) ? (mb + ' MB') : '-';
$('publishedAt').textContent = m.publishedAt || m.builtAt || '-';
var url = m.apkUrl || m.downloadUrl || '#';
$('dl').setAttribute('href', url);
if (m.sha256) $('sha').textContent = 'SHA-256: ' + m.sha256;
})
.catch(function(){ /* 매니페스트 없으면 정적 기본값 유지 */ });
})();
</script>
</body>
</html>