AI 기능 추가로 서비스에 날개 달기

# Firebase Console에서:
1. Authentication 메뉴 이동
2. 'Get started' 클릭
3. Sign-in method 탭에서 원하는 로그인 방법 활성화:
   - Google (OAuth 2.0)
   - Email/Password
   - 기타 소셜 로그인 (Facebook, Twitter 등)

# Firebase Console에서 Google 설정:
1. Google 로그인 방법 활성화
2. 프로젝트 지원 이메일 설정
3. OAuth 동의 화면 구성 (선택사항)

# 웹 앱에서 사용할 설정 정보 확인:
- Web client ID
- Web client secret (자동 관리됨)

// lib/firebase.js - Firebase 초기화
import { initializeApp } from 'firebase/app';
import { getAuth, GoogleAuthProvider } from 'firebase/auth';

const firebaseConfig = {
  // Firebase 설정
};

const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const googleProvider = new GoogleAuthProvider();

// components/Login.js
import { signInWithPopup, signOut } from 'firebase/auth';
import { auth, googleProvider } from '../lib/firebase';
import { useAuthState } from 'react-firebase-hooks/auth';

const Login = () => {
  const [user, loading, error] = useAuthState(auth);
  
  const signInWithGoogle = async () => {
    try {
      await signInWithPopup(auth, googleProvider);
    } catch (error) {
      console.error('로그인 실패:', error);
    }
  };
  
  const logOut = () => {
    signOut(auth);
  };
  
  if (loading) return <div>로딩 중...</div>;
  
  return (
    <div>
      {user ? (
        <div>
          <p>안녕하세요, {user.displayName}님!</p>
          <img src={user.photoURL} alt="프로필" />
          <button onClick={logOut}>로그아웃</button>
        </div>
      ) : (
        <button onClick={signInWithGoogle}>
          Google로 로그인
        </button>
      )}
    </div>
  );
};

// 사용자별 Firestore 데이터 구조
// /users/{userId}/todos/{todoId}

import { doc, collection, addDoc, query, where, getDocs } from 'firebase/firestore';
import { db } from '../lib/firebase';

// 사용자별 TODO 저장
const addUserTodo = async (userId, todoData) => {
  const userTodosRef = collection(db, 'users', userId, 'todos');
  await addDoc(userTodosRef, {
    ...todoData,
    createdAt: new Date(),
    userId: userId
  });
};

// 사용자 TODO 목록 가져오기
const getUserTodos = async (userId) => {
  const userTodosRef = collection(db, 'users', userId, 'todos');
  const snapshot = await getDocs(userTodosRef);
  return snapshot.docs.map(doc => ({
    id: doc.id,
    ...doc.data()
  }));
};

// 컴포넌트에서 사용
const TodoList = () => {
  const [user] = useAuthState(auth);
  const [todos, setTodos] = useState([]);
  
  useEffect(() => {
    if (user) {
      getUserTodos(user.uid).then(setTodos);
    }
  }, [user]);
  
  const handleAddTodo = async (todoText) => {
    if (user) {
      await addUserTodo(user.uid, { text: todoText, completed: false });
      // TODO 목록 새로고침
      const updatedTodos = await getUserTodos(user.uid);
      setTodos(updatedTodos);
    }
  };
  
  if (!user) {
    return <Login />;
  }
  
  return (
    <div>
      <h2>{user.displayName}님의 TODO 리스트</h2>
      {/* TODO 목록 렌더링 */}
    </div>
  );
};

// firestore.rules
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    // 사용자는 자신의 데이터만 읽고 쓸 수 있음
    match /users/{userId}/{document=**} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
    
    // 공개 데이터 (필요시)
    match /public/{document=**} {
      allow read: if true;
      allow write: if request.auth != null;
    }
  }
}