[React] 모드 값에 따른 소셜 로그인 버튼 만들기 (+리팩토링)

📌 소셜 로그인 버튼 만들기 

소셜 로그인 버튼 만들었던 방법 및 리팩토링 후기에 대해서 글을 써보고자 합니다.

 

우선 제가 하고 싶은 거는 각 버튼에 관한 속성을 미리 만들엇 놓고 , 그 컴포넌트에서 mode값을 토대로 

원하는 소셜 로그인 버튼을 받는 것을 하고 싶었습니다. 

 

준비물 

• React
• styled-components
• 원하는 소셜 로그인 아이콘 

 

처음에 내가 작성한 코드 

import styled from "styled-components";
import { SocialIcons } from "src/assets/images/SocialIcons";
import { ButtonHTMLAttributes } from "react";

interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
  width?: number;
  height?: number;
  bgColor?: string;
  color?: string;
  borderRadius?: number;
  mode?: "kakao" | "google" | "naver" | "github" | "facebook";
  onClick?: () => void;
}

const SocialLoginButton = ({ mode, children, ...props }: Props) => {
  if (mode === "kakao") {
    return (
      <Button {...props} bgColor="#F8DF02" onClick={props.onClick}>
        <img src={SocialIcons.kakaoLogo} alt="kakaoLogoIcons" />
        <span>{children}</span>
      </Button>
    );
  }
  if (mode === "naver") {
    return (
      <Button
        {...props}
        bgColor="#39B35D"
        color="white"
        onClick={props.onClick}
      >
        <img src={SocialIcons.naverLogo} alt="kakaoLogoIcons" />
        <span>{children}</span>
      </Button>
    );
  }
  if (mode === "google") {
    return (
      <Button {...props} bgColor="#EAEDEF" onClick={props.onClick}>
        <img src={SocialIcons.googleLogo} alt="kakaoLogoIcons" />
        <span>{children}</span>
      </Button>
    );
  }
  if (mode === "facebook") {
    return (
      <Button
        {...props}
        bgColor="#4267B2"
        color="white"
        onClick={props.onClick}
      >
        <img src={SocialIcons.facebookLogo} alt="kakaoLogoIcons" />
        <span>{children}</span>
      </Button>
    );
  }
  if (mode === "github") {
    return (
      <Button
        {...props}
        bgColor="#222222"
        color="white"
        onClick={props.onClick}
      >
        <img src={SocialIcons.githubLogo} alt="kakaoLogoIcons" />
        <span>{children}</span>
      </Button>
    );
  }
  return (
    <Button {...props} bgColor="black" color="white">
      <span>{children ?? "Login"}</span>
    </Button>
  );
};

export default SocialLoginButton;

const Button = styled.button<Props>`
  margin: 0.3rem 0rem;
  position: relative;
  width: ${(props) => props.width ?? "20"}rem;
  height: ${(props) => props.height ?? "3"}rem;
  background-color: ${(props) => props.bgColor ?? "skyblue"};
  color: ${(props) => props.color ?? "black"};
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  cursor: pointer;
  font-weight: bold;
  border-radius: ${(props) => props.borderRadius ?? 0}rem;
  & > img {
    padding-right: 0.5rem;
    width: 20px;
    height: 20px;
    left: 0;
    margin-left: 20px;
    position: absolute;
  }
  & > span {
    padding-left: 0.5rem;
  }
`;

처음에 제가 각 모드 값에 따라서 짠 코드 입니다. 

간략하게 설명을 하자면 , 각각 css 속성값을 받아서 스타일드 컴포넌트 props로 넘겨줘서 커스텀을 할 수 있도록 했고 , 

각각 모드 값을 받아서 그 모드에 해당하는 버튼 컴포넌트가 리턴될 수 있도록 코드를 작성 했습니다.

 

하지만 코드를 보다 보면 , 중복되는 부분이 많고 메인 로직 코드가 잘 읽혀지지 않는 것을 볼 수 있습니다.

 

그러면 이걸 어떻게 해결해야 하나의 컴포넌트에서 중복되지 않고 , 각각 모드 값을 받아서 처리할 수 있을까요 ? 

 

저는 유튜브에서 밤마다 라이브 코딩을 하시는 벨로퍼트 김민준님 라이브 방송을 보다 영감을 받아서 리팩토링을 해봤는데요 . 

각각 mode값에 해당하는 값들을 미리 객체로 지정해 놓고 , 그 객체를 꺼내서 사용하는 방법 입니다.. ! ! 

 

리팩토링 결과를 봐볼가요 ? 

 

import styled from "styled-components";
import { SocialIcons } from "src/assets/images/SocialIcons";
import { ButtonHTMLAttributes } from "react";

interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
  children: React.ReactNode;
  width?: number;
  height?: number;
  bgColor?: string;
  color?: string;
  borderRadius?: number;
  mode: "kakao" | "google" | "naver" | "github" | "facebook";
  onClick?: () => void;
}

interface SocialType {
  bgColor: string;
  color: string;
  logoIcon: string;
}

interface SocialIconsOptionType {
  [key: string]: SocialType;
}

const SocialLoginOption: SocialIconsOptionType = {
  kakao: {
    bgColor: "#F8DF02",
    color: "black",
    logoIcon: SocialIcons.kakaoLogo,
  },
  naver: {
    bgColor: "#39B35D",
    color: "white",
    logoIcon: SocialIcons.naverLogo,
  },
  google: {
    bgColor: "#EAEDEF",
    color: "black",
    logoIcon: SocialIcons.googleLogo,
  },
  facebook: {
    bgColor: "#4267B2",
    color: "white",
    logoIcon: SocialIcons.facebookLogo,
  },
  github: {
    bgColor: "#222222",
    color: "white",
    logoIcon: SocialIcons.githubLogo,
  },
};

const SocialLoginButton = ({ mode, children, ...props }: Props) => {
  const { bgColor, color, logoIcon } = SocialLoginOption[mode];
  return (
    <Button
      {...props}
      bgColor={bgColor}
      color={color}
      onClick={props.onClick}
      mode={mode}
    >
      <img src={logoIcon} alt="kakaoLogoIcons" />
      <span>{children}</span>
    </Button>
  );
};

export default SocialLoginButton;

const Button = styled.button<Props>`
  margin: 0.3rem 0rem;
  position: relative;
  width: ${(props) => props.width ?? "20"}rem;
  height: ${(props) => props.height ?? "3"}rem;
  background-color: ${(props) => props.bgColor ?? "skyblue"};
  color: ${(props) => props.color ?? "black"};
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  cursor: pointer;
  font-weight: bold;
  border-radius: ${(props) => props.borderRadius ?? 0}rem;
  & > img {
    padding-right: 0.5rem;
    width: 20px;
    height: 20px;
    left: 0;
    margin-left: 20px;
    position: absolute;
  }
  & > span {
    padding-left: 0.5rem;
  }
`;

기본 버튼을 없애고 각 모드값을 필수 속성으로 받아서 처리할 수 있도록 로직을 변경 했습니다.

이제 각각 옵션들을 객체로 뺐기 때문에 , 주요 메인로직 부분이 지저분 하지 않고 깔끔하게 적용된 걸 볼 수 있습니다. 

 

📍후기

지저분 했던 코드가 훨씬 가독성 좋고 깔끔하게 정리되어서 기분이 좋았던 리팩토링 입니다 ~ !! 

또한 , 주변 동료 개발자들 한테 코드를 보여줬을 경우 훨씬 간결하고 깔끔하다는 느낌을 받는다는 평을 들을 수 있었습니다 !!