🚀 PACK+MATE

생존가방 체크리스트 서비스

재난 시 필수 비상용품 목록을 제공하며, 사용자가 보유한 물품을 체크할 수 있습니다. 또한, 사진 업로드를 통해 손쉽게 비상용품을 확인하고 관리할 수 있습니다.

🔗 링크: https://packmate-three.vercel.app/

💡 주요 기능 및 특징

Kotlin 앱 패키징

Kotlin 기반으로 앱을 패키징하여 본 사이트를 웹뷰로 활용합니다. 만든이들 페이지는 네이티브 앱으로 구현하고, 다른 페이지들은 웹뷰를 통해 웹 페이지로 제공하여 다양한 기능을 모바일에서 손쉽게 사용할 수 있도록 지원합니다.

ImgBB를 통한 이미지 5분 저장 및 AI url 전달

ImgBB API를 이용해 이미지를 업로드하고, 업로드된 이미지를 5분 동안 저장합니다. 저장된 이미지의 URL을 AI 시스템에 전달하여 이미지 기반의 기능을 활용합니다.

sessionStorage를 통한 api 저장 여부 결정

sessionStorage를 활용하여 toekn과 사용자 데이터를 저장하여 DB 저장 여부를 결정하고, 페이지 새로고침 후에도 사용자의 상태를 유지할 수 있도록 합니다.

canvas를 통한 이미지 요소 위치 기반 흑백 처리

HTML5 canvas를 사용하여 이미지에서 특정 요소의 위치를 인식하고, 해당 부분을 흑백 처리합니다. 이후 사용자 인터랙션에 따라 리렌더링하여 동적인 화면을 제공합니다.

사용자 인터랙션 500ms 정지시 결과보기 버튼 활성화

사용자가 화면에서 인터랙션을 멈춘 후 500ms가 경과하면 "결과 보기" 버튼이 활성화됩니다. 이는 불필요한 반응을 방지하고, 안정적이고 직관적인 UI/UX를 제공합니다.

🗓️ Period

• 2024.11.25 ~ 2024.11.30 🌐 GDG on Campus KHU 제 1회 스프린트 챌린지

🛠️ Stacks

Developers

정아현

---

💡 PACK+MATE는 사용자에게 재난 대비를 위한 편리한 도구와 안전을 제공합니다.