-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs : Readme.md 컨텐츠 추가 (팀 소개, 기술 스택, 발표 자료 및 시연 영상) (#352)
* docs: 팀 소개 추가 * docs: 팀 프로필 사진 수정 * docs: 기술 스택 추가 * docs: 발표 ppt, 시연 영상 추가 * docs: 시연 영상 업로드 초안 * docs: Update README.md * docs : 시연 영상 table 형식으로 ui 수정 * docs: 시연 설명 설명 변경 * docs: 기획 배경 및 주요 기능 설명 추가 * docs: Update README.md Co-authored-by: Wonsuk Choi <[email protected]> --------- Co-authored-by: Wonsuk Choi <[email protected]>
- Loading branch information
Showing
1 changed file
with
279 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,36 +1,292 @@ | ||
| # BE 지원종료 | ||
|
|
||
| # `Turborepo` Vite starter | ||
| # 🐾 ANI FRIENDS - 동물 보호소와 봉사자의 쉬운 만남 | ||
|
|
||
| This is an official starter Turborepo. | ||
| **Backend 지원 종료! :(** | ||
|
|
||
| ## Using this example | ||
| ## 🔍 프로젝트 소개 | ||
|
|
||
| Run the following command: | ||
| `봉사자`는 도움이 필요한 보호소를 한 번에 모아서 보고, `보호소`는 봉사자의 봉사 이력과 봉사 온도를 통해 신뢰할 수 있는 봉사자의 도움을 받을 수 있는 프로젝트입니다. | ||
|
|
||
| ```sh | ||
| npx create-turbo@latest -e with-vite | ||
| ``` | ||
| [발표 PPT](https://docs.google.com/presentation/d/16ZIXwzYRYbMmJfFVjTNxZ9LndwiMlDsA/edit?usp=sharing&ouid=110305378940213913854&rtpof=true&sd=true) | ||
|
|
||
| ## What's inside? | ||
| [시연 영상](https://drive.google.com/file/d/1jQDhBtrApup2l5TmIjVkPDmYFka2tXu7/view?usp=sharing) | ||
|
|
||
| This Turborepo includes the following packages and apps: | ||
| ## 기획 배경 | ||
| > 유기견 봉사 모집이 좀 더 체계적으로 이루어졌으면 좋겠는데… | ||
| > | ||
| - 기존의 보호 동물 봉사 서비스는 대부분 네이버 카페를 이용하여 댓글 또는 전화, 네이버 폼으로 신청이 이루어지고 있습니다. | ||
| - 일부 보호소의 경우 후원이나 유기견 입양을 위한 보호 동물 정보를 업로드하는 자체 서비스를 구축한 곳은 있습니다. | ||
|
|
||
| ### Apps and Packages | ||
| `봉사자`들이 여러 보호소의 봉사 모집을 한 군데에서 확인할 수 있고 봉사 신청까지 이어지도록 `보호소`는 봉사자들의 이력을 확인하여 신뢰할 수 있는 봉사자들의 도움을 받을 수 있는 애플리케이션을 개발합니다. | ||
|
|
||
| - `docs`: a vanilla [vite](https://vitejs.dev) ts app | ||
| - `web`: another vanilla [vite](https://vitejs.dev) ts app | ||
| - `ui`: a stub component & utility library shared by both `web` and `docs` applications | ||
| - `eslint-config-custom`: shared `eslint` configurations | ||
| - `tsconfig`: `tsconfig.json`s used throughout the monorepo | ||
| ## 주요 기능 | ||
|
|
||
| Each package and app is 100% [TypeScript](https://www.typescriptlang.org/). | ||
| ### 유기견 봉사를 원하는 `봉사자`와 도움이 필요한 `보호소`가 모이는 공간 | ||
|
|
||
| ### Utilities | ||
| - `보호소`는 도움이 필요한 일을 등록 | ||
| - `봉사자`는 보호소가 등록한 일정에 따라 봉사를 신청 | ||
|
|
||
| This Turborepo has some additional tools already setup for you: | ||
| ### 봉사 이력과 온도에 따른 신뢰도 관리 | ||
|
|
||
| - [TypeScript](https://www.typescriptlang.org/) for static type checking | ||
| - [ESLint](https://eslint.org/) for code linting | ||
| - [Jest](https://jestjs.io) test runner for all things JavaScript | ||
| - [Prettier](https://prettier.io) for code formatting | ||
| - `봉사자`의 봉사 이력이 기록되고 출석과 후기 작성에 따라 온도가 변동 | ||
| - `보호소`는 봉사를 신청한 `봉사자`의 봉사 이력과 온도를 통해 신뢰도를 확인할 수 있다. | ||
|
|
||
| ## 🎥 시연영상 | ||
|
|
||
| <table width="100%"> | ||
| <tr> | ||
| <th width="50%" align="center" style="background-color: #f8f9fa; padding: 15px;">영상</th> | ||
| <th width="50%" align="center" style="background-color: #f8f9fa; padding: 15px;">기능 설명</th> | ||
| </tr> | ||
| <tr> | ||
| <td width="50%" style="padding: 20px;"> | ||
| <img src="https://github.com/user-attachments/assets/a80780aa-4287-4bf7-badb-09b95e84324f" alt="login" width="100%" /> | ||
| </td> | ||
| <td width="50%" style="padding: 20px; vertical-align: top;"> | ||
| <h3>🔐 로그인</h3> | ||
| <p> | ||
| • 이메일/비밀번호를 통한 로그인 | ||
| <br/> | ||
| • 로그인 상태 유지 기능 | ||
| </p> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td width="50%" style="padding: 20px;"> | ||
| <video src="https://github.com/user-attachments/assets/042fc58a-01d6-4b01-aa4d-342c2a53c001" alt="search" width="100%" autoplay muted /> | ||
| </td> | ||
| <td width="50%" style="padding: 20px; vertical-align: top;"> | ||
| <h3>🔍 비로그인 사용자 기능</h3> | ||
| <p> | ||
| <b>1. 봉사 모집 게시글 조회</b> | ||
| <br/> | ||
| • 상단 검색 아이콘으로 게시글 검색 | ||
| <br/> | ||
| • 봉사일 모집 여부에 따른 필터링 | ||
| <br/> | ||
| • 게시글 클릭 시 상세 페이지로 이동 | ||
| </p> | ||
| <p> | ||
| <b>2. 봉사 상세 페이지</b> | ||
| <br/> | ||
| • 봉사 모집 정보 확인 | ||
| <br/> | ||
| • 보호소 정보 확인 및 프로필 페이지 이동 | ||
| </p> | ||
| <p> | ||
| <b>3. 보호소 프로필 페이지</b> | ||
| <br/> | ||
| • 봉사자들의 후기 조회 | ||
| <br/> | ||
| • 현재 모집 중인 게시글 목록 확인 | ||
| <br/> | ||
| • 비로그인 상태에서 봉사 신청 시 로그인 페이지로 이동 | ||
| </p> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td width="50%" style="padding: 20px;"> | ||
| <video src="https://github.com/user-attachments/assets/5d5088fe-13b9-4913-ae43-cb3878f1f7e5" width="100%" autoplay muted /> | ||
| </td> | ||
| <td width="50%" style="padding: 20px; vertical-align: top;"> | ||
| <h3>👤 로그인 사용자 기능</h3> | ||
| <p> | ||
| <b>1. 봉사 신청 및 관리</b> | ||
| <br/> | ||
| • 봉사 신청 기능 | ||
| <br/> | ||
| • 마이페이지에서 신청한 봉사 조회 | ||
| <br/> | ||
| • 봉사 상태 확인 (대기 중/승인 완료/출석 완료) | ||
| </p> | ||
| <p> | ||
| <b>2. 봉사 온도 시스템</b> | ||
| <br/> | ||
| • 출석 상태에 따른 온도 변동 | ||
| <br/> | ||
| • 후기 작성에 따른 온도 변동 | ||
| </p> | ||
| <p> | ||
| <b>3. 후기 관리</b> | ||
| <br/> | ||
| • 출석 완료된 봉사의 후기 작성 | ||
| <br/> | ||
| • 작성한 후기 조회/수정/삭제 | ||
| </p> | ||
| <p> | ||
| <b>4. 계정 관리</b> | ||
| <br/> | ||
| • 계정 정보 수정 | ||
| <br/> | ||
| • 비밀번호 변경 | ||
| <br/> | ||
| • 프로필 이미지 변경 | ||
| <br/> | ||
| • 로그아웃 | ||
| </p> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td width="50%" style="padding: 20px;"> | ||
| <video src="https://github.com/user-attachments/assets/0b1b10fc-3f8d-4e1b-85e3-64635d37968f" width="100%" autoplay muted /> | ||
| </td> | ||
| <td width="50%" style="padding: 20px; vertical-align: top;"> | ||
| <h3>🏥 보호소 관리자 기능</h3> | ||
| <p> | ||
| <b>1. 봉사 신청 관리</b> | ||
| <br/> | ||
| • 봉사자 신청 현황 확인 | ||
| <br/> | ||
| • 신청 승인/거절 기능 | ||
| <br/> | ||
| • 모집 게시글 마감 처리 | ||
| </p> | ||
| <p> | ||
| <b>2. 출석 관리</b> | ||
| <br/> | ||
| • 봉사자 출석 체크 | ||
| <br/> | ||
| • 출석 상태에 따른 봉사 온도 반영 | ||
| </p> | ||
| <p> | ||
| <b>3. 모집글 관리</b> | ||
| <br/> | ||
| • 새로운 모집글 작성 | ||
| <br/> | ||
| • 등록된 모집글 조회 | ||
| <br/> | ||
| • 모집글 삭제 | ||
| </p> | ||
| <p> | ||
| <b>4. 봉사자 관리</b> | ||
| <br/> | ||
| • 봉사 후기 조회 | ||
| <br/> | ||
| • 봉사자 프로필 확인 | ||
| <br/> | ||
| • 봉사자의 봉사 이력 조회 | ||
| </p> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
|
|
||
| ## 🛠️ 기술 스택 | ||
|
|
||
| <table> | ||
| <tr> | ||
| <td align="center">언어</td> | ||
| <td> | ||
| <img src="https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=TypeScript&logoColor=white"> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td align="center">라이브러리</td> | ||
| <td> | ||
| <img src="https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=React&logoColor=white"> </td> | ||
| </tr> | ||
| <tr> | ||
| <td align="center">라우터</td> | ||
| <td> | ||
| <img src="https://img.shields.io/badge/ReactRouter-CA4245?style=for-the-badge&logo=ReactRouter&logoColor=white"></td> | ||
| </tr> | ||
| <tr> | ||
| <td align="center">빌드</td> | ||
| <td> | ||
| <img src="https://img.shields.io/badge/turborepo-EF4444?style=for-the-badge&logo=turborepo&logoColor=white"> | ||
| <img src="https://img.shields.io/badge/VITE-646CFF?style=for-the-badge&logo=VITE&logoColor=white"> | ||
| </tr> | ||
| <tr> | ||
| <td align="center">상태 관리</td> | ||
| <td> | ||
| <img src="https://img.shields.io/badge/ReactQuery-FF4154?style=for-the-badge&logo=ReactQuery&logoColor=white"> | ||
| <img src="https://img.shields.io/badge/zustand-000?style=for-the-badge&logo=zustand&logoColor=white"> | ||
| </tr> | ||
| <tr> | ||
| <td align="center">UI 개발</td> | ||
| <td> | ||
| <img src="https://img.shields.io/badge/storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white"> | ||
| </tr> | ||
| <tr> | ||
| <td align="center">API</td> | ||
| <td> | ||
| <img src="https://img.shields.io/badge/mock service worker-FF6A33?style=for-the-badge&logo=mockserviceworker&logoColor=white"> | ||
| <img src="https://img.shields.io/badge/AXIOS-5A29E4?style=for-the-badge&logo=AXIOS&logoColor=white"> | ||
| </tr> | ||
| <tr> | ||
| <td align="center">포맷터</td> | ||
| <td> | ||
| <img src="https://img.shields.io/badge/Prettier-F7B93E?style=for-the-badge&logo=Prettier&logoColor=white"> | ||
| <img src="https://img.shields.io/badge/ESLint-4B32C3?style=for-the-badge&logo=ESLint&logoColor=white"> | ||
| <img src="https://img.shields.io/badge/husky-808080?style=for-the-badge"/> | ||
| <img src="https://img.shields.io/badge/commitlint-000000?style=for-the-badge&logo=commitlint&logoColor=white"/> | ||
| </tr> | ||
| <tr> | ||
| <td align="center">배포</td> | ||
| <td> | ||
| <img src="https://img.shields.io/badge/GitHub Actions-2088FF?style=for-the-badge&logo=GitHub Actions&logoColor=white"/> | ||
| <img src="https://img.shields.io/badge/vercel-000000?style=for-the-badge&logo=vercel&logoColor=white"/> | ||
| </tr> | ||
| <tr> | ||
| <td align="center">스타일링</td> | ||
| <td> | ||
| <img src="https://img.shields.io/badge/chakraui-319795?style=for-the-badge&logo=chakraui&logoColor=white"> | ||
| </tr> | ||
| <tr> | ||
| <td align="center">패키지 매니저</td> | ||
| <td> | ||
| <img src="https://img.shields.io/badge/pnpm-F69220?style=for-the-badge&logo=pnpm&logoColor=white"/> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td align="center">기타</td> | ||
| <td> | ||
| <img src="https://img.shields.io/badge/zod-3E67B1?style=for-the-badge&logo=zod&logoColor=white"> | ||
| <img src="https://img.shields.io/badge/reacthookform-EC5990?style=for-the-badge&logo=reacthookform&logoColor=white"> | ||
| </td> | ||
| </tr> | ||
|
|
||
| </table> | ||
|
|
||
| ## 👫 팀 소개 | ||
|
|
||
| <table> | ||
| <tr> | ||
| <td colspan="4" align="center"> FE </td> | ||
| </tr> | ||
| <tr> | ||
| <td align="center"> | ||
| <a href="https://github.com/kutta97"> | ||
| <img src="https://avatars.githubusercontent.com/u/74397358?v=4" width="90"> | ||
| </a> | ||
| </td> | ||
| <td align="center"> | ||
| <a href="https://github.com/DongjaJ"> | ||
| <img src="https://avatars.githubusercontent.com/u/43432783?v=4" width="90"> | ||
| </a> | ||
| </td> | ||
| <td align="center"> | ||
| <a href="https://github.com/sukvvon"> | ||
| <img src="https://avatars.githubusercontent.com/u/66409882?v=4" width="90"> | ||
| </a> | ||
| </td> | ||
| <td align="center"> | ||
| <a href="https://github.com/Eosdia"> | ||
| <img src="https://avatars.githubusercontent.com/u/117665863?v=4" width="90"> | ||
| </a> | ||
| </td> | ||
| </tr> | ||
| <tr> | ||
| <td align="center">양혜진</td> | ||
| <td align="center">정동환</td> | ||
| <td align="center">최원석</td> | ||
| <td align="center">우현지</td> | ||
| </tr> | ||
| <tr> | ||
| <td style="width: 150px;"> -추후 추가 예정</td> | ||
| <td style="width: 150px;"> -추후 추가 예정</td> | ||
| <td style="width: 150px;"> -추후 추가 예정</td> | ||
| <td style="width: 150px;"> -추후 추가 예정</td> | ||
| </tr> | ||
| </table> | ||
|
|
||
| <br /> |