Refactor to 5-step workflow (new → mvp → ui → policy → visualize)
- Remove old commands: spec, customer, sales, merge, design - Add new commands: ui, policy, visualize - Update mvp to include landing page generation - Add templates for mockup, policy, and UI documents - Simplify output path (remove [project] subfolder) - Rewrite README focused on usage 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
193
.specify/templates/mockup-base.html
Normal file
193
.specify/templates/mockup-base.html
Normal file
@@ -0,0 +1,193 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<title>[화면명] - [서비스명]</title>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="app">
|
||||
|
||||
<!-- ============================================ -->
|
||||
<!-- Header -->
|
||||
<!-- ============================================ -->
|
||||
<header class="header" id="[screen]-header">
|
||||
<div class="header-left">
|
||||
<!-- 로고 또는 뒤로가기 -->
|
||||
<span class="logo">[서비스명]</span>
|
||||
<!-- <button class="btn-back" onclick="history.back()">←</button> -->
|
||||
</div>
|
||||
<div class="header-center">
|
||||
<!-- 타이틀 (선택적) -->
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<!-- [MN-001] 상태 표시 -->
|
||||
<div class="status-badge">
|
||||
<span>💬</span>
|
||||
<span id="token-count">127</span>
|
||||
</div>
|
||||
<button class="btn-icon" onclick="location.href='settings.html'">⚙️</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- ============================================ -->
|
||||
<!-- Main Content -->
|
||||
<!-- ============================================ -->
|
||||
<main class="content" id="[screen]-content">
|
||||
|
||||
<!-- 섹션 예시 -->
|
||||
<section class="section">
|
||||
<h2 class="section-title">[섹션 제목]</h2>
|
||||
|
||||
<!-- 카드 예시 -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<span class="card-title">[카드 제목]</span>
|
||||
<span class="card-badge">[뱃지]</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>[카드 내용]</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button class="btn btn-secondary">[버튼1]</button>
|
||||
<button class="btn btn-primary">[버튼2]</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<!-- 리스트 예시 -->
|
||||
<section class="section">
|
||||
<div class="list">
|
||||
<div class="list-item" onclick="location.href='[상세].html'">
|
||||
<div class="list-item-avatar">
|
||||
<img src="https://via.placeholder.com/48" alt="">
|
||||
</div>
|
||||
<div class="list-item-content">
|
||||
<div class="list-item-title">[아이템 제목]</div>
|
||||
<div class="list-item-subtitle">[부제목/설명]</div>
|
||||
</div>
|
||||
<div class="list-item-meta">
|
||||
<span class="time">2분 전</span>
|
||||
<span class="badge">3</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 메인 액션 버튼 (센터 탭용) -->
|
||||
<!--
|
||||
<div class="main-action">
|
||||
<button class="btn btn-large btn-primary pulse" onclick="showModal('modal-action')">
|
||||
▶ [메인 액션]
|
||||
</button>
|
||||
</div>
|
||||
-->
|
||||
|
||||
</main>
|
||||
|
||||
<!-- ============================================ -->
|
||||
<!-- Tab Bar -->
|
||||
<!-- ============================================ -->
|
||||
<nav class="tab-bar">
|
||||
<a href="[tab1].html" class="tab-item">
|
||||
<span class="tab-icon">[아이콘1]</span>
|
||||
<span class="tab-label">[탭1]</span>
|
||||
<span class="tab-badge" style="display:none;">0</span>
|
||||
</a>
|
||||
<a href="[tab2].html" class="tab-item">
|
||||
<span class="tab-icon">[아이콘2]</span>
|
||||
<span class="tab-label">[탭2]</span>
|
||||
<span class="tab-badge">3</span>
|
||||
</a>
|
||||
<a href="[tab3].html" class="tab-item center active">
|
||||
<span class="tab-icon">[센터아이콘]</span>
|
||||
<span class="tab-label">[탭3]</span>
|
||||
</a>
|
||||
<a href="[tab4].html" class="tab-item">
|
||||
<span class="tab-icon">[아이콘4]</span>
|
||||
<span class="tab-label">[탭4]</span>
|
||||
</a>
|
||||
<a href="[tab5].html" class="tab-item">
|
||||
<span class="tab-icon">[아이콘5]</span>
|
||||
<span class="tab-label">[탭5]</span>
|
||||
</a>
|
||||
</nav>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ============================================ -->
|
||||
<!-- Overlay (for modals/sheets) -->
|
||||
<!-- ============================================ -->
|
||||
<div class="overlay" id="overlay" onclick="closeAll()"></div>
|
||||
|
||||
<!-- ============================================ -->
|
||||
<!-- Modal Example -->
|
||||
<!-- ============================================ -->
|
||||
<div class="modal" id="modal-example">
|
||||
<div class="modal-icon">🎉</div>
|
||||
<h3 class="modal-title">[모달 제목]</h3>
|
||||
<p class="modal-message">[모달 메시지]</p>
|
||||
<div class="modal-actions">
|
||||
<button class="btn btn-secondary" onclick="closeAll()">취소</button>
|
||||
<button class="btn btn-primary" onclick="handleConfirm()">확인</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============================================ -->
|
||||
<!-- Bottom Sheet Example -->
|
||||
<!-- ============================================ -->
|
||||
<div class="bottom-sheet" id="bs-example">
|
||||
<div class="bs-handle"></div>
|
||||
<div class="bs-header">
|
||||
<h3>[바텀시트 제목]</h3>
|
||||
<button class="btn-close" onclick="closeAll()">✕</button>
|
||||
</div>
|
||||
<div class="bs-content">
|
||||
<div class="bs-option" onclick="selectOption(1)">
|
||||
<span class="bs-option-icon">📝</span>
|
||||
<span class="bs-option-label">[옵션 1]</span>
|
||||
</div>
|
||||
<div class="bs-option" onclick="selectOption(2)">
|
||||
<span class="bs-option-icon">🗑️</span>
|
||||
<span class="bs-option-label">[옵션 2]</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============================================ -->
|
||||
<!-- Toast -->
|
||||
<!-- ============================================ -->
|
||||
<div class="toast" id="toast">[토스트 메시지]</div>
|
||||
|
||||
<!-- ============================================ -->
|
||||
<!-- Scripts -->
|
||||
<!-- ============================================ -->
|
||||
<script src="scripts.js"></script>
|
||||
<script>
|
||||
// ============================================
|
||||
// Page-specific Scripts
|
||||
// ============================================
|
||||
|
||||
function handleConfirm() {
|
||||
// 확인 버튼 처리
|
||||
closeAll();
|
||||
showToast('완료되었습니다!');
|
||||
}
|
||||
|
||||
function selectOption(option) {
|
||||
// 옵션 선택 처리
|
||||
closeAll();
|
||||
showToast(`옵션 ${option} 선택됨`);
|
||||
}
|
||||
|
||||
// 페이지 로드 시 실행
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// 초기화 코드
|
||||
console.log('[screen] loaded');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user