Merge pull request #20 from sean2337/feat/#11/socialLoginButton

Feat/#11/social login button

src/component/Img/LoginSpriteSvg.tsx

@@ -0,0 +1,10 @@
+import loginLogo from "@/assets/imgs/loginLogo.svg";
+import { loginType } from "@/types/loginType";
+
+const LoginSpriteSvg = ({ type }: loginType) => (
+  <svg width="1.8rem" height="1.833rem">
+    <use href={`${loginLogo}#${type}`} />
+  </svg>
+);
+
+export default LoginSpriteSvg;

src/component/button/SocialLoginButton.tsx

@@ -0,0 +1,36 @@
+import { css } from "@emotion/react";
+import { loginTypeProvider, loginBtnProps, backgroundColors } from "@/types/loginType";
+import LoginSpriteSvg from "../Img/LoginSpriteSvg";
+
+const SocialLoginButton = ({ type, handler }: loginBtnProps) => {
+  return (
+    <button
+      css={css`
+        width: 100%;
+        height: 4.8rem;
+        border-radius: 0.8rem;
+        background-color: ${backgroundColors[type]};
+        text-align: center;
+        position: relative;
+        border: ${type === "google" ? "0.01rem solid rgba(0, 0, 0, 0.08)" : "none"};
+      `}
+      onClick={() => {
+        handler();
+      }}
+    >
+      <div
+        css={css`
+          position: absolute;
+          left: 1.6rem;
+          top: 50%;
+          transform: translateY(-50%);
+        `}
+      >
+        <LoginSpriteSvg type={type} />
+      </div>
+      {loginTypeProvider[type]}로 로그인
+    </button>
+  );
+};
+
+export default SocialLoginButton;

src/style/global.css

@@ -1,9 +1,15 @@
 html {
-    font-size: 62.5%;
+  font-size: 62.5%;
 }
 
 body {
-    font-size: 1.5rem;
-    margin: 0;
-    padding: 0;
-}
+  font-size: 1.5rem;
+  margin: 0;
+  padding: 0;
+}
+
+button {
+  border: none;
+  outline: none;
+  user-select: none;
+}

src/types/loginType/index.tsx

@@ -0,0 +1,23 @@
+export const loginTypeProvider = {
+  apple: "애플",
+  google: "구글",
+  kakao: "카카오",
+};
+
+// FIXME : 버튼 색 수정 필요
+export const backgroundColors: Record<keyof typeof loginTypeProvider, string> = {
+  kakao: "#ffe400",
+  google: "#FFFFFF",
+  apple: "red",
+};
+
+type loginProvider = keyof typeof loginTypeProvider;
+
+export type loginType = {
+  type: loginProvider;
+};
+
+export type loginBtnProps = {
+  type: loginProvider;
+  handler: () => void;
+};