on
[항해99 3기] D+68
[항해99 3기] D+68
오늘은 2021년 11월 19일 금요일이다~~
벌써 한 주가 끝나가는구나~~~
지금은 오전 5시...ㅎㅎ 자세히 적는게 너무 귀찮아서 매일 쓰는 메모장의 내용을 붙인다!
메모장
datepicker.....그냥 input type="datetime-local"로 대채하자!!!!!!!!
-> 지금은 작성페이지들어가면 dateSelect컴포넌트에서 바로 오늘날짜를
vote모듈의 deadline에 저장하는데 이걸 투표 작성하기 버튼 누를때
deadline 값이 없을 때 실행시키기!!!!!!!
어차피 input으로 바꾸면 ref 사용해서 하면 될 듯
-> datetime-local은 시간까지 포함인데 date는 시간은 없이 날짜만 됨~!
https://newbedev.com/javascript-input-type-date-min-today-code-example
https://www.codegrepper.com/code-examples/html/input+type%3Ddate+min+today
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local
----------------------------------------------------------------------------
https://hianna.tistory.com/326
date.UTC() 가 뭐징
https://www.delftstack.com/ko/howto/javascript/javascript-subtract-dates/
---------------------------------------------------------------------------
QA
- 다크모드 한 번 생각해보기
- 로그인 UI PPT로 그려보기
- 브라우저 줄이면 한 없이 줄어들음 min-width를 줬으면 좋겠음.
투표 페이지
- 작성 페이지 input 제한 숫자 넘으면 css 효과 넣기
- input type=date랑 textarea 폰트 적용시키기
- input type=date 에 커서 포인터
- mbti별로 투표 수도 저장
- 투표하는 액션추가
- 작성자 mbti도 보여주기^^
- 투표하고 나서 mbti를 바꾸면..??????????????????????????
이건 백에서 해줘야할 듯...
- 작성자 닉네임 밑에 투표 등록 날짜도 넣어주기
- 수정/삭제 버튼 만들기
- 수정할 때는 이미 투표된 표가 있으면 마감일만 수정할 수 있도록 하기
- 카카오톡 공유 추가
- 좋아요 기능 추가
- 투표 리스트 컴포넌트 만들기
리뷰페이지 만들기
마이페이지
- 좋아요한 글과 내가 작성한 투표 볼 수 있도록 하기
관리자페이지
- 상황별 / 투표 / 리뷰 글 볼 수 있도록 카테고리 만들기
주소 잘못되면 홈화면으로 이동할 수 있게....페이지...하나...not found 만들기..
각 MBTI를 설명해주는 인터렉티브!한 페이지도 하나 만들고 싶다.
--------------------------------------------------------------------------------------------
한 것들
1. 투표 페이지
- 로그인한 사람만 투표할 수 있도록 (O)
- 로그인한 사람만 투표 작성할 수 있도록 (O)
- 투표 작성할 때 작성자 정보도 저장 (O)
- 투표 저장할 때 datepicker 적용해서 마감일도 저장 (O)
=> input type=date로 변경했어...ㅎㅎ 아직 마감일 계산은 안 끝남. datepicker는 값이 객체로 저장되서 뺀다음에 (계산하면 밀리세컨드로 저장되서) (1000 * 60 * 60 * 24)로 나눠줘야 됬는데 저 input date는 그냥 문자열로 넘어오는듯???
아 지금생각하니까 어차피 그걸로 new Date()로 객체 새로 만들어서 똑같이 하면 되겠다.
- 총득표수가 0일때(초기값) 투표바를 50%50%로 채워넣기(O)
- 마감일과 작성자 보여주기(O)
- 마감일 지난 투표는 투표하지 못하게 막음 -> 마감일지나면 버튼을 disabled처리(O)
- chart js 적용 -> 다듬으면 됨 (O)
- 투표 결과 버튼 누르면 div height가 줄어들고 늘어들음 스무스하게!
overflow: hidden;
height: auto;
transition: height 0.5s ease-out;
- 투표 결과 뷰 꾸미기 (O)
- input maxlength 속성을 이용해서 input안에 글자수 제한 (O)
- 투표 결과의 div height를 바꿀 때 스무스하게 높이가 변경되었으면 했다! (O)
https://css-tricks.com/using-css-transitions-auto-dimensions/
그밖에두 더 있어....
----------------------------------------------------------------------------------------
chart js 임포트할 때
https://www.inflearn.com/questions/194783
chart js 크기, 위치 이동할 때 option의 responsive를 false로 바꿔야된데!!!
https://kongda.tistory.com/25
https://velog.io/@odobenus/chartjs-multi-axis-bar-chart
https://www.w3schools.com/js/js_graphics_chartjs.asp
-------------------------------------------------------------------------------
볼수록 애니메이션을 잘 넣고 싶다는 생각이 든다!!!!
라이브러리들도 잘 사용하고 css도 더 공부해서 애니메이션을 잘 줄 수 있는 개발자가 되야지!!!!
pinterest에 있는 디자인 그대로 인터렉티브한 사이트를 직접 만들어볼거다!
이런걸로 개인 프로젝트 해보면 좋을 것 같다.
from http://happykale.tistory.com/37 by ccl(A) rewrite - 2021-11-20 05:28:21