Skip to content

Donghee-Jang-123/dubai_cookie_app

BranchesTags

Repository files navigation

쫀쿠헌터 (Dubai Cookie Hunter) 🍪

Flutter Firebase Dart

두바이 쿠키(두쫀쿠) 맛집을 찾고 공유하는 플러터 기반 모바일 애플리케이션

주요 기능 • 설치 방법 • 사용법 • 기술 스택

📖 프로젝트 소개

쫀쿠헌터는 두바이 쿠키(두쫀쿠)를 판매하는 맛집을 발견하고, 리뷰와 사진을 공유할 수 있는 소셜 플랫폼입니다. 위치 기반 맛집 검색과 소셜 피드 기능을 결합하여 사용자들이 두바이 쿠키 경험을 나누고 소통할 수 있습니다.

두바이 쿠키란?

두바이 쿠키(두쫀쿠)는 최근 한국에서 큰 인기를 끌고 있는 디저트입니다. 이 앱은 두바이 쿠키 애호가들이 최고의 맛집을 찾을 수 있도록 도와줍니다!

✨ 주요 기능

🗺️ 맛집 발견

  • 위치 기반 검색 - 네이버 로컬 검색 API 활용
  • 실시간 거리 계산 - 현재 위치에서 맛집까지의 거리 자동 계산
  • 자동 이미지 로딩 - 맛집 사진 자동 수집
  • 역 지오코딩 - 상세한 주소 정보 표시
  • 평점과 상세 정보가 포함된 인터랙티브 맛집 카드

📱 소셜 피드

  • 그리드 기반 사진 피드 - 인스타그램과 유사한 UI
  • 두바이 쿠키 경험을 사진과 함께 공유
  • 게시물에 좋아요와 댓글 달기
  • 마음에 드는 게시물 북마크

✍️ 콘텐츠 작성

  • 여러 장의 사진과 함께 게시물 업로드
  • 게시물에 맛집 태그하기
  • 상세한 설명 작성
  • 갤러리에서 이미지 선택

👤 사용자 프로필

  • 닉네임과 소개글이 포함된 개인화된 프로필
  • 프로필 사진 업로드
  • 내가 작성한 게시물과 북마크한 콘텐츠 확인
  • 나만의 두바이 쿠키 여정 기록

🎨 아름다운 UI/UX

  • 커스텀 마스코트 애니메이션 (MascotHello.gif, MascotBounce.gif)
  • 부드러운 온보딩 경험
  • 쿠키 테마에 맞는 갈색/크림색 컬러 스킴
  • 커스텀 SVG 아이콘
  • Material Design 3 적용

🛠️ 기술 스택

프론트엔드

  • Flutter - 크로스 플랫폼 모바일 프레임워크
  • Dart - 프로그래밍 언어
  • flutter_svg - 커스텀 아이콘용 SVG 렌더링
  • image_picker - 이미지 선택 기능
  • geolocator - 위치 서비스
  • permission_handler - 런타임 권한 관리

백엔드 & 서비스

  • Firebase Core - Firebase 초기화
  • Cloud Firestore - 게시물, 댓글, 좋아요를 위한 NoSQL 데이터베이스
  • Firebase Storage - 이미지 저장소
  • Firebase Cloud Functions - 서버리스 API 엔드포인트
  • Naver API - 로컬 검색 및 이미지 검색
  • Naver Cloud Platform - 역 지오코딩

아키텍처

  • MVC 패턴 - Model-View-Controller 아키텍처
  • 서비스 레이어 - 비즈니스 로직 분리
  • 레포지토리 패턴 - 데이터 접근 추상화

📂 프로젝트 구조

