diff --git a/src/assets/imgs/loginLogo.svg b/src/assets/imgs/loginLogo.svg
new file mode 100644
index 00000000..ec5f8590
--- /dev/null
+++ b/src/assets/imgs/loginLogo.svg
@@ -0,0 +1,22 @@
+
diff --git a/src/component/Img/LoginSpriteSvg.tsx b/src/component/Img/LoginSpriteSvg.tsx
new file mode 100644
index 00000000..7e01c6c9
--- /dev/null
+++ b/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) => (
+
+);
+
+export default LoginSpriteSvg;
diff --git a/src/component/button/SocialLoginButton.tsx b/src/component/button/SocialLoginButton.tsx
new file mode 100644
index 00000000..5dbd9c4d
--- /dev/null
+++ b/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 (
+
+ );
+};
+
+export default SocialLoginButton;
diff --git a/src/style/global.css b/src/style/global.css
index 8f951830..343f77f8 100644
--- a/src/style/global.css
+++ b/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;
-}
\ No newline at end of file
+ font-size: 1.5rem;
+ margin: 0;
+ padding: 0;
+}
+
+button {
+ border: none;
+ outline: none;
+ user-select: none;
+}
diff --git a/src/types/loginType/index.tsx b/src/types/loginType/index.tsx
new file mode 100644
index 00000000..78dc6643
--- /dev/null
+++ b/src/types/loginType/index.tsx
@@ -0,0 +1,23 @@
+export const loginTypeProvider = {
+ apple: "애플",
+ google: "구글",
+ kakao: "카카오",
+};
+
+// FIXME : 버튼 색 수정 필요
+export const backgroundColors: Record = {
+ kakao: "#ffe400",
+ google: "#FFFFFF",
+ apple: "red",
+};
+
+type loginProvider = keyof typeof loginTypeProvider;
+
+export type loginType = {
+ type: loginProvider;
+};
+
+export type loginBtnProps = {
+ type: loginProvider;
+ handler: () => void;
+};