1. 구현하기
진행 상황
- 로그아웃, 회원탈퇴 구현
- 메인페이지 get 요청, 로그인 상태에 따른 헤더 렌더링
진행 예정
- 상세페이지 리뷰 레이아웃
2. TIL
2-1. 스타일드 컴포넌트 활용하기
css 함수 사용하여 스타일링 하기
메인 페이지에서 베스트 10의 미용실을 보여주는 컴포넌트를 작업하다가 마지막 요소의 border-bottom css만 지우려고 했다. 해당 컴포넌트는 원래 미용실 페이지에서 무한 스크롤로 구현하여 따로 마지막 요소에 대한 스타일링은 들어가 있지 않은 상태였다. 그래서 스타일드 컴포넌트 파일에 들어가 마지막 요소 선택자를 사용하여 css를 주었지만 달라진 것은 없었다.
export const List = styled.li`
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
&:last-child {
border-bottom: none;
}
`;시도한 방법
구글링을 해보니 스타일드 컴포넌트에서 css 함수를 사용하는 방법이 있었다. css 함수는 CSS를 작성할 때 사용되는 함수 중 하나로, 스타일드 컴포넌트로 스타일링한 컴포넌트 내부에서 CSS를 쉽게 작성할 수 있도록 해주는 함수이다.
import styled, { css } from 'styled-components';
export const List = styled.li`
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
${({ last }) => last && css`
border-bottom: none;
`}
`;{filteredData.map((shop) => (
<HairshopList
shop={shop}
key={shop.hairShopId}
last={shop.length - 1}
/>
))}css 함수를 사용하여, props가 true일 때에만 적용되는 CSS 속성을 작성했다. 하지만 여전히 마지막 요소에 적용된 border는 사라지지 않았다.
해결 방법
여러가지 방법을 시도하다 코드를 다시 보니 shop은 배열 요소 하나를 의미하므로 length 속성이 없었다. 그러므로 filteredData 배열의 마지막 요소에 대해서만 last 프로퍼티를 true로 설정해야 했었다.
{filteredData.map((shop, index) => (
<HairshopList
shop={shop}
key={shop.hairShopId}
last={index === filteredData.length - 1}
/>
))}2-2. eslint 에러 해결하기
visible non-interactive elements with click handlers
코드 인덴팅을 위해 eslint와 prettier 설정을 하고 프로젝트를 켰더니 여러 에러들 중 visible로 시작하는 에러가 아주 많이 나는 것을 확인 할 수 있었다. 에러가 나는 곳은 거의 모든 모달 쪽 부분에서 났는데 해당 에러를 헤결하기 위해 에러를 무시할 수 있는 규칙을 넣으려고 하다가 에러를 해결하는 방법을 찾아보고자 했다.
시도한 방법
해당 에러는 클릭 이벤트가 발생할 수 없는 요소에 대해 클릭 이벤트 처리 함수가 지정되어 있는 경우에 이 에러가 발생 하는 것이었다. 구글링을 해보니 이 오류를 해결하기 위해서는 클릭 이벤트 처리 함수가 지정된 요소가 클릭 가능한 요소(예: 버튼, 링크 등)로 변경되어야 한다고 했다.
문제가 되는 부분이었던 모달에서 아이콘을 div가 감싸고, div에 onClick 이벤트 처리 함수가 지정되어 있어서 에러가 난 것이었다. 그래서 버튼으로 바꾸니 이미 적용된 css가 뭉개져버려서 결국 기존의 div로 사용하고 보완할 수 있는 방법인 role을 추가해주었다.
<div role="button" onClick={() => dispatch(closeModal())}>
<CloseIcon />
</div>;해결 방법
하지만 에러는 여전히 사라지지 않았다. 해당 에러는 div가 non-interactive 한데 onclick 이라는 인터랙티브한 역할이 부여 되어서 발생하는 것이다. 그래서 non-interactive 한 role을 부여해주었다. semantic 의미를 요소와 그 자식요소로부터 제거하기 위해서 사용하는 presentation을 적용하니 해당 에러들이 사라졌다.
role="presentation"