dubai_cookie_app/
├── lib/
│   ├── main.dart                      # 앱 진입점
│   ├── firebase_options.dart          # Firebase 설정
│   ├── model/                         # 데이터 모델
│   │   ├── appuser.dart              # 사용자 모델
│   │   ├── comment.dart              # 댓글 모델
│   │   ├── like.dart                 # 좋아요 모델
│   │   ├── post.dart                 # 게시물 모델
│   │   └── restaurant.dart           # 맛집 모델
│   ├── screen/                        # UI 화면
│   │   ├── onboarding_screen.dart    # 환영 화면
│   │   ├── login_screen.dart         # 인증
│   │   ├── profile_setup_screen.dart # 프로필 생성
│   │   ├── store_list_tab.dart       # 맛집 목록
│   │   ├── grid_feed_tab.dart        # 소셜 피드
│   │   ├── upload_tab.dart           # 게시물 작성
│   │   ├── profile_tab.dart          # 사용자 프로필
│   │   ├── detail_screen.dart        # 게시물 상세
│   │   └── Profiletab/
│   │       ├── posts_grid_tab.dart   # 내 게시물
│   │       └── bookmarks_tab.dart    # 저장한 게시물
│   └── services/                      # 비즈니스 로직
│       ├── auth_service.dart         # 인증
│       ├── naver_api_service.dart    # 네이버 API 통합
│       └── post_service.dart         # 게시물 관리
├── functions/                         # Firebase Cloud Functions
│   ├── index.js                      # 메인 함수
│   ├── test_api.js                   # API 테스트
│   └── .env                          # API 키 (커밋 안 됨)
├── assets/
│   ├── animations/                   # GIF 애니메이션
│   │   ├── MascotHello.gif
│   │   ├── MascotBounce.gif
│   │   └── bounce.gif
│   └── icons/                        # 커스텀 아이콘
│       └── ic_store_case.svg
├── android/                          # 안드로이드 설정
├── ios/                              # iOS 설정
└── pubspec.yaml                      # 의존성

📋 사전 요구사항

시작하기 전에 다음 항목들이 설치되어 있는지 확인하세요:

  • Flutter SDK (>=3.0.0)
  • Dart SDK (>=3.0.0)
  • Android Studio / Xcode (모바일 개발용)
  • Node.js (Firebase Cloud Functions용)
  • Firebase CLI (npm install -g firebase-tools)
  • Git

필요한 API 키

다음 API 자격 증명을 발급받아야 합니다:

  1. Firebase 프로젝트 - Firebase Console
  2. 네이버 개발자 API (검색) - 네이버 개발자 센터
  3. 네이버 클라우드 플랫폼 API (지도) - 네이버 클라우드

🚀 설치 방법

1. 저장소 클론

git clone https://github.com/yourusername/dubai_cookie_app.git
cd dubai_cookie_app

2. Flutter 의존성 설치

flutter pub get

3. Firebase Functions 의존성 설치

cd functions
npm install
cd ..

4. Firebase 설정

a. Firebase 프로젝트 생성

  1. Firebase Console로 이동
  2. 새 프로젝트 생성
  3. 다음 서비스들을 활성화:
    • Authentication (익명/이메일)
    • Cloud Firestore
    • Cloud Storage
    • Cloud Functions

b. FlutterFire 구성

# FlutterFire CLI 설치
dart pub global activate flutterfire_cli

# Flutter 앱에 Firebase 구성
flutterfire configure

이 명령은 자동으로 lib/firebase_options.dart 파일을 생성합니다.

c. Firestore 보안 규칙 설정

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /users/{userId} {
      allow read: if true;
      allow write: if request.auth != null && request.auth.uid == userId;
    }

    match /posts/{postId} {
      allow read: if true;
      allow create: if request.auth != null;
      allow update, delete: if request.auth != null &&
        request.auth.uid == resource.data.userId;
    }

    match /comments/{commentId} {
      allow read: if true;
      allow create: if request.auth != null;
      allow delete: if request.auth != null &&
        request.auth.uid == resource.data.userId;
    }

    match /likes/{likeId} {
      allow read: if true;
      allow write: if request.auth != null;
    }
  }
}

