Taba는 편지를 통해 감정을 나누는 모바일 애플리케이션입니다. 친구와 편지를 주고받으며 꽃다발을 키우고, 하늘에 떠다니는 편지 씨앗을 잡아 꽃을 피워보세요.
- iOS
- Android
- 한국어 (기본)
- 영어 (English)
- 일본어 (日本語)
- 스플래시 화면 (
SplashScreen) - 인증 화면 (
LoginScreen,SignupScreen,ForgotPasswordScreen) - 튜토리얼 화면 (
TutorialScreen) - 메인 셸 (
MainShell)- 하늘 화면 (
SkyScreen) - 꽃다발 화면 (
BouquetScreen) - 설정 화면 (
SettingsScreen)
- 하늘 화면 (
- 편지 작성 화면 (
WriteLetterPage) - 편지 상세 화면 (
LetterDetailScreen)
- Repository:
DataRepository- 비즈니스 로직 및 데이터 변환 - Services: API 통신 담당
AuthService: 인증LetterService: 편지 CRUDFriendService: 친구 관리BouquetService: 친구 편지 목록FileService: 파일 업로드NotificationService: 알림UserService: 사용자 정보InviteCodeService: 초대 코드SettingsService: 설정FcmService: 푸시 알림
화면: LoginScreen
기능:
- 이메일과 비밀번호로 로그인
- 로그인 성공 시 FCM 토큰 자동 등록
- 로그인 실패 시 에러 메시지 표시
API: POST /auth/login
상태 관리:
- 로그인 성공 시
MainShell로 이동 - 인증 실패 시 에러 메시지 표시
화면: SignupScreen
기능:
- 이메일, 비밀번호, 닉네임 입력
- 이용약관 및 개인정보처리방침 동의 (필수)
- 이메일 중복 확인
- 비밀번호 유효성 검증
- 회원가입 성공 시 자동 로그인
API: POST /auth/signup
검증 규칙:
- 이메일: 유효한 이메일 형식
- 비밀번호: 최소 8자 이상
- 닉네임: 1자 이상
화면: ForgotPasswordScreen
기능:
- 이메일 입력
- 비밀번호 재설정 링크 전송
- 성공 메시지 표시
API: POST /auth/forgot-password
화면: SettingsScreen
기능:
- 로그아웃 확인 다이얼로그
- 로그아웃 시 토큰 삭제
- 로그인 화면으로 이동
API: POST /auth/logout
화면: WriteLetterPage
주요 기능:
- 제목 입력 (필수)
- 본문 입력 (필수)
- 제목/본문 모두 입력되어야 "씨앗 뿌리기" 버튼 활성화
- 8가지 레트로 스타일 템플릿 제공:
- 네온 그리드 (neon_grid)
- 레트로 페이퍼 (retro_paper)
- 민트 터미널 (mint_terminal)
- 홀로 퍼플 (holo_purple)
- 픽셀 블루 (pixel_blue)
- 선셋 그리드 (sunset_grid)
- 사이버 그린 (cyber_green)
- 매트릭스 다크 (matrix_dark)
- 템플릿별 배경색, 텍스트 색상 적용
- 언어별 레트로 폰트 지원:
- 한국어: Jua, Noto Sans KR
- 영어: Press Start 2P, VT323, IBM Plex Mono, Bungee, Indie Flower
- 일본어: DotGothic16, Kosugi Maru, Yomogi
- 선택한 폰트에 따라 자동으로 언어 정보(
language) 설정 (ko, en, ja)
- 여러 장의 사진 첨부 가능
- 이미지 선택 시 하단에 미리보기 표시 (60x60)
- 각 이미지별 삭제 버튼 제공
- 이미지 업로드 실패 시 에러 메시지 표시
- 업로드된 이미지 URL을 편지에 첨부
- 공개 편지 (
PUBLIC): 모든 사용자가 볼 수 있는 편지 - 친구에게 (
DIRECT): 특정 친구에게만 보내는 편지- 친구 선택: 가로 스크롤 가능한 친구 목록
- 선택된 친구는 카드 형태로 표시
- "씨앗 뿌리기" 버튼 클릭
- 전송 중 로딩 인디케이터 표시
- 이미지 업로드 → 편지 생성 순서로 진행
- 성공 시 목록 화면 자동 새로고침
- 실패 시 에러 메시지 표시
API:
POST /files(이미지 업로드)POST /letters(편지 작성)
특수 케이스:
- 꽃다발 화면에서 편지 작성 시:
- 선택된 친구로 자동 설정
- 공개/친구 선택 UI 숨김
- 자동으로
DIRECTvisibility 설정
화면: LetterDetailScreen → WriteLetterPage
기능:
- 편지 상세 화면에서 "답장하기" 버튼 클릭
- 답장 편지 작성 화면으로 이동
- 원본 편지 정보 자동 설정
- 답장은 자동으로
DIRECTvisibility로 설정 (서버 처리) - 답장 성공 시 편지 목록 새로고침
API: POST /letters/{letterId}/reply
제한사항:
- 내가 작성한 편지에는 답장 버튼 표시 안 함
- 친구에게 보낸 편지에만 답장 가능
화면: SkyScreen
주요 기능:
- 페이지별로 10개씩 표시
PageView를 사용한 스와이프 네비게이션- 각 편지 카드:
- 발신자 프로필 이미지 (기본값: 이니셜)
- 발신자 닉네임
- 편지 제목
- 편지 미리보기
- 발송 시간
- 설정 화면에서 선택한 언어 필터 적용
- 기본값: 모든 언어 (ko, en, ja)
- 필터 변경 시 목록 자동 새로고침
- 필터 설정은 로컬 저장소에 저장
- 마지막 페이지 도달 시 다음 페이지 자동 로드
PageResponse.last필드를 사용하여 더 불러올 페이지 여부 판단- 로딩 인디케이터 표시
- 편지 카드 탭 시 편지 상세 화면으로 이동
- 편지 상세 화면에서 답장 가능
API: GET /letters/public?languages=ko&languages=en&page=0&size=20
화면: BouquetScreen
주요 기능:
- 상단에 친구 목록을 가로 스크롤로 표시
- 각 친구별:
- 프로필 이미지
- 닉네임
- 읽지 않은 편지 개수 배지
- 친구 선택 시 해당 친구의 편지 목록 표시
- 친구와 주고받은 편지를 채팅 메시지처럼 표시
- 내가 보낸 편지: 오른쪽 정렬, 프로필 이미지 없음
- 친구가 보낸 편지: 왼쪽 정렬, 프로필 이미지 없음
- 말풍선 너비: 화면 너비의 92%
- 시간순 정렬: 오름차순 (오래된 편지부터 최신 편지 순서)
- 서버에서 정렬 처리 (클라이언트 정렬 없음)
- 스크롤 하단 90% 도달 시 다음 페이지 자동 로드
- 페이지당 20개씩 로드
PageResponse.last필드를 사용하여 더 불러올 페이지 여부 판단
- 편지가 없을 때:
- "아직 편지가 없어요" 메시지
- "편지를 써서 대화를 시작해보세요" 안내
- 편지 탭 시 편지 상세 화면으로 이동
- 내가 보낸 편지인 경우:
- 내 프로필 표시
- 답장 버튼 숨김
- 신고 버튼 숨김
- 친구가 보낸 편지인 경우:
- 친구 프로필 표시
- 답장 버튼 표시
- 신고 버튼 표시
- 친구 목록에서 팝업 메뉴로 "친구 끊기" 선택
- 확인 다이얼로그 표시
- 삭제 성공 시:
- 친구 목록에서 제거
- 편지 목록 새로고침
- 선택된 인덱스 조정
API:
GET /friends(친구 목록 조회)GET /friends/{friendId}/letters?page=0&size=20&sort=sentAt,asc(친구 편지 목록)DELETE /friends/{friendId}(친구 삭제)
화면: LetterDetailScreen
주요 기능:
- 템플릿 배경색 적용
- 제목과 본문 표시
- 발신자 프로필:
- 프로필 이미지 (기본값: 이니셜)
- 닉네임
- 발송 시간
- 내가 보낸 편지인 경우 내 프로필 표시
- 첨부 사진이 있을 때 "첨부한 사진 보기" 버튼 표시
- 버튼은 편지 내용 하단에 배치
- 버튼 클릭 시 이미지 뷰어 화면으로 이동
- 이미지 뷰어:
- 여러 이미지를 스와이프로 넘기며 보기
- 확대/축소 가능 (InteractiveViewer)
- 현재 이미지 번호 표시 (1/3 형식)
- 친구가 보낸 편지에만 표시
- 답장 버튼 클릭 시 편지 작성 화면으로 이동
- 원본 편지 정보 자동 설정
- 친구가 보낸 편지에만 표시
- 신고 사유 선택:
- 스팸/광고
- 혐오/차별
- 욕설/괴롭힘
- 개인정보 노출
- 기타
- 신고 상세 내용 입력
- 신고 접수 메시지 표시
API:
GET /letters/{letterId}(편지 조회)POST /letters/{letterId}/reply(답장)POST /letters/{letterId}/report(신고)
화면: SettingsScreen
기능:
- 초대 코드 입력
- 초대 코드 검증:
- 본인 코드인 경우: "본인은 친구 추가할 수 없습니다" 메시지
- 이미 친구인 경우: "이미 친구입니다" 메시지
- 성공: "친구가 추가되었습니다" 메시지
- 친구 추가 성공 시 친구 목록 새로고침
API: POST /friends (body: {inviteCode: "..."})
응답 처리:
alreadyFriends: 이미 친구인 경우isOwnCode: 본인 코드인 경우friend: 새로 추가된 친구 정보
화면: BouquetScreen
기능:
- 친구 목록에서 팝업 메뉴로 "친구 끊기" 선택
- 확인 다이얼로그 표시
- 삭제 성공 시:
- 친구 목록에서 제거
- 편지 목록 새로고침
- 선택된 인덱스 조정
API: DELETE /friends/{friendId}
화면: SettingsScreen
기능:
- 현재 초대 코드 조회
- 초대 코드 재생성
- 초대 코드 복사
- 만료 시간 표시 (3분)
- 만료 시간 카운트다운 표시
API:
GET /invite-codes/current(현재 코드 조회)POST /invite-codes/generate(코드 생성)
화면: SettingsScreen → EditProfileScreen
기능:
- 프로필 이미지 업로드/변경
- 프로필 이미지 제거
- 닉네임 수정
- 프로필 수정 후 설정 화면에 머무름 (메인 화면으로 이동하지 않음)
- 프로필 카드 자동 업데이트
API:
GET /users/me(현재 사용자 정보 조회)PATCH /users/me(프로필 수정)
프로필 이미지:
- 이미지가 없거나 로드 실패 시 기본 프로필 (이니셜) 표시
- 사용자별 고유 배경색 적용
화면: SettingsScreen
기능:
- 한국어, 영어, 일본어 태그로 복수 선택 가능
- 기본값: 모든 언어 선택 (3개 태그 모두 활성화)
- 선택 상태는 로컬 저장소에 저장
- 필터 변경 시 공개 편지 목록 자동 새로고침
UI:
- 태그 형태의 선택 버튼
- 선택된 언어: 핑크색 배경, 테두리, 체크 아이콘
- 미선택 언어: 반투명 배경, 흰색 테두리
저장소: LanguageFilterStorage (SharedPreferences)
화면: SettingsScreen
기능:
- 푸시 알림 ON/OFF 토글
- 설정 변경 시 서버에 저장
API: PATCH /settings/push-notifications
화면: SettingsScreen
기능:
- 한국어, 영어, 일본어 중 선택
- 태그 형태로 표시 (공개 편지 언어 필터와 동일한 스타일)
- 언어 변경 시 앱 전체 언어 즉시 변경
- 선택된 언어는 핑크색 배경, 테두리, 체크 아이콘으로 표시
저장소: AppLocaleController (ValueNotifier)
화면: SettingsScreen
기능:
- 현재 비밀번호 입력
- 새 비밀번호 입력
- 새 비밀번호 확인
- 비밀번호 변경 성공 메시지 표시
API: PATCH /auth/password
화면: SettingsScreen
기능:
- 회원탈퇴 확인 다이얼로그
- 확인 시 계정 삭제
- 삭제 성공 시 로그인 화면으로 이동
API: DELETE /users/me
화면: SkyScreen (알림 센터)
기능:
- 알림 목록 표시
- 읽지 않은 알림 개수 배지 표시
- 알림 탭 시 알림 상세 화면으로 이동
- 알림 읽음 처리
API:
GET /notifications(알림 목록 조회)PATCH /notifications/{notificationId}/read(알림 읽음 처리)
기능:
- Firebase Cloud Messaging (FCM) 사용
- 로그인 시 FCM 토큰 자동 등록
- 새 편지 알림
- 반응 알림
API: POST /fcm/register (FCM 토큰 등록)
기능:
- 여러 이미지 동시 업로드
- 각 이미지별 업로드 상태 확인
- 업로드 실패 시 에러 메시지 표시
- 업로드된 이미지 URL 반환
API: POST /files
제한사항:
- 최대 파일 크기: 10MB
- 지원 형식: 이미지 파일 (JPG, PNG 등)
에러 처리:
- 400 Bad Request: 잘못된 파일 형식
- 413 Payload Too Large: 파일 크기 초과
- 업로드 실패 시 편지 전송 중단
TabaModalSheet: 일관된 모달 시트 스타일- 하단 버튼 패딩 자동 적용
- 키보드 인셋 고려
TabaModalSheet.showConfirm: 일관된 확인 다이얼로그- 아이콘, 확인/취소 버튼 커스터마이징 가능
- 색상 커스터마이징 가능
UserAvatar: 프로필 이미지 표시- 이미지가 없거나 로드 실패 시 이니셜 표시
- 사용자별 고유 배경색 적용
EmptyState: 빈 상태 표시 위젯- 아이콘, 제목, 부제목 표시
- 선택적 액션 버튼
- 한국어, 영어, 일본어 지원
- 앱 내에서 언어 변경 가능
- 편지 언어 필터링 지원
- 다크 테마 기반
- 템플릿별 배경색 적용
- 일관된 색상 팔레트 사용
- 편지 작성 성공 시 목록 자동 새로고침
- 답장 성공 시 목록 자동 새로고침
- 친구 삭제 시 목록 자동 새로고침
- 프로필 수정 시 프로필 카드 자동 업데이트
TokenStorage: 인증 토큰 저장LanguageFilterStorage: 공개 편지 언어 필터 저장SharedPreferences사용
- 401 Unauthorized: 로그인 화면으로 이동
- 400 Bad Request: 에러 메시지 표시
- 404 Not Found: 에러 메시지 표시
- 413 Payload Too Large: 파일 크기 초과 메시지
- 성공 메시지:
showTabaSuccess - 에러 메시지:
showTabaError - 로딩 인디케이터:
LoadingIndicator
- 공개 편지: 페이지당 10개
- 친구 편지: 페이지당 20개
PageResponse.last필드를 사용한 효율적인 페이징
- 이미지 미리보기: 60x60
- 이미지 뷰어: 전체 해상도
- 이미지 로드 실패 시 기본 이미지 표시
- 친구별 편지 목록 캐싱
- 프로필 이미지 캐싱 (Flutter 기본)
- JWT 토큰 기반 인증
- 토큰 자동 갱신 (필요 시)
- 로그아웃 시 토큰 삭제
- 비밀번호 암호화 전송
- HTTPS 통신
- 개인정보 보호 (GDPR 준수)
- 8가지 템플릿 제공
- 템플릿별 배경색, 텍스트 색상, 폰트 적용
- 편지 상세 화면에서 템플릿 스타일 유지
- 선택한 폰트에 따라 자동으로 언어 정보 설정
- 편지 작성 시
language파라미터 자동 전송 - 공개 편지 목록에서 언어 필터링 지원
- API에서 직접
unreadLetterCount제공 - 클라이언트 계산 없이 서버 데이터 사용
- 친구별 읽지 않은 편지 개수 표시
예약 발송 기능(제거됨)클라이언트 정렬 로직(서버에서 처리)클라이언트 공개편지 추가 로직(서버에서 처리)
- 오프라인 모드 지원
- 편지 검색 기능
- 편지 즐겨찾기
- 편지 공유 기능
- 편지 삭제 기능
- 편지 수정 기능
- Flutter 3.10.0+
- Dart 3.10.0+
dio: HTTP 클라이언트google_fonts: 폰트 지원image_picker: 이미지 선택shared_preferences: 로컬 저장소firebase_core,firebase_messaging: 푸시 알림flutter_svg: SVG 이미지
- Repository 패턴
- Service 레이어 분리
- DTO/Model 분리
- 상태 관리: StatefulWidget + ValueNotifier
POST /auth/login: 로그인POST /auth/signup: 회원가입POST /auth/forgot-password: 비밀번호 찾기POST /auth/logout: 로그아웃PATCH /auth/password: 비밀번호 변경
GET /users/me: 현재 사용자 정보 조회PATCH /users/me: 프로필 수정DELETE /users/me: 회원탈퇴
POST /letters: 편지 작성GET /letters/public: 공개 편지 목록GET /letters/{letterId}: 편지 조회POST /letters/{letterId}/reply: 편지 답장POST /letters/{letterId}/report: 편지 신고DELETE /letters/{letterId}: 편지 삭제
GET /friends: 친구 목록 조회POST /friends: 친구 추가 (초대 코드)DELETE /friends/{friendId}: 친구 삭제GET /friends/{friendId}/letters: 친구 편지 목록
GET /invite-codes/current: 현재 초대 코드 조회POST /invite-codes/generate: 초대 코드 생성
POST /files: 파일 업로드
GET /notifications: 알림 목록 조회PATCH /notifications/{notificationId}/read: 알림 읽음 처리
PATCH /settings/push-notifications: 푸시 알림 설정
POST /fcm/register: FCM 토큰 등록
id: 편지 IDtitle: 제목content: 본문preview: 미리보기sender: 발신자 정보template: 템플릿 정보 (배경색, 텍스트 색상, 폰트, 폰트 크기)attachedImages: 첨부 이미지 URL 리스트language: 언어 (ko, en, ja)sentAt: 발송 시간visibility: 공개 범위 (PUBLIC, DIRECT)
user: 사용자 정보unreadLetterCount: 읽지 않은 편지 개수lastLetterAt: 마지막 편지 시간
id: 사용자 IDemail: 이메일nickname: 닉네임avatarUrl: 프로필 이미지 URLavatarFallbackColor(): 프로필 배경색 (이니셜용)
id: 알림 IDtype: 알림 타입message: 알림 메시지read: 읽음 여부createdAt: 생성 시간
- 회원가입 화면에서 이메일, 비밀번호, 닉네임 입력
- 이용약관 및 개인정보처리방침 동의
- 회원가입 완료 → 자동 로그인
- 튜토리얼 화면 확인 (선택)
- 메인 화면에서 "씨앗 뿌리기" 버튼 클릭
- 편지 작성 화면에서 제목, 본문 입력
- 템플릿 및 폰트 선택
- 이미지 첨부 (선택)
- 공개/친구 선택
- "씨앗 뿌리기" 버튼 클릭 → 편지 전송
- 설정 화면에서 초대 코드 생성
- 초대 코드 복사 및 친구에게 공유
- 친구가 초대 코드로 친구 추가
- 꽃다발 화면에서 친구 선택
- 편지 작성 화면에서 친구에게 편지 작성
- 편지 전송 → 친구에게 알림
- 친구가 편지 확인 및 답장
- 꽃다발 화면에서 채팅형 UI로 편지 확인
- 하늘 화면에서 공개 편지 목록 확인
- 언어 필터 설정 (한국어, 영어, 일본어)
- 편지 카드 스와이프로 탐색
- 관심 있는 편지 탭하여 상세 보기
- "답장하기" 버튼 클릭
- 답장 편지 작성 및 전송
- 자동으로 친구 추가됨 (서버 처리)
- 꽃다발 화면에서 친구와의 편지 확인
- 설정 화면으로 이동
- 프로필 카드에서 "수정" 버튼 클릭
- 프로필 이미지 업로드/변경
- 닉네임 수정
- 저장 → 설정 화면에 머무름
- 공개 편지 언어 필터 변경
- 앱 언어 변경 (한국어 → 영어)
- 푸시 알림 설정 변경
- API 명세서:
API_SPECIFICATION.md(별도 문서) - README:
README.md - 프로젝트 구조:
lib/디렉토리
문서 버전: 1.0.1
최종 업데이트: 2024년
작성자: 개발팀