From cedc17a96bb9fd89526735a93737fd74086dfa26 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= Date: Fri, 6 Sep 2024 16:50:50 +0900 Subject: [PATCH] =?UTF-8?q?canvas=20page=20=ED=8D=BC=EB=B8=94=EB=A6=AC?= =?UTF-8?q?=EC=8B=B1=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../static/images/canvas/plan_close_black.svg | 4 + .../static/images/canvas/plan_close_gray.svg | 4 + public/static/images/canvas/plane_add.svg | 4 + src/app/canvas/page.jsx | 7 +- src/components/canvas/CanvasFrame.jsx | 7 + src/components/canvas/CanvasLayout.jsx | 45 ++++++ .../{canvas_menu => canvas}/CanvasMenu.jsx | 16 +-- .../{canvas_menu => canvas}/MenuDepth01.jsx | 0 src/styles/_contents.scss | 136 ++++++++++++++++-- src/styles/_layout.scss | 3 +- 10 files changed, 203 insertions(+), 23 deletions(-) create mode 100644 public/static/images/canvas/plan_close_black.svg create mode 100644 public/static/images/canvas/plan_close_gray.svg create mode 100644 public/static/images/canvas/plane_add.svg create mode 100644 src/components/canvas/CanvasFrame.jsx create mode 100644 src/components/canvas/CanvasLayout.jsx rename src/components/{canvas_menu => canvas}/CanvasMenu.jsx (88%) rename src/components/{canvas_menu => canvas}/MenuDepth01.jsx (100%) diff --git a/public/static/images/canvas/plan_close_black.svg b/public/static/images/canvas/plan_close_black.svg new file mode 100644 index 0000000..4744574 --- /dev/null +++ b/public/static/images/canvas/plan_close_black.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/plan_close_gray.svg b/public/static/images/canvas/plan_close_gray.svg new file mode 100644 index 0000000..bba119e --- /dev/null +++ b/public/static/images/canvas/plan_close_gray.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/plane_add.svg b/public/static/images/canvas/plane_add.svg new file mode 100644 index 0000000..9b6e3e0 --- /dev/null +++ b/public/static/images/canvas/plane_add.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx index d91094f..1597735 100644 --- a/src/app/canvas/page.jsx +++ b/src/app/canvas/page.jsx @@ -1,4 +1,5 @@ -import CanvasMenu from '@/components/canvas_menu/CanvasMenu' +import CanvasLayout from '@/components/canvas/CanvasLayout' +import CanvasMenu from '@/components/canvas/CanvasMenu' import Header from '@/components/header/Header' import '@/styles/style.scss' @@ -9,7 +10,9 @@ export default function CanvasPage() {
- asdasd +
+ +
diff --git a/src/components/canvas/CanvasFrame.jsx b/src/components/canvas/CanvasFrame.jsx new file mode 100644 index 0000000..5923888 --- /dev/null +++ b/src/components/canvas/CanvasFrame.jsx @@ -0,0 +1,7 @@ +export default function CanvasFrame () { + return( +
+ +
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/CanvasLayout.jsx b/src/components/canvas/CanvasLayout.jsx new file mode 100644 index 0000000..5be6a11 --- /dev/null +++ b/src/components/canvas/CanvasLayout.jsx @@ -0,0 +1,45 @@ +'use client' + +import { useState } from "react" +import CanvasFrame from "./CanvasFrame"; + +export default function CanvasLayout () { + const [plans, setPlans] = useState([{ id: 0, name: 'Plan 1' }, { id: 1, name: 'Plan 2' }, { id: 2, name: 'Plan 3' }]); + const [idxNum, setIdxNum] = useState(null); + + const onClickPlane = (num) => { + setIdxNum(num); + } + + const handleDeletePlan = (e, id) => { + e.stopPropagation(); // 이벤트 버블링 방지 + setPlans(plans.filter(plan => plan.id !== id)); // 삭제할 아이디와 다른 아이템만 남김 + } + + const addNewPlan = () => { + setPlans([...plans, { id: plans.length, name: `Plan ${plans.length + 1}` }]); + } + + return( +
+
+
+ {plans.map((plan, idx) => ( + + ))} +
+ +
+ +
+ ) +} \ No newline at end of file diff --git a/src/components/canvas_menu/CanvasMenu.jsx b/src/components/canvas/CanvasMenu.jsx similarity index 88% rename from src/components/canvas_menu/CanvasMenu.jsx rename to src/components/canvas/CanvasMenu.jsx index 565d545..791d7a9 100644 --- a/src/components/canvas_menu/CanvasMenu.jsx +++ b/src/components/canvas/CanvasMenu.jsx @@ -15,25 +15,25 @@ export default function CanvasMenu() { } } return( -
+
    -
  • onClickNav(1)}> +
  • onClickNav(1)}>
    • -
  • onClickNav(2)}> +
  • onClickNav(2)}>
    • -
  • onClickNav(3)}> +
  • onClickNav(3)}>
    • -
  • onClickNav(4)}> +
  • onClickNav(4)}>
    • -
  • onClickNav(5)}> +
  • onClickNav(5)}>
    • -
  • onClickNav(6)}> +
  • onClickNav(6)}>
