Spot!

위치 기반으로 간단한 일과 해결사를 매칭하는 플랫폼 서비스입니다.

📅 개발 기간: 2025.02 ~ 2025.04

---

프로젝트 소개

전구 교체, 짐 옮기기처럼 혼자 해결하기 어렵지만 전문 업체를 부르기엔 부담스러운 간단한 일을 맡기고 싶은 구인자와, 소일거리로 보수를 받고 싶은 구직자를 연결하는 서비스입니다.

Web · Android · iOS를 모두 지원하며, 의뢰자와 해결사가 실시간으로 채팅하고 해결사의 현재 위치를 지도에서 확인할 수 있습니다.

---

팀 구성

역할	인원
프론트엔드	1명
백엔드	3명
인프라	1명

---

주요 기능

구인 등록

• 맡기고자 하는 내용을 사진과 함께 등록
• 지도에서 작업 위치를 직접 선택

작업 목록

• 현재 위치 기준 주변 작업 목록 표시
• 다른 지역으로 전환해서 탐색 가능
• 인기순 / 최신순 정렬
• 무한 스크롤

구직 신청

• 해결사는 사진, 보수, 위치를 확인하고 의뢰자에게 신청
• 지도에서 작업 위치 확인 가능

결제

• 카카오페이로 결제 (QR코드 또는 카카오페이 앱)
• 의뢰자가 결제한 금액은 Spot! 계좌에 보관되며, 작업 완료 확인 후 해결사에게 지급
• 상황에 따라 결제 취소 가능

작업 현황

• 요청중 / 진행중 / 승인대기 단계를 프로그레스 바로 확인
• 의뢰자가 신청자 목록에서 해결사 직접 선택
• 진행 중일 때 지도에서 해결사의 현재 위치를 실시간으로 확인
• 해결사는 작업 현황 사진 업로드 가능
• 의뢰자가 결과를 확인하고 최종 승인

채팅

의뢰자와 해결사가 1:1로 실시간 채팅할 수 있습니다.

알림

앱이 백그라운드 또는 종료 상태에서도 알림을 수신할 수 있습니다.

• 구직 신청 / 신청 결과 / 구인 등록 / 채팅 / 작업 현황 / 작업 완료

---

파일 구조

spot-fe/
├── src/
│   ├── app/
│   │   ├── layout.tsx
│   │   ├── login/page.tsx
│   │   ├── splash/page.tsx
│   │   ├── notification/page.tsx
│   │   ├── detail/[id]/page.tsx
│   │   └── (tabs)/
│   │       ├── home/page.tsx
│   │       ├── recruit/page.tsx
│   │       │   └── select_helper/page.tsx
│   │       ├── tasks/
│   │       │   ├── page.tsx
│   │       │   ├── applicants/[id]/page.tsx
│   │       │   ├── request/[id]/page.tsx
│   │       │   └── in_progress/[id]/page.tsx
│   │       ├── chat/
│   │       │   ├── page.tsx
│   │       │   └── [id]/page.tsx
│   │       ├── payment/
│   │       │   ├── success/page.tsx
│   │       │   └── end/page.tsx
│   │       ├── point/
│   │       │   ├── register/page.tsx
│   │       │   └── serve/page.tsx
│   │       └── mypage/
│   │           ├── page.tsx
│   │           ├── favorites/page.tsx
│   │           ├── history/page.tsx
│   │           └── reviews/page.tsx
│   ├── components/
│   │   ├── BottomNav.tsx
│   │   ├── MapComponent.tsx
│   │   ├── ClientFCM.tsx
│   │   └── ClientNav.tsx
│   ├── hooks/
│   │   └── useFCM.ts
│   ├── lib/
│   │   ├── API_Manager.ts
│   │   └── serverTokenManager.ts
│   ├── firebaseConfig.ts
│   └── types.ts
├── capacitor.config.ts
└── next.config.ts

---

실행

의존성 설치

npm install

환경 변수 설정

.env.local 파일을 생성하고 필요한 값을 채워주세요.

NEXT_PUBLIC_API_URL=
NEXT_PUBLIC_TMAP_API_KEY=
NEXT_PUBLIC_FIREBASE_API_KEY=

웹 개발 서버

npm run dev

앱 빌드 (Capacitor)

npm run build
npx cap sync

# Android
npx cap open android

# iOS
npx cap open ios