홈페이지 제작 시작

MyPol 프로젝트를 알리기 위한 홈페이지를 만들기 시작했습니다. 소개, 포트폴리오, 개발일지, 지원하기 메뉴를 구성했습니다.

깔끔하고 전문적인 느낌을 주기 위해 네이비 블루 계열의 색상을 사용했습니다.

Flutter 프로젝트 생성

드디어 MyPol의 개발을 시작했습니다! Flutter로 새 프로젝트를 생성하고 기본 설정을 완료했습니다.

Flutter를 선택한 이유는 Windows, Android, Web을 하나의 코드로 개발할 수 있기 때문입니다. iOS도 곧 추가할 예정입니다.

Firebase 연결 및 인증 시스템

Firebase를 MyPol 프로젝트에 연결했습니다. 이메일/비밀번호 로그인과 Google 소셜 로그인을 구현했습니다.

사용자, 사업주, 관리자의 역할을 구분하여 각각 다른 홈 화면으로 이동하도록 설정했습니다.

사업주 대시보드 및 사업장 등록

사업주가 자신의 사업장을 등록할 수 있는 시스템을 만들었습니다. 독서실, 주차장, 숙박, 카페 등 카테고리별로 등록 가능합니다.

등록된 사업장은 관리자의 승인을 거쳐 서비스에 등록됩니다. 사업장 정보, 주소, 전화번호 등을 입력할 수 있습니다.

여러 구역(맵) 관리 시스템

하나의 사업장에 여러 개의 구역을 만들 수 있게 되었습니다. 독서실은 "1층", "2층", "프리미엄실" 처럼, 주차장은 "A구역", "B구역", "지하1층" 같은 식으로요.

각 구역마다 독립적인 2D 맵을 가지며, 구역 생성, 삭제, 이름 변경, 구역 복제 기능을 구현했습니다.

2D 맵 에디터 개발 (핵심 기능!)

MyPol의 가장 핵심적인 기능인 2D 맵 에디터를 개발하고 있습니다! 사업주가 직접 자신의 매장을 시각적으로 그릴 수 있습니다.

기본 편집 기능:

• 좌석/테이블/주차공간/침대 추가
• 드래그 앤 드롭으로 자유롭게 배치
• 그리드 스냅 (격자에 맞춰 정렬)
• 좌석 회전, 크기 조절
• 실행 취소/재실행 (Ctrl+Z, Ctrl+Y)
• 복사/붙여넣기 (Ctrl+C, Ctrl+V)

좌석 상세 설정:

• 가격 설정 (시간당/종일권)
• 이용 가능 시간 (예: 09:00-22:00)
• 특수 옵션 (콘센트, 창가석, WiFi, 모니터 등)
• 좌석 사진 URL 등록
• 예약 불가 설정 (고정석, VIP 전용, 점검중)

맵 에디터 코드 구조 대개편

3,400줄이 넘는 단일 파일이었던 맵 에디터를 8개의 모듈로 분리하는 대규모 리팩토링을 진행했습니다.

위젯, 유틸리티, 설정 파일로 역할별 분리를 통해 코드의 가독성과 유지보수성을 크게 향상시켰습니다. 앞으로 새로운 기능을 추가할 때 훨씬 수월해졌습니다.

13개 업종, 160개+ 객체 시스템

기존 독서실/음식점/주차장 3개 카테고리에서 헬스장, 숙박, 사무실, 학원, 미용실, 병원, 영화관, 세탁소, 창고까지 총 13개 업종으로 확장했습니다.

각 업종에 맞는 160개 이상의 객체를 추가했습니다. 런닝머신, 스타일링석, 진료침대, 세탁기 등 실제 현장에서 쓰는 장비들을 그대로 반영했습니다.

객체별 특수 옵션 & 스마트 UI

각 객체 타입에 맞는 특수 옵션 시스템을 구축했습니다. 독서실 좌석에는 콘센트/WiFi/모니터 옵션이, 헬스장 기구에는 초보자용/예약필수 옵션이, 영화관 좌석에는 팔걸이/컵홀더/프리미엄 옵션이 표시됩니다.

사물함, 카운터, 벽 같은 비품은 자동으로 "예약 불가"로 설정되어 가격/시간 설정 영역이 숨겨지고, 객체 배경색에 따라 글자색이 자동으로 바뀌는 기능도 추가했습니다.

사용자 홈 화면 & 사업장 검색

드디어 사용자가 직접 사업장을 찾고 탐색할 수 있게 되었습니다! GPS 기반 내 주변 검색, 13개 카테고리 필터, 키워드 검색(이름/주소), 거리순·평점순·이름순 정렬까지 4가지 방식으로 원하는 사업장을 찾을 수 있습니다.

