feat: 버튼 컴포넌트 추가

This commit is contained in:
2025-12-22 13:27:43 +09:00
parent df9cb0a10c
commit 019415f124
11 changed files with 154 additions and 10 deletions
@@ -6,9 +6,9 @@ interface ApproveButtonProps {
const ApproveButton = ({ approveFunc }: ApproveButtonProps) => {
return (
<Button color="emerald" className="px-6" onClick={approveFunc}>
<i className="diveicon di-check-circle translate-y-[1px]" />
<span className="translate-y-[-1px]">승인</span>
<Button className="px-6" onClick={approveFunc}>
<i className="diveicon di-check-circle" />
<span>승인</span>
</Button>
);
};
@@ -0,0 +1,16 @@
import { Button } from "@common/components";
interface LastYearDataButtonProps {
getLastYearDataFunc: () => void;
}
const LastYearDataButton = ({ getLastYearDataFunc }: LastYearDataButtonProps) => {
return (
<Button color="emerald" className="px-6" onClick={getLastYearDataFunc}>
<i className="diveicon di-search" />
<span>지난연도 데이터 가져오기</span>
</Button>
);
};
export default LastYearDataButton;
@@ -7,8 +7,8 @@ interface RejectButtonProps {
const RejectButton = ({ rejectFunc }: RejectButtonProps) => {
return (
<Button color="red" className="px-6" onClick={rejectFunc}>
<i className="diveicon di-exclamation-circle translate-y-[1px]" />
<span className="translate-y-[-1px]">보완 요청</span>
<i className="diveicon di-exclamation-circle" />
<span>보완 요청</span>
</Button>
);
};
@@ -0,0 +1,16 @@
import { Button } from "@common/components";
interface ReturnButtonProps {
returnFunc: () => void;
}
const ReturnButton = ({ returnFunc }: ReturnButtonProps) => {
return (
<Button color="red" className="px-6" onClick={returnFunc}>
<i className="diveicon di-arrow-reset" />
<span>반려</span>
</Button>
);
};
export default ReturnButton;
@@ -0,0 +1,16 @@
import { Button } from "@common/components";
interface ReviewOpinionButtonProps {
reviewOpinionFunc: () => void;
}
const ReviewOpinionButton = ({ reviewOpinionFunc }: ReviewOpinionButtonProps) => {
return (
<Button color="emerald" className="px-6" onClick={reviewOpinionFunc}>
<i className="diveicon di-pencil" />
<span>검토의견 작성</span>
</Button>
);
};
export default ReviewOpinionButton;
@@ -0,0 +1,16 @@
import { Button } from "@common/components";
interface SaveButtonProps {
saveFunc: () => void;
}
const SaveButton = ({ saveFunc }: SaveButtonProps) => {
return (
<Button color="green" className="px-6" onClick={saveFunc}>
<i className="diveicon di-download" />
<span>저장</span>
</Button>
);
};
export default SaveButton;
@@ -0,0 +1,16 @@
import { Button } from "@common/components";
interface SubmitExceptionButtonProps {
SubmitExceptionFunc: () => void;
}
const SubmitExceptionButton = ({ SubmitExceptionFunc }: SubmitExceptionButtonProps) => {
return (
<Button color="red" className="px-6" onClick={SubmitExceptionFunc}>
<i className="diveicon di-box-arrow-upload" />
<span>예외제출</span>
</Button>
);
};
export default SubmitExceptionButton;
@@ -0,0 +1,16 @@
import { Button } from "@common/components";
interface SubmitButtonProps {
submitFunc: () => void;
}
const SubmitButton = ({ submitFunc }: SubmitButtonProps) => {
return (
<Button className="px-6" onClick={submitFunc}>
<i className="diveicon di-upload" />
<span>제출</span>
</Button>
);
};
export default SubmitButton;
+4 -4
View File
@@ -211,13 +211,13 @@ const DataGrid = ({ columnInfo, rows = [], rowStartNum, isExcelImport = true, fi
<div className="flex justify-end items-center gap-[0.6rem]">
{isExcelImport &&
<Button className="h-[3.2rem] px-6 bg-gradient-green hover:bg-gradient-green-hover" type="button" onClick={importExcel}>
<i className="diveicon di-file-excel translate-y-[1px]" />
<span className="translate-y-[-1px]">가져오기</span>
<i className="diveicon di-file-excel" />
<span>가져오기</span>
</Button>
}
<Button className="h-[3.2rem] px-6 bg-gradient-green hover:bg-gradient-green-hover" type="button" onClick={exportExcel}>
<i className="diveicon di-file-excel translate-y-[1px]" />
<span className="translate-y-[-1px]">내보내기</span>
<i className="diveicon di-file-excel" />
<span>내보내기</span>
</Button>
</div>
<div className="h-[65vh]">
@@ -1,5 +1,9 @@
import SearchForm from "@/components/module/SearchForm";
import DataGrid from "@/components/module/DataGrid";
import SubmitButton from "@/components/button/SumitButton";
import SaveButton from "@/components/button/SaveButton";
import LastYearDataButton from "@/components/button/LastYearDataButton";
import SubmitExceptionButton from "@/components/button/SubmitExceptionButton";
const SeweragePenetrationRate = () => {
const columns = [
@@ -98,9 +102,35 @@ const SeweragePenetrationRate = () => {
'rmk',
];
const submitFunc = () => {
console.log('submit');
// 제출 로직
};
const saveFunc = () => {
console.log('submit');
// 저장 로직
};
const getLastYearDataFunc = () => {
console.log('get last year data');
// 지난연도 데이터 가져오기 로직
};
const SubmitExceptionFunc = () => {
console.log('submit exception');
// 예외 제출 로직
};
return (
<>
<SearchForm userMenual={true} />
<div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
<SubmitButton submitFunc={submitFunc} />
<SaveButton saveFunc={saveFunc} />
<LastYearDataButton getLastYearDataFunc={getLastYearDataFunc} />
<SubmitExceptionButton SubmitExceptionFunc={SubmitExceptionFunc} />
</div>
<DataGrid columnInfo={{columns, columnLayout}} rowStartNum={2} isExcelImport={true} fixedColumns={1} />
</>
);
@@ -2,6 +2,8 @@ import SearchForm from "@/components/module/SearchForm";
import DataGrid from "@/components/module/DataGrid";
import ApproveButton from "@/components/button/ApproveButton";
import RejectButton from "@/components/button/RejectButton";
import ReturnButton from "@/components/button/ReturnButton";
import ReviewOpinionButton from "@/components/button/ReviewOpinionButton";
const StatsInputSatusMng = () => {
const columns = [
@@ -34,20 +36,36 @@ const StatsInputSatusMng = () => {
const approveFunc = () => {
console.log('appoved');
// 승인 요청 로직
};
const rejectFunc = () => {
console.log('reject');
// 보완 요청 로직
};
const returnFunc = () => {
console.log('return');
// 반려 로직
}
const reviewOpinionFunc = () => {
console.log('review');
// 검토 의견 작성 로직
};
return (
<>
<SearchForm />
<div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
<ReviewOpinionButton reviewOpinionFunc={reviewOpinionFunc} />
<ReturnButton returnFunc={returnFunc} />
</div>
<div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
<RejectButton rejectFunc={rejectFunc} />
<ApproveButton approveFunc={approveFunc} />
</div>
<DataGrid columnInfo={{columns, columnLayout}} rowStartNum={2} isExcelImport={true} fixedColumns={3} />
<DataGrid columnInfo={{ columns, columnLayout }} rowStartNum={2} isExcelImport={true} fixedColumns={3} />
</>
);
};