- options 변경중
This commit is contained in:
minsik
parent
00b29e0ea1
commit
2d33bbc6a4
@ -25,6 +25,7 @@
|
||||
"react-colorful": "^5.6.1",
|
||||
"react-datepicker": "^7.3.0",
|
||||
"react-dom": "^18",
|
||||
"react-draggable": "^4.4.6",
|
||||
"react-icons": "^5.3.0",
|
||||
"react-responsive-modal": "^6.4.2",
|
||||
"react-toastify": "^10.0.5",
|
||||
|
||||
12
public/assets/img/doc.svg
Normal file
12
public/assets/img/doc.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 512 512" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>doc-document</title>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="icon" fill="#000000" transform="translate(71.778133, 42.666667)">
|
||||
<path d="M28.864,383.082667 L34.368,383.082667 C47.5093333,383.082667 57.2373333,380.928 63.5733333,376.661333 C69.12,372.970667 73.1306667,367.296 75.584,359.573333 C77.3973333,353.856 78.3146667,347.776 78.3146667,341.312 C78.3146667,334.378667 77.2693333,327.957333 75.1573333,322.048 C73.024,316.138667 70.144,311.530667 66.4746667,308.202667 C62.976,305.088 58.9866667,302.954667 54.528,301.845333 C50.0693333,300.736 43.3493333,300.16 34.368,300.16 L28.864,300.16 L28.864,383.082667 Z M-1.42108547e-14,405.696 L-1.42108547e-14,277.568 L35.456,277.568 C50.5386667,277.568 62.5706667,279.018667 71.616,281.92 C83.4346667,285.717333 92.4586667,292.757333 98.7306667,303.018667 C105.002667,313.301333 108.16,326.186667 108.16,341.674667 C108.16,357.589333 105.002667,370.581333 98.7306667,380.650667 C90.9013333,393.344 78.8053333,401.088 62.4,403.797333 C54.8693333,405.056 45.2266667,405.696 33.472,405.696 L-1.42108547e-14,405.696 Z M186.389333,297.915733 C175.957333,297.915733 167.914667,302.2464 162.24,310.929067 C157.12,318.779733 154.56,328.827733 154.56,341.115733 C154.56,355.345067 157.589333,366.395733 163.690667,374.225067 C169.408,381.649067 177.024,385.339733 186.474667,385.339733 C196.842667,385.339733 204.928,380.987733 210.709333,372.219733 C215.829333,364.5184 218.389333,354.3424 218.389333,341.6704 C218.389333,327.739733 215.338667,316.881067 209.258667,309.0304 C203.541333,301.627733 195.904,297.915733 186.389333,297.915733 M186.474667,275.3024 C206.613333,275.3024 222.037333,281.681067 232.768,294.481067 C243.072,306.705067 248.213333,322.427733 248.213333,341.6704 C248.213333,362.705067 242.133333,379.4304 229.973333,391.8464 C219.477333,402.577067 204.970667,407.931733 186.474667,407.931733 C166.357333,407.931733 150.912,401.553067 140.181333,388.7744 C129.877333,376.5504 124.714667,360.571733 124.714667,340.859733 C124.714667,320.251733 130.816,303.7184 142.997333,291.3024 C153.536,280.635733 168.042667,275.3024 186.474667,275.3024 M362.7456,375.477333 L371.172267,398.538667 C363.556267,402.229333 356.942933,404.704 351.268267,406.005333 C345.5936,407.285333 338.596267,407.925333 330.2976,407.925333 C317.7536,407.925333 307.3856,406.133333 299.1936,402.528 C287.716267,397.450667 279.076267,389.472 273.252267,378.570667 C268.004267,368.8 265.380267,356.853333 265.380267,342.752 C265.380267,318.965333 272.6336,300.917333 287.1616,288.693333 C297.700267,279.776 311.6096,275.317333 328.846933,275.317333 C336.206933,275.317333 342.884267,275.978667 348.9216,277.322667 C354.9376,278.688 361.7856,281.077333 369.422933,284.512 L359.758933,306.229333 C349.582933,300.682667 339.812267,297.909333 330.468267,297.909333 C319.204267,297.909333 310.5856,301.770667 304.612267,309.472 C298.340267,317.557333 295.204267,328.224 295.204267,341.493333 C295.204267,355.232 298.4896,365.984 305.060267,373.728 C311.630933,381.472 320.6976,385.333333 332.2816,385.333333 C337.508267,385.333333 342.350933,384.650667 346.7456,383.221333 C351.140267,381.813333 356.4736,379.232 362.7456,375.477333 M248.221867,7.10542736e-15 L13.5552,7.10542736e-15 L13.5552,234.666667 L56.2218667,234.666667 L56.2218667,192 L56.2218667,169.6 L56.2218667,42.6666667 L230.5152,42.6666667 L312.221867,124.373333 L312.221867,169.6 L312.221867,192 L312.221867,234.666667 L354.888533,234.666667 L354.888533,106.666667 L248.221867,7.10542736e-15 L248.221867,7.10542736e-15 Z" id="DOC">
|
||||
|
||||
</path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.8 KiB |
4
public/assets/img/excel.svg
Normal file
4
public/assets/img/excel.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.29289 1.29289C9.48043 1.10536 9.73478 1 10 1H18C19.6569 1 21 2.34315 21 4V9C21 9.55228 20.5523 10 20 10C19.4477 10 19 9.55228 19 9V4C19 3.44772 18.5523 3 18 3H11V8C11 8.55228 10.5523 9 10 9H5V20C5 20.5523 5.44772 21 6 21H7C7.55228 21 8 21.4477 8 22C8 22.5523 7.55228 23 7 23H6C4.34315 23 3 21.6569 3 20V8C3 7.73478 3.10536 7.48043 3.29289 7.29289L9.29289 1.29289ZM6.41421 7H9V4.41421L6.41421 7ZM19 12C19.5523 12 20 12.4477 20 13V19H23C23.5523 19 24 19.4477 24 20C24 20.5523 23.5523 21 23 21H19C18.4477 21 18 20.5523 18 20V13C18 12.4477 18.4477 12 19 12ZM11.8137 12.4188C11.4927 11.9693 10.8682 11.8653 10.4188 12.1863C9.96935 12.5073 9.86526 13.1318 10.1863 13.5812L12.2711 16.5L10.1863 19.4188C9.86526 19.8682 9.96935 20.4927 10.4188 20.8137C10.8682 21.1347 11.4927 21.0307 11.8137 20.5812L13.5 18.2205L15.1863 20.5812C15.5073 21.0307 16.1318 21.1347 16.5812 20.8137C17.0307 20.4927 17.1347 19.8682 16.8137 19.4188L14.7289 16.5L16.8137 13.5812C17.1347 13.1318 17.0307 12.5073 16.5812 12.1863C16.1318 11.8653 15.5073 11.9693 15.1863 12.4188L13.5 14.7795L11.8137 12.4188Z" fill="#000000"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
4
public/assets/img/file.svg
Normal file
4
public/assets/img/file.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M19 9V17.8C19 18.9201 19 19.4802 18.782 19.908C18.5903 20.2843 18.2843 20.5903 17.908 20.782C17.4802 21 16.9201 21 15.8 21H8.2C7.07989 21 6.51984 21 6.09202 20.782C5.71569 20.5903 5.40973 20.2843 5.21799 19.908C5 19.4802 5 18.9201 5 17.8V6.2C5 5.07989 5 4.51984 5.21799 4.09202C5.40973 3.71569 5.71569 3.40973 6.09202 3.21799C6.51984 3 7.0799 3 8.2 3H13M19 9L13 3M19 9H14C13.4477 9 13 8.55228 13 8V3" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 720 B |
4
public/assets/img/image.svg
Normal file
4
public/assets/img/image.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.02693 18.329C4.18385 19.277 5.0075 20 6 20H18C19.1046 20 20 19.1046 20 18V14.1901M4.02693 18.329C4.00922 18.222 4 18.1121 4 18V6C4 4.89543 4.89543 4 6 4H18C19.1046 4 20 4.89543 20 6V14.1901M4.02693 18.329L7.84762 14.5083C8.52765 13.9133 9.52219 13.8482 10.274 14.3494L10.7832 14.6888C11.5078 15.1719 12.4619 15.1305 13.142 14.5865L15.7901 12.4679C16.4651 11.9279 17.4053 11.8856 18.1228 12.3484C18.2023 12.3997 18.2731 12.4632 18.34 12.5302L20 14.1901M11 9C11 10.1046 10.1046 11 9 11C7.89543 11 7 10.1046 7 9C7 7.89543 7.89543 7 9 7C10.1046 7 11 7.89543 11 9Z" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 885 B |
26
public/assets/img/ppt.svg
Normal file
26
public/assets/img/ppt.svg
Normal file
@ -0,0 +1,26 @@
|
||||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
width="800px" height="800px" viewBox="0 0 585.918 585.918"
|
||||
xml:space="preserve">
|
||||
<g>
|
||||
<path d="M357.396,535.33c0.776,0.042,1.542,0.109,2.329,0.109h177.39c20.75,0,37.627-16.883,37.627-37.627V86.597
|
||||
c0-20.743-16.877-37.628-37.627-37.628h-177.39c-0.781,0-1.553,0.077-2.329,0.113V0L11.176,46.206v492.311l346.22,47.401V535.33z
|
||||
M359.726,70.476h177.39c8.893,0,16.125,7.236,16.125,16.126v411.22c0,8.888-7.232,16.127-16.125,16.127h-177.39
|
||||
c-0.792,0-1.563-0.127-2.329-0.243V319.212c9.92,37.738,44.168,65.606,85.018,65.606c48.611,0,88.013-39.401,88.013-88.007h-88.013
|
||||
v-88.017c-40.854,0-75.103,27.872-85.018,65.612V70.711C358.162,70.599,358.929,70.476,359.726,70.476z M116.427,297.106
|
||||
c-8.17,8.126-20.147,11.705-33.982,11.596c-3.055-0.026-5.795-0.21-7.918-0.551v39.438l-22.657-0.571V239.328
|
||||
c7.003-1.467,16.906-2.708,31.021-3.081c14.475-0.381,24.903,2.338,31.956,8.166c6.806,5.532,11.401,14.833,11.401,25.888
|
||||
C126.253,281.363,122.76,290.754,116.427,297.106z M212.05,297.273c-8.89,8.489-21.942,12.211-36.998,12.1
|
||||
c-3.318-0.021-6.302-0.214-8.601-0.572v41.136l-24.651-0.631V237.053c7.622-1.542,18.384-2.838,33.741-3.245
|
||||
c15.75-0.409,27.108,2.402,34.796,8.475c7.401,5.774,12.422,15.483,12.422,27.021C222.759,280.848,218.938,290.659,212.05,297.273z
|
||||
M324.891,254.173l-34.302,0.56v98.364l-27.779-0.709v-97.209l-32.043,0.527V233.22l94.124-2.441V254.173z"/>
|
||||
<path d="M84.122,255.121c-4.738,0.086-7.93,0.63-9.596,1.155v32.57c1.963,0.488,4.396,0.65,7.756,0.64
|
||||
c12.438-0.023,20.191-6.833,20.191-18.266C102.474,260.938,95.817,254.916,84.122,255.121z"/>
|
||||
<path d="M176.879,253.491c-5.145,0.087-8.622,0.662-10.422,1.205v33.966c2.139,0.512,4.779,0.672,8.428,0.672
|
||||
c13.546-0.022,21.984-7.126,21.984-19.066C196.869,259.539,189.604,253.266,176.879,253.491z"/>
|
||||
<path d="M454.362,282.922v0.026h88.018c0-24.753-10.269-47.092-26.725-63.08L454.362,282.922z"/>
|
||||
<path d="M453.428,267.457l62.228-62.231c-17.501-17.512-39.339-26.047-62.29-25.72l0.042,87.93L453.428,267.457z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
3
public/static/images/canvas/arr_btn_ico.svg
Normal file
3
public/static/images/canvas/arr_btn_ico.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 6.5L3.5 4L1 1.5" stroke="#898989" stroke-width="1.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 166 B |
3
public/static/images/canvas/arr_btn_ico_black.svg
Normal file
3
public/static/images/canvas/arr_btn_ico_black.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 6.5L3.5 4L1 1.5" stroke="#101010" stroke-width="1.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 166 B |
3
public/static/images/canvas/check-black.svg
Normal file
3
public/static/images/canvas/check-black.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="11" height="9" viewBox="0 0 11 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 3.18182L4.5 7L10 1" stroke="#101010" stroke-width="1.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 171 B |
3
public/static/images/canvas/check-grey.svg
Normal file
3
public/static/images/canvas/check-grey.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="11" height="9" viewBox="0 0 11 9" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M1 3.18182L4.5 7L10 1" stroke="#898989" stroke-width="1.5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 171 B |
8
public/static/images/canvas/menu_icon00.svg
Normal file
8
public/static/images/canvas/menu_icon00.svg
Normal file
@ -0,0 +1,8 @@
|
||||
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g id="elements">
|
||||
<path id="Rectangle 2056" d="M9.4 1.8H8.6C5.01733 1.8 3.22599 1.8 2.11299 2.913C1 4.02599 1 5.81733 1 9.4C1 12.9827 1 14.774 2.11299 15.887C3.22599 17 5.01733 17 8.6 17C12.1827 17 13.974 17 15.087 15.887C16.2 14.774 16.2 12.9827 16.2 9.4V8.6" stroke="#AAAAAA" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path id="Ellipse 40" d="M17 3.8C17 5.3464 15.7464 6.6 14.2 6.6C12.6536 6.6 11.4 5.3464 11.4 3.8C11.4 2.2536 12.6536 1 14.2 1C15.7464 1 17 2.2536 17 3.8Z" stroke="#AAAAAA" stroke-width="1.5"/>
|
||||
<path id="Vector 4052" d="M5 8.2H8.2" stroke="#AAAAAA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
<path id="Vector 4053" d="M5 12.2H11.4" stroke="#AAAAAA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 871 B |
10
public/static/images/canvas/modal_close.svg
Normal file
10
public/static/images/canvas/modal_close.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_55_91)">
|
||||
<path d="M8.99915 9L1 1M1.00085 9L9 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_55_91">
|
||||
<rect width="10" height="10" fill="white"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 361 B |
@ -34,8 +34,8 @@ export default function RootLayout({ children }) {
|
||||
<UIProvider>{children}</UIProvider>
|
||||
</div>
|
||||
</div>
|
||||
<QModal />
|
||||
<ToastContainer />
|
||||
<QModal />
|
||||
</RecoilRootWrapper>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
22
src/components/common/draggable/withDraggable.jsx
Normal file
22
src/components/common/draggable/withDraggable.jsx
Normal file
@ -0,0 +1,22 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import Draggable from 'react-draggable'
|
||||
|
||||
export default function WithDraggable({ isShow, children }) {
|
||||
const [position, setPosition] = useState({ x: 0, y: 0 })
|
||||
|
||||
const handleOnDrag = (data) => {
|
||||
setPosition({ x: data.x, y: data.y })
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{isShow && (
|
||||
<Draggable position={{ x: position.x, y: position.y }} onDrag={(_, data) => handleOnDrag(data)}>
|
||||
{children}
|
||||
</Draggable>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -1,10 +1,11 @@
|
||||
'use client'
|
||||
import { useState } from 'react'
|
||||
import QSelect from '@/components/common/select/QSelect'
|
||||
import Qselect from '../common/select/Qselect'
|
||||
import MenuDepth01 from './MenuDepth01'
|
||||
|
||||
export default function CanvasMenu() {
|
||||
export default function CanvasMenu({ setModalOpen }) {
|
||||
const [menuNumber, setMenuNumber] = useState(null)
|
||||
const [vertical, setVertical] = useState(true)
|
||||
const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
|
||||
const onClickNav = (number) => {
|
||||
setMenuNumber(number)
|
||||
@ -16,6 +17,11 @@ export default function CanvasMenu() {
|
||||
<div className={`canvas-menu-wrap ${menuNumber !== null ? 'active' : ''}`}>
|
||||
<div className="canvas-menu-inner">
|
||||
<ul className="canvas-menu-list">
|
||||
<li className={`canvas-menu-item ${menuNumber === 0 ? 'active' : ''}`} onClick={() => onClickNav(0)}>
|
||||
<button>
|
||||
<span className="menu-icon con00"></span>配置面 初期設定
|
||||
</button>
|
||||
</li>
|
||||
<li className={`canvas-menu-item ${menuNumber === 1 ? 'active' : ''}`} onClick={() => onClickNav(1)}>
|
||||
<button>
|
||||
<span className="menu-icon con01"></span>配置面 初期設定
|
||||
@ -38,24 +44,30 @@ export default function CanvasMenu() {
|
||||
</li>
|
||||
<li className={`canvas-menu-item ${menuNumber === 5 ? 'active' : ''}`} onClick={() => onClickNav(5)}>
|
||||
<button>
|
||||
<span className="menu-icon con05"></span>発展シミュレーション
|
||||
<span className="menu-icon con06"></span>見積
|
||||
</button>
|
||||
</li>
|
||||
<li className={`canvas-menu-item ${menuNumber === 6 ? 'active' : ''}`} onClick={() => onClickNav(6)}>
|
||||
<button>
|
||||
<span className="menu-icon con06"></span>見積
|
||||
<span className="menu-icon con05"></span>発展シミュレーション
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="canvas-side-btn-wrap">
|
||||
<div className="select-box">
|
||||
<QSelect title={'瓦53A'} option={SelectOption} />
|
||||
</div>
|
||||
<div className="btn-from">
|
||||
<button className="btn01 "></button>
|
||||
<button className="btn02 active"></button>
|
||||
<button className="btn03"></button>
|
||||
<button className="btn04"></button>
|
||||
</div>
|
||||
<div className="vertical-horizontal">
|
||||
<span>垂直水平モード</span>
|
||||
<button onClick={() => setVertical(!vertical)}>{vertical ? 'ON' : 'OFF'}</button>
|
||||
</div>
|
||||
<div className="select-box">
|
||||
<Qselect title={'瓦53A'} option={SelectOption} />
|
||||
</div>
|
||||
<div className="btn-from">
|
||||
<button className="btn04" onClick={() => setModalOpen('option')}></button>
|
||||
<button className="btn05"></button>
|
||||
<button className="btn06"></button>
|
||||
</div>
|
||||
@ -72,6 +84,7 @@ export default function CanvasMenu() {
|
||||
</div>
|
||||
</div>
|
||||
<div className={`canvas-depth2-wrap ${menuNumber !== null ? 'active' : ''}`}>
|
||||
{menuNumber === 0 && <MenuDepth01 />}
|
||||
{menuNumber === 1 && <MenuDepth01 />}
|
||||
{menuNumber === 2 && <MenuDepth01 />}
|
||||
{menuNumber === 3 && <MenuDepth01 />}
|
||||
|
||||
@ -1,13 +1,19 @@
|
||||
'use client'
|
||||
|
||||
import CanvasMenu from '@/components/floor-plan/CanvasMenu'
|
||||
import CanvasLayout from '@/components/floor-plan/CanvasLayout'
|
||||
import SettingModal01 from '@/components/floor-plan/modal/settoing01/SettingModal01'
|
||||
import { useState } from 'react'
|
||||
|
||||
export default function FloorPlan() {
|
||||
const [modalOpen, setModalOpen] = useState('option')
|
||||
return (
|
||||
<>
|
||||
<div className="canvas-wrap">
|
||||
<CanvasMenu />
|
||||
<CanvasMenu modalOpen={modalOpen} setModalOpen={setModalOpen} />
|
||||
<div className="canvas-content">
|
||||
<CanvasLayout />
|
||||
{modalOpen === 'option' && <SettingModal01 modalOpen={modalOpen} setModalOpen={setModalOpen} />}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
|
||||
45
src/components/floor-plan/modal/settoing01/FirstOption.jsx
Normal file
45
src/components/floor-plan/modal/settoing01/FirstOption.jsx
Normal file
@ -0,0 +1,45 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
|
||||
export default function FirstOption(props) {
|
||||
const { options1, options2 } = props
|
||||
const { option1Selected, setOption1Selected } = useState()
|
||||
const { option2Selected, setOption2Selected } = useState()
|
||||
|
||||
const onClickOption = (option) => {
|
||||
option.selected = !option.selected
|
||||
console.log('options1', options1)
|
||||
console.log('option2', options2)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
setOption1Selected(options1)
|
||||
// setOption1Selected(props.options1)
|
||||
}, [options1])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="modal-check-btn-wrap">
|
||||
<h3 className="check-wrap-title light">※図面に表示する項目をクリックすると適用されます。</h3>
|
||||
<div className="flex-check-box for2">
|
||||
{options1.map((item) => (
|
||||
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
|
||||
<span className="check-area"></span>
|
||||
<span className="title-area">{item.name}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-check-btn-wrap">
|
||||
<h3 className="check-wrap-title">画面表示</h3>
|
||||
<div className="flex-check-box for-line">
|
||||
{options2.map((item) => (
|
||||
<button key={item.id} className={`check-btn ${item.selected ? 'act' : ''}`} onClick={(e) => onClickOption(item)}>
|
||||
<span className="check-area"></span>
|
||||
<span className="title-area">{item.name}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
36
src/components/floor-plan/modal/settoing01/SecondOption.jsx
Normal file
36
src/components/floor-plan/modal/settoing01/SecondOption.jsx
Normal file
@ -0,0 +1,36 @@
|
||||
export default function SecondOption(props) {
|
||||
const { options, onClick } = props
|
||||
return (
|
||||
<>
|
||||
<div className="modal-check-btn-wrap">
|
||||
<h3 className="check-wrap-title">フォントとサイズの変更</h3>
|
||||
<div className="flex-check-box for2">
|
||||
{options.option1.map((item) => (
|
||||
<button className="arr-btn">
|
||||
<span>{item.name}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="modal-check-btn-wrap">
|
||||
<h3 className="check-wrap-title">吸着範囲の設定</h3>
|
||||
<div className="flex-check-box for-line">
|
||||
{options.option2.map((item) => (
|
||||
<button key={item.id} className="check-btn" onClick={(e) => onClick(e)}>
|
||||
<span className="check-area"></span>
|
||||
<span className="title-area">{item.name}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex-check-box for-line">
|
||||
<button className="arr-btn">
|
||||
<span>寸法線の設定</span>
|
||||
</button>
|
||||
<button className="arr-btn">
|
||||
<span>図面サイズの設定</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,88 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import FirstOption from './FirstOption'
|
||||
import WithDraggable from '@/components/common/draggable/withDraggable'
|
||||
|
||||
const HandleBtnClick = (e) => {
|
||||
const button = e.target
|
||||
if (!button.classList.contains('act')) {
|
||||
button.classList.add('act')
|
||||
} else {
|
||||
button.classList.remove('act')
|
||||
}
|
||||
}
|
||||
|
||||
export default function SettingModal01({ modalOpen, setModalOpen }) {
|
||||
const [buttonAct, setButtonAct] = useState(1)
|
||||
const [close, setClose] = useState(false)
|
||||
const HandleClickClose = () => {
|
||||
setClose(true)
|
||||
setTimeout(() => {
|
||||
setModalOpen('')
|
||||
setClose(false)
|
||||
}, 180)
|
||||
}
|
||||
|
||||
const firstOptions = {
|
||||
option1: [
|
||||
{ id: 1, name: '割り当て表示', selected: false },
|
||||
{ id: 2, name: '実寸表示', selected: false },
|
||||
{ id: 3, name: '図面表示', selected: false },
|
||||
{ id: 4, name: '寸法表示なし', selected: false },
|
||||
{ id: 5, name: 'グリッド表示', selected: false },
|
||||
{ id: 6, name: '架台表示', selected: false },
|
||||
{ id: 7, name: '文字表示', selected: false },
|
||||
{ id: 8, name: '座標表示', selected: false },
|
||||
{ id: 9, name: '流れ方向表示', selected: false },
|
||||
{ id: 10, name: '図面切替表示', selected: false },
|
||||
{ id: 11, name: 'ü廊下寸法表示', selected: false },
|
||||
],
|
||||
option2: [
|
||||
{ id: 1, name: 'ボーダーのみ', selected: false },
|
||||
{ id: 2, name: 'ラインハッチ', selected: false },
|
||||
{ id: 3, name: 'All painted', selected: false },
|
||||
],
|
||||
}
|
||||
|
||||
const secondOptions = {
|
||||
option1: [
|
||||
{ id: 1, name: '文字フォントの変更' },
|
||||
{ id: 2, name: 'フロー方向フォントの変更' },
|
||||
{ id: 3, name: '寸法フォントの変更' },
|
||||
{ id: 4, name: '回路番号フォントの変更' },
|
||||
],
|
||||
option2: [
|
||||
{ id: 1, name: '極小', selected: false },
|
||||
{ id: 2, name: '牛', selected: false },
|
||||
{ id: 3, name: '中', selected: false },
|
||||
{ id: 4, name: 'ティーン', selected: false },
|
||||
],
|
||||
}
|
||||
|
||||
return (
|
||||
<WithDraggable isShow={true}>
|
||||
<div className={`modal-pop-wrap sm ${modalOpen === 'option' && close === false ? 'mount' : ''}${close ? 'unmount' : ''} `}>
|
||||
<div className="modal-head">
|
||||
<h1 className="title">Canvas設定</h1>
|
||||
<button className="modal-close" onClick={HandleClickClose}>
|
||||
닫기
|
||||
</button>
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="modal-btn-wrap">
|
||||
<button className={`btn-frame modal ${buttonAct === 1 ? 'act' : ''}`} onClick={() => setButtonAct(1)}>
|
||||
ディスプレイ設定
|
||||
</button>
|
||||
|
||||
<button className={`btn-frame modal ${buttonAct === 2 ? 'act' : ''}`} onClick={() => setButtonAct(2)}>
|
||||
フォントと図面サイズの設定
|
||||
</button>
|
||||
</div>
|
||||
{buttonAct === 1 && <FirstOption options1={firstOptions.option1} options2={firstOptions.option2} onClick={HandleBtnClick} />}
|
||||
{/*{buttonAct === 2 && <SecondOption options={secondOptions} onClick={HandleBtnClick} />}*/}
|
||||
</div>
|
||||
</div>
|
||||
</WithDraggable>
|
||||
)
|
||||
}
|
||||
22
src/lib/file.js
Normal file
22
src/lib/file.js
Normal file
@ -0,0 +1,22 @@
|
||||
'use server'
|
||||
import path from 'path'
|
||||
import multer from 'multer'
|
||||
|
||||
export const upload = (files) => {
|
||||
console.log(files)
|
||||
const storage = multer.diskStorage({
|
||||
destination: (req, file, callback) => {
|
||||
const extension = path.extname(file.originalname)
|
||||
const basename = path.basename(file.originalname, extension)
|
||||
callback(null, `/public/upload/${basename}-${Date.now()}${extension}`)
|
||||
},
|
||||
filename: (req, file, callback) => {
|
||||
callback(null, `${file.fieldname}-${Date.now()}${path.extname(file.originalname)}`)
|
||||
}
|
||||
})
|
||||
const test = multer({
|
||||
storage: storage
|
||||
}).array(files.name, 5)
|
||||
|
||||
console.log(test)
|
||||
}
|
||||
@ -1,329 +1,428 @@
|
||||
// CanvasPage
|
||||
.canvas-wrap{
|
||||
height: calc(100vh - 47px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.canvas-content{
|
||||
flex: 1 1 auto;
|
||||
.canvas-layout{
|
||||
height: 100%;
|
||||
}
|
||||
.canvas-wrap {
|
||||
height: calc(100vh - 47px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.canvas-content {
|
||||
flex: 1 1 auto;
|
||||
|
||||
.canvas-layout {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// CanvasMenu
|
||||
.canvas-menu-wrap{
|
||||
.canvas-menu-wrap {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-bottom: 0;
|
||||
background-color: #383838;
|
||||
transition: padding .17s ease-in-out;
|
||||
|
||||
.canvas-menu-inner {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding-bottom: 0;
|
||||
background-color: #383838;
|
||||
transition: padding .17s ease-in-out;
|
||||
.canvas-menu-inner{
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 40px 0 20px;
|
||||
background-color: #2C2C2C;
|
||||
z-index: 999;
|
||||
|
||||
.canvas-menu-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
.canvas-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 40px 0 20px;
|
||||
background-color: #2C2C2C;
|
||||
z-index: 999;
|
||||
.canvas-menu-list{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
padding: 15px 20px;
|
||||
opacity: 0.55;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
.menu-icon {
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
margin-right: 10px;
|
||||
|
||||
&.con00 {
|
||||
background-image: url(/static/images/canvas/menu_icon00.svg);
|
||||
}
|
||||
|
||||
&.con01 {
|
||||
background-image: url(/static/images/canvas/menu_icon01.svg);
|
||||
}
|
||||
|
||||
&.con02 {
|
||||
background-image: url(/static/images/canvas/menu_icon02.svg);
|
||||
}
|
||||
|
||||
&.con03 {
|
||||
background-image: url(/static/images/canvas/menu_icon03.svg);
|
||||
}
|
||||
|
||||
&.con04 {
|
||||
background-image: url(/static/images/canvas/menu_icon04.svg);
|
||||
}
|
||||
|
||||
&.con05 {
|
||||
background-image: url(/static/images/canvas/menu_icon05.svg);
|
||||
}
|
||||
|
||||
&.con06 {
|
||||
background-image: url(/static/images/canvas/menu_icon06.svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #383838;
|
||||
|
||||
button {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.canvas-side-btn-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
|
||||
.select-box {
|
||||
width: 124px;
|
||||
margin-right: 5px;
|
||||
|
||||
> div {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-from {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
|
||||
button {
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 2px;
|
||||
background-color: #3D3D3D;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 15px 15px;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
&.btn01 {
|
||||
background-image: url(../../public/static/images/canvas/side_icon01.svg);
|
||||
}
|
||||
|
||||
&.btn02 {
|
||||
background-image: url(../../public/static/images/canvas/side_icon02.svg);
|
||||
}
|
||||
|
||||
&.btn03 {
|
||||
background-image: url(../../public/static/images/canvas/side_icon03.svg);
|
||||
}
|
||||
|
||||
&.btn04 {
|
||||
background-image: url(../../public/static/images/canvas/side_icon04.svg);
|
||||
}
|
||||
|
||||
&.btn05 {
|
||||
background-image: url(../../public/static/images/canvas/side_icon05.svg);
|
||||
}
|
||||
|
||||
&.btn06 {
|
||||
background-image: url(../../public/static/images/canvas/side_icon06.svg);
|
||||
}
|
||||
|
||||
&.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);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #1083E3;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: #1083E3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.size-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
background-color: #3D3D3D;
|
||||
border-radius: 2px;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
margin: 0 5px;
|
||||
|
||||
span {
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.control-btn {
|
||||
display: block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
&.minus {
|
||||
background-image: url(../../public/static/images/canvas/minus.svg);
|
||||
}
|
||||
|
||||
&.plus {
|
||||
background-image: url(../../public/static/images/canvas/plus.svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.canvas-depth2-wrap {
|
||||
position: absolute;
|
||||
top: -100%;
|
||||
left: 0;
|
||||
background-color: #383838;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
.canvas-depth2-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 40px;
|
||||
height: 100%;
|
||||
|
||||
.canvas-depth2-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
|
||||
.canvas-depth2-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 26px;
|
||||
height: 100%;
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
opacity: 0.55;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
height: 100%;
|
||||
.canvas-menu-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
button{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
padding: 15px 20px;
|
||||
opacity: 0.55;
|
||||
transition: all .17s ease-in-out;
|
||||
.menu-icon{
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
margin-right: 10px;
|
||||
&.con01{background-image: url(/static/images/canvas/menu_icon01.svg);}
|
||||
&.con02{background-image: url(/static/images/canvas/menu_icon02.svg);}
|
||||
&.con03{background-image: url(/static/images/canvas/menu_icon03.svg);}
|
||||
&.con04{background-image: url(/static/images/canvas/menu_icon04.svg);}
|
||||
&.con05{background-image: url(/static/images/canvas/menu_icon05.svg);}
|
||||
&.con06{background-image: url(/static/images/canvas/menu_icon06.svg);}
|
||||
}
|
||||
}
|
||||
&.active{
|
||||
background-color: #383838;
|
||||
button{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
padding-right: 12px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
button {
|
||||
opacity: 1;
|
||||
font-weight: 600;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 5px;
|
||||
height: 8px;
|
||||
background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.canvas-side-btn-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
.select-box{
|
||||
width: 124px;
|
||||
margin-right: 5px;
|
||||
> div{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.btn-from{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
button{
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
border-radius: 2px;
|
||||
background-color: #3D3D3D;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 15px 15px;
|
||||
transition: all .17s ease-in-out;
|
||||
&.btn01{background-image: url(../../public/static/images/canvas/side_icon01.svg);}
|
||||
&.btn02{background-image: url(../../public/static/images/canvas/side_icon02.svg);}
|
||||
&.btn03{background-image: url(../../public/static/images/canvas/side_icon03.svg);}
|
||||
&.btn04{background-image: url(../../public/static/images/canvas/side_icon04.svg);}
|
||||
&.btn05{background-image: url(../../public/static/images/canvas/side_icon05.svg);}
|
||||
&.btn06{background-image: url(../../public/static/images/canvas/side_icon06.svg);}
|
||||
&.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);}
|
||||
&:hover{
|
||||
background-color: #1083E3;
|
||||
}
|
||||
&.active{
|
||||
background-color: #1083E3;
|
||||
}
|
||||
}
|
||||
}
|
||||
.size-control{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
background-color: #3D3D3D;
|
||||
border-radius: 2px;
|
||||
width: 100px;
|
||||
height: 30px;
|
||||
margin: 0 5px;
|
||||
span{
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
}
|
||||
.control-btn{
|
||||
display: block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
&.minus{
|
||||
background-image: url(../../public/static/images/canvas/minus.svg);
|
||||
}
|
||||
&.plus{
|
||||
background-image: url(../../public/static/images/canvas/plus.svg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.canvas-depth2-wrap{
|
||||
position: absolute;
|
||||
top: -100%;
|
||||
left: 0;
|
||||
background-color: #383838;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
transition: all .17s ease-in-out;
|
||||
.canvas-depth2-inner{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.canvas-depth2-btn-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
height: 100%;
|
||||
|
||||
.depth2-btn-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 34px;
|
||||
height: 100%;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
button {
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
height: 100%;
|
||||
.canvas-depth2-list{
|
||||
display: flex;
|
||||
align-items: center ;
|
||||
height: 100%;
|
||||
.canvas-depth2-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 26px;
|
||||
height: 100%;
|
||||
button{
|
||||
position: relative;
|
||||
opacity: 0.55;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
height: 100%;
|
||||
padding-right: 12px;
|
||||
}
|
||||
&.active{
|
||||
button{
|
||||
opacity: 1;
|
||||
font-weight: 600;
|
||||
&:after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 5px;
|
||||
height: 8px;
|
||||
background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.canvas-depth2-btn-list{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
height: 100%;
|
||||
.depth2-btn-box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 34px;
|
||||
height: 100%;
|
||||
transition: all .17s ease-in-out;
|
||||
button{
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
padding-right: 12px;
|
||||
&:after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 5px;
|
||||
height: 8px;
|
||||
background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
|
||||
}
|
||||
}
|
||||
&:last-child{
|
||||
margin-right: 0;
|
||||
}
|
||||
&.mouse{
|
||||
opacity: 0.55;
|
||||
}
|
||||
}
|
||||
color: #fff;
|
||||
padding-right: 12px;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 5px;
|
||||
height: 8px;
|
||||
background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&.mouse {
|
||||
opacity: 0.55;
|
||||
}
|
||||
}
|
||||
&.active{
|
||||
top: 47px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.active{
|
||||
padding-bottom: 50px;
|
||||
|
||||
&.active {
|
||||
top: 47px;
|
||||
}
|
||||
}
|
||||
|
||||
&.active {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
// canvas-layout
|
||||
.canvas-layout{
|
||||
.canvas-page-list{
|
||||
.canvas-layout {
|
||||
.canvas-page-list {
|
||||
display: flex;
|
||||
background-color: #1C1C1C;
|
||||
border-top: 1px solid #000;
|
||||
width: 100%;
|
||||
|
||||
.canvas-plane-wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: calc(100% - 45px);
|
||||
|
||||
.canvas-page-box {
|
||||
display: flex;
|
||||
background-color: #1C1C1C;
|
||||
border-top: 1px solid #000;
|
||||
width: 100%;
|
||||
.canvas-plane-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
max-width: calc(100% - 45px);
|
||||
.canvas-page-box{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: #1c1c1c;
|
||||
padding: 9.6px 20px;
|
||||
border-right:1px solid #000;
|
||||
min-width: 0;
|
||||
transition: all .17s ease-in-out;
|
||||
span{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
color: #AAA;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.close{
|
||||
flex: none;
|
||||
display: block;
|
||||
width: 7px;
|
||||
height: 8px;
|
||||
margin-left: 15px;
|
||||
background: url(../../public/static/images/canvas/plan_close_gray.svg)no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
&.on{
|
||||
background-color: #fff;
|
||||
span{
|
||||
font-weight: 600;
|
||||
color: #101010;
|
||||
}
|
||||
.close{
|
||||
background: url(../../public/static/images/canvas/plan_close_black.svg)no-repeat center;
|
||||
}
|
||||
&:hover{
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
&:hover{
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
align-items: center;
|
||||
background-color: #1c1c1c;
|
||||
padding: 9.6px 20px;
|
||||
border-right: 1px solid #000;
|
||||
min-width: 0;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
color: #AAA;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
.plane-add{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 45px;
|
||||
padding: 13.5px 0;
|
||||
background-color: #1C1C1C;
|
||||
border-right: 1px solid #000;
|
||||
transition: all .17s ease-in-out;
|
||||
span{
|
||||
display: block;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
background: url(../../public/static/images/canvas/plane_add.svg)no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
&:hover{
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.close {
|
||||
flex: none;
|
||||
display: block;
|
||||
width: 7px;
|
||||
height: 8px;
|
||||
margin-left: 15px;
|
||||
background: url(../../public/static/images/canvas/plan_close_gray.svg) no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&.on {
|
||||
background-color: #fff;
|
||||
|
||||
span {
|
||||
font-weight: 600;
|
||||
color: #101010;
|
||||
}
|
||||
|
||||
.close {
|
||||
background: url(../../public/static/images/canvas/plan_close_black.svg) no-repeat center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plane-add {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 45px;
|
||||
padding: 13.5px 0;
|
||||
background-color: #1C1C1C;
|
||||
border-right: 1px solid #000;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
background: url(../../public/static/images/canvas/plane_add.svg) no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.canvas-frame{
|
||||
position: relative;
|
||||
height: calc(100% - 35.5px);
|
||||
canvas{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.canvas-frame {
|
||||
position: relative;
|
||||
height: calc(100% - 35.5px);
|
||||
|
||||
canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
35
src/styles/_inputcommon.scss
Normal file
35
src/styles/_inputcommon.scss
Normal file
@ -0,0 +1,35 @@
|
||||
.input-content{
|
||||
max-width: 1600px;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 100px;
|
||||
.input-wrap{
|
||||
padding: 50px 50px 0;
|
||||
h1{
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.form-btn{
|
||||
button{
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
.form-select{
|
||||
width: 168px;
|
||||
> div{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.form-datepicker{
|
||||
div{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.form-Arrow-btn,
|
||||
.form-Check-btn{
|
||||
padding: 10px;
|
||||
background-color: #272727;
|
||||
> button{
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
91
src/styles/_modal.scss
Normal file
91
src/styles/_modal.scss
Normal file
@ -0,0 +1,91 @@
|
||||
@keyframes mountpop{
|
||||
from{opacity: 0; scale: 0.95;}
|
||||
to{opacity: 1; scale: 1;}
|
||||
}
|
||||
@keyframes unmountpop{
|
||||
from{opacity: 1; scale: 1;}
|
||||
to{opacity: 0; scale: 0.95;}
|
||||
}
|
||||
|
||||
.modal-pop-wrap{
|
||||
position: fixed;
|
||||
top: 200px;
|
||||
right: 100px;
|
||||
width: 100%;
|
||||
min-width: 380px;
|
||||
max-width: fit-content;
|
||||
height: -webkit-fit-content;
|
||||
height: -moz-fit-content;
|
||||
height: fit-content;
|
||||
border: 1px solid #000;
|
||||
border-radius: 4px;
|
||||
background-color: #272727;
|
||||
z-index: 9999999;
|
||||
&.sm{
|
||||
max-width: 450px;
|
||||
}
|
||||
&.mount{
|
||||
animation: mountpop .17s ease-in-out forwards;
|
||||
}
|
||||
&.unmount{
|
||||
animation: unmountpop .17s ease-in-out forwards;
|
||||
}
|
||||
}
|
||||
.modal-head{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 24px;
|
||||
background-color: #000;
|
||||
cursor: pointer;
|
||||
h1.title{
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
.modal-close{
|
||||
margin-left: auto;
|
||||
color: #fff;
|
||||
text-indent: -999999999px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center;
|
||||
}
|
||||
}
|
||||
.modal-body{
|
||||
padding: 15px;
|
||||
.modal-btn-wrap{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
button{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
.modal-check-btn-wrap{
|
||||
margin-top: 15px;
|
||||
.check-wrap-title{
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
&.light{
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.flex-check-box{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
&.for2{
|
||||
button{
|
||||
width: calc(50% - 5px);
|
||||
}
|
||||
}
|
||||
&.for-line{
|
||||
button{
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,18 +1,21 @@
|
||||
* {
|
||||
-webkit-text-size-adjust:none;
|
||||
-moz-text-size-adjust:none;
|
||||
-ms-text-size-adjust:none;
|
||||
text-size-adjust: none;
|
||||
box-sizing: content-box
|
||||
-webkit-text-size-adjust: none;
|
||||
-moz-text-size-adjust: none;
|
||||
-ms-text-size-adjust: none;
|
||||
text-size-adjust: none;
|
||||
box-sizing: content-box
|
||||
}
|
||||
|
||||
*, ::after, ::before {
|
||||
box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
html, body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
html, body, div, span, applet, object, iframe,
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
|
||||
a, abbr, acronym, address, big, cite, code,
|
||||
@ -22,259 +25,407 @@ b, u, i, center,
|
||||
dl, dt, dd, ol, ul, li,
|
||||
fieldset, form, label, legend,
|
||||
table, caption, tbody, tfoot, thead, tr, th, td,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
article, aside, canvas, details, embed,
|
||||
figure, figcaption, footer, header, hgroup,
|
||||
menu, nav, output, ruby, section, summary,
|
||||
time, mark, audio, video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font: inherit;
|
||||
vertical-align: baseline;
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
}
|
||||
|
||||
/* HTML5 display-role reset for older browsers */
|
||||
article, aside, details, figcaption, figure,
|
||||
article, aside, details, figcaption, figure,
|
||||
footer, header, hgroup, menu, nav, section {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1.4;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
body:first-of-type caption {
|
||||
display: none;
|
||||
}
|
||||
body:first-of-type caption { display:none;}
|
||||
|
||||
ol, ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing:0;
|
||||
border:0 none;
|
||||
}
|
||||
caption, th, td {
|
||||
text-align:left;
|
||||
font-weight: normal;
|
||||
border:0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor:pointer;
|
||||
color:#000;
|
||||
blockquote, q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote:before, blockquote:after,
|
||||
q:before, q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
caption, th, td {
|
||||
text-align: left;
|
||||
font-weight: normal;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
a, a:hover, a:active {
|
||||
text-decoration:none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
text-decoration: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
/*form_style*/
|
||||
input, select, textarea, button, a, label {
|
||||
-webkit-tap-highlight-color:rgba(0,0,0,0);
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
button,input[type=text], input[type=button] {
|
||||
-webkit-appearance: none;
|
||||
-webkit-border-radius: 0;
|
||||
-webkit-appearance:none;
|
||||
appearance: none;
|
||||
border-radius: 0
|
||||
|
||||
button, input[type=text], input[type=button] {
|
||||
-webkit-appearance: none;
|
||||
-webkit-border-radius: 0;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
border-radius: 0
|
||||
}
|
||||
|
||||
input[type=checkbox], input[type=radio] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input, select, button {
|
||||
border:0 none;
|
||||
outline:none;
|
||||
margin:0;
|
||||
border: 0 none;
|
||||
outline: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
select {
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
::-webkit-input-placeholder {
|
||||
line-height:1;
|
||||
font-weight:300;
|
||||
font-size:0.938rem;
|
||||
letter-spacing:-0.6px;
|
||||
color:#8b8b8b;
|
||||
line-height: 1;
|
||||
font-weight: 300;
|
||||
font-size: 0.938rem;
|
||||
letter-spacing: -0.6px;
|
||||
color: #8b8b8b;
|
||||
}
|
||||
.log-box ::-webkit-input-placeholder{
|
||||
color:#8b8b8b;
|
||||
|
||||
.log-box ::-webkit-input-placeholder {
|
||||
color: #8b8b8b;
|
||||
}
|
||||
button{
|
||||
background: transparent;
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
color: inherit;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
|
||||
button {
|
||||
background: transparent;
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
color: inherit;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
// button
|
||||
.btn-frame{
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
border: 1px solid #000;
|
||||
text-align: center;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
transition: color .12s ease-in-out;
|
||||
cursor: pointer;
|
||||
&.block{
|
||||
width: 100%;
|
||||
}
|
||||
&.small{
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 13px;
|
||||
}
|
||||
.btn-frame {
|
||||
display: inline-block;
|
||||
padding: 0 10px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
border: 1px solid #000;
|
||||
text-align: center;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
transition: all .17s ease-in-out;
|
||||
cursor: pointer;
|
||||
|
||||
&.deepgray{
|
||||
background-color: #2C2C2C;
|
||||
border: 1px solid #484848;
|
||||
}
|
||||
&.gray{
|
||||
background-color: #3C3C3C;
|
||||
border: 1px solid #545454;
|
||||
}
|
||||
&.dark{
|
||||
background-color: #1C1C1C;
|
||||
border: 1px solid #484848;
|
||||
&.block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.small {
|
||||
font-family: 'Noto Sans JP', sans-serif;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&.deepgray {
|
||||
background-color: #2C2C2C;
|
||||
border: 1px solid #484848;
|
||||
}
|
||||
|
||||
&.gray {
|
||||
background-color: #3C3C3C;
|
||||
border: 1px solid #545454;
|
||||
}
|
||||
|
||||
&.dark {
|
||||
background-color: #1C1C1C;
|
||||
border: 1px solid #484848;
|
||||
}
|
||||
|
||||
&.modal {
|
||||
background-color: #272727;
|
||||
border: 1px solid #484848;
|
||||
color: #aaa;
|
||||
|
||||
&:hover {
|
||||
background-color: #1083E3;
|
||||
border: 1px solid #1083E3;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
&.act {
|
||||
background-color: #1083E3;
|
||||
border: 1px solid #1083E3;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&.block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// select
|
||||
.sort-select{
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
min-width: 100px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0 10px;
|
||||
.sort-select {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
min-width: 100px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
padding: 0 10px;
|
||||
background-color: #373737;
|
||||
border: 1px solid #3F3F3F;
|
||||
border-radius: 2px;
|
||||
border-top-left-radius: 2px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
|
||||
p {
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.select-item-wrap {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: -1px;
|
||||
clip-path: inset(0 0 100% 0);
|
||||
width: calc(100% + 2px);
|
||||
padding: 8px 0;
|
||||
background-color: #373737;
|
||||
border: 1px solid #3F3F3F;
|
||||
border-radius: 2px;
|
||||
border-top-left-radius: 2px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
p{
|
||||
font-size: 13px;
|
||||
transition: all 0.17s ease-in-out;
|
||||
visibility: hidden;
|
||||
|
||||
.select-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 20px;
|
||||
line-height: 1.4;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
button {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #2C2C2C;
|
||||
}
|
||||
}
|
||||
.select-item-wrap{
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: -1px;
|
||||
clip-path:inset(0 0 100% 0);
|
||||
width: calc(100% + 2px);
|
||||
padding: 8px 0;
|
||||
background-color: #373737;
|
||||
border: 1px solid #3F3F3F;
|
||||
border-radius: 2px;
|
||||
transition: all 0.17s ease-in-out;
|
||||
visibility: hidden;
|
||||
.select-item{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 8px 20px;
|
||||
line-height: 1.4;
|
||||
transition: all .17s ease-in-out;
|
||||
button{
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
line-height: 1.4;
|
||||
}
|
||||
&:hover{
|
||||
background-color: #2C2C2C;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 7px;
|
||||
transform: translateY(-50%);
|
||||
width: 10px;
|
||||
height: 6px;
|
||||
background: url(/static/images/common/select-arr.svg) no-repeat center;
|
||||
background-size: cover;
|
||||
transition: all .17s ease-in-out;
|
||||
}
|
||||
|
||||
&.active {
|
||||
.select-item-wrap {
|
||||
clip-path: inset(0 0 0 0);
|
||||
visibility: visible;
|
||||
}
|
||||
&::after{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 7px;
|
||||
transform: translateY(-50%);
|
||||
width: 10px;
|
||||
height: 6px;
|
||||
background: url(/static/images/common/select-arr.svg) no-repeat center;
|
||||
background-size: cover;
|
||||
transition: all .17s ease-in-out;
|
||||
}
|
||||
&.active{
|
||||
.select-item-wrap{
|
||||
clip-path: inset(0 0 0 0);
|
||||
visibility: visible;
|
||||
}
|
||||
&:after{
|
||||
transform: translateY(-50%) rotate(-180deg);
|
||||
}
|
||||
|
||||
&:after {
|
||||
transform: translateY(-50%) rotate(-180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// input
|
||||
input[type=text]{
|
||||
&.input-origin{
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border-radius: 2px;
|
||||
background-color: #313131;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
padding: 0 10px;
|
||||
&::placeholder{
|
||||
font-size: 12px;
|
||||
}
|
||||
input[type=text] {
|
||||
&.input-origin {
|
||||
display: inline-block;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
border-radius: 2px;
|
||||
background-color: #313131;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
padding: 0 10px;
|
||||
|
||||
&::placeholder {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// date-picker
|
||||
.single-date{
|
||||
input{
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
background-color: #313131;
|
||||
}
|
||||
.single-date {
|
||||
input {
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
background-color: #313131;
|
||||
}
|
||||
}
|
||||
.range-date{
|
||||
input{
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
background-color: #313131;
|
||||
|
||||
.range-date {
|
||||
input {
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-family: 'Pretendard', sans-serif;
|
||||
background-color: #313131;
|
||||
}
|
||||
|
||||
.react-datepicker__input-container {
|
||||
button {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.react-datepicker__input-container{
|
||||
button{
|
||||
&:after{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// check-btn
|
||||
.check-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 30px;
|
||||
background-color: #3A3A3A;
|
||||
border-radius: 3px;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
.check-area {
|
||||
flex: none;
|
||||
width: 30px;
|
||||
height: 100%;
|
||||
border-right: 1px solid #272727;
|
||||
background: url(../../public/static/images/canvas/check-grey.svg) no-repeat center;
|
||||
background-size: 11px 9px;
|
||||
}
|
||||
|
||||
.title-area {
|
||||
padding: 0 10px;
|
||||
font-size: 12px;
|
||||
color: #898989;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&.block {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.act {
|
||||
background-color: #fff;
|
||||
|
||||
.check-area {
|
||||
border-right: 1px solid #101010;
|
||||
background: url(../../public/static/images/canvas/check-black.svg) no-repeat center;
|
||||
}
|
||||
|
||||
.title-area {
|
||||
color: #101010;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// arr-btn
|
||||
.arr-btn {
|
||||
display: block;
|
||||
height: 30px;
|
||||
border-radius: 3px;
|
||||
background-color: #3A3A3A;
|
||||
padding: 0 11px;
|
||||
text-align: left;
|
||||
transition: all .17s ease-in-out;
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
color: #898989;
|
||||
font-weight: 400;
|
||||
padding-right: 15px;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 5px;
|
||||
height: 8px;
|
||||
background: url(../../public/static/images/canvas/arr_btn_ico.svg) no-repeat center;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.act {
|
||||
background-color: #fff;
|
||||
|
||||
span {
|
||||
color: #101010;
|
||||
font-weight: 500;
|
||||
|
||||
&:after {
|
||||
background: url(../../public/static/images/canvas/arr_btn_ico_black.svg) no-repeat center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,2 +1,3 @@
|
||||
@import '_layout.scss';
|
||||
@import '_contents.scss';
|
||||
@import '_contents.scss';
|
||||
@import '_modal.scss';
|
||||
12
yarn.lock
12
yarn.lock
@ -4107,7 +4107,7 @@ buffer@^6.0.3:
|
||||
|
||||
busboy@1.6.0:
|
||||
version "1.6.0"
|
||||
resolved "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz"
|
||||
resolved "https://registry.yarnpkg.com/busboy/-/busboy-1.6.0.tgz#966ea36a9502e43cdb9146962523b92f531f6893"
|
||||
integrity sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==
|
||||
dependencies:
|
||||
streamsearch "^1.1.0"
|
||||
@ -4161,7 +4161,7 @@ client-only@0.0.1, client-only@^0.0.1:
|
||||
resolved "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz"
|
||||
integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
|
||||
|
||||
clsx@^1.2.1:
|
||||
clsx@^1.1.1, clsx@^1.2.1:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz"
|
||||
integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
|
||||
@ -5515,6 +5515,14 @@ react-dom@^18:
|
||||
loose-envify "^1.1.0"
|
||||
scheduler "^0.23.2"
|
||||
|
||||
react-draggable@^4.4.6:
|
||||
version "4.4.6"
|
||||
resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.6.tgz#63343ee945770881ca1256a5b6fa5c9f5983fe1e"
|
||||
integrity sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==
|
||||
dependencies:
|
||||
clsx "^1.1.1"
|
||||
prop-types "^15.8.1"
|
||||
|
||||
react-icons@^5.3.0:
|
||||
version "5.3.0"
|
||||
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-5.3.0.tgz#ccad07a30aebd40a89f8cfa7d82e466019203f1c"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user