Merge branch 'dev' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into dev

# Conflicts:
#	src/hooks/useCanvas.js

.env.development

@@ -1,6 +1,6 @@
 NEXT_PUBLIC_TEST="테스트변수입니다. development"
 
-NEXT_PUBLIC_API_SERVER_PATH="http://localhost:8080"
+NEXT_PUBLIC_API_SERVER_PATH="http://1.248.227.176:38080"
 
 DATABASE_URL="sqlserver://mssql.devgrr.kr:1433;database=qcast;user=qcast;password=Qwertqaz12345;trustServerCertificate=true"
 

src/app/[locale]/community/archive/page.jsx

@@ -1,7 +1,10 @@
 import Hero from '@/components/Hero'
 import Archive from '@/components/community/Archive'
+import { initCheck } from '@/util/session-util'
+
+export default async function CommunityArchivePage() {
+  await initCheck()
 
-export default function CommunityArchivePage() {
   return (
     <>
       <Hero title="자료 다운로드" />

src/app/[locale]/community/faq/page.jsx

@@ -1,7 +1,10 @@
 import Hero from '@/components/Hero'
 import Faq from '@/components/community/Faq'
+import { initCheck } from '@/util/session-util'
+
+export default async function CommunityFaqPage() {
+  await initCheck()
 
-export default function CommunityFaqPage() {
   return (
     <>
       <Hero title="FAQ" />

src/app/[locale]/community/notice/page.jsx

@@ -1,7 +1,10 @@
 import Hero from '@/components/Hero'
 import Notice from '@/components/community/Notice'
+import { initCheck } from '@/util/session-util'
+
+export default async function CommunityNoticePage() {
+  await initCheck()
 
-export default function CommunityNoticePage() {
   return (
     <>
       <Hero title="공지사항" />

src/app/[locale]/intro/page.jsx

@@ -1,6 +1,9 @@
 import Intro from '@/components/Intro'
+import { initCheck } from '@/util/session-util'
+
+export default async function IntroPage() {
+  await initCheck()
 
-export default function IntroPage() {
   return (
     <>
       <div className="container mx-auto p-4 m-4 border">

src/app/[locale]/layout.js

@@ -5,6 +5,7 @@ import { LocaleProvider } from './LocaleProvider'
 
 export default function LocaleLayout({ children }) {
   const locale = useCurrentLocale()
+
   return (
     <>
       <LocaleProvider locale={locale} fallback={''}>

src/app/[locale]/management/plan/page.jsx

@@ -1,7 +1,10 @@
 import Hero from '@/components/Hero'
 import Plan from '@/components/management/Plan'
+import { initCheck } from '@/util/session-util'
+
+export default async function ManagementPlanPage() {
+  await initCheck()
 
-export default function ManagementPlanPage() {
   return (
     <>
       <Hero title="도면관리" />

src/app/[locale]/management/stuff/page.jsx

@@ -1,7 +1,10 @@
 import Hero from '@/components/Hero'
 import Stuff from '@/components/management/Stuff'
+import { initCheck } from '@/util/session-util'
+
+export default async function ManagementStuffPage() {
+  await initCheck()
 
-export default function ManagementStuffPage() {
   return (
     <>
       <Hero title="물건관리" />

src/app/[locale]/master/company/page.jsx

@@ -1,7 +1,10 @@
 import Hero from '@/components/Hero'
 import Company from '@/components/master/Company'
+import { initCheck } from '@/util/session-util'
+
+export default async function MasterCompanyPage() {
+  await initCheck()
 
-export default function MasterCompanyPage() {
   return (
     <>
       <Hero title="회사정보 조회" />

src/app/[locale]/master/price/page.jsx

@@ -1,7 +1,10 @@
 import Hero from '@/components/Hero'
 import Price from '@/components/master/Price'
+import { initCheck } from '@/util/session-util'
+
+export default async function MasterPricePage() {
+  await initCheck()
 
-export default function MasterPricePage() {
   return (
     <>
       <Hero title="가격 마스터 조회" />

src/app/[locale]/page.js

@@ -1,6 +1,6 @@
-import MainPage from '@/components/Main'
 import { getSession } from '@/lib/authActions'
 import { getCurrentLocale } from '@/locales/server'
+import MainPage from '@/components/Main'
 
 export default async function page() {
   const session = await getSession()

src/app/[locale]/playground/page.jsx

@@ -1,6 +1,14 @@
 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()
 
-export default function PlaygroundPage() {
   return (
     <>
       <Playground />

src/app/[locale]/roof/page.jsx

@@ -1,7 +1,10 @@
 import Hero from '@/components/Hero'
 import Roof from '@/components/Roof'
+import { initCheck } from '@/util/session-util'
+
+export default async function RoofPage() {
+  await initCheck()
 
-export default function RoofPage() {
   return (
     <>
       <Hero title="Drawing on canvas 2D Roof" />

src/app/[locale]/roof2/RoofSelect.jsx

@@ -19,9 +19,9 @@ export default function RoofSelect() {
 
   useEffect(() => {
     get({ url: '/api/roof-material/roof-material-infos' }).then((res) => {
-      if (res.length === 0) {
-        return
-      }
+      //TODO: error handling
+      if (!res) return
+
       setRoofMaterials(res)
     })
   }, [])

src/app/[locale]/roof2/page.jsx

@@ -1,17 +1,9 @@
-'use client'
-
 import Roof2 from '@/components/Roof2'
-import { textState } from '@/store/canvasAtom'
-import { useEffect } from 'react'
-import { useRecoilState } from 'recoil'
 import RoofSelect from '@/app/[locale]/roof2/RoofSelect'
+import { initCheck } from '@/util/session-util'
 
-export default function Roof2Page() {
-  const [text, setText] = useRecoilState(textState)
-
-  useEffect(() => {
-    console.log(text)
-  }, [])
+export default async function Roof2Page() {
+  await initCheck()
 
   return (
     <>

src/components/Roof2.jsx

@@ -1,5 +1,7 @@
+'use client'
+
 import { useCanvas } from '@/hooks/useCanvas'
-import { useEffect, useState } from 'react'
+import { useEffect, useState, useRef } from 'react'
 import { Mode, useMode } from '@/hooks/useMode'
 import { Button } from '@nextui-org/react'
 import RangeSlider from './ui/RangeSlider'
@@ -19,10 +21,13 @@ import { getCanvasState, insertCanvasState } from '@/lib/canvas'
 import { calculateIntersection } from '@/util/canvas-util'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import ThumbnailList from './ui/ThumbnailLIst'
+import CanvasWithContextMenu from '@/util/context-util'
 
 export default function Roof2() {
   const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots, saveImage, addCanvas } = useCanvas('canvas')
 
+  const canvasRef = useRef(null)
+
   //canvas 기본 사이즈
   const [canvasSize, setCanvasSize] = useRecoilState(canvasSizeState)
 
@@ -626,7 +631,7 @@ export default function Roof2() {
                 </Button>
               </>
             )}
-            <Button className="m-1 p-2" onClick={saveImage}>
+            <Button className="m-1 p-2" onClick={() => saveImage('title')}>
               저장
             </Button>
             {/*<Button className="m-1 p-2" onClick={rotateShape}>
@@ -699,7 +704,8 @@ export default function Roof2() {
       )}
       <ThumbnailList {...thumbnailProps} />
       <div className="flex justify-start my-8 mx-2 w-full">
-        <canvas id="canvas" style={{ border: '1px solid black' }} />
+        <canvas ref={canvasRef} id="canvas" style={{ border: '1px solid black' }} />
+        {canvas !== undefined && <CanvasWithContextMenu ref={canvasRef} canvasProps={canvas} />}
       </div>
     </>
   )

src/components/auth/Login.jsx

@@ -12,7 +12,7 @@ export default function Login() {
         </div>
 
         <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
-          <form action={login} method="POST" className="space-y-6">
+          <form action={login} method="POST" encType="application/json" className="space-y-6">
             <div>
               <label htmlFor="userId" className="block text-sm font-medium leading-6 text-gray-900">
                 User ID

src/components/common/grid/QGrid.jsx

@@ -7,7 +7,6 @@ import 'ag-grid-community/styles/ag-grid.css'
 import 'ag-grid-community/styles/ag-theme-quartz.css'
 
 export default function QGrid(props) {
-  console.log('QGrid props:', props)
   const { gridData, gridColumns, isPageable = true } = props
   const [count, setCount] = useState(0)
   const [clickedCount, setClickedCount] = useState(0)

src/components/ui/ThumbnailLIst.jsx

@@ -4,6 +4,8 @@ import { memo } from 'react'
 function ThumbnailList(props) {
   const { thumbnails } = props
 
+  console.log('ThumbnailList')
+
   return (
     <>
       <div className="flex justify-center m-4 w-full">

src/hooks/useCanvas.js

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react'
 import { fabric } from 'fabric'
+
 import { actionHandler, anchorWrapper, polygonPositionHandler } from '@/util/canvas-util'
 
 import { useRecoilState } from 'recoil'
@@ -64,15 +65,11 @@ export function useCanvas(id) {
   useEffect(() => {
     if (canvas) {
       initialize()
-      canvas?.on('object:added', onChange)
-      canvas?.on('object:added', addEventOnObject)
-
-      canvas?.on('object:modified', onChange)
-      canvas?.on('object:removed', onChange)
-      canvas?.on('mouse:move', drawMouseLines)
-      canvas?.on('mouse:out', removeMouseLines)
+      removeEventOnCanvas()
+      addEventOnCanvas()
     }
   }, [canvas])
+
   const addEventOnCanvas = () => {
     canvas?.on('object:added', onChange)
     canvas?.on('object:modified', onChange)
@@ -546,11 +543,14 @@ export function useCanvas(id) {
    * @param {string} title - 저장할 이미지 이름
    */
   const saveImage = async (title = 'canvas') => {
-    await writeImage(title, canvas?.toDataURL('image/png').replace('data:image/png;base64,', '')).then(res => {
-      console.log('success', res)
-    }).catch(err => {
-      console.log('err', err)
-    })
+    removeMouseLines()
+    await writeImage(title, canvas?.toDataURL('image/png').replace('data:image/png;base64,', ''))
+      .then((res) => {
+        console.log('success', res)
+      })
+      .catch((err) => {
+        console.log('err', err)
+      })
   }
 
   const handleFlip = () => {
@@ -607,7 +607,7 @@ export function useCanvas(id) {
     const dataUrl = tempCanvas.toDataURL({ format: 'png' })
 
     // Set the image as the background of the original canvas
-    fabric.Image.fromURL(dataUrl, function(img) {
+    fabric.Image.fromURL(dataUrl, function (img) {
       canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas), {
         scaleX: canvas.width / img.width,
         scaleY: canvas.height / img.height,

src/lib/authActions.js

@@ -20,7 +20,8 @@ export async function getSession() {
 
   console.log('session:', session)
   if (!session.isLoggedIn) {
-    session.isLoggedIn = defaultSession.isLoggedIn
+    // session.isLoggedIn = defaultSession.isLoggedIn
+    session.isLoggedIn = false
   }
 
   return session
@@ -35,24 +36,20 @@ export async function login(formData) {
   console.log('id:', userId)
   console.log('password:', password)
 
-  // const user = {
-  //   id: 1,
-  //   name: 'jinsoo Kim',
-  //   email: 'jinsoo.kim@example.com',
-  // }
-  const loginUser = await getUserByIdAndPassword({ userId, password })
-  console.log('loginUser:', loginUser)
+  // const loginUser = await getUserByIdAndPassword({ userId, password })
+  const loginUser = {
+    id: 1,
+    userId: 'test123',
+    name: 'jinsoo Kim',
+    email: 'jinsoo.kim@example.com',
+  }
 
   if (!loginUser) {
     throw Error('Wrong Credentials!')
   }
 
-  // session.id = user.id
-  // session.email = user.email
-  session.userId = loginUser.USER_ID
-  session.saleStoreId = loginUser.SALE_STORE_ID
-  session.name = loginUser.NAME
-  session.mail = loginUser.MAIL
+  session.name = loginUser.USER_ID
+  session.email = loginUser.SALE_STORE_ID
   session.isLoggedIn = true
   console.log('session:', session)
 

src/lib/session.js

@@ -1,10 +1,4 @@
-export const defaultSession = {
-  userId: null,
-  saleStoreId: null,
-  name: null,
-  mail: null,
-  isLoggedIn: false,
-}
+export const defaultSession = {}
 
 export const sessionOptions = {
   password: process.env.SESSION_SECRET,

src/lib/user.js

@@ -1,5 +1,7 @@
 'use server'
 
+import { getSession } from './authActions'
+
 const { PrismaClient } = require('@prisma/client')
 
 const prisma = new PrismaClient()
@@ -29,3 +31,11 @@ export async function getUsers() {
     },
   })
 }
+
+export async function checkSession() {
+  const session = await getSession()
+
+  return {
+    session,
+  }
+}

src/util/context-util.js

@@ -0,0 +1,65 @@
+import React, { useState, useEffect, forwardRef, useContext } from 'react'
+
+const CanvasWithContextMenu = forwardRef(({ canvasProps }, ref) => {
+  const [contextMenu, setContextMenu] = useState({ visible: false, x: 0, y: 0 })
+
+  useEffect(() => {
+    if (!ref.current) return
+
+    const handleContextMenu = (e) => {
+      e.preventDefault() //기존 contextmenu 막고
+      setContextMenu({ visible: true, x: e.pageX, y: e.pageY })
+      canvasProps.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
+    }
+
+    const handleClick = (e) => {
+      e.preventDefault()
+      setContextMenu({ ...contextMenu, visible: false })
+    }
+
+    const handleOutsideClick = (e) => {
+      e.preventDefault()
+      if (contextMenu.visible && !ref.current.contains(e.target)) {
+        setContextMenu({ ...contextMenu, visible: false })
+      }
+    }
+
+    // Prevent the default context menu from appearing on the canvas
+    canvasProps.upperCanvasEl.addEventListener('contextmenu', handleContextMenu)
+    document.addEventListener('click', handleClick)
+    document.addEventListener('click', handleOutsideClick)
+
+    return () => {
+      // canvasProps.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu)
+      document.removeEventListener('click', handleClick)
+      document.removeEventListener('click', handleOutsideClick)
+    }
+  }, [ref, contextMenu])
+
+  const handleMenuClick = (option) => {
+    alert(`option ${option} clicked`)
+    setContextMenu({ ...contextMenu, visible: false })
+  }
+
+  return (
+    <>
+      {contextMenu.visible && (
+        <div style={{ position: 'absolute', top: contextMenu.y, left: contextMenu.x, zIndex: 2000 }}>
+          <ul style={{ listStyle: 'none', margin: 0, padding: '5px' }}>
+            <li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleMenuClick(1)}>
+              Option 1
+            </li>
+            <li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleMenuClick(2)}>
+              Option 2
+            </li>
+            <li style={{ padding: '8px 12px', cursor: 'pointer' }} onClick={() => handleMenuClick(3)}>
+              Option 3
+            </li>
+          </ul>
+        </div>
+      )}
+    </>
+  )
+})
+
+export default CanvasWithContextMenu

src/util/session-util.js

@@ -0,0 +1,10 @@
+import { checkSession } from '@/lib/user'
+import { redirect } from 'next/navigation'
+
+export const initCheck = async () => {
+  const { session } = await checkSession()
+
+  if (!session.isLoggedIn) {
+    redirect('/login')
+  }
+}