+
-
- {isOpen && (
-
- {options.map((opt) => (
-
- ))}
-
- )}
-
+ {createPortal(
+
+ {isOpen && (
+
+ {options.map((opt) => (
+
+ ))}
+
+ )}
+ ,
+ document.body
+ )}
+
+ );
+}
+
+/**
+ * 다중 선택 드롭다운 컴포넌트
+ */
+function MultiSelect({ values = [], options, onChange, placeholder = '선택', className = '' }) {
+ const [isOpen, setIsOpen] = useState(false);
+ const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });
+ const buttonRef = useRef(null);
+ const menuRef = useRef(null);
+
+ useEffect(() => {
+ const handleClickOutside = (event) => {
+ if (
+ buttonRef.current &&
+ !buttonRef.current.contains(event.target) &&
+ menuRef.current &&
+ !menuRef.current.contains(event.target)
+ ) {
+ setIsOpen(false);
+ }
+ };
+
+ if (isOpen) {
+ document.addEventListener('mousedown', handleClickOutside);
+ }
+ return () => document.removeEventListener('mousedown', handleClickOutside);
+ }, [isOpen]);
+
+ useEffect(() => {
+ if (isOpen && buttonRef.current) {
+ const rect = buttonRef.current.getBoundingClientRect();
+ setPosition({
+ top: rect.bottom + 4,
+ left: rect.left,
+ width: rect.width,
+ });
+ }
+ }, [isOpen]);
+
+ const selectedOptions = options.filter((opt) => values.includes(opt.value));
+ const displayText = selectedOptions.length > 0
+ ? selectedOptions.map((o) => o.label).join(', ')
+ : placeholder;
+
+ const toggleValue = (val) => {
+ if (values.includes(val)) {
+ onChange(values.filter((v) => v !== val));
+ } else {
+ onChange([...values, val]);
+ }
+ };
+
+ return (
+
+
+ {createPortal(
+
+ {isOpen && (
+
+ {options.map((opt) => (
+
+ ))}
+
+ )}
+ ,
+ document.body
+ )}
);
}
@@ -118,9 +270,23 @@ function YouTubeBotDialog({ isOpen, onClose, bot = null, onSubmit }) {
// 고급 설정
const [showAdvanced, setShowAdvanced] = useState(false);
- const [titleFilter, setTitleFilter] = useState('');
+ const [titleFilters, setTitleFilters] = useState([]);
+ const [filterInput, setFilterInput] = useState('');
+ const [defaultMemberIds, setDefaultMemberIds] = useState([]);
const [extractMembers, setExtractMembers] = useState(false);
+ // 멤버 목록 (탈퇴 멤버 제외)
+ const [members, setMembers] = useState([]);
+
+ // 멤버 목록 로드
+ useEffect(() => {
+ if (isOpen) {
+ getMembers()
+ .then((data) => setMembers(data.filter((m) => !m.is_former)))
+ .catch(console.error);
+ }
+ }, [isOpen]);
+
// 수정 모드일 때 기존 데이터 로드
useEffect(() => {
if (bot) {
@@ -142,7 +308,8 @@ function YouTubeBotDialog({ isOpen, onClose, bot = null, onSubmit }) {
setDeadlineDayOfWeek(config.deadlineDayOfWeek ?? 5);
}
- setTitleFilter(bot.title_filter || '');
+ setTitleFilters(bot.title_filters || []);
+ setDefaultMemberIds(bot.default_member_ids || []);
setExtractMembers(bot.extract_members_from_desc || false);
}
}, [bot]);
@@ -159,7 +326,9 @@ function YouTubeBotDialog({ isOpen, onClose, bot = null, onSubmit }) {
setTitleTemplate('{channelName} {episode}화');
setDeadlineDayOfWeek(5);
setShowAdvanced(false);
- setTitleFilter('');
+ setTitleFilters([]);
+ setFilterInput('');
+ setDefaultMemberIds([]);
setExtractMembers(false);
}
}, [isOpen]);
@@ -194,7 +363,6 @@ function YouTubeBotDialog({ isOpen, onClose, bot = null, onSubmit }) {
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
- onClick={onClose}
>
- setTitleFilter(e.target.value)}
- placeholder="특정 키워드가 포함된 영상만 추가"
- className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-red-500/20 focus:border-red-500"
+
+ {titleFilters.map((filter, idx) => (
+
+ {filter}
+
+
+ ))}
+ setFilterInput(e.target.value)}
+ onKeyDown={(e) => {
+ if (e.key === 'Enter' && filterInput.trim()) {
+ e.preventDefault();
+ if (!titleFilters.includes(filterInput.trim())) {
+ setTitleFilters([...titleFilters, filterInput.trim()]);
+ }
+ setFilterInput('');
+ }
+ }}
+ placeholder={titleFilters.length === 0 ? '키워드 입력 후 Enter' : ''}
+ className="flex-1 min-w-[120px] outline-none text-sm"
+ />
+
+
+ 키워드 중 하나라도 포함된 영상만 추가됩니다
+
+