diff --git a/public/static/images/canvas/arr_btn_ico.svg b/public/static/images/canvas/arr_btn_ico.svg new file mode 100644 index 0000000..65ac8bf --- /dev/null +++ b/public/static/images/canvas/arr_btn_ico.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/arr_btn_ico_black.svg b/public/static/images/canvas/arr_btn_ico_black.svg new file mode 100644 index 0000000..cbffea3 --- /dev/null +++ b/public/static/images/canvas/arr_btn_ico_black.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/check-black.svg b/public/static/images/canvas/check-black.svg new file mode 100644 index 0000000..75184de --- /dev/null +++ b/public/static/images/canvas/check-black.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/check-grey.svg b/public/static/images/canvas/check-grey.svg new file mode 100644 index 0000000..617acc8 --- /dev/null +++ b/public/static/images/canvas/check-grey.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/modal_close.svg b/public/static/images/canvas/modal_close.svg new file mode 100644 index 0000000..081c0cc --- /dev/null +++ b/public/static/images/canvas/modal_close.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx index 1597735..9f11ccb 100644 --- a/src/app/canvas/page.jsx +++ b/src/app/canvas/page.jsx @@ -1,18 +1,24 @@ +'use client' + import CanvasLayout from '@/components/canvas/CanvasLayout' import CanvasMenu from '@/components/canvas/CanvasMenu' +import SettingModal01 from '@/components/canvas/modal/settoing01/SettingModal01' import Header from '@/components/header/Header' import '@/styles/style.scss' +import { useState } from 'react' export default function CanvasPage() { + const [modalOpen, setModalOpen] = useState('option'); return(
- +
+ {modalOpen === 'option' && }
diff --git a/src/app/inputwrap/page.jsx b/src/app/inputwrap/page.jsx index a9102f7..9557695 100644 --- a/src/app/inputwrap/page.jsx +++ b/src/app/inputwrap/page.jsx @@ -15,6 +15,8 @@ export default function InputWrapPage (){
+ +
@@ -47,6 +49,33 @@ export default function InputWrapPage (){ +
+

Check-Btn

+
+ + +
+
+
+

Arrow-Btn

+
+ + + +
+
) } \ No newline at end of file diff --git a/src/app/layout.js b/src/app/layout.js index cd200d7..21eaa53 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -1,5 +1,4 @@ import RecoilRootWrapper from './RecoilWrapper' -import QModal from '@/components/common/modal/QModal' import '@/styles/common.scss' // import '@/styles/style.scss' @@ -14,7 +13,6 @@ export default function RootLayout({ children }) { {children} - diff --git a/src/app/modal/page.jsx b/src/app/modal/page.jsx deleted file mode 100644 index 9b2a97f..0000000 --- a/src/app/modal/page.jsx +++ /dev/null @@ -1,42 +0,0 @@ -'use client' - -import { useRecoilState } from 'recoil' -import { modalContent, modalState } from '@/store/modalAtom' - -export default function ModalPage() { - const [open, setOpen] = useRecoilState(modalState) - const [contents, setContent] = useRecoilState(modalContent) - - const ipsum = ( - <> -

title

-

- 저작자·발명가·과학기술자와 예술가의 권리는 법률로써 보호한다. 이 헌법은 1988년 2월 25일부터 시행한다. 다만, 이 헌법을 시행하기 위하여 필요한 - 법률의 제정·개정과 이 헌법에 의한 대통령 및 국회의원의 선거 기타 이 헌법시행에 관한 준비는 이 헌법시행 전에 할 수 있다. -

-

- 국가는 주택개발정책등을 통하여 모든 국민이 쾌적한 주거생활을 할 수 있도록 노력하여야 한다. 통신·방송의 시설기준과 신문의 기능을 보장하기 - 위하여 필요한 사항은 법률로 정한다. -

-

- 국회에서 의결된 법률안은 정부에 이송되어 15일 이내에 대통령이 공포한다. 선거에 관한 경비는 법률이 정하는 경우를 제외하고는 정당 또는 - 후보자에게 부담시킬 수 없다. -

- - ) - - return ( - <> -
- -
- - ) -} diff --git a/src/components/canvas/CanvasFrame.jsx b/src/components/canvas/CanvasFrame.jsx index 5923888..455f1db 100644 --- a/src/components/canvas/CanvasFrame.jsx +++ b/src/components/canvas/CanvasFrame.jsx @@ -1,3 +1,4 @@ + export default function CanvasFrame () { return(
diff --git a/src/components/canvas/CanvasMenu.jsx b/src/components/canvas/CanvasMenu.jsx index 791d7a9..3eda273 100644 --- a/src/components/canvas/CanvasMenu.jsx +++ b/src/components/canvas/CanvasMenu.jsx @@ -3,7 +3,7 @@ import { useState } from "react"; 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 SelectOption = [ {name: '瓦53A',}, {name: '瓦53A'} @@ -45,7 +45,7 @@ export default function CanvasMenu() { - +
diff --git a/src/components/canvas/modal/settoing01/FirstOption.jsx b/src/components/canvas/modal/settoing01/FirstOption.jsx new file mode 100644 index 0000000..298c7df --- /dev/null +++ b/src/components/canvas/modal/settoing01/FirstOption.jsx @@ -0,0 +1,49 @@ +import { HandleBtnClick } from "./SettingModal01" + +const buttonList01 = [ + {id: 1, name: '割り当て表示'}, + {id: 2, name: '実寸表示'}, + {id: 3, name: '図面表示'}, + {id: 4, name: '寸法表示なし'}, + {id: 5, name: 'グリッド表示'}, + {id: 6, name: '架台表示'}, + {id: 7, name: '文字表示'}, + {id: 8, name: '座標表示'}, + {id: 9, name: '流れ方向表示'}, + {id: 10, name: '図面切替表示'}, + {id: 11, name: 'ü廊下寸法表示'}, +] +const buttonList02 = [ + {id: 1, name: 'ボーダーのみ'}, + {id: 2, name: 'ラインハッチ'}, + {id: 3, name: 'All painted'}, +] + +export default function FirstOption (){ + return( + <> +
+

※図面に表示する項目をクリックすると適用されます。

+
+ {buttonList01.map((item)=>( + + ))} +
+
+
+

画面表示

+
+ {buttonList02.map((item)=>( + + ))} +
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/settoing01/SecondOption.jsx b/src/components/canvas/modal/settoing01/SecondOption.jsx new file mode 100644 index 0000000..067ec64 --- /dev/null +++ b/src/components/canvas/modal/settoing01/SecondOption.jsx @@ -0,0 +1,50 @@ +import { HandleBtnClick } from "./SettingModal01" + +const buttonList01 = [ + {id: 1, name: '文字フォントの変更'}, + {id: 2, name: 'フロー方向フォントの変更'}, + {id: 3, name: '寸法フォントの変更'}, + {id: 4, name: '回路番号フォントの変更'}, +] +const buttonList02 = [ + {id: 1, name: '極小'}, + {id: 2, name: '牛'}, + {id: 3, name: '中'}, + {id: 4, name: 'ティーン'}, +] + +export default function SecondOption (){ + return( + <> +
+

フォントとサイズの変更

+
+ {buttonList01.map((item)=>( + + ))} +
+
+
+

吸着範囲の設定

+
+ {buttonList02.map((item)=>( + + ))} +
+
+ + +
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/settoing01/SettingModal01.jsx b/src/components/canvas/modal/settoing01/SettingModal01.jsx new file mode 100644 index 0000000..ecc4f45 --- /dev/null +++ b/src/components/canvas/modal/settoing01/SettingModal01.jsx @@ -0,0 +1,56 @@ +'use client' + +import { useState } from "react"; +import FirstOption from "./FirstOption"; +import SecondOption from "./SecondOption"; +import WithDraggable from "@/components/common/draggable/withDraggable"; + +export const HandleBtnClick = (e) => { + const button = e.target.closest('button'); + 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) + } + return( + +
+
+

Canvas設定

+ +
+
+
+ + + +
+ {buttonAct === 1 && } + {buttonAct === 2 && } +
+
+ + ) +} \ No newline at end of file diff --git a/src/components/common/modal/QModal.jsx b/src/components/common/modal/QModal.jsx deleted file mode 100644 index 1cf0191..0000000 --- a/src/components/common/modal/QModal.jsx +++ /dev/null @@ -1,20 +0,0 @@ -'use client' - -import { useRecoilState, useRecoilValue } from 'recoil' - -import { Modal } from 'react-responsive-modal' - -import { modalContent, modalState } from '@/store/modalAtom' - -import 'react-responsive-modal/styles.css' - -export default function QModal() { - const [open, setOpen] = useRecoilState(modalState) - const children = useRecoilValue(modalContent) - - return ( - setOpen(false)} center> - {children} - - ) -} diff --git a/src/styles/_inputcommon.scss b/src/styles/_inputcommon.scss index f382dfe..97e5cc5 100644 --- a/src/styles/_inputcommon.scss +++ b/src/styles/_inputcommon.scss @@ -1,6 +1,7 @@ .input-content{ max-width: 1600px; margin: 0 auto; + padding-bottom: 100px; .input-wrap{ padding: 50px 50px 0; h1{ @@ -22,5 +23,13 @@ margin-bottom: 10px; } } + .form-Arrow-btn, + .form-Check-btn{ + padding: 10px; + background-color: #272727; + > button{ + margin-bottom: 10px; + } + } } } \ No newline at end of file diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss new file mode 100644 index 0000000..05b0e4a --- /dev/null +++ b/src/styles/_modal.scss @@ -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; + } + } + } + } +} \ No newline at end of file diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index 286fa38..f96cd52 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -137,7 +137,7 @@ button{ border: 1px solid #000; text-align: center; font-family: 'Pretendard', sans-serif; - transition: color .12s ease-in-out; + transition: all .17s ease-in-out; cursor: pointer; &.block{ width: 100%; @@ -161,6 +161,27 @@ button{ 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 @@ -277,4 +298,82 @@ input[type=text]{ } } } +} + +// 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; + } + } + } } \ No newline at end of file diff --git a/src/styles/style.scss b/src/styles/style.scss index 68f4c54..67e1924 100644 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -1,2 +1,3 @@ @import '_layout.scss'; -@import '_contents.scss'; \ No newline at end of file +@import '_contents.scss'; +@import '_modal.scss'; \ No newline at end of file