From c6473f9d1d8ad4e2971ff07b61eeb09489c23716 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= Date: Wed, 11 Sep 2024 11:16:02 +0900 Subject: [PATCH] =?UTF-8?q?canvas=20menu=20=EA=B2=AC=EC=A0=81,=20=EB=B0=9C?= =?UTF-8?q?=EC=A0=84=20=EC=8B=9C=EB=AE=AC=EB=A0=88=EC=9D=B4=EC=85=98=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/static/images/canvas/ico-flx01.svg | 4 ++ public/static/images/canvas/ico-flx02.svg | 5 +++ public/static/images/canvas/ico-flx03.svg | 5 +++ public/static/images/canvas/ico-flx04.svg | 6 +++ src/app/main/page.jsx | 12 ++++++ src/components/canvas/CanvasMenu.jsx | 39 ++++++++++++++++++- .../modal/outerlinesetting/OuterLineWall.jsx | 2 +- src/components/publishpage/PublishPage.jsx | 7 ++++ src/styles/_contents.scss | 19 +++++++++ src/styles/_reset.scss | 12 ++++++ 10 files changed, 108 insertions(+), 3 deletions(-) create mode 100644 public/static/images/canvas/ico-flx01.svg create mode 100644 public/static/images/canvas/ico-flx02.svg create mode 100644 public/static/images/canvas/ico-flx03.svg create mode 100644 public/static/images/canvas/ico-flx04.svg create mode 100644 src/app/main/page.jsx diff --git a/public/static/images/canvas/ico-flx01.svg b/public/static/images/canvas/ico-flx01.svg new file mode 100644 index 0000000..84185ff --- /dev/null +++ b/public/static/images/canvas/ico-flx01.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/ico-flx02.svg b/public/static/images/canvas/ico-flx02.svg new file mode 100644 index 0000000..400d973 --- /dev/null +++ b/public/static/images/canvas/ico-flx02.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/static/images/canvas/ico-flx03.svg b/public/static/images/canvas/ico-flx03.svg new file mode 100644 index 0000000..44c2eea --- /dev/null +++ b/public/static/images/canvas/ico-flx03.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/static/images/canvas/ico-flx04.svg b/public/static/images/canvas/ico-flx04.svg new file mode 100644 index 0000000..ae584b3 --- /dev/null +++ b/public/static/images/canvas/ico-flx04.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/app/main/page.jsx b/src/app/main/page.jsx new file mode 100644 index 0000000..46b2919 --- /dev/null +++ b/src/app/main/page.jsx @@ -0,0 +1,12 @@ +import Header from "@/components/header/Header"; + +export default function MainPage() { + return( +
+
+
+ +
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/CanvasMenu.jsx b/src/components/canvas/CanvasMenu.jsx index 4ef52ac..e9631a9 100644 --- a/src/components/canvas/CanvasMenu.jsx +++ b/src/components/canvas/CanvasMenu.jsx @@ -5,6 +5,7 @@ import MenuDepth01 from "./MenuDepth01"; import { useRecoilState } from "recoil"; import { modalState } from "@/store/modalAtom"; + export default function CanvasMenu() { const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state const [menuNumber, setMenuNumber] = useState(null); @@ -77,8 +78,42 @@ export default function CanvasMenu() { } - {(menuNumber === 5) && 'asdasd'} - {(menuNumber === 6) && '103516516'} + {(menuNumber === 5) && + <> +
+ + + + +
+ + } + {(menuNumber === 6) && + <> +
+ + +
+ + }
diff --git a/src/components/canvas/modal/outerlinesetting/OuterLineWall.jsx b/src/components/canvas/modal/outerlinesetting/OuterLineWall.jsx index cee0ed5..f2174c3 100644 --- a/src/components/canvas/modal/outerlinesetting/OuterLineWall.jsx +++ b/src/components/canvas/modal/outerlinesetting/OuterLineWall.jsx @@ -7,7 +7,7 @@ import { useRecoilState } from "recoil"; export default function OuterLineWall (){ - const [modalOption, setModalOption] = useRecoilState(modalState); + const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state const [buttonAct, setButtonAct] = useState(1); const [close, setClose] = useState(false) const HandleClickClose = () => { diff --git a/src/components/publishpage/PublishPage.jsx b/src/components/publishpage/PublishPage.jsx index c09a770..1bea5f4 100644 --- a/src/components/publishpage/PublishPage.jsx +++ b/src/components/publishpage/PublishPage.jsx @@ -83,6 +83,13 @@ export default function PublishPage() { 2024-09-06 + + MainPage + + MainPage + + 2024-09-11 + diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss index c2e13d0..1d37812 100644 --- a/src/styles/_contents.scss +++ b/src/styles/_contents.scss @@ -110,6 +110,25 @@ } } } + .ico-btn-from{ + display: flex; + align-items: center; + gap: 5px; + button{ + .ico{ + display: block; + width: 14px; + height: 14px; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + &.ico01{background-image: url(../../public/static/images/canvas/ico-flx01.svg);} + &.ico02{background-image: url(../../public/static/images/canvas/ico-flx02.svg);} + &.ico03{background-image: url(../../public/static/images/canvas/ico-flx03.svg);} + &.ico04{background-image: url(../../public/static/images/canvas/ico-flx04.svg);} + } + } + } .vertical-horizontal{ display: flex; min-width: 170px; diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index 0401850..a47b525 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -172,6 +172,7 @@ button{ font-weight: 500; } } + &:hover, &.act{ background-color: #1083E3; border: 1px solid #1083E3; @@ -182,6 +183,17 @@ button{ display: block; width: 100%; } + &.ico-flx{ + display: flex; + align-items: center; + .ico{ + margin-right: 10px; + } + &:hover, + &.act{ + font-weight: 400; + } + } } // select