# index page

- [ ] 이벤트 번호 입력 inputBox
- [ ] 이벤트 참가하기 버튼
- [ ] 클릭시 데이터베이스에 요청
- [ ] 이벤트가 없을 경우 안내문구 출력
- [ ] 이벤트 있을 경우 해당 이벤트 게스트 페이지로 이동
- [ ] 로그인 링크
- [ ] 클릭하면 naver,google 로그인 모달 열림
- [ ] 로그인 기능

# hostpage - loading 중 화면 표시

- 처음 페이지 로딩시
1. 빈 화면에 로고 하나만 표시
2. 이후 일부 로딩되면 네비바와 탭바의 모양만 있는 하면을 표시한다
3. 네비비와 탭바가 로딩 완료하면 표시하고 탭에 해당하는 내용을 body에 표시한다.
4. body 정보 fetch에 대해 로딩 아이콘 넣는다

# host page - header

- [ ] 로고

- [ ] 클릭시 ??????

- [ ] 유저 설정 버튼
- [ ] 클릭시 유저 설정 툴팁 메뉴 열림

# host page - nav bar

- [ ] 이벤트, 과거기록, 통계 탭 있음
- [ ] 왼쪽 끝에 위치
- [ ] 이벤트 설정 버튼
- [ ] 오른쪽 끝에 위치
- [ ] 클릭시 이벤트 설정 모달 열림
- [ ] 현재 이벤트가 없으면 비활성화됨
- [ ] 탭 클릭시
- [ ] 화면 전환
- [ ] 선택된 탭 하이라이트

# host page - 이벤트 body - 공통

- [ ] (공통) 각 컬럼에는 필터버튼(낮은 우선순위)
- [ ] 각 컬럼에는 정렬버튼(낮은 우선순위)

# host page - 이벤트 body - 이벤트 생성

- [ ] 로그인 성공시 데이터베이스에 이벤트 정보 요청
- [ ] 현재 진행중인 이벤트가 없으면 이벤트 만들기 버튼 출력
- [ ] 진행중인 이벤트가 있으면 호스트 실시간 탭 화면을 출력
- [ ] 이벤트 만들기 버튼 클릭시 이벤트 만들기 모달 열기

# host page - 이벤트 body - 질문 검열 column

- [ ] 검열 활성화 버튼

# host page - 이벤트 body - 최신 질문 column

- todo

# host page - 이벤트 body - 인기 질문 column

- todo

# host page - 이벤트 body - 답변된 질문 column

- todo

# host page - 이벤트 body - 투표 column

- todo

# host page - 이벤트 body - 투표 생성 모달

- todo

# host page - 과거기록 body

- todo

# host page - 질문 카드 기능

- todo

# body - 통계 body - 공통

- todo

# body - 통계 body - overview 통계

- todo

# body - 통계 body - 통계 export

- todo

# body - 통계 body - 검색 창

- todo

# body - 통계 body - 질문 통계

- todo

# body - 통계 body - 질문 통계

- todo

# body - 통계 body - 투표 통계

- todo

# body - 통계 body - 이벤트 리스트

- todo

# body - 통계 body - 질문 리스트

- todo

# host page - 이벤트 만들기 모달

- [ ] 입력사항이 있을때 모달창 닫히는 이벤트 발생시

- [ ] 입력사항 삭제 확인 모달 열림
- [ ] 확인 버튼
- [ ] 취소 버튼

- [ ] (공통) 모달 외부 클릭시 모달 창 닫힘
- [ ] (공통)입력 그룹의 입력중 validation 실패시

- [ ] 해당그룹 하단에 메세지 출력

- [ ] 이벤트 이름 입력 그룹

- [ ] validation
- [ ] 최소 글자 1글자 이상
- [ ] 최대 120자(한글 기준)

- [ ] 이벤트 기간 입력 그룹

