File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
import styles from './merchant-thumbnail.module.scss';
interface MerchantThumbnailProps {
src: string | null;
alt: string;
}
/**
* 목록·메뉴 표의 101×72 썸네일. 이미지가 없어도 같은 크기의 틀에 "no image"를 띄운다 —
* `-` 한 글자면 열이 들쭉날쭉해지고 이미지 자리가 어디인지 보이지 않는다(사용자 확정).
*/
export function MerchantThumbnail({ src, alt }: MerchantThumbnailProps) {
if (!src) {
return (
<span className={styles.placeholder} role="img" aria-label={`${alt} 없음`}>
no image
</span>
);
}
// 백엔드의 공개 이미지 GET이라 브라우저가 직접 부른다. `next/image`는 백엔드 호스트를
// next.config에 등록해야 해 <img>로 둔다(꾸미기아이템과 같은 판단).
// eslint-disable-next-line @next/next/no-img-element
return <img className={styles.image} src={src} alt={alt} />;
}