?좊떏??而ㅻ??덊떚 - 濡쒓렇??/ ?뚯썝媛??/title> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap" rel="stylesheet">  <script src="https://accounts.google.com/gsi/client" async defer></script>  <script src="https://developers.kakao.com/sdk/js/kakao.js"></script> <style> :root { --primary: #FF6B9D; --primary-hover: #ff4d88; --bg-color: #FFF0F5; --text-dark: #333; --text-light: #666; --white: #ffffff; --border: #f0cdda; --shadow: 0 4px 15px rgba(255, 107, 157, 0.15); } * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Noto Sans KR', sans-serif; background: var(--bg-color); min-height: 100vh; display: flex; flex-direction: column; } a { text-decoration: none; color: inherit; } .header { background: var(--white); padding: 1rem 0; box-shadow: 0 2px 10px rgba(0,0,0,0.05); } .header-container { max-width: 1000px; margin: 0 auto; padding: 0 1rem; display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.5rem; font-weight: 700; color: var(--primary); } .auth-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: 3rem 1rem; } .auth-box { background: var(--white); border-radius: 16px; box-shadow: var(--shadow); padding: 2.5rem; width: 100%; max-width: 420px; } .auth-tabs { display: flex; margin-bottom: 2rem; border-bottom: 2px solid var(--border); } .auth-tab { flex: 1; padding: 0.8rem; background: none; border: none; font-size: 1rem; font-family: inherit; font-weight: 500; color: var(--text-light); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all 0.2s; } .auth-tab.active { color: var(--primary); border-bottom-color: var(--primary); } .auth-form { display: none; } .auth-form.active { display: block; } .form-group { margin-bottom: 1.2rem; } .form-label { display: block; margin-bottom: 0.4rem; font-size: 0.9rem; font-weight: 500; color: var(--text-dark); } .form-control { width: 100%; padding: 0.85rem 1rem; border: 1.5px solid var(--border); border-radius: 10px; font-size: 1rem; font-family: inherit; transition: border-color 0.2s, box-shadow 0.2s; } .form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(255,107,157,0.15); } .btn-submit { width: 100%; padding: 0.95rem; background: var(--primary); color: var(--white); border: none; border-radius: 10px; font-size: 1rem; font-weight: 700; font-family: inherit; cursor: pointer; transition: background 0.2s, transform 0.1s; margin-top: 0.5rem; } .btn-submit:hover { background: var(--primary-hover); transform: translateY(-1px); } .auth-msg { margin-top: 1rem; padding: 0.8rem; border-radius: 8px; font-size: 0.9rem; text-align: center; display: none; } .auth-msg.success { background: #e8f5e9; color: #2e7d32; } .auth-msg.error { background: #fce4ec; color: #c62828; } .or-divider { text-align: center; color: var(--text-light); font-size: 0.85rem; margin: 1.2rem 0; position: relative; } .or-divider::before, .or-divider::after { content: ''; position: absolute; top: 50%; width: 38%; height: 1px; background: var(--border); } .or-divider::before { left: 0; } .or-divider::after { right: 0; } /* 媛꾪렪 濡쒓렇??踰꾪듉 */ .social-btns { display: flex; flex-direction: column; gap: 0.7rem; } .btn-social { width: 100%; padding: 0.85rem 1rem; border: none; border-radius: 10px; font-size: 0.95rem; font-weight: 700; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: opacity 0.2s, transform 0.1s; } .btn-social:hover { opacity: 0.88; transform: translateY(-1px); } .btn-social:active { transform: translateY(0); } .btn-kakao { background: #FEE500; color: #191919; } .btn-google { background: var(--white); color: #3c4043; border: 1.5px solid #dadce0; } .btn-social svg { width: 20px; height: 20px; flex-shrink: 0; } .btn-home { width: 100%; padding: 0.85rem; background: transparent; color: var(--primary); border: 1.5px solid var(--primary); border-radius: 10px; font-size: 0.95rem; font-weight: 500; font-family: inherit; cursor: pointer; text-align: center; display: block; transition: all 0.2s; } .btn-home:hover { background: var(--primary); color: var(--white); } .auth-guide { font-size: 0.8rem; color: var(--text-light); margin-top: 1.5rem; text-align: center; line-height: 1.6; } @media (max-width: 480px) { .header-container { padding: 0 1rem; } .auth-wrap { padding: 1.5rem 0.5rem; align-items: flex-start; } .auth-box { padding: 1.8rem; border-radius: 12px; max-width: 95%; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .modal-content { padding: 1.5rem; width: 92%; } } /* ?됰꽕???ㅼ젙 紐⑤떖 ?ㅽ???*/ .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; } .modal-content { background: var(--white); width: 100%; max-width: 400px; border-radius: 20px; padding: 2.5rem; box-shadow: 0 10px 30px rgba(0,0,0,0.2); position: relative; animation: modalPop 0.3s ease-out; } @keyframes modalPop { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } .modal-title { font-size: 1.4rem; font-weight: 700; color: var(--primary); margin-bottom: 1rem; text-align: center; } .modal-desc { font-size: 0.95rem; color: var(--text-light); text-align: center; margin-bottom: 2rem; line-height: 1.5; } .modal-close { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; font-size: 1.5rem; color: var(--text-light); cursor: pointer; } </style> </head> <body> <header class="header"> <div class="header-container"> <a href="index.html" class="logo">?뙵 ?좊떏??而ㅻ??덊떚</a> <a href="index.html" style="color: var(--text-light); font-size:0.9rem;">??寃뚯떆?먯쑝濡?/a> </div> </header> <div class="auth-wrap"> <div class="auth-box">  <div class="auth-tabs"> <button class="auth-tab active" onclick="switchTab('login')">濡쒓렇??/button> <button class="auth-tab" onclick="switchTab('register')">?뚯썝媛??/button> </div>  <div id="loginForm" class="auth-form active">   <div class="social-btns"> <button class="btn-social btn-kakao" onclick="kakaoLogin()"> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M12 3C6.48 3 2 6.48 2 10.8c0 2.72 1.6 5.12 4.02 6.58l-.98 3.62 4.2-2.78c.9.18 1.82.28 2.76.28 5.52 0 10-3.48 10-7.8C22 6.48 17.52 3 12 3z"/> </svg> 移댁뭅??濡쒓렇?? </button> <button class="btn-social btn-google" onclick="googleLogin()"> <svg viewBox="0 0 24 24"> <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/> <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/> <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/> <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/> </svg> 援ш? 濡쒓렇?? </button> </div> <div class="or-divider">?먮뒗 ?됰꽕?꾩쑝濡?濡쒓렇??/div> <div class="form-group"> <label class="form-label">?됰꽕??/label> <input type="text" id="loginNick" class="form-control" placeholder="?됰꽕???낅젰"> </div> <div class="form-group"> <label class="form-label">鍮꾨?踰덊샇</label> <input type="password" id="loginPw" class="form-control" placeholder="鍮꾨?踰덊샇 ?낅젰" onkeyup="if(event.key==='Enter') doLogin()"> </div> <button class="btn-submit" onclick="doLogin()">濡쒓렇??/button> <div id="loginMsg" class="auth-msg"></div> <div class="or-divider">?먮뒗</div> <a href="index.html" class="btn-home">寃뚯떆???섎윭蹂닿린 (鍮꾪쉶??</a> <p class="auth-guide">鍮꾪쉶?먮룄 湲 ?쎄린??媛?ν빀?덈떎.</p> </div>  <div id="registerForm" class="auth-form">  <div class="social-btns"> <button class="btn-social btn-kakao" onclick="kakaoLogin()"> <svg viewBox="0 0 24 24" fill="currentColor"> <path d="M12 3C6.48 3 2 6.48 2 10.8c0 2.72 1.6 5.12 4.02 6.58l-.98 3.62 4.2-2.78c.9.18 1.82.28 2.76.28 5.52 0 10-3.48 10-7.8C22 6.48 17.52 3 12 3z"/> </svg> 移댁뭅?ㅻ줈 媛꾪렪媛?? </button> <button class="btn-social btn-google" onclick="googleLogin()"> <svg viewBox="0 0 24 24"> <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/> <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/> <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/> <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/> </svg> 援ш?濡?媛꾪렪媛?? </button> </div> <div class="or-divider">?먮뒗 ?됰꽕?꾩쑝濡?媛??/div> <div class="form-group"> <label class="form-label">?됰꽕??<span style="color:var(--primary)">*</span></label> <input type="text" id="regNick" class="form-control" placeholder="2~10?? ?쒓?/?곷Ц/?レ옄"> </div> <div class="form-group"> <label class="form-label">鍮꾨?踰덊샇 <span style="color:var(--primary)">*</span></label> <input type="password" id="regPw" class="form-control" placeholder="4???댁긽"> </div> <div class="form-group"> <label class="form-label">鍮꾨?踰덊샇 ?뺤씤 <span style="color:var(--primary)">*</span></label> <input type="password" id="regPw2" class="form-control" placeholder="鍮꾨?踰덊샇 ?ㅼ떆 ?낅젰" onkeyup="if(event.key==='Enter') doRegister()"> </div> <button class="btn-submit" onclick="doRegister()">媛?낇븯湲?/button> <div id="registerMsg" class="auth-msg"></div> <p class="auth-guide">媛쒖씤?뺣낫 蹂댄샇瑜??꾪빐 ?ㅻ챸 ?ъ슜???먯젣??二쇱꽭??</p> </div> </div> </div>  <div id="nickModal" class="modal-overlay"> <div class="modal-content"> <button class="modal-close" onclick="closeNickModal()">횞</button> <h2 class="modal-title">?됰꽕???ㅼ젙 ?뙵</h2> <p class="modal-desc">?좊떏??而ㅻ??덊떚?먯꽌 ?ъ슜??br>?됰꽕?꾩쓣 ?낅젰??二쇱꽭??</p> <div class="form-group"> <label class="form-label">?됰꽕??/label> <input type="text" id="socialNick" class="form-control" placeholder="2~10?? 以묐났 遺덇?"> </div> <button class="btn-submit" onclick="submitSocialNick()">?좊떏???쒖옉?섍린</button> <div id="socialNickMsg" class="auth-msg"></div> </div> </div> <script> // ============================================= // ?숋툘 API ???ㅼ젙 (?꾨옒 媛믪쓣 吏곸젒 ?낅젰?댁＜?몄슂) // ============================================= const KAKAO_JS_KEY = '19a5785a648e4843d3b9622ceab7c4ac'; // 移댁뭅??JavaScript ?? const GOOGLE_CLIENT_ID = '374068567868-q0v0i4tb1mak6mr9r69eqrb7fqm7vtsp.apps.googleusercontent.com'; // ============================================= const USER_KEY = 'todak_users'; const SESSION_KEY = 'todak_session'; function getUsers() { return JSON.parse(localStorage.getItem(USER_KEY)) || []; } function saveUsers(users) { localStorage.setItem(USER_KEY, JSON.stringify(users)); } // ?대? 濡쒓렇?몃맂 寃쎌슦 寃뚯떆?먯쑝濡? if (localStorage.getItem(SESSION_KEY)) { location.href = 'index.html'; } // URL ?뚮씪誘명꽣濡??뚯썝媛?????먮룞 ?꾪솚 if (location.search.includes('register') || location.hash === '#register') { document.addEventListener('DOMContentLoaded', () => switchTab('register')); } function switchTab(tab) { document.querySelectorAll('.auth-tab').forEach((t, i) => { t.classList.toggle('active', (tab === 'login' && i === 0) || (tab === 'register' && i === 1)); }); document.getElementById('loginForm').classList.toggle('active', tab === 'login'); document.getElementById('registerForm').classList.toggle('active', tab === 'register'); } function showMsg(id, msg, type) { const el = document.getElementById(id); el.textContent = msg; el.className = `auth-msg ${type}`; el.style.display = 'block'; } function setSession(nick, isAdmin = false) { localStorage.setItem(SESSION_KEY, JSON.stringify({ nick, isAdmin, loginAt: new Date().toISOString() })); } // ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺 // ?쇰컲 濡쒓렇??/ ?뚯썝媛?? // ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺 function doLogin() { const nick = document.getElementById('loginNick').value.trim(); const pw = document.getElementById('loginPw').value.trim(); if (!nick || !pw) return showMsg('loginMsg', '?됰꽕?꾧낵 鍮꾨?踰덊샇瑜??낅젰?댁＜?몄슂.', 'error'); // 愿由ъ옄 ?꾩슜 怨꾩젙 泥댄겕 if (nick === 'admin' && pw === 'admin7788') { setSession('理쒓퀬愿由ъ옄', true); showMsg('loginMsg', '愿由ъ옄 紐⑤뱶濡??묒냽?⑸땲?? ?썳截?, 'success'); setTimeout(() => location.href = 'index.html', 1000); return; } const user = getUsers().find(u => u.nick === nick && u.pw === pw); if (user) { setSession(user.nick, false); showMsg('loginMsg', `${nick}?? ?섏쁺?⑸땲?? ?뙵`, 'success'); setTimeout(() => location.href = 'index.html', 1000); } else { showMsg('loginMsg', '?됰꽕???먮뒗 鍮꾨?踰덊샇媛 ?쇱튂?섏? ?딆뒿?덈떎.', 'error'); } } function doRegister() { const nick = document.getElementById('regNick').value.trim(); const pw = document.getElementById('regPw').value.trim(); const pw2 = document.getElementById('regPw2').value.trim(); if (!nick || nick.length < 2 || nick.length > 10) return showMsg('registerMsg', '?됰꽕?꾩? 2~10?먮줈 ?낅젰?댁＜?몄슂.', 'error'); if (!pw || pw.length < 4) return showMsg('registerMsg', '鍮꾨?踰덊샇??4???댁긽?쇰줈 ?낅젰?댁＜?몄슂.', 'error'); if (pw !== pw2) return showMsg('registerMsg', '鍮꾨?踰덊샇媛 ?쇱튂?섏? ?딆뒿?덈떎.', 'error'); const users = getUsers(); if (users.find(u => u.nick === nick)) return showMsg('registerMsg', '?대? ?ъ슜 以묒씤 ?됰꽕?꾩엯?덈떎.', 'error'); users.push({ nick, pw, joinAt: new Date().toISOString() }); saveUsers(users); setSession(nick); showMsg('registerMsg', '媛???꾨즺! ?뙵 ?먮룞?쇰줈 ?대룞?⑸땲??..', 'success'); setTimeout(() => location.href = 'index.html', 1000); } // ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺 // 移댁뭅??/ 援ш? 怨듯넻 紐⑤떖 泥섎━ // ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺 let pendingSocialData = null; function showNickModal(data) { pendingSocialData = data; document.getElementById('nickModal').style.display = 'flex'; document.getElementById('socialNick').focus(); } function closeNickModal() { document.getElementById('nickModal').style.display = 'none'; pendingSocialData = null; } function submitSocialNick() { const nick = document.getElementById('socialNick').value.trim(); if (!nick || nick.length < 2 || nick.length > 10) { return showMsg('socialNickMsg', '?됰꽕?꾩? 2~10?먮줈 ?낅젰?댁＜?몄슂.', 'error'); } const users = getUsers(); if (users.find(u => u.nick === nick)) { return showMsg('socialNickMsg', '?대? ?ъ슜 以묒씤 ?됰꽕?꾩엯?덈떎.', 'error'); } // 媛??泥섎━ const newUser = { nick: nick, pw: null, type: pendingSocialData.type, social_id: pendingSocialData.id, email: pendingSocialData.email || null, joinAt: new Date().toISOString() }; users.push(newUser); saveUsers(users); setSession(nick); showMsg('socialNickMsg', '媛?낆쓣 ?섏쁺?⑸땲?? ?뙵', 'success'); setTimeout(() => location.href = 'index.html', 1000); } // ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺 // 移댁뭅??濡쒓렇?? // ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺 function kakaoLogin() { if (KAKAO_JS_KEY === 'YOUR_KAKAO_JS_KEY') { alert('移댁뭅??API ?ㅺ? ?꾩쭅 ?ㅼ젙?섏? ?딆븯?듬땲??\n移댁뭅??媛쒕컻?먯꽱??developers.kakao.com)?먯꽌 ?깆쓣 留뚮뱾怨?JavaScript ?ㅻ? ?낅젰?댁＜?몄슂.'); return; } if (!window.Kakao.isInitialized()) { Kakao.init(KAKAO_JS_KEY); } Kakao.Auth.login({ success: function(authObj) { Kakao.API.request({ url: '/v2/user/me', success: function(res) { const kakaoId = res.id; const kakaoNick = res.properties?.nickname; const users = getUsers(); // ?대? 媛?낅맂 移댁뭅???좎??몄? ?뺤씤 (ID 湲곗?, ????쇱튂 ?꾩닔) const existingUser = users.find(u => u.type === 'kakao' && String(u.social_id) === String(kakaoId)); if (existingUser) { setSession(existingUser.nick); showMsg('loginMsg', `${existingUser.nick}?? 移댁뭅?ㅻ줈 濡쒓렇?몃릺?덉뒿?덈떎! ?뙵`, 'success'); setTimeout(() => location.href = 'index.html', 800); } else { // ?덈줈???좎??쇰㈃ ?됰꽕???ㅼ젙 紐⑤떖 ?꾩슦湲? showNickModal({ type: 'kakao', id: kakaoId, name: kakaoNick }); } }, fail: function(err) { alert('?ъ슜???뺣낫 ?붿껌 ?ㅽ뙣: ' + JSON.stringify(err)); } }); }, fail: function(err) { alert('移댁뭅??濡쒓렇???ㅽ뙣: ' + JSON.stringify(err)); } }); } // ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺 // 援ш? 濡쒓렇?? // ?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺?곣봺 function googleLogin() { if (GOOGLE_CLIENT_ID === 'YOUR_GOOGLE_CLIENT_ID') { alert('援ш? ?대씪?댁뼵??ID媛 ?꾩쭅 ?ㅼ젙?섏? ?딆븯?듬땲??\nGoogle Cloud Console?먯꽌 OAuth ?먭꺽利앸챸??留뚮뱾怨??대씪?댁뼵??ID瑜??낅젰?댁＜?몄슂.'); return; } const client = google.accounts.oauth2.initTokenClient({ client_id: GOOGLE_CLIENT_ID, scope: 'profile email', callback: (tokenResponse) => { fetch('https://www.googleapis.com/oauth2/v3/userinfo', { headers: { Authorization: `Bearer ${tokenResponse.access_token}` } }) .then(r => r.json()) .then(info => { const googleEmail = info.email; const users = getUsers(); // ?대? 媛?낅맂 援ш? ?좎??몄? ?뺤씤 (ID ?먮뒗 Email 湲곗?) const existingUser = users.find(u => u.type === 'google' && (String(u.social_id) === String(info.sub) || u.email === googleEmail)); if (existingUser) { setSession(existingUser.nick); showMsg('loginMsg', `${existingUser.nick}?? 援ш?濡?濡쒓렇?몃릺?덉뒿?덈떎! ?뙵`, 'success'); setTimeout(() => location.href = 'index.html', 800); } else { // ?덈줈???좎??쇰㈃ ?됰꽕???ㅼ젙 紐⑤떖 ?꾩슦湲? showNickModal({ type: 'google', id: info.sub, email: googleEmail, name: info.name }); } }); } }); client.requestAccessToken(); } </script> <script src="https://tamjung.pe.kr/tracker.js" data-site="todak-community"></script> </body> </html>