Merge remote-tracking branch 'origin/dev' into dev

2025-05-29 10:23:43 +09:00 · 2025-05-29 10:23:43 +09:00 · 7078bd15af
commit 7078bd15af
parent f1617045a5 697137619e
6 changed files with 132 additions and 147 deletions
--- a/README.md
+++ b/README.md
@ -64,15 +64,21 @@ session에 있는 role 키로 구분한다
 # 지붕재 적합성 TODO

 ```
-const suitableCheck = (value: string) => {
-    if (value === '×') {
-      return <i className="compliance-icon x" />
-    } else if (value === 'ー') {
-      return <i className="compliance-icon quest" />
-    } else {
-      return <i className="compliance-icon check" />
-    }
+const suitableCheckIcon = (value: string): string => {
+  const iconMap: Record<string, string> = {
+    '×': '/assets/images/sub/compliance_x_icon.svg',
+    'ー': '/assets/images/sub/compliance_quest_icon.svg',
+    default: '/assets/images/sub/compliance_check_icon.svg',
  }
+  return iconMap[value] || iconMap.default
+}
+const suitableCheckMemo = (value: string): string => {
+  if (value === '○') return '設置可'
+  if (value === '×') return '設置不可'
+  if (value === 'ー') return 'お問い合わせください'
+  return `${value}で設置可`
+}
 ```

- 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요
+- src/hooks/useSuitable.ts > suitableCheckIcon(), suitableCheckMemo()
+  - 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요
--- a/src/app/api/suitable/route.ts
+++ b/src/app/api/suitable/route.ts
@ -2,12 +2,15 @@ import { NextRequest, NextResponse } from 'next/server'
 import { prisma } from '@/libs/prisma'
 import { Suitable } from '@/types/Suitable'

