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"
},
"dependencies": {
"@nextui-org/react": "^2.4.2",
"fabric": "^5.3.0",
"framer-motion": "^11.2.13",
"next": "14.2.3",
"react": "^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 Headers from '@/components/Headers'
import RecoilRootWrapper from './RecoilWrapper'
import UIProvider from './UIProvider'
const inter = Inter({ subsets: ['latin'] })
@ -15,7 +16,9 @@ export default function RootLayout({ children }) {
<html lang="en">
<body className={inter.className}>
<Headers />
<RecoilRootWrapper>{children}</RecoilRootWrapper>
<RecoilRootWrapper>
<UIProvider>{children}</UIProvider>
</RecoilRootWrapper>
</body>
</html>
)

46
src/components/Roof2.jsx
View File

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

20
tailwind.config.js
View File

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