Auto stash before rebase of "feature/ui-add" onto "feature/test"
This commit is contained in:
nalpari
parent
d0541b161d
commit
845a469d43
@ -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
5
src/app/UIProvider.js
Normal file
@ -0,0 +1,5 @@
|
||||
import { NextUIProvider } from '@nextui-org/react'
|
||||
|
||||
export default function UIProvider({ children }) {
|
||||
return <NextUIProvider>{children}</NextUIProvider>
|
||||
}
|
||||
@ -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>
|
||||
)
|
||||
|
||||
@ -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}
|
||||
>
|
||||
회전
|
||||
|
||||
@ -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()],
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user