Personal Project : Meeting
React 심화 주차 개인 과제 모임 웹애플리케이션 만들기
📋목차
프로젝트 소개
- 모임을 위한 웹 애플리케이션이다.
- 로그인을 통해 사용자는 모임을 만들 수 있고, 만든 모임이 진행 중인지 마감됐는지를 스위치로 켜고 끌 수 있다.
- UX를 생각했을 때 로그인 화면 이후 바로 리스트가 보여지는 것이 좋다고 판단하였다. 진행중이거나 마감인 모임을 한눈에 볼 수 있으며 바로 모임을 만들 수도 있게하였다.
개발 환경
기능 소개
1. 모임 추가 기능
2. 모임 삭제 기능
3. 변경 기능 (진행중 & 마감)
4. 본문 수정 기능(모달창)
5. 회원가입 기능
6. 로그인 기능
7. 미로그인시 다른 페이지 접속 차단 기능
개발 과정
1. 모임 추가 기능
- 모임명, 모일 날짜, 모일 장소, 모임 내용을 받아 리스트를 받아 모임을 추가하는 기능이다. 모임 생성시 바로 리스트 페이지로 이동하도록 설계하였다.
2. 모임 삭제 기능
- 삭제 버튼을 누를 시 DB에 있는 모임 리스트의 ID와 삭제 클릭이 된 리스트의 ID를 매칭을 시켜 그 리스틀 제외하는 기능이다.
3. 변경 기능 (진행중 & 마감)
- MUI 라이브러리에서 가져온 스위치를 활용했고, 스위치가 클릭 될때마다 모임의 마감 진행을 표시해주었다.
4. 본문 수정 기능(모달창)
- 본문 수정 버튼을 클릭스 본문 내용을 그래도 Input창에 value 값으로 넣어주었고, 그 내용을 토대로 다시 수정된 내용으로 변경하여 리스트에 적용 시켰다.
- 수정할페이지는 모달창으로 만들었고, 모달창 외부를 클릭시 모달창이 꺼지는 기능이 있다. 수정이 됐거나 모달창이 꺼져도 해당페이지에 머무르게 만들었다.
5. 회원가입 기능
- 아이디/비밀번호를 작성해 회원가입을 진행하도록 했고, 중복 아이디일 경우 알림이 뜨도록 기능을 구현했다.
6. 로그인 기능
- 서버로부터 아이디 비밀번호를 인증하도록 했고, 인증시 토큰값을 받아와서 쿠키에 저장하는 기능을 구현했다.
7. 미로그인시 다른 페이지 접속 차단 기능
- 쿠키에 저장된 토큰이 없을 경우 다른페이지에 접속이 되지않고, 로그인페이지로 접속시켜 로그인을 유도하는 기능을 구현했다.
기능 사진
도전을 즐기는 자