[HTML_CSS] 파일 업로드 버튼 만들기

안녕하세요 :)

오늘은 사실 간단해 보이는 ui인데 꽤 고민을 하게 만든 파일 업로드 버튼 ui에 대해 포스팅하려고 합니다.

 

react와 tailwind를 사용하는 프로젝트라 아래와 같이 컴포넌트를 만들었습니다. 

여기서 저는 업로드 아이콘에서 꽤 애를 먹었는데요, 아이콘이 이벤트 버블을 일으키지 않아서 아이콘 위를 클릭하면 아무런 일이 발생하지 않는 문제가 있었습니다.

 

찾아보니 css에 pointer-events: none이라는 스타일 속성이 있더라구요. 해당 스타일은 어떤 상황에서 그래픽 엘리먼트가 이벤트의 타깃이 될 수 있는지를 결정할 수 있는 속성입니다. 여기서 저는 none값을 줘서 svg 아이콘이 이벤트 타깃이 아니니 그 뒤에 있는 이벤트를 트리거 시키도록 했습니다.

<div className="grid gap-3">
      {label && <Label>{label}</Label>}
      <div
        className={cn(
          'flex items-center text-muted-foreground relative h-10 w-full rounded-md border border-input bg-background text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
          className,
        )}
      >
        <input
          id="upload-btn"
          type="file"
          className={cn('hidden')}
          {...props}
        />
        <Label htmlFor="upload-btn" className="w-full cursor-pointer py-3 px-3">
          Upload a file
        </Label>
        <Icons.upload className="absolute right-3 z-0 pointer-events-none" />
      </div>
    </div>