๐ ์์ ๋ก๊ทธ์ธ ๋ฒํผ ๋ง๋ค๊ธฐ
์์ ๋ก๊ทธ์ธ ๋ฒํผ ๋ง๋ค์๋ ๋ฐฉ๋ฒ ๋ฐ ๋ฆฌํฉํ ๋ง ํ๊ธฐ์ ๋ํด์ ๊ธ์ ์จ๋ณด๊ณ ์ ํฉ๋๋ค.
์ฐ์ ์ ๊ฐ ํ๊ณ ์ถ์ ๊ฑฐ๋ ๊ฐ ๋ฒํผ์ ๊ดํ ์์ฑ์ ๋ฏธ๋ฆฌ ๋ง๋ค์ ๋๊ณ , ๊ทธ ์ปดํฌ๋ํธ์์ 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;
}
`;
๊ธฐ๋ณธ ๋ฒํผ์ ์์ ๊ณ ๊ฐ ๋ชจ๋๊ฐ์ ํ์ ์์ฑ์ผ๋ก ๋ฐ์์ ์ฒ๋ฆฌํ ์ ์๋๋ก ๋ก์ง์ ๋ณ๊ฒฝ ํ์ต๋๋ค.
์ด์ ๊ฐ๊ฐ ์ต์ ๋ค์ ๊ฐ์ฒด๋ก ๋บ๊ธฐ ๋๋ฌธ์ , ์ฃผ์ ๋ฉ์ธ๋ก์ง ๋ถ๋ถ์ด ์ง์ ๋ถ ํ์ง ์๊ณ ๊น๋ํ๊ฒ ์ ์ฉ๋ ๊ฑธ ๋ณผ ์ ์์ต๋๋ค.
๐ํ๊ธฐ
์ง์ ๋ถ ํ๋ ์ฝ๋๊ฐ ํจ์ฌ ๊ฐ๋ ์ฑ ์ข๊ณ ๊น๋ํ๊ฒ ์ ๋ฆฌ๋์ด์ ๊ธฐ๋ถ์ด ์ข์๋ ๋ฆฌํฉํ ๋ง ์ ๋๋ค ~ !!
๋ํ , ์ฃผ๋ณ ๋๋ฃ ๊ฐ๋ฐ์๋ค ํํ ์ฝ๋๋ฅผ ๋ณด์ฌ์คฌ์ ๊ฒฝ์ฐ ํจ์ฌ ๊ฐ๊ฒฐํ๊ณ ๊น๋ํ๋ค๋ ๋๋์ ๋ฐ๋๋ค๋ ํ์ ๋ค์ ์ ์์์ต๋๋ค !!
'FrontEnd > React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[React] CAGํ๋ก์ ํธ SEO ๊ฐ์ ํ๊ธฐ (0) | 2022.12.27 |
---|---|
[React] SOLID ์์น ์ ์ฉ ์ปดํฌ๋ํธ ๋ฆฌํฉํ ๋ง (0) | 2022.11.25 |
[React] Vite SVG ์ปดํฌ๋ํธ๋ก ๋ถ๋ฌ์ค๊ธฐ (TypeScript ์ค์ ์ถ๊ฐ) (0) | 2022.07.25 |
[React] Styled Component ํ์ฉํด์ ์ปดํฌ๋ํธ ์ฌ์ฌ์ฉ ํ ํ๊ธฐ (0) | 2022.07.07 |
cannot appear as a descendant of ์๋ฌ (0) | 2022.02.26 |