Feat/login 로그인 페이지 ui 및 파이어베이스 auth 연동

src/features/auth/hooks/useGithubLogin.ts

@@ -0,0 +1,53 @@
+import { signInWithPopup, fetchSignInMethodsForEmail } from "firebase/auth";
+import { useNavigate } from "react-router-dom";
+
+import { auth, githubProvider } from "@shared/firebase/firebase";
+
+// ✅ 반환 타입 명시
+const useGithubLogin = (): { githubLogin: () => Promise<void> } => {
+  const navigate = useNavigate();
+
+  // ✅ 함수 타입 명시
+  const githubLogin = async (): Promise<void> => {
+    try {
+      const result = await signInWithPopup(auth, githubProvider);
+      const user = result.user;
+
+      console.log("GitHub 로그인 성공: ", user);
+      navigate("/");
+    } catch (error: any) {
+      console.error("GitHub 로그인 실패: ", error);
+
+      if (error.code === "auth/account-exists-with-different-credential") {
+        const email = error.customData?.email;
+
+        if (email) {
+          const methods = await fetchSignInMethodsForEmail(auth, email);
+          console.warn("이미 가입된 로그인 방법:", methods);
+
+          if (methods.length > 0) {
+            if (methods.includes("google.com")) {
+              alert(
+                "이미 Google 계정으로 가입된 이메일입니다. Google 로그인을 이용해주세요."
+              );
+            } else {
+              alert(`이미 가입된 로그인 방법: ${methods.join(", ")}`);
+            }
+          } else {
+            alert(
+              "이미 다른 로그인 방법으로 가입된 이메일입니다. 다른 로그인 방법을 사용해주세요."
+            );
+          }
+        } else {
+          alert(
+            "이미 다른 로그인 방법으로 가입된 계정입니다. 이메일 정보를 가져올 수 없습니다."
+          );
+        }
+      }
+    }
+  };
+
+  return { githubLogin };
+};
+
+export { useGithubLogin };

src/features/auth/hooks/useGoogleLogin.ts

@@ -0,0 +1,24 @@
+import { signInWithPopup } from "firebase/auth";
+import { useNavigate } from "react-router-dom";
+
+import { auth, googleProvider } from "@shared/firebase/firebase";
+
+const useGoogleLogin = (): { googleLogin: () => Promise<void> } => {
+  const navigate = useNavigate();
+
+  const googleLogin = async (): Promise<void> => {
+    try {
+      const result = await signInWithPopup(auth, googleProvider);
+      const user = result.user;
+
+      console.log("Google 로그인 성공: ", user);
+      navigate("/");
+    } catch (error) {
+      console.error("Google 로그인 실패: ", error);
+    }
+  };
+
+  return { googleLogin };
+};
+
+export { useGoogleLogin };

src/features/auth/ui/LoginForm.tsx

@@ -0,0 +1,36 @@
+import { Divider } from "@mui/material";
+import type { JSX } from "react";
+
+import { useGithubLogin } from "@features/auth/hooks/useGithubLogin";
+import { useGoogleLogin } from "@features/auth/hooks/useGoogleLogin";
+import { LoginTitle } from "@features/auth/ui/LoginTitle";
+import { SignupGuide } from "@features/auth/ui/SignupGuide";
+import { SocialLoginButton } from "@features/auth/ui/SocialLoginButton";
+
+const LoginForm = (): JSX.Element => {
+  const { googleLogin } = useGoogleLogin();
+  const { githubLogin } = useGithubLogin();
+
+  return (
+    <>
+      <LoginTitle />
+
+      <SocialLoginButton
+        label="Google로 로그인"
+        logo="https://developers.google.com/identity/images/g-logo.png"
+        onClick={googleLogin}
+      />
+      <SocialLoginButton
+        label="GitHub로 로그인"
+        logo="https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
+        onClick={githubLogin}
+      />
+
+      <Divider sx={{ mb: 3 }}>또는</Divider>
+
+      <SignupGuide />
+    </>
+  );
+};
+
+export { LoginForm };

src/features/auth/ui/LoginTitle.tsx

