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

Merge branch 'dev'

Browse Source
This commit is contained in:
yoosangwook 2024-10-18 17:16:28 +09:00
commit dfde512b6f
52 changed files with 4639 additions and 3386 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.env
View File

@ -1,12 +0,0 @@
# Environment variables declared in this file are automatically made available to Prisma.
# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
# DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"
# DATABASE_URL="mongodb://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/sample_mflix?retryWrites=true&w=majority"
#DATABASE_URL = "mongodb%2Bsrv%3A%2F%2Fyoo32767%3AGuCtswjLGqUaNL0G%40cluster0.vsdtcnb.mongodb.net%2F%3FretryWrites%3Dtrue%26w%3Dmajority%26appName%3DCluster0"
# DATABASE_URL = "mongodb+srv://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/Cluster0?retryWrites=true&w=majority"
# DATABASE_URL="mongodb://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/sample_mflix?retryWrites=true&w=majority"
DATABASE_URL="mongodb+srv://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/mytest"

10
.env.development
View File

@ -1,14 +1,8 @@
NEXT_PUBLIC_TEST="테스트변수입니다. development"
NEXT_PUBLIC_API_SERVER_PATH="http://1.248.227.176:38080"
# NEXT_PUBLIC_API_SERVER_PATH="http://localhost:8080"
# NEXT_PUBLIC_API_SERVER_PATH="http://172.30.1.60:8080"
DATABASE_URL="sqlserver://mssql.devgrr.kr:1433;database=qcast;user=qcast;password=Qwertqaz12345;trustServerCertificate=true"
SESSION_SECRET="i3iHH1yp2/2SpQSIySQ4bpyc4g0D+zCF9FAn5xUG0+Y="
NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_bV5zuYMyyIYFlOb3"
NEXT_PUBLIC_Q_ORDER_AUTO_LOGIN_URL="http://q-order-local.q-cells.jp:8120/eos/login/autoLogin"
NEXT_PUBLIC_Q_MUSUBI_AUTO_LOGIN_URL="http://q-musubi-local.q-cells.jp:8120/qm/login/autoLogin"
NEXT_PUBLIC_Q_ORDER_AUTO_LOGIN_URL="http://q-order-qa.q-cells.jp:8120/eos/login/autoLogin"
NEXT_PUBLIC_Q_MUSUBI_AUTO_LOGIN_URL="http://q-musubi-qa.q-cells.jp:8120/qm/login/autoLogin"

8
.env.production
View File

@ -1,12 +1,8 @@
NEXT_PUBLIC_TEST="테스트변수입니다. production"
NEXT_PUBLIC_API_SERVER_PATH="http://1.248.227.176:38080"
DATABASE_URL=""
SESSION_SECRET="i3iHH1yp2/2SpQSIySQ4bpyc4g0D+zCF9FAn5xUG0+Y="
NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_bV5zuYMyyIYFlOb3"
NEXT_PUBLIC_Q_ORDER_AUTO_LOGIN_URL="http://q-order-local.q-cells.jp:8120/eos/login/autoLogin"
NEXT_PUBLIC_Q_MUSUBI_AUTO_LOGIN_URL="http://q-musubi-local.q-cells.jp:8120/qm/login/autoLogin"
NEXT_PUBLIC_Q_ORDER_AUTO_LOGIN_URL="https://q-order.q-cells.jp/eos/login/autoLogin"
NEXT_PUBLIC_Q_MUSUBI_AUTO_LOGIN_URL="https://q-musubi.q-cells.jp/qm/login/autoLogin"

1
package.json
View File

@ -44,7 +44,6 @@
"prettier": "^3.3.3",
"prisma": "^5.18.0",
"react-color-palette": "^7.2.2",
"react-dropdown-select": "^4.11.3",
"react-select": "^5.8.1",
"sass": "^1.77.8",
"tailwindcss": "^3.4.1"

4
public/static/images/common/select_del.svg Normal file
View File

@ -0,0 +1,4 @@
<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0.998535 1L3.99723 3.99594L6.99593 1" stroke="#697C8F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 6.98376L3.99319 3.99595L1.00263 6.99999" stroke="#697C8F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 370 B

12
src/app/SessionProvider.js Normal file
View File

@ -0,0 +1,12 @@
'use client'
import { createContext, useState } from 'react'
export const SessionContext = createContext({
session: {},
})
export default function SessionProvider({ useSession, children }) {
const [session, setSession] = useState(useSession)
return <SessionContext.Provider value={{ session }}>{children}</SessionContext.Provider>
}

5
src/app/layout.js
View File

@ -15,6 +15,7 @@ import './globals.css'
import '../styles/style.scss'
import '../styles/contents.scss'
import Dimmed from '@/components/ui/Dimmed'
import SessionProvider from './SessionProvider'
// const inter = Inter({ subsets: ['latin'] })
@ -70,7 +71,9 @@ export default async function RootLayout({ children }) {
<Header userSession={sessionProps} />
<div className="content">
<Dimmed />
<QcastProvider>{children}</QcastProvider>
<QcastProvider>
<SessionProvider useSession={sessionProps}>{children}</SessionProvider>
</QcastProvider>
</div>
<footer>
<div className="footer-inner">

7
src/common/common.js
View File

@ -66,8 +66,13 @@ export const LINE_TYPE = {
},
SUBLINE: {
/**
*
* 추녀 / 마루 / 박공 / 지붕골 / 박공단
*/
HIP: 'hip',
RIDGE: 'ridge',
GABLE: 'gable',
VALLEY: 'valley',
VERGE: 'verge',
},
}

34
src/components/Playground.jsx
View File

