최신커밋
This commit is contained in:
jeong-wonjin
13
src/App.tsx
13
src/App.tsx
@@ -2,20 +2,23 @@ import React, {useState} from 'react';
|
||||
import './App.css';
|
||||
import {PDFViewer} from "./PDFViewer/PDFViewer";
|
||||
import DrawingCanvas from "./DrawingCanvas";
|
||||
import CronMaker from "./CronMaker/CronMaker";
|
||||
import MyComponent from "./test/Test";
|
||||
|
||||
function App() {
|
||||
/*
|
||||
|
||||
return (
|
||||
<DrawingCanvas/>
|
||||
<MyComponent/>
|
||||
);
|
||||
*/
|
||||
|
||||
|
||||
/*
|
||||
return (
|
||||
<PDFViewer fileUrl="./test3.pdf" scale={1.5} renderText={true} waterMarkText="yaguboo-이정민 2023-10-04 15:10:00"/>
|
||||
//waterMarkText="yaguboo-이정민 2023-10-04 15:10:00"
|
||||
<PDFViewer fileUrl="./test.pdf" scale={1.5} renderText={true} />
|
||||
);
|
||||
|
||||
|
||||
*/
|
||||
|
||||
|
||||
}
|
||||
|
||||
694
src/CronMaker/CronMaker.tsx
Normal file
694
src/CronMaker/CronMaker.tsx
Normal file
@@ -0,0 +1,694 @@
|
||||
import useCreateCronExpression, {CronDayTimeProps, CronDefinDayProps} from "./Hook/useCreateCronExpression";
|
||||
import React, {useState} from "react";
|
||||
import {Button, Checkbox, Select} from "antd";
|
||||
import {CheckboxChangeEvent} from "antd/es/checkbox";
|
||||
import type { RadioChangeEvent } from 'antd';
|
||||
import { Radio } from 'antd';
|
||||
|
||||
function CronMaker()
|
||||
{
|
||||
const [everyMin, setEveryMin] = useState<number>(10);
|
||||
const [everyHour, setEveryHour] = useState<number>(1);
|
||||
|
||||
|
||||
const [everyDayHour, setEveryDayHour] = useState<number>(0);
|
||||
const [everyDayMin, setEveryDayMin] = useState<number>(0);
|
||||
|
||||
const [weekDayHour, setWeekDayHour] = useState<number>(0);
|
||||
const [weekDayMin, setWeekDayMin] = useState<number>(0);
|
||||
|
||||
const [weekEndHour, setWeekEndHour] = useState<number>(0);
|
||||
const [weekEndMin, setWeekEndMin] = useState<number>(0);
|
||||
|
||||
const [monDay, setMonDay] = useState<boolean>(false);
|
||||
const [tuesDay, setTuesDay] = useState<boolean>(false);
|
||||
const [wednesDay, setWednesDay] = useState<boolean>(false);
|
||||
const [thursday, setThursday] = useState<boolean>(false);
|
||||
const [friday, setFriday] = useState<boolean>(false);
|
||||
const [saturday, setSaturday] = useState<boolean>(false);
|
||||
const [sunday, setSunday] = useState<boolean>(false);
|
||||
|
||||
const [defineDayHour, setDefineDayHour] = useState<number>(0);
|
||||
const [defineDayMin, setDefineDayMin] = useState<number>(0);
|
||||
|
||||
const [menuStr, setMenuStr] = useState<string>("EveryMin");
|
||||
const {cronExpression, cronExpressionText
|
||||
, createCronEveryMinExpression
|
||||
, createCronEveryHourExpression
|
||||
, createCronEveryDayExpression
|
||||
, createCronEveryWeekDayExpression
|
||||
, createCronEveryWeekEndExpression
|
||||
, createCronDefineDayExpression
|
||||
, initExpression
|
||||
} = useCreateCronExpression();
|
||||
|
||||
const everyDayHourChange = (value: number) => {
|
||||
setEveryDayHour(value);
|
||||
};
|
||||
|
||||
|
||||
|
||||
const everyDayMinChange = (value: number) => {
|
||||
setEveryDayMin(value);
|
||||
};
|
||||
|
||||
const everyDayTimeChange = () =>
|
||||
{
|
||||
const defineTime:CronDayTimeProps = {
|
||||
hour:everyDayHour,
|
||||
minute:everyDayMin,
|
||||
}
|
||||
createCronEveryDayExpression(defineTime);
|
||||
}
|
||||
|
||||
const weekDayHourChange = (value: number) => {
|
||||
setWeekDayHour(value);
|
||||
};
|
||||
|
||||
const weekDayMinChange = (value: number) => {
|
||||
setWeekDayMin(value);
|
||||
};
|
||||
|
||||
const weekDayTimeChange = () =>
|
||||
{
|
||||
const defineTime:CronDayTimeProps = {
|
||||
hour:weekDayHour,
|
||||
minute:weekDayMin,
|
||||
}
|
||||
createCronEveryWeekDayExpression(defineTime);
|
||||
}
|
||||
|
||||
|
||||
const defineDayHourChange = (value: number) => {
|
||||
setDefineDayHour(value);
|
||||
};
|
||||
|
||||
const defineDayMinChange = (value: number) => {
|
||||
setDefineDayMin(value);
|
||||
};
|
||||
|
||||
const defineDayChange = () =>
|
||||
{
|
||||
const defineTime:CronDayTimeProps = {
|
||||
hour:defineDayHour,
|
||||
minute:defineDayMin,
|
||||
}
|
||||
|
||||
const defineDayParam:CronDefinDayProps ={
|
||||
monDay : monDay,
|
||||
tuesDay : tuesDay,
|
||||
wednesDay : wednesDay,
|
||||
thursday : thursday,
|
||||
friday : friday,
|
||||
saturday : saturday,
|
||||
sunday : sunday,
|
||||
cronDayTime : defineTime,
|
||||
}
|
||||
createCronDefineDayExpression(defineDayParam);
|
||||
}
|
||||
|
||||
const everyMinChange = (value: number) => {
|
||||
setEveryMin(value);
|
||||
};
|
||||
|
||||
const everyMinApply = () =>
|
||||
{
|
||||
createCronEveryMinExpression(everyMin);
|
||||
}
|
||||
|
||||
const everyHourChange = (value: number) => {
|
||||
setEveryHour(value);
|
||||
};
|
||||
|
||||
const everyHourApply = () =>
|
||||
{
|
||||
createCronEveryHourExpression(everyHour);
|
||||
}
|
||||
|
||||
const onChangeMonday = (e: CheckboxChangeEvent) => {
|
||||
setMonDay(e.target.checked);
|
||||
};
|
||||
|
||||
const onChangeTuesday = (e: CheckboxChangeEvent) => {
|
||||
setTuesDay(e.target.checked);
|
||||
};
|
||||
|
||||
const onChangeWednesday = (e: CheckboxChangeEvent) => {
|
||||
setWednesDay(e.target.checked);
|
||||
};
|
||||
|
||||
const onChangeThursday = (e: CheckboxChangeEvent) => {
|
||||
setThursday(e.target.checked);
|
||||
};
|
||||
|
||||
const onChangeFriday = (e: CheckboxChangeEvent) => {
|
||||
setFriday(e.target.checked);
|
||||
};
|
||||
|
||||
const onChangeSaturday = (e: CheckboxChangeEvent) => {
|
||||
setSaturday(e.target.checked);
|
||||
};
|
||||
|
||||
const onChangeSunDay = (e: CheckboxChangeEvent) => {
|
||||
setSunday(e.target.checked);
|
||||
};
|
||||
|
||||
|
||||
const weekEndHourChange = (value: number) => {
|
||||
setWeekEndHour(value);
|
||||
};
|
||||
|
||||
const weekEndMinChange = (value: number) => {
|
||||
setWeekEndMin(value);
|
||||
};
|
||||
|
||||
const weekEndTimeChange = () =>
|
||||
{
|
||||
const defineTime:CronDayTimeProps = {
|
||||
hour:weekEndHour,
|
||||
minute:weekEndMin,
|
||||
}
|
||||
createCronEveryWeekEndExpression(defineTime);
|
||||
}
|
||||
const onChangeMenu = (e: RadioChangeEvent) => {
|
||||
initExpression();
|
||||
setMenuStr(e.target.value);
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{margin:"10px", width:"370px"}}>
|
||||
<div style={{marginBottom:"10px"}}>
|
||||
<Radio.Group onChange={onChangeMenu} defaultValue={menuStr}>
|
||||
<Radio.Button value="EveryMin">매분</Radio.Button>
|
||||
<Radio.Button value="EveryHour">매시간</Radio.Button>
|
||||
<Radio.Button value="EveryDay">매일</Radio.Button>
|
||||
<Radio.Button value="WeekDay">평일</Radio.Button>
|
||||
<Radio.Button value="WeekEnd">주말</Radio.Button>
|
||||
<Radio.Button value="DefineDay">날짜지정</Radio.Button>
|
||||
</Radio.Group>
|
||||
</div>
|
||||
{ menuStr === "EveryMin" &&
|
||||
<div>
|
||||
<Select
|
||||
defaultValue={everyMin}
|
||||
style={{ width: 60 }}
|
||||
onChange={everyMinChange}
|
||||
options={[
|
||||
{ value: 1, label: '1' },
|
||||
{ value: 2, label: '2' },
|
||||
{ value: 3, label: '3' },
|
||||
{ value: 4, label: '4' },
|
||||
{ value: 5, label: '5' },
|
||||
{ value: 6, label: '6' },
|
||||
{ value: 7, label: '7' },
|
||||
{ value: 8, label: '8' },
|
||||
{ value: 9, label: '9' },
|
||||
{ value: 10, label: '10' },
|
||||
{ value: 15, label: '15' },
|
||||
{ value: 30, label: '30' },
|
||||
]}
|
||||
/>분 마다 실행
|
||||
<div style={{textAlign:"right"}}>
|
||||
<Button type={"primary"} onClick={everyMinApply}>적용</Button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
menuStr === "EveryHour" &&
|
||||
<div>
|
||||
<Select
|
||||
defaultValue={everyHour}
|
||||
style={{ width: 60 }}
|
||||
onChange={everyHourChange}
|
||||
options={[
|
||||
{ value: 1, label: '1' },
|
||||
{ value: 2, label: '2' },
|
||||
{ value: 3, label: '3' },
|
||||
{ value: 4, label: '4' },
|
||||
{ value: 5, label: '5' },
|
||||
{ value: 6, label: '6' },
|
||||
{ value: 7, label: '7' },
|
||||
{ value: 8, label: '8' },
|
||||
{ value: 9, label: '9' },
|
||||
{ value: 10, label: '10' },
|
||||
{ value: 11, label: '11' },
|
||||
{ value: 12, label: '12' },
|
||||
]}
|
||||
/>시간 마다 실행
|
||||
<div style={{textAlign:"right"}}>
|
||||
<Button type={"primary"} onClick={everyHourApply}>적용</Button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
menuStr === "EveryDay" &&
|
||||
<div>
|
||||
매일 <Select
|
||||
defaultValue={everyDayHour}
|
||||
style={{ width: 60 }}
|
||||
onChange={everyDayHourChange}
|
||||
options={[
|
||||
{ value: 0, label: '00' },
|
||||
{ value: 1, label: '01' },
|
||||
{ value: 2, label: '02' },
|
||||
{ value: 3, label: '03' },
|
||||
{ value: 4, label: '04' },
|
||||
{ value: 5, label: '05' },
|
||||
{ value: 6, label: '06' },
|
||||
{ value: 7, label: '07' },
|
||||
{ value: 8, label: '08' },
|
||||
{ value: 9, label: '09' },
|
||||
{ value: 10, label: '10' },
|
||||
{ value: 11, label: '11' },
|
||||
{ value: 12, label: '12' },
|
||||
{ value: 13, label: '13' },
|
||||
{ value: 14, label: '14' },
|
||||
{ value: 15, label: '15' },
|
||||
{ value: 16, label: '16' },
|
||||
{ value: 17, label: '17' },
|
||||
{ value: 18, label: '18' },
|
||||
{ value: 19, label: '19' },
|
||||
{ value: 20, label: '20' },
|
||||
{ value: 21, label: '21' },
|
||||
{ value: 22, label: '22' },
|
||||
{ value: 23, label: '23' },
|
||||
]}
|
||||
/>시
|
||||
<Select
|
||||
defaultValue={everyDayMin}
|
||||
style={{ width: 60 }}
|
||||
onChange={everyDayMinChange}
|
||||
options={[
|
||||
{ value: 0, label: '00' },
|
||||
{ value: 1, label: '01' },
|
||||
{ value: 2, label: '02' },
|
||||
{ value: 3, label: '03' },
|
||||
{ value: 4, label: '04' },
|
||||
{ value: 5, label: '05' },
|
||||
{ value: 6, label: '06' },
|
||||
{ value: 7, label: '07' },
|
||||
{ value: 8, label: '08' },
|
||||
{ value: 9, label: '09' },
|
||||
{ value: 10, label: '10' },
|
||||
{ value: 11, label: '11' },
|
||||
{ value: 12, label: '12' },
|
||||
{ value: 13, label: '13' },
|
||||
{ value: 14, label: '14' },
|
||||
{ value: 15, label: '15' },
|
||||
{ value: 16, label: '16' },
|
||||
{ value: 17, label: '17' },
|
||||
{ value: 18, label: '18' },
|
||||
{ value: 19, label: '19' },
|
||||
{ value: 20, label: '20' },
|
||||
{ value: 21, label: '21' },
|
||||
{ value: 22, label: '22' },
|
||||
{ value: 23, label: '23' },
|
||||
{ value: 24, label: '24' },
|
||||
{ value: 25, label: '25' },
|
||||
{ value: 26, label: '26' },
|
||||
{ value: 27, label: '27' },
|
||||
{ value: 28, label: '28' },
|
||||
{ value: 29, label: '29' },
|
||||
{ value: 30, label: '30' },
|
||||
{ value: 31, label: '31' },
|
||||
{ value: 32, label: '32' },
|
||||
{ value: 33, label: '33' },
|
||||
{ value: 34, label: '34' },
|
||||
{ value: 35, label: '35' },
|
||||
{ value: 36, label: '36' },
|
||||
{ value: 37, label: '37' },
|
||||
{ value: 38, label: '38' },
|
||||
{ value: 39, label: '39' },
|
||||
{ value: 40, label: '40' },
|
||||
{ value: 41, label: '41' },
|
||||
{ value: 42, label: '42' },
|
||||
{ value: 43, label: '43' },
|
||||
{ value: 44, label: '44' },
|
||||
{ value: 45, label: '45' },
|
||||
{ value: 46, label: '46' },
|
||||
{ value: 47, label: '47' },
|
||||
{ value: 48, label: '48' },
|
||||
{ value: 49, label: '49' },
|
||||
{ value: 50, label: '50' },
|
||||
{ value: 51, label: '51' },
|
||||
{ value: 52, label: '52' },
|
||||
{ value: 53, label: '53' },
|
||||
{ value: 54, label: '54' },
|
||||
{ value: 55, label: '55' },
|
||||
{ value: 56, label: '56' },
|
||||
{ value: 57, label: '57' },
|
||||
{ value: 58, label: '58' },
|
||||
{ value: 59, label: '59' },
|
||||
]}
|
||||
/> 분 마다 실행
|
||||
<div style={{textAlign:"right"}}>
|
||||
<Button type={"primary"} onClick={everyDayTimeChange}>적용</Button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
menuStr === "WeekDay" &&
|
||||
<div>
|
||||
평일 <Select
|
||||
defaultValue={weekDayHour}
|
||||
style={{ width: 60 }}
|
||||
onChange={weekDayHourChange}
|
||||
options={[
|
||||
{ value: 0, label: '00' },
|
||||
{ value: 1, label: '01' },
|
||||
{ value: 2, label: '02' },
|
||||
{ value: 3, label: '03' },
|
||||
{ value: 4, label: '04' },
|
||||
{ value: 5, label: '05' },
|
||||
{ value: 6, label: '06' },
|
||||
{ value: 7, label: '07' },
|
||||
{ value: 8, label: '08' },
|
||||
{ value: 9, label: '09' },
|
||||
{ value: 10, label: '10' },
|
||||
{ value: 11, label: '11' },
|
||||
{ value: 12, label: '12' },
|
||||
{ value: 13, label: '13' },
|
||||
{ value: 14, label: '14' },
|
||||
{ value: 15, label: '15' },
|
||||
{ value: 16, label: '16' },
|
||||
{ value: 17, label: '17' },
|
||||
{ value: 18, label: '18' },
|
||||
{ value: 19, label: '19' },
|
||||
{ value: 20, label: '20' },
|
||||
{ value: 21, label: '21' },
|
||||
{ value: 22, label: '22' },
|
||||
{ value: 23, label: '23' },
|
||||
]}
|
||||
/>시
|
||||
<Select
|
||||
defaultValue={weekDayMin}
|
||||
style={{ width: 60 }}
|
||||
onChange={weekDayMinChange}
|
||||
options={[
|
||||
{ value: 0, label: '00' },
|
||||
{ value: 1, label: '01' },
|
||||
{ value: 2, label: '02' },
|
||||
{ value: 3, label: '03' },
|
||||
{ value: 4, label: '04' },
|
||||
{ value: 5, label: '05' },
|
||||
{ value: 6, label: '06' },
|
||||
{ value: 7, label: '07' },
|
||||
{ value: 8, label: '08' },
|
||||
{ value: 9, label: '09' },
|
||||
{ value: 10, label: '10' },
|
||||
{ value: 11, label: '11' },
|
||||
{ value: 12, label: '12' },
|
||||
{ value: 13, label: '13' },
|
||||
{ value: 14, label: '14' },
|
||||
{ value: 15, label: '15' },
|
||||
{ value: 16, label: '16' },
|
||||
{ value: 17, label: '17' },
|
||||
{ value: 18, label: '18' },
|
||||
{ value: 19, label: '19' },
|
||||
{ value: 20, label: '20' },
|
||||
{ value: 21, label: '21' },
|
||||
{ value: 22, label: '22' },
|
||||
{ value: 23, label: '23' },
|
||||
{ value: 24, label: '24' },
|
||||
{ value: 25, label: '25' },
|
||||
{ value: 26, label: '26' },
|
||||
{ value: 27, label: '27' },
|
||||
{ value: 28, label: '28' },
|
||||
{ value: 29, label: '29' },
|
||||
{ value: 30, label: '30' },
|
||||
{ value: 31, label: '31' },
|
||||
{ value: 32, label: '32' },
|
||||
{ value: 33, label: '33' },
|
||||
{ value: 34, label: '34' },
|
||||
{ value: 35, label: '35' },
|
||||
{ value: 36, label: '36' },
|
||||
{ value: 37, label: '37' },
|
||||
{ value: 38, label: '38' },
|
||||
{ value: 39, label: '39' },
|
||||
{ value: 40, label: '40' },
|
||||
{ value: 41, label: '41' },
|
||||
{ value: 42, label: '42' },
|
||||
{ value: 43, label: '43' },
|
||||
{ value: 44, label: '44' },
|
||||
{ value: 45, label: '45' },
|
||||
{ value: 46, label: '46' },
|
||||
{ value: 47, label: '47' },
|
||||
{ value: 48, label: '48' },
|
||||
{ value: 49, label: '49' },
|
||||
{ value: 50, label: '50' },
|
||||
{ value: 51, label: '51' },
|
||||
{ value: 52, label: '52' },
|
||||
{ value: 53, label: '53' },
|
||||
{ value: 54, label: '54' },
|
||||
{ value: 55, label: '55' },
|
||||
{ value: 56, label: '56' },
|
||||
{ value: 57, label: '57' },
|
||||
{ value: 58, label: '58' },
|
||||
{ value: 59, label: '59' },
|
||||
]}
|
||||
/> 분 마다 실행
|
||||
<div style={{textAlign:"right"}}>
|
||||
<Button type={"primary"} onClick={weekDayTimeChange}>적용</Button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
menuStr === "WeekEnd" &&
|
||||
<div>
|
||||
주말 <Select
|
||||
defaultValue={weekEndHour}
|
||||
style={{ width: 60 }}
|
||||
onChange={weekEndHourChange}
|
||||
options={[
|
||||
{ value: 0, label: '00' },
|
||||
{ value: 1, label: '01' },
|
||||
{ value: 2, label: '02' },
|
||||
{ value: 3, label: '03' },
|
||||
{ value: 4, label: '04' },
|
||||
{ value: 5, label: '05' },
|
||||
{ value: 6, label: '06' },
|
||||
{ value: 7, label: '07' },
|
||||
{ value: 8, label: '08' },
|
||||
{ value: 9, label: '09' },
|
||||
{ value: 10, label: '10' },
|
||||
{ value: 11, label: '11' },
|
||||
{ value: 12, label: '12' },
|
||||
{ value: 13, label: '13' },
|
||||
{ value: 14, label: '14' },
|
||||
{ value: 15, label: '15' },
|
||||
{ value: 16, label: '16' },
|
||||
{ value: 17, label: '17' },
|
||||
{ value: 18, label: '18' },
|
||||
{ value: 19, label: '19' },
|
||||
{ value: 20, label: '20' },
|
||||
{ value: 21, label: '21' },
|
||||
{ value: 22, label: '22' },
|
||||
{ value: 23, label: '23' },
|
||||
]}
|
||||
/>시
|
||||
<Select
|
||||
defaultValue={weekEndMin}
|
||||
style={{ width: 60 }}
|
||||
onChange={weekEndMinChange}
|
||||
options={[
|
||||
{ value: 0, label: '00' },
|
||||
{ value: 1, label: '01' },
|
||||
{ value: 2, label: '02' },
|
||||
{ value: 3, label: '03' },
|
||||
{ value: 4, label: '04' },
|
||||
{ value: 5, label: '05' },
|
||||
{ value: 6, label: '06' },
|
||||
{ value: 7, label: '07' },
|
||||
{ value: 8, label: '08' },
|
||||
{ value: 9, label: '09' },
|
||||
{ value: 10, label: '10' },
|
||||
{ value: 11, label: '11' },
|
||||
{ value: 12, label: '12' },
|
||||
{ value: 13, label: '13' },
|
||||
{ value: 14, label: '14' },
|
||||
{ value: 15, label: '15' },
|
||||
{ value: 16, label: '16' },
|
||||
{ value: 17, label: '17' },
|
||||
{ value: 18, label: '18' },
|
||||
{ value: 19, label: '19' },
|
||||
{ value: 20, label: '20' },
|
||||
{ value: 21, label: '21' },
|
||||
{ value: 22, label: '22' },
|
||||
{ value: 23, label: '23' },
|
||||
{ value: 24, label: '24' },
|
||||
{ value: 25, label: '25' },
|
||||
{ value: 26, label: '26' },
|
||||
{ value: 27, label: '27' },
|
||||
{ value: 28, label: '28' },
|
||||
{ value: 29, label: '29' },
|
||||
{ value: 30, label: '30' },
|
||||
{ value: 31, label: '31' },
|
||||
{ value: 32, label: '32' },
|
||||
{ value: 33, label: '33' },
|
||||
{ value: 34, label: '34' },
|
||||
{ value: 35, label: '35' },
|
||||
{ value: 36, label: '36' },
|
||||
{ value: 37, label: '37' },
|
||||
{ value: 38, label: '38' },
|
||||
{ value: 39, label: '39' },
|
||||
{ value: 40, label: '40' },
|
||||
{ value: 41, label: '41' },
|
||||
{ value: 42, label: '42' },
|
||||
{ value: 43, label: '43' },
|
||||
{ value: 44, label: '44' },
|
||||
{ value: 45, label: '45' },
|
||||
{ value: 46, label: '46' },
|
||||
{ value: 47, label: '47' },
|
||||
{ value: 48, label: '48' },
|
||||
{ value: 49, label: '49' },
|
||||
{ value: 50, label: '50' },
|
||||
{ value: 51, label: '51' },
|
||||
{ value: 52, label: '52' },
|
||||
{ value: 53, label: '53' },
|
||||
{ value: 54, label: '54' },
|
||||
{ value: 55, label: '55' },
|
||||
{ value: 56, label: '56' },
|
||||
{ value: 57, label: '57' },
|
||||
{ value: 58, label: '58' },
|
||||
{ value: 59, label: '59' },
|
||||
]}
|
||||
/> 분 마다 실행
|
||||
<div style={{textAlign:"right"}}>
|
||||
<Button type={"primary"} onClick={weekEndTimeChange}>적용</Button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
{
|
||||
menuStr === "DefineDay" &&
|
||||
<div>
|
||||
<Checkbox onChange={onChangeMonday}>월요일</Checkbox>
|
||||
<Checkbox onChange={onChangeTuesday}>화요일</Checkbox>
|
||||
<Checkbox onChange={onChangeWednesday}>수요일</Checkbox>
|
||||
<Checkbox onChange={onChangeThursday}>목요일</Checkbox>
|
||||
<Checkbox onChange={onChangeFriday}>금요일</Checkbox>
|
||||
<Checkbox onChange={onChangeSaturday}>토요일</Checkbox>
|
||||
<Checkbox onChange={onChangeSunDay}>일요일</Checkbox>
|
||||
|
||||
<Select
|
||||
defaultValue={defineDayHour}
|
||||
style={{ width: 60 }}
|
||||
onChange={defineDayHourChange}
|
||||
options={[
|
||||
{ value: 0, label: '00' },
|
||||
{ value: 1, label: '01' },
|
||||
{ value: 2, label: '02' },
|
||||
{ value: 3, label: '03' },
|
||||
{ value: 4, label: '04' },
|
||||
{ value: 5, label: '05' },
|
||||
{ value: 6, label: '06' },
|
||||
{ value: 7, label: '07' },
|
||||
{ value: 8, label: '08' },
|
||||
{ value: 9, label: '09' },
|
||||
{ value: 10, label: '10' },
|
||||
{ value: 11, label: '11' },
|
||||
{ value: 12, label: '12' },
|
||||
{ value: 13, label: '13' },
|
||||
{ value: 14, label: '14' },
|
||||
{ value: 15, label: '15' },
|
||||
{ value: 16, label: '16' },
|
||||
{ value: 17, label: '17' },
|
||||
{ value: 18, label: '18' },
|
||||
{ value: 19, label: '19' },
|
||||
{ value: 20, label: '20' },
|
||||
{ value: 21, label: '21' },
|
||||
{ value: 22, label: '22' },
|
||||
{ value: 23, label: '23' },
|
||||
]}
|
||||
/>시
|
||||
<Select
|
||||
defaultValue={defineDayMin}
|
||||
style={{ width: 60 }}
|
||||
onChange={defineDayMinChange}
|
||||
options={[
|
||||
{ value: 0, label: '00' },
|
||||
{ value: 1, label: '01' },
|
||||
{ value: 2, label: '02' },
|
||||
{ value: 3, label: '03' },
|
||||
{ value: 4, label: '04' },
|
||||
{ value: 5, label: '05' },
|
||||
{ value: 6, label: '06' },
|
||||
{ value: 7, label: '07' },
|
||||
{ value: 8, label: '08' },
|
||||
{ value: 9, label: '09' },
|
||||
{ value: 10, label: '10' },
|
||||
{ value: 11, label: '11' },
|
||||
{ value: 12, label: '12' },
|
||||
{ value: 13, label: '13' },
|
||||
{ value: 14, label: '14' },
|
||||
{ value: 15, label: '15' },
|
||||
{ value: 16, label: '16' },
|
||||
{ value: 17, label: '17' },
|
||||
{ value: 18, label: '18' },
|
||||
{ value: 19, label: '19' },
|
||||
{ value: 20, label: '20' },
|
||||
{ value: 21, label: '21' },
|
||||
{ value: 22, label: '22' },
|
||||
{ value: 23, label: '23' },
|
||||
{ value: 24, label: '24' },
|
||||
{ value: 25, label: '25' },
|
||||
{ value: 26, label: '26' },
|
||||
{ value: 27, label: '27' },
|
||||
{ value: 28, label: '28' },
|
||||
{ value: 29, label: '29' },
|
||||
{ value: 30, label: '30' },
|
||||
{ value: 31, label: '31' },
|
||||
{ value: 32, label: '32' },
|
||||
{ value: 33, label: '33' },
|
||||
{ value: 34, label: '34' },
|
||||
{ value: 35, label: '35' },
|
||||
{ value: 36, label: '36' },
|
||||
{ value: 37, label: '37' },
|
||||
{ value: 38, label: '38' },
|
||||
{ value: 39, label: '39' },
|
||||
{ value: 40, label: '40' },
|
||||
{ value: 41, label: '41' },
|
||||
{ value: 42, label: '42' },
|
||||
{ value: 43, label: '43' },
|
||||
{ value: 44, label: '44' },
|
||||
{ value: 45, label: '45' },
|
||||
{ value: 46, label: '46' },
|
||||
{ value: 47, label: '47' },
|
||||
{ value: 48, label: '48' },
|
||||
{ value: 49, label: '49' },
|
||||
{ value: 50, label: '50' },
|
||||
{ value: 51, label: '51' },
|
||||
{ value: 52, label: '52' },
|
||||
{ value: 53, label: '53' },
|
||||
{ value: 54, label: '54' },
|
||||
{ value: 55, label: '55' },
|
||||
{ value: 56, label: '56' },
|
||||
{ value: 57, label: '57' },
|
||||
{ value: 58, label: '58' },
|
||||
{ value: 59, label: '59' },
|
||||
]}
|
||||
/> 분 마다 실행
|
||||
<div style={{textAlign:"right"}}>
|
||||
<Button type={"primary"} onClick={defineDayChange}>적용</Button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div>
|
||||
{cronExpression}
|
||||
</div>
|
||||
<div>
|
||||
{cronExpressionText}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
}
|
||||
export default CronMaker;
|
||||
127
src/CronMaker/Hook/useCreateCronExpression.ts
Normal file
127
src/CronMaker/Hook/useCreateCronExpression.ts
Normal file
@@ -0,0 +1,127 @@
|
||||
import {useState} from "react";
|
||||
|
||||
|
||||
|
||||
export interface CronDayTimeProps
|
||||
{
|
||||
hour :number,
|
||||
minute :number,
|
||||
}
|
||||
|
||||
export interface CronDefinDayProps
|
||||
{
|
||||
monDay:boolean,
|
||||
tuesDay:boolean,
|
||||
wednesDay:boolean,
|
||||
thursday:boolean,
|
||||
friday:boolean,
|
||||
saturday:boolean,
|
||||
sunday:boolean,
|
||||
cronDayTime : CronDayTimeProps
|
||||
}
|
||||
|
||||
const useCreateCronExpression = ( ) => {
|
||||
|
||||
const [cronExpression, setCronExpression] = useState<string>("");
|
||||
const [cronExpressionText, setCronExpressionText] = useState<string>("")
|
||||
|
||||
const createCronEveryMinExpression = (min:number) => {
|
||||
setCronExpression(`0 0/${min} * 1/1 * ?`);
|
||||
setCronExpressionText(`${min}분 마다 실행`);
|
||||
};
|
||||
|
||||
const createCronEveryHourExpression = (hour:number) => {
|
||||
setCronExpression(`0 0 0/${hour} 1/1 * ?`);
|
||||
setCronExpressionText(`${hour}시간 마다 실행`);
|
||||
};
|
||||
|
||||
const createCronEveryDayExpression = (props:CronDayTimeProps) => {
|
||||
setCronExpression(`0 ${props.minute} ${props.hour} 1/1 * ?`);
|
||||
setCronExpressionText(`매일 ${props.hour}시 ${props.minute}분마다 실행`);
|
||||
};
|
||||
|
||||
const createCronEveryWeekDayExpression = (props:CronDayTimeProps) => {
|
||||
setCronExpression(`0 ${props.minute} ${props.hour} ? * MON-FRI`);
|
||||
setCronExpressionText(`평일 ${props.hour}시 ${props.minute}분마다 실행`);
|
||||
};
|
||||
|
||||
const createCronEveryWeekEndExpression = (props:CronDayTimeProps) => {
|
||||
setCronExpression(`0 ${props.minute} ${props.hour} ? * SAT-SUN`);
|
||||
setCronExpressionText(`주말 ${props.hour}시 ${props.minute}분마다 실행`);
|
||||
};
|
||||
|
||||
const initExpression = () => {
|
||||
setCronExpression("");
|
||||
setCronExpressionText("");
|
||||
};
|
||||
|
||||
const createCronDefineDayExpression = (props:CronDefinDayProps) => {
|
||||
const {monDay, tuesDay, wednesDay, thursday, friday, saturday, sunday, cronDayTime} = props;
|
||||
let cron:string = "";
|
||||
let cronText:string = "";
|
||||
if (monDay) {
|
||||
if (cron.length === 0) cron = "MON";
|
||||
else cron += ",MON";
|
||||
|
||||
if (cronText.length === 0) cronText = "월";
|
||||
else cronText += ",월";
|
||||
}
|
||||
if (tuesDay) {
|
||||
if (cron.length === 0) cron = "TUE";
|
||||
else cron += ",TUE";
|
||||
|
||||
if (cronText.length === 0) cronText = "화";
|
||||
else cronText += ",화";
|
||||
}
|
||||
if (wednesDay) {
|
||||
if (cron.length === 0) cron = "WED";
|
||||
else cron += ",WED";
|
||||
|
||||
if (cronText.length === 0) cronText = "수";
|
||||
else cronText += ",수";
|
||||
}
|
||||
if (thursday) {
|
||||
if (cron.length === 0) cron = "THU";
|
||||
else cron += ",THU";
|
||||
|
||||
if (cronText.length === 0) cronText = "목";
|
||||
else cronText += ",목";
|
||||
}
|
||||
if (friday) {
|
||||
if (cron.length === 0) cron = "FRI";
|
||||
else cron += ",FRI";
|
||||
|
||||
if (cronText.length === 0) cronText = "금";
|
||||
else cronText += ",금";
|
||||
}
|
||||
if (saturday) {
|
||||
if (cron.length === 0) cron = "SAT";
|
||||
else cron += ",SAT";
|
||||
|
||||
if (cronText.length === 0) cronText = "토";
|
||||
else cronText += ",토";
|
||||
}
|
||||
if (sunday) {
|
||||
if (cron.length === 0) cron = "SUN";
|
||||
else cron += ",SUN";
|
||||
|
||||
if (cronText.length === 0) cronText = "일";
|
||||
else cronText += ",일";
|
||||
}
|
||||
|
||||
setCronExpression(`0 ${cronDayTime.minute} ${cronDayTime.hour} ? * ${cron}`);
|
||||
setCronExpressionText(`${cronText}요일 ${cronDayTime.hour}시 ${cronDayTime.minute}분마다 실행`);
|
||||
};
|
||||
|
||||
return { cronExpression, cronExpressionText
|
||||
, createCronEveryMinExpression
|
||||
, createCronEveryHourExpression
|
||||
, createCronEveryDayExpression
|
||||
, createCronEveryWeekDayExpression
|
||||
, createCronEveryWeekEndExpression
|
||||
, createCronDefineDayExpression
|
||||
, initExpression
|
||||
};
|
||||
};
|
||||
|
||||
export default useCreateCronExpression;
|
||||
@@ -18,11 +18,21 @@ import {
|
||||
} from "@ant-design/icons";
|
||||
import html2canvas from "html2canvas";
|
||||
import {PDFDocument, PDFPage} from "pdf-lib";
|
||||
import {PasswordException} from "pdfjs-dist/types/src/shared/util";
|
||||
import { jsPDF } from "jspdf";
|
||||
|
||||
const PdfjsVersion:string = "3.11.174";
|
||||
GlobalWorkerOptions.workerSrc = `https://unpkg.com/pdfjs-dist@${PdfjsVersion}/build/pdf.worker.min.js`;
|
||||
const currentUrl = getCurrentUrl();
|
||||
console.log(currentUrl);
|
||||
GlobalWorkerOptions.workerSrc = `${currentUrl}/pdf.worker.js`;
|
||||
|
||||
function getCurrentUrl(): string {
|
||||
// window.location 객체를 통해 현재 URL 정보에 접근
|
||||
const { protocol, hostname, port } = window.location;
|
||||
|
||||
// 포트가 80이 아닌 경우에만 포트를 포함한 URL 반환
|
||||
const portSuffix = (port === '80' || port === '443') ? '' : `:${port}`;
|
||||
|
||||
// 조합된 URL 반환
|
||||
return `${protocol}//${hostname}${portSuffix}/pdfwiz/pdfjs`;
|
||||
}
|
||||
|
||||
interface PdfViewerProps {
|
||||
fileUrl: string;
|
||||
@@ -43,7 +53,7 @@ async function loadPage(pdf:PDFDocumentProxy, pageNum:number, scale:number, rota
|
||||
|
||||
const loadingImage = document.createElement("img");
|
||||
|
||||
loadingImage.setAttribute("src", "pdf-loading.svg");
|
||||
loadingImage.setAttribute("src", "pdfwiz/image/loading.svg");
|
||||
const textLayer = isRenderText ? document.createElement("div") : null;
|
||||
if (textLayer)
|
||||
{
|
||||
@@ -152,8 +162,8 @@ export const PDFViewer = (props: PdfViewerProps) => {
|
||||
, waterMarkText, fileName} = props;
|
||||
|
||||
const [modalVisible, setModalVisible] = useState<boolean>(false);
|
||||
const downloadUrl = downloadFileUrl || fileUrl;
|
||||
const fileTitle= fileName||fileUrl;
|
||||
//const downloadUrl = downloadFileUrl || fileUrl;
|
||||
//const fileTitle= fileName||fileUrl;
|
||||
const [threshold, setThreshold] = useState<number>(0.7);
|
||||
const [scaleValue, setScaleValue] = useState<number>(scale || 1.5);
|
||||
const [currentPage, setCurrentPage] = useState<number>(1);
|
||||
@@ -322,6 +332,8 @@ export const PDFViewer = (props: PdfViewerProps) => {
|
||||
onClick: handleRatioMenuClick,
|
||||
};
|
||||
|
||||
|
||||
|
||||
function enterFullScreen(elementId: string): void {
|
||||
const element = document.getElementById(elementId) as HTMLElement & {
|
||||
requestFullscreen?: () => Promise<void>;
|
||||
@@ -945,7 +957,7 @@ export const PDFViewer = (props: PdfViewerProps) => {
|
||||
|
||||
const loadOption: any = {
|
||||
url: fileUrl,
|
||||
cMapUrl: `https://unpkg.com/pdfjs-dist@${PdfjsVersion}/cmaps/`,
|
||||
cMapUrl: `${currentUrl}/cmaps/`,
|
||||
cMapPacked: true,
|
||||
enableXfa: true,
|
||||
};
|
||||
|
||||
31
src/test/Test.tsx
Normal file
31
src/test/Test.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import { Input } from 'antd';
|
||||
import React, { useState } from 'react';
|
||||
import {EditOutlined} from "@ant-design/icons";
|
||||
|
||||
const MyComponent = () => {
|
||||
const [inputValue, setInputValue] = useState('');
|
||||
|
||||
const handleChange = (e:any) => {
|
||||
// Input 값이 변경될 때 상태 업데이트
|
||||
setInputValue(e.target.value);
|
||||
};
|
||||
|
||||
const setNewValue = () => {
|
||||
// 상태를 직접 변경
|
||||
setInputValue('New Value');
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Input
|
||||
defaultValue={inputValue}
|
||||
prefix={<EditOutlined className="site-form-item-icon" />}
|
||||
placeholder="서비스코드"
|
||||
value={inputValue}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<button onClick={setNewValue}>Set New Value</button>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export default MyComponent;
|
||||
Reference in New Issue
Block a user