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

2024-10-18 14:45:21 +09:00 · 2024-10-18 14:45:21 +09:00 · debe56ed4f
commit debe56ed4f
parent 6eb9535dfc 162c521768
17 changed files with 507 additions and 225 deletions
--- a/.env
+++ b/.env
@ -1,12 +0,0 @@
-# Environment variables declared in this file are automatically made available to Prisma.
-# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema
-
-# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
-# See the documentation for all the connection string options: https://pris.ly/d/connection-strings
-
-# DATABASE_URL="postgresql://johndoe:randompassword@localhost:5432/mydb?schema=public"
-# DATABASE_URL="mongodb://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/sample_mflix?retryWrites=true&w=majority"
-#DATABASE_URL = "mongodb%2Bsrv%3A%2F%2Fyoo32767%3AGuCtswjLGqUaNL0G%40cluster0.vsdtcnb.mongodb.net%2F%3FretryWrites%3Dtrue%26w%3Dmajority%26appName%3DCluster0"
-# DATABASE_URL = "mongodb+srv://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/Cluster0?retryWrites=true&w=majority"
-# DATABASE_URL="mongodb://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/sample_mflix?retryWrites=true&w=majority"
-DATABASE_URL="mongodb+srv://yoo32767:GuCtswjLGqUaNL0G@cluster0.vsdtcnb.mongodb.net/mytest"
--- a/.env.development
+++ b/.env.development
@ -1,14 +1,8 @@
-NEXT_PUBLIC_TEST="테스트변수입니다. development"
-
 NEXT_PUBLIC_API_SERVER_PATH="http://1.248.227.176:38080"
-# NEXT_PUBLIC_API_SERVER_PATH="http://localhost:8080"
-# NEXT_PUBLIC_API_SERVER_PATH="http://172.30.1.60:8080"
-
-DATABASE_URL="sqlserver://mssql.devgrr.kr:1433;database=qcast;user=qcast;password=Qwertqaz12345;trustServerCertificate=true"

 SESSION_SECRET="i3iHH1yp2/2SpQSIySQ4bpyc4g0D+zCF9FAn5xUG0+Y="

 NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_bV5zuYMyyIYFlOb3"

-NEXT_PUBLIC_Q_ORDER_AUTO_LOGIN_URL="http://q-order-local.q-cells.jp:8120/eos/login/autoLogin"
-NEXT_PUBLIC_Q_MUSUBI_AUTO_LOGIN_URL="http://q-musubi-local.q-cells.jp:8120/qm/login/autoLogin"
+NEXT_PUBLIC_Q_ORDER_AUTO_LOGIN_URL="http://q-order-qa.q-cells.jp:8120/eos/login/autoLogin"
+NEXT_PUBLIC_Q_MUSUBI_AUTO_LOGIN_URL="http://q-musubi-qa.q-cells.jp:8120/qm/login/autoLogin"
--- a/.env.production
+++ b/.env.production
@ -1,12 +1,8 @@
-NEXT_PUBLIC_TEST="테스트변수입니다. production"
-
 NEXT_PUBLIC_API_SERVER_PATH="http://1.248.227.176:38080"

-DATABASE_URL=""
-
 SESSION_SECRET="i3iHH1yp2/2SpQSIySQ4bpyc4g0D+zCF9FAn5xUG0+Y="

 NEXT_PUBLIC_CONVERTER_API_URL="https://v2.convertapi.com/convert/dwg/to/png?Secret=secret_bV5zuYMyyIYFlOb3"

-NEXT_PUBLIC_Q_ORDER_AUTO_LOGIN_URL="http://q-order-local.q-cells.jp:8120/eos/login/autoLogin"
-NEXT_PUBLIC_Q_MUSUBI_AUTO_LOGIN_URL="http://q-musubi-local.q-cells.jp:8120/qm/login/autoLogin"
+NEXT_PUBLIC_Q_ORDER_AUTO_LOGIN_URL="https://q-order.q-cells.jp/eos/login/autoLogin"
+NEXT_PUBLIC_Q_MUSUBI_AUTO_LOGIN_URL="https://q-musubi.q-cells.jp/qm/login/autoLogin"
--- a/public/static/images/common/select_del.svg
+++ b/public/static/images/common/select_del.svg
@ -0,0 +1,4 @@
+<svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.998535 1L3.99723 3.99594L6.99593 1" stroke="#697C8F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M7 6.98376L3.99319 3.99595L1.00263 6.99999" stroke="#697C8F" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/src/components/floor-plan/modal/object/ObjectSetting.jsx
+++ b/src/components/floor-plan/modal/object/ObjectSetting.jsx
@ -46,6 +46,7 @@ export default function ObjectSetting({ setShowObjectSettingModal }) {
    heightRef: useRef(null),
    pitchRef: useRef(null),
    offsetRef: useRef(null),
+    offsetWidthRef: useRef(null),
    directionRef: useRef(null),
  }

--- a/src/components/floor-plan/modal/object/type/PentagonDormer.jsx
+++ b/src/components/floor-plan/modal/object/type/PentagonDormer.jsx
@ -1,8 +1,17 @@
 import Image from 'next/image'
 import { useMessage } from '@/hooks/useMessage'
