위시리스트 프로젝트, 사용자 인증 및 공유 기능 구현 진행

오늘은 위시리스트 앱에 사용자별 개인 리스트 관리 및 공유 기능을 도입하는 작업을 진행했습니다. Firebase Authentication을 활용한 Google 소셜 로그인 기능을 구현하고, Firestore 데이터 구조를 사용자별로 분리했습니다. 또한, 리스트 공유 및 열람 기능을 위한 UI와 로직을 구축했습니다.

🛠️ 오늘 구현 및 해결한 주요 내용

  1. Firebase 인증 설정 및 UI 통합:
    • firebase.js에 Firebase Authentication 모듈(getAuth, GoogleAuthProvider)을 초기화하고 export 했습니다.
    • App.js에서 onAuthStateChanged를 사용하여 사용자 로그인 상태(currentUser)를 전역적으로 관리하고, 이를 Header 및 MainContent 컴포넌트에 props로 전달했습니다.
    • Header.js에 로그인 상태에 따라 “Sign In with Google” / “Sign Out” 버튼을 조건부 렌더링하도록 구현했습니다.
  2. 리스트 공유 및 열람 기능 초기 구현:
    • Header.js에 “Share” 및 “Enter Code” 버튼을 추가하고, 각 버튼 클릭 시 모달 창이 열리도록 기본 UI를 구성했습니다.
    • Header.js에 공유 코드 생성(generateShareCode) 및 조회(handleViewCode) 로직을 구현했습니다.
      • 공유 코드는 사용자별로 고정된 코드를 생성/재사용하도록 로직을 개선했습니다.
      • 생성된 코드는 Firestore의 shareCodes 컬렉션에 저장되며, 해당 사용자의 UID와 연결됩니다.
      • 공유 코드를 통해 리스트를 열람할 때, MainContent.js가 해당 사용자의 데이터를 불러오도록 App.js에 viewingUserId 상태를 추가하고 관리했습니다.
    • Header.js에 “My List” 버튼을 추가하여 공유 리스트를 보다가 자신의 리스트로 돌아올 수 있도록 했습니다.
    • MainContent.js, CategoryCard.js, ItemRow.js에 isReadOnly prop을 추가하여, 공유 리스트 열람 시 수정 기능을 비활성화하도록 구현했습니다.
  3. Firestore 보안 규칙 업데이트:
    • 사용자별 데이터 접근 제어 및 공유 기능 구현을 위해 Firestore 보안 규칙을 여러 차례 수정했습니다.
      • users/{userId} 문서에 대한 read, write 권한을 로그인한 사용자 본인에게 부여했습니다.
      • users/{userId}/{document=**} 하위 컬렉션에 대한 read, write 권한을 로그인한 사용자 본인에게 부여하고, isPubliclyViewable: true인 경우 read 권한을 모든 사용자에게 허용했습니다.
      • shareCodes 컬렉션에 대한 get 권한은 모든 사용자에게, create 권한은 로그인한 사용자에게 부여했습니다.

🐛 발생한 문제 및 임시 조치

  • auth/configuration-not-found 에러: .env.local 파일의 환경 변수 설정 및 Firebase Google 로그인 제공업체 활성화 문제로 확인되어 해결했습니다.
  • auth/operation-not-allowed 에러: Google Cloud OAuth 동의 화면의 테스트 사용자 설정 문제로 확인되어 해결했습니다.
  • Missing or insufficient permissions 에러 (지속): 로그인 후 “Share” 버튼 클릭 시 users/{userId} 문서에 isPubliclyViewable 필드를 업데이트하는 과정에서 지속적으로 권한 에러가 발생했습니다. Firestore 보안 규칙 및 코드 로직을 여러 차례 검토하고 디버깅을 시도했으나, 근본적인 원인을 파악하지 못했습니다.
    • 임시 조치: 문제 해결에 시간이 소요됨에 따라, 현재로서는 “Share” 버튼의 기능을 일시적으로 비활성화하고 사용자에게 알림 메시지를 표시하도록 처리했습니다.

🚀 다음 목표

  • “Share” 기능의 Missing or insufficient permissions 에러의 근본적인 원인을 파악하고 해결하여 기능을 완전히 활성화합니다.
  • 아이템 상세 정보 추가 (URL, 가격, 메모, 이미지 등) 기능을 구현합니다.

오늘도 많은 도전이 있었지만, 중요한 기능들을 구현하고 문제 해결을 위해 노력했습니다.