Merge branch 'dev' of https://git.hanasys.jp/qcast3/onsitesurvey into feature/inquiry

2025-05-27 14:32:53 +09:00 · 2025-05-27 14:32:53 +09:00 · 84ebb8e021
commit 84ebb8e021
parent ff099f348e 014f473d85
30 changed files with 982 additions and 3800 deletions
--- a/.env.development
+++ b/.env.development
@ -2,16 +2,13 @@ NEXT_PUBLIC_RUN_MODE=development
 # 모바일 디바이스로 로컬 서버 확인하려면 자신 IP 주소로 변경
 # 다시 로컬에서 개발할때는 localhost로 변경
 #route handler
-NEXT_PUBLIC_API_URL=http://localhost:3000
+NEXT_PUBLIC_API_URL=http://172.30.1.65:3000

 #qsp 로그인 api
 NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120

 #1:1문의 api
-# NEXT_PUBLIC_INQUIRY_API_URL=http://1.248.227.176:38080
 NEXT_PUBLIC_INQUIRY_API_URL=http://172.23.4.129:8110
-# NEXT_PUBLIC_INQUIRY_API_URL=http://172.30.1.93:8120
-

 #QPARTNER 로그인 api
 DB_HOST=202.218.61.226
--- a/.env.localhost
+++ b/.env.localhost
@ -2,7 +2,7 @@ NEXT_PUBLIC_RUN_MODE=local
 # 모바일 디바이스로 로컬 서버 확인하려면 자신 IP 주소로 변경
 # 다시 로컬에서 개발할때는 localhost로 변경
 #route handler
-NEXT_PUBLIC_API_URL=http://localhost:3000
+NEXT_PUBLIC_API_URL=http://172.30.1.65:3000

 #qsp 로그인 api
 NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120
--- a/.env.production
+++ b/.env.production
@ -6,10 +6,8 @@ NEXT_PUBLIC_API_URL=http://1.248.227.176:3000
 NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120

 #1:1문의 api
-# NEXT_PUBLIC_INQUIRY_API_URL=http://1.248.227.176:38080
 NEXT_PUBLIC_INQUIRY_API_URL=http://172.23.4.129:8110

-
 #QPARTNER 로그인 api
 DB_HOST=202.218.61.226
 DB_USER=readonly
--- a/package-lock.json
+++ b/package-lock.json
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/app/api/suitable/list/route.ts
+++ b/src/app/api/suitable/list/route.ts
@ -41,7 +41,7 @@ export async function GET(request: NextRequest) {
    ) AS details 
      ON msm.id = details.main_id 
    WHERE 1=1
-      --roofMtCd AND msm.roof_mt_cd = ':roofMtCd'
+      --roofMtCd AND msm.roof_mt_cd IN (:roofMtCd)
      --productName AND msm.product_name LIKE '%:productName%'
    ORDER BY msm.product_name
    OFFSET (@P1 - 1) * @P2 ROWS
