Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/prgrms-web-devcourse-final-project/web1_1_bongdari_fe
8팀 프론트 레포지토리
https://github.com/prgrms-web-devcourse-final-project/web1_1_bongdari_fe
Last synced: 10 days ago
JSON representation
8팀 프론트 레포지토리
- Host: GitHub
- URL: https://github.com/prgrms-web-devcourse-final-project/web1_1_bongdari_fe
- Owner: prgrms-web-devcourse-final-project
- Created: 2024-11-14T10:00:08.000Z (about 2 months ago)
- Default Branch: main
- Last Pushed: 2024-12-21T08:20:01.000Z (15 days ago)
- Last Synced: 2024-12-21T08:30:42.510Z (15 days ago)
- Language: TypeScript
- Homepage: https://www.somemore.site/
- Size: 3.15 MB
- Stars: 4
- Watchers: 0
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# 🦺 구호활동 연결 플랫폼 손모아
재해나 지원이 필요한 현장에서 도움을 원하는 단체와 자원봉사자를 연결해주는 중계 플랫폼입니다.
배포 URL: https://www.somemore.site/
노션 링크: https://www.notion.so/prgrms/Team08-81045d7e1f3e48ccbb9b215a663b97c6
프론트 레포지토리: https://github.com/prgrms-web-devcourse-final-project/WEB1_1_Bongdari_FE
백엔드 레포지토리: https://github.com/prgrms-web-devcourse-final-project/WEB1_1_Bongdari_BE
## 🎇프로젝트 개요
**손모아**의 목표는 **"사회지원 활동 참여를 쉽게 만들자"** 입니다.
전화, 방문 등 기존의 복잡한 절차의 불편함을 해소해 접근성을 향상 시키기 위해 이 프로젝트를 기획하게 되었습니다.
도움이 필요하지만 모집 방법이 게시글 등록이 전부였던 기관들에게 봉사자에게 직접 도움을 요청할 수 있게 하여 봉사자와 기관 간의 커뮤니케이션을 활성화할 수 있고,
봉사 시간에 따라 티어를 부여하고 "이 주의 봉사왕" 랭킹과 같은 게이미피케이션(Gamification)을 통해 봉사자들은 성취감을 느낄 수 있습니다.
## 📃목차
- [프로젝트 개요](#프로젝트-개요)
- [프로젝트 구성원](#프로젝트-구성원)
- [주요 기능](#주요-기능)
- [기술 스택](#기술-스택)
- [폴더 구조](#폴더-구조)
- [설치 및 실행 방법](#설치-및-실행-방법)
- [개발 기간](#개발-기간)
- [트러블 슈팅](#트러블-슈팅)
- [향후 개선 사항](#향후-개선-사항)
- [팀원 소개 및 느낀점](#팀원-소개-및-느낀점)
## 👩🏻💻프로젝트 구성원
### Backend
| Backend | Backend | Backend | Backend |
| :-----------------------------------: | :------------------------------------: | :------------------------------------: | :------------------------------------: |
| **조재중(팀장)** | **윤서진(PM)** | **양아영** | **이범수** |
| [
@m-a-king](https://github.com/m-a-king) | [
@7zrv](https://github.com/7zrv) | [
@ayoung-dev](https://github.com/ayoung-dev) | [
@leebs0521](https://github.com/leebs0521) |
### Frontend
| Frontend | Frontend | Frontend |
| :-----------------------------------: | :------------------------------------: | :------------------------------------: |
| **홍유진(팀장)** | **김민준** | **김주영** |
| [
@youjin-hong](https://github.com/youjin-hong) | [
@minjoon97](https://github.com/minjoon97) | [
@djm06294](https://github.com/djm06294) |
## 💡주요 기능
### ✔️메인 기능
- **기관**은 봉사 활동에 대한 모집글을 등록할 수 있습니다.
- **봉사자**는 기관들이 올린 봉사 활동 모집글들을 전부 볼 수 있고, 원하는 봉사 활동 모집글에 대해 지원할 수 있습니다.
- **기관**은 자신이 올린 봉사 활동에 지원한 봉사자들의 명단을 리스트로 관리하며 지원 수락, 반려할 수 있습니다.
- **기관**은 해당 봉사 활동이 종료된 후, 봉사 활동에 참여한 지원자들에 한하여 봉사 시간을 정산할 수 있습니다.
### ✔️콘텐츠 기능
- 메인 페이지에는 봉사자들의 프로필에 등록돼있는 봉사 시간을 기준으로 "이 달의 봉사왕" 봉사시간이 많은 봉사자 4명의 랭킹이 매겨집니다.
- 각 봉사자들은 봉사 시간/횟수에 따라 10단계의 티어를 가질 수 있습니다.
- 기관과 봉사자는 모두 커뮤니티를 공유하며, 댓글과 대댓글 기능을 통해 활발한 소통을 할 수 있습니다.
### ✔️편의 기능
- 기관은 봉사자에게, 봉사자는 기관에게 쪽지를 전달할 수 있습니다. 이를 통해 기관과 봉사자의 소통에 편의를 보장합니다.
- 기관과 봉사자 모두 쪽지, 리뷰, 봉사 신청 결과 등을 실시간 알림으로 받아볼 수 있습니다.
## 🛠기술 스택
### 📌 Frontend Tech Stack
#### 🔤 언어
#### 🛠 프레임워크
#### 📡 상태 관리 & 데이터 통신
#### 🔌 외부 라이브러리 & 서비스
### 📌 Backend Tech Stack
#### 🔤 언어
#### 🛠 프레임워크
#### 💾 데이터베이스
#### 🚀 배포
### 🤝 협업 Tool
## 📁폴더 구조
프론트엔드 디렉토리 구조
src
├── assets
│ └── images
├── components
│ ├── component1
│ │ ├── logic
│ │ ├── ui
│ │ ├── index.tsx
│ │ └── indexCss.ts
│ └── component2
│ ├── logic
│ ├── ui
│ ├── index.tsx
│ └── indexCss.ts
├── features
│ ├── feature1
│ │ ├── logic
│ │ ├── ui
│ │ ├── index.tsx
│ │ └── indexCss.ts
│ └── feature2
│ ├── logic
│ ├── ui
│ ├── index.tsx
│ └── indexCss.ts
├── api
│ ├── endPoints.ts
│ └── client.ts
├── store
│ ├── queries
│ │ └── login
│ │ └── loginData.ts
│ └── stores
├── styles
│ ├── myreset.css
│ └── global.css
├── shared
│ ├── hooks
│ └── types
├── mocks
├── pages
│ ├── main-page
│ │ ├── index.tsx
│ │ └── indexCss.ts
│ └── login-page
│ ├── index.tsx
│ └── indexCss.ts
└── layout
├── header
└── footer
백엔드 디렉토리 구조
com.example.develetter
├── global
│ ├── config
│ ├── exception
│ ├── handler
│ ├── common
│ └── util
├── center
│ ├── domain
│ │ └── entity
│ ├── controller
│ │ ├── query
│ │ └── command
│ ├── service
│ │ ├── query
│ │ └── command
│ ├── dto
│ │ ├── request
│ │ └── response
│ ├── repository
│ │ ├── query
│ │ └── command
│ └── scheduler
├── volunteer
│ ├── domain
│ │ └── entity
│ ├── controller
│ │ ├── query
│ │ └── command
│ ├── service
│ │ ├── query
│ │ └── command
│ ├── dto
│ │ ├── request
│ │ └── response
│ ├── repository
│ │ ├── query
│ │ └── command
│ └── scheduler
## 🔄 User Flow
**주요 사용자 흐름**
1. 비로그인 사용자(기관/봉사자 구분 x): 봉사 활동 모집글/커뮤니티/메인페이지 이용 가능
2. 기관: 도움요청글 작성/수정/삭제, 지원자 수락/반려/정산, 커뮤니티 글 작성/삭제/댓글, 쪽지/리뷰, 알림, 마이페이지 이용
3. 봉사자: 도움요청글 조회/지원/지원 철회, 커뮤니티 글 작성/삭제/댓글, 쪽지/리뷰, 알림, 마이페이지 이용
## 🚀설치 및 실행 방법
### 설치
1. **저장소 복제하기**
```
git clone https://github.com/prgrms-web-devcourse-final-project/WEB1_1_Bongdari_FE.git
```
2. **프론트엔드 종속성 설치**
```
yarn install
```
3. **환경 변수 설정**
- frontend: 백엔드 도메인 주소, 카카오맵 api Javascript key 등록
4. **개발 서버 시작**
```
yarn dev
```
## 📆개발 기간
- 기획: 2024.11.12~2024.11.25
- 개발: 2024.11.25~2024.12.9
## 🛠트러블 슈팅
- TODO: 노션링크 연결 또는 직접 작성
## 🔧향후 개선 사항
- TODO
- TODO
- TODO
## 👥팀원 소개 및 느낀점
김민준
- 작성 예정
-
김주영
- 작성 예정
-
홍유진
- 작성 예정
-