사업장 카드에는 카테고리 배지, 평점, 리뷰 수, 영업 상태, 거리 정보가 한눈에 보이도록 디자인했습니다. 하단 탭 네비게이션(홈/지도/내 예약/마이)도 완성했습니다.

사업장 상세 페이지 & 2D 맵 뷰어

사업장 상세 페이지에서 기본 정보, 운영시간, 좌석 배치도를 확인할 수 있습니다. 구역별 탭으로 각 층/구역의 배치를 볼 수 있고, 실시간 예약 데이터 기반으로 이용률이 표시됩니다.

사용자용 2D 맵 뷰어를 새로 만들었습니다. 사업주의 맵 에디터와 동일한 배치를 보여주되, 좌석을 초록(이용가능)/주황(일부 예약)/빨강(마감)으로 색상 구분하여 한눈에 현황을 파악할 수 있습니다.

예약 시스템 전체 플로우 구현

MyPol의 핵심인 예약 기능을 완성했습니다! 3단계 플로우로 직관적인 예약 경험을 만들었습니다.

STEP 1 — 좌석 선택: 2D 맵에서 원하는 좌석을 터치. 좌석의 특수 옵션(콘센트, WiFi 등)과 가격이 바로 표시됩니다.
STEP 2 — 날짜/시간: 14일 이내 날짜 선택, 30분 단위 시간 슬롯. 이미 예약된 시간은 빨간색으로 차단됩니다.
STEP 3 — 확인: 예약 요약과 총 금액 확인 후 확정.

동일 좌석·동일 시간대 중복 예약을 자동으로 차단하는 시간 충돌 방지 시스템도 함께 구현했습니다. Firestore에 dateString 필드를 추가하여 타임존 차이로 인한 날짜 비교 오류도 해결했습니다.

내 예약 관리 & 사업주 예약 관리

사용자 측: "예약중"과 "지난 예약"을 탭으로 구분하여 예약 현황을 확인할 수 있습니다. 카테고리별 아이콘, 상태 배지, 예약 취소 기능을 포함합니다.

사업주 측: 오늘의 예약을 타임라인 형태로 보여주며, 현재 이용중인 예약에는 실시간 "이용중" 표시가 됩니다. 대기중인 예약을 승인/거절하고, 이용 완료/노쇼 처리까지 할 수 있습니다. 오늘의 총 매출 요약도 한눈에 확인 가능합니다.

토스페이먼츠 결제 시스템 통합

예약 시스템에 실제 결제 기능을 완전히 통합했습니다! 사용자가 좌석을 예약할 때 토스페이먼츠를 통해 안전하고 간편하게 결제할 수 있게 되었습니다.

결제 플로우:
① 예약 정보 입력 → ② pending 상태 예약 생성 →
③ 토스 결제 WebView 열림 → ④ 카드 결제 진행 →
⑤ 결제 승인 API 호출 → ⑥ 예약 confirmed로 변경 ✅

결제 실패 시 자동으로 예약을 취소하는 롤백 시스템, 중복 결제 방지, 결제 내역 저장까지 완벽하게 구현했습니다. 테스트 카드로 전체 플로우를 검증 완료했습니다.

Windows/Desktop 플랫폼 대응

webview_flutter가 Windows를 지원하지 않는 문제를 발견하고 플랫폼별 분기 처리를 구현했습니다.

Android/iOS: 실제 토스페이먼츠 WebView로 결제
Windows/Desktop: 테스트 모드 다이얼로그로 개발 지원

덕분에 개발 단계에서는 Windows에서 빠르게 테스트하고, 실제 배포는 Android/iOS로 진행할 수 있게 되었습니다. 플랫폼 감지는 defaultTargetPlatform으로 자동 처리됩니다.

예약 상태 관리 시스템 개선

결제 통합 과정에서 예약 상태 관리를 완전히 재설계했습니다. 기존의 confirmed만 있던 시스템에서 pending → confirmed → completed 전체 라이프사이클을 지원합니다.

예약 상태:
• pending: 결제 대기중 (5분 후 자동 취소)
• confirmed: 결제 완료, 예약 확정
• cancelled: 사용자/사업주가 취소
• completed: 이용 완료
• noShow: 노쇼 처리됨

각 상태별로 다른 UI와 액션을 제공하며, 상태 전환 로직에 권한 검증과 트랜잭션 처리를 추가했습니다.

네이버 지도 연동 & 지도 뷰

flutter_naver_map 패키지를 연동하여 사업장 위치를 실제 지도 위에 표시합니다. GPS 기반 내 주변 검색이 지도와 함께 동작하며, 마커를 터치하면 사업장 정보 카드가 나타납니다.

사업장 등록 시 주소 검색과 좌표 자동 입력, 사용자 현재 위치에서 사업장까지의 경로 안내 등 위치 기반 서비스를 본격적으로 구축할 예정입니다.