[Tars] 회고록 4일차 (emotion Props)

프로젝트/Tarss

[Tars] 회고록 4일차 (emotion Props)

pizzaYami 2024. 2. 15. 22:53

설이 끝나고 오랜만에 다시 공부를 시작하였다.

FooterBtn

팀원들 코드리뷰를 하고 요런식으로 공통으로 사용되는 버튼을 저번처럼 합성컴포넌트가 아닌 props를 이용해서 만들었다.

export default function FooterBtn({ text, cancleText, shape, blur, transparent }: FooterBtnType) {
	return (
		<div
			css={
				shape === "round"
					? FooterBtnRound(blur === true, transparent === true)
					: FooterBtnSquare(blur === true)
			}
		>
			{cancleText ? (
				<button type="button" className="cancle">
					{cancleText}
				</button>
			) : null}
			<button type="button">{text}</button>
		</div>
	);
}

props가 많아서 나중에 줄이는 방법을 다시 생각해 봐야겠다.

emotion props 내리는 법

FooterBtn에서 blur를 props를 내려주면 버튼의 opacity:40%으로 설정해야 되는 부분이 있었는데 인라인으로 엘리먼트에 그대로 css를 넣는 것보다는 따로 빼내서 emotion css 파일에 넘겨주는 방법으로하고 싶었다.

찾아보다가 못 찾아서 팀원이 사용한 방식을 그대로 가져와 사용하였다.

//tsx파일

<div css={css파일이름(blur === true, transparent === true)}></div>

// css파일이름

export const css파일이름 = (blur: boolean, transparent: boolean) => {
	return css`
		...
        opacity: ${blur ? "40%" : "100%"};
        background-color: ${transparent ? "transparent" : "white"};
        `
}