From 2d33bbc6a424c20bf16b3bfe831d6abb4320820a Mon Sep 17 00:00:00 2001 From: minsik Date: Tue, 10 Sep 2024 10:27:57 +0900 Subject: [PATCH] =?UTF-8?q?-=20options=20=EB=B3=80=EA=B2=BD=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + public/assets/img/doc.svg | 12 + public/assets/img/excel.svg | 4 + public/assets/img/file.svg | 4 + public/assets/img/image.svg | 4 + public/assets/img/ppt.svg | 26 + public/static/images/canvas/arr_btn_ico.svg | 3 + .../images/canvas/arr_btn_ico_black.svg | 3 + public/static/images/canvas/check-black.svg | 3 + public/static/images/canvas/check-grey.svg | 3 + public/static/images/canvas/menu_icon00.svg | 8 + public/static/images/canvas/modal_close.svg | 10 + src/app/layout.js | 2 +- .../common/draggable/withDraggable.jsx | 22 + src/components/floor-plan/CanvasMenu.jsx | 29 +- src/components/floor-plan/FloorPlan.jsx | 8 +- .../modal/settoing01/FirstOption.jsx | 45 ++ .../modal/settoing01/SecondOption.jsx | 36 + .../modal/settoing01/SettingModal01.jsx | 88 +++ src/lib/file.js | 22 + src/styles/_contents.scss | 707 ++++++++++-------- src/styles/_inputcommon.scss | 35 + src/styles/_modal.scss | 91 +++ src/styles/_reset.scss | 569 ++++++++------ src/styles/style.scss | 3 +- yarn.lock | 12 +- 26 files changed, 1224 insertions(+), 526 deletions(-) create mode 100644 public/assets/img/doc.svg create mode 100644 public/assets/img/excel.svg create mode 100644 public/assets/img/file.svg create mode 100644 public/assets/img/image.svg create mode 100644 public/assets/img/ppt.svg create mode 100644 public/static/images/canvas/arr_btn_ico.svg create mode 100644 public/static/images/canvas/arr_btn_ico_black.svg create mode 100644 public/static/images/canvas/check-black.svg create mode 100644 public/static/images/canvas/check-grey.svg create mode 100644 public/static/images/canvas/menu_icon00.svg create mode 100644 public/static/images/canvas/modal_close.svg create mode 100644 src/components/common/draggable/withDraggable.jsx create mode 100644 src/components/floor-plan/modal/settoing01/FirstOption.jsx create mode 100644 src/components/floor-plan/modal/settoing01/SecondOption.jsx create mode 100644 src/components/floor-plan/modal/settoing01/SettingModal01.jsx create mode 100644 src/lib/file.js create mode 100644 src/styles/_inputcommon.scss create mode 100644 src/styles/_modal.scss diff --git a/package.json b/package.json index 9f060d6d..4d9a0f0b 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/public/assets/img/doc.svg b/public/assets/img/doc.svg new file mode 100644 index 00000000..73d7f003 --- /dev/null +++ b/public/assets/img/doc.svg @@ -0,0 +1,12 @@ + + + + doc-document + + + + + + + + \ No newline at end of file diff --git a/public/assets/img/excel.svg b/public/assets/img/excel.svg new file mode 100644 index 00000000..2bb190e1 --- /dev/null +++ b/public/assets/img/excel.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/public/assets/img/file.svg b/public/assets/img/file.svg new file mode 100644 index 00000000..3df8b4d8 --- /dev/null +++ b/public/assets/img/file.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/public/assets/img/image.svg b/public/assets/img/image.svg new file mode 100644 index 00000000..2e856737 --- /dev/null +++ b/public/assets/img/image.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/public/assets/img/ppt.svg b/public/assets/img/ppt.svg new file mode 100644 index 00000000..d9b7382a --- /dev/null +++ b/public/assets/img/ppt.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + \ No newline at end of file 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 00000000..65ac8bfe --- /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 00000000..cbffea32 --- /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 00000000..75184dea --- /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 00000000..617acc83 --- /dev/null +++ b/public/static/images/canvas/check-grey.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/menu_icon00.svg b/public/static/images/canvas/menu_icon00.svg new file mode 100644 index 00000000..f0adffd5 --- /dev/null +++ b/public/static/images/canvas/menu_icon00.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/static/images/canvas/modal_close.svg b/public/static/images/canvas/modal_close.svg new file mode 100644 index 00000000..081c0ccc --- /dev/null +++ b/public/static/images/canvas/modal_close.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/app/layout.js b/src/app/layout.js index be0cad1a..e5c8a173 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -34,8 +34,8 @@ export default function RootLayout({ children }) { {children} - + diff --git a/src/components/common/draggable/withDraggable.jsx b/src/components/common/draggable/withDraggable.jsx new file mode 100644 index 00000000..9f322583 --- /dev/null +++ b/src/components/common/draggable/withDraggable.jsx @@ -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 && ( + handleOnDrag(data)}> + {children} + + )} + + ) +} diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index a68a7e66..ae3fa0eb 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -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() {
    +
  • onClickNav(0)}> + +
  • onClickNav(1)}>
  • onClickNav(5)}>
  • onClickNav(6)}>
