모바일 출장 데이터 수집 앱 개발 과정3 (끝인 줄 알았지만... )

1.1. 제품 개요
본 문서는 모바일 환경에서 출장 중 수집하는 위치 및 건물 정보를 효율적으로 관리하고, 이를 바탕으로 보고서를 생성할 수 있는 웹 애플리케이션(이하 '앱') 개발을 위한 제품 요구사항을 정의한다. 사용자는 현장에서 직접 데이터를 입력하고, 사진을 첨부하며, 저장된 데이터를 기반으로 DOCX 형식의 보고서를 받아볼 수 있다.
1.2. 목표
•	효율적인 데이터 수집: 모바일 기기를 활용하여 현장에서 신속하고 정확하게 위치 및 건물 정보를 입력하고 저장한다.
•	간편한 보고서 생성: 수집된 데이터를 바탕으로 표준화된 형식의 DOCX 보고서를 손쉽게 생성하고 내보낸다.
•	데이터 관리 용이성: 사용자가 입력한 데이터를 체계적으로 관리하고, 필요시 수정 및 삭제할 수 있는 기능을 제공한다.
•	사용자 편의성 증대: 직관적인 UI/UX를 제공하여 사용자가 별도의 교육 없이 앱의 모든 기능을 쉽게 사용할 수 있도록 한다.
1.3. 타겟 사용자
•	공무원 등
2. 제품 기능
2.1. 핵심 기능
•	데이터 입력: 위치 정보, 건물 정보, 층별 세부 정보, 사진 등을 모바일에서 직접 입력한다.
•	데이터 저장 및 관리: 입력된 데이터를 모바일 기기 내부 저장소(localStorage)에 안전하게 저장하고, 필요시 조회, 수정, 삭제한다.
•	보고서 생성 및 내보내기: 저장된 데이터를 기반으로 지정된 형식(DOCX)의 보고서를 생성하고, 다운로드하거나 이메일로 전송한다.
2.2. 세부 기능
2.2.1. 데이터 입력 폼
•	필수 입력 항목:
o	지번 주소 및 상호명 (텍스트)
o	장소 유형 (선택: 예시 - 종교시설, 영유아시설, 공영주차장, 유흥주점, 멸실, 신축, 가설건축물, 지역아동센터, 노인복지시설)
•	선택 입력 항목:
o	건물 층수 (선택: B3, B2, B1, 1층, 2층, 3층, 4층, 5층, 6층, 7층. 다중 선택 가능하도록 고려)
o	내부 정보 (텍스트 입력)
o	특이사항 및 메모 (텍스트 입력)
2.2.2. 사진 업로드 및 관리
•	층별로 최대 5장의 사진 업로드 지원
•	사진 업로드 시, 사용자는 다음 두 가지 옵션 중 선택 가능:
o	기기 내 사진첩에서 선택
o	카메라를 실행하여 직접 촬영
•	업로드된 사진 미리보기 기능 제공
•	개별 사진 삭제 기능 제공
2.2.3. 층별 정보 입력
•	하나의 장소에 대해 여러 층의 정보를 개별적으로 입력 가능
•	'추가' 버튼을 통해 다음 층의 정보 입력 인터페이스를 동적으로 생성
2.2.4. 데이터 저장
•	새로운 장소 정보 저장 기능
•	기존에 저장된 장소 정보 수정 기능
•	데이터 저장 시, 해당 시점의 timestamp 자동 기록
•	모든 데이터는 localStorage의 locationData 키에 JSON 문자열 형태로 저장 및 자동 동기화
2.2.5. 저장된 장소 보기
•	저장된 장소 목록을 요약 형태로 표시 (예: 주소, 장소 유형)
•	각 장소별 대표 사진(첫 번째 사진) 썸네일 표시
2.2.6. 데이터 수정 및 삭제
•	저장된 각 장소 항목별로 수정 및 삭제 버튼 제공
•	데이터 삭제 시, 사용자 실수를 방지하기 위한 확인 모달 팝업창 표시
•	데이터 수정 시에는 장소 목록 제일 상단에 제일 최근에 수정했던 데이터가 표시
2.2.7. 알림 시스템
•	사용자 액션(저장, 수정, 삭제, 내보내기 등)에 대한 피드백 제공
•	성공, 오류, 경고 메시지를 화면 상단 또는 하단에 0.3초간 표시 후 자동 사라짐
2.2.8. 보고서 내보내기 (DOCX)
•	저장된 장소 정보를 기반으로 DOCX 형식의 보고서 파일 생성
•	보고서 스타일:
o	제목: 14pt
o	본문(텍스트 입력 내용): 12pt
•	보고서 내용에는 입력된 모든 정보(주소, 장소 유형, 층별 정보, 메모, 사진 등) 포함
•	한글 데이터가 깨짐 없이 정상적으로 추출되어야 함
•	파일 다운로드 기능 (실제 파일 생성 및 다운로드)
2.2.9. 메일로 보고서 내보내기
•	생성된 DOCX 보고서 파일을 이메일 앱을 통해 전송할 수 있는 기능 (mailto 링크 또는 유사 기능 활용)
2.2.10. 내보내기 미리보기
•	보고서 내보내기 전, 선택된 데이터에 대한 요약 정보 제공
o	총 장소 수
o	각 장소의 유형, 주소, 사진 수 요약
3. 기술 요구사항
3.1. 플랫폼
•	모바일 웹 브라우저 환경에서 동작하는 웹 애플리케이션
•	반응형 웹 디자인을 통해 다양한 모바일 기기 화면 크기 지원
3.2. 데이터 저장
•	클라이언트 사이드 저장: localStorage 사용
o	키 이름: locationData
o	데이터 형식: locations 배열을 JSON 문자열로 직렬화하여 저장
•	앱 초기 로딩 시 localStorage에서 locationData를 로드하고 파싱하여 상태 복원
3.3. 데이터 구조
•	locations: 장소 객체들을 담는 배열
•	각 장소 객체(location)의 속성:
o	id: (String) 고유 식별자 (예: UUID 또는 timestamp 기반)
o	address: (Object) 주소 정보
	jibunAddress: (String) 지번 주소 및 상호명
