qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/ui-add' into feature/test

Browse Source
This commit is contained in:
nalpari 2024-07-08 13:17:49 +09:00
commit ee88a3e47e
6 changed files with 2123 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -9,7 +9,9 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"@nextui-org/react": "^2.4.2",
"fabric": "^5.3.0", "fabric": "^5.3.0",
"framer-motion": "^11.2.13",
"next": "14.2.3", "next": "14.2.3",
"react": "^18", "react": "^18",
"react-dom": "^18", "react-dom": "^18",

5
src/app/UIProvider.js Normal file
View File

@ -0,0 +1,5 @@
import { NextUIProvider } from '@nextui-org/react'
export default function UIProvider({ children }) {
return <NextUIProvider>{children}</NextUIProvider>
}

5
src/app/layout.js
View File

@ -2,6 +2,7 @@ import { Inter } from 'next/font/google'
import './globals.css' import './globals.css'
import Headers from '@/components/Headers' import Headers from '@/components/Headers'
import RecoilRootWrapper from './RecoilWrapper' import RecoilRootWrapper from './RecoilWrapper'
import UIProvider from './UIProvider'
const inter = Inter({ subsets: ['latin'] }) const inter = Inter({ subsets: ['latin'] })
@ -15,7 +16,9 @@ export default function RootLayout({ children }) {
<html lang="en"> <html lang="en">
<body className={inter.className}> <body className={inter.className}>
<Headers /> <Headers />
<RecoilRootWrapper>{children}</RecoilRootWrapper> <RecoilRootWrapper>
<UIProvider>{children}</UIProvider>
</RecoilRootWrapper>
</body> </body>
</html> </html>
) )

46
src/components/Roof2.jsx
View File

