디지털 자원을 연결하는 통합형 데이터 공유 플랫폼 ‘BADATA’
유레카 프론트엔드 개발자 과정 2기
최종 융합 프로젝트 2조
팀장 이시현 ｜ 팀원 박은서 · 박지회 · 이은채
▶ 클릭 시
| 항목 | 내용 |
|---|---|
| 프로젝트명 | BADATA (바다(BADA) + DATA) |
| 팀명 | 2SeaU (2조 + Sea + UPLUS) |
| 주제 | LG U+ 공유 데이터 거래 통합 플랫폼 |
| 타겟층 | 가변적 데이터 소비자 & 임시 인터넷 필요층 |
| 개발 기간 | 2025.06.30 ~ 2025.08.07 (6주) |
| 팀 구성 | 프론트엔드 중심 개발팀 (4명) |
npm run dev
- 카카오 로그인을 통해 간편 가입 가능
- 맞춤형 서비스: 로그인 사용자는 데이터 및 기프티콘 구매, 사용자 맞춤 추천 게시글 등 모든 기능 이용 가능
- 비로그인 제한: 거래 글 및 공유기 목록 열람만 가능, 게시글 작성 및 대여 신청 제한
- 마이페이지에서 제공하는 정보:
- 데이터 & 코인 잔액
- 거래 내역
- 공유기 대여 예약 내역
- SOS 요청 내역
- 기타 설정 (알림 설정 등)
- 데이터 및 기프티콘(유플러스 유독) 거래 가능
- 실시간 탐색 기능: 최근 검색어, 실시간 인기 검색어
- 거래 유도: 실시간 인기 게시물, 마감 임박 게시글 제공
- 소셜 기능: 관심 거래글 찜하기, 신뢰/관심 판매자 팔로우 가능
- OCR 자동 인식: 기프티콘 이미지 업로드 시 유효성 검사 & 정보 자동 입력
- 안전 거래: 사기 의심 및 부적절 게시물 신고 시스템(3회 누적 시 제재)
- 다양한 결제: 실제 구매 + 코인 할인 결제 가능
- 스택 카드 구조로 추천 게시글 직관적 탐색
- 스와이프 인터랙션: 왼쪽(관심없음)/오른쪽 스와이프(찜하기)
- 시각적 피드백: 그라데이션 애니메이션 + 액션 라벨 + 액션 힌트
- 사용자 가이드: 첫 이용 시 인터랙티브 튜토리얼 제공
- 탐색 후 액션: 이어서 추천, 찜 목록, 거래 페이지 이동 CTA 제공
- 지도 기반 시각화: 위치/거리 기준 가맹점 필터링
- 상세 정보 제공:
- 보유 기기 정보
- 대여 가능 기기 수량
- 대여 가능 시간
- 지도 기반 대여 가능 기기 줌 레벨에 따른 클러스터링 제공:
- 마커 클릭 시: 예약 카드 UI (무선 공유기 정보 카드 좌우 스와이프 제공)
- 예약 관리: 웨이팅 등록 + 재입고 알림 PWA
- 리뷰 시스템: 기기 반납 후 리뷰쓰기 가능, 리뷰 작성 시 코인 보상
- SSE 실시간 통신: 즉시 데이터 요청/응답 시스템
- SOS 요청: 홈 화면의 버튼으로 100MB 긴급 도움 요청
- 스마트 매칭: 접속자 중 알림 허용을 한 사용자에게 푸시 알림 전송
- 선착순 시스템: 1명만 나눔 가능
- 인센티브 구조: 데이터 나눔 시 코인 리워드 지급
| 분류 | 기술 스택 | 도입 이유 |
|---|---|---|
| 프레임워크 |   |
최신 App Router 구조 기반으로, 서버 컴포넌트와 중첩/병렬 라우팅 등 유연한 구조 설계에 적합 |
| 언어 |  |
정적 타입 검사를 통해 런타임 오류를 사전에 방지하고 협업 시 명확한 계약을 제공 |
| 상태 관리 |  |
전역 상태를 간결하고 효율적으로 관리할 수 있으며, 불필요한 리렌더링도 최소화됨 |
| 데이터 패칭 |   |
서버 상태는 React Query로 캐싱·로딩 관리, Axios로 REST API 요청 모듈화하여 유지보수 용이 |
| 스타일링 |   |
Tailwind는 빠르고 일관된 스타일링, Shadcn은 접근성 높은 UI 컴포넌트 제공 |
| 컴포넌트 개발 |  |
UI를 독립적으로 개발/테스트/문서화할 수 있어 디자인 시스템 구성에 유리 |
| 코드 품질 관리 |    |
커밋 전 린트/포맷 자동화로 코드 스타일 일관성 유지, 협업 생산성 향상 |
| 번들러 / 빌드 도구 |  |
Webpack 대비 빌드 속도와 HMR 성능이 우수하여 빠른 개발 경험 제공 |
| 프로필 | 이름 | 주요 역할 및 기여 내용 |
|---|---|---|
 |
이시현 @sihyuuun |
- 프로젝트 초기 세팅 및 구조 설계 - 기획, 피그마 디자인 및 공통 컴포넌트 제작 - 거래 메인 페이지 담당 - 추천 페이지 담당 - 공유기 대여 리뷰 페이지 |
 |
박은서 @arty0928 |
- 프로젝트 배포 및 환경 설정 - 기획, 피그마 디자인 및 공통 컴포넌트 제작 - 공유기 대여 페이지 담당 - 카카오 로그인 Auth - PWA 설정 및 재입고 실시간 알림 - 로그인 라우터 가드 미들웨어 |
 |
박지회 @jihoi0615 |
- 서비스 플로우차트 설계 및 컴포넌트 관리 - 기획, 피그마 디자인 및 공통 컴포넌트 제작 - 마이페이지 담당 - SSE활용 실시간 SOS 담당 |
 |
이은채 @eunchrri |
- 스토리북 세팅 및 컴포넌트 관리 - 기획, 피그마 디자인 및 공통 컴포넌트 제작 - 거래 상세 페이지 담당 - 온보딩 페이지 구현 - 거래 결제 포트윈 연동 |
Team BADATA
LG U+ URECA 프론트엔드 개발자 과정 2기
최종 융합 프로젝트 2조