127 lines
2.7 KiB
JavaScript
127 lines
2.7 KiB
JavaScript
import React from 'react';
|
|
import styled from 'styled-components';
|
|
import { Card } from 'antd';
|
|
import DetailGrid from './DetailGrid';
|
|
|
|
/**
|
|
* Ant Design 방식의 DetailModalWrapper 컴포넌트
|
|
* @param {Array} itemGroups - 표시할 항목 그룹 배열
|
|
* @param {Object} formData - 폼 데이터 객체
|
|
* @param {Function} onChange - 값 변경 시 호출할 함수
|
|
* @param {boolean} disabled - 전체 비활성화 여부
|
|
* @param {number} columnCount - 한 행에 표시할 컬럼 수 (기본값: 4)
|
|
* @param {ReactNode} children - 추가 컨텐츠
|
|
*/
|
|
const DetailLayout = ({
|
|
itemGroups,
|
|
formData,
|
|
onChange,
|
|
disabled = false,
|
|
columnCount = 4,
|
|
children
|
|
}) => {
|
|
// 값 변경 핸들러
|
|
const handleChange = (key, value, handler) => {
|
|
// 핸들러가 있으면 핸들러 실행
|
|
if (handler) {
|
|
handler(value, key, formData);
|
|
}
|
|
|
|
// 키가 점 표기법이면 중첩 객체 업데이트
|
|
if (key.includes('.')) {
|
|
const [parentKey, childKey] = key.split('.');
|
|
onChange({
|
|
...formData,
|
|
[parentKey]: {
|
|
...formData[parentKey],
|
|
[childKey]: value
|
|
}
|
|
});
|
|
} else {
|
|
// 일반 키는 직접 업데이트
|
|
onChange({ ...formData, [key]: value });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<DetailWrapper>
|
|
{itemGroups.map((group, index) => (
|
|
<Card
|
|
key={`group-${index}`}
|
|
title={group.title}
|
|
style={{ marginBottom: 16 }}
|
|
>
|
|
<DetailGrid
|
|
items={group.items}
|
|
formData={formData}
|
|
onChange={handleChange}
|
|
disabled={disabled || group.disabled}
|
|
columnCount={group.columnCount || columnCount}
|
|
/>
|
|
</Card>
|
|
))}
|
|
{children}
|
|
</DetailWrapper>
|
|
);
|
|
};
|
|
|
|
const DetailWrapper = styled.div`
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
`;
|
|
|
|
export default DetailLayout;
|
|
|
|
//예시
|
|
// const itemGroupsExample = [
|
|
// {
|
|
// title: '기본 정보',
|
|
// items: [
|
|
// {
|
|
// row: 0,
|
|
// col: 0,
|
|
// colSpan: 2,
|
|
// type: 'text',
|
|
// key: 'title',
|
|
// label: '제목',
|
|
// required: true,
|
|
// disabled: !isView('title'),
|
|
// width: '300px',
|
|
// },
|
|
// {
|
|
// row: 0,
|
|
// col: 2,
|
|
// colSpan: 2,
|
|
// type: 'number',
|
|
// key: 'order_id',
|
|
// label: '순서',
|
|
// required: true,
|
|
// disabled: !isView('order_id'),
|
|
// width: '200px',
|
|
// min: 1,
|
|
// },
|
|
// {
|
|
// row: 1,
|
|
// col: 0,
|
|
// colSpan: 2,
|
|
// type: 'status',
|
|
// key: 'status',
|
|
// label: '상태',
|
|
// value: resultData.status,
|
|
// },
|
|
// {
|
|
// row: 1,
|
|
// col: 2,
|
|
// colSpan: 2,
|
|
// type: 'switch',
|
|
// key: 'is_link',
|
|
// label: '링크 사용',
|
|
// disabled: !isView('is_link'),
|
|
// },
|
|
// ]
|
|
// },
|
|
// {
|
|
// title: ''
|
|
// }
|
|
// ];
|