@@ -0,0 +1,17 @@
+import { Typography } from "@mui/material";
+import type { JSX } from "react";
+
+const LoginTitle = (): JSX.Element => {
+  return (
+    <>
+      <Typography variant="h5" fontWeight={700} mb={3}>
+        로그인
+      </Typography>
+      <Typography variant="body2" mb={3} color="textSecondary">
+        소셜 계정으로 간편하게 시작하세요 ✨
+      </Typography>
+    </>
+  );
+};
+
+export { LoginTitle };

src/features/auth/ui/SignupGuide.tsx

@@ -0,0 +1,19 @@
+import { Typography } from "@mui/material";
+import type { JSX } from "react";
+
+const SignupGuide = (): JSX.Element => {
+  return (
+    <Typography variant="body2" color="textSecondary">
+      계정이 없으신가요?{" "}
+      <Typography
+        component="span"
+        color="primary"
+        sx={{ cursor: "pointer", fontWeight: 600 }}
+      >
+        회원가입하기 →
+      </Typography>
+    </Typography>
+  );
+};
+
+export { SignupGuide };

src/features/auth/ui/SocialLoginButton.tsx

@@ -0,0 +1,36 @@
+import { Button, styled } from "@mui/material";
+import type { JSX } from "react";
+
+interface SocialLoginButtonProps {
+  label: string;
+  logo: string;
+  onClick: () => void;
+}
+
+const SocialButton = styled(Button)({
+  width: "100%",
+  marginBottom: "16px",
+  textTransform: "none",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+});
+
+const SocialLoginButton = ({
+  label,
+  logo,
+  onClick,
+}: SocialLoginButtonProps): JSX.Element => {
+  return (
+    <SocialButton variant="outlined" onClick={onClick}>
+      <img
+        src={logo}
+        alt="Social Logo"
+        style={{ width: "18px", marginRight: "8px" }}
+      />
+      {label}
+    </SocialButton>
+  );
+};
+
+export { SocialLoginButton };

src/pages/home/ui/HomePage.tsx

@@ -1,6 +1,8 @@
 import type { JSX } from "react";
 
 const HomePage = (): JSX.Element => {
+  console.log("API_KEY: ", import.meta.env.VITE_API_KEY);
+
   return (
     <div>
       <h1>홈 페이지</h1>

src/pages/login/ui/LoginPage.tsx

@@ -1,7 +1,43 @@
+import { Box, Typography, styled } from "@mui/material";
 import type { JSX } from "react";
 
+import { LoginForm } from "@features/auth/ui/LoginForm";
+
+const PageWrapper = styled(Box)({
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  alignItems: "center",
+  minHeight: "100vh",
+  backgroundColor: "#f5f7fb",
+});
+
+const LoginBox = styled(Box)({
+  width: "100%",
+  maxWidth: "400px",
+  padding: "32px",
+  borderRadius: "12px",
+  backgroundColor: "#fff",
+  boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
+  textAlign: "center",
+});
+
 const LoginPage = (): JSX.Element => {
-  return <div>LoginPagesad</div>;
+  console.log("API_KEY: ", import.meta.env.VITE_API_KEY);
+  return (
+    <PageWrapper>
+      <Typography variant="h3" fontWeight={700} mb={1} color="#4F46E5B">
+        ⚡ 프로젝트 잼
+      </Typography>
+      <Typography variant="body1" mb={6} color="textSecondary">
+        함께 만들어가는 사이드 프로젝트
+      </Typography>
+
+      <LoginBox>
+        <LoginForm />
+      </LoginBox>
+    </PageWrapper>
+  );
 };
 
 export default LoginPage;

src/shared/firebase/firebase.ts

@@ -1,4 +1,5 @@
 import { initializeApp } from "firebase/app";
+import { getAuth, GoogleAuthProvider, GithubAuthProvider } from "firebase/auth";
 import { getFirestore } from "firebase/firestore/lite";
 
 const firebaseConfig = {
@@ -12,4 +13,9 @@ const firebaseConfig = {
 };
 
 const app = initializeApp(firebaseConfig);
+
+export const auth = getAuth(app);
+export const googleProvider = new GoogleAuthProvider();
+export const githubProvider = new GithubAuthProvider();
+
 export const db = getFirestore(app);