📌fix: nextui 제거 및 코드 수정
This commit is contained in:
yoosangwook
parent
eeb13ce9b5
commit
29378cbe72
@ -11,7 +11,6 @@
|
||||
"serve": "node server.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nextui-org/react": "^2.4.2",
|
||||
"ag-grid-react": "^32.0.2",
|
||||
"axios": "^1.7.8",
|
||||
"big.js": "^6.2.2",
|
||||
|
||||
@ -1,5 +0,0 @@
|
||||
import { NextUIProvider } from '@nextui-org/react'
|
||||
|
||||
export default function UIProvider({ children }) {
|
||||
return <NextUIProvider>{children}</NextUIProvider>
|
||||
}
|
||||
@ -9,7 +9,6 @@ import { deepCopyArray } from '@/util/common-utils'
|
||||
import { canvasState } from '@/store/canvasAtom'
|
||||
import * as turf from '@turf/turf'
|
||||
import { POLYGON_TYPE } from '@/common/common'
|
||||
import { useModal } from '@nextui-org/react'
|
||||
import { useModule } from '@/hooks/module/useModule'
|
||||
import { useSwal } from '@/hooks/useSwal'
|
||||
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import { Button, Input } from '@nextui-org/react'
|
||||
import { useRecoilState, useSetRecoilState } from 'recoil'
|
||||
import { modalState } from '@/store/modalAtom'
|
||||
import { fabric } from 'fabric'
|
||||
@ -19,7 +18,7 @@ const ObjectPlacement = ({ canvas }) => {
|
||||
const [batchType, setBatchType] = useState(BATCH_TYPE.OPENING)
|
||||
|
||||
// free or dimension 프리 / 치수
|
||||
const [inputType, setInputType] = useState(INPUT_TYPE.FREE)
|
||||
const [inputType, setinputType] = useState(INPUT_TYPE.FREE)
|
||||
|
||||
const handleSave = () => {
|
||||
setMode(batchType)
|
||||
@ -38,7 +37,7 @@ const ObjectPlacement = ({ canvas }) => {
|
||||
|
||||
<div className="mb-4">
|
||||
<div className="flex">
|
||||
<Button
|
||||
<button
|
||||
className={`w-1/2 py-2 ${objectPlacementMode.batchType === BATCH_TYPE.OPENING ? 'bg-blue-500 text-white rounded-l' : 'bg-gray-200 text-gray-700 rounded-r'}`}
|
||||
onClick={() => {
|
||||
setBatchType(BATCH_TYPE.OPENING)
|
||||
@ -46,8 +45,8 @@ const ObjectPlacement = ({ canvas }) => {
|
||||
}}
|
||||
>
|
||||
개구 배치
|
||||
</Button>
|
||||
<Button
|
||||
</button>
|
||||
<button
|
||||
className={`w-1/2 py-2 ${objectPlacementMode.batchType === BATCH_TYPE.SHADOW ? 'bg-blue-500 text-white rounded-l' : 'bg-gray-200 text-gray-700 rounded-r'}`}
|
||||
onClick={() => {
|
||||
setBatchType(BATCH_TYPE.SHADOW)
|
||||
@ -55,7 +54,7 @@ const ObjectPlacement = ({ canvas }) => {
|
||||
}}
|
||||
>
|
||||
그림자 배치
|
||||
</Button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -64,7 +63,7 @@ const ObjectPlacement = ({ canvas }) => {
|
||||
|
||||
<div className="mb-2">
|
||||
<label className="inline-flex items-center">
|
||||
<Input
|
||||
<input
|
||||
type="radio"
|
||||
name="inputType"
|
||||
checked={objectPlacementMode.inputType === INPUT_TYPE.FREE}
|
||||
@ -79,7 +78,7 @@ const ObjectPlacement = ({ canvas }) => {
|
||||
|
||||
<div className="mb-2">
|
||||
<label className="inline-flex items-center">
|
||||
<Input
|
||||
<input
|
||||
type="radio"
|
||||
name="inputType"
|
||||
checked={objectPlacementMode.inputType === INPUT_TYPE.DIMENSION}
|
||||
@ -95,7 +94,7 @@ const ObjectPlacement = ({ canvas }) => {
|
||||
<div className="flex mb-2">
|
||||
<div className="mr-2">
|
||||
<label className="block text-gray-700 text-sm mb-1">가로길이</label>
|
||||
<Input
|
||||
<input
|
||||
type="text"
|
||||
className="w-full px-3 py-2 border rounded"
|
||||
placeholder="mm"
|
||||
@ -108,7 +107,7 @@ const ObjectPlacement = ({ canvas }) => {
|
||||
|
||||
<div>
|
||||
<label className="block text-gray-700 text-sm mb-1">세로길이</label>
|
||||
<Input
|
||||
<input
|
||||
type="text"
|
||||
className="w-full px-3 py-2 border rounded"
|
||||
placeholder="mm"
|
||||
@ -122,7 +121,7 @@ const ObjectPlacement = ({ canvas }) => {
|
||||
|
||||
<div className="mb-4">
|
||||
<label className="inline-flex items-center">
|
||||
<Input
|
||||
<input
|
||||
type="checkbox"
|
||||
name={`areaBoundary`}
|
||||
checked={objectPlacementMode.areaBoundary}
|
||||
@ -134,9 +133,9 @@ const ObjectPlacement = ({ canvas }) => {
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<Button onClick={handleSave} className="bg-gray-500 text-white py-2 px-4 rounded">
|
||||
<button onClick={handleSave} className="bg-gray-500 text-white py-2 px-4 rounded">
|
||||
저장
|
||||
</Button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
import { Button, Input } from '@nextui-org/react'
|
||||
import { useState } from 'react'
|
||||
import { useRecoilValue, useSetRecoilState } from 'recoil'
|
||||
import { modalState } from '@/store/modalAtom'
|
||||
@ -780,9 +779,9 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
||||
const buttons = []
|
||||
for (let i = 1; i <= 29; i++) {
|
||||
buttons.push(
|
||||
<Button key={i} className="m-1 p-2" value={i} onClick={onChangeType}>
|
||||
<button key={i} className="m-1 p-2" value={i} onClick={onChangeType}>
|
||||
{i}번 추가
|
||||
</Button>,
|
||||
</button>,
|
||||
)
|
||||
}
|
||||
|
||||
@ -798,97 +797,97 @@ export const SurfaceShapeModal = ({ canvas }) => {
|
||||
{type === 1 ? (
|
||||
<div>
|
||||
길이1
|
||||
<Input type="text" name={'length1'} value={length1} onChange={setLength} />
|
||||
<input type="text" name={'length1'} value={length1} onChange={setLength} />
|
||||
{length3 === 0 && (
|
||||
<>
|
||||
길이2
|
||||
<Input type="text" name={'length2'} value={length2} onChange={setLength} />
|
||||
<input type="text" name={'length2'} value={length2} onChange={setLength} />
|
||||
</>
|
||||
)}
|
||||
대각선 <Input type="text" name={'length3'} value={length3} onChange={setLength} />
|
||||
대각선 <input type="text" name={'length3'} value={length3} onChange={setLength} />
|
||||
</div>
|
||||
) : [2, 4, 5].includes(type) ? (
|
||||
<div>
|
||||
길이1
|
||||
<Input type="text" name={'length1'} value={length1} onChange={setLength} />
|
||||
<input type="text" name={'length1'} value={length1} onChange={setLength} />
|
||||
길이2
|
||||
<Input type="text" name={'length2'} value={length2} onChange={setLength} />
|
||||
<input type="text" name={'length2'} value={length2} onChange={setLength} />
|
||||
</div>
|
||||
) : [3, 6, 7, 8, 9, 24, 28, 29].includes(type) ? (
|
||||
<>
|
||||
길이1
|
||||
<Input type="text" name={'length1'} value={length1} onChange={setLength} />
|
||||
<input type="text" name={'length1'} value={length1} onChange={setLength} />
|
||||
길이2
|
||||
<Input type="text" name={'length2'} value={length2} onChange={setLength} />
|
||||
<input type="text" name={'length2'} value={length2} onChange={setLength} />
|
||||
길이3
|
||||
<Input type="text" name={'length3'} value={length3} onChange={setLength} />
|
||||
<input type="text" name={'length3'} value={length3} onChange={setLength} />
|
||||
</>
|
||||
) : [11, 12, 19, 20, 21, 22, 25, 26, 27].includes(type) ? (
|
||||
<>
|
||||
길이1
|
||||
<Input type="text" name={'length1'} value={length1} onChange={setLength} />
|
||||
<input type="text" name={'length1'} value={length1} onChange={setLength} />
|
||||
길이2
|
||||
<Input type="text" name={'length2'} value={length2} onChange={setLength} />
|
||||
<input type="text" name={'length2'} value={length2} onChange={setLength} />
|
||||
길이3
|
||||
<Input type="text" name={'length3'} value={length3} onChange={setLength} />
|
||||
<input type="text" name={'length3'} value={length3} onChange={setLength} />
|
||||
길이4
|
||||
<Input type="text" name={'length4'} value={length4} onChange={setLength} />
|
||||
<input type="text" name={'length4'} value={length4} onChange={setLength} />
|
||||
</>
|
||||
) : [10, 13, 14, 15, 16, 17, 18, 23].includes(type) ? (
|
||||
<>
|
||||
길이1
|
||||
<Input type="text" name={'length1'} value={length1} onChange={setLength} />
|
||||
<input type="text" name={'length1'} value={length1} onChange={setLength} />
|
||||
길이2
|
||||
<Input type="text" name={'length2'} value={length2} onChange={setLength} />
|
||||
<input type="text" name={'length2'} value={length2} onChange={setLength} />
|
||||
길이3
|
||||
<Input type="text" name={'length3'} value={length3} onChange={setLength} />
|
||||
<input type="text" name={'length3'} value={length3} onChange={setLength} />
|
||||
길이4
|
||||
<Input type="text" name={'length4'} value={length4} onChange={setLength} />
|
||||
<input type="text" name={'length4'} value={length4} onChange={setLength} />
|
||||
길이5
|
||||
<Input type="text" name={'length5'} value={length5} onChange={setLength} />
|
||||
<input type="text" name={'length5'} value={length5} onChange={setLength} />
|
||||
</>
|
||||
) : (
|
||||
<></>
|
||||
)}
|
||||
<div className="flex flex-col items-center">
|
||||
<div className="flex">
|
||||
<Button
|
||||
<button
|
||||
className={`p-4 border rounded-lg ${direction === 'north' ? 'bg-blue-200' : ''} flex items-center justify-center`}
|
||||
onClick={() => setDirection('north')}
|
||||
>
|
||||
북
|
||||
</Button>
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex space-x-4">
|
||||
<Button
|
||||
<button
|
||||
className={`p-4 border rounded-lg ${direction === 'west' ? 'bg-blue-200' : ''} flex items-center justify-center`}
|
||||
onClick={() => setDirection('west')}
|
||||
>
|
||||
서
|
||||
</Button>
|
||||
<Button
|
||||
</button>
|
||||
<button
|
||||
className={`p-4 border rounded-lg ${direction === 'east' ? 'bg-blue-200' : ''} flex items-center justify-center`}
|
||||
onClick={() => setDirection('east')}
|
||||
>
|
||||
동
|
||||
</Button>
|
||||
</button>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<Button
|
||||
<button
|
||||
className={`p-4 border rounded-lg ${direction === 'south' ? 'bg-blue-200' : ''} flex items-center justify-center`}
|
||||
onClick={() => setDirection('south')}
|
||||
>
|
||||
남
|
||||
</Button>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Button className="m-1 p-2" color={'primary'} onClick={closeModal}>
|
||||
<button className="m-1 p-2" color={'primary'} onClick={closeModal}>
|
||||
닫기
|
||||
</Button>
|
||||
<Button className="m-1 p-2" color={'primary'} onClick={onSave}>
|
||||
</button>
|
||||
<button className="m-1 p-2" color={'primary'} onClick={onSave}>
|
||||
저장
|
||||
</Button>
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
@ -1,38 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { memo } from 'react'
|
||||
import { Card, Image } from '@nextui-org/react'
|
||||
|
||||
function ThumbnailList(props) {
|
||||
const { thumbnails, canvas } = props
|
||||
|
||||
const handleSelectThumb = (canvasStatus) => {
|
||||
console.log('canvasStatus', canvasStatus.length)
|
||||
canvas?.clear() // 캔버스를 초기화합니다.
|
||||
canvas?.loadFromJSON(JSON.parse(canvasStatus), function () {
|
||||
canvas?.renderAll() // 캔버스를 다시 그립니다.
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex justify-center m-4 w-full">
|
||||
{thumbnails.length > 0 &&
|
||||
thumbnails.map((thumbnail, index) => (
|
||||
<Card isFooterBlurred radius="lg" key={index} className="border-none m-2">
|
||||
<Image
|
||||
alt="Woman listing to music"
|
||||
className="object-cover"
|
||||
height={200}
|
||||
src={thumbnail.imageName}
|
||||
width={200}
|
||||
onClick={() => handleSelectThumb(thumbnail.canvasStatus)}
|
||||
/>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(ThumbnailList)
|
||||
@ -1,5 +1,3 @@
|
||||
const { nextui } = require('@nextui-org/react')
|
||||
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [
|
||||
@ -12,11 +10,10 @@ module.exports = {
|
||||
extend: {
|
||||
backgroundImage: {
|
||||
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
|
||||
'gradient-conic':
|
||||
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
||||
'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
|
||||
},
|
||||
},
|
||||
},
|
||||
darkMode: 'class',
|
||||
plugins: [nextui()],
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user