플랜테리어 공간 시뮬레이션 웹·아이패드 앱

방 사진을 올리면 빛이 드는 방향과 배치 가능한 영역을 요약 카드로 보여주는 화면입니다. 업로드 파일 형식·용량 검증 후 외부 이미지 분석 API 결과를 구조화해 공간 분석 패널에 표시합니다.

• Supabase Storage 서명 URL 업로드와 MIME·용량 서버 검증 적용
• 외부 이미지 분석 API 응답을 Zod 스키마로 검증해 분석 카드에 매핑
• 업로드 진행률 표시와 스켈레톤 로딩으로 대기 상태 가시화

업로드 검증과 분석 결과 스키마 검증을 분리해 잘못된 파일과 비정상 응답이 화면까지 전달되지 않는 구조를 구현합니다.

식물 에셋을 방 사진 위로 끌어다 놓고 크기와 위치를 조절하는 편집 화면입니다. Konva 레이어 위에서 드래그·리사이즈·회전 변환을 처리하고 줌과 스크롤을 제스처별로 분리합니다.

• Konva Transformer로 선택 요소의 크기·회전 핸들 구현
• 포인터 이벤트 기반 두 손가락 줌과 한 손가락 이동 제스처 분리
• Zustand와 실행 취소 스택으로 배치 상태 이력 관리

마우스와 터치 입력을 하나의 포인터 이벤트 계층으로 통합해 데스크톱과 아이패드에서 같은 조작감을 제공하도록 설계합니다.

배치 결과를 이미지 엔진에 보내 합성 이미지를 만들고 내 프로젝트로 저장하는 화면입니다. 렌더 요청을 비동기 작업으로 등록하고 완료 시 결과 이미지를 보관함에 저장합니다.

• 렌더 요청 상태 폴링과 Supabase Realtime 구독으로 진행 상태 갱신
• 결과 이미지를 사용자별 Storage 경로에 저장하고 RLS로 접근 제한
• 실패 시 재시도 버튼과 사유 안내 상태 설계

렌더 작업 상태를 대기·진행·완료·실패로 모델링해 로딩 애니메이션과 오류 안내가 상태와 일치하도록 구현합니다.

아이패드 가로 화면과 데스크톱 브라우저에서 같은 플로우가 동작하도록 맞춘 반응형 화면입니다. Ionic 컴포넌트와 Capacitor 패키징 구조를 적용하고 뷰포트별 패널 배치를 전환합니다.

• Capacitor 설정과 Ionic 컴포넌트로 웹앱 패키징 구조 구성
• 가로 모드 기준 패널 배치와 안전 영역 여백 처리
• 에뮬레이터와 브라우저 개발자 도구 기반 뷰포트 점검 체크리스트 작성

하나의 Next.js 코드베이스에서 웹과 아이패드 앱을 함께 대응하는 패키징 구조를 설계합니다.