@ -7,7 +7,11 @@ import QPolygon from '@/components/fabric/QPolygon'
import RangeSlider from './ui/RangeSlider' import RangeSlider from './ui/RangeSlider'
import { useRecoilState, useRecoilValue } from 'recoil' import { useRecoilState, useRecoilValue } from 'recoil'
import { canvasSizeState, fontSizeState, sortedPolygonArray } from '@/store/canvasAtom' import {
canvasSizeState,
fontSizeState,
sortedPolygonArray,
} from '@/store/canvasAtom'
export default function Roof2() { export default function Roof2() {
const { const {
@ -165,9 +169,9 @@ export default function Roof2() {
<> <>
{canvas && ( {canvas && (
<> <>
<div className="flex justify-center my-8"> <div className=" my-8 w-full text:pretty">
<button <button
className={`w-30 mx-2 p-2 rounded ${ className={`w-30 m-2 p-2 rounded ${
mode === Mode.DEFAULT ? 'bg-blue-500' : 'bg-gray-500' mode === Mode.DEFAULT ? 'bg-blue-500' : 'bg-gray-500'
} text-white`} } text-white`}
onClick={() => changeMode(canvas, Mode.DEFAULT)} onClick={() => changeMode(canvas, Mode.DEFAULT)}
@ -175,7 +179,7 @@ export default function Roof2() {
모드 DEFAULT 모드 DEFAULT
</button> </button>
<button <button
className={`w-30 mx-2 p-2 rounded ${ className={`w-30 m-2 p-2 rounded ${
mode === Mode.DRAW_LINE ? 'bg-blue-500' : 'bg-gray-500' mode === Mode.DRAW_LINE ? 'bg-blue-500' : 'bg-gray-500'
} text-white`} } text-white`}
onClick={() => changeMode(canvas, Mode.DRAW_LINE)} onClick={() => changeMode(canvas, Mode.DRAW_LINE)}
@ -183,7 +187,7 @@ export default function Roof2() {
기준선 긋기 모드 기준선 긋기 모드
</button> </button>
<button <button
className={`w-30 mx-2 p-2 rounded ${ className={`w-30 m-2 p-2 rounded ${
mode === Mode.EDIT ? 'bg-blue-500' : 'bg-gray-500' mode === Mode.EDIT ? 'bg-blue-500' : 'bg-gray-500'
} text-white`} } text-white`}
onClick={() => changeMode(canvas, Mode.EDIT)} onClick={() => changeMode(canvas, Mode.EDIT)}
@ -191,7 +195,7 @@ export default function Roof2() {
에디팅모드 에디팅모드
</button> </button>
<button <button
className={`w-30 mx-2 p-2 rounded ${ className={`w-30 m-2 p-2 rounded ${
mode === Mode.TEMPLATE ? 'bg-blue-500' : 'bg-gray-500' mode === Mode.TEMPLATE ? 'bg-blue-500' : 'bg-gray-500'
} text-white`} } text-white`}
onClick={() => changeMode(canvas, Mode.TEMPLATE)} onClick={() => changeMode(canvas, Mode.TEMPLATE)}
@ -199,7 +203,7 @@ export default function Roof2() {
템플릿 템플릿
</button> </button>
<button <button
className={`w-30 mx-2 p-2 rounded ${ className={`w-30 m-2 p-2 rounded ${
mode === Mode.TEXTBOX ? 'bg-blue-500' : 'bg-gray-500' mode === Mode.TEXTBOX ? 'bg-blue-500' : 'bg-gray-500'
} text-white`} } text-white`}
onClick={() => changeMode(canvas, Mode.TEXTBOX)} onClick={() => changeMode(canvas, Mode.TEXTBOX)}
@ -207,7 +211,7 @@ export default function Roof2() {
텍스트박스 모드 텍스트박스 모드
</button> </button>
<button <button
className={`w-30 mx-2 p-2 rounded ${ className={`w-30 m-2 p-2 rounded ${
mode === Mode.DRAW_RECT ? 'bg-blue-500' : 'bg-gray-500' mode === Mode.DRAW_RECT ? 'bg-blue-500' : 'bg-gray-500'
} text-white`} } text-white`}
onClick={() => changeMode(canvas, Mode.DRAW_RECT)} onClick={() => changeMode(canvas, Mode.DRAW_RECT)}
@ -215,56 +219,56 @@ export default function Roof2() {
사각형 생성 모드 사각형 생성 모드
</button> </button>
<button <button
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white" className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
onClick={handleUndo} onClick={handleUndo}
> >
Undo Undo
</button> </button>
<button <button
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white" className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
onClick={handleRedo} onClick={handleRedo}
> >
Redo Redo
</button> </button>
<button <button
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white" className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
onClick={handleClear} onClick={handleClear}
> >
clear clear
</button> </button>
<button <button
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white" className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
onClick={zoomIn} onClick={zoomIn}
> >
확대 확대
</button> </button>
<button <button
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white" className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
onClick={zoomOut} onClick={zoomOut}
> >
축소 축소
</button> </button>
현재 줌 : {zoom}% 현재 줌 : {zoom}%
<button <button
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white" className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
onClick={makeRect} onClick={makeRect}
> >
사각형만들기 사각형만들기
</button> </button>
<button <button
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white" className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
onClick={makeLine} onClick={makeLine}
> >
선 추가 선 추가
</button> </button>
<button <button
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white" className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
onClick={makePolygon} onClick={makePolygon}
> >
다각형 추가 다각형 추가
</button> </button>
<button <button
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white" className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
onClick={() => { onClick={() => {
setCanvasBackgroundWithDots(canvas, 10) setCanvasBackgroundWithDots(canvas, 10)
}} }}
@ -272,7 +276,7 @@ export default function Roof2() {
점선 추가 점선 추가
</button> </button>
<button <button
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white" className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
onClick={() => { onClick={() => {
setCanvasBackgroundWithDots(canvas, 20) setCanvasBackgroundWithDots(canvas, 20)
}} }}
@ -280,7 +284,7 @@ export default function Roof2() {
점선 추가 점선 추가
</button> </button>
<button <button
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white" className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
onClick={() => { onClick={() => {
saveImage() saveImage()
}} }}
@ -288,13 +292,13 @@ export default function Roof2() {
저장 저장
</button> </button>
<button <button
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white" className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
onClick={makeQPolygon} onClick={makeQPolygon}
> >
QPolygon QPolygon
</button> </button>
<button <button
className="w-30 mx-2 p-2 rounded bg-gray-500 text-white" className="w-30 m-2 p-2 rounded bg-gray-500 text-white"
onClick={rotateShape} onClick={rotateShape}
> >
회전 회전

20
tailwind.config.js
View File

@ -1,18 +1,22 @@
const { nextui } = require('@nextui-org/react')
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: [ content: [
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}", './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
"./src/components/**/*.{js,ts,jsx,tsx,mdx}", './src/components/**/*.{js,ts,jsx,tsx,mdx}',
"./src/app/**/*.{js,ts,jsx,tsx,mdx}", './src/app/**/*.{js,ts,jsx,tsx,mdx}',
'./node_modules/@nextui-org/theme/dist/**/*.{js,ts,jsx,tsx}',
], ],
theme: { theme: {
extend: { extend: {
backgroundImage: { backgroundImage: {
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))", 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
"gradient-conic": 'gradient-conic':
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
}, },
}, },
}, },
plugins: [], darkMode: 'class',
}; plugins: [nextui()],
}

2086
yarn.lock
View File

File diff suppressed because it is too large Load Diff