@@ -61,7 +61,7 @@ export default function CanvasMenu() {
-
+
{menuNumber === 1 && } {menuNumber === 2 && } {menuNumber === 3 && } diff --git a/src/components/canvas_menu/MenuDepth01.jsx b/src/components/canvas/MenuDepth01.jsx similarity index 100% rename from src/components/canvas_menu/MenuDepth01.jsx rename to src/components/canvas/MenuDepth01.jsx diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss index 8069fdb..95cf827 100644 --- a/src/styles/_contents.scss +++ b/src/styles/_contents.scss @@ -1,34 +1,46 @@ // CanvasPage - +.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{ + position: relative; display: block; width: 100%; - background-color: #2C2C2C; + padding-bottom: 0; + background-color: #383838; + transition: padding .17s ease-in-out; .canvas-menu-inner{ position: relative; display: flex; - height: 46px; align-items: center; padding: 0 40px 0 20px; - background-color: inherit; + background-color: #2C2C2C; z-index: 999; .canvas-menu-list{ display: flex; align-items: center; - height: inherit; + height: 100%; .canvas-menu-item{ display: flex; align-items: center; - height: inherit; + height: 100%; button{ display: flex; align-items: center; font-size: 12px; - height: inherit; + height: 100%; color: #fff; font-weight: 600; - padding: 0 20px; + padding: 15px 20px; opacity: 0.55; transition: all .17s ease-in-out; .menu-icon{ @@ -129,10 +141,12 @@ } } .canvas-depth2-wrap{ - position: relative; - height: 50px; + position: absolute; + top: -100%; + left: 0; background-color: #383838; - transform: translateY(-100%); + width: 100%; + height: 50px; transition: all .17s ease-in-out; .canvas-depth2-inner{ display: flex; @@ -179,14 +193,17 @@ display: flex; align-items: center; margin-left: auto; + height: 100%; .depth2-btn-box{ display: flex; align-items: center; margin-right: 34px; + height: 100%; button{ position: relative; font-size: 12px; font-weight: 400; + height: 100%; color: #fff; padding-right: 12px; &:after{ @@ -207,7 +224,102 @@ } } &.active{ - transform: translateY(0); + top: 47px; } } + &.active{ + padding-bottom: 50px; + } +} + +// canvas-layout +.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; + 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; + } + } + } + .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%; + } } \ No newline at end of file diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss index dac7edb..2e0ff4d 100644 --- a/src/styles/_layout.scss +++ b/src/styles/_layout.scss @@ -208,4 +208,5 @@ header{ } } } -} \ No newline at end of file +} +