공통 컴포넌트 개발 - 로그인 버튼

 

 

공통 컴포넌트, 로그인 버튼 개발 과정

디자이너분께 Login/Join 파트의 모바일 디자인을 적응형에서 반응형으로 수정 요청을 드렸고, 수정될 때까지 지금 당장 할 수 있는 공통 컴포넌트를 먼저 개발하기로 했다.
FE 3명으로 구성된 우리 팀은 역할을 나눠 개발에 들어갔다.

LoginButton 초기 디자인은 왼쪽 사진과 같았으나, 
디자이너분이 오른쪽 사진으로 수정하셨고, 코드도 수정해서 PR 했다.
수정한 코드를 통해 공통 컴포넌트 개발을 어떻게 진행했는지 간단하게 기록한다.

왼쪽 : 수정 전 / 오른쪽 : 수정 후

LoginButton 컴포넌트 구현

• src/components/common/LoginButton.jsx 

'LoginButton.jsx' 는 다양한 플랫폼(카카오, 네이버, 구글)에 맞춘 로그인 버튼을 제공하는 재사용 가능한 React 컴포넌트로, 'styled-components' 라이브러리를 사용하여 스타일을 적용했고 전달받은 'platform' prop에 따라 조건부로 스타일을 적용한다.

icon prop은 버튼 안에 표시될 아이콘을 나타낸다.

조건부 스타일링 : platform에 따라 'LoginBtn'의 스타일이 다르게 적용된다.
코드를 보면, 'platform'이 'kakao'일 경우 배경색이 노란색('background-color: #fee500')으로 설정된다. 

 

import styled from "styled-components";

const LoginButton = ({ icon, platform }) => {
    return <LoginBtn $platform={platform}>{icon}</LoginBtn>;
};

const LoginBtn = styled.button`
    margin-right: 23px;
    border-radius: 40px;
    width: 60px;
    height: 60px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    /* "platform" prop에 따라 조건부 스타일 */
    ${({ $platform }) =>
        $platform === "kakao" &&
        `
        background-color: #fee500;
        border: none;
    `}
    ${({ $platform, theme }) =>
        $platform === "naver" &&
        `
        background-color: #03c75a;
        color: ${theme.colors.white};
        border: none;
    `}
    ${({ $platform, theme }) =>
        $platform === "google" &&
        `
        background-color: ${theme.colors.white};
        border: 1px solid #D4D4D4;
    `}
`;

export default LoginButton;

 

모듈 관리

• src/components/common/index.js

'LoginButton'을 다른 파일에서 쉽게 import 할 수 있도록 내보내는 역할을 한다.

아래의 테스트 코드, 'Example.jsx' 에서 'LoginButton'을 직접 '../components/common/LoginButton' 에서 import하는 대신, 
'../components/common' 경로로 import 할 수 있다.
이 방식은 모듈 관리와 코드 구조를 더 깔끔하게 유지하는 데 도움이 된다.

export { default as LoginButton } from "../common/LoginButton";

 

테스크 코드

• src/routes/Example.jsx

'Example.jsx'는 'LoginButton' 컴포넌트를 사용하여 카카오, 네이버, 구글 로그인 버튼을 화면에 표시한다.
공통 컴포넌트를 개발할 때 테스트 코드를 활용했다.

import styled from "styled-components";
import { LoginButton } from "../components/common";
import { naverIcon, kakaoIcon, googleIcon } from "../assets/icons";

function Example() {
    return (
        <LoginSection>
            <LoginButton
                platform="kakao"
                icon={<img src={kakaoIcon} alt="Kakao Icon" />}
            />
            <LoginButton
                platform="naver"
                icon={<img src={naverIcon} alt="Naver Icon" />}
            />
            <LoginButton
                platform="google"
                icon={<img src={googleIcon} alt="Google Icon" />}
            />
        </LoginSection>
    );
}

const LoginSection = styled.div`
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
`;

export default Example;