-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
1 changed file
with
249 additions
and
25 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,33 +1,257 @@ | ||
| # 쩝쩝박사 프로젝트 | ||
| # 프로젝트명 | ||
| <img src="https://github.com/BCSDLab/JJBAKSA_FRONT_END/assets/88065770/7e1e5ad1-8698-48d8-9e16-ca7b4a72039e" width="50%" /> | ||
| <br> | ||
|
|
||
| _description is not confirmed._ | ||
| # Want to Contibute? | ||
| ## 프로젝트 소개 | ||
| - 북마크, 리뷰한 음식점을 지도의 핀으로 확인할 수 있는 맛집 기록 서비스입니다. | ||
| - 검색을 통해 주변 음식점을 확인할 수 있고, 리뷰를 작성할 수 있습니다. | ||
| - 다양한 사용자와 팔로우를 통해 팔로워의 리뷰/북마크한 음식점 등을 확인할 수 있습니다. | ||
| - 별점, 북마크, 팔로워 리뷰를 통해 다양한 정보를 확인할 수 있습니다. | ||
| <br> | ||
|
|
||
| See Our [Contribute Guide](./CONTRIBUTE.md). | ||
| ## 주요 기능 | ||
| ### 1. 회원가입 | ||
| <table> | ||
| <tr> | ||
| <th colspan="2">음식점 검색</th> | ||
| </tr> | ||
| <tr> | ||
| <td width="400px"><p align="center"><img src="https://github.com/BCSDLab/JJBAKSA_FRONT_END/assets/88065770/2add82be-5f73-4779-a311-3ea7422892a5" height="500px" /></p></td> | ||
| <td width="450px"> | ||
| <ul> | ||
| <li> | ||
| 중복 확인을 통해 이미 사용 중인 아이디를 확인합니다. | ||
| </li> | ||
| <li> | ||
| 이메일 주소 형식이 유효하지 않거나 이미 가입된 이메일일 경우 또는 비밀번호가 8자리 미만으로 이루어져 있으면 경고 문구가 나타납니다. | ||
| </li> | ||
| <li> | ||
| 작성이 완료되면 닉네임 작성 부분으로 이동합니다. | ||
| </li> | ||
| <li> | ||
| 닉네임은 한글, 영문, 숫자만 가능하면 2자리 미만으로 작성하면 경고 문구가 뜹니다. | ||
| </li> | ||
| </ul> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
|
|
||
| ## Want to question? | ||
| ### 2. 로그인 | ||
| <table> | ||
| <tr> | ||
| <th colspan="2">로그인</th> | ||
| </tr> | ||
| <tr> | ||
| <td width="400px"><p align="center"><img src="https://github.com/BCSDLab/JJBAKSA_FRONT_END/assets/88065770/4cf50243-c244-407e-a7bd-f5a1014269dc" height="500px"/></p></td> | ||
| <td width="450px"> | ||
| <ul> | ||
| <li> | ||
| 아이디와 비밀번호 입력하면 유효성 검사가 진행되고 통과하지 못한 경우 ‘쩝쩝박사의 서비스를 이용하려면 로그인하세요’ 하단에 경고 문구가 뜹니다. | ||
| </li> | ||
| <li> | ||
| 로그인에 성공하면 메인페이지로 이동합니다. | ||
| </li> | ||
| </ul> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
|
|
||
| Make an issue or Contact with this repository leader. | ||
|
|
||
| ### Repository leader | ||
| ### 3. 음식점 검색 | ||
| <table> | ||
| <tr> | ||
| <th colspan="2">음식점 검색</th> | ||
| </tr> | ||
| <tr> | ||
| <td width="400px"><p align="center"><img src="https://github.com/BCSDLab/JJBAKSA_FRONT_END/assets/88065770/020ab773-b52a-4271-acb4-a15c997787de" height="500px" /></p></td> | ||
| <td width="450px"> | ||
| <ul> | ||
| <li> | ||
| 메인페이지에서 검색창을 누르면 음식점 검색을 이동합니다. | ||
| </li> | ||
| <li> | ||
| 검색을 통해 음식점 리스트를 보여줍니다. | ||
| </li> | ||
| <li> | ||
| 인기 검색어를 통해 검색할 수 있습니다. | ||
| </li> | ||
| </ul> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
|
|
||
| [Wonbeen Choi](https://github.com/ChoiWonBeen) | ||
| ### 4. 음식점 상세 페이지 | ||
|
|
||
| # Learn Our Stack | ||
| <table> | ||
| <tr> | ||
| <th colspan="2">음식점 상세 페이지</th> | ||
| </tr> | ||
| <tr> | ||
| <td width="400px"><p align="center"><img src="https://github.com/BCSDLab/JJBAKSA_FRONT_END/assets/88065770/2835db56-34bb-4f5a-a19a-b9ba26a79297" height="500px"/></p></td> | ||
| <td width="450px"> | ||
| <ul> | ||
| <li> | ||
| 음식점의 상세 정보를 알 수 있습니다. | ||
| </li> | ||
| <li> | ||
| 음식점의 정보, 친구 리뷰, 내 리뷰, 음식점 위치를 알 수 있습니다. | ||
| </li> | ||
| <li> | ||
| 북마크를 통해 음식점을 스크랩할 수 있습니다. | ||
| </li> | ||
| </ul> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
|
|
||
| - Main UI Library/Framework | ||
| - [React](https://reactjs.org/docs/hello-world.html) | ||
| - [Create-React-App](https://create-react-app.dev/) | ||
| - Language | ||
| - [TypeScript](https://github.com/typescript-cheatsheets/react) | ||
| - Server State Management Library | ||
| - [@tanstack/react-query](https://tanstack.com/query/v5) | ||
| - Routing Library | ||
| - [React Router v6](https://reactrouter.com/docs/en/v6/getting-started/tutorial) | ||
| - Linting Library | ||
| - [ESLint](https://eslint.org/docs/latest/user-guide/getting-started) | ||
| - [StyleLint](https://stylelint.io/) | ||
| - Styling Library | ||
| - [Scss](https://sass-lang.com/guide) | ||
| - [BEM style](http://getbem.com/introduction/) | ||
| - [CSS Modules](https://github.com/css-modules/css-modules) | ||
| ### 5. 음식점 리뷰 | ||
| <table> | ||
| <tr> | ||
| <th colspan="2">음식점 리뷰</th> | ||
| </tr> | ||
| <tr> | ||
| <td width="400px"><p align="center"><img src="https://github.com/BCSDLab/JJBAKSA_FRONT_END/assets/88065770/e6b0ac86-06bb-423c-8903-4ef08e80b123" height="500px"/></p></td> | ||
| <td width="450px"> | ||
| <ul> | ||
| <li> | ||
| 하단의 ‘글쓰기’ 탭을 누르면 리뷰를 위한 음식점 검색 페이지로 이동합니다. | ||
| </li> | ||
| <li> | ||
| 음식점의 평점과 리뷰, 사진을 기록할 수 있습니다. | ||
| </li> | ||
| <li> | ||
| 리뷰한 음식점은 마이페이지 탭에서 확인할 수 있습니다. | ||
| </li> | ||
| </ul> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
|
|
||
| ### 6. 친구 팔로우 | ||
| <table> | ||
| <tr> | ||
| <th colspan="2">친구 팔로우</th> | ||
| </tr> | ||
| <tr> | ||
| <td width="400px"><p align="center"><img src="https://github.com/BCSDLab/JJBAKSA_FRONT_END/assets/88065770/325004b4-b7c8-444b-a371-9cef0d849c63" height="500px"/></p></td> | ||
| <td width="450px"> | ||
| <ul> | ||
| <li> | ||
| 마이페이지의 팔로워 버튼을 누르면 팔로우 페이지로 이동합니다. | ||
| </li> | ||
| <li> | ||
| 검색을 통해 사용자를 검색할 수 있습니다. | ||
| </li> | ||
| <li> | ||
| 팔로우 버튼을 통해 사용자를 팔로우할 수 있습니다. | ||
| </li> | ||
| <li> | ||
| 서로 팔로우된 사용자는 서로의 리뷰한 음식점을 볼 수 있습니다. | ||
| </li> | ||
| </ul> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
|
|
||
| ### 7. 메인페이지 핀보기 | ||
| <table> | ||
| <tr> | ||
| <th colspan="2">메인페이지 핀보기</th> | ||
| </tr> | ||
| <tr> | ||
| <td width="400px"><p align="center"><img src="https://github.com/BCSDLab/JJBAKSA_FRONT_END/assets/88065770/763c7f62-8160-4125-9d3f-a7699c841d13" height="500px"/></p></td> | ||
| <td width="450px"> | ||
| <ul> | ||
| <li> | ||
| 가까운 음식점은 리뷰한 음식점, 북마크한 음식점을 모두 보여줍니다. | ||
| </li> | ||
| <li> | ||
| 북마크한 음식점은 북마크한 음식점을 보여줍니다. | ||
| </li> | ||
| <li> | ||
| 친구 음식점은 팔로워의 음식점을 보여줍니다. | ||
| </li> | ||
| <li> | ||
| 핀을 누르면 음식점 상세로 이동됩니다. | ||
| </li> | ||
| </ul> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
|
|
||
| ### 8. 마이페이지 | ||
| <table> | ||
| <tr> | ||
| <th colspan="2">메인페이지 핀보</th> | ||
| </tr> | ||
| <tr> | ||
| <td width="400px"><p align="center"><img src="https://github.com/BCSDLab/JJBAKSA_FRONT_END/assets/88065770/71aa1c59-6872-4344-a421-7b7f98e6869a" height="500px"/></p></td> | ||
| <td width="450px"> | ||
| <ul> | ||
| <li> | ||
| 프로필 이미지를 누르면 사진, 닉네임이 변경 가능합니다. | ||
| </li> | ||
| <li> | ||
| 마이 페이지에서 리뷰한 음식점, 북마크한 음식점을 볼 수 있습니다. | ||
| </li> | ||
| <li> | ||
| 친구 음식점은 팔로워의 음식점을 보여줍니다. | ||
| </li> | ||
| <li> | ||
| 음식점을 클릭하면 가게 상세 정보로 이동할 수 있습니다. | ||
| </li> | ||
| </ul> | ||
| </td> | ||
| </tr> | ||
| </table> | ||
| <br> | ||
|
|
||
| ## 기술 스택 | ||
|
|
||
| #### ✔️Frond-end | ||
| <img src="https://img.shields.io/badge/React-61DAFB?style=for-the-badge&logo=React&logoColor=black"><img src="https://img.shields.io/badge/createreactapp-09D3AC?style=for-the-badge&logo=createreactapp&logoColor=black"><img src="https://img.shields.io/badge/TypeScript-3178C6?style=for-the-badge&logo=TypeScript&logoColor=white"><img src="https://img.shields.io/badge/reactquery-FF4154?style=for-the-badge&logo=reactquery&logoColor=white"><img src="https://img.shields.io/badge/jotai-000000?style=for-the-badge&logo=jotai&logoColor=white"><br> | ||
| <img src="https://img.shields.io/badge/reactrouter-CA4245?style=for-the-badge&logo=reactrouter&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/stylelint-263238?style=for-the-badge&logo=stylelint&logoColor=white"><img src="https://img.shields.io/badge/bem-000000?style=for-the-badge&logo=bem&logoColor=white"><img src="https://img.shields.io/badge/sass-CC6699?style=for-the-badge&logo=sass&logoColor=white"> | ||
|
|
||
| #### ✔️Back-end | ||
| <img src="https://img.shields.io/badge/springboot-6DB33F?style=for-the-badge&logo=springboot&logoColor=black"><img src="https://img.shields.io/badge/springsecurity-6DB33F?style=for-the-badge&logo=springsecurity&logoColor=black"><img src="https://img.shields.io/badge/jpa-6DB33F?style=for-the-badge&logo=jpa&logoColor=black"><img src="https://img.shields.io/badge/springwebflux-6DB33F?style=for-the-badge&logo=springwebflux&logoColor=black"><img src="https://img.shields.io/badge/mysql-4479A1?style=for-the-badge&logo=mysql&logoColor=black"><img src="https://img.shields.io/badge/redis-DC382D?style=for-the-badge&logo=redis&logoColor=black"><img src="https://img.shields.io/badge/querydsl-0185D2?style=for-the-badge&logo=querydsl&logoColor=black"> | ||
|
|
||
| <br> | ||
|
|
||
| ## 참여자 | ||
| <table> | ||
| <tr> | ||
| <th colspan="6">Frond-end</th> | ||
| </tr> | ||
| <tr align="center"> | ||
| <td>김대의</td> | ||
| <td>김민재</td> | ||
| <td>김혜준</td> | ||
| <td>이해루</td> | ||
| <td>정해성</td> | ||
| <td>채승윤</td> | ||
| </tr> | ||
|
|
||
| <tr align="center"> | ||
| <td><a target="_blank" href="https://github.com/kimeodml"><img src="https://avatars.githubusercontent.com/u/88065770?v=4" width="100px"></a> <br> [@kimeodml](https://github.com/kimeodml)</td> | ||
| <td><a target="_blank" href="https://github.com/D0Dam"><img src="https://avatars.githubusercontent.com/u/51052049?v=4" width="100px"></a> <br> [@D0Dam](https://github.com/D0Dam)</td> | ||
| <td><a target="_blank" href="https://github.com/hyejun0228"><img src="https://avatars.githubusercontent.com/u/114041848?v=4" width="100px"></a> <br> [@hyejun0228](https://github.com/hyejun0228)</td> | ||
| <td><a target="_blank" href="https://github.com/HAEROOL"><img src="https://avatars.githubusercontent.com/u/71335694?v=4" width="100px"></a> <br> [@HAEROOL](https://github.com/HAEROOL)</td> | ||
| <td><a target="_blank" href="https://github.com/junghaesung79"><img src="https://avatars.githubusercontent.com/u/96577250?v=4" width="100px"></a> <br> [@junhaesung79](https://github.com/junghaesung79)</td> | ||
| <td><a target="_blank" href="https://github.com/chaeseungyun"><img src="https://avatars.githubusercontent.com/u/101871802?v=4" width="100px"></a> <br> [@chaeseungyun](https://github.com/chaeseungyun)</td> | ||
| </tr> | ||
| </table> | ||
| <table> | ||
| <tr> | ||
| <th colspan="3">Back-end</th> | ||
| </tr> | ||
| <tr align="center"> | ||
| <td>김유진</td> | ||
| <td>이인석</td> | ||
| <td>임예준</td> | ||
| </tr> | ||
| <tr align="center" width="100%" > | ||
| <td><a target="_blank" href="https://github.com/Yoojkim"><img src="https://avatars.githubusercontent.com/u/81635224?v=4" width="100px"></a> <br> [@Yoojkim](https://github.com/Yoojkim)</td> | ||
| <td><a target="_blank" href="https://github.com/insukL"><img src="https://avatars.githubusercontent.com/u/66675919?v=4" width="100px"></a> <br> [@insukL](https://github.com/insukL) </td> | ||
| <td><a target="_blank" href="https://github.com/dpwns523"><img src="https://avatars.githubusercontent.com/u/84260096?v=4" width="100px"></a> <br> [@dpwns523](https://github.com/dpwns523) </td> | ||
| </tr> | ||
| </table> |