d. Storage 보안 규칙 설정

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /posts/{allPaths=**} {
      allow read: if true;
      allow write: if request.auth != null;
    }
    match /profile_images/{allPaths=**} {
      allow read: if true;
      allow write: if request.auth != null;
    }
  }
}

5. API 키 설정

a. functions/.env 파일 생성

cd functions

다음 내용으로 .env 파일을 생성하세요:

# 네이버 개발자 API (로컬 검색용)
NAVER_SEARCH_CLIENT_ID=your_naver_search_client_id
NAVER_SEARCH_CLIENT_SECRET=your_naver_search_client_secret

# 네이버 클라우드 플랫폼 (역 지오코딩용)
NCLOUD_CLIENT_ID=your_ncloud_client_id
NCLOUD_CLIENT_SECRET=your_ncloud_client_secret

b. Firebase Functions Config 설정 (프로덕션용)

firebase functions:config:set \
  naver.search_client_id="your_naver_search_client_id" \
  naver.search_client_secret="your_naver_search_client_secret" \
  ncloud.client_id="your_ncloud_client_id" \
  ncloud.client_secret="your_ncloud_client_secret"

6. Firebase Functions 배포

cd functions
firebase deploy --only functions
cd ..

7. 앱 실행

# 안드로이드용
flutter run

# iOS용
flutter run --no-sound-null-safety

# 특정 기기에서 실행
flutter devices  # 사용 가능한 기기 목록 확인
flutter run -d <device_id>

📱 사용법

첫 실행

  1. 온보딩 화면 - 마스코트 애니메이션이 있는 환영 화면
  2. 로그인 - 계정 로그인 또는 생성
  3. 프로필 설정 - 닉네임, 소개글, 프로필 사진 설정

주요 기능 사용

🗺️ 맛집 탭

  • 근처의 두바이 쿠키 맛집 확인
  • 맛집을 탭하여 상세 정보 보기
  • 현재 위치에서의 거리 자동 계산
  • 맛집 이미지 자동 로딩

📸 피드 탭

  • 다른 사용자들의 게시물 탐색
  • 게시물을 탭하여 상세 내용 보기
  • 하트 아이콘을 탭하여 좋아요 누르기
  • 게시물에 댓글 달기

✍️ 글쓰기 탭

  • 편집 아이콘을 탭하여 새 게시물 작성
  • 갤러리에서 여러 이미지 선택
  • 설명 추가
  • 맛집 태그 (선택사항)
  • 커뮤니티에 공유

👤 프로필 탭

  • 내 게시물 확인
  • 북마크한 게시물 확인
  • 프로필 정보 수정

🔑 API 설정 가이드

네이버 API 키 발급하기

1. 네이버 개발자 센터 (로컬 검색)

  1. 네이버 개발자 센터 방문
  2. 로그인/회원가입
  3. "애플리케이션" → "애플리케이션 등록" 이동
  4. API 선택: 지역 검색, 이미지 검색
  5. Client ID와 Client Secret 복사

2. 네이버 클라우드 플랫폼 (역 지오코딩)

  1. 네이버 클라우드 플랫폼 방문
  2. 로그인/회원가입
  3. 콘솔 → AI·NAVER API → Maps로 이동
  4. Reverse Geocoding API 활성화
  5. 인증 키 생성
  6. Client ID와 Client Secret 복사

🧪 테스트

유닛 테스트 실행

flutter test

Firebase Functions 로컬 테스트

cd functions
node test_api.js  # 네이버 API 통합 테스트
node test_api2.js # 추가 API 테스트

🏗️ 프로덕션 빌드

안드로이드

flutter build apk --release  # APK 파일용
flutter build appbundle      # Play Store용

iOS

flutter build ios --release

두바이 쿠키를 사랑하는 마음으로 만들었습니다 ❤️

⭐ 도움이 되셨다면 이 저장소에 별을 눌러주세요!

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

1 star

Watchers

0 watching

Forks

0 forks
Report repository

Releases

No releases published

Packages

 
 
 

Contributors

Languages