+import { forwardRef, useState } from 'react'

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

  const getDirection = (e) => {
--- a/src/components/header/Header.jsx
+++ b/src/components/header/Header.jsx
@ -132,7 +132,7 @@ export default function Header(props) {
          onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')}
        >
          {menu.children.length === 0 ? (
-            <Link key={`${menu.id}`} href={menu.url} scroll={false}>
+            <Link key={`${menu.id}`} href={menu.url}>
              {getMessage(menu.name)}
            </Link>
          ) : (
@ -147,9 +147,7 @@ export default function Header(props) {
                      onMouseEnter={(e) => ToggleonMouse(e, 'add', 'li > ul')}
                      onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')}
                    >
-                      <Link href={m.url} scroll={false}>
-                        {getMessage(m.name)}
-                      </Link>
+                      <Link href={m.url}>{getMessage(m.name)}</Link>
                    </li>
                  )
                })}
--- a/src/components/management/Stuff.jsx
+++ b/src/components/management/Stuff.jsx
@ -245,9 +245,8 @@ export default function Stuff() {
        }

        async function fetchData() {
-          // const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(params)}`
-          const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(params)}`
-
+          // const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(params)}`
+          const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(params)}`
          await get({
            url: apiUrl,
          }).then((res) => {
@ -303,8 +302,8 @@ export default function Stuff() {
      setPageNo(1)

      async function fetchData() {
-        const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}`
-        // const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
+        // const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}`
+        const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
        await get({ url: apiUrl }).then((res) => {
          if (!isEmptyArray(res)) {
            setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
@ -333,8 +332,8 @@ export default function Stuff() {
    })

    setPageNo(1)
-    // const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
-    const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}`
+    // const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}`
+    const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
    get({ url: apiUrl }).then((res) => {
      if (!isEmptyArray(res)) {
        setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
@ -364,8 +363,8 @@ export default function Stuff() {

    setPageNo(1)

-    const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}`
-    // const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
+    // const apiUrl = `/api/object/list?saleStoreId=T01&${queryStringFormatter(stuffSearchParams)}`
+    const apiUrl = `/api/object/list?saleStoreId=${sessionState?.storeId}&${queryStringFormatter(stuffSearchParams)}`
    get({ url: apiUrl }).then((res) => {
      if (!isEmptyArray(res)) {
        setGridProps({ ...gridProps, gridData: res, count: res[0].totCnt })
--- a/src/components/management/StuffDetail.jsx
+++ b/src/components/management/StuffDetail.jsx
@ -16,6 +16,8 @@ import FindAddressPop from './popup/FindAddressPop'
 import PlanRequestPop from './popup/PlanRequestPop'
 import WindSelectPop from './popup/WindSelectPop'
 export default function StuffDetail() {
+  const [selOptions, setSelOptions] = useState('')
+
  const sessionState = useRecoilValue(sessionStore)

  const router = useRouter()
@ -107,26 +109,28 @@ export default function StuffDetail() {

      // 임시 1차점 판매점코드 saleStoreId=201TES01
      // T01
-      //1차점 : X167
-      get({ url: `/api/object/saleStore/T01/list` }).then((res) => {
-        // get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
+      //1차점 : X167 T01
+      // get({ url: `/api/object/saleStore/TEMP02/list` }).then((res) => {
+      get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
        if (!isEmptyArray(res)) {
          const firstList = res.filter((row) => row.saleStoreLevel === '1')
          const otherList = res.filter((row) => row.saleStoreLevel !== '1')
          //1차점 셀렉트박스
          setSaleStoreList(firstList)
+          setSelOptions(sessionState?.storeId)
+          form.setValue('saleStoreId', sessionState?.storeId)
+          form.setValue('saleStoreLevel', sessionState?.storeLvl)
+
          //1차점 아닌 판매점 셀렉트박스
          setOriginOtherSaleStoreList(otherList)
          setOtherSaleStoreList(otherList)
        }
      })
    }
-  }, [objectNo])
+  }, [objectNo, sessionState])

  useEffect(() => {
    if (isObjectNotEmpty(detailData)) {
-      console.log('상세데이타:::::::', detailData)
-
      // 도도부현API
      get({ url: '/api/object/prefecture/list' }).then((res) => {
        if (!isEmptyArray(res)) {
@ -151,6 +155,8 @@ export default function StuffDetail() {
          setOtherSaleStoreList(otherList)
        }
      })
+
+      console.log('상세데이타::세팅:::::', detailData)
    }
  }, [detailData])

@ -161,12 +167,14 @@ export default function StuffDetail() {
      form.setValue('saleStoreId', key.saleStoreId)
      form.setValue('saleStoreName', key.saleStoreName)
      form.setValue('saleStoreLevel', key.saleStoreLevel)
+      setSelOptions(key.saleStoreId)
      //선택한 1차점 정보로 2차점 list 추리기
      //長府工産株式会社　大阪支社
      let newOtherSaleStoreList = originOtherSaleStoreList.filter((row) => row.firstAgentId === key.saleStoreId)
      setOtherSaleStoreList(newOtherSaleStoreList)
    } else {
      //X누름
+      setSelOptions('')
      form.setValue('saleStoreId', '')
      form.setValue('saleStoreName', '')
      form.setValue('saleStoreLevel', '')
@ -212,6 +220,12 @@ export default function StuffDetail() {
  //팝업에서 넘어온 설계의뢰 정보로 바꾸기
  const setPlanReqInfo = (info) => {
    console.log('팝업에서 넘어온 설계의뢰 정보::: ', info)
+    //building : 신축 기축
+    //planReqName : 물건명
+    //zipNo : 우편번호
+    //도도부현 :address1 주소 : address2 미세팅
+    //기준풍속 팝업열려면 setPrefValue(info.prefId) 필요
+    //기준풍속 :
    // form.setValue('dispCompanyName', info.planReqName)
  }

@ -289,7 +303,7 @@ export default function StuffDetail() {
      }

      // console.log('임시저장용::', errors)
-      setIsFormValid(Object.keys(errors).length === 0)
+      setIsFormValid(Object.keys(errors).length === 0 ? true : false)
    } else {
      console.log('상세일때 폼체크')
    }
@ -348,25 +362,14 @@ export default function StuffDetail() {
    form.setValue('areaId', e.target.value)
  }

-  // useEffect(() => {
-  //   if (!isEmptyArray(areaIdList)) {
-  //     let _prefName = form.watch('prefName')
-  //     // console.log('기준풍속 가져오는 API', _prefName)
-  //     get({ url: `/api/object/windSpeed/${_prefName}/list` }).then((res) => {
-  //       // console.log('res::', res)
-  //       if (!isEmptyArray(res)) {
-  //         setWindSpeedList(res)
-  //       }
-  //     })
-  //   }
-  // }, [areaIdList])
-
  //필수값 다 입력했을때
-  const onValid = (data) => {
+  const onValid = (data, e) => {
+    const formData = form.getValues()
+    console.log('필수값 통과:::', data, formData)
+    // console.log('필수값 formData:::', formData)
    // 수정모드일때는 PUT
    // console.log('필수값 다 있고 저장')
    // console.log('data::::::', data)
-    const formData = form.getValues()
    // console.log('formData::::', formData)
    // const _dispCompanyName = watch('dispCompanyName')
    // const _objectStatusId = watch('objectStatusId')
@ -394,6 +397,8 @@ export default function StuffDetail() {

  // 임시저장
  const onTempSave = async () => {
+    console.log('임시저장:::::')
+    return
    const formData = form.getValues()
    // console.log('formData::', formData)
    const params = {
@ -473,9 +478,9 @@ export default function StuffDetail() {
                        <div className="input-wrap mr5" style={{ width: '200px' }}>
                          <input type="text" className="input-light" readOnly />
                        </div>
-                        <button className="btn-origin grey" onClick={onSearchDesignRequestPopOpen}>
+                        <Button className="btn-origin grey" onClick={onSearchDesignRequestPopOpen}>
                          {getMessage('stuff.planReqPopup.title')}
-                        </button>
+                        </Button>
                      </div>
                    </td>
                  </tr>
@ -541,6 +546,8 @@ export default function StuffDetail() {
                      <div className="flx-box">
                        <div className="select-wrap mr5" style={{ width: '567px' }}>
                          <Select
+                            id="long-value-select1"
+                            instanceId="long-value-select1"
                            className="react-select-custom"
                            classNamePrefix="custom"
                            placeholder="Select"
@ -549,6 +556,9 @@ export default function StuffDetail() {
                            getOptionLabel={(x) => x.saleStoreName}
                            getOptionValue={(x) => x.saleStoreId}
                            isClearable={true}
+                            value={saleStoreList.filter(function (option) {
+                              return option.saleStoreId === selOptions
+                            })}
                          />
                        </div>
                        <div className="input-wrap" style={{ width: '216px' }}>
@ -570,6 +580,8 @@ export default function StuffDetail() {
                      <div className="flx-box">
                        <div className="select-wrap mr5" style={{ width: '567px' }}>
                          <Select
+                            id="long-value-select2"
+                            instanceId="long-value-select2"
                            className="react-select-custom"
                            classNamePrefix="custom"
                            placeholder="Select"
@ -678,9 +690,9 @@ export default function StuffDetail() {
                          </select>
                        </div> */}
                        <span className="mr10">{getMessage('stuff.detail.windSpeedSpan')}</span>
-                        <button className="btn-origin grey" onClick={onSearchWindSpeedPopOpen}>
+                        <Button className="btn-origin grey" onClick={onSearchWindSpeedPopOpen}>
                          {getMessage('stuff.detail.btn.windSpeedPop')}
-                        </button>
+                        </Button>
                      </div>
                    </td>
                  </tr>
@ -773,18 +785,18 @@ export default function StuffDetail() {
            </div>
            <div className="sub-table-footer">
              {!isFormValid ? (
-                <button className="btn-origin grey mr5" onClick={onTempSave}>
+                <Button className="btn-origin grey mr5" onClick={onTempSave}>
                  New화면 임시저장
-                </button>
+                </Button>
              ) : (
-                <button type="submit" className="btn-origin navy mr5">
+                <Button type="submit" className="btn-origin navy mr5">
                  NEW 화면 저장
-                </button>
+                </Button>
              )}
              <Link href="/management/stuff">
-                <button type="button" className="btn-origin grey">
+                <Button type="button" className="btn-origin grey">
                  NEW화면 물건목록이동
-                </button>
+                </Button>
              </Link>
            </div>
          </div>
@ -810,9 +822,9 @@ export default function StuffDetail() {
                          <div className="input-wrap mr5" style={{ width: '200px' }}>
                            <input type="text" className="input-light" readOnly />
                          </div>
-                          <button className="btn-origin grey" onClick={onSearchDesignRequestPopOpen}>
+                          <Button className="btn-origin grey" onClick={onSearchDesignRequestPopOpen}>
                            {getMessage('stuff.planReqPopup.title')}
-                          </button>
+                          </Button>
                        </div>
                      </td>
                    </tr>
@ -899,32 +911,32 @@ 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">
+              <Button type="submit" className="btn-origin navy mr5">
                R상세:저장
-              </button>
-              <button type="submit" className="btn-origin navy" onClick={onDelete}>
+              </Button>
+              <Button type="submit" className="btn-origin navy" onClick={onDelete}>
                R상세:물건삭제
-              </button>
+              </Button>
            </>
          ) : (
            <>
              {!isFormValid ? (
-                <button type="submit" className="btn-origin navy mr5" onClick={onTempSave}>
+                <Button type="submit" className="btn-origin navy mr5" onClick={onTempSave}>
                  TEMP상세:임시저장
-                </button>
+                </Button>
              ) : (
-                <button type="submit" className="btn-origin navy mr5">
+                <Button type="submit" className="btn-origin navy mr5">
                  TEMP상세:저장
-                </button>
+                </Button>
              )}
              <Link href="/management/stuff">
-                <button type="button" className="btn-origin grey">
+                <Button type="button" className="btn-origin grey">
                  T상세:물건목록
-                </button>
+                </Button>
              </Link>
            </>
          )}
@ -932,7 +944,14 @@ export default function StuffDetail() {
      )}
      {showAddressButtonValid && <FindAddressPop setShowAddressButtonValid={setShowAddressButtonValid} zipInfo={setZipInfo} />}
      {showDesignRequestButtonValid && (
-        <PlanRequestPop setShowDesignRequestButtonValid={setShowDesignRequestButtonValid} planReqInfo={setPlanReqInfo} />
+        <PlanRequestPop
+          setShowDesignRequestButtonValid={setShowDesignRequestButtonValid}
+          saleStoreId={form.watch('saleStoreId')}
+          saleStoreLevel={form.watch('saleStoreLevel')}
+          otherSaleStoreId={form.watch('otherSaleStoreId')}
+          otherSaleStoreLevel={form.watch('otherSaleStoreLevel')}
+          planReqInfo={setPlanReqInfo}
+        />
      )}
      {showWindSpeedButtonValid && (
        <WindSelectPop setShowWindSpeedButtonValid={setShowWindSpeedButtonValid} prefName={form.watch('prefName')} windSpeedInfo={setWindSppedInfo} />
--- a/src/components/management/StuffSearchCondition.jsx
+++ b/src/components/management/StuffSearchCondition.jsx
@ -18,7 +18,6 @@ import { useMessage } from '@/hooks/useMessage'
 import { isObjectNotEmpty } from '@/util/common-utils'
 export default function StuffSearchCondition() {
  const sessionState = useRecoilValue(sessionStore)
-
  const [appMessageState, setAppMessageState] = useRecoilState(appMessageStore)
  const globalLocaleState = useRecoilValue(globalLocaleStore)
  const { getMessage } = useMessage()
@ -74,10 +73,6 @@ export default function StuffSearchCondition() {
      startRow: stuffSearch?.startRow ? stuffSearch.startRow : 1,
      endRow: stuffSearch?.endRow ? stuffSearch.endRow : 100,
      schSortType: stuffSearch?.schSortType ? stuffSearch.schSortType : 'R',
-      selObject: {
-        label: stuffSearch.selObject.label,
-        value: stuffSearch.selObject.value,
-      },
    })
  }

@ -100,7 +95,7 @@ export default function StuffSearchCondition() {
  useEffect(() => {
    if (isObjectNotEmpty(sessionState)) {
      // storeId가 T01 이거나 1차점일때만 판매대리점 선택 활성화
-      // get({ url: `/api/object/saleStore/201TES01/list` }).then((res) => {
+      // get({ url: `/api/object/saleStore/TEMP02/list` }).then((res) => {
      get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
        if (!isEmptyArray(res)) {
          res.map((row) => {
@ -128,7 +123,6 @@ export default function StuffSearchCondition() {
        ...stuffSearch,
        code: 'S',
        schSelSaleStoreId: key.saleStoreId,
-        selObject: { value: key.saleStoreId, label: key.saleStoreName },
      })
    } else {
      setSchSelSaleStoreId('')
@ -260,6 +254,8 @@ export default function StuffSearchCondition() {
                  <div className="select-wrap">
                    {schSelSaleStoreList?.length > 0 && (
                      <Select
+                        id="long-value-select1"
+                        instanceId="long-value-select1"
                        className="react-select-custom"
                        classNamePrefix="custom"
                        placeholder="Select"
@ -268,7 +264,21 @@ export default function StuffSearchCondition() {
                        onChange={onSelectionChange}
                        getOptionLabel={(x) => x.saleStoreName}
                        getOptionValue={(x) => x.saleStoreId}
-                        defaultValue={stuffSearch?.selObject?.value ? stuffSearch?.selObject : null}
+                        value={schSelSaleStoreList.filter(function (option) {
+                          if (stuffSearch?.code === 'S' && schSelSaleStoreId === '') {
+                            return false
+                          } else if (stuffSearch?.code === 'S' && schSelSaleStoreId !== '') {
+                            return option.saleStoreId === schSelSaleStoreId
+                          } else if (stuffSearch?.code === 'E' && schSelSaleStoreId !== '') {
+                            return option.saleStoreId === schSelSaleStoreId
+                          } else {
+                            if (stuffSearch?.schSelSaleStoreId !== '') {
+                              return option.saleStoreId === stuffSearch.schSelSaleStoreId
+                            } else {
+                              return false
+                            }
+                          }
+                        })}
                        isDisabled={sessionState?.storeLvl === '1' ? false : true}
                        isClearable={true}
                      />
--- a/src/components/management/popup/PlanRequestPop.jsx
+++ b/src/components/management/popup/PlanRequestPop.jsx
@ -20,8 +20,6 @@ export default function PlanRequestPop(props) {
  const [pageSize, setPageSize] = useState(20) //페이지 당 게시물 개수
  const [totalCount, setTotalCount] = useState(0) //총 갯수

-  const sessionState = useRecoilValue(sessionStore)
-
  const globalLocaleState = useRecoilValue(globalLocaleStore)

  const [planReqObject, setPlanReqObject] = useState({})
@ -103,10 +101,10 @@ export default function PlanRequestPop(props) {
  // 조회
  const onSubmit = (page, type) => {
    const params = {
-      saleStoreId: 'T100',
-      saleStoreLevel: '1',
-      // saleStoreId: sessionState?.storeId,
-      // saleStoreLevel: sessionState?.storeLvl,
+      // saleStoreId: 'T100',
+      // saleStoreLevel: '1',
+      saleStoreId: props?.otherSaleStoreId ? props.otherSaleStoreId : props.saleStoreId,
+      saleStoreLevel: props?.otherSaleStoreLevel ? props.otherSaleStoreLevel : props.saleStoreLevel,
      schPlanReqNo: planReqSearch?.schPlanReqNo ? planReqSearch.schPlanReqNo : schPlanReqNo,
      schTitle: planReqSearch?.schTitle ? planReqSearch.schTitle : schTitle,
      schAddress: planReqSearch?.schAddress ? planReqSearch.schAddress : schAddress,
@ -114,8 +112,8 @@ export default function PlanRequestPop(props) {
      schPlanReqName: planReqSearch?.schPlanReqName ? planReqSearch.schPlanReqName : schPlanReqName,
      schPlanStatCd: planReqSearch?.schPlanStatCd ? planReqSearch.schPlanStatCd : schPlanStatCd,
      schDateGbn: planReqSearch?.schDateGbn ? planReqSearch.schDateGbn : schDateGbn,
-      // schStartDt: dayjs(startDate).format('YYYY-MM-DD'),
-      // schEndDt: dayjs(endDate).format('YYYY-MM-DD'),
+      schStartDt: dayjs(startDate).format('YYYY-MM-DD'),
+      schEndDt: dayjs(endDate).format('YYYY-MM-DD'),
      startRow: type === 'S' ? (1 - 1) * pageSize + 1 : (page - 1) * pageSize + 1,
      endRow: type === 'S' ? 1 * pageSize : page * pageSize,
    }
@ -124,6 +122,7 @@ export default function PlanRequestPop(props) {
    } else {
      setPageNo(page)
    }
+    // console.log(params)

    const apiUrl = `/api/object/planReq/list?${queryStringFormatter(params)}`
    promiseGet({ url: apiUrl }).then((res) => {
@ -363,6 +362,8 @@ export default function PlanRequestPop(props) {
                        <td>
                          <div className="select-wrap">
                            <Select
+                              id="long-value-select1"
+                              instanceId="long-value-select1"
                              className="react-select-custom"
                              classNamePrefix="custom"
                              ref={ref}
--- a/src/components/myInfo/UserInfoModal.jsx
+++ b/src/components/myInfo/UserInfoModal.jsx
@ -150,7 +150,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal
                        <th>{getMessage('myinfo.info.userId')}</th>
                        <td>
                          <div className="input-wrap">
-                            <input type="text" className="input-light" value={userId} readOnly />
+                            <input type="text" className="input-light" value={userId || ''} readOnly />
                          </div>
                        </td>
                      </tr>
@ -158,7 +158,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal
                        <th>{getMessage('myinfo.info.nameKana')}</th>
                        <td>
                          <div className="input-wrap">
-                            <input type="text" className="input-light" value={info?.nameKana} readOnly />
+                            <input type="text" className="input-light" value={info?.nameKana || ''} readOnly />
                          </div>
                        </td>
                      </tr>
@ -166,7 +166,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal
                        <th>{getMessage('myinfo.info.name')}</th>
                        <td>
                          <div className="input-wrap">
-                            <input type="text" className="input-light" value={info?.name} readOnly />
+                            <input type="text" className="input-light" value={info?.name || ''} readOnly />
                          </div>
                        </td>
                      </tr>
@ -235,7 +235,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal
                        <th>{getMessage('myinfo.info.category')}</th>
                        <td>
                          <div className="input-wrap">
-                            <input type="text" className="input-light" value={info?.groupName} readOnly />
+                            <input type="text" className="input-light" value={info?.groupName || ''} readOnly />
                          </div>
                        </td>
                      </tr>
@ -243,7 +243,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal
                        <th>{getMessage('myinfo.info.tel')}</th>
                        <td>
                          <div className="input-wrap">
-                            <input type="text" className="input-light" value={info?.tel} readOnly />
+                            <input type="text" className="input-light" value={info?.tel || ''} readOnly />
                          </div>
                        </td>
                      </tr>
@ -251,7 +251,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal
                        <th>{getMessage('myinfo.info.fax')}</th>
                        <td>
                          <div className="input-wrap">
-                            <input type="text" className="input-light" value={info?.fax} readOnly />
+                            <input type="text" className="input-light" value={info?.fax || ''} readOnly />
                          </div>
                        </td>
                      </tr>
@ -259,7 +259,7 @@ export default function UserInfoModal({ userId, userInfoModal, setUserInfoModal
                        <th>{getMessage('myinfo.info.mail')}</th>
                        <td>
                          <div className="input-wrap">
-                            <input type="text" className="input-light" value={info?.mail} readOnly />
+                            <input type="text" className="input-light" value={info?.mail || ''} readOnly />
                          </div>
                        </td>
                      </tr>
--- a/src/hooks/object/useObjectBatch.js
+++ b/src/hooks/object/useObjectBatch.js
@ -4,14 +4,7 @@ import { useRecoilState, useRecoilValue } from 'recoil'
 import { canvasState } from '@/store/canvasAtom'
 import { INPUT_TYPE, BATCH_TYPE } from '@/common/common'
 import { useEvent } from '@/hooks/useEvent'
-import {
-  polygonToTurfPolygon,
-  rectToPolygon,
-  triangleToPolygon,
-  pointsToTurfPolygon,
-  splitDormerTriangle,
-  setSurfaceShapePattern,
-} from '@/util/canvas-util'
+import { polygonToTurfPolygon, rectToPolygon, triangleToPolygon, pointsToTurfPolygon, setSurfaceShapePattern } from '@/util/canvas-util'
 import { useSwal } from '@/hooks/useSwal'
 import * as turf from '@turf/turf'
 import { QPolygon } from '@/components/fabric/QPolygon'
@ -211,11 +204,13 @@ export function useObjectBatch() {
    const dormerName = buttonAct === 3 ? BATCH_TYPE.TRIANGLE_DORMER : BATCH_TYPE.PENTAGON_DORMER
    const dormerTempName = buttonAct === 3 ? BATCH_TYPE.TRIANGLE_DORMER_TEMP : BATCH_TYPE.PENTAGON_DORMER_TEMP
    const height = dormerPlacement.heightRef.current.value / 10
+    const width = dormerPlacement.widthRef.current.value / 10
    const pitch = dormerPlacement.pitchRef.current.value
-    const directionRef = dormerPlacement.directionRef.current
    const offsetRef = dormerPlacement.offsetRef.current.value === '' ? 0 : parseInt(dormerPlacement.offsetRef.current.value) / 10
+    const offsetWidthRef = dormerPlacement.offsetWidthRef.current.value === '' ? 0 : parseInt(dormerPlacement.offsetWidthRef.current.value) / 10
+    const directionRef = dormerPlacement.directionRef.current

-    let dormer, dormerOffset, isDown, selectedSurface
+    let dormer, dormerOffset, isDown, selectedSurface, pentagonPoints, pentagonOffsetPoints

    console.log('dormerPlacement', dormerPlacement)

@ -229,8 +224,6 @@ export function useObjectBatch() {
      const bottomLength = height / (pitch * 0.25)
      const bottomOffsetLength = (height + offsetRef) / (pitch * 0.25)

-      console.log(bottomOffsetLength)
-
      addCanvasMouseEventListener('mouse:move', (e) => {
        isDown = true
        if (!isDown) return
@ -305,16 +298,16 @@ export function useObjectBatch() {

      addCanvasMouseEventListener('mouse:up', (e) => {
        if (dormer) {
-          // const trianglePolygon = pointsToTurfPolygon(triangleToPolygon(dormer))
-          // const selectedSurfacePolygon = polygonToTurfPolygon(selectedSurface)
+          const trianglePolygon = pointsToTurfPolygon(triangleToPolygon(dormer))
+          const selectedSurfacePolygon = polygonToTurfPolygon(selectedSurface)

-          // //지붕 밖으로 그렸을때
-          // if (!turf.booleanWithin(trianglePolygon, selectedSurfacePolygon)) {
-          //   swalFire({ text: '개구를 배치할 수 없습니다.', icon: 'error' })
-          //   //일단 지워
-          //   deleteTempObjects()
-          //   return
-          // }
+          //지붕 밖으로 그렸을때
+          if (!turf.booleanWithin(trianglePolygon, selectedSurfacePolygon)) {
+            swalFire({ text: '개구를 배치할 수 없습니다.', icon: 'error' })
+            //일단 지워
+            deleteTempObjects()
+            return
+          }

          //각도 추가
          let originAngle = 0 //기본 남쪽
@ -387,6 +380,183 @@ export function useObjectBatch() {
          drawDirectionArrow(leftTriangle)
          drawDirectionArrow(rightTriangle)

+          isDown = false
+          initEvent()
+        }
+      })
+    } else if (buttonAct === 4) {
+      const heightLength = height - (width / 2) * (pitch * 0.25)
+      //(동의길이 깊이)+출폭(깊이)-[(입력한 폭값)/2+출폭(폭)]*(0.25*입력한 寸)
+      const heightOffsetLength = height + offsetRef - (width / 2 + offsetWidthRef) * (pitch * 0.25)
+
+      addCanvasMouseEventListener('mouse:move', (e) => {
+        isDown = true
+        if (!isDown) return
+
+        canvas?.remove(...canvas?.getObjects().filter((obj) => obj.name === dormerTempName)) //움직일때 일단 지워가면서 움직임
+        const pointer = canvas.getPointer(e.e)
+
+        surfaceShapePolygons.forEach((surface) => {
+          if (surface.inPolygon({ x: pointer.x, y: pointer.y })) {
+            selectedSurface = surface
+          }
+        })
+
+        let angle = 0
+        if (directionRef === 'left') {
+          //서
+          angle = 90
+        } else if (directionRef === 'right') {
+          //동
+          angle = 270
+        } else if (directionRef === 'up') {
+          //북
+          angle = 180
+        }
+
+        pentagonPoints = [
+          { x: pointer.x, y: pointer.y },
+          { x: pointer.x - width / 2, y: pointer.y + (height - heightLength) },
+          { x: pointer.x - width / 2, y: pointer.y + height },
+          { x: pointer.x + width / 2, y: pointer.y + height },
+          { x: pointer.x + width / 2, y: pointer.y + (height - heightLength) },
+        ]
+
+        pentagonOffsetPoints = [
+          { x: pointer.x, y: pointer.y },
+          { x: pointer.x - width / 2 - offsetWidthRef, y: pointer.y + height + offsetRef - heightOffsetLength },
+          { x: pointer.x - width / 2 - offsetWidthRef, y: pointer.y + height + offsetRef },
+          { x: pointer.x + width / 2 + offsetWidthRef, y: pointer.y + height + offsetRef },
+          { x: pointer.x + width / 2 + offsetWidthRef, y: pointer.y + height + offsetRef - heightOffsetLength },
+        ]
+
+        dormer = new QPolygon(pentagonPoints, {
+          fill: 'white',
+          stroke: 'red',
+          strokeDashArray: [5, 5],
+          strokeWidth: 1,
+          selectable: true,
+          lockMovementX: true,
+          lockMovementY: true,
+          lockRotation: true,
+          lockScalingX: true,
+          lockScalingY: true,
+          name: dormerTempName,
+          originX: 'center',
+          originY: 'top',
+          angle: angle,
+        })
+        canvas?.add(dormer)
+
+        if (offsetRef > 0 || offsetWidthRef > 0) {
+          dormerOffset = new QPolygon(pentagonOffsetPoints, {
+            fill: 'gray',
+            stroke: 'red',
+            strokeDashArray: [5, 5],
+            strokeWidth: 1,
+            selectable: true,
+            lockMovementX: true,
+            lockMovementY: true,
+            lockRotation: true,
+            lockScalingX: true,
+            lockScalingY: true,
+            name: dormerTempName,
+            originX: 'center',
+            originY: 'top',
+            angle: angle,
+          })
+          canvas?.add(dormerOffset)
+        }
+      })
+
+      addCanvasMouseEventListener('mouse:up', (e) => {
+        if (dormer) {
+          // const trianglePolygon = pointsToTurfPolygon(triangleToPolygon(dormer))
+          // const selectedSurfacePolygon = polygonToTurfPolygon(selectedSurface)
+
+          // //지붕 밖으로 그렸을때
+          // if (!turf.booleanWithin(trianglePolygon, selectedSurfacePolygon)) {
+          //   swalFire({ text: '개구를 배치할 수 없습니다.', icon: 'error' })
+          //   //일단 지워
+          //   deleteTempObjects()
+          //   return
+          // }
+
+          //각도 추가
+          let originAngle = 0 //기본 남쪽
+          let direction = 'south'
+
+          if (directionRef === 'left') {
+            //서
+            originAngle = 90
+            direction = 'west'
+          } else if (directionRef === 'right') {
+            //동
+            originAngle = 270
+            direction = 'east'
+          } else if (directionRef === 'up') {
+            //북
+            originAngle = 180
+            direction = 'north'
+          }
+
+          const offsetMode = offsetRef > 0 || offsetWidthRef > 0 ? 'offset' : 'normal'
+          let splitedPentagon =
+            offsetRef > 0 || offsetWidthRef > 0
+              ? splitDormerPentagon(dormerOffset, directionRef, offsetMode)
+              : splitDormerPentagon(dormer, directionRef, offsetMode)
+          canvas?.remove(offsetRef > 0 || offsetWidthRef > 0 ? dormerOffset : dormer)
+
+          if (offsetRef > 0)
+            dormer.set({
+              name: dormerName,
+              stroke: 'black',
+              strokeWidth: 1,
+              strokeDashArray: [0],
+            }) //오프셋이 있을땐 같이 도머로 만든다
+
+          const leftPentagon = new QPolygon(splitedPentagon[0], {
+            fill: 'transparent',
+            stroke: 'red',
+            strokeWidth: 1,
+            selectable: true,
+            lockMovementX: true, // X 축 이동 잠금
+            lockMovementY: true, // Y 축 이동 잠금
+            lockRotation: true, // 회전 잠금
+            viewLengthText: true,
+            fontSize: 14,
+            direction: direction,
+            originX: 'center',
+            originY: 'center',
+            name: dormerName,
+          })
+
+          const rightPentagon = new QPolygon(splitedPentagon[1], {
+            fill: 'transparent',
+            stroke: 'red',
+            strokeWidth: 1,
+            selectable: true,
+            lockMovementX: true, // X 축 이동 잠금
+            lockMovementY: true, // Y 축 이동 잠금
+            lockRotation: true, // 회전 잠금
+            viewLengthText: true,
+            fontSize: 14,
+            direction: direction,
+            originX: 'center',
+            originY: 'center',
+            name: dormerName,
+          })
+
+          canvas?.add(leftPentagon)
+          canvas?.add(rightPentagon)
+
+          //패턴
+          setSurfaceShapePattern(leftPentagon)
+          setSurfaceShapePattern(rightPentagon)
+          //방향
+          drawDirectionArrow(leftPentagon)
+          drawDirectionArrow(rightPentagon)
+
          isDown = false
          initEvent()
        }
@ -408,8 +578,140 @@ export function useObjectBatch() {
    initEvent() //이벤트 초기화
  }

+  const splitDormerTriangle = (triangle, direction) => {
+    const halfWidth = triangle.width / 2
+
+    let leftPoints = []
+    let rightPoints = []
+
+    if (direction === 'down') {
+      leftPoints = [
+        { x: triangle.left, y: triangle.top },
+        { x: triangle.left - halfWidth, y: triangle.top + triangle.height },
+        { x: triangle.left, y: triangle.top + triangle.height },
+      ]
+
+      rightPoints = [
+        { x: triangle.left, y: triangle.top },
+        { x: triangle.left, y: triangle.top + triangle.height },
+        { x: triangle.left + halfWidth, y: triangle.top + triangle.height },
+      ]
+    } else if (direction === 'up') {
+      leftPoints = [
+        { x: triangle.left, y: triangle.top },
+        { x: triangle.left - halfWidth, y: triangle.top - triangle.height },
+        { x: triangle.left, y: triangle.top - triangle.height },
+      ]
+
+      rightPoints = [
+        { x: triangle.left, y: triangle.top },
+        { x: triangle.left, y: triangle.top - triangle.height },
+        { x: triangle.left + halfWidth, y: triangle.top - triangle.height },
+      ]
+    } else if (direction === 'left') {
+      leftPoints = [
+        { x: triangle.left, y: triangle.top },
+        { x: triangle.left - triangle.height, y: triangle.top - halfWidth },
+        { x: triangle.left - triangle.height, y: triangle.top },
+      ]
+
+      rightPoints = [
+        { x: triangle.left, y: triangle.top },
+        { x: triangle.left - triangle.height, y: triangle.top },
+        { x: triangle.left - triangle.height, y: triangle.top + halfWidth },
+      ]
+    } else if (direction === 'right') {
+      leftPoints = [
+        { x: triangle.left, y: triangle.top },
+        { x: triangle.left + triangle.height, y: triangle.top },
+        { x: triangle.left + triangle.height, y: triangle.top + triangle.height },
+      ]
+
+      rightPoints = [
+        { x: triangle.left, y: triangle.top },
+        { x: triangle.left + triangle.height, y: triangle.top },
+        { x: triangle.left + triangle.height, y: triangle.top - triangle.height },
+      ]
+    }
+
+    return [leftPoints, rightPoints]
+  }
+
+  const splitDormerPentagon = (pentagon, direction, offsetMode) => {
+    const points = pentagon.points
+
+    console.log(pentagon.points)
+
+    let leftPoints = []
+    let rightPoints = []
+
+    if (direction === 'down') {
+      leftPoints = [
+        { x: points[0].x, y: points[0].y },
+        { x: points[1].x, y: points[1].y },
+        { x: points[2].x, y: points[2].y },
+        { x: points[0].x, y: points[3].y },
+      ]
+
+      rightPoints = [
+        { x: points[0].x, y: points[0].y },
+        { x: points[0].x, y: points[2].y },
+        { x: points[3].x, y: points[3].y },
+        { x: points[4].x, y: points[4].y },
+      ]
+    } else if (direction === 'up') {
+      leftPoints = [
+        { x: points[0].x, y: points[0].y },
+        { x: points[1].x, y: points[0].y - (points[1].y - points[0].y) },
+        { x: points[2].x, y: points[0].y - (points[2].y - points[0].y) },
+        { x: points[0].x, y: points[0].y - (points[2].y - points[0].y) },
+      ]
+
+      rightPoints = [
+        { x: points[0].x, y: points[0].y },
+        { x: points[3].x, y: points[0].y - (points[1].y - points[0].y) },
+        { x: points[3].x, y: points[0].y - (points[2].y - points[0].y) },
+        { x: points[0].x, y: points[0].y - (points[2].y - points[0].y) },
+      ]
+    } else if (direction === 'left') {
+      leftPoints = [
+        { x: points[0].x, y: points[0].y },
+        { x: points[0].x - (points[1].y - points[0].y), y: points[0].y - (points[0].x - points[1].x) },
+        { x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y - (points[0].x - points[1].x) },
+        { x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y },
+      ]
+
+      rightPoints = [
+        { x: points[0].x, y: points[0].y },
+        { x: points[0].x - (points[1].y - points[0].y), y: points[0].y + (points[0].x - points[1].x) },
+        { x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y + (points[0].x - points[1].x) },
+        { x: points[0].x - (points[1].y - points[0].y) - (points[2].y - points[1].y), y: points[0].y },
+      ]
+    } else if (direction === 'right') {
+      leftPoints = [
+        { x: points[0].x, y: points[0].y },
+        { x: points[0].x + (points[1].y - points[0].y), y: points[0].y + (points[0].x - points[1].x) },
+        { x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y + (points[0].x - points[1].x) },
+        { x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y },
+      ]
+
+      rightPoints = [
+        { x: points[0].x, y: points[0].y },
+        { x: points[0].x + (points[1].y - points[0].y), y: points[0].y - (points[0].x - points[1].x) },
+        { x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y - (points[0].x - points[1].x) },
+        { x: points[0].x + (points[1].y - points[0].y) + (points[2].y - points[1].y), y: points[0].y },
+      ]
+    }
+
+    console.log(leftPoints, rightPoints)
+
+    return [leftPoints, rightPoints]
+  }
+
  return {
    applyOpeningAndShadow,
    applyDormers,
+    splitDormerTriangle,
+    splitDormerPentagon,
  }
 }
--- a/src/store/stuffAtom.js
+++ b/src/store/stuffAtom.js
@ -18,10 +18,6 @@ export const stuffSearchState = atom({
    startRow: 1,
    endRow: 100,
    schSortType: 'R', //정렬조건 (R:최근등록일 U:최근수정일)
-    selObject: {
-      value: '',
-      label: '',
-    },
  },
  dangerouslyAllowMutability: true,
 })
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@ -981,16 +981,18 @@ input[type='text'] {
    color: #bbbbbb;
    font-weight: 400;
  }
-  .custom__clear-indicator,
-  .custom__indicator-separator {
-    display: none;
-  }
  .custom__indicator {
    padding: 0;
    svg {
      display: none;
    }
  }
+  .custom__clear-indicator {
+    width: 30px;
+    height: 100%;
+    background: url(../../public/static/images/common/select_del.svg) no-repeat center;
+    background-size: 8px 8px;
+  }
  .custom__dropdown-indicator {
    width: 30px;
    height: 100%;
--- a/src/util/canvas-util.js
+++ b/src/util/canvas-util.js
@ -744,67 +744,6 @@ export const polygonToTurfPolygon = (polygon) => {
  )
 }

-export const splitDormerTriangle = (triangle, direction) => {
-  const halfWidth = triangle.width / 2
-
-  let leftPoints = []
-  let rightPoints = []
-  let leftPointOffset = []
-  let rightPointOffset = []
-
-  if (direction === 'down') {
-    leftPoints = [
-      { x: triangle.left, y: triangle.top },
-      { x: triangle.left - halfWidth, y: triangle.top + triangle.height },
-      { x: triangle.left, y: triangle.top + triangle.height },
-    ]
-
-    rightPoints = [
-      { x: triangle.left, y: triangle.top },
-      { x: triangle.left, y: triangle.top + triangle.height },
-      { x: triangle.left + halfWidth, y: triangle.top + triangle.height },
-    ]
-  } else if (direction === 'up') {
-    leftPoints = [
-      { x: triangle.left, y: triangle.top },
-      { x: triangle.left - halfWidth, y: triangle.top - triangle.height },
-      { x: triangle.left, y: triangle.top - triangle.height },
-    ]
-
-    rightPoints = [
-      { x: triangle.left, y: triangle.top },
-      { x: triangle.left, y: triangle.top - triangle.height },
-      { x: triangle.left + halfWidth, y: triangle.top - triangle.height },
-    ]
-  } else if (direction === 'left') {
-    leftPoints = [
-      { x: triangle.left, y: triangle.top },
-      { x: triangle.left - triangle.height, y: triangle.top - halfWidth },
-      { x: triangle.left - triangle.height, y: triangle.top },
-    ]
-
-    rightPoints = [
-      { x: triangle.left, y: triangle.top },
-      { x: triangle.left - triangle.height, y: triangle.top },
-      { x: triangle.left - triangle.height, y: triangle.top + halfWidth },
-    ]
-  } else if (direction === 'right') {
-    leftPoints = [
-      { x: triangle.left, y: triangle.top },
-      { x: triangle.left + triangle.height, y: triangle.top },
-      { x: triangle.left + triangle.height, y: triangle.top + triangle.height },
-    ]
-
-    rightPoints = [
-      { x: triangle.left, y: triangle.top },
-      { x: triangle.left + triangle.height, y: triangle.top },
-      { x: triangle.left + triangle.height, y: triangle.top - triangle.height },
-    ]
-  }
-
-  return [leftPoints, rightPoints]
-}
-
 export const triangleToPolygon = (triangle) => {
  const points = []
  const halfWidth = triangle.width / 2
@ -853,7 +792,7 @@ export function setSurfaceShapePattern(polygon) {
  patternSourceCanvas.width = polygon.width * ratio
  patternSourceCanvas.height = polygon.height * ratio
  const ctx = patternSourceCanvas.getContext('2d')
-  const offset = roofStyle === 1 ? 0 : patternSize.width / 2
+  let offset = roofStyle === 1 ? 0 : patternSize.width / 2

  const rows = Math.floor(patternSourceCanvas.height / patternSize.height)
  const cols = Math.floor(patternSourceCanvas.width / patternSize.width)
@ -861,23 +800,46 @@ export function setSurfaceShapePattern(polygon) {
  ctx.strokeStyle = 'green'
  ctx.lineWidth = 0.4

-  for (let row = 0; row <= rows; row++) {
-    const y = row * patternSize.height
-
-    ctx.beginPath()
-    ctx.moveTo(0, y) // 선 시작점
-    ctx.lineTo(patternSourceCanvas.width, y) // 선 끝점
-    ctx.stroke()
-
+  if (polygon.direction === 'east' || polygon.direction === 'west') {
+    offset = roofStyle === 1 ? 0 : patternSize.height / 2
    for (let col = 0; col <= cols; col++) {
-      const x = col * patternSize.width + (row % 2 === 0 ? 0 : offset)
-      const yStart = row * patternSize.height
-      const yEnd = yStart + patternSize.height
-
+      const x = col * patternSize.width
+      const yStart = 0
+      const yEnd = patternSourceCanvas.height
      ctx.beginPath()
      ctx.moveTo(x, yStart) // 선 시작점
      ctx.lineTo(x, yEnd) // 선 끝점
      ctx.stroke()
+
+      for (let row = 0; row <= rows; row++) {
+        const y = row * patternSize.height + (col % 2 === 0 ? 0 : offset)
+        const xStart = col * patternSize.width
+        const xEnd = xStart + patternSize.width
+        ctx.beginPath()
+        ctx.moveTo(xStart, y) // 선 시작점
+        ctx.lineTo(xEnd, y) // 선 끝점
+        ctx.stroke()
+      }
+    }
+  } else {
+    for (let row = 0; row <= rows; row++) {
+      const y = row * patternSize.height
+
+      ctx.beginPath()
+      ctx.moveTo(0, y) // 선 시작점
+      ctx.lineTo(patternSourceCanvas.width, y) // 선 끝점
+      ctx.stroke()
+
+      for (let col = 0; col <= cols; col++) {
+        const x = col * patternSize.width + (row % 2 === 0 ? 0 : offset)
+        const yStart = row * patternSize.height
+        const yEnd = yStart + patternSize.height
+
+        ctx.beginPath()
+        ctx.moveTo(x, yStart) // 선 시작점
+        ctx.lineTo(x, yEnd) // 선 끝점
+        ctx.stroke()
+      }
    }
  }