[FEAT] 공용 로그인 버튼 신규 생성

[baesee0806]

작업 대상

• 구글 로그인 버튼
• 깃헙 로그인 버튼

작업 내용

폴더

• 공용으로 사용할 컴포넌트 임으로 componens 폴더 안 loginBtns 폴더를 생성 하여서 진행 했습니다.
• 추후에 로그인 관련 버튼이 늘어날수 있다고 생각해서 loginBtns 라는 이름으로 생성 하였습니다.

컴포넌트

import React from 'react';
#1)
import * as S from './LoginBtn.styled';
import googleIcon from '../../assets/loginicon/google-icon.png';
import naverIcon from '../../assets/loginicon/naver-icon.png';
#2)
interface LoginBtnProps {
    type: string;
}
const LoginBtn = (props: LoginBtnProps) => {
#3)
    const handleLogin = () => {
        alert('로그인 되었습니다.');
    };
#4
    if (props.type === 'google') {
        return (
            <S.LoginButton onClick={handleLogin}>
                <S.LoginIcon src={googleIcon} alt="googleIcon" />
                <S.LoginText>Google 계정으로 로그인 하기</S.LoginText>
            </S.LoginButton>
        );
    }
    if (props.type === 'naver') {
        return (
            <S.LoginButton $type="naver" onClick={handleLogin}>
                <S.LoginIcon src={naverIcon} alt="naverIcon" />
                <S.LoginText $type="naver">네이버 계정으로 로그인 하기</S.LoginText>
            </S.LoginButton>
        );
    }
    return null;
};

export default LoginBtn;

• 1: import
  • LoginBtn.styled.ts 파일 안에 공용 로그인 버튼 emotion css 로직을 넣었고 S.###으로 스타일을 줬습니다.
  • 외부의 이미지를 다운받아서 사용하였고 assets/loginicon 파일 안에 넣어서 가져와서 사용하고 있습니다. 추후에 svg 이미지가 있다면 바꿀 예정입니다.
• 2: interface
  • 모든 중요 로직은 해당 컴포넌트 안에서 구현할 생각입니다. 이컴포넌트를 사용할때 간단하게 type 을 이용하여 해당 로그인 버튼을 사용하게 할생각입니다.
• 3: handleLogin
  • handleLogin 이라는 네이밍을 줬습니다. onClick 로그인 함수를 줬을때는 handle을 사용을 많이 한거 같습니다.혹시 다른 의견 있으시면 말씀 주시면 감사하겠습니다.
• 4: return
  • if를 이용하여 type네임에 따른 버튼을 리턴하게끔 구현하였습니다. 다른 방법이 있다면 말씀 주시면 생각을 해보도록 하겠습니다.

emotion css

import styled from '@emotion/styled';

const LoginButton = styled.button<{ $type?: string }>`
    display: flex;
    justify-content: center;
    align-items: center;
    width: 302px;
    height: 52px;
    border: none;
    background-color: ${(props) =>
        props.$type === 'naver' ? '#1EC800' : '#FFFFFF'};
    border-radius: 5px;
`;
const LoginIcon = styled.img`
    width: 24px;
    height: 24px;
`;
const LoginText = styled.p<{ $type?: string }>`
    font-size: 16px;
    margin-left: ${(props) => (props.$type === 'naver' ? '32px' : '22px')};
    color: ${(props) => (props.$type === 'naver' ? '#FFFFFF' : '#000000')};
`;

export { LoginButton, LoginIcon, LoginText };

• props($type)
• 해당 props를 사용하여 일단 두가지의 bgc color ml 을 나눴습니다. 추후에 다른 로그인 버튼이 생긴다면 해당 로직이 복잡해질거 같은데 다른 방법이 있을까요?