fix: 이미지 업로드 마크업 분리 및 코드 정리
This commit is contained in:
yoosangwook
parent
9a387f5418
commit
7e7673e676
@ -1,12 +1,32 @@
|
||||
import { useMessage } from '@/hooks/useMessage'
|
||||
import { useRefFiles } from '@/hooks/common/useRefFiles'
|
||||
import { usePlan } from '@/hooks/usePlan'
|
||||
|
||||
import WithDraggable from '@/components/common/draggable/WithDraggable'
|
||||
|
||||
export default function ImgLoad() {
|
||||
const {
|
||||
refImage,
|
||||
queryRef,
|
||||
setRefImage,
|
||||
handleRefFile,
|
||||
refFileMethod,
|
||||
setRefFileMethod,
|
||||
handleRefFileMethod,
|
||||
mapPositionAddress,
|
||||
setMapPositionAddress,
|
||||
handleFileDelete,
|
||||
handleMapImageDown,
|
||||
} = useRefFiles()
|
||||
const { currentCanvasPlan } = usePlan()
|
||||
const { getMessage } = useMessage()
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true}>
|
||||
<div className={`modal-pop-wrap r`}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">画像を読み込む </h1>
|
||||
<button className="modal-close">닫기</button>
|
||||
<h1 className="title">{getMessage('common.input.file')}</h1>
|
||||
{/* <button className="modal-close">닫기</button> */}
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="img-flex-box">
|
||||
@ -19,7 +39,7 @@ export default function ImgLoad() {
|
||||
<div className="img-load-from">
|
||||
<div className="img-load-item">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio03" id="ra06" />
|
||||
<input type="radio" name="radio03" id="ra06" value={'1'} onChange={(e) => handleRefFileMethod(e)} checked={refFileMethod === '1'} />
|
||||
<label htmlFor="ra06">ファイルを読み込む</label>
|
||||
</div>
|
||||
<div className="img-flex-box">
|
||||
@ -28,26 +48,34 @@ export default function ImgLoad() {
|
||||
<span className="img-edit"></span>
|
||||
ファイルの追加
|
||||
</label>
|
||||
<input type="file" id="img_file" style={{ display: 'none' }} />
|
||||
<input type="file" id="img_file" style={{ display: 'none' }} onChange={(e) => handleRefFile(e.target.files[0])} />
|
||||
</div>
|
||||
<div className="img-name-wrap">
|
||||
<input type="text" className="input-origin al-l" defaultValue={'IMG_Name.PNG'} readOnly />
|
||||
<button className="img-check"></button>
|
||||
{/* <input type="text" className="input-origin al-l" defaultValue={'IMG_Name.PNG'} readOnly />
|
||||
<button className="img-check"></button> */}
|
||||
{currentCanvasPlan?.bgImageName === null ? (
|
||||
<input type="text" className="input-origin al-l" defaultValue={''} value={refImage ? refImage.name : ''} readOnly />
|
||||
) : (
|
||||
<input type="text" className="input-origin al-l" value={currentCanvasPlan?.bgImageName} readOnly />
|
||||
)}
|
||||
{(refImage || currentCanvasPlan?.bgImageName) && <button className="img-check" onClick={handleFileDelete}></button>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="img-load-item">
|
||||
<div className="d-check-radio pop">
|
||||
<input type="radio" name="radio03" id="ra06" />
|
||||
<input type="radio" name="radio03" id="ra06" value={'2'} onChange={(e) => handleRefFileMethod(e)} checked={refFileMethod === '2'} />
|
||||
<label htmlFor="ra06">アドレスを読み込む</label>
|
||||
</div>
|
||||
<div className="img-flex-box for-address">
|
||||
<input type="text" className="input-origin al-l mr10" placeholder={'住所入力'} />
|
||||
<div className="img-edit-wrap">
|
||||
<button className="img-edit-btn">完了</button>
|
||||
<button className="img-edit-btn" onClick={handleMapImageDown}>
|
||||
完了
|
||||
</button>
|
||||
</div>
|
||||
<span className="check-address fail"></span>
|
||||
<span className="check-address success"></span>
|
||||
{mapPositionAddress && <span className="check-address fail"></span>}
|
||||
{/* <span className="check-address success"></span> */}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -8,8 +8,6 @@ import { useMessage } from '@/hooks/useMessage'
|
||||
import { useAxios } from '@/hooks/useAxios'
|
||||
import { useSwal } from '@/hooks/useSwal'
|
||||
import { usePopup } from '@/hooks/usePopup'
|
||||
import useRefFiles from '@/hooks/common/useRefFiles'
|
||||
import { usePlan } from '@/hooks/usePlan'
|
||||
|
||||
import SizeGuide from '@/components/floor-plan/modal/placementShape/SizeGuide'
|
||||
import MaterialGuide from '@/components/floor-plan/modal/placementShape/MaterialGuide'
|
||||
@ -24,20 +22,6 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState)
|
||||
const { closePopup } = usePopup()
|
||||
const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState)
|
||||
const {
|
||||
refImage,
|
||||
queryRef,
|
||||
setRefImage,
|
||||
handleRefFile,
|
||||
refFileMethod,
|
||||
setRefFileMethod,
|
||||
handleRefFileMethod,
|
||||
mapPositionAddress,
|
||||
setMapPositionAddress,
|
||||
handleFileDelete,
|
||||
handleMapImageDown,
|
||||
} = useRefFiles()
|
||||
const { currentCanvasPlan } = usePlan()
|
||||
|
||||
const { getMessage } = useMessage()
|
||||
const { get, post } = useAxios()
|
||||
@ -503,90 +487,6 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>{getMessage('common.input.file')}</th>
|
||||
<td>
|
||||
<div className="pop-form-radio mb10">
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 파일 불러오기 */}
|
||||
{refFileMethod === '1' && (
|
||||
<div className="flex-box">
|
||||
<div className="img-edit-wrap">
|
||||
<label className="img-edit-btn" htmlFor="img_file">
|
||||
<span className="img-edit"></span>
|
||||
{getMessage('common.input.file.load')}
|
||||
</label>
|
||||
<input type="file" id="img_file" style={{ display: 'none' }} onChange={(e) => handleRefFile(e.target.files[0])} />
|
||||
</div>
|
||||
<div className="img-name-wrap">
|
||||
{currentCanvasPlan?.bgImageName === null ? (
|
||||
<input type="text" className="input-origin al-l" defaultValue={''} value={refImage ? refImage.name : ''} readOnly />
|
||||
) : (
|
||||
<input type="text" className="input-origin al-l" value={currentCanvasPlan?.bgImageName} readOnly />
|
||||
)}
|
||||
{(refImage || currentCanvasPlan?.bgImageName) && <button className="img-check" onClick={handleFileDelete}></button>}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 주소 불러오기 */}
|
||||
{refFileMethod === '2' && (
|
||||
<div className="flex-box for-address">
|
||||
<input
|
||||
type="text"
|
||||
className="input-origin al-l mr10"
|
||||
placeholder={'住所入力'}
|
||||
ref={queryRef}
|
||||
value={mapPositionAddress}
|
||||
onChange={(e) => setMapPositionAddress(e.target.value)}
|
||||
/>
|
||||
<div className="img-edit-wrap mr5">
|
||||
<button className="img-edit-btn" onClick={handleMapImageDown}>
|
||||
完了
|
||||
</button>
|
||||
</div>
|
||||
{mapPositionAddress && <span className="check-address fail"></span>}
|
||||
{/* <span className="check-address success"></span> */}
|
||||
</div>
|
||||
)}
|
||||
{/* <div className="flex-box">
|
||||
<div className="img-edit-wrap">
|
||||
<label className="img-edit-btn" htmlFor="img_file">
|
||||
<span className="img-edit"></span>
|
||||
{getMessage('common.input.file.load')}
|
||||
</label>
|
||||
<input type="file" id="img_file" style={{ display: 'none' }} onChange={(e) => handleRefFile(e.target.files[0])} />
|
||||
</div>
|
||||
<div className="img-name-wrap">
|
||||
<input type="text" className="input-origin al-l" defaultValue={''} value={refImage ? refImage.name : ''} readOnly />
|
||||
{refImage && <button className="img-check" onClick={() => setRefImage(null)}></button>}
|
||||
</div>
|
||||
</div> */}
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@ -7,7 +7,7 @@ import { convertDwgToPng } from '@/lib/cadAction'
|
||||
import { useAxios } from '../useAxios'
|
||||
import { currentCanvasPlanState } from '@/store/canvasAtom'
|
||||
|
||||
export default function useRefFiles() {
|
||||
export function useRefFiles() {
|
||||
const converterUrl = process.env.NEXT_PUBLIC_CONVERTER_API_URL
|
||||
const [refImage, setRefImage] = useState(null)
|
||||
const [refFileMethod, setRefFileMethod] = useState('1')
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user