From 29378cbe7247bd7229249d55cf618486d04bb3c5 Mon Sep 17 00:00:00 2001
From: yoosangwook <yoo32767@gmail.com>
Date: Fri, 7 Mar 2025 12:39:14 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=8Cfix:=20nextui=20=EC=A0=9C=EA=B1=B0?=
 =?UTF-8?q?=20=EB=B0=8F=20=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |  1 -
 src/app/UIProvider.js                         |  5 --
 .../floor-plan/modal/module/PanelEdit.jsx     |  1 -
 src/components/ui/ObjectPlacement.jsx         | 25 ++++----
 src/components/ui/SurfaceShape.jsx            | 63 +++++++++----------
 src/components/ui/ThumbnailLIst.jsx           | 38 -----------
 tailwind.config.js                            |  7 +--
 7 files changed, 45 insertions(+), 95 deletions(-)
 delete mode 100644 src/app/UIProvider.js
 delete mode 100644 src/components/ui/ThumbnailLIst.jsx

diff --git a/package.json b/package.json
index 84099e97..bf52888e 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/app/UIProvider.js b/src/app/UIProvider.js
deleted file mode 100644
index 02a21441..00000000
--- a/src/app/UIProvider.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import { NextUIProvider } from '@nextui-org/react'
-
-export default function UIProvider({ children }) {
-  return <NextUIProvider>{children}</NextUIProvider>
-}
diff --git a/src/components/floor-plan/modal/module/PanelEdit.jsx b/src/components/floor-plan/modal/module/PanelEdit.jsx
index eafe159a..6ebb14f2 100644
--- a/src/components/floor-plan/modal/module/PanelEdit.jsx
+++ b/src/components/floor-plan/modal/module/PanelEdit.jsx
@@ -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'
 
diff --git a/src/components/ui/ObjectPlacement.jsx b/src/components/ui/ObjectPlacement.jsx
index f7a73a5c..d03f2a1e 100644
--- a/src/components/ui/ObjectPlacement.jsx
+++ b/src/components/ui/ObjectPlacement.jsx
@@ -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>
diff --git a/src/components/ui/SurfaceShape.jsx b/src/components/ui/SurfaceShape.jsx
index 01c557ff..3923108d 100644
--- a/src/components/ui/SurfaceShape.jsx
+++ b/src/components/ui/SurfaceShape.jsx
@@ -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>
     </>
   )
diff --git a/src/components/ui/ThumbnailLIst.jsx b/src/components/ui/ThumbnailLIst.jsx
deleted file mode 100644
index 1d67dbe8..00000000
--- a/src/components/ui/ThumbnailLIst.jsx
+++ /dev/null
@@ -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)
diff --git a/tailwind.config.js b/tailwind.config.js
index efe48113..ae588bc1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -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: [],
 }