diff --git a/public/static/images/canvas/depth2-arr.svg b/public/static/images/canvas/depth2-arr.svg new file mode 100644 index 0000000..31e0478 --- /dev/null +++ b/public/static/images/canvas/depth2-arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/menu_icon01.svg b/public/static/images/canvas/menu_icon01.svg new file mode 100644 index 0000000..ce77c2d --- /dev/null +++ b/public/static/images/canvas/menu_icon01.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/static/images/canvas/menu_icon02.svg b/public/static/images/canvas/menu_icon02.svg new file mode 100644 index 0000000..363e483 --- /dev/null +++ b/public/static/images/canvas/menu_icon02.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/menu_icon03.svg b/public/static/images/canvas/menu_icon03.svg new file mode 100644 index 0000000..56896c6 --- /dev/null +++ b/public/static/images/canvas/menu_icon03.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/menu_icon04.svg b/public/static/images/canvas/menu_icon04.svg new file mode 100644 index 0000000..3df7b7d --- /dev/null +++ b/public/static/images/canvas/menu_icon04.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/images/canvas/menu_icon05.svg b/public/static/images/canvas/menu_icon05.svg new file mode 100644 index 0000000..b5ea63d --- /dev/null +++ b/public/static/images/canvas/menu_icon05.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/static/images/canvas/menu_icon06.svg b/public/static/images/canvas/menu_icon06.svg new file mode 100644 index 0000000..6c9705f --- /dev/null +++ b/public/static/images/canvas/menu_icon06.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/static/images/canvas/minus.svg b/public/static/images/canvas/minus.svg new file mode 100644 index 0000000..6949c3e --- /dev/null +++ b/public/static/images/canvas/minus.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/plus.svg b/public/static/images/canvas/plus.svg new file mode 100644 index 0000000..6b5fc7f --- /dev/null +++ b/public/static/images/canvas/plus.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/static/images/canvas/side_icon01.svg b/public/static/images/canvas/side_icon01.svg new file mode 100644 index 0000000..6de890e --- /dev/null +++ b/public/static/images/canvas/side_icon01.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/side_icon02.svg b/public/static/images/canvas/side_icon02.svg new file mode 100644 index 0000000..e320aef --- /dev/null +++ b/public/static/images/canvas/side_icon02.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/side_icon03.svg b/public/static/images/canvas/side_icon03.svg new file mode 100644 index 0000000..3f95219 --- /dev/null +++ b/public/static/images/canvas/side_icon03.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/static/images/canvas/side_icon04.svg b/public/static/images/canvas/side_icon04.svg new file mode 100644 index 0000000..cc19651 --- /dev/null +++ b/public/static/images/canvas/side_icon04.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/side_icon05.svg b/public/static/images/canvas/side_icon05.svg new file mode 100644 index 0000000..569c5b6 --- /dev/null +++ b/public/static/images/canvas/side_icon05.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/side_icon06.svg b/public/static/images/canvas/side_icon06.svg new file mode 100644 index 0000000..7ee72ac --- /dev/null +++ b/public/static/images/canvas/side_icon06.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/side_icon07.svg b/public/static/images/canvas/side_icon07.svg new file mode 100644 index 0000000..ec65154 --- /dev/null +++ b/public/static/images/canvas/side_icon07.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/side_icon08.svg b/public/static/images/canvas/side_icon08.svg new file mode 100644 index 0000000..afbb1e6 --- /dev/null +++ b/public/static/images/canvas/side_icon08.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/side_icon09.svg b/public/static/images/canvas/side_icon09.svg new file mode 100644 index 0000000..aac0b48 --- /dev/null +++ b/public/static/images/canvas/side_icon09.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx index 1caf015..d91094f 100644 --- a/src/app/canvas/page.jsx +++ b/src/app/canvas/page.jsx @@ -9,6 +9,7 @@ export default function CanvasPage() {
+ asdasd
diff --git a/src/components/canvas_menu/CanvasMenu.jsx b/src/components/canvas_menu/CanvasMenu.jsx index eec0532..565d545 100644 --- a/src/components/canvas_menu/CanvasMenu.jsx +++ b/src/components/canvas_menu/CanvasMenu.jsx @@ -1,7 +1,74 @@ +'use client' +import { useState } from "react"; +import Qselect from "../common/select/Qselect"; +import MenuDepth01 from "./MenuDepth01"; + export default function CanvasMenu() { + const [menuNumber, setMenuNumber] = useState(null); + const SelectOption = [ + {name: '瓦53A',}, {name: '瓦53A'} + ] + const onClickNav = (number) => { + setMenuNumber(number) + if(menuNumber === number){ + setMenuNumber(null) + } + } return(
- +
+ +
+
+ +
+
+ + + + + + +
+
+ + 100% + +
+
+ + + +
+
+
+
+ {menuNumber === 1 && } + {menuNumber === 2 && } + {menuNumber === 3 && } + {menuNumber === 4 && } + {menuNumber === 5 && } + {menuNumber === 6 && } +
) } \ No newline at end of file diff --git a/src/components/canvas_menu/MenuDepth01.jsx b/src/components/canvas_menu/MenuDepth01.jsx new file mode 100644 index 0000000..e98bc79 --- /dev/null +++ b/src/components/canvas_menu/MenuDepth01.jsx @@ -0,0 +1,26 @@ +export default function MenuDepth01(){ + return( +
+ +
+
+ +
+
+ +
+
+ +
+
+
+ ) +} \ No newline at end of file diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss index b37322a..8069fdb 100644 --- a/src/styles/_contents.scss +++ b/src/styles/_contents.scss @@ -1 +1,213 @@ // CanvasPage + +// CanvasMenu +.canvas-menu-wrap{ + display: block; + width: 100%; + background-color: #2C2C2C; + .canvas-menu-inner{ + position: relative; + display: flex; + height: 46px; + align-items: center; + padding: 0 40px 0 20px; + background-color: inherit; + z-index: 999; + .canvas-menu-list{ + display: flex; + align-items: center; + height: inherit; + .canvas-menu-item{ + display: flex; + align-items: center; + height: inherit; + button{ + display: flex; + align-items: center; + font-size: 12px; + height: inherit; + color: #fff; + font-weight: 600; + padding: 0 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; + } + } + } + } + .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: relative; + height: 50px; + background-color: #383838; + transform: translateY(-100%); + 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%; + 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; + .depth2-btn-box{ + display: flex; + align-items: center; + margin-right: 34px; + button{ + position: relative; + font-size: 12px; + font-weight: 400; + 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; + } + } + } + } + &.active{ + transform: translateY(0); + } + } +} \ No newline at end of file diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss index 86efdf0..dac7edb 100644 --- a/src/styles/_layout.scss +++ b/src/styles/_layout.scss @@ -32,7 +32,7 @@ header{ height: 46px; background-color: #1C1C1C; border-bottom: 1px solid #000; - + z-index: 9999; .header-inner{ display: flex; align-items: center; @@ -47,7 +47,7 @@ header{ display: block; width: 232px; height: 30px; - background: url(../../public/static/images/common/Logo.svg)no-repeat center; + background: url(/static/images/common/Logo.svg)no-repeat center; background-size: contain; } } @@ -75,7 +75,7 @@ header{ transform: translateY(-50%); width: 6px; height: 10px; - background: url(../../public/static/images/common/nav-arr.svg)no-repeat center; + background: url(/static/images/common/nav-arr.svg)no-repeat center; transition: all .17s ease-in-out; } } @@ -170,7 +170,7 @@ header{ left: 0; width: 24px; height: 24px; - background: url(../../public/static/images/common/profile_icon.svg)no-repeat center; + background: url(/static/images/common/profile_icon.svg)no-repeat center; background-size: cover; } } diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index 8f4ce2a..de83d19 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -117,6 +117,7 @@ button{ border: none; padding: 0; margin: 0; + line-height: 1.4; color: inherit; outline: none; cursor: pointer; @@ -204,7 +205,7 @@ button{ transform: translateY(-50%); width: 10px; height: 6px; - background: url(../../public/static/images/common/select-arr.svg) no-repeat center; + background: url(/static/images/common/select-arr.svg) no-repeat center; background-size: cover; transition: all .17s ease-in-out; }