ID: key_26_22_05_25_P3_3_7 Created date: 5월 25 2026 월요일
연관 문서
개발 일정 > Phase 3 모바일 개발 | 3-6_모바일-프로젝트-초기-세팅
개요
모바일 앱에서 로그인 및 이슈 조회 기능을 구현한다. 모바일 MVP의 핵심 기능이다.
- 예상 소요: 5~7일
- 선행 조건: 3-6_모바일-프로젝트-초기-세팅, 서버 Auth API 완료
- 완료 기준: 모바일에서 로그인 → 내 이슈 목록 확인 → 상세 조회 동작 확인
Claude Code 작업 수행서
작업 지시
CIRA 모바일 앱에 인증 및 이슈 조회 기능을 구현해줘.
[수행 작업]
1. 로그인 화면
파일: app/(auth)/login.tsx
- 이메일 / 비밀번호 입력 (CiraInput 컴포넌트)
- 로그인 버튼 (CiraButton — 로딩 상태 포함)
- 유효성 검증 (이메일 형식, 비밀번호 최소 8자)
- 로그인 성공:
* accessToken → SecureStore 저장
* useAuthStore.setToken() 호출
* router.replace('/(main)/')
- 에러: 토스트 또는 인라인 에러 메시지
2. 탭 네비게이션
파일: app/(main)/_layout.tsx
탭 구성:
- 대시보드 (홈 아이콘)
- 내 이슈 (체크박스 아이콘)
- 프로젝트 (폴더 아이콘)
- 알림 (벨 아이콘)
- 프로필 (사람 아이콘)
3. 대시보드 탭
파일: app/(main)/index.tsx
- 상단: "안녕하세요, {이름}님" 인사말
- 내 할당 이슈 수 카드
- 마감 임박 이슈 (3건 미리보기)
- 최근 활동 피드 (5건)
4. 내 이슈 목록 탭
파일: app/(main)/issues/index.tsx
- 기본 필터: assigneeId = 나 (변경 가능)
- 필터 칩: 전체 / In Progress / To Do / Done
- IssueListItem 컴포넌트:
* 이슈 키 + 우선순위 아이콘
* 제목 (1줄 말줄임)
* 프로젝트명 + 상태 배지
* 마감일
- FlatList + 무한 스크롤 (useInfiniteQuery)
- Pull-to-Refresh
5. 이슈 상세 화면
파일: app/(main)/issues/[id].tsx
ScrollView 구성:
- 이슈 키 + 이슈 타입 아이콘
- 제목
- 상태 선택 드롭다운 (ActionSheet — 전이 가능 상태만)
- 우선순위 / 담당자 / 보고자
- 마감일
- 설명 (마크다운 렌더링 — react-native-markdown-display)
- 댓글 수 표시 + "댓글 보기" 버튼 → 댓글 하단 시트
6. 프로젝트 목록 탭
파일: app/(main)/projects.tsx
- 내가 속한 프로젝트 목록
- 프로젝트 카드 (이름, 키, 진행 중 이슈 수)
- 탭 클릭 → 프로젝트별 이슈 목록
7. 알림 탭
파일: app/(main)/notifications.tsx
- 알림 목록 (최근 50건)
- 읽음/미읽음 구분 (배경색)
- 탭 시 해당 이슈로 이동
- "모두 읽음" 버튼
8. 프로필 탭
파일: app/(main)/profile.tsx
- 아바타 + 이름 + 이메일
- 알림 설정
- 서버 URL 설정 (개발/운영 전환)
- 로그아웃 버튼
[준수 사항]
- iOS SafeAreaView / Android 상태바 대응
- 네트워크 오류 시 offline 안내 UI
- 키보드 올라올 때 입력 필드 가려지지 않도록 KeyboardAvoidingView
- 이미지 없는 아바타는 이니셜 + 색상으로 대체
완료 기준
| 항목 | 기준 |
|---|---|
| 로그인 | 토큰 저장 + 메인 화면 이동 |
| 내 이슈 목록 | 무한 스크롤 동작 |
| 이슈 상세 | 전체 정보 표시 |
| 상태 변경 | ActionSheet → 상태 전이 성공 |
| 알림 | 목록 표시 + 읽음 처리 |
| 로그아웃 | 토큰 삭제 + 로그인 화면 이동 |