- [ ] 시작 일자 date picker (연/월/일)
- [ ] 시작 시간 time picker (시/분)
- [ ] 소요시간 time picker (시/분)
- [ ] validation
- [ ] 현재 일자 이후 시작만 선택 가능
- [ ] 최대 소요시간 24시간 분
- [ ] 최소 소요시간 1분

- [ ] 이벤트 해시태그 입력 그룹
- [ ] hashtag
- [ ] 해시태그 추가
- [ ] 해시태그 삭제
- [ ] validation
- [ ] 최대 10개 입력
- [ ] 최소 0개 입력
- [ ] 해시 태그 길이 (1 ~ 40 한글 기준)
- [ ] 이벤트 확인 입력 그룹

- [ ] 확인 버튼

- [ ] validation 실패시
- [ ] 버튼 비활성화
- [ ] 클릭 & validation 성공시
- [ ] 이벤트 생성

- [ ] 취소 버튼
- [ ] 클릭시 모달 닫힘

# guest 페이지 - 화면 구성 : FE

- [ ] 최상단 슬라이드 메뉴 버튼을 구성한다
- [ ] 질의응답메뉴,실시간투표메뉴 nav 바를 구성한다
- [ ] 인기순,투표순 버튼을 구성하고, 질문 숫자를 출력한다.
- [ ] 이름,작성시간,이모지로 구성된 질문 목업을 구현한다.
- [ ] 질의응답을 작성할 수 있는 inputBox 를 구현한다.
- [ ] inputBox 를 클릭하면 질문 양식이 올라온다

# guest 페이지 - 질문 구성 : BE

- [ ] 데이터베이스로부터 데이터를 받아 질문을 구성한다.

# guest 페이지 - 이모지 : FE,BE

- [ ] 이모지 + 버튼을 클릭하면 이모지를 선택할 수 있는 윈도우가 나타난다.
- [ ] 이모지를 선택하면 해당 이모지가 질문에 등록되고 바로 데이터베이스로 전송한다.
- [ ] 이미 존재하는 이모지를 클릭하면 해당 이모지 카운트를 1 증가시키고 바로 데이터베이스로 전송한다.

# guest 페이지 - 좋아요 : FE,BE

- [ ] 좋아요 버튼을 클릭하면 좋아요 카운트를 1 증가시키고 바로 데이터 베이스로 전송한다.

# guest 페이지 - 슬라이드 메뉴 : FE,BE

- [ ] 슬라이드 메뉴 버튼을 클릭하면 회원정보, 회원정보수정, 내질문, 로그아웃이 있는 메뉴가 나타난다
- [ ] 회원 정보수정 메뉴를 클릭하면 회원 정보를 수정하는 모달이 나타난다
- [ ] 회원이름, 회사정보, 이메일 정보를 입력한 후 save 버튼을 누르면 회원정보 데이터베이스를 update 한다.
- [ ] 내 질문을 메뉴를 클릭하면 데이터베이스로부터 내 질문 리스트를 받아와 질문을 모두 표시하는 모달이 나타난다.
- [ ] 내 질문 모달에서 X 버튼을 클릭하면 질문이 삭제된다.
- [ ] 로그아웃 버튼을 클릭하면 로그아웃 된다.

# guest 페이지 - 실시간 투표 : FE,BE

- [ ] 실시간 투표 메뉴를 클릭하면 실시간 투표 탭으로 이동한다
- [ ] 데이터베이스에 현재 투표 정보를 요청해 받아온다.
- [ ] 만들어진 투표가 없다면 투표정보 없음 페이지가 나타난다.
- [ ] 만들어진 투표가 있다면 활성화 된 투표가 나타난다.

# guest page - 로딩중 화면

- todo

# host page - 이벤트 설정 feature FE

- [ ] 톱니바퀴 아이콘을 클릭하면 이벤트 셋팅 창이 모달로 나타난다
- [ ] X 버튼을 클릭하거나 모달 화면 밖을 클릭하면 모달이 꺼진다
- [ ] 이벤트 셋팅 모달 좌측에 일반(general),기능(features) 을 선택할 수 있는 메뉴 구현
- [ ] 해당 메뉴는 마우스 호버에 따라 배경 색이 변경되고, 클릭시 해당 메뉴에 따라 오른쪽 화면이 바뀜

