feat: 깃허브로 회원가입 시 아이콘 반영

Author: moo1677

components/home/ProfileSection.tsx

@@ -1,6 +1,8 @@
+import Image from 'next/image';
 import { Profile } from '@/lib/home/profileService';
 import Card from './Card';
 import { getRandomProfileIcon } from '@/utils/getRandomProfileIcon';
+
 interface ProfileSectionProps {
   className?: string;
   profile: Profile | null;
@@ -9,12 +11,27 @@ interface ProfileSectionProps {
 
 const ProfileSection = ({ className, profile, uid }: ProfileSectionProps) => {
   const icon = getRandomProfileIcon(uid);
+  const avatarUrl = profile?.avatar_url;
+  console.log(avatarUrl);
+
   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 pt-1">
-            <span className="text-3xl">{icon}</span>
+            <span className="text-3xl">
+              {avatarUrl ? (
+                <Image
+                  src={avatarUrl}
+                  alt="profile avatar"
+                  width={50}
+                  height={50}
+                  className="h-full w-full object-cover"
+                />
+              ) : (
+                <span className="text-3xl">{icon}</span>
+              )}
+            </span>
           </div>
 
           <div>

lib/home/profileService.ts

@@ -7,6 +7,7 @@ export interface Profile {
   email: string;
   streakDays: number;
   tilCount: number;
+  avatar_url: string;
 }
 
 // 1. 유저 프로필 정보 가져오기

next.config.ts

@@ -1,7 +1,7 @@
 import type { NextConfig } from 'next';
 
 const nextConfig: NextConfig = {
-  /* config options here */
+  images: { domains: ['avatars.githubusercontent.com'] },
 };
 
 export default nextConfig;

services/auth/signup.service.ts

@@ -35,20 +35,19 @@ export const signupWithGithub = async () => {
 
   const info = getAdditionalUserInfo(result);
   const githubUsername = info?.username ?? null;
-
+  const avatar_url = info?.profile?.avatar_url;
+  console.log(info);
   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,
+      avatar_url: avatar_url,
     });
   }
   return user;