최종프로젝트 9일차

공용컴포넌트가 수정되어 새로작성하였다.
헤더,바텀네비,레시피카드,게시판카드 이렇게 총 4개를 맡았는데 디자이너분들이 제공했던 규격대로 작성하자니 디테일적인 요소가 많이들어가있는것같다. 텍스트가 일정길이이상 늘어나면 줄임표처리를 하려고했는데 여기서도 처음보는 css속성을 많이 봤다. 특히 2줄이상을 말줄임표적용시킬떈 webkit이라는 속성을 이용했는데 이 webkit속성은 크롬과 사파리 브라우저에서만 제공하는 기능이였다. 인터넷익스플로러에서는 아직제공하지않는다는게 큰 흠인데 여기서까지 적용시킬려면 코드가 매우많이 길어져 우선은 크롬을위한 뷰만 만들어놓고 이후 리펙토링에 다시한번볼계획이다. 그리고 메인페이지 뷰를 작성하는데 피그마기준으로 마진값을 적용시켰는데 차이가 나는것같아 확인해보니 마진상쇄라는 개념이있었다. 마진이 겹치는 부분이생기면 큰값이 적용된 마진값만남고 작은값은 사라져 중첩적용이되지않는다. ( 동일할경우 한 값만 적용)
메인페이지에서 카테고리에서 원하는 버튼을 누를떄 색이변하고 이전에 눌렀던 버튼은 다시 기본색으로 돌아오는기능을 작성하는데 자바스크립트에서 document.querySelector기능을 리액트에서 어떻게 적용시킬수없을까를 고민하다 우선은 버튼각각에 함수를 적용시켰다. 이부분도 나중에 리펙토링부분에 공부해야할 사항으로 남겨놓았다.