# AI 봇 대화 페이지용 드래그 앤 드롭 업로드 및 파일 미리보기

**URL:** https://meta.discourse.org/t/drag-drop-upload-file-previews-for-ai-bot-conversations-page/407336
**Category:** Theme component
**Tags:** ai, ai-bot
**Created:** [7월 11, 2026, 6:57오후 UTC](https://meta.discourse.org/t/drag-drop-upload-file-previews-for-ai-bot-conversations-page/407336 "2026-07-11T18:57:19Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [7월 11, 2026, 6:57오후 UTC](https://meta.discourse.org/t/drag-drop-upload-file-previews-for-ai-bot-conversations-page/407336/1 "2026-07-11T18:57:19Z")

</div>

| | | |
| --- | --- | --- |
| ℹ | **요약** | AI 봇 대화 페이지용 드래그 앤 드롭 업로드 + 파일 미리보기 |
| 🛠 | **저장소** | [GitHub - VaperinaDEV/drag-drop-upload-file-previews-ai-bot-page: Drag & Drop Upload + File Previews for AI Bot Conversations page · GitHub](https://github.com/VaperinaDEV/drag-drop-upload-file-previews-ai-bot-page) |
| ❤ | **도움이 되셨나요?** | [\> ./support --coffee](https://meta.discourse.org/u/don) |
| ❓ | **설치 가이드** | [테마 또는 테마 컴포넌트 설치 방법](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |
| 📖 | **디스코urse 테마를 처음 사용하시나요?** | [디스코urse 테마 사용 입문 가이드](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966) |

이 테마 컴포넌트 설치

안녕하세요 👋

[AI 봇 대화 페이지](https://meta.discourse.org/discourse-ai/ai-bot/conversations)의 입력란에 파일을 업로드하는 것은 업로드 버튼을 통해서만 작동하며, 파일이 첨부된 후에는 일반 텍스트 줄로 파일명만 표시되고, 미리보기나 실제로 무엇을 첨부했는지에 대한 시각적 표시가 없습니다.

## 이 컴포넌트가 추가하는 기능

- **대화 패널 어디든 드래그 앤 드롭** — 텍스트 영역뿐만 아니라, 드래그 중일 때 하이라이트 상태가 적용되는 전체 패널이 드롭 존으로 작동합니다.
- **이미지 업로드용 실제 이미지 썸네일** — 클라이언트 측에서 생성되며, 텍스트만 표시되는 대신 파일명과 함께 표시됩니다.
- **비이미지 파일용 색상 코딩 확장자 배지** (PDF, DOCX, XLSX, ZIP, MP3, 코드 파일 등) — 실제 미리보기가 불가능한 파일 유형에서도 업로드 목록이 시각적으로 스캔하기 쉽게 합니다.
- **테마 설정으로 설정 가능** — `default_badge_color` 폴백 색상과 `extension_colors` 객체 스키마 설정을 통해 관리자가 테마 설정 UI에서 직접 확장자별로 색상을 추가/재정의할 수 있으며, 코드 편집이 필요하지 않습니다.

## 설정

| 설정 | 설명 |
| --- | --- |
| `default_badge_color` | 명시적으로 색상이 설정되지 않은 확장자를 위한 폴백 16진수 색상 |
| `extension_colors` | 내장 카테고리 색상을 재정의/확장하기 위한 `{ extension, color }` 행의 객체 스키마 목록 |

내장 카테고리는 이미 문서, 스프레드시트, 프레젠테이션, 아카이브, 오디오, 비디오, 코드, 폰트, 전자책 등 대부분의 일반 파일 유형을 기본적으로 지원하므로, 대부분의 사용자는 `extension_colors`를 건드릴 필요가 없습니다.