operationSystem-front/src/components/ServiceManage/searchBar/CommonSearchBar.js

import { TextInput, InputLabel, SelectInput, InputGroup } from '../../../styles/Components';
import { SearchBarLayout, SearchPeriod } from '../../common/SearchBar';
import { Fragment } from 'react';
import { getOptionsArray } from '../../../utils';
import { PageSkeleton } from '../../Skeleton/SearchSkeleton';

const renderSearchField = (field, searchParams, onSearch) => {
	const { type, id, label, placeholder, width, optionsRef } = field;

	switch (type) {
		case 'text':
			return (
				<>
					{label && label !== 'undefined' && <InputLabel $require={field.required}>{label}</InputLabel>}
					<TextInput
						type="text"
						placeholder={placeholder || ''}
						value={searchParams[id] || ''}
						width={width || '100%'}
						onChange={e => onSearch({ [id]: e.target.value }, false)}
						required={field.required}
						onKeyDown={e => {
							if (e.key === 'Enter') {
								e.preventDefault();
								onSearch(searchParams, true);
							}
						}}
					/>
				</>
			);

		case 'select':
			return (
				<>
					{label && label !== 'undefined' && <InputLabel $require={field.required}>{label}</InputLabel>}
					<SelectInput
						value={searchParams[id] || ''}
						onChange={e => onSearch({ [id]: e.target.value }, false)}
					>
						{getOptionsArray(optionsRef).map((data, index) => (
							<option key={index} value={data.value}>
								{data.name}
							</option>
						))}
					</SelectInput>
				</>
			);

		case 'period':
			return (
				<>
					{label && label !== 'undefined' && <InputLabel $require={field.required}>{label}</InputLabel>}
					<SearchPeriod
						startDate={searchParams[field.startDateId]}
						handleStartDate={date => onSearch({ [field.startDateId]: date }, false)}
						endDate={searchParams[field.endDateId]}
						handleEndDate={date => onSearch({ [field.endDateId]: date }, false)}
					/>
				</>
			);

		case 'searchGroup':
			// 검색 타입과 입력이 결합된 컴포넌트
			return (
				<InputGroup>
					<SelectInput
						value={searchParams[field.selectId] || ''}
						onChange={e => onSearch({ [field.selectId]: e.target.value }, false)}
					>
						{getOptionsArray(field.optionsRef).map((data, index) => (
							<option key={index} value={data.value}>
								{data.name}
							</option>
						))}
					</SelectInput>
					<TextInput
						type="text"
						placeholder={
							field.placeholderMapping &&
							field.placeholderMapping[searchParams[field.selectId]] ?
								field.placeholderMapping[searchParams[field.selectId]] :
								field.placeholderMapping?.default || ''
						}
						value={searchParams[field.inputId] || ''}
						width={field.width || '100%'}
						onChange={e => onSearch({ [field.inputId]: e.target.value }, false)}
						onKeyDown={e => {
							if (e.key === 'Enter') {
								e.preventDefault();
								onSearch(searchParams, true);
							}
						}}
					/>
				</InputGroup>
			);

		default:
			return null;
	}
};

const CommonSearchBar = ({ config, searchParams, onSearch, onReset, customProps }) => {
	if (!config || !config.searchFields) {
		return <PageSkeleton />;
	}

	const handleSubmit = event => {
		event.preventDefault();
		onSearch(searchParams, true);
	};

	// 검색 필드를 컬럼별로 분류
	const firstColumnFields = config.searchFields.filter(field => field.col === 1);
	const secondColumnFields = config.searchFields.filter(field => field.col === 2);
	const filterField = config.searchFields.find(field => field.col === 'filter');

	const firstColumnData = firstColumnFields.map((field, index) => (
		<Fragment key={`first-${index}`}>
			{renderSearchField(field, searchParams, onSearch)}
		</Fragment>
	));

	const secondColumnData = secondColumnFields.length > 0 ?
		secondColumnFields.map((field, index) => (
			<Fragment key={`second-${index}`}>
				{renderSearchField(field, searchParams, onSearch)}
			</Fragment>
		)) :
		undefined;

	const filter = filterField ?
		renderSearchField(filterField, searchParams, onSearch) :
		undefined;

	return (
		<SearchBarLayout
			firstColumnData={firstColumnData}
			secondColumnData={secondColumnData}
			filter={filter}
			direction={'column'}
			onReset={onReset}
			handleSubmit={handleSubmit}
			{...customProps}
		/>
	);
};

export default CommonSearchBar;