From ffc758c001b50216f02c3ad254078bf03d5ed107 Mon Sep 17 00:00:00 2001 From: minsik Date: Mon, 9 Sep 2024 14:32:09 +0900 Subject: [PATCH] =?UTF-8?q?-=20FloorPlan=20Page=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/[locale]/floor-plan/page.jsx | 8 +- src/app/[locale]/layout.js | 1 + src/app/layout.js | 11 +- src/components/Main.jsx | 28 +++--- src/components/common/select/QSelect.jsx | 20 ++++ src/components/floor-plan/CanvasFrame.jsx | 7 ++ src/components/floor-plan/CanvasLayout.jsx | 45 +++++++++ src/components/floor-plan/CanvasMenu.jsx | 84 ++++++++++++++++ src/components/floor-plan/FloorPlan.jsx | 10 +- src/components/floor-plan/MenuDepth01.jsx | 44 ++++++++ src/components/header/Header.jsx | 111 +++++++++++++++++++++ 11 files changed, 349 insertions(+), 20 deletions(-) create mode 100644 src/components/common/select/QSelect.jsx create mode 100644 src/components/floor-plan/CanvasFrame.jsx create mode 100644 src/components/floor-plan/CanvasLayout.jsx create mode 100644 src/components/floor-plan/CanvasMenu.jsx create mode 100644 src/components/floor-plan/MenuDepth01.jsx create mode 100644 src/components/header/Header.jsx diff --git a/src/app/[locale]/floor-plan/page.jsx b/src/app/[locale]/floor-plan/page.jsx index 7ca0fc3e..f503099e 100644 --- a/src/app/[locale]/floor-plan/page.jsx +++ b/src/app/[locale]/floor-plan/page.jsx @@ -1,5 +1,9 @@ import FloorPlan from '@/components/floor-plan/FloorPlan' -export default function floorPlanPage() { - return +export default function FloorPlanPage() { + return ( + <> + + + ) } diff --git a/src/app/[locale]/layout.js b/src/app/[locale]/layout.js index 71410d17..334cfbb3 100644 --- a/src/app/[locale]/layout.js +++ b/src/app/[locale]/layout.js @@ -4,6 +4,7 @@ import { useCurrentLocale } from '@/locales/client' import { LocaleProvider } from './LocaleProvider' import ServerError from './error' import { ErrorBoundary } from 'next/dist/client/components/error-boundary' +import '@/styles/common.scss' export default function LocaleLayout({ children }) { const locale = useCurrentLocale() diff --git a/src/app/layout.js b/src/app/layout.js index 72ac7bf3..be0cad1a 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -3,13 +3,13 @@ import { Inter } from 'next/font/google' import RecoilRootWrapper from './RecoilWrapper' import UIProvider from './UIProvider' import { headers } from 'next/headers' -import Headers from '@/components/Headers' import { ToastContainer } from 'react-toastify' import QModal from '@/components/common/modal/QModal' import './globals.css' import '../styles/style.scss' +import Header from '@/components/header/Header' const inter = Inter({ subsets: ['latin'] }) @@ -26,9 +26,14 @@ export default function RootLayout({ children }) { return ( - {headerPathname !== '/login' && } + {/*{headerPathname !== '/login' && }*/} - {children} +
+
+
+ {children} +
+
diff --git a/src/components/Main.jsx b/src/components/Main.jsx index 554c7e8b..5b915a2f 100644 --- a/src/components/Main.jsx +++ b/src/components/Main.jsx @@ -21,20 +21,20 @@ export default function MainPage(props) { return ( <> -

{t('locale', { locale: {currentLocale} })}

-
{t('hello')}
-
{t('welcome', { name: '효준' })}
-
- -
- {isLoggedIn && ( -
- -
- )} -
font-test
+ {/*

{t('locale', { locale: {currentLocale} })}

*/} + {/*
{t('hello')}
*/} + {/*
{t('welcome', { name: '효준' })}
*/} + {/*
*/} + {/* */} + {/*
*/} + {/*{isLoggedIn && (*/} + {/*
*/} + {/* */} + {/*
*/} + {/*)}*/} + {/*
font-test
*/} ) } diff --git a/src/components/common/select/QSelect.jsx b/src/components/common/select/QSelect.jsx new file mode 100644 index 00000000..82315d2c --- /dev/null +++ b/src/components/common/select/QSelect.jsx @@ -0,0 +1,20 @@ +'use client' +import { useState } from 'react' + +export default function QSelect({ title, option }) { + const [selectAct, setSelectAct] = useState(false) + + return ( +
setSelectAct(!selectAct)}> +

{title}

+
    + {option.map((el, idx) => ( +
  • + +
    • + ))} + s +
+
+ ) +} diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx new file mode 100644 index 00000000..5923888f --- /dev/null +++ b/src/components/floor-plan/CanvasFrame.jsx @@ -0,0 +1,7 @@ +export default function CanvasFrame () { + return( +
+ +
+ ) +} \ No newline at end of file diff --git a/src/components/floor-plan/CanvasLayout.jsx b/src/components/floor-plan/CanvasLayout.jsx new file mode 100644 index 00000000..5be6a114 --- /dev/null +++ b/src/components/floor-plan/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/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx new file mode 100644 index 00000000..a68a7e66 --- /dev/null +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -0,0 +1,84 @@ +'use client' +import { useState } from 'react' +import QSelect from '@/components/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 ( +
+
+
    +
  • onClickNav(1)}> + +
    • +
  • onClickNav(2)}> + +
    • +
  • onClickNav(3)}> + +
    • +
  • onClickNav(4)}> + +
    • +
  • onClickNav(5)}> + +
    • +
  • onClickNav(6)}> + +
    • +
