st: refactor: button style 수정

2026-01-05 17:09:42 +09:00
parent 8de5317d28
commit e0b631ec25
15 changed files with 53 additions and 41 deletions
@@ -6,7 +6,7 @@ interface ApproveButtonProps {

 const ApproveButton = ({ approveFunc }: ApproveButtonProps) => {
    return (
-        <Button className="px-6" onClick={approveFunc}>
+        <Button className="h-[3.2rem] w-[96px]" onClick={approveFunc}>
            <i className="diveicon di-check-circle" />
            <span>승인</span>
        </Button>
@@ -6,7 +6,7 @@ interface LastYearDataButtonProps {

 const LastYearDataButton = ({ getLastYearDataFunc }: LastYearDataButtonProps) => {
    return (
-        <Button color="emerald" className="px-6" onClick={getLastYearDataFunc}>
+        <Button color="emerald" className="h-[3.2rem] w-[176px]" onClick={getLastYearDataFunc}>
            <i className="diveicon di-search" />
            <span>지난연도 데이터 가져오기</span>
        </Button>
@@ -6,7 +6,7 @@ interface OperateDataButtonProps {

 const OperateDataButton = ({ getOperateDataFunc }: OperateDataButtonProps) => {
    return (
-        <Button color="emerald" className="px-6" onClick={getOperateDataFunc}>
+        <Button color="emerald" className="h-[3.2rem] w-[176px]" onClick={getOperateDataFunc}>
            <i className="diveicon di-arrow-left-right" />
            <span>운영 데이터 가져오기</span>
        </Button>
@@ -6,7 +6,7 @@ interface RejectButtonProps {

 const RejectButton = ({ rejectFunc }: RejectButtonProps) => {
    return (
-        <Button color="red" className="px-6" onClick={rejectFunc}>
+        <Button color="red" className="h-[3.2rem] w-[96px]" onClick={rejectFunc}>
            <i className="diveicon di-exclamation-circle" />
            <span>보완 요청</span>
        </Button>
@@ -6,7 +6,7 @@ interface ReturnButtonProps {

 const ReturnButton = ({ returnFunc }: ReturnButtonProps) => {
    return (
-        <Button color="red" className="px-6" onClick={returnFunc}>
+        <Button color="red" className="h-[3.2rem] w-[96px]" onClick={returnFunc}>
            <i className="diveicon di-arrow-reset" />
            <span>반려</span>
        </Button>
@@ -6,7 +6,7 @@ interface ReviewOpinionButtonProps {

 const ReviewOpinionButton = ({ reviewOpinionFunc }: ReviewOpinionButtonProps) => {
    return (
-        <Button color="emerald" className="px-6" onClick={reviewOpinionFunc}>
+        <Button color="emerald" className="h-[3.2rem] w-[124px]" onClick={reviewOpinionFunc}>
            <i className="diveicon di-pencil" />
            <span>검토의견 작성</span>
        </Button>
@@ -6,7 +6,7 @@ interface SaveButtonProps {

 const SaveButton = ({ saveFunc }: SaveButtonProps) => {
    return (
-        <Button color="green" className="px-6" onClick={saveFunc}>
+        <Button color="green" className="h-[3.2rem] w-[96px]" onClick={saveFunc}>
            <i className="diveicon di-download" />
            <span>저장</span>
        </Button>
@@ -6,7 +6,7 @@ interface SubmitExceptionButtonProps {

 const SubmitExceptionButton = ({ SubmitExceptionFunc }: SubmitExceptionButtonProps) => {
    return (
-        <Button color="red" className="px-6" onClick={SubmitExceptionFunc}>
+        <Button color="red" className="h-[3.2rem] w-[96px]" onClick={SubmitExceptionFunc}>
            <i className="diveicon di-box-arrow-upload" />
            <span>예외제출</span>
        </Button>
@@ -6,7 +6,7 @@ interface SubmitButtonProps {

 const SubmitButton = ({ submitFunc }: SubmitButtonProps) => {
    return (
-        <Button className="px-6" onClick={submitFunc}>
+        <Button className="h-[3.2rem] w-[96px]" onClick={submitFunc}>
            <i className="diveicon di-upload" />
            <span>제출</span>
        </Button>
@@ -305,14 +305,14 @@ const DataGrid = ({ columnInfo, rowStartNum, isExcelImport = true, fixedColumns,
                style={{ display: 'none' }}
                onChange={handleFileChange}
            />
-            <div className="flex justify-end items-center gap-[0.6rem]">
+            <div className="flex justify-end items-center gap-[0.6rem] px-[1.2rem]">
                {isExcelImport &&
-                    <Button className="h-[3.2rem] px-6 bg-gradient-green hover:bg-gradient-green-hover" type="button" onClick={importExcel}>
+                    <Button className="h-[3.2rem] px-6 bg-gradient-green hover:bg-gradient-green-hover w-[96px]" type="button" onClick={importExcel}>
                        <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}>
+                <Button className="h-[3.2rem] px-6 bg-gradient-green hover:bg-gradient-green-hover w-[96px]" type="button" onClick={exportExcel}>
                    <i className="diveicon di-file-excel" />
                    <span>내보내기</span>
                </Button>
@@ -176,10 +176,10 @@ const SearchForm = (props: SearchFormProps = {}) => {
                        </div>
                    }
                    <div className="flex items-center gap-2 ml-auto">
-                        <Button color="green" className="h-[3.2rem]" type="button" onClick={handleReset}>
+                        <Button color="green" className="h-[3.2rem] w-[96px]" type="button" onClick={handleReset}>
                            초기화
                        </Button>
-                        <Button className="h-[3.2rem]" type="submit">
+                        <Button className="h-[3.2rem] w-[96px]" type="submit">
                            조회
                        </Button>
                    </div>
@@ -202,7 +202,7 @@ const SearchForm = (props: SearchFormProps = {}) => {
                        }
                        {mergedProps.userMenual &&
                            <div className="flex items-center gap-2 ml-auto">
-                                <Button className="h-[3.2rem]" type="button">
+                                <Button className="h-[3.2rem] w-[124px]" type="button">
                                    <i className="diveicon di-person-fill" />
                                    사용자 메뉴얼
                                </Button>
@@ -303,7 +303,7 @@ const TabDataGrid = ({ columnInfo, isExcelImport = true, rows = [], showHeaderCh
                                <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" 
+                                            className="h-[3.2rem] px-6 bg-gradient-green hover:bg-gradient-green-hover w-[96px]" 
                                            type="button" 
                                            onClick={() => importExcel(tabKey)}
                                        >
@@ -312,7 +312,7 @@ const TabDataGrid = ({ columnInfo, isExcelImport = true, rows = [], showHeaderCh
                                        </Button>
                                    )}
                                    <Button 
-                                        className="h-[3.2rem] px-6 bg-gradient-green hover:bg-gradient-green-hover" 
+                                        className="h-[3.2rem] px-6 bg-gradient-green hover:bg-gradient-green-hover w-[96px]" 
                                        type="button" 
                                        onClick={() => exportExcel(tabKey)}
                                    >
@@ -11,9 +11,9 @@ import { FacilityInstallColumn } from "@/components/util/column/management/sewag
 import { PipeTypeColumn } from "@/components/util/column/management/sewagePipe/PipeTypeStatus";
 import { PipeDiameterColumn } from "@/components/util/column/management/sewagePipe/PipeDiameterStatus";
 import { ManholeStatusColumn } from "@/components/util/column/management/sewagePipe/ManholeStatus";
-import { 
-    AdminAreaConnectionColumn, 
-    TreatmentPlantConnectionColumn 
+import {
+    AdminAreaConnectionColumn,
+    TreatmentPlantConnectionColumn
 } from "@/components/util/column/management/sewagePipe/ConnectionStatus";

 // 하수도 통계 관리 > 02. 하수관로 
@@ -55,11 +55,13 @@ const SewagePipeMng = () => {
    return (
        <>
            <SearchForm userMenual={true} />
-            <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
-                <SubmitExceptionButton SubmitExceptionFunc={SubmitExceptionFunc} />
-                <LastYearDataButton getLastYearDataFunc={getLastYearDataFunc} />
-                <SubmitButton submitFunc={submitFunc} />
-                <SaveButton saveFunc={saveFunc} />
+            <div className="card !py-0">
+                <div className="flex justify-end items-center gap-[0.6rem] mx-[0.6rem]">
+                    <LastYearDataButton getLastYearDataFunc={getLastYearDataFunc} />
+                    <SubmitExceptionButton SubmitExceptionFunc={SubmitExceptionFunc} />
+                    <SubmitButton submitFunc={submitFunc} />
+                    <SaveButton saveFunc={saveFunc} />
+                </div>
            </div>
            <TabDataGrid columnInfo={SewagePipeMngColumnInfoList} rowDataMap={rowDataMap} setRowDataMap={setRowDataMap} />
        </>
@@ -37,16 +37,18 @@ const SeweragePenetrationRateMng = () => {
    return (
        <>
            <SearchForm userMenual={true} />
-            <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
-                <SubmitExceptionButton SubmitExceptionFunc={SubmitExceptionFunc} />
-                <LastYearDataButton getLastYearDataFunc={getLastYearDataFunc} />
-                <SubmitButton submitFunc={submitFunc} />
-                <SaveButton saveFunc={saveFunc} />
+            <div className="card !py-0">
+                <div className="flex justify-end items-center gap-[0.6rem] mx-[0.6rem]">
+                    <LastYearDataButton getLastYearDataFunc={getLastYearDataFunc} />
+                    <SubmitExceptionButton SubmitExceptionFunc={SubmitExceptionFunc} />
+                    <SubmitButton submitFunc={submitFunc} />
+                    <SaveButton saveFunc={saveFunc} />
+                </div>
            </div>
-            <DataGrid 
-                columnInfo={SeweragePenetrationRateMngColumnInfo} 
-                rowStartNum={3} 
-                isExcelImport={true} 
+            <DataGrid
+                columnInfo={SeweragePenetrationRateMngColumnInfo}
+                rowStartNum={3}
+                isExcelImport={true}
                fixedColumns={1}
                rowData={rowData}
                setRowData={setRowData}
@@ -4,6 +4,8 @@ import ApproveButton from "@/components/button/ApproveButton";
 import RejectButton from "@/components/button/RejectButton";
 import ReturnButton from "@/components/button/ReturnButton";
 import ReviewOpinionButton from "@/components/button/ReviewOpinionButton";
+import LastYearDataButton from "@/components/button/LastYearDataButton";
+import OperateDataButton from "@/components/button/OperateDataButton";
 import { useState } from "react";

 // 하수도 통계 관리 > 00. 통계 입력 현황
@@ -60,14 +62,20 @@ const StatsInputSatusMng = () => {

    return (
        <>
-            <SearchForm />
-            <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
-                <ReviewOpinionButton reviewOpinionFunc={reviewOpinionFunc} />
-                <ReturnButton returnFunc={returnFunc} />
+            <SearchForm userMenual={true} />
+            <div className="card !py-0">
+                <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
+                    <LastYearDataButton getLastYearDataFunc={rejectFunc} />
+                    <OperateDataButton getOperateDataFunc={rejectFunc} />
+                    <ReviewOpinionButton reviewOpinionFunc={reviewOpinionFunc} />
+                    <ReturnButton returnFunc={returnFunc} />
+                </div>
            </div>
-            <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
-                <RejectButton rejectFunc={rejectFunc} />
-                <ApproveButton approveFunc={approveFunc} />
+            <div className="card !py-0">
+                <div className="flex justify-end items-center gap-[0.6rem] m-[0.6rem]">
+                    <RejectButton rejectFunc={rejectFunc} />
+                    <ApproveButton approveFunc={approveFunc} />
+                </div>
            </div>
            <DataGrid columnInfo={{ columns, columnLayout }} rowStartNum={2} fixedColumns={3} rowData={rowData} setRowData={setRowData} />
        </>