프로젝트에서 리뷰부분을 맡았다.
리뷰에서 필요한기능이란 별점기능 리뷰쓰기 기능 사진올리기 기능 등이있다.
이것들이 선행되고 나서야 서버와 통신을 해도 주고받을것이 생긴다.
이번에 포스팅할 기능은 별점기능이다.
나는 좀더 이쁜별점을 위해 클릭하면 점수를 책정하는 그런기능을 제쳐뒀고
팀원끼리 의논한결과 장난처럼 나온 슬라이드기능을 구현해보고자 맘을 먹었다.
하지만....너무너무 어려웠음에 이렇게 포스팅으로 기록을 남겨보도록 한다.
구상부터 기록하자면
시작은 useState로 별점을 저장하는데 별점은 인풋으로 주기로했다.
input에는 range라는 속성이있다. 이게 아주중요한부분이다.
step은 1로 하나씩 올라가게 하고 미니멈은 0부터 맥시멈은 10으로 설정했다.
총점 10부터 천천히 올라가며 내가설정해둔 별점을 채워가는 방향으로 구성하고자 했다.
별점의 모양은 텍스트로 별의색을 바꿔가기에는 창대한 나의 희망과는 너무나도 대비되는 비루한결과물이 나올거같지않은가?
과감히 우리프로젝트의 이름인 멜론플레이트를 따와서 멜론으로 5개를 채워주도록했다.
어? 그런데 어떻게 색을 바꾸지?
한참을 고민한결과 div의 css를 변경해 오버플로우 히든을 쓰기로했다.
그렇게되면 필요한것은 3가지.
1 . 인풋박스
2 . 색이살아있는 멜론
3 . 색이죽어있는 멜론
일단은 이쁜멜론그림을 저작권프리 로 구해와 흑백으로 변경하고 저장했다.
혹여나 나중에 별점갯수를 바꾸거나 5개로표현하기 힘든 스코어로 변경할때 힘들수 있기때문에 사진을 붙히지않고 div에 5개를 깔아놓기로했다.(이부분때문에 css가 힘들어진다.)
제일 아랫단에 흑백멜론을 두고 position absolute로 컬러멜론 그위에 인풋박스를 햄버거처럼 쌓아올린다.
이렇게되면 우리에게 보이는 화면은 이쁜컬러멜론 5개 위에 흉측한 인풋range가 생긴다.
당장 인풋css에 all:unset 을 달아주도록하자
이렇게되면 보이는건 컬러멜론이지만 컬러멜론사진을 끌고오지않고 투명한 인풋박스를 조절하게 된다.
혹여나 자꾸멜론이 잡히게된다면 z-index에 점수를 주어 끌어올려놓도록하자.
이제 우리가 필요한건 점수에 따라 흑백의 멜론이 컬러 멜론으로 변환되어야 하는 것이니
컬러멜론에 css 에 overflow: hidden 을 달아주자
그리고 width는 템플릿 리터럴을 이용해 인라인으로 달기로했다.
인라인으로 스타일변경을 하면 후에 수정이 어렵다는 단점이 있으나.
div박스에 따로 달아주는 거라 부득이하게 css고자인 나로썬 어쩔수없이 달게 되었다고 변명을 해본다.
width: `${melonPoint * 10}%` 멜론포인트 가 1씩늘어가니 x10을 한다면 10씩 10개 100%를 맞출수 있다.
결과적으로
인풋값이 늘어감에 따라 부모요소에 대비해 컬러멜론의 width가 0%부터 100% 까지 이동하며 보일듯 말듯 흑백멜론을 보여주게된다.
여기에 부드러운 이동을 위해 transition: width 를 달아주도록하자^^
