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

Merge branch 'dev' into dev-yj

Browse Source
This commit is contained in:
yjnoh 2024-10-21 14:32:26 +09:00
commit f50e1675d0
32 changed files with 2837 additions and 3069 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/app/QcastProvider.js
View File

@ -1,27 +1,24 @@
'use client'
import { useEffect } from 'react'
import { useRecoilState, useRecoilValue } from 'recoil'
import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
import { ErrorBoundary } from 'next/dist/client/components/error-boundary'
import ServerError from './error'
import '@/styles/common.scss'
import KO from '@/locales/ko.json'
import JA from '@/locales/ja.json'
// import KO from '@/locales/ko.json'
// import JA from '@/locales/ja.json'
export const QcastProvider = ({ children }) => {
const globalLocale = useRecoilValue(globalLocaleStore)
const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
// const globalLocale = useRecoilValue(globalLocaleStore)
// const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
useEffect(() => {
if (globalLocale === 'ko') {
setAppMessageState(KO)
} else {
setAppMessageState(JA)
}
}, [globalLocale])
// useEffect(() => {
// if (globalLocale === 'ko') {
// setAppMessageState(KO)
// } else {
// setAppMessageState(JA)
// }
// }, [globalLocale])
return (
<>

4
src/app/layout.js
View File

@ -16,6 +16,7 @@ import '../styles/style.scss'
import '../styles/contents.scss'
import Dimmed from '@/components/ui/Dimmed'
import SessionProvider from './SessionProvider'
import LocaleSwitch from '@/components/LocaleSwitch'
// const inter = Inter({ subsets: ['latin'] })
@ -76,8 +77,9 @@ export default async function RootLayout({ children }) {
</QcastProvider>
</div>
<footer>
<div className="footer-inner">
<div className="footer-inner flex justify-center">
<span>COPYRIGHT©2024 Hanwha Japan All Rights Reserved.</span>
<LocaleSwitch />
</div>
</footer>
</div>

23
src/components/LocaleSwitch.jsx Normal file
View File

@ -0,0 +1,23 @@
'use client'
import { globalLocaleStore } from '@/store/localeAtom'
import { useRecoilState } from 'recoil'
export default function LocaleSwitch() {
const [globalLocale, setGlobalLocale] = useRecoilState(globalLocaleStore)
return (
<span
className="locale-switch"
onClick={() => {
if (globalLocale === 'ko') {
setGlobalLocale('ja')
} else {
setGlobalLocale('ko')
}
}}
>
{globalLocale.toUpperCase()}
</span>
)
}

21
src/components/auth/AutoLogin.jsx Normal file
View File

@ -0,0 +1,21 @@
'use client'
import { useMessage } from '@/hooks/useMessage'
export default function AutoLoginPage() {
const { getMessage } = useMessage()
return (
<div className="login-input-frame">
<div className="login-frame-tit ">
<span>{getMessage('site.name')}</span>
{getMessage('site.sub_name')}
</div>
<div className="login-input-wrap">
<div className="login-area id" style={{ fontWeight: 'bolder' }}>
{getMessage('login.auto.page.text')}
</div>
</div>
</div>
)
}

8
src/components/auth/Login.jsx
View File

@ -15,6 +15,8 @@ import Cookies from 'js-cookie'
import { useSearchParams } from 'next/navigation'
import AutoLogin from './AutoLogin'
export default function Login() {
// 자동 로그인
const initParams = useSearchParams()
@ -180,8 +182,7 @@ export default function Login() {
<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>
{passwordReset === 1 && (
{!autoLoginParam && passwordReset === 1 && (
<>
<div className="login-input-frame">
<form onSubmit={loginProcess} className="space-y-6">
@ -266,7 +267,7 @@ export default function Login() {
</div>
</>
)}
{passwordReset === 2 && (
{!autoLoginParam && passwordReset === 2 && (
<>
<div className="login-input-frame">
<div className="login-frame-tit pw-reset">
@ -328,6 +329,7 @@ export default function Login() {
</div>
</>
)}
{autoLoginParam && <AutoLogin />}
</div>
<div className="login-copyright">COPYRIGHT©2024 Hanwha Japan All Rights Reserved.</div>
</div>

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

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

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

@ -45,7 +45,7 @@ export default function ArchiveTable({ clsCode }) {
}
fetchData()
}, [search.searchValue])
}, [search.searchValue, search.searchFlag])
// 상세 파일 목록 조회
const handleDetailFileListDown = async (noticeNo) => {
@ -74,6 +74,7 @@ export default function ArchiveTable({ clsCode }) {
return (
<>
{boardList.length > 0 ? (
<div className="file-down-list">
{boardList?.map((board) => (
<div key={board.noticeNo} className="file-down-item">
@ -98,6 +99,9 @@ export default function ArchiveTable({ clsCode }) {
</div>
))}
</div>
) : (
<div className="file-down-nodata">{getMessage('common.message.no.data')}</div>
)}
</>
)
}

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

@ -7,14 +7,11 @@ import { useMessage } from '@/hooks/useMessage'
import { useSwal } from '@/hooks/useSwal'
import { usePlan } from '@/hooks/usePlan'
import { globalLocaleStore } from '@/store/localeAtom'
import { sessionStore } from '@/store/commonAtom'
import { SessionContext } from '@/app/SessionProvider'
export default function CanvasLayout() {
const { session } = useContext(SessionContext)
console.log('session >>> ', session)
const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
const sessionState = useRecoilValue(sessionStore)
const globalLocaleState = useRecoilValue(globalLocaleStore)
const { getMessage } = useMessage()
@ -22,8 +19,7 @@ export default function CanvasLayout() {
const { plans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan()
useEffect(() => {
console.log('loadCanvasPlanData 실행, sessionState.userId >>> ', sessionState.userId)
loadCanvasPlanData(sessionState.userId, objectNo)
loadCanvasPlanData(session.userId, objectNo)
}, [])
return (
@ -34,7 +30,7 @@ export default function CanvasLayout() {
<button
key={`plan-${plan.id}`}
className={`canvas-page-box ${plan.isCurrent === true ? 'on' : ''}`}
onClick={() => handleCurrentPlan(sessionState.userId, plan.id)}
onClick={() => handleCurrentPlan(session.userId, plan.id)}
>
<span>{plan.name}</span>
<i
@ -53,7 +49,7 @@ export default function CanvasLayout() {
))}
</div>
{plans.length < 10 && (
<button className="plane-add" onClick={() => handleAddPlan(sessionState.userId, objectNo)}>
<button className="plane-add" onClick={() => handleAddPlan(session.userId, objectNo)}>
<span></span>
</button>
)}

6
src/components/floor-plan/modal/grid/DotLineGrid.jsx
View File

@ -7,7 +7,7 @@ import { useRecoilState, useRecoilValue, useResetRecoilState, useSetRecoilState
import { onlyNumberInputChange } from '@/util/input-utils'
import { fabric } from 'fabric'
import { gridColorState } from '@/store/gridAtom'
import { settingModalGridOptionsState } from '@/store/settingAtom'
import { gridDisplaySelector, settingModalGridOptionsState } from '@/store/settingAtom'
import { useAxios } from '@/hooks/useAxios'
import { useSwal } from '@/hooks/useSwal'
@ -24,6 +24,7 @@ export default function DotLineGrid(props) {
const setSettingModalGridOptions = useSetRecoilState(settingModalGridOptionsState)
const gridColor = useRecoilValue(gridColorState)
const canvas = useRecoilValue(canvasState)
const isGridDisplay = useRecoilValue(gridDisplaySelector)
const [dotLineGridSetting, setDotLineGridSettingState] = useRecoilState(dotLineGridSettingState)
const resetDotLineGridSetting = useResetRecoilState(dotLineGridSettingState)
@ -179,6 +180,7 @@ export default function DotLineGrid(props) {
fill: pattern,
selectable: false,
name: 'dotGrid',
visible: isGridDisplay,
},
)
@ -209,6 +211,7 @@ export default function DotLineGrid(props) {
strokeDashArray: [5, 2],
opacity: 0.3,
direction: 'horizontal',
visible: isGridDisplay,
},
)
canvas.add(horizontalLine)
@ -235,6 +238,7 @@ export default function DotLineGrid(props) {
strokeDashArray: [5, 2],
opacity: 0.3,
direction: 'vertical',
visible: isGridDisplay,
},
)
canvas.add(verticalLine)

6
src/components/floor-plan/modal/setting01/FirstOption.jsx
View File

@ -1,14 +1,14 @@
import { useRecoilState } from 'recoil'
import { settingModalFirstOptionsState, settingModalSecondOptionsState } from '@/store/settingAtom'
import { settingModalSecondOptionsState } from '@/store/settingAtom'
import { useMessage } from '@/hooks/useMessage'
import React, { useEffect, useState } from 'react'
import { useAxios } from '@/hooks/useAxios'
import { useSwal } from '@/hooks/useSwal'
import { adsorptionPointAddModeState } from '@/store/canvasAtom'
import { useFirstOption } from '@/hooks/option/useFirstOption'
export default function FirstOption() {
const [objectNo, setObjectNo] = useState('test123240912001') // 이후 삭제 필요
const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
const { settingModalFirstOptions, setSettingModalFirstOptions } = useFirstOption()
const [settingModalSecondOptions, setSettingModalSecondOptions] = useRecoilState(settingModalSecondOptionsState)
const { option1, option2, dimensionDisplay } = settingModalFirstOptions
const { option3, option4 } = settingModalSecondOptions

2
src/components/main/MainContents.jsx
View File

@ -34,7 +34,6 @@ export default function MainContents({ objectList, businessCharger, businessChar
startRow: 1,
endRow: 1,
}
// const noticeApiUrl = `api/board/list?schNoticeTpCd=QC&schNoticeClsCd=NOTICE&schTitle=&startRow=1&endRow=1`
const noticeApiUrl = `api/board/list?${queryStringFormatter(param)}`
const res = await get({ url: noticeApiUrl })
//console.log('공지res::', res)
@ -57,7 +56,6 @@ export default function MainContents({ objectList, businessCharger, businessChar
startRow: 1,
endRow: 3,
}
// const faqApiUrl = `api/board/list?schNoticeTpCd=QC&schNoticeClsCd=FAQ&schTitle=&startRow=1&endRow=1`
const faqApiUrl = `api/board/list?${queryStringFormatter(param)}`
const res = await get({ url: faqApiUrl })
//console.log('FAQres::', res)

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

@ -245,7 +245,6 @@ export default function Stuff() {
}
async function fetchData() {
// const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(params)}`
const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(params)}`
await get({
url: apiUrl,
@ -294,7 +293,6 @@ export default function Stuff() {
useEffect(() => {
if (stuffSearchParams?.code === 'E') {
//console.log('조회누름::::::::', stuffSearchParams, sessionState)
stuffSearchParams.startRow = 1
stuffSearchParams.endRow = 1 * pageSize
stuffSearchParams.schSortType = defaultSortType

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

@ -102,7 +102,6 @@ export default function StuffDetail() {
// 도도부현API
get({ url: '/api/object/prefecture/list' }).then((res) => {
if (!isEmptyArray(res)) {
// console.log('신규화면 도도부현API 결과:::', res)
setPrefCodeList(res)
}
})
@ -348,9 +347,8 @@ export default function StuffDetail() {
// 발전량시뮬레이션 지역 목록
get({ url: `/api/object/prefecture/${prefValue}/list` }).then((res) => {
if (!isEmptyArray(res)) {
// console.log('발전량 시뮬레이션::::::::', res)
form.setValue('areaId', res[0].areaId)
form.setValue('areaName', res[0].prefName)
// form.setValue('areaId', res[0].areaId)
// form.setValue('areaName', res[0].prefName)
setAreaIdList(res)
}
})
@ -359,7 +357,8 @@ export default function StuffDetail() {
// 발전량 시뮬레이션 변경
const handleAreaIdOnChange = (e) => {
form.setValue('areaId', e.target.value)
form.setValue('areaId', e.areaId)
form.setValue('areaName', e.prefName)
}
//필수값 다 입력했을때
@ -631,13 +630,28 @@ export default function StuffDetail() {
<div className="flx-box">
<div className="select-wrap" style={{ width: '200px' }}>
{prefCodeList?.length > 0 && (
<select className="select-light" name="prefName" {...register('prefId')} disabled>
{prefCodeList.map((row) => (
<option key={row.prefId} value={row.prefId}>
{row.prefName}
</option>
))}
</select>
// <select className="select-light" name="prefName" {...register('prefId')} disabled>
// {prefCodeList.map((row) => (
// <option key={row.prefId} value={row.prefId}>
// {row.prefName}
// </option>
// ))}
// </select>
<Select
id="long-value-select3"
instanceId="long-value-select3"
className="react-select-custom"
classNamePrefix="custom"
placeholder="Select"
options={prefCodeList}
getOptionLabel={(x) => x.prefName}
getOptionValue={(x) => x.prefId}
isSearchable={false}
value={prefCodeList.filter(function (option) {
return option.prefId === prefValue
})}
isDisabled={true}
/>
)}
</div>
<div className="input-wrap mr5" style={{ width: '580px' }}>
@ -652,7 +666,7 @@ export default function StuffDetail() {
</th>
<td>
<div className="select-wrap" style={{ width: '200px' }}>
<select
{/* <select
className="select-light"
name="areaId"
disabled={areaIdList?.length > 0 ? false : true}
@ -666,6 +680,23 @@ export default function StuffDetail() {
)
})}
</select>
*/}
<Select
id="long-value-select4"
instanceId="long-value-select4"
className="react-select-custom"
classNamePrefix="custom"
options={areaIdList}
placeholder="Select"
getOptionLabel={(x) => x.prefName}
getOptionValue={(x) => x.areaId}
isSearchable={false}
onChange={handleAreaIdOnChange}
value={areaIdList.filter(function (option) {
return option.areaId === form.watch('areaId')
})}
isDisabled={areaIdList.length > 0 ? false : true}
/>
</div>
</td>
</tr>
@ -794,9 +825,9 @@ export default function StuffDetail() {
</Button>
)}
<Link href="/management/stuff">
<Button type="button" className="btn-origin grey">
<button type="button" className="btn-origin grey">
NEW화면 물건목록이동
</Button>
</button>
</Link>
</div>
</div>
@ -911,9 +942,9 @@ export default function StuffDetail() {
{objectNo.substring(0, 1) === 'R' ? (
<>
<Link href="/management/stuff">
<Button type="button" className="btn-origin grey mr5">
<button type="button" className="btn-origin grey mr5">
R상세:물건목록
</Button>
</button>
</Link>
<Button type="submit" className="btn-origin navy mr5">
R상세:저장
@ -934,9 +965,9 @@ export default function StuffDetail() {
</Button>
)}
<Link href="/management/stuff">
<Button type="button" className="btn-origin grey">
<button type="button" className="btn-origin grey">
T상세:물건목록
</Button>
</button>
</Link>
</>
)}

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

@ -24,6 +24,13 @@ export default function StuffSearchCondition() {
const ref = useRef()
const { get } = useAxios(globalLocaleState)
const objectNoRef = useRef(null)
const saleStoreNameRef = useRef(null)
const addressRef = useRef(null)
const objectNameRef = useRef(null)
const dispCompanyNameRef = useRef(null)
const receiveUserRef = useRef(null)
//달력 props 관련 날짜 셋팅
const [startDate, setStartDate] = useState(dayjs(new Date()).add(-1, 'year').format('YYYY-MM-DD'))
const [endDate, setEndDate] = useState(dayjs(new Date()).format('YYYY-MM-DD'))
@ -42,13 +49,13 @@ export default function StuffSearchCondition() {
const resetStuffRecoil = useResetRecoilState(stuffSearchState)
const [stuffSearch, setStuffSearch] = useRecoilState(stuffSearchState)
const [objectNo, setObjectNo] = useState('') //물건번호
const [saleStoreName, setSaleStoreName] = useState('') //판매대리점명
const [address, setAddress] = useState('') //물건주소
const [objectName, setobjectName] = useState('') //물건명
const [saleStoreName, setSaleStoreName] = useState('') //판매대리점명
const [receiveUser, setReceiveUser] = useState('') //담당자
const [dispCompanyName, setDispCompanyName] = useState('') //견적처
const [dateType, setDateType] = useState('U') //갱신일(U)/등록일(R)
const [schSelSaleStoreId, setSchSelSaleStoreId] = useState('') //판매대리점 선택
const [receiveUser, setReceiveUser] = useState('') //담당자
const [dateType, setDateType] = useState('U') //갱신일(U)/등록일(R)
const [schSelSaleStoreList, setSchSelSaleStoreList] = useState([]) //판매대리점 자동완성 SELECT
// 조회
@ -58,26 +65,52 @@ export default function StuffSearchCondition() {
return alert(getMessage('stuff.message.periodError'))
}
if (stuffSearch.code === 'S') {
setStuffSearch({
schObjectNo: stuffSearch?.schObjectNo ? stuffSearch.schObjectNo : objectNo,
schAddress: stuffSearch?.schAddress ? stuffSearch.schAddress : address,
schObjectName: stuffSearch?.schObjectName ? stuffSearch.schObjectName : objectName,
schSaleStoreName: stuffSearch?.schSaleStoreName ? stuffSearch.schSaleStoreName : saleStoreName,
schReceiveUser: stuffSearch?.schReceiveUser ? stuffSearch.schReceiveUser : receiveUser,
schDispCompanyName: stuffSearch?.schDispCompanyName ? stuffSearch.schDispCompanyName : dispCompanyName,
schObjectNo: objectNo ? objectNo : stuffSearch?.schObjectNo,
schSaleStoreName: stuffSearch?.schSaleStoreName ? stuffSearch?.schSaleStoreName : saleStoreName,
schAddress: address ? address : stuffSearch?.schAddress,
schObjectName: objectName ? objectName : stuffSearch?.schObjectName,
schDispCompanyName: dispCompanyName ? dispCompanyName : stuffSearch?.schDispCompanyName,
schSelSaleStoreId: stuffSearch?.schSelSaleStoreId ? stuffSearch.schSelSaleStoreId : schSelSaleStoreId,
schReceiveUser: receiveUser ? receiveUser : stuffSearch?.schReceiveUser,
schDateType: stuffSearch?.schDateType ? stuffSearch.schDateType : dateType,
schFromDt: dayjs(startDate).format('YYYY-MM-DD'),
schToDt: dayjs(endDate).format('YYYY-MM-DD'),
code: 'E',
schSelSaleStoreId: stuffSearch?.schSelSaleStoreId ? stuffSearch.schSelSaleStoreId : schSelSaleStoreId,
startRow: stuffSearch?.startRow ? stuffSearch.startRow : 1,
endRow: stuffSearch?.endRow ? stuffSearch.endRow : 100,
schSortType: stuffSearch?.schSortType ? stuffSearch.schSortType : 'R',
})
} else {
setStuffSearch({
schObjectNo: objectNo ? objectNo : '',
schSaleStoreName: saleStoreName ? saleStoreName : '',
schAddress: address ? address : '',
schObjectName: objectName ? objectName : '',
schDispCompanyName: dispCompanyName ? dispCompanyName : '',
schSelSaleStoreId: schSelSaleStoreId ? schSelSaleStoreId : '',
schReceiveUser: receiveUser ? receiveUser : '',
schDateType: dateType,
schFromDt: dayjs(startDate).format('YYYY-MM-DD'),
schToDt: dayjs(endDate).format('YYYY-MM-DD'),
code: 'E',
startRow: 1,
endRow: 100,
schSortType: stuffSearch?.schSortType ? stuffSearch.schSortType : 'R',
})
}
}
//초기화
const resetRecoil = () => {
objectNoRef.current.value = ''
saleStoreNameRef.current.value = ''
addressRef.current.value = ''
objectNameRef.current.value = ''
dispCompanyNameRef.current.value = ''
receiveUserRef.current.value = ''
setObjectNo('')
setAddress('')
setobjectName('')
@ -143,6 +176,13 @@ export default function StuffSearchCondition() {
}
}, [globalLocaleState])
// 엔터 이벤트
const handleByOnKeyUp = (e) => {
if (e.key === 'Enter') {
onSubmit()
}
}
return (
<>
{/* 퍼블적용시작 */}
@ -182,12 +222,13 @@ export default function StuffSearchCondition() {
<div className="input-wrap">
<input
type="text"
ref={objectNoRef}
className="input-light"
value={stuffSearch?.code === 'E' || stuffSearch?.code === 'M' ? stuffSearch.schObjectNo : objectNo}
defaultValue={stuffSearch.code === 'E' || stuffSearch.code === 'M' ? stuffSearch?.schObjectNo : objectNo}
onChange={(e) => {
setObjectNo(e.target.value)
setStuffSearch({ ...stuffSearch, code: 'S', schObjectNo: e.target.value })
setObjectNo(objectNoRef.current.value)
}}
onKeyUp={handleByOnKeyUp}
/>
</div>
</td>
@ -196,11 +237,11 @@ export default function StuffSearchCondition() {
<div className="input-wrap">
<input
type="text"
ref={saleStoreNameRef}
className="input-light"
value={stuffSearch?.schSaleStoreName ? stuffSearch.schSaleStoreName : saleStoreName}
defaultValue={stuffSearch.code === 'E' ? stuffSearch?.schSaleStoreName : saleStoreName}
onChange={(e) => {
setSaleStoreName(e.target.value)
setStuffSearch({ ...stuffSearch, code: 'S', schSaleStoreName: e.target.value })
setSaleStoreName(saleStoreNameRef.current.value)
}}
/>
</div>
@ -210,11 +251,11 @@ export default function StuffSearchCondition() {
<div className="input-wrap">
<input
type="text"
ref={addressRef}
className="input-light"
value={stuffSearch?.schAddress ? stuffSearch.schAddress : address}
defaultValue={stuffSearch.code === 'E' ? stuffSearch?.schAddress : address}
onChange={(e) => {
setAddress(e.target.value)
setStuffSearch({ ...stuffSearch, code: 'S', schAddress: e.target.value })
setAddress(addressRef.current.value)
}}
/>
</div>
@ -226,11 +267,11 @@ export default function StuffSearchCondition() {
<div className="input-wrap">
<input
type="text"
ref={objectNameRef}
className="input-light"
value={stuffSearch?.schObjectName ? stuffSearch.schObjectName : objectName}
defaultValue={stuffSearch.code === 'E' ? stuffSearch?.schObjectName : objectName}
onChange={(e) => {
setobjectName(e.target.value)
setStuffSearch({ ...stuffSearch, code: 'S', schObjectName: e.target.value })
setobjectName(objectNameRef.current.value)
}}
/>
</div>
@ -240,11 +281,11 @@ export default function StuffSearchCondition() {
<div className="input-wrap">
<input
type="text"
ref={dispCompanyNameRef}
className="input-light"
value={stuffSearch?.schDispCompanyName ? stuffSearch.schDispCompanyName : dispCompanyName}
defaultValue={stuffSearch.code === 'E' ? stuffSearch?.schDispCompanyName : dispCompanyName}
onChange={(e) => {
setDispCompanyName(e.target.value)
setStuffSearch({ ...stuffSearch, code: 'S', schDispCompanyName: e.target.value })
setDispCompanyName(dispCompanyNameRef.current.value)
}}
/>
</div>
@ -293,10 +334,10 @@ export default function StuffSearchCondition() {
<input
type="text"
className="input-light"
value={stuffSearch?.schReceiveUser ? stuffSearch.schReceiveUser : receiveUser}
ref={receiveUserRef}
defaultValue={stuffSearch.code === 'E' ? stuffSearch?.schReceiveUser : receiveUser}
onChange={(e) => {
setReceiveUser(e.target.value)
setStuffSearch({ ...stuffSearch, code: 'S', schReceiveUser: e.target.value })
setReceiveUser(receiveUserRef.current.value)
}}
/>
</div>

23
src/hooks/option/useFirstOption.js Normal file
View File

@ -0,0 +1,23 @@
import { useRecoilState, useRecoilValue } from 'recoil'
import { canvasState } from '@/store/canvasAtom'
import { useEffect } from 'react'
import { settingModalFirstOptionsState } from '@/store/settingAtom'
export function useFirstOption() {
const canvas = useRecoilValue(canvasState)
const [settingModalFirstOptions, setSettingModalFirstOptions] = useRecoilState(settingModalFirstOptionsState)
useEffect(() => {
const option1 = settingModalFirstOptions.option1
canvas
.getObjects()
.filter((obj) => obj.name === '')
.forEach((obj) => {
obj.set({ visible: !obj.visible })
})
}, [settingModalFirstOptions])
return { settingModalFirstOptions, setSettingModalFirstOptions }
}

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

@ -30,6 +30,7 @@ import {
import { calculateAngle } from '@/util/qpolygon-utils'
import { fabric } from 'fabric'
import { QLine } from '@/components/fabric/QLine'
import { outlineDisplaySelector } from '@/store/settingAtom'
//외벽선 그리기
export function useOuterLineWall(setShowOutlineModal) {
@ -53,6 +54,8 @@ export function useOuterLineWall(setShowOutlineModal) {
const adsorptionRange = useRecoilValue(adsorptionRangeState)
const interval = useRecoilValue(dotLineIntervalSelector) // 가로 세로 간격
const isOutlineDisplay = useRecoilValue(outlineDisplaySelector)
const length1Ref = useRef(null)
const length2Ref = useRef(null)
const angle1Ref = useRef(null)
@ -253,6 +256,7 @@ export function useOuterLineWall(setShowOutlineModal) {
strokeWidth: 1,
selectable: false,
name: 'helpGuideLine',
visible: isOutlineDisplay,
})
} else {
const guideLine1 = addLine([lastPoint.x, lastPoint.y, lastPoint.x, firstPoint.y], {
@ -260,6 +264,7 @@ export function useOuterLineWall(setShowOutlineModal) {
strokeWidth: 1,
strokeDashArray: [1, 1, 1],
name: 'helpGuideLine',
visible: isOutlineDisplay,
})
const guideLine2 = addLine([guideLine1.x2, guideLine1.y2, firstPoint.x, firstPoint.y], {
@ -267,6 +272,7 @@ export function useOuterLineWall(setShowOutlineModal) {
strokeWidth: 1,
strokeDashArray: [1, 1, 1],
name: 'helpGuideLine',
visible: isOutlineDisplay,
})
}
}
@ -283,6 +289,7 @@ export function useOuterLineWall(setShowOutlineModal) {
y1: point1.y,
x2: point2.x,
y2: point2.y,
visible: isOutlineDisplay,
})
}

4
src/hooks/useAdsorptionPoint.js
View File

@ -2,13 +2,14 @@ import { useRecoilState, useRecoilValue } from 'recoil'
import { adsorptionPointAddModeState, adsorptionPointModeState, adsorptionRangeState, canvasState } from '@/store/canvasAtom'
import { fabric } from 'fabric'
import { useMouse } from '@/hooks/useMouse'
import { gridDisplaySelector } from '@/store/settingAtom'
export function useAdsorptionPoint() {
const canvas = useRecoilValue(canvasState)
const [adsorptionPointAddMode, setAdsorptionPointAddMode] = useRecoilState(adsorptionPointAddModeState)
const [adsorptionPointMode, setAdsorptionPointMode] = useRecoilState(adsorptionPointModeState)
const [adsorptionRange, setAdsorptionRange] = useRecoilState(adsorptionRangeState)
const isGridDisplay = useRecoilValue(gridDisplaySelector)
const { getIntersectMousePoint } = useMouse()
const getAdsorptionPoints = () => {
@ -28,6 +29,7 @@ export function useAdsorptionPoint() {
y: pointer.y,
selectable: true,
name: 'adsorptionPoint',
visible: isGridDisplay,
})
canvas.add(adsorptionPoint)

1
src/hooks/useEvent.js
View File

@ -6,6 +6,7 @@ import { calculateDistance, calculateIntersection, distanceBetweenPoints, findCl
import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
import { useDotLineGrid } from '@/hooks/useDotLineGrid'
import { useTempGrid } from '@/hooks/useTempGrid'
import { gridDisplaySelector } from '@/store/settingAtom'
export function useEvent() {
const canvas = useRecoilValue(canvasState)

11
src/hooks/useMessage.js
View File

@ -1,14 +1,17 @@
import { useEffect } from 'react'
import { useRecoilValue } from 'recoil'
import { appMessageStore } from '@/store/localeAtom'
import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
// import KO from '@/locales/ko.json'
// import JA from '@/locales/ja.json'
import KO from '@/locales/ko.json'
import JA from '@/locales/ja.json'
const SESSION_STORAGE_MESSAGE_KEY = 'QCAST_MESSAGE_STORAGE'
export const useMessage = () => {
// const globalLocale = useRecoilValue(globalLocaleState)
const appMessageState = useRecoilValue(appMessageStore)
// const appMessageState = useRecoilValue(appMessageStore)
const globalLocale = useRecoilValue(globalLocaleStore)
const appMessageState = globalLocale === 'ko' ? KO : JA
const getMessage = (key, args = []) => {
// if (sessionStorage.getItem(SESSION_STORAGE_MESSAGE_KEY) === null) {

6
src/hooks/usePlan.js
View File

@ -1,5 +1,6 @@
import { useEffect, useState } from 'react'
import { useRecoilState } from 'recoil'
import { v4 as uuidv4 } from 'uuid'
import { canvasState, currentCanvasPlanState, initCanvasPlansState, plansState } from '@/store/canvasAtom'
import { useAxios } from '@/hooks/useAxios'
import { useMessage } from '@/hooks/useMessage'
@ -269,15 +270,16 @@ export function usePlan() {
: addPlan(userId, objectNo)
}
const addPlan = (userId, objectNo, canvasStatus = '') => {
const id = uuidv4()
const newPlan = {
id: planNum,
id: id,
name: `Plan ${planNum + 1}`,
objectNo: objectNo,
userId: userId,
canvasStatus: canvasStatus,
}
setPlans([...plans, newPlan])
handleCurrentPlan(userId, planNum)
handleCurrentPlan(userId, id)
setPlanNum(planNum + 1)
}

4
src/hooks/useTempGrid.js
View File

@ -1,11 +1,13 @@
import { canvasState, tempGridModeState } from '@/store/canvasAtom'
import { useRecoilState, useRecoilValue } from 'recoil'
import { gridColorState } from '@/store/gridAtom'
import { gridDisplaySelector } from '@/store/settingAtom'
export function useTempGrid() {
const canvas = useRecoilValue(canvasState)
const gridColor = useRecoilValue(gridColorState)
const [tempGridMode, setTempGridMode] = useRecoilState(tempGridModeState)
const isGridDisplay = useRecoilValue(gridDisplaySelector)
const tempGridModeStateLeftClickEvent = (e) => {
//임의 그리드 모드일 경우
let pointer = canvas.getPointer(e.e)
@ -22,6 +24,7 @@ export function useTempGrid() {
strokeDashArray: [5, 2],
opacity: 0.3,
direction: 'vertical',
visible: isGridDisplay,
name: 'tempGrid',
})
@ -48,6 +51,7 @@ export function useTempGrid() {
strokeDashArray: [5, 2],
opacity: 0.3,
name: 'tempGrid',
visible: isGridDisplay,
direction: 'horizontal',
})

18
src/locales/client.js
View File

@ -1,18 +0,0 @@
'use client'
import { createI18nClient } from 'next-international/client'
export const { useI18n, useScopedI18n, I18nProviderClient, useChangeLocale, defineLocale, useCurrentLocale } = createI18nClient(
{
ko: () => import('./ko'),
ja: () => import('./ja'),
},
{
// Uncomment to set base path
// basePath: '/base',
// Uncomment to use custom segment name
// segmentName: 'locale',
// Uncomment to set fallback locale
// fallbackLocale: en,
},
)

90
src/locales/ja.js
View File

@ -1,90 +0,0 @@
console.log('Loaded JA')
export default {
hello: 'こんにちは',
welcome: 'こんにちは {name}!',
locale: '現在のロケールは {locale} です。',
common: {
require: '필수',
},
site: {
name: 'Q.CAST III',
sub_name: '태양광 발전 시스템 도면관리 사이트',
},
login: {
login: 'Login',
init_password: {
btn: '비밀번호 초기화',
title: '비밀번호 초기화',
sub_title: '비밀번호를 초기화할 아이디와 이메일 주소를 입력해 주세요.',
},
},
join: {
title: 'Q.CAST3 로그인ID 발행 신청',
sub1: {
title: '판매대리점 정보',
comment: '※ 등록되는 리셀러의 회사 이름을 입력하십시오. (2차점은 「○○판매주식회사(2차점：××설비주식회사)」로 기입해 주세요.)',
storeQcastNm: '판매대리점명',
storeQcastNm_placeholder: '株式会社エネルギア・ソリューション・アンド・サービス（2次店：山口住機販売有限会社）',
storeQcastNmKana: '판매대리점명 후리가나',
storeQcastNmKana_placeholder: 'カブシキガイシャエネルギア・ソリューション・アン',
postCd: '우편번호',
postCd_placeholder: '숫자 7자리',
addr: '주소',
addr_placeholder: '전각50자이내',
telNo: '전화번호',
telNo_placeholder: '00-0000-0000',
fax: 'FAX 번호',
fax_placeholder: '00-0000-0000',
},
sub2: {
title: '담당자 정보',
userNm: '담당자명',
userNmKana: '담당자명 후리가나',
userId: '신청 ID',
email: '이메일 주소',
telNo: '전화번호',
telNo_placeholder: '00-0000-0000',
fax: 'FAX 번호',
fax_placeholder: '00-0000-0000',
category: '부서명',
},
sub3: {
title: '견적서 제출용 회사정보',
qtCompNm: '회사명',
qtPostCd: '우편번호',
qtPostCd_placeholder: '숫자 7자리',
qtAddr: '주소',
qtAddr_placeholder: '전각50자이내',
qtEmail: '이메일 주소',
qtTelNo: '전화번호',
qtTelNo_placeholder: '00-0000-0000',
qtFax: 'FAX 번호',
qtFax_placeholder: '00-0000-0000',
},
btn: {
approval_request: 'ID 승인요청',
},
complete: {
title: 'Q.CAST3 로그인ID 발행신청 완료',
contents: '※ 신청한 ID가 승인되면, 담당자 정보에 입력한 이메일 주소로 로그인 관련 안내 메일이 전송됩니다.',
email_comment: '담당자 이메일 주소',
email: 'test@naver.com',
},
},
stuff: {
gridHeader: {
lastEditDatetime: '갱신일시',
objectNo: '물건번호',
planTotCnt: '플랜 수',
objectName: '물건명',
saleStoreId: '대리점ID',
saleStoreName: '대리점명',
address: '물건주소',
dispCompanyName: '견적처',
receiveUser: '담당자',
specDate: '사양확인',
createDatetime: '등록일',
},
},
}

1
src/locales/ja.json
View File

@ -385,6 +385,7 @@
"myinfo.message.save": "パスワードが変更されました。",
"myinfo.message.password.error": "パスワードが間違っています。",
"login": "ログイン",
"login.auto.page.text": "自動ログイン中です。",
"login.id.save": "ID保存",
"login.id.placeholder": "IDを入力してください。",
"login.password.placeholder": "パスワードを入力してください。",

91
src/locales/ko.js
View File

@ -1,91 +0,0 @@
console.log('Loaded KO')
export default {
hello: '안녕',
welcome: '안녕 {name}!',
locale: '현재 로케일은 {locale}입니다.',
common: {
require: '필수',
},
site: {
name: 'Q.CAST III',
sub_name: '태양광 발전 시스템 도면관리 사이트',
},
login: {
login: '로그인',
init_password: {
btn: '비밀번호 초기화',
title: '비밀번호 초기화',
sub_title: '비밀번호를 초기화할 아이디와 이메일 주소를 입력해 주세요.',
complete_message: '비밀번호가 초기화 되었습니다. 초기화된 비밀번호는 아이디와 같습니다.',
},
},
join: {
title: 'Q.CAST3 로그인ID 발행 신청',
sub1: {
title: '판매대리점 정보',
comment: '※ 등록되는 리셀러의 회사 이름을 입력하십시오. (2차점은 「○○판매주식회사(2차점：××설비주식회사)」로 기입해 주세요.)',
storeQcastNm: '판매대리점명',
storeQcastNm_placeholder: '주식회사 에너지 기어 솔루션 앤 서비스 (2차점: 야마구치 주기 판매 유한회사)',
storeQcastNmKana: '판매대리점명 후리가나',
storeQcastNmKana_placeholder: '주식회사 에너지 기어 솔루션',
postCd: '우편번호',
postCd_placeholder: '숫자 7자리',
addr: '주소',
addr_placeholder: '전각50자이내',
telNo: '전화번호',
telNo_placeholder: '00-0000-0000',
fax: 'FAX 번호',
fax_placeholder: '00-0000-0000',
},
sub2: {
title: '담당자 정보',
userNm: '담당자명',
userNmKana: '담당자명 후리가나',
userId: '신청 ID',
email: '이메일 주소',
telNo: '전화번호',
telNo_placeholder: '00-0000-0000',
fax: 'FAX 번호',
fax_placeholder: '00-0000-0000',
category: '부서명',
},
sub3: {
title: '견적서 제출용 회사정보',
qtCompNm: '회사명',
qtPostCd: '우편번호',
qtPostCd_placeholder: '숫자 7자리',
qtAddr: '주소',
qtAddr_placeholder: '전각50자이내',
qtEmail: '이메일 주소',
qtTelNo: '전화번호',
qtTelNo_placeholder: '00-0000-0000',
qtFax: 'FAX 번호',
qtFax_placeholder: '00-0000-0000',
},
btn: {
approval_request: 'ID 승인요청',
},
complete: {
title: 'Q.CAST3 로그인ID 발행신청 완료',
contents: '※ 신청한 ID가 승인되면, 담당자 정보에 입력한 이메일 주소로 로그인 관련 안내 메일이 전송됩니다.',
email_comment: '담당자 이메일 주소',
email: 'test@naver.com',
},
},
stuff: {
gridHeader: {
lastEditDatetime: '갱신일시',
objectNo: '물건번호',
planTotCnt: '플랜 수',
objectName: '물건명',
saleStoreId: '대리점ID',
saleStoreName: '대리점명',
address: '물건주소',
dispCompanyName: '견적처',
receiveUser: '담당자',
specDate: '사양확인',
createDatetime: '등록일',
},
},
}

1
src/locales/ko.json
View File

@ -390,6 +390,7 @@
"myinfo.message.save": "비밀번호가 변경되었습니다.",
"myinfo.message.password.error": "비밀번호가 틀렸습니다.",
"login": "로그인",
"login.auto.page.text": "자동로그인 중 입니다.",
"login.id.save": "ID Save",
"login.id.placeholder": "아이디를 입력해주세요.",
"login.password.placeholder": "비밀번호를 입력해주세요.",

14
src/locales/server.js
View File

@ -1,14 +0,0 @@
import { createI18nServer } from 'next-international/server'
export const { getI18n, getScopedI18n, getCurrentLocale, getStaticParams } = createI18nServer(
{
ko: () => import('./ko'),
ja: () => import('./ja'),
},
{
// Uncomment to use custom segment name
// segmentName: 'locale',
// Uncomment to set fallback locale
// fallbackLocale: en,
},
)

103
src/store/settingAtom.js
View File

@ -15,12 +15,12 @@ export const settingModalFirstOptionsState = atom({
{ id: 9, column: 'totalDisplay', name: 'modal.canvas.setting.first.option.total', selected: false },
],
dimensionDisplay: [
{ id: 1, column: 'corridorDimension', name: 'modal.canvas.setting.first.option.corridor.dimension', selected: false },
{ id: 1, column: 'corridorDimension', name: 'modal.canvas.setting.first.option.corridor.dimension', selected: true },
{ id: 2, column: 'realDimension', name: 'modal.canvas.setting.first.option.real.dimension', selected: false },
{ id: 3, column: 'noneDimension', name: 'modal.canvas.setting.first.option.none.dimension', selected: false },
],
option2: [
{ id: 1, column: 'onlyBorder', name: 'modal.canvas.setting.first.option.border', selected: false },
{ id: 1, column: 'onlyBorder', name: 'modal.canvas.setting.first.option.border', selected: true },
{ id: 2, column: 'lineHatch', name: 'modal.canvas.setting.first.option.line', selected: false },
{ id: 3, column: 'allPainted', name: 'modal.canvas.setting.first.option.all', selected: false },
],
@ -57,3 +57,102 @@ export const settingModalGridOptionsState = atom({
],
dangerouslyAllowMutability: true,
})
// 디스플레이 설정 - 할당 표시
export const allocDisplaySelector = selector({
key: 'allocDisplaySelector',
get: ({ get }) => {
const settingModalFirstOptions = get(settingModalFirstOptionsState)
return settingModalFirstOptions.option1.find((option) => option.column === 'allocDisplay').selected
},
})
// 디스플레이 설정 - 외벽선 표시
export const outlineDisplaySelector = selector({
key: 'outlineDisplaySelector',
get: ({ get }) => {
const settingModalFirstOptions = get(settingModalFirstOptionsState)
return settingModalFirstOptions.option1.find((option) => option.column === 'outlineDisplay').selected
},
})
// 디스플레이 설정 - 그리드 표시
export const gridDisplaySelector = selector({
key: 'gridDisplaySelector',
get: ({ get }) => {
const settingModalFirstOptions = get(settingModalFirstOptionsState)
return settingModalFirstOptions.option1.find((option) => option.column === 'gridDisplay').selected
},
})
// 디스플레이 설정 - 지붕선 표시
export const roofLineDisplaySelector = selector({
key: 'lineDisplaySelector',
get: ({ get }) => {
const settingModalFirstOptions = get(settingModalFirstOptionsState)
return settingModalFirstOptions.option1.find((option) => option.column === 'lineDisplay').selected
},
})
// 디스플레이 설정 - 문자 표시
export const wordDisplaySelector = selector({
key: 'wordDisplaySelector',
get: ({ get }) => {
const settingModalFirstOptions = get(settingModalFirstOptionsState)
return settingModalFirstOptions.option1.find((option) => option.column === 'wordDisplay').selected
},
})
// 디스플레이 설정 - 회로번호 표시
export const circuitNumDisplaySelector = selector({
key: 'circuitNumDisplaySelector',
get: ({ get }) => {
const settingModalFirstOptions = get(settingModalFirstOptionsState)
return settingModalFirstOptions.option1.find((option) => option.column === 'circuitNumDisplay').selected
},
})
// 디스플레이 설정 - 흐름 방향 표시
export const flowDisplaySelector = selector({
key: 'flowDisplaySelector',
get: ({ get }) => {
const settingModalFirstOptions = get(settingModalFirstOptionsState)
return settingModalFirstOptions.option1.find((option) => option.column === 'flowDisplay').selected
},
})
// 디스플레이 설정 - 가대 표시
export const trestleDisplaySelector = selector({
key: 'trestleDisplaySelector',
get: ({ get }) => {
const settingModalFirstOptions = get(settingModalFirstOptionsState)
return settingModalFirstOptions.option1.find((option) => option.column === 'trestleDisplay').selected
},
})
// 디스플레이 설정 - 집계표 표시
export const totalDisplaySelector = selector({
key: 'totalDisplaySelector',
get: ({ get }) => {
const settingModalFirstOptions = get(settingModalFirstOptionsState)
return settingModalFirstOptions.option1.find((option) => option.column === 'totalDisplay').selected
},
})
// 디스플레이 설정 - 치수 표시
export const corridorDimensionSelector = selector({
key: 'corridorDimensionSelector',
get: ({ get }) => {
const settingModalFirstOptions = get(settingModalFirstOptionsState)
return settingModalFirstOptions.dimensionDisplay.find((option) => option.selected)
},
})
// 디스플레이 설정 - 화면 표시
export const realDimensionSelector = selector({
key: 'realDimensionSelector',
get: ({ get }) => {
const settingModalFirstOptions = get(settingModalFirstOptionsState)
return settingModalFirstOptions.dimensionDisplay.find((option) => option.selected)
},
})

96
src/styles/_contents.scss
View File

@ -1,29 +1,32 @@
// CanvasPage
.canvas-wrap{
height: calc(100vh - 47px);
display: flex;
flex-direction: column;
.canvas-content{
flex: 1 1 auto;
.canvas-layout{
height: 100%;
}
}
&.sub-wrap{
overflow: hidden;
.canvas-content{
height: calc(100% - 47px);
}
}
}
// .canvas-wrap{
// height: calc(100vh - 47px);
// display: flex;
// flex-direction: column;
// .canvas-content{
// flex: 1 1 auto;
// .canvas-layout{
// height: 100%;
// }
// }
// &.sub-wrap{
// overflow: hidden;
// .canvas-content{
// height: calc(100% - 47px);
// }
// }
// }
// CanvasMenu
.canvas-menu-wrap{
position: relative;
position: fixed;
top: 46px;
left: 0;
display: block;
width: 100%;
padding-bottom: 0;
background-color: #383838;
transition: padding .17s ease-in-out;
z-index: 999;
.canvas-menu-inner{
position: relative;
display: flex;
@ -302,12 +305,34 @@
}
// canvas-layout
.canvas-content{
padding-top: 46.8px;
transition: all .17s ease-in-out;
.canvas-frame{
height: 86.3vh;
}
&.active{
padding-top: calc(46.8px + 50px);
.canvas-frame{
height: 81vh;
}
}
}
.canvas-layout{
padding-top: 37px;
.canvas-page-list{
position: fixed;
top: 92.8px;
left: 0;
display: flex;
background-color: #1C1C1C;
border-top: 1px solid #000;
width: 100%;
transition: all .17s ease-in-out;
z-index: 999;
&.active{
top: calc(92.8px + 50px);
}
.canvas-plane-wrap{
display: flex;
align-items: center;
@ -383,9 +408,24 @@
.canvas-frame{
position: relative;
height: calc(100% - 36.5px);
background-color: #fff;
// height: calc(100% - 36.5px);
background-color: #F4F4F7;
overflow: auto;
transition: all .17s ease-in-out;
// &::-webkit-scrollbar {
// width: 10px;
// height: 10px;
// background-color: #fff;
// }
// &::-webkit-scrollbar-thumb {
// background-color: #C1CCD7;
// border-radius: 30px;
// }
// &::-webkit-scrollbar-track {
// background-color: #fff;
// }
canvas{
background-color: #fff;
position: absolute;
top: 0;
left: 0;
@ -514,8 +554,6 @@
&.estimate{
display: flex;
flex-direction: column;
height: calc(100% - 36.5px);
overflow-y: auto;
padding-top: 0;
.sub-content-inner{
flex: 1;
@ -1201,3 +1239,17 @@
}
}
}
.file-down-nodata{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 148px;
padding: 24px;
border-radius: 4px;
border: 1px solid #E5E5E5;
font-size: 16px;
font-weight: 500;
color: #344356;
}

6
src/styles/_main.scss
View File

@ -112,8 +112,8 @@
border-radius: 6px;
background: #FFF;
box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
&.item01{flex: 1; max-height: 400px;}
&.item02{flex: none; width: 451px; max-height: 400px;}
&.item01{flex: 1; height: 400px;}
&.item02{flex: none; width: 451px; height: 400px;}
&.item03{flex: 1;}
&.item04{flex: none; width: 351px;}
&.item05{flex: none; width: 451px;}
@ -566,7 +566,6 @@
transition: background .05s ease-in-out;
}
}
}
input[type=checkbox]:checked + label::before{
border-color: #A8B6C7;
background-color: #A8B6C7;
@ -579,6 +578,7 @@
left: 1px;
}
}
}
// 회원가입
.center-page-wrap{

421
src/styles/_modal.scss
View File

@ -5,24 +5,12 @@ $pop-normal-size: 12px;
$alert-color: #101010;
@keyframes mountpop{
from {
opacity: 0;
scale: 0.95;
}
to {
opacity: 1;
scale: 1;
}
from{opacity: 0; scale: 0.95;}
to{opacity: 1; scale: 1;}
}
@keyframes unmountpop{
from {
opacity: 1;
scale: 1;
}
to {
opacity: 0;
scale: 0.95;
}
from{opacity: 1; scale: 1;}
to{opacity: 0; scale: 0.95;}
}
.normal-font{
@ -38,6 +26,8 @@ $alert-color: #101010;
.modal-pop-wrap{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: -webkit-fit-content;
height: -moz-fit-content;
@ -89,10 +79,10 @@ $alert-color: #101010;
width: 800px;
}
&.mount{
animation: mountpop 0.17s ease-in-out forwards;
animation: mountpop .17s ease-in-out forwards;
}
&.unmount{
animation: unmountpop 0.17s ease-in-out forwards;
animation: unmountpop .17s ease-in-out forwards;
}
&.alert{
position: absolute;
@ -197,7 +187,7 @@ $alert-color: #101010;
}
}
.outer-line-wrap{
border-top: 1px solid #3c3c3c;
border-top: 1px solid #3C3C3C;
margin-top: 10px;
padding-top: 15px;
margin-bottom: 15px;
@ -219,7 +209,7 @@ $alert-color: #101010;
.adsorption-point{
display: flex;
align-items: center;
background-color: #3a3a3a;
background-color: #3A3A3A;
border-radius: 3px;
padding-left: 11px;
overflow: hidden;
@ -240,7 +230,7 @@ $alert-color: #101010;
&.act{
i{
color: $pop-color;
background-color: #1083e3;
background-color: #1083E3;
}
}
}
@ -260,7 +250,7 @@ $alert-color: #101010;
display: flex;
align-items: center;
background-color: transparent;
border: 1px solid #3d3d3d;
border: 1px solid #3D3D3D;
border-radius: 2px;
padding: 15px 10px;
gap: 20px;
@ -287,9 +277,7 @@ $alert-color: #101010;
}
}
.select-form{
.sort-select {
width: 100%;
}
.sort-select{width: 100%;}
}
.grid-select{
flex: 1;
@ -334,6 +322,7 @@ $alert-color: #101010;
color: $pop-color;
font-weight: $pop-normal-weight;
padding-bottom: 15px;
}
.grid-direction{
display: flex;
@ -350,17 +339,11 @@ $alert-color: #101010;
background-position: center;
background-size: 16px 15px;
border-radius: 50%;
transition: all 0.15s ease-in-out;
transition: all .15s ease-in-out;
opacity: 0.6;
&.down {
transform: rotate(180deg);
}
&.left {
transform: rotate(-90deg);
}
&.right {
transform: rotate(90deg);
}
&.down{transform: rotate(180deg);}
&.left{transform: rotate(-90deg);}
&.right{transform: rotate(90deg);}
&:hover,
&.act{
opacity: 1;
@ -436,11 +419,10 @@ $alert-color: #101010;
}
&.light{
padding: 0;
th,
td {
th,td{
color: $alert-color;
border-bottom: none;
border-top: 1px solid #efefef;
border-top: 1px solid #EFEFEF;
}
th{
padding: 14px 0;
@ -564,7 +546,7 @@ $alert-color: #101010;
align-items: center;
justify-content: center;
width: 50%;
background-color: #3d3d3d;
background-color: #3D3D3D;
border-radius: 2px ;
}
}
@ -572,7 +554,7 @@ $alert-color: #101010;
// 외벽선 속성 설정
.properties-guide{
font-size: $pop-normal-size;
color: #aaa;
color: #AAA;
font-weight: $pop-normal-weight;
margin-bottom: 14px;
}
@ -601,17 +583,17 @@ $alert-color: #101010;
color: #fff;
font-weight: 700;
border-radius: 2px;
transition: all 0.15s ease-in-out;
transition: all .15s ease-in-out;
&.green{
background-color: #305941;
border: 1px solid #45cd7d;
border: 1px solid #45CD7D;
&:hover{
background-color: #3a6b4e;
}
}
&.blue{
background-color: #2e5360;
border: 1px solid #3fbae6;
background-color: #2E5360;
border: 1px solid #3FBAE6;
&:hover{
background-color: #365f6e;
}
@ -633,8 +615,8 @@ $alert-color: #101010;
justify-content: center;
width: 100%;
padding: 13px;
background-color: #3d3d3d;
transition: background 0.15s ease-in-out;
background-color: #3D3D3D;
transition: background .15s ease-in-out;
img{
max-width: 100%;
}
@ -645,17 +627,13 @@ $alert-color: #101010;
color: $pop-color;
margin-top: 10px;
text-align: center;
transition: color 0.15s ease-in-out;
transition: color .15s ease-in-out;
}
.shape-menu-box{
&.act,
&:hover{
.shape-box {
background-color: #008bff;
}
.shape-title {
color: #008bff;
}
.shape-box{background-color: #008BFF;}
.shape-title{color: #008BFF;}
}
}
}
@ -670,7 +648,7 @@ $alert-color: #101010;
}
.discrimination-box{
padding: 16px 12px;
border: 1px solid #3d3d3d;
border: 1px solid #3D3D3D;
border-radius: 2px;
}
@ -703,12 +681,12 @@ $alert-color: #101010;
align-items: center;
justify-content: center;
padding: 5px;
background-color: #3d3d3d;
border: 1px solid #3d3d3d;
background-color: #3D3D3D;
border: 1px solid #3D3D3D;
border-radius: 2px;
cursor: pointer;
&.act{
border: 1px solid #ed0004;
border: 1px solid #ED0004;
}
}
&:last-child{
@ -807,7 +785,7 @@ $alert-color: #101010;
border: 1px solid #646464;
border-radius: 2px;
padding: 0 10px;
transition: all 0.15s ease-in-out;
transition: all .15s ease-in-out;
i{
height: 15px;
display: block;
@ -815,7 +793,7 @@ $alert-color: #101010;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: all 0.15s ease-in-out;
transition: all .15s ease-in-out;
&.allocation01{
background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
width: 15px;
@ -857,9 +835,9 @@ $alert-color: #101010;
margin-bottom: 10px;
.shape-menu-box{
border-radius: 2px;
background-color: #3d3d3d;
background-color: #3D3D3D;
padding: 8px;
transition: all 0.15s ease-in-out;
transition: all .15s ease-in-out;
.shape-box{
display: flex;
justify-content: center;
@ -872,7 +850,7 @@ $alert-color: #101010;
}
&.act,
&:hover{
background-color: #008bff;
background-color: #008BFF;
}
}
}
@ -883,32 +861,23 @@ $alert-color: #101010;
justify-content: center;
gap: 5px;
padding: 5px;
background-color: #3d3d3d;
background-color: #3D3D3D;
margin-bottom: 24px;
.library-btn{
width: 30px;
height: 30px;
border: 1px solid #6c6c6c;
border: 1px solid #6C6C6C;
border-radius: 2px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
transition: all 0.15s ease-in-out;
&.ico01 {
background-image: url(../../public/static/images/canvas/shape_labrary01.svg);
background-size: 14px 14px;
}
&.ico02 {
background-image: url(../../public/static/images/canvas/shape_labrary02.svg);
background-size: 13px 17px;
}
&.ico03 {
background-image: url(../../public/static/images/canvas/shape_labrary03.svg);
background-size: 17px 13px;
}
transition: all .15s ease-in-out;
&.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 14px 14px;}
&.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 13px 17px;}
&.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 17px 13px;}
&:hover{
border-color: #1083e3;
background-color: #1083e3;
border-color: #1083E3;
background-color: #1083E3;
}
}
}
@ -919,7 +888,7 @@ $alert-color: #101010;
.plane-box{
padding: 10px;
border-radius: 2px;
background-color: #3d3d3d;
background-color: #3D3D3D;
.plane-box-tit{
font-size: $pop-normal-size;
font-weight: 600;
@ -991,27 +960,11 @@ $alert-color: #101010;
position: absolute;
font-size: 12px;
font-weight: 500;
color: #b1b1b1;
&.top {
top: 0;
left: 50%;
transform: translateX(-50%);
}
&.right {
top: 50%;
right: 0;
transform: translateY(-50%);
}
&.bottom {
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
&.left {
top: 50%;
left: 0;
transform: translateY(-50%);
}
color: #B1B1B1;
&.top{top: 0; left: 50%; transform: translateX(-50%);}
&.right{top: 50%; right: 0; transform: translateY(-50%);}
&.bottom{bottom: 0; left: 50%; transform: translateX(-50%);}
&.left{top: 50%; left: 0; transform: translateY(-50%);}
}
.plane-btn{
position: absolute;
@ -1023,27 +976,11 @@ $alert-color: #101010;
background-repeat: no-repeat;
background-position: center;
border-radius: 50%;
transition: all 0.15s ease-in-out;
&.up {
top: 22px;
left: 50%;
transform: translateX(-50%);
}
&.right {
top: 50%;
right: 32px;
transform: translateY(-50%) rotate(90deg);
}
&.down {
bottom: 22px;
left: 50%;
transform: translateX(-50%) rotate(180deg);
}
&.left {
top: 50%;
left: 32px;
transform: translateY(-50%) rotate(270deg);
}
transition: all .15s ease-in-out;
&.up{top: 22px; left: 50%; transform: translateX(-50%);}
&.right{top: 50%; right: 32px; transform: translateY(-50%) rotate(90deg);}
&.down{bottom: 22px; left: 50%; transform: translateX(-50%) rotate(180deg);}
&.left{top: 50%; left: 32px; transform: translateY(-50%) rotate(270deg);}
&:hover,
&.act{
background-color: #fff;
@ -1103,7 +1040,7 @@ $alert-color: #101010;
.warning{
font-size: $pop-normal-size;
font-weight: $pop-normal-weight;
color: #ffafaf;
color: #FFAFAF;
}
// 각 변 속성 변경
@ -1155,157 +1092,37 @@ $alert-color: #101010;
top: 12.5px;
left: 50%;
font-size: 11px;
color: #8b8b8b;
color: #8B8B8B;
font-weight: 500;
-webkit-user-select: none;
-moz-user-select: none;
-ms-use-select: none;
user-select: none;
}
&:nth-child(1) {
transform: rotate(180deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(180deg);
}
}
&:nth-child(2) {
transform: rotate(195deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(165deg);
}
}
&:nth-child(3) {
transform: rotate(210deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(150deg);
}
}
&:nth-child(4) {
transform: rotate(225deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(135deg);
}
}
&:nth-child(5) {
transform: rotate(240deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(120deg);
}
}
&:nth-child(6) {
transform: rotate(255deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(105deg);
}
}
&:nth-child(7) {
transform: rotate(270deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(90deg);
}
}
&:nth-child(8) {
transform: rotate(285deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(75deg);
}
}
&:nth-child(9) {
transform: rotate(300deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(60deg);
}
}
&:nth-child(10) {
transform: rotate(315deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(45deg);
}
}
&:nth-child(11) {
transform: rotate(330deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(30deg);
}
}
&:nth-child(12) {
transform: rotate(345deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(15deg);
}
}
&:nth-child(13) {
transform: rotate(0deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(0deg);
}
}
&:nth-child(14) {
transform: rotate(15deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-15deg);
}
}
&:nth-child(15) {
transform: rotate(30deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-30deg);
}
}
&:nth-child(16) {
transform: rotate(45deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-45deg);
}
}
&:nth-child(17) {
transform: rotate(60deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-60deg);
}
}
&:nth-child(18) {
transform: rotate(75deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-75deg);
}
}
&:nth-child(19) {
transform: rotate(90deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-90deg);
}
}
&:nth-child(20) {
transform: rotate(105deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-105deg);
}
}
&:nth-child(21) {
transform: rotate(120deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-120deg);
}
}
&:nth-child(22) {
transform: rotate(135deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-135deg);
}
}
&:nth-child(23) {
transform: rotate(150deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-150deg);
}
}
&:nth-child(24) {
transform: rotate(165deg) translate(-50%, -50%);
i {
transform: translateX(-50%) rotate(-165deg);
}
}
&:nth-child(1) { transform: rotate(180deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(180deg);}}
&:nth-child(2) { transform: rotate(195deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(165deg);}}
&:nth-child(3) { transform: rotate(210deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(150deg);}}
&:nth-child(4) { transform: rotate(225deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(135deg);}}
&:nth-child(5) { transform: rotate(240deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(120deg);}}
&:nth-child(6) { transform: rotate(255deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(105deg);}}
&:nth-child(7) { transform: rotate(270deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(90deg);}}
&:nth-child(8) { transform: rotate(285deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(75deg);}}
&:nth-child(9) { transform: rotate(300deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(60deg);}}
&:nth-child(10) { transform: rotate(315deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(45deg);}}
&:nth-child(11) { transform: rotate(330deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(30deg);}}
&:nth-child(12) { transform: rotate(345deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(15deg);}}
&:nth-child(13) { transform: rotate(0deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(0deg);}}
&:nth-child(14) { transform: rotate(15deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-15deg);}}
&:nth-child(15) { transform: rotate(30deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-30deg);}}
&:nth-child(16) { transform: rotate(45deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-45deg);}}
&:nth-child(17) { transform: rotate(60deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-60deg);}}
&:nth-child(18) { transform: rotate(75deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-75deg);}}
&:nth-child(19) { transform: rotate(90deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-90deg);}}
&:nth-child(20) { transform: rotate(105deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-105deg);}}
&:nth-child(21) { transform: rotate(120deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-120deg);}}
&:nth-child(22) { transform: rotate(135deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-135deg);}}
&:nth-child(23) { transform: rotate(150deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-150deg);}}
&:nth-child(24) { transform: rotate(165deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-165deg);}}
&.act{
&::after{
content: '';
@ -1340,6 +1157,7 @@ $alert-color: #101010;
}
}
// 지붕모듈선택
.roof-module-tab{
display: flex;
@ -1354,13 +1172,13 @@ $alert-color: #101010;
border-radius: 2px;
background-color: transparent;
font-size: 12px;
color: #aaa;
color: #AAA;
text-align: center;
cursor: default;
transition: all 0.15s ease-in-out;
transition: all .15s ease-in-out;
&.act{
background-color: #1083e3;
border: 1px solid #1083e3;
background-color: #1083E3;
border: 1px solid #1083E3;
color: #fff;
font-weight: 500;
}
@ -1373,7 +1191,7 @@ $alert-color: #101010;
background-position: center;
background-size: cover;
background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
transition: all 0.15s ease-in-out;
transition: all .15s ease-in-out;
&.act{
background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
}
@ -1399,16 +1217,14 @@ $alert-color: #101010;
transform: translateX(-50%);
width: 1px;
height: 6px;
background-color: #8b8b8b;
background-color: #8B8B8B;
}
}
i{
top: 32px;
}
&.act{
i {
color: #8b8b8b;
}
i{color: #8B8B8B;}
}
}
}
@ -1440,7 +1256,7 @@ $alert-color: #101010;
height: 30px;
font-size: 12px;
font-weight: 400;
transition: all 0.15s ease-in-out;
transition: all .15s ease-in-out;
&:first-child{
border-left: 1px solid #505050;
}
@ -1454,7 +1270,7 @@ $alert-color: #101010;
.module-table-box{
flex: 1;
background-color: #3d3d3d;
background-color: #3D3D3D;
border-radius: 2px;
.module-table-inner{
padding: 10px;
@ -1467,7 +1283,7 @@ $alert-color: #101010;
padding: 10px 0;
font-size: 12px;
color: #fff;
border-bottom: 1px solid #4d4d4d;
border-bottom: 1px solid #4D4D4D;
}
.eaves-keraba-table{
width: 100%;
@ -1490,7 +1306,7 @@ $alert-color: #101010;
.warning-guide{
padding: 20px;
.warning{
color: #ffcaca;
color: #FFCACA;
max-height: 55px;
overflow-y: auto;
padding-right: 30px;
@ -1499,7 +1315,7 @@ $alert-color: #101010;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: #d9d9d9;
background-color: #D9D9D9;
}
&::-webkit-scrollbar-track {
background-color: transparent;
@ -1510,7 +1326,7 @@ $alert-color: #101010;
.module-self-table{
display: table;
border-top: 1px solid #4d4d4d;
border-top: 1px solid #4D4D4D;
border-collapse: collapse;
width: 100%;
.self-table-item{
@ -1519,7 +1335,7 @@ $alert-color: #101010;
.self-item-th{
display: table-cell;
vertical-align: middle;
border-bottom: 1px solid #4d4d4d;
border-bottom: 1px solid #4D4D4D;
}
.self-item-th{
width: 60px;
@ -1547,7 +1363,7 @@ $alert-color: #101010;
.hexagonal-wrap{
.hexagonal-item{
padding: 15px 0;
border-bottom: 1px solid #4d4d4d;
border-bottom: 1px solid #4D4D4D;
&:first-child{
padding-top: 0;
}
@ -1585,7 +1401,7 @@ $alert-color: #101010;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: #d9d9d9;
background-color: #D9D9D9;
}
&::-webkit-scrollbar-track {
background-color: transparent;
@ -1603,7 +1419,7 @@ $alert-color: #101010;
gap: 5px;
min-height: 60px;
padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.20);
span{
display: inline-flex;
align-items: center;
@ -1636,7 +1452,7 @@ $alert-color: #101010;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: #d9d9d9;
background-color: #D9D9D9;
}
&::-webkit-scrollbar-track {
background-color: transparent;
@ -1695,10 +1511,10 @@ $alert-color: #101010;
height: 16px;
&.pink{
border: 2px solid #ce1c9c;
background-color: #16417d;
background-color: #16417D;
}
&.white{
border: 2px solid #fff;
border: 2px solid #FFF;
background-color: #001027;
}
}
@ -1723,7 +1539,7 @@ $alert-color: #101010;
.react-colorful__pointer{
width: 15px;
height: 15px;
border: 4px solid #fff;
border: 4px solid #Fff;
}
.react-colorful__saturation{
border-radius: 2px;
@ -1810,9 +1626,10 @@ $alert-color: #101010;
align-items: center;
justify-content: center;
width: 100%;
height: 80px;
min-height: 80px;
background-color: #fff;
}
}
// 치수선 설정
@ -1923,22 +1740,10 @@ $alert-color: #101010;
border-radius: 50%;
}
}
&:nth-child(1) {
top: 0;
left: 0;
}
&:nth-child(2) {
top: 0;
right: 0;
}
&:nth-child(3) {
bottom: 0;
left: 0;
}
&:nth-child(4) {
bottom: 0;
right: 0;
}
&:nth-child(1){ top: 0; left: 0; }
&:nth-child(2){ top: 0; right: 0; }
&:nth-child(3){ bottom: 0; left: 0; }
&:nth-child(4){ bottom: 0; right: 0; }
}
.size-box{
position: absolute;

398
src/styles/_reset.scss
View File

@ -3,100 +3,29 @@
-moz-text-size-adjust:none;
-ms-text-size-adjust:none;
text-size-adjust: none;
box-sizing: content-box;
box-sizing: content-box
}
*,
::after,
::before {
*, ::after, ::before {
box-sizing: border-box;
}
html,
body {
html, body{
width: 100%;
height: 100%;
font-size: 16px;
}
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
@ -108,38 +37,23 @@ video {
font-smooth: never;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1.4;
}
body:first-of-type caption {
display: none;
}
body:first-of-type caption { display:none;}
ol,
ul {
ol, ul {
list-style: none;
}
blockquote,
q {
blockquote, q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
@ -149,9 +63,7 @@ table {
border-spacing:0;
border:0 none;
}
caption,
th,
td {
caption, th, td {
text-align:left;
font-weight: normal;
border:0;
@ -161,38 +73,26 @@ a {
cursor:pointer;
color:#000;
}
a,
a:hover,
a:active {
a, a:hover, a:active {
text-decoration:none;
-webkit-tap-highlight-color: transparent;
}
/*form_style*/
input,
select,
textarea,
button,
a,
label {
input, select, textarea, button, a, label {
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
button,
input[type='text'],
input[type='button'] {
button,input[type=text], input[type=button] {
-webkit-appearance: none;
-webkit-border-radius: 0;
-webkit-appearance:none;
appearance: none;
border-radius: 0;
border-radius: 0
}
input[type='checkbox'],
input[type='radio'] {
input[type=checkbox], input[type=radio] {
box-sizing: border-box;
padding: 0;
}
input,
select,
button {
input, select, button {
border:0 none;
outline:none;
margin:0;
@ -231,53 +131,24 @@ button {
}
// margin
.mt5 {
margin-top: 5px !important;
}
.mt10 {
margin-top: 10px !important;
}
.mt15 {
margin-top: 15px !important;
}
.mb5 {
margin-bottom: 5px !important;
}
.mb10 {
margin-bottom: 10px !important;
}
.mb15 {
margin-bottom: 15px !important;
}
.mr5 {
margin-right: 5px !important;
}
.mr10 {
margin-right: 10px !important;
}
.mr15 {
margin-right: 15px !important;
}
.ml5 {
margin-left: 5px !important;
}
.ml10 {
margin-left: 10px !important;
}
.ml15 {
margin-left: 15px !important;
}
.mt5{margin-top: 5px !important;}
.mt10{margin-top: 10px !important;}
.mt15{margin-top: 15px !important;}
.mb5{margin-bottom: 5px !important;}
.mb10{margin-bottom: 10px !important;}
.mb15{margin-bottom: 15px !important;}
.mr5{margin-right: 5px !important;}
.mr10{margin-right: 10px !important;}
.mr15{margin-right: 15px !important;}
.ml5{margin-left: 5px !important;}
.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;
}
.al-l{text-align: left !important;}
.al-r{text-align: right !important;}
.al-c{text-align: center !important;}
// button
.btn-frame{
@ -292,7 +163,7 @@ button {
border: 1px solid #000;
text-align: center;
font-family: 'Pretendard', sans-serif;
transition: all 0.17s ease-in-out;
transition: all .17s ease-in-out;
cursor: pointer;
&.block{
width: 100%;
@ -305,15 +176,15 @@ button {
}
&.deepgray{
background-color: #2c2c2c;
background-color: #2C2C2C;
border: 1px solid #484848;
}
&.gray{
background-color: #3c3c3c;
background-color: #3C3C3C;
border: 1px solid #545454;
}
&.dark{
background-color: #1c1c1c;
background-color: #1C1C1C;
border: 1px solid #484848;
}
&.modal{
@ -322,8 +193,8 @@ button {
border: 1px solid #484848;
color: #aaa;
&:hover{
background-color: #1083e3;
border: 1px solid #1083e3;
background-color: #1083E3;
border: 1px solid #1083E3;
color: #fff;
font-weight: 500;
}
@ -333,13 +204,13 @@ button {
padding: 0 10px;
line-height: 28px;
font-family: 'Noto Sans JP', sans-serif;
background-color: #2d2d2d;
background-color: #2D2D2D;
border: 1px solid #393939;
color: #aaa;
&.act,
&:hover{
background-color: #414e6c;
border: 1px solid #414e6c;
background-color: #414E6C;
border: 1px solid #414E6C;
color: #fff;
font-weight: 500;
}
@ -353,11 +224,11 @@ button {
border: 1px solid #484848;
color: #fff;
&.blue{
background-color: #414e6c;
border: 1px solid #414e6c;
background-color: #414E6C;
border: 1px solid #414E6C;
&:hover{
background-color: #414e6c;
border: 1px solid #414e6c;
background-color: #414E6C;
border: 1px solid #414E6C;
}
}
&.white{
@ -384,7 +255,7 @@ button {
font-family: 'Noto Sans JP', sans-serif;
background-color: transparent;
border: 1px solid #676767;
color: #aaaaaa;
color: #AAAAAA;
&:hover{
background-color: #272727;
border-color: #676767;
@ -393,8 +264,8 @@ button {
}
&:hover,
&.act{
background-color: #1083e3;
border: 1px solid #1083e3;
background-color: #1083E3;
border: 1px solid #1083E3;
color: #fff;
font-weight: 500;
}
@ -424,7 +295,7 @@ button {
color: #fff;
font-size: 13px;
font-weight: 400;
transition: all 0.15s ease-in-out;
transition: all .15s ease-in-out;
&.navy{
background-color: #304961;
&:hover{
@ -432,21 +303,21 @@ button {
}
}
&.grey{
background-color: #94a0ad;
background-color: #94A0AD;
&:hover{
background-color: #607f9a;
background-color: #607F9A;
}
}
&.green{
background-color: #a6bba8;
background-color: #A6BBA8;
&:hover{
background-color: #98af9b;
}
}
&.white{
border: 1px solid #94a0ad;
border: 1px solid #94A0AD;
background-color: #fff;
color: #94a0ad;
color: #94A0AD;
&:hover{
background-color: #fff;
}
@ -462,7 +333,7 @@ button {
line-height: 30px;
padding: 0 25px 0 10px;
background-color: #373737;
border: 1px solid #3f3f3f;
border: 1px solid #3F3F3F;
border-radius: 2px;
border-top-left-radius: 2px;
color: #fff;
@ -482,7 +353,7 @@ button {
max-height: 100px;
overflow-y: auto;
background-color: #373737;
border: 1px solid #3f3f3f;
border: 1px solid #3F3F3F;
border-radius: 2px;
transition: all 0.17s ease-in-out;
visibility: hidden;
@ -492,19 +363,20 @@ button {
align-items: center;
padding: 8px 20px;
line-height: 1.4;
transition: all 0.17s ease-in-out;
transition: all .17s ease-in-out;
button{
font-size: 12px;
color: #fff;
line-height: 1.4;
}
&:hover{
background-color: #2c2c2c;
background-color: #2C2C2C;
}
}
&::-webkit-scrollbar {
width: 2px;
background-color: transparent;
}
&::-webkit-scrollbar-thumb {
background-color: #5a5a5a;
@ -524,7 +396,7 @@ button {
height: 6px;
background: url(/static/images/common/select-arr.svg) no-repeat center;
background-size: cover;
transition: all 0.17s ease-in-out;
transition: all .17s ease-in-out;
}
&.active{
.select-item-wrap{
@ -542,17 +414,17 @@ button {
display: block;
width: 100%;
height: 30px;
background: #fff url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
background: #FFF url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
background-size: 10px 6px;
border: 1px solid #eee;
padding: 0 30px 0 10px;
font-size: 13px;
color: #45576f;
color: #45576F;
font-family: 'Noto Sans JP', sans-serif;
cursor: pointer;
&:disabled{
opacity: 1;
background-color: #fafafa;
background-color: #FAFAFA;
color: #999;
cursor: default;
}
@ -568,6 +440,7 @@ button {
}
}
// input
.form-input{
label{
@ -578,9 +451,9 @@ button {
margin-bottom: 10px;
}
}
input[type='password'],
input[type='number'],
input[type='text'] {
input[type=password],
input[type=number],
input[type=text]{
&.input-origin{
display: inline-block;
height: 30px;
@ -603,7 +476,7 @@ input[type='text'] {
width: 100%;
}
&:read-only{
color: #aaa;
color: #AAA;
}
&.plane{
font-family: 'Noto Sans JP', sans-serif;
@ -621,25 +494,27 @@ input[type='text'] {
background-color: #fff;
font-family: 'Noto Sans JP', sans-serif;
font-size: 13px;
color: #45576f;
color: #45576F;
font-weight: normal;
transition: border-color 0.17s ease-in-out;
transition: border-color .17s ease-in-out;
text-align: left;
&:read-only{
background-color: #fafafa;
background-color: #FAFAFA;
color: #999999;
}
}
}
// check-btn
.check-btn{
display: flex;
align-items: center;
height: 30px;
background-color: #3a3a3a;
background-color: #3A3A3A;
border-radius: 3px;
transition: all 0.17s ease-in-out;
transition: all .17s ease-in-out;
.check-area{
flex: none;
width: 30px;
@ -676,10 +551,10 @@ input[type='text'] {
display: block;
height: 30px;
border-radius: 3px;
background-color: #3a3a3a;
background-color: #3A3A3A;
padding: 0 11px;
text-align: left;
transition: all 0.17s ease-in-out;
transition: all .17s ease-in-out;
span{
position: relative;
font-size: 12px;
@ -713,15 +588,15 @@ input[type='text'] {
background-color: #272727;
border: 1px solid #484848;
span{
color: #fff;
color: #Fff;
&:after{
background: url(../../public/static/images/canvas/arr_btn_ico_white.svg)no-repeat center;
}
}
&:hover,
&.act{
background-color: #1083e3;
border: 1px solid #1083e3;
background-color: #1083E3;
border: 1px solid #1083E3;
}
}
}
@ -731,8 +606,8 @@ input[type='text'] {
.d-check-box{
line-height: 1.1;
cursor: pointer;
input[type='checkbox'],
input[type='radio'] {
input[type=checkbox],
input[type=radio]{
position: static;
margin-left: 0;
cursor: pointer;
@ -755,7 +630,7 @@ input[type='text'] {
}
&.light{
label{
color: #45576f;
color: #45576F;
}
}
&.no-text{
@ -769,7 +644,7 @@ input[type='text'] {
label{
&::before{
cursor: pointer;
content: '';
content: "";
display: inline-block;
position: absolute;
width: 17px;
@ -783,13 +658,11 @@ input[type='text'] {
text-align:center;
font-size:13px;
line-height:1.4;
transition:
border 0.15s ease-in-out,
color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
&::after{
cursor: pointer;
content: '';
content: "";
display: inline-block;
position: absolute;
width: 9px;
@ -805,22 +678,20 @@ input[type='text'] {
line-height:1.4;
opacity: 0;
visibility: hidden;
transition:
opacity 0.15s ease-in-out,
color 0.15s ease-in-out;
transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
}
}
&.light{
label{
&:before{
border-color: #d6d6d7;
border-color: #D6D6D7;
}
&:after{
background-color: #697c8f;
background-color: #697C8F;
}
}
}
input[type='radio']:checked + label::after {
input[type=radio]:checked + label::after{
opacity: 1;
visibility: visible;
}
@ -844,12 +715,10 @@ input[type='text'] {
// check-box
.d-check-box{
label{
&.red {
color: #ffcaca;
}
&.red{color: #FFCACA;}
&::before{
cursor: pointer;
content: '';
content: "";
display: inline-block;
position: absolute;
width: 17px;
@ -857,36 +726,32 @@ input[type='text'] {
top: 2px;
left: 0;
margin-left: -12px;
border: 1px solid #d6d6d7;
border: 1px solid #D6D6D7;
background-color: #fff;
transition:
border 0.15s ease-in-out,
color 0.15s ease-in-out;
transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
}
&:after{
cursor: pointer;
content: '';
content: "";
display: inline-block;
position: absolute;
width: 16px;
height: 16px;
top:0;
left: 0;
margin-left: -0.8rem;
transition:
border 0.05s ease-in-out,
color 0.05s ease-in-out;
margin-left: -.8rem;
transition: border 0.05s ease-in-out, color 0.05s ease-in-out;
}
}
input[type='checkbox']:checked + label::after {
content: '';
input[type=checkbox]:checked + label::after{
content: "";
display: inline-block;
position: absolute;
top: 1px;
left: -1px;
width: 5px;
height: 8px;
border: 2px solid #697c8f;
border: 2px solid #697C8F;
border-left: none;
border-top: none;
transform: translate(7.75px,4.5px) rotate(45deg);
@ -898,7 +763,7 @@ input[type='text'] {
background-color: transparent;
}
}
input[type='checkbox']:checked + label::after {
input[type=checkbox]:checked + label::after{
border-color: #fff;
}
&.no-text{
@ -908,25 +773,23 @@ input[type='text'] {
}
}
&.sel{
input[type='checkbox']:checked + label {
color: #d7c863;
input[type=checkbox]:checked + label{
color: #D7C863;
}
input[type='checkbox']:checked + label::before,
input[type='checkbox']:checked + label::after {
border-color: #d7c863;
input[type=checkbox]:checked + label::before,
input[type=checkbox]:checked + label::after{
border-color: #D7C863;
}
}
}
// date-picker
.date-picker{
svg {
display: none;
}
svg{display: none;}
.react-datepicker-wrapper{
width: 100%;
}
input[type='text'] {
input[type=text]{
display: block;
width: 100%;
height: 30px;
@ -934,7 +797,7 @@ input[type='text'] {
border-radius: 2px;
border: 1px solid #eee;
font-size: 13px;
color: #45576f;
color: #45576F;
font-weight: normal;
font-family: 'Noto Sans JP', sans-serif;
background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat;
@ -950,17 +813,18 @@ input[type='text'] {
height: 30px;
min-height: unset;
border-radius: 2px;
border-color: #eee;
border-color: #EEE;
background-color: #fff;
&:hover{
border-color: #eee;
border-color: #EEE;
}
}
.custom__control--is-focused{
border-color: #eee;
border-color: #EEE;
box-shadow: unset;
&:hover{
border-color: #eee;
border-color: #EEE;
}
}
.custom__value-container {
@ -973,7 +837,7 @@ input[type='text'] {
}
.custom__single-value{
font-size: 13px;
color: #45576f;
color: #45576F;
font-weight: 400;
}
.custom__placeholder{
@ -1010,7 +874,7 @@ input[type='text'] {
.custom__option{
font-size: 13px;
padding: 7px 10px;
color: #45576f;
color: #45576F;
}
.custom__option--is-selected{
color: #fff;
@ -1018,7 +882,7 @@ input[type='text'] {
// disable
&.custom--is-disabled{
.custom__control{
background-color: #fafafa;
background-color: #FAFAFA ;
}
.custom__single-value{
color: #999999;