로그인 시 로그아웃 버튼으로 변경됩니다. |
| 공통 | 헤더 | 마이페이지 | Button | | 해당 버튼을 클릭하여 마이페이지로 이동합니다. |
| 공통 | footer | footer | div
input | | 팀소개(notion team page), 프로젝트 이름, 버그제보 이메일 내용이 들어갈 예정입니다. |
| 공통 | 채팅 | 채팅창 | div | | 각 스터디별 채팅방 입니다. |
| 공통 | 채팅 | 채팅메시지 | div | | 각 스터디별 채팅방 내부 메시지 입니다. |
| 공통 | 채팅 | 채팅입력 | input | Y | 각 스터디별 채팅방 내부 메시지를 작성 합니다.
**** 메시지를 입력하지 않고 전송을 시도하는 경우 메시지를 보내지 않습니다.** |
| | | | | | |
| | | | | | |
| 메인페이지 | | 배너 | Image | | 홈페이지 메인 배너, 버그 관련 또는 광고 등 다양한 이미지가 스와이프로 표시됩니다. |
| 메인페이지 | | 검색 | Input | Y | 검색 란에 텍스트를 입력한 뒤 검색 버튼을 클릭 또는 엔터키 입력 시, 입력된 텍스트로 검색된 서칭페이지로 이동합니다. |
| 메인페이지 | | 명언한줄 | label | | 페이지를 로드할 때마다, 랜덤한 명언이 표시됩니다. |
| 메인페이지 | | 내 스터디(생성) | Button | | 해당 버튼을 클릭하면, 모임 생성 모달 창이 표시됩니다. |
| 메인페이지 | | 내 스터디(카드) | Button | | 해당 버튼을 클릭하면, 해당 모임의 모임페이지로 이동합니다. |
| 메인페이지 | | Today 스터디 목록 | Button | | 금일 예정된 스터디 목록이 표시됩니다.
예정시간이 지난 스터디 목록은 표시되지 않습니다. |
| 메인페이지 | | 인기 스터디 목록 | Button | | 인원이 많고, 발제 수가 많은 스터디를 랭크한 목록이 표시됩니다.
기준은 변경될 수 있습니다. |
| 메인페이지 | | 신규 스터디 목록 | Button | | 신규 생성된 스터디 목록이 표시됩니다. |
| 메인페이지 하위 | 모임 생성 모달 | 모임 이름 | Input | Y | 생성할 모임의 이름을 작성합니다.
모임 이름은 2자 이상입니다. |
| 메인페이지 하위 | 모임 생성 모달 | 카테고리 | Select | Y | 생성할 모임의 스터디 카테고리를 설정합니다.
EX) 경제, 부동산, 인문학, 철학 ... |
| 메인페이지 하위 | 모임 생성 모달 | 모임 소개글 | Textarea | Y | 생성할 모임의 소개글을 입력합니다. |
| 메인페이지 하위 | 모임 생성 모달 | 주요활동 지역 | Select | Y | 생성할 모임의 주요활동 지역을 설정합니다.
EX) 서울, 경기, 대전, 부산 ... |
| 메인페이지 하위 | 모임 생성 모달 | 인원 수 | Select | Y | 생성할 모임의 인원 수를 설정합니다.
최대 인원 수는 300명 입니다. 1명 ~ 300명 중에서 생성자가 정할 수 있습니다.
여기서 설정한 인원 수를 초과하여 모임에 가입할 수 없습니다. |
| 메인페이지 하위 | 모임 생성 모달 | 모임 이미지 | File | N | 생성할 모임의 이미지를 업로드합니다. |
| 메인페이지 하위 | 모임 생성 모달 | 시작하기 | Button | | 해당 버튼을 클릭하여 모임을 생성합니다.
메인페이지 하위 내 필수 입력 값이 모두 입력되어야 합니다.
모임 생성 완료 시, 모임페이지로 이동합니다. |
| 서칭페이지 | | | Button | | 모임 전체 리스트가 조회됩니다. 리스트를 클릭하여 자세한 정보를 볼 수 있습니다.
표시되는 정보 : 지역, 카테고리, 모임 이름, 모임 정보, 인원수 |
| 서칭페이지 | 모임 정보 아코디언 | 모임 정보 | Button | | 리스트를 클릭하면 해당 모임의 자세한 정보(모임 페이지의 모임 정보)가 아코디언 형식으로 나타납니다.
”보러가기” 버튼을 클릭하면 해당 모임 페이지로 이동합니다. |
| 서칭페이지 | | 모임 검색 | Input | | 검색 란에 텍스트를 입력한 뒤 검색 버튼을 클릭하면, 모임 이름과 모임 정보 데이터가 조회됩니다. |
| 서칭페이지 | | 카테고리 검색 | CheckBox | | 카테고리를 클릭하면 카테고리 별로 나눠진 CheckBox버튼이 펼쳐집니다. CheckBox버튼을 클릭하면 해당 카테고리의 데이터가 조회됩니다. 해당 CheckBox버튼은 여러개 선택이 가능합니다. |
| 서칭페이지 | | 지역 검색 | Select | | 지역 검색을 누르면 select가 펼쳐지고 지역을 선택할 수 있습니다. 지역 검색은 1가지만 가능합니다. |
| 마이페이지 | 내정보 | 닉네임, 이미지 | | | 로그인 되어있는 회원정보를 표시합니다.
표시되는 정보 : 닉네임, 이메일, 프로필사진 |
| | 내정보 | 상태메세지 수정하기 | Button | | 상태메세지를 수정할 수 있습니다. |
| | 내모임 | 내가 만든 모임 | Button | | 내가 만든 모임으로 이동합니다.
표시되는 정보 : 지역, 카테고리, 가입 인원 수, 스터디 발제 수, 모임 소개 |
| | 내모임 | 각 모임 카드 | Button | | 카드 하나를 클릭하면 가입된 모임으로 이동합니다.
표시되는 정보 : 모임 이름, 지역, 카테고리, 모임 소개 |
| | 내 스터디 | 참여한 스터디 | Button | | 내가 참여한 스터디 목록을 표시합니다.
스터디 목록(아코디언)
ㄴ Header : 스터디 제목, 스터디 일시, 참여자 목록,
ㄴ Body : 스터디 장소, 스터디 인원 수, 스터디 공지, 스터디 지도, 스터디 노트 |
| | 내 스터디 | 내가 만든 스터디 | Button | | 내가 만든 스터디 목록을 표시합니다.
스터디 목록(아코디언)
ㄴ Header : 스터디 제목, 스터디 일시, 참여자 목록,
ㄴ Body : 스터디 장소, 스터디 인원 수, 스터디 공지, 스터디 지도, 스터디 노트 |
| | | | | | |
| | | | | | |
| 모임페이지 | 모임 소개(상단) | 카테고리 태그 | Label | | 모임 방 생성할 때 작성한 모임 카테고리가 표시됩니다. |
| 모임페이지 | 모임 소개(상단) | 지역 태그 | Label | | 모임 방 생성할 때 입력한 지역이 도를 기준으로 표시됩니다. |
| 모임페이지 | 모임 소개(상단) | 모임 이름 | Label | | 모임 방 생성할 때 입력한 모임 이름이 표시됩니다. |
| 모임페이지 | 모임 소개(상단) | 모임 가입버튼 | Button | | 참가 버튼을 누르면 해당 모임에 참여합니다.
참가가 완료되면 탈퇴 버튼으로 바뀝니다. |
| 모임페이지 | 모임 소개(상단) | 모임 이미지 | Image | | 모임 방 생성할 때 업로드 한 이미지가 표시됩니다. |
| 모임페이지 | 모임 소개(상단) | 모임 소개글 | Textarea | | 모임 방 생성할 때 작성한 모임 소개글이 표시됩니다. |
| 모임페이지 | 모임 소개(상단) | 함께하는 사람(조회) | List | | 모임에 참여한 사람들이 리스트 형식으로 표시됩니다.
표시되는 정보 : 프로필사진, 이름 |
| 모임페이지 | 모임 소개(상단) | 함께하는 사람(전체보기) | Modal | | 모임에 참여한 모든 사람들을 표시합니다.
표시되는 정보 : 프로필사진, 이름 |
| 모임페이지 | 모임 소개(상단) | 함께하는 사람(전체보기) 내보내기 | Button | | 모임에 참여한 사용자를 내보냅니다.
내보내기 권한은 모임장이 가집니다. |
| 모임페이지 | 모임 소개(상단) | 가입 인원 수 | Label | | 해당 모임의 가입된 인원 수를 표시합니다. |
| 모임페이지 | 모임 소개(상단) | 스터디 발제 수 | Label | | 해당 모임에서 발제한 스터디 수를 표시합니다. |
| | | | | | |
| // 추가분 | | | | | |
| 모임페이지 | 스터디 목록(하단) | 스터디 생성(+버튼) | Button | | 스터디 생성, 수정 모달 창을 띄어줍니다. |
| 모임페이지 | 스터디 목록(하단) | 스터디 제목(title) | Input | Y | 스터디 제목을 입력합니다. |
| 모임페이지 | 스터디 목록(하단) | 스터디 일자(datatime) | Select | Y | 스터디 일자를 선택합니다. Selector 중 ‘분’ 에 해당하는 Selector는 10분 간격으로 리스트를 보여줍니다. |
| 모임페이지 | 스터디 목록(하단) | 우편번호찾기 | Input | | 카카오맵 API를 통해 받아온 주소를 입력하여 input을 통해 보내줍니다. |
| 모임페이지 | 스터디 목록(하단) | 상세주소 | Input | | API로 검색할 수 없는 부분을 기입하여 input을 통해 보내줍니다. |
| 모임페이지 | 스터디 목록(하단) | 인원 수 제한 | Input | | 최대 인원 수는 300 이하로 제한합니다. |
| 모임페이지 | 스터디 목록(하단) | 금액 | Input | | 스터디 생성시 스터디 1회 필요 금액을 입력할 수 있습니다. |
| 모임페이지 | 모임페이지 | 스터디 공지 | textarea | | 스터디에 필요한 공지정보를 입력 할 수 있습니다. |
| | | | | | |
| | | | | | |
| | | | | | |
| 모임페이지 | 스터디 목록(하단) | 스터디 목록(조회) | List | | 해당 모임의 스터디 목록을 표시합니다.
스터디 목록(아코디언)
ㄴ Header : 스터디 제목, 스터디 일시, 참여자 목록,
ㄴ Body : 스터디 장소, 스터디 인원 수, 스터디 공지, 스터디 지도, 스터디 노트 |
| 모임페이지 | 스터디 목록(하단) | 스터디 목록(더보기) | Button | | 해당 스터디에 대해 사용할 수 있는 기능을 표시합니다. |
| 모임페이지 | 스터디 목록(하단) | 스터디 목록(수정) | Button | | 해당 스터디의 내용을 수정합니다.
스터디를 수정할 수 있는 팝업 창이 표시됩니다. |
| 모임페이지 | 스터디 목록(하단) | 스터디 목록(삭제) | Button | | 해당 스터디를 삭제합니다.