Update Tikz to Editor

@@ -206,24 +206,9 @@ const Home = ({history}) => {
         }
         }
       },
       },
     },
     },
+
     {
     {
-      title: 'Mathcha',
-      dataIndex: 'mathcharFileName',
-      render: (value, row) => {
-        if(value){
-          return (
-            <a href={`${host}/mathchaDownload/${value}`}>
-              <DownloadOutlined/>
-            </a>
-            
-          );
-        }else{
-          return <span>-</span>
-        }
-      },
-    },
-    {
-      title: 'TikZ',
+      title: 'Editing Image',
       dataIndex: 'tex',
       dataIndex: 'tex',
       render:(value, row) => {
       render:(value, row) => {
         if(value){
         if(value){

@@ -218,8 +218,8 @@ const Html = ({ visible, onCancel, callback }) => {
             },
             },
           ]}>
           ]}>
           <Select onChange={onChangeTypeSol}>
           <Select onChange={onChangeTypeSol}>
-             <Option value="오지선다형">JPEG</Option>
-             <Option value="단답형">PNG</Option>
+             <Option value="JPEG">JPEG</Option>
+             <Option value="PNG">PNG</Option>
 
 
           </Select>
           </Select>
         </Form.Item>
         </Form.Item>

@@ -4,7 +4,8 @@ import { UploadOutlined, RetweetOutlined } from '@ant-design/icons';
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
 import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
 import { getTexToSvg, checkQno, saveFileAndQno } from '../lib/api/tikz'; // Request api
 import { getTexToSvg, checkQno, saveFileAndQno } from '../lib/api/tikz'; // Request api
 import TikzForm from '../component/tikzForm';
 import TikzForm from '../component/tikzForm';
-
+import 'tui-image-editor/dist/tui-image-editor.css'
+import ImageEditor from '@toast-ui/react-image-editor'
 
 
 
 
 const fetchTexToSvg = async (data) => {
 const fetchTexToSvg = async (data) => {
@@ -187,7 +188,7 @@ const fetchCheckQno = async(qno) => {
 		console.log(values);
 		console.log(values);
 		console.log(qnoCheck);
 		console.log(qnoCheck);
 		if(!qnoCheck){
 		if(!qnoCheck){
-		  message.warning("문제 번호를 확인해 주세요.")
+		  message.warning("그림 번호를 확인해 주세요.")
 		  return;
 		  return;
 		}else{
 		}else{
 			const creator = sessionStorage.getItem('id');
 			const creator = sessionStorage.getItem('id');
@@ -223,9 +224,84 @@ const fetchCheckQno = async(qno) => {
 		setFields([...fields, {name:['typeQue'],value:value}])
 		setFields([...fields, {name:['typeQue'],value:value}])
 	}
 	}
 
 
+	const myTheme = {
+		'common.bi.image': 'https://uicdn.toast.com/toastui/img/tui-image-editor-bi.png',
+'common.bisize.width': '251px',
+'common.bisize.height': '21px',
+'common.backgroundImage': 'none',
+'common.backgroundColor': '#1e1e1e',
+'common.border': '0px',
+
+// header
+'header.backgroundImage': 'none',
+'header.backgroundColor': 'transparent',
+'header.border': '0px',
+
+// load button
+'loadButton.backgroundColor': '#fff',
+'loadButton.border': '1px solid #ddd',
+'loadButton.color': '#222',
+'loadButton.fontFamily': 'NotoSans, sans-serif',
+'loadButton.fontSize': '12px',
+
+// download button
+'downloadButton.backgroundColor': '#fdba3b',
+'downloadButton.border': '1px solid #fdba3b',
+'downloadButton.color': '#fff',
+'downloadButton.fontFamily': 'NotoSans, sans-serif',
+'downloadButton.fontSize': '12px',
+
+// icons default
+'menu.normalIcon.color': '#8a8a8a',
+'menu.activeIcon.color': '#555555',
+'menu.disabledIcon.color': '#434343',
+'menu.hoverIcon.color': '#e9e9e9',
+'submenu.normalIcon.color': '#8a8a8a',
+'submenu.activeIcon.color': '#e9e9e9',
+
+'menu.iconSize.width': '24px',
+'menu.iconSize.height': '24px',
+'submenu.iconSize.width': '32px',
+'submenu.iconSize.height': '32px',
+
+// submenu primary color
+'submenu.backgroundColor': '#1e1e1e',
+'submenu.partition.color': '#858585',
+
+// submenu labels
+'submenu.normalLabel.color': '#858585',
+'submenu.normalLabel.fontWeight': 'lighter',
+'submenu.activeLabel.color': '#fff',
+'submenu.activeLabel.fontWeight': 'lighter',
+
+// checkbox style
+'checkbox.border': '1px solid #ccc',
+'checkbox.backgroundColor': '#fff',
+
+// rango style
+'range.pointer.color': '#fff',
+'range.bar.color': '#666',
+'range.subbar.color': '#d1d1d1',
+
+'range.disabledPointer.color': '#414141',
+'range.disabledBar.color': '#282828',
+'range.disabledSubbar.color': '#414141',
+
+'range.value.color': '#fff',
+'range.value.fontWeight': 'lighter',
+'range.value.fontSize': '11px',
+'range.value.border': '1px solid #353535',
+'range.value.backgroundColor': '#151515',
+'range.title.color': '#fff',
+'range.title.fontWeight': 'lighter',
+
+// colorpicker style
+'colorpicker.button.border': '1px solid #1e1e1e',
+'colorpicker.title.color': '#fff'
+};
 	return (
 	return (
 		<Drawer
 		<Drawer
-			title={'Tikz Editor'}
+			title={'Image Editor'}
 			placement={'bottom'}
 			placement={'bottom'}
 			closable={true}
 			closable={true}
 			height={'90vh'}
 			height={'90vh'}
@@ -245,6 +321,30 @@ const fetchCheckQno = async(qno) => {
 				onChangeTypeQue={onChangeTypeQue}
 				onChangeTypeQue={onChangeTypeQue}
 				qno={qno}>
 				qno={qno}>
 			</TikzForm>
 			</TikzForm>
+			<ImageEditor
+					includeUI={{
+					loadImage: {
+						path: 'img/sampleImage.jpg',
+						name: 'SampleImage'
+					},
+					theme: myTheme,
+					menu: ['shape', 'filter'],
+					initMenu: 'filter',
+					uiSize: {
+						width: '1000px',
+						height: '700px'
+					},
+					menuBarPosition: 'bottom'
+					}}
+					cssMaxHeight={500}
+					cssMaxWidth={700}
+					selectionStyle={{
+					cornerSize: 20,
+					rotatingPointOffset: 70
+					}}
+					usageStatistics={true}
+				/>
+							
 		</Drawer>
 		</Drawer>
 	);
 	);
 };
 };

@@ -47,61 +47,23 @@ console.log(fields);
 			
 			
 			<Form.Item
 			<Form.Item
 				name="typeQue"
 				name="typeQue"
-				label="문제/풀이 구분"
+				label="그림 형식 구분"
 				rules={[
 				rules={[
 					{
 					{
 					required: true,
 					required: true,
-					message: '문제/풀이 구분을 선택해 주세요.',
+					message: '그림 파일 유형을 선택해 주세요.',
 					},
 					},
 				]}
 				]}
 				wrapperCol={{span: 2 }}
 				wrapperCol={{span: 2 }}
 				>
 				>
 					<Select onChange={onChangeTypeQue}>
 					<Select onChange={onChangeTypeQue}>
-						<Option value="문제">문제</Option>
-						<Option value="풀이">풀이</Option>
+						<Option value="JPEG">JPEG</Option>
+						<Option value="PNG">PNG</Option>
 					</Select>
 					</Select>
      	   </Form.Item>
      	   </Form.Item>
-
-
-	
-			<Row justify="space-between" align="middle">
-				<Col span={11}>
-				<Form.Item name="tikzCode" rules={[{ required: true, message: 'tikz 코드를 입력해 주세요.' }]} initialValue={tikzcode}>
-						<TextArea
-							style={{ width: '44vw', height: '70vh' }}
-							onChange={onChangeTikz}
-						/>
-				</Form.Item>
-				</Col>
 				
 				
-				<Col span={2} style={{textAlign:'center'}} >
-					<Tooltip title={'tikz 미리보기'}>
-						<Button type="ghost" icon={<RetweetOutlined />} onClick={onClickEvent}></Button>
-					</Tooltip>
-				</Col>
 
 
-				<Col span={11} >
-				<IFrame
-					style={{
-						width: '44vw',
-						height: '70vh',
-						marginTop: '-15px',
-						border: '1px solid #d9d9d9',
-						}}>
-					<PanZoom
-						style={{
-							display: 'block',
-							outline: 'none',
-							width: '44vw',
-							height: '70vh',
-							margin: '0px',
-						}}>
-						<div dangerouslySetInnerHTML={{ __html: svg }} />
-					</PanZoom>
-				</IFrame>
-			</Col>
-			</Row>
-	<Form.Item>
+			<Form.Item>
 		<Button type="primary" htmlType="submit">
 		<Button type="primary" htmlType="submit">
 			저장하기
 			저장하기
 		</Button>
 		</Button>