# host page - 이벤트 설정 - 기본 정보 설정

- [ ] dataBase 로부터 현재 설정 정보를 받아와 값을 초기화한다
- [ ] Event name 을 재설정한다
- [ ] start Date를 클릭했을 때 달력 modal 이 나타난다
- [ ] 달력 모달을 클릭하여 startDate를 변경한다
- [ ] end Date를 클릭했을 때 달력 modal 이 나타난다
- [ ] 달력 모달을 클릭하여 end Date를 변경한다
- [ ] event code 를 변경한다
- [ ] 이벤트 링크 오른쪽에 버튼을 클릭하면 클립보드에 주소가 복사된다
- [ ] location 에 도시명을 입력하면 국가 명이 드롭메뉴로 나타난다
- [ ] timeZone 을 선택할 수 있다.
- [ ] save 버튼을 클릭했을 때 eventCode 의 중복을 검사한다
- [ ] eventCode가 중복이 아니면 데이터베이스의 값을 업데이트한다

# host page - 이벤트 설정 - 질의응답 기능 설정

- [ ] dataBase 로부터 현재 설정 정보를 받아와 값을 초기화한다
- [ ] 현재 on/off 상태에 따라 슬라이드 버튼이 구현된다
- [ ] 슬라이드 버튼은 클릭시 on/off 가 토글되고, on 일때 초록색으로,off 일때는 회색으로 버튼이 변경된다
- [ ] 참여자 덧글 버튼을 클릭하면 참가자가 질문에 덧글 달 수 있다는 status 를 토글함
- [ ] 익명질문 버튼을 클릭하면 익명 참여자의 덧글을 허용하는 status 를 토글함
- [ ] 질문닫기 버튼을 클릭하면 더이상 질문이 달리지 않도록 하는 status 를 토글함
- [ ] save 버튼을 클릭했을 때 데이터베이스의 값을 업데이트 한다.

# host page - 이벤트 설정 - 투표 기능 설정 : FE,BE

- [ ] 투표 수 표시 버튼을 누르면 해당 투표수를 표시할것인지에 대한 status를 토글
- [ ] 퍼센트로 표시 버튼을 누르면 각 항목별 득표수가 아닌 퍼센트로 보여줄지에 대한 status 를 토글
- [ ] save 버튼을 클릭했을 때 데이터베이스의 값을 업데이트 한다.

# host page - 유저 버튼

- [ ] 버튼은 원모양이다
- [ ] 사용자 이름의 첫글자가 원안에 표시된다
- [ ] 영문 이름인경우 대문자로 표시한다
- [ ] 클릭시 유저 tooltip이 열린다

# host page - 유저 tooltip 메뉴 - 공통

- [ ] 말풍선 처럼 생기고 말풍선의 뾰족한 부분은 유저 버튼을 가르킨다.
- [ ] 유저 설정 버튼 클릭시 유저 설정 tooltip 이 열린다
- [ ] tooltip의 외부 클릭시 tooltip이 닫힌다
- [ ] tooltip은 좌우 하단에 그림자가 있다.
- [ ] tooltip의 각 항목은 마우스 호버시 회색조로 하이라이트 된다
- [ ] 각 항목은 적절한 아이콘을 가진다.

- [ ] 메뉴의 항목은 다음과 같다

- 유저 정보 설정 항목

- 이름과 이메일 주소를 표시한다.
- edit 버튼 클릭시
- 1. 유저 설정 모달이 열린다

- 로그아웃 항목
- 항목 클릭시
1. 현재 접속한 기기 환경에서 로그아웃한다
2. index 페이지로 이동한다

# host page - 유저 설정 모달 - 공통