@ -50,8 +50,13 @@ export async function GET(request: NextRequest) {

    // 검색 조건 설정
    if (category) {
+      const roofMtQuery = `
+        SELECT roof_mt_cd
+        FROM ms_suitable_roof_material_group
+        WHERE roof_matl_grp_cd = ':roofMtGrpCd'
+      `
      query = query.replace('--roofMtCd ', '')
-      query = query.replace(':roofMtCd', category)
+      query = query.replace(':roofMtCd', roofMtQuery.replace(':roofMtGrpCd', category))
    }
    if (keyword) {
      query = query.replace('--productName ', '')
@ -60,6 +65,8 @@ export async function GET(request: NextRequest) {

    const suitable: Suitable[] = await prisma.$queryRawUnsafe(query, pageNumber, itemPerPage)

+    // console.log(`검색 조건 :::: 카테고리: ${category}, 키워드: ${keyword}`)
+
    return NextResponse.json(suitable)
  } catch (error) {
    console.error('❌ 데이터 조회 중 오류가 발생했습니다:', error)
--- a/src/app/api/suitable/pick/route.ts
+++ b/src/app/api/suitable/pick/route.ts
@ -0,0 +1,51 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { prisma } from '@/libs/prisma'
+
+export async function GET(request: NextRequest) {
+  try {
+    const searchParams = request.nextUrl.searchParams
+    const category = searchParams.get('category')
+    const keyword = searchParams.get('keyword')
+
+    let query = `
+    SELECT 
+      msm.id
+      , details.detail_id
+    FROM ms_suitable_main msm
+    LEFT JOIN (
+      SELECT
+        msd.main_id
+        , STRING_AGG(msd.id, ',') AS detail_id
+      FROM ms_suitable_detail msd
+      GROUP BY msd.main_id
+    ) AS details 
+      ON msm.id = details.main_id 
+    WHERE 1=1
+      --roofMtCd AND msm.roof_mt_cd IN (:roofMtCd)
+      --productName AND msm.product_name LIKE '%:productName%'
+    ;
+    `
+
+    // 검색 조건 설정
+    if (category) {
+      const roofMtQuery = `
+        SELECT roof_mt_cd
+        FROM ms_suitable_roof_material_group
+        WHERE roof_matl_grp_cd = ':roofMtGrpCd'
+      `
+      query = query.replace('--roofMtCd ', '')
+      query = query.replace(':roofMtCd', roofMtQuery.replace(':roofMtGrpCd', category))
+    }
+    if (keyword) {
+      query = query.replace('--productName ', '')
+      query = query.replace(':productName', keyword)
+    }
+
+    const suitableIdSet = await prisma.$queryRawUnsafe(query)
+
+    return NextResponse.json(suitableIdSet)
+  } catch (error) {
+    console.error('❌ 데이터 조회 중 오류가 발생했습니다:', error)
+    return NextResponse.json({ error: '데이터 조회 중 오류가 발생했습니다' }, { status: 500 })
+  }
+}
--- a/src/app/api/suitable/route.ts
+++ b/src/app/api/suitable/route.ts
@ -1,12 +1,63 @@
-import { NextResponse } from 'next/server'
+import { NextRequest, NextResponse } from 'next/server'
 import { prisma } from '@/libs/prisma'
+import { Suitable } from '@/types/Suitable'

-export async function POST(request: Request) {
-  const body = await request.json()
-  // @ts-ignore
-  const suitables = await prisma.MS_SUITABLE.createMany({
-    data: body,
-  })
+export async function GET(request: NextRequest) {
+  try {
+    const searchParams = request.nextUrl.searchParams

-  return NextResponse.json({ message: 'Suitable created successfully' })
+    const ids = searchParams.get('ids')
+    const detailIds = searchParams.get('subIds')
+
+    let query = `
+    SELECT 
+      msm.id
+      , msm.product_name
+      , msm.manu_ft_cd
+      , msm.roof_mt_cd
+      , msm.roof_sh_cd
+      , details.detail
+    FROM ms_suitable_main msm
+    LEFT JOIN (
+      SELECT
+        msd.main_id
+        , (
+          SELECT
+            msd_json.id
+            , msd_json.trestle_mfpc_cd
+            , msd_json.trestle_manufacturer_product_name
+            , msd_json.memo
+          FROM ms_suitable_detail msd_json
+            WHERE msd.main_id = msd_json.main_id
+          FOR JSON PATH
+        ) AS detail
+      FROM ms_suitable_detail msd
+      GROUP BY msd.main_id
+    ) AS details 
+      ON msm.id = details.main_id 
+        --ids AND details.main_id IN (:mainIds)
+        --detailIds AND details.id IN (:detailIds)
+    WHERE 1=1
+      --ids AND msm.id IN (:mainIds)
+    ORDER BY msm.product_name;
+    `
+
+    // 검색 조건 설정
+    if (ids) {
+      query = query.replaceAll('--ids ', '')
+      query = query.replaceAll(':mainIds', ids)
+      if (detailIds) {
+        query = query.replaceAll('--detailIds ', '')
+        query = query.replaceAll(':detailIds', detailIds)
+      }
+    }
+
+    const suitable: Suitable[] = await prisma.$queryRawUnsafe(query)
+
+    return NextResponse.json(suitable)
+  } catch (error) {
+    console.error('❌ 데이터 조회 중 오류가 발생했습니다:', error)
+    return NextResponse.json({ error: '데이터 조회 중 오류가 발생했습니다' }, { status: 500 })
+  }
 }
+
--- a/src/app/api/survey-sales/[id]/route.ts
+++ b/src/app/api/survey-sales/[id]/route.ts
@ -19,14 +19,16 @@ export async function GET(request: NextRequest, { params }: { params: Promise<{
  }
 }

-const getNewSrlNo = async (srlNo: string, storeId: string) => {
+const getNewSrlNo = async (srlNo: string, storeId: string, role: string) => {
+  const srlRole = role === 'T01' || role === 'Admin' ? 'HO' : role === 'Admin_Sub' || role === 'Builder' ? 'HM' : ''
+
  let newSrlNo = srlNo
  if (srlNo.startsWith('一時保存')) {
    //@ts-ignore
    const lastSurvey = await prisma.SD_SURVEY_SALES_BASIC_INFO.findFirst({
      where: {
        SRL_NO: {
-          startsWith: storeId,
+          startsWith: srlRole + storeId,
        },
      },
      orderBy: {
@ -34,7 +36,9 @@ const getNewSrlNo = async (srlNo: string, storeId: string) => {
      },
    })
    const lastNo = lastSurvey ? parseInt(lastSurvey.SRL_NO.slice(-3)) : 0
+
    newSrlNo =
+      srlRole +
      storeId +
      new Date().getFullYear().toString().slice(-2) +
      (new Date().getMonth() + 1).toString().padStart(2, '0') +
@ -51,7 +55,7 @@ export async function PUT(request: NextRequest, { params }: { params: Promise<{
    const { detailInfo, ...basicInfo } = body.survey

    // PUT 요청 시 임시저장 여부 확인 후 임시저장 시 기존 SRL_NO 사용, 기본 저장 시 새로운 SRL_NO 생성
-    const newSrlNo = body.isTemporary ? body.survey.srlNo : await getNewSrlNo(body.survey.srlNo, body.storeId)
+    const newSrlNo = body.isTemporary ? body.survey.srlNo : await getNewSrlNo(body.survey.srlNo, body.storeId, body.role)
    // @ts-ignore
    const survey = await prisma.SD_SURVEY_SALES_BASIC_INFO.update({
      where: { ID: Number(id) },
@ -112,9 +116,6 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
    const { id } = await params
    const body = await request.json()

-    // 제출 시 기존 SRL_NO 확인 후 '임시저장'으로 시작하면 새로운 SRL_NO 생성
-    const newSrlNo = await getNewSrlNo(body.srlNo, body.storeId)
-
    if (body.targetId) {
      // @ts-ignore
      const survey = await prisma.SD_SURVEY_SALES_BASIC_INFO.update({
@ -124,10 +125,9 @@ export async function PATCH(request: NextRequest, { params }: { params: Promise<
          SUBMISSION_DATE: new Date(),
          SUBMISSION_TARGET_ID: body.targetId,
          UPT_DT: new Date(),
-          SRL_NO: newSrlNo,
        },
      })
-      return NextResponse.json({ message: 'Survey confirmed successfully' })
+      return NextResponse.json({ message: 'Survey confirmed successfully', data: survey })
    }
  } catch (error) {
    console.error('Error updating survey:', error)
--- a/src/app/api/survey-sales/route.ts
+++ b/src/app/api/survey-sales/route.ts
@ -227,11 +227,21 @@ export async function POST(request: Request) {
  try {
    const body = await request.json()

-    // 임시 저장 시 임시저장 + 000 으로 저장
-    // 기본 저장 시 판매점ID + yyMMdd + 000 으로 저장
+    const role =
+      body.role === 'T01' || body.role === 'Admin'
+        ? 'HO'
+        : body.role === 'Admin_Sub' || body.role === 'Builder'
+        ? 'HM'
+        : body.role === 'Partner'
+        ? ''
+        : null
+
+    // 임시 저장 시 임시저장으로 저장
+    // 기본 저장 시 (HO/HM) + 판매점ID + yyMMdd + 000 으로 저장
    const baseSrlNo =
      body.survey.srlNo ??
-      body.storeId +
+      role +
+        body.storeId +
        new Date().getFullYear().toString().slice(-2) +
        (new Date().getMonth() + 1).toString().padStart(2, '0') +
        new Date().getDate().toString().padStart(2, '0')
@ -240,7 +250,7 @@ export async function POST(request: Request) {
    const lastSurvey = await prisma.SD_SURVEY_SALES_BASIC_INFO.findFirst({
      where: {
        SRL_NO: {
-          startsWith: body.storeId,
+          startsWith: role + body.storeId,
        },
      },
      orderBy: {
--- a/src/components/popup/SuitableDetailPopup.tsx
+++ b/src/components/popup/SuitableDetailPopup.tsx
@ -1,4 +1,40 @@
+'use client'
+
+import Image from 'next/image'
+import { useCallback, useEffect, useState } from 'react'
+import { usePopupController } from '@/store/popupController'
+import { useSuitableStore } from '@/store/useSuitableStore'
+import SuitableDetailPopupButton from './SuitableDetailPopupButton'
+import { useSuitable } from '@/hooks/useSuitable'
+import { Suitable } from '@/types/Suitable'
+
 export default function SuitableDetailPopup() {
+  const popupController = usePopupController()
+  const { getSuitableDetails, serializeSelectedItems } = useSuitable()
+  const { selectedItems } = useSuitableStore()
+
+  const [openItems, setOpenItems] = useState<Set<number>>(new Set())
+  const [suitableDetails, setSuitableDetails] = useState<Suitable[]>([])
+
+  // 아이템 열기/닫기
+  const toggleItemOpen = useCallback((itemId: number) => {
+    setOpenItems((prev) => {
+      const newOpenItems = new Set(prev)
+      newOpenItems.has(itemId) ? newOpenItems.delete(itemId) : newOpenItems.add(itemId)
+      return newOpenItems
+    })
+  }, [])
+
+  // 선택된 아이템 상세 데이터 가져오기
+  const getSelectedItemsData = async () => {
+    const serialized: Map<string, string> = serializeSelectedItems()
+    setSuitableDetails(await getSuitableDetails(serialized.get('ids') ?? '', serialized.get('detailIds') ?? ''))
+  }
+
+  useEffect(() => {
+    getSelectedItemsData()
+  }, [])
+
  return (
    <div className="modal-popup">
      <div className="modal-dialog">
@ -7,23 +43,109 @@ export default function SuitableDetailPopup() {
            <div className="modal-header-inner">
              <div className="modal-name-wrap">
                <div className="modal-img">
-                  <img src="/assets/images/layout/modal_header_icon03.svg" alt="" />
+                  <Image src="/assets/images/layout/modal_header_icon03.svg" width={22} height={22} alt="" />
                </div>
                <div className="modal-name">屋根材適合性詳細 </div>
              </div>
-              <button className="modal-close"></button>
+              <button className="modal-close" onClick={() => popupController.setSuitableDetailPopup(false)}></button>
            </div>
          </div>
          <div className="modal-body">
-            <div className={`compliance-check-bx act`}>
-              <div className="check-name-wrap">
-                <div className="check-name">アースティ４０</div>
-                <div className="check-name-btn">
-                  <button className="bx-btn"></button>
+            <div className="compliance-check-pop-wrap">
+              <div className={`compliance-check-bx ${openItems.has(1) ? 'act' : ''}`}>
+                <div className="check-name-wrap">
+                  <div className="check-name">アースティ４０</div>
+                  <div className="check-name-btn">
+                    <button className="bx-btn" onClick={() => toggleItemOpen(1)}></button>
+                  </div>
+                </div>
+                <div className="compliance-check-pop-contents">
+                  <div className="check-pop-data-wrap">
+                    <div className="check-pop-data-tit">屋根技研 支持瓦</div>
+                    <div className="check-pop-data-txt">㈱ダイトー</div>
+                  </div>
+                  <div className="check-pop-data-wrap">
+                    <div className="check-pop-data-tit">屋根材</div>
+                    <div className="check-pop-data-txt">瓦</div>
+                  </div>
+                  <div className="check-pop-data-wrap">
+                    <div className="check-pop-data-tit">金具タイプ</div>
+                    <div className="check-pop-data-txt">木ねじ打ち込み式</div>
+                  </div>
+                  <div className="check-pop-data-table-wrap">
+                    <div className="check-pop-data-table">
+                      <div className="pop-data-table-head">
+                        <div className="pop-data-table-head-name">屋根技研 支持瓦</div>
+                        <div className="pop-data-table-head-icon">
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="pop-data-table-body">Ｄで設置可</div>
+                      <div className="pop-data-table-footer">
+                        <div className="pop-data-table-footer-unit">備考</div>
+                        <div className="pop-data-table-footer-data">
+                          桟木なしの場合は支持金具平ー１で設置可能。その場合水返しが高い為、レベルプレート使用。桟木ありの場合は支持金具平ー２で設置可能
+                        </div>
+                      </div>
+                    </div>
+                    <div className="check-pop-data-table">
+                      <div className="pop-data-table-head">
+                        <div className="pop-data-table-head-name">屋根技研支持金具</div>
+                        <div className="pop-data-table-head-icon">
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="pop-data-table-body">設置不可</div>
+                      <div className="pop-data-table-footer">
+                        <div className="pop-data-table-footer-unit">備考</div>
+                        <div className="pop-data-table-footer-data">入手困難</div>
+                      </div>
+                    </div>
+                    <div className="check-pop-data-table">
+                      <div className="pop-data-table-head">
+                        <div className="pop-data-table-head-name">屋根技研YGアンカー</div>
+                        <div className="pop-data-table-head-icon">
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="pop-data-table-body">お問い合わせください</div>
+                      <div className="pop-data-table-footer">
+                        <div className="pop-data-table-footer-unit">備考</div>
+                        <div className="pop-data-table-footer-data">入手困難</div>
+                      </div>
+                    </div>
+                    <div className="check-pop-data-table">
+                      <div className="pop-data-table-head">
+                        <div className="pop-data-table-head-name">ダイドーハント支持瓦Ⅱ</div>
+                        <div className="pop-data-table-head-icon">
+                          <div className="compliance-icon">
+                            <Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
+                          </div>
+                        </div>
+                      </div>
+                      <div className="pop-data-table-body">Ⅳ (Ｄ) で設置可</div>
+                      <div className="pop-data-table-footer">
+                        <div className="pop-data-table-footer-unit">備考</div>
+                        <div className="pop-data-table-footer-data">入手困難</div>
+                      </div>
+                    </div>
+                  </div>
                </div>
              </div>
-              <div className="compliance-check-pop-contents"></div>
            </div>
+            <SuitableDetailPopupButton />
          </div>
        </div>
      </div>
--- a/src/components/popup/SuitableDetailPopupButton.tsx
+++ b/src/components/popup/SuitableDetailPopupButton.tsx
@ -0,0 +1,23 @@
+'use client'
+
+export default function SuitableDetailPopupButton() {
+  return (
+    <div className="btn-flex-wrap com">
+      <div className="btn-bx">
+        <button className="btn-frame n-blue icon">
+          閉じる<i className="btn-arr"></i>
+        </button>
+      </div>
+      <div className="btn-bx">
+        <button className="btn-frame red icon">
+          ウンロード<i className="btn-arr"></i>
+        </button>
+      </div>
+      <div className="btn-bx">
+        <button className="btn-frame n-blue icon">
+          1：1お問い合わせ<i className="btn-arr"></i>
+        </button>
+      </div>
+    </div>
+  )
+}
--- a/src/components/popup/SurveySaleSubmitPopup.tsx
+++ b/src/components/popup/SurveySaleSubmitPopup.tsx
@ -0,0 +1,151 @@
+import Image from 'next/image'
+import { usePopupController } from '@/store/popupController'
+import { useParams } from 'next/navigation'
+import { useServey } from '@/hooks/useSurvey'
+import { useState } from 'react'
+import { useSessionStore } from '@/store/session'
+
+interface SubmitFormData {
+  store: string
+  sender: string
+  receiver: string
+  reference: string
+  title: string
+  contents: string
+}
+
+interface FormField {
+  id: keyof SubmitFormData
+  name: string
+  required: boolean
+}
+
+const FORM_FIELDS: FormField[] = [
+  { id: 'store', name: '提出販売店', required: true },
+  { id: 'sender', name: '発送者', required: true },
+  { id: 'receiver', name: '受信者', required: true },
+  { id: 'reference', name: '参考', required: false },
+  { id: 'title', name: 'タイトル', required: true },
+  { id: 'contents', name: '内容', required: true },
+]
+
+export default function SurveySaleSubmitPopup() {
+  const popupController = usePopupController()
+  const { session } = useSessionStore()
+  const params = useParams()
+  const routeId = params.id
+
+  const [submitData, setSubmitData] = useState<SubmitFormData>({
+    store: '',
+    sender: session?.email ?? '',
+    receiver: '',
+    reference: '',
+    title: '[HANASYS現地調査] 調査物件が提出.',
+    contents: '',
+  })
+
+  const { submitSurvey, isSubmittingSurvey } = useServey(Number(routeId))
+
+  const handleInputChange = (field: keyof SubmitFormData, value: string) => {
+    setSubmitData((prev) => ({ ...prev, [field]: value }))
+  }
+
+  const validateData = (data: SubmitFormData): boolean => {
+    const requiredFields = FORM_FIELDS.filter((field) => field.required)
+
+    for (const field of requiredFields) {
+      if (!data[field.id].trim()) {
+        const element = document.getElementById(field.id)
+        if (element) {
+          element.focus()
+        }
+        alert(`${field.name}は必須入力項目です。`)
+        return false
+      }
+    }
+
+    return true
+  }
+
+  const handleSubmit = () => {
+    if (validateData(submitData)) {
+      window.neoConfirm('送信しますか？ 送信後は変更・修正することはできません。', () => {
+        submitSurvey({ targetId: submitData.store })
+        if (!isSubmittingSurvey) {
+          popupController.setSurveySaleSubmitPopup(false)
+        }
+      })
+    }
+  }
+
+  const handleClose = () => {
+    popupController.setSurveySaleSubmitPopup(false)
+  }
+
+  const renderFormField = (field: FormField) => {
+    // const isReadOnly = (field.id === 'store' && session?.role !== 'Partner') || (field.id === 'receiver' && session?.role !== 'Partner')
+    const isReadOnly = false
+
+    return (
+      <div className="data-input-form-bx" key={field.id}>
+        <div className="data-input-form-tit">
+          {field.name} {field.required && <i className="import">*</i>}
+        </div>
+        <div className="data-input">
+          {field.id === 'contents' ? (
+            <textarea
+              className="textarea-form"
+              id={field.id}
+              value={submitData[field.id]}
+              onChange={(e) => handleInputChange(field.id, e.target.value)}
+            />
+          ) : (
+            <input
+              className="input-frame"
+              type="text"
+              id={field.id}
+              value={submitData[field.id]}
+              onChange={(e) => handleInputChange(field.id, e.target.value)}
+              readOnly={isReadOnly}
+            />
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="modal-popup">
+      <div className="modal-dialog">
+        <div className="modal-content">
+          <div className="modal-header">
+            <div className="modal-header-inner">
+              <div className="modal-name-wrap">
+                <div className="modal-img">
+                  <Image src="/assets/images/layout/modal_header_icon04.svg" width={19} height={22} alt="" />
+                </div>
+                <div className="modal-name">調査物件の提出</div>
+              </div>
+              <button className="modal-close" onClick={handleClose}></button>
+            </div>
+          </div>
+          <div className="modal-body">
+            <div className="data-form-wrap">{FORM_FIELDS.map(renderFormField)}</div>
+            <div className="btn-flex-wrap">
+              <div className="btn-bx">
+                <button className="btn-frame n-blue icon" onClick={handleClose}>
+                  閉じる<i className="btn-arr"></i>
+                </button>
+              </div>
+              <div className="btn-bx">
+                <button className="btn-frame red icon" onClick={handleSubmit} disabled={isSubmittingSurvey}>
+                  転送<i className="btn-arr"></i>
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
--- a/src/components/popup/ZipCodePopup.tsx
+++ b/src/components/popup/ZipCodePopup.tsx
@ -18,21 +18,17 @@ type Address = {

 export default function ZipCodePopup() {
  const [searchValue, setSearchValue] = useState('') //search 데이터 유무
-  const [selected, setSelected] = useState('')
  const { setAddressData } = useAddressStore()
  const { getZipCode } = useServey()
  const [addressInfo, setAddressInfo] = useState<Address[] | null>([])

-  //search 데이터 value 추가
-
  const popupController = usePopupController()

-  const handleApply = () => {
-    console.log(addressInfo?.[0])
+  const handleApply = (item: Address) => {
    setAddressData({
-      post_code: addressInfo?.[0]?.zipcode || '',
-      address: addressInfo?.[0]?.address1 || '',
-      address_detail: addressInfo?.[0]?.address2 + ' ' + addressInfo?.[0]?.address3 || '',
+      post_code: item.zipcode || '',
+      address: item.address1 || '',
+      address_detail: item.address2 + ' ' + item.address3 || '',
    })
    popupController.setZipCodePopup(false)
  }
@ -71,7 +67,18 @@ export default function ZipCodePopup() {
              <div className="zip-code-search-wrap">
                <div className="zip-code-search-input">
                  <div className="search-input">
-                    <input type="text" className="search-frame" value={searchValue} placeholder="Search" onChange={handleChange} />
+                    <input
+                      type="text"
+                      className="search-frame"
+                      value={searchValue}
+                      placeholder="Search"
+                      onChange={handleChange}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                          handleSearch()
+                        }
+                      }}
+                    />
                    {/*input에 데이터 있으면 삭제버튼 보임 */}
                    {searchValue && <button className="del-icon" onClick={() => setSearchValue('')}></button>}
                    <button className="search-icon" onClick={handleSearch}></button>
@ -89,7 +96,12 @@ export default function ZipCodePopup() {
                    </thead>
                    <tbody>
                      {addressInfo?.map((item, index) => (
-                        <tr key={`${item.zipcode}-${index}`} onClick={() => setSelected(item.zipcode)}>
+                        <tr
+                          key={`${item.zipcode}-${index}`}
+                          onClick={() => {
+                            handleApply(item)
+                          }}
+                        >
                          <td>{item.address1}</td>
                          <td>{item.address2}</td>
                          <td>{item.address3}</td>
@ -97,18 +109,6 @@ export default function ZipCodePopup() {
                      ))}
                    </tbody>
                  </table>
-                  <div className="btn-flex-wrap">
-                    <div className="btn-bx">
-                      <button className="btn-frame red icon" onClick={handleApply}>
-                        住所の適用<i className="btn-arr"></i>
-                      </button>
-                    </div>
-                    <div className="btn-bx">
-                      <button className="btn-frame n-blue icon" onClick={() => popupController.setZipCodePopup(false)}>
-                        閉じる<i className="btn-arr"></i>
-                      </button>
-                    </div>
-                  </div>
                </div>
              </div>
            </div>
--- a/src/components/suitable/Suitable.tsx
+++ b/src/components/suitable/Suitable.tsx
@ -3,69 +3,24 @@
 import Image from 'next/image'
 import { useEffect, useState } from 'react'
 import SuitableList from './SuitableList'
+import SuitableSearch from './SuitableSearch'
 import { useSuitable } from '@/hooks/useSuitable'
-import { useSuitableStore } from '@/store/useSuitableStore'
-import type { CommCode } from '@/types/CommCode'
-import { SUITABLE_HEAD_CODE } from '@/types/Suitable'

 export default function Suitable() {
  const [reference, setReference] = useState(true)

-  const { getSuitableCommCode } = useSuitable()
-  const { suitableCommCode, selectedCategory, setSelectedCategory, searchValue, setSearchValue, setIsSearch, clearSelectedItems } = useSuitableStore()
-
-  const handleInputSearch = async () => {
-    if (!searchValue.trim()) {
-      alert('屋根材の製品名を入力してください。')
-      return
-    }
-    setIsSearch(true)
-  }
-
-  const handleInputClear = () => {
-    setSearchValue('')
-    setIsSearch(false)
-  }
+  const { getSuitableCommCode, clearSuitableSearch } = useSuitable()

  useEffect(() => {
    getSuitableCommCode()
    return () => {
-      setSelectedCategory('')
-      setSearchValue('')
-      clearSelectedItems()
+      clearSuitableSearch({ items: true, category: true, keyword: true })
    }
  }, [])

  return (
    <div className="border-frame">
-      <div className="sale-form-bx">
-        <select className="select-form" name="" id="" value={selectedCategory || ''} onChange={(e) => setSelectedCategory(e.target.value)}>
-          <option value="">屋根材を選択してください.</option>
-          {suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MT_CD)?.map((category: CommCode, index: number) => (
-            <option key={index} value={category.code}>
-              {category.codeJp}
-            </option>
-          ))}
-        </select>
-      </div>
-      <div className="sale-form-bx">
-        <div className="search-input">
-          <input
-            type="text"
-            className="search-frame"
-            placeholder="屋根材 製品名を入力してください."
-            value={searchValue}
-            onChange={(e) => setSearchValue(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === 'Enter') {
-                handleInputSearch()
-              }
-            }}
-          />
-          {searchValue && <button className="del-icon" onClick={handleInputClear} />}
-          <button className="search-icon" onClick={handleInputSearch} />
-        </div>
-      </div>
+      <SuitableSearch />
      <div className="compliance-check-wrap">
        <div className={`compliance-check-bx ${reference ? 'act' : ''}`}>
          <div className="check-name-wrap">
--- a/src/components/suitable/SuitableButton.tsx
+++ b/src/components/suitable/SuitableButton.tsx
@ -1,16 +1,42 @@
 'use client'

+import { usePopupController } from '@/store/popupController'
+import { useSuitable } from '@/hooks/useSuitable'
+import { useSuitableStore } from '@/store/useSuitableStore'
+
 export default function SuitableButton() {
+  const popupController = usePopupController()
+  const { getSuitableIds, clearSuitableSearch } = useSuitable()
+  const { selectedItems, addAllSelectedItem } = useSuitableStore()
+
+  const handleSelectAll = async () => {
+    addAllSelectedItem(await getSuitableIds())
+  }
+
+  const handleOpenPopup = () => {
+    if (selectedItems.size === 0) {
+      alert('屋根材を選択してください。')
+      return
+    }
+    popupController.setSuitableDetailPopup(true)
+  }
+
  return (
    <div className="float-btn-wrap">
      <div className="btn-flex-wrap com">
        <div className="btn-bx">
-          <button className="btn-frame n-blue icon">
-            全選択<i className="btn-arr"></i>
-          </button>
+          {selectedItems.size === 0 ? (
+            <button className="btn-frame n-blue icon" onClick={handleSelectAll}>
+              全選択<i className="btn-arr"></i>
+            </button>
+          ) : (
+            <button className="btn-frame n-blue icon" onClick={() => clearSuitableSearch({ items: true })}>
+              全て解除<i className="btn-arr"></i>
+            </button>
+          )}
        </div>
        <div className="btn-bx">
-          <button className="btn-frame red icon">
+          <button className="btn-frame red icon" onClick={handleOpenPopup}>
            詳細を見る<i className="btn-arr"></i>
          </button>
        </div>
--- a/src/components/suitable/SuitableList.tsx
+++ b/src/components/suitable/SuitableList.tsx
@ -117,7 +117,7 @@ export default function SuitableList() {
  )

  // 아이템 리스트
-  const suitableList = suitables?.pages.flat() ?? []
+  const suitableList = useMemo(() => suitables?.pages.flat() ?? [], [suitables?.pages])

  // Intersection Observer 설정
  useEffect(() => {
--- a/src/components/suitable/SuitableSearch.tsx
+++ b/src/components/suitable/SuitableSearch.tsx
@ -0,0 +1,76 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useSuitable } from '@/hooks/useSuitable'
+import { useSuitableStore } from '@/store/useSuitableStore'
+import type { CommCode } from '@/types/CommCode'
+import { SUITABLE_HEAD_CODE } from '@/types/Suitable'
+
+export default function SuitableSearch() {
+  const [searchValue, setSearchValue] = useState('')
+
+  const { getSuitableCommCode, clearSuitableSearch } = useSuitable()
+  const { suitableCommCode, selectedCategory, setSelectedCategory, setSearchKeyword } = useSuitableStore()
+
+  const handleInputChange = (value: string) => {
+    if (Array.from(value).length > 30) {
+      alert('検索ワードは最大30文字まで入力できます。')
+      setSearchValue(value.slice(0, 30))
+      return
+    }
+    setSearchValue(value)
+  }
+
+  const handleInputSearch = async () => {
+    if (!searchValue.trim()) {
+      alert('屋根材の製品名を入力してください。')
+      return
+    }
+    setSearchKeyword(searchValue)
+  }
+
+  const handleInputClear = () => {
+    setSearchValue('')
+    clearSuitableSearch({ items: true, keyword: true })
+  }
+
+  useEffect(() => {
+    getSuitableCommCode()
+    return () => {
+      clearSuitableSearch({ items: true, category: true, keyword: true })
+    }
+  }, [])
+
+  return (
+    <>
+      <div className="sale-form-bx">
+        <select className="select-form" name="" id="" value={selectedCategory || ''} onChange={(e) => setSelectedCategory(e.target.value)}>
+          <option value="">屋根材を選択してください.</option>
+          {suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MATERIAL_GROUP)?.map((category: CommCode, index: number) => (
+            <option key={index} value={category.code}>
+              {category.codeJp}
+            </option>
+          ))}
+        </select>
+      </div>
+      <div className="sale-form-bx">
+        <div className="search-input">
+          <input
+            type="text"
+            className="search-frame"
+            placeholder="屋根材 製品名を入力してください."
+            value={searchValue}
+            onChange={(e) => handleInputChange(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter') {
+                handleInputSearch()
+              }
+            }}
+          />
+          {searchValue && <button className="del-icon" onClick={handleInputClear} />}
+          <button className="search-icon" onClick={handleInputSearch} />
+        </div>
+      </div>
+    </>
+  )
+}
--- a/src/components/survey-sale/detail/BasicForm.tsx
+++ b/src/components/survey-sale/detail/BasicForm.tsx
@ -141,7 +141,7 @@ export default function BasicForm(props: { basicInfo: SurveyBasicRequest; setBas
                <div className="form-flex">
                  {/* 우편번호 */}
                  <div className="form-bx">
-                    <input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={basicInfo?.postCode ?? ''} disabled />
+                    <input type="text" className="input-frame" readOnly={true} defaultValue={basicInfo?.postCode ?? ''} />
                  </div>
                  {/* 도도부현 */}
                  <div className="form-bx">
@ -149,11 +149,13 @@ export default function BasicForm(props: { basicInfo: SurveyBasicRequest; setBas
                  </div>
                </div>
                {/* 주소 */}
-                <div className="form-btn">
-                  <button className="btn-frame n-blue icon" onClick={() => popupController.setZipCodePopup(true)}>
-                    郵便番号<i className="btn-arr"></i>
-                  </button>
-                </div>
+                {mode !== 'READ' && (
+                  <div className="form-btn">
+                    <button className="btn-frame n-blue icon" onClick={() => popupController.setZipCodePopup(true)}>
+                      郵便番号<i className="btn-arr"></i>
+                    </button>
+                  </div>
+                )}
              </div>

              <div className="data-input-form-bx">
--- a/src/components/survey-sale/detail/ButtonForm.tsx
+++ b/src/components/survey-sale/detail/ButtonForm.tsx
@ -5,6 +5,7 @@ import { useSessionStore } from '@/store/session'
 import { useEffect, useState } from 'react'
 import { useParams, useRouter, useSearchParams } from 'next/navigation'
 import { requiredFields, useServey } from '@/hooks/useSurvey'
+import { usePopupController } from '@/store/popupController'

 export default function ButtonForm(props: {
  mode: Mode
@ -22,14 +23,12 @@ export default function ButtonForm(props: {
  const params = useParams()
  const routeId = params.id

+  const popupController = usePopupController()
  // ------------------------------------------------------------
  const [saveData, setSaveData] = useState({
    ...props.data.basic,
    detailInfo: props.data.roof,
  })
-
-  // !!!!!!!!!!
-  const [tempTargetId, setTempTargetId] = useState('')
  // --------------------------------------------------------------
  // 권한

@ -73,8 +72,8 @@ export default function ButtonForm(props: {
  // 저장/임시저장/수정
  const id = Number(routeId) ? Number(routeId) : Number(idParam)

-  const { deleteSurvey, submitSurvey, updateSurvey } = useServey(Number(id))
-  const { validateSurveyDetail, createSurvey } = useServey()
+  const { deleteSurvey, updateSurvey, isDeletingSurvey, isUpdatingSurvey } = useServey(Number(id))
+  const { validateSurveyDetail, createSurvey, isCreatingSurvey } = useServey()

  const handleSave = (isTemporary: boolean, isSubmitProcess = false) => {
    const emptyField = validateSurveyDetail(props.data.roof)
@ -112,35 +111,19 @@ export default function ButtonForm(props: {
  const saveProcess = async (emptyField: string | null, isSubmitProcess?: boolean) => {
    if (emptyField?.trim() === '') {
      if (idParam) {
-        if (isSubmitProcess) {
-          const updatedData = {
-            ...saveData,
-            submissionStatus: true,
-            submissionDate: new Date().toISOString(),
-            submissionTargetId: tempTargetId,
-          }
-          await updateSurvey({ survey: updatedData, isTemporary: false, storeId: session.storeId ?? '' })
-          router.push(`/survey-sale/${idParam}`)
-        } else {
-          await updateSurvey({ survey: saveData, isTemporary: false, storeId: session.storeId ?? '' })
-          router.push(`/survey-sale/${idParam}`)
+        await updateSurvey({ survey: saveData, isTemporary: false, storeId: session.storeId ?? '' })
+        router.push(`/survey-sale/${idParam}`)
+      } else {
+        const id = await createSurvey(saveData)
+        router.push(`/survey-sale/${id}`)
+      }
+      if (isSubmitProcess) {
+        if (!isCreatingSurvey && !isUpdatingSurvey) {
+          popupController.setSurveySaleSubmitPopup(true)
        }
      } else {
-        if (isSubmitProcess) {
-          const updatedData = {
-            ...saveData,
-            submissionStatus: true,
-            submissionDate: new Date().toISOString(),
-            submissionTargetId: tempTargetId,
-          }
-          const id = await createSurvey(updatedData)
-          submitProcess(id)
-        } else {
-          const id = await createSurvey(saveData)
-          router.push(`/survey-sale/${id}`)
-        }
+        alert('保存されました。')
      }
-      alert('保存されました。')
    } else {
      if (emptyField?.includes('Unit')) {
        alert('電気契約容量の単位を入力してください。')
@ -158,34 +141,30 @@ export default function ButtonForm(props: {
    if (routeId) {
      window.neoConfirm('削除しますか？', async () => {
        await deleteSurvey()
-        router.push('/survey-sale')
+        if (!isDeletingSurvey) {
+          alert('削除されました。')
+          router.push('/survey-sale')
+        }
      })
    }
  }

  const handleSubmit = async () => {
-    if (props.data.basic.srlNo?.startsWith('一時保存')) {
+    if (props.data.basic.srlNo?.startsWith('一時保存') && Number(routeId)) {
      alert('一時保存されたデータは提出できません。')
      return
    }
-    if (tempTargetId.trim() === '') {
-      alert('提出対象店舗を入力してください。')
-      return
-    }
-    window.neoConfirm('提出しますか？', async () => {
-      if (Number(routeId)) {
-        submitProcess()
-      } else {
+    if (Number(routeId)) {
+      window.neoConfirm('提出しますか？', async () => {
+        popupController.setSurveySaleSubmitPopup(true)
+      })
+    } else {
+      window.neoConfirm('記入した情報を保存して送信しますか？', async () => {
        handleSave(false, true)
-      }
-    })
+      })
+    }
  }

-  const submitProcess = async (saveId?: number) => {
-    await submitSurvey({ saveId: saveId, targetId: tempTargetId, storeId: session.storeId ?? '', srlNo: '一時保存' })
-    alert('提出されました。')
-    router.push('/survey-sale')
-  }
  // ------------------------------------------------------------

  if (mode === 'READ' && isSubmit && isSubmiter) {
@ -208,7 +187,7 @@ export default function ButtonForm(props: {
            <ListButton />
            <EditButton setMode={setMode} id={id.toString()} mode={mode} />
            {(isWriter || !isSubmiter) && <DeleteButton handleDelete={handleDelete} />}
-            {!isSubmit && isSubmiter && <SubmitButton handleSubmit={handleSubmit} setTempTargetId={setTempTargetId} />}
+            {!isSubmit && isSubmiter && <SubmitButton handleSubmit={handleSubmit} />}
          </div>
        </div>
      )}
@ -219,7 +198,7 @@ export default function ButtonForm(props: {
            <ListButton />
            <TempButton setMode={setMode} handleSave={handleSave} />
            <SaveButton handleSave={handleSave} />
-            {session?.role !== 'T01' && <SubmitButton handleSubmit={handleSubmit} setTempTargetId={setTempTargetId} />}{' '}
+            {session?.role !== 'T01' && <SubmitButton handleSubmit={handleSubmit} />}
          </div>
        </div>
      )}
@ -259,8 +238,8 @@ function EditButton(props: { setMode: (mode: Mode) => void; id: string; mode: Mo
  )
 }

-function SubmitButton(props: { handleSubmit: () => void; setTempTargetId: (targetId: string) => void }) {
-  const { handleSubmit, setTempTargetId } = props
+function SubmitButton(props: { handleSubmit: () => void }) {
+  const { handleSubmit } = props
  return (
    <>
      <div className="btn-bx">
@ -269,9 +248,6 @@ function SubmitButton(props: { handleSubmit: () => void; setTempTargetId: (targe
          提出<i className="btn-arr"></i>
        </button>
      </div>
-      <div>
-        <input type="text" placeholder="temp target id" onChange={(e) => setTempTargetId(e.target.value)} />
-      </div>
    </>
  )
 }
--- a/src/components/survey-sale/detail/DataTable.tsx
+++ b/src/components/survey-sale/detail/DataTable.tsx
@ -54,9 +54,10 @@ export default function DataTable() {
              <td>
                {surveyDetail?.submissionStatus && surveyDetail?.submissionDate ? (
                  <>
-                    {/* TODO: 제출한 판매점 ID 추가 필요 */}
                    <div>{new Date(surveyDetail.submissionDate).toLocaleString()}</div>
-                    <div>{surveyDetail.store}</div>
+                    <div>
+                      ({surveyDetail.store} - {surveyDetail.storeId})
+                    </div>
                  </>
                ) : (
                  '-'
--- a/src/components/survey-sale/detail/DetailForm.tsx
+++ b/src/components/survey-sale/detail/DetailForm.tsx
@ -1,11 +1,11 @@
 'use client'

-import type { Mode, SurveyBasicInfo, SurveyBasicRequest, SurveyDetailRequest } from '@/types/Survey'
+import type { Mode, SurveyBasicRequest, SurveyDetailRequest } from '@/types/Survey'
 import { useEffect, useState } from 'react'
 import ButtonForm from './ButtonForm'
 import BasicForm from './BasicForm'
 import RoofForm from './RoofForm'
-import { useParams, useRouter, useSearchParams } from 'next/navigation'
+import { useParams, useSearchParams } from 'next/navigation'
 import { useServey } from '@/hooks/useSurvey'

 const roofInfoForm: SurveyDetailRequest = {
--- a/src/components/survey-sale/detail/RoofForm.tsx
+++ b/src/components/survey-sale/detail/RoofForm.tsx
@ -265,11 +265,12 @@ export default function RoofForm(props: {
            <div className="data-input-form-bx">
              {/* 전기 계약 용량 */}
              <div className="data-input-form-tit">電気契約容量</div>
-              {mode === 'READ' && <input type="text" className="input-frame" value={roofInfo?.contractCapacity ?? ''} disabled={mode === 'READ'} />}
+              {mode === 'READ' && <input type="text" className="input-frame" value={roofInfo?.contractCapacity ?? ''} readOnly={mode === 'READ'} />}
              {mode !== 'READ' && (
                <div className="data-input mb5">
                  <input
                    type="number"
+                    inputMode="numeric"
                    id="contractCapacity"
                    className="input-frame"
                    value={roofInfo?.contractCapacity?.split(' ')[0] ?? ''}
@ -343,11 +344,13 @@ export default function RoofForm(props: {
              </div>
            </div>
            <div className="data-input-form-bx">
-              {/* 지붕 경사도도 */}
+              {/* 지붕 경사도 */}
              <div className="data-input-form-tit">屋根の斜面</div>
              <div className="data-input flex">
                <input
                  type="number"
+                  inputMode="numeric"
+                  id="roofSlope"
                  className="input-frame"
                  value={roofInfo?.roofSlope ?? ''}
                  disabled={mode === 'READ'}
@ -388,28 +391,32 @@ export default function RoofForm(props: {
              </div>
            </div>
            <div className="data-input-form-bx">
-              {/* 노지판 종류류 */}
+              {/* 노지판 종류 */}
              <div className="data-input-form-tit">路地板の種類</div>
              <div className="data-input mb5">
                <SelectedBox mode={mode} column="openFieldPlateKind" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
              </div>
            </div>
-            <div className="data-input-form-bx">
-              {/* 노지판 두께 */}
-              <div className="data-input-form-tit">
-                路地板厚<span>※小幅板を選択した場合, 厚さ. 小幅板間の間隔寸法を記載</span>
+            {roofInfo.openFieldPlateKind === '4' && (
+              <div className="data-input-form-bx">
+                {/* 노지판 두께 */}
+                <div className="data-input-form-tit">
+                  路地板厚<span>※小幅板を選択した場合, 厚さ. 小幅板間の間隔寸法を記載</span>
+                </div>
+                <div className="data-input flex">
+                  <input
+                    type="number"
+                    inputMode="numeric"
+                    id="openFieldPlateThickness"
+                    className="input-frame"
+                    value={roofInfo?.openFieldPlateThickness ?? ''}
+                    disabled={mode === 'READ'}
+                    onChange={(e) => handleNumberInput('openFieldPlateThickness', e.target.value)}
+                  />
+                  <span>mm</span>
+                </div>
              </div>
-              <div className="data-input flex">
-                <input
-                  type="text"
-                  className="input-frame"
-                  value={roofInfo?.openFieldPlateThickness ?? ''}
-                  disabled={mode === 'READ'}
-                  onChange={(e) => handleNumberInput('openFieldPlateThickness', e.target.value)}
-                />
-                <span>mm</span>
-              </div>
-            </div>
+            )}
            <div className="data-input-form-bx">
              {/* 누수 흔적 */}
              <div className="data-input-form-tit ">水漏れの痕跡</div>
@ -516,7 +523,7 @@ const SelectedBox = ({
        name={column}
        id={column}
        disabled={mode === 'READ'}
-        value={selectedId ? Number(selectedId) : etcValue ? 'etc' : ''}
+        value={selectedId ? Number(selectedId) : etcValue || isEtcSelected ? 'etc' : ''}
        onChange={handleSelectChange}
      >
        {selectBoxOptions[column as keyof typeof selectBoxOptions].map((item) => (
@ -536,11 +543,12 @@ const SelectedBox = ({
      <div className={`data-input ${column === 'constructionYear' ? 'flex' : ''}`}>
        <input
          type={column === 'constructionYear' ? 'number' : 'text'}
+          inputMode={column === 'constructionYear' ? 'numeric' : 'text'}
          className="input-frame"
          placeholder="-"
          value={detailInfoData[`${column}Etc` as keyof SurveyDetailInfo]?.toString() ?? ''}
          onChange={handleEtcInputChange}
-          disabled={isInputDisabled()}
+          readOnly={isInputDisabled()}
        />
        {column === 'constructionYear' && <span>年</span>}
      </div>
@ -644,7 +652,7 @@ const RadioSelected = ({
            placeholder="-"
            value={detailInfoData[`${column}Etc` as keyof SurveyDetailInfo]?.toString() ?? ''}
            onChange={handleEtcInputChange}
-            disabled={isInputDisabled()}
+            readOnly={isInputDisabled()}
          />
        </div>
      )}
@ -678,7 +686,7 @@ const MultiCheck = ({
      newValue = selectedValues.filter((v) => v !== String(id))
    } else {
      if (isRoofMaterial) {
-        const totalSelected = selectedValues.length + (isOtherSelected ? 1 : 0)
+        const totalSelected = selectedValues.length + (isOtherSelected || isOtherCheck ? 1 : 0)
        if (totalSelected >= 2) {
          alert('屋根材は最大2個まで選択できます。')
          return
@ -749,7 +757,7 @@ const MultiCheck = ({
          placeholder="-"
          value={roofInfo[`${column}Etc` as keyof SurveyDetailInfo]?.toString() ?? ''}
          onChange={handleOtherInputChange}
-          disabled={isInputDisabled()}
+          readOnly={isInputDisabled()}
        />
      </div>
    </>
--- a/src/components/survey-sale/list/SearchForm.tsx
+++ b/src/components/survey-sale/list/SearchForm.tsx
@ -6,7 +6,7 @@ import { useState } from 'react'

 export default function SearchForm({ memberRole, userId }: { memberRole: string; userId: string }) {
  const router = useRouter()
-  const { setSearchOption, setSort, setIsMySurvey, setKeyword, reset, isMySurvey, keyword, searchOption, sort } = useSurveyFilterStore()
+  const { setSearchOption, setSort, setIsMySurvey, setKeyword, reset, isMySurvey, keyword, searchOption, sort, setOffset } = useSurveyFilterStore()
  const [searchKeyword, setSearchKeyword] = useState(keyword)
  const [option, setOption] = useState(searchOption)

@ -60,6 +60,10 @@ export default function SearchForm({ memberRole, userId }: { memberRole: string;
            value={searchKeyword}
            placeholder="タイトルを入力してください. (2文字以上)"
            onChange={(e) => {
+              if (e.target.value.length > 30) {
+                alert('30文字以内で入力してください')
+                return
+              }
              setSearchKeyword(e.target.value)
            }}
            onKeyDown={(e) => {
@ -78,6 +82,7 @@ export default function SearchForm({ memberRole, userId }: { memberRole: string;
            id="ch01"
            checked={isMySurvey === userId}
            onChange={() => {
+              setOffset(0)
              setIsMySurvey(isMySurvey === userId ? null : userId)
            }}
          />
@ -91,6 +96,7 @@ export default function SearchForm({ memberRole, userId }: { memberRole: string;
          id="sort-option"
          value={sort}
          onChange={(e) => {
+            setOffset(0)
            setSort(e.target.value as 'created' | 'updated')
          }}
        >
--- a/src/components/ui/PopupController.tsx
+++ b/src/components/ui/PopupController.tsx
@ -7,6 +7,7 @@ import ZipCodePopup from '../popup/ZipCodePopup'
 import Alert from './common/Alert'
 import DoubleBtnAlert from './common/DoubleBtnAlert'
 import SuitableDetailPopup from '../popup/SuitableDetailPopup'
+import SurveySaleSubmitPopup from '../popup/SurveySaleSubmitPopup'

 export default function PopupController() {
  const popupController = usePopupController()
@ -15,9 +16,10 @@ export default function PopupController() {
    <>
      {popupController.memberInfomationPopup && <MemberInfomationPopup />}
      {popupController.zipCodePopup && <ZipCodePopup />}
+      {popupController.suitableDetailPopup && <SuitableDetailPopup />}
+      {popupController.surveySaleSubmitPopup && <SurveySaleSubmitPopup />}
      {popupController.alert && <Alert />}
      {popupController.alert2 && <DoubleBtnAlert />}
-      {popupController.suitableDetailPopup && <SuitableDetailPopup />}
    </>
  )
 }
--- a/src/hooks/useSuitable.ts
+++ b/src/hooks/useSuitable.ts
@ -3,21 +3,29 @@ import { transformObjectKeys } from '@/libs/axios'
 import { useSuitableStore } from '@/store/useSuitableStore'
 import { useAxios } from './useAxios'
 import { useCommCode } from './useCommCode'
-import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'
+import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail, type SuitableIds } from '@/types/Suitable'

 export function useSuitable() {
  const { axiosInstance } = useAxios()
  const { getCommCode } = useCommCode()
-  const { itemPerPage, selectedCategory, searchValue, suitableCommCode, setSuitableCommCode, isSearch } = useSuitableStore()
+  const {
+    itemPerPage,
+    suitableCommCode,
+    setSuitableCommCode,
+    selectedCategory,
+    clearSelectedCategory,
+    searchKeyword,
+    clearSearchKeyword,
+    selectedItems,
+    clearSelectedItems,
+  } = useSuitableStore()

  const getSuitables = async ({
    pageNumber,
-    ids,
    category,
    keyword,
  }: {
    pageNumber?: number
-    ids?: string
    category?: string
    keyword?: string
  }): Promise<Suitable[]> => {
@ -26,7 +34,6 @@ export function useSuitable() {
        pageNumber: pageNumber || 1,
        itemPerPage: itemPerPage,
      }
-      if (ids) params.ids = ids
      if (category) params.category = category
      if (keyword) params.keyword = keyword

@ -38,6 +45,31 @@ export function useSuitable() {
    }
  }

+  const getSuitableIds = async (): Promise<SuitableIds[]> => {
+    try {
+      const params: Record<string, string> = {}
+      if (selectedCategory) params.category = selectedCategory
+      if (searchKeyword) params.keyword = searchKeyword
+      const response = await axiosInstance(null).get<SuitableIds[]>('/api/suitable/pick', { params })
+      return response.data
+    } catch (error) {
+      console.error('지붕재 아이디 로드 실패:', error)
+      return []
+    }
+  }
+
+  const getSuitableDetails = async (ids: string, detailIds?: string): Promise<Suitable[]> => {
+    try {
+      const params: Record<string, string> = { ids: ids }
+      if (detailIds) params.detailIds = detailIds
+      const response = await axiosInstance(null).get<Suitable[]>('/api/suitable', { params })
+      return response.data
+    } catch (error) {
+      console.error('지붕재 상세 데이터 로드 실패:', error)
+      return []
+    }
+  }
+
  const getSuitableCommCode = () => {
    const headCodes = Object.values(SUITABLE_HEAD_CODE) as SUITABLE_HEAD_CODE[]
    for (const code of headCodes) {
@ -83,13 +115,14 @@ export function useSuitable() {
    isError,
    error,
  } = useInfiniteQuery<Suitable[]>({
-    queryKey: ['suitables', 'list', selectedCategory, isSearch],
+    queryKey: ['suitables', 'list', selectedCategory, searchKeyword],
    queryFn: async (context) => {
      const pageParam = context.pageParam as number
+      if (pageParam === 1) clearSuitableSearch({ items: true })
      return await getSuitables({
        pageNumber: pageParam,
        ...(selectedCategory && { category: selectedCategory }),
-        ...(isSearch && { keyword: searchValue }),
+        ...(searchKeyword && { keyword: searchKeyword }),
      })
    },
    getNextPageParam: (lastPage: Suitable[], allPages: Suitable[][]) => {
@ -98,10 +131,32 @@ export function useSuitable() {
    initialPageParam: 1,
    staleTime: 1000 * 60 * 10,
    gcTime: 1000 * 60 * 10,
+    enabled: selectedCategory !== '' || searchKeyword !== '',
  })

+  const serializeSelectedItems = (): Map<string, string> => {
+    const ids: string[] = []
+    const detailIds: string[] = []
+    for (const [key, value] of selectedItems) {
+      ids.push(String(key))
+      for (const id of value) detailIds.push(String(id))
+    }
+    return new Map<string, string>([
+      ['ids', ids.join(',')],
+      ['detailIds', detailIds.join(',')],
+    ])
+  }
+
+  const clearSuitableSearch = ({ items = false, category = false, keyword = false }: { items?: boolean; category?: boolean; keyword?: boolean }) => {
+    if (items) clearSelectedItems()
+    if (category) clearSelectedCategory()
+    if (keyword) clearSearchKeyword()
+  }
+
  return {
    getSuitables,
+    getSuitableIds,
+    getSuitableDetails,
    getSuitableCommCode,
    toCodeName,
    toSuitableDetail,
@ -111,5 +166,7 @@ export function useSuitable() {
    hasNextPage,
    isFetchingNextPage,
    isLoading,
+    serializeSelectedItems,
+    clearSuitableSearch,
  }
 }
--- a/src/hooks/useSurvey.ts
+++ b/src/hooks/useSurvey.ts
@ -1,4 +1,4 @@
-import type { SurveyBasicInfo, SurveyDetailInfo, SurveyDetailRequest, SurveyDetailCoverRequest, SurveyRegistRequest } from '@/types/Survey'
+import type { SurveyBasicInfo, SurveyDetailRequest, SurveyRegistRequest } from '@/types/Survey'
 import { useMemo } from 'react'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
 import { useSurveyFilterStore } from '@/store/surveyFilterStore'
@ -62,8 +62,8 @@ export function useServey(id?: number): {
  isCreatingSurvey: boolean
  isUpdatingSurvey: boolean
  isDeletingSurvey: boolean
+  isSubmittingSurvey: boolean
  createSurvey: (survey: SurveyRegistRequest) => Promise<number>
-  createSurveyDetail: (params: { surveyId: number; surveyDetail: SurveyDetailCoverRequest }) => void
  updateSurvey: ({ survey, isTemporary, storeId }: { survey: SurveyRegistRequest; isTemporary: boolean; storeId?: string }) => void
  deleteSurvey: () => Promise<boolean>
  submitSurvey: (params: { saveId?: number; targetId?: string; storeId?: string; srlNo?: string }) => void
@ -119,7 +119,11 @@ export function useServey(id?: number): {

  const { mutateAsync: createSurvey, isPending: isCreatingSurvey } = useMutation({
    mutationFn: async (survey: SurveyRegistRequest) => {
-      const resp = await axiosInstance(null).post<SurveyBasicInfo>('/api/survey-sales', { survey: survey, storeId: session?.storeId ?? null })
+      const resp = await axiosInstance(null).post<SurveyBasicInfo>('/api/survey-sales', {
+        survey: survey,
+        storeId: session?.storeId ?? null,
+        role: session?.role ?? null,
+      })
      return resp.data.id ?? 0
    },
    onSuccess: (data) => {
@ -131,12 +135,12 @@ export function useServey(id?: number): {

  const { mutate: updateSurvey, isPending: isUpdatingSurvey } = useMutation({
    mutationFn: async ({ survey, isTemporary, storeId }: { survey: SurveyRegistRequest; isTemporary: boolean; storeId?: string }) => {
-      console.log('updateSurvey, survey:: ', survey)
      if (id === undefined) throw new Error('id is required')
      const resp = await axiosInstance(null).put<SurveyRegistRequest>(`/api/survey-sales/${id}`, {
        survey: survey,
        isTemporary: isTemporary,
        storeId: storeId,
+        role: session?.role ?? null,
      })
      return resp.data
    },
@ -158,25 +162,14 @@ export function useServey(id?: number): {
    },
  })

-  const { mutateAsync: createSurveyDetail } = useMutation({
-    mutationFn: async ({ surveyId, surveyDetail }: { surveyId: number; surveyDetail: SurveyDetailCoverRequest }) => {
-      const resp = await axiosInstance(null).patch<SurveyDetailInfo>(`/api/survey-sales/${surveyId}`, surveyDetail)
-      return resp.data
-    },
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['survey', 'list'] })
-      queryClient.invalidateQueries({ queryKey: ['survey', id] })
-    },
-  })
-
-  const { mutateAsync: submitSurvey } = useMutation({
-    mutationFn: async ({ saveId, targetId, storeId, srlNo }: { saveId?: number; targetId?: string; storeId?: string; srlNo?: string }) => {
-      const submitId = saveId ?? id
-      if (!submitId) throw new Error('id is required')
-      const resp = await axiosInstance(null).patch<boolean>(`/api/survey-sales/${submitId}`, {
+  const { mutateAsync: submitSurvey, isPending: isSubmittingSurvey } = useMutation({
+    mutationFn: async ({ targetId, storeId, srlNo }: { targetId?: string; storeId?: string; srlNo?: string }) => {
+      if (!id) throw new Error('id is required')
+      const resp = await axiosInstance(null).patch<boolean>(`/api/survey-sales/${id}`, {
        targetId,
        storeId,
        srlNo,
+        role: session?.role ?? null,
      })
      return resp.data
    },
@ -237,10 +230,10 @@ export function useServey(id?: number): {
    isCreatingSurvey,
    isUpdatingSurvey,
    isDeletingSurvey,
+    isSubmittingSurvey,
    createSurvey,
    updateSurvey,
    deleteSurvey,
-    createSurveyDetail,
    submitSurvey,
    validateSurveyDetail,
    getZipCode,
--- a/src/store/popupController.ts
+++ b/src/store/popupController.ts
@ -10,6 +10,8 @@ type PoupControllerState = {
  alert2: boolean
  alert2BtnYes: Function
  alert2BtnNo: Function
+  surveySaleSubmitPopup: boolean
+  setSurveySaleSubmitPopup: (value: boolean) => void
  setMemberInfomationPopup: (value: boolean) => void
  setZipCodePopup: (value: boolean) => void
  setAlert: (value: boolean) => void
@ -32,6 +34,7 @@ type InitialState = {
  alert2BtnYes: Function
  alert2BtnNo: Function
  suitableDetailPopup: boolean
+  surveySaleSubmitPopup: boolean
 }

 const initialState: InitialState = {
@ -44,6 +47,7 @@ const initialState: InitialState = {
  alert2BtnYes: () => {},
  alert2BtnNo: () => {},
  suitableDetailPopup: false,
+  surveySaleSubmitPopup: false,
 }

 export const usePopupController = create<PoupControllerState>((set) => ({
@ -57,5 +61,6 @@ export const usePopupController = create<PoupControllerState>((set) => ({
  setAlert2BtnYes: (value: Function) => set((state) => ({ ...state, alert2BtnYes: value })),
  setAlert2BtnNo: (value: Function) => set((state) => ({ ...state, alert2BtnNo: value })),
  setSuitableDetailPopup: (value: boolean) => set((state) => ({ ...state, suitableDetailPopup: value })),
+  setSurveySaleSubmitPopup: (value: boolean, id?: number) => set((state) => ({ ...state, surveySaleSubmitPopup: value, surveySaleSubmitId: id })),
  reset: () => set(initialState),
 }))
--- a/src/store/useSuitableStore.ts
+++ b/src/store/useSuitableStore.ts
@ -1,5 +1,6 @@
 import { create } from 'zustand'
 import type { CommCode } from '@/types/CommCode'
+import type { SuitableIds } from '@/types/Suitable'

 interface SuitableState {
  /* 초기 데이터 로드 개수*/
@ -10,25 +11,26 @@ interface SuitableState {
  /* 공통코드 설정 */
  setSuitableCommCode: (headCode: string, commCode: CommCode[]) => void

-  /* 검색 상태 */
-  isSearch: boolean
-  /* 검색 상태 설정 */
-  setIsSearch: (isSearch: boolean) => void
-
  /* 선택된 카테고리 */
  selectedCategory: string
  /* 선택된 카테고리 설정 */
  setSelectedCategory: (category: string) => void
+  /* 선택된 카테고리 초기화 */
+  clearSelectedCategory: () => void

  /* 검색 값 */
-  searchValue: string
+  searchKeyword: string
  /* 검색 값 설정 */
-  setSearchValue: (value: string) => void
+  setSearchKeyword: (value: string) => void
+  /* 검색 값 초기화 */
+  clearSearchKeyword: () => void

  /* 선택된 아이템 리스트 */
  selectedItems: Map<number, Set<number>>
-  /* 선택된 아이템 추가 */
+  /* 선택 아이템 추가 */
  addSelectedItem: (mainId: number, detailId?: number, detailIds?: Set<number>) => void
+  /* 아이템 전체 추가 */
+  addAllSelectedItem: (suitableIds: SuitableIds[]) => void
  /* 선택된 아이템 제거 */
  removeSelectedItem: (mainId: number, detailId?: number) => void
  /* 선택된 아이템 모두 제거 */
@ -38,9 +40,8 @@ interface SuitableState {
 export const useSuitableStore = create<SuitableState>((set) => ({
  itemPerPage: 100 as number,
  suitableCommCode: new Map() as Map<string, CommCode[]>,
-  isSearch: false as boolean,
  selectedCategory: '' as string,
-  searchValue: '' as string,
+  searchKeyword: '' as string,
  selectedItems: new Map() as Map<number, Set<number>>,

  /* 공통코드 설정 */
@ -49,14 +50,15 @@ export const useSuitableStore = create<SuitableState>((set) => ({
      suitableCommCode: new Map(state.suitableCommCode).set(headCode, commCode),
    })),

-  /* 검색 상태 설정 */
-  setIsSearch: (isSearch: boolean) => set({ isSearch }),
-
  /* 선택된 카테고리 설정 */
  setSelectedCategory: (category: string) => set({ selectedCategory: category }),
+  /* 선택된 카테고리 초기화 */
+  clearSelectedCategory: () => set({ selectedCategory: '' }),

  /* 검색 값 설정 */
-  setSearchValue: (value: string) => set({ searchValue: value }),
+  setSearchKeyword: (value: string) => set({ searchKeyword: value }),
+  /* 검색 값 초기화 */
+  clearSearchKeyword: () => set({ searchKeyword: '' }),

  /* 선택된 아이템 추가 */
  addSelectedItem: (mainId: number, detailId?: number, detailIds?: Set<number>) => {
@ -77,6 +79,17 @@ export const useSuitableStore = create<SuitableState>((set) => ({
    }
  },

+  /* 아이템 전체 추가 */
+  addAllSelectedItem: (suitableIds: SuitableIds[]) => {
+    set(() => {
+      const newSelectedItems = new Map()
+      suitableIds.forEach((suitableId) => {
+        newSelectedItems.set(suitableId.id, new Set(suitableId.detailId.split(',').map(Number)))
+      })
+      return { selectedItems: newSelectedItems }
+    })
+  },
+
  /* 선택된 아이템 제거 */
  removeSelectedItem: (mainId: number, detailId?: number) => {
    set((state) => {
--- a/src/types/Suitable.ts
+++ b/src/types/Suitable.ts
@ -1,11 +1,13 @@
 export enum SUITABLE_HEAD_CODE {
  /* 지붕재 제조사명 */
  MANU_FT_CD = 'MANU_FT_CD',
+  /* 지붕재 그룹 종류 */
+  ROOF_MATERIAL_GROUP = 'ROOF_MATL_GRP_CD',
  /* 지붕재 종류 */
  ROOF_MT_CD = 'ROOF_MT_CD',
  /* 마운팅 브래킷 종류 */
  ROOF_SH_CD = 'ROOF_SH_CD',
-  /* 마운팅 브래킷 제조사명 및 제품코드드 */
+  /* 마운팅 브래킷 제조사명 및 제품코드 */
  TRESTLE_MFPC_CD = 'TRESTLE_MFPC_CD',
 }

@ -34,3 +36,8 @@ export type Suitable = {
  detailCnt: number
  detail: string
 }
+
+export type SuitableIds = {
+  id: number
+  detailId: string
+}