Merge branch 'dev' into feature/plan-management-page

Author: GamjaIsMine02

api/signup.api.ts

@@ -119,6 +119,7 @@ const Page = () => {
       <ProfileSection
         className="grid grid-cols-1 gap-4 md:grid-cols-3"
         profile={profile}
+        uid={currentUser.uid}
       />
 
       {/* 2-2. GraphSection */}

app/(with-sidebar)/(home)/page.tsx

@@ -5,14 +5,10 @@ import { FaGithub } from 'react-icons/fa';
 import Button from '@/components/auth/Button';
 import Link from 'next/link';
 import { auth } from '@/lib/firebase';
-import {
-  GithubAuthProvider,
-  signInWithEmailAndPassword,
-  signInWithPopup,
-  UserCredential,
-} from 'firebase/auth';
+import { signInWithEmailAndPassword } from 'firebase/auth';
 import { useRouter } from 'next/navigation';
 import { useState } from 'react';
+import { signupWithGithub } from '@/services/auth/signup.service';
 
 type LoginFormProps = {
   handleOpenModal: () => void;
@@ -26,20 +22,17 @@ const LoginForm = ({ handleOpenModal }: LoginFormProps) => {
 
   const router = useRouter();
 
-  const githubProvider = new GithubAuthProvider();
-
   const handleGithubLogin = async () => {
+    if (isLoading) return;
+    setIsLoading(true);
+    setError('');
     try {
-      const result: UserCredential = await signInWithPopup(
-        auth,
-        githubProvider
-      );
-      const user = result.user;
-      // console.log('로그인 성공 : ', user);
+      await signupWithGithub();
       router.push('/');
     } catch (err: unknown) {
-      if (err instanceof Error) {
-      }
+      setError('Github 로그인에 실패했습니다.');
+    } finally {
+      setIsLoading(false);
     }
   };
 

components/auth/LoginForm.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link';
 import FormField from '@/components/auth/FormField';
 import { SignupValues, useSignupForm } from './useSignupForm';
 import { useRouter } from 'next/navigation';
-import { signupWithEmail } from '@/api/signup.api';
+import { signupWithEmail } from '@/services/auth/signup.service';
 
 const toPayload = (v: SignupValues) => ({
   nickname: v.nickname,

components/auth/SignupForm/SignupForm.tsx

@@ -24,7 +24,7 @@ const ButtonSection = ({ onAddTodo }: ButtonSectionProps) => {
         onClick={handleAddClick}
         className="flex-1 rounded-xl border border-slate-300 bg-none py-4 text-center text-base font-semibold text-slate-700 transition hover:bg-slate-200 active:bg-slate-300 disabled:cursor-not-allowed disabled:opacity-60"
       >
-        계획 추가하기
+        플랜 추가하기
       </button>
     </div>
   );

components/home/ButtonSection.tsx

@@ -1,18 +1,20 @@
 import { Profile } from '@/lib/home/profileService';
 import Card from './Card';
-
+import { getRandomProfileIcon } from '@/utils/getRandomProfileIcon';
 interface ProfileSectionProps {
   className?: string;
   profile: Profile | null;
+  uid: string;
 }
 
-const ProfileSection = ({ className, profile }: ProfileSectionProps) => {
+const ProfileSection = ({ className, profile, uid }: ProfileSectionProps) => {
+  const icon = getRandomProfileIcon(uid);
   return (
     <div className={className}>
       <div className="md:col-span-2">
         <Card className="flex items-center gap-4">
-          <div className="flex h-16 w-16 items-center justify-center overflow-hidden rounded-full border border-gray-100 bg-purple-100">
-            <span className="text-3xl">😈</span>
+          <div className="flex h-16 w-16 items-center justify-center overflow-hidden rounded-full border border-gray-100 bg-purple-100 pt-1">
+            <span className="text-3xl">{icon}</span>
           </div>
 
           <div>

components/home/ProfileSection.tsx

@@ -0,0 +1,55 @@
+import { auth, db } from '@/lib/firebase';
+import {
+  createUserWithEmailAndPassword,
+  updateProfile,
+  GithubAuthProvider,
+  signInWithPopup,
+  getAdditionalUserInfo,
+} from 'firebase/auth';
+import { getDoc, doc, serverTimestamp, setDoc } from 'firebase/firestore';
+
+export type SignupPayload = {
+  nickname: string;
+  email: string;
+  password: string;
+};
+
+export const signupWithEmail = async (p: SignupPayload) => {
+  const cred = await createUserWithEmailAndPassword(auth, p.email, p.password);
+  await updateProfile(cred.user, { displayName: p.nickname });
+  await setDoc(doc(db, 'users', cred.user.uid), {
+    nickname: p.nickname,
+    email: p.email,
+    createdAt: serverTimestamp(),
+    streakDays: 0,
+    tilCount: 0,
+  });
+  return cred.user;
+};
+
+export const signupWithGithub = async () => {
+  const provider = new GithubAuthProvider();
+
+  const result = await signInWithPopup(auth, provider);
+  const user = result.user;
+
+  const info = getAdditionalUserInfo(result);
+  const githubUsername = info?.username ?? null;
+
+  const userRef = doc(db, 'users', user.uid);
+  const snap = await getDoc(userRef);
+
+  if (!snap.exists()) {
+    await setDoc(userRef, {
+      userId: user.uid,
+      nickname: user.displayName ?? githubUsername ?? '익명',
+      email: user.email ?? '',
+      provider: 'github.com',
+      githubUsername,
+      createdAt: serverTimestamp(),
+      streakDays: 0,
+      tilCount: 0,
+    });
+  }
+  return user;
+};

services/auth/signup.service.ts

@@ -0,0 +1,25 @@
+const PROFILE_ICONS = [
+  '🌱',
+  '🔥',
+  '😎',
+  '😈',
+  '🖤',
+  '💀',
+  '⚡',
+  '🌸',
+  '🐣',
+] as const;
+
+export type ProfileIcon = (typeof PROFILE_ICONS)[number];
+
+export function getRandomProfileIcon(seed: string): ProfileIcon {
+  let hash = 0;
+
+  for (let i = 0; i < seed.length; i++) {
+    hash = (hash << 5) - hash + seed.charCodeAt(i);
+    hash |= 0; // 32bit
+  }
+
+  const index = Math.abs(hash) % PROFILE_ICONS.length;
+  return PROFILE_ICONS[index];
+}