- [ ] 유저 tooltip의 유저 정보 설정 항목을 클릭하면 열린다
- [ ] 모달이 열리면 뒷화면은 어두워진다
- [ ] 모달의 외부를 클릭시 모달창이 닫친다.
- [ ] 모달의 x 버튼을 클릭시 모달창이 닫친다
- [ ] 모달에서 사용되는 선택 버튼은 모두 동일한 스타일이다.

# host page - 유저 설정 모달 - 사이드바

- [ ] 모달창 왼쪽에는 사이드 메뉴 바가 있다.
- [ ] 모달창이 열렸을때 사이드 메뉴 바의 항목은 첫번쨰 항목이 선택 되어져있다.
- [ ] 사이드 메뉴 바의 선택된 항목은 배경이 회색조이고 글자는 항목 내용의 타이틀 색상과 동일하다.
- [ ] 사이드 메뉴 바의 항목은 다음 순서이다
1. 일반 설정
2. 이메일 설정
3. 로그인 설정

# host page - 유저 설정 모달 - body

- [ ] 모달창 내용은 사이드 메뉴바의 선택되어진 항목을 표시한다.
- [ ] 모달창은 상하단에 여백이 있다
- [ ] 모달의 내용은 사이드 메뉴 바의 선택된 항목의 내용의 길이에 따라 스크롤 바가 존재한다

- [ ] 내용의 길이가 모달창의 높이를 넘지 않으면 스크롤 바가 존재하지 않는다.

- [ ] 모달 내용의 소분류 타이틀 앞에 적절한 아이콘이 있다.
- [ ] 모달의 소분류간을 구분하는 회색 줄이 있다.
- [ ] 모달의 소분류 타이틀과 내용사이를 구분하는 회색 줄이 있고, 소분류 구분 회색줄 보다는 길이가 짧다.
- [ ] 모달 내용의 소분류는 접기/펼치기 버튼이 있다.

- [ ] 클릭시 소분류 타이틀을 제외한 내용이 접기/펼치기가 토글된다
- [ ] 접기/펼치기 버튼은 소분류가 접어져있으면 위로 꺽인 모양이다.
- [ ] 접기/펼치기 버튼은 소분류가 펼쳐저있으면 아래로 꺽인 모양이다.
- [ ] 소분류가 접혀져있으면 소분류에 대한 설명 내용을 표시한다.
- [ ] 소분류가 펼쳐저있으면 소분류의 내용을 표시한다
- [ ] 소분류 타이틀, 아이콘, 접기 펼치기 버튼은 동일한 색상이다.

# host page - 유저 설정 모달 - 일반 설정

- [ ] 프로필 설정

- [ ] 사용자 정보는 수정 불가하다.
- [ ] 사용자 정보 내용은 회색이다.
- [ ] SSO 로 만든 회원정보의 경우 정보 수정이 불가하다는 설명문이 보인다.
- [ ] 이메일을 표시한다
- [ ] 이름을 표시한다
- [ ] 아이콘은 화면기획서를 참고한다

- [ ] 쿠키 설정

- [ ] 개인 정보 설정 버튼이있다
- [ ] 아이콘은 화면기획서를 참고한다
- [ ] 버튼 클릭시
- 개인정보 설정 모달이 열린다.

# host page - 유저 설정 모달 - 쿠키 설정 모달

- [ ] 모달창의 외부는 어두워진다.
- [ ] 개인정보 설정 버튼이 클릭시 열린다.
- [ ] 모달의 타이틀 영역은 회색조이다.
- [ ] 변경사항이 없이 x버튼이나 모달의 외부를 클릭하면 모달창이 닫힌다.
- [ ] 변상사항이 있는경우 변경사항 삭제 모달창이 나온다
- [ ] 변경사항 삭제 모달창기능은 다음과 같다

- [ ] 모달창의 외부는 어두워진다.
- [ ] 취소 버튼과 삭제 버튼이 있다.
- [ ] 삭제 버튼을 붉은색으로 강조한다
- [ ] 모달의 외부를 클릭해도 모달창이 닫히지 않는다
- [ ] 적절한 모달 제목과 설명문이 있다.

- [ ] 필수 쿠키 설정 항목