-
- -
- +
+
+ 垂直水平モード + +
+
+ +
+
+
@@ -72,6 +84,7 @@ export default function CanvasMenu() {
+ {menuNumber === 0 && } {menuNumber === 1 && } {menuNumber === 2 && } {menuNumber === 3 && } diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx index 3f1d58f3..fecffea7 100644 --- a/src/components/floor-plan/FloorPlan.jsx +++ b/src/components/floor-plan/FloorPlan.jsx @@ -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 ( <>
- +
+ {modalOpen === 'option' && }
diff --git a/src/components/floor-plan/modal/settoing01/FirstOption.jsx b/src/components/floor-plan/modal/settoing01/FirstOption.jsx new file mode 100644 index 00000000..f191421b --- /dev/null +++ b/src/components/floor-plan/modal/settoing01/FirstOption.jsx @@ -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 ( + <> +
+

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

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

画面表示

+
+ {options2.map((item) => ( + + ))} +
+
+ + ) +} diff --git a/src/components/floor-plan/modal/settoing01/SecondOption.jsx b/src/components/floor-plan/modal/settoing01/SecondOption.jsx new file mode 100644 index 00000000..1a1d62d2 --- /dev/null +++ b/src/components/floor-plan/modal/settoing01/SecondOption.jsx @@ -0,0 +1,36 @@ +export default function SecondOption(props) { + const { options, onClick } = props + return ( + <> +
+

フォントとサイズの変更

+
+ {options.option1.map((item) => ( + + ))} +
+
+
+

吸着範囲の設定

+
+ {options.option2.map((item) => ( + + ))} +
+
+ + +
+
+ + ) +} diff --git a/src/components/floor-plan/modal/settoing01/SettingModal01.jsx b/src/components/floor-plan/modal/settoing01/SettingModal01.jsx new file mode 100644 index 00000000..e2c2cd89 --- /dev/null +++ b/src/components/floor-plan/modal/settoing01/SettingModal01.jsx @@ -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 ( + +
+
+

Canvas設定

+ +
+
+
+ + + +
+ {buttonAct === 1 && } + {/*{buttonAct === 2 && }*/} +
+
+ + ) +} diff --git a/src/lib/file.js b/src/lib/file.js new file mode 100644 index 00000000..418fbe96 --- /dev/null +++ b/src/lib/file.js @@ -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) +} diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss index 5d6b0baf..7c03e853 100644 --- a/src/styles/_contents.scss +++ b/src/styles/_contents.scss @@ -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%; + } } \ No newline at end of file diff --git a/src/styles/_inputcommon.scss b/src/styles/_inputcommon.scss new file mode 100644 index 00000000..97e5cc53 --- /dev/null +++ b/src/styles/_inputcommon.scss @@ -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; + } + } + } +} \ No newline at end of file diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss new file mode 100644 index 00000000..05b0e4a9 --- /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 286fa384..7dc13a69 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -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; + } + } + } } \ No newline at end of file diff --git a/src/styles/style.scss b/src/styles/style.scss index 68f4c54b..67e19244 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 diff --git a/yarn.lock b/yarn.lock index 6bd3608f..a1182bcc 100644 --- a/yarn.lock +++ b/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"