View Code? Open in Web Editor
NEW
This project forked from pray2u/pray2u_homepage_fe
Team Pray2U Official Homepage Frontend Repo
JavaScript 68.57%
CSS 0.28%
HTML 0.54%
SCSS 30.61%
pray2u_homepage_fe's Introduction
PRAY2U(한남대 컴퓨터공학과 동아리 웹 서비스)
- 해당 프로젝트는 한남대 컴퓨터공학과 동아리원들을 위해 제작한 웹 서비스 입니다.
- 공지사항, TIL, 랭킹, SHOP, Event, MyPage, AdminPage로 이루어져 있습니다.
- github 활동을 장려하기 위해 github만으로 로그인이 가능하게 구현하였습니다.
- Front : React, Javascript, Scss, Tailwindcss, jwt, bootstrap, dayjs, react-calendar
- Back-end : MySQL, SpringBoot, jwt, Java
- 버전 및 이슈관리 : Github
- 협업 툴 : Discord
- UI
- 디자인 : 전체 UI/UX 디자인
- 페이지 : 메인, 공지사항, TIL, Ranking, Event, AdminPage
- 기능
- 게시글 작성, 랭킹 포인트 시각화, 일정 확인 및 관리, 관리자 권한(해지,부여), 아이템 등록 승인
- UI
- 페이지 : MyPage, AdminPage, Shop
- 기능
- 로그인(git), 아이템 등록, 출석 체크, 개인 정보 변경, 아이템 구매 승인, 프로필 CRUD
- 전체 개발 기간 : 2023-06 ~ 2023-12
- Git과 Distcord를 이용하여 소통하며 내용을 공유하였습니다.
- 주 1~2회씩 만나 개발 방향과 전체적인 디자인, 기능에 관한 얘기들을 나누며 진행하였습니다.
- 상단 배너
- 로고 : 로고 클릭시 메인 화면으로 이동합니다.
- 공지사항, 이벤트, TIL, SHOP, RANKING : 해당 영역 클릭시 페이지로 이동합니다.
- 사용자 아이콘 : 로그아웃, Mypage, AdminPage(관리자 일 경우)을 확인 할 수 있습니다.
- 그림 이미지, 동아리 소개, 동아리 멤버 소개가 Fullpagescroll로 나타나져 있습니다. (비 로그인시 작동 그림 이미지만을 확인 할 수 있습니다)
| 메인화면 |
멤버 소개 |
 |
 |
- 생성된 공지사항들을 확인할 수 있습니다.
- 공지사항 작성, 수정, 삭제기능이 존재합니다.
| 공지사항 |
 |
- Today I Learn의 의미로 오늘의 학습한 자료들을 각각 업로드하는 페이지 입니다.
- 작성자의 이름을 검색하여 게시글을 확인 할 수 있습니다.
- TIL 작성, 수정, 삭제기능이 존재합니다.
- TIL의 글을 작성한 유저는 point를 획득합니다.
| TIL |
 |
- 출석, TIL 작성으로 얻은 point의 순위를 나타내는 페이지입니다.
- point가 많은 순으로 내림차순 되어 보여집니다.
| Ranking |
 |
- react-calendar로 제작하였습니다.
- title, content, 시간을 설정한 뒤 원하는 날짜를 선택하면 해당 날짜에 일정이 작성됩니다.
- 일정이 존재하는 날짜는 하늘색 점으로 표시하였습니다.
| 이벤트 |
 |
- 프로필 : (유저 이미지, 전화번호, 이메일) 변경, 회원 탈퇴, Github 잔디 확인
- 출석 관리 : 달력에 현재 날짜와 클릭한 달력 날짜가 일치할 경우에만 출석 버튼 활성, 출석 성공시 버튼 "출석 완료"로 변경
- MY TIL : 로그인한 유저가 작성한 TIL 확인
- MY SHOP : 로그인한 유저가 등록한 아이템, 혹은 구매한 아이템 확인 가능(아이템은 point로 구매 가능)
| 프로필 |
출석관리 |
 |
 |
- 유저관리 : 가입되어 있는 유저들의 정보 확인 가능, 관리자 권한 (부여,박탈) 기능
- 아이템 관리 : 사용자들이 올린 아이템들의 승인, 거절
- 주문 승인 : 아이템 구매요청 승인, 거절
| 유저관리 |
아이템관리 |
 |
 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent