Merge branch 'qcast-pub' into dev

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 (
+    <>
+      <ErrorBoundary fallback={<ServerError />}>{children}</ErrorBoundary>
+    </>
+  )
+}

src/app/[locale]/page.js

@@ -1,21 +1,16 @@
 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 currentLocale = getCurrentLocale()
-
   const mainPageProps = {
-    currentLocale,
     isLoggedIn: session?.isLoggedIn,
   }
 
   return (
     <>
       <div className="m-4">
-        <h3>Main</h3>
         <MainPage {...mainPageProps} />
       </div>
     </>

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 (
+    <>
+      <Hero title="자료 다운로드" />
+      <div className="container flex flex-wrap items-center justify-between mx-auto p-4 m-4 border">
+        <Archive />
+      </div>
+    </>
+  )
+}

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 (
+    <>
+      <Hero title="FAQ" />
+      <div className="container flex flex-wrap items-center justify-between mx-auto p-4 m-4 border">
+        <Faq />
+      </div>
+    </>
+  )
+}

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 (
+    <>
+      <Hero title="공지사항" />
+      <div className="container flex flex-wrap items-center justify-between mx-auto p-4 m-4 border">
+        <Notice />
+      </div>
+    </>
+  )
+}

src/app/floor-plan/page.jsx

@@ -0,0 +1,9 @@
+import FloorPlan from '@/components/floor-plan/FloorPlan'
+
+export default function FloorPlanPage() {
+  return (
+    <>
+      <FloorPlan />
+    </>
+  )
+}

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 (
+    <>
+      <Hero title="Basic Settings" />
+      <div className="flex flex-col justify-center my-8">
+        <InitSettingsModal />
+      </div>
+    </>
+  )
+}

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 (
+    <>
+      <div className="container mx-auto p-4 m-4 border">
+        <Intro />
+      </div>
+    </>
+  )
+}

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 (
+    <>
+      <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
+        <h1 className="text-center text-4xl font-bold mb-10">{getMessage('join.complete.title')}</h1>
+        <div className="mt-10 mb-10 w-full text-center text-2xl">{getMessage('join.complete.contents')}</div>
+        <div className="mt-10 w-full text-center">
+          {getMessage('join.complete.email_comment')} :&nbsp;{getMessage('join.complete.email')}
+        </div>
+      </div>
+    </>
+  )
+}

src/app/join/page.jsx

@@ -0,0 +1,5 @@
+import Join from '@/components/auth/Join'
+
+export default function JoinPage() {
+  return <>{<Join />}</>
+}

src/app/layout.js

@@ -1,13 +1,19 @@
 import { Inter } from 'next/font/google'
 
+import { headers } from 'next/headers'
+import { redirect } from 'next/navigation'
+import { getSession } from '@/lib/authActions'
 import RecoilRootWrapper from './RecoilWrapper'
 import UIProvider from './UIProvider'
 
 import { ToastContainer } from 'react-toastify'
 
+import Header from '@/components/header/Header'
+import QModal from '@/components/common/modal/QModal'
+
 import './globals.css'
 import '../styles/style.scss'
-import Header from '@/components/header/Header'
+import { QcastProvider } from './QcastProvider'
 
 const inter = Inter({ subsets: ['latin'] })
 
@@ -16,20 +22,33 @@ export const metadata = {
   description: 'Generated by create next app',
 }
 
