From c024a893cdd8b5fb73a2d0a160b41e26c03a4904 Mon Sep 17 00:00:00 2001 From: minsik Date: Thu, 12 Sep 2024 14:06:36 +0900 Subject: [PATCH 1/5] =?UTF-8?q?-=20modal=20=EB=B2=84=EA=B7=B8=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20-=20CanvasMenu=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/layout.js | 3 +- src/components/floor-plan/CanvasMenu.jsx | 19 ++++--- src/components/floor-plan/FloorPlan.jsx | 27 +++++++--- src/components/floor-plan/MenuDepth01.jsx | 53 +++++++++++-------- .../modal/outerlinesetting/OuterLineWall.jsx | 15 ++---- .../modal/setting01/SettingModal01.jsx | 18 ++----- src/store/modalAtom.js | 14 +++-- 7 files changed, 81 insertions(+), 68 deletions(-) diff --git a/src/app/layout.js b/src/app/layout.js index 4d4a4f21..fd3a242d 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -8,6 +8,7 @@ import { ToastContainer } from 'react-toastify' import './globals.css' import '../styles/style.scss' import Header from '@/components/header/Header' +import QModal from '@/components/common/modal/QModal' const inter = Inter({ subsets: ['latin'] }) @@ -29,7 +30,7 @@ export default function RootLayout({ children }) { - {/**/} + diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index 45896d96..6c53e9ba 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -1,22 +1,20 @@ 'use client' import { useState } from 'react' import MenuDepth01 from './MenuDepth01' -import { useRecoilState } from 'recoil' -import { modalState } from '@/store/modalAtom' import QSelectBox from '@/components/common/select/QSelectBox' import { useMessage } from '@/hooks/useMessage' -export default function CanvasMenu() { - const [modalOption, setModalOption] = useRecoilState(modalState) //modal 열림닫힘 state +export default function CanvasMenu(props) { + const { setShowCanvasSettingModal, showOutlineModal, setShowOutlineModal } = props const [menuNumber, setMenuNumber] = useState(null) const [vertical, setVertical] = useState(true) const { getMessage } = useMessage() const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }] const onClickNav = (number) => { setMenuNumber(number) - if (menuNumber === number) { - setMenuNumber(null) - } + } + const menuProps = { + setShowOutlineModal, } return (
@@ -37,7 +35,8 @@ export default function CanvasMenu() {
  • { - setModalOption({ ...modalOption, outerwall: true }) + if (!showOutlineModal) setShowOutlineModal(true) + // setModalOption({ ...modalOption, outerwall: true }) onClickNav(2) }} > @@ -87,7 +86,7 @@ export default function CanvasMenu() {
    • - +
    @@ -143,7 +142,7 @@ export default function CanvasMenu() {
    - {menuNumber === 2 && } + {menuNumber === 2 && } {menuNumber === 3 && } {menuNumber === 4 && }
    diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx index 1577227d..fd8dfe93 100644 --- a/src/components/floor-plan/FloorPlan.jsx +++ b/src/components/floor-plan/FloorPlan.jsx @@ -4,20 +4,35 @@ import CanvasMenu from '@/components/floor-plan/CanvasMenu' import SettingModal01 from '@/components/floor-plan/modal/setting01/SettingModal01' import CanvasLayout from '@/components/floor-plan/CanvasLayout' import '@/styles/contents.scss' -import { modalState } from '@/store/modalAtom' -import { useRecoilValue } from 'recoil' import OuterLineWall from '@/components/floor-plan/modal/outerlinesetting/OuterLineWall' +import { useState } from 'react' export default function FloorPlan() { - const modalOption = useRecoilValue(modalState) + const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false) + const [showOutlineModal, setShowOutlineModal] = useState(false) + + const canvasSettingProps = { + setShowCanvasSettingModal, + } + + const outlineProps = { + setShowOutlineModal, + } + + const modalProps = { + setShowCanvasSettingModal, + showOutlineModal, + setShowOutlineModal, + } + return ( <>
    - +
    - {modalOption.option && } - {modalOption.outerwall && } + {showCanvasSettingModal && } + {showOutlineModal && }
    diff --git a/src/components/floor-plan/MenuDepth01.jsx b/src/components/floor-plan/MenuDepth01.jsx index ce4bd6a4..08eac1f4 100644 --- a/src/components/floor-plan/MenuDepth01.jsx +++ b/src/components/floor-plan/MenuDepth01.jsx @@ -2,33 +2,42 @@ import { ToggleonMouse } from '@/components/header/Header' import { useMessage } from '@/hooks/useMessage' +import { useEffect, useState } from 'react' -export default function MenuDepth01() { +export default function MenuDepth01(props) { + const { setShowOutlineModal } = props const { getMessage } = useMessage() + const [activeMenu, setActiveMenu] = useState(0) + const onClickMenu = (menuNum) => { + setActiveMenu(menuNum) + setShowOutlineModal(menuNum === 0) + } + + const menus = [ + { id: 0, name: '外壁線を描' }, + { id: 1, name: '補助線を描' }, + { id: 2, name: '屋根形状設定' }, + { id: 3, name: '軒下変更' }, + { id: 4, name: '外壁線の上げ下げ' }, + { id: 5, name: '銅線移動' }, + { id: 6, name: '特殊コーナー形状' }, + ] + + useEffect(() => { + menus.forEach((menu) => { + menu.isActive = menu.id === activeMenu + }) + }, [menus, activeMenu]) return (
      -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    • - -
      • -
    • - -
      • + {menus.map((menu) => { + return ( +
    • + +
      • + ) + })}
    • ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}> diff --git a/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx b/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx index 1ba1c597..b57e2cb0 100644 --- a/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx +++ b/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx @@ -2,25 +2,18 @@ import { useState } from 'react' import WithDraggable from '@/components/common/draggable/withDraggable' -import { modalState } from '@/store/modalAtom' -import { useRecoilState } from 'recoil' import { useMessage } from '@/hooks/useMessage' -export default function OuterLineWall() { - const [modalOption, setModalOption] = useRecoilState(modalState) //modal 열림닫힘 state +export default function OuterLineWall(props) { + const { setShowOutlineModal } = props const [buttonAct, setButtonAct] = useState(1) - const [close, setClose] = useState(false) const { getMessage } = useMessage() const HandleClickClose = () => { - setClose(true) - setTimeout(() => { - setModalOption({ ...modalOption, outerwall: false }) - setClose(false) - }, 180) + setShowOutlineModal(false) } return ( -
      +

      {getMessage('modal.cover.outline.drawing')}

      diff --git a/src/store/modalAtom.js b/src/store/modalAtom.js index 819669a1..a9a708ac 100644 --- a/src/store/modalAtom.js +++ b/src/store/modalAtom.js @@ -2,8 +2,14 @@ import { atom } from 'recoil' export const modalState = atom({ key: 'modalState', - default: { - option: false, - outerwall: false, - }, + default: false, +}) + +export const modalContent = atom({ + key: 'modalContent', + default: ( + <> +
      test
      + + ), }) From 810b8b3b64e9611aa1275656a627fd31b28e67cd Mon Sep 17 00:00:00 2001 From: yoosangwook Date: Thu, 12 Sep 2024 15:39:55 +0900 Subject: [PATCH 2/5] Refactor session code MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 기다리다 내가 먼저 푸시 한다 --- src/app/[locale]/page.js | 6 ++-- src/app/layout.js | 14 +++++--- src/components/Main.jsx | 55 +------------------------------- src/components/header/Header.jsx | 9 ++++-- src/lib/authActions.js | 8 +++++ 5 files changed, 27 insertions(+), 65 deletions(-) diff --git a/src/app/[locale]/page.js b/src/app/[locale]/page.js index bbdcd96d..b45f2690 100644 --- a/src/app/[locale]/page.js +++ b/src/app/[locale]/page.js @@ -1,21 +1,19 @@ import { getSession } from '@/lib/authActions' -import { getCurrentLocale } from '@/locales/server' +// import { getCurrentLocale } from '@/locales/server' import MainPage from '@/components/Main' export default async function page() { const session = await getSession() - const currentLocale = getCurrentLocale() + // const currentLocale = getCurrentLocale() const mainPageProps = { - currentLocale, isLoggedIn: session?.isLoggedIn, } return ( <>
      -

      Main

      diff --git a/src/app/layout.js b/src/app/layout.js index fd3a242d..640dbe11 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -1,15 +1,17 @@ import { Inter } from 'next/font/google' +import { checkSession, getSession } from '@/lib/authActions' import RecoilRootWrapper from './RecoilWrapper' import UIProvider from './UIProvider' import { ToastContainer } from 'react-toastify' -import './globals.css' -import '../styles/style.scss' import Header from '@/components/header/Header' import QModal from '@/components/common/modal/QModal' +import './globals.css' +import '../styles/style.scss' + const inter = Inter({ subsets: ['latin'] }) export const metadata = { @@ -17,14 +19,18 @@ export const metadata = { description: 'Generated by create next app', } -export default function RootLayout({ children }) { +export default async function RootLayout({ children }) { + await checkSession() + const session = await getSession() + console.log('session[layout]:', session) + return ( {/*{headerPathname !== '/login' && }*/}
      -
      +
      {children}
      diff --git a/src/components/Main.jsx b/src/components/Main.jsx index 224ce1ea..4546f32d 100644 --- a/src/components/Main.jsx +++ b/src/components/Main.jsx @@ -1,62 +1,9 @@ 'use client' -import { logout } from '@/lib/authActions' -import { useChangeLocale, useI18n } from '@/locales/client' -import { Button, Chip } from '@nextui-org/react' -import Link from 'next/link' - export default function MainPage(props) { - const { currentLocale, isLoggedIn } = props - const t = useI18n() - const changeLocale = useChangeLocale() - - const handleChangeLocale = () => { - currentLocale === 'ja' ? changeLocale('ko') : changeLocale('ja') - } - - // console.log('MainPage', currentLocale) - - const handleLogout = async () => { - await logout() - } - return ( <> -

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

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

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

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

      Main page

      ) } diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx index f81a0ca7..5335eaab 100644 --- a/src/components/header/Header.jsx +++ b/src/components/header/Header.jsx @@ -1,8 +1,9 @@ 'use client' import Link from 'next/link' -import QSelectBox from '@/components/common/select/QSelectBox' import { usePathname } from 'next/navigation' import { useMessage } from '@/hooks/useMessage' +import QSelectBox from '@/components/common/select/QSelectBox' +import { getSession } from '@/lib/authActions' export const ToggleonMouse = (e, act, target) => { const listWrap = e.target.closest(target) @@ -19,7 +20,9 @@ export const ToggleonMouse = (e, act, target) => { } } -export default function Header() { +export default function Header(props) { + const { loginedUserNm } = props + // console.log('loginedUserNm:', loginedUserNm) const { getMessage } = useMessage() const pathName = usePathname() if (pathName.includes('login') || pathName.includes('join')) { @@ -101,7 +104,7 @@ export default function Header() {
      - +
      diff --git a/src/lib/authActions.js b/src/lib/authActions.js index 06c02ef0..eafddadd 100644 --- a/src/lib/authActions.js +++ b/src/lib/authActions.js @@ -27,6 +27,14 @@ export async function getSession() { return session } +export async function checkSession() { + const session = await getSession() + + if (!session.isLoggedIn) { + redirect('/login') + } +} + export async function setSession(data) { const session = await getSession() From 98680aecf9fe72b1249f38c8b7caa85313920016 Mon Sep 17 00:00:00 2001 From: minsik Date: Thu, 12 Sep 2024 16:21:03 +0900 Subject: [PATCH 3/5] =?UTF-8?q?-=20menu=20link=20=EC=B6=94=EA=B0=80=20-=20?= =?UTF-8?q?modal=20=EC=9C=84=EC=B9=98=EC=88=98=EC=A0=95=20-=20logout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/[locale]/page.js | 3 +-- .../common/draggable/withDraggable.jsx | 8 ++++++-- src/components/floor-plan/MenuDepth01.jsx | 2 +- .../modal/outerlinesetting/OuterLineWall.jsx | 2 +- .../modal/setting01/SettingModal01.jsx | 2 +- src/components/header/Header.jsx | 18 +++++++++++------- src/lib/authActions.js | 4 +--- src/locales/ko.json | 1 + src/styles/_modal.scss | 2 -- 9 files changed, 23 insertions(+), 19 deletions(-) diff --git a/src/app/[locale]/page.js b/src/app/[locale]/page.js index b45f2690..aa5d3f7e 100644 --- a/src/app/[locale]/page.js +++ b/src/app/[locale]/page.js @@ -1,9 +1,8 @@ -import { getSession } from '@/lib/authActions' // import { getCurrentLocale } from '@/locales/server' import MainPage from '@/components/Main' export default async function page() { - const session = await getSession() + // const session = await getSession() // const currentLocale = getCurrentLocale() diff --git a/src/components/common/draggable/withDraggable.jsx b/src/components/common/draggable/withDraggable.jsx index 9f322583..b6c2920b 100644 --- a/src/components/common/draggable/withDraggable.jsx +++ b/src/components/common/draggable/withDraggable.jsx @@ -1,15 +1,19 @@ 'use client' -import { useState } from 'react' +import { useEffect, useState } from 'react' import Draggable from 'react-draggable' -export default function WithDraggable({ isShow, children }) { +export default function WithDraggable({ isShow, children, pos }) { const [position, setPosition] = useState({ x: 0, y: 0 }) const handleOnDrag = (data) => { setPosition({ x: data.x, y: data.y }) } + useEffect(() => { + setPosition({ ...pos }) + }, []) + return ( <> {isShow && ( diff --git a/src/components/floor-plan/MenuDepth01.jsx b/src/components/floor-plan/MenuDepth01.jsx index 08eac1f4..170fd820 100644 --- a/src/components/floor-plan/MenuDepth01.jsx +++ b/src/components/floor-plan/MenuDepth01.jsx @@ -33,7 +33,7 @@ export default function MenuDepth01(props) {
        {menus.map((menu) => { return ( -
      • +
        • ) diff --git a/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx b/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx index b57e2cb0..cd1d2c19 100644 --- a/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx +++ b/src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx @@ -12,7 +12,7 @@ export default function OuterLineWall(props) { setShowOutlineModal(false) } return ( - +

        {getMessage('modal.cover.outline.drawing')}

        diff --git a/src/components/floor-plan/modal/setting01/SettingModal01.jsx b/src/components/floor-plan/modal/setting01/SettingModal01.jsx index c1f2651d..6ce186b7 100644 --- a/src/components/floor-plan/modal/setting01/SettingModal01.jsx +++ b/src/components/floor-plan/modal/setting01/SettingModal01.jsx @@ -12,7 +12,7 @@ export default function SettingModal01(props) { const { getMessage } = useMessage() return ( - +

        {getMessage('modal.canvas.setting')}

        diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx index 5335eaab..5f90a132 100644 --- a/src/components/header/Header.jsx +++ b/src/components/header/Header.jsx @@ -3,7 +3,6 @@ import Link from 'next/link' import { usePathname } from 'next/navigation' import { useMessage } from '@/hooks/useMessage' import QSelectBox from '@/components/common/select/QSelectBox' -import { getSession } from '@/lib/authActions' export const ToggleonMouse = (e, act, target) => { const listWrap = e.target.closest(target) @@ -29,6 +28,9 @@ export default function Header(props) { return null } const SelectOption = [{ name: 'オンライン保証シ' }, { name: 'ステム' }] + const onLogout = () => { + // logout() + } return (
        @@ -44,7 +46,7 @@ export default function Header(props) { onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')} > - {getMessage('header.menus.home')} + {getMessage('header.menus.home')}
      • ToggleonMouse(e, 'add', 'li > ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')} > - {getMessage('header.menus.management.plan')} + {getMessage('header.menus.management.plan')}
      • @@ -81,21 +83,21 @@ export default function Header(props) { onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')} > - {getMessage('header.menus.community.notice')} + {getMessage('header.menus.community.notice')}
    • ToggleonMouse(e, 'add', 'li > ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')} > - {getMessage('header.menus.community.faq')} + {getMessage('header.menus.community.faq')}
    • ToggleonMouse(e, 'add', 'li > ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')} > - {getMessage('header.menus.community.archive')} + {getMessage('header.menus.community.archive')}
    @@ -107,7 +109,9 @@ export default function Header(props) {
    - +
    diff --git a/src/lib/authActions.js b/src/lib/authActions.js index eafddadd..c19ba0f0 100644 --- a/src/lib/authActions.js +++ b/src/lib/authActions.js @@ -4,9 +4,7 @@ import { cookies } from 'next/headers' import { redirect } from 'next/navigation' import { getIronSession } from 'iron-session' - -import { getUserByIdAndPassword } from './user' -import { defaultSession, sessionOptions } from './session' +import { sessionOptions } from './session' export async function logout() { const session = await getSession() diff --git a/src/locales/ko.json b/src/locales/ko.json index cf7d758f..bb7451d3 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -17,6 +17,7 @@ "plan.menu.placement.surface.initial.setting": "배치면 초기 설정", "plan.menu.root.cover": "지붕덮개", "plan.menu.root.cover.outline.drawing": "외벽선 그리기", + "plan.menu.root.cover.auxiliary.line.drawing": "보조선 그리기", "modal.cover.outline.drawing": "외벽선 작성", "modal.cover.outline": "외벽선", "modal.cover.outline.right.angle": "직각", diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index c57e5968..0dd9d68f 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -22,8 +22,6 @@ .modal-pop-wrap { position: fixed; - top: 200px; - right: 100px; width: 100%; min-width: 380px; max-width: fit-content; From ff564e73e51dbf3f68643c54fd67c6be6a0ec6e5 Mon Sep 17 00:00:00 2001 From: minsik Date: Fri, 13 Sep 2024 10:03:58 +0900 Subject: [PATCH 4/5] =?UTF-8?q?-=20Canvas=20=EB=A9=94=EB=89=B4=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/floor-plan/CanvasMenu.jsx | 15 ++- src/components/floor-plan/MenuDepth01.jsx | 27 ++++- src/components/header/Header.jsx | 128 +++++++++++----------- src/locales/ja.json | 14 ++- src/locales/ko.json | 12 +- 5 files changed, 114 insertions(+), 82 deletions(-) diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index 6c53e9ba..2a8bde0d 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -1,5 +1,5 @@ 'use client' -import { useState } from 'react' +import { useEffect, useState } from 'react' import MenuDepth01 from './MenuDepth01' import QSelectBox from '@/components/common/select/QSelectBox' import { useMessage } from '@/hooks/useMessage' @@ -8,14 +8,21 @@ export default function CanvasMenu(props) { const { setShowCanvasSettingModal, showOutlineModal, setShowOutlineModal } = props const [menuNumber, setMenuNumber] = useState(null) const [vertical, setVertical] = useState(true) + const [type, setType] = useState('') const { getMessage } = useMessage() const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }] const onClickNav = (number) => { setMenuNumber(number) + if (number === 2) setType('outline') + if (number === 3) setType('surface') + if (number === 4) setType('module') } const menuProps = { setShowOutlineModal, + type, } + useEffect(() => {}, [menuNumber, type]) + return (
    @@ -42,7 +49,7 @@ export default function CanvasMenu(props) { >
  • onClickNav(3)}> @@ -143,8 +150,8 @@ export default function CanvasMenu(props) {
    • {menuNumber === 2 && } - {menuNumber === 3 && } - {menuNumber === 4 && } + {menuNumber === 3 && } + {menuNumber === 4 && }
    ) diff --git a/src/components/floor-plan/MenuDepth01.jsx b/src/components/floor-plan/MenuDepth01.jsx index 170fd820..1015abd1 100644 --- a/src/components/floor-plan/MenuDepth01.jsx +++ b/src/components/floor-plan/MenuDepth01.jsx @@ -5,7 +5,7 @@ import { useMessage } from '@/hooks/useMessage' import { useEffect, useState } from 'react' export default function MenuDepth01(props) { - const { setShowOutlineModal } = props + const { setShowOutlineModal, type } = props const { getMessage } = useMessage() const [activeMenu, setActiveMenu] = useState(0) const onClickMenu = (menuNum) => { @@ -23,6 +23,27 @@ export default function MenuDepth01(props) { { id: 6, name: '特殊コーナー形状' }, ] + const menuInfo = { + outline: [ + // 지붕덮개 + { id: 0, name: 'plan.menu.roof.cover.outline.drawing' }, + { id: 1, name: 'plan.menu.roof.cover.roof.shape.setting' }, + { id: 2, name: 'plan.menu.roof.cover.roof.shape.edit' }, + { id: 3, name: 'plan.menu.roof.cover.auxiliary.line.drawing' }, + ], + surface: [ + // 배치면 + { id: 0, name: 'plan.menu.placement.surface.drawing' }, + { id: 1, name: 'plan.menu.placement.surface.surface' }, + { id: 2, name: 'plan.menu.placement.surface.object' }, + ], + module: [ + // 모듈, 회로 구성 + { id: 0, name: 'plan.menu.module.circuit.setting.default' }, + { id: 1, name: 'plan.menu.module.circuit.setting.circuit.trestle.setting' }, + ], + } + useEffect(() => { menus.forEach((menu) => { menu.isActive = menu.id === activeMenu @@ -31,10 +52,10 @@ export default function MenuDepth01(props) { return (
      - {menus.map((menu) => { + {menuInfo[type].map((menu) => { return (
    • - +
      • ) })} diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx index 5f90a132..ca5aa2da 100644 --- a/src/components/header/Header.jsx +++ b/src/components/header/Header.jsx @@ -3,6 +3,8 @@ import Link from 'next/link' import { usePathname } from 'next/navigation' import { useMessage } from '@/hooks/useMessage' import QSelectBox from '@/components/common/select/QSelectBox' +import React from 'react' +import { logout } from '@/lib/authActions' export const ToggleonMouse = (e, act, target) => { const listWrap = e.target.closest(target) @@ -21,15 +23,74 @@ export const ToggleonMouse = (e, act, target) => { export default function Header(props) { const { loginedUserNm } = props - // console.log('loginedUserNm:', loginedUserNm) const { getMessage } = useMessage() const pathName = usePathname() + if (pathName.includes('login') || pathName.includes('join')) { return null } const SelectOption = [{ name: 'オンライン保証シ' }, { name: 'ステム' }] const onLogout = () => { - // logout() + logout() + } + const menus = [ + { name: 'header.menus.home', url: '/', children: [] }, + { + name: 'header.menus.management', + url: '', + children: [ + { name: 'header.menus.management.stuff', url: '/management/stuff', children: [] }, + { name: 'header.menus.management.plan', url: '/floor-plan', children: [] }, + ], + }, + { + name: 'header.menus.community', + url: '', + children: [ + { name: 'header.menus.community.notice', url: '/community/notice', children: [] }, + { name: 'header.menus.community.faq', url: '/community/faq', children: [] }, + { name: 'header.menus.community.archive', url: '/community/archive', children: [] }, + ], + }, + ] + + const getMenuTemplate = (menus) => { + return menus.map((menu) => { + return ( +
    • ToggleonMouse(e, 'add', 'nav > ul')} + onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')} + > + {menu.children.length === 0 ? ( + + {getMessage(menu.name)} + + ) : ( + + +
        + {menu.children.map((m) => { + return ( +
      • ToggleonMouse(e, 'add', 'li > ul')} + onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')} + > + + {getMessage(m.name)} + +
        • + ) + })} +
      +       + )} +
      • + ) + }) } return ( @@ -40,68 +101,7 @@ export default function Header(props) {
    diff --git a/src/locales/ja.json b/src/locales/ja.json index f4132734..12ef2163 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -15,8 +15,12 @@ "header.stem": "ステム", "plan.menu.plan.drawing": "도면작성", "plan.menu.placement.surface.initial.setting": "配置面 初期設定", - "plan.menu.root.cover": "지붕덮개", - "plan.menu.root.cover.outline.drawing": "外壁線を描", + "plan.menu.roof.cover": "지붕덮개", + "plan.menu.roof.cover.outline.drawing": "外壁線を描", + "plan.menu.roof.cover.roof.shape.setting": "屋根形状設定", + "plan.menu.roof.cover.roof.shape.edit": "지붕형상 편집", + "plan.menu.roof.cover.auxiliary.line.drawing": "補助線を描", + "plan.menu.roof.cover.roof.surface.alloc": "지붕면 할당", "modal.cover.outline.drawing": "外壁線を描", "modal.cover.outline": "外壁線", "modal.cover.outline.right.angle": "直角", @@ -30,9 +34,9 @@ "modal.cover.outline.rollback": "一変戦に戻る", "modal.cover.outline.remove": "外壁の削除", "modal.cover.outline.select.move": "外壁の選択、移動", - "plan.menu.root.cover.roof.setting": "屋根形状設定", - "plan.menu.root.cover.roof.edit": "지붕형상 편집", - "plan.menu.root.cover.sub.line": "補助線を描", + "plan.menu.roof.cover.roof.setting": "屋根形状設定", + "plan.menu.roof.cover.roof.edit": "지붕형상 편집", + "plan.menu.roof.cover.sub.line": "補助線を描", "plan.menu.placement.surface": "配置面", "plan.menu.placement.surface.drawing": "배치면 그리기", "plan.menu.placement.surface.surface": "면형상 배치", diff --git a/src/locales/ko.json b/src/locales/ko.json index bb7451d3..d65eea13 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -15,9 +15,12 @@ "header.stem": "Stem", "plan.menu.plan.drawing": "도면작성", "plan.menu.placement.surface.initial.setting": "배치면 초기 설정", - "plan.menu.root.cover": "지붕덮개", - "plan.menu.root.cover.outline.drawing": "외벽선 그리기", - "plan.menu.root.cover.auxiliary.line.drawing": "보조선 그리기", + "plan.menu.roof.cover": "지붕덮개", + "plan.menu.roof.cover.outline.drawing": "외벽선 그리기", + "plan.menu.roof.cover.roof.shape.setting": "지붕형상 설정", + "plan.menu.roof.cover.roof.shape.edit": "지붕형상 편집", + "plan.menu.roof.cover.auxiliary.line.drawing": "보조선 그리기", + "plan.menu.roof.cover.roof.surface.alloc": "지붕면 할당", "modal.cover.outline.drawing": "외벽선 작성", "modal.cover.outline": "외벽선", "modal.cover.outline.right.angle": "직각", @@ -31,9 +34,6 @@ "modal.cover.outline.rollback": "일변전으로 돌아가기", "modal.cover.outline.remove": "외벽 제거", "modal.cover.outline.select.move": "외벽 선택, 이동", - "plan.menu.root.cover.roof.setting": "지붕형상 설정", - "plan.menu.root.cover.roof.edit": "지붕형상 편집", - "plan.menu.root.cover.sub.line": "보조선 그리기", "plan.menu.placement.surface": "배치면", "plan.menu.placement.surface.drawing": "배치면 그리기", "plan.menu.placement.surface.surface": "면형상 배치", From fda37ff58a14b2304393c955c4b3e790e32fd98b Mon Sep 17 00:00:00 2001 From: yoosangwook Date: Fri, 13 Sep 2024 13:00:51 +0900 Subject: [PATCH 5/5] refactor: Refactoring router structure --- src/app/QcastProvider.js | 35 +++++++ src/app/[locale]/page.js | 6 +- src/app/community/archive/page.jsx | 16 +++ src/app/community/faq/page.jsx | 16 +++ src/app/community/notice/page.jsx | 16 +++ src/app/floor-plan/page.jsx | 9 ++ src/app/initSettingsModal/page.jsx | 16 +++ src/app/intro/page.jsx | 14 +++ src/app/join/complete/page.jsx | 19 ++++ src/app/join/page.jsx | 5 + src/app/layout.js | 18 +++- src/app/login/page.jsx | 9 ++ src/app/management/plan/page.jsx | 16 +++ src/app/management/stuff/detail/page.jsx | 15 +++ src/app/management/stuff/page.jsx | 21 ++++ src/app/master/company/page.jsx | 16 +++ src/app/master/price/page.jsx | 16 +++ src/app/page.js | 17 ++- src/app/playground/page.jsx | 17 +++ src/app/roof/page.jsx | 16 +++ src/app/roof2/RoofSelect.jsx | 128 +++++++++++++++++++++++ src/app/roof2/page.jsx | 26 +++++ src/app/settings/page.jsx | 16 +++ src/components/auth/Login.jsx | 6 +- src/components/header/Header.jsx | 97 +++++++++-------- src/components/ui/Loading.jsx | 5 + src/components/ui/Loading.module.css | 35 +++++++ src/hooks/useAxios.js | 6 +- src/lib/authActions.js | 7 +- src/middleware.js | 36 +++---- 30 files changed, 592 insertions(+), 83 deletions(-) create mode 100644 src/app/QcastProvider.js create mode 100644 src/app/community/archive/page.jsx create mode 100644 src/app/community/faq/page.jsx create mode 100644 src/app/community/notice/page.jsx create mode 100644 src/app/floor-plan/page.jsx create mode 100644 src/app/initSettingsModal/page.jsx create mode 100644 src/app/intro/page.jsx create mode 100644 src/app/join/complete/page.jsx create mode 100644 src/app/join/page.jsx create mode 100644 src/app/login/page.jsx create mode 100644 src/app/management/plan/page.jsx create mode 100644 src/app/management/stuff/detail/page.jsx create mode 100644 src/app/management/stuff/page.jsx create mode 100644 src/app/master/company/page.jsx create mode 100644 src/app/master/price/page.jsx create mode 100644 src/app/playground/page.jsx create mode 100644 src/app/roof/page.jsx create mode 100644 src/app/roof2/RoofSelect.jsx create mode 100644 src/app/roof2/page.jsx create mode 100644 src/app/settings/page.jsx create mode 100644 src/components/ui/Loading.jsx create mode 100644 src/components/ui/Loading.module.css diff --git a/src/app/QcastProvider.js b/src/app/QcastProvider.js new file mode 100644 index 00000000..f9431eb6 --- /dev/null +++ b/src/app/QcastProvider.js @@ -0,0 +1,35 @@ +'use client' + +import { useEffect } from 'react' +import { useRecoilState, useRecoilValue } from 'recoil' +import { appMessageStore, globalLocaleStore } from '@/store/localeAtom' +import { ErrorBoundary } from 'next/dist/client/components/error-boundary' +import ServerError from './error' + +import '@/styles/common.scss' + +import KO from '@/locales/ko.json' +import JA from '@/locales/ja.json' + +export const QcastProvider = ({ children }) => { + const globalLocale = useRecoilValue(globalLocaleStore) + const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore) + + useEffect(() => { + console.log(sessionStorage.getItem('hi')) + console.log(Object.keys(appMessageState).length) + // if (Object.keys(appMessageState).length === 0) { + if (globalLocale === 'ko') { + setAppMessageState(KO) + } else { + setAppMessageState(JA) + } + // } + }, [globalLocale]) + + return ( + <> + }>{children} + + ) +} diff --git a/src/app/[locale]/page.js b/src/app/[locale]/page.js index aa5d3f7e..1b8f2258 100644 --- a/src/app/[locale]/page.js +++ b/src/app/[locale]/page.js @@ -1,10 +1,8 @@ -// import { getCurrentLocale } from '@/locales/server' +import { getSession } from '@/lib/authActions' import MainPage from '@/components/Main' export default async function page() { - // const session = await getSession() - - // const currentLocale = getCurrentLocale() + const session = await getSession() const mainPageProps = { isLoggedIn: session?.isLoggedIn, diff --git a/src/app/community/archive/page.jsx b/src/app/community/archive/page.jsx new file mode 100644 index 00000000..6917f228 --- /dev/null +++ b/src/app/community/archive/page.jsx @@ -0,0 +1,16 @@ +import Hero from '@/components/Hero' +import Archive from '@/components/community/Archive' +import { initCheck } from '@/util/session-util' + +export default async function CommunityArchivePage() { + await initCheck() + + return ( + <> + +
    + +
    + + ) +} diff --git a/src/app/community/faq/page.jsx b/src/app/community/faq/page.jsx new file mode 100644 index 00000000..2b9d5452 --- /dev/null +++ b/src/app/community/faq/page.jsx @@ -0,0 +1,16 @@ +import Hero from '@/components/Hero' +import Faq from '@/components/community/Faq' +import { initCheck } from '@/util/session-util' + +export default async function CommunityFaqPage() { + await initCheck() + + return ( + <> + +
    + +
    + + ) +} diff --git a/src/app/community/notice/page.jsx b/src/app/community/notice/page.jsx new file mode 100644 index 00000000..d2157b20 --- /dev/null +++ b/src/app/community/notice/page.jsx @@ -0,0 +1,16 @@ +import Hero from '@/components/Hero' +import Notice from '@/components/community/Notice' +import { initCheck } from '@/util/session-util' + +export default async function CommunityNoticePage() { + await initCheck() + + return ( + <> + +
    + +
    + + ) +} diff --git a/src/app/floor-plan/page.jsx b/src/app/floor-plan/page.jsx new file mode 100644 index 00000000..f503099e --- /dev/null +++ b/src/app/floor-plan/page.jsx @@ -0,0 +1,9 @@ +import FloorPlan from '@/components/floor-plan/FloorPlan' + +export default function FloorPlanPage() { + return ( + <> + + + ) +} diff --git a/src/app/initSettingsModal/page.jsx b/src/app/initSettingsModal/page.jsx new file mode 100644 index 00000000..a081ef47 --- /dev/null +++ b/src/app/initSettingsModal/page.jsx @@ -0,0 +1,16 @@ +import Hero from '@/components/Hero' +import InitSettingsModal from '@/components/InitSettingsModal' +import { initCheck } from '@/util/session-util' + +export default async function InitSettingsModalPage() { + await initCheck() + + return ( + <> + +
    + +
    + + ) +} diff --git a/src/app/intro/page.jsx b/src/app/intro/page.jsx new file mode 100644 index 00000000..8d560ce5 --- /dev/null +++ b/src/app/intro/page.jsx @@ -0,0 +1,14 @@ +import Intro from '@/components/Intro' +import { initCheck } from '@/util/session-util' + +export default async function IntroPage() { + await initCheck() + + return ( + <> +
    + +
    + + ) +} diff --git a/src/app/join/complete/page.jsx b/src/app/join/complete/page.jsx new file mode 100644 index 00000000..3f9fc462 --- /dev/null +++ b/src/app/join/complete/page.jsx @@ -0,0 +1,19 @@ +'use client' + +import { useMessage } from '@/hooks/useMessage' + +export default function CompletePage() { + const { getMessage } = useMessage() + + return ( + <> +
    +

    {getMessage('join.complete.title')}

    +
    {getMessage('join.complete.contents')}
    +
    + {getMessage('join.complete.email_comment')} : {getMessage('join.complete.email')} +
    +
    + + ) +} diff --git a/src/app/join/page.jsx b/src/app/join/page.jsx new file mode 100644 index 00000000..118a25b4 --- /dev/null +++ b/src/app/join/page.jsx @@ -0,0 +1,5 @@ +import Join from '@/components/auth/Join' + +export default function JoinPage() { + return <>{} +} diff --git a/src/app/layout.js b/src/app/layout.js index 640dbe11..c3ac72de 100644 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -1,6 +1,8 @@ import { Inter } from 'next/font/google' -import { checkSession, getSession } from '@/lib/authActions' +import { headers } from 'next/headers' +import { redirect } from 'next/navigation' +import { getSession } from '@/lib/authActions' import RecoilRootWrapper from './RecoilWrapper' import UIProvider from './UIProvider' @@ -11,6 +13,7 @@ import QModal from '@/components/common/modal/QModal' import './globals.css' import '../styles/style.scss' +import { QcastProvider } from './QcastProvider' const inter = Inter({ subsets: ['latin'] }) @@ -20,9 +23,16 @@ export const metadata = { } export default async function RootLayout({ children }) { - await checkSession() + const headersList = headers() + const headerPathname = headersList.get('x-pathname') || '' + + // console.log('headerPathname:', headerPathname) + // const isLoggedIn = await checkSession() const session = await getSession() console.log('session[layout]:', session) + if (!headerPathname.includes('/login') && !session.isLoggedIn) { + redirect('/login') + } return ( @@ -32,7 +42,9 @@ export default async function RootLayout({ children }) {
    - {children} + + {children} +
    diff --git a/src/app/login/page.jsx b/src/app/login/page.jsx new file mode 100644 index 00000000..0686da2e --- /dev/null +++ b/src/app/login/page.jsx @@ -0,0 +1,9 @@ +import Login from '@/components/auth/Login' + +export default function LoginPage() { + return ( + <> + + + ) +} diff --git a/src/app/management/plan/page.jsx b/src/app/management/plan/page.jsx new file mode 100644 index 00000000..5fefa62a --- /dev/null +++ b/src/app/management/plan/page.jsx @@ -0,0 +1,16 @@ +import Hero from '@/components/Hero' +import Plan from '@/components/management/Plan' +import { initCheck } from '@/util/session-util' + +export default async function ManagementPlanPage() { + await initCheck() + + return ( + <> + +
    + +
    + + ) +} diff --git a/src/app/management/stuff/detail/page.jsx b/src/app/management/stuff/detail/page.jsx new file mode 100644 index 00000000..8b84287a --- /dev/null +++ b/src/app/management/stuff/detail/page.jsx @@ -0,0 +1,15 @@ +import React from 'react' +import Hero from '@/components/Hero' +import StuffDetail from '@/components/management/StuffDetail' +export default function ManagementStuffDetailPage() { + return ( + <> +
    +

    물건정보

    +
    +
    + +
    + + ) +} diff --git a/src/app/management/stuff/page.jsx b/src/app/management/stuff/page.jsx new file mode 100644 index 00000000..7590a7cf --- /dev/null +++ b/src/app/management/stuff/page.jsx @@ -0,0 +1,21 @@ +import StuffSearchCondition from '@/components/management/StuffSearchCondition' +import Stuff from '@/components/management/Stuff' +import { initCheck } from '@/util/session-util' +import Hero from '@/components/Hero' +export default async function ManagementStuffPage() { + await initCheck() + + return ( + <> + +
    +
    + +
    +
    +
    + +
    + + ) +} diff --git a/src/app/master/company/page.jsx b/src/app/master/company/page.jsx new file mode 100644 index 00000000..15eda41c --- /dev/null +++ b/src/app/master/company/page.jsx @@ -0,0 +1,16 @@ +import Hero from '@/components/Hero' +import Company from '@/components/master/Company' +import { initCheck } from '@/util/session-util' + +export default async function MasterCompanyPage() { + await initCheck() + + return ( + <> + +
    + +
    + + ) +} diff --git a/src/app/master/price/page.jsx b/src/app/master/price/page.jsx new file mode 100644 index 00000000..a641d6bb --- /dev/null +++ b/src/app/master/price/page.jsx @@ -0,0 +1,16 @@ +import Hero from '@/components/Hero' +import Price from '@/components/master/Price' +import { initCheck } from '@/util/session-util' + +export default async function MasterPricePage() { + await initCheck() + + return ( + <> + +
    + +
    + + ) +} diff --git a/src/app/page.js b/src/app/page.js index 9c905040..25cd8640 100644 --- a/src/app/page.js +++ b/src/app/page.js @@ -1,5 +1,16 @@ -import Main from '@/components/Main' +import MainPage from '@/components/Main' +import { getSession } from '@/lib/authActions' -export default function Home() { - return
    +export default async function Home() { + const session = await getSession() + + const mainPageProps = { + isLoggedIn: session?.isLoggedIn, + } + + return ( + <> + + + ) } diff --git a/src/app/playground/page.jsx b/src/app/playground/page.jsx new file mode 100644 index 00000000..66d83c34 --- /dev/null +++ b/src/app/playground/page.jsx @@ -0,0 +1,17 @@ +import Playground from '@/components/Playground' +import { initCheck } from '@/util/session-util' + +export default async function PlaygroundPage() { + // const { session } = await checkSession() + + // if (!session.isLoggedIn) { + // redirect('/login') + // } + await initCheck() + + return ( + <> + + + ) +} diff --git a/src/app/roof/page.jsx b/src/app/roof/page.jsx new file mode 100644 index 00000000..f5b8e611 --- /dev/null +++ b/src/app/roof/page.jsx @@ -0,0 +1,16 @@ +import Hero from '@/components/Hero' +import Roof from '@/components/Roof' +import { initCheck } from '@/util/session-util' + +export default async function RoofPage() { + await initCheck() + + return ( + <> + +
    + +
    + + ) +} diff --git a/src/app/roof2/RoofSelect.jsx b/src/app/roof2/RoofSelect.jsx new file mode 100644 index 00000000..d759398b --- /dev/null +++ b/src/app/roof2/RoofSelect.jsx @@ -0,0 +1,128 @@ +'use client' + +import { Select, SelectItem } from '@nextui-org/react' +import { useEffect, useState } from 'react' +import { useAxios } from '@/hooks/useAxios' + +export default function RoofSelect() { + const [roofMaterials, setRoofMaterials] = useState([]) + const [manufacturers, setManufacturers] = useState([]) + const [trestles, setTrestles] = useState([]) + const [modules, setModules] = useState([]) + const [originTrestles, setOriginTrestles] = useState([]) + + const [roofMaterialId, setRoofMaterialId] = useState(null) + const [manufacturerId, setManufacturerId] = useState(null) + const [trestleId, setTrestleId] = useState(null) + + const { get } = useAxios() + + useEffect(() => { + get({ url: '/api/roof-material/roof-material-infos' }).then((res) => { + //TODO: error handling + if (!res) return + + setRoofMaterials(res) + }) + }, []) + + useEffect(() => { + if (!roofMaterialId) { + return + } + + get({ url: `/api/roof-material/roof-material-infos/${roofMaterialId}/trestles` }).then((res) => { + if (res.length === 0) { + return + } + setOriginTrestles(res) + const manufactural = res.map((trestle) => { + return { id: trestle.manufacturerId, name: trestle.manufacturerName } + }) + // Remove duplicates + const uniqueManufactural = Array.from(new Set(manufactural.map((a) => a.id))).map((id) => { + return manufactural.find((a) => a.id === id) + }) + + setManufacturers(uniqueManufactural) + }) + }, [roofMaterialId]) + + useEffect(() => { + if (!manufacturerId) { + return + } + + const trestles = originTrestles.filter((trestle) => trestle.manufacturerId === manufacturerId) + setTrestles(trestles) + }, [manufacturerId]) + + useEffect(() => { + if (!trestleId) { + return + } + get({ url: `/api/module/module-infos?roofMaterialId=${roofMaterialId}&trestleId=${trestleId}` }).then((res) => { + if (res.length === 0) { + return + } + setModules(res) + }) + }, [trestleId]) + + const handleRoofMaterialOnChange = (e) => { + const roofMaterialId = e.target.value + setRoofMaterialId(roofMaterialId) + setManufacturers([]) + setManufacturerId(null) + setTrestleId(null) + setTrestles([]) + setModules([]) + } + + const handleManufacturersOnChange = (e) => { + const manufacturerId = Number(e.target.value) + setTrestles([]) + setManufacturerId(manufacturerId) + setTrestleId(null) + setModules([]) + } + + const handleTrestlesOnChange = (e) => { + const trestleId = Number(e.target.value) + setTrestleId(trestleId) + setModules([]) + } + + return ( +
    + {roofMaterials.length > 0 && ( + + )} + {manufacturers.length > 0 && ( + + )} + {trestles.length > 0 && ( + + )} + {modules.length > 0 && ( + + )} +
    + ) +} diff --git a/src/app/roof2/page.jsx b/src/app/roof2/page.jsx new file mode 100644 index 00000000..72881d11 --- /dev/null +++ b/src/app/roof2/page.jsx @@ -0,0 +1,26 @@ +import Roof2 from '@/components/Roof2' +import RoofSelect from '@/app/[locale]/roof2/RoofSelect' +import { initCheck } from '@/util/session-util' + +export default async function Roof2Page() { + const session = await initCheck() + const roof2Props = { + name: session.name || '', + userId: session.userId || '', + email: session.email || '', + isLoggedIn: session.isLoggedIn, + } + + return ( + <> +
    +
    + +
    +
    +
    + +
    + + ) +} diff --git a/src/app/settings/page.jsx b/src/app/settings/page.jsx new file mode 100644 index 00000000..797c024c --- /dev/null +++ b/src/app/settings/page.jsx @@ -0,0 +1,16 @@ +import Hero from '@/components/Hero' +import Settings from '@/components/Settings' +import { initCheck } from '@/util/session-util' + +export default async function SettingsPage() { + await initCheck() + + return ( + <> + +
    + +
    + + ) +} diff --git a/src/components/auth/Login.jsx b/src/components/auth/Login.jsx index 44d163a0..326f5720 100644 --- a/src/components/auth/Login.jsx +++ b/src/components/auth/Login.jsx @@ -1,6 +1,7 @@ 'use client' -import { post, patch } from '@/lib/Axios' +import { useState } from 'react' +import { useAxios } from '@/hooks/useAxios' import { setSession } from '@/lib/authActions' import { redirect } from 'next/navigation' import { useMessage } from '@/hooks/useMessage' @@ -9,9 +10,10 @@ import { Button, Switch } from '@nextui-org/react' import { useRecoilState } from 'recoil' import { globalLocaleStore } from '@/store/localeAtom' import { modalContent, modalState } from '@/store/modalAtom' -import { useState } from 'react' export default function Login(props) { + const { patch } = useAxios() + const { currentLocale } = props const { getMessage } = useMessage() const [globalLocaleState, setGlbalLocaleState] = useRecoilState(globalLocaleStore) diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx index ca5aa2da..b716cbdd 100644 --- a/src/components/header/Header.jsx +++ b/src/components/header/Header.jsx @@ -1,11 +1,12 @@ 'use client' +import { Fragment } from 'react' import Link from 'next/link' -import { usePathname } from 'next/navigation' +import { usePathname, useRouter } from 'next/navigation' import { useMessage } from '@/hooks/useMessage' -import QSelectBox from '@/components/common/select/QSelectBox' -import React from 'react' import { logout } from '@/lib/authActions' +import QSelectBox from '@/components/common/select/QSelectBox' + export const ToggleonMouse = (e, act, target) => { const listWrap = e.target.closest(target) const ListItem = Array.from(listWrap.childNodes) @@ -25,31 +26,29 @@ export default function Header(props) { const { loginedUserNm } = props const { getMessage } = useMessage() const pathName = usePathname() - - if (pathName.includes('login') || pathName.includes('join')) { - return null - } + // if (pathName.includes('login') || pathName.includes('join')) { + // return null + // } const SelectOption = [{ name: 'オンライン保証シ' }, { name: 'ステム' }] - const onLogout = () => { - logout() - } const menus = [ - { name: 'header.menus.home', url: '/', children: [] }, + { id: 0, name: 'header.menus.home', url: '/', children: [] }, { + id: 1, name: 'header.menus.management', url: '', children: [ - { name: 'header.menus.management.stuff', url: '/management/stuff', children: [] }, - { name: 'header.menus.management.plan', url: '/floor-plan', children: [] }, + { id: 3, name: 'header.menus.management.stuff', url: '/management/stuff', children: [] }, + { id: 4, name: 'header.menus.management.plan', url: '/floor-plan', children: [] }, ], }, { + id: 2, name: 'header.menus.community', url: '', children: [ - { name: 'header.menus.community.notice', url: '/community/notice', children: [] }, - { name: 'header.menus.community.faq', url: '/community/faq', children: [] }, - { name: 'header.menus.community.archive', url: '/community/archive', children: [] }, + { id: 5, name: 'header.menus.community.notice', url: '/community/notice', children: [] }, + { id: 6, name: 'header.menus.community.faq', url: '/community/faq', children: [] }, + { id: 7, name: 'header.menus.community.archive', url: '/community/archive', children: [] }, ], }, ] @@ -58,35 +57,33 @@ export default function Header(props) { return menus.map((menu) => { return (
  • ToggleonMouse(e, 'add', 'nav > ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')} > {menu.children.length === 0 ? ( - + {getMessage(menu.name)} ) : ( - +
      {menu.children.map((m) => { return (
    • ToggleonMouse(e, 'add', 'li > ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')} > - - {getMessage(m.name)} - + {getMessage(m.name)}
      • ) })}
    -     + )}
    • ) @@ -94,33 +91,35 @@ export default function Header(props) { } return ( -
    -
    -
    -

    - -

    - -
    -
    -
    - + !(pathName.includes('login') || pathName.includes('join')) && ( +
    +
    +
    +

    + +

    +
    -
    - -
    -
    - -
    -
    - +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    -
    -
    +
    + ) ) } diff --git a/src/components/ui/Loading.jsx b/src/components/ui/Loading.jsx new file mode 100644 index 00000000..59d2170b --- /dev/null +++ b/src/components/ui/Loading.jsx @@ -0,0 +1,5 @@ +import style from '@/components/ui/Loading.module.css' + +export default function Loading() { + return +} diff --git a/src/components/ui/Loading.module.css b/src/components/ui/Loading.module.css new file mode 100644 index 00000000..7b3001f8 --- /dev/null +++ b/src/components/ui/Loading.module.css @@ -0,0 +1,35 @@ +.loader { + position: relative; + font-size: 48px; + letter-spacing: 6px; +} +.loader:before { + content: 'Loading'; + color: #fff; +} +.loader:after { + content: ''; + width: 20px; + height: 20px; + background-color: #ff3d00; + background-image: radial-gradient(circle 2px, #fff4 100%, transparent 0), radial-gradient(circle 1px, #fff3 100%, transparent 0); + background-position: + 14px -4px, + 12px -1px; + border-radius: 50%; + position: absolute; + margin: auto; + top: -5px; + right: 66px; + transform-origin: center bottom; + animation: fillBaloon 1s ease-in-out infinite alternate; +} + +@keyframes fillBaloon { + 0% { + transform: scale(1); + } + 100% { + transform: scale(3); + } +} diff --git a/src/hooks/useAxios.js b/src/hooks/useAxios.js index 4c7be165..d06d3a2e 100644 --- a/src/hooks/useAxios.js +++ b/src/hooks/useAxios.js @@ -38,6 +38,10 @@ export function useAxios() { .catch(console.error) } + const promiseGet = async ({ url }) => { + return await getInstances(url).get(url) + } + const post = async ({ url, data }) => { return await getInstances(url) .post(url, data) @@ -70,5 +74,5 @@ export function useAxios() { .catch(console.error) } - return { get, post, promisePost, put, patch, del } + return { get, promiseGet, post, promisePost, put, patch, del } } diff --git a/src/lib/authActions.js b/src/lib/authActions.js index c19ba0f0..d3f5aaf3 100644 --- a/src/lib/authActions.js +++ b/src/lib/authActions.js @@ -28,9 +28,10 @@ export async function getSession() { export async function checkSession() { const session = await getSession() - if (!session.isLoggedIn) { - redirect('/login') - } + // if (!session.isLoggedIn) { + // redirect('/login') + // } + return session.isLoggedIn } export async function setSession(data) { diff --git a/src/middleware.js b/src/middleware.js index f93c0506..c9e6811c 100644 --- a/src/middleware.js +++ b/src/middleware.js @@ -1,27 +1,27 @@ -import { createI18nMiddleware } from 'next-international/middleware' +// import { createI18nMiddleware } from 'next-international/middleware' -const I18nMiddleware = createI18nMiddleware({ - locales: ['ko', 'ja'], - defaultLocale: 'ko', -}) +// const I18nMiddleware = createI18nMiddleware({ +// locales: ['ko', 'ja'], +// defaultLocale: 'ko', +// }) -export function middleware(request) { - return I18nMiddleware(request) -} +// export function middleware(request) { +// return I18nMiddleware(request) +// } export const config = { matcher: ['/((?!api|static|.*\\..*|_next|favicon.ico|robots.txt).*)'], } -// import { NextRequest, NextResponse } from 'next/server' +import { NextRequest, NextResponse } from 'next/server' -// export function middleware(request) { -// const requestHeaders = new Headers(request.headers) -// requestHeaders.set('x-pathname', request.nextUrl.pathname) +export function middleware(request) { + const requestHeaders = new Headers(request.headers) + requestHeaders.set('x-pathname', request.nextUrl.pathname) -// return NextResponse.next({ -// request: { -// headers: requestHeaders, -// }, -// }) -// } + return NextResponse.next({ + request: { + headers: requestHeaders, + }, + }) +}