당일 번개를 위한 React 웹 어플리케이션을 만들어볼 것이다. 유저들이 당일 번개를 모집하는 게시물을 작성해 번개 모임을 모집하거나, 이미 모집중인 게시글을 보고 참여할 수도 있다.
일반 게시판과 차이점이 있다면, 게시글을 통해 당일 내 번개 모집과 마감이 이뤄지기 때문에 시간 단위를 체크/강조 해야 하는 것이고, 번개 시간이 지난 게시글은 마감처리 해줘야 하는 것이 있다. 또한 게시글 내에서 해당 번개에 참여 의사를 나타내기 위한 참가하기 버튼이 있다는 것도 일반 게시글과 다른 성격을 가진다. 참석하기 버튼으로 파생되는 유저의 참석 여부와 번개 참여 인원수를 관리해줘야 한다. 전체 페이지는 11~13개 분량이 될 것으로 예상된다. (일부를 모달로 처리할지, 페이지로 처리할지에 따라 1~2페이지 정도 차이가 발생한다.)
- 메인 페이지, 검색 페이지
- 글 상세 페이지, 글 작성 페이지, (카카오맵 검색 페이지), 글 수정 페이지
- 로그인 페이지, 회원가입 페이지, 이메일 인증 페이지, (회원가입 성공 페이지)
- 프로필 페이지, 회원 정보 수정 페이지, 회원 탈퇴 페이지
아래 페이지 구성을 정리해 놓은 것 중 📌📌📌 표시는 논의가 필요한 부분들이거나 아직 확정되지 않은 부분들!
메인 / 검색 페이지
- 메인 페이지 (비로그인 ⭕️, 로그인 ⭕️)
- 상단 네비게이션 바
- 로고, 검색창(키워드 및 지역 검색), 로그인 버튼, 글쓰기 버튼 ➡️ 로그인 여부에 따라 로그인/글쓰기 버튼 전환!!
- 마감 임박 번개글 목록 (카드 형식, 페이지네이션)
- 번개 마감 1시간 이내의 번개 모집글 모음
- 카드 or 글 제목 클릭 시 상세 페이지로 이동 📌📌📌
마감 임박 문구, 제목, 본문 일부, 닉네임, 장소, 참여 인원수/모집 인원수, 번개 일시, 번개 마감까지 남은 시간
- 실시간 최신 번개글 목록 (카드 형식, 페이지네이션)
- 작성 시간 1시간 이내의 번개 모집글 모음
- 카드 or 글 제목 클릭 시 상세 페이지로 이동 📌📌📌
NEW 문구, 제목, 본문 일부, 닉네임, 장소, 참여 인원수/모집 인원수, 번개 일시, 번개 마감까지 남은 시간
- 상단 네비게이션 바
- 검색 페이지 (비로그인 ⭕️, 로그인 ⭕️)
- 상단 네비게이션 바
- 상단 네비게이션 바의 검색 기능을 통해 접근 가능
- 검색 결과 번개글 목록 (카드 형식, 무한 스크롤)
- 검색 결과에 따른 번개 모집글 모음
- 카드 or 글 제목 클릭 시 상세 페이지로 이동 📌📌📌
- 여기도 작성, 마감시간에 따른 마감 임박, NEW 문구 표시? 📌📌📌
- 모집 마감된 게시글은? 📌📌📌
- 제목, 본문 일부, 닉네임, 장소, 참여 인원수/모집 인원수, 번개 마감까지 남은 시간
글 상세 / 글 작성 / (카카오맵 검색) / 글 수정 페이지
- 글 상세 페이지 (비로그인 ❌, 로그인 ⭕️)
- 상단 네비게이션 바
- 글 내용 (제목, 본문,
작성 일시,번개 일시, 작성자 닉네임, 장소, 참여 인원수/모집 인원수, 번개 마감까지 남은 시간, 참석중인 유저들의 닉네임) 📌📌📌 - 댓글창 (댓글 쓰기, 댓글 목록, 본인 댓글 삭제, 본인 댓글 수정)
- 번개에 대한 소통을 댓글로 진행하는데 삭제는 몰라도 수정은,, 적절하지 않을지도?
- 참석하기 버튼을 눌러서 번개에 참석 예약(?)을 하고 댓글을 통해 소통할 수 있다.
- 해당 번개에 참석중이라면 참석하기 버튼 대신 참석 취소하기 버튼을 보여준다.
- 글 작성 페이지 (비로그인 ❌, 로그인 ⭕️)
- 상단 네비게이션 바
- 네비게이션 바의 글쓰기 버튼 클릭 시, 해당 페이지로 이동
- 돌아가기 버튼, 작성완료 버튼
- 장소 지정은 카카오맵 apk를 사용해 앱 내에서 지도를 띄움
- 제목, 본문, 장소(자동 입력), 번개 시간, 모집 인원수 작성 후 제출
- 카카오맵 검색 페이지 (비로그인 ❌, 로그인 ⭕️)
- 장소 지정을 위한 카카오맵 띄우는 방식 택 1 📌📌📌
- 1) 모달 방식 : ui/ux적으로는 페이지가 더 나은데 state 관리하기가 편함
- 2) 페이지 방식 : 페이지 이동하면서 state가 날아가기 때문에 작성 글 임시 저장기능 같은 게 있어야 됨
- 돌아가기 버튼 or 끄기 버튼
- 검색 결과 오버레이
- 오버레이 내 장소명 클릭 ➡️ 장소 확정 여부를 확인하는 모달 띄움 ➡️ 확인 버튼 클릭하면 글 작성 페이지로 이동
- 장소 지정을 위한 카카오맵 띄우는 방식 택 1 📌📌📌
- 글 수정 페이지 (비로그인 ❌, 로그인 + 본인 ⭕️) 📌📌📌
- 상단 네비게이션 바
- 돌아가기 버튼, 작성완료 버튼
- 번개 시간을 조정할 수 있는 범위? 📌📌📌
- 미룰 수는 있어도 당길 수는 없다던가
- 모집 인원수를 참여 인원수보다 적게 줄여 수정 못하도록 📌📌📌
로그인 / 회원가입 / 이메일 인증
- 로그인 페이지 (비로그인 ⭕️, 로그인 ❌)
- 상단 네비게이션 바
- 이메일, 비밀번호 입력 후 로그인 버튼 클릭해서 로그인
- 폼 하단에 회원가입 버튼, 인증번호 인증 버튼(optional)
- 로그인 성공 시, 로그인을 시도했던 이전 페이지로 이동
- 회원가입 페이지 (비로그인 ⭕️, 로그인 ❌)
- 상단 네비게이션 바
- 이메일, 닉네임, 비밀번호, 비밀번호 확인 입력 후 이메일 인증하기 버튼 클릭하면 이메일 인증 페이지로 이동
- 하단에 돌아가기 버튼, 인증 페이지로 이동하는 버튼
- 이메일 인증 페이지 (비로그인 ⭕️, 로그인 ❌)
- 상단 네비게이션 바
- 이메일로 보낸 인증번호로 인증까지 회원가입 완료해야 된다는 안내 메시지 띄워주기
- 이메일은 회원가입 페이지에서 state 넘겨줘서 자동 입력 (수정 불가)
- 인증번호까지 입력하면 회원가입 완료
- 회원 가입 성공 시,
- 1) 성공 모달 띄워주고 로그인 페이지로 이동
- 2) 페이지 따로 생성해서 완료 메시지와 홈 버튼, 로그인 버튼으로 선택권 주기
- (optional) 로그인 페이지에서 따로 시도할 때 (회원가입 절차까지 하고 이메일 인증을 하지 않았을 경우를 위해)
- 이때는 이메일 입력/수정 가능하게 해야 함
- 성공 시, 성공 모달 or 성공 페이지
프로필 / 회원 정보 수정 / 회원 탈퇴 페이지
- 프로필 페이지 (비로그인 ❌, 로그인 + 본인 ⭕️)
- 상단 네비게이션 바
- 비로그인 유저 및 본인 외 다른 유저들은 접근 불가
- 이모지, 닉네임, 이메일 (이메일은 일부 *처리하는 게 나을까)
- 내가 작성한 번개글 목록
- 회원 정보 수정 버튼 ➡️ 회원 정보 수정 페이지로 이동
- 회원 탈퇴 버튼 ➡️ 회원 탈퇴 페이지로 이동
- 회원 정보 수정 페이지 (비로그인 ❌, 로그인 + 본인 ⭕️)
- 상단 네비게이션 바
- 닉네임, 비밀번호 변경 버튼 따로 @@
- 닉네임 변경 폼
- 수정 인풋, 중복 확인 버튼, 닉네임 변경 버튼
- 비밀번호 변경 폼
- 현재 비밀번호, 새 비밀번호, 확인 비밀번호 인풋, 비밀번호 변경 버튼
- 하단에 돌아가기 버튼
- 회원 탈퇴 페이지 (비로그인 ❌, 로그인 + 본인 ⭕️)
- 상단 네비게이션 바
- 유저 닉네임(수정 불가), 이메일(수정 불가), 비밀번호 입력창
- 돌아가기, 탈퇴하기 버튼
- 탈퇴하기 버튼 클릭 시, 컨펌 모달창을 통해 탈퇴 여부 재확인
- 탈퇴 성공 시, 메인 페이지로 이동
starter