프로젝트 화면 구현하기

[yu-heejin]

• 프로젝트 화면 구현하기
• backend에서 요청 받아서 게시물 띄우기
• Drag and Drop,
• emoji picker
• 회의 시간 설정 Modal
• project list 메뉴
• board list component + 칸반보드 추가 Modal
• 검색 뷰
• task card

[yu-heejin]

프로젝트 화면

• 프로젝트 상단에 프로젝트 이름과 소속된 사용자의 계정 프로필 사진을 띄워준다. 3명 이상의 사용자가 소속되면 옆에 + 숫자를 표시한다. 숫자를 클릭하면 모든 사용자의 정보를 볼 수 있다 → 해당 프로젝트의 아이디를 이용하여 같은 프로젝트에 소속된 사용자의 email 정보를 모두 받는다. 이후 email 데이터를 이용하여 User에서 프로필 사진과 이름 등의 사용자 정보를 얻어온다. (project table의 email 데이터 참조)
• 프로젝트 생성 날짜, 업데이트(수정) 날짜도 같이 띄워준다. → 생성 날짜와 업데이트 날짜 데이터를 참조한다 (project table)
• 프로젝트 안에는 각 Task Card를 담을 수 있는 List가 존재한다. ‘추가하기’를 클릭하여 List의 제목을 입력하면 리스트가 등록된다. → ‘추가하기’ 버튼 클릭 시 소속된 리스트 아이디를 참조하여 task card 추가 시 해당 리스트 안에 추가된 카드를 보여준다. (project table → list_include_task table → task_card table)
• 왼쪽에는 사용자들이 직접 입력한 시간을 기준으로 적절한 시간을 계산한 후, 원하는 결과 값을 선택하면 회의 시간으로 설정되고 슬랙을 통해 알림과 회의 링크를 보내준다. 시간은 각 국가 기준으로 입력하고, 시차를 고려하여 계산하도록 한 후 적절한 결과 값을 도출한다. → 사용자들이 입력한 시간은 따로 DB에 저장하지 않는다. 다만 도출 & 선택한 결과 값은 DB에 저장하여 프로젝트 화면에 보여주고, 해당 시간에 맞춰 슬랙에 알림을 보내준다(project table에 meet_time 필드를 추가한다.)
• 각각의 list id, task id는 각 리스트와 카드를 구분해주면서 동시에 순서 역할을 한다. 먼저 만들어진 순서대로 id가 부여되고, id 순서대로 화면에 보여준다. 또한 id를 참조하여 소속된 리스트도 알 수 있다.
• (선택 사항) 왼쪽에 접속한 사용자가 속한 프로젝트 리스트를 보여준다. 해당 프로젝트의 제목을 클릭하면 그 프로젝트로 바로 연결될 수 있다. (Project table)

[yu-heejin]

칸반보드 화면

• 카드를 클릭하면 카드 제목, 상세 내용, 생성 및 업데이트(수정) 날짜, 일정 시작 및 종료 날짜, 소속된 회원(@Mention), 체크 리스트, 업로드된 파일 목록과 댓글, 라벨을 볼 수 있다. → DB에 각각의 요소를 저장한다. 소속된 회원은 해당 회원의 email을 참조하여 User table에서 해당 회원의 프로필 사진을 참조한 후 화면에 보여준다. (task_card table, user_account table)