From 9c978f731691f76265f4ba5ee997c1e703eeee19 Mon Sep 17 00:00:00 2001 From: dsyoon Date: Sat, 7 Feb 2026 18:10:32 +0900 Subject: [PATCH] Redesign SNS quick login buttons MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Show Naver/Kakao/Google as circular icon buttons with a 'SNS 간편로그인' label, and toggle the group based on configured connections. Co-authored-by: Cursor --- index.html | 46 +++++++------------------- script.js | 2 ++ styles.css | 95 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 109 insertions(+), 34 deletions(-) diff --git a/index.html b/index.html index 67a8bb4..4408d45 100644 --- a/index.html +++ b/index.html @@ -71,40 +71,18 @@ 로그인 필요 - - - + diff --git a/script.js b/script.js index 927bfda..a229054 100644 --- a/script.js +++ b/script.js @@ -22,6 +22,7 @@ userText: document.getElementById("userText"), btnLogin: document.getElementById("btnLogin"), btnLogout: document.getElementById("btnLogout"), + snsLogin: document.getElementById("snsLogin"), btnGoogle: document.getElementById("btnGoogle"), btnKakao: document.getElementById("btnKakao"), btnNaver: document.getElementById("btnNaver"), @@ -463,6 +464,7 @@ if (el.btnGoogle) el.btnGoogle.hidden = !g; if (el.btnKakao) el.btnKakao.hidden = !k; if (el.btnNaver) el.btnNaver.hidden = !n; + if (el.snsLogin) el.snsLogin.hidden = !(g || k || n); } function applyManageLock() { diff --git a/styles.css b/styles.css index 9040c97..8f25b07 100644 --- a/styles.css +++ b/styles.css @@ -180,6 +180,101 @@ html[data-theme="light"] .topbar { border-color: rgba(3, 199, 90, 0.28); } +.sns-login { + display: inline-flex; + align-items: center; + gap: 10px; + padding: 8px 10px; + border-radius: 14px; + border: 1px solid var(--border); + background: rgba(255, 255, 255, 0.03); +} + +.sns-label { + font-size: 12px; + color: var(--muted2); + margin-right: 4px; + white-space: nowrap; +} + +.sns-btn { + width: 42px; + height: 42px; + border-radius: 999px; + border: 1px solid rgba(0, 0, 0, 0.08); + display: grid; + place-items: center; + cursor: pointer; + padding: 0; + user-select: none; + transition: transform 120ms ease, filter 120ms ease; +} + +.sns-btn:hover { + transform: translateY(-1px); + filter: brightness(1.02); +} + +.sns-btn:active { + transform: translateY(0); +} + +.sns-btn:focus-visible { + outline: none; + box-shadow: var(--focus); +} + +.sns-naver { + background: #03c75a; + border-color: rgba(3, 199, 90, 0.35); +} + +.sns-letter { + font-weight: 900; + font-size: 18px; + color: #fff; + letter-spacing: -0.02em; +} + +.sns-kakao { + background: #fae100; + border-color: rgba(250, 225, 0, 0.5); +} + +.sns-kakao-bubble { + width: 16px; + height: 13px; + background: rgba(0, 0, 0, 0.82); + border-radius: 6px; + position: relative; +} + +.sns-kakao-bubble::after { + content: ""; + position: absolute; + bottom: -4px; + left: 4px; + width: 0; + height: 0; + border: 4px solid transparent; + border-top-color: rgba(0, 0, 0, 0.82); +} + +.sns-google { + background: #ffffff; + border-color: rgba(66, 133, 244, 0.35); +} + +.sns-google-g { + font-weight: 900; + font-size: 18px; + background: conic-gradient(from 210deg, #ea4335 0 25%, #fbbc05 25% 50%, #34a853 50% 75%, #4285f4 75% 100%); + -webkit-background-clip: text; + background-clip: text; + color: transparent; + letter-spacing: -0.04em; +} + .user { display: inline-flex; align-items: center;