[TIL] 내배캠4기-NextJs-99일차

tailwind space-y

space-y: child 요소 사이에 수직 방향으로 간격을 추가

aspect-ratio

📌 css 속성
💡 높이를 고려하고 싶지 않다면?
aspect-square rounded-full => 원 모양
aspect-video => 유튜브 화면 비율 16:9와 같이 높이를 자동으로 줌.

Layout 컴포넌트

뒤로가기 버튼은 어떻게 만들까

// layout.tsx
const router = useRouter()
	const onClick = () => {
		router.back()
	}
    
    {canGoBack ? (
		<button onClick={onClick}>

// pages>items>[id].tsx
const ItemDetail: NextPage = () => {
	return (
		<Layout canGoBack>
			<div className="px-4 py-10">
				<div className="mb-8">
					{/* 상품 이미지 */}
					<div className="h-96 bg-slate-300" />

Layout 컴포넌트의 프롭으로 canGoBack을 생성한다.
뒤로가기 버튼이 필요한 페이지를 Layout 컴포넌트로 감싸주고 canGoBack을 넣어주자.