@ -30,7 +30,7 @@ export default function Playground() {
const fileRef = useRef(null)
const queryRef = useRef(null)
const [zoom, setZoom] = useState(20)
const { get, promisePost } = useAxios()
const { get, promiseGet, promisePost } = useAxios()
const testVar = process.env.NEXT_PUBLIC_TEST
const converterUrl = process.env.NEXT_PUBLIC_CONVERTER_API_URL
const { getMessage } = useMessage()
@ -43,6 +43,8 @@ export default function Playground() {
const [checkboxInput, setCheckboxInput] = useState([])
const [selectedValue, setSelectedValue] = useState('')
const [users, setUsers] = useState([])
useEffect(() => {
console.log('textInput:', textInput)
}, [textInput])
@ -142,6 +144,10 @@ export default function Playground() {
},
}
useEffect(() => {
console.log('users:', users)
}, [users])
return (
<>
<div className="container mx-auto p-4 m-4 border">
@ -305,6 +311,32 @@ export default function Playground() {
<div className="my-2">
<QPagination {...paginationProps} />
</div>
<div className="my-2">
<Button
onClick={() => {
promiseGet({ url: 'http://localhost:8080/api/user' }).then((res) => setUsers(res.data))
}}
>
axios get test
</Button>
</div>
<div className="my-2">
<Button
onClick={() => {
const result = promisePost({
url: 'http://localhost:8080/api/user',
data: {
firstName: 'Yoo',
lastName: 'Sangwook',
email: 'yoo1757@naver.com',
age: 46,
},
}).then((res) => console.log('res', res))
}}
>
axios post test
</Button>
</div>
</div>
</>
)

2
src/components/common/context-menu/QContextMenu.jsx
View File

@ -27,7 +27,7 @@ export default function QContextMenu(props) {
const handleContextMenu = (e) => {
// e.preventDefault() //기존 contextmenu 막고
setContextMenu({ visible: true, x: e.pageX, y: e.pageY })
console.log(111, canvasProps)
// console.log(111, canvasProps)
canvasProps?.upperCanvasEl.removeEventListener('contextmenu', handleContextMenu) //한번 노출 후 이벤트 삭제
}

2
src/components/community/Archive.jsx
View File

@ -61,7 +61,7 @@ export default function Archive() {
<div className="sub-content">
<div className="sub-content-inner">
<div className="sub-table-box">
<Search title={boardType.boardTitle} subTitle={boardType.subTitle} isSelectUse={true} />
<Search title={boardType.boardTitle} subTitle={boardType.subTitle} isSelectUse={false} />
<ArchiveTable clsCode={boardType.clsCode} />
</div>
</div>

48
src/components/community/ArchiveTable.jsx
View File

@ -45,7 +45,7 @@ export default function ArchiveTable({ clsCode }) {
}
fetchData()
}, [search.searchValue])
}, [search.searchValue, search.searchFlag])
// 상세 파일 목록 조회
const handleDetailFileListDown = async (noticeNo) => {
@ -74,30 +74,34 @@ export default function ArchiveTable({ clsCode }) {
return (
<>
<div className="file-down-list">
{boardList?.map((board) => (
<div key={board.noticeNo} className="file-down-item">
<div className="file-item-info">
<div className="item-num">
{/* 번호 */}
{board.rowNumber}
{boardList.length > 0 ? (
<div className="file-down-list">
{boardList?.map((board) => (
<div key={board.noticeNo} className="file-down-item">
<div className="file-item-info">
<div className="item-num">
{/* 번호 */}
{board.rowNumber}
</div>
<div className="item-name">
{/* 제목 */}
{board.title}
</div>
<div className="item-date">
{/* 등록일 */}
{getMessage('board.sub.updDt')} : {board.uptDt ? board.uptDt : board.regDt}
</div>
</div>
<div className="item-name">
{/* 제목 */}
{board.title}
</div>
<div className="item-date">
{/* 등록일 */}
{getMessage('board.sub.updDt')} : {board.uptDt ? board.uptDt : board.regDt}
<div className="file-down-box">
{/* 첨부파일 */}
<button type="button" className="file-down-btn" onClick={() => handleDetailFileListDown(board.noticeNo)}></button>
</div>
</div>
<div className="file-down-box">
{/* 첨부파일 */}
<button type="button" className="file-down-btn" onClick={() => handleDetailFileListDown(board.noticeNo)}></button>
</div>
</div>
))}
</div>
))}
</div>
) : (
<div className="file-down-nodata">{getMessage('common.message.no.data')}</div>
)}
</>
)
}

4
src/components/fabric/QLine.js
View File

@ -75,7 +75,7 @@ export const QLine = fabric.util.createClass(fabric.Line, {
const y2 = this.top + this.height * scaleY
const dx = x2 - x1
const dy = y2 - y1
this.length = Number(Math.sqrt(dx * dx + dy * dy).toFixed(0))
this.length = Number(Math.sqrt(dx * dx + dy * dy).toFixed(1))
},
addLengthText() {
@ -150,7 +150,7 @@ export const QLine = fabric.util.createClass(fabric.Line, {
getLength() {
//10배 곱해진 값 return
return Number(this.length.toFixed(1) * 10)
return Number(this.length.toFixed(0) * 10)
},
setViewLengthText(bool) {

22
src/components/fabric/QPolygon.js
View File

@ -199,32 +199,16 @@ export const QPolygon = fabric.util.createClass(fabric.Polygon, {
const end = points[(i + 1) % points.length]
const dx = end.x - start.x
const dy = end.y - start.y
const length = Number(Math.sqrt(dx * dx + dy * dy).toFixed(1)) * 10
const length = Number(Math.sqrt(dx * dx + dy * dy).toFixed(0)) * 10
let midPoint
switch (this.direction) {
case 'north':
midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2 - 30)
break
case 'west':
midPoint = new fabric.Point((start.x + end.x) / 2 - 30, (start.y + end.y) / 2)
break
case 'south':
midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2 + 30)
break
case 'east':
midPoint = new fabric.Point((start.x + end.x) / 2 + 30, (start.y + end.y) / 2)
break
default:
midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2)
break
}
midPoint = new fabric.Point((start.x + end.x) / 2, (start.y + end.y) / 2)
const degree = (Math.atan2(dy, dx) * 180) / Math.PI
// Create new text object if it doesn't exist
const text = new fabric.Text(length.toFixed(0), {
const text = new fabric.Text(length.toString(), {
left: midPoint.x,
top: midPoint.y,
fontSize: this.fontSize,

4
src/components/floor-plan/CanvasFrame.jsx
View File

@ -13,11 +13,7 @@ export default function CanvasFrame({ plan }) {
const canvasRef = useRef(null)
const { canvas } = useCanvas('canvas')
const { contextMenu, currentContextMenu, setCurrentContextMenu } = useContextMenu()
const currentObject = useRecoilValue(currentObjectState)
useEffect(() => {
console.log(currentObject)
}, [currentObject])
useEvent()
const loadCanvas = () => {

133
src/components/floor-plan/CanvasLayout.jsx
View File

@ -1,122 +1,29 @@
'use client'
import { useEffect, useState } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import { useContext, useEffect, useState } from 'react'
import { useRecoilValue } from 'recoil'
import CanvasFrame from './CanvasFrame'
import { useMessage } from '@/hooks/useMessage'
import { useSwal } from '@/hooks/useSwal'
import { usePlan } from '@/hooks/usePlan'
import { globalLocaleStore } from '@/store/localeAtom'
import { currentCanvasPlanState, initCanvasPlansState, plansState } from '@/store/canvasAtom'
import { sessionStore } from '@/store/commonAtom'
import { SessionContext } from '@/app/SessionProvider'
export default function CanvasLayout() {
const { session } = useContext(SessionContext)
console.log('session >>> ', session)
const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
const [planNum, setPlanNum] = useState(0)
const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState)
const [plans, setPlans] = useRecoilState(plansState)
const globalLocaleState = useRecoilValue(globalLocaleStore)
const sessionState = useRecoilValue(sessionStore)
const globalLocaleState = useRecoilValue(globalLocaleStore)
const { getMessage } = useMessage()
const { swalFire } = useSwal()
const { getCanvasByObjectNo, delCanvasById, checkModifiedCanvasPlan, saveCanvas, currentCanvasData } = usePlan()
const handleCurrentPlan = (newCurrentId) => {
// console.log('currentPlan newCurrentId: ', newCurrentId)
if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) {
if (currentCanvasPlan?.id && checkModifiedCanvasPlan()) {
swalFire({
html: getMessage('common.message.confirm.save') + `</br>${currentCanvasPlan.name}`,
type: 'confirm',
confirmFn: async () => {
await saveCanvas(sessionState.userId)
updateCurrentPlan(newCurrentId)
},
denyFn: () => {
updateCurrentPlan(newCurrentId)
},
})
} else {
updateCurrentPlan(newCurrentId)
}
}
}
const updateCurrentPlan = (newCurrentId) => {
setPlans((plans) =>
plans.map((plan) => {
return { ...plan, isCurrent: plan.id === newCurrentId }
}),
)
}
useEffect(() => {
setCurrentCanvasPlan(plans.find((plan) => plan.isCurrent) || null)
}, [plans])
const handleDeletePlan = (e, id) => {
e.stopPropagation() // 이벤트 버블링 방지
if (initCanvasPlans.some((plan) => plan.id === id)) {
delCanvasById(id)
.then((res) => {
swalFire({ text: getMessage('common.message.delete') })
// console.log('[DELETE] canvas-statuses res :::::::: %o', res)
setInitCanvasPlans((initCanvasPlans) => initCanvasPlans.filter((plan) => plan.id !== id))
setPlans((plans) => plans.filter((plan) => plan.id !== id))
})
.catch((error) => {
swalFire({ text: error.message, icon: 'error' })
// console.error('[DELETE] canvas-statuses res error :::::::: %o', error)
})
} else {
setPlans((plans) => plans.filter((plan) => plan.id !== id))
swalFire({ text: getMessage('common.message.delete') })
}
// 삭제 후 last 데이터에 포커싱
const lastPlan = plans.filter((plan) => plan.id !== id).at(-1)
if (!lastPlan) {
setPlanNum(0)
setCurrentCanvasPlan(null)
} else if (id !== lastPlan.id) {
handleCurrentPlan(lastPlan.id)
}
}
const addEmptyPlan = () => {
setPlans([...plans, { id: planNum, name: `Plan ${planNum + 1}`, objectNo: `${objectNo}` }])
handleCurrentPlan(planNum)
setPlanNum(planNum + 1)
}
const addCopyPlan = () => {
const copyPlan = {
id: planNum,
name: `Plan ${planNum + 1}`,
objectNo: `${objectNo}`,
userId: sessionState.userId,
canvasStatus: currentCanvasData(),
}
setPlans((plans) => [...plans, copyPlan])
handleCurrentPlan(planNum)
setPlanNum(planNum + 1)
}
const { plans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan()
useEffect(() => {
if (!currentCanvasPlan) {
getCanvasByObjectNo(sessionState.userId, objectNo).then((res) => {
// console.log('canvas 목록 ', res)
if (res.length > 0) {
setInitCanvasPlans(res)
setPlans(res)
handleCurrentPlan(res.at(-1).id) // last 데이터에 포커싱
setPlanNum(res.length)
} else {
addEmptyPlan()
}
})
}
console.log('loadCanvasPlanData 실행, sessionState.userId >>> ', sessionState.userId)
loadCanvasPlanData(sessionState.userId, objectNo)
}, [])
return (
@ -127,14 +34,14 @@ export default function CanvasLayout() {
<button
key={`plan-${plan.id}`}
className={`canvas-page-box ${plan.isCurrent === true ? 'on' : ''}`}
onClick={() => handleCurrentPlan(plan.id)}
onClick={() => handleCurrentPlan(sessionState.userId, plan.id)}
>
<span>{plan.name}</span>
<i
className="close"
onClick={(e) =>
swalFire({
html: getMessage('common.message.confirm.delete') + `</br>${plan.name}`,
text: `${plan.name} ` + getMessage('plan.message.confirm.delete'),
type: 'confirm',
confirmFn: () => {
handleDeletePlan(e, plan.id)
@ -146,23 +53,7 @@ export default function CanvasLayout() {
))}
</div>
{plans.length < 10 && (
<button
className="plane-add"
onClick={() =>
JSON.parse(currentCanvasData()).objects.length > 0
? swalFire({
html: `${currentCanvasPlan.name} 을 복제하시겠습니까?`,
type: 'confirm',
confirmFn: () => {
addCopyPlan()
},
denyFn: () => {
addEmptyPlan()
},
})
: addEmptyPlan()
}
>
<button className="plane-add" onClick={() => handleAddPlan(sessionState.userId, objectNo)}>
<span></span>
</button>
)}

23
src/components/floor-plan/CanvasMenu.jsx
View File

@ -19,6 +19,7 @@ import { MENU } from '@/common/common'
import KO from '@/locales/ko.json'
import JA from '@/locales/ja.json'
import { settingModalFirstOptionsState } from '@/store/settingAtom'
import { placementShapeDrawingPointsState } from '@/store/placementShapeDrawingAtom'
const canvasMenus = [
{ index: 0, name: 'plan.menu.plan.drawing', icon: 'con00', title: MENU.PLAN_DRAWING },
@ -58,7 +59,8 @@ export default function CanvasMenu(props) {
const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState)
const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
const setCurrentMenu = useSetRecoilState(currentMenuState)
const setPoints = useSetRecoilState(outerLinePointsState)
const setOuterLinePoints = useSetRecoilState(outerLinePointsState)
const setPlacementPoints = useSetRecoilState(placementShapeDrawingPointsState)
const [canvasZoom, setCanvasZoom] = useRecoilState(canvasZoomState)
const [currentCanvasPlan, setcurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
@ -121,14 +123,14 @@ export default function CanvasMenu(props) {
}, [menuNumber, type])
// 저장버튼(btn08) 클릭 시 호출되는 함수
const handleSaveCanvas = () => {
swalFire({
html: getMessage('common.message.confirm.save') + `</br>${currentCanvasPlan.name}`,
type: 'confirm',
confirmFn: () => {
saveCanvas(sessionState.userId)
},
})
const handleSaveCanvas = async () => {
// swalFire({
// text: `${currentCanvasPlan.name} ` + getMessage('plan.message.confirm.save'),
// type: 'confirm',
// confirmFn: async () => {
await saveCanvas(sessionState.userId)
// },
// })
}
const onClickPlacementInitialMenu = () => {
@ -140,7 +142,8 @@ export default function CanvasMenu(props) {
}
const handleClear = () => {
setPoints([])
setOuterLinePoints([])
setPlacementPoints([])
canvas?.clear()
}

17
src/components/floor-plan/modal/Slope.jsx
View File

@ -1,8 +1,13 @@
import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { globalPitchState } from '@/store/canvasAtom'
import { useRecoilState } from 'recoil'
import { useRef } from 'react'
export default function Slope({ setShowSlopeSettingModal }) {
const { getMessage } = useMessage()
const [globalPitch, setGlobalPitch] = useRecoilState(globalPitchState)
const inputRef = useRef()
return (
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
<div className={`modal-pop-wrap xxxm`}>
@ -19,13 +24,21 @@ export default function Slope({ setShowSlopeSettingModal }) {
{getMessage('slope')}
</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={300} />
<input type="text" className="input-origin block" defaultValue={globalPitch} ref={inputRef} />
</div>
<span className="thin">{getMessage('size.angle')}</span>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
<button
className="btn-frame modal act"
onClick={() => {
setGlobalPitch(inputRef.current.value)
setShowSlopeSettingModal(false)
}}
>
{getMessage('modal.common.save')}
</button>
</div>
</div>
</div>

1
src/components/floor-plan/modal/object/ObjectSetting.jsx
View File

@ -46,6 +46,7 @@ export default function ObjectSetting({ setShowObjectSettingModal }) {
heightRef: useRef(null),
pitchRef: useRef(null),
offsetRef: useRef(null),
offsetWidthRef: useRef(null),
directionRef: useRef(null),
}

35
src/components/floor-plan/modal/object/type/PentagonDormer.jsx
View File

@ -1,8 +1,17 @@
import Image from 'next/image'
import { useMessage } from '@/hooks/useMessage'
import { forwardRef, useState } from 'react'
export default function PentagonDormer() {
const PentagonDormer = forwardRef((props, refs) => {
const { getMessage } = useMessage()
const [direction, setDirection] = useState('down')
refs.directionRef.current = direction
const getDirection = (e) => {
setDirection(e.target.value)
refs.directionRef.current = e.target.value
}
return (
<>
<div className="discrimination-box mb10">
@ -18,7 +27,7 @@ export default function PentagonDormer() {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '60px' }}>
<input type="text" className="input-origin block" defaultValue={2000} />
<input type="text" className="input-origin block" placeholder={0} ref={refs.heightRef} defaultValue={2000} />
</div>
<span className="thin">mm</span>
</div>
@ -29,7 +38,7 @@ export default function PentagonDormer() {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '60px' }}>
<input type="text" className="input-origin block" defaultValue={1000} />
<input type="text" className="input-origin block" placeholder={0} ref={refs.offsetRef} />
</div>
<span className="thin">mm</span>
</div>
@ -40,18 +49,18 @@ export default function PentagonDormer() {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '60px' }}>
<input type="text" className="input-origin block" defaultValue={4000} />
<input type="text" className="input-origin block" placeholder={0} ref={refs.widthRef} defaultValue={2000} />
</div>
<span className="thin">mm</span>
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">{getMessage('modal.object.setting.offset.depth')}</div>
<div className="eaves-keraba-th">{getMessage('modal.object.setting.offset.width')}</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '60px' }}>
<input type="text" className="input-origin block" defaultValue={500} />
<input type="text" className="input-origin block" placeholder={0} ref={refs.offsetWidthRef} />
</div>
<span className="thin">mm</span>
</div>
@ -62,7 +71,7 @@ export default function PentagonDormer() {
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '60px' }}>
<input type="text" className="input-origin block" defaultValue={4} />
<input type="text" className="input-origin block" placeholder={0} ref={refs.pitchRef} defaultValue={4} />
</div>
<span className="thin">寸</span>
</div>
@ -80,13 +89,15 @@ export default function PentagonDormer() {
<span className="right">{getMessage('commons.east')}</span>
<span className="bottom">{getMessage('commons.south')}</span>
<span className="left">{getMessage('commons.west')}</span>
<button className="plane-btn up"></button>
<button className="plane-btn right"></button>
<button className="plane-btn down act"></button>
<button className="plane-btn left"></button>
<button className={`plane-btn up ${direction === 'up' ? ' act' : ''}`} value="up" onClick={getDirection}></button>
<button className={`plane-btn right ${direction === 'right' ? ' act' : ''}`} value="right" onClick={getDirection}></button>
<button className={`plane-btn down ${direction === 'down' ? ' act' : ''}`} value="down" onClick={getDirection}></button>
<button className={`plane-btn left ${direction === 'left' ? ' act' : ''}`} value="left" onClick={getDirection}></button>
</div>
</div>
</div>
</>
)
}
})
export default PentagonDormer

1
src/components/floor-plan/modal/object/type/TriangleDormer.jsx
View File

@ -5,7 +5,6 @@ import { forwardRef, useState } from 'react'
const TriangleDormer = forwardRef((props, refs) => {
const { getMessage } = useMessage()
const [direction, setDirection] = useState('down')
refs.directionRef.current = direction
const getDirection = (e) => {

30
src/components/management/Stuff.jsx
View File

@ -66,6 +66,7 @@ export default function Stuff() {
gridColumns: [
{
field: 'lastEditDatetime',
minWidth: 200,
headerName: getMessage('stuff.gridHeader.lastEditDatetime'),
headerCheckboxSelection: true,
headerCheckboxSelectionCurrentPageOnly: true, //페이징시 현재 페이지만 체크되도록
@ -244,9 +245,8 @@ export default function Stuff() {
}
async function fetchData() {
// const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(params)}`
const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(params)}`
// const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(params)}`
const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(params)}`
await get({
url: apiUrl,
}).then((res) => {
@ -295,8 +295,6 @@ export default function Stuff() {
useEffect(() => {
if (stuffSearchParams?.code === 'E') {
//console.log('조회누름::::::::', stuffSearchParams, sessionState)
// stuffSearchParams.startRow = (pageNo - 1) * pageSize + 1
// stuffSearchParams.endRow = pageNo * pageSize
stuffSearchParams.startRow = 1
stuffSearchParams.endRow = 1 * pageSize
stuffSearchParams.schSortType = defaultSortType
@ -304,8 +302,8 @@ export default function Stuff() {
setPageNo(1)
async function fetchData() {
const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}`
// const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
// const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}`
const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
await get({ url: apiUrl }).then((res) => {
if (!isEmptyArray(res)) {
setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
@ -334,8 +332,8 @@ export default function Stuff() {
})
setPageNo(1)
// const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}`
// const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}`
const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
get({ url: apiUrl }).then((res) => {
if (!isEmptyArray(res)) {
setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
@ -365,8 +363,8 @@ export default function Stuff() {
setPageNo(1)
const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}`
// const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
// const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}`
const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
get({ url: apiUrl }).then((res) => {
if (!isEmptyArray(res)) {
setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
@ -406,14 +404,14 @@ export default function Stuff() {
<div className="sub-table-box">
<div className="table-box-title-wrap">
<div className="title-wrap">
<h3>물건목록</h3>
<h3>{getMessage('stuff.search.grid.title')}</h3>
<ul className="info-wrap">
<li>
전체
{getMessage('stuff.search.grid.all')}
<span>{convertNumberToPriceDecimal(totalCount)}</span>
</li>
<li>
선택
{getMessage('stuff.search.grid.selected')}
<span className="red">{convertNumberToPriceDecimal(selectedRowDataCount)}</span>
</li>
</ul>
@ -421,8 +419,8 @@ export default function Stuff() {
<div className="left-unit-box">
<div className="select-box mr5" style={{ width: '110px' }}>
<select className="select-light black" name="" id="" onChange={onChangeSortType}>
<option value="R">최근 등록일</option>
<option value="U">최근 수정일</option>
<option value="R">{getMessage('stuff.search.grid.schSortTypeR')}</option>
<option value="U">{getMessage('stuff.search.grid.schSortTypeU')}</option>
</select>
</div>
<div className="select-box" style={{ width: '80px' }}>

138
src/components/management/StuffDetail.jsx
View File

@ -16,6 +16,8 @@ import FindAddressPop from './popup/FindAddressPop'
import PlanRequestPop from './popup/PlanRequestPop'
import WindSelectPop from './popup/WindSelectPop'
export default function StuffDetail() {
const [selOptions, setSelOptions] = useState('')
const sessionState = useRecoilValue(sessionStore)
const router = useRouter()
@ -79,7 +81,7 @@ export default function StuffDetail() {
const [detailData, setDetailData] = useState({})
useEffect(() => {
console.log('objectNo::', objectNo)
// console.log('objectNo::', objectNo)
if (objectNo) {
console.log('수정화면')
@ -107,26 +109,28 @@ export default function StuffDetail() {
// 임시 1차점 판매점코드 saleStoreId=201TES01
// T01
//1차점 : X167
get({ url: `/api/object/saleStore/T01/list` }).then((res) => {
// get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
//1차점 : X167 T01
// get({ url: `/api/object/saleStore/TEMP02/list` }).then((res) => {
get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
if (!isEmptyArray(res)) {
const firstList = res.filter((row) => row.saleStoreLevel === '1')
const otherList = res.filter((row) => row.saleStoreLevel !== '1')
//1차점 셀렉트박스
setSaleStoreList(firstList)
setSelOptions(sessionState?.storeId)
form.setValue('saleStoreId', sessionState?.storeId)
form.setValue('saleStoreLevel', sessionState?.storeLvl)
//1차점 아닌 판매점 셀렉트박스
setOriginOtherSaleStoreList(otherList)
setOtherSaleStoreList(otherList)
}
})
}
}, [objectNo])
}, [objectNo, sessionState])
useEffect(() => {
if (isObjectNotEmpty(detailData)) {
console.log('상세데이타:::::::', detailData)
// 도도부현API
get({ url: '/api/object/prefecture/list' }).then((res) => {
if (!isEmptyArray(res)) {
@ -151,6 +155,8 @@ export default function StuffDetail() {
setOtherSaleStoreList(otherList)
}
})
console.log('상세데이타::세팅:::::', detailData)
}
}, [detailData])
@ -161,12 +167,14 @@ export default function StuffDetail() {
form.setValue('saleStoreId', key.saleStoreId)
form.setValue('saleStoreName', key.saleStoreName)
form.setValue('saleStoreLevel', key.saleStoreLevel)
setSelOptions(key.saleStoreId)
//선택한 1차점 정보로 2차점 list 추리기
//長府工産株式会社　大阪支社
let newOtherSaleStoreList = originOtherSaleStoreList.filter((row) => row.firstAgentId === key.saleStoreId)
setOtherSaleStoreList(newOtherSaleStoreList)
} else {
//X누름
setSelOptions('')
form.setValue('saleStoreId', '')
form.setValue('saleStoreName', '')
form.setValue('saleStoreLevel', '')
@ -209,8 +217,17 @@ export default function StuffDetail() {
form.setValue('zipNo', info.zipNo)
}
//팝업에서 넘어온 설계의뢰 정보
const setPlanReqInfo = (info) => {}
//팝업에서 넘어온 설계의뢰 정보로 바꾸기
const setPlanReqInfo = (info) => {
console.log('팝업에서 넘어온 설계의뢰 정보::: ', info)
//building : 신축 기축
//planReqName : 물건명
//zipNo : 우편번호
//도도부현 :address1 주소 : address2 미세팅
//기준풍속 팝업열려면 setPrefValue(info.prefId) 필요
//기준풍속 :
// form.setValue('dispCompanyName', info.planReqName)
}
//팝업에서 넘어온 바람정보
const setWindSppedInfo = (info) => {
@ -286,7 +303,7 @@ export default function StuffDetail() {
}
// console.log('임시저장용::', errors)
setIsFormValid(Object.keys(errors).length === 0)
setIsFormValid(Object.keys(errors).length === 0 ? true : false)
} else {
console.log('상세일때 폼체크')
}
@ -345,25 +362,14 @@ export default function StuffDetail() {
form.setValue('areaId', e.target.value)
}
// useEffect(() => {
// if (!isEmptyArray(areaIdList)) {
// let _prefName = form.watch('prefName')
// // console.log('기준풍속 가져오는 API', _prefName)
// get({ url: `/api/object/windSpeed/${_prefName}/list` }).then((res) => {
// // console.log('res::', res)
// if (!isEmptyArray(res)) {
// setWindSpeedList(res)
// }
// })
// }
// }, [areaIdList])
//필수값 다 입력했을때
const onValid = (data) => {
const onValid = (data, e) => {
const formData = form.getValues()
console.log('필수값 통과:::', data, formData)
// console.log('필수값 formData:::', formData)
// 수정모드일때는 PUT
// console.log('필수값 다 있고 저장')
// console.log('data::::::', data)
const formData = form.getValues()
// console.log('formData::::', formData)
// const _dispCompanyName = watch('dispCompanyName')
// const _objectStatusId = watch('objectStatusId')
@ -391,6 +397,8 @@ export default function StuffDetail() {
// 임시저장
const onTempSave = async () => {
console.log('임시저장:::::')
return
const formData = form.getValues()
// console.log('formData::', formData)
const params = {
@ -441,7 +449,7 @@ export default function StuffDetail() {
let testobj = '10'
del({ url: `/api/object/${testobj}` }).then((res) => {
// console.log('삭제 결과:::', res)
console.log('삭제 결과:::', res)
router.push('/management/stuff')
})
}
@ -470,9 +478,9 @@ export default function StuffDetail() {
<div className="input-wrap mr5" style={{ width: '200px' }}>
<input type="text" className="input-light" readOnly />
</div>
<button className="btn-origin grey" onClick={onSearchDesignRequestPopOpen}>
<Button className="btn-origin grey" onClick={onSearchDesignRequestPopOpen}>
{getMessage('stuff.planReqPopup.title')}
</button>
</Button>
</div>
</td>
</tr>
@ -536,13 +544,21 @@ export default function StuffDetail() {
</th>
<td>
<div className="flx-box">
<div style={{ width: '567px', marginRight: '5px' }}>
<div className="select-wrap mr5" style={{ width: '567px' }}>
<Select
id="long-value-select1"
instanceId="long-value-select1"
className="react-select-custom"
classNamePrefix="custom"
placeholder="Select"
options={saleStoreList}
onChange={onSelectionChange}
getOptionLabel={(x) => x.saleStoreName}
getOptionValue={(x) => x.saleStoreId}
isClearable={true}
value={saleStoreList.filter(function (option) {
return option.saleStoreId === selOptions
})}
/>
</div>
<div className="input-wrap" style={{ width: '216px' }}>
@ -562,8 +578,13 @@ export default function StuffDetail() {
</th>
<td>
<div className="flx-box">
<div style={{ width: '567px', marginRight: '5px' }}>
<div className="select-wrap mr5" style={{ width: '567px' }}>
<Select
id="long-value-select2"
instanceId="long-value-select2"
className="react-select-custom"
classNamePrefix="custom"
placeholder="Select"
ref={ref}
options={otherSaleStoreList}
onChange={onSelectionChange2}
@ -669,9 +690,9 @@ export default function StuffDetail() {
</select>
</div> */}
<span className="mr10">{getMessage('stuff.detail.windSpeedSpan')}</span>
<button className="btn-origin grey" onClick={onSearchWindSpeedPopOpen}>
<Button className="btn-origin grey" onClick={onSearchWindSpeedPopOpen}>
{getMessage('stuff.detail.btn.windSpeedPop')}
</button>
</Button>
</div>
</td>
</tr>
@ -764,18 +785,18 @@ export default function StuffDetail() {
</div>
<div className="sub-table-footer">
{!isFormValid ? (
<button className="btn-origin grey mr5" onClick={onTempSave}>
<Button className="btn-origin grey mr5" onClick={onTempSave}>
New화면 임시저장
</button>
</Button>
) : (
<button type="submit" className="btn-origin navy mr5">
<Button type="submit" className="btn-origin navy mr5">
NEW 화면 저장
</button>
</Button>
)}
<Link href="/management/stuff">
<button type="button" className="btn-origin grey">
<Button type="button" className="btn-origin grey">
NEW화면 물건목록이동
</button>
</Button>
</Link>
</div>
</div>
@ -801,9 +822,9 @@ export default function StuffDetail() {
<div className="input-wrap mr5" style={{ width: '200px' }}>
<input type="text" className="input-light" readOnly />
</div>
<button className="btn-origin grey" onClick={onSearchDesignRequestPopOpen}>
<Button className="btn-origin grey" onClick={onSearchDesignRequestPopOpen}>
{getMessage('stuff.planReqPopup.title')}
</button>
</Button>
</div>
</td>
</tr>
@ -813,7 +834,7 @@ export default function StuffDetail() {
</th>
<td>
<div className="input-wrap" style={{ width: '500px' }}>
{/* <input type="text" className="input-light" {...form.register('dispCompanyName')} value={form.watch('dispCompanyName')} /> */}
<input type="text" className="input-light" {...form.register('dispCompanyName')} value={form.watch('dispCompanyName')} />
</div>
</td>
</tr>
@ -865,7 +886,7 @@ export default function StuffDetail() {
</th>
<td>
<div className="flx-box">
<div style={{ width: '567px', marginRight: '5px' }}>
<div className="select-wrap mr5" style={{ width: '567px' }}>
{/* <Select
options={saleStoreList}
value={form.watch('saleStoreId')}
@ -890,32 +911,32 @@ export default function StuffDetail() {
{objectNo.substring(0, 1) === 'R' ? (
<>
<Link href="/management/stuff">
<button type="button" className="btn-origin grey">
<Button type="button" className="btn-origin grey mr5">
R상세:물건목록
</button>
</Button>
</Link>
<button type="submit" className="btn-origin navy mr5">
<Button type="submit" className="btn-origin navy mr5">
R상세:저장
</button>
<button type="submit" className="btn-origin navy mr5" onClick={onDelete}>
</Button>
<Button type="submit" className="btn-origin navy" onClick={onDelete}>
R상세:물건삭제
</button>
</Button>
</>
) : (
<>
{!isFormValid ? (
<button type="submit" className="btn-origin navy mr5" onClick={onTempSave}>
<Button type="submit" className="btn-origin navy mr5" onClick={onTempSave}>
TEMP상세:임시저장
</button>
</Button>
) : (
<button type="submit" className="btn-origin navy mr5">
<Button type="submit" className="btn-origin navy mr5">
TEMP상세:저장
</button>
</Button>
)}
<Link href="/management/stuff">
<button type="button" className="btn-origin grey">
<Button type="button" className="btn-origin grey">
T상세:물건목록
</button>
</Button>
</Link>
</>
)}
@ -923,7 +944,14 @@ export default function StuffDetail() {
)}
{showAddressButtonValid && <FindAddressPop setShowAddressButtonValid={setShowAddressButtonValid} zipInfo={setZipInfo} />}
{showDesignRequestButtonValid && (
<PlanRequestPop setShowDesignRequestButtonValid={setShowDesignRequestButtonValid} planReqInfo={setPlanReqInfo} />
<PlanRequestPop
setShowDesignRequestButtonValid={setShowDesignRequestButtonValid}
saleStoreId={form.watch('saleStoreId')}
saleStoreLevel={form.watch('saleStoreLevel')}
otherSaleStoreId={form.watch('otherSaleStoreId')}
otherSaleStoreLevel={form.watch('otherSaleStoreLevel')}
planReqInfo={setPlanReqInfo}
/>
)}
{showWindSpeedButtonValid && (
<WindSelectPop setShowWindSpeedButtonValid={setShowWindSpeedButtonValid} prefName={form.watch('prefName')} windSpeedInfo={setWindSppedInfo} />

6
src/components/management/StuffQGrid.jsx
View File

@ -69,12 +69,6 @@ export default function StuffQGrid(props) {
props.getCellDoubleClicked(event)
}, [])
const autoSizeStrategy = useMemo(() => {
return {
type: 'fitCellContents',
}
}, [])
// Fetch data & update rowData state
useEffect(() => {
gridData ? setRowData(gridData) : ''

62
src/components/management/StuffSearchCondition.jsx
View File

@ -18,7 +18,6 @@ import { useMessage } from '@/hooks/useMessage'
import { isObjectNotEmpty } from '@/util/common-utils'
export default function StuffSearchCondition() {
const sessionState = useRecoilValue(sessionStore)
const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
const globalLocaleState = useRecoilValue(globalLocaleStore)
const { getMessage } = useMessage()
@ -74,10 +73,6 @@ export default function StuffSearchCondition() {
startRow: stuffSearch?.startRow ? stuffSearch.startRow : 1,
endRow: stuffSearch?.endRow ? stuffSearch.endRow : 100,
schSortType: stuffSearch?.schSortType ? stuffSearch.schSortType : 'R',
selObject: {
label: stuffSearch.selObject.label,
value: stuffSearch.selObject.value,
},
})
}
@ -99,9 +94,8 @@ export default function StuffSearchCondition() {
useEffect(() => {
if (isObjectNotEmpty(sessionState)) {
// console.log('판매대리점 리스트 가져오기 위한 세션정보::::::::', sessionState)
// storeId가 T01 이거나 1차점일때만 판매대리점 선택 활성화
// get({ url: `/api/object/saleStore/201TES01/list` }).then((res) => {
// get({ url: `/api/object/saleStore/TEMP02/list` }).then((res) => {
get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
if (!isEmptyArray(res)) {
res.map((row) => {
@ -129,7 +123,6 @@ export default function StuffSearchCondition() {
...stuffSearch,
code: 'S',
schSelSaleStoreId: key.saleStoreId,
selObject: { value: key.saleStoreId, label: key.saleStoreName },
})
} else {
setSchSelSaleStoreId('')
@ -159,7 +152,7 @@ export default function StuffSearchCondition() {
<h3>{getMessage('stuff.search.title')}</h3>
</div>
<div className="left-unit-box">
<Link href="/management/stuff/tempdetail">
<Link href="/management/stuff/tempdetail" scroll={false}>
<button type="button" className="btn-origin navy mr5">
{getMessage('stuff.search.btn1')}
</button>
@ -190,7 +183,6 @@ export default function StuffSearchCondition() {
<input
type="text"
className="input-light"
// placeholder="물건번호 입력"
value={stuffSearch?.code === 'E' || stuffSearch?.code === 'M' ? stuffSearch.schObjectNo : objectNo}
onChange={(e) => {
setObjectNo(e.target.value)
@ -205,7 +197,6 @@ export default function StuffSearchCondition() {
<input
type="text"
className="input-light"
// placeholder="판매대리점명 입력"
value={stuffSearch?.schSaleStoreName ? stuffSearch.schSaleStoreName : saleStoreName}
onChange={(e) => {
setSaleStoreName(e.target.value)
@ -220,7 +211,6 @@ export default function StuffSearchCondition() {
<input
type="text"
className="input-light"
// placeholder="물건주소 입력"
value={stuffSearch?.schAddress ? stuffSearch.schAddress : address}
onChange={(e) => {
setAddress(e.target.value)
@ -237,7 +227,6 @@ export default function StuffSearchCondition() {
<input
type="text"
className="input-light"
// placeholder="물건명 입력"
value={stuffSearch?.schObjectName ? stuffSearch.schObjectName : objectName}
onChange={(e) => {
setobjectName(e.target.value)
@ -252,7 +241,6 @@ export default function StuffSearchCondition() {
<input
type="text"
className="input-light"
// placeholder="견적처 입력"
value={stuffSearch?.schDispCompanyName ? stuffSearch.schDispCompanyName : dispCompanyName}
onChange={(e) => {
setDispCompanyName(e.target.value)
@ -263,18 +251,39 @@ export default function StuffSearchCondition() {
</td>
<th>{getMessage('stuff.search.schSelSaleStoreId')}</th>
<td>
{schSelSaleStoreList?.length > 0 && (
<Select
ref={ref}
options={schSelSaleStoreList}
onChange={onSelectionChange}
getOptionLabel={(x) => x.saleStoreName}
getOptionValue={(x) => x.saleStoreId}
defaultValue={stuffSearch?.selObject?.value ? stuffSearch?.selObject : null}
isDisabled={sessionState?.storeLvl === '1' ? false : true}
isClearable={true}
/>
)}
<div className="select-wrap">
{schSelSaleStoreList?.length > 0 && (
<Select
id="long-value-select1"
instanceId="long-value-select1"
className="react-select-custom"
classNamePrefix="custom"
placeholder="Select"
ref={ref}
options={schSelSaleStoreList}
onChange={onSelectionChange}
getOptionLabel={(x) => x.saleStoreName}
getOptionValue={(x) => x.saleStoreId}
value={schSelSaleStoreList.filter(function (option) {
if (stuffSearch?.code === 'S' && schSelSaleStoreId === '') {
return false
} else if (stuffSearch?.code === 'S' && schSelSaleStoreId !== '') {
return option.saleStoreId === schSelSaleStoreId
} else if (stuffSearch?.code === 'E' && schSelSaleStoreId !== '') {
return option.saleStoreId === schSelSaleStoreId
} else {
if (stuffSearch?.schSelSaleStoreId !== '') {
return option.saleStoreId === stuffSearch.schSelSaleStoreId
} else {
return false
}
}
})}
isDisabled={sessionState?.storeLvl === '1' ? false : true}
isClearable={true}
/>
)}
</div>
</td>
</tr>
<tr>
@ -284,7 +293,6 @@ export default function StuffSearchCondition() {
<input
type="text"
className="input-light"
// placeholder="담당자 입력"
value={stuffSearch?.schReceiveUser ? stuffSearch.schReceiveUser : receiveUser}
onChange={(e) => {
setReceiveUser(e.target.value)

1
src/components/management/popup/FindAddressPop.jsx
View File

@ -79,7 +79,6 @@ export default function FindAddressPop(props) {
}
// 주소적용 클릭
const applyAddress = () => {
// console.log('주소적용 클릭:::::::::', prefId, address1, address2, address3, zipNo)
if (prefId == null) {
alert(getMessage('stuff.addressPopup.error.message2'))
} else {

186
src/components/management/popup/PlanRequestPop.jsx
View File

@ -1,6 +1,5 @@
import React, { useState, useRef, useEffect } from 'react'
import { useForm } from 'react-hook-form'
import { queryStringFormatter } from '@/util/common-utils'
import { useAxios } from '@/hooks/useAxios'
import { globalLocaleStore } from '@/store/localeAtom'
import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
@ -12,14 +11,24 @@ import dayjs from 'dayjs'
import PlanRequestPopQGrid from './PlanRequestPopQGrid'
import { sessionStore } from '@/store/commonAtom'
import { planReqSearchState } from '@/store/planReqAtom'
import { isObjectNotEmpty, queryStringFormatter } from '@/util/common-utils'
import Select from 'react-select'
import QPagination from '@/components/common/pagination/QPagination'
export default function PlanRequestPop(props) {
const sessionState = useRecoilValue(sessionStore)
const [pageNo, setPageNo] = useState(1) //현재 페이지 번호
const [pageSize, setPageSize] = useState(20) //페이지 당 게시물 개수
const [totalCount, setTotalCount] = useState(0) //총 갯수
const globalLocaleState = useRecoilValue(globalLocaleStore)
const { get } = useAxios(globalLocaleState)
const [planReqObject, setPlanReqObject] = useState({})
const { get, promiseGet } = useAxios(globalLocaleState)
const { getMessage } = useMessage()
//Select ref
const ref = useRef()
// 검색조건 달력 셋팅
const [startDate, setStartDate] = useState(dayjs(new Date()).add(-3, 'month').format('YYYY-MM-DD'))
const [endDate, setEndDate] = useState(dayjs(new Date()).format('YYYY-MM-DD'))
@ -34,7 +43,6 @@ export default function PlanRequestPop(props) {
setStartDate: setEndDate,
}
const ref = useRef()
const resetPlanReqRecoil = useResetRecoilState(planReqSearchState)
const [planReqSearch, setPlanReqSearch] = useRecoilState(planReqSearchState)
@ -47,14 +55,41 @@ export default function PlanRequestPop(props) {
const [schDateGbn, setSchDateGbn] = useState('S') //기간구분코드(S/R)
//초기화
const resetRecoil = () => {}
const resetRecoil = () => {
setSchPlanReqNo('')
setSchTitle('')
setSchAddress('')
setSchSaleStoreName('')
setSchPlanReqName('')
setSchDateGbn('S')
setStartDate(dayjs(new Date()).add(-3, 'month').format('YYYY-MM-DD'))
setEndDate(dayjs(new Date()).format('YYYY-MM-DD'))
setSchPlanStatCd('')
handleClear() //셀렉트 자동완성 초기화
resetPlanReqRecoil()
}
//초기화 눌렀을 때 자동완성도..
//셀렉트 자동완성 초기화
const handleClear = () => {
if (ref.current.state.dropDown) {
ref.current.methods.dropDown()
if (ref.current) {
ref.current.clearValue()
}
}
// 상태 검색조건 변경
const onSelectionChange = (key) => {
//임시작업
// console.log('E::::::::', key)
if (isObjectNotEmpty(key)) {
setSchPlanStatCd(key.value)
setPlanReqSearch({
...planReqSearch,
schPlanStatCd: key.value,
})
} else {
ref.current.state.values = []
//X누름
setSchPlanStatCd('')
setPlanReqSearch({ ...planReqSearch, schPlanStatCd: '' })
}
}
@ -63,6 +98,60 @@ export default function PlanRequestPop(props) {
setEndDate(planReqSearch?.schEndDt ? planReqSearch.schEndDt : dayjs(new Date()).format('YYYY-MM-DD'))
}, [planReqSearch])
// 조회
const onSubmit = (page, type) => {
const params = {
// saleStoreId: 'T100',
// saleStoreLevel: '1',
saleStoreId: props?.otherSaleStoreId ? props.otherSaleStoreId : props.saleStoreId,
saleStoreLevel: props?.otherSaleStoreLevel ? props.otherSaleStoreLevel : props.saleStoreLevel,
schPlanReqNo: planReqSearch?.schPlanReqNo ? planReqSearch.schPlanReqNo : schPlanReqNo,
schTitle: planReqSearch?.schTitle ? planReqSearch.schTitle : schTitle,
schAddress: planReqSearch?.schAddress ? planReqSearch.schAddress : schAddress,
schSaleStoreName: planReqSearch?.schSaleStoreName ? planReqSearch.schSaleStoreName : schSaleStoreName,
schPlanReqName: planReqSearch?.schPlanReqName ? planReqSearch.schPlanReqName : schPlanReqName,
schPlanStatCd: planReqSearch?.schPlanStatCd ? planReqSearch.schPlanStatCd : schPlanStatCd,
schDateGbn: planReqSearch?.schDateGbn ? planReqSearch.schDateGbn : schDateGbn,
schStartDt: dayjs(startDate).format('YYYY-MM-DD'),
schEndDt: dayjs(endDate).format('YYYY-MM-DD'),
startRow: type === 'S' ? (1 - 1) * pageSize + 1 : (page - 1) * pageSize + 1,
endRow: type === 'S' ? 1 * pageSize : page * pageSize,
}
if (type === 'S') {
setPageNo(1)
} else {
setPageNo(page)
}
// console.log(params)
const apiUrl = `/api/object/planReq/list?${queryStringFormatter(params)}`
promiseGet({ url: apiUrl }).then((res) => {
if (res.status === 200) {
if (isNotEmptyArray(res.data.data)) {
setGridProps({ ...gridProps, gridData: res.data.data, gridCount: res.data.data[0].totCnt })
setTotalCount(res.data.data[0].totCnt)
} else {
setGridProps({ ...gridProps, gridData: [], gridCount: 0 })
setTotalCount(0)
}
} else {
setGridProps({ ...gridProps, gridData: [], gridCount: 0 })
setTotalCount(0)
}
})
}
// 페이징 현재페이지 변경
const handleChangePage = (page) => {
setPlanReqSearch({
...planReqSearch,
startRow: (page - 1) * pageSize + 1,
endRow: page * pageSize,
})
setPageNo(page)
onSubmit(page, 'P')
}
const [gridProps, setGridProps] = useState({
gridData: [],
isPageable: false,
@ -117,6 +206,45 @@ export default function PlanRequestPop(props) {
],
})
//설계의뢰 그리드에서 선택한 설계의로 정보
const getSelectedRowdata = (data) => {
if (isNotEmptyArray(data)) {
setPlanReqObject(data[0])
} else {
setPlanReqObject({})
}
}
// 설계의뢰 적용 클릭
const applyPlanReq = () => {
if (isObjectNotEmpty(planReqObject)) {
props.planReqInfo(planReqObject)
// 팝업닫기
props.setShowDesignRequestButtonValid(false)
} else {
alert(getMessage('stuff.planReqPopup.error.message1'))
}
}
const tempList = [
{
label: '완료',
value: 'C',
},
{
label: '저장',
value: 'I',
},
{
label: '접수',
value: 'R',
},
{
label: '제출',
value: 'S',
},
]
return (
<div className="modal-popup">
<div className="modal-dialog big">
@ -132,8 +260,17 @@ export default function PlanRequestPop(props) {
<div className="design-tit-wrap">
<h3>{getMessage('stuff.planReqPopup.popTitle')}</h3>
<div className="design-search-wrap">
<button className="btn-origin grey mr5">{getMessage('stuff.planReqPopup.btn1')}</button>
<button className="btn-origin navy ">{getMessage('stuff.planReqPopup.btn2')}</button>
<button
className="btn-origin navy mr5"
onClick={() => {
onSubmit(pageNo, 'S')
}}
>
{getMessage('stuff.planReqPopup.btn1')}
</button>
<button className="btn-origin grey" onClick={resetRecoil}>
{getMessage('stuff.planReqPopup.btn2')}
</button>
</div>
</div>
<div className="design-request-table">
@ -224,12 +361,18 @@ export default function PlanRequestPop(props) {
<th>{getMessage('stuff.planReqPopup.search.planStatName')}</th>
<td>
<div className="select-wrap">
<select className="select-light" name="" id="">
<option value={''}>All</option>
<option value={'SAVE'}>저장</option>
<option value={'SUBMIT'}>제출</option>
<option value={'RECEIPT'}>접수</option>
</select>
<Select
id="long-value-select1"
instanceId="long-value-select1"
className="react-select-custom"
classNamePrefix="custom"
ref={ref}
options={tempList}
onChange={onSelectionChange}
isSearchable={false}
placeholder="Select"
isClearable={true}
/>
</div>
</td>
</tr>
@ -285,14 +428,19 @@ export default function PlanRequestPop(props) {
</div>
<div className="design-request-grid">
<div className="design-request-grid-tit">Plan List</div>
<PlanRequestPopQGrid {...gridProps} />
<PlanRequestPopQGrid {...gridProps} getSelectedRowdata={getSelectedRowdata} />
<div className="pagination-wrap">
<QPagination pageNo={pageNo} pageSize={pageSize} pagePerBlock={10} totalCount={totalCount} handleChangePage={handleChangePage} />
</div>
</div>
</div>
<div className="footer-btn-wrap">
<button className="btn-origin grey mr5" onClick={() => props.setShowDesignRequestButtonValid(false)}>
{getMessage('stuff.planReqPopup.btn3')}
</button>
<button className="btn-origin navy ">{getMessage('stuff.planReqPopup.btn4')}</button>
<button className="btn-origin navy" onClick={applyPlanReq}>
{getMessage('stuff.planReqPopup.btn4')}
</button>
</div>
</div>
</div>

10
src/components/management/popup/PlanRequestPopQGrid.jsx
View File

@ -39,8 +39,14 @@ export default function PlanRequestPopQGrid(props) {
[gridData],
)
//부모로 선택한 설계의뢰정보 보내기
const onSelectionChanged = () => {
const selectedData = gridApi.getSelectedRows()
props.getSelectedRowdata(selectedData)
}
return (
<div className="ag-theme-quartz" style={{ height: 500 }}>
<div className="ag-theme-quartz" style={{ height: 350 }}>
<AgGridReact
onGridReady={onGridReady}
rowBuffer={rowBuffer}
@ -49,7 +55,7 @@ export default function PlanRequestPopQGrid(props) {
defaultColDef={defaultColDef}
rowSelection={'singleRow'}
pagination={isPageable}
// onSelectionChanged={onSelectionChanged}
onSelectionChanged={onSelectionChanged}
/>
</div>
)

14
src/components/myInfo/UserInfoModal.jsx
View File

@ -150,7 +150,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal
<th>{getMessage('myinfo.info.userId')}</th>
<td>
<div className="input-wrap">
<input type="text" className="input-light" value={userId} readOnly />
<input type="text" className="input-light" value={userId || ''} readOnly />
</div>
</td>
</tr>
@ -158,7 +158,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal
<th>{getMessage('myinfo.info.nameKana')}</th>
<td>
<div className="input-wrap">
<input type="text" className="input-light" value={info?.nameKana} readOnly />
<input type="text" className="input-light" value={info?.nameKana || ''} readOnly />
</div>
</td>
</tr>
@ -166,7 +166,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal
<th>{getMessage('myinfo.info.name')}</th>
<td>
<div className="input-wrap">
<input type="text" className="input-light" value={info?.name} readOnly />
<input type="text" className="input-light" value={info?.name || ''} readOnly />
</div>
</td>
</tr>
@ -235,7 +235,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal
<th>{getMessage('myinfo.info.category')}</th>
<td>
<div className="input-wrap">
<input type="text" className="input-light" value={info?.groupName} readOnly />
<input type="text" className="input-light" value={info?.groupName || ''} readOnly />
</div>
</td>
</tr>
@ -243,7 +243,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal
<th>{getMessage('myinfo.info.tel')}</th>
<td>
<div className="input-wrap">
<input type="text" className="input-light" value={info?.tel} readOnly />
<input type="text" className="input-light" value={info?.tel || ''} readOnly />
</div>
</td>
</tr>
@ -251,7 +251,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal
<th>{getMessage('myinfo.info.fax')}</th>
<td>
<div className="input-wrap">
<input type="text" className="input-light" value={info?.fax} readOnly />
<input type="text" className="input-light" value={info?.fax || ''} readOnly />
</div>
</td>
</tr>
@ -259,7 +259,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal
<th>{getMessage('myinfo.info.mail')}</th>
<td>
<div className="input-wrap">
<input type="text" className="input-light" value={info?.mail} readOnly />
<input type="text" className="input-light" value={info?.mail || ''} readOnly />
</div>
</td>
</tr>

344
src/hooks/object/useObjectBatch.js
View File

@ -4,14 +4,7 @@ import { useRecoilState, useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { INPUT_TYPE, BATCH_TYPE } from '@/common/common'
import { useEvent } from '@/hooks/useEvent'
import {
polygonToTurfPolygon,
rectToPolygon,
triangleToPolygon,
pointsToTurfPolygon,
splitDormerTriangle,
setSurfaceShapePattern,
} from '@/util/canvas-util'
import { polygonToTurfPolygon, rectToPolygon, triangleToPolygon, pointsToTurfPolygon, setSurfaceShapePattern } from '@/util/canvas-util'
import { useSwal } from '@/hooks/useSwal'
import * as turf from '@turf/turf'
import { QPolygon } from '@/components/fabric/QPolygon'
@ -211,11 +204,13 @@ export function useObjectBatch() {
const dormerName = buttonAct === 3 ? BATCH_TYPE.TRIANGLE_DORMER : BATCH_TYPE.PENTAGON_DORMER
const dormerTempName = buttonAct === 3 ? BATCH_TYPE.TRIANGLE_DORMER_TEMP : BATCH_TYPE.PENTAGON_DORMER_TEMP
const height = dormerPlacement.heightRef.current.value / 10
const width = dormerPlacement.widthRef.current.value / 10
const pitch = dormerPlacement.pitchRef.current.value
const directionRef = dormerPlacement.directionRef.current
const offsetRef = dormerPlacement.offsetRef.current.value === '' ? 0 : parseInt(dormerPlacement.offsetRef.current.value) / 10
const offsetWidthRef = dormerPlacement.offsetWidthRef.current.value === '' ? 0 : parseInt(dormerPlacement.offsetWidthRef.current.value) / 10
const directionRef = dormerPlacement.directionRef.current
let dormer, dormerOffset, isDown, selectedSurface
let dormer, dormerOffset, isDown, selectedSurface, pentagonPoints, pentagonOffsetPoints
console.log('dormerPlacement', dormerPlacement)
@ -229,8 +224,6 @@ export function useObjectBatch() {
const bottomLength = height / (pitch * 0.25)
const bottomOffsetLength = (height + offsetRef) / (pitch * 0.25)
console.log(bottomOffsetLength)
addCanvasMouseEventListener('mouse:move', (e) => {
isDown = true
if (!isDown) return
@ -305,16 +298,16 @@ export function useObjectBatch() {
addCanvasMouseEventListener('mouse:up', (e) => {
if (dormer) {
// const trianglePolygon = pointsToTurfPolygon(triangleToPolygon(dormer))
// const selectedSurfacePolygon = polygonToTurfPolygon(selectedSurface)
const trianglePolygon = pointsToTurfPolygon(triangleToPolygon(dormer))
const selectedSurfacePolygon = polygonToTurfPolygon(selectedSurface)
// //지붕 밖으로 그렸을때
// if (!turf.booleanWithin(trianglePolygon, selectedSurfacePolygon)) {
// swalFire({ text: '개구를 배치할 수 없습니다.', icon: 'error' })
// //일단 지워
// deleteTempObjects()
// return
// }
//지붕 밖으로 그렸을때
if (!turf.booleanWithin(trianglePolygon, selectedSurfacePolygon)) {
swalFire({ text: '개구를 배치할 수 없습니다.', icon: 'error' })
//일단 지워
deleteTempObjects()
return
}
//각도 추가
let originAngle = 0 //기본 남쪽
@ -387,6 +380,183 @@ export function useObjectBatch() {
drawDirectionArrow(leftTriangle)
drawDirectionArrow(rightTriangle)
isDown = false
initEvent()
}
})
} else if (buttonAct === 4) {
const heightLength = height - (width / 2) * (pitch * 0.25)
//(동의길이 깊이)+출폭(깊이)-[(입력한 폭값)/2+출폭(폭)]*(0.25*입력한 寸)
const heightOffsetLength = height + offsetRef - (width / 2 + offsetWidthRef) * (pitch * 0.25)
addCanvasMouseEventListener('mouse:move', (e) => {
isDown = true
if (!isDown) return
canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === dormerTempName)) //움직일때 일단 지워가면서 움직임
const pointer = canvas.getPointer(e.e)
surfaceShapePolygons.forEach((surface) => {
if (surface.inPolygon({ x: pointer.x, y: pointer.y })) {
selectedSurface = surface
}
})
let angle = 0
if (directionRef === 'left') {
//서
angle = 90
} else if (directionRef === 'right') {
//동
angle = 270
} else if (directionRef === 'up') {
//북
angle = 180
}
pentagonPoints = [
{ x: pointer.x, y: pointer.y },
{ x: pointer.x - width / 2, y: pointer.y + (height - heightLength) },
{ x: pointer.x - width / 2, y: pointer.y + height },
{ x: pointer.x + width / 2, y: pointer.y + height },
{ x: pointer.x + width / 2, y: pointer.y + (height - heightLength) },
]
pentagonOffsetPoints = [
{ x: pointer.x, y: pointer.y },
{ x: pointer.x - width / 2 - offsetWidthRef, y: pointer.y + height + offsetRef - heightOffsetLength },
{ x: pointer.x - width / 2 - offsetWidthRef, y: pointer.y + height + offsetRef },
{ x: pointer.x + width / 2 + offsetWidthRef, y: pointer.y + height + offsetRef },
{ x: pointer.x + width / 2 + offsetWidthRef, y: pointer.y + height + offsetRef - heightOffsetLength },
]
dormer = new QPolygon(pentagonPoints, {
fill: 'white',
stroke: 'red',
strokeDashArray: [5, 5],
strokeWidth: 1,
selectable: true,
lockMovementX: true,
lockMovementY: true,
lockRotation: true,
lockScalingX: true,
lockScalingY: true,
name: dormerTempName,
originX: 'center',
originY: 'top',
angle: angle,
})
canvas?.add(dormer)
if (offsetRef > 0 || offsetWidthRef > 0) {
dormerOffset = new QPolygon(pentagonOffsetPoints, {
fill: 'gray',
stroke: 'red',
strokeDashArray: [5, 5],
strokeWidth: 1,
selectable: true,
lockMovementX: true,
lockMovementY: true,
lockRotation: true,
lockScalingX: true,
lockScalingY: true,
name: dormerTempName,
originX: 'center',
originY: 'top',
angle: angle,
})
canvas?.add(dormerOffset)
}
})
addCanvasMouseEventListener('mouse:up', (e) => {
if (dormer) {
// const trianglePolygon = pointsToTurfPolygon(triangleToPolygon(dormer))
// const selectedSurfacePolygon = polygonToTurfPolygon(selectedSurface)
// //지붕 밖으로 그렸을때
// if (!turf.booleanWithin(trianglePolygon, selectedSurfacePolygon)) {
// swalFire({ text: '개구를 배치할 수 없습니다.', icon: 'error' })
// //일단 지워
// deleteTempObjects()
// return
// }
//각도 추가
let originAngle = 0 //기본 남쪽
let direction = 'south'
if (directionRef === 'left') {
//서
originAngle = 90
direction = 'west'
} else if (directionRef === 'right') {
//동
originAngle = 270
direction = 'east'
} else if (directionRef === 'up') {
//북
originAngle = 180
direction = 'north'
}
const offsetMode = offsetRef > 0 || offsetWidthRef > 0 ? 'offset' : 'normal'
let splitedPentagon =
offsetRef > 0 || offsetWidthRef > 0
? splitDormerPentagon(dormerOffset, directionRef, offsetMode)
: splitDormerPentagon(dormer, directionRef, offsetMode)
canvas?.remove(offsetRef > 0 || offsetWidthRef > 0 ? dormerOffset : dormer)
if (offsetRef > 0)
dormer.set({
name: dormerName,
stroke: 'black',
strokeWidth: 1,
strokeDashArray: [0],
}) //오프셋이 있을땐 같이 도머로 만든다
const leftPentagon = new QPolygon(splitedPentagon[0], {
fill: 'transparent',
stroke: 'red',
strokeWidth: 1,
selectable: true,
lockMovementX: true, // X 축 이동 잠금
lockMovementY: true, // Y 축 이동 잠금
lockRotation: true, // 회전 잠금
viewLengthText: true,
fontSize: 14,
direction: direction,
originX: 'center',
originY: 'center',
name: dormerName,
})
const rightPentagon = new QPolygon(splitedPentagon[1], {
fill: 'transparent',
stroke: 'red',
strokeWidth: 1,
selectable: true,
lockMovementX: true, // X 축 이동 잠금
lockMovementY: true, // Y 축 이동 잠금
lockRotation: true, // 회전 잠금
viewLengthText: true,
fontSize: 14,
direction: direction,
originX: 'center',
originY: 'center',
name: dormerName,
})
canvas?.add(leftPentagon)
canvas?.add(rightPentagon)
//패턴
setSurfaceShapePattern(leftPentagon)
setSurfaceShapePattern(rightPentagon)
//방향
drawDirectionArrow(leftPentagon)
drawDirectionArrow(rightPentagon)
isDown = false
initEvent()
}
@ -408,8 +578,140 @@ export function useObjectBatch() {
initEvent() //이벤트 초기화
}
const splitDormerTriangle = (triangle, direction) => {
const halfWidth = triangle.width / 2
let leftPoints = []
let rightPoints = []
if (direction === 'down') {
leftPoints = [
{ x: triangle.left, y: triangle.top },
{ x: triangle.left - halfWidth, y: triangle.top + triangle.height },
{ x: triangle.left, y: triangle.top + triangle.height },
]
rightPoints = [
{ x: triangle.left, y: triangle.top },
{ x: triangle.left, y: triangle.top + triangle.height },
{ x: triangle.left + halfWidth, y: triangle.top + triangle.height },
]
} else if (direction === 'up') {
leftPoints = [
{ x: triangle.left, y: triangle.top },
{ x: triangle.left - halfWidth, y: triangle.top - triangle.height },
{ x: triangle.left, y: triangle.top - triangle.height },
]
rightPoints = [
{ x: triangle.left, y: triangle.top },
{ x: triangle.left, y: triangle.top - triangle.height },
{ x: triangle.left + halfWidth, y: triangle.top - triangle.height },
]
} else if (direction === 'left') {
leftPoints = [
{ x: triangle.left, y: triangle.top },
{ x: triangle.left - triangle.height, y: triangle.top - halfWidth },
{ x: triangle.left - triangle.height, y: triangle.top },
]
rightPoints = [
{ x: triangle.left, y: triangle.top },
{ x: triangle.left - triangle.height, y: triangle.top },
{ x: triangle.left - triangle.height, y: triangle.top + halfWidth },
]
} else if (direction === 'right') {
leftPoints = [
{ x: triangle.left, y: triangle.top },
{ x: triangle.left + triangle.height, y: triangle.top },
{ x: triangle.left + triangle.height, y: triangle.top + triangle.height },
]
rightPoints = [
{ x: triangle.left, y: triangle.top },
{ x: triangle.left + triangle.height, y: triangle.top },
{ x: triangle.left + triangle.height, y: triangle.top - triangle.height },
]
}
return [leftPoints, rightPoints]
}
const splitDormerPentagon = (pentagon, direction, offsetMode) => {
const points = pentagon.points
console.log(pentagon.points)
let leftPoints = []
let rightPoints = []
if (direction === 'down') {
leftPoints = [
{ x: points[0].x, y: points[0].y },
{ x: points[1].x, y: points[1].y },
{ x: points[2].x, y: points[2].y },
{ x: points[0].x, y: points[3].y },
]
rightPoints = [
{ x: points[0].x, y: points[0].y },
{ x: points[0].x, y: points[2].y },
{ x: points[3].x, y: points[3].y },
{ x: points[4].x, y: points[4].y },
]
} else if (direction === 'up') {
leftPoints = [
{ x: points[0].x, y: points[0].y },
{ x: points[1].x, y: points[0].y - (points[1].y - points[0].y) },
{ x: points[2].x, y: points[0].y - (points[2].y - points[0].y) },
{ x: points[0].x, y: points[0].y - (points[2].y - points[0].y) },
]
rightPoints = [
{ x: points[0].x, y: points[0].y },
{ x: points[3].x, y: points[0].y - (points[1].y - points[0].y) },
{ x: points[3].x, y: points[0].y - (points[2].y - points[0].y) },
{ x: points[0].x, y: points[0].y - (points[2].y - points[0].y) },
]
} else if (direction === 'left') {
leftPoints = [
{ x: points[0].x, y: points[0].y },
{ x: points[0].x - (points[1].y - points[0].y), y: points[0].y - (points[0].x - points[1].x) },
{ x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y - (points[0].x - points[1].x) },
{ x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y },
]
rightPoints = [
{ x: points[0].x, y: points[0].y },
{ x: points[0].x - (points[1].y - points[0].y), y: points[0].y + (points[0].x - points[1].x) },
{ x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y + (points[0].x - points[1].x) },
{ x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y },
]
} else if (direction === 'right') {
leftPoints = [
{ x: points[0].x, y: points[0].y },
{ x: points[0].x + (points[1].y - points[0].y), y: points[0].y + (points[0].x - points[1].x) },
{ x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y + (points[0].x - points[1].x) },
{ x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y },
]
rightPoints = [
{ x: points[0].x, y: points[0].y },
{ x: points[0].x + (points[1].y - points[0].y), y: points[0].y - (points[0].x - points[1].x) },
{ x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y - (points[0].x - points[1].x) },
{ x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y },
]
}
console.log(leftPoints, rightPoints)
return [leftPoints, rightPoints]
}
return {
applyOpeningAndShadow,
applyDormers,
splitDormerTriangle,
splitDormerPentagon,
}
}

123
src/hooks/roofcover/useAuxiliaryDrawing.js
View File

@ -23,10 +23,11 @@ import {
outerLineLength2State,
outerLineTypeState,
} from '@/store/outerLineAtom'
import { calculateDistance, calculateIntersection, distanceBetweenPoints, findClosestPoint } from '@/util/canvas-util'
import { calculateDistance, calculateIntersection, distanceBetweenPoints, findClosestPoint, polygonToTurfPolygon } from '@/util/canvas-util'
import { fabric } from 'fabric'
import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
import { useSwal } from '@/hooks/useSwal'
import { booleanPointInPolygon } from '@turf/turf'
// 보조선 작성
export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
@ -76,6 +77,8 @@ export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
useEffect(() => {
typeRef.current = type
clear()
addDocumentEventListener('keydown', document, keydown[type])
}, [type])
useEffect(() => {
@ -103,12 +106,8 @@ export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
}
}, [])
useEffect(() => {
clear()
addDocumentEventListener('keydown', document, keydown[type])
}, [type])
const clear = () => {
addCanvasMouseEventListener('mouse:move', mouseMove)
setLength1(0)
setLength2(0)
@ -459,8 +458,9 @@ export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
}
const mouseDown = (e) => {
addCanvasMouseEventListener('mouse:move', mouseMove)
canvas.renderAll()
const pointer = getIntersectMousePoint(e)
console.log(pointer)
mousePointerArr.current.push(pointer)
if (mousePointerArr.current.length === 2) {
@ -538,59 +538,66 @@ export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
// 보조선 절삭
const cutAuxiliary = (e) => {
const auxiliaryLines = canvas.getObjects().filter((obj) => obj.name === 'auxiliaryLine' && !obj.isFixed)
const auxiliaryLines = canvas.getObjects().filter((obj) => obj.name === 'auxiliaryLine')
if (auxiliaryLines.length === 0) {
return
}
const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
const allLines = [...auxiliaryLines]
roofBases.forEach((roofBase) => {
roofBase.lines.forEach((line) => {
allLines.push(line)
})
})
auxiliaryLines.forEach((line1) => {
auxiliaryLines.forEach((line2) => {
const lines = [line1, line2]
allLines.forEach((line2) => {
if (line1 === line2) {
return
}
const intersectionPoint = calculateIntersection(line1, line2)
if (!intersectionPoint || intersectionPoints.current.some((point) => point.x === intersectionPoint.x && point.y === intersectionPoint.y)) {
if (!intersectionPoint) {
return
}
roofAdsorptionPoints.current.push(intersectionPoint)
intersectionPoints.current.push(intersectionPoint)
lines.forEach((line) => {
const distance1 = distanceBetweenPoints({ x: line.x1, y: line.y1 }, intersectionPoint)
const distance2 = distanceBetweenPoints({ x: line.x2, y: line.y2 }, intersectionPoint)
if (distance1 === 0 || distance2 === 0) {
return
}
//historyLine에서 기존 line을 제거한다.
lineHistory.current = lineHistory.current.filter((history) => history !== line)
const distance1 = distanceBetweenPoints({ x: line1.x1, y: line1.y1 }, intersectionPoint)
const distance2 = distanceBetweenPoints({ x: line1.x2, y: line1.y2 }, intersectionPoint)
let newLine
if (distance1 === 0 || distance2 === 0) {
return
}
//historyLine에서 기존 line을 제거한다.
lineHistory.current = lineHistory.current.filter((history) => history !== line1)
if (distance1 >= distance2) {
newLine = addLine([line.x1, line.y1, intersectionPoint.x, intersectionPoint.y], {
stroke: 'black',
strokeWidth: 1,
selectable: false,
name: 'auxiliaryLine',
isFixed: true,
intersectionPoint,
})
} else {
newLine = addLine([line.x2, line.y2, intersectionPoint.x, intersectionPoint.y], {
stroke: 'black',
strokeWidth: 1,
selectable: false,
name: 'auxiliaryLine',
isFixed: true,
intersectionPoint,
})
}
lineHistory.current.push(newLine)
removeLine(line)
})
let newLine
if (distance1 >= distance2) {
newLine = addLine([line1.x1, line1.y1, intersectionPoint.x, intersectionPoint.y], {
stroke: 'black',
strokeWidth: 1,
selectable: false,
name: 'auxiliaryLine',
isFixed: true,
intersectionPoint,
})
} else {
newLine = addLine([line1.x2, line1.y2, intersectionPoint.x, intersectionPoint.y], {
stroke: 'black',
strokeWidth: 1,
selectable: false,
name: 'auxiliaryLine',
isFixed: true,
intersectionPoint,
})
}
lineHistory.current.push(newLine)
removeLine(line1)
})
})
addCanvasMouseEventListener('mouse:move', mouseMove)
@ -600,10 +607,15 @@ export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
* 일변전으로 돌아가기
*/
const handleRollback = () => {
const lastLine = lineHistory.current.pop()
mousePointerArr.current = []
canvas.remove(...canvas.getObjects().filter((obj) => obj.name === 'innerPoint'))
const innerPoint = canvas.getObjects().find((obj) => obj.name === 'innerPoint')
if (innerPoint) {
mousePointerArr.current = []
canvas.remove(innerPoint)
canvas.renderAll()
return
}
const lastLine = lineHistory.current.pop()
if (lastLine) {
roofAdsorptionPoints.current = roofAdsorptionPoints.current.filter(
(point) => point.x !== lastLine.intersectionPoint?.x && point.y !== lastLine.intersectionPoint?.y,
@ -621,10 +633,25 @@ export function useAuxiliaryDrawing(setShowAuxiliaryModal) {
return
}
const roofBases = canvas.getObjects().find((obj) => obj.name === 'roofBase')
const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
const innerLines = [...lineHistory.current]
roofBases.innerLines = [...innerLines]
roofBases.forEach((roofBase) => {
const roofInnerLines = innerLines.filter((line) => {
const turfPolygon = polygonToTurfPolygon(roofBase)
// innerLines의 두 점이 모두 polygon 안에 있는지 확인
const inPolygon1 = booleanPointInPolygon([line.x1, line.y1], turfPolygon)
const inPolygon2 = booleanPointInPolygon([line.x2, line.y2], turfPolygon)
if (inPolygon1 && inPolygon2) {
line.attributes = { ...line.attributes, roofId: roofBase.id }
return true
}
})
roofBase.innerLines = [...roofInnerLines]
})
setShowAuxiliaryModal(false)
}

37
src/hooks/roofcover/useOuterLineWall.js
View File

@ -29,12 +29,19 @@ import {
} from '@/store/outerLineAtom'
import { calculateAngle } from '@/util/qpolygon-utils'
import { fabric } from 'fabric'
import { QLine } from '@/components/fabric/QLine'
//외벽선 그리기
export function useOuterLineWall(setShowOutlineModal) {
const canvas = useRecoilValue(canvasState)
const { addCanvasMouseEventListener, addDocumentEventListener, removeAllMouseEventListeners, removeAllDocumentEventListeners, removeMouseEvent } =
useEvent()
const {
initEvent,
addCanvasMouseEventListener,
addDocumentEventListener,
removeAllMouseEventListeners,
removeAllDocumentEventListeners,
removeMouseEvent,
} = useEvent()
const { getIntersectMousePoint } = useMouse()
const { addLine, removeLine } = useLine()
const { tempGridMode } = useTempGrid()
@ -75,6 +82,9 @@ export function useOuterLineWall(setShowOutlineModal) {
addCanvasMouseEventListener('mouse:down', mouseDown)
clear()
return () => {
initEvent()
}
}, [verticalHorizontalMode, points, adsorptionPointAddMode, adsorptionPointMode, adsorptionRange, interval, tempGridMode])
useEffect(() => {
@ -215,11 +225,11 @@ export function useOuterLineWall(setShowOutlineModal) {
return
}
/*if (lastPoint.x === firstPoint.x && lastPoint.y === firstPoint.y) {
if (Math.abs(lastPoint.x - firstPoint.x) < 1 && Math.abs(lastPoint.y - firstPoint.y) < 1) {
return
}
if (lastPoint.x === firstPoint.x || lastPoint.y === firstPoint.y) {
if (Math.abs(lastPoint.x - firstPoint.x) < 1 || Math.abs(lastPoint.y - firstPoint.y) < 1) {
let isAllRightAngle = true
const firstPoint = points[0]
@ -238,38 +248,27 @@ export function useOuterLineWall(setShowOutlineModal) {
if (isAllRightAngle) {
return
}
const line = new QLine([lastPoint.x, lastPoint.y, firstPoint.x, firstPoint.y], {
const line = addLine([lastPoint.x, lastPoint.y, firstPoint.x, firstPoint.y], {
stroke: 'grey',
strokeWidth: 1,
selectable: false,
name: 'helpGuideLine',
})
canvas?.add(line)
addLineText(line)
} else {
const guideLine1 = new QLine([lastPoint.x, lastPoint.y, lastPoint.x, firstPoint.y], {
const guideLine1 = addLine([lastPoint.x, lastPoint.y, lastPoint.x, firstPoint.y], {
stroke: 'grey',
strokeWidth: 1,
strokeDashArray: [1, 1, 1],
name: 'helpGuideLine',
})
const guideLine2 = new QLine([guideLine1.x2, guideLine1.y2, firstPoint.x, firstPoint.y], {
const guideLine2 = addLine([guideLine1.x2, guideLine1.y2, firstPoint.x, firstPoint.y], {
stroke: 'grey',
strokeWidth: 1,
strokeDashArray: [1, 1, 1],
name: 'helpGuideLine',
})
if (guideLine1.length > 0) {
canvas?.add(guideLine1)
addLineText(guideLine1)
}
canvas?.add(guideLine2)
addLineText(guideLine2)
}*/
}
}
}, [points])

6
src/hooks/roofcover/useRoofAllocationSetting.js
View File

@ -95,7 +95,11 @@ export function useRoofAllocationSetting(setShowRoofAllocationSettingModal) {
const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
roofBases.forEach((roofBase) => {
splitPolygonWithLines(roofBase)
try {
splitPolygonWithLines(roofBase)
} catch (e) {
return
}
roofBase.innerLines.forEach((line) => {
canvas.remove(line)

44
src/hooks/roofcover/useRoofShapePassivitySetting.js
View File

@ -33,6 +33,11 @@ export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingMod
const [type, setType] = useState(TYPES.EAVES)
const isFix = useRef(false)
const initLines = useRef([])
const [isLoading, setIsLoading] = useState(false)
const buttons = [
{ id: 1, name: getMessage('eaves'), type: TYPES.EAVES },
{ id: 2, name: getMessage('gable'), type: TYPES.GABLE },
@ -46,15 +51,20 @@ export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingMod
if (!outerLineFix || outerLines.length === 0) {
swalFire({ text: '외벽선이 없습니다.' })
setShowRoofShapePassivitySettingModal(false)
return
}
setIsLoading(true)
}, [])
useEffect(() => {
if (!isLoading) return
addCanvasMouseEventListener('mouse:down', mouseDown)
const wallLines = canvas.getObjects().filter((obj) => obj.name === 'wallLine')
canvas.remove(wallLines)
canvas?.remove(...wallLines)
const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
initLines.current = outerLines.map((line) => ({ ...line }))
outerLines.forEach((outerLine, idx) => {
if (idx === 0) {
currentLineRef.current = outerLine
@ -66,10 +76,11 @@ export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingMod
canvas?.renderAll()
return () => {
handleLineToPolygon()
canvas?.discardActiveObject()
initEvent()
}
}, [])
}, [isLoading])
useEffect(() => {
const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
@ -166,6 +177,14 @@ export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingMod
}
const handleSave = () => {
isFix.current = true
handleLineToPolygon()
setShowRoofShapePassivitySettingModal(false)
}
const handleLineToPolygon = () => {
const roofBases = canvas.getObjects().filter((obj) => obj.name === 'roofBase')
const exceptObjs = canvas.getObjects().filter((obj) => obj.name !== 'outerLine' && obj.parent?.name !== 'outerLine')
const lines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
exceptObjs.forEach((obj) => {
@ -176,13 +195,28 @@ export function useRoofShapePassivitySetting(setShowRoofShapePassivitySettingMod
hideLine(line)
})
const wall = addPolygonByLines(lines, { name: 'wallLine', fill: 'transparent', stroke: 'black' })
let wall
if (isFix.current) {
wall = addPolygonByLines(lines, { name: 'wallLine', fill: 'transparent', stroke: 'black' })
} else {
// 그냥 닫을 경우 처리
wall = addPolygonByLines([...initLines.current], { name: 'wallLine', fill: 'transparent', stroke: 'black' })
lines.forEach((line, idx) => {
line.attributes = initLines.current[idx].attributes
})
}
wall.lines = [...lines]
// 기존 그려진 지붕이 없다면
if (isFix.current) {
// 완료 한 경우에는 지붕까지 그려줌
const roof = drawRoofPolygon(wall)
}
const roof = drawRoofPolygon(wall)
canvas.renderAll()
setShowRoofShapePassivitySettingModal(false)
}
return { handleSave, handleConfirm, buttons, type, setType, TYPES, offsetRef, pitchRef, handleRollback }
}

9
src/hooks/roofcover/useRoofShapeSetting.js
View File

@ -244,8 +244,13 @@ export function useRoofShapeSetting(setShowRoofShapeSettingModal) {
}
}
// 기존 wallLine 제거
canvas?.remove(canvas.getObjects().filter((obj) => obj.name === 'wallLine'))
// 기존 wallLine, roofBase 제거
canvas
.getObjects()
.filter((obj) => obj.name === 'wallLine' || obj.name === 'roofBase')
.forEach((line) => {
canvas.remove(line)
})
const polygon = addPolygonByLines(outerLines, { name: 'wallLine' })
polygon.lines = [...outerLines]

20
src/hooks/roofcover/useWallLineOffsetSetting.js
View File

@ -1,4 +1,4 @@
import { canvasState } from '@/store/canvasAtom'
import { canvasState, currentObjectState } from '@/store/canvasAtom'
import { useRecoilValue } from 'recoil'
import { useEffect, useRef, useState } from 'react'
import { useMessage } from '@/hooks/useMessage'
@ -21,6 +21,8 @@ export function useWallLineOffsetSetting(setShowWallLineOffsetSettingModal) {
const arrow1Ref = useRef(null)
const arrow2Ref = useRef(null)
const currentObject = useRecoilValue(currentObjectState)
const [isLoading, setIsLoading] = useState(false)
const drawLine = (point1, point2, idx, direction = currentWallLineRef.current.direction) => {
@ -87,6 +89,7 @@ export function useWallLineOffsetSetting(setShowWallLineOffsetSettingModal) {
if (!isLoading) {
return
}
canvas?.discardActiveObject()
removeOuterLineEditCircle()
addCanvasMouseEventListener('mouse:down', mouseDown)
if (type === TYPES.WALL_LINE_EDIT) {
@ -94,6 +97,20 @@ export function useWallLineOffsetSetting(setShowWallLineOffsetSettingModal) {
}
}, [type])
useEffect(() => {
canvas
.getObjects()
.filter((obj) => obj.name === 'outerLine')
.forEach((line) => {
line.set({ stroke: 'black' })
})
if (currentObject?.name === 'outerLine') {
currentObject.set({ stroke: '#EA10AC' })
canvas.renderAll()
}
}, [currentObject])
const removeOuterLineEditCircle = () => {
canvas.remove(...canvas.getObjects().filter((obj) => obj.name === 'outerLineEditCircleStart' || obj.name === 'outerLineEditCircleEnd'))
}
@ -106,7 +123,6 @@ export function useWallLineOffsetSetting(setShowWallLineOffsetSettingModal) {
}
currentWallLineRef.current = e.target
console.log(currentWallLineRef.current.idx, currentWallLineRef.current.direction)
if (type === TYPES.WALL_LINE_EDIT) {
addCircleByLine(currentWallLineRef.current)
}

23
src/hooks/surface/usePlacementShapeDrawing.js
View File

@ -232,11 +232,11 @@ export function usePlacementShapeDrawing(setShowPlaceShapeDrawingModal) {
return
}
/*if (lastPoint.x === firstPoint.x && lastPoint.y === firstPoint.y) {
if (Math.abs(lastPoint.x - firstPoint.x) < 1 && Math.abs(lastPoint.y - firstPoint.y) < 1) {
return
}
if (lastPoint.x === firstPoint.x || lastPoint.y === firstPoint.y) {
if (Math.abs(lastPoint.x - firstPoint.x) < 1 || Math.abs(lastPoint.y - firstPoint.y) < 1) {
let isAllRightAngle = true
const firstPoint = points[0]
@ -255,38 +255,27 @@ export function usePlacementShapeDrawing(setShowPlaceShapeDrawingModal) {
if (isAllRightAngle) {
return
}
const line = new QLine([lastPoint.x, lastPoint.y, firstPoint.x, firstPoint.y], {
const line = addLine([lastPoint.x, lastPoint.y, firstPoint.x, firstPoint.y], {
stroke: 'grey',
strokeWidth: 1,
selectable: false,
name: 'helpGuideLine',
})
canvas?.add(line)
addLineText(line)
} else {
const guideLine1 = new QLine([lastPoint.x, lastPoint.y, lastPoint.x, firstPoint.y], {
const guideLine1 = addLine([lastPoint.x, lastPoint.y, lastPoint.x, firstPoint.y], {
stroke: 'grey',
strokeWidth: 1,
strokeDashArray: [1, 1, 1],
name: 'helpGuideLine',
})
const guideLine2 = new QLine([guideLine1.x2, guideLine1.y2, firstPoint.x, firstPoint.y], {
const guideLine2 = addLine([guideLine1.x2, guideLine1.y2, firstPoint.x, firstPoint.y], {
stroke: 'grey',
strokeWidth: 1,
strokeDashArray: [1, 1, 1],
name: 'helpGuideLine',
})
if (guideLine1.length > 0) {
canvas?.add(guideLine1)
addLineText(guideLine1)
}
canvas?.add(guideLine2)
addLineText(guideLine2)
}*/
}
}
}, [points])

40
src/hooks/useAxios.js
View File

@ -40,59 +40,59 @@ export function useAxios(lang = '') {
// response 추가 로직
axios.interceptors.request.use(undefined, (error) => {})
const get = async ({ url }) => {
const get = async ({ url, option = {} }) => {
return await getInstances(url)
.get(url)
.get(url, option)
.then((res) => res.data)
.catch(console.error)
}
const promiseGet = async ({ url }) => {
return await getInstances(url).get(url)
const promiseGet = async ({ url, option = {} }) => {
return await getInstances(url).get(url, option)
}
const post = async ({ url, data }) => {
const post = async ({ url, data, option = {} }) => {
return await getInstances(url)
.post(url, data)
.post(url, data, option)
.then((res) => res.data)
.catch(console.error)
}
const promisePost = async ({ url, data }) => {
return await getInstances(url).post(url, data)
const promisePost = async ({ url, data, option = {} }) => {
return await getInstances(url).post(url, data, option)
}
const put = async ({ url, data }) => {
const put = async ({ url, data, option = {} }) => {
return await getInstances(url)
.put(url, data)
.put(url, data, option)
.then((res) => res.data)
.catch(console.error)
}
const promisePut = async ({ url, data }) => {
return await getInstances(url).put(url, data)
const promisePut = async ({ url, data, option = {} }) => {
return await getInstances(url).put(url, data, option)
}
const patch = async ({ url, data }) => {
const patch = async ({ url, data, option = {} }) => {
return await getInstances(url)
.patch(url, data)
.patch(url, data, option)
.then((res) => res.data)
.catch(console.error)
}
const promisePatch = async ({ url, data }) => {
return await getInstances(url).patch(url, data)
const promisePatch = async ({ url, data, option = {} }) => {
return await getInstances(url).patch(url, data, option)
}
const del = async ({ url }) => {
const del = async ({ url, option = {} }) => {
return await getInstances(url)
.delete(url)
.delete(url, option)
.then((res) => res.data)
.catch(console.error)
}
const promiseDel = async ({ url }) => {
return await getInstances(url).delete(url)
const promiseDel = async ({ url, option = {} }) => {
return await getInstances(url).delete(url, option)
}
return { get, promiseGet, post, promisePost, put, promisePut, patch, promisePatch, del, promiseDel }

14
src/hooks/useEvent.js
View File

@ -2,7 +2,7 @@ import { useEffect, useRef } from 'react'
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
import { canvasState, canvasZoomState, currentMenuState, textModeState } from '@/store/canvasAtom'
import { fabric } from 'fabric'
import { calculateDistance, distanceBetweenPoints, findClosestPoint } from '@/util/canvas-util'
import { calculateDistance, calculateIntersection, distanceBetweenPoints, findClosestPoint, polygonToTurfPolygon } from '@/util/canvas-util'
import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
import { useDotLineGrid } from '@/hooks/useDotLineGrid'
import { useTempGrid } from '@/hooks/useTempGrid'
@ -43,7 +43,6 @@ export function useEvent() {
//default Event 추가
addCanvasMouseEventListener('mouse:move', defaultMouseMoveEvent)
addCanvasMouseEventListener('mouse:out', defaultMouseOutEvent)
addDocumentEventListener('keydown', document, defaultKeyboardEvent)
addDocumentEventListener('contextmenu', document, defaultContextMenuEvent)
if (adsorptionPointAddMode) {
addCanvasMouseEventListener('mouse:down', adsorptionPointAddModeStateEvent)
@ -152,6 +151,17 @@ export function useEvent() {
}
}
try {
const helpGuideLines = canvas.getObjects().filter((obj) => obj.name === 'helpGuideLine')
if (helpGuideLines.length === 2) {
const guideIntersectionPoint = calculateIntersection(helpGuideLines[0], helpGuideLines[1])
if (guideIntersectionPoint && distanceBetweenPoints(guideIntersectionPoint, pointer) <= adsorptionRange) {
arrivalPoint = guideIntersectionPoint
}
}
} catch (e) {}
const horizontalLine = new fabric.Line([-1 * canvas.width, arrivalPoint.y, 2 * canvas.width, arrivalPoint.y], {
stroke: 'red',
strokeWidth: 1,

2
src/hooks/useLine.js
View File

@ -14,7 +14,7 @@ export const useLine = () => {
fontFamily: fontFamily,
})
if (line.length === 0) {
if (line.length < 1) {
return null
}

293
src/hooks/usePlan.js
View File

@ -1,3 +1,4 @@
import { useEffect, useState } from 'react'
import { useRecoilState } from 'recoil'
import { canvasState, currentCanvasPlanState, initCanvasPlansState, plansState } from '@/store/canvasAtom'
import { useAxios } from '@/hooks/useAxios'
@ -5,10 +6,13 @@ import { useMessage } from '@/hooks/useMessage'
import { useSwal } from '@/hooks/useSwal'
export function usePlan() {
const [planNum, setPlanNum] = useState(0)
const [canvas, setCanvas] = useRecoilState(canvasState)
const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState)
const [plans, setPlans] = useRecoilState(plansState)
const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState) // DB에 저장된 plan
const [plans, setPlans] = useRecoilState(plansState) // 전체 plan (DB에 저장된 plan + 저장 안된 새로운 plan)
const { swalFire } = useSwal()
const { getMessage } = useMessage()
const { get, promisePost, promisePut, promiseDel } = useAxios()
@ -72,6 +76,9 @@ export function usePlan() {
// }, 1000)
}
/**
* 현재 캔버스에 그려진 데이터를 추출
*/
const currentCanvasData = () => {
removeMouseLines()
return addCanvas()
@ -81,8 +88,7 @@ export function usePlan() {
* 실시간 캔버스 상태와 DB에 저장된 캔버스 상태를 비교하여 수정 여부를 판단
*/
const checkModifiedCanvasPlan = () => {
removeMouseLines()
const canvasStatus = addCanvas()
const canvasStatus = currentCanvasData()
const initPlanData = initCanvasPlans.find((plan) => plan.id === currentCanvasPlan.id)
if (!initPlanData) {
@ -90,15 +96,10 @@ export function usePlan() {
return JSON.parse(canvasStatus).objects.length > 0
} else {
// 저장된 캔버스
if (canvasStatus === initPlanData.canvasStatus) {
return false
} else {
// 각각 object들의 id 목록을 추출하여 비교
const canvasObjsIds = getObjectIds(JSON.parse(canvasStatus).objects)
const dbObjsIds = getObjectIds(JSON.parse(initPlanData.canvasStatus).objects)
return canvasObjsIds.length !== dbObjsIds.length || !canvasObjsIds.every((id, index) => id === dbObjsIds[index])
}
// 각각 object들의 id 목록을 추출하여 비교
const canvasObjsIds = getObjectIds(JSON.parse(canvasStatus).objects)
const dbObjsIds = getObjectIds(JSON.parse(initPlanData.canvasStatus).objects)
return canvasObjsIds.length !== dbObjsIds.length || !canvasObjsIds.every((id, index) => id === dbObjsIds[index])
}
}
const getObjectIds = (objects) => {
@ -112,9 +113,6 @@ export function usePlan() {
* DB에 저장된 데이터를 canvas에서 사용할 수 있도록 포맷화
*/
const dbToCanvasFormat = (cs) => {
// return JSON.stringify(cs.replace(/##/g, '"')) //.replace(/\\/g, ''))//.slice(1, -1))
// JSON.stringify()를 사용하면 "가 \"로 바뀐다. 따라서, JSON.stringify를 제거
// canvasToDbFormat()에서 \\의 상황을 없앴으므로 replace(/\\/g, '')를 제거
return cs.replace(/##/g, '"')
}
@ -122,92 +120,24 @@ export function usePlan() {
* canvas의 데이터를 DB에 저장할 수 있도록 포맷화
*/
const canvasToDbFormat = (cs) => {
// return JSON.stringify(cs).replace(/"/g, '##')
// addCanvas()에서 JSON.stringify()를 거쳐서 나오는데, 또 감싸버려서 \가 \\로 된다. 따라서, JSON.stringify를 제거
return cs.replace(/"/g, '##')
}
/**
* 페이지 내 캔버스를 저장하는 함수
*
* 1. 신규 저장 : POST
* param(body) : userId, objectNo, canvasStatus
* 2. 수정 저장 : PUT
* param(body) : id, canvasStatus
* 페이지 내 캔버스를 저장
*/
const saveCanvas = async (userId) => {
removeMouseLines()
const canvasStatus = addCanvas()
if (initCanvasPlans.some((plan) => plan.id === currentCanvasPlan.id)) {
// canvas 수정
const planData = {
id: currentCanvasPlan.id,
canvasStatus: canvasToDbFormat(canvasStatus),
}
return await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData })
.then((res) => {
swalFire({ text: getMessage('common.message.save') })
// console.log('[PUT] canvas-statuses res :::::::: %o', res)
setInitCanvasPlans((initCanvasPlans) =>
initCanvasPlans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)),
)
setPlans((plans) => plans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)))
})
.catch((error) => {
swalFire({ text: error.message, icon: 'error' })
// console.error('[PUT] canvas-statuses error :::::::: %o', error)
})
} else {
// canvas 신규 등록
const planData = {
userId: userId,
imageName: 'image_name', // api 필수항목이여서 임시로 넣음, 이후 삭제 필요
objectNo: currentCanvasPlan.objectNo,
canvasStatus: canvasToDbFormat(canvasStatus),
}
return await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
.then((res) => {
swalFire({ text: getMessage('common.message.save') })
// console.log('[POST] canvas-statuses response :::::::: %o', res)
setInitCanvasPlans((initCanvasPlans) => [
...initCanvasPlans,
{
id: res.data,
name: currentCanvasPlan.objectNo + '-' + res.data,
userId: userId,
canvasStatus: canvasStatus,
isNew: currentCanvasPlan.id,
},
])
setPlans((plans) =>
plans.map((plan) =>
plan.id === currentCanvasPlan.id
? {
...plan,
id: res.data,
name: currentCanvasPlan.objectNo + '-' + res.data,
userId: userId,
canvasStatus: canvasStatus,
isNew: currentCanvasPlan.id,
}
: plan,
),
)
})
.catch((error) => {
swalFire({ text: error.message, icon: 'error' })
// console.error('[POST] canvas-statuses res error :::::::: %o', error)
})
}
const canvasStatus = currentCanvasData()
initCanvasPlans.some((plan) => plan.id === currentCanvasPlan.id)
? await putCanvasStatus(canvasStatus)
: await postCanvasStatus(userId, canvasStatus)
}
/**
* objectNo에 해당하는 canvas 목록을 조회하는 함수
* objectNo에 해당하는 canvas 목록을 조회
*/
const getCanvasByObjectNo = async (userId, objectNo) => {
// console.log(`[GET] objectNo: ${objectNo} / userId: ${userId}`)
return get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}/${userId}` }).then((res) =>
res.map((item) => ({
id: item.id,
@ -220,27 +150,192 @@ export function usePlan() {
}
/**
* id에 해당하는 canvas 데이터를 삭제하는 함수
* canvas 데이터를 추가
*/
const postCanvasStatus = async (userId, canvasStatus) => {
const planData = {
userId: userId,
imageName: 'image_name', // api 필수항목이여서 임시로 넣음, 이후 삭제 필요
objectNo: currentCanvasPlan.objectNo,
canvasStatus: canvasToDbFormat(canvasStatus),
}
await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
.then((res) => {
swalFire({ text: getMessage('plan.message.save') })
setInitCanvasPlans((initCanvasPlans) => [...initCanvasPlans, { id: res.data, canvasStatus: canvasStatus }])
setPlans((plans) =>
plans.map((plan) =>
plan.id === currentCanvasPlan.id
? {
...plan,
id: res.data,
name: currentCanvasPlan.objectNo + '-' + res.data,
canvasStatus: canvasStatus,
}
: plan,
),
)
})
.catch((error) => {
swalFire({ text: error.message, icon: 'error' })
})
}
/**
* id에 해당하는 canvas 데이터를 수정
*/
const putCanvasStatus = async (canvasStatus) => {
const planData = {
id: currentCanvasPlan.id,
canvasStatus: canvasToDbFormat(canvasStatus),
}
await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData })
.then((res) => {
swalFire({ text: getMessage('plan.message.save') })
setInitCanvasPlans((initCanvasPlans) =>
initCanvasPlans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)),
)
setPlans((plans) => plans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)))
})
.catch((error) => {
swalFire({ text: error.message, icon: 'error' })
})
}
/**
* id에 해당하는 canvas 데이터를 삭제
*/
const delCanvasById = (id) => {
return promiseDel({ url: `/api/canvas-management/canvas-statuses/by-id/${id}` })
}
/**
* objectNo에 해당하는 canvas 데이터들을 삭제하는 함수
* objectNo에 해당하는 canvas 데이터들을 삭제
*/
const delCanvasByObjectNo = (objectNo) => {
return promiseDel({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}` })
}
/**
* plan 이동
* 현재 plan의 작업상태를 확인, 저장 후 이동
*/
const handleCurrentPlan = (userId, newCurrentId) => {
if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) {
if (currentCanvasPlan?.id && checkModifiedCanvasPlan()) {
swalFire({
text: `${currentCanvasPlan.name} ` + getMessage('plan.message.confirm.save'),
type: 'confirm',
confirmFn: async () => {
await saveCanvas(userId)
updateCurrentPlan(newCurrentId)
},
denyFn: () => {
updateCurrentPlan(newCurrentId)
},
})
} else {
updateCurrentPlan(newCurrentId)
}
}
}
const updateCurrentPlan = (newCurrentId) => {
setPlans((plans) =>
plans.map((plan) => {
return { ...plan, isCurrent: plan.id === newCurrentId }
}),
)
}
useEffect(() => {
setCurrentCanvasPlan(plans.find((plan) => plan.isCurrent) || null)
}, [plans])
/**
* 새로운 plan 생성
* 현재 plan의 데이터가 있을 경우 복제 여부를 확인
*/
const handleAddPlan = (userId, objectNo) => {
JSON.parse(currentCanvasData()).objects.length > 0
? swalFire({
text: `${currentCanvasPlan.name} ` + getMessage('plan.message.confirm.copy'),
type: 'confirm',
confirmFn: () => {
addPlan(userId, objectNo, currentCanvasData())
},
denyFn: () => {
addPlan(userId, objectNo)
},
})
: addPlan(userId, objectNo)
}
const addPlan = (userId, objectNo, canvasStatus = '') => {
const newPlan = {
id: planNum,
name: `Plan ${planNum + 1}`,
objectNo: objectNo,
userId: userId,
canvasStatus: canvasStatus,
}
setPlans([...plans, newPlan])
handleCurrentPlan(userId, planNum)
setPlanNum(planNum + 1)
}
/**
* plan 삭제
*/
const handleDeletePlan = (e, id) => {
e.stopPropagation() // 이벤트 버블링 방지
if (initCanvasPlans.some((plan) => plan.id === id)) {
delCanvasById(id)
.then((res) => {
swalFire({ text: getMessage('plan.message.delete') })
setInitCanvasPlans((initCanvasPlans) => initCanvasPlans.filter((plan) => plan.id !== id))
setPlans((plans) => plans.filter((plan) => plan.id !== id))
})
.catch((error) => {
swalFire({ text: error.message, icon: 'error' })
})
} else {
setPlans((plans) => plans.filter((plan) => plan.id !== id))
swalFire({ text: getMessage('plan.message.delete') })
}
// 삭제 후 last 데이터에 포커싱
const lastPlan = plans.filter((plan) => plan.id !== id).at(-1)
if (!lastPlan) {
setPlanNum(0)
setCurrentCanvasPlan(null)
} else if (id !== lastPlan.id) {
updateCurrentPlan(lastPlan.id)
}
}
/**
* plan 조회
*/
const loadCanvasPlanData = (userId, objectNo) => {
getCanvasByObjectNo(userId, objectNo).then((res) => {
// console.log('canvas 목록 ', res)
if (res.length > 0) {
setInitCanvasPlans(res)
setPlans(res)
updateCurrentPlan(res.at(-1).id) // last 데이터에 포커싱
setPlanNum(res.length)
} else {
addPlan(userId, objectNo)
}
})
}
return {
canvas,
removeMouseLines,
currentCanvasData,
plans,
saveCanvas,
addCanvas,
checkModifiedCanvasPlan,
getCanvasByObjectNo,
delCanvasById,
handleCurrentPlan,
handleAddPlan,
handleDeletePlan,
loadCanvasPlanData,
}
}

13
src/locales/ja.json
View File

@ -247,6 +247,11 @@
"modal.object.setting.direction.select": "方向の選択",
"modal.placement.surface.setting.info": "ⓘ ①の長さ入力後に対角線の長さを入力すると、②の長さを自動計算します。",
"modal.placement.surface.setting.diagonal.length": "斜めの長さ",
"plan.message.confirm.save": "PLAN을 저장하시겠습니까?",
"plan.message.confirm.copy": "PLAN을 복사하시겠습니까?",
"plan.message.confirm.delete": "PLAN을 삭제하시겠습니까?",
"plan.message.save": "저장되었습니다.",
"plan.message.delete": "삭제되었습니다.",
"setting": "設定",
"common.message.no.data": "No data",
"common.message.no.dataDown": "ダウンロードするデータがありません",
@ -335,7 +340,7 @@
"common.message.writeToConfirm": "作成解除を実行しますか？",
"common.message.password.init.success": "パスワード [{0}] に初期化されました。",
"common.message.no.edit.save": "この文書は変更できません。",
"common.require": "필수",
"common.require": "必須",
"commons.west": "立つ",
"commons.east": "ドン",
"commons.south": "立つ",
@ -497,6 +502,7 @@
"stuff.planReqPopup.search.period": "期間検索",
"stuff.planReqPopup.search.schDateGbnS": "提出日",
"stuff.planReqPopup.search.schDateGbnR": "受付日",
"stuff.planReqPopup.error.message1": "設計依頼を選択してください。",
"stuff.search.title": "物件状況",
"stuff.search.btn1": "物件登録",
"stuff.search.btn2": "照会",
@ -511,6 +517,11 @@
"stuff.search.period": "期間検索",
"stuff.search.schDateTypeU": "更新日",
"stuff.search.schDateTypeR": "登録日",
"stuff.search.grid.title": "商品リスト",
"stuff.search.grid.all": "全体",
"stuff.search.grid.selected": "選択",
"stuff.search.grid.schSortTypeR": "最近の登録日",
"stuff.search.grid.schSortTypeU": "最近の更新日",
"stuff.windSelectPopup.title": "風速選択",
"stuff.windSelectPopup.table.selected": "選択",
"stuff.windSelectPopup.table.windspeed": "風速",

11
src/locales/ko.json
View File

@ -252,6 +252,11 @@
"modal.object.setting.direction.select": "방향 선택",
"modal.placement.surface.setting.info": "ⓘ ①의 길이 입력 후 대각선 길이를 입력하면 ②의 길이를 자동 계산합니다.",
"modal.placement.surface.setting.diagonal.length": "대각선 길이",
"plan.message.confirm.save": "PLAN을 저장하시겠습니까?",
"plan.message.confirm.copy": "PLAN을 복사하시겠습니까?",
"plan.message.confirm.delete": "PLAN을 삭제하시겠습니까?",
"plan.message.save": "저장되었습니다.",
"plan.message.delete": "삭제되었습니다.",
"setting": "설정",
"common.message.no.data": "No data",
"common.message.no.dataDown": "No data to download",
@ -502,6 +507,7 @@
"stuff.planReqPopup.search.period": "기간검색",
"stuff.planReqPopup.search.schDateGbnS": "제출일",
"stuff.planReqPopup.search.schDateGbnR": "접수일",
"stuff.planReqPopup.error.message1": "설계의뢰를 선택해주세요.",
"stuff.search.title": "물건현황",
"stuff.search.btn1": "신규등록",
"stuff.search.btn2": "조회",
@ -516,6 +522,11 @@
"stuff.search.period": "기간검색",
"stuff.search.schDateTypeU": "갱신일",
"stuff.search.schDateTypeR": "등록일",
"stuff.search.grid.title": "물건목록",
"stuff.search.grid.all": "전체",
"stuff.search.grid.selected": "선택",
"stuff.search.grid.schSortTypeR": "최근 등록일",
"stuff.search.grid.schSortTypeU": "최근 갱신일",
"stuff.windSelectPopup.title": "풍속선택",
"stuff.windSelectPopup.table.selected": "선택",
"stuff.windSelectPopup.table.windspeed": "풍속",

5
src/store/canvasAtom.js
View File

@ -289,3 +289,8 @@ export const canGridOptionSeletor = selector({
return points.length === 0 || outerLineFix
},
})
export const globalPitchState = atom({
key: 'globalPitch',
default: 4,
})

2
src/store/planReqAtom.js
View File

@ -16,7 +16,7 @@ export const planReqSearchState = atom({
schStartDt: dayjs(new Date()).add(-3, 'month').format('YYYY-MM-DD'), //시작일
schEndDt: dayjs(new Date()).format('YYYY-MM-DD'), //종료일
startRow: 1,
endRow: 100,
endRow: 20,
},
dangerouslyAllowMutability: true,
})

4
src/store/stuffAtom.js
View File

@ -18,10 +18,6 @@ export const stuffSearchState = atom({
startRow: 1,
endRow: 100,
schSortType: 'R', //정렬조건 (R:최근등록일 U:최근수정일)
selObject: {
value: '',
label: '',
},
},
dangerouslyAllowMutability: true,
})

1237
src/styles/_main.scss
View File

File diff suppressed because it is too large Load Diff

3154
src/styles/_modal.scss
View File

File diff suppressed because it is too large Load Diff

1640
src/styles/_reset.scss
View File

File diff suppressed because it is too large Load Diff

6
src/util/board-utils.js
View File

@ -8,8 +8,10 @@ export const handleFileDown = async (file) => {
const params = new URLSearchParams({
encodeFileNo: file.encodeFileNo,
})
const options = { responseType: 'blob' }
const apiUrl = `${url}?${params.toString()}`
await promiseGet({ url: apiUrl, responseType: 'blob' })
await promiseGet({ url: apiUrl, option: options })
.then((resultData) => {
if (resultData) {
const blob = new Blob([resultData.data], { type: resultData.headers['content-type'] || 'application/octet-stream' })
@ -25,7 +27,7 @@ export const handleFileDown = async (file) => {
}
})
.catch((error) => {
alert(error.response.data.message)
alert('File does not exist.')
})
}

110
src/util/canvas-util.js
View File

@ -744,67 +744,6 @@ export const polygonToTurfPolygon = (polygon) => {
)
}
export const splitDormerTriangle = (triangle, direction) => {
const halfWidth = triangle.width / 2
let leftPoints = []
let rightPoints = []
let leftPointOffset = []
let rightPointOffset = []
if (direction === 'down') {
leftPoints = [
{ x: triangle.left, y: triangle.top },
{ x: triangle.left - halfWidth, y: triangle.top + triangle.height },
{ x: triangle.left, y: triangle.top + triangle.height },
]
rightPoints = [
{ x: triangle.left, y: triangle.top },
{ x: triangle.left, y: triangle.top + triangle.height },
{ x: triangle.left + halfWidth, y: triangle.top + triangle.height },
]
} else if (direction === 'up') {
leftPoints = [
{ x: triangle.left, y: triangle.top },
{ x: triangle.left - halfWidth, y: triangle.top - triangle.height },
{ x: triangle.left, y: triangle.top - triangle.height },
]
rightPoints = [
{ x: triangle.left, y: triangle.top },
{ x: triangle.left, y: triangle.top - triangle.height },
{ x: triangle.left + halfWidth, y: triangle.top - triangle.height },
]
} else if (direction === 'left') {
leftPoints = [
{ x: triangle.left, y: triangle.top },
{ x: triangle.left - triangle.height, y: triangle.top - halfWidth },
{ x: triangle.left - triangle.height, y: triangle.top },
]
rightPoints = [
{ x: triangle.left, y: triangle.top },
{ x: triangle.left - triangle.height, y: triangle.top },
{ x: triangle.left - triangle.height, y: triangle.top + halfWidth },
]
} else if (direction === 'right') {
leftPoints = [
{ x: triangle.left, y: triangle.top },
{ x: triangle.left + triangle.height, y: triangle.top },
{ x: triangle.left + triangle.height, y: triangle.top + triangle.height },
]
rightPoints = [
{ x: triangle.left, y: triangle.top },
{ x: triangle.left + triangle.height, y: triangle.top },
{ x: triangle.left + triangle.height, y: triangle.top - triangle.height },
]
}
return [leftPoints, rightPoints]
}
export const triangleToPolygon = (triangle) => {
const points = []
const halfWidth = triangle.width / 2
@ -853,7 +792,7 @@ export function setSurfaceShapePattern(polygon) {
patternSourceCanvas.width = polygon.width * ratio
patternSourceCanvas.height = polygon.height * ratio
const ctx = patternSourceCanvas.getContext('2d')
const offset = roofStyle === 1 ? 0 : patternSize.width / 2
let offset = roofStyle === 1 ? 0 : patternSize.width / 2
const rows = Math.floor(patternSourceCanvas.height / patternSize.height)
const cols = Math.floor(patternSourceCanvas.width / patternSize.width)
@ -861,23 +800,46 @@ export function setSurfaceShapePattern(polygon) {
ctx.strokeStyle = 'green'
ctx.lineWidth = 0.4
for (let row = 0; row <= rows; row++) {
const y = row * patternSize.height
ctx.beginPath()
ctx.moveTo(0, y) // 선 시작점
ctx.lineTo(patternSourceCanvas.width, y) // 선 끝점
ctx.stroke()
if (polygon.direction === 'east' || polygon.direction === 'west') {
offset = roofStyle === 1 ? 0 : patternSize.height / 2
for (let col = 0; col <= cols; col++) {
const x = col * patternSize.width + (row % 2 === 0 ? 0 : offset)
const yStart = row * patternSize.height
const yEnd = yStart + patternSize.height
const x = col * patternSize.width
const yStart = 0
const yEnd = patternSourceCanvas.height
ctx.beginPath()
ctx.moveTo(x, yStart) // 선 시작점
ctx.lineTo(x, yEnd) // 선 끝점
ctx.stroke()
for (let row = 0; row <= rows; row++) {
const y = row * patternSize.height + (col % 2 === 0 ? 0 : offset)
const xStart = col * patternSize.width
const xEnd = xStart + patternSize.width
ctx.beginPath()
ctx.moveTo(xStart, y) // 선 시작점
ctx.lineTo(xEnd, y) // 선 끝점
ctx.stroke()
}
}
} else {
for (let row = 0; row <= rows; row++) {
const y = row * patternSize.height
ctx.beginPath()
ctx.moveTo(0, y) // 선 시작점
ctx.lineTo(patternSourceCanvas.width, y) // 선 끝점
ctx.stroke()
for (let col = 0; col <= cols; col++) {
const x = col * patternSize.width + (row % 2 === 0 ? 0 : offset)
const yStart = row * patternSize.height
const yEnd = yStart + patternSize.height
ctx.beginPath()
ctx.moveTo(x, yStart) // 선 시작점
ctx.lineTo(x, yEnd) // 선 끝점
ctx.stroke()
}
}
}

56
yarn.lock
View File

@ -273,7 +273,7 @@
resolved "https://registry.npmjs.org/@bedrock-layout/use-stateful-ref/-/use-stateful-ref-1.4.1.tgz"
integrity sha512-4eKO2KdQEXcR5LI4QcxqlJykJUDQJWDeWYAukIn6sRQYoabcfI5kDl61PUi6FR6o8VFgQ8IEP7HleKqWlSe8SQ==
"@emotion/babel-plugin@^11.11.0", "@emotion/babel-plugin@^11.12.0":
"@emotion/babel-plugin@^11.12.0":
version "11.12.0"
resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.12.0.tgz#7b43debb250c313101b3f885eba634f1d723fcc2"
integrity sha512-y2WQb+oP8Jqvvclh8Q55gLUyb7UFvgv7eJfsj7td5TToBrIUtPay2kMrZi4xjq9qw2vD0ZR5fSho0yqoFgX7Rw==
@ -290,7 +290,7 @@
source-map "^0.5.7"
stylis "4.2.0"
"@emotion/cache@^11.11.0", "@emotion/cache@^11.13.0", "@emotion/cache@^11.4.0":
"@emotion/cache@^11.13.0", "@emotion/cache@^11.4.0":
version "11.13.1"
resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.13.1.tgz#fecfc54d51810beebf05bf2a161271a1a91895d7"
integrity sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==
@ -306,32 +306,11 @@
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.2.tgz#ff9221b9f58b4dfe61e619a7788734bd63f6898b"
integrity sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==
"@emotion/is-prop-valid@^1.2.1":
version "1.3.1"
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz#8d5cf1132f836d7adbe42cf0b49df7816fc88240"
integrity sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==
dependencies:
"@emotion/memoize" "^0.9.0"
"@emotion/memoize@^0.9.0":
version "0.9.0"
resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.9.0.tgz#745969d649977776b43fc7648c556aaa462b4102"
integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==
"@emotion/react@11.11.0":
version "11.11.0"
resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.11.0.tgz#408196b7ef8729d8ad08fc061b03b046d1460e02"
integrity sha512-ZSK3ZJsNkwfjT3JpDAWJZlrGD81Z3ytNDsxw1LKq1o+xkmO5pnWfr6gmCC8gHEFf3nSSX/09YrG67jybNPxSUw==
dependencies:
"@babel/runtime" "^7.18.3"
"@emotion/babel-plugin" "^11.11.0"
"@emotion/cache" "^11.11.0"
"@emotion/serialize" "^1.1.2"
"@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
"@emotion/utils" "^1.2.1"
"@emotion/weak-memoize" "^0.3.1"
hoist-non-react-statics "^3.3.1"
"@emotion/react@^11.8.1":
version "11.13.3"
resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.13.3.tgz#a69d0de2a23f5b48e0acf210416638010e4bd2e4"
@ -346,7 +325,7 @@
"@emotion/weak-memoize" "^0.4.0"
hoist-non-react-statics "^3.3.1"
"@emotion/serialize@^1.1.2", "@emotion/serialize@^1.2.0", "@emotion/serialize@^1.3.1":
"@emotion/serialize@^1.2.0", "@emotion/serialize@^1.3.1":
version "1.3.2"
resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.3.2.tgz#e1c1a2e90708d5d85d81ccaee2dfeb3cc0cccf7a"
integrity sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==
@ -362,38 +341,21 @@
resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.4.0.tgz#c9299c34d248bc26e82563735f78953d2efca83c"
integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==
"@emotion/styled@11.11.0":
version "11.11.0"
resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.11.0.tgz#26b75e1b5a1b7a629d7c0a8b708fbf5a9cdce346"
integrity sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==
dependencies:
"@babel/runtime" "^7.18.3"
"@emotion/babel-plugin" "^11.11.0"
"@emotion/is-prop-valid" "^1.2.1"
"@emotion/serialize" "^1.1.2"
"@emotion/use-insertion-effect-with-fallbacks" "^1.0.1"
"@emotion/utils" "^1.2.1"
"@emotion/unitless@^0.10.0":
version "0.10.0"
resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.10.0.tgz#2af2f7c7e5150f497bdabd848ce7b218a27cf745"
integrity sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==
"@emotion/use-insertion-effect-with-fallbacks@^1.0.1", "@emotion/use-insertion-effect-with-fallbacks@^1.1.0":
"@emotion/use-insertion-effect-with-fallbacks@^1.1.0":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz#1a818a0b2c481efba0cf34e5ab1e0cb2dcb9dfaf"
integrity sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw==
"@emotion/utils@^1.2.1", "@emotion/utils@^1.4.0", "@emotion/utils@^1.4.1":
"@emotion/utils@^1.4.0", "@emotion/utils@^1.4.1":
version "1.4.1"
resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-1.4.1.tgz#b3adbb43de12ee2149541c4f1337d2eb7774f0ad"
integrity sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==
"@emotion/weak-memoize@^0.3.1":
version "0.3.1"
resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.3.1.tgz#d0fce5d07b0620caa282b5131c297bb60f9d87e6"
integrity sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==
"@emotion/weak-memoize@^0.4.0":
version "0.4.0"
resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz#5e13fac887f08c44f76b0ccaf3370eb00fec9bb6"
@ -5955,14 +5917,6 @@ react-draggable@^4.4.6:
clsx "^1.1.1"
prop-types "^15.8.1"
react-dropdown-select@^4.11.3:
version "4.11.3"
resolved "https://registry.yarnpkg.com/react-dropdown-select/-/react-dropdown-select-4.11.3.tgz#b23b8906f3bedc9d6a1a2125af936b34d4057158"
integrity sha512-/mOGSqqhmKsxxrmotLM+qn1Ss3nxGN6QnYusyQ7f0wizsWrc7ZmbcZhGRtwkJwpL6JYDQVTn19EYxJU1XfXrDA==
dependencies:
"@emotion/react" "11.11.0"
"@emotion/styled" "11.11.0"
react-hook-form@^7.53.0:
version "7.53.0"
resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.53.0.tgz#3cf70951bf41fa95207b34486203ebefbd3a05ab"