Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 1x 1x 1x 1x | import React from 'react';
import styled from 'styled-components';
import Image from 'next/image';
import useSocialLogin from '@lib/hooks/useSocialLogin';
export interface SignUpPageProps {
type: 'signup' | 'signin';
redirectUrl: string;
anonymousToken?: string;
isDevelopment: boolean;
}
export default function OAuthButtonBar({
type,
redirectUrl,
anonymousToken,
isDevelopment
}: SignUpPageProps) {
const { handleClickNaver, handleClickApple, handleClickKakao, handleClickFacebook } =
useSocialLogin({ type, redirectUrl, anonymousToken, isDevelopment });
return (
<OauthButtonContainer>
<OauthButtonWrap>
<OauthButton type="button" onClick={handleClickNaver}>
<Image src="/logo-naver.svg" width={56} height={56} alt="naver 로그인" />
<div style={{ display: 'none' }} id="naver_id_login" />
</OauthButton>
</OauthButtonWrap>
<OauthButtonWrap>
<OauthButton type="button" onClick={handleClickKakao}>
<Image src="/logo-kakao.svg" width={56} height={56} alt="kakao 로그인" />
</OauthButton>
</OauthButtonWrap>
<OauthButtonWrap>
<OauthButton type="button" onClick={handleClickApple}>
<Image src="/logo-apple.svg" width={56} height={56} alt="apple 로그인" />
</OauthButton>
</OauthButtonWrap>
<OauthButtonWrap>
<OauthButton type="button" onClick={handleClickFacebook}>
<Image src="/logo-facebook.svg" width={56} height={56} alt="facebook 로그인" />
</OauthButton>
</OauthButtonWrap>
</OauthButtonContainer>
);
}
const OauthButtonContainer = styled.div`
width: 100%;
display: flex;
justify-content: center;
`;
const OauthButtonWrap = styled.div`
margin-left: 1%;
margin-right: 1%;
button {
background-color: Transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
}
`;
const OauthButton = styled.button`
cursor: pointer;
`;
|