Merge remote-tracking branch 'origin/qcast-pub' into dev

public/static/images/canvas/ico-flx05.svg

@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.19444 12.9993C6.09354 12.9998 5.99172 13 5.88889 13C4.92046 13 4.04106 12.9796 3.17535 12.9406C2.14652 12.8941 1.30109 12.109 1.16366 11.1069C1.07397 10.4528 1 9.78258 1 9.10001C1 8.41744 1.07397 7.7472 1.16366 7.09317C1.30109 6.09102 2.14652 5.30591 3.17535 5.25947C4.04106 5.22039 4.92046 5.20001 5.88889 5.20001C6.85732 5.20001 7.73672 5.22039 8.60243 5.25947C9.4922 5.29963 10.1961 5.89229 10.4722 6.70001" stroke="white" stroke-linecap="round"/>
+<path d="M3.13885 5.2V3.7C3.13885 2.20883 4.37007 1 5.88885 1C7.40764 1 8.63885 2.20883 8.63885 3.7V5.2" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M9.95286 10.4138C9.70279 10.2967 9.40511 10.4045 9.28798 10.6545C9.17085 10.9046 9.27862 11.2023 9.52869 11.3194L9.95286 10.4138ZM10.284 11.4L9.85526 11.6572C9.94961 11.8145 10.1224 11.9074 10.3056 11.8995C10.4888 11.8915 10.653 11.784 10.7334 11.6192L10.284 11.4ZM11.604 10.5087C11.8482 10.3796 11.9415 10.0771 11.8125 9.83297C11.6834 9.58883 11.3809 9.49553 11.1368 9.62457L11.604 10.5087ZM12.5 10.6C12.5 11.6407 11.6382 12.5 10.5556 12.5V13.5C12.1731 13.5 13.5 12.2102 13.5 10.6H12.5ZM10.5556 12.5C9.47301 12.5 8.61115 11.6407 8.61115 10.6H7.61115C7.61115 12.2102 8.93811 13.5 10.5556 13.5V12.5ZM8.61115 10.6C8.61115 9.55922 9.47301 8.69995 10.5556 8.69995V7.69995C8.93811 7.69995 7.61115 8.98972 7.61115 10.6H8.61115ZM10.5556 8.69995C11.6382 8.69995 12.5 9.55922 12.5 10.6H13.5C13.5 8.98972 12.1731 7.69995 10.5556 7.69995V8.69995ZM9.74077 10.8666C9.52869 11.3194 9.52853 11.3193 9.52837 11.3193C9.52832 11.3192 9.52816 11.3192 9.52805 11.3191C9.52785 11.319 9.52764 11.3189 9.52744 11.3188C9.52704 11.3186 9.52666 11.3185 9.5263 11.3183C9.52557 11.3179 9.52491 11.3176 9.52432 11.3173C9.52313 11.3168 9.52222 11.3163 9.52157 11.316C9.52026 11.3153 9.51999 11.3152 9.52066 11.3155C9.52202 11.3163 9.52708 11.319 9.53519 11.3239C9.55151 11.3337 9.57943 11.3518 9.6139 11.3792C9.68306 11.4342 9.77529 11.524 9.85526 11.6572L10.7127 11.1427C10.5599 10.888 10.3805 10.7111 10.2363 10.5964C10.164 10.539 10.0998 10.4965 10.0506 10.4669C10.026 10.4521 10.005 10.4405 9.98847 10.4317C9.9802 10.4273 9.97303 10.4237 9.96707 10.4207C9.96408 10.4192 9.9614 10.4179 9.95903 10.4168C9.95784 10.4162 9.95673 10.4157 9.9557 10.4152C9.95519 10.4149 9.95469 10.4147 9.95422 10.4145C9.95398 10.4144 9.95375 10.4142 9.95352 10.4141C9.95341 10.4141 9.95324 10.414 9.95319 10.414C9.95302 10.4139 9.95286 10.4138 9.74077 10.8666ZM10.284 11.4C10.7334 11.6192 10.7333 11.6192 10.7333 11.6193C10.7333 11.6193 10.7333 11.6194 10.7332 11.6194C10.7332 11.6195 10.7332 11.6196 10.7332 11.6196C10.7331 11.6197 10.7331 11.6197 10.7331 11.6196C10.7332 11.6196 10.7333 11.6192 10.7336 11.6187C10.7341 11.6176 10.7352 11.6156 10.7366 11.6127C10.7395 11.6069 10.7442 11.5976 10.7506 11.5852C10.7634 11.5605 10.7829 11.5237 10.8082 11.4781C10.8592 11.3863 10.9325 11.2614 11.0217 11.1288C11.215 10.8417 11.4284 10.6015 11.604 10.5087L11.1368 9.62457C10.725 9.84221 10.3952 10.2687 10.1921 10.5706C10.0831 10.7325 9.99497 10.8828 9.93403 10.9925C9.90342 11.0476 9.87932 11.0931 9.86253 11.1256C9.85413 11.1418 9.84754 11.1548 9.84286 11.1641C9.84051 11.1688 9.83865 11.1725 9.83727 11.1753C9.83658 11.1767 9.83601 11.1779 9.83557 11.1788C9.83534 11.1792 9.83515 11.1796 9.83499 11.1799C9.83491 11.1801 9.83484 11.1803 9.83477 11.1804C9.83474 11.1805 9.8347 11.1805 9.83468 11.1806C9.83464 11.1807 9.8346 11.1807 10.284 11.4Z" fill="white"/>
+</svg>

