코드스테이츠 SEB FE 41기/Main-Project(MatP) (21) 썸네일형 리스트형 [react] 이미지 hover시 이미지 짙어지며 텍스트 뜨게 만들기 각 컴포넌트 hover 시 짙어지며 원하는 텍스트가 나올 수 있도록 만들어보자. 전체 컴포넌트의 구조는 이렇다! {post.likes} 이제 CSS를 작성해보자. 먼저 각각의 게시글 컴포넌트의 Position을 relative로 만들어주자. 그 다음, 컴포넌트에 꽉 차게 썸네일 이미지를 띄워주기 위해 이미지 컴포넌트의 width, height를 모두 100%로 설정해준다. const ImgWrapper = styled.div` width: 130px; height: 130px; position: relative; .post_thumbnail { width: 100%; height: 100%; } `; 그 다음 각 게시글의 썸네일 이미지 호버시 해당 글에 대한 '좋아요' 수를 표시하고 싶기 때문에 clas.. [react] star-rating 구현하기(feat. typescript) 후기의 핵심.. 별점 매기기 기능을 구현해보도록 하자. 이것도 라이브러리가 몇 개 있었는데, 타스에서 적용이 안된다는 이야기가 많아 자스로 구현된 예시 몇개를 보고 리팩토링을 하는 방식으로 진행하였다! 먼저 별점 매기기 기능의 꽃! 별 아이콘을 가져오자. 나는 클릭 여부에 따라 커스텀을 해야하기 때문에 mui 아이콘을 그냥 사용하지 않고 컴포넌트로 만든 뒤 svg 형식으로 가져와 사용했다. 하단 코드는 공식 홈페이지를 참고하였다. import SvgIcon from "@mui/material/SvgIcon"; interface IProps { key: number; size: string; onClick: () => void; className: string; } const StarRate = (prop.. [react] 텍스트 에디터 react-quill 사용기 (feat. typescript) 우리 프로젝트에는 블로그 형식처럼 음식점에 대한 후기글을 남기는 기능이 있었기 때문에, text editor의 사용은 필수적이였다. react에 적용되면서 typescript로 사용가능하고 레퍼런스가 많은 라이브러리를 찾아보려고 이틀 간 구글링을 정말 열심히 했던 것 같다! ㅠㅠ 타입스크립트로 작성된 플젝의 레퍼런스는 사막에서 바늘찾기... 난 아직 애기인걸.. 타입스크립트 신생아라서 레퍼런스 없이는 감도 안오는걸? 응애 결론적으로 내가 선택한 라이브러리는 react-quill이라는 라이브러리이다. react-quill 라이브러리는 타입스크립트가 적용될 뿐아니라 이미지 업로드 시 파일 업로더를 사용하는 방식으로 구현되어 있어, 유저가 게시글을 작성할 때 더욱 편리하게 이미지를 추가할 수 있겠다고 느껴 선.. [react]Modal Portal(feat. typescript) 모달이 뜨면 background가 짙어지는 backdrop 효과가 모든 컴포넌트에 적용되지 않던 문제를 해결했다! 멘토님께 여쭤보니, 역시나 모달의 레벨이 적용되지 않던 컴포넌트(헤더, 사이드바)보다 낮아서 생긴 문제였다. 멘토님이 추천해주신 방식은 Modal Portal을 이용하는 것이였다! 나는 text editor을 열심히 만지던 중이라 팀원분께서 적용해주셨는데! 결과는 성공! 야호 ㅜㅜ 속이 아주 시원했다~!! 나중에 쓰일 것 같아 팀원분이 성공하시고 난 후 적용 과정에 대한 설명을 들었고, 이를 이해한 바탕으로 기록해보자! public/index.html에 'root' div하단에 modal portal을 위한 'modal-box'라는 이름의 div를 생성해준다. 이로써 modal compone.. [react] z-index, position, map reverse, axios (feat. typescript) 1. z-index z-index는 같은 레벨에 있는 요소 간에는 적용되지만, 부모 자식 요소간에는 그 우선순위가 적용되지 않는다. 그래서 왠만하면 z-index는 사용하지 않는게 좋다고 한다...ㅠㅠ 헤더와 사이드바 컴포넌트가 모달 컴포넌트의 부모 요소여서 background 짙게 되는 효과에서 배제 된다!!! 해결하려고 노력해봤지만..아직까지 해결 못했다 ㅠㅠ 멘토님께 여쭤봐야지(모달 포탈 사용해 해결 완료~) 2. postion이 fixed 인 컴포넌트 중앙 정렬 position: fixed; margin: 0 auto; left: 0; right: 0; 아직까지도 나한텐 position 개념이 어렵다..ㅠㅠ 얼른 익숙해지고싶다! 3. position : relative vs absolute rel.. 이전 1 2 3 다음
