From 4c1fb002c12a63b522ad666b7b43ec9d46746bcd Mon Sep 17 00:00:00 2001 From: nalpari Date: Sun, 21 Jul 2024 23:20:34 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B2=A8=EC=9A=B0=20=EC=84=B1=EA=B3=B5(?= =?UTF-8?q?=ED=9A=A8=EC=A4=80=EC=A7=B1=ED=95=9C=ED=85=8C=20=ED=98=BC?= =?UTF-8?q?=EB=82=A0=EB=BB=94)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 아오 술땡겨 --- .env | 12 ++++ package.json | 3 + prisma/schema.prisma | 19 +++++++ src/components/Roof2.jsx | 42 +++++++++++++- src/lib/canvas.js | 38 +++++++++++++ src/lib/prisma.js | 14 +++++ src/store/canvasAtom.js | 5 ++ yarn.lock | 118 ++++++++++++++++++++++++++++++++++++++- 8 files changed, 249 insertions(+), 2 deletions(-) create mode 100644 .env create mode 100644 prisma/schema.prisma create mode 100644 src/lib/canvas.js create mode 100644 src/lib/prisma.js diff --git a/.env b/.env new file mode 100644 index 00000000..50ab0d74 --- /dev/null +++ b/.env @@ -0,0 +1,12 @@ +# Environment variables declared in this file are automatically made available to Prisma. +# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema + +# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB. +# See the documentation for all the connection string options: https://pris.ly/d/connection-strings + +# DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public" +# DATABASE_URL="mongodb://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/sample_mflix?retryWrites=true&w=majority" +#DATABASE_URL = "mongodb%2Bsrv%3A%2F%2Fyoo32767%3AGuCtswjLGqUaNL0G%40cluster0.vsdtcnb.mongodb.net%2F%3FretryWrites%3Dtrue%26w%3Dmajority%26appName%3DCluster0" +# DATABASE_URL = "mongodb+srv://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/Cluster0?retryWrites=true&w=majority" +# DATABASE_URL="mongodb://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/sample_mflix?retryWrites=true&w=majority" +DATABASE_URL="mongodb+srv://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/mytest" \ No newline at end of file diff --git a/package.json b/package.json index f7fa513c..9c745fdf 100644 --- a/package.json +++ b/package.json @@ -10,9 +10,11 @@ }, "dependencies": { "@nextui-org/react": "^2.4.2", + "@prisma/client": "^5.17.0", "fabric": "^5.3.0", "framer-motion": "^11.2.13", "mathjs": "^13.0.2", + "mongodb": "^6.8.0", "next": "14.2.3", "react": "^18", "react-dom": "^18", @@ -21,6 +23,7 @@ }, "devDependencies": { "postcss": "^8", + "prisma": "^5.17.0", "tailwindcss": "^3.4.1" } } diff --git a/prisma/schema.prisma b/prisma/schema.prisma new file mode 100644 index 00000000..327b757a --- /dev/null +++ b/prisma/schema.prisma @@ -0,0 +1,19 @@ +generator client { + provider = "prisma-client-js" +} + +datasource db { + provider = "mongodb" + url = env("DATABASE_URL") +} + +model test { + id String @id @default(auto()) @map("_id") @db.ObjectId + content String +} + +model canvas { + id String @id @default(auto()) @map("_id") @db.ObjectId + loginId String + canvas Json +} \ No newline at end of file diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx index 108303b3..67462c3a 100644 --- a/src/components/Roof2.jsx +++ b/src/components/Roof2.jsx @@ -7,8 +7,9 @@ import QPolygon from '@/components/fabric/QPolygon' import RangeSlider from './ui/RangeSlider' import { useRecoilState, useRecoilValue } from 'recoil' -import { canvasSizeState, fontSizeState, sortedPolygonArray } from '@/store/canvasAtom' +import { canvasAtom, canvasSizeState, fontSizeState, sortedPolygonArray } from '@/store/canvasAtom' import { QLine } from '@/components/fabric/QLine' +import { getTests, getCanvasState, insertCanvasState } from '@/lib/canvas' export default function Roof2() { const { canvas, handleRedo, handleUndo, setCanvasBackgroundWithDots, saveImage } = useCanvas('canvas') @@ -32,6 +33,8 @@ export default function Roof2() { const { mode, changeMode, handleClear, fillCellInPolygon, zoomIn, zoomOut, zoom, togglePolygonLine, handleOuterlinesTest2, applyTemplateB } = useMode() + // const [canvasState, setCanvasState] = useRecoilState(canvasAtom) + useEffect(() => { if (!canvas) { return @@ -236,6 +239,37 @@ export default function Roof2() { const lines = togglePolygonLine(polygon) } + /** + * canvas 내용 저장하기 + */ + const handleSaveCanvas = async () => { + // const jsonStr = JSON.stringify(canvas?.toDatalessJSON(['type', 'fontSize'])) + const jsonObj = canvas?.toDatalessJSON(['type', 'fontSize']) + console.log(jsonObj) + + const param = { + loginId: 'test', + canvas: jsonObj, + } + console.log(param) + + await insertCanvasState(param) + handleClear() + } + + /** + * canvas 내용 불러오기 + */ + const handleLoadCanvas = async () => { + const tests = await getTests() + console.log(tests) + const canvasStates = await getCanvasState() + console.log(canvasStates) + } + + /** + * 컨트롤러 보이기/숨기기 + */ const handleShowController = () => { setShowControl(!showControl) } @@ -333,6 +367,12 @@ export default function Roof2() { + + diff --git a/src/lib/canvas.js b/src/lib/canvas.js new file mode 100644 index 00000000..c2dd207f --- /dev/null +++ b/src/lib/canvas.js @@ -0,0 +1,38 @@ +'use server' + +import { PrismaClient } from '@prisma/client' + +const prisma = new PrismaClient() + +export const getTests = () => { + return prisma.test.findMany() +} + +export const insertTest = async (param) => { + return prisma.test.create({ + data: { + content: param, + }, + }) +} + +export const getCanvasStateAll = () => { + return prisma.canvas.findMany() +} + +export const getCanvasState = () => { + return prisma.canvas.findFirst({ + where: { + loginId: 'test', + }, + orderBy: { + id: 'desc', + }, + }) +} + +export const insertCanvasState = (param) => { + return prisma.canvas.create({ + data: param, + }) +} diff --git a/src/lib/prisma.js b/src/lib/prisma.js new file mode 100644 index 00000000..aa946098 --- /dev/null +++ b/src/lib/prisma.js @@ -0,0 +1,14 @@ +import { PrismaClient } from '@prisma/client' + +let prisma + +if (process.env.NODE_ENV === 'production') { + prisma = new PrismaClient() +} else { + if (!global.prisma) { + global.prisma = new PrismaClient() + } + prisma = global.prisma +} + +export default prisma diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js index 2f6f7ac5..9682d277 100644 --- a/src/store/canvasAtom.js +++ b/src/store/canvasAtom.js @@ -41,3 +41,8 @@ export const templatePolygonArrayState = atom({ default: {}, //object ex) big, mid, sht = {point : [{x1, y1}, {x2, y1}], direction : left or right or top or bottom} }) +export const canvasAtom = atom({ + key: 'canvasState', + default: [], + dangerouslyAllowMutability: true, +}) diff --git a/yarn.lock b/yarn.lock index bd27ddfe..94bdd351 100644 --- a/yarn.lock +++ b/yarn.lock @@ -148,6 +148,13 @@ semver "^7.3.5" tar "^6.1.11" +"@mongodb-js/saslprep@^1.1.5": + version "1.1.8" + resolved "https://registry.yarnpkg.com/@mongodb-js/saslprep/-/saslprep-1.1.8.tgz#d39744540be8800d17749990b0da95b4271840d1" + integrity sha512-qKwC/M/nNNaKUBMQ0nuzm47b7ZYWQHN3pcXq4IIcoSBc2hOIrflAxJduIvvqmhoz3gR2TacTAs8vlsCVPkiEdQ== + dependencies: + sparse-bitfield "^3.0.3" + "@next/env@14.2.3": version "14.2.3" resolved "https://registry.npmjs.org/@next/env/-/env-14.2.3.tgz" @@ -1143,6 +1150,47 @@ resolved "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz" integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg== +"@prisma/client@^5.17.0": + version "5.17.0" + resolved "https://registry.yarnpkg.com/@prisma/client/-/client-5.17.0.tgz#9079947bd749689c2dabfb9ecc70a24ebefb1f43" + integrity sha512-N2tnyKayT0Zf7mHjwEyE8iG7FwTmXDHFZ1GnNhQp0pJUObsuel4ZZ1XwfuAYkq5mRIiC/Kot0kt0tGCfLJ70Jw== + +"@prisma/debug@5.17.0": + version "5.17.0" + resolved "https://registry.yarnpkg.com/@prisma/debug/-/debug-5.17.0.tgz#a765105848993984535b6066f8ebc6e6ead26533" + integrity sha512-l7+AteR3P8FXiYyo496zkuoiJ5r9jLQEdUuxIxNCN1ud8rdbH3GTxm+f+dCyaSv9l9WY+29L9czaVRXz9mULfg== + +"@prisma/engines-version@5.17.0-31.393aa359c9ad4a4bb28630fb5613f9c281cde053": + version "5.17.0-31.393aa359c9ad4a4bb28630fb5613f9c281cde053" + resolved "https://registry.yarnpkg.com/@prisma/engines-version/-/engines-version-5.17.0-31.393aa359c9ad4a4bb28630fb5613f9c281cde053.tgz#3c7cc1ef3ebc34cbd069e5873b9982f2aabf5acd" + integrity sha512-tUuxZZysZDcrk5oaNOdrBnnkoTtmNQPkzINFDjz7eG6vcs9AVDmA/F6K5Plsb2aQc/l5M2EnFqn3htng9FA4hg== + +"@prisma/engines@5.17.0": + version "5.17.0" + resolved "https://registry.yarnpkg.com/@prisma/engines/-/engines-5.17.0.tgz#74dd1aabb22675892760b3cf69a448e3aef4616b" + integrity sha512-+r+Nf+JP210Jur+/X8SIPLtz+uW9YA4QO5IXA+KcSOBe/shT47bCcRMTYCbOESw3FFYFTwe7vU6KTWHKPiwvtg== + dependencies: + "@prisma/debug" "5.17.0" + "@prisma/engines-version" "5.17.0-31.393aa359c9ad4a4bb28630fb5613f9c281cde053" + "@prisma/fetch-engine" "5.17.0" + "@prisma/get-platform" "5.17.0" + +"@prisma/fetch-engine@5.17.0": + version "5.17.0" + resolved "https://registry.yarnpkg.com/@prisma/fetch-engine/-/fetch-engine-5.17.0.tgz#f718dc7426411d1ebeeee53e2d0d38652387f87c" + integrity sha512-ESxiOaHuC488ilLPnrv/tM2KrPhQB5TRris/IeIV4ZvUuKeaicCl4Xj/JCQeG9IlxqOgf1cCg5h5vAzlewN91Q== + dependencies: + "@prisma/debug" "5.17.0" + "@prisma/engines-version" "5.17.0-31.393aa359c9ad4a4bb28630fb5613f9c281cde053" + "@prisma/get-platform" "5.17.0" + +"@prisma/get-platform@5.17.0": + version "5.17.0" + resolved "https://registry.yarnpkg.com/@prisma/get-platform/-/get-platform-5.17.0.tgz#89fdcae2adddebbbf0e7bd0474a6c49d6023519b" + integrity sha512-UlDgbRozCP1rfJ5Tlkf3Cnftb6srGrEQ4Nm3og+1Se2gWmCZ0hmPIi+tQikGDUVLlvOWx3Gyi9LzgRP+HTXV9w== + dependencies: + "@prisma/debug" "5.17.0" + "@react-aria/breadcrumbs@3.5.13": version "3.5.13" resolved "https://registry.yarnpkg.com/@react-aria/breadcrumbs/-/breadcrumbs-3.5.13.tgz#2686f7f460f20d67fe5cdfe185e32e3e78186962" @@ -2023,6 +2071,18 @@ resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.17.6.tgz#193ced6a40c8006cfc1ca3f4553444fb38f0e543" integrity sha512-OpXEVoCKSS3lQqjx9GGGOapBeuW5eUboYHRlHP9urXPX25IKZ6AnP5ZRxtVf63iieUbsHxLn8NQ5Nlftc6yzAA== +"@types/webidl-conversions@*": + version "7.0.3" + resolved "https://registry.yarnpkg.com/@types/webidl-conversions/-/webidl-conversions-7.0.3.tgz#1306dbfa53768bcbcfc95a1c8cde367975581859" + integrity sha512-CiJJvcRtIgzadHCYXw7dqEnMNRjhGZlYK05Mj9OyktqV8uVT8fD2BFOB7S1uwBE3Kj2Z+4UyPmFw/Ixgw/LAlA== + +"@types/whatwg-url@^11.0.2": + version "11.0.5" + resolved "https://registry.yarnpkg.com/@types/whatwg-url/-/whatwg-url-11.0.5.tgz#aaa2546e60f0c99209ca13360c32c78caf2c409f" + integrity sha512-coYR071JRaHa+xoEvvYqvnIHaVqaYrLPbsufM9BF63HkwI5Lgmy2QR8Q5K/lYDYo5AK82wOvSOS0UsLTpTG7uQ== + dependencies: + "@types/webidl-conversions" "*" + abab@^2.0.5, abab@^2.0.6: version "2.0.6" resolved "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz" @@ -2158,6 +2218,11 @@ browser-process-hrtime@^1.0.0: resolved "https://registry.npmjs.org/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz" integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow== +bson@^6.7.0: + version "6.8.0" + resolved "https://registry.yarnpkg.com/bson/-/bson-6.8.0.tgz#5063c41ba2437c2b8ff851b50d9e36cb7aaa7525" + integrity sha512-iOJg8pr7wq2tg/zSlCCHMi3hMm5JTOxLTagf3zxhcenHsFp+c6uOs6K7W5UE7A4QIJGtqh/ZovFNMP4mOPJynQ== + busboy@1.6.0: version "1.6.0" resolved "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz" @@ -2852,6 +2917,11 @@ mathjs@^13.0.2: tiny-emitter "^2.1.0" typed-function "^4.2.1" +memory-pager@^1.0.2: + version "1.5.0" + resolved "https://registry.yarnpkg.com/memory-pager/-/memory-pager-1.5.0.tgz#d8751655d22d384682741c972f2c3d6dfa3e66b5" + integrity sha512-ZS4Bp4r/Zoeq6+NLJpP+0Zzm0pR8whtGPf1XExKLJBAczGMnSi3It14OiNCStjQjM6NU1okjQGSxgEZN8eBYKg== + merge2@^1.3.0: version "1.4.1" resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz" @@ -2926,6 +2996,23 @@ mkdirp@^1.0.3: resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-1.0.4.tgz#3eb5ed62622756d79a5f0e2a221dfebad75c2f7e" integrity sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw== +mongodb-connection-string-url@^3.0.0: + version "3.0.1" + resolved "https://registry.yarnpkg.com/mongodb-connection-string-url/-/mongodb-connection-string-url-3.0.1.tgz#c13e6ac284ae401752ebafdb8cd7f16c6723b141" + integrity sha512-XqMGwRX0Lgn05TDB4PyG2h2kKO/FfWJyCzYQbIhXUxz7ETt0I/FqHjUeqj37irJ+Dl1ZtU82uYyj14u2XsZKfg== + dependencies: + "@types/whatwg-url" "^11.0.2" + whatwg-url "^13.0.0" + +mongodb@^6.8.0: + version "6.8.0" + resolved "https://registry.yarnpkg.com/mongodb/-/mongodb-6.8.0.tgz#680450f113cdea6d2d9f7121fe57cd29111fd2ce" + integrity sha512-HGQ9NWDle5WvwMnrvUxsFYPd3JEbqD3RgABHBQRuoCEND0qzhsd0iH5ypHsf1eJ+sXmvmyKpP+FLOKY8Il7jMw== + dependencies: + "@mongodb-js/saslprep" "^1.1.5" + bson "^6.7.0" + mongodb-connection-string-url "^3.0.0" + ms@2.1.2: version "2.1.2" resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz" @@ -3134,12 +3221,19 @@ postcss@^8, postcss@^8.4.23: picocolors "^1.0.0" source-map-js "^1.2.0" +prisma@^5.17.0: + version "5.17.0" + resolved "https://registry.yarnpkg.com/prisma/-/prisma-5.17.0.tgz#267b43921ab94805b010537cffa5ccaf530fa066" + integrity sha512-m4UWkN5lBE6yevqeOxEvmepnL5cNPEjzMw2IqDB59AcEV6w7D8vGljDLd1gPFH+W6gUxw9x7/RmN5dCS/WTPxA== + dependencies: + "@prisma/engines" "5.17.0" + psl@^1.1.33: version "1.9.0" resolved "https://registry.npmjs.org/psl/-/psl-1.9.0.tgz" integrity sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag== -punycode@^2.1.1: +punycode@^2.1.1, punycode@^2.3.0: version "2.3.1" resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz" integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg== @@ -3378,6 +3472,13 @@ source-map@~0.6.1: resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz" integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g== +sparse-bitfield@^3.0.3: + version "3.0.3" + resolved "https://registry.yarnpkg.com/sparse-bitfield/-/sparse-bitfield-3.0.3.tgz#ff4ae6e68656056ba4b3e792ab3334d38273ca11" + integrity sha512-kvzhi7vqKTfkh0PZU+2D2PIllw2ymqJKujUcyPMd9Y75Nv4nPbGJZXNhxsgdQab2BmlDct1YnfQCguEvHr7VsQ== + dependencies: + memory-pager "^1.0.2" + streamsearch@^1.1.0: version "1.1.0" resolved "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz" @@ -3563,6 +3664,13 @@ tr46@^3.0.0: dependencies: punycode "^2.1.1" +tr46@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/tr46/-/tr46-4.1.1.tgz#281a758dcc82aeb4fe38c7dfe4d11a395aac8469" + integrity sha512-2lv/66T7e5yNyhAAC4NaKe5nVavzuGJQVVtRYLyQ2OI8tsJ61PMLlelehb0wi2Hx6+hT/OJUWZcw8MjlSRnxvw== + dependencies: + punycode "^2.3.0" + tr46@~0.0.3: version "0.0.3" resolved "https://registry.yarnpkg.com/tr46/-/tr46-0.0.3.tgz#8184fd347dac9cdc185992f3a6622e14b9d9ab6a" @@ -3690,6 +3798,14 @@ whatwg-url@^11.0.0: tr46 "^3.0.0" webidl-conversions "^7.0.0" +whatwg-url@^13.0.0: + version "13.0.0" + resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-13.0.0.tgz#b7b536aca48306394a34e44bda8e99f332410f8f" + integrity sha512-9WWbymnqj57+XEuqADHrCJ2eSXzn8WXIW/YSGaZtb2WKAInQ6CHfaUUcTyyver0p8BDg5StLQq8h1vtZuwmOig== + dependencies: + tr46 "^4.1.1" + webidl-conversions "^7.0.0" + whatwg-url@^5.0.0: version "5.0.0" resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"