public/static/images/canvas/return-btn.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.8055 1V2.87932C11.8055 3.05563 11.5851 3.13545 11.4722 3C10.3736 1.7725 8.777 1 7 1C3.68629 1 1 3.68629 1 7C1 10.3137 3.68629 13 7 13C10.3137 13 13 10.3137 13 7" stroke="#B0BCCD" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/app/api/html2canvas/route.js

@@ -3,6 +3,7 @@
 import fs from 'fs/promises'
 
 import { NextResponse } from 'next/server'
+import { writeImage, writeImageBuffer } from '@/lib/fileAction'
 
 export async function GET(req) {
   const path = 'public/plan-map-images'
@@ -15,14 +16,7 @@ export async function GET(req) {
   const response = await fetch(decodeUrl)
   const data = await response.arrayBuffer()
   const buffer = Buffer.from(data)
-
+  await writeImage(fileNm, buffer)
-  try {
-    await fs.readdir(path)
-  } catch {
-    await fs.mkdir(path)
-  } finally {
-    await fs.writeFile(`${path}/${fileNm}.png`, buffer)
-  }
 
   return NextResponse.json({ fileNm: `${fileNm}.png` })
 }

src/app/api/image-upload/route.js

@@ -3,23 +3,25 @@
 import fs from 'fs/promises'
 
 import { NextResponse } from 'next/server'
+import { writeImage } from '@/lib/fileAction'
 
 export async function POST(req) {
   const path = 'public/plan-bg-images'
 
   const formData = await req.formData()
   const file = formData.get('file')
+  const fileName = formData.get('fileName')
   const arrayBuffer = await file.arrayBuffer()
   const buffer = Buffer.from(arrayBuffer)
   // const buffer = new Uint8Array(arrayBuffer)
+  await writeImage(fileName, buffer)
+  // try {
+  //   await fs.readdir(path)
+  // } catch {
+  //   await fs.mkdir(path)
+  // } finally {
+  //   await fs.writeFile(`${path}/${fileName}`, buffer)
+  // }
 
-  try {
+  return NextResponse.json({ fileNm: `${fileName}` })
-    await fs.readdir(path)
-  } catch {
-    await fs.mkdir(path)
-  } finally {
-    await fs.writeFile(`${path}/${file.name}`, buffer)
-  }
-
-  return NextResponse.json({ fileNm: `${file.name}` })
 }

src/components/floor-plan/modal/ImgLoad.jsx

@@ -22,18 +22,20 @@ export default function ImgLoad() {
     setMapPositionAddress,
     handleFileDelete,
     handleMapImageDown,
+    handleAddressDelete,
   } = useRefFiles()
   const { currentCanvasPlan } = usePlan()
   const { getMessage } = useMessage()
   const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext)
 
   const handleModal = () => {
+    console.log(floorPlanState)
     setFloorPlanState({ ...floorPlanState, refFileModalOpen: false })
   }
 
   useEffect(() => {
-    console.log('🚀 ~ ImgLoad ~ floorPlanState.refFileModalOpen:', floorPlanState.refFileModalOpen)
+    // console.log('🚀 ~ ImgLoad ~ floorPlanState.refFileModalOpen:', floorPlanState.refFileModalOpen)
-    console.log('🚀 ~ ImgLoad ~ currentCanvasPlan:', currentCanvasPlan)
+    // console.log('🚀 ~ ImgLoad ~ currentCanvasPlan:', currentCanvasPlan)
   }, [floorPlanState.refFileModalOpen])
 
   useEffect(() => {
@@ -50,7 +52,7 @@ export default function ImgLoad() {
         </div>
         <div className="modal-body">
           <div className="img-flex-box">
-            <span className="normal-font mr10">サイズ調整と回転</span>
+            <span className="normal-font mr10">{getMessage('modal.image.load.size.rotate')}</span>
             <label className="toggle-btn">
               <input
                 type="checkbox"
@@ -64,13 +66,13 @@ export default function ImgLoad() {
             <div className="img-load-item">
               <div className="d-check-radio pop">
                 <input type="radio" name="radio03" id="ra06" value={'1'} onChange={(e) => handleRefFileMethod(e)} checked={refFileMethod === '1'} />
-                <label htmlFor="ra06">ファイルを読み込む</label>
+                <label htmlFor="ra06">{getMessage('common.input.file')}</label>
               </div>
               <div className="img-flex-box">
                 <div className="img-edit-wrap">
                   <label className="img-edit-btn" htmlFor="img_file">
                     <span className="img-edit"></span>
-                    ファイルの追加
+                    {getMessage('common.load')}
                   </label>
                   <input
                     type="file"
@@ -82,10 +84,10 @@ export default function ImgLoad() {
                 <div className="img-name-wrap">
                   {/* <input type="text" className="input-origin al-l" defaultValue={'IMG_Name.PNG'} readOnly />
                   <button className="img-check"></button> */}
-                  {currentCanvasPlan?.bgImageName === null ? (
+                  {!currentCanvasPlan?.bgImageName ? (
-                    <input type="text" className="input-origin al-l" value={refImage ? refImage.name : ''} readOnly />
+                    <input type="text" className="input-origin al-l" value={refImage ? 'ref' + refImage.name : ''} readOnly />
                   ) : (
-                    <input type="text" className="input-origin al-l" value={currentCanvasPlan?.bgImageName} readOnly />
+                    <input type="text" className="input-origin al-l" value={'bg' + currentCanvasPlan?.bgImageName} readOnly />
                   )}
                   {(refImage || currentCanvasPlan?.bgImageName) && <button className="img-check" onClick={handleFileDelete}></button>}
                 </div>
@@ -94,7 +96,7 @@ export default function ImgLoad() {
             <div className="img-load-item">
               <div className="d-check-radio pop">
                 <input type="radio" name="radio03" id="ra07" value={'2'} onChange={(e) => handleRefFileMethod(e)} checked={refFileMethod === '2'} />
-                <label htmlFor="ra07">アドレスを読み込む</label>
+                <label htmlFor="ra07">{getMessage('common.input.address.load')}</label>
               </div>
               <div className="img-flex-box for-address">
                 <input
@@ -106,18 +108,21 @@ export default function ImgLoad() {
                   onChange={(e) => setMapPositionAddress(e.target.value)}
                 />
                 <div className="img-edit-wrap">
-                  <button className="img-edit-btn" onClick={refFileMethod === '2' ? handleMapImageDown : () => {}}>
+                  <button
-                    完了
+                    className={`img-edit-btn ${mapPositionAddress.trim().length === 0 ? 'no-click' : ''}`}
+                    onClick={refFileMethod === '2' ? handleMapImageDown : () => {}}
+                  >
+                    {getMessage('common.finish')}
                   </button>
                 </div>
-                {mapPositionAddress && <span className="check-address fail"></span>}
+                {mapPositionAddress && <button className="check-address fail" onClick={handleAddressDelete}></button>}
                 {/* <span className="check-address success"></span> */}
               </div>
             </div>
           </div>
           <div className="grid-btn-wrap">
             <button className="btn-frame modal act" onClick={handleModal}>
-              完了
+              {getMessage('common.finish')}
             </button>
           </div>
         </div>

src/components/floor-plan/modal/grid/GridCopy.jsx

@@ -17,8 +17,7 @@ export default function GridCopy(props) {
   const currentObject = useRecoilValue(currentObjectState)
   const { copy } = useGrid()
   const handleApply = () => {
-    // copy(currentObject, )
+    copy(currentObject, ['↑', '←'].includes(arrow) ? +length * -1 : +length)
-    copy(currentObject, ['↑', '←'].includes(arrow) ? Number(length) * -1 : Number(length))
   }
   return (
     <WithDraggable isShow={true} pos={pos}>

src/hooks/common/useRefFiles.js

@@ -5,7 +5,7 @@ import { v4 as uuidv4 } from 'uuid'
 import { useSwal } from '@/hooks/useSwal'
 import { useAxios } from '../useAxios'
 import { currentCanvasPlanState } from '@/store/canvasAtom'
-import { convertDwgToPng, writeImageBuffer } from '@/lib/fileAction'
+import { convertDwgToPng, removeImage, writeImageBuffer } from '@/lib/fileAction'
 
 export function useRefFiles() {
   const converterUrl = process.env.NEXT_PUBLIC_CONVERTER_API_URL
@@ -19,17 +19,51 @@ export function useRefFiles() {
   const { get, promisePut, promisePost } = useAxios()
   // const { currentCanvasPlan, setCurrentCanvasPlan } = usePlan()
 
+  useEffect(() => {
+    console.log('refImage', refImage)
+  }, [refImage])
+
+  useEffect(() => {
+    if (refFileMethod === '1') {
+      // 파일 불러오기
+      setMapPositionAddress('')
+    } else {
+      setRefImage(null)
+    }
+  }, [refFileMethod])
   /**
    * 파일 불러오기 버튼 컨트롤
    * @param {*} file
    */
   const handleRefFile = (file) => {
-    setRefImage(file)
+    console.log('handleRefFile', file)
+    console.log('refImage', refImage)
+    if (file && ['image/png', 'image/jpg', 'image/jpeg', 'image/bmp', 'image/gif'].includes(file.type)) {
+      // setRefImage(file)
+      file.name.split('.').pop() === 'dwg' ? handleUploadConvertRefFile(file) : handleUploadImageRefFile(file)
+    } else {
+      swalFire({
+        text: '이미지가 아닙니다.',
+        type: 'alert',
+        icon: 'error',
+      })
+    }
+    if (refImage) {
+      swalFire({
+        text: '파일을 변경하시겠습니까?',
+        type: 'confirm',
+        confirmFn: () => {
+          setRefImage(file)
+          file.name.split('.').pop() === 'dwg' ? handleUploadConvertRefFile(file) : handleUploadImageRefFile(file)
+        },
+      })
+    }
+
     /**
      * 파일 확장자가 dwg일 경우 변환하여 이미지로 저장
      * 파일 확장자가 이미지일 경우 이미지 저장
      */
-    file.name.split('.').pop() === 'dwg' ? handleUploadConvertRefFile(file) : handleUploadImageRefFile(file)
+
     // handleUploadRefFile(file)
   }
 
@@ -37,15 +71,34 @@ export function useRefFiles() {
    * 파일 삭제
    */
   const handleFileDelete = () => {
-    setRefImage(null)
+    swalFire({
-    setCurrentCanvasPlan((prev) => ({ ...prev, bgFileName: null }))
+      text: '삭제하시겠습니까?',
+      type: 'confirm',
+      confirmFn: () => {
+        setRefImage(null)
+        setCurrentCanvasPlan((prev) => ({ ...prev, bgFileName: null }))
+        removeImage(currentCanvasPlan.id).then((res) => {
+          console.log(res)
+        })
+      },
+    })
   }
 
   /**
    * 주소 삭제
    */
   const handleAddressDelete = () => {
-    setCurrentCanvasPlan((prev) => ({ ...prev, mapPositionAddress: null }))
+    swalFire({
+      text: '삭제하시겠습니까?',
+      type: 'confirm',
+      confirmFn: () => {
+        setMapPositionAddress('')
+        setCurrentCanvasPlan((prev) => ({ ...prev, mapPositionAddress: null }))
+        removeImage(currentCanvasPlan.id).then((res) => {
+          console.log(res)
+        })
+      },
+    })
   }
 
   /**
@@ -56,9 +109,10 @@ export function useRefFiles() {
       return
     }
 
-    const res = await get({ url: `http://localhost:3000/api/html2canvas?q=${queryRef.current.value}&fileNm=${uuidv4()}&zoom=20` })
+    const res = await get({ url: `http://localhost:3000/api/html2canvas?q=${queryRef.current.value}&fileNm=${currentCanvasPlan.id}&zoom=20` })
-    console.log('🚀 ~ handleMapImageDown ~ res:', res)
+    // console.log('🚀 ~ handleMapImageDown ~ res:', res)
-    setCurrentCanvasPlan((prev) => ({ ...prev, bgImageName: res.fileNm, mapPositionAddress: queryRef.current.value }))
+    console.log('currentCanvasPlan', currentCanvasPlan)
+    setCurrentCanvasPlan((prev) => ({ ...prev, bgImageName: currentCanvasPlan.id, mapPositionAddress: queryRef.current.value }))
   }
 
   /**
@@ -66,9 +120,10 @@ export function useRefFiles() {
    * @param {*} file
    */
   const handleUploadImageRefFile = async (file) => {
-    console.log('🚀 ~ handleUploadImageRefFile ~ file:', file)
+    // console.log('🚀 ~ handleUploadImageRefFile ~ file:', file)
     const formData = new FormData()
     formData.append('file', file)
+    formData.append('fileName', currentCanvasPlan.id)
 
     const response = await fetch('http://localhost:3000/api/image-upload', {
       method: 'POST',
@@ -76,7 +131,8 @@ export function useRefFiles() {
     })
 
     const result = await response.json()
-    console.log('🚀 ~ handleUploadImageRefFile ~ res:', result)
+    setRefImage(file)
+    // console.log('🚀 ~ handleUploadImageRefFile ~ res:', result)
     // writeImageBuffer(file)
   }
 
@@ -92,6 +148,7 @@ export function useRefFiles() {
       .then((res) => {
         convertDwgToPng(res.data.Files[0].FileName, res.data.Files[0].FileData)
         swalFire({ text: '파일 변환 성공' })
+        setRefImage(res.data.Files[0].FileData)
       })
       .catch((err) => {
         swalFire({ text: '파일 변환 실패', icon: 'error' })
@@ -110,7 +167,7 @@ export function useRefFiles() {
    * 현재 플랜이 변경되면 플랜 상태 저장
    */
   useEffect(() => {
-    console.log('🚀 ~ useRefFiles ~ currentCanvasPlan:', currentCanvasPlan)
+    // console.log('🚀 ~ useRefFiles ~ currentCanvasPlan:', currentCanvasPlan)
     //   const handleCurrentPlan = async () => {
     //     await promisePut({ url: '/api/canvas-management/canvas-statuses', data: currentCanvasPlan }).then((res) => {
     //       console.log('🚀 ~ awaitpromisePut ~ res:', res)

src/hooks/usePlan.js

@@ -6,6 +6,7 @@ import { useAxios } from '@/hooks/useAxios'
 import { useMessage } from '@/hooks/useMessage'
 import { useSwal } from '@/hooks/useSwal'
 import { SAVE_KEY } from '@/common/common'
+import { readImage } from '@/lib/fileAction'
 
 export function usePlan() {
   const [planNum, setPlanNum] = useState(0)
@@ -204,6 +205,7 @@ export function usePlan() {
       userId: userId,
       imageName: 'image_name', // api 필수항목이여서 임시로 넣음, 이후 삭제 필요
       objectNo: currentCanvasPlan.objectNo,
+      mapPositionAddress: currentCanvasPlan.mapPositionAddress,
       canvasStatus: canvasToDbFormat(canvasStatus),
     }
     await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
@@ -233,6 +235,7 @@ export function usePlan() {
   const putCanvasStatus = async (canvasStatus) => {
     const planData = {
       id: currentCanvasPlan.id,
+      mapPositionAddress: currentCanvasPlan.mapPositionAddress,
       canvasStatus: canvasToDbFormat(canvasStatus),
     }
     await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData })
@@ -285,6 +288,7 @@ export function usePlan() {
       updateCurrentPlan(newCurrentId)
     }
   }
+
   const updateCurrentPlan = (newCurrentId) => {
     setPlans((plans) =>
       plans.map((plan) => {
@@ -295,8 +299,13 @@ export function usePlan() {
   useEffect(() => {
     setCurrentCanvasPlan(plans.find((plan) => plan.isCurrent) || null)
     setSelectedPlan(plans.find((plan) => plan.isCurrent))
+    // setBgImage()
   }, [plans])
 
+  const setBgImage = () => {
+    readImage(selectedPlan?.id)
+  }
+
   /**
    * 새로운 plan 생성
    * 현재 plan의 데이터가 있을 경우 복제 여부를 확인

src/lib/fileAction.js

@@ -4,6 +4,7 @@ import fs from 'fs/promises'
 
 const CAD_FILE_PATH = 'public/cad-images'
 const IMAGE_FILE_PATH = 'public/plan-bg-images'
+const FILE_PATH = 'public/plan-images'
 
 /**
  * 파일 변환 & 저장
@@ -39,25 +40,54 @@ const writeImageBase64 = async (title, data) => {
   return fs.writeFile(`${IMAGE_FILE_PATH}/${title}.png`, data, 'base64')
 }
 
-/**
+// /**
- * 이미지 저장
+//  * 이미지 저장
- * Buffer 형식으로 저장
+//  * Buffer 형식으로 저장
- * @param {*} title
+//  * @param {*} title
- * @param {*} data
+//  * @param {*} data
- * @returns
+//  * @returns
- */
+//  */
-const writeImageBuffer = async (file) => {
+// const writeImageBuffer = async (file) => {
-  // 해당 경로에 Directory 가 없다면 생성
+//   // 해당 경로에 Directory 가 없다면 생성
+//   try {
+//     await fs.readdir(IMAGE_FILE_PATH)
+//   } catch {
+//     await fs.mkdir(IMAGE_FILE_PATH)
+//   }
+//
+//   const arrayBuffer = await fileURLToPath.arrayBuffer()
+//   const buffer = new Uint8Array(arrayBuffer)
+//
+//   return fs.writeFile(`${IMAGE_FILE_PATH}/${file.fileName}`, buffer)
+// }
+
+const writeImage = async (fileName, file) => {
   try {
-    await fs.readdir(IMAGE_FILE_PATH)
+    await fs.readdir(FILE_PATH)
   } catch {
-    await fs.mkdir(IMAGE_FILE_PATH)
+    await fs.mkdir(FILE_PATH)
   }
 
-  const arrayBuffer = await fileURLToPath.arrayBuffer()
+  return fs.writeFile(`${FILE_PATH}/${fileName}.png`, file)
-  const buffer = new Uint8Array(arrayBuffer)
-
-  return fs.writeFile(`${IMAGE_FILE_PATH}/${file.fileName}`, buffer)
 }
 
-export { convertDwgToPng, writeImageBase64, writeImageBuffer }
+const readImage = async (fileName) => {
+  await fs
+    .readFile(`${FILE_PATH}/${fileName}.png`)
+    .then((res) => {
+      console.log('readImage-then', res)
+    })
+    .catch((e) => {
+      console.log('readImage-catch', e)
+    })
+}
+
+const removeImage = async (fileName) => {
+  try {
+    await fs.rm(`${FILE_PATH}/${fileName}.png`)
+  } catch (e) {
+    console.log(e)
+  }
+}
+
+export { convertDwgToPng, writeImageBase64, writeImage, readImage, removeImage }

src/locales/ja.json

@@ -341,6 +341,7 @@
   "modal.panel.column.insert.info": "挿入する方向を選択してください。",
   "modal.panel.column.insert.type.left": "左挿入",
   "modal.panel.column.insert.type.right": "右挿入",
+  "modal.image.load.size.rotate": "サイズ調整と回転",
   "contextmenu.column.insert": "列の挿入",
   "contextmenu.row.move": "단 이동(JA)",
   "contextmenu.row.copy": "단 복사(JA)",
@@ -483,9 +484,13 @@
   "common.message.writeToConfirm": "作成解除を実行しますか？",
   "common.message.password.init.success": "パスワード [{0}] に初期化されました。",
   "common.message.no.edit.save": "この文書は変更できません。",
+  "common.load": "ファイルの追加",
   "common.input.file": "ファイルを読み込む",
   "common.input.file.load": "ファイルの追加",
+  "common.input.image.load": "이미지 불러오기",
+  "common.input.address.load": "アドレスを読み込む",
   "common.require": "必須",
+  "common.finish": "完了",
   "common.ok": "確認",
   "commons.west": "立つ",
   "commons.east": "ドン",

src/locales/ko.json

@@ -348,6 +348,7 @@
   "modal.panel.column.insert.info": "삽입할 방향을 선택해주세요.",
   "modal.panel.column.insert.type.left": "왼쪽 삽입",
   "modal.panel.column.insert.type.right": "오른쪽 삽입",
+  "modal.image.load.size.rotate": "크기 조절 및 회전",
   "contextmenu.row.move": "단 이동",
   "contextmenu.row.copy": "단 복사",
   "contextmenu.row.remove": "단 삭제",
@@ -492,9 +493,13 @@
   "common.message.writeToConfirm": "작성 해제를 실행하시겠습니까?",
   "common.message.password.init.success": "비밀번호 [{0}]로 초기화 되었습니다.",
   "common.message.no.edit.save": "This document cannot be changed.",
+  "common.load": "불러오기",
   "common.input.file": "파일 불러오기",
   "common.input.file.load": "불러오기",
+  "common.input.image.load": "이미지 불러오기",
+  "common.input.address.load": "주소 불러오기",
   "common.require": "필수",
+  "common.finish": "완료",
   "common.ok": "확인",
   "commons.west": "서",
   "commons.east": "동",

src/styles/_contents.scss

@@ -139,6 +139,7 @@
                         &.ico02{background-image: url(../../public/static/images/canvas/ico-flx02.svg);}
                         &.ico03{background-image: url(../../public/static/images/canvas/ico-flx03.svg);}
                         &.ico04{background-image: url(../../public/static/images/canvas/ico-flx04.svg);}
+                        &.ico05{background-image: url(../../public/static/images/canvas/ico-flx05.svg);}
                     }
                     .name{
                         font-size: 12px;
@@ -827,6 +828,47 @@
             &:last-child{
                 margin-bottom: 0;
             }
+            .file-item-wrap{
+                display: flex;
+                align-items: center;
+                gap: 30px;
+                .return-wrap{
+                    display: flex;
+                    align-items: center;
+                }
+                .return{
+                    padding: 0;
+                    font-size: 13px;
+                    color: #B0BCCD;
+                    text-decoration: line-through;
+                }
+                .return-btn{
+                    flex: none;
+                    position: relative;
+                    top: 0;
+                    left: 0;
+                    transform: none;
+                    display: flex;
+                    align-items: center;
+                    height: 24px;
+                    padding: 0 9px;
+                    margin-left: 10px;
+                    background: none;
+                    border: 1px solid #B0BCCD;
+                    border-radius: 2px;
+                    font-size: 12px;
+                    color: #B0BCCD;
+                    font-weight: 500;
+                    .return-ico{
+                        display: block;
+                        width: 14px;
+                        height: 14px;
+                        background: url(../../public/static/images/canvas/return-btn.svg)no-repeat center;
+                        background-size: contain;
+                        margin-right: 5px;
+                    }
+                }
+            }
         }
     }
 }
@@ -877,6 +919,16 @@
         &.act{
             background-color: #F7F9FA;
         }
+        .special-note-check-box{
+            display: flex;
+            align-items: center;
+            .check-name{
+                font-size: 13px;
+                color: #45576F;
+                cursor: pointer;
+                line-height: 1.3;
+            }
+        }
     }
 }