Attachment

Attachment.Root는 작성창이나 메시지 안의 파일 하나를 보여 줍니다. 미리보기, 이름, 크기 같은 한 줄, 업로드 막대, 그리고 파일을 빼는 버튼입니다. 업로드의 상태를 보여 줄 뿐, 업로드 자체는 useDropzone이 받은 파일마다 보내는 fetch처럼 직접 작성하는 코드입니다.

<Attachment.Root status={file.status}>
  <Attachment.Preview>
    <FileText aria-hidden />
  </Attachment.Preview>
  <Attachment.Name>{file.name}</Attachment.Name>
  <Attachment.Meta>{file.size}</Attachment.Meta>
  {file.status === 'uploading' ? <Attachment.Progress value={file.progress} max={100} /> : null}
  <Attachment.Remove onClick={() => remove(file)} />
</Attachment.Root>

파트

• Attachment.Root는 role="group"인 div이고, aria-label이나 aria-labelledby를 주지 않으면 Attachment.Name으로 이름이 붙습니다. status는 ready, uploading, error 중 하나이며 data-status를 설정합니다. error이면 테두리와 Attachment.Meta를 attachment.border.error와 attachment.meta.fg.error 토큰으로 칠합니다. 너비는 최대 attachment.max-width입니다.
• Attachment.Preview는 시작 쪽에 놓이는 attachment.preview.size 크기의 상자입니다. img나 video, 또는 picture 안의 img는 상자를 덮고 상자 크기로 잘리며, svg 아이콘은 attachment.icon.size를 따릅니다.
• Attachment.Name은 텍스트로 된 파일 이름입니다. 너비보다 긴 이름은 말줄임표로 끝납니다.
• Attachment.Meta는 이름 아래 한 줄로, 크기와 형식이나 무엇이 잘못됐는지를 담습니다.
• Attachment.Progress는 그 아래에 놓이는 업로드용 Progress 막대입니다. aria-label이나 aria-labelledby를 주지 않으면 Attachment.Name으로 이름이 붙습니다.
• Attachment.Remove는 끝에 놓이는 ghost Button입니다. 내용이 없으면 close 글리프를 보여 주고 removeAttachment 문자열로 이름이 붙습니다. 영어로는 Remove {name}입니다.

필요 없는 파트는 빼면 나머지가 그 자리를 채웁니다.

빼기

포커스를 가진 첨부가 빠지고 React가 업데이트를 커밋한 뒤에 다른 곳에 포커스가 없으면, 포커스는 그 자리에 온 첨부의 빼기 버튼으로, 없으면 앞의 첨부로 옮겨집니다. 셈에 드는 첨부는 부모의 자식들이고, 첨부마다 li의 유일한 자식이라면 같은 목록의 항목들입니다. 직접 작성한 onClick에서 옮긴 포커스는 옮긴 곳에 그대로 둡니다. 남은 첨부가 없으면 포커스는 작성창의 텍스트 필드처럼 직접 옮길 곳을 정하세요.

접근성을 지키는 조합

Todae가 맡는 것: 파일 이름으로 이름이 붙은 파일마다의 그룹. 파일 이름이 들어간 빼기 버튼의 이름과, 그 이름으로 이름이 붙는 진행 막대. 포커스를 가진 첨부가 빠질 때 다음 빼기 버튼으로 옮겨지는 포커스.

직접 제공할 것: Attachment.Name 안의 파일 이름. 이름이 이미 무슨 파일인지 말하므로 썸네일에 주는 alt="". 마지막 첨부가 빠진 뒤의 포커스. Attachment.Meta에 말로 쓰고, useAnnouncer 등으로 그때 알리는 업로드 오류.

주의할 점: 오류를 테두리 색으로만 보여 주는 것. 업로드 진행을 단계마다 알리는 것. 막대는 읽는 사람이 그곳으로 갈 때 읽을 수 있습니다.

언제 쓰나요

쓸 때: 보내기 전이든 후든 메시지에 붙은 파일.

쓰지 않을 때: 빼기 버튼이 있는 텍스트 라벨 → Chip. 파일 고르기 → useDropzone.

Props