- [ ] 왼쪽에 제목과 간단한 설명이 있다
- [ ] 오른쪽에는 슬라이드 버튼이 있다
- [ ] 슬라이드 버튼은 비활성화 되어있다.
- [ ] 왼쪽 오른쪽을 나누는 세로 구분선이 있다.
- [ ] 제목 왼쪽에 인포아이콘이 있다.
- [ ] 인포 아이콘을 호버시 해당 설명을 툴팁 보여준다

- [ ] 통계 및 광고 쿠키 설정

- [ ] 왼쪽에 제목과 간단한 설명이 있다
- [ ] 오른쪽에는 슬라이드 버튼이 있다
- [ ] 왼쪽 오른쪽을 나누는 세로 구분선이 있다.
- [ ] 제목 왼쪽에 인포아이콘이 있다.
- [ ] 인포 아이콘을 호버시 해당 설명을 툴팁 보여준다

- [ ] 저장 버튼
- [ ] 클릭시
- [ ] 1.모달창이 닫힌다
- [ ] 2.설정이 저장된다.
- [ ] 3.설정 저장이 완료되면 화면 왼쪽 하단에 저장 완료 됬음을 알리는 팝업 알림이 생겼다 사라진다.

# host page - 유저 설정 모달 - 이메일 설정

- [ ] 피드백 설정
- [ ] 이벤트 종료후 이메일로 통계정보를 수신할것인여부 확인한다

- [ ] 저장 버튼 클릭시
- [ ] 변경 사항이 저장된다
- [ ] 저장 버튼 클릭후 설정 저장이 완료되면
- [ ] 화면 왼쪽 하단에 저장 완료 됬음을 알리는 팝업 알림이 생겼다 사라진다.

# host page - 유저 설정 모달 - 로그인 설정

- [ ] 다른 기기 모두 로그아웃 하기 버튼이 있다.
- [ ] 버튼은 alert 스타일이다.
- [ ] 버튼 클릭시 로그아웃 확인 모달 창이 뜬다

- [ ] 로그아웃 확인 모달의 기능은 다음과 같다

- [ ] 다른기기 모두 로그 아웃 버튼 클릭시 로그아웃 확인 모달창이 나타난다.
- [ ] 모달창 외부를 클릭하하거나, 취소를 클릭하면 모달창이 닫힌다.
- [ ] 로그아웃 확인 버튼클릭시

- [ ] 1.모달창이 닫힌다
- [ ] 2.다른 로그인된 다른 기기를 로그아웃 시킨다
- [ ] 3.소분류의 다른 기기 모두 로그아웃 하기 버튼이 로딩으로 바뀐다

- [ ] 로그아웃 확인 버튼클릭후 다른 기기에서 모두 로그아웃이 되면
- [ ] 1.버튼은 원래대로 변한다
- [ ] 2.화면 왼쪽 하단에 알림 팝업창이 나타났다가 사라진다.

# docker - 컨테이너 구성 설계

- todo

# CI/CD 조사 및 설정

- todo

# DB - 초기 데이터 mitration

- todo

# DB - 개발용 더미 데이터 mitration

- todo

# DB - 스키마 설계

- todo

# express - user SSO signup

- todo

# express - requset Oath login

- todo

# express - requset logout

- todo

# express - 로그인된 다른기기들 모두 로그아웃

- todo

# express - web api 설계

- todo

# server - 통계정보 엑셀 생성

- todo

# server - request 통계정보 액셀

- todo

# server - 이벤트 완료후 이메일 피드백

- todo

# server - 실시간 정보 업데이트 방식 조사 및 설계

- todo

# server - 동시성 문제 해결

- todo

# server - 성능 테스트 영역 조사 및 선정

- todo

# server - redis cache server setting

- todo

# server - nginx setting

- todo

# server - 클라우드 서버 세팅

- todo

# server - 도메인 주소 확보 및 설정

- todo

# graphQL - 각 모델별 스키마 설계

- todo

# graphQL - primsa study ??

- todo