o	locationType: (String) 장소 유형
o	floors: (Array) 층별 정보 객체의 배열
	각 floor 객체 속성:
	floorName: (String) 층 이름 (예: "B1", "1층")
	floorInfo: (String) 해당 층 체크 사항
	photos: (Array) 해당 층의 사진 URL 또는 Base64 데이터 배열 (최대 3개)
	photoData[]는 photos[]의 원본 데이터 또는 미리보기용 데이터일 수 있음. 명확화 필요. (본 PRD에서는 photos에 Base64 인코딩된 이미지 데이터 문자열을 저장하는 것으로 가정)
o	notes: (String) 특이사항 및 메모
o	timestamp: (Number) 데이터 저장/수정 시점의 타임스탬프
3.4. UI/UX
•	프레임워크/라이브러리: TailwindCSS를 사용한 반응형 레이아웃 및 스타일링
•	사용자 인터페이스: 직관적이고 사용하기 쉬운 인터페이스 제공
•	인터랙션: 부드러운 화면 전환 및 사용자 피드백
3.5. 아이콘
•	주요 기능 버튼에 아이콘 사용 (예: Lucide Icons 또는 유사 SVG 아이콘 라이브러리 활용)
o	저장: Save
o	사진 촬영/업로드: Camera
o	수정: Edit2
o	삭제: Trash2
o	다운로드/내보내기: Download
3.6. DOCX 생성 라이브러리
•	클라이언트 사이드에서 DOCX 파일을 생성할 수 있는 JavaScript 라이브러리 사용 (예: docx (npm 패키지), Pizzip + Docxtemplater)
•	한글 지원 및 이미지 삽입 기능 필수
4. 비기능적 요구사항
4.1. 사용성
•	앱은 별도의 사용자 매뉴얼 없이도 쉽게 사용할 수 있도록 직관적이어야 한다.
•	입력 필드는 명확하게 레이블링되어야 한다.
•	오류 발생 시 사용자에게 명확한 메시지를 전달해야 한다.
4.2. 성능
•	데이터 입력, 저장, 조회, 보고서 생성 등의 주요 기능은 모바일 환경에서 적절한 속도로 응답해야 한다.
•	사진 업로드 및 처리 시 과도한 지연이 발생하지 않도록 최적화한다. (예: 이미지 압축)
4.3. 호환성
•	최신 버전의 주요 모바일 브라우저(Chrome, Safari 등)에서 정상적으로 동작해야 한다.
4.4. 데이터 무결성
•	입력된 데이터는 손실 없이 정확하게 저장되어야 한다.
•	DOCX 보고서로 변환 시 데이터의 누락이나 왜곡이 없어야 한다.