Merge pull request #6 from Team-Stracker/feature/5-signin-login

Feature/5 signin login

Author: seungw0o

apps/web/.gitignore

@@ -39,3 +39,4 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+stracker-f4063-firebase-adminsdk-fbsvc-674bfb32c4.json

apps/web/firebase.ts

@@ -0,0 +1,20 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import { getAuth } from "firebase/auth";
+import { getFirestore } from "firebase/firestore";
+
+const firebaseConfig = {
+  apiKey: "AIzaSyA3blhKo9IqKm2jQ1fsxhHrO0IAxzs_Owg",
+  authDomain: "stracker-f4063.firebaseapp.com",
+  projectId: "stracker-f4063",
+  storageBucket: "stracker-f4063.firebasestorage.app",
+  messagingSenderId: "227885045962",
+  appId: "1:227885045962:web:438fedd95199df6cd8fc33",
+  measurementId: "G-F0WYN2556J",
+};
+
+// Initialize Firebase
+export const app = initializeApp(firebaseConfig);
+
+export const auth = getAuth(app);
+export const db = getFirestore(app);

apps/web/package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@stracker/design-token": "workspace:^",
     "clsx": "^2.1.1",
+    "firebase": "^11.9.0",
     "next": "^14.1.0",
     "tailwindcss": "^3.4.1"
   },

apps/web/src/apis/getMajorTechs.ts

@@ -0,0 +1,37 @@
+import { getFirestore, doc, getDoc } from "firebase/firestore";
+import { app } from "../../firebase";
+
+const db = getFirestore(app);
+
+export const getMajorTechs = async (major: string): Promise<string[]> => {
+  try {
+    const docRef = doc(db, "majors", major);
+    const docSnap = await getDoc(docRef);
+
+    if (!docSnap.exists()) {
+      console.warn("해당 전공이 존재하지 않습니다:", major);
+      return [];
+    }
+
+    const data = docSnap.data();
+    console.log("Firestore에서 가져온 데이터:", data);
+
+    // techs 대신 stacks 필드 사용
+    const stacks = data?.stacks;
+
+    if (!stacks) {
+      console.warn("stacks 필드가 없습니다.");
+      return [];
+    }
+
+    if (!Array.isArray(stacks)) {
+      console.warn("stacks 필드가 배열이 아닙니다:", stacks);
+      return [];
+    }
+
+    return stacks;
+  } catch (error) {
+    console.error("getMajorTechs 에러:", error);
+    return [];
+  }
+};

apps/web/src/apis/getUserTech.ts

@@ -0,0 +1,15 @@
+import { getFirestore, doc, getDoc } from "firebase/firestore";
+import { User } from "firebase/auth"; // User 타입 받을거임
+
+export const getUserTech = async (user: User) => {
+  const db = getFirestore();
+  const userDocRef = doc(db, "users", user.uid);
+  const userDoc = await getDoc(userDocRef);
+
+  if (!userDoc.exists()) {
+    throw new Error("유저 문서 없음");
+  }
+
+  const data = userDoc.data();
+  return data.tech;
+};

apps/web/src/apis/googleSearchApi.ts

@@ -0,0 +1,23 @@
+import axios from "axios";
+
+const apiKey = "AIzaSyDuV_hSFc-6-C1uq4sBxnvlyE4J3vVpkuk";
+const cx = "25ec413420f26414b";
+
+export const googleSearchAPI = async (query: string) => {
+  const url = `https://www.googleapis.com/customsearch/v1?key=${apiKey}&cx=${cx}&q=${query}`;
+
+  try {
+    const res = await axios.get(url);
+    const items = res.data.items || [];
+
+    // 결과 출력 (샘플)
+    return items.map((item: any) => ({
+      title: item.title,
+      link: item.link,
+      snippet: item.snippet,
+    }));
+  } catch (err) {
+    console.error("구글 검색 에러:", err);
+    return [];
+  }
+};

apps/web/src/apis/logIn.ts

@@ -0,0 +1,24 @@
+import { signInWithEmailAndPassword } from "firebase/auth";
+import { auth } from "../../firebase";
+
+export const logIn = async ({
+  email,
+  password,
+}: {
+  email: string;
+  password: string;
+}) => {
+  try {
+    const userCredential = await signInWithEmailAndPassword(
+      auth,
+      email,
+      password,
+    );
+    const user = userCredential.user;
+
+    console.log("로그인 성공");
+  } catch (err) {
+    console.error("로그인 실패:", err);
+    throw err;
+  }
+};

apps/web/src/apis/logOut.ts

@@ -0,0 +1,11 @@
+import { signOut } from "firebase/auth";
+import { auth } from "../../firebase";
+
+export const logOut = async () => {
+  try {
+    await signOut(auth);
+    console.log("로그아웃 성공");
+  } catch (err) {
+    console.error("로그아웃 실패:", err);
+  }
+};

apps/web/src/apis/signIn.ts

@@ -0,0 +1,35 @@
+import { createUserWithEmailAndPassword } from "firebase/auth";
+import { doc, setDoc } from "firebase/firestore";
+import { auth } from "../../firebase";
+import { db } from "../../firebase";
+
+interface SignUpParams {
+  email: string;
+  password: string;
+  id: string;
+  tech: string;
+}
+
+export const signIn = async ({ email, password, id, tech }: SignUpParams) => {
+  try {
+    const userCredential = await createUserWithEmailAndPassword(
+      auth,
+      email,
+      password,
+    );
+    const user = userCredential.user;
+
+    await setDoc(doc(db, "users", user.uid), {
+      uid: user.uid,
+      email: user.email,
+      id,
+      tech,
+      createdAt: new Date(),
+    });
+
+    console.log("회원가입 및 유저 정보 저장 완료");
+  } catch (err) {
+    console.error("회원가입 실패:", err);
+    throw err;
+  }
+};

apps/web/src/app/login/page.tsx

@@ -1,26 +1,49 @@
+"use client";
 import { Button, Input } from "@web/components";
+import { useState } from "react";
+import { logIn } from "@web/apis/logIn";
+import { useRouter } from "next/navigation";
 
 const loginPage = () => {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+
+  const router = useRouter();
+
+  const onSubmit = () => {
+    logIn({ email, password });
+    router.push("/");
+  };
+
   return (
     <div className="flex flex-col items-center justify-center h-screen">
       <div className="border border-solid border-zinc-200  w-[30rem] h-au rounded-3xl flex flex-col gap-10 px-6 pt-5 pb-4">
         <div className="flex flex-col gap-8">
           <img src="/assets/Logo.svg" className="w-[6rem]" />
           <div className="flex flex-col items-center justify-center gap-4">
             <Input
-              label="아이디"
-              placeholder="아이디를 입력해주세요.."
+              label="이메일"
+              placeholder="이메일을 입력해주세요.."
               type="text"
+              onChange={(e) => setEmail(e.target.value)}
+              value={email}
             />
             <Input
               label="비밀번호"
               placeholder="비밀번호를 입력해주세요.."
               type="password"
+              onChange={(e) => setPassword(e.target.value)}
+              value={password}
             />
           </div>
         </div>
         <div className="flex flex-col items-center justify-center gap-5">
-          <Button size="large" backColor="blue" borderColor="blue">
+          <Button
+            size="large"
+            backColor="blue"
+            borderColor="blue"
+            onClick={onSubmit}
+          >
             로그인
           </Button>
           <div className="text-b1 flex items-center">