+
+
+ +
+
+ + + + + + +
+
+ + 100% + +
+
+ + + +
+
+
+
+ {menuNumber === 1 && } + {menuNumber === 2 && } + {menuNumber === 3 && } + {menuNumber === 4 && } + {menuNumber === 5 && } + {menuNumber === 6 && } +
+
+ ) +} diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx index 27e03cf6..3f1d58f3 100644 --- a/src/components/floor-plan/FloorPlan.jsx +++ b/src/components/floor-plan/FloorPlan.jsx @@ -1,7 +1,15 @@ +import CanvasMenu from '@/components/floor-plan/CanvasMenu' +import CanvasLayout from '@/components/floor-plan/CanvasLayout' + export default function FloorPlan() { return ( <> -

도면 작성 페이지

+
+ +
+ +
+
) } diff --git a/src/components/floor-plan/MenuDepth01.jsx b/src/components/floor-plan/MenuDepth01.jsx new file mode 100644 index 00000000..90ba4e60 --- /dev/null +++ b/src/components/floor-plan/MenuDepth01.jsx @@ -0,0 +1,44 @@ +'use client' + +import { ToggleonMouse } from '@/components/header/Header' + +export default function MenuDepth01() { + return ( +
+
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+
    +
  • ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}> + +
    • +
  • ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}> + +
    • +
  • ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}> + +
    • +
+
+ ) +} diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx new file mode 100644 index 00000000..db4b00f5 --- /dev/null +++ b/src/components/header/Header.jsx @@ -0,0 +1,111 @@ +'use client' +import Link from 'next/link' +import QSelect from '@/components/common/select/QSelect' + +export const ToggleonMouse = (e, act, target) => { + const listWrap = e.target.closest(target) + const ListItem = Array.from(listWrap.childNodes) + ListItem.forEach((el) => { + if (act === 'add') { + el.classList.add('mouse') + } else { + el.classList.remove('mouse') + } + }) + if (act === 'add') { + e.target.parentElement.classList.remove('mouse') + } +} + +export default function Header() { + const SelectOption = [{ name: 'オンライン保証シ' }, { name: 'ステム' }] + return ( +
+
+
+

+ +

+ +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+ ) +}