Form-ation/test-form.html at main · ddussi/Form-ation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Form-ation 테스트 페이지</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }

    form {
      border: 1px solid #ddd;
      padding: 20px;
      margin: 20px 0;
      border-radius: 8px;
    }

    .form-group {
      margin-bottom: 15px;
    }

    label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
    }

    input,
    textarea {
      width: 100%;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }

    button {
      background: #007cba;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .orphan-fields {
      border: 2px dashed #999;
      padding: 20px;
      margin: 20px 0;
    }
  </style>
</head>

<body>
  <h1>Form-ation 폼 감지 테스트</h1>

  <h2>폼 1: 연락처 정보</h2>
  <form id="contact-form">
    <div class="form-group">
      <label for="name">이름</label>
      <input type="text" id="name" name="name" placeholder="홍길동">
    </div>
    <div class="form-group">
      <label for="email">이메일</label>
      <input type="email" id="email" name="email" placeholder="hong@example.com">
    </div>
    <div class="form-group">
      <label for="phone">전화번호</label>
      <input type="tel" id="phone" name="phone" placeholder="010-1234-5678">
    </div>
    <div class="form-group">
      <label for="message">메시지</label>
      <textarea id="message" name="message" rows="4" placeholder="메시지를 입력하세요"></textarea>
    </div>
    <button type="submit">제출</button>
  </form>

  <h2>폼 2: 검색 (다른 form)</h2>
  <form id="search-form">
    <div class="form-group">
      <label for="query">검색어</label>
      <input type="search" id="query" name="query" placeholder="검색어 입력">
    </div>
    <div class="form-group">
      <label for="category">카테고리</label>
      <input type="text" id="category" name="category" placeholder="카테고리">
    </div>
    <button type="submit">검색</button>
  </form>

  <h2>폼 태그 밖의 필드들 (페이지 단위로 감지되어야 함)</h2>
  <div class="orphan-fields">
    <div class="form-group">
      <label for="standalone1">독립 필드 1</label>
      <input type="text" id="standalone1" name="standalone1" placeholder="폼 태그 밖 필드">
    </div>
    <div class="form-group">
      <label for="standalone2">독립 필드 2</label>
      <input type="url" id="standalone2" name="standalone2" placeholder="https://example.com">
    </div>
  </div>

  <h2>필터링 테스트 (간소화됨)</h2>
  <form id="excluded-form">
    <div class="form-group">
      <label for="password">비밀번호 (type=password, 제외됨)</label>
      <input type="password" id="password" name="password">
    </div>
    <div class="form-group">
      <label for="normal-field1">일반 필드 1 (포함됨)</label>
      <input type="text" id="normal-field1" name="normal-field1" placeholder="이 필드는 감지됨">
    </div>
    <div class="form-group">
      <label for="normal-field2">일반 필드 2 (포함됨)</label>
      <input type="text" id="normal-field2" name="normal-field2" placeholder="이것도 감지됨">
    </div>
    <div class="form-group">
      <label for="no-name">name/id 없는 필드 (제외됨)</label>
      <input type="text" placeholder="name도 id도 없음">
    </div>
    <button type="submit">제출</button>
  </form>

  <h2>디버깅 컨트롤</h2>
  <p>브라우저 개발자 도구 콘솔에서 다음 명령을 사용하세요:</p>
  <ul>
    <li><code>formManager.getDetectedForms()</code> - 감지된 폼 목록 확인</li>
    <li><code>formManager.manualCheck()</code> - 수동으로 저장 체크 실행</li>
    <li><code>formManager.manualSaveTest()</code> - 저장 모달 테스트</li>
    <li><code>formManager.manualAutofillTest()</code> - 자동입력 모달 테스트 (4단계 신규)</li>
    <li><code>formManager.getStorageDebugInfo()</code> - 저장된 데이터 확인</li>
  </ul>

  <div style="margin-top: 20px; padding: 15px; background: #f0f8ff; border-radius: 8px;">
    <h3>🎉 5단계 완성! UI/UX 개선 테스트</h3>

    <h4>🍞 토스트 알림 테스트:</h4>
    <ol>
      <li>폼에 값을 입력하고 제출</li>
      <li>[저장] 클릭 시 <strong>"폼 데이터 저장됨 (N개 필드)"</strong> 토스트 확인</li>
      <li>새로고침 후 [입력] 클릭 시 <strong>"자동입력 완료 (N개 필드)"</strong> 토스트 확인</li>
      <li>토스트는 우측 상단에 3초간 표시됨</li>
    </ol>

    <h4>⚙️ 관리 페이지 테스트:</h4>
    <ol>
      <li>크롬 확장 아이콘 우클릭 → <strong>"옵션"</strong> 클릭</li>
      <li>저장된 폼 데이터 목록 확인</li>
      <li>각 폼의 저장/자동입력 모드 변경 테스트</li>
      <li>개별 삭제, 사이트별 삭제, 전체 삭제 테스트</li>
      <li>통계 정보(저장된 폼 수, 사용 용량) 확인</li>
    </ol>

    <h4>🔄 다중 폼 자동입력 테스트:</h4>
    <ol>
      <li>위에서 저장한 후 <strong>페이지를 새로고침</strong></li>
      <li>페이지 로드 시 <strong>순차적으로</strong> 자동입력 모달 표시</li>
      <li>첫 번째 폼 모달에서 "⏭️ 대기 중인 폼: N개" 확인</li>
      <li>각 모달에서 [입력] 클릭하면 해당 폼만 채워짐</li>
      <li>토스트 알림으로 자동입력 완료 피드백</li>
    </ol>

    <p><strong>🎯 수동 테스트:</strong></p>
    <ul>
      <li><code>formManager.manualSaveTest()</code> - 저장 모달 즉시 표시</li>
      <li><code>formManager.manualAutofillTest()</code> - 자동입력 모달 즉시 표시</li>
    </ul>

    <h4>🔔 브라우저 알림 시스템 테스트 (NEW!):</h4>
    <ol>
      <li>폼에 값을 입력하고 <strong>제출 버튼 클릭</strong></li>
      <li>페이지가 이동해도 <strong>시스템 알림이 표시됨</strong></li>
      <li>알림에서 "💾 저장", "❌ 이번에는 안함", "🚫 다시 묻지 않음" 버튼 확인</li>
      <li>다른 탭이나 앱을 사용 중에도 알림 확인 가능</li>
      <li>새로고침 후 자동입력 알림도 동일하게 시스템 레벨에서 표시</li>
    </ol>

    <p><strong>✅ 완전한 폼 관리 시스템 완성!</strong></p>
    <p><strong>🔔 브라우저 알림 + 토스트 피드백 + 관리 대시보드 + 다중 폼 지원</strong></p>
    <p><strong>🚀 페이지 이동과 독립적인 네이티브 UX</strong></p>
    <p><strong>📊 번들 크기: 26.64kB (브라우저 알림 시스템 포함)</strong></p>
  </div>

  <script>
    // 테스트용 이벤트 리스너
    document.addEventListener('DOMContentLoaded', () => {
      console.log('테스트 페이지 로드됨');

      // 폼 제출 방지 (테스트용)
      document.querySelectorAll('form').forEach(form => {
        form.addEventListener('submit', (e) => {
          e.preventDefault();
          console.log('폼 제출 방지됨:', form.id);
        });
      });
    });
  </script>
</body>

</html>