[RM-41]마이페이지 userInfo

src/components/Common/Input/types.ts

@@ -11,6 +11,7 @@ export interface InputProps {
 export const labels: { [key: string]: string } = {
   id: "아이디",
   name: "이름",
+  displayName: "이름",
   email: "이메일",
   phone: "전화번호",
   password: "비밀번호",

src/components/MyPage/UserInfo/index.tsx

@@ -1,4 +1,5 @@
-import React, { ChangeEvent, useState } from "react";
+import React, { ChangeEvent, useState, useContext } from "react";
+import AuthContext from "context/AuthContext";
 import Input from "../Input";
 import { UserInfoProps } from "./types";
 import { getAuth, deleteUser } from "firebase/auth";
@@ -14,6 +15,11 @@ const UserInfo = () => {
     password: "",
     passwordCheck: "",
   });
+
+  const { user } = useContext(AuthContext);
+
+  console.log(user);
+
   const auth = getAuth(app);
   const router = useRouter();
 

src/context/AuthContext.tsx

@@ -0,0 +1,34 @@
+import React, { ReactNode, createContext, useEffect, useState } from "react";
+import { User, getAuth, onAuthStateChanged } from "firebase/auth";
+import { app } from "firebaseApp";
+
+interface AuthProps {
+  children: ReactNode;
+}
+
+const AuthContext = createContext({
+  user: null as User | null,
+});
+
+export const AuthContextProvider = ({ children }: AuthProps) => {
+  const auth = getAuth(app);
+  const [currentUser, setCurrentUser] = useState<User | null>(null);
+
+  useEffect(() => {
+    onAuthStateChanged(auth, (user) => {
+      if (user) {
+        setCurrentUser(user);
+      } else {
+        setCurrentUser(user);
+      }
+    });
+  }, [auth]);
+
+  return (
+    <AuthContext.Provider value={{ user: currentUser }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};
+
+export default AuthContext;

src/firebaseApp.ts

@@ -1,5 +1,6 @@
 // Import the functions you need from the SDKs you need
 import { initializeApp, FirebaseApp, getApp } from "firebase/app";
+import { getFirestore } from "firebase/firestore";
 // import { getAnalytics } from "firebase/analytics";
 
 export let app: FirebaseApp;
@@ -24,4 +25,5 @@ try {
 const firebase = initializeApp(firebaseConfig);
 // const analytics = getAnalytics(firebase);
 
+export const db = getFirestore(app);
 export default firebase;

src/index.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { BrowserRouter as Router } from "react-router-dom";
+import { AuthContextProvider } from "context/AuthContext";
 import App from "./pages/App";
 import firebase from "./firebaseApp";
 import "../src/styles/global.css";
@@ -15,11 +16,13 @@ if (rootElement) {
   const root = ReactDOM.createRoot(rootElement);
   root.render(
     <React.StrictMode>
-      <SectionProvider>
-        <Router>
-          <App />
-        </Router>
-      </SectionProvider>
+      <AuthContextProvider>
+        <SectionProvider>
+          <Router>
+            <App />
+          </Router>
+        </SectionProvider>
+      </AuthContextProvider>
     </React.StrictMode>,
   );
 } else {

src/pages/SignupPage/index.tsx

@@ -1,10 +1,11 @@
-import { getAuth, createUserWithEmailAndPassword } from "firebase/auth";
+import { getAuth, createUserWithEmailAndPassword, updateProfile } from "firebase/auth";
 import React, { useState, ChangeEvent, FormEvent } from "react";
+import { collection, addDoc } from "firebase/firestore";
 import { toast } from "react-toastify";
 import { InputProps } from "../../components/Common/Input/types";
 import Input from "../../components/Common/Input";
 import { useRouter } from "../routing";
-import { app } from "../../firebaseApp";
+import { app, db } from "../../firebaseApp";
 
 function SignupPage() {
   const [registerError, setRegisterError] = useState<string>("");
@@ -33,7 +34,7 @@ function SignupPage() {
     if (targetId === "name") {
       const nameRegex = /^[가-힣a-zA-Z]+$/;
 
-      if (!nameRegex.test(targetId) || credentials.name.length < 1) {
+      if (!nameRegex.test(value) || value.length < 1) {
         setErrors({ ...errors, name: "올바른 이름을 입력해주세요." });
       } else {
         setErrors({ ...errors, name: "" });
@@ -74,19 +75,26 @@ function SignupPage() {
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     console.log("Form Submitted:", credentials);
-    const { email, password } = credentials;
-
+    const { name, email, password } = credentials;
+  
     try {
       const auth = getAuth(app);
-      await createUserWithEmailAndPassword(auth, email, password);
-
+      const userCredential = await createUserWithEmailAndPassword(auth, email, password);
+
+      await addDoc(collection(db, "userInfo"), {
+        name: name,
+        email: email,
+        registrationDate: new Date()
+      });
+
       toast.success("회원가입에 성공했습니다.");
       router.push("/login");
     } catch (error: any) {
       handleFirebaseError(error);
       console.log(error);
     }
   };
+
 
   function handleFirebaseError(error: { code: string; message: string }) {
     let message = "";