-export async function GET(request: NextRequest) {
+export async function POST(request: NextRequest) {
  try {
-    const searchParams = request.nextUrl.searchParams
+    const body: Record<string, string> = await request.json()
+    const ids = body.ids
+    const detailIds = body.detailIds

-    const ids = searchParams.get('ids')
-    const detailIds = searchParams.get('subIds')
+    if (ids === '' || detailIds === '') {
+      return NextResponse.json({ error: '필수 파라미터가 누락되었습니다' }, { status: 400 })
+    }

    let query = `
    SELECT 
@ -29,28 +32,22 @@ export async function GET(request: NextRequest) {
            , msd_json.memo
          FROM ms_suitable_detail msd_json
            WHERE msd.main_id = msd_json.main_id
+              AND msd_json.id IN (:detailIds)
          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)
+        AND details.main_id IN (:mainIds)
+    WHERE
+      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)
-      }
-    }
+    query = query.replaceAll(':mainIds', ids)
+    query = query.replaceAll(':detailIds', detailIds)

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

@ -60,4 +57,3 @@ export async function GET(request: NextRequest) {
    return NextResponse.json({ error: '데이터 조회 중 오류가 발생했습니다' }, { status: 500 })
  }
 }
-
--- a/src/components/popup/SuitableDetailPopup.tsx
+++ b/src/components/popup/SuitableDetailPopup.tsx
@ -3,15 +3,13 @@
 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'
+import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'

 export default function SuitableDetailPopup() {
  const popupController = usePopupController()
-  const { getSuitableDetails, serializeSelectedItems } = useSuitable()
-  const { selectedItems } = useSuitableStore()
+  const { getSelectedItemsData, toCodeName, toSuitableDetail, suitableCheckIcon, suitableCheckMemo } = useSuitable()

  const [openItems, setOpenItems] = useState<Set<number>>(new Set())
  const [suitableDetails, setSuitableDetails] = useState<Suitable[]>([])
@ -25,14 +23,9 @@ export default function SuitableDetailPopup() {
    })
  }, [])

-  // 선택된 아이템 상세 데이터 가져오기
-  const getSelectedItemsData = async () => {
-    const serialized: Map<string, string> = serializeSelectedItems()
-    setSuitableDetails(await getSuitableDetails(serialized.get('ids') ?? '', serialized.get('detailIds') ?? ''))
-  }
-
  useEffect(() => {
-    getSelectedItemsData()
+    // TODO: 로딩 처리 필요
+    getSelectedItemsData().then((data) => setSuitableDetails(data))
  }, [])

  return (
@ -52,98 +45,56 @@ export default function SuitableDetailPopup() {
          </div>
          <div className="modal-body">
            <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>
+              {suitableDetails.map((item: Suitable) => (
+                <div className={`compliance-check-bx ${openItems.has(item.id) ? 'act' : ''}`} key={item.id}>
+                  <div className="check-name-wrap">
+                    <div className="check-name">{item.productName}</div>
+                    <div className="check-name-btn">
+                      <button className="bx-btn" onClick={() => toggleItemOpen(item.id)}></button>
                    </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="compliance-check-pop-contents">
+                    <div className="check-pop-data-wrap">
+                      <div className="check-pop-data-tit">屋根技研 支持瓦</div>
+                      <div className="check-pop-data-txt">{toCodeName(SUITABLE_HEAD_CODE.MANU_FT_CD, item.manuFtCd)}</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 className="check-pop-data-wrap">
+                      <div className="check-pop-data-tit">屋根材</div>
+                      <div className="check-pop-data-txt">{toCodeName(SUITABLE_HEAD_CODE.ROOF_MT_CD, item.roofMtCd)}</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 className="check-pop-data-wrap">
+                      <div className="check-pop-data-tit">金具タイプ</div>
+                      <div className="check-pop-data-txt">{toCodeName(SUITABLE_HEAD_CODE.ROOF_SH_CD, item.roofShCd)}</div>
+                    </div>
+                    <div className="check-pop-data-table-wrap">
+                      {toSuitableDetail(item.detail).map((subItem: SuitableDetail) => (
+                        <div className="check-pop-data-table" key={subItem.id}>
+                          <div className="pop-data-table-head">
+                            <div className="pop-data-table-head-name">{toCodeName(SUITABLE_HEAD_CODE.TRESTLE_MFPC_CD, subItem.trestleMfpcCd)}</div>
+                            <div className="pop-data-table-head-icon">
+                              <div className="compliance-icon">
+                                <Image src={suitableCheckIcon(subItem.trestleManufacturerProductName)} width={22} height={22} alt="" />
+                              </div>
+                              {subItem.memo && (
+                                <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">{suitableCheckMemo(subItem.trestleManufacturerProductName)}</div>
+                          {subItem.memo && (
+                            <div className="pop-data-table-footer">
+                              <div className="pop-data-table-footer-unit">備考</div>
+                              <div className="pop-data-table-footer-data">{subItem.memo}</div>
+                            </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>
            <SuitableDetailPopupButton />
          </div>
--- a/src/components/popup/SuitableDetailPopupButton.tsx
+++ b/src/components/popup/SuitableDetailPopupButton.tsx
@ -1,10 +1,16 @@
 'use client'

+import { useRouter } from 'next/navigation'
+import { usePopupController } from '@/store/popupController'
+
 export default function SuitableDetailPopupButton() {
+  const popupController = usePopupController()
+  const router = useRouter()
+
  return (
    <div className="btn-flex-wrap com">
      <div className="btn-bx">
-        <button className="btn-frame n-blue icon">
+        <button className="btn-frame n-blue icon" onClick={() => popupController.setSuitableDetailPopup(false)}>
          閉じる<i className="btn-arr"></i>
        </button>
      </div>
@ -14,7 +20,13 @@ export default function SuitableDetailPopupButton() {
        </button>
      </div>
      <div className="btn-bx">
-        <button className="btn-frame n-blue icon">
+        <button
+          className="btn-frame n-blue icon"
+          onClick={async () => {
+            await popupController.setSuitableDetailPopup(false)
+            router.push('/inquiry/regist')
+          }}
+        >
          1：1お問い合わせ<i className="btn-arr"></i>
        </button>
      </div>
--- a/src/components/suitable/SuitableList.tsx
+++ b/src/components/suitable/SuitableList.tsx
@ -9,7 +9,17 @@ import { useSuitableStore } from '@/store/useSuitableStore'
 import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'

 export default function SuitableList() {
-  const { toCodeName, toSuitableDetail, toSuitableDetailIds, suitables, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useSuitable()
+  const {
+    toCodeName,
+    toSuitableDetail,
+    toSuitableDetailIds,
+    suitables,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isLoading,
+    suitableCheckIcon,
+  } = useSuitable()
  const { selectedItems, addSelectedItem, removeSelectedItem } = useSuitableStore()
  const [openItems, setOpenItems] = useState<Set<number>>(new Set())
  const observerTarget = useRef<HTMLDivElement>(null)
@ -52,20 +62,6 @@ export default function SuitableList() {
    })
  }, [])

-  // TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요
-  const suitableCheck = useCallback((value: string) => {
-    const iconMap: Record<string, string> = {
-      '×': '/assets/images/sub/compliance_x_icon.svg',
-      ー: '/assets/images/sub/compliance_quest_icon.svg',
-      default: '/assets/images/sub/compliance_check_icon.svg',
-    }
-    return (
-      <div className="compliance-icon">
-        <Image src={iconMap[value] || iconMap.default} width={22} height={22} alt="" />
-      </div>
-    )
-  }, [])
-
  // 아이템 렌더링
  const renderItem = useCallback(
    (item: Suitable) => {
@ -99,7 +95,9 @@ export default function SuitableList() {
                    <label htmlFor={`ch${subItem.id}`}>{toCodeName(SUITABLE_HEAD_CODE.TRESTLE_MFPC_CD, subItem.trestleMfpcCd)}</label>
                  </div>
                  <div className="compliance-icon-wrap">
-                    {suitableCheck(subItem.trestleManufacturerProductName)}
+                    <div className="compliance-icon">
+                      <Image src={suitableCheckIcon(subItem.trestleManufacturerProductName)} width={22} height={22} alt="" />
+                    </div>
                    {subItem.memo && (
                      <div className="compliance-icon">
                        <Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
@ -113,7 +111,7 @@ export default function SuitableList() {
        </div>
      )
    },
-    [isItemSelected, openItems, handleItemClick, toggleItemOpen, suitableCheck, toCodeName, toSuitableDetail],
+    [isItemSelected, openItems, handleItemClick, toggleItemOpen, toCodeName, toSuitableDetail],
  )

  // 아이템 리스트
--- a/src/hooks/useSuitable.ts
+++ b/src/hooks/useSuitable.ts
@ -62,7 +62,7 @@ export function useSuitable() {
    try {
      const params: Record<string, string> = { ids: ids }
      if (detailIds) params.detailIds = detailIds
-      const response = await axiosInstance(null).get<Suitable[]>('/api/suitable', { params })
+      const response = await axiosInstance(null).post<Suitable[]>('/api/suitable', params)
      return response.data
    } catch (error) {
      console.error('지붕재 상세 데이터 로드 실패:', error)
@ -134,17 +134,19 @@ export function useSuitable() {
    enabled: selectedCategory !== '' || searchKeyword !== '',
  })

-  const serializeSelectedItems = (): Map<string, string> => {
+  const serializeSelectedItems = (): { ids: string; detailIds: 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(',')],
-    ])
+    return { ids: ids.join(','), detailIds: detailIds.length > 0 ? detailIds.join(',') : '' }
+  }
+
+  const getSelectedItemsData = async (): Promise<Suitable[]> => {
+    const { ids, detailIds } = serializeSelectedItems()
+    return await getSuitableDetails(ids, detailIds)
  }

  const clearSuitableSearch = ({ items = false, category = false, keyword = false }: { items?: boolean; category?: boolean; keyword?: boolean }) => {
@ -153,6 +155,24 @@ export function useSuitable() {
    if (keyword) clearSearchKeyword()
  }

+  // TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요
+  const suitableCheckIcon = (value: string): string => {
+    const iconMap: Record<string, string> = {
+      '×': '/assets/images/sub/compliance_x_icon.svg',
+      'ー': '/assets/images/sub/compliance_quest_icon.svg',
+      default: '/assets/images/sub/compliance_check_icon.svg',
+    }
+    return iconMap[value] || iconMap.default
+  }
+
+  // TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ○, ×, ー 데이터 관리 필요
+  const suitableCheckMemo = (value: string): string => {
+    if (value === '○') return '設置可'
+    if (value === '×') return '設置不可'
+    if (value === 'ー') return 'お問い合わせください'
+    return `${value}で設置可`
+  }
+
  return {
    getSuitables,
    getSuitableIds,
@ -166,7 +186,9 @@ export function useSuitable() {
    hasNextPage,
    isFetchingNextPage,
    isLoading,
-    serializeSelectedItems,
+    getSelectedItemsData,
    clearSuitableSearch,
+    suitableCheckIcon,
+    suitableCheckMemo,
  }
 }