1주차 진행 #1
Description
📌 기본 질문
1. 이 앱을 언제 사용하나요?
개발과 관련한 또는 IT와 관련된 스터디를 찾고 같이 공부하고 소통하고 싶을 때 사용합니다.
2. 제약 조건은 무엇인가요?
- 스터디를 주최하고 싶은 사용자는 스터디를 위한 게시글 또는 소개글을 비롯한 방?을 만듭니다.
- 사용자는 자신이 원하는 스터디가 있을 때 참가 신청 기간 동안 참가 신청을 할 수 있습니다.
- 스터디에 참여한 사용자끼리는 채팅을 자유롭게 할 수 있습니다. (시간이 있으면..)
3. 구체적인 사례는 무엇인가요?
- 사용자는 로그인을 해야 스터디를 만들거나 참여할 수 있습니다.
- 메인 페이지
- 스터디 목록이 카테고리 별, 태그 별로 스터디 목록이 조회될 수 있습니다.
- 소개 페이지
- 참여하고 싶은 사용자는 신청 기간 동안 참가 신청을 한 뒤, 주최하는 사용자는 참가 승인을 해줘야 스터디에 참여할 수 있습니다.
- moment.js와 react-momnet를 사용하여 실시간으로 신청 마감 시간이 얼마나 남았는지 알려줄 수 있습니다. (예를 들어, 1시간 후 마감, 2일 후 마감.) 실시간으로 스터디 상태 변경하게 만들기. #9
- 현재 스터디에 참여 인원과 참여 최대 인원 수를 나타냅니다.
- 스터디 모집 글 작성 페이지
- 로그인을 해야 작성할 수 있습니다.
- draft.js와 react-draft-wysiwyg를 사용할까 생각중 입니다.
- 내 정보 페이지
- 현재 내가 참가한 스터디 목록 등을 보여줍니다.
- 스터디 주최자에게는 참가 신청한 사용자에게 참여 여부를 결정할 수 있습니다.
- 채팅을 통해 스터디원끼리 자유롭게 소통하고 지식을 공유할 수 있습니다. [시간이 되면.]
- 스터디를 찾기 위한 사이트 같은 것들은 커넥츠, 캠퍼스픽, OKKY 이 정도인거 같습니다.
- 추후 백앤드를 구현할 생각입니다.
4. 이번주에 구현 할 기능을 우선 순위대로 작성해 주세요.
- 일단, 디자인보단 기능 위주로 해보겠습니다.
- 프로젝트 초기 세팅하기 Initial project settings #2
- 홈 화면이 될 스터디 목록 (json-server 사용)
- 스터디 목록 보여주기 Make study group list Page #3
- 소개화면으로 이동하게 제목에 Link 설정 Add link to study list #5
- 간단하게 CSS 설정해주기 Apply css to study list #8
- 실시간으로 스터디 모집 상태 보여주게 하기 실시간으로 스터디 상태 변경하게 만들기. #9 [Feature] Study status changing in real time #10
- 태그 클릭시 해당 태그를 가진 스터디 목록만 보여주게 하기 [Feature] Filter Study group list #12 스터디 목록을 불러올 때 보고 싶은 태그를 가진 목록만 불러오기. #13
- 스터디 소개 화면 Add link to study list #5
- 간단하게 CSS 설정해주기 Improve css style for study introduce page #14
- 실시간으로 스터디 모집 상태 보여주게 하기 [Feature] Recruitment status on the introduction page #15
- 스터디 신청 상태에 따라 버튼 상태 변경하기 [Feature] Study request button that changes in real time #17