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

📌fix: nextui 제거 및 코드 수정

Browse Source
This commit is contained in:
yoosangwook 2025-03-07 12:39:14 +09:00
parent eeb13ce9b5
commit 29378cbe72
7 changed files with 45 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -11,7 +11,6 @@
"serve": "node server.js" "serve": "node server.js"
}, },
"dependencies": { "dependencies": {
"@nextui-org/react": "^2.4.2",
"ag-grid-react": "^32.0.2", "ag-grid-react": "^32.0.2",
"axios": "^1.7.8", "axios": "^1.7.8",
"big.js": "^6.2.2", "big.js": "^6.2.2",

5
src/app/UIProvider.js
View File

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

1
src/components/floor-plan/modal/module/PanelEdit.jsx
View File

@ -9,7 +9,6 @@ import { deepCopyArray } from '@/util/common-utils'
import { canvasState } from '@/store/canvasAtom' import { canvasState } from '@/store/canvasAtom'
import * as turf from '@turf/turf' import * as turf from '@turf/turf'
import { POLYGON_TYPE } from '@/common/common' import { POLYGON_TYPE } from '@/common/common'
import { useModal } from '@nextui-org/react'
import { useModule } from '@/hooks/module/useModule' import { useModule } from '@/hooks/module/useModule'
import { useSwal } from '@/hooks/useSwal' import { useSwal } from '@/hooks/useSwal'

25
src/components/ui/ObjectPlacement.jsx
View File

@ -1,5 +1,4 @@
import React, { useCallback, useEffect, useRef, useState } from 'react' import React, { useCallback, useEffect, useRef, useState } from 'react'
import { Button, Input } from '@nextui-org/react'
import { useRecoilState, useSetRecoilState } from 'recoil' import { useRecoilState, useSetRecoilState } from 'recoil'
import { modalState } from '@/store/modalAtom' import { modalState } from '@/store/modalAtom'
import { fabric } from 'fabric' import { fabric } from 'fabric'
@ -19,7 +18,7 @@ const ObjectPlacement = ({ canvas }) => {
const [batchType, setBatchType] = useState(BATCH_TYPE.OPENING) const [batchType, setBatchType] = useState(BATCH_TYPE.OPENING)
// free or dimension 프리 / 치수 // free or dimension 프리 / 치수
const [inputType, setInputType] = useState(INPUT_TYPE.FREE) const [inputType, setinputType] = useState(INPUT_TYPE.FREE)
const handleSave = () => { const handleSave = () => {
setMode(batchType) setMode(batchType)
@ -38,7 +37,7 @@ const ObjectPlacement = ({ canvas }) => {
<div className="mb-4"> <div className="mb-4">
<div className="flex"> <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'}`} 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={() => { onClick={() => {
setBatchType(BATCH_TYPE.OPENING) 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'}`} 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={() => { onClick={() => {
setBatchType(BATCH_TYPE.SHADOW) setBatchType(BATCH_TYPE.SHADOW)
@ -55,7 +54,7 @@ const ObjectPlacement = ({ canvas }) => {
}} }}
> >
그림자 배치 그림자 배치
</Button> </button>
</div> </div>
</div> </div>
@ -64,7 +63,7 @@ const ObjectPlacement = ({ canvas }) => {
<div className="mb-2"> <div className="mb-2">
<label className="inline-flex items-center"> <label className="inline-flex items-center">
<Input <input
type="radio" type="radio"
name="inputType" name="inputType"
checked={objectPlacementMode.inputType === INPUT_TYPE.FREE} checked={objectPlacementMode.inputType === INPUT_TYPE.FREE}
@ -79,7 +78,7 @@ const ObjectPlacement = ({ canvas }) => {
<div className="mb-2"> <div className="mb-2">
<label className="inline-flex items-center"> <label className="inline-flex items-center">
<Input <input
type="radio" type="radio"
name="inputType" name="inputType"
checked={objectPlacementMode.inputType === INPUT_TYPE.DIMENSION} checked={objectPlacementMode.inputType === INPUT_TYPE.DIMENSION}
@ -95,7 +94,7 @@ const ObjectPlacement = ({ canvas }) => {
<div className="flex mb-2"> <div className="flex mb-2">
<div className="mr-2"> <div className="mr-2">
<label className="block text-gray-700 text-sm mb-1">가로길이</label> <label className="block text-gray-700 text-sm mb-1">가로길이</label>
<Input <input
type="text" type="text"
className="w-full px-3 py-2 border rounded" className="w-full px-3 py-2 border rounded"
placeholder="mm" placeholder="mm"
@ -108,7 +107,7 @@ const ObjectPlacement = ({ canvas }) => {
<div> <div>
<label className="block text-gray-700 text-sm mb-1">세로길이</label> <label className="block text-gray-700 text-sm mb-1">세로길이</label>
<Input <input
type="text" type="text"
className="w-full px-3 py-2 border rounded" className="w-full px-3 py-2 border rounded"
placeholder="mm" placeholder="mm"
@ -122,7 +121,7 @@ const ObjectPlacement = ({ canvas }) => {
<div className="mb-4"> <div className="mb-4">
<label className="inline-flex items-center"> <label className="inline-flex items-center">
<Input <input
type="checkbox" type="checkbox"
name={`areaBoundary`} name={`areaBoundary`}
checked={objectPlacementMode.areaBoundary} checked={objectPlacementMode.areaBoundary}
@ -134,9 +133,9 @@ const ObjectPlacement = ({ canvas }) => {
</div> </div>
<div className="text-center"> <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> </div>
</div> </div>

63
src/components/ui/SurfaceShape.jsx
View File

@ -1,4 +1,3 @@
import { Button, Input } from '@nextui-org/react'
import { useState } from 'react' import { useState } from 'react'
import { useRecoilValue, useSetRecoilState } from 'recoil' import { useRecoilValue, useSetRecoilState } from 'recoil'
import { modalState } from '@/store/modalAtom' import { modalState } from '@/store/modalAtom'
@ -780,9 +779,9 @@ export const SurfaceShapeModal = ({ canvas }) => {
const buttons = [] const buttons = []
for (let i = 1; i <= 29; i++) { for (let i = 1; i <= 29; i++) {
buttons.push( 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}번 추가 {i}번 추가
</Button>, </button>,
) )
} }
@ -798,97 +797,97 @@ export const SurfaceShapeModal = ({ canvas }) => {
{type === 1 ? ( {type === 1 ? (
<div> <div>
길이1 길이1
<Input type="text" name={'length1'} value={length1} onChange={setLength} /> <input type="text" name={'length1'} value={length1} onChange={setLength} />
{length3 === 0 && ( {length3 === 0 && (
<> <>
길이2 길이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> </div>
) : [2, 4, 5].includes(type) ? ( ) : [2, 4, 5].includes(type) ? (
<div> <div>
길이1 길이1
<Input type="text" name={'length1'} value={length1} onChange={setLength} /> <input type="text" name={'length1'} value={length1} onChange={setLength} />
길이2 길이2
<Input type="text" name={'length2'} value={length2} onChange={setLength} /> <input type="text" name={'length2'} value={length2} onChange={setLength} />
</div> </div>
) : [3, 6, 7, 8, 9, 24, 28, 29].includes(type) ? ( ) : [3, 6, 7, 8, 9, 24, 28, 29].includes(type) ? (
<> <>
길이1 길이1
<Input type="text" name={'length1'} value={length1} onChange={setLength} /> <input type="text" name={'length1'} value={length1} onChange={setLength} />
길이2 길이2
<Input type="text" name={'length2'} value={length2} onChange={setLength} /> <input type="text" name={'length2'} value={length2} onChange={setLength} />
길이3 길이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) ? ( ) : [11, 12, 19, 20, 21, 22, 25, 26, 27].includes(type) ? (
<> <>
길이1 길이1
<Input type="text" name={'length1'} value={length1} onChange={setLength} /> <input type="text" name={'length1'} value={length1} onChange={setLength} />
길이2 길이2
<Input type="text" name={'length2'} value={length2} onChange={setLength} /> <input type="text" name={'length2'} value={length2} onChange={setLength} />
길이3 길이3
<Input type="text" name={'length3'} value={length3} onChange={setLength} /> <input type="text" name={'length3'} value={length3} onChange={setLength} />
길이4 길이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) ? ( ) : [10, 13, 14, 15, 16, 17, 18, 23].includes(type) ? (
<> <>
길이1 길이1
<Input type="text" name={'length1'} value={length1} onChange={setLength} /> <input type="text" name={'length1'} value={length1} onChange={setLength} />
길이2 길이2
<Input type="text" name={'length2'} value={length2} onChange={setLength} /> <input type="text" name={'length2'} value={length2} onChange={setLength} />
길이3 길이3
<Input type="text" name={'length3'} value={length3} onChange={setLength} /> <input type="text" name={'length3'} value={length3} onChange={setLength} />
길이4 길이4
<Input type="text" name={'length4'} value={length4} onChange={setLength} /> <input type="text" name={'length4'} value={length4} onChange={setLength} />
길이5 길이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 flex-col items-center">
<div className="flex"> <div className="flex">
<Button <button
className={`p-4 border rounded-lg ${direction === 'north' ? 'bg-blue-200' : ''} flex items-center justify-center`} className={`p-4 border rounded-lg ${direction === 'north' ? 'bg-blue-200' : ''} flex items-center justify-center`}
onClick={() => setDirection('north')} onClick={() => setDirection('north')}
> >
북 북
</Button> </button>
</div> </div>
<div className="flex space-x-4"> <div className="flex space-x-4">
<Button <button
className={`p-4 border rounded-lg ${direction === 'west' ? 'bg-blue-200' : ''} flex items-center justify-center`} className={`p-4 border rounded-lg ${direction === 'west' ? 'bg-blue-200' : ''} flex items-center justify-center`}
onClick={() => setDirection('west')} onClick={() => setDirection('west')}
> >
서 서
</Button> </button>
<Button <button
className={`p-4 border rounded-lg ${direction === 'east' ? 'bg-blue-200' : ''} flex items-center justify-center`} className={`p-4 border rounded-lg ${direction === 'east' ? 'bg-blue-200' : ''} flex items-center justify-center`}
onClick={() => setDirection('east')} onClick={() => setDirection('east')}
> >
동 동
</Button> </button>
</div> </div>
<div className="mt-4"> <div className="mt-4">
<Button <button
className={`p-4 border rounded-lg ${direction === 'south' ? 'bg-blue-200' : ''} flex items-center justify-center`} className={`p-4 border rounded-lg ${direction === 'south' ? 'bg-blue-200' : ''} flex items-center justify-center`}
onClick={() => setDirection('south')} onClick={() => setDirection('south')}
> >
남 남
</Button> </button>
</div> </div>
</div> </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>
<Button className="m-1 p-2" color={'primary'} onClick={onSave}> <button className="m-1 p-2" color={'primary'} onClick={onSave}>
저장 저장
</Button> </button>
</div> </div>
</> </>
) )

38
src/components/ui/ThumbnailLIst.jsx
View File

@ -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)

7
tailwind.config.js
View File

@ -1,5 +1,3 @@
const { nextui } = require('@nextui-org/react')
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: [ content: [
@ -12,11 +10,10 @@ module.exports = {
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))',
}, },
}, },
}, },
darkMode: 'class', darkMode: 'class',
plugins: [nextui()], plugins: [],
} }