IT 정보/AI 활용 앱개발

[CoffeeDiary] 두번째 앱 개발 설계

Dalyoung 2025. 7. 3. 23:31
728x90
반응형

 

 

커피 다이어리 설계서


1. 개요

가까운 카페를 방문할 때마다 사진·이름·주소·평점·후기를 기록하고, 리스트와 지도에서 관리할 수 있는 React Native 앱입니다.
로컬 우선 저장 방식으로 빠르게 기록하고, 필요시 클라우드 동기화 옵션을 제공합니다.


2. 핵심 기능

2.1 카페 기록 관리

  • 사진 업로드 및 촬영 (Expo Image Picker)
  • 카페 이름·주소 입력 또는 자동 완성(Google Places API)
  • 별점(1~5점) 선택 및 방문 일자 등록
  • 자유 후기 텍스트 입력

2.2 기록 뷰

  • 리스트 뷰: 방문 순 또는 평점순 정렬
  • 지도 뷰: react-native-maps 기반 핀 표시
  • 즐겨찾기 토글로 중요 카페 관리

2.3 검색 및 필터

  • 이름 키워드 검색
  • 지역 반경 필터(지도 중심 기준)
  • 평점별 체크박스 필터

2.4 데이터 저장

  • 로컬 우선: AsyncStorage에 전체 데이터 보관
  • 선택적 클라우드 동기화: Firebase Firestore 연동
  • 오프라인 시 로컬 조작, 온라인으로 복귀 시 동기화

2.5 상세 편집 기능

  • 기존 기록 수정 및 삭제
  • 추가 사진 업로드
  • 별도 삭제 확인 다이얼로그

3. 화면 흐름

[온보딩] ──> [로그인/게스트 선택] ──> [메인 탭 네비게이션]
                                              ├── [리스트 탭]
                                              │       └ + 버튼 → [카페 추가 화면]
                                              ├── [지도 탭]
                                              │       └ 핀 터치 → [카페 상세 화면]
                                              ├── [즐겨찾기 탭]
                                              └── [설정 탭]
                                                        ├ 동기화 토글
                                                        └ 백업·복구

[카페 추가 화면] ── 저장 ──> [리스트 탭]
[카페 상세 화면]
      ├ 수정 ──> [카페 추가 화면]
      └ 삭제 ──> [리스트 탭]

[검색/필터 모달]  
  ├ 이름 입력  
  ├ 반경 슬라이더  
  └ 평점 체크박스  

4. 화면별 구성

화면 주요 컴포넌트 주요 액션

온보딩 로고, 소개 텍스트, 시작 버튼 시작 버튼 터치 → 로그인/게스트 선택
로그인/게스트 선택 Firebase Auth 입력 폼 or 게스트 진입 버튼 로그인 완료 → 메인 진입
메인 탭 네비게이션 BottomTabNavigator (리스트∙지도∙즐겨찾기∙설정) 탭 전환
리스트 탭 FlatList, 검색 바, + 버튼 아이템 터치 → 상세, + 버튼 → 추가 화면
지도 탭 MapView, Marker 핀 터치 → 상세
즐겨찾기 탭 FlatList (즐겨찾기 필터 적용) 아이템 터치 → 상세
설정 탭 동기화 토글, 백업·복구 버튼 토글 변경, 백업/복구 실행
카페 추가 화면 ImagePicker, TextInput(이름·주소), DatePicker, Rating 저장 → 로컬/클라우드 저장 후 리스트 복귀
카페 상세 화면 ImageCarousel, 텍스트 정보, 수정·삭제 버튼 수정/삭제 처리 후 리스트 갱신
검색/필터 모달 TextInput, Slider, CheckBox 필터 적용 → 리스트/지도 갱신

5. 제안 폴더 구조

src/
├ components/        # 공통 UI 컴포넌트
├ hooks/             # 커스텀 훅(useCafes, useSync 등)
├ navigation/        # React Navigation 설정
├ screens/           # 각 화면 컴포넌트
│   ├ Onboarding.js
│   ├ Auth.js
│   ├ MainTab.js
│   ├ ListScreen.js
│   ├ MapScreen.js
│   ├ FavoritesScreen.js
│   ├ SettingsScreen.js
│   ├ AddCafeScreen.js
│   └ CafeDetailScreen.js
├ services/          # AsyncStorage, Firestore 연동 로직
└ utils/             # 상수, 헬퍼 함수

위 설계를 바탕으로 Figma 등으로 상세 UI를 그려 보시고, Expo CLI로 빠르게 프로토타입을 시작해 보세요. 필요시 추가 조언 드리겠습니다.

 

 

728x90
반응형