diff --git a/src/hooks/useCanvas.js b/src/hooks/useCanvas.js
index 9e359fb2..aee86d34 100644
--- a/src/hooks/useCanvas.js
+++ b/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,
diff --git a/src/lib/authActions.js b/src/lib/authActions.js
index e1968efe..1ca7bd31 100644
--- a/src/lib/authActions.js
+++ b/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)
diff --git a/src/lib/session.js b/src/lib/session.js
index 95d51411..ff5a2078 100644
--- a/src/lib/session.js
+++ b/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,
diff --git a/src/lib/user.js b/src/lib/user.js
index bdc619ee..d79e958a 100644
--- a/src/lib/user.js
+++ b/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,
+ }
+}
diff --git a/src/util/context-util.js b/src/util/context-util.js
new file mode 100644
index 00000000..0179fdf0
--- /dev/null
+++ b/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 && (
+
+
+ - handleMenuClick(1)}>
+ Option 1
+
+ - handleMenuClick(2)}>
+ Option 2
+
+ - handleMenuClick(3)}>
+ Option 3
+
+
+
+ )}
+
+ )
+})
+
+export default CanvasWithContextMenu
diff --git a/src/util/session-util.js b/src/util/session-util.js
new file mode 100644
index 00000000..ab8b120c
--- /dev/null
+++ b/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')
+ }
+}