1<!DOCTYPE html> 2<html lang="ko"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>ë ì ë¡ê·¸ì¸/íìê°ì - ìì ë¶ì 문</title> 7
7<script src="https://t1.kakaocdn.net/kakao_js_sdk/2.7.2/kakao.min.js"></script>
7 8 <style> 9 * { margin: 0; padding: 0; box-sizing: border-box; } 10 body { 11 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif; 12 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 13 min-height: 100vh; 14 padding: 2rem; 15 display: flex; 16 align-items: center; 17 justify-content: center; 18 } 19 .container { 20 max-width: 600px; 21 width: 100%; 22 background: white; 23 border-radius: 16px; 24 box-shadow: 0 20px 60px rgba(0,0,0,0.3); 25 overflow: hidden; 26 } 27 .header { 28 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); 29 color: white; 30 padding: 2.5rem 2rem; 31 text-align: center; 32 } 33 .header h1 { font-size: 2rem; margin-bottom: 0.5rem; } 34 .header p { opacity: 0.9; font-size: 1rem; } 35 .content { padding: 2.5rem 2rem; } 36 .kakao-login-section { text-align: center; margin-bottom: 2rem; } 37 .kakao-login-btn { 38 background: #FEE500; 39 color: #000000 !important; 40 border: none; 41 padding: 1rem 2rem; 42 border-radius: 12px; 43 font-size: 1.1rem; 44 font-weight: 600; 45 cursor: pointer; 46 display: inline-flex; 47 align-items: center; 48 gap: 0.75rem; 49 transition: all 0.3s; 50 box-shadow: 0 4px 12px rgba(254, 229, 0, 0.3); 51 } 52 .kakao-login-btn:hover { 53 transform: translateY(-2px); 54 box-shadow: 0 6px 20px rgba(254, 229, 0, 0.4); 55 } 56 .kakao-logo { width: 24px; height: 24px; } 57 .form-section { display: none; } 58 .form-section.active { display: block; } 59 .form-group { margin-bottom: 1.5rem; } 60 .form-group label { 61 display: block; 62 margin-bottom: 0.5rem; 63 font-weight: 600; 64 color: #333; 65 } 66 .form-group input, .form-group select { 67 width: 100%; 68 padding: 0.75rem; 69 border: 2px solid #e0e0e0; 70 border-radius: 8px; 71 font-size: 1rem; 72 transition: border-color 0.3s; 73 } 74 .form-group input:focus, .form-group select:focus { 75 outline: none; 76 border-color: #667eea; 77 } 78 .checkbox-group { display: flex; flex-wrap: wrap; gap: 0.75rem; } 79 .checkbox-item { display: flex; align-items: center; gap: 0.5rem; } 80 .checkbox-item input[type="checkbox"] { width: auto; } 81 .btn { 82 padding: 0.75rem 1.5rem; 83 border: none; 84 border-radius: 8px; 85 font-size: 1rem; 86 font-weight: 600; 87 cursor: pointer; 88 transition: all 0.3s; 89 } 90 .btn-primary { background: #667eea; color: white; } 91 .btn-primary:hover { 92 background: #5568d3; 93 transform: translateY(-2px); 94 box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4); 95 } 96 .btn-secondary { background: #6c757d; color: white; } 97 .btn-secondary:hover { background: #5a6268; } 98 .form-actions { 99 display: flex; 100 gap: 1rem; 101 justify-content: flex-end; 102 margin-top: 2rem; 103 padding-top: 1.5rem; 104 border-top: 2px solid #f0f0f0; 105 } 106 .alert { padding: 1rem; border-radius: 8px; margin-bottom: 1.5rem; } 107 .alert-success { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; } 108 .alert-error { background: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; } 109 .alert-info { background: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; } 110 .login-tabs { display: flex; border-bottom: 2px solid #e0e0e0; margin-bottom: 2rem; } 111 .tab-btn { 112 flex: 1; padding: 0.85rem; border: none; background: none; 113 font-size: 1rem; font-weight: 600; cursor: pointer; color: #999; 114 border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all 0.3s; 115 } 116 .tab-btn.active { color: #667eea; border-bottom-color: #667eea; } 117 .tab-btn:hover { color: #667eea; } 118 .tab-panel { display: none; } 119 .tab-panel.active { display: block; } 120 .divider { text-align: center; color: #999; margin: 1.5rem 0; font-size: 0.9rem; } 121 .link-btn { background: none; border: none; color: #667eea; font-size: 0.95rem; cursor: pointer; text-decoration: underline; } 122 .user-info { 123 background: #f8f9fa; 124 padding: 1.5rem; 125 border-radius: 8px; 126 margin-bottom: 2rem; 127 } 128 .user-info h3 { margin-bottom: 1rem; color: #667eea; } 129 .user-info p { margin-bottom: 0.5rem; color: #666; } 130 @media (max-width: 768px) { 131 body { padding: 1rem; } 132 .content { padding: 1.5rem; } 133 .header h1 { font-size: 1.5rem; } 134 } 135 </style> 136</head> 137<body> 138 <div class="container"> 139 <div class="header"> 140 <h1>ð ë ì ë¡ê·¸ì¸/íìê°ì </h1> 141 <p>ì¹´ì¹´ì¤ ëë ì´ë©ì¼ë¡ ë¡ê·¸ì¸íì¸ì</p> 142 </div> 143 144 <div class="content"> 145 <div id="alertContainer"></div> 146 147 <!-- ë©ì¸ ë¡ê·¸ì¸ ì¹ì (í) --> 148 <div id="mainLoginSection"> 149 <div class="login-tabs"> 150 <button class="tab-btn active" id="tabBtnKakao" onclick="switchTab('kakao')">ì¹´ì¹´ì¤ ë¡ê·¸ì¸</button> 151 <button class="tab-btn" id="tabBtnEmail" onclick="switchTab('email')">ì´ë©ì¼ ë¡ê·¸ì¸</button> 152 </div> 153 154 <!-- ì¹´ì¹´ì¤ í --> 155 <div id="tab-kakao" class="tab-panel active"> 156 <div id="kakaoLoginSection" class="kakao-login-section"> 157 <div class="alert alert-info"> 158 <strong>ð± ì¹´ì¹´ì¤ ê°í¸ ë¡ê·¸ì¸</strong><br> 159 ì¹´ì¹´ì¤ ê³ì ì¼ë¡ ê°í¸íê² ë¡ê·¸ì¸íì¸ì.<br> 160 ì ê· íìì ìëì¼ë¡ íìê°ì íì´ì§ë¡ ì´ëí©ëë¤. 161 </div> 162 <button type="button" class="kakao-login-btn" onclick="kakaoLogin()">
163 <svg class="kakao-logo" viewBox="0 0 24 24" fill="currentColor"> 164 <path d="M12 3C6.5 3 2 6.6 2 11c0 2.8 1.9 5.3 4.7 6.7-.2.7-.6 2.5-.7 2.8 0 .3.1.3.3.2.2-.1 2.9-1.9 3.4-2.3.8.1 1.5.2 2.3.2 5.5 0 10-3.6 10-8S17.5 3 12 3z"/> 165 </svg> 166 ì¹´ì¹´ì¤ ë¡ê·¸ì¸ 167 </button> 168 <div style="margin-top: 2rem; text-align: center;"> 169 <a href="/" style="color: #667eea; text-decoration: none; font-weight: 600;">â ë©ì¸ì¼ë¡ ëìê°ê¸°</a> 170 </div> 171 </div> 172 </div> 173 174 <!-- ì´ë©ì¼ ë¡ê·¸ì¸ í --> 175 <div id="tab-email" class="tab-panel"> 176 <div class="alert alert-info" style="font-size:0.9rem;"> 177 <strong>ð§ ì´ë©ì¼ ë¡ê·¸ì¸ ìë´</strong><br> 178 ì´ë©ì¼ë¡ ì²ì ê°ì íìë©´ <strong>ì ë ¥íì ì´ë©ì¼ë¡ 6ì리 ì¸ì¦ ì½ë</strong>ê° ë°ì¡ë©ëë¤.<br> 179 ë°ì 주ì: <strong>[email protected]</strong><br> 180 ë©ì¼í¨(ì¤í¸í¨ í¬í¨)ì íì¸íì¬ ì¸ì¦ì ìë£í´ 주ì¸ì. 181 </div> 182 <div class="form-group"> 183 <label>ì´ë©ì¼</label> 184 <input type="email" id="emailLoginEmail" placeholder="[email protected]" 185 onkeydown="if(event.key==='Enter') emailLogin()"> 186 </div> 187 <div class="form-group"> 188 <label>ë¹ë°ë²í¸</label> 189 <input type="password" id="emailLoginPassword" placeholder="ë¹ë°ë²í¸ ì ë ¥" 190 onkeydown="if(event.key==='Enter') emailLogin()"> 191 </div> 192 <button type="button" class="btn btn-primary" style="width:100%; padding:1rem;" onclick="emailLogin()"> 193 ë¡ê·¸ì¸ 194 </button> 195 <div class="divider">ââââââââ ì²ì 방문íì ¨ëì? ââââââââ</div> 196 <div style="text-align:center;"> 197 <button class="link-btn" onclick="showEmailRegisterForm()">ì´ë©ì¼ë¡ íìê°ì </button> 198 </div> 199 <div style="margin-top: 1.5rem; text-align: center;"> 200 <a href="/" style="color: #667eea; text-decoration: none; font-weight: 600;">â ë©ì¸ì¼ë¡ ëìê°ê¸°</a> 201 </div> 202 </div> 203 </div> 204 205 <!-- íìì ë³´ ì ë ¥ ì¹ì --> 206 <div id="registerFormSection" class="form-section"> 207 <div class="user-info" id="kakaoUserInfo"></div> 208 209 <h2 style="margin-bottom: 1.5rem;">âï¸ íì ì ë³´ ì ë ¥</h2> 210 211 <div class="form-group"> 212 <label>ì´ë¦ <span style="color: #e74c3c;">*</span></label> 213 <input type="text" id="name" placeholder="í길ë" required> 214 </div> 215 216 <div class="form-group"> 217 <label>ì´ë©ì¼ <span style="color: #e74c3c;">*</span></label> 218 <input type="email" id="email" placeholder="[email protected]" required> 219 </div> 220 221 <div class="form-group"> 222 <label>ëë¤ì <span style="color: #e74c3c;">*</span></label> 223 <input type="text" id="nickname" placeholder="ë´ì¤ë¬ë²" required> 224 </div> 225 226 <div class="form-group"> 227 <label>í´ëí° ë²í¸ <span style="color: #e74c3c;">*</span></label> 228 <input type="tel" id="phone" placeholder="01012345678" maxlength="11" required> 229 <small style="color: #666; display: block; margin-top: 0.5rem;"> 230 â ï¸ ì¹´ì¹´ì¤ ê³ì ì í´ëí° ë²í¸ì ë¤ë¥¼ ê²½ì° íìê°ì ì´ ì íë ì ììµëë¤. 231 </small> 232 </div> 233 234 <div class="form-group"> 235 <label>ìë (ì í)</label> 236 <input type="number" id="birthYear" placeholder="1990" min="1900" max="2024"> 237 </div> 238 239 <div class="form-group"> 240 <label>ì±ë³ (ì í)</label> 241 <select id="gender"> 242 <option value="">ì í ìí¨</option> 243 <option value="M">ë¨ì±</option> 244 <option value="F">ì¬ì±</option> 245 </select> 246 </div> 247 248 <div class="form-group"> 249 <label>ì§ì (ì í)</label> 250 <select id="region"> 251 <option value="">ì ííì¸ì</option> 252 <option value="ì 주">ì 주</option> 253 <option value="ìµì°">ìµì°</option> 254 <option value="êµ°ì°">êµ°ì°</option> 255 <option value="ë¨ì">ë¨ì</option> 256 <option value="ì ì">ì ì</option> 257 <option value="ê¹ì ">ê¹ì </option> 258 <option value="ì주">ì주</option> 259 <option value="ìì¤">ìì¤</option> 260 <option value="무주">무주</option> 261 <option value="ì§ì">ì§ì</option> 262 <option value="ì¥ì">ì¥ì</option> 263 <option value="ê³ ì°½">ê³ ì°½</option> 264 <option value="ë¶ì">ë¶ì</option> 265 <option value="ìì°½">
265ìì°½</option> 266 </select> 267 </div> 268 269 <div class="form-group"> 270 <label>ê´ì¬ ì¹´í ê³ ë¦¬ (ì í)</label> 271 <div class="checkbox-group"> 272 <div class="checkbox-item"> 273 <input type="checkbox" name="interests[]" value="ì§ì" id="cat_ì§ì"> 274 <label for="cat_ì§ì" style="margin: 0; font-weight: normal;">ì§ì</label> 275 </div> 276 <div class="checkbox-item"> 277 <input type="checkbox" name="interests[]" value="ì ì¹" id="cat_ì ì¹"> 278 <label for="cat_ì ì¹" style="margin: 0; font-weight: normal;">ì ì¹</label> 279 </div> 280 <div class="checkbox-item"> 281 <input type="checkbox" name="interests[]" value="ê²½ì " id="cat_ê²½ì ">
282 <label for="cat_ê²½ì " style="margin: 0; font-weight: normal;">ê²½ì </label> 283 </div> 284 <div class="checkbox-item"> 285 <input type="checkbox" name="interests[]" value="ì¬í" id="cat_ì¬í"> 286 <label for="cat_ì¬í" style="margin: 0; font-weight: normal;">ì¬í</label> 287 </div> 288 <div class="checkbox-item"> 289 <input type="checkbox" name="interests[]" value="문í" id="cat_문í"> 290 <label for="cat_문í" style="margin: 0; font-weight: normal;">문í</label> 291 </div> 292 <div class="checkbox-item"> 293 <input type="checkbox" name="interests[]" value="ì¤í¬ì¸ " id="cat_ì¤í¬ì¸ "> 294 <label for="cat_ì¤í¬ì¸ " style="margin: 0; font-weight: normal;">ì¤í¬ì¸ </label> 295 </div> 296 <div class="checkbox-item"> 297 <input type="checkbox" name="interests[]" value="êµì¡" id="cat_êµì¡"> 298 <label for="cat_êµì¡" style="margin: 0; font-weight: normal;">êµì¡</label> 299 </div> 300 <div class="checkbox-item"> 301 <input type="checkbox" name="interests[]" value="íê²½" id="cat_íê²½"> 302 <label for="cat_íê²½" style="margin: 0; font-weight: normal;">íê²½</label> 303 </div> 304 <div class="checkbox-item"> 305 <input type="checkbox" name="interests[]" value="ê³¼í" id="cat_ê³¼í"> 306 <label for="cat_ê³¼í" style="margin: 0; font-weight: normal;">ê³¼í</label> 307 </div> 308 <div class="checkbox-item"> 309 <input type="checkbox" name="interests[]" value="ê±´ê°" id="cat_ê±´ê°"> 310 <label for="cat_ê±´ê°" style="margin: 0; font-weight: normal;">ê±´ê°</label> 311 </div> 312 <div class="checkbox-item"> 313 <input type="checkbox" name="interests[]" value="ì°ì" id="cat_ì°ì"> 314 <label for="cat_ì°ì" style="margin: 0; font-weight: normal;">ì°ì</label> 315 </div> 316 </div> 317 </div> 318 319 <div class="form-group" style="margin-top: 2rem;"> 320 <div class="checkbox-item"> 321 <input type="checkbox" id="marketingAgree"> 322 <label for="marketingAgree" style="margin: 0; font-weight: normal;"> 323 ë§ì¼í ì ë³´ ìì ì ëìí©ëë¤ (ì í) 324 </label> 325 </div> 326 </div> 327 328 <div class="form-actions"> 329 <button type="button" class="btn btn-secondary" onclick="location.href='/'">ì·¨ì</button> 330 <button type="button" class="btn btn-primary" onclick="submitRegistration()">ê°ì ìë£</button> 331 </div> 332 </div> 333 334 <!-- ì´ë©ì¼ ì¸ì¦ ì½ë ì ë ¥ ì¹ì --> 335 <div id="emailVerifySection" class="form-section"> 336 <div style="text-align:center; margin-bottom:2rem;"> 337 <div style="font-size:3rem; margin-bottom:1rem;">ð§</div> 338 <h2 style="margin-bottom:0.5rem;">ì´ë©ì¼ ì¸ì¦</h2> 339 <p style="color:#666; font-size:0.95rem;"> 340 ì ë ¥íì ì´ë©ì¼ë¡ 6ì리 ì¸ì¦ ì½ë를 ë°ì¡íìµëë¤.<br> 341 ë°ì 주ì: <strong>[email protected]</strong><br> 342 ë©ì¼í¨(ì¤í¸í¨ í¬í¨)ì íì¸í´ 주ì¸ì. 343 </p> 344 </div> 345 <input type="hidden" id="verifyMemberId" value=""> 346 <div style="background:#f8f9fa; border-radius:8px; padding:0.85rem 1rem; margin-bottom:1.5rem; text-align:center; font-size:0.9rem; color:#555;"> 347 ì¸ì¦ ì½ë ë°ì¡ 주ì: <strong id="verifyEmailDisplay" style="color:#667eea;"></strong> 348 </div> 349 <div class="form-group"> 350 <label style="text-align:center; display:block;">ì¸ì¦ ì½ë 6ì리</label> 351 <input type="text" id="verifyCode" placeholder="000000" maxlength="6" 352 style="text-align:center; font-size:1.8rem; letter-spacing:0.5rem; font-weight:bold;" 353 onkeydown="if(event.key==='Enter') submitVerifyCode()"
354 oninput="this.value=this.value.replace(/\D/g,'')"> 355 </div> 356 <button type="button" class="btn btn-primary" style="width:100%; padding:1rem; margin-bottom:1rem;" onclick="submitVerifyCode()"> 357 ì¸ì¦ ìë£ 358 </button> 359 <div style="text-align:center;"> 360 <button class="link-btn" onclick="resendVerification()">ì¸ì¦ ì½ë ì¬ë°ì¡</button> 361 · 362 <button class="link-btn" onclick="showEmailLoginTab()">ë¡ê·¸ì¸ì¼ë¡ ëìê°ê¸°</button> 363 </div> 364 </div> 365 366 <!-- ì´ë©ì¼ íìê°ì ì¹ì --> 367 <div id="emailRegisterSection" class="form-section"> 368 <h2 style="margin-bottom: 0.5rem;">âï¸ ì´ë©ì¼ íìê°ì </h2> 369 <div class="alert alert-info" style="font-size:0.9rem; margin-bottom:1.5rem;"> 370 <strong>ð¬ ì´ë©ì¼ ì¸ì¦ ì ì°¨ ìë´</strong><br> 371 ê°ì ìë£ í ì ë ¥íì ì´ë©ì¼ 주ìë¡ <strong>6ì리 ì¸ì¦ ì½ë</strong>ê° ìë ë°ì¡ë©ëë¤.<br> 372 ⢠ë°ì 주ì: <strong>[email protected]</strong><br> 373 ⢠ì¸ì¦ ì½ë ì í¨ìê°: <strong>30ë¶</strong><br> 374 ⢠ì¸ì¦ ìë£ ì ê¹ì§ë ë¡ê·¸ì¸ì´ ì íë©ëë¤.<br> 375 ⢠ë©ì¼ì´ ì¤ì§ ìì¼ë©´ <strong>ì¤í¸í¨</strong>ì íì¸í´ 주ì¸ì. 376 </div> 377 378 <div class="form-group"> 379 <label>ì´ë¦ <span style="color:#e74c3c;">*</span></label> 380 <input type="text" id="erName" placeholder="í길ë" required> 381 </div> 382 <div class="form-group"> 383 <label>ì´ë©ì¼ <span style="color:#e74c3c;">*</span></label> 384 <input type="email" id="erEmail" placeholder="[email protected]" required> 385 </div> 386 <div class="form-group"> 387 <label>ë¹ë°ë²í¸ <span style="color:#e74c3c;">*</span></label> 388 <input type="password" id="erPassword" placeholder="8ì ì´ì ì ë ¥" required> 389 </div> 390 <div class="form-group"> 391 <label>ë¹ë°ë²í¸ íì¸ <span style="color:#e74c3c;">*</span></label> 392 <input type="password" id="erPasswordConfirm" placeholder="ë¹ë°ë²í¸ ì¬ì ë ¥" required> 393 </div> 394 <div class="form-group"> 395 <label>ëë¤ì <span style="color:#e74c3c;">*</span></label> 396 <input type="text" id="erNickname" placeholder="ë´ì¤ë¬ë²" required> 397 </div> 398 <div class="form-group"> 399 <label>í´ëí° ë²í¸ <span style="color:#e74c3c;">*</span></label> 400 <input type="tel" id="erPhone" placeholder="01012345678" maxlength="11" required> 401 </div> 402 <div class="form-group"> 403 <label>ìë (ì í)</label> 404 <input type="number" id="erBirthYear" placeholder="1990" min="1900" max="2024"> 405 </div> 406 <div class="form-group"> 407 <label>ì±ë³ (ì í)</label> 408 <select id="erGender"> 409 <option value="">ì í ìí¨</option> 410 <option value="M">ë¨ì±</option> 411 <option value="F">ì¬ì±</option> 412 </select> 413 </div> 414 <div class="form-group"> 415 <label>ì§ì (ì í)</label> 416 <select id="erRegion"> 417 <option value="">ì ííì¸ì</option> 418 <option value="ì 주">ì 주</option> 419 <option value="ìµì°">ìµì°</option> 420 <option value="êµ°ì°">êµ°ì°</option> 421 <option value="ë¨ì">ë¨ì</option> 422 <option value="ì ì">ì ì</option> 423 <option value="ê¹ì ">ê¹ì </option> 424 <option value="ì주">ì주</option> 425 <option value="ìì¤">ìì¤</option> 426 <option value="무주">무주</option> 427 <option value="ì§ì">ì§ì</option> 428 <option value="ì¥ì">ì¥ì</option> 429 <option value="ê³ ì°½">ê³ ì°½</option> 430 <option value="ë¶ì">ë¶ì</option> 431 <option value="ìì°½">
431ìì°½</option> 432 </select> 433 </div> 434 <div class="form-group"> 435 <label>ê´ì¬ ì¹´í ê³ ë¦¬ (ì í)</label> 436 <div class="checkbox-group"> 437 <div class="checkbox-item"> 438 <input type="checkbox" name="er_interests[]" value="ì§ì" id="er_cat_ì§ì"> 439 <label for="er_cat_ì§ì" style="margin:0; font-weight:normal;">ì§ì</label> 440 </div> 441 <div class="checkbox-item"> 442 <input type="checkbox" name="er_interests[]" value="ì ì¹" id="er_cat_ì ì¹"> 443 <label for="er_cat_ì ì¹" style="margin:0; font-weight:normal;">ì ì¹</label> 444 </div> 445 <div class="checkbox-item"> 446 <input type="checkbox" name="er_interests[]" value="ê²½ì " id="er_cat_ê²½ì "> 447 <label for="er_cat_ê²½ì " style="margin:0; font-weight:normal;">ê²½ì </label> 448 </div> 449 <div class="checkbox-item"> 450 <input type="checkbox" name="er_interests[]" value="ì¬í" id="er_cat_ì¬í"> 451 <label for="er_cat_ì¬í" style="margin:0; font-weight:normal;">ì¬í</label> 452 </div> 453 <div class="checkbox-item"> 454 <input type="checkbox" name="er_interests[]" value="문í" id="er_cat_문í"> 455 <label for="er_cat_문í" style="margin:0; font-weight:normal;">문í</label> 456 </div> 457 <div class="checkbox-item"> 458 <input type="checkbox" name="er_interests[]" value="ì¤í¬ì¸ " id="er_cat_ì¤í¬ì¸ "> 459 <label for="er_cat_ì¤í¬ì¸ " style="margin:0; font-weight:normal;">ì¤í¬ì¸ </label> 460 </div> 461 <div class="checkbox-item"> 462 <input type="checkbox" name="er_interests[]" value="êµì¡" id="er_cat_êµì¡"> 463 <label for="er_cat_êµì¡" style="margin:0; font-weight:normal;">êµì¡</label> 464 </div> 465 <div class="checkbox-item"> 466 <input type="checkbox" name="er_interests[]" value="íê²½" id="er_cat_íê²½"> 467 <label for="er_cat_íê²½" style="margin:0; font-weight:normal;">íê²½</label> 468 </div> 469 <div class="checkbox-item"> 470 <input type="checkbox" name="er_interests[]" value="ê³¼í" id="er_cat_ê³¼í"> 471 <label for="er_cat_ê³¼í" style="margin:0; font-weight:normal;">ê³¼í</label> 472 </div> 473 <div class="checkbox-item"> 474 <input type="checkbox" name="er_interests[]" value="ê±´ê°" id="er_cat_ê±´ê°"> 475 <label for="er_cat_ê±´ê°" style="margin:0; font-weight:normal;">ê±´ê°</label> 476 </div> 477 <div class="checkbox-item"> 478 <input type="checkbox" name="er_interests[]" value="ì°ì" id="er_cat_ì°ì"> 479 <label for="er_cat_ì°ì" style="margin:0; font-weight:normal;">ì°ì</label> 480 </div> 481 </div> 482 </div> 483 <div class="form-group" style="margin-top:1rem;"> 484 <div class="checkbox-item"> 485 <input type="checkbox" id="erMarketingAgree"> 486 <label for="erMarketingAgree" style="margin:0; font-weight:normal;">ë§ì¼í ì ë³´ ìì ì ëìí©ëë¤ (ì í)</label> 487 </div> 488 </div> 489 <div class="form-actions"> 490 <button type="button" class="btn btn-secondary" onclick="showEmailLoginTab()">â ë¡ê·¸ì¸ì¼ë¡</button> 491 <button type="button" class="btn btn-primary" onclick="submitEmailRegistration()">ê°ì ìë£</button> 492 </div> 493 </div> 494 </div> 495 </div> 496 497
497<script> 498 Kakao.init('dbf6b5259f59da50e2991f959fa4447e'); 499 let kakaoUserData = null; 500 501 // ââ í ì í ââ 502 function switchTab(tab) { 503 document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active')); 504 document.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active')); 505 document.getElementById('tabBtn' + tab.charAt(0).toUpperCase() + tab.slice(1)).classList.add('active'); 506 document.getElementById('tab-' + tab).classList.add('active'); 507 } 508 509 // ââ ì´ë©ì¼ ë¡ê·¸ì¸ ââ 510 async function emailLogin() { 511 const email = document.getElementById('emailLoginEmail').value.trim(); 512 const password = document.getElementById('emailLoginPassword').value; 513 if (!email || !password) { showAlert('ì´ë©ì¼ê³¼ ë¹ë°ë²í¸ë¥¼ ì ë ¥í´ì£¼ì¸ì.', 'error'); return; } 514 515 try { 516 const res = await fetch(window.location.href, { 517 method: 'POST', 518 headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, 519 body: new URLSearchParams({ ajax: '1', action: 'email_login', email, password }) 520 }); 521 const result = await res.json(); 522 if (result.success) { 523 showAlert(`${result.member.name}ë íìí©ëë¤!`, 'success'); 524 const redirectUrl = '/reader/pdf_newspaper.php'; 525 setTimeout(() => { location.href = redirectUrl; }, 1500); 526 } else if (!result.success && result.need_verify) { 527 showAlert(result.message, 'error'); 528 const loginEmail = document.getElementById('emailLoginEmail').value.trim(); 529 setTimeout(() => showVerifySection(result.member_id, loginEmail), 800); 530 } else { 531 showAlert(result.message, 'error'); 532 } 533 } catch (e) { 534 showAlert('ë¡ê·¸ì¸ ì²ë¦¬ ì¤ ì¤ë¥ê° ë°ìíìµëë¤.', 'error'); 535 } 536 } 537 538 // ââ ì´ë©ì¼ íìê°ì í¼ íì ââ 539 function showEmailRegisterForm() { 540 document.getElementById('mainLoginSection').style.display = 'none'; 541 document.getElementById('emailRegisterSection').classList.add('active'); 542 } 543 544 // ââ ì´ë©ì¼ ì¸ì¦ íë©´ íì ââ 545 function showVerifySection(memberId, email) { 546 document.getElementById('mainLoginSection').style.display = 'none'; 547 document.getElementById('emailRegisterSection').classList.remove('active'); 548 document.getElementById('verifyMemberId').value = memberId; 549 document.getElementById('verifyEmailDisplay').textContent = email || ''; 550 document.getElementById('emailVerifySection').classList.add('active'); 551 setTimeout(() => document.getElementById('verifyCode').focus(), 100); 552 } 553 554 // ââ ì¸ì¦ ì½ë ì ì¶ ââ 555 async function submitVerifyCode() { 556 const code = document.getElementById('verifyCode').value.trim(); 557 const memberId = document.getElementById('verifyMemberId').value; 558 if (code.length !== 6) { showAlert('6ì리 ì¸ì¦ ì½ë를 ì ë ¥í´ì£¼ì¸ì.', 'error'); return; } 559 560 try { 561 const res = await fetch(window.location.href, { 562 method: 'POST', 563 headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, 564 body: new URLSearchParams({ ajax: '1', action: 'verify_email', member_id: memberId, code }) 565 }); 566 const result = await res.json(); 567 if (result.success) { 568 showAlert(result.message, 'success'); 569 const redirectUrl = '/reader/pdf_newspaper.php'; 570 setTimeout(() => { location.href = redirectUrl; }, 1500); 571 } else { 572 showAlert(result.message, 'error'); 573 } 574 } catch (e) { 575 showAlert('ì¸ì¦ ì²ë¦¬ ì¤ ì¤ë¥ê° ë°ìíìµëë¤.', 'error'); 576 } 577 } 578 579 // ââ ì¸ì¦ ì½ë ì¬ë°ì¡ ââ 580 async function resendVerification() { 581 const memberId = document.getElementById('verifyMemberId').value; 582 try { 583 const res = await fetch(window.location.href, { 584 method: 'POST', 585 headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, 586 body: new URLSearchParams({ ajax: '1', action: 'resend_verification', member_id: memberId }) 587 }); 588 const result = await res.json(); 589 showAlert(result.message, result.success ? 'success' : 'error'); 590 } catch (e) { 591 showAlert('ì¬ë°ì¡ ì¤ ì¤ë¥ê° ë°ìíìµëë¤.', 'error'); 592 } 593 } 594 595 // ââ ì´ë©ì¼ ë¡ê·¸ì¸ íì¼ë¡ ëìê°ê¸° ââ 596 function showEmailLoginTab() { 597 document.getElementById('emailRegisterSection').classList.remove('active'); 598 document.getElementById('emailVerifySection').classList.remove('active'); 599 document.getElementById('mainLoginSection').style.display = ''; 600 switchTab('email'); 601 } 602 603 // ââ ì´ë©ì¼ íìê°ì ì ì¶ ââ 604 async function submitEmailRegistration() { 605 const name = document.getElementById('erName').value.trim(); 606 const email = document.getElementById('erEmail').value.trim(); 607 const password = document.getElementById('erPassword').value; 608 const passwordConfirm = document.getElementById('erPasswordConfirm').value; 609 const nickname = document.getElementById('erNickname').value.trim(); 610 const phone = document.getElementById('erPhone').value.trim(); 611 612 if (!name) { showAlert('ì´ë¦ì ì ë ¥í´ì£¼ì¸ì.', 'error'); return; } 613 if (!email) { showAlert('ì´ë©ì¼ì ì ë ¥í´ì£¼ì¸ì.', 'error'); return; } 614 if (!password) { showAlert('ë¹ë°ë²í¸ë¥¼ ì ë ¥í´ì£¼ì¸ì.', 'error'); return; } 615 if (password.length < 8) { showAlert('ë¹ë°ë²í¸ë 8ì ì´ìì´ì´ì¼ í©ëë¤.', 'error'); return; } 616 if (password !== passwordConfirm) { showAlert('ë¹ë°ë²í¸ê° ì¼ì¹íì§ ììµëë¤.', 'error'); return; } 617 if (!nickname) { showAlert('ëë¤ìì ì ë ¥í´ì£¼ì¸ì.', 'error'); return; } 618 if (!phone) { showAlert('í´ëí° ë²í¸ë¥¼ ì ë ¥í´ì£¼ì¸ì.', 'error'); return; } 619 620 if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { showAlert('ì¬ë°ë¥¸ ì´ë©ì¼ íìì ì ë ¥í´ì£¼ì¸ì.', 'error'); return; } 621 if (!/^01[0-9]{8,9}$/.test(phone)) { showAlert('ì¬ë°ë¥¸ í´ëí° ë²í¸ë¥¼ ì ë ¥í´ì£¼ì¸ì. (ì: 01012345678)', 'error'); return; } 622 623 const interests = Array.from(document.querySelectorAll('input[name="er_interests[]"]:checked')).map(c => c.value); 624 625 try { 626 const res = await fetch(window.location.href, { 627 method: 'POST', 628 headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, 629 body: new URLSearchParams({ 630 ajax: '1', action: 'email_register', 631 name, email, password, nickname, phone, 632 birth_year: document.getElementById('erBirthYear').value, 633 gender: document.getElementById('erGender').value, 634 region: document.getElementById('erRegion').value, 635 interests: JSON.stringify(interests), 636 marketing_agree: document.getElementById('erMarketingAgree').checked ? '1' : '0' 637 }) 638 }); 639 const result = await res.json(); 640 if (result.success && result.need_verify) { 641 showAlert(result.message, 'success'); 642 const regEmail = document.getElementById('erEmail').value.trim(); 643 setTimeout(() => showVerifySection(result.member_id, regEmail), 800); 644 } else if (result.success) { 645 showAlert(result.message, 'success'); 646 const redirectUrl = '/reader/pdf_newspaper.php'; 647 setTimeout(() => { location.href = redirectUrl; }, 2000); 648 } else { 649 showAlert(result.message, 'error'); 650 } 651 } catch (e) { 652 showAlert('íìê°ì ì¤ ì¤ë¥ê° ë°ìíìµëë¤.', 'error'); 653 } 654 } 655 656 function showAlert(message, type = 'info') { 657 const alertContainer = document.getElementById('alertContainer'); 658 const alertClass = type === 'success' ? 'alert-success' : (type === 'error' ? 'alert-error' : 'alert-info'); 659 alertContainer.innerHTML = `<div class="alert ${alertClass}">${message}</div>`; 660 setTimeout(() => { alertContainer.innerHTML = ''; }, 5000); 661 } 662 663 function kakaoLogin() { 664 Kakao.Auth.authorize({ 665 redirectUri: 'https://sjbnews.com/reader/kakao_callback.php' 666 }); 667 } 668 669 async function processKakaoLogin(userData) {
670 const kakaoAccount = userData.kakao_account || {}; 671 const profile = kakaoAccount.profile || {}; 672 673 const formData = new URLSearchParams({ 674 ajax: '1', 675 action: 'kakao_login', 676 kakao_id: userData.id, 677 kakao_email: kakaoAccount.email || '', 678 kakao_nickname: profile.nickname || '' 679 }); 680 681 try { 682 const response = await fetch(window.location.href, { 683 method: 'POST', 684 headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, 685 body: formData 686 }); 687 688 const result = await response.json(); 689 690 if (result.success) { 691 if (result.is_new) { 692 // ì ê· íì - íìê°ì í¼ íì 693 showRegisterForm(result.kakao_data); 694 } else { 695 // 기존 íì - ë¡ê·¸ì¸ ìë£ 696 showAlert(`${result.member.name}ë íìí©ëë¤!`, 'success'); 697 const redirectUrl = '/reader/pdf_newspaper.php'; 698 setTimeout(() => { location.href = redirectUrl; }, 1500); 699 } 700 } 701 } catch (error) { 702 showAlert('ë¡ê·¸ì¸ ì²ë¦¬ ì¤ ì¤ë¥ê° ë°ìíìµëë¤.', 'error'); 703 console.error(error); 704 } 705 } 706 707 function showRegisterForm(kakaoData) { 708 const userInfoHtml = ` 709 <h3>â ì ê· íì ê°ì </h3> 710 <p><strong>ì¹´ì¹´ì¤ ID:</strong> ${kakaoData.kakao_id}</p> 711 ${kakaoData.kakao_nickname ? `<p><strong>ì¹´ì¹´ì¤ ëë¤ì:</strong> ${kakaoData.kakao_nickname} <span style="color: #999; font-size: 0.85rem;">(ì¸ì¦ì©)</span></p>` : ''} 712 ${kakaoData.kakao_email ? `<p><strong>ì¹´ì¹´ì¤ ì´ë©ì¼:</strong> ${kakaoData.kakao_email} <span style="color: #999; font-size: 0.85rem;">(ì¸ì¦ì©)</span></p>` : ''} 713 <p style="color: #666; font-size: 0.9rem; margin-top: 1rem;"> 714 â ï¸ ì¹´ì¹´ì¤ ì¸ì¦ ì ë³´ë ë³ë ì ì¥ëë©° ìì í ì ììµëë¤.<br> 715 ìë ì´ë©ì¼ê³¼ ëë¤ìì ìì ê°ë¥í©ëë¤. 716 </p> 717 `; 718 719 // ì´ë©ì¼ì´ ìì¼ë©´ ìë ì ë ¥ 720 if (kakaoData.kakao_email) { 721 document.getElementById('email').value = kakaoData.kakao_email; 722 } 723 724 // ëë¤ìì´ ìì¼ë©´ ìë ì ë ¥ 725 if (kakaoData.kakao_nickname) { 726 document.getElementById('nickname').value = kakaoData.kakao_nickname; 727 } 728 729 document.getElementById('kakaoUserInfo').innerHTML = userInfoHtml; 730 document.getElementById('kakaoLoginSection').style.display = 'none'; 731 document.getElementById('registerFormSection').classList.add('active'); 732 } 733 734 async function submitRegistration() { 735 const kd = window._kakaoRegData || kakaoUserData; 736 if (!kd) { 737 showAlert('ì¹´ì¹´ì¤ ë¡ê·¸ì¸ì´ íìí©ëë¤.', 'error'); 738 return; 739 } 740 741 const name = document.getElementById('name').value.trim(); 742 const email = document.getElementById('email').value.trim(); 743 const nickname = document.getElementById('nickname').value.trim(); 744 const phone = document.getElementById('phone').value.trim(); 745 746 if (!name) { showAlert('ì´ë¦ì ì ë ¥í´ì£¼ì¸ì.', 'error'); return; } 747 if (!email) { showAlert('ì´ë©ì¼ì ì ë ¥í´ì£¼ì¸ì.', 'error'); return; } 748 if (!nickname) { showAlert('ëë¤ìì ì ë ¥í´ì£¼ì¸ì.', 'error'); return; } 749 if (!phone) { showAlert('í´ëí° ë²í¸ë¥¼ ì ë ¥í´ì£¼ì¸ì.', 'error'); return; } 750 751 const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; 752 if (!emailRegex.test(email)) { 753 showAlert('ì¬ë°ë¥¸ ì´ë©ì¼ íìì ì ë ¥í´ì£¼ì¸ì.', 'error'); 754 return; 755 } 756 757 const phoneRegex = /^01[0-9]{8,9}$/; 758 if (!phoneRegex.test(phone)) { 759 showAlert('ì¬ë°ë¥¸ í´ëí° ë²í¸ë¥¼ ì ë ¥í´ì£¼ì¸ì. (ì: 01012345678)', 'error'); 760 return; 761 } 762 763 const interests = Array.from(document.querySelectorAll('input[name="interests[]"]:checked')) 764 .map(cb => cb.value); 765 766 // 리ë¤ì´ë í¸ ë°©ì(_kakaoRegData) ë° íì ë°©ì(kakaoUserData) 모ë ì§ì
767 const kakaoId = kd.kakao_id ?? kd.id ?? ''; 768 const kakaoEmail = kd.kakao_email ?? (kd.kakao_account?.email ?? ''); 769 const kakaoNick = kd.kakao_nickname ?? (kd.kakao_account?.profile?.nickname ?? ''); 770 771 const formData = new URLSearchParams({ 772 ajax: '1', 773 action: 'register', 774 kakao_id: kakaoId, 775 kakao_email: kakaoEmail, 776 kakao_nickname: kakaoNick, 777 name: name, 778 email: email, 779 nickname: nickname, 780 phone: document.getElementById('phone').value, 781 birth_year: document.getElementById('birthYear').value, 782 gender: document.getElementById('gender').value, 783 region: document.getElementById('region').value, 784 interests: JSON.stringify(interests), 785 marketing_agree: document.getElementById('marketingAgree').checked ? '1' : '0' 786 }); 787 788 try { 789 const response = await fetch(window.location.href, { 790 method: 'POST', 791 headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, 792 body: formData 793 }); 794 795 const text = await response.text(); 796 console.log('ìë² ìëµ:', text); 797 798 try { 799 const result = JSON.parse(text); 800 if (result.success) { 801 showAlert(result.message, 'success'); 802 const redirectUrl = '/reader/pdf_newspaper.php'; 803 setTimeout(() => { location.href = redirectUrl; }, 2000); 804 } else { 805 showAlert(result.message, 'error'); 806 } 807 } catch (parseError) { 808 console.error('JSON íì± ì¤ë¥:', parseError); 809 console.error('ìëµ ë´ì©:', text); 810 showAlert('ìë² ìëµ ì¤ë¥ê° ë°ìíìµëë¤. ì½ìì íì¸íì¸ì.', 'error'); 811 } 812 } catch (error) { 813 showAlert('íìê°ì ì¤ ì¤ë¥ê° ë°ìíìµëë¤.', 'error'); 814 console.error(error); 815 } 816 } 817 818 </script>
818 819</body> 820</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.