{"id":29696519,"url":"https://github.com/coding-pelican/sseudamsseudam-app-dev","last_synced_at":"2025-10-15T09:18:10.769Z","repository":{"id":297182412,"uuid":"995906048","full_name":"coding-pelican/sseudamsseudam-app-dev","owner":"coding-pelican","description":"SseudamSseudam: University team project - Mobile app for real-time trash bin location tracking to prevent illegal dumping.","archived":false,"fork":false,"pushed_at":"2025-06-04T08:22:30.000Z","size":888,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-23T09:53:17.438Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://coding-pelican.github.io/sseudamsseudam-app-dev/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/coding-pelican.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-06-04T07:15:59.000Z","updated_at":"2025-06-04T08:22:31.000Z","dependencies_parsed_at":"2025-06-08T05:16:07.305Z","dependency_job_id":null,"html_url":"https://github.com/coding-pelican/sseudamsseudam-app-dev","commit_stats":null,"previous_names":["coding-pelican/sseudamsseudam-app-dev"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/coding-pelican/sseudamsseudam-app-dev","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coding-pelican%2Fsseudamsseudam-app-dev","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coding-pelican%2Fsseudamsseudam-app-dev/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coding-pelican%2Fsseudamsseudam-app-dev/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coding-pelican%2Fsseudamsseudam-app-dev/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/coding-pelican","download_url":"https://codeload.github.com/coding-pelican/sseudamsseudam-app-dev/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/coding-pelican%2Fsseudamsseudam-app-dev/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279065984,"owners_count":26096207,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-15T02:00:07.814Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-23T09:39:57.466Z","updated_at":"2025-10-15T09:18:10.738Z","avatar_url":"https://github.com/coding-pelican.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 쓰담쓰담 (SseudamSseudam)\n\n\u003e 쓰레기 무단 투기 예방 및 도시 환경 개선을 위한 쓰레기통 위치 정보 제공 앱\n\n## 🌱 프로젝트 개요\n\n**쓰담쓰담**은 실시간 위치 기반 서비스를 통해 시민들이 쉽게 쓰레기통을 찾고, 분리수거를 실천할 수 있도록 도와주는 친환경 도시 환경 개선 앱입니다.\n\n### 🎯 주요 목표\n- 쓰레기 무단 투기 예방을 통한 깨끗한 도시 환경 조성\n- 사용자 참여형 쓰레기통 정보 관리 시스템 구축\n- 시민 참여형 환경 개선 플랫폼 제공\n\n### ✨ 핵심 기능\n- **🗺️ 실시간 위치 기반 쓰레기통 찾기**: GPS를 활용한 주변 쓰레기통 위치 안내\n- **📊 사용자 제보 기반 용량 모니터링**: 커뮤니티 사용자들이 직접 제보하는 쓰레기통 상태 정보\n- **🔍 위치 검색 및 즐겨찾기**: 자주 방문하는 장소의 쓰레기통을 미리 등록하고 관리\n- **👥 사용자 관리 시스템**: 간편한 로그인/회원가입으로 개인맞춤 서비스 이용\n- **🏛️ 기관 연계 서비스**: 관할 기관과 협력하여 쓰레기통 증설 건의 및 처리\n- **♻️ 환경 교육 콘텐츠**: 올바른 분리수거 방법과 쓰레기 배출 요령 안내\n- **🏘️ 커뮤니티 기능**: 시민들이 함께 참여하는 환경 개선 신고 및 소통 공간\n\n## 🛠️ 기술 스택\n\n### Frontend\n- **Framework**: Next.js 15.2.4 (React 19)\n- **Language**: TypeScript 5\n- **Styling**: Tailwind CSS 3.4.17\n- **UI Components**: Radix UI + shadcn/ui\n- **State Management**: React Hook Form + Zod\n- **Maps**: Kakao Map API\n- **Theme**: next-themes (다크모드 지원)\n\n### Development Tools\n- **Package Manager**: pnpm\n- **Linting**: ESLint\n- **Deployment**: Static Export 지원\n- **Build Tool**: Next.js Built-in Bundler\n\n### UI/UX\n- **Design System**: shadcn/ui 기반 커스텀 컴포넌트\n- **Icons**: Lucide React\n- **Animations**: Tailwind CSS Animate\n- **Responsive Design**: Mobile-first 접근 방식\n- **Charts**: Recharts\n\n## 📁 프로젝트 구조\n\n```txt\nsseudamsseudam-app-dev/\n├── app/                    # Next.js 13+ App Router\n│   ├── layout.tsx         # 루트 레이아웃\n│   ├── page.tsx           # 메인 페이지\n│   ├── loading.tsx        # 로딩 컴포넌트\n│   └── globals.css        # 전역 스타일\n├── components/             # 재사용 가능한 컴포넌트\n│   ├── ui/                # shadcn/ui 기반 UI 컴포넌트\n│   │   ├── button.tsx     # 버튼 컴포넌트\n│   │   ├── card.tsx       # 카드 컴포넌트\n│   │   ├── dialog.tsx     # 다이얼로그 컴포넌트\n│   │   └── ...           # 기타 UI 컴포넌트들\n│   ├── kakao-map.tsx      # 카카오맵 통합 컴포넌트\n│   └── theme-provider.tsx # 테마 제공자\n├── hooks/                  # 커스텀 React 훅\n├── lib/                    # 유틸리티 함수 및 설정\n├── public/                 # 정적 파일\n├── styles/                 # 스타일 파일\n├── components.json         # shadcn/ui 설정\n├── next.config.mjs         # Next.js 설정\n├── tailwind.config.ts      # Tailwind CSS 설정\n├── tsconfig.json          # TypeScript 설정\n└── package.json           # 프로젝트 의존성\n```\n\n## 🖥️ 화면 구성\n\n### 메인 화면 플로우\n\n```txt\n시작 화면 (Splash) → 앱 소개 → 홈 화면 (지도) → 기능별 상세 화면\n```\n\n### 상세 화면 구성\n\n| 번호 | 화면 이름             | 구성 요소                                        | 주요 기능                 |\n| ---- | --------------------- | ------------------------------------------------ | ------------------------- |\n| 1    | 시작 화면 (Splash)    | 로고, 앱 소개 한 줄, 시작하기 버튼               | 앱 진입점 및 브랜딩       |\n| 2    | 앱 설명(최초 실행 시) | 앱 최초 실행 시 앱에 대한 설명 (퀵스타트 가이드) | 사용자 온보딩             |\n| 3    | 홈 화면(지도)         | 사용자 기반 위치 지도 화면                       | 실시간 쓰레기통 위치 표시 |\n| 4    | 검색창                | 검색, 내 위치 등록                               | 위치 검색 및 즐겨찾기     |\n| 5    | 커뮤니티              | 무단 투기 신고(사진\u0026영상 업로드)                 | 시민 참여 및 신고 기능    |\n| 6    | 내 위치 등록 리스트   | 등록해둔 쓰레기통 위치 리스트                    | 개인화된 위치 관리        |\n| 7    | 로그인 / 회원가입     | 회원 정보 수집                                   | 사용자 인증 및 관리       |\n\n## 🚦 설치 및 실행\n\n### 사전 요구사항\n- Node.js 18.17 이상\n- pnpm 8.0 이상\n- 카카오 개발자 계정 (지도 API 키 필요)\n\n### 설치 방법\n\n1. **저장소 클론**\n\n   ```bash\n   git clone https://github.com/coding-pelican/sseudamsseudam-app-dev\n   cd sseudamsseudam-app-dev\n   ```\n\n2. **의존성 설치**\n\n   ```bash\n   pnpm install\n   ```\n\n3. **환경 변수 설정**\n\n   ```bash\n   # .env.local 파일 생성\n   cp .env.example .env.local\n\n   # 카카오 지도 API 키 설정\n   NEXT_PUBLIC_KAKAO_MAP_API_KEY=your_kakao_map_api_key\n   ```\n\n4. **개발 서버 실행**\n\n   ```bash\n   pnpm dev\n   ```\n\n5. **브라우저에서 확인**\n\n   ```txt\n   http://localhost:3000/sseudamsseudam-app-dev/\n   ```\n\n   \u003e **참고**: 위 URL은 [next.config.mjs](./next.config.mjs)파일의 `basePath` 구성 경로를 따릅니다.\n\n### 빌드 및 배포\n\n```bash\n# 프로덕션 빌드\npnpm build\n\n# 프로덕션 서버 실행\npnpm start\n\n# 정적 파일 배포용 빌드\npnpm deploy\n```\n\n## 🔧 개발 환경 설정\n\n### VS Code 권장 확장 프로그램\n- ES7+ React/Redux/React-Native snippets\n- Tailwind CSS IntelliSense\n- TypeScript Importer\n- Prettier - Code formatter\n- ESLint\n\n### 코드 스타일 가이드\n- **TypeScript**: strict 모드 사용\n- **컴포넌트**: 함수형 컴포넌트 + Hooks 패턴\n- **스타일링**: Tailwind CSS 유틸리티 클래스\n- **폴더 구조**: 기능별 모듈화\n\n## 📱 주요 기능 상세\n\n### 1. 실시간 지도 서비스\n- 카카오맵 API 기반 인터랙티브 지도\n- 사용자 현재 위치 표시\n- 사용자 등록 쓰레기통 위치 마커 표시\n- 커뮤니티 제보 기반 상태 정보 표시\n\n### 2. 사용자 참여형 쓰레기통 관리\n- 사용자 직접 쓰레기통 위치 등록\n- 사용자 제보 기반 용량 상태 공유\n- 커뮤니티 기반 정보 업데이트 시스템\n- 관할 기관 자동 연계\n\n### 3. 사용자 커뮤니티\n- 무단 투기 신고 기능\n- 사진/동영상 업로드\n- 실시간 댓글 시스템\n- 지역별 커뮤니티 분류\n\n### 4. 환경 교육 콘텐츠\n- 분리수거 가이드라인\n- 쓰레기 배출 요령\n- 환경 보호 팁\n- 재활용 정보\n\n## 🌟 향후 계획\n\n### Phase 1 (현재)\n- [x] 기본 UI/UX 프로토타입 완성\n- [x] 카카오맵 API 연동\n- [x] 반응형 디자인 구현\n\n### Phase 2 (예정)\n\n#### 핵심 기능 구현\n- [ ] 쓰레기통 위치 등록 및 상태 공유 시스템\n- [ ] 실시간 쓰레기통 정보 조회 및 검색\n- [ ] 환경 개선 커뮤니티 플랫폼\n\n#### 백엔드 인프라\n- [ ] API 서버 구축 및 데이터베이스 연동\n- [ ] 사용자 인증 및 권한 관리 시스템\n\n## 🙏 Acknowledgments\n- [Next.js](https://nextjs.org/) - React 프레임워크\n- [shadcn/ui](https://ui.shadcn.com/) - UI 컴포넌트 라이브러리\n- [Tailwind CSS](https://tailwindcss.com/) - 유틸리티 우선 CSS 프레임워크\n- [Kakao Map API](https://apis.map.kakao.com/) - 지도 서비스\n- [Radix UI](https://www.radix-ui.com/) - 접근성 중심 UI 컴포넌트\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003cstrong\u003e🌍 더 깨끗한 도시를 위한 첫 걸음, 쓰담쓰담과 함께하세요! 🌱\u003c/strong\u003e\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoding-pelican%2Fsseudamsseudam-app-dev","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcoding-pelican%2Fsseudamsseudam-app-dev","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcoding-pelican%2Fsseudamsseudam-app-dev/lists"}