qcast3/qcast-pub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

이미지 불러오기 pop 추가 및 수정

Browse Source
This commit is contained in:
김창수 2024-11-12 09:17:23 +09:00
parent 59a4633439
commit 26c4b1ad2a
9 changed files with 152 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
public/static/images/canvas/side_icon10.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.75 3.94737H12.0625C13.6425 3.94737 14.4325 3.94737 15 4.31991C15.2457 4.48119 15.4567 4.68842 15.6208 4.92979C16 5.48734 16 6.26349 16 7.81579C16 8.02719 16.0003 8.01008 16 8.36842M8.5 3.94737L8.02492 3.01388C7.63134 2.24053 7.27167 1.46209 6.39944 1.14074C6.01742 1 5.58102 1 4.7082 1C3.34585 1 2.66467 1 2.15355 1.28023C1.7892 1.47999 1.48857 1.77535 1.28524 2.13331C1 2.63547 1 3.30469 1 4.64315V6.89474C1 10.3682 1 12.105 2.09835 13.1841C3.11612 14.184 4.7087 14.2574 7.75 14.2627" stroke="white" stroke-linecap="round"/>
<path d="M12.7793 14.5884C13.3445 15.1372 14.2609 15.1372 14.8261 14.5884C15.3914 14.0396 15.3914 13.1498 14.8261 12.601L13.5469 11.3589C13.0473 10.8739 12.2733 10.8175 11.71 11.19M11.7208 9.51684C11.1556 8.96805 10.2392 8.96805 9.67397 9.51684C9.10876 10.0656 9.10876 10.9554 9.67397 11.5042L10.9532 12.7463C11.462 13.2403 12.2554 13.2896 12.8211 12.8942" stroke="white" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.0 KiB

4
src/app/canvas/page.jsx
View File

