「NAVER IDへのログイン」ボタンを閉じる

環境:Realt、NodeJS、PostCSS

1.カスタム結果のプレビュー

(前)

(後)

2.方法

naverLogin.init()をすると、設定された({color: "green",type: 3,height: 55})スタイルの登録ボタンが発生します.
開発者ツールには、次のものが含まれています.

Customの流れは、

NAVERで作成したボタンをcss display:noneとして非表示にし、Customボタンで代用します.

userefを使用してCustomボタンをクリックすると、非表示のNAVERボタンのaラベルがクリックされます.

3.コード

// components/Naver/naver.jsx
import React, { useEffect, useRef } from 'react'
import * as config from '../../config';
import styles from './naver.module.css';

function Naver() {
    const naverRef = useRef();
    useEffect(() => {
        const naverScript = document.createElement("script");
        naverScript.src = "https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.2.js";
        naverScript.type = "text/javascript";
        document.head.appendChild(naverScript);

        naverScript.onload = () => {
            const naverLogin = new window.naver.LoginWithNaverId({
                clientId: config.NAVER_CLIENT,
                callbackUrl: "http://localhost:3000/oauth/callback/naver",
                callbackHandle: true,
                isPopup: false,
                loginButton: {
                    color: "green",
                    type: 3,
                    height: 55,
                }
            });
            naverLogin.init();
            naverLogin.logout(); //네이버 로그인이 계속 유지되는 경우가 있음, 초기화시 로그아웃
        }
    }, [])
    const handleClick = () => {
        naverRef.current.children[0].click();
    }
    return (
        <>
            <div ref={naverRef} id="naverIdLogin"></div>
            <button onClick={handleClick} className={styles.naver} >
                <img src="/images/naver.jpg" alt="naver" />
                Login with Naver
            </button>
        </>
    )
}

そして正式な書類のデザインガイドに従って造形して終わりました.🥳

// index.css
#naverIdLogin{
    display: none;
}

// components/Naver/naver.module.css
.naver{
    padding: 0.6em 1em;
    border-radius: 0.25em;
    font-size: 0.8rem;
    margin-top: 0.7em;
    display: flex;
    align-items: center;
    font-weight: 400;
    box-shadow: var(--shadow-1);
    background-color: #03C75A;
    color: white;
}
.naver img{
    height:0.9rem;
    margin-right: 0.7em;
    margin-left: 0.2em;
}