-export default function RootLayout({ children }) {
+export default async function RootLayout({ children }) {
+  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 (
     <html lang="en">
       <body className={inter.className}>
         {/*{headerPathname !== '/login' && <Headers />}*/}
         <RecoilRootWrapper>
           <div className="wrap">
-            <Header />
+            <Header loginedUserNm={session.userNm} />
             <div className="content">
-              <UIProvider>{children}</UIProvider>
+              <UIProvider>
+                <QcastProvider>{children}</QcastProvider>
+              </UIProvider>
             </div>
           </div>
           <ToastContainer />
-          {/*<QModal />*/}
+          <QModal />
         </RecoilRootWrapper>
       </body>
     </html>

src/app/login/page.jsx

@@ -0,0 +1,9 @@
+import Login from '@/components/auth/Login'
+
+export default function LoginPage() {
+  return (
+    <>
+      <Login />
+    </>
+  )
+}

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 (
+    <>
+      <Hero title="도면관리" />
+      <div className="container flex flex-wrap items-center justify-between mx-auto p-4 m-4 border">
+        <Plan />
+      </div>
+    </>
+  )
+}

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 (
+    <>
+      <div className="pt-48 flex justify-left">
+        <h1 className="text-4xl archivo-black-regular">물건정보</h1>
+      </div>
+      <div className="m2">
+        <StuffDetail />
+      </div>
+    </>
+  )
+}

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 (
+    <>
+      <Hero title="물건현황" />
+      <div>
+        <div className="m2">
+          <StuffSearchCondition />
+        </div>
+      </div>
+      <div className="flex flex-col justify-center my-8 pt-20">
+        <Stuff />
+      </div>
+    </>
+  )
+}

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 (
+    <>
+      <Hero title="회사정보 조회" />
+      <div className="container flex flex-wrap items-center justify-between mx-auto p-4 m-4 border">
+        <Company />
+      </div>
+    </>
+  )
+}

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 (
+    <>
+      <Hero title="가격 마스터 조회" />
+      <div className="container flex flex-wrap items-center justify-between mx-auto p-4 m-4 border">
+        <Price />
+      </div>
+    </>
+  )
+}

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 <Main />
+export default async function Home() {
+  const session = await getSession()
+
+  const mainPageProps = {
+    isLoggedIn: session?.isLoggedIn,
+  }
+
+  return (
+    <>
+      <MainPage {...mainPageProps} />
+    </>
+  )
 }

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 (
+    <>
+      <Playground />
+    </>
+  )
+}

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 (
+    <>
+      <Hero title="Drawing on canvas 2D Roof" />
+      <div className="flex flex-col justify-center my-8">
+        <Roof />
+      </div>
+    </>
+  )
+}

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 (
+    <div className="flex w-full flex-wrap md:flex-nowrap gap-4">
+      {roofMaterials.length > 0 && (
+        <Select label="지붕재" className="max-w-xs" onChange={handleRoofMaterialOnChange}>
+          {roofMaterials.map((roofMaterial) => (
+            <SelectItem key={roofMaterial.id}>{roofMaterial.name}</SelectItem>
+          ))}
+        </Select>
+      )}
+      {manufacturers.length > 0 && (
+        <Select label="제조 회사" className="max-w-xs" onChange={handleManufacturersOnChange}>
+          {manufacturers.map((manufacturer) => (
+            <SelectItem key={manufacturer.id}>{manufacturer.name}</SelectItem>
+          ))}
+        </Select>
+      )}
+      {trestles.length > 0 && (
+        <Select label="가대" className="max-w-xs" onChange={handleTrestlesOnChange}>
+          {trestles.map((trestle) => (
+            <SelectItem key={trestle.id}>{trestle.name}</SelectItem>
+          ))}
+        </Select>
+      )}
+      {modules.length > 0 && (
+        <Select label="설치가능 모듈" className="max-w-xs">
+          {modules.map((module) => (
+            <SelectItem key={module.id}>{module.name}</SelectItem>
+          ))}
+        </Select>
+      )}
+    </div>
+  )
+}

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 (
+    <>
+      <div>
+        <div className="m-2">
+          <RoofSelect />
+        </div>
+      </div>
+      <div className="flex flex-col justify-center my-8 pt-20">
+        <Roof2 {...roof2Props} />
+      </div>
+    </>
+  )
+}

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 (
+    <>
+      <Hero title="Canvas Setting" />
+      <div className="flex flex-col justify-center my-8">
+        <Settings />
+      </div>
+    </>
+  )
+}

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 (
     <>
-      <h3>{t('locale', { locale: <Chip color="primary">{currentLocale}</Chip> })}</h3>
-      <div>{t('hello')}</div>
-      <div>{t('welcome', { name: '효준' })}</div>
-      <div>
-        <Button onClick={handleChangeLocale}>Change Locale</Button>
-      </div>
-      {isLoggedIn && (
-        <div className="my-4">
-          <Button color="primary" onClick={handleLogout}>
-            로그아웃
-          </Button>
-        </div>
-      )}
-      {!isLoggedIn && (
-        <div className="my-4">
-          <Link href={'/' + currentLocale + '/login'}>
-            <Button color="primary">로그인 페이지로 이동</Button>
-          </Link>
-        </div>
-      )}
-      <div className="font-test">font-test</div>
-      {/*<h3>{t('locale', { locale: <Chip color="primary">{currentLocale}</Chip> })}</h3>*/}
-      {/*<div>{t('hello')}</div>*/}
-      {/*<div>{t('welcome', { name: '효준' })}</div>*/}
-      {/*<div>*/}
-      {/*  <Button onClick={handleChangeLocale}>Change Locale</Button>*/}
-      {/*</div>*/}
-      {/*{isLoggedIn && (*/}
-      {/*  <div className="my-4">*/}
-      {/*    <Button color="primary" onClick={handleLogout}>*/}
-      {/*      로그아웃*/}
-      {/*    </Button>*/}
-      {/*  </div>*/}
-      {/*)}*/}
-      {/*<div className="font-test">font-test</div>*/}
+      <h1>Main page</h1>
     </>
   )
 }

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)

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 && (

src/components/floor-plan/CanvasMenu.jsx

@@ -3,6 +3,8 @@ import { useState } from 'react'
 import { useRecoilState } from 'recoil'
 import { modalState } from '@/store/modalAtom'
 import { settingModalFirstOptionsState } from '@/store/settingAtom'
+import { useEffect, useState } from 'react'
+import MenuDepth01 from './MenuDepth01'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useMessage } from '@/hooks/useMessage'
 import { post } from '@/lib/Axios'