@ -65,6 +65,7 @@ import SizeChange from '@/components/canvas/modal/sizechange/SizeChang'
import Footer from '@/components/layout/Footer'
import ImageSize from '@/components/canvas/modal/imagesize/ImageSize'
import MeasuredValueOption from '@/components/canvas/modal/measuredvalueoption/MeasuredValueOption'
import ImgLoad from '@/components/canvas/modal/imgload/ImgLoad'
export default function CanvasPage() {
const modalOption = useRecoilValue(modalState);
@ -203,6 +204,9 @@ export default function CanvasPage() {
{/* 실측치 설정 */}
{/* <MeasuredValueOption/> */}
{/* 이미지 불러오기 */}
<ImgLoad/>
</div>
</div>
{menuValue === 5 && <Footer/>}

1
src/components/canvas/CanvasMenu.jsx
View File

@ -67,6 +67,7 @@ export default function CanvasMenu({setMenuValue}) {
<Qselect title={'瓦53A'} option={SelectOption}/>
</div>
<div className="btn-from">
<button className="btn10"></button>
<button className="btn04" onClick={() => setModalOption({...modalOption, option: true})}></button>
<button className="btn05"></button>
<button className="btn06"></button>

61
src/components/canvas/modal/imgload/ImgLoad.jsx Normal file
View File

@ -0,0 +1,61 @@
import WithDraggable from "@/components/common/draggable/withDraggable";
export default function ImgLoad(){
return(
<WithDraggable isShow={true}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">画像を読み込む </h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="img-flex-box">
<span className="normal-font mr10">サイズ調整と回転</span>
<label className="toggle-btn">
<input type="checkbox"/>
<span className="slider"></span>
</label>
</div>
<div className="img-load-from">
<div className="img-load-item">
<div className="d-check-radio pop">
<input type="radio" name="radio03" id="ra06" />
<label htmlFor="ra06">ファイルを読み込む</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>
ファイルの追加
</label>
<input type="file" id="img_file" style={{display: 'none'}}/>
</div>
<div className="img-name-wrap">
<input type="text" className="input-origin al-l" defaultValue={'IMG_Name.PNG'} readOnly/>
<button className="img-check"></button>
</div>
</div>
</div>
<div className="img-load-item">
<div className="d-check-radio pop">
<input type="radio" name="radio03" id="ra06" />
<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>
</div>
<span className="check-address fail"></span>
<span className="check-address success"></span>
</div>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">完了</button>
</div>
</div>
</div>
</WithDraggable>
)
}

39
src/components/canvas/modal/placementsetting/PlacementSettingPop.jsx
View File

@ -158,46 +158,7 @@ export default function PlacementSettingPop(){
</div> */}
</td>
</tr>
<tr>
<th>ファイルを読み込む</th>
<td>
<div className="pop-form-radio mb10">
<div className="d-check-radio pop">
<input type="radio" name="radio03" id="ra06" />
<label htmlFor="ra06">ファイルを読み込む</label>
</div>
<div className="d-check-radio pop">
<input type="radio" name="radio03" id="ra07" />
<label htmlFor="ra07">アドレスを読み込む</label>
</div>
</div>
{/* 파일 불러오기 */}
<div className="flex-box">
<div className="img-edit-wrap">
<label className="img-edit-btn" htmlFor="img_file">
<span className="img-edit"></span>
ファイルの追加
</label>
<input type="file" id="img_file" style={{display: 'none'}}/>
</div>
<div className="img-name-wrap">
<input type="text" className="input-origin al-l" defaultValue={'IMG_Name.PNG'} readOnly/>
<button className="img-check"></button>
</div>
</div>
{/* 주소 불러오기 */}
<div className="flex-box for-address">
<input type="text" className="input-origin al-l mr10" placeholder={'住所入力'}/>
<div className="img-edit-wrap mr5">
<button className="img-edit-btn">完了</button>
</div>
<span className="check-address fail"></span>
<span className="check-address success"></span>
</div>
</td>
</tr>
</tbody>
</table>
</div>

8
src/components/publishpage/PublishPage.jsx
View File

@ -172,10 +172,16 @@ export default function PublishPage() {
<li>2024-11-05</li>
<li>*면 흐름 설정 pop 수정</li>
</ul>
<ul>
<ul className='mb10'>
<li>2024-11-07</li>
<li>*실측치 설정 pop 추가</li>
</ul>
<ul>
<li>2024-11-12</li>
<li>*캔버스 메뉴 이미지 불러오기 버튼 추가</li>
<li>*이미지 불러오기 팝업 추가</li>
<li>*배치면 초기설정 이미지 불러오기 삭제</li>
</ul>
</td>
<td className="t-center">2024-10-28</td>
</tr>

1
src/styles/_contents.scss
View File

@ -114,6 +114,7 @@
&.btn07{background-image: url(../../public/static/images/canvas/side_icon07.svg);}
&.btn08{background-image: url(../../public/static/images/canvas/side_icon08.svg);}
&.btn09{background-image: url(../../public/static/images/canvas/side_icon09.svg);}
&.btn10{background-image: url(../../public/static/images/canvas/side_icon10.svg); background-size: 15px 14px;}
&:hover{
background-color: #1083E3;
}

18
src/styles/_modal.scss
View File

@ -411,7 +411,6 @@ $alert-color: #101010;
.flex-box{
display: flex;
align-items: center;
height: 100%;
}
}
&:first-child{
@ -1910,4 +1909,21 @@ $alert-color: #101010;
color: #fff;
font-weight: 500;
}
}
// 이미지 불러오기
.img-flex-box{
display: flex;
align-items: center;
}
.img-load-from{
margin-top: 20px;
.img-load-item{
border-top: 1px solid #424242;
padding: 18px 0;
.d-check-radio{
margin-bottom: 20px;
}
}
border-bottom: 1px solid #424242;
}

57
src/styles/_reset.scss
View File

@ -910,4 +910,61 @@ input[type=text]{
color: #999999;
}
}
}
// toggle
.toggle-btn {
position: relative;
display: inline-block;
width: 55px;
height: 20px;
input {
display: none;
}
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #454545;
transition: .4s;
border-radius: 10px;
text-align: center;
line-height: 20px;
color: white;
font-size: 12px;
font-weight: 400;
&:after {
content: 'OFF';
position: absolute;
right: 7px;
color: white;
font-size: 12px;
font-weight: 400;
}
&:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
}
input:checked + .slider {
background-color: #2563EB;
&:after {
content: 'ON';
left: 10px;
right: auto;
}
&:before {
transform: translateX(35px);
}
}