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
반응형
'IT 정보 > AI 활용 앱개발' 카테고리의 다른 글
[CoffeeDiary] EXPO CLI 를 활용한 앱 초기화 (1) | 2025.07.03 |
---|---|
[SecureGen] 기능 추가 - 앱 종료 확인 (0) | 2025.06.29 |
[SecureGen] 구글 플레이 앱 배포를 위한 비공개 테스트 (0) | 2025.06.29 |
[SecureGen] 앱 배포를 위한 aab 빌드 실행 (0) | 2025.06.27 |
[SecureGen] 기능 추가 - 앱 아이콘 적용 (0) | 2025.06.25 |