@@ -13,8 +15,11 @@ import RoofCoveringMenu from '@/components/floor-plan/RoofCoveringMenu'
 export default function CanvasMenu() {
   const [objectNo, setObjectNo] = useState('test123240912001')
   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 [type, setType] = useState('')
   const { getMessage } = useMessage()
   const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
   const [currentMenu, setCurrentMenu] = useRecoilState(currentMenuState)
@@ -68,8 +73,19 @@ export default function CanvasMenu() {
       console.error('설정을 저장하는 동안 오류가 발생했습니다:', error)
       alert('설정을 저장하는 중 오류가 발생했습니다.')
     }
+  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 (
     <div
       className={`canvas-menu-wrap ${Object.values(MENU.ROOF_COVERING).includes(currentMenu) || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}
@@ -94,12 +110,16 @@ export default function CanvasMenu() {
             </li>
           }
           <li
-            className={`canvas-menu-item ${Object.values(MENU.ROOF_COVERING).includes(currentMenu) ? 'active' : ''}`}
-            onClick={() => onClickNav(MENU.ROOF_COVERING.DEFAULT)}
+            className={`canvas-menu-item ${menuNumber === 2 ? 'active' : ''}`}
+            onClick={() => {
+              if (!showOutlineModal) setShowOutlineModal(true)
+              // setModalOption({ ...modalOption, outerwall: true })
+              onClickNav(2)
+            }}
           >
             <button>
               <span className="menu-icon con02"></span>
-              {getMessage('plan.menu.root.cover')}
+              {getMessage('plan.menu.roof.cover')}
             </button>
           </li>
           <li className={`canvas-menu-item ${menuNumber === 3 ? 'active' : ''}`} onClick={() => onClickNav(3)}>
@@ -143,7 +163,7 @@ export default function CanvasMenu() {
                 <QSelectBox title={'瓦53A'} option={SelectOption} />
               </div>
               <div className="btn-from">
-                <button className="btn04" onClick={() => setModalOption({ ...modalOption, option: true })}></button>
+                <button className="btn04" onClick={() => setShowCanvasSettingModal(true)}></button>
                 <button className="btn05"></button>
                 <button className="btn06"></button>
               </div>
@@ -205,6 +225,10 @@ export default function CanvasMenu() {
         {/*{menuNumber === 2 && <MenuDepth01 />}
         {menuNumber === 3 && <MenuDepth01 />}
         {menuNumber === 4 && <MenuDepth01 />}*/}
+      <div className={`canvas-depth2-wrap ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
+        {menuNumber === 2 && <MenuDepth01 {...menuProps} />}
+        {menuNumber === 3 && <MenuDepth01 {...menuProps} />}
+        {menuNumber === 4 && <MenuDepth01 {...menuProps} />}
       </div>
     </div>
   )

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 (
     <>
       <div className="canvas-wrap">
-        <CanvasMenu />
+        <CanvasMenu {...modalProps} />
         <div className="canvas-content">
           <CanvasLayout />
-          {modalOption.option && <SettingModal01 />}
-          {modalOption.outerwall && <OuterLineWall />}
+          {showCanvasSettingModal && <SettingModal01 {...canvasSettingProps} />}
+          {showOutlineModal && <OuterLineWall {...outlineProps} />}
         </div>
       </div>
     </>

src/components/floor-plan/MenuDepth01.jsx

@@ -2,33 +2,63 @@
 
 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, type } = 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: '特殊コーナー形状' },
+  ]
+
+  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
+    })
+  }, [menus, activeMenu])
   return (
     <div className="canvas-depth2-inner">
       <ul className="canvas-depth2-list">
-        <li className="canvas-depth2-item active">
-          <button>外壁線を描</button>
-        </li>
-        <li className="canvas-depth2-item">
-          <button>補助線を描</button>
-        </li>
-        <li className="canvas-depth2-item">
-          <button>屋根形状設定</button>
-        </li>
-        <li className="canvas-depth2-item">
-          <button>軒下変更</button>
-        </li>
-        <li className="canvas-depth2-item">
-          <button>外壁線の上げ下げ</button>
-        </li>
-        <li className="canvas-depth2-item">
-          <button>銅線移動</button>
-        </li>
-        <li className="canvas-depth2-item">
-          <button>特殊コーナー形状</button>
-        </li>
+        {menuInfo[type].map((menu) => {
+          return (
+            <li key={menu.id} className={`canvas-depth2-item ${menu.id === activeMenu ? 'active' : ''}`}>
+              <button onClick={() => onClickMenu(menu.id)}>{getMessage(menu.name)}</button>
+            </li>
+          )
+        })}
       </ul>
       <ul className="canvas-depth2-btn-list">
         <li className="depth2-btn-box" onMouseEnter={(e) => ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}>

src/components/floor-plan/modal/outerlinesetting/OuterLineWall.jsx

@@ -21,6 +21,9 @@ import { useLine } from '@/hooks/useLine'
 
 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 { getMessage } = useMessage()
   const { addCanvasMouseEventListener, addDocumentEventListener, removeAllDocumentEventListeners } = useEvent()
   const { addLineText, removeLineText } = useLine()
@@ -61,6 +64,8 @@ export default function OuterLineWall() {
 
     setArrow1('')
     setArrow2('')
+  const HandleClickClose = () => {
+    setShowOutlineModal(false)
   }
 
   const mouseDown = (e) => {
@@ -352,8 +357,8 @@ export default function OuterLineWall() {
     })
   }
   return (
-    <WithDraggable isShow={true}>
-      <div className={`modal-pop-wrap ssm ${modalOption.outerwall ? 'mount' : ''} `}>
+    <WithDraggable isShow={true} pos={{ x: 50, y: -1000 + 50 }}>
+      <div className={`modal-pop-wrap ssm `}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.cover.outline.drawing')}</h1>
           <button className="modal-close" onClick={handleClickClose}>

src/components/floor-plan/modal/setting01/SettingModal01.jsx

@@ -5,28 +5,18 @@ import FirstOption from './FirstOption'
 import WithDraggable from '@/components/common/draggable/withDraggable'
 import SecondOption from '@/components/floor-plan/modal/setting01/SecondOption'
 import { useMessage } from '@/hooks/useMessage'
-import { modalState } from '@/store/modalAtom'
-import { useRecoilState } from 'recoil'
 
-export default function SettingModal01() {
-  const [modalOption, setModalOption] = useRecoilState(modalState) //modal 열림닫힘 state
+export default function SettingModal01(props) {
+  const { setShowCanvasSettingModal } = props
   const [buttonAct, setButtonAct] = useState(1)
-  const [close, setClose] = useState(false)
-  const HandleClickClose = () => {
-    setClose(true)
-    setTimeout(() => {
-      setModalOption({ ...modalOption, option: false })
-      setClose(false)
-    }, 180)
-  }
   const { getMessage } = useMessage()
 
   return (
-    <WithDraggable isShow={true}>
-      <div className={`modal-pop-wrap sm ${modalOption.option ? 'mount' : ''} ${close ? 'unmount' : ''} `}>
+    <WithDraggable isShow={true} pos={{ x: window.innerWidth - 450 - 50, y: -1000 + 50 }}>
+      <div className={`modal-pop-wrap sm`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.canvas.setting')}</h1>
-          <button className="modal-close" onClick={HandleClickClose}>
+          <button className="modal-close" onClick={() => setShowCanvasSettingModal(false)}>
             닫기
           </button>
         </div>

src/components/header/Header.jsx

@@ -1,8 +1,11 @@
 'use client'
+import { Fragment } from 'react'
 import Link from 'next/link'
-import QSelectBox from '@/components/common/select/QSelectBox'
-import { usePathname } from 'next/navigation'
+import { usePathname, useRouter } from 'next/navigation'
 import { useMessage } from '@/hooks/useMessage'
+import { logout } from '@/lib/authActions'
+
+import QSelectBox from '@/components/common/select/QSelectBox'
 
 export const ToggleonMouse = (e, act, target) => {
   const listWrap = e.target.closest(target)
@@ -19,101 +22,104 @@ export const ToggleonMouse = (e, act, target) => {
   }
 }
 
-export default function Header() {
+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 menus = [
+    { id: 0, name: 'header.menus.home', url: '/', children: [] },
+    {
+      id: 1,
+      name: 'header.menus.management',
+      url: '',
+      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: [
+        { 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: [] },
+      ],
+    },
+  ]
+
+  const getMenuTemplate = (menus) => {
+    return menus.map((menu) => {
+      return (
+        <li
+          key={`${menu.id}`}
+          className={'nav-item'}
+          onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')}
+          onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
+        >
+          {menu.children.length === 0 ? (
+            <Link key={`${menu.id}`} href={menu.url}>
+              {getMessage(menu.name)}
+            </Link>
+          ) : (
+            <Fragment key={`${menu.id}`}>
+              <button>{getMessage(menu.name)}</button>
+              <ul className="nav-depth2">
+                {menu.children.map((m) => {
+                  return (
+                    <li
+                      key={`${m.id}`}
+                      className={'nav-depth2-item'}
+                      onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
+                      onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
+                    >
+                      <Link href={m.url}>{getMessage(m.name)}</Link>
+                    </li>
+                  )
+                })}
+              </ul>
+            </Fragment>
+          )}
+        </li>
+      )
+    })
+  }
 
   return (
-    <header>
-      <div className="header-inner">
-        <div className="header-right">
-          <h1 className="logo">
-            <Link href={'/'}></Link>
-          </h1>
-          <nav>
-            <ul className="nav-list ">
-              <li
-                className="nav-item "
-                onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')}
-                onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
-              >
-                <Link href={'#'}>{getMessage('header.menus.home')}</Link>
-              </li>
-              <li
-                className="nav-item"
-                onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')}
-                onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
-              >
-                <button>{getMessage('header.menus.management')}</button>
-                <ul className="nav-depth2">
-                  <li
-                    className="nav-depth2-item"
-                    onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
-                    onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
-                  >
-                    <Link href={'#'}>{getMessage('header.menus.management.stuff')}</Link>
-                  </li>
-                  <li
-                    className="nav-depth2-item"
-                    onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
-                    onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
-                  >
-                    <Link href={'#'}>{getMessage('header.menus.management.plan')}</Link>
-                  </li>
-                </ul>
-              </li>
-              <li
-                className="nav-item"
-                onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')}
-                onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
-              >
-                <button>{getMessage('header.menus.community')}</button>
-                <ul className="nav-depth2">
-                  <li
-                    className="nav-depth2-item"
-                    onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
-                    onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
-                  >
-                    <Link href={'#'}>{getMessage('header.menus.community.notice')}</Link>
-                  </li>
-                  <li
-                    className="nav-depth2-item"
-                    onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
-                    onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
-                  >
-                    <Link href={'#'}>{getMessage('header.menus.community.faq')}</Link>
-                  </li>
-                  <li
-                    className="nav-depth2-item"
-                    onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
-                    onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
-                  >
-                    <Link href={'#'}>{getMessage('header.menus.community.archive')}</Link>
-                  </li>
-                </ul>
-              </li>
-            </ul>
-          </nav>
-        </div>
-        <div className="header-left">
-          <div className="profile-box">
-            <button className="profile">Kim Ji Young</button>
+    !(pathName.includes('login') || pathName.includes('join')) && (
+      <header>
+        <div className="header-inner">
+          <div className="header-right">
+            <h1 className="logo">
+              <Link href={'/'}></Link>
+            </h1>
+            <nav>
+              <ul className="nav-list ">{getMenuTemplate(menus)}</ul>
+            </nav>
           </div>
-          <div className="sign-out-box">
-            <button className="sign-out">{getMessage('header.logout')}</button>
-          </div>
-          <div className="select-box">
-            <QSelectBox title={'Q.ORDER'} option={SelectOption} />
-          </div>
-          <div className="btn-wrap">
-            <button className="btn-frame small dark">{getMessage('header.go')}</button>
+          <div className="header-left">
+            <div className="profile-box">
+              <button className="profile">{loginedUserNm}</button>
+            </div>
+            <div className="sign-out-box">
+              <button className="sign-out" onClick={() => logout()}>
+                {getMessage('header.logout')}
+              </button>
+            </div>
+            <div className="select-box">
+              <QSelectBox title={'Q.ORDER'} option={SelectOption} />
+            </div>
+            <div className="btn-wrap">
+              <button className="btn-frame small dark">{getMessage('header.go')}</button>
+            </div>
           </div>
         </div>
-      </div>
-    </header>
+      </header>
+    )
   )
 }

src/components/ui/Loading.jsx

@@ -0,0 +1,5 @@
+import style from '@/components/ui/Loading.module.css'
+
+export default function Loading() {
+  return <span className={style.loader}></span>
+}

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);
+  }
+}

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 }
 }

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()
@@ -27,6 +25,15 @@ export async function getSession() {
   return session
 }
 
+export async function checkSession() {
+  const session = await getSession()
+
+  // if (!session.isLoggedIn) {
+  //   redirect('/login')
+  // }
+  return session.isLoggedIn
+}
+
 export async function setSession(data) {
   const session = await getSession()
 

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": "면형상 배치",

src/locales/ko.json

@@ -15,8 +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.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,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": "면형상 배치",

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,
+    },
+  })
+}

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: (
+    <>
+      <div>test</div>
+    </>
+  ),
 })

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;