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

Merge branch 'dev' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into feature/outer-lines

Browse Source
This commit is contained in:
hyojun.choi 2024-10-08 10:35:32 +09:00
commit d460b3f0ab
46 changed files with 1651 additions and 705 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
public/static/images/canvas/eaves_icon09.svg Normal file
View File

@ -0,0 +1,10 @@
<svg width="32" height="30" viewBox="0 0 32 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.75" width="30" height="30" fill="#45CD7D"/>
<mask id="mask0_13_48" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="30">
<rect x="0.75" width="30" height="30" fill="#45CD7D"/>
</mask>
<g mask="url(#mask0_13_48)">
<path d="M0 -5.48276L16.254 9L32 -6" stroke="black" stroke-width="2"/>
<path d="M16.2 9V30" stroke="black" stroke-width="2"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 491 B

18
public/static/images/canvas/eaves_icon10.svg Normal file
View File

@ -0,0 +1,18 @@
<svg width="31" height="30" viewBox="0 0 31 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.75" width="30" height="30" fill="white"/>
<mask id="mask0_14_55" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="31" height="30">
<rect width="31" height="30" fill="white"/>
</mask>
<g mask="url(#mask0_14_55)">
<rect x="25" y="6.5" width="4" height="1" transform="rotate(-90 25 6.5)" fill="#ED0004"/>
<rect x="5" y="6.5" width="4" height="1" transform="rotate(-90 5 6.5)" fill="#ED0004"/>
<rect x="7.30005" y="5" width="1" height="16.4" transform="rotate(-90 7.30005 5)" fill="black"/>
<path d="M9.86255 7L7.30005 4.5L9.86255 2" stroke="black"/>
<path d="M21.3 7L23.8625 4.5L21.3 2" stroke="black"/>
<rect width="2" height="21" transform="matrix(-1 0 0 1 29.7 9)" fill="black"/>
<rect width="2" height="21" transform="matrix(-1 0 0 1 3.69995 9)" fill="black"/>
<rect width="28" height="1.90909" transform="matrix(-1 0 0 1 29.7 9)" fill="black"/>
<rect width="2" height="11" transform="matrix(-1 0 0 1 16.7 19)" fill="black"/>
<path d="M6 10.3103L15.6508 19L25 10" stroke="black" stroke-width="2"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

3
public/static/images/canvas/module_tab_arr.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector 7183" d="M1.33333 1L7.33333 7L1.33333 13" stroke="#7D7D7D" stroke-width="1.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 198 B

3
public/static/images/canvas/module_tab_arr_white.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector 7183" d="M1.33331 1L7.33331 7L1.33331 13" stroke="white" stroke-width="1.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 196 B

3
public/static/images/canvas/penal_arr.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector 4" d="M1.5 1.25L5 4.75L8.5 1.25" stroke="#3D3D3D" stroke-width="1.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 189 B

3
public/static/images/canvas/penal_arr_white.svg Normal file
View File

@ -0,0 +1,3 @@
<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="Vector 4" d="M1.5 4.75L5 1.25L8.5 4.75" stroke="white" stroke-width="1.5"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 187 B

4
src/app/QcastProvider.js
View File

@ -16,15 +16,11 @@ export const QcastProvider = ({ children }) => {
const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
useEffect(() => {
console.log(sessionStorage.getItem('hi'))
console.log(Object.keys(appMessageState).length)
// if (Object.keys(appMessageState).length === 0) {
if (globalLocale === 'ko') {
setAppMessageState(KO)
} else {
setAppMessageState(JA)
}
// }
}, [globalLocale])
return (

6
src/app/join/page.jsx
View File

@ -1,5 +1,9 @@
import Join from '@/components/auth/Join'
export default function JoinPage() {
return <>{<Join />}</>
return (
<>
<Join />
</>
)
}

23
src/app/layout.js
View File

@ -61,16 +61,19 @@ export default async function RootLayout({ children }) {
<RecoilRootWrapper>
<html lang="en">
<body>
{/*{headerPathname !== '/login' && <Headers />}*/}
<div className="wrap">
<Header userSession={sessionProps} />
<UIProvider>
<div className="content">
<Dimmed />
<QcastProvider>{children}</QcastProvider>
</div>
</UIProvider>
</div>
{headerPathname !== '/login' ? (
<div className="wrap">
<Header userSession={sessionProps} />
<UIProvider>
<div className="content">
<Dimmed />
<QcastProvider>{children}</QcastProvider>
</div>
</UIProvider>
</div>
) : (
<QcastProvider>{children}</QcastProvider>
)}
<ToastContainer />
<QModal />
</body>

3
src/app/login/page.jsx
View File

@ -1,9 +1,10 @@
import Login from '@/components/auth/Login'
import NewLogin from '@/components/auth/NewLogin'
export default function LoginPage() {
return (
<>
<Login />
<NewLogin />
</>
)
}

3
src/components/InitSettingsModal.jsx
View File

@ -6,7 +6,6 @@ import { useRecoilState, useRecoilValue } from 'recoil'
import { modalContent, modalState } from '@/store/modalAtom'
import { canvasSettingState } from '@/store/canvasAtom'
import { useAxios } from '@/hooks/useAxios'
import { get, post } from '@/lib/Axios'
export default function InitSettingsModal(props) {
const [objectNo, setObjectNo] = useState('test123240909003') // 후에 삭제 필요
@ -25,6 +24,8 @@ export default function InitSettingsModal(props) {
setOpen,
}
const { get, post } = useAxios()
//const { get, post } = useAxios()
useEffect(() => {

38
src/components/Playground.jsx
View File

@ -1,6 +1,6 @@
'use client'
import { useRef, useState } from 'react'
import { useRef, useState, useEffect } from 'react'
import { useRecoilState } from 'recoil'
import { v4 as uuidv4 } from 'uuid'
import { FaAnglesUp } from 'react-icons/fa6'
@ -18,6 +18,7 @@ import { useSwal } from '@/hooks/useSwal'
import styles from './playground.module.css'
import Image from 'next/image'
import QInput from './common/input/Qinput'
export default function Playground() {
const [useCadFile, setUseCadFile] = useRecoilState(useCadFileState)
@ -35,6 +36,19 @@ export default function Playground() {
const [color, setColor] = useState('#ff0000')
const [textInput, setTextInput] = useState('')
const [radioInput, setRadioInput] = useState('')
const [checkboxInput, setCheckboxInput] = useState([])
useEffect(() => {
console.log('textInput:', textInput)
}, [textInput])
useEffect(() => {
console.log('radioInput:', radioInput)
}, [radioInput])
useEffect(() => {
console.log('checkboxInput:', checkboxInput)
}, [checkboxInput])
const handleUsers = async () => {
// const users = await get('/api/user/find-all')
const params = {
@ -115,6 +129,28 @@ export default function Playground() {
<>
<div className="container mx-auto p-4 m-4 border">
<div className={styles.test}>이 영역은 테스트입니다.</div>
<div>
<QInput type='text' value={textInput} onChange={setTextInput} />
<QInput type='text' value={textInput} onChange={setTextInput} readOnly={true} />
<QInput
type='radio'
value={radioInput}
onChange={setRadioInput}
options={[
{ id: 'r01', value: 'option1', name: 'Option 1' },
{ id: 'r02', value: 'option2', name: 'Option 2' },
]}
/>
<QInput
type='checkbox'
value={checkboxInput}
onChange={setCheckboxInput}
options={[
{ id: 'c01', value: 'checkbox1', name: 'Checkbox 1' },
{ id: 'c02', value: 'checkbox2', name: 'Checkbox 2' },
]}
/>
</div>
<div className="m-2">
<QSelect />
</div>

240
src/components/auth/NewLogin.jsx Normal file
View File

@ -0,0 +1,240 @@
'use client'
import { useState, useRef, useEffect } from 'react'
import Image from 'next/image'
import Link from 'next/link'
import { redirect } from 'next/navigation'
import { useRecoilState } from 'recoil'
import { useAxios } from '@/hooks/useAxios'
import { setSession } from '@/lib/authActions'
import { useMessage } from '@/hooks/useMessage'
import { globalLocaleStore } from '@/store/localeAtom'
import { sessionStore } from '@/store/commonAtom'
import { modalContent, modalState } from '@/store/modalAtom'
import '@/styles/style.scss'
import { useRouter } from 'next/navigation'
export default function NewLogin() {
const [passwordVisible, setPasswordVisible] = useState(false)
const passwordRef = useRef(null)
const router = useRouter()
useEffect(() => {
if (passwordVisible) {
passwordRef.current.type = 'text'
} else {
passwordRef.current.type = 'password'
}
}, [passwordVisible])
const { patch } = useAxios()
const { getMessage } = useMessage()
const [globalLocaleState, setGlbalLocaleState] = useRecoilState(globalLocaleStore)
const [sessionState, setSessionState] = useRecoilState(sessionStore)
const [isSelected, setIsSelected] = useState(globalLocaleState === 'ko' ? true : false)
const handleSelected = () => {
if (isSelected) {
setGlbalLocaleState('ja')
} else {
setGlbalLocaleState('ko')
}
setIsSelected(!isSelected)
}
// login process
const loginProcess = async (formData) => {
const param = {
// langCd: currentLocale
langCd: globalLocaleState,
lastEditUser: formData.get('id'),
loginId: formData.get('id'),
pwd: formData.get('password'),
}
// await post({ url: '/api/login/v1.0/login', data: param }).then((res) => {
// if (res) {
// if (res.result.resultCode == 'S') {
// // console.log('res.data', res.data)
// // 비밀번호 초기화가 필요한 경우
// // if (res.data.pwdInitYn != 'Y') {
// // alert('비밀번호 초기화가 필요한 경우')
// // } else {
// setSession(res.data)
// redirect('/')
// // }
// } else {
// alert(res.result.resultMsg)
// }
// }
// })
// 임시 로그인 처리
setSession({
userId: 'NEW016610',
saleStoreId: null,
name: null,
mail: null,
tel: null,
storeId: 'TEMP02',
userNm: 'ㅇㅇ6610',
userNmKana: '신규사용자 16610',
category: '인상6610',
telNo: '336610',
fax: null,
email: 't10t@naver.com',
pwdInitYn: 'N',
})
setSessionState({
userId: 'NEW016610',
saleStoreId: null,
name: null,
mail: null,
tel: null,
storeId: 'TEMP02',
userNm: 'ㅇㅇ6610',
userNmKana: '신규사용자 16610',
category: '인상6610',
telNo: '336610',
fax: null,
email: 't10t@naver.com',
pwdInitYn: 'N',
})
// redirect('/')
router.push('/')
// 임시 로그인 처리 끝
}
// 비밀번호 초기화 관련
const [open, setOpen] = useRecoilState(modalState)
const [contents, setContent] = useRecoilState(modalContent)
const initPasswordProcess = async (formData) => {
const param = {
langCd: currentLocale,
lastEditUser: formData.get('checkId'),
loginId: formData.get('checkId'),
email: formData.get('checkEmail'),
}
await patch({ url: '/api/login/v1.0/user/init-password', data: param }).then((res) => {
if (res) {
if (res.result.resultCode == 'S') {
alert(getMessage('login.init_password.complete_message'))
redirect('/login')
} else {
alert(res.result.resultMsg)
}
}
})
}
const initPasswordContent = (
<div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
<form action={initPasswordProcess} className="space-y-6">
<h2 className="text-center text-2xl font-bold leading-9 tracking-tight text-gray-900">{getMessage('login.init_password.title')}</h2>
<h2 className="text-center text-1xl font-bold leading-9 tracking-tight text-gray-900">{getMessage('login.init_password.sub_title')}</h2>
<div>
<label htmlFor="checkId" className="block text-sm font-medium leading-6 text-gray-900">
ID
</label>
<div className="mt-2">
<input
id="checkId"
name="checkId"
type="text"
required
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
</div>
</div>
<div>
<div className="flex items-center justify-between">
<label htmlFor="checkEmail" className="block text-sm font-medium leading-6 text-gray-900">
E-Mail
</label>
</div>
<div className="mt-2">
<input
id="checkEmail"
name="checkEmail"
type="email"
required
className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
/>
</div>
</div>
<p className="mt-5 text-center text-sm text-gray-500">
<button type="submit" className="font-semibold leading-6 text-indigo-600 hover:text-indigo-500">
{getMessage('login.init_password.btn')}
</button>
</p>
</form>
</div>
)
return (
<div className="login-wrap">
<div className="login-inner">
<Link href={'/login'} className="login-logo">
<Image src="/static/images/main/login-logo.svg" alt="react" width={236} height={43} styles={{ width: '236px', height: '43px' }} priority />
</Link>
<form action={loginProcess} className="space-y-6">
<div className="login-input-frame">
<div className="login-frame-tit">
<span>Q.CAST III</span>
太陽光発電システム図面管理サイト
</div>
<div className="login-input-wrap">
<div className="login-area id">
<input type="text" className="login-input" id="userId" name="id" required placeholder={'IDを入力してください'} />
<button className="id-delete" onClick={(e) => e.preventDefault()}></button>
</div>
<div className="login-area password">
<input
type="password"
className="login-input"
id="password"
name="password"
required
autoComplete="current-password"
ref={passwordRef}
/>
<button
className={`password-hidden ${passwordVisible ? 'visible' : ''}`}
onClick={(e) => {
e.preventDefault()
setPasswordVisible(!passwordVisible)
}}
></button>
</div>
<div className="d-check-box login">
<input type="checkbox" id="ch01" />
<label htmlFor="ch01">ID Save</label>
</div>
<div className="login-btn-box">
<button type="submit" className="login-btn">
Login
</button>
</div>
<div className="reset-password">
<Link href={'#'}>パスワードの初期化</Link>
</div>
</div>
</div>
</form>
<div className="login-guide-wrap">
<span>※</span>当サイトをご利用の際は、事前申請が必要です。
<br />
IDがない方は <Link href={'#'}>ID申請 クリックしてください。</Link>
</div>
</div>
<div className="login-copyright">COPYRIGHT©2024 Hanwha Japan All Rights Reserved.</div>
</div>
)
}

60
src/components/common/input/QInput.jsx Normal file
View File

@ -0,0 +1,60 @@
'use client'
export default function QInput({ type, readOnly = false, options, value, onChange }) {
// options = options || [
// {
// id: 'one',
// name: 'Option 1',
// value: '111',
// },
// {
// id: 'two',
// name: 'Option 2',
// value: '222',
// },
// {
// id: 'three',
// name: 'Option 3',
// value: '333',
// },
// ]
const handleChange = (e, optionValue) => {
if (type === 'radio') {
onChange(e.target.value)
} else {
const newValue = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue]
onChange(newValue)
}
}
return (
<div className="input-content light">
<div className="input-wrap">
<div className="form-input">
{type === 'text' ? (
<div className="mb5">
<input type={type} className="input-light" readOnly={readOnly} value={value} onChange={(e) => onChange(e.target.value)} />
</div>
) : type === 'radio' || type === 'checkbox' ? (
<div className="flx mb5">
{options?.map((option) => (
<div className={`d-${type}-radio light mr5`}>
<input
type={type}
name={type === 'radio' ? 'radioGroup' : 'checkboxGroup'}
value={option.value}
id={option.id}
checked={type === 'radio' ? value === option.value : value.includes(option.value)}
onChange={(e) => handleChange(e, option.value)}
/>
<label htmlFor={option.id}>{option.name}</label>
</div>
))}
</div>
) : null}
</div>
</div>
</div>
)
}

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

@ -12,7 +12,7 @@ import { sessionStore } from '@/store/commonAtom'
export default function CanvasLayout() {
const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
const [addCanvasPlans, setAddCanvasPlans] = useState([])
const [plans, setPlans] = useState([])
const [planNum, setPlanNum] = useState(0)
const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState)
@ -21,25 +21,54 @@ export default function CanvasLayout() {
const { getMessage } = useMessage()
const { swalFire } = useSwal()
const { getCanvasByObjectNo, delCanvasById } = usePlan()
const { getCanvasByObjectNo, delCanvasById, checkModifiedCanvasPlan, saveCanvas } = usePlan()
const handleCurrentPlan = (newCurrentId) => {
// console.log('currentPlan newCurrentId: ', newCurrentId)
if (!currentCanvasPlan?.id || currentCanvasPlan.id !== newCurrentId) {
setInitCanvasPlans((plans) =>
plans.map((plan) => {
return { ...plan, isCurrent: plan.id === newCurrentId }
}),
)
setAddCanvasPlans((plans) =>
plans.map((plan) => {
return { ...plan, isCurrent: plan.id === newCurrentId }
}),
)
if (currentCanvasPlan?.id && checkModifiedCanvasPlan()) {
swalFire({
html: getMessage('common.message.confirm.save') + `</br>${currentCanvasPlan.name}`,
type: 'confirm',
confirmFn: async () => {
saveCanvas(sessionState.userId)
/**
* TODO: 신규 canvas plan 저장 시 id, name 등 데이터 동기화 필요 (40~51Line)
*/
initCanvasPlans.map((initPlan) => {
if ('isNew' in initPlan) {
// console.log('================ isNew initPlan: ', initPlan)
setPlans((plans) =>
plans.map((plan) => {
initPlan.isNew === plan.id
? { ...plan, id: initPlan.id, name: initPlan.name, canvasStatus: initPlan.canvasStatus, isCurrent: plan.id === newCurrentId }
: { ...plan, isCurrent: plan.id === newCurrentId }
}),
)
}
})
},
denyFn: () => {
setPlans((plans) =>
plans.map((plan) => {
return { ...plan, isCurrent: plan.id === newCurrentId }
}),
)
},
})
} else {
setPlans((plans) =>
plans.map((plan) => {
return { ...plan, isCurrent: plan.id === newCurrentId }
}),
)
}
}
}
useEffect(() => {
setCurrentCanvasPlan([...initCanvasPlans, ...addCanvasPlans].find((plan) => plan.isCurrent) || null)
}, [initCanvasPlans, addCanvasPlans])
setCurrentCanvasPlan(plans.find((plan) => plan.isCurrent) || null)
}, [plans])
const handleDeletePlan = (e, id) => {
e.stopPropagation() // 이벤트 버블링 방지
@ -48,20 +77,21 @@ export default function CanvasLayout() {
delCanvasById(id)
.then((res) => {
swalFire({ text: getMessage('common.message.delete') })
console.log('[DELETE] canvas-statuses res :::::::: %o', res)
// 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)
// console.error('[DELETE] canvas-statuses res error :::::::: %o', error)
})
} else {
setAddCanvasPlans(addCanvasPlans.filter((plan) => plan.id !== id))
setPlans(plans.filter((plan) => plan.id !== id))
swalFire({ text: getMessage('common.message.delete') })
}
// 삭제 후 last 데이터에 포커싱
const lastPlan = [...initCanvasPlans, ...addCanvasPlans].filter((plan) => plan.id !== id).at(-1)
const lastPlan = plans.filter((plan) => plan.id !== id).at(-1)
if (!lastPlan) {
setPlanNum(0)
setCurrentCanvasPlan(null)
@ -71,7 +101,7 @@ export default function CanvasLayout() {
}
const addNewPlan = () => {
setAddCanvasPlans([...addCanvasPlans, { id: planNum, name: `Plan ${planNum + 1}`, objectNo: `${objectNo}` }])
setPlans([...plans, { id: planNum, name: `Plan ${planNum + 1}`, objectNo: `${objectNo}` }])
handleCurrentPlan(planNum)
setPlanNum(planNum + 1)
}
@ -81,6 +111,7 @@ export default function CanvasLayout() {
console.log('canvas 목록 ', res)
if (res.length > 0) {
setInitCanvasPlans(res)
setPlans(res)
handleCurrentPlan(res.at(-1).id) // last 데이터에 포커싱
setPlanNum(res.length)
} else {
@ -93,7 +124,7 @@ export default function CanvasLayout() {
<div className="canvas-layout">
<div className="canvas-page-list">
<div className="canvas-plane-wrap">
{[...initCanvasPlans, ...addCanvasPlans].map((plan) => (
{plans.map((plan) => (
<button key={plan.id} className={`canvas-page-box ${plan.isCurrent === true ? 'on' : ''}`} onClick={() => handleCurrentPlan(plan.id)}>
<span>{plan.name}</span>
<i
@ -115,7 +146,7 @@ export default function CanvasLayout() {
<span></span>
</button>
</div>
<CanvasFrame plan={[...initCanvasPlans, ...addCanvasPlans].find((plan) => plan.isCurrent === true)} />
<CanvasFrame plan={plans.find((plan) => plan.isCurrent === true)} />
</div>
)
}

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

@ -41,6 +41,8 @@ export default function CanvasMenu(props) {
setShowRoofShapeSettingModal,
setShowRoofShapePassivitySettingModal,
setShowAuxiliaryModal,
setShowEavesGableEditModal,
setShowWallLineOffsetSettingModal,
} = props
const [menuNumber, setMenuNumber] = useState(null)
@ -88,8 +90,10 @@ export default function CanvasMenu(props) {
setShowRoofShapeSettingModal,
setShowRoofShapePassivitySettingModal,
setShowAuxiliaryModal,
setShowEavesGableEditModal,
setShowSlopeSettingModal,
setShowPlaceShapeDrawingModal,
setShowWallLineOffsetSettingModal,
type,
}
@ -116,6 +120,7 @@ export default function CanvasMenu(props) {
const onClickPlacementInitialMenu = () => {
setShowOutlineModal(false)
setShowCanvasSettingModal(false)
setShowEavesGableEditModal(false)
setShowPlaceShapeModal(true)
}

9
src/components/floor-plan/FloorPlan.jsx
View File

@ -19,6 +19,8 @@ import PlacementShapeDrawing from '@/components/floor-plan/modal/placementShape/
import Slope from '@/components/floor-plan/modal/Slope'
import AuxiliaryDrawing from '@/components/floor-plan/modal/auxiliary/AuxiliaryDrawing'
import EavesGableEdit from '@/components/floor-plan/modal/eavesGable/EavesGableEdit'
import WallLineOffsetSetting from '@/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting'
export default function FloorPlan() {
const [showCanvasSettingModal, setShowCanvasSettingModal] = useState(false)
@ -30,6 +32,8 @@ export default function FloorPlan() {
const [showAuxiliaryModal, setShowAuxiliaryModal] = useState(false)
const [showSlopeSettingModal, setShowSlopeSettingModal] = useState(false)
const [showPlaceShapeDrawingModal, setShowPlaceShapeDrawingModal] = useState(false)
const [showEavesGableEditModal, setShowEavesGableEditModal] = useState(false)
const [showWallLineOffsetSettingModal, setShowWallLineOffsetSettingModal] = useState(false)
const globalLocaleState = useRecoilValue(globalLocaleStore)
const { get } = useAxios(globalLocaleState)
@ -62,6 +66,8 @@ export default function FloorPlan() {
setShowRoofShapeSettingModal,
setShowRoofShapePassivitySettingModal,
setShowAuxiliaryModal,
setShowEavesGableEditModal,
setShowWallLineOffsetSettingModal,
}
useEffect(() => {
@ -125,6 +131,9 @@ export default function FloorPlan() {
{showAuxiliaryModal && <AuxiliaryDrawing setShowAuxiliaryModal={setShowAuxiliaryModal} />}
{showSlopeSettingModal && <Slope setShowSlopeSettingModal={setShowSlopeSettingModal} />}
{showPlaceShapeDrawingModal && <PlacementShapeDrawing setShowPlaceShapeDrawingModal={setShowPlaceShapeDrawingModal} />}
{showEavesGableEditModal && <EavesGableEdit setShowEavesGableEditModal={setShowEavesGableEditModal} />}
{/*<Movement />*/}
{showWallLineOffsetSettingModal && <WallLineOffsetSetting setShowWallLineOffsetSettingModal={setShowWallLineOffsetSettingModal} />}
</div>
</div>
</>

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

@ -14,8 +14,10 @@ export default function MenuDepth01(props) {
setShowRoofShapeSettingModal,
setShowRoofShapePassivitySettingModal,
setShowAuxiliaryModal,
setShowEavesGableEditModal,
setShowSlopeSettingModal,
setShowPlaceShapeDrawingModal,
setShowWallLineOffsetSettingModal,
} = props
const { getMessage } = useMessage()
const [activeMenu, setActiveMenu] = useState()
@ -31,6 +33,8 @@ export default function MenuDepth01(props) {
setShowRoofShapeSettingModal(id === 1)
setShowRoofShapePassivitySettingModal(id === 2)
setShowAuxiliaryModal(id === 3)
setShowEavesGableEditModal(id === 4)
setShowWallLineOffsetSettingModal(id === 6)
setShowPlaceShapeDrawingModal(false)
}

46
src/components/floor-plan/modal/eavesGable/EavesGableEdit.jsx Normal file
View File

@ -0,0 +1,46 @@
import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/withDraggable'
import { useState } from 'react'
import Eaves from '@/components/floor-plan/modal/eavesGable/type/Eaves'
import Gable from '@/components/floor-plan/modal/eavesGable/type/Gable'
import WallMerge from '@/components/floor-plan/modal/eavesGable/type/WallMerge'
import Shed from '@/components/floor-plan/modal/eavesGable/type/Shed'
export default function EavesGableEdit({ setShowEavesGableEditModal }) {
const { getMessage } = useMessage()
const [buttonAct, setButtonAct] = useState(1)
const buttonMenu = [
{ id: 1, name: getMessage('eaves') },
{ id: 2, name: getMessage('gable') },
{ id: 3, name: getMessage('wall.merge') },
{ id: 4, name: getMessage('shed') },
]
return (
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.eaves.gable.edit')}</h1>
<button className="modal-close" onClick={() => setShowEavesGableEditModal(false)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="modal-btn-wrap">
{buttonMenu.map((item) => (
<button key={item.id} className={`btn-frame modal ${buttonAct === item.id ? 'act' : ''}`} onClick={() => setButtonAct(item.id)}>
{item.name}
</button>
))}
</div>
<div className="properties-setting-wrap outer">
<div className="setting-tit">{getMessage('setting')}</div>
{buttonAct === 1 && <Eaves />}
{buttonAct === 2 && <Gable />}
{buttonAct === 3 && <WallMerge />}
{buttonAct === 4 && <Shed />}
</div>
</div>
</div>
</WithDraggable>
)
}

81
src/components/floor-plan/modal/eavesGable/type/Eaves.jsx Normal file
View File

@ -0,0 +1,81 @@
import { useMessage } from '@/hooks/useMessage'
import Image from 'next/image'
import { useState } from 'react'
export default function Eaves() {
const { getMessage } = useMessage()
const [type, setType] = useState()
const onChange = (e) => {
console.log(e)
setType(e.target.value)
}
return (
<>
<div className="outline-wrap">
<div className="outline-form mb15">
<span className="mr10" style={{ width: '24px' }}>
{getMessage('slope')}
</span>
<div className="input-grid mr5" style={{ width: '100px' }}>
<input type="text" className="input-origin block" defaultValue={100} />
</div>
<span className="thin">寸</span>
</div>
<div className="outline-form">
<span className="mr10" style={{ width: '24px' }}>
{getMessage('offset')}
</span>
<div className="input-grid mr5" style={{ width: '100px' }}>
<input type="text" className="input-origin block" defaultValue={100} />
</div>
<span className="thin">mm</span>
</div>
</div>
<div className="outline-wrap">
<div className="eaves-keraba-table">
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra01" value="1" checked={type === '1'} onChange={(e) => onChange(e)} />
<label htmlFor="ra01">{getMessage('modal.eaves.gable.edit.basic')}</label>
</div>
</div>
<div className="eaves-keraba-td">
<div className={`eaves-keraba-ico ${type === '1' ? 'act' : ''}`}>
<Image src="/static/images/canvas/eaves_icon01.svg" alt="react" width={30} height={30} />
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra02" value="2" checked={type === '2'} onChange={(e) => onChange(e)} />
<label htmlFor="ra02">{getMessage('hipandgable')}</label>
</div>
</div>
<div className="eaves-keraba-td">
<div className={`eaves-keraba-ico ${type === '2' ? 'act' : ''}`}>
<Image src="/static/images/canvas/eaves_icon02.svg" alt="react" width={30} height={30} />
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '100px' }}>
<input type="text" className="input-origin block" defaultValue={100} readOnly={type === '1'} />
</div>
<span className="thin">mm</span>
</div>
</div>
<div className="eaves-keraba-td">
<div className="eaves-keraba-ico ">
<Image src="/static/images/canvas/eaves_icon03.svg" alt="react" width={30} height={30} />
</div>
</div>
</div>
</div>
</div>
</>
)
}

87
src/components/floor-plan/modal/eavesGable/type/Gable.jsx Normal file
View File

@ -0,0 +1,87 @@
import { useMessage } from '@/hooks/useMessage'
import Image from 'next/image'
export default function Gable() {
const { getMessage } = useMessage()
return (
<>
<div className="outline-wrap">
<div className="outline-form ">
<span className="mr10" style={{ width: '24px' }}>
{getMessage('offset')}
</span>
<div className="input-grid mr5" style={{ width: '100px' }}>
<input type="text" className="input-origin block" defaultValue={100} />
</div>
<span className="thin">mm</span>
</div>
</div>
<div className="outline-wrap">
<div className="eaves-keraba-table">
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra01" />
<label htmlFor="ra01">{getMessage('modal.eaves.gable.edit.basic')}</label>
</div>
</div>
<div className="eaves-keraba-td">
<div className="eaves-keraba-ico act">
<Image src="/static/images/canvas/eaves_icon04.svg" alt="react" width={30} height={30} />
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra02" />
<label htmlFor="ra02">{getMessage('jerkinhead')}</label>
</div>
</div>
<div className="eaves-keraba-td">
<div className="eaves-keraba-ico">
<Image src="/static/images/canvas/eaves_icon09.svg" alt="react" width={30} height={30} />
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
<div className="outline-form">
<span className="mr10" style={{ width: '24px' }}>
{getMessage('slope')}
</span>
<div className="input-grid mr5" style={{ width: '100px' }}>
<input type="text" className="input-origin block" defaultValue={100} />
</div>
<span className="thin">寸</span>
</div>
</div>
<div className="eaves-keraba-td">
<div className="eaves-keraba-ico ">
<Image src="/static/images/canvas/eaves_icon05.svg" alt="react" width={30} height={30} />
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
<div className="outline-form">
<span className="mr10" style={{ width: '24px' }}>
{getMessage('offset')}
</span>
<div className="input-grid mr5" style={{ width: '100px' }}>
<input type="text" className="input-origin block" defaultValue={100} />
</div>
<span className="thin">mm</span>
</div>
</div>
<div className="eaves-keraba-td">
<div className="eaves-keraba-ico ">
<Image src="/static/images/canvas/eaves_icon10.svg" alt="react" width={30} height={30} />
</div>
</div>
</div>
</div>
</div>
</>
)
}

20
src/components/floor-plan/modal/eavesGable/type/Shed.jsx Normal file
View File

@ -0,0 +1,20 @@
import { useMessage } from '@/hooks/useMessage'
export default function Shed() {
const { getMessage } = useMessage()
return (
<>
<div className="outline-wrap">
<div className="outline-form">
<span className="mr10" style={{ width: '24px' }}>
{getMessage('offset')}
</span>
<div className="input-grid mr5" style={{ width: '100px' }}>
<input type="text" className="input-origin block" defaultValue={100} />
</div>
<span className="thin">mm</span>
</div>
</div>
</>
)
}

59
src/components/floor-plan/modal/eavesGable/type/WallMerge.jsx Normal file
View File

@ -0,0 +1,59 @@
import { useMessage } from '@/hooks/useMessage'
import Image from 'next/image'
export default function WallMerge() {
const { getMessage } = useMessage()
return (
<>
<div className="outline-wrap">
<div className="guide">{getMessage('modal.eaves.gable.edit.wall.merge.info')}</div>
<div className="eaves-keraba-table">
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra01" />
<label htmlFor="ra01">{getMessage('has.sleeve')}</label>
</div>
</div>
<div className="eaves-keraba-td">
<div className="eaves-keraba-ico act">
<Image src="/static/images/canvas/eaves_icon06.svg" alt="react" width={30} height={30} />
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
<div className="d-check-radio pop">
<input type="radio" name="radio01" id="ra02" />
<label htmlFor="ra02">{getMessage('has.not.sleeve')}</label>
</div>
</div>
<div className="eaves-keraba-td">
<div className="eaves-keraba-ico">
<Image src="/static/images/canvas/eaves_icon07.svg" alt="react" width={30} height={30} />
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">
<div className="outline-form">
<span className="mr10" style={{ width: '24px' }}>
{getMessage('offset')}
</span>
<div className="input-grid mr5" style={{ width: '100px' }}>
<input type="text" className="input-origin block" defaultValue={100} />
</div>
<span className="thin">mm</span>
</div>
</div>
<div className="eaves-keraba-td">
<div className="eaves-keraba-ico ">
<Image src="/static/images/canvas/eaves_icon08.svg" alt="react" width={30} height={30} />
</div>
</div>
</div>
</div>
</div>
</>
)
}

40
src/components/floor-plan/modal/movement/Movement.jsx Normal file
View File

@ -0,0 +1,40 @@
import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useState } from 'react'
export default function Movement({}) {
const { getMessage } = useMessage()
const [buttonAct, setButtonAct] = useState(1)
const buttonMenu = [
{ id: 1, name: '銅線の移動軒' },
{ id: 2, name: '型上げ・降り' },
]
return (
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">軒・ケラバ変更</h1>
<button className="modal-close">닫기</button>
</div>
<div className="modal-body">
<div className="modal-btn-wrap">
{buttonMenu.map((item) => (
<button key={item.id} className={`btn-frame modal ${buttonAct === item.id ? 'act' : ''}`} onClick={() => setButtonAct(item.id)}>
{item.name}
</button>
))}
</div>
<div className="properties-setting-wrap outer">
<div className="setting-tit">設定</div>
{/*{buttonAct === 1 && <MovingTab01 />}*/}
{/*{buttonAct === 2 && <MovingTab02 />}*/}
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">保存</button>
</div>
</div>
</div>
</WithDraggable>
)
}

52
src/components/floor-plan/modal/roofShape/RoofShapePassivitySetting.jsx Normal file
View File

@ -0,0 +1,52 @@
import { useState } from 'react'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import Eaves from '@/components/floor-plan/modal/roofShape/passivity/Eaves'
import Gable from '@/components/floor-plan/modal/roofShape/passivity/Gable'
import Shed from '@/components/floor-plan/modal/roofShape/passivity/Shed'
import { useMessage } from '@/hooks/useMessage'
export default function RoofShapePassivitySetting({ setShowRoofShapePassivitySettingModal }) {
const { getMessage } = useMessage()
const [buttonAct, setButtonAct] = useState(1)
const buttons = [
{ id: 1, name: getMessage('eaves') },
{ id: 2, name: getMessage('gable') },
{ id: 3, name: getMessage('windage') },
]
return (
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
<div className={`modal-pop-wrap xxm`}>
<div className="modal-head">
<h1 className="title">{getMessage('plan.menu.roof.cover.roof.shape.passivity.setting')}</h1>
<button className="modal-close" onClick={() => setShowRoofShapePassivitySettingModal(false)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="modal-btn-wrap">
{buttons.map((button) => (
<button className={`btn-frame modal ${buttonAct === button.id ? 'act' : ''}`} onClick={() => setButtonAct(button.id)}>
{button.name}
</button>
))}
</div>
<div className="modal-bottom-border-bx">
<div className="setting-tit">{getMessage('setting')}</div>
<div className="discrimination-box">
{buttonAct === 1 && <Eaves />}
{buttonAct === 2 && <Gable />}
{buttonAct === 3 && <Shed />}
</div>
<div className="grid-btn-wrap">
<button className="btn-frame sub-tab mr5">{getMessage('common.setting.rollback')}</button>
<button className="btn-frame sub-tab act">{getMessage('apply')}</button>
</div>
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">{getMessage('common.setting.finish')}</button>
</div>
</div>
</div>
</WithDraggable>
)
}

45
src/components/floor-plan/modal/roofShape/passivity/Eaves.jsx Normal file
View File

@ -0,0 +1,45 @@
import { useMessage } from '@/hooks/useMessage'
export default function Eaves() {
const { getMessage } = useMessage()
return (
<>
<div className="outline-form mb10">
<span className="mr10" style={{ width: '63px' }}>
{getMessage('slope')}
</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={100} />
</div>
<span className="thin">寸</span>
</div>
<div className="outline-form mb10">
<span className="mr10" style={{ width: '63px' }}>
{getMessage('eaves.offset')}
</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={100} />
</div>
<span className="thin">mm</span>
</div>
<div className="outline-form mb10">
<span className="mr10" style={{ width: '63px' }}>
{getMessage('gable.offset')}
</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={100} />
</div>
<span className="thin">mm</span>
</div>
<div className="outline-form mb10">
<span className="mr10" style={{ width: '63px' }}>
{getMessage('shed.width')}
</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={100} />
</div>
<span className="thin">mm</span>
</div>
</>
)
}

27
src/components/floor-plan/modal/roofShape/passivity/Gable.jsx Normal file
View File

@ -0,0 +1,27 @@
import { useMessage } from '@/hooks/useMessage'
export default function Gable() {
const { getMessage } = useMessage()
return (
<>
<div className="outline-form mb10">
<span className="mr10" style={{ width: '63px' }}>
{getMessage('slope')}
</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={100} />
</div>
<span className="thin">寸</span>
</div>
<div className="outline-form mb10">
<span className="mr10" style={{ width: '63px' }}>
{getMessage('gable.offset')}
</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={100} />
</div>
<span className="thin">mm</span>
</div>
</>
)
}

18
src/components/floor-plan/modal/roofShape/passivity/Shed.js Normal file
View File

@ -0,0 +1,18 @@
import { useMessage } from '@/hooks/useMessage'
export default function Shed() {
const { getMessage } = useMessage()
return (
<>
<div className="outline-form mb10">
<span className="mr10" style={{ width: '63px' }}>
{getMessage('shed.width')}
</span>
<div className="input-grid mr5">
<input type="text" className="input-origin block" defaultValue={100} />
</div>
<span className="thin">mm</span>
</div>
</>
)
}

43
src/components/floor-plan/modal/wallLineOffset/WallLineOffsetSetting.jsx Normal file
View File

@ -0,0 +1,43 @@
import { useMessage } from '@/hooks/useMessage'
import WithDraggable from '@/components/common/draggable/WithDraggable'
import { useState } from 'react'
import WallLine from '@/components/floor-plan/modal/wallLineOffset/type/WallLine'
import Offset from '@/components/floor-plan/modal/wallLineOffset/type/Offset'
export default function WallLineOffsetSetting({ setShowWallLineOffsetSettingModal }) {
const { getMessage } = useMessage()
const [buttonAct, setButtonAct] = useState(1)
const buttonMenu = [
{ id: 1, name: getMessage('modal.wallline.offset.setting.wallline.edit') },
{ id: 2, name: getMessage('modal.wallline.offset.setting.offset') },
]
return (
<WithDraggable isShow={true} pos={{ x: 50, y: -950 }}>
<div className={`modal-pop-wrap r`}>
<div className="modal-head">
<h1 className="title">{getMessage('modal.wallline.offset.setting')}</h1>
<button className="modal-close" onClick={() => setShowWallLineOffsetSettingModal(false)}>
닫기
</button>
</div>
<div className="modal-body">
<div className="modal-btn-wrap">
{buttonMenu.map((item) => (
<button key={item.id} className={`btn-frame modal ${buttonAct === item.id ? 'act' : ''}`} onClick={() => setButtonAct(item.id)}>
{item.name}
</button>
))}
</div>
<div className="properties-setting-wrap outer">
<div className="setting-tit">{getMessage('setting')}</div>
{buttonAct === 1 && <WallLine />}
{buttonAct === 2 && <Offset />}
</div>
<div className="grid-btn-wrap">
<button className="btn-frame modal act">{getMessage('modal.common.save')}</button>
</div>
</div>
</div>
</WithDraggable>
)
}

42
src/components/floor-plan/modal/wallLineOffset/type/Offset.jsx Normal file
View File

@ -0,0 +1,42 @@
import { useMessage } from '@/hooks/useMessage'
export default function Offset({ setShowSlopeSettingModal }) {
const { getMessage } = useMessage()
return (
<>
<div className="outline-wrap">
<div className="guide sm">{getMessage('modal.wallline.offset.setting.offset.info')}</div>
<div className="discrimination-box mb10">
<div className="padding-form">
<div className="eaves-keraba-table">
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">{getMessage('length')}</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '100px' }}>
<input type="text" className="input-origin block" defaultValue={100} />
</div>
<span className="thin">mm</span>
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">{getMessage('modal.cover.outline.arrow')}</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
)
}

83
src/components/floor-plan/modal/wallLineOffset/type/WallLine.jsx Normal file
View File

@ -0,0 +1,83 @@
import { useMessage } from '@/hooks/useMessage'
import { useState } from 'react'
export default function WallLine({ setShowSlopeSettingModal }) {
const { getMessage } = useMessage()
const [position1, setPosition1] = useState()
const [position2, setPosition2] = useState()
return (
<>
<div className="outline-wrap">
<div className="guide sm">{getMessage('modal.wallline.offset.setting.wallline.edit.info')}</div>
<div className="discrimination-box mb10">
<div className="d-check-radio pop mb10">
<input type="radio" name="radio01" id="ra01" />
<label htmlFor="ra01">1{getMessage('modal.wallline.offset.setting.wallline.edit.position')}</label>
</div>
<div className="padding-form">
<div className="eaves-keraba-table">
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">{getMessage('length')}</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '100px' }}>
<input type="text" className="input-origin block" defaultValue={100} />
</div>
<span className="thin">mm</span>
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">{getMessage('modal.cover.outline.arrow')}</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="discrimination-box">
<div className="d-check-radio pop mb10">
<input type="radio" name="radio01" id="ra02" />
<label htmlFor="ra02">2{getMessage('modal.wallline.offset.setting.wallline.edit.position')}</label>
</div>
<div className="padding-form">
<div className="eaves-keraba-table">
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">{getMessage('length')}</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="input-grid mr5" style={{ width: '100px' }}>
<input type="text" className="input-origin block" defaultValue={100} />
</div>
<span className="thin">mm</span>
</div>
</div>
</div>
<div className="eaves-keraba-item">
<div className="eaves-keraba-th">{getMessage('modal.cover.outline.arrow')}</div>
<div className="eaves-keraba-td">
<div className="outline-form">
<div className="grid-direction">
<button className="direction up"></button>
<button className="direction down act"></button>
<button className="direction left"></button>
<button className="direction right"></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
)
}

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

@ -10,14 +10,16 @@ import { useRecoilValue, useRecoilState } from 'recoil'
import { stuffSearchState } from '@/store/stuffAtom'
import { queryStringFormatter, isEmptyArray } from '@/util/common-utils'
import dayjs from 'dayjs'
import isLeapYear from 'dayjs/plugin/isLeapYear' // 윤년 판단 플러그인
dayjs.extend(isLeapYear)
import { isObjectNotEmpty } from '@/util/common-utils'
import { convertNumberToPriceDecimal } from '@/util/common-utils'
import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
import KO from '@/locales/ko.json'
import JA from '@/locales/ja.json'
import '@/styles/grid.scss'
import { sessionStore } from '@/store/commonAtom'
export default function Stuff() {
const sessionState = useRecoilValue(sessionStore)
const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
const stuffSearchParams = useRecoilValue(stuffSearchState)
const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)
@ -50,7 +52,6 @@ export default function Stuff() {
//물건번호 복사버튼 옆에 영역
const onDoubleClick = (e) => {
let objectNo = e.target.innerText
console.log(objectNo)
if (objectNo.substring(0, 1) === 'R') {
console.log('진짜')
router.push(`${pathname}/detail?objectNo=${objectNo.toString()}`)
@ -75,7 +76,6 @@ export default function Stuff() {
headerCheckboxSelectionCurrentPageOnly: true, //페이징시 현재 페이지만 체크되도록
checkboxSelection: true,
showDisabledCheckboxes: true,
// headerClass: 'centered', //_test.scss에 추가 테스트
// .centered {
// .ag-header-cell-label {
// justify-content: center !important;
@ -241,64 +241,68 @@ export default function Stuff() {
// 진입시 그리드 데이터 조회
useEffect(() => {
if (stuffSearchParams?.code === 'S') {
const params = {
schObjectNo: '',
schSaleStoreId: '',
schAddress: '',
schObjectName: '',
schSaleStoreName: '',
schSpecDateYn: '',
schReceiveUser: '',
schDispCompanyName: '',
schDateType: 'U',
schFromDt: dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'),
schToDt: dayjs(new Date()).format('YYYY-MM-DD'),
startRow: (curPage - 1) * defaultSize + 1,
endRow: curPage * defaultSize,
schSelSaleStoreId: '',
schSortType: 'R',
if (isObjectNotEmpty(sessionState)) {
if (stuffSearchParams?.code === 'S') {
const params = {
schObjectNo: '',
schAddress: '',
schObjectName: '',
schSaleStoreName: '',
schReceiveUser: '',
schDispCompanyName: '',
schDateType: 'U',
schFromDt: dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'),
schToDt: dayjs(new Date()).format('YYYY-MM-DD'),
startRow: (curPage - 1) * defaultSize + 1,
endRow: curPage * defaultSize,
schSelSaleStoreId: '',
schSortType: 'R',
}
async function fetchData() {
//api에 넘길값 startRow, endRow
// let startRow
// let endRow
// startRow = (curPage - 1) * size + 1
// endRow = curPage * size
// console.log('startrow::', startRow)
// console.log('endRow::', endRow)
// let curPage
// let totalpage
// let totalCount
// let size
// let pageCount
// console.log('화면진입 세션정보::::::::::', sessionState)
// const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(params)}`
// const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(params)}`
const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(params)}`
await get({
url: apiUrl,
}).then((res) => {
if (!isEmptyArray(res)) {
setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
setGridCount(res[0].totCnt)
}
})
}
fetchData()
}
async function fetchData() {
// console.log('화면진입:::::::::::::', params)
//api에 넘길값 startRow, endRow
// let startRow
// let endRow
// startRow = (curPage - 1) * size + 1
// endRow = curPage * size
// console.log('startrow::', startRow)
// console.log('endRow::', endRow)
// let curPage
// let totalpage
// let totalCount
// let size
// let pageCount
// const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(params)}`
const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(params)}`
await get({
url: apiUrl,
}).then((res) => {
if (!isEmptyArray(res)) {
setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
setGridCount(res[0].totCnt)
}
})
}
fetchData()
}
}, [])
}, [sessionState])
useEffect(() => {
if (stuffSearchParams?.code === 'E') {
stuffSearchParams.startRow = (curPage - 1) * defaultSize + 1
stuffSearchParams.endRow = curPage * defaultSize
stuffSearchParams.schSortType = defaultSortType
// console.log('조회누름::::::::', stuffSearchParams)
async function fetchData() {
// console.log('조회누름 세션정보:::::::::::::', sessionState)
// const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(stuffSearchParams)}`
const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(stuffSearchParams)}`
// const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(stuffSearchParams)}`
const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
await get({ url: apiUrl }).then((res) => {
// console.log('검색조건 변경 조회 API결과:::::::', res)
if (!isEmptyArray(res)) {
@ -326,10 +330,11 @@ export default function Stuff() {
startRow: startRow,
endRow: curPage * e.target.value,
})
console.log('페이지 갯수 변경 때 셋팅된 검색조건:::', stuffSearchParams)
//조회API호출
// console.log('페이지 갯수 변경 때 셋팅된 검색조건:::', stuffSearchParams)
// console.log('페이지 갯수 변경 때 sessionState:::', sessionState)
// const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(stuffSearchParams)}`
const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(stuffSearchParams)}`
// const apiUrl = `/api/object/list?saleStoreId=X167&${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 })
@ -351,8 +356,10 @@ export default function Stuff() {
code: 'S',
schSortType: e.target.value,
})
// console.log('정렬 변경시 세션정보::::::::::::', sessionState)
// const apiUrl = `/api/object/list?saleStoreId=201TES01&${queryStringFormatter(stuffSearchParams)}`
const apiUrl = `/api/object/list?saleStoreId=X167&${queryStringFormatter(stuffSearchParams)}`
// const apiUrl = `/api/object/list?saleStoreId=X167&${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 })

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

@ -3,7 +3,7 @@
import React, { useState, useEffect } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'
import { Button } from '@nextui-org/react'
// import Select from 'react-dropdown-select'
import Select from 'react-dropdown-select'
import Link from 'next/link'
import { useAxios } from '@/hooks/useAxios'
import { globalLocaleStore } from '@/store/localeAtom'
@ -34,14 +34,15 @@ export default function StuffDetail() {
prefId: '', //도도부현
prefName: '',
address: '', //주소
powerSimArea: '', //발전량시뮬레이션지역
areaId: '', //발전량시뮬레이션지역id
// areaName: '', //발전량시뮬레이션지역명
windSpeed: '', //기준풍속
snowCover: '', //수직적설량
coldAreaChk: false, //한랭지대책시행
verticalSnowCover: '', //수직적설량NEW
coldRegionFlg: false, //한랭지대책시행(true : 1 / false : 0)
surfaceType: 'III・IV', //면조도구분(III・IV / Ⅱ)
saltAreaChk: false, //염해지역용아이템사용
saltAreaFlg: false, //염해지역용아이템사용 (true : 1 / false : 0)
installHeight: '', //설치높이
powerConTerms: '0', //계약조건(잉여 / 전량)
conType: '0', //계약조건(잉여 / 전량)
remarks: '', //메모
tempFlag: 'T', //임시저장(1) 저장(0)
}
@ -56,8 +57,9 @@ export default function StuffDetail() {
const [saleStoreList, setSaleStoreList] = useState([]) // 판매점 리스트
const [otherSaleStoreList, setOtherSaleStoreList] = useState([])
const [powerSimAreaList, setPowerSimAreaList] = useState([]) //발전시뮬레이션 리스트
const [areaIdList, setAreaIdList] = useState([]) //발전시뮬레이션 리스트
const [windSpeedList, setWindSpeedList] = useState([]) //기준풍속 리스트
const [isFormValid, setIsFormValid] = useState(false) //임시저장, 진짜저장 버튼 컨트롤
const [buttonValid, setButtonValid] = useState(false) //주소검색 활성화 컨트롤
const objectNo = searchParams.get('objectNo') //url에서 물건번호 꺼내서 바로 set
@ -83,7 +85,7 @@ export default function StuffDetail() {
// 도도부현API
get({ url: '/api/object/prefecture/list' }).then((res) => {
if (!isEmptyArray(res)) {
console.log('도도부현API 결과:::', res)
// console.log('도도부현API 결과:::', res)
setPrefCodeList(res)
}
})
@ -176,14 +178,14 @@ export default function StuffDetail() {
// zipNo: '', //우편번호
// prefId: '', //도도부현
// address: '', //주소
// powerSimArea: '', //발전량시뮬레이션지역
// areaId: '', //발전량시뮬레이션지역new
// windSpeed: '', //기준풍속
// snowCover: '', //수직적설량
// coldAreaChk: false, //한랭지대책시행
// verticalSnowCover: '', //수직적설량
// coldRegionFlg: false, //한랭지대책시행
// surfaceType: 'Ⅲ・Ⅳ', //면조도구분(Ⅲ・Ⅳ / Ⅱ)
// saltAreaChk: false, //염해지역용아이템사용
// saltAreaFlg: false, //염해지역용아이템사용
// installHeight: '', //설치높이
// powerConTerms: '0', //계약조건(잉여 / 전량)
// conType : '0' //계약조건(잉여 / 전량)
// remarks: '', //메모
// tempFlag: 'T', //임시저장(1) 저장(0)
const _dispCompanyName = watch('dispCompanyName')
@ -193,9 +195,9 @@ export default function StuffDetail() {
const _otherSaleStoreId = watch('otherSaleStoreId')
const _prefId = watch('prefId')
const _address = watch('address')
const _powerSimArea = watch('powerSimArea')
const _areaId = watch('areaId') //new
const _windSpeed = watch('windSpeed')
const _snowCover = watch('snowCover')
const _verticalSnowCover = watch('verticalSnowCover')
const _installHeight = watch('installHeight')
useEffect(() => {
@ -233,16 +235,16 @@ export default function StuffDetail() {
errors.address = true
}
if (!_powerSimArea) {
errors.powerSimArea = true
if (!_areaId) {
errors.areaId = true
}
if (!_windSpeed) {
errors.windSpeed = true
}
if (!_snowCover) {
errors.snowCover = true
if (!_verticalSnowCover) {
errors.verticalSnowCover = true
}
if (!_installHeight) {
@ -263,9 +265,9 @@ export default function StuffDetail() {
_zipNo,
_prefId,
_address,
_powerSimArea,
_areaId,
_windSpeed,
_snowCover,
_verticalSnowCover,
_installHeight,
])
@ -274,9 +276,11 @@ export default function StuffDetail() {
const params = {
zipcode: _zipNo,
}
get({ url: `https://zipcloud.ibsnet.co.jp/api/search?${queryStringFormatter(params)}` }).then((res) => {
//7830060
//9302226
//0790177 3개짜리
if (res.status === 200) {
if (res.results != null) {
console.log('주소검색::', res.results)
@ -293,8 +297,11 @@ export default function StuffDetail() {
form.setValue('address', '')
form.setValue('zipNo', '')
setPrefValue('')
setPowerSimAreaList([])
form.setValue('powerSimArea', '')
setAreaIdList([])
form.setValue('areaId', '')
// form.setValue('areaName', '')
setWindSpeedList([])
form.setValue('windSpeed', '')
}
} else {
alert(res.message)
@ -304,18 +311,39 @@ export default function StuffDetail() {
useEffect(() => {
if (prefValue !== '') {
// console.log('우편번호 검색해서 도도부현골랐을때::::', prefValue)
// 발전량시뮬레이션 지역 목록
// /api/object/prefecture/도도부현코드/list
get({ url: `/api/object/prefecture/${prefValue}/list` }).then((res) => {
if (!isEmptyArray(res)) {
console.log('발전량 시뮬레이션::::::::', res)
setPowerSimAreaList(res)
// console.log('발전량 시뮬레이션::::::::', res)
form.setValue('areaId', res[0].prefId)
form.setValue('areaName', res[0].prefName)
setAreaIdList(res)
}
})
}
}, [prefValue])
// 발전량 시뮬레이션 변경
const handleAreaIdOnChange = (e) => {
form.setValue('areaId', e.target.value)
}
useEffect(() => {
if (!isEmptyArray(areaIdList)) {
//도도부현넘기는지 발전량시뮬레이션지역 넘기는지 ->도도부현넘기기
console.log('prefName::', form.watch('prefName'))
let _prefName = form.watch('prefName')
//http://localhost:8080/api/object/windSpeed/兵庫県/list
get({ url: `/api/object/windSpeed/${_prefName}/list` }).then((res) => {
if (!isEmptyArray(res)) {
// console.log('기준풍속결과:::::::::', res)
setWindSpeedList(res)
}
})
}
}, [areaIdList])
//필수값 다 입력했을때
const onValid = (data) => {
// 수정모드일때는 PUT
@ -329,7 +357,7 @@ export default function StuffDetail() {
// const _zipNo = watch('zipNo')
// const _prefId = watch('prefId')
// const _address = watch('address')
// const _coldAreaChk = watch('coldAreaChk')
// const _coldRegionFlg = watch('coldRegionFlg')
// console.log(_dispCompanyName)
// console.log(_objectStatusId)
// console.log(_objectNameOmit)
@ -337,7 +365,7 @@ export default function StuffDetail() {
// console.log(_prefId)
// console.log('prefValue::', prefValue)
// console.log(_address)
// console.log('_coldAreaChk::', _coldAreaChk)
// console.log('_coldRegionFlg::', _coldRegionFlg)
}
//필수값 안넣었을때 임시저장 form required사용시
@ -362,15 +390,15 @@ export default function StuffDetail() {
prefId: formData.prefId,
prefName: formData.prefName,
address: formData.address,
powerSimArea: formData.powerSimArea,
areaId: formData.areaId,
receiveUser: formData.dispCompanyName,
installHeight: formData.installHeight,
windSpeed: formData.windSpeed,
snowCover: formData.snowCover,
verticalSnowCover: formData.verticalSnowCover,
surfaceType: formData.surfaceType,
powerConTerms: formData.powerConTerms,
coldAreaChk: formData.coldAreaChk,
saltAreaChk: formData.saltAreaChk,
conType: formData.conType,
coldRegionFlg: formData.coldRegionFlg,
saltAreaFlg: formData.saltAreaFlg,
tempFlg: '1',
workNo: null,
workName: null,
@ -382,14 +410,6 @@ export default function StuffDetail() {
})
}
// 발전량 시뮬레이션 변경
const handlePowerSimAreaOnChange = (e) => {
// console.log('가지고있는 도도부현코드:::::::::', prefValue)
console.log('발전량시뮬레이션변경:::::::::', e.target.value)
form.setValue('powerSimArea', e.target.value)
//값 set해주고 그거 useEffect로 기준풍속, 수직적설량 api호출
}
// 물건삭제
const onDelete = () => {
//http://localhost:8080/api/object/R201TES01240910023
@ -588,17 +608,22 @@ export default function StuffDetail() {
</th>
<td>
<div className="select-wrap" style={{ width: '200px' }}>
{powerSimAreaList?.length > 0 && (
<select className="select-light" name="powerSimArea" onChange={handlePowerSimAreaOnChange}>
{powerSimAreaList.map((row) => {
return (
<option key={row.prefName} value={row.prefId}>
{row.prefName}
</option>
)
})}
</select>
)}
<select
className="select-light"
name="areaId"
onChange={(e) => {
form.setValue('areaId', e.target.value)
}}
disabled={areaIdList?.length > 0 ? false : true}
>
{areaIdList.map((row) => {
return (
<option key={row.prefName} value={row.prefId}>
{row.prefName}
</option>
)
})}
</select>
</div>
</td>
</tr>
@ -610,13 +635,17 @@ export default function StuffDetail() {
<div className="flx-box">
<div className="select-wrap mr10" style={{ width: '200px' }}>
<select className="select-light" name="windSpeed" {...register('windSpeed')}>
<option value="">기준풍속공통코드?</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="60">60</option>
{windSpeedList.map((row) => {
return (
<option key={row.windSpeed} value={row.windSpeed}>
{row.windSpeed}
</option>
)
})}
</select>
</div>
<span>m/s이하</span>
<button className="btn-origin grey mr5">풍속선택</button>
</div>
</td>
</tr>
@ -627,7 +656,7 @@ export default function StuffDetail() {
<td>
<div className="flx-box">
<div className="select-wrap mr10" style={{ width: '200px' }}>
<select className="select-light" name="snowCover" {...register('snowCover')}>
<select className="select-light" name="verticalSnowCover" {...register('verticalSnowCover')}>
<option value="">수직적설량코드?</option>
<option value="30">30</option>
<option value="40">40</option>
@ -635,8 +664,8 @@ export default function StuffDetail() {
</div>
<span className="mr10">cm</span>
<div className="d-check-box light">
<input type="checkbox" id="coldAreaChk" {...form.register('coldAreaChk')} />
<label htmlFor="coldAreaChk">한랭지대책시행</label>
<input type="checkbox" id="coldRegionFlg" {...form.register('coldRegionFlg')} />
<label htmlFor="coldRegionFlg">한랭지대책시행</label>
</div>
</div>
</td>
@ -656,8 +685,8 @@ export default function StuffDetail() {
<label htmlFor="surfaceType1">Ⅱ</label>
</div>
<div className="d-check-box light mr5">
<input type="checkbox" id="saltAreaChk" {...form.register('saltAreaChk')} />
<label htmlFor="saltAreaChk">염해지역용아이템사용</label>
<input type="checkbox" id="saltAreaFlg" {...form.register('saltAreaFlg')} />
<label htmlFor="saltAreaFlg">염해지역용아이템사용</label>
</div>
<div className="tooltips"></div>
</div>
@ -686,12 +715,12 @@ export default function StuffDetail() {
<td>
<div className="flx-box">
<div className="d-check-radio light mr10">
<input type="radio" name="powerConTerms" value="0" id="powerConTerms0" {...form.register('powerConTerms')} />
<label htmlFor="powerConTerms0">잉여</label>
<input type="radio" name="conType" value="0" id="conType0" {...form.register('conType')} />
<label htmlFor="conType0">잉여</label>
</div>
<div className="d-check-radio light mr10">
<input type="radio" name="powerConTerms" value="1" id="powerConTerms1" {...form.register('powerConTerms')} />
<label htmlFor="powerConTerms1">전량</label>
<input type="radio" name="conType" value="1" id="conType1" {...form.register('conType')} />
<label htmlFor="conType1">전량</label>
</div>
</div>
</td>
@ -755,233 +784,6 @@ export default function StuffDetail() {
)}
</>
)}
{/* {(editMode === 'NEW' && (
<form onSubmit={handleSubmit(onValid)}>
<div>
<div>(*필수 입력항목)</div>
<div className="form-input">
<label>담당자*</label>
<input type="text" className="input-origin" {...form.register('dispCompanyName')} />
</div>
<div className="form-input">
<label>물건구분/물건명*</label>
<input type="radio" name="objectStatusId" value="0" id="objectStatus0" {...form.register('objectStatusId')} />
<label htmlFor="objectStatus0">신축</label>
<input type="radio" name="objectStatusId" value="1" id="objectStatus1" {...form.register('objectStatusId')} />
<label htmlFor="objectStatus0">기축</label>
<input type="text" className="input-origin" {...form.register('objectName')} />
<div className="flex w-full max-w-xs flex-col gap-2">
<select name="objectNameOmit" {...register('objectNameOmit')}>
<option value="">경칭선택</option>
<option value="11">111</option>
<option value="22">222</option>
<option value="33">333</option>
</select>
</div>
</div>
<div className="form-input">
<label>물건명 후리가나</label>
<input type="text" className="input-origin" {...form.register('objectNameKana')} />
</div>
<div className="form-input">
<label>1차 판매점명 / ID</label>
<div className="flex w-full max-w-xs flex-col gap2">
{saleStoreList?.length > 0 && (
<Autocomplete
className="max-w-xs"
defaultItems={saleStoreList}
label="판매점ID자동완성"
selectedKey={form.watch('saleStoreId')}
{...form.register('saleStoreId')}
onSelectionChange={onSelectionChange}
>
{(option) => <AutocompleteItem key={option.saleStoreId}>{option.saleStoreName}</AutocompleteItem>}
</Autocomplete>
)}
<input type="text" className="input-origin" value={form.watch('saleStoreName')} {...form.register('saleStoreName')} disabled />
</div>
</div>
<div className="form-input">
<label>2차 판매점명 / ID</label>
<div className="flex w-full max-w-xs flex-col gap2">
{otherSaleStoreList?.length > 0 && (
<Autocomplete
className="max-w-xs"
defaultItems={otherSaleStoreList}
label="2차판매점ID자동완성"
{...form.register('otherSaleStoreId')}
onSelectionChange={onSelectionChange2}
>
{(option) => <AutocompleteItem key={option.saleStoreId}>{option.saleStoreName}</AutocompleteItem>}
</Autocomplete>
)}
</div>
</div>
<div className="form-input">
<label>우편번호</label>
<input
type="text"
className="input-origin"
maxLength={7}
{...form.register('zipNo', {
minLength: { value: 7, message: '7자리만가능' },
pattern: { value: /^[0-9]*$/g, message: '숫자만 입력' },
})}
/>
<Button isDisabled={!buttonValid} onClick={onSearchPostNumber}>
주소검색
</Button>
*우편번호 7자리를 입력한 후, 주소검색 버튼을 클릭해 주십시오
</div>
<div className="form-input">
<label>도도부현 / 주소</label>
<div className="flex w-full flex-wrap items-end md:flex-nowrap mb-6 md:mb-0 gap-4">
{prefCodeList?.length > 0 && (
<Select className="max-w-xs" selectedKeys={prefValue} isDisabled {...form.register('prefId')}>
{prefCodeList.map((row) => {
return <SelectItem key={row.prefId}>{row.prefName}</SelectItem>
})}
</Select>
)}
</div>
<input type="text" className="input-origin" value={form.watch('address')} {...form.register('address')} />
</div>
<div className="form-input">
<label>발전량시뮬레이션지역</label>
{powerSimAreaList?.length > 0 && (
<Select
className="max-w-xs"
selectedKeys={form.watch('powerSimArea')}
{...form.register('powerSimArea')}
onChange={handlePowerSimAreaOnChange}
>
{powerSimAreaList.map((row) => {
// console.log('row::', row)
return (
<SelectItem key={row.prefName} value={row.prefId}>
{row.prefName}
</SelectItem>
)
})}
</Select>
)}
</div>
<div className="form-input">
<label>기준풍속</label>
<div className="flex w-full max-w-xs flex-col gap-2">
<select name="windSpeed" {...register('windSpeed')}>
<option value="">기준풍속</option>
<option value="30">30</option>
<option value="50">50</option>
<option value="60">60</option>
</select>
</div>
</div>
<div className="form-input">
<label>수직적설량</label>
<input
type="text"
className="input-origin"
maxLength={3}
{...form.register('snowCover', {
pattern: { value: /^[0-9]*$/g, message: '정수만 입력' },
})}
/>{' '}
cm
<Checkbox
onValueChange={(e) => {
form.setValue('coldAreaChk', e)
}}
{...form.register('coldAreaChk')}
>
한랭지대책시행
</Checkbox>
</div>
<div className="form-input">
<label>면조도구분</label>
<input type="radio" name="surfaceType" value="Ⅲ・Ⅳ" id="surfaceType0" {...form.register('surfaceType')} />
<label htmlFor="surfaceType0">Ⅲ・Ⅳ</label>
<input type="radio" name="surfaceType" value="Ⅱ" id="surfaceType1" {...form.register('surfaceType')} />
<label htmlFor="surfaceType1">Ⅱ</label>
<Checkbox
{...form.register('saltAreaChk')}
onValueChange={(e) => {
form.setValue('saltAreaChk', e)
}}
>
염해지역용아이템사용
</Checkbox>
</div>
<div className="form-input">
<label>설치높이</label>
<div className="flex w-full max-w-xs flex-col gap-2">
<select name="installHeight" {...register('installHeight')}>
<option value="">설치높이</option>
<option value="11">111</option>
<option value="22">222</option>
<option value="33">333</option>
</select>
</div>
</div>
<div className="form-input">
<label>계약조건</label>
<input type="radio" name="powerConTerms" value="0" id="powerConTerms0" {...form.register('powerConTerms')} />
<label htmlFor="powerConTerms0">잉여</label>
<input type="radio" name="powerConTerms" value="1" id="powerConTerms1" {...form.register('powerConTerms')} />
<label htmlFor="powerConTerms1">전량</label>
</div>
<div className="form-input">
<label>메모</label>
<Textarea
disableAutosize
classNames={{
base: 'max-w-xs',
input: 'resize-y min-h-[40px]',
}}
{...form.register('remarks')}
onValueChange={(e) => {
// console.log('e::::', e)
form.setValue('remarks', e)
}}
/>
</div>
</div>
{!isFormValid ? (
<>
<Button type="submit" onClick={onTempSave}>
NEW화면임시저장
</Button>
</>
) : (
<button type="submit">NEW화면 저장</button>
)}
<Link href="/management/stuff">
<button type="button">NEW화면 물건목록이동</button>
</Link>
</form>
)) || (
<>
{objectNo.substring(0, 1) === 'R' ? (
<>
<Link href="/management/stuff">
<button type="button">R상세:물건목록</button>
</Link>
<button type="submit">R상세:저장</button>
<button type="submit" onClick={onDelete}>
R상세:물건삭제
</button>
</>
) : (
<>
<Link href="/management/stuff">
<button type="button">T상세:물건목록</button>
</Link>
<button type="submit">T상세:저장</button>
</>
)}
</>
)} */}
</>
)
}

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

@ -3,19 +3,24 @@
import React, { useEffect, useRef, useState } from 'react'
import { useAxios } from '@/hooks/useAxios'
import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
import { globalLocaleStore } from '@/store/localeAtom'
import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
import Select from 'react-dropdown-select'
import KO from '@/locales/ko.json'
import JA from '@/locales/ja.json'
import { stuffSearchState } from '@/store/stuffAtom'
import { isEmptyArray } from '@/util/common-utils'
import dayjs from 'dayjs'
import isLeapYear from 'dayjs/plugin/isLeapYear' // 윤년 판단 플러그인
dayjs.extend(isLeapYear)
import Link from 'next/link'
import SingleDatePicker from '../common/datepicker/SingleDatePicker'
import { sessionStore } from '@/store/commonAtom'
import { useMessage } from '@/hooks/useMessage'
import { isObjectNotEmpty } from '@/util/common-utils'
export default function StuffSearchCondition() {
const globalLocaleState = useRecoilValue(globalLocaleStore)
const sessionState = useRecoilValue(sessionStore)
const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
const globalLocaleState = useRecoilValue(globalLocaleStore)
const { getMessage } = useMessage()
const ref = useRef()
const { get } = useAxios(globalLocaleState)
@ -37,11 +42,10 @@ export default function StuffSearchCondition() {
const resetStuffRecoil = useResetRecoilState(stuffSearchState)
const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)
const [objectNo, setObjectNo] = useState('') //물건번호
const [saleStoreId, setSaleStoreId] = useState('') //판매대리점ID
// const [saleStoreId, setSaleStoreId] = useState('') //판매대리점ID 세션에서 가져와서세팅
const [address, setAddress] = useState('') //물건주소
const [objectName, setobjectName] = useState('') //물건명
const [saleStoreName, setSaleStoreName] = useState('') //판매대리점명
const [specDateYn, setSpecDateYn] = useState('') //사양 확인('', 'Y', 'N')
const [receiveUser, setReceiveUser] = useState('') //담당자
const [dispCompanyName, setDispCompanyName] = useState('') //견적처
const [dateType, setDateType] = useState('U') //갱신일(U)/등록일(R)
@ -52,16 +56,14 @@ export default function StuffSearchCondition() {
const onSubmit = () => {
let diff = dayjs(endDate).diff(startDate, 'day')
if (diff > 366) {
return alert('최대1년 조회 가능합니다.')
return alert(getMessage('stuff.message.periodError'))
}
setStuffSearch({
schObjectNo: stuffSearch?.schObjectNo ? stuffSearch.schObjectNo : objectNo,
schSaleStoreId: stuffSearch?.schSaleStoreId ? stuffSearch.schSaleStoreId : saleStoreId,
schAddress: stuffSearch?.schAddress ? stuffSearch.schAddress : address,
schObjectName: stuffSearch?.schObjectName ? stuffSearch.schObjectName : objectName,
schSaleStoreName: stuffSearch?.schSaleStoreName ? stuffSearch.schSaleStoreName : saleStoreName,
schSpecDateYn: stuffSearch?.schSpecDateYn ? stuffSearch.schSpecDateYn : specDateYn,
schReceiveUser: stuffSearch?.schReceiveUser ? stuffSearch.schReceiveUser : receiveUser,
schDispCompanyName: stuffSearch?.schDispCompanyName ? stuffSearch.schDispCompanyName : dispCompanyName,
schDateType: stuffSearch?.schDateType ? stuffSearch.schDateType : dateType,
@ -78,11 +80,10 @@ export default function StuffSearchCondition() {
//초기화
const resetRecoil = () => {
setObjectNo('')
setSaleStoreId('')
//setSaleStoreId('') //세션정보
setAddress('')
setobjectName('')
setSaleStoreName('')
setSpecDateYn('')
setReceiveUser('')
setDispCompanyName('')
setDateType('U')
@ -94,13 +95,18 @@ export default function StuffSearchCondition() {
}
useEffect(() => {
get({ url: `/api/object/saleStore/201TES01/list` }).then((res) => {
if (!isEmptyArray(res)) {
// console.log('판매점 결과:::::', res)
setSchSelSaleStoreList(res)
}
})
}, [])
if (isObjectNotEmpty(sessionState)) {
// console.log('판매대리점 리스트 가져오기 위한 세션정보::::::::', sessionState)
// storeId가 T01 이거나 1차점일때만 판매대리점 선택 활성화
// get({ url: `/api/object/saleStore/201TES01/list` }).then((res) => {
get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
if (!isEmptyArray(res)) {
// console.log('판매점 결과:::::', res)
setSchSelSaleStoreList(res)
}
})
}
}, [sessionState])
//초기화 눌렀을 때 자동완성도..
const handleClear = () => {
@ -115,7 +121,7 @@ export default function StuffSearchCondition() {
const onSelectionChange = (key) => {
if (!isEmptyArray(key)) {
setSchSelSaleStoreId(key[0].saleStoreId)
setStuffSearch({ ...stuffSearch, schSelSaleStoreId: key[0].saleStoreId })
setStuffSearch({ ...stuffSearch, code: 'S', schSelSaleStoreId: key[0].saleStoreId })
} else {
setSchSelSaleStoreId('')
setStuffSearch({ ...stuffSearch, schSelSaleStoreId: '' })
@ -127,6 +133,14 @@ export default function StuffSearchCondition() {
setEndDate(stuffSearch?.schToDt ? stuffSearch.schToDt : dayjs(new Date()).format('YYYY-MM-DD'))
}, [stuffSearch])
useEffect(() => {
if (globalLocaleState === 'ko') {
setAppMessageState(KO)
} else {
setAppMessageState(JA)
}
}, [globalLocaleState])
return (
<>
{/* 퍼블적용시작 */}
@ -138,7 +152,7 @@ export default function StuffSearchCondition() {
<div className="left-unit-box">
<Link href="/management/stuff/tempdetail">
<button type="button" className="btn-origin navy mr5">
물건신규등록버튼
물건신규등록
</button>
</Link>
<button type="button" className="btn-origin navy mr5" onClick={onSubmit}>
@ -182,11 +196,12 @@ export default function StuffSearchCondition() {
<input
type="text"
className="input-light"
placeholder="판매대리점ID 입력"
value={stuffSearch?.schSaleStoreId ? stuffSearch.schSaleStoreId : saleStoreId}
placeholder="판매대리점명 입력"
value={stuffSearch?.schSaleStoreName ? stuffSearch.schSaleStoreName : saleStoreName}
onChange={(e) => {
setSaleStoreId(e.target.value)
setStuffSearch({ ...stuffSearch, code: 'S', schSaleStoreId: e.target.value })
//setSaleStoreId(e.target.value)
setSaleStoreName(e.target.value)
setStuffSearch({ ...stuffSearch, code: 'S', schSaleStoreName: e.target.value })
}}
/>
</div>
@ -244,25 +259,16 @@ export default function StuffSearchCondition() {
<select className="select-light" name="" id=""></select>
</div> */}
{schSelSaleStoreList?.length > 0 && (
// <Autocomplete
// className="max-w-xs"
// label="판매대리점선택"
// defaultItems={schSelSaleStoreList}
// selectedKey={stuffSearch?.schSelSaleStoreId ? stuffSearch.schSelSaleStoreId : schSelSaleStoreId}
// onSelectionChange={onSelectionChange}
// >
// {(option) => <AutocompleteItem key={option.saleStoreId}>{option.saleStoreName}</AutocompleteItem>}
// </Autocomplete>
<Select
options={schSelSaleStoreList}
value={stuffSearch?.schSelSaleStoreId ? stuffSearch.schSelSaleStoreId : schSelSaleStoreId}
// value={schSelSaleStoreId}
labelField="saleStoreName"
valueField="saleStoreName"
onChange={onSelectionChange}
clearable={true}
onClearAll={handleClear}
ref={ref}
disabled={sessionState?.storeLvl === '1' ? false : true}
></Select>
)}
</td>
@ -333,189 +339,6 @@ export default function StuffSearchCondition() {
</div>
</div>
{/* 퍼블적용끝 */}
{/* <div align="right">
<Link href="/management/stuff/tempdetail">
<button type="button">물건신규등록</button>
</Link>
<Button size="sm" onClick={onSubmit}>
조회
</Button>
<Button size="sm" onClick={resetRecoil}>
초기화
</Button>
</div>
<div className="w-full flex flex-col gap-4">
{Array(4)
.fill()
.map((_, i) => {
if (i === 0) {
return (
<div key={i} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
<input
type="text"
placeholder="물건번호 입력"
value={stuffSearch?.code === 'E' ? stuffSearch.schObjectNo : objectNo}
onChange={(e) => {
setObjectNo(e.target.value)
setStuffSearch({ ...stuffSearch, code: 'S', schObjectNo: e.target.value })
}}
/>
<input
type="text"
placeholder="판매대리점ID 입력"
value={stuffSearch?.schSaleStoreId ? stuffSearch.schSaleStoreId : saleStoreId}
onChange={(e) => {
setSaleStoreId(e.target.value)
setStuffSearch({ ...stuffSearch, code: 'S', schSaleStoreId: e.target.value })
}}
/>
<input
type="text"
placeholder="물건주소 입력"
value={stuffSearch?.schAddress ? stuffSearch.schAddress : address}
onChange={(e) => {
setAddress(e.target.value)
setStuffSearch({ ...stuffSearch, code: 'S', schAddress: e.target.value })
}}
/>
</div>
)
} else if (i === 1) {
return (
<div key={i} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
<input
type="text"
placeholder="물건명 입력"
value={stuffSearch?.schObjectName ? stuffSearch.schObjectName : objectName}
onChange={(e) => {
setobjectName(e.target.value)
setStuffSearch({ ...stuffSearch, code: 'S', schObjectName: e.target.value })
}}
/>
<input
type="text"
placeholder="물건명 입력"
value={stuffSearch?.schSaleStoreName ? stuffSearch.schSaleStoreName : saleStoreName}
onChange={(e) => {
setSaleStoreName(e.target.value)
setStuffSearch({ ...stuffSearch, code: 'S', schSaleStoreName: e.target.value })
}}
/>
<div>
<input
type="radio"
name="radio_sayang"
id="radio_all"
checked={stuffSearch?.schSpecDateYn === '' ? true : false}
value={''}
onChange={(e) => {
setSpecDateYn(e.target.value)
setStuffSearch({ ...stuffSearch, code: 'S', schSpecDateYn: e.target.value })
}}
/>
<label htmlFor="radio_all">ALL</label>
</div>
<div>
<input
type="radio"
name="radio_sayang"
id="radio_y"
checked={stuffSearch?.schSpecDateYn === 'Y' ? true : false}
value={'Y'}
onChange={(e) => {
setSpecDateYn(e.target.value)
setStuffSearch({ ...stuffSearch, code: 'S', schSpecDateYn: e.target.value })
}}
/>
<label htmlFor="radio_y">사양 확인</label>
</div>
<div>
<input
type="radio"
name="radio"
id="radio_n"
checked={stuffSearch?.schSpecDateYn === 'N' ? true : false}
value={'N'}
onChange={(e) => {
setSpecDateYn(e.target.value)
setStuffSearch({ ...stuffSearch, code: 'S', schSpecDateYn: e.target.value })
}}
/>
<label htmlFor="radio_n">사양 미확인</label>
</div>
</div>
)
} else if (i === 2) {
return (
<div key={i} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
<input
type="text"
placeholder="담당자 입력"
value={stuffSearch?.schReceiveUser ? stuffSearch.schReceiveUser : receiveUser}
onChange={(e) => {
setReceiveUser(e.target.value)
setStuffSearch({ ...stuffSearch, code: 'S', schReceiveUser: e.target.value })
}}
/>
<input
type="text"
placeholder="견적처 입력"
value={stuffSearch?.schDispCompanyName ? stuffSearch.schDispCompanyName : dispCompanyName}
onChange={(e) => {
setDispCompanyName(e.target.value)
setStuffSearch({ ...stuffSearch, code: 'S', schDispCompanyName: e.target.value })
}}
/>
{schSelSaleStoreList?.length > 0 && (
<Autocomplete
className="max-w-xs"
label="판매대리점선택"
defaultItems={schSelSaleStoreList}
selectedKey={stuffSearch?.schSelSaleStoreId ? stuffSearch.schSelSaleStoreId : schSelSaleStoreId}
onSelectionChange={onSelectionChange}
>
{(option) => <AutocompleteItem key={option.saleStoreId}>{option.saleStoreName}</AutocompleteItem>}
</Autocomplete>
)}
</div>
)
} else {
return (
<div key={i} className="flex w-full flex-wrap md:flex-nowrap mb-6 md:mb-0 gap-4">
<div>
<input
type="radio"
name="radio_ptype"
id="radio_u"
checked={stuffSearch?.schDateType === 'U' ? true : false}
value={'U'}
onChange={(e) => {
setDateType(e.target.value)
setStuffSearch({ ...stuffSearch, code: 'S', schDateType: e.target.value })
}}
/>
<label htmlFor="radio_u">갱신일</label>
</div>
<div>
<input
type="radio"
name="radio_ptype"
id="radio_r"
checked={stuffSearch?.schDateType === 'R' ? true : false}
value={'R'}
onChange={(e) => {
setDateType(e.target.value)
setStuffSearch({ ...stuffSearch, code: 'S', schDateType: e.target.value })
}}
/>
<label htmlFor="radio_r">등록일</label>
</div>
<RangeDatePicker {...rangeDatePickerProps} />
</div>
)
}
})}
</div> */}
</>
)
}

32
src/hooks/useAxios.js
View File

@ -5,32 +5,40 @@ const AxiosType = {
EXTERNAL: 'External',
}
/**
* axios 인스턴스 생성 후 반환
* @param {String} lang
* @returns http request instance - get, post, put, patch, delete (promise 접수사가 붙은 함수는 promise 반환)
*/
export function useAxios(lang = '') {
const getInstances = (url) => {
/**
* url이 http로 시작하면 외부 서버로 판단
*/
let type = AxiosType.INTERNAL
url.startsWith('http') ? (type = AxiosType.EXTERNAL) : ''
/**
* 내부 서버로 요청 시 lang 헤더 추가
*/
let headerValue = {
Accept: 'application/json',
}
url.startsWith('https') ? '' : (headerValue['lang'] = lang)
return axios.create({
baseURL: type === AxiosType.INTERNAL ? process.env.NEXT_PUBLIC_API_SERVER_PATH : '',
headers: {
Accept: 'application/json',
lang,
},
headers: headerValue,
})
}
// request 추가 로직
axios.interceptors.request.use((config) => {
// config['Authorization'] = localStorage.getItem('token')
//TODO: 인터셉터에서 추가 로직 구현
return config
})
axios.interceptors.request.use(undefined, (error) => {
//TODO: 인터셉터에서 에러 처리 로직 구현
// if (error.isAxiosError && e.response?.status === 401) {
// localStorage.removeItem('token')
// }
})
// response 추가 로직
axios.interceptors.request.use(undefined, (error) => {})
const get = async ({ url }) => {
return await getInstances(url)

3
src/hooks/useCanvas.js
View File

@ -11,7 +11,7 @@ import { defineQLine } from '@/util/qline-utils'
import { defineQPloygon } from '@/util/qpolygon-utils'
import { writeImage } from '@/lib/canvas'
import { useCanvasEvent } from '@/hooks/useCanvasEvent'
import { post } from '@/lib/Axios'
import { useAxios } from '@/hooks/useAxios'
import { v4 as uuidv4 } from 'uuid'
export function useCanvas(id) {
@ -22,6 +22,7 @@ export function useCanvas(id) {
const [canvasSize] = useRecoilState(canvasSizeState)
const [fontSize] = useRecoilState(fontSizeState)
const { setCanvasForEvent, attachDefaultEventOnCanvas } = useCanvasEvent()
const { post } = useAxios()
/**
* 처음 셋팅

23
src/hooks/useMode.js
View File

@ -4873,13 +4873,14 @@ export function useMode() {
let turfPolygon
let manualDrawCells = drewRoofCells // 앞에서 자동으로 했을때 추가됨
let direction
let trestlePolygon
canvas.on('mouse:move', (e) => {
//마우스 이벤트 삭제 후 재추가
const mousePoint = canvas.getPointer(e.e)
for (let i = 0; i < trestlePolygons.length; i++) {
turfPolygon = polygonToTurfPolygon(trestlePolygons[i])
trestlePolygon = trestlePolygons[i]
direction = trestlePolygons[i].direction //도형의 방향
let width = direction === 'south' || direction === 'north' ? 172 : 113
let height = direction === 'south' || direction === 'north' ? 113 : 172
@ -5050,6 +5051,7 @@ export function useMode() {
fabricPolygon.setCoords()
canvas?.renderAll()
inside = true
break
} else {
inside = false
}
@ -5078,12 +5080,12 @@ export function useMode() {
fabricPolygon.set({ points: rectPoints })
const tempTurfModule = polygonToTurfPolygon(fabricPolygon)
//도머 객체를 가져옴
if (dormerTrestlePolygons) {
dormerTrestlePolygons.forEach((dormerTrestle) => {
const dormerTurfPolygon = polygonToTurfPolygon(dormerTrestle)
const intersection = turf.intersect(turf.featureCollection([dormerTurfPolygon, tempTurfModule]))
const dormerTurfPolygon = polygonToTurfPolygon(dormerTrestle) //turf객체로 변환
const intersection = turf.intersect(turf.featureCollection([dormerTurfPolygon, tempTurfModule])) //겹치는지 확인
//겹치면 안됨
if (intersection) {
alert('도머위에 모듈을 올릴 수 없습니다.')
isIntersection = false
@ -5097,18 +5099,21 @@ export function useMode() {
if (turf.booleanWithin(tempTurfModule, turfPolygon)) {
//마우스 클릭시 set으로 해당 위치에 셀을 넣음
const isOverlap = manualDrawCells.some((cell) => turf.booleanOverlap(tempTurfModule, polygonToTurfPolygon(cell)))
const isOverlap = manualDrawCells.some((cell) => turf.booleanOverlap(tempTurfModule, polygonToTurfPolygon(cell))) //겹치는지 확인
if (!isOverlap) {
//안겹치면 넣는다
fabricPolygon.setCoords()
fabricPolygon.set({ name: 'cell', fill: '#BFFD9F' })
manualDrawCells.push(fabricPolygon)
manualDrawCells.push(fabricPolygon) //모듈배열에 추가
//해당 모듈에 프로퍼티로 넣는다
trestlePolygon.set({
modules: manualDrawCells,
})
} else {
alert('셀끼리 겹치면 안되죠?')
}
} else {
alert('나갔으요!!')
alert('나갔죠?!!')
}
setDrewRoofCells(manualDrawCells)
}

33
src/hooks/usePlan.js
View File

@ -6,7 +6,7 @@ import { useSwal } from '@/hooks/useSwal'
export function usePlan() {
const [canvas, setCanvas] = useRecoilState(canvasState)
const [currentCanvasPlan, setcurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState)
const { swalFire } = useSwal()
const { getMessage } = useMessage()
@ -70,6 +70,24 @@ export function usePlan() {
// }, 1000)
}
/**
* 실시간 캔버스 상태와 DB에 저장된 캔버스 상태를 비교하여 수정 여부를 판단
*/
const checkModifiedCanvasPlan = () => {
removeMouseLines()
const canvasStr = addCanvas()
const canvasStatus = dbToCanvasFormat(canvasToDbFormat(canvasStr))
if (JSON.parse(canvasStr).objects.length === 0 && currentCanvasPlan.canvasStatus === undefined) {
// 빈 캔버스
return false
} else if (canvasStatus === currentCanvasPlan.canvasStatus) {
// 변경사항 없는 캔버스
return false
} else {
return true
}
}
/**
* DB에 저장된 데이터를 canvas에서 사용할 수 있도록 포맷화
*/
@ -106,14 +124,14 @@ export function usePlan() {
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)
// console.log('[PUT] canvas-statuses res :::::::: %o', res)
setInitCanvasPlans((initCanvasPlans) =>
initCanvasPlans.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)
// console.error('[PUT] canvas-statuses error :::::::: %o', error)
})
} else {
// canvas 신규 등록
@ -127,11 +145,15 @@ export function usePlan() {
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,
{ id: res.data, name: currentCanvasPlan.objectNo + '-' + res.data, userId: userId, canvasStatus: canvasStatus, isNew: currentCanvasPlan.id },
])
// console.log('[POST] canvas-statuses response :::::::: %o', res)
})
.catch((error) => {
swalFire({ text: error.message, icon: 'error' })
console.error('[POST] canvas-statuses res error :::::::: %o', error)
// console.error('[POST] canvas-statuses res error :::::::: %o', error)
})
}
}
@ -170,6 +192,7 @@ export function usePlan() {
removeMouseLines,
saveCanvas,
addCanvas,
checkModifiedCanvasPlan,
getCanvasByObjectNo,
delCanvasById,
}

56
src/lib/Axios.js
View File

@ -1,56 +0,0 @@
'use client'
import axios from 'axios'
axios.defaults.baseURL = process.env.NEXT_PUBLIC_API_SERVER_PATH
const axiosInstance = axios.create({
// baseURL: process.env.API_SERVER_URL,
headers: {
Accept: 'application/json',
},
})
axiosInstance.interceptors.request.use((config) => {
// config['Authorization'] = localStorage.getItem('token')
//TODO: 인터셉터에서 추가 로직 구현
return config
})
axiosInstance.interceptors.request.use(undefined, (error) => {
//TODO: 인터셉터에서 에러 처리 로직 구현
// if (error.isAxiosError && e.response?.status === 401) {
// localStorage.removeItem('token')
// }
})
export const get = ({ url }) =>
axiosInstance
.get(url)
.then((res) => res.data)
.catch(console.error)
export const post = ({ url, data }) =>
axiosInstance
.post(url, data)
.then((res) => res.data)
.catch(console.error)
export const put = ({ url, data }) =>
axiosInstance
.put(url, data)
.then((res) => res.data)
.catch(console.error)
export const patch = ({ url, data }) =>
axiosInstance
.patch(url, data)
.then((res) => res.data)
.catch(console.error)
export const del = ({ url }) =>
axiosInstance
.delete(url)
.then((res) => res.data)
.catch(console.error)

36
src/locales/ja.json
View File

@ -39,6 +39,7 @@
"plan.menu.roof.cover": "지붕덮개",
"plan.menu.roof.cover.outline.drawing": "外壁線を描",
"plan.menu.roof.cover.roof.shape.setting": "屋根形状設定",
"plan.menu.roof.cover.roof.shape.passivity.setting": "屋根形状設定",
"plan.menu.roof.cover.roof.shape.edit": "지붕형상 편집",
"plan.menu.roof.cover.auxiliary.line.drawing": "補助線を描",
"plan.menu.roof.cover.roof.surface.alloc": "지붕면 할당",
@ -144,6 +145,15 @@
"modal.canvas.setting.wallline.properties.setting.info": "※属性を変更する外壁線を選択し、軒で設定またはケラバで設定 ボタンをクリックして設定値を適用します。",
"modal.canvas.setting.wallline.properties.setting.eaves": "軒で設定",
"modal.canvas.setting.wallline.properties.setting.edge": "ケラバに設定",
"modal.eaves.gable.edit": "軒・ケラバ変更",
"modal.eaves.gable.edit.basic": "通常",
"modal.eaves.gable.edit.wall.merge.info": "家屋などの壁に面する屋根を作成します。",
"modal.wallline.offset.setting": "外壁の編集とオフセット",
"modal.wallline.offset.setting.wallline.edit": "外壁の編集",
"modal.wallline.offset.setting.wallline.edit.info": "辺と始点を選択して長さと方向を指定してください。",
"modal.wallline.offset.setting.wallline.edit.position": "支店",
"modal.wallline.offset.setting.offset": "オフセット",
"modal.wallline.offset.setting.offset.info": "オフセットしたい外壁を選択してください。",
"setting": "設定",
"common.message.no.data": "No data",
"common.message.no.dataDown": "ダウンロードするデータがありません",
@ -285,26 +295,29 @@
"join.complete.contents": "※ 신청한 ID가 승인되면, 담당자 정보에 입력한 이메일 주소로 로그인 관련 안내 메일이 전송됩니다.",
"join.complete.email_comment": "담당자 이메일 주소",
"join.complete.email": "test@naver.com",
"stuff.gridHeader.lastEditDatetime": "갱신일시",
"stuff.gridHeader.objectNo": "물건번호",
"stuff.gridHeader.planTotCnt": "플랜 수",
"stuff.gridHeader.objectName": "물건명",
"stuff.gridHeader.saleStoreId": "대리점ID",
"stuff.gridHeader.saleStoreName": "대리점명",
"stuff.gridHeader.address": "물건주소",
"stuff.gridHeader.dispCompanyName": "견적처",
"stuff.gridHeader.receiveUser": "담당자",
"stuff.gridHeader.specDate": "사양확인",
"stuff.gridHeader.createDatetime": "등록일",
"stuff.gridHeader.lastEditDatetime": "更新日時",
"stuff.gridHeader.objectNo": "品番",
"stuff.gridHeader.planTotCnt": "プラン数",
"stuff.gridHeader.objectName": "商品名",
"stuff.gridHeader.saleStoreId": "代理店ID",
"stuff.gridHeader.saleStoreName": "代理店名",
"stuff.gridHeader.address": "商品アドレス",
"stuff.gridHeader.dispCompanyName": "見積もり",
"stuff.gridHeader.receiveUser": "担当者",
"stuff.gridHeader.specDate": "仕様確認日",
"stuff.gridHeader.createDatetime": "登録日",
"stuff.message.periodError": "最大1年間閲覧可能.",
"length": "長さ",
"slope": "傾斜",
"eaves.offset": "軒の",
"gable.offset": "ケラバ出幅",
"offset": "出幅",
"size": "寸",
"size.angle": "寸(度)",
"eaves": "軒",
"gable": "ケラバ",
"wall": "壁",
"wall.merge": "壁取り",
"hajebichi": "ハゼビーチ",
"straight.line": "直線",
"right.angle": "直角",
@ -321,5 +334,6 @@
"jerkinhead.width": "半折先幅",
"jerkinhead.slope": "半折先傾斜",
"shed.width": "片流幅",
"windage": "漂流",
"windage.width": "漂流の出幅"
}

15
src/locales/ko.json
View File

@ -151,6 +151,15 @@
"modal.canvas.setting.wallline.properties.setting.info": "※ 속성을 변경할 외벽선을 선택하고, 처마로 설정 또는 케라바로 설정\n 버튼을 클릭하여 설정값을 적용하십시오.\n",
"modal.canvas.setting.wallline.properties.setting.eaves": "처마로 설정",
"modal.canvas.setting.wallline.properties.setting.edge": "케라바로 설정",
"modal.eaves.gable.edit": "처마・케라바 변경",
"modal.eaves.gable.edit.basic": "통상",
"modal.eaves.gable.edit.wall.merge.info": "하옥 등 벽에 접하는 지붕을 작성합니다.",
"modal.wallline.offset.setting": "외벽선 편집 및 오프셋",
"modal.wallline.offset.setting.wallline.edit": "외벽선 편집",
"modal.wallline.offset.setting.wallline.edit.info": "변과 시작점을 선택하고 길이와 방향을 지정해 주세요.",
"modal.wallline.offset.setting.wallline.edit.position": "지점",
"modal.wallline.offset.setting.offset": "오프셋",
"modal.wallline.offset.setting.offset.info": "오프셋 하고 싶은 외벽선을 선택하세요.",
"setting": "설정",
"common.message.no.data": "No data",
"common.message.no.dataDown": "No data to download",
@ -301,17 +310,20 @@
"stuff.gridHeader.address": "물건주소",
"stuff.gridHeader.dispCompanyName": "견적처",
"stuff.gridHeader.receiveUser": "담당자",
"stuff.gridHeader.specDate": "사양확인",
"stuff.gridHeader.specDate": "사양확인일",
"stuff.gridHeader.createDatetime": "등록일",
"stuff.message.periodError": "최대1년 조회 가능합니다.",
"length": "길이",
"slope": "경사",
"eaves.offset": "처마 출폭",
"gable.offset": "케라바 출폭",
"offset": "출폭",
"size": "치수",
"size.angle": "寸(度)",
"eaves": "처마",
"gable": "케라바",
"wall": "벽",
"wall.merge": "벽취합",
"hajebichi": "하제비치",
"straight.line": "직선",
"right.angle": "직각",
@ -328,5 +340,6 @@
"jerkinhead.width": "반절처 폭",
"jerkinhead.slope": "반절처 경사",
"shed.width": "한쪽흐름 폭",
"windage": "편류",
"windage.width": "편류의 출폭"
}

7
src/store/stuffAtom.js
View File

@ -1,16 +1,13 @@
import { atom } from 'recoil'
import dayjs from 'dayjs'
import isLeapYear from 'dayjs/plugin/isLeapYear' // 윤년 판단 플러그인
dayjs.extend(isLeapYear)
import { v1 } from 'uuid'
export const stuffSearchState = atom({
key: 'stuffSearchState',
key: `stuffSearchState/${v1()}`,
default: {
schObjectNo: '', //물건번호
schSaleStoreId: '', //판매대리점ID
schAddress: '', //물건주소
schObjectName: '', //물건명
schSaleStoreName: '', //판매대리점명
schSpecDateYn: '', //사양타입 ('', 'Y', 'N')
schReceiveUser: '', //담당자
schDispCompanyName: '', //견적처
schDateType: 'U', //갱신일(U)/등록일(R)

81
src/styles/_contents.scss
View File

@ -842,4 +842,85 @@
color: #344356;
font-weight: 500;
}
}
// 패널 배치 집계
.penal-wrap{
position: fixed;
top: 200px;
left: 50px;
z-index: 999999;
width: 237px;
height: 40px;
line-height: 40px;
background-color: #fff;
border: 1px solid #DFDFDF;
padding: 0 34px 0 10px;
border-radius: 2px;
box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
cursor: pointer;
&::before{
content: '';
position: absolute;
top: 50%;
right: 12px;
transform: translateY(-50%);
width: 10px;
height: 6px;
background: url(../../public/static/images/canvas/penal_arr.svg)no-repeat center;
background-size: cover;
}
h2{
font-size: 12px;
font-weight: 500;
color: #3D3D3D;
}
.penal-table-wrap{
display: none;
position: absolute;
top: 100%;
left: -1px;
min-width: calc(100% + 2px);
background-color: #3D3D3D;
border: 1px solid #3D3D3D;
padding: 20px;
.penal-table{
table-layout: fixed;
border-collapse: collapse;
thead{
th{
text-align: center;
background-color:rgba(255, 255, 255, 0.05);
font-size: 12px;
font-weight: 500;
color: #fff;
border: 1px solid #505050;
}
}
tbody{
td{
font-size: 12px;
color: #fff;
font-weight: 400;
text-align: center;
padding: 0 10px;
border: 1px solid #505050;
}
}
}
}
&.act{
border: 1px solid #3D3D3D;
background-color: #3D3D3D;
h2{
color: #fff;
}
&::before{
background: url(../../public/static/images/canvas/penal_arr_white.svg)no-repeat center;
}
.penal-table-wrap{
display: block;
}
}
}

116
src/styles/_modal.scss
View File

@ -77,6 +77,10 @@ $alert-color: #101010;
width: 640px;
}
&.lx-2 {
width: 740px;
}
&.lx {
width: 770px;
}
@ -1543,3 +1547,115 @@ $alert-color: #101010;
}
}
}
// 지붕모듈선택
.roof-module-tab {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
.module-tab-bx {
flex: 1;
height: 34px;
line-height: 31px;
border: 1px solid #484848;
border-radius: 2px;
background-color: transparent;
font-size: 12px;
color: #AAA;
text-align: center;
cursor: default;
transition: all .15s ease-in-out;
&.act {
background-color: #1083E3;
border: 1px solid #1083E3;
color: #fff;
font-weight: 500;
}
}
.tab-arr {
display: block;
width: 9px;
height: 14px;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
transition: all .15s ease-in-out;
&.act {
background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
}
}
}
.roof-module-compas {
margin-bottom: 24px;
.compas-box-inner {
width: 280px;
height: 253px;
.circle {
top: 86%;
&:nth-child(1),
&:nth-child(7),
&:nth-child(13),
&:nth-child(19) {
&::before {
content: '';
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 6px;
background-color: #8B8B8B;
}
}
i {
top: 32px;
}
&.act {
i {
color: #8B8B8B;
}
}
}
}
}
.center-wrap {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.module-table-flex-wrap {
display: flex;
gap: 10px;
}
.module-table-box {
flex: 1;
background-color: #3D3D3D;
border-radius: 2px;
.module-table-inneer {
padding: 10px;
.outline-form {
span {
width: auto;
}
}
}
}

11
src/styles/_reset.scss
View File

@ -144,6 +144,12 @@ button{
.ml10{margin-left: 10px !important;}
.ml15{margin-left: 15px !important;}
// align
.al-l{text-align: left !important;}
.al-r{text-align: right !important;}
.al-c{text-align: center !important;}
// button
.btn-frame{
display: inline-block;
@ -410,6 +416,11 @@ input[type=text]{
&:read-only{
color: #AAA;
}
&.plane{
font-family: 'Noto Sans JP', sans-serif;
border: 1px solid #525252;
background-color: transparent;
}
}
&.input-light{
display: block;

28
src/styles/_table.scss
View File

@ -174,4 +174,32 @@ table{
}
}
}
}
.roof-module-table{
table{
border-collapse: collapse;
thead{
th{
height: 40px;
padding: 0 10px;
font-size: 12px;
color: #fff;
font-weight: 500;
border: 1px solid #505050;
vertical-align: middle;
background-color: rgba(255, 255, 255, 0.05);
text-align: center;
word-break: keep-all;
}
}
tbody{
td{
font-size: 12px;
color: #fff;
font-weight: 400;
border: 1px solid #505050;
}
}
}
}