보드게임 clue의 질문 기록 판
- 첫번째 Popup Project
- http://clue.zhuny.co.kr
- Page 1
- 첫 화면에서 참가 인원을 입력합니다.
- 나 자신을 포함해서 순서대로 인원을 입력해야 합니다.
- Page 2
- 각 소품 별로 누가 가지고 있을 지에 대한 정보를 표시하는 페이지입니다.
- 가로축은 참가 인원, 세로축은 범인, 장소, 흉기를 나타냅니다.
- 각 셀에는 해당 사람에 대한 추측이 적혀 있습니다.
- 초록 : 추론이나 실제로 카드를 확인하여 해당 카드를 해당 사람이 가지고 있음을 표시합니다.
- 노랑 : 해당 카드를 가지고 있을 경우의 수가 있을 때 표시합니다.
- 회색 : 가지고 있을 가능성이 없는 경우 표시를 합니다.
- 흰색 : Default - 정보가 없는 경우
- Page 3
- 각 질문 별로 기록해 두는 장소입니다.
- 가로축은 범인, 장소, 흉기, 질문자, 답변자를 나타냅니다.
- 세로축은 순번입니다.
- 덧셈 버튼이 있어서 그 버튼을 누르면 세로로 하나가 더 추가됩니다.
- 그 외의 사항
- 모든 페이지는 언제든지 움직일 수 있습니다.
- 새로고침을 했을 때, 이전 기록이 남아 있어서 예전 기록을 사용할 것인지 묻습니다.
- Hour One
- 기본적인 페이지 템플릿을 만듭니다.
- Page 1를 구현합니다.
- 범인, 장소, 흉기 목록을 찾아서 넣습니다.
- Page 2의 가로축과 세로축 셀을 그립니다.
- Hour Two
- 각 장소마다 가로, 세로축에 정보를 입력합니다.
- Page 3에서 기본 테이블만 그립니다. 덧셈 버튼을 누르면 추가가 됩니다.
- 각 셀마다 범인, 장소, 흉기를 선택할 수 있습니다.
- Hour Three
- 새로고침을 했을 때, 예전 기록을 불러올 수 있도록 설정합니다.
- CSS 달기
- 첫번째 시간은 구성을 좀 빡빡하게 해서 10분 정도의 분량을 두번째 시간에 했다.
- 두번째 시간은 반대로 10분 정도 빠르게 끝내서 쉬는 시간을 살짝 조정하였다.
- 세번째 시간은 CSS를 하는 것을 이후에 추가했다.
- 당연히 CSS는 아웃풋 대비 시간을 오래 잡아먹는다.
- 어그로 안끌리는 연습을 해야겠다.
npm install
npm run serve
npm run build
npm run lint
참고하면 좋은 주소들