[2차시] 이미지 컴포넌트 만들기

버튼 컴포넌트를 다 만들고 나서 이미지 컴포넌트를 만들 차례가 됐다.

이전에 버튼을 만들던 경험으로 size만 있을 것 같아서 size만 붙여넣었다.

 

코드

import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/app/utils/cn';
import { ButtonHTMLAttributes, FC } from 'react';
import React from 'react';

type Size = 'sm' | 'md' | 'lg';

interface AvatarProps {
  size: Size;
}

const AvatarVariants = cva('rounded-[0.625rem] hover:brightness-90 active:brightness-75', {
  variants: {
    size: {
      sm: 'flex w-[25.5rem] h-[6rem] px-[0.7rem] py-[1rem] justify-center items-center gap-1.25 text-[1.5rem] font-SCDream5',
      md: 'flex w-[36.9rem] h-[3.9rem] px-[0.7rem] justify-center items-center text-[1rem] font-SCDream2',
      lg: 'flex w-[45.9rem] h-[4.5rem] px-[0.7rem] py-[1rem] justify-center items-center gap-2.5 text-[1.5rem] font-SCDream5',
    },
  },
  defaultVariants: {
    size: 'md',
  },
});

interface AvatarProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof AvatarVariants> {
  children?: React.ReactNode;
}

const Buttons = ({ size, children, ...props }: AvatarProps) => {
  return (
    <Image className={cn(AvatarVariants({ size }))} {...props}>
      {children}
    </Image>
  );
};

export default Buttons;

이렇게 했더니 오류가 2개 나왔다.

JSX 요소 클래스는 'props' 속성이 없으므로 특성을 지원하지 않습니다.
'Image'은(는) JSX 구성 요소로 사용할 수 없습니다.

 

뒤는... 내일 써ㅏ야지...

오류가 하나 더 발생했는데, 그건 interface AvatarProps없애주니까 해결되고

하나 더 있었는데 그건 그 뭐냐 Image 컴포넌트가 width를 필수로 넣어줘야해서 Image가 아닌 img태그를 사용하여 해결했다.

 

일단 완성모습 내일 다시 정리해야지~

https://velog.io/@leehyewon0531/Error-Image-with-src-...-is-missing-required-width-property

🚨Error: Image with src "..." is missing required "width" property.🚨

https://bh2980.tistory.com/277

Icon 컴포넌트 만들기(with SVGR, 동적 import)

 

https://reactnext-central.xyz/blog/nextjs/image-component

Next.js의 Image 컴포넌트로 이미지 최적화하기: 완벽 가이드