qcast3/onsitesurvey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: qcast3:e05f142df210e31a2c811d3d389dbdb47dd056be
Branches Tags
qcast3:main
qcast3:dev
qcast3:feature/submition-target
qcast3:feature/pdf-tracking
qcast3:backup
qcast3:release
..
compare: qcast3:5ba6758a6d1f12c71f33568d73bbdeeb3d8e88d5
Branches Tags
qcast3:dev
qcast3:feature/submition-target
qcast3:feature/pdf-tracking
qcast3:backup
qcast3:main
qcast3:release

No commits in common. "e05f142df210e31a2c811d3d389dbdb47dd056be" and "5ba6758a6d1f12c71f33568d73bbdeeb3d8e88d5" have entirely different histories.
e05f142df2 ... 5ba6758a6d

44 changed files with 816 additions and 1854 deletions
Show Stats Expand all files Collapse all files

5
public/assets/images/layout/modal_header_icon04.svg
View File

@ -1,5 +0,0 @@
<svg width="19" height="22" viewBox="0 0 19 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 8.90909L18 6.81818C18 5.12494 18 4.27832 17.732 3.60214C17.3013 2.5151 16.3902 1.65765 15.2352 1.2522C14.5168 1 13.6173 1 11.8182 0.999999C8.66981 0.999999 7.09563 1 5.83836 1.44135C3.81714 2.15088 2.22282 3.65142 1.46894 5.55375C1 6.73706 1 8.21865 1 11.1818L1 13.7273C1 16.7966 1 18.3313 1.8477 19.3971C2.09058 19.7025 2.37862 19.9736 2.70307 20.2022C3.83546 21 5.46607 21 8.72727 21L9.5 21C10.0347 21 11.0337 21 11.5 20.9972" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1 11C1 9.15905 2.49238 7.66667 4.33333 7.66667C4.99912 7.66667 5.78404 7.78333 6.43137 7.60988C7.00652 7.45576 7.45576 7.00652 7.60988 6.43136C7.78333 5.78404 7.66667 4.99912 7.66667 4.33333C7.66667 2.49238 9.15905 1 11 1" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M18 15H10.5M18 15C18 15.7002 16.0057 17.0085 15.5 17.5M18 15C18 14.2998 16.0057 12.9915 15.5 12.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

4
public/assets/images/sub/sale_toggle_btn.svg
View File

@ -1,4 +0,0 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="0.5" y="0.5" width="21" height="21" rx="10.5" stroke="#2E3A59"/>
<path d="M7 9L11 13L15 9" stroke="#2E3A59" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 288 B

6
public/assets/images/sub/sale_toggle_btn_white.svg
View File

@ -1,6 +0,0 @@
<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="toggle btn">
<rect x="0.5" y="0.5" width="21" height="21" rx="10.5" stroke="white"/>
<path id="Vector 7412" d="M7 13L11 9L15 13" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 327 B

17
src/app/api/qna/file/route.ts
View File

@ -6,19 +6,10 @@ export async function GET(request: Request) {
const encodeFileNo = searchParams.get('encodeFileNo') const encodeFileNo = searchParams.get('encodeFileNo')
if (!encodeFileNo) { if (!encodeFileNo) {
return NextResponse.json({ error: 'encodeFileNo is required' }, { status: 400 }) return NextResponse.json({ error: 'fileNo is required' }, { status: 400 })
} }
try { const response = await axios.get(`${process.env.NEXT_PUBLIC_INQUIRY_API_URL}/api/file/downloadFile?encodeFileNo=${encodeFileNo}`)
const response = await axios.get(`${process.env.NEXT_PUBLIC_INQUIRY_API_URL}/api/file/downloadFile`, { console.log('response.data:: ', response.data)
params: {
encodeFileNo,
},
})
console.log('response.data:: ', response.data)
return NextResponse.json(response.data) return NextResponse.json(response.data)
} catch (error: any) {
console.error(error.response)
return NextResponse.json({ error: error.response.data }, { status: 500 })
}
} }

1
src/app/api/qna/list/route.ts
View File

@ -21,6 +21,7 @@ export async function GET(request: Request) {
if (response.status === 200) { if (response.status === 200) {
return NextResponse.json(response.data) return NextResponse.json(response.data)
} }
return NextResponse.json({ error: 'Failed to fetch qna list' }, { status: response.status }) return NextResponse.json({ error: 'Failed to fetch qna list' }, { status: response.status })
} catch (error: any) { } catch (error: any) {
console.error('Error fetching qna list:', error.response.data) console.error('Error fetching qna list:', error.response.data)

3
src/app/api/qna/save/route.ts
View File

@ -4,9 +4,12 @@ import { NextResponse } from 'next/server'
export async function POST(request: Request) { export async function POST(request: Request) {
const formData = await request.formData() const formData = await request.formData()
console.log('formData:: ', formData) console.log('formData:: ', formData)
// const body = await request.json()
// console.log('body:: ', body)
try { try {
const response = await axios.post(`${process.env.NEXT_PUBLIC_INQUIRY_API_URL}/api/qna/save`, formData) const response = await axios.post(`${process.env.NEXT_PUBLIC_INQUIRY_API_URL}/api/qna/save`, formData)
console.log('response.data:: ', response.data)
if (response.status === 200) { if (response.status === 200) {
return NextResponse.json(response.data) return NextResponse.json(response.data)

159
src/app/api/survey-sales/[id]/route.ts
View File

@ -1,139 +1,108 @@
import { NextResponse } from 'next/server' import { NextResponse } from 'next/server'
import { prisma } from '@/libs/prisma'
export async function GET(request: Request, context: { params: { id: string } }) { export async function GET(request: Request, context: { params: { id: string } }) {
try { const { id } = await context.params
const { id } = await context.params // @ts-ignore
// @ts-ignore const survey = await prisma.SD_SERVEY_SALES_BASIC_INFO.findUnique({
const survey = await prisma.SD_SURVEY_SALES_BASIC_INFO.findUnique({ where: { id: Number(id) },
where: { ID: Number(id) }, include: {
include: { detail_info: true,
DETAIL_INFO: true, },
}, })
}) return NextResponse.json(survey)
return NextResponse.json(survey)
} catch (error) {
console.error('Error fetching survey:', error)
return NextResponse.json({ error: 'Failed to fetch survey' }, { status: 500 })
}
} }
export async function PUT(request: Request, context: { params: { id: string } }) { export async function PUT(request: Request, context: { params: { id: string } }) {
const { id } = await context.params
const body = await request.json()
try { try {
const { id } = await context.params
const body = await request.json()
console.log('body:: ', body)
// DETAIL_INFO를 분리
const { DETAIL_INFO, ...basicInfo } = body
// @ts-ignore // @ts-ignore
const survey = await prisma.SD_SURVEY_SALES_BASIC_INFO.update({ const survey = await prisma.SD_SERVEY_SALES_BASIC_INFO.update({
where: { ID: Number(id) }, where: { id: Number(id) },
data: { data: {
...basicInfo, ...body,
UPT_DT: new Date(),
DETAIL_INFO: DETAIL_INFO
? {
upsert: {
create: DETAIL_INFO,
update: DETAIL_INFO,
},
}
: undefined,
},
include: {
DETAIL_INFO: true,
}, },
}) })
return NextResponse.json(survey) return NextResponse.json(survey)
} catch (error) { } catch (error) {
console.error('Error updating survey:', error) console.error(error)
return NextResponse.json({ error: 'Failed to update survey' }, { status: 500 }) throw error
} }
} }
export async function DELETE(request: Request, context: { params: { id: string } }) { export async function DELETE(request: Request, context: { params: { id: string } }) {
try { const { id } = await context.params
const { id } = await context.params
try {
//@ts-ignore
await prisma.$transaction(async (tx) => { await prisma.$transaction(async (tx) => {
// @ts-ignore // @ts-ignore
const detailData = await tx.SD_SURVEY_SALES_BASIC_INFO.findUnique({ const detailData = await tx.SD_SERVEY_SALES_BASIC_INFO.findUnique({
where: { ID: Number(id) }, where: { id: Number(id) },
select: { select: {
DETAIL_INFO: true, detail_info: true,
}, },
}) })
console.log('detailData:: ', detailData)
if (detailData?.DETAIL_INFO?.ID) { if (detailData?.detail_info?.id) {
// @ts-ignore // @ts-ignore
await tx.SD_SURVEY_SALES_DETAIL_INFO.delete({ await tx.SD_SERVEY_SALES_DETAIL_INFO.delete({
where: { ID: Number(detailData.DETAIL_INFO.ID) }, where: { id: Number(detailData?.detail_info?.id) },
}) })
} }
// @ts-ignore // @ts-ignore
await tx.SD_SURVEY_SALES_BASIC_INFO.delete({ await tx.SD_SERVEY_SALES_BASIC_INFO.delete({
where: { ID: Number(id) }, where: { id: Number(id) },
}) })
}) })
return NextResponse.json({ message: 'Survey deleted successfully' }) return NextResponse.json({ message: 'Survey deleted successfully' })
} catch (error) { } catch (error) {
console.error('Error deleting survey:', error) console.error(error)
return NextResponse.json({ error: 'Failed to delete survey' }, { status: 500 }) throw error
} }
} }
export async function PATCH(request: Request, context: { params: { id: string } }) { export async function PATCH(request: Request, context: { params: { id: string } }) {
try { const { id } = await context.params
const { id } = await context.params const body = await request.json()
const body = await request.json() if (body.submit) {
// @ts-ignore
if (body.submit) { const survey = await prisma.SD_SERVEY_SALES_BASIC_INFO.update({
// @ts-ignore where: { id: Number(id) },
const survey = await prisma.SD_SURVEY_SALES_BASIC_INFO.update({ data: {
where: { ID: Number(id) }, submission_status: true,
submission_date: new Date(),
},
})
return NextResponse.json({ message: 'Survey confirmed successfully' })
} else {
// @ts-ignore
const hasDetails = await prisma.SD_SERVEY_SALES_DETAIL_INFO.findUnique({
where: { basic_info_id: Number(id) },
})
if (hasDetails) {
//@ts-ignore
const result = await prisma.SD_SERVEY_SALES_BASIC_INFO.update({
where: { id: Number(id) },
data: { data: {
SUBMISSION_STATUS: true, updated_at: new Date(),
SUBMISSION_DATE: new Date(), detail_info: {
update: body.detail_info,
},
}, },
}) })
return NextResponse.json({ message: 'Survey confirmed successfully' }) return NextResponse.json(result)
} else { } else {
// @ts-ignore // @ts-ignore
const hasDetails = await prisma.SD_SURVEY_SALES_DETAIL_INFO.findUnique({ const survey = await prisma.SD_SERVEY_SALES_BASIC_INFO.update({
where: { BASIC_INFO_ID: Number(id) }, where: { id: Number(id) },
data: {
detail_info: {
create: body.detail_info,
},
},
}) })
return NextResponse.json({ message: 'Survey detail created successfully' })
if (hasDetails) {
//@ts-ignore
const result = await prisma.SD_SURVEY_SALES_BASIC_INFO.update({
where: { ID: Number(id) },
data: {
UPT_DT: new Date(),
DETAIL_INFO: {
update: body.DETAIL_INFO,
},
},
})
return NextResponse.json(result)
} else {
// @ts-ignore
const survey = await prisma.SD_SURVEY_SALES_BASIC_INFO.update({
where: { ID: Number(id) },
data: {
DETAIL_INFO: {
create: body.DETAIL_INFO,
},
},
})
return NextResponse.json({ message: 'Survey detail created successfully' })
}
} }
} catch (error) {
console.error('Error updating survey:', error)
return NextResponse.json({ error: 'Failed to update survey' }, { status: 500 })
} }
} }

308
src/app/api/survey-sales/route.ts
View File

@ -1,247 +1,105 @@
import { NextResponse } from 'next/server' import { NextResponse } from 'next/server'
import { prisma } from '@/libs/prisma' import { prisma } from '@/libs/prisma'
/** export async function POST(request: Request) {
* 검색 파라미터 const body = await request.json()
*/ // @ts-ignore
type SearchParams = { const res = await prisma.SD_SERVEY_SALES_BASIC_INFO.create({
keyword?: string | null // 검색어 data: body,
searchOption?: string | null // 검색 옵션 (select 옵션) })
isMySurvey?: string | null // 내가 작성한 매물 return NextResponse.json(res)
sort?: string | null // 정렬 방식
offset?: string | null
role?: string | null // 회원권한한
store?: string | null // 판매점ID
builderNo?: string | null // 시공ID
} }
type WhereCondition = {
AND?: any[]
OR?: any[]
[key: string]: any
}
// 검색 가능한 필드 옵션
const SEARCH_OPTIONS = [
'BUILDING_NAME', // 건물명
'REPRESENTATIVE', // 담당자
'STORE', // 판매점
'CONSTRUCTION_POINT', // 시공점
'CUSTOMER_NAME', // 고객명
'POST_CODE', // 우편번호
'ADDRESS', // 주소
'ADDRESS_DETAIL', // 상세주소
] as const
// 페이지당 항목 수
const ITEMS_PER_PAGE = 10
/**
* 키워드 검색 조건 생성 함수
* @param keyword 검색 키워드
* @param searchOption 검색 옵션
* @returns 검색 조건 객체
*/
const createKeywordSearchCondition = (keyword: string, searchOption: string): WhereCondition => {
const where: WhereCondition = {}
if (searchOption === 'all') {
// 모든 필드 검색 시 OR 조건 사용
where.OR = []
// ID가 숫자인 경우 ID 검색 조건 추가
if (keyword.match(/^\d+$/) || !isNaN(Number(keyword))) {
where.OR.push({
ID: { equals: Number(keyword) },
})
}
where.OR.push(
...SEARCH_OPTIONS.map((field) => ({
[field]: { contains: keyword },
})),
)
} else if (SEARCH_OPTIONS.includes(searchOption.toUpperCase() as any)) {
// 특정 필드 검색
where[searchOption.toUpperCase()] = { contains: keyword }
} else if (searchOption === 'id') {
// ID 검색 (숫자 변환 필요)
const number = Number(keyword)
if (!isNaN(number)) {
where.ID = { equals: number }
} else {
// 유효하지 않은 ID 검색 시 빈 결과 반환
where.ID = { equals: null }
}
}
return where
}
/**
* 회원 역할별 검색 조건 생성 함수
* @param params 검색 파라미터
* @returns 검색 조건 객체
*/
const createMemberRoleCondition = (params: SearchParams): WhereCondition => {
const where: WhereCondition = { AND: [] }
switch (params.role) {
case 'Admin': // 1차점
// 같은 판매점에서 작성된 매물 + 2차점에서 제출받은 매물
where.OR = [
{
AND: [{ STORE: { equals: params.store } }],
},
{
AND: [{ STORE: { startsWith: params.store } }, { SUBMISSION_STATUS: { equals: true } }],
},
]
break
case 'Admin_Sub': // 2차점
where.OR = [
{
AND: [
{ STORE: { equals: params.store } },
{
OR: [
{ CONSTRUCTION_POINT: { equals: null } },
{ CONSTRUCTION_POINT: { equals: '' } }
]
}
]
},
{
AND: [
{ STORE: { equals: params.store } },
{ CONSTRUCTION_POINT: { not: null } },
{ CONSTRUCTION_POINT: { not: '' } },
{ SUBMISSION_STATUS: { equals: true } }
]
}
]
break
case 'Builder': // 2차점 시공권한
case 'Partner': // Partner
// 같은 시공ID에서 작성된 매물
where.AND?.push({
CONSTRUCTION_POINT: { equals: params.builderNo },
})
break
case 'T01':
case 'User':
// 모든 매물 조회 가능 (추가 조건 없음)
break
}
return where
}
/**
* GET 핸들러 - 설문 목록 조회
*/
export async function GET(request: Request) { export async function GET(request: Request) {
const { searchParams } = new URL(request.url)
const keyword = searchParams.get('keyword')
const searchOption = searchParams.get('searchOption')
const isMySurvey = searchParams.get('isMySurvey')
const sort = searchParams.get('sort')
const offset = searchParams.get('offset')
const store = searchParams.get('store')
const construction_point = searchParams.get('construction_point')
const searchOptions = ['building_name', 'representative', 'store', 'construction_point', 'customer_name', 'post_code', 'address', 'address_detail']
try { try {
// URL 파라미터 파싱 const where: any = {}
const { searchParams } = new URL(request.url)
const params: SearchParams = { if (isMySurvey !== null && isMySurvey !== undefined) {
keyword: searchParams.get('keyword'), where.representative = isMySurvey
searchOption: searchParams.get('searchOption'),
isMySurvey: searchParams.get('isMySurvey'),
sort: searchParams.get('sort'),
offset: searchParams.get('offset'),
role: searchParams.get('role'),
store: searchParams.get('store'),
builderNo: searchParams.get('builderNo'),
} }
// 검색 조건 구성 if (keyword && keyword.trim() !== '' && searchOption) {
const where: WhereCondition = {} if (searchOption === 'all') {
where.OR = []
// 내가 작성한 매물 조건 적용 if (keyword.match(/^\d+$/) || !isNaN(Number(keyword))) {
if (params.isMySurvey) { where.OR.push({
where.REPRESENTATIVE = params.isMySurvey id: {
equals: Number(keyword),
},
})
}
where.OR.push(
...searchOptions.map((field) => ({
[field]: {
contains: keyword,
},
})),
)
} else if (searchOptions.includes(searchOption)) {
where[searchOption] = {
contains: keyword,
}
} else if (searchOption === 'id') {
where[searchOption] = {
equals: Number(keyword),
}
}
} }
// 키워드 검색 조건 적용 where.AND = []
if (params.keyword && params.searchOption) { if (store) {
Object.assign(where, createKeywordSearchCondition(params.keyword, params.searchOption)) where.AND.push({
} store: {
equals: store,
// 회원 유형 조건 적용 },
Object.assign(where, createMemberRoleCondition(params))
// 데이터 조회 또는 카운트
if (params.offset) {
// 페이지네이션 데이터 조회
//@ts-ignore
const surveys = await prisma.SD_SURVEY_SALES_BASIC_INFO.findMany({
where,
orderBy: params.sort === 'created' ? { REG_DT: 'desc' } : { UPT_DT: 'desc' },
skip: Number(params.offset),
take: ITEMS_PER_PAGE,
}) })
return NextResponse.json(surveys) }
if (construction_point) {
where.AND.push({
construction_point: {
equals: construction_point,
},
})
}
if (offset) {
// @ts-ignore
const res = await prisma.SD_SERVEY_SALES_BASIC_INFO.findMany({
where,
orderBy: sort === 'created' ? { created_at: 'desc' } : { updated_at: 'desc' },
skip: Number(offset),
take: 10,
})
return NextResponse.json(res)
} else { } else {
// 전체 개수만 조회 // @ts-ignore
//@ts-ignore const count = await prisma.SD_SERVEY_SALES_BASIC_INFO.count({
const count = await prisma.SD_SURVEY_SALES_BASIC_INFO.count({ where }) where,
})
return NextResponse.json(count) return NextResponse.json(count)
} }
} catch (error) { } catch (error) {
console.error(error) console.error(error)
return NextResponse.json({ error: 'Fail Read Survey' }, { status: 500 }) throw error
} }
} }
/**
* PUT 핸들러 - 상세 정보 추가
*/
export async function PUT(request: Request) { export async function PUT(request: Request) {
try { const body = await request.json()
const body = await request.json() const detailInfo = { ...body.detail_info, basic_info_id: body.id }
// @ts-ignore
// 상세 정보 생성을 위한 데이터 구성 const res = await prisma.SD_SERVEY_SALES_DETAIL_INFO.create({
const detailInfo = { data: detailInfo,
...body.detail_info, })
BASIC_INFO_ID: body.id, return NextResponse.json({ message: 'Survey sales updated successfully' })
}
// 상세 정보 생성
//@ts-ignore
await prisma.SD_SURVEY_SALES_DETAIL_INFO.create({
data: detailInfo,
})
return NextResponse.json({
message: 'Success Update Survey',
})
} catch (error) {
console.error(error)
return NextResponse.json({ error: 'Fail Update Survey' }, { status: 500 })
}
}
export async function POST(request: Request) {
try {
const body = await request.json()
const { DETAIL_INFO, ...basicInfo } = body
// 기본 정보 생성
//@ts-ignore
const result = await prisma.SD_SURVEY_SALES_BASIC_INFO.create({
data: {
...basicInfo,
DETAIL_INFO: {
create: DETAIL_INFO,
},
},
})
return NextResponse.json(result)
} catch (error) {
console.error(error)
return NextResponse.json({ error: 'Fail Create Survey' }, { status: 500 })
}
} }

2
src/app/inquiry/list/page.tsx
View File

@ -1,9 +1,11 @@
import ListForm from '@/components/inquiry/list/ListForm'
import ListTable from '@/components/inquiry/list/ListTable' import ListTable from '@/components/inquiry/list/ListTable'
export default function page() { export default function page() {
return ( return (
<> <>
<div className="sale-contents"> <div className="sale-contents">
<ListForm />
<ListTable /> <ListTable />
</div> </div>
</> </>

9
src/app/survey-sale/regist/page.tsx
View File

@ -1,9 +0,0 @@
import RegistForm from '@/components/survey-sale/temp/registForm'
export default function RegistPage() {
return (
<>
<RegistForm />
</>
)
}

35
src/components/inquiry/Detail.tsx
View File

@ -3,13 +3,19 @@
import Answer from './Answer' import Answer from './Answer'
import { useInquiry } from '@/hooks/useInquiry' import { useInquiry } from '@/hooks/useInquiry'
import { useParams, useRouter } from 'next/navigation' import { useParams, useRouter } from 'next/navigation'
import { useState } from 'react'
export default function Detail() { export default function Detail() {
//todo: 답변 완료 표시를 위해 임시로 추가 해 놓은 state
// 추후에 api 작업 완료후 삭제
// 답변 완료 클래스 & 하단 답변내용 출력도
const params = useParams() const params = useParams()
const id = params.id const id = params.id
const { inquiryDetail, downloadFile } = useInquiry(Number(id), '5200') const { inquiryDetail, downloadFile } = useInquiry(Number(id), '5200')
const router = useRouter() const router = useRouter()
const [inquiry, setInquiry] = useState<Boolean>(true)
return ( return (
<> <>
@ -33,7 +39,15 @@ export default function Detail() {
</tr> </tr>
<tr> <tr>
<th>作者</th> <th>作者</th>
<td>{inquiryDetail?.regNm}</td> <td>Hong gi</td>
</tr>
<tr>
<th>名前</th>
<td>Kim</td>
</tr>
<tr>
<th>番号</th>
<td>070-1234-5678</td>
</tr> </tr>
<tr> <tr>
<th>販売店</th> <th>販売店</th>
@ -52,9 +66,17 @@ export default function Detail() {
</div> </div>
<div className="inquiry-detail-data"> <div className="inquiry-detail-data">
<div className="inquiry-detail-category"> <div className="inquiry-detail-category">
<span>{inquiryDetail?.qnaClsLrgCd}</span> <span>屋根</span>
<span>{inquiryDetail?.qnaClsMidCd}</span> <span>適合性</span>
<span>{inquiryDetail?.qnaClsSmlCd}</span> <span>屋根材</span>
</div>
<div className="inquiry-detail-tit">屋根材適合性確認依頼</div>
<div className="inquiry-detail-txt">
入力した内容が表示されます.
<br />
インストール可能であることを確認してください.
<br />
屋根の写真を添付しました.
</div> </div>
<div className="inquiry-detail-tit">{inquiryDetail?.qstTitle}</div> <div className="inquiry-detail-tit">{inquiryDetail?.qstTitle}</div>
<div className="inquiry-detail-txt">{inquiryDetail?.qstContents}</div> <div className="inquiry-detail-txt">{inquiryDetail?.qstContents}</div>
@ -69,11 +91,6 @@ export default function Detail() {
</button> </button>
</li> </li>
))} ))}
<li className="file-item">
<button className="file-item-bx" onClick={() => downloadFile(Number(1))}>
<div className="file-item-name">Test File</div>
</button>
</li>
</ul> </ul>
</div> </div>
</div> </div>

123
src/components/inquiry/RegistForm.tsx
View File

@ -4,7 +4,7 @@ import { useInquiry } from '@/hooks/useInquiry'
import { useSessionStore } from '@/store/session' import { useSessionStore } from '@/store/session'
import { InquiryRequest } from '@/types/Inquiry' import { InquiryRequest } from '@/types/Inquiry'
import { useState } from 'react' import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation' import { useRouter } from 'next/navigation'
export default function RegistForm() { export default function RegistForm() {
const { saveInquiry, isSavingInquiry } = useInquiry() const { saveInquiry, isSavingInquiry } = useInquiry()
@ -20,15 +20,14 @@ export default function RegistForm() {
compCd: '5200', compCd: '5200',
siteTpCd: 'QC', siteTpCd: 'QC',
qnaClsLrgCd: '', qnaClsLrgCd: '',
qnaClsMidCd: '', qnaClsMidCd: 'B02',
qnaClsSmlCd: null, qnaClsSmlCd: null,
title: '', title: '',
contents: '', contents: null,
regId: 'X112', regId: 'X112',
regUserNm: 'TEST', regUserNm: 'TEST',
regUserTelNo: null, regUserTelNo: null,
storeId: 'X112', storeId: null,
qstMail: '',
}) })
const [attachedFiles, setAttachedFiles] = useState<File[]>([]) const [attachedFiles, setAttachedFiles] = useState<File[]>([])
@ -46,30 +45,12 @@ export default function RegistForm() {
} }
const handleSubmit = async () => { const handleSubmit = async () => {
const formData = new FormData() if (confirm('お問い合わせを登録しますか？ Hanwha Japanの担当者にお問い合わせメールが送信されます。')) {
attachedFiles.forEach((file) => { const res = await saveInquiry({ inquiryRequest, files: attachedFiles })
formData.append('files', file) alert('保存されました。')
}) router.push(`/inquiry/${res.qnaNo}`)
Object.entries(inquiryRequest).forEach(([key, value]) => { }
formData.append(key, value ?? '') return
})
// FormData를 객체로 변환하여 확인
const formDataObj: Record<string, any> = {}
formData.forEach((value, key) => {
formDataObj[key] = value
})
console.log('formData contents:', formDataObj)
window.neoConfirm(
'お問い合わせを登録しますか？ Hanwha Japanの担当者にお問い合わせメールが送信されます。',
async () => {
const res = await saveInquiry(formData)
alert('保存されました。')
router.push(`/inquiry/${res.qnaNo}`)
},
() => null,
)
} }
return ( return (
@ -81,42 +62,30 @@ export default function RegistForm() {
お問い合わせタイプ <i className="import">*</i> お問い合わせタイプ <i className="import">*</i>
</div> </div>
<div className="data-input"> <div className="data-input">
<select <select className="select-form" name="" id="">
className="select-form" <option value="">屋根適合</option>
name="" <option value="">屋根適合</option>
id="qnaClsLrgCd" <option value="">屋根適合</option>
value={inquiryRequest.qnaClsLrgCd} <option value="">屋根適合</option>
onChange={(e) => setInquiryRequest({ ...inquiryRequest, qnaClsLrgCd: e.target.value })} <option value="">屋根適合</option>
>
<option value="">選択してください</option>
<option value="A01">A01</option>
<option value="A01">屋根適合</option>
</select> </select>
</div> </div>
<div className="data-input mt5"> <div className="data-input mt5">
<select <select className="select-form" name="" id="">
className="select-form" <option value="">屋根適合</option>
name="" <option value="">屋根適合</option>
id="qnaClsMidCd" <option value="">屋根適合</option>
value={inquiryRequest.qnaClsMidCd} <option value="">屋根適合</option>
onChange={(e) => setInquiryRequest({ ...inquiryRequest, qnaClsMidCd: e.target.value })} <option value="">屋根適合</option>
>
<option value="">選択してください</option>
<option value="B02">B02</option>
<option value="B02">屋根適合</option>
</select> </select>
</div> </div>
<div className="data-input mt5"> <div className="data-input mt5">
<select <select className="select-form" name="" id="">
className="select-form" <option value="">屋根適合</option>
name="" <option value="">屋根適合</option>
id="qnaClsSmlCd" <option value="">屋根適合</option>
value={inquiryRequest.qnaClsSmlCd ?? ''} <option value="">屋根適合</option>
onChange={(e) => setInquiryRequest({ ...inquiryRequest, qnaClsSmlCd: e.target.value })} <option value="">屋根適合</option>
>
<option value="">選択してください</option>
<option value="C05">C05</option>
<option value="C05">屋根適合</option>
</select> </select>
</div> </div>
</div> </div>
@ -125,36 +94,27 @@ export default function RegistForm() {
名前 <i className="import">*</i> 名前 <i className="import">*</i>
</div> </div>
<div className="data-input"> <div className="data-input">
<input <input className="input-frame" type="text" placeholder="名前を書いてください" />
className="input-frame"
type="text"
placeholder="名前を書いてください"
onChange={(e) => setInquiryRequest({ ...inquiryRequest, regUserNm: e.target.value })}
/>
</div> </div>
</div> </div>
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">電話番号</div> <div className="data-input-form-tit">電話番号</div>
<div className="data-input"> <div className="data-input">
<input <input className="input-frame" type="text" placeholder="電話番号を書き留めてください" />
className="input-frame"
type="text"
placeholder="電話番号を書き留めてください"
onChange={(e) => setInquiryRequest({ ...inquiryRequest, regUserTelNo: e.target.value })}
/>
</div> </div>
</div> </div>
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit"> <div className="data-input-form-tit">
E-mail <i className="import">*</i> 名前 <i className="import">*</i>
</div> </div>
<div className="data-input"> <div className="data-input">
<input <input className="input-frame" type="text" placeholder="名前を書いてください" />
className="input-frame" </div>
type="text" </div>
placeholder="E-mailを書いてください" <div className="data-input-form-bx">
onChange={(e) => setInquiryRequest({ ...inquiryRequest, qstMail: e.target.value })} <div className="data-input-form-tit">電話番号</div>
/> <div className="data-input">
<input className="input-frame" type="text" placeholder="電話番号を書き留めてください" />
</div> </div>
</div> </div>
<div className="data-input-form-bx"> <div className="data-input-form-bx">
@ -162,12 +122,7 @@ export default function RegistForm() {
お問い合わせタイトル <i className="import">*</i> お問い合わせタイトル <i className="import">*</i>
</div> </div>
<div className="data-input"> <div className="data-input">
<input <input className="input-frame" type="text" placeholder="お問い合わせタイトルを記入してください" />
className="input-frame"
type="text"
placeholder="お問い合わせタイトルを記入してください"
onChange={(e) => setInquiryRequest({ ...inquiryRequest, title: e.target.value })}
/>
</div> </div>
</div> </div>
<div className="data-input-form-bx"> <div className="data-input-form-bx">

2
src/components/inquiry/list/ListForm.tsx
View File

@ -5,8 +5,8 @@ import { useState } from 'react'
export default function ListForm() { export default function ListForm() {
const router = useRouter() const router = useRouter()
const [searchKeyword, setSearchKeyword] = useState('')
const { inquiryListRequest, setInquiryListRequest } = useInquiryFilterStore() const { inquiryListRequest, setInquiryListRequest } = useInquiryFilterStore()
const [searchKeyword, setSearchKeyword] = useState(inquiryListRequest.schTitle ?? '')
const handleSearch = () => { const handleSearch = () => {
if (searchKeyword.length >= 2) { if (searchKeyword.length >= 2) {

37
src/components/inquiry/list/ListTable.tsx
View File

@ -7,7 +7,6 @@ import { InquiryList } from '@/types/Inquiry'
import { useRouter } from 'next/navigation' import { useRouter } from 'next/navigation'
import { useInquiryFilterStore } from '@/store/inquiryFilterStore' import { useInquiryFilterStore } from '@/store/inquiryFilterStore'
import { useSessionStore } from '@/store/session' import { useSessionStore } from '@/store/session'
import ListForm from './ListForm'
const badgeStyle = [ const badgeStyle = [
{ {
@ -30,23 +29,14 @@ export default function ListTable() {
const { inquiryList } = useInquiry() const { inquiryList } = useInquiry()
const { inquiryListRequest, setInquiryListRequest } = useInquiryFilterStore() const { inquiryListRequest, setInquiryListRequest } = useInquiryFilterStore()
const [heldInquiryList, setHeldInquiryList] = useState<typeof inquiryList>([])
const { session } = useSessionStore() const { session } = useSessionStore()
useEffect(() => { useEffect(() => {
if (inquiryList.length > 0) { if (inquiryList.length !== 0) {
if (offset === 0) { const hasMoreItems = inquiryList[0].totCnt > offset + 10
setHeldInquiryList(inquiryList) setHasMore(hasMoreItems)
} else {
const remainingList = heldInquiryList.slice(offset, offset + 10)
if (JSON.stringify(remainingList) !== JSON.stringify(inquiryList)) {
setHeldInquiryList((prev) => [...prev, ...inquiryList])
}
}
setHasMore(inquiryList.length > offset + 10)
} else { } else {
setHeldInquiryList([]) setHasMore(false)
} }
}, [inquiryList, offset]) }, [inquiryList, offset])
@ -59,19 +49,8 @@ export default function ListTable() {
setInquiryListRequest({ ...inquiryListRequest, startRow: offset, endRow: offset + 10 }) setInquiryListRequest({ ...inquiryListRequest, startRow: offset, endRow: offset + 10 })
} }
const handleFilter = (e: React.ChangeEvent<HTMLSelectElement>) => {
console.log(e.target.value)
setHeldInquiryList(inquiryList.filter((inquiry: InquiryList) => inquiry.answerYn === e.target.value))
if (e.target.value === '') {
setHeldInquiryList(inquiryList)
}
}
console.log('heldInquiryList:: ', heldInquiryList)
return ( return (
<> <>
<ListForm />
<div className="sale-frame"> <div className="sale-frame">
<div className="inquiry-table-filter"> <div className="inquiry-table-filter">
<div className="filter-check"> <div className="filter-check">
@ -81,7 +60,7 @@ export default function ListTable() {
</div> </div>
</div> </div>
<div className="filter-select"> <div className="filter-select">
<select className="select-form" name="" id="" onChange={(e) => handleFilter(e)}> <select className="select-form" name="" id="">
<option value="">全体</option> <option value="">全体</option>
<option value="N">回答待ち</option> <option value="N">回答待ち</option>
<option value="Y">回答完了</option> <option value="Y">回答完了</option>
@ -90,11 +69,11 @@ export default function ListTable() {
</div> </div>
<div className="inquiry-list-wrap"> <div className="inquiry-list-wrap">
<div className="inquiry-list-tit"> <div className="inquiry-list-tit">
合計 <span>{heldInquiryList.length > 0 ? heldInquiryList[0].totCnt : 0}</span>個 合計 <span>{inquiryList.length}</span>個
</div> </div>
<ul className="inquiry-list"> <ul className="inquiry-list">
{heldInquiryList.length > 0 && {inquiryList.length > 0 &&
heldInquiryList.map((inquiry: InquiryList) => ( inquiryList.map((inquiry: InquiryList) => (
<li className="inquiry-item" key={inquiry.qnaNo} onClick={() => router.push(`/inquiry/${inquiry.qnaNo}`)}> <li className="inquiry-item" key={inquiry.qnaNo} onClick={() => router.push(`/inquiry/${inquiry.qnaNo}`)}>
<div className="inquiry-item-bx"> <div className="inquiry-item-bx">
<div className="inquiry-item-category">{inquiry.qnaClsLrgCd}</div> <div className="inquiry-item-category">{inquiry.qnaClsLrgCd}</div>

3
src/components/popup/MemberInformationPopup.tsx
View File

@ -3,7 +3,6 @@
import { useRouter } from 'next/navigation' import { useRouter } from 'next/navigation'
import { usePopupController } from '@/store/popupController' import { usePopupController } from '@/store/popupController'
import { useSessionStore } from '@/store/session' import { useSessionStore } from '@/store/session'
import Image from 'next/image'
export default function MemberInformationPopup() { export default function MemberInformationPopup() {
const popupController = usePopupController() const popupController = usePopupController()
@ -23,7 +22,7 @@ export default function MemberInformationPopup() {
<div className="modal-header-inner"> <div className="modal-header-inner">
<div className="modal-name-wrap"> <div className="modal-name-wrap">
<div className="modal-img"> <div className="modal-img">
<Image src="/assets/images/layout/modal_header_icon.svg" width={18} height={20} alt="" /> <img src="/assets/images/layout/modal_header_icon.svg" alt="" />
</div> </div>
<div className="modal-name">会員情報</div> <div className="modal-name">会員情報</div>
</div> </div>

5
src/components/popup/ZipCodePopup.tsx
View File

@ -28,11 +28,10 @@ export default function ZipCodePopup() {
const popupController = usePopupController() const popupController = usePopupController()
const handleApply = () => { const handleApply = () => {
console.log(addressInfo?.[0])
setAddressData({ setAddressData({
post_code: addressInfo?.[0]?.zipcode || '', post_code: addressInfo?.[0]?.zipcode || '',
address: addressInfo?.[0]?.address1 || '', address: addressInfo?.[0]?.prefcode || '',
address_detail: addressInfo?.[0]?.address2 + ' ' + addressInfo?.[0]?.address3 || '', address_detail: addressInfo?.[0]?.address1 + ' ' + addressInfo?.[0]?.address2 + ' ' + addressInfo?.[0]?.address3 || '',
}) })
popupController.setZipCodePopup(false) popupController.setZipCodePopup(false)
} }

59
src/components/suitable/Suitable.tsx
View File

@ -3,7 +3,6 @@
import { useState } from 'react' import { useState } from 'react'
import SuitableCheckData from './SuitableCheckData' import SuitableCheckData from './SuitableCheckData'
import SuitableNoData from './SuitableNoData' import SuitableNoData from './SuitableNoData'
import Image from 'next/image'
export default function Suitable() { export default function Suitable() {
const [reference, setReference] = useState(false) const [reference, setReference] = useState(false)
@ -36,34 +35,22 @@ export default function Suitable() {
<ul className="reference-list"> <ul className="reference-list">
<li className="reference-item"> <li className="reference-item">
<div className="reference-item-bx"> <div className="reference-item-bx">
<div className="compliance-icon"> <i className="compliance-icon check"></i>設置可能
<Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
</div>
<span>設置可能</span>
</div> </div>
</li> </li>
<li className="reference-item"> <li className="reference-item">
<div className="reference-item-bx"> <div className="reference-item-bx">
<div className="compliance-icon"> <i className="compliance-icon x"></i>設置可能
<Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
</div>
<span>設置不可</span>
</div> </div>
</li> </li>
<li className="reference-item"> <li className="reference-item">
<div className="reference-item-bx"> <div className="reference-item-bx">
<div className="compliance-icon"> <i className="compliance-icon quest"></i>設置可能
<Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
</div>
<span>お問い合わせ</span>
</div> </div>
</li> </li>
<li className="reference-item"> <li className="reference-item">
<div className="reference-item-bx"> <div className="reference-item-bx">
<div className="compliance-icon"> <i className="compliance-icon tip"></i>設置可能
<Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
</div>
<span>備考</span>
</div> </div>
</li> </li>
</ul> </ul>
@ -74,29 +61,25 @@ export default function Suitable() {
<SuitableCheckData /> <SuitableCheckData />
<SuitableCheckData /> <SuitableCheckData />
<SuitableCheckData /> <SuitableCheckData />
</div>
{/* 데이터 없을경우 버튼 영역 안보여야함 */} {/* 데이터 없을경우 버튼 영역 안보여야함 */}
<div className="float-btn-wrap"> <div className="btn-flex-wrap com">
<div className="btn-flex-wrap com"> <div className="btn-bx">
<div className="btn-bx"> <button className="btn-frame n-blue icon">
<button className="btn-frame n-blue icon"> 全選択<i className="btn-arr"></i>
全選択<i className="btn-arr"></i> </button>
</button> </div>
</div> <div className="btn-bx">
<div className="btn-bx"> <button className="btn-frame red icon">
<button className="btn-frame red icon"> 詳細を見る<i className="btn-arr"></i>
詳細を見る<i className="btn-arr"></i> </button>
</button> </div>
</div> <div className="btn-bx">
<div className="btn-bx"> <button className="btn-frame n-blue icon">
<button className="btn-frame n-blue icon"> 選択ダウンロード<i className="btn-arr"></i>
選択ダウンロード<i className="btn-arr"></i> </button>
</button>
</div>
</div>
</div> </div>
</div> </div>
{/* 검색기록 없을떄 위에 두 영역 안보이고 이 부분만 보여야 함*/} {/* 검색기록 없을떄 위에 두 영역 안보이고 이 부분만 보여야 함*/}
{/* <SuitableNoData /> */} {/* <SuitableNoData /> */}
</div> </div>

41
src/components/suitable/SuitableCheckData.tsx
View File

@ -1,13 +1,11 @@
'use client' 'use client'
import Image from 'next/image'
export default function SuitableCheckData() { export default function SuitableCheckData() {
return ( return (
<> <>
<div className={`compliance-check-bx act`}> <div className={`compliance-check-bx act`}>
<div className="check-name-wrap"> <div className="check-name-wrap">
<div className="check-form-box ch-bld"> <div className="check-form-box com-tit">
<input type="checkbox" id="ch01" /> <input type="checkbox" id="ch01" />
<label htmlFor="ch01">アースティ４０</label> <label htmlFor="ch01">アースティ４０</label>
</div> </div>
@ -18,59 +16,48 @@ export default function SuitableCheckData() {
<ul className="reference-list check"> <ul className="reference-list check">
<li className="reference-item"> <li className="reference-item">
<div className="check-item-wrap"> <div className="check-item-wrap">
<div className="check-form-box light"> <div className="check-form-box com-txt">
<input type="checkbox" id="ch02" /> <input type="checkbox" id="ch02" />
<label htmlFor="ch02">屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦</label> <label htmlFor="ch02">屋根技研 支持瓦</label>
</div> </div>
<div className="compliance-icon-wrap"> <div className="compliance-icon-wrap">
<div className="compliance-icon"> <i className="compliance-icon check"></i>
<Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image> <i className="compliance-icon x"></i>
</div>
</div> </div>
</div> </div>
</li> </li>
<li className="reference-item"> <li className="reference-item">
<div className="check-item-wrap"> <div className="check-item-wrap">
<div className="check-form-box light"> <div className="check-form-box com-txt">
<input type="checkbox" id="ch03" /> <input type="checkbox" id="ch03" />
<label htmlFor="ch03">屋根技研 支持金具</label> <label htmlFor="ch03">屋根技研 支持金具</label>
</div> </div>
<div className="compliance-icon-wrap"> <div className="compliance-icon-wrap">
<div className="compliance-icon"> <i className="compliance-icon x"></i>
<Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image> <i className="compliance-icon tip"></i>
</div>
<div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
</div>
</div> </div>
</div> </div>
</li> </li>
<li className="reference-item"> <li className="reference-item">
<div className="check-item-wrap"> <div className="check-item-wrap">
<div className="check-form-box light"> <div className="check-form-box com-txt">
<input type="checkbox" id="ch04" /> <input type="checkbox" id="ch04" />
<label htmlFor="ch04">屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦屋根技研支持瓦</label> <label htmlFor="ch04">屋根技研YGアンカー</label>
</div> </div>
<div className="compliance-icon-wrap"> <div className="compliance-icon-wrap">
<div className="compliance-icon"> <i className="compliance-icon tip"></i>
<Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image> <i className="compliance-icon quest"></i>
</div>
<div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
</div>
</div> </div>
</div> </div>
</li> </li>
<li className="reference-item"> <li className="reference-item">
<div className="check-item-wrap"> <div className="check-item-wrap">
<div className="check-form-box light"> <div className="check-form-box com-txt">
<input type="checkbox" id="ch05" /> <input type="checkbox" id="ch05" />
<label htmlFor="ch05">ダイドハント支持瓦Ⅱ</label> <label htmlFor="ch05">ダイドハント支持瓦Ⅱ</label>
</div> </div>
<div className="compliance-icon-wrap"> <div className="compliance-icon-wrap">
<div className="compliance-icon"> <i className="compliance-icon check"></i>
<Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
</div>
</div> </div>
</div> </div>
</li> </li>

40
src/components/survey-sale/common/NavTab.tsx
View File

@ -15,7 +15,7 @@ export default function NavTab() {
const params = useParams() const params = useParams()
const detailId = params.id const detailId = params.id
const { basicInfoSelected, roofInfoSelected, reset, setBasicInfoSelected, setRoofInfoSelected } = useSurveySaleTabState() const { basicInfoSelected, roofInfoSelected, reset } = useSurveySaleTabState()
useEffect(() => { useEffect(() => {
return () => { return () => {
@ -27,36 +27,26 @@ export default function NavTab() {
return null return null
} }
const scrollSection = (section: string) => {
const sectionElement = document.getElementById(section)
if (sectionElement) {
sectionElement.scrollIntoView({ behavior: 'smooth' })
}
}
const handleBasicInfoClick = () => { const handleBasicInfoClick = () => {
// if (id) { if (id) {
// router.push(`/survey-sale/basic-info?id=${id}`) router.push(`/survey-sale/basic-info?id=${id}`)
// return return
// } }
if (detailId) { if (detailId) {
router.push(`/survey-sale/${detailId}`) router.push(`/survey-sale/${detailId}`)
return return
} }
scrollSection('basic-form-section')
setBasicInfoSelected()
} }
const handleRoofInfoClick = () => { const handleRoofInfoClick = () => {
// if (id) { if (id) {
// if (isTemp === 'true') { if (isTemp === 'true') {
// alert('基本情報が一時保存された状態です。') alert('基本情報が一時保存された状態です。')
// return return
// } }
// router.push(`/survey-sale/roof-info?id=${id}`) router.push(`/survey-sale/roof-info?id=${id}`)
// return return
// } }
if (detailId) { if (detailId) {
router.push(`/survey-sale/${detailId}?tab=roof-info`) router.push(`/survey-sale/${detailId}?tab=roof-info`)
return return
@ -65,10 +55,6 @@ export default function NavTab() {
alert('基本情報を先に保存してください。') alert('基本情報を先に保存してください。')
return null return null
} }
// if (pathname === '/survey-sale/regist') {
scrollSection('roof-form-section')
// }
setRoofInfoSelected()
} }
return ( return (

36
src/components/survey-sale/detail/DataTable.tsx
View File

@ -2,8 +2,10 @@
import { useServey } from '@/hooks/useSurvey' import { useServey } from '@/hooks/useSurvey'
import { useParams, useSearchParams } from 'next/navigation' import { useParams, useSearchParams } from 'next/navigation'
import { useEffect, useState } from 'react' import { useEffect } from 'react'
import { useState } from 'react'
import DetailForm from './DetailForm' import DetailForm from './DetailForm'
import { useSurveySaleTabState } from '@/store/surveySaleTabState'
import RoofDetailForm from './RoofDetailForm' import RoofDetailForm from './RoofDetailForm'
export default function DataTable() { export default function DataTable() {
@ -12,21 +14,21 @@ export default function DataTable() {
const searchParams = useSearchParams() const searchParams = useSearchParams()
const tab = searchParams.get('tab') const tab = searchParams.get('tab')
const isTemp = searchParams.get('isTemporary')
const { surveyDetail, isLoadingSurveyDetail } = useServey(Number(id)) const { surveyDetail, isLoadingSurveyDetail } = useServey(Number(id))
const [isTemporary, setIsTemporary] = useState(isTemp === 'true') const [isTemporary, setIsTemporary] = useState(true)
const { setBasicInfoSelected, setRoofInfoSelected } = useSurveySaleTabState()
const { validateSurveyDetail } = useServey(Number(id))
useEffect(() => { useEffect(() => {
if (surveyDetail?.DETAIL_INFO) { if (surveyDetail?.representative && surveyDetail?.store && surveyDetail?.construction_point) {
const validate = validateSurveyDetail(surveyDetail.DETAIL_INFO) setIsTemporary(false)
if (validate.trim() !== '') {
setIsTemporary(false)
}
} }
}, [surveyDetail]) if (tab === 'roof-info') {
setRoofInfoSelected()
} else {
setBasicInfoSelected()
}
}, [surveyDetail, tab, setBasicInfoSelected, setRoofInfoSelected])
if (isLoadingSurveyDetail) { if (isLoadingSurveyDetail) {
return <div>Loading...</div> return <div>Loading...</div>
@ -48,25 +50,25 @@ export default function DataTable() {
<span className="text-red-500">仮保存</span> <span className="text-red-500">仮保存</span>
</td> </td>
) : ( ) : (
<td>{surveyDetail?.ID}</td> <td>{surveyDetail?.id}</td>
)} )}
</tr> </tr>
<tr> <tr>
<th>登録日</th> <th>登録日</th>
<td>{surveyDetail?.REG_DT ? new Date(surveyDetail?.REG_DT).toLocaleString() : ''}</td> <td>{surveyDetail?.created_at ? new Date(surveyDetail?.created_at).toLocaleString() : ''}</td>
</tr> </tr>
<tr> <tr>
<th>更新日時</th> <th>更新日時</th>
<td>{surveyDetail?.UPT_DT ? new Date(surveyDetail?.UPT_DT).toLocaleString() : ''}</td> <td>{surveyDetail?.updated_at ? new Date(surveyDetail?.updated_at).toLocaleString() : ''}</td>
</tr> </tr>
<tr> <tr>
<th>提出可否</th> <th>提出可否</th>
<td> <td>
{surveyDetail?.SUBMISSION_STATUS && surveyDetail?.SUBMISSION_DATE ? ( {surveyDetail?.submission_status && surveyDetail?.submission_date ? (
<> <>
{/* TODO: 제출한 판매점 ID 추가 필요 */} {/* TODO: 제출한 판매점 ID 추가 필요 */}
<div>{new Date(surveyDetail.SUBMISSION_DATE).toLocaleString()}</div> <div>{new Date(surveyDetail.submission_date).toLocaleString()}</div>
<div>{surveyDetail.STORE}</div> <div>販売店 ID...</div>
</> </>
) : ( ) : (
'-' '-'

129
src/components/survey-sale/detail/DetailButton.tsx
View File

@ -1,119 +1,86 @@
'use client' 'use client'
import { useRouter, useSearchParams } from 'next/navigation' import { useRouter } from 'next/navigation'
import { useServey } from '@/hooks/useSurvey' import { useServey } from '@/hooks/useSurvey'
import { useSessionStore } from '@/store/session' import { useSessionStore } from '@/store/session'
import { SurveyBasicInfo } from '@/types/Survey' import { useEffect, useState } from 'react'
import { useState } from 'react'
export default function DetailButton({ surveyDetail }: { surveyDetail: SurveyBasicInfo | null }) { export default function DetailButton({ isTemporary, surveyId, representative }: { isTemporary: boolean; surveyId: number; representative: string }) {
const router = useRouter() const router = useRouter()
const { session } = useSessionStore() const { session } = useSessionStore()
const { submitSurvey, deleteSurvey } = useServey(surveyDetail?.ID ?? 0) const { submitSurvey, deleteSurvey } = useServey(surveyId)
const [userNm, setUserNm] = useState('')
const searchParams = useSearchParams() useEffect(() => {
const isTemp = searchParams.get('isTemporary') if (session?.isLoggedIn) {
const [isTemporary, setIsTemporary] = useState(isTemp === 'true') setUserNm(session?.userNm ?? '')
const checkRole = () => {
switch (session?.role) {
case 'T01':
return session?.userNm === surveyDetail?.REPRESENTATIVE ? true : false
case 'Admin':
return session?.storeNm === surveyDetail?.STORE ? true : false
case 'Admin_Sub':
return session?.storeNm === surveyDetail?.STORE ? true : false
case 'Builder':
return session?.builderNo === surveyDetail?.CONSTRUCTION_POINT ? true : false
case 'Partner':
return session?.builderNo === surveyDetail?.CONSTRUCTION_POINT ? true : false
default:
return ''
} }
} }, [session, setUserNm])
const handleSubmit = async () => { const handleSubmit = async () => {
const result = checkRole() if (isTemporary) {
if (result) { alert('一時保存されたデータは提出できません。')
if (isTemporary) { return
alert('一時保存されたデータは提出できません。') }
return if (userNm === representative) {
if (confirm('提出しますか？？')) {
if (surveyId) {
// TODO: 제출 페이지 추가
alert('SUBMIT POPUP!!!!!!!!!!!')
await submitSurvey()
}
} }
window.neoConfirm( } else {
'提出しますか？？', alert('担当者のみ提出可能です。')
async () => {
if (surveyDetail?.ID) {
// TODO: 제출 페이지 추가
alert('SUBMIT POPUP!!!!!!!!!!!')
await submitSurvey()
}
},
() => null,
)
} }
} }
const handleUpdate = () => { const handleUpdate = () => {
const result = checkRole() if (userNm === representative) {
if (result) { router.push(`/survey-sale/basic-info?id=${surveyId}&isTemp=${isTemporary}`)
// router.push(`/survey-sale/basic-info?id=${surveyDetail?.ID}&isTemp=${isTemporary}`)
router.push(`/survey-sale/regist?id=${surveyDetail?.ID}`)
} else { } else {
alert('担当者のみ修正可能です。') alert('担当者のみ修正可能です。')
} }
} }
const handleDelete = async () => { const handleDelete = async () => {
window.neoConfirm( if (confirm('削除しますか？')) {
'削除しますか？', if (surveyId) {
async () => { if (userNm === representative) {
if (surveyDetail?.ID) { await deleteSurvey()
if (session.userNm === surveyDetail?.REPRESENTATIVE) { router.push('/survey-sale')
await deleteSurvey() } else {
alert('削除されました。') alert('担当者のみ削除可能です。')
router.push('/survey-sale')
} else {
alert('担当者のみ削除可能です。')
}
} }
}, }
() => null, }
)
} }
const isSubmitter = session?.storeNm === surveyDetail?.STORE && session?.builderNo === surveyDetail?.CONSTRUCTION_POINT
return ( return (
<div className="btn-flex-wrap"> <div className="btn-flex-wrap">
<div className="btn-bx"> {isTemporary ? (
<button className="btn-frame n-blue icon" onClick={() => router.push('/survey-sale')}>
リスト<i className="btn-arr"></i>
</button>
</div>
{isSubmitter && surveyDetail?.SUBMISSION_STATUS ? (
<></> <></>
) : ( ) : (
<> <>
{isTemporary || surveyDetail?.SUBMISSION_STATUS ? (
<></>
) : (
<>
<div className="btn-bx">
<button className="btn-frame red icon" onClick={handleSubmit}>
提出<i className="btn-arr"></i>
</button>
</div>
</>
)}
<div className="btn-bx"> <div className="btn-bx">
<button className="btn-frame n-blue icon" onClick={handleUpdate}> <button className="btn-frame n-blue icon" onClick={() => router.push('/survey-sale')}>
修正<i className="btn-arr"></i> リスト<i className="btn-arr"></i>
</button> </button>
</div> </div>
<div className="btn-bx"> <div className="btn-bx">
<button className="btn-frame n-blue icon" onClick={handleDelete}> <button className="btn-frame red icon" onClick={handleSubmit}>
削除<i className="btn-arr"></i> 提出<i className="btn-arr"></i>
</button> </button>
</div> </div>
</> </>
)} )}
<div className="btn-bx">
<button className="btn-frame n-blue icon" onClick={handleUpdate}>
修正<i className="btn-arr"></i>
</button>
</div>
<div className="btn-bx">
<button className="btn-frame n-blue icon" onClick={handleDelete}>
削除<i className="btn-arr"></i>
</button>
</div>
</div> </div>
) )
} }

23
src/components/survey-sale/detail/DetailForm.tsx
View File

@ -1,5 +1,6 @@
'use client' 'use client'
import { useEffect, useState } from 'react'
import DetailButton from './DetailButton' import DetailButton from './DetailButton'
import { SurveyBasicInfo } from '@/types/Survey' import { SurveyBasicInfo } from '@/types/Survey'
@ -10,6 +11,14 @@ export default function DetailForm({
surveyDetail: SurveyBasicInfo | null surveyDetail: SurveyBasicInfo | null
isLoadingSurveyDetail: boolean isLoadingSurveyDetail: boolean
}) { }) {
const [isTemporary, setIsTemporary] = useState(true)
useEffect(() => {
if (surveyDetail?.representative && surveyDetail?.store && surveyDetail?.construction_point) {
setIsTemporary(false)
}
}, [surveyDetail])
if (isLoadingSurveyDetail) { if (isLoadingSurveyDetail) {
return <div>Loading...</div> return <div>Loading...</div>
} }
@ -19,15 +28,15 @@ export default function DetailForm({
<div className="data-form-wrap"> <div className="data-form-wrap">
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">担当者名</div> <div className="data-input-form-tit">担当者名</div>
<input type="text" className="input-frame" disabled defaultValue={surveyDetail?.REPRESENTATIVE} /> <input type="text" className="input-frame" disabled defaultValue={surveyDetail?.representative} />
</div> </div>
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">販売店</div> <div className="data-input-form-tit">販売店</div>
<input type="text" className="input-frame" disabled defaultValue={surveyDetail?.STORE ?? ''} /> <input type="text" className="input-frame" disabled defaultValue={surveyDetail?.store ?? ''} />
</div> </div>
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">施工店</div> <div className="data-input-form-tit">施工店</div>
<input type="text" className="input-frame" disabled defaultValue={surveyDetail?.CONSTRUCTION_POINT ?? ''} /> <input type="text" className="input-frame" disabled defaultValue={surveyDetail?.construction_point ?? ''} />
</div> </div>
</div> </div>
</div> </div>
@ -36,18 +45,18 @@ export default function DetailForm({
<div className="data-form-wrap"> <div className="data-form-wrap">
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">現地調査日</div> <div className="data-input-form-tit">現地調査日</div>
<input type="text" className="input-frame" disabled defaultValue={surveyDetail?.INVESTIGATION_DATE ?? ''} /> <input type="text" className="input-frame" disabled defaultValue={surveyDetail?.investigation_date ?? ''} />
</div> </div>
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">建物名</div> <div className="data-input-form-tit">建物名</div>
<input type="text" className="input-frame" disabled defaultValue={surveyDetail?.BUILDING_NAME ?? ''} /> <input type="text" className="input-frame" disabled defaultValue={surveyDetail?.building_name ?? ''} />
</div> </div>
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">顧客名</div> <div className="data-input-form-tit">顧客名</div>
<input type="text" className="input-frame" disabled defaultValue={surveyDetail?.CUSTOMER_NAME ?? ''} /> <input type="text" className="input-frame" disabled defaultValue={surveyDetail?.customer_name ?? ''} />
</div> </div>
</div> </div>
<DetailButton surveyDetail={surveyDetail ?? null} /> <DetailButton isTemporary={isTemporary} surveyId={Number(surveyDetail?.id)} representative={surveyDetail?.representative ?? ''} />
</div> </div>
</> </>
) )

85
src/components/survey-sale/detail/RoofDetailForm.tsx
View File

@ -1,8 +1,8 @@
import { SurveyBasicInfo, SurveyDetailInfo } from '@/types/Survey' import { SurveyBasicInfo, SurveyDetailInfo } from '@/types/Survey'
import DetailButton from './DetailButton' import DetailButton from './DetailButton'
import { roof_material, supplementary_facilities } from './form/etcProcess/MultiCheckEtc' import { roof_material, supplementary_facilities } from './form/MultiCheckEtc'
import { selectBoxOptions } from './form/etcProcess/SelectBoxEtc' import { selectBoxOptions } from './form/SelectBoxEtc'
import { radioEtcData } from './form/etcProcess/RadioEtc' import { radioEtcData } from './form/RadioEtc'
export default function RoofDetailForm({ export default function RoofDetailForm({
surveyDetail, surveyDetail,
@ -30,12 +30,12 @@ export default function RoofDetailForm({
<div className="data-input-form-bx"> <div className="data-input-form-bx">
{/* 전기 계약 용량 */} {/* 전기 계약 용량 */}
<div className="data-input-form-tit">電気契約容量</div> <div className="data-input-form-tit">電気契約容量</div>
<input className="input-frame" type="text" placeholder="-" readOnly value={surveyDetail?.DETAIL_INFO?.CONTRACT_CAPACITY ?? ''} /> <input className="input-frame" type="text" placeholder="-" readOnly value={surveyDetail?.detail_info?.contract_capacity ?? ''} />
</div> </div>
{/* 전기 소매 회사 */} {/* 전기 소매 회사 */}
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">電気小売会社</div> <div className="data-input-form-tit">電気小売会社</div>
<input className="input-frame" type="text" placeholder="-" readOnly value={surveyDetail?.DETAIL_INFO?.RETAIL_COMPANY ?? ''} /> <input className="input-frame" type="text" placeholder="-" readOnly value={surveyDetail?.detail_info?.retail_company ?? ''} />
</div> </div>
{/* 전기 부대 설비 */} {/* 전기 부대 설비 */}
<div className="data-input-form-bx"> <div className="data-input-form-bx">
@ -46,7 +46,7 @@ export default function RoofDetailForm({
<input <input
type="checkbox" type="checkbox"
id={`${item.id}`} id={`${item.id}`}
checked={makeNumArr(surveyDetail?.DETAIL_INFO?.SUPPLEMENTARY_FACILITIES ?? '').includes(String(item.id))} checked={makeNumArr(surveyDetail?.detail_info?.supplementary_facilities ?? '').includes(String(item.id))}
readOnly readOnly
/> />
<label htmlFor={`${item.id}`}>{item.name}</label> <label htmlFor={`${item.id}`}>{item.name}</label>
@ -56,7 +56,7 @@ export default function RoofDetailForm({
<input <input
type="checkbox" type="checkbox"
id={`supplementary_facilities_etc`} id={`supplementary_facilities_etc`}
checked={surveyDetail?.DETAIL_INFO?.SUPPLEMENTARY_FACILITIES_ETC !== null} checked={surveyDetail?.detail_info?.supplementary_facilities_etc !== null}
readOnly readOnly
/> />
<label htmlFor={`supplementary_facilities_etc`}>その他 (直接入力)</label> <label htmlFor={`supplementary_facilities_etc`}>その他 (直接入力)</label>
@ -68,19 +68,19 @@ export default function RoofDetailForm({
className="input-frame" className="input-frame"
placeholder="-" placeholder="-"
readOnly readOnly
value={surveyDetail?.DETAIL_INFO?.SUPPLEMENTARY_FACILITIES_ETC ?? ''} value={surveyDetail?.detail_info?.supplementary_facilities_etc ?? ''}
/> />
</div> </div>
</div> </div>
{/* 설치 희망 시스템 */} {/* 설치 희망 시스템 */}
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">設置希望システム</div> <div className="data-input-form-tit">設置希望システム</div>
<SelectedBox column="INSTALLATION_SYSTEM" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} /> <SelectedBox column="installation_system" detailInfoData={surveyDetail?.detail_info ?? null} />
</div> </div>
{/* 건축 연수 */} {/* 건축 연수 */}
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">建築年数</div> <div className="data-input-form-tit">建築年数</div>
<SelectedBox column="CONSTRUCTION_YEAR" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} /> <SelectedBox column="construction_year" detailInfoData={surveyDetail?.detail_info ?? null} />
</div> </div>
{/* 지붕재 */} {/* 지붕재 */}
<div className="data-input-form-bx"> <div className="data-input-form-bx">
@ -91,63 +91,63 @@ export default function RoofDetailForm({
<input <input
type="checkbox" type="checkbox"
id={`${item.id}`} id={`${item.id}`}
checked={makeNumArr(surveyDetail?.DETAIL_INFO?.ROOF_MATERIAL ?? '').includes(String(item.id))} checked={makeNumArr(surveyDetail?.detail_info?.roof_material ?? '').includes(String(item.id))}
readOnly readOnly
/> />
<label htmlFor={`${item.id}`}>{item.name}</label> <label htmlFor={`${item.id}`}>{item.name}</label>
</div> </div>
))} ))}
<div className="check-form-box"> <div className="check-form-box">
<input type="checkbox" id={`roof_material_etc`} checked={surveyDetail?.DETAIL_INFO?.ROOF_MATERIAL_ETC !== null} readOnly /> <input type="checkbox" id={`roof_material_etc`} checked={surveyDetail?.detail_info?.roof_material_etc !== null} readOnly />
<label htmlFor={`roof_material_etc`}>その他 (直接入力)</label> <label htmlFor={`roof_material_etc`}>その他 (直接入力)</label>
</div> </div>
</div> </div>
<div className="data-input"> <div className="data-input">
<input type="text" className="input-frame" placeholder="-" readOnly value={surveyDetail?.DETAIL_INFO?.ROOF_MATERIAL_ETC ?? ''} /> <input type="text" className="input-frame" placeholder="-" readOnly value={surveyDetail?.detail_info?.roof_material_etc ?? ''} />
</div> </div>
</div> </div>
{/* 지붕 모양 */} {/* 지붕 모양 */}
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">屋根の形状</div> <div className="data-input-form-tit">屋根の形状</div>
<SelectedBox column="ROOF_SHAPE" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} /> <SelectedBox column="roof_shape" detailInfoData={surveyDetail?.detail_info ?? null} />
</div> </div>
{/* 지붕 경사도 */} {/* 지붕 경사도 */}
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">屋根の斜面</div> <div className="data-input-form-tit">屋根の斜面</div>
<div className="data-input flex"> <div className="data-input flex">
<input className="input-frame" type="text" placeholder="-" readOnly value={surveyDetail?.DETAIL_INFO?.ROOF_SLOPE ?? ''} /> <input className="input-frame" type="text" placeholder="-" readOnly value={surveyDetail?.detail_info?.roof_slope ?? ''} />
<span>寸</span> <span>寸</span>
</div> </div>
</div> </div>
{/* 주택 구조 */} {/* 주택 구조 */}
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">住宅構造</div> <div className="data-input-form-tit">住宅構造</div>
<RadioSelected column="HOUSE_STRUCTURE" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} /> <RadioSelected column="house_structure" detailInfoData={surveyDetail?.detail_info ?? null} />
</div> </div>
{/* 서까래 재질 */} {/* 서까래 재질 */}
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">垂木の材質</div> <div className="data-input-form-tit">垂木の材質</div>
<RadioSelected column="RAFTER_MATERIAL" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} /> <RadioSelected column="rafter_material" detailInfoData={surveyDetail?.detail_info ?? null} />
</div> </div>
{/* 서까래 크기 */} {/* 서까래 크기 */}
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">垂木の大きさ</div> <div className="data-input-form-tit">垂木の大きさ</div>
<SelectedBox column="RAFTER_SIZE" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} /> <SelectedBox column="rafter_size" detailInfoData={surveyDetail?.detail_info ?? null} />
</div> </div>
{/* 서까래 피치 */} {/* 서까래 피치 */}
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">垂木のピッチ</div> <div className="data-input-form-tit">垂木のピッチ</div>
<SelectedBox column="RAFTER_PITCH" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} /> <SelectedBox column="rafter_pitch" detailInfoData={surveyDetail?.detail_info ?? null} />
</div> </div>
{/* 서까래 방향 */} {/* 서까래 방향 */}
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">垂木の方向</div> <div className="data-input-form-tit">垂木の方向</div>
<RadioSelected column="RAFTER_DIRECTION" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} /> <RadioSelected column="rafter_direction" detailInfoData={surveyDetail?.detail_info ?? null} />
</div> </div>
{/* 노지판 종류 */} {/* 노지판 종류 */}
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">路地板の種類</div> <div className="data-input-form-tit">路地板の種類</div>
<SelectedBox column="OPEN_FIELD_PLATE_KIND" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} /> <SelectedBox column="open_field_plate_kind" detailInfoData={surveyDetail?.detail_info ?? null} />
</div> </div>
{/* 노지판 두께 */} {/* 노지판 두께 */}
<div className="data-input-form-bx"> <div className="data-input-form-bx">
@ -158,7 +158,7 @@ export default function RoofDetailForm({
type="text" type="text"
placeholder="-" placeholder="-"
readOnly readOnly
value={surveyDetail?.DETAIL_INFO?.OPEN_FIELD_PLATE_THICKNESS ?? ''} value={surveyDetail?.detail_info?.open_field_plate_thickness ?? ''}
/> />
<span>mm</span> <span>mm</span>
</div> </div>
@ -166,40 +166,37 @@ export default function RoofDetailForm({
{/* 누수 흔적 */} {/* 누수 흔적 */}
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">水漏れの痕跡</div> <div className="data-input-form-tit">水漏れの痕跡</div>
<RadioSelected column="LEAK_TRACE" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} /> <RadioSelected column="leak_trace" detailInfoData={surveyDetail?.detail_info ?? null} />
</div> </div>
{/* 방수재 종류 */} {/* 방수재 종류 */}
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">防水材の種類</div> <div className="data-input-form-tit">防水材の種類</div>
<RadioSelected column="WATERPROOF_MATERIAL" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} /> <RadioSelected column="waterproof_material" detailInfoData={surveyDetail?.detail_info ?? null} />
</div> </div>
{/* 단열재 유무 */} {/* 단열재 유무 */}
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">断熱材の有無</div> <div className="data-input-form-tit">断熱材の有無</div>
<RadioSelected column="INSULATION_PRESENCE" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} /> <RadioSelected column="insulation_presence" detailInfoData={surveyDetail?.detail_info ?? null} />
</div> </div>
{/* 구조 순서 */} {/* 구조 순서 */}
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">屋根構造の順序</div> <div className="data-input-form-tit">屋根構造の順序</div>
<SelectedBox column="STRUCTURE_ORDER" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} /> <SelectedBox column="structure_order" detailInfoData={surveyDetail?.detail_info ?? null} />
</div> </div>
{/* 설치 가능 여부 */} {/* 설치 가능 여부 */}
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">設置可能な場合</div> <div className="data-input-form-tit">設置可能な場合</div>
<SelectedBox column="INSTALLATION_AVAILABILITY" detailInfoData={surveyDetail?.DETAIL_INFO ?? null} /> <SelectedBox column="installation_availability" detailInfoData={surveyDetail?.detail_info ?? null} />
</div> </div>
{/* 메모 */} {/* 메모 */}
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">メモ</div> <div className="data-input-form-tit">メモ</div>
<div className="data-input"> <div className="data-input">
<textarea className="textarea-form" placeholder="-" readOnly value={surveyDetail?.DETAIL_INFO?.MEMO ?? ''} /> <textarea className="textarea-form" placeholder="-" readOnly value={surveyDetail?.detail_info?.memo ?? ''} />
</div> </div>
</div> </div>
</div> </div>
<DetailButton <DetailButton isTemporary={false} surveyId={Number(surveyDetail?.id)} representative={surveyDetail?.representative ?? ''} />
isTemporary={false}
surveyDetail={surveyDetail}
/>
</div> </div>
</> </>
) )
@ -207,14 +204,16 @@ export default function RoofDetailForm({
const SelectedBox = ({ column, detailInfoData }: { column: string; detailInfoData: SurveyDetailInfo | null }) => { const SelectedBox = ({ column, detailInfoData }: { column: string; detailInfoData: SurveyDetailInfo | null }) => {
const selectedId = detailInfoData?.[column as keyof SurveyDetailInfo] const selectedId = detailInfoData?.[column as keyof SurveyDetailInfo]
const etcValue = detailInfoData?.[`${column}_ETC` as keyof SurveyDetailInfo] const etcValue = detailInfoData?.[`${column}_etc` as keyof SurveyDetailInfo]
return ( return (
<> <>
<select className="select-form mb10" name={column} id={column} disabled value={selectedId ? 'selected' : etcValue ? 'etc' : ''}> <select className="select-form mb10" name={column} id={column} disabled value={selectedId ? 'selected' : etcValue ? 'etc' : ''}>
<option value="">-</option> <option value="">-</option>
<option value="etc">その他 (直接入力)</option> <option value="etc">その他 (直接入力)</option>
<option value="selected">{selectBoxOptions[column as keyof typeof selectBoxOptions][Number(selectedId)]?.name}</option> <option value="selected">
{typeof selectedId === 'number' ? selectBoxOptions[column as keyof typeof selectBoxOptions][selectedId]?.name : ''}
</option>
</select> </select>
{etcValue && <input type="text" className="input-frame" readOnly value={etcValue.toString()} />} {etcValue && <input type="text" className="input-frame" readOnly value={etcValue.toString()} />}
</> </>
@ -223,30 +222,28 @@ const SelectedBox = ({ column, detailInfoData }: { column: string; detailInfoDat
const RadioSelected = ({ column, detailInfoData }: { column: string; detailInfoData: SurveyDetailInfo | null }) => { const RadioSelected = ({ column, detailInfoData }: { column: string; detailInfoData: SurveyDetailInfo | null }) => {
let selectedId = detailInfoData?.[column as keyof SurveyDetailInfo] let selectedId = detailInfoData?.[column as keyof SurveyDetailInfo]
if (column === 'LEAK_TRACE') { if (column === 'leak_trace') {
selectedId = Number(selectedId) selectedId = Number(selectedId)
if (!selectedId) selectedId = 2
} }
let etcValue = null let etcValue = null
if (column !== 'RAFTER_DIRECTION') { if (column !== 'rafter_direction') {
etcValue = detailInfoData?.[`${column}_ETC` as keyof SurveyDetailInfo] etcValue = detailInfoData?.[`${column}_etc` as keyof SurveyDetailInfo]
} }
const etcChecked = etcValue !== null && etcValue !== undefined && etcValue !== '' const etcChecked = etcValue !== null && etcValue !== undefined && etcValue !== ''
console.log('column: selectedId', column, selectedId)
return ( return (
<> <>
{radioEtcData[column as keyof typeof radioEtcData].map((item) => ( {radioEtcData[column as keyof typeof radioEtcData].map((item) => (
<div className="radio-form-box mb10" key={item.id}> <div className="radio-form-box mb10" key={item.id}>
<input type="radio" name={column} id={`${item.id}`} disabled checked={Number(selectedId) === item.id} /> <input type="radio" name={column} id={`${item.id}`} disabled checked={selectedId === item.id} />
<label htmlFor={`${item.id}`}>{item.label}</label> <label htmlFor={`${item.id}`}>{item.label}</label>
</div> </div>
))} ))}
{column !== 'RAFTER_DIRECTION' && column !== 'LEAK_TRACE' && column !== 'INSULATION_PRESENCE' && ( {column !== 'rafter_direction' && column !== 'leak_trace' && column !== 'insulation_presence' && (
<div className="radio-form-box mb10"> <div className="radio-form-box mb10">
<input type="radio" name={column} id={`${column}_ETC`} value="etc" disabled checked={etcChecked} /> <input type="radio" name={column} id={`${column}_etc`} value="etc" disabled checked={etcChecked} />
<label htmlFor={`${column}_ETC`}>その他 (直接入力)</label> <label htmlFor={`${column}_etc`}>その他 (直接入力)</label>
</div> </div>
)} )}
{etcChecked && ( {etcChecked && (

113
src/components/survey-sale/detail/form/BasicForm.tsx
View File

@ -8,23 +8,23 @@ import { useSurveySaleTabState } from '@/store/surveySaleTabState'
import { usePopupController } from '@/store/popupController' import { usePopupController } from '@/store/popupController'
import { useAddressStore } from '@/store/addressStore' import { useAddressStore } from '@/store/addressStore'
import { useSessionStore } from '@/store/session' import { useSessionStore } from '@/store/session'
// import { useUserType } from '@/hooks/useUserType' import { useUserType } from '@/hooks/useUserType'
const defaultBasicInfoForm: SurveyBasicRequest = { const defaultBasicInfoForm: SurveyBasicRequest = {
REPRESENTATIVE: '', representative: '',
STORE: null, store: null,
CONSTRUCTION_POINT: null, construction_point: null,
INVESTIGATION_DATE: new Date().toLocaleDateString('en-CA'), investigation_date: new Date().toLocaleDateString('en-CA'),
BUILDING_NAME: null, building_name: null,
CUSTOMER_NAME: null, customer_name: null,
POST_CODE: null, post_code: null,
ADDRESS: null, address: null,
ADDRESS_DETAIL: null, address_detail: null,
SUBMISSION_STATUS: false, submission_status: false,
SUBMISSION_DATE: null, submission_date: null,
} }
const REQUIRED_FIELDS: (keyof SurveyBasicRequest)[] = ['REPRESENTATIVE', 'BUILDING_NAME', 'CUSTOMER_NAME'] const REQUIRED_FIELDS: (keyof SurveyBasicRequest)[] = ['representative', 'building_name', 'customer_name']
export default function BasicForm() { export default function BasicForm() {
const searchParams = useSearchParams() const searchParams = useSearchParams()
@ -37,33 +37,32 @@ export default function BasicForm() {
const [basicInfoData, setBasicInfoData] = useState<SurveyBasicRequest>(defaultBasicInfoForm) const [basicInfoData, setBasicInfoData] = useState<SurveyBasicRequest>(defaultBasicInfoForm)
const { addressData } = useAddressStore() const { addressData } = useAddressStore()
const { userType, store, construction_point } = useUserType()
const { session } = useSessionStore() const { session } = useSessionStore()
const popupController = usePopupController() const popupController = usePopupController()
useEffect(() => { useEffect(() => {
if (surveyDetail) { if (surveyDetail) {
const { ID, UPT_DT, REG_DT, DETAIL_INFO, ...rest } = surveyDetail const { id, updated_at, created_at, detail_info, ...rest } = surveyDetail
setBasicInfoData(rest) setBasicInfoData(rest)
} }
if (addressData) { if (addressData) {
setBasicInfoData({ setBasicInfoData({
...basicInfoData, ...basicInfoData,
POST_CODE: addressData.post_code, post_code: addressData.post_code,
ADDRESS: addressData.address, address: addressData.address,
ADDRESS_DETAIL: addressData.address_detail, address_detail: addressData.address_detail,
}) })
} }
if (session?.isLoggedIn) { if (session?.isLoggedIn) {
setBasicInfoData((prev) => ({ setBasicInfoData((prev) => ({
...prev, ...prev,
REPRESENTATIVE: session?.userId ?? '', representative: session?.userNm ?? '',
STORE: session?.storeNm ?? '',
CONSTRUCTION_POINT: session?.builderNo ?? '',
})) }))
} }
setBasicInfoSelected() setBasicInfoSelected()
}, [surveyDetail, addressData, session?.isLoggedIn, session?.userId, session?.storeNm, session?.builderNo]) }, [surveyDetail, addressData, session?.isLoggedIn, session?.userNm])
const focusInput = (input: keyof SurveyBasicRequest) => { const focusInput = (input: keyof SurveyBasicRequest) => {
const inputElement = document.getElementById(input) const inputElement = document.getElementById(input)
@ -87,19 +86,19 @@ export default function BasicForm() {
const handleSave = async (isTemporary: boolean) => { const handleSave = async (isTemporary: boolean) => {
if (id) { if (id) {
// updateSurvey(basicInfoData) updateSurvey(basicInfoData)
alert('保存しました。') alert('保存しました。')
// router.push(`/survey-sale/${id}?tab=basic-info`) router.push(`/survey-sale/${id}?tab=basic-info`)
} }
if (isTemporary) { if (isTemporary) {
// const saveId = await createSurvey(basicInfoData) const saveId = await createSurvey(basicInfoData)
alert('一時保存されました。') alert('一時保存されました。')
// router.push(`/survey-sale/${saveId}?tab=basic-info`) router.push(`/survey-sale/${saveId}?tab=basic-info`)
} else { } else {
if (validateSurvey(basicInfoData)) { if (validateSurvey(basicInfoData)) {
// const saveId = await createSurvey(basicInfoData) const saveId = await createSurvey(basicInfoData)
alert('保存しました。') alert('保存しました。 登録番号: ' + saveId)
// router.push(`/survey-sale/${saveId}?tab=basic-info`) router.push(`/survey-sale/${saveId}?tab=basic-info`)
} }
} }
} }
@ -118,11 +117,11 @@ export default function BasicForm() {
type="text" type="text"
className="input-frame" className="input-frame"
id="representative" id="representative"
value={session?.userId ? session?.userId : basicInfoData.REPRESENTATIVE} value={session?.userNm ? session?.userNm : basicInfoData.representative}
onChange={(e) => handleChange('REPRESENTATIVE', e.target.value)} onChange={(e) => handleChange('representative', e.target.value)}
/> />
</div> </div>
{(session?.role === 'Builder' || session?.role?.includes('Admin')) && ( {(userType === 'order' || userType?.includes('musubi')) && (
<> <>
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">販売店</div> <div className="data-input-form-tit">販売店</div>
@ -130,21 +129,21 @@ export default function BasicForm() {
type="text" type="text"
className="input-frame" className="input-frame"
id="store" id="store"
value={session?.storeNm ? session?.storeNm : basicInfoData.STORE ?? ''} value={store ? store : basicInfoData.store ?? ''}
onChange={(e) => handleChange('STORE', e.target.value)} onChange={(e) => handleChange('store', e.target.value)}
/> />
</div> </div>
</> </>
)} )}
{(session?.role === 'Partner' || session?.role === 'Builder') && ( {(userType === 'partner' || userType === 'musubi_con') && (
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">施工店</div> <div className="data-input-form-tit">施工店</div>
<input <input
type="text" type="text"
className="input-frame" className="input-frame"
id="construction_point" id="construction_point"
value={session?.builderNo ? session?.builderNo : basicInfoData.CONSTRUCTION_POINT ?? ''} value={construction_point ? construction_point : basicInfoData.construction_point ?? ''}
onChange={(e) => handleChange('CONSTRUCTION_POINT', e.target.value)} onChange={(e) => handleChange('construction_point', e.target.value)}
/> />
</div> </div>
)} )}
@ -162,9 +161,9 @@ export default function BasicForm() {
<input <input
type="date" type="date"
className="date-frame" className="date-frame"
id="INVESTIGATION_DATE" id="investigation_date"
value={basicInfoData.INVESTIGATION_DATE ?? ''} value={basicInfoData.investigation_date ?? ''}
onChange={(e) => handleChange('INVESTIGATION_DATE', e.target.value)} onChange={(e) => handleChange('investigation_date', e.target.value)}
/> />
</div> </div>
</div> </div>
@ -173,9 +172,9 @@ export default function BasicForm() {
<input <input
type="text" type="text"
className="input-frame" className="input-frame"
id="BUILDING_NAME" id="building_name"
value={basicInfoData.BUILDING_NAME ?? ''} value={basicInfoData.building_name ?? ''}
onChange={(e) => handleChange('BUILDING_NAME', e.target.value)} onChange={(e) => handleChange('building_name', e.target.value)}
/> />
</div> </div>
<div className="data-input-form-bx"> <div className="data-input-form-bx">
@ -183,25 +182,27 @@ export default function BasicForm() {
<input <input
type="text" type="text"
className="input-frame" className="input-frame"
id="CUSTOMER_NAME" id="customer_name"
value={basicInfoData.CUSTOMER_NAME ?? ''} value={basicInfoData.customer_name ?? ''}
onChange={(e) => handleChange('CUSTOMER_NAME', e.target.value)} onChange={(e) => handleChange('customer_name', e.target.value)}
/> />
</div> </div>
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">建物の住所</div> <div className="data-input-form-tit">建物の住所</div>
<div className="form-flex"> <div className="form-flex">
<div className="form-bx"> <div className="form-bx">
<input type="text" className="input-frame" id="POST_CODE" value={basicInfoData.POST_CODE ?? ''} readOnly /> <input type="text" className="input-frame" id="post_code" value={basicInfoData.post_code ?? ''} readOnly />
</div> </div>
<div className="form-bx"> <div className="form-bx">
<input <select
type="text" className="select-form"
className="input-frame" name="address"
name="address" id="address"
id="ADDRESS" value={basicInfoData.address ?? ''}
value={basicInfoData.ADDRESS ?? ''} onChange={(e) => handleChange('address', e.target.value)}
/> >
<option value="">東京都</option>
</select>
</div> </div>
</div> </div>
<div className="form-btn"> <div className="form-btn">
@ -215,9 +216,9 @@ export default function BasicForm() {
<input <input
type="text" type="text"
className="input-frame" className="input-frame"
id="ADDRESS_DETAIL" id="address_detail"
value={basicInfoData.ADDRESS_DETAIL ?? ''} value={basicInfoData.address_detail ?? ''}
onChange={(e) => handleChange('ADDRESS_DETAIL', e.target.value)} onChange={(e) => handleChange('address_detail', e.target.value)}
/> />
</div> </div>
</div> </div>

34
src/components/survey-sale/detail/form/etcProcess/MultiCheckEtc.tsx → src/components/survey-sale/detail/form/MultiCheckEtc.tsx
View File

@ -24,7 +24,7 @@ export default function MultiCheckbox({
setDetailInfoData: (data: any) => void setDetailInfoData: (data: any) => void
detailInfoData: SurveyDetailRequest detailInfoData: SurveyDetailRequest
}) { }) {
const selectList = column === 'SUPPLEMENTARY_FACILITIES' ? supplementary_facilities : roof_material const selectList = column === 'supplementary_facilities' ? supplementary_facilities : roof_material
const [isOtherChecked, setIsOtherChecked] = useState(false) const [isOtherChecked, setIsOtherChecked] = useState(false)
const [otherValue, setOtherValue] = useState('') const [otherValue, setOtherValue] = useState('')
@ -37,9 +37,9 @@ export default function MultiCheckbox({
} }
useEffect(() => { useEffect(() => {
if (detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest]) { if (detailInfoData[`${column}_etc` as keyof SurveyDetailRequest]) {
setIsOtherChecked(true) setIsOtherChecked(true)
setOtherValue(detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest] as string) setOtherValue(detailInfoData[`${column}_etc` as keyof SurveyDetailRequest] as string)
} }
}, [detailInfoData]) }, [detailInfoData])
@ -52,7 +52,7 @@ export default function MultiCheckbox({
newValue = value.filter((v) => v !== String(dataIndex)) newValue = value.filter((v) => v !== String(dataIndex))
} else { } else {
// 체크 // 체크
if (column === 'ROOF_MATERIAL') { if (column === 'roof_material') {
// 기타가 체크되어 있는지 확인 // 기타가 체크되어 있는지 확인
const isOtherSelected = isOtherChecked const isOtherSelected = isOtherChecked
// 현재 선택된 항목 수 + 기타 선택 여부 // 현재 선택된 항목 수 + 기타 선택 여부
@ -73,23 +73,27 @@ export default function MultiCheckbox({
} }
const handleOtherCheckbox = () => { const handleOtherCheckbox = () => {
if (column === 'ROOF_MATERIAL') { if (column === 'roof_material') {
const value = makeNumArr(String(detailInfoData[column as keyof SurveyDetailRequest] ?? '')) const value = makeNumArr(String(detailInfoData[column as keyof SurveyDetailRequest] ?? ''))
// 현재 선택된 항목 수
const currentSelected = value.length const currentSelected = value.length
if (!isOtherChecked && currentSelected >= 2) { if (!isOtherChecked && currentSelected >= 2) {
alert('Up to two roofing materials can be selected.') alert('Up to two roofing materials can be selected.')
return return
} }
} }
const newIsOtherChecked = !isOtherChecked setIsOtherChecked(!isOtherChecked)
setIsOtherChecked(newIsOtherChecked) if (!isOtherChecked) {
setOtherValue('') setOtherValue('')
setDetailInfoData({
setDetailInfoData({ ...detailInfoData,
...detailInfoData, [`${column}_etc`]: null,
[`${column}_ETC`]: newIsOtherChecked ? '' : null, })
}) } else {
setOtherValue('')
}
} }
const handleOtherInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleOtherInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@ -97,13 +101,13 @@ export default function MultiCheckbox({
setOtherValue(value) setOtherValue(value)
setDetailInfoData({ setDetailInfoData({
...detailInfoData, ...detailInfoData,
[`${column}_ETC`]: value, [`${column}_etc`]: value,
}) })
} }
return ( return (
<> <>
{column === 'SUPPLEMENTARY_FACILITIES' ? ( {column === 'supplementary_facilities' ? (
<> <>
<div className="data-input-form-tit"> <div className="data-input-form-tit">
電気袋設備<span>※複数選択可能</span> 電気袋設備<span>※複数選択可能</span>

102
src/components/survey-sale/detail/form/etcProcess/RadioEtc.tsx → src/components/survey-sale/detail/form/RadioEtc.tsx
View File

@ -2,25 +2,25 @@
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { SurveyDetailRequest } from '@/types/Survey' import { SurveyDetailRequest } from '@/types/Survey'
type RadioEtcKeys = 'HOUSE_STRUCTURE' | 'RAFTER_MATERIAL' | 'WATERPROOF_MATERIAL' | 'INSULATION_PRESENCE' | 'RAFTER_DIRECTION' | 'LEAK_TRACE' type RadioEtcKeys = 'house_structure' | 'rafter_material' | 'waterproof_material' | 'insulation_presence' | 'rafter_direction' | 'leak_trace'
const translateJapanese: Record<RadioEtcKeys, string> = { const translateJapanese: Record<RadioEtcKeys, string> = {
HOUSE_STRUCTURE: '住宅構造', house_structure: '住宅構造',
RAFTER_MATERIAL: '垂木材質', rafter_material: '垂木材質',
WATERPROOF_MATERIAL: '防水材の種類', waterproof_material: '防水材の種類',
INSULATION_PRESENCE: '断熱材の有無', insulation_presence: '断熱材の有無',
RAFTER_DIRECTION: '垂木の方向', rafter_direction: '垂木の方向',
LEAK_TRACE: '水漏れの痕跡', leak_trace: '水漏れの痕跡',
} }
export const radioEtcData: Record<RadioEtcKeys, { id: number; label: string }[]> = { export const radioEtcData: Record<RadioEtcKeys, { id: number; label: string }[]> = {
HOUSE_STRUCTURE: [ house_structure: [
{ {
id: 1, id: 1,
label: '木製', label: '木製',
}, },
], ],
RAFTER_MATERIAL: [ rafter_material: [
{ {
id: 1, id: 1,
label: '木製', label: '木製',
@ -30,13 +30,13 @@ export const radioEtcData: Record<RadioEtcKeys, { id: number; label: string }[]>
label: '強制', label: '強制',
}, },
], ],
WATERPROOF_MATERIAL: [ waterproof_material: [
{ {
id: 1, id: 1,
label: 'アスファルト屋根940（22kg以上）', label: 'アスファルト屋根940（22kg以上）',
}, },
], ],
INSULATION_PRESENCE: [ insulation_presence: [
{ {
id: 1, id: 1,
label: 'なし', label: 'なし',
@ -46,7 +46,7 @@ export const radioEtcData: Record<RadioEtcKeys, { id: number; label: string }[]>
label: 'あり', label: 'あり',
}, },
], ],
RAFTER_DIRECTION: [ rafter_direction: [
{ {
id: 1, id: 1,
label: '垂直垂木', label: '垂直垂木',
@ -56,7 +56,7 @@ export const radioEtcData: Record<RadioEtcKeys, { id: number; label: string }[]>
label: '水平垂木', label: '水平垂木',
}, },
], ],
LEAK_TRACE: [ leak_trace: [
{ {
id: 1, id: 1,
label: 'あり', label: 'あり',
@ -81,53 +81,35 @@ export default function RadioEtc({
const [etcValue, setEtcValue] = useState('') const [etcValue, setEtcValue] = useState('')
useEffect(() => { useEffect(() => {
if (detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest]) { if (detailInfoData[`${column}_etc` as keyof SurveyDetailRequest]) {
setIsEtcSelected(true) setIsEtcSelected(true)
setEtcValue(detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest] as string) setEtcValue(detailInfoData[`${column}_etc` as keyof SurveyDetailRequest] as string)
} }
}, [detailInfoData]) }, [detailInfoData])
const handleRadioChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleRadioChange = (e: React.ChangeEvent<HTMLInputElement>) => {
// const value = e.target.value
// if (column === 'INSULATION_PRESENCE') {
// setIsEtcSelected(value === '2')
// setDetailInfoData({
// ...detailInfoData,
// [column]: value,
// })
// } else if (value === 'etc') {
// setIsEtcSelected(true)
// setDetailInfoData({
// ...detailInfoData,
// [column]: null,
// })
// } else {
// setIsEtcSelected(false)
// setEtcValue('')
// setDetailInfoData({
// ...detailInfoData,
// [column]: value,
// [`${column}_ETC`]: null,
// })
// }
const value = e.target.value const value = e.target.value
const isSpecialCase = column === 'INSULATION_PRESENCE' if (column === 'insulation_presence') {
const isEtc = value === 'etc' setIsEtcSelected(value === '2')
const isSpecialEtc = isSpecialCase && value === '2' setDetailInfoData({
...detailInfoData,
const updatedData: typeof detailInfoData = { [column]: Number(value),
...detailInfoData, })
[column]: isEtc ? null : value, } else if (value === 'etc') {
[`${column}_ETC`]: isEtc ? '' : null, setIsEtcSelected(true)
setDetailInfoData({
...detailInfoData,
[column]: null,
})
} else {
setIsEtcSelected(false)
setEtcValue('')
setDetailInfoData({
...detailInfoData,
[column]: Number(value),
[`${column}_etc`]: null,
})
} }
if (isSpecialEtc) {
updatedData[column] = value
}
setIsEtcSelected(isEtc || isSpecialEtc)
if (!isEtc) setEtcValue('')
setDetailInfoData(updatedData)
} }
const handleEtcInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleEtcInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@ -135,7 +117,7 @@ export default function RadioEtc({
setEtcValue(value) setEtcValue(value)
setDetailInfoData({ setDetailInfoData({
...detailInfoData, ...detailInfoData,
[`${column}_ETC`]: value, [`${column}_etc`]: value,
}) })
} }
@ -148,24 +130,24 @@ export default function RadioEtc({
type="radio" type="radio"
name={column} name={column}
id={`${column}_${item.id}`} id={`${column}_${item.id}`}
value={item.id.toString()} value={item.id}
onChange={handleRadioChange} onChange={handleRadioChange}
checked={detailInfoData[column] === item.id.toString()} checked={detailInfoData[column] === item.id}
/> />
<label htmlFor={`${column}_${item.id}`}>{item.label}</label> <label htmlFor={`${column}_${item.id}`}>{item.label}</label>
</div> </div>
))} ))}
{column !== 'INSULATION_PRESENCE' && ( {column !== 'insulation_presence' && (
<div className="radio-form-box mb10"> <div className="radio-form-box mb10">
<input type="radio" name={column} id={`${column}_ETC`} value="etc" onChange={handleRadioChange} checked={isEtcSelected} /> <input type="radio" name={column} id={`${column}_etc`} value="etc" onChange={handleRadioChange} checked={isEtcSelected} />
<label htmlFor={`${column}_ETC`}>その他 (直接入力)</label> <label htmlFor={`${column}_etc`}>その他 (直接入力)</label>
</div> </div>
)} )}
<div className="data-input"> <div className="data-input">
<input <input
type="text" type="text"
className="input-frame" className="input-frame"
disabled={column === 'INSULATION_PRESENCE' ? !isEtcSelected : !isEtcSelected} disabled={column === 'insulation_presence' ? !isEtcSelected : !isEtcSelected}
value={etcValue} value={etcValue}
onChange={handleEtcInputChange} onChange={handleEtcInputChange}
/> />

189
src/components/survey-sale/detail/form/RoofInfoForm.tsx
View File

@ -6,46 +6,46 @@ import { useServey } from '@/hooks/useSurvey'
import { SurveyDetailRequest } from '@/types/Survey' import { SurveyDetailRequest } from '@/types/Survey'
import { useRouter, useSearchParams } from 'next/navigation' import { useRouter, useSearchParams } from 'next/navigation'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import MultiCheckEtc from './etcProcess/MultiCheckEtc' import MultiCheckEtc from './MultiCheckEtc'
import SelectBoxEtc from './etcProcess/SelectBoxEtc' import SelectBoxEtc from './SelectBoxEtc'
import RadioEtc from './etcProcess/RadioEtc' import RadioEtc from './RadioEtc'
const defaultDetailInfoForm: SurveyDetailRequest = { const defaultDetailInfoForm: SurveyDetailRequest = {
CONTRACT_CAPACITY: null, contract_capacity: null,
RETAIL_COMPANY: null, retail_company: null,
SUPPLEMENTARY_FACILITIES: null, supplementary_facilities: null,
SUPPLEMENTARY_FACILITIES_ETC: null, supplementary_facilities_etc: null,
INSTALLATION_SYSTEM: null, installation_system: null,
INSTALLATION_SYSTEM_ETC: null, installation_system_etc: null,
CONSTRUCTION_YEAR: null, construction_year: null,
CONSTRUCTION_YEAR_ETC: null, construction_year_etc: null,
ROOF_MATERIAL: null, roof_material: null,
ROOF_MATERIAL_ETC: null, roof_material_etc: null,
ROOF_SHAPE: null, roof_shape: null,
ROOF_SHAPE_ETC: null, roof_shape_etc: null,
ROOF_SLOPE: null, roof_slope: null,
HOUSE_STRUCTURE: '1', house_structure: 1,
HOUSE_STRUCTURE_ETC: null, house_structure_etc: null,
RAFTER_MATERIAL: '1', rafter_material: 1,
RAFTER_MATERIAL_ETC: null, rafter_material_etc: null,
RAFTER_SIZE: null, rafter_size: null,
RAFTER_SIZE_ETC: null, rafter_size_etc: null,
RAFTER_PITCH: null, rafter_pitch: null,
RAFTER_PITCH_ETC: null, rafter_pitch_etc: null,
RAFTER_DIRECTION: '1', rafter_direction: 1,
OPEN_FIELD_PLATE_KIND: null, open_field_plate_kind: null,
OPEN_FIELD_PLATE_KIND_ETC: null, open_field_plate_kind_etc: null,
OPEN_FIELD_PLATE_THICKNESS: null, open_field_plate_thickness: null,
LEAK_TRACE: false, leak_trace: false,
WATERPROOF_MATERIAL: null, waterproof_material: null,
WATERPROOF_MATERIAL_ETC: null, waterproof_material_etc: null,
INSULATION_PRESENCE: '1', insulation_presence: 1,
INSULATION_PRESENCE_ETC: null, insulation_presence_etc: null,
STRUCTURE_ORDER: null, structure_order: null,
STRUCTURE_ORDER_ETC: null, structure_order_etc: null,
INSTALLATION_AVAILABILITY: null, installation_availability: null,
INSTALLATION_AVAILABILITY_ETC: null, installation_availability_etc: null,
MEMO: null, memo: null,
} }
export default function RoofInfoForm() { export default function RoofInfoForm() {
@ -64,14 +64,14 @@ export default function RoofInfoForm() {
const [detailInfoData, setDetailInfoData] = useState<SurveyDetailRequest>(defaultDetailInfoForm) const [detailInfoData, setDetailInfoData] = useState<SurveyDetailRequest>(defaultDetailInfoForm)
useEffect(() => { useEffect(() => {
if (surveyDetail?.DETAIL_INFO) { if (surveyDetail?.detail_info) {
const { ID, UPT_DT, REG_DT, BASIC_INFO_ID, ...rest } = surveyDetail.DETAIL_INFO const { id, updated_at, created_at, basic_info_id, ...rest } = surveyDetail.detail_info
setDetailInfoData(rest) setDetailInfoData(rest)
} }
}, [surveyDetail]) }, [surveyDetail])
const handleNumberInput = (key: keyof SurveyDetailRequest, value: number | string) => { const handleNumberInput = (key: keyof SurveyDetailRequest, value: number | string) => {
if (key === 'ROOF_SLOPE' || key === 'OPEN_FIELD_PLATE_THICKNESS') { if (key === 'roof_slope' || key === 'open_field_plate_thickness') {
const stringValue = value.toString() const stringValue = value.toString()
if (stringValue.length > 5) { if (stringValue.length > 5) {
alert('保存できるサイズを超えました。') alert('保存できるサイズを超えました。')
@ -86,7 +86,7 @@ export default function RoofInfoForm() {
} }
setDetailInfoData({ ...detailInfoData, [key]: value.toString() }) setDetailInfoData({ ...detailInfoData, [key]: value.toString() })
} else { } else {
setDetailInfoData({ ...detailInfoData, [key]: value.toString() }) setDetailInfoData({ ...detailInfoData, [key]: value })
} }
} }
@ -99,20 +99,19 @@ export default function RoofInfoForm() {
} }
const handleUnitInput = (value: string) => { const handleUnitInput = (value: string) => {
const numericValue = detailInfoData.CONTRACT_CAPACITY?.replace(/[^0-9.]/g, '') || '' const numericValue = detailInfoData.contract_capacity?.replace(/[^0-9.]/g, '') || ''
setDetailInfoData({ setDetailInfoData({
...detailInfoData, ...detailInfoData,
CONTRACT_CAPACITY: numericValue ? `${numericValue} ${value}` : value, contract_capacity: numericValue ? `${numericValue} ${value}` : value,
}) })
} }
const handleSave = async () => { const handleSave = async () => {
console.log(detailInfoData)
if (id) { if (id) {
const emptyField = validateSurveyDetail(detailInfoData) const emptyField = validateSurveyDetail(detailInfoData)
if (emptyField.trim() === '') { if (emptyField.trim() === '') {
const updatedBasicInfoData = { const updatedBasicInfoData = {
DETAIL_INFO: detailInfoData, detail_info: detailInfoData,
} }
try { try {
createSurveyDetail({ createSurveyDetail({
@ -152,17 +151,17 @@ export default function RoofInfoForm() {
type="number" type="number"
inputMode="decimal" inputMode="decimal"
className="input-frame" className="input-frame"
value={detailInfoData.CONTRACT_CAPACITY?.split(' ')[0] ?? ''} value={detailInfoData.contract_capacity?.split(' ')[0] ?? ''}
onChange={(e) => handleNumberInput('CONTRACT_CAPACITY', e.target.value)} onChange={(e) => handleNumberInput('contract_capacity', e.target.value)}
/> />
</div> </div>
<div className="data-input"> <div className="data-input">
<select <select
className="select-form" className="select-form"
name="CONTRACT_CAPACITY_UNIT" name="contract_capacity_unit"
id="CONTRACT_CAPACITY_UNIT" id="contract_capacity_unit"
onChange={(e) => handleUnitInput(e.target.value)} onChange={(e) => handleUnitInput(e.target.value)}
value={detailInfoData.CONTRACT_CAPACITY?.split(' ')[1] ?? ''} value={detailInfoData.contract_capacity?.split(' ')[1] ?? ''}
> >
<option value="" hidden> <option value="" hidden>
選択してください 選択してください
@ -178,16 +177,16 @@ export default function RoofInfoForm() {
<input <input
type="text" type="text"
className="input-frame" className="input-frame"
value={detailInfoData.RETAIL_COMPANY ?? ''} value={detailInfoData.retail_company ?? ''}
onChange={(e) => handleTextInput('RETAIL_COMPANY', e.target.value)} onChange={(e) => handleTextInput('retail_company', e.target.value)}
/> />
</div> </div>
{/* 전기 부대 설비 - supplementary_facilities */} {/* 전기 부대 설비 - supplementary_facilities */}
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<MultiCheckEtc column={'SUPPLEMENTARY_FACILITIES'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} /> <MultiCheckEtc column={'supplementary_facilities'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
</div> </div>
{/* 설치 희망 시스템 - installation_system */} {/* 설치 희망 시스템 - installation_system */}
<SelectBoxEtc column={'INSTALLATION_SYSTEM'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} /> <SelectBoxEtc column={'installation_system'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
</div> </div>
</div> </div>
@ -195,13 +194,13 @@ export default function RoofInfoForm() {
<div className="sale-roof-title">屋根関係</div> <div className="sale-roof-title">屋根関係</div>
<div className="data-form-wrap"> <div className="data-form-wrap">
{/* 건축 연수 - construction_year */} {/* 건축 연수 - construction_year */}
<SelectBoxEtc column={'CONSTRUCTION_YEAR'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} /> <SelectBoxEtc column={'construction_year'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
{/* 지붕재 - roof_material */} {/* 지붕재 - roof_material */}
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<MultiCheckEtc column={'ROOF_MATERIAL'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} /> <MultiCheckEtc column={'roof_material'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
</div> </div>
{/* 지붕 모양 - roof_shape */} {/* 지붕 모양 - roof_shape */}
<SelectBoxEtc column={'ROOF_SHAPE'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} /> <SelectBoxEtc column={'roof_shape'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
{/* 지붕 경사도 - roof_slope */} {/* 지붕 경사도 - roof_slope */}
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">屋根の斜面</div> <div className="data-input-form-tit">屋根の斜面</div>
@ -211,20 +210,20 @@ export default function RoofInfoForm() {
step={0.1} step={0.1}
inputMode="decimal" inputMode="decimal"
className="input-frame" className="input-frame"
value={detailInfoData.ROOF_SLOPE ?? ''} value={detailInfoData.roof_slope ?? ''}
onChange={(e) => handleNumberInput('ROOF_SLOPE', e.target.value)} onChange={(e) => handleNumberInput('roof_slope', e.target.value)}
/> />
<span>寸</span> <span>寸</span>
</div> </div>
</div> </div>
{/* 주택 구조 - house_structure */} {/* 주택 구조 - house_structure */}
<RadioEtc column={'HOUSE_STRUCTURE'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} /> <RadioEtc column={'house_structure'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
{/* 서까래 재질 - rafter_material */} {/* 서까래 재질 - rafter_material */}
<RadioEtc column={'RAFTER_MATERIAL'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} /> <RadioEtc column={'rafter_material'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
{/* 서까래 크기 - rafter_size */} {/* 서까래 크기 - rafter_size */}
<SelectBoxEtc column={'RAFTER_SIZE'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} /> <SelectBoxEtc column={'rafter_size'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
{/* 서까래 피치 - rafter_pitch */} {/* 서까래 피치 - rafter_pitch */}
<SelectBoxEtc column={'RAFTER_PITCH'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} /> <SelectBoxEtc column={'rafter_pitch'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
{/* 서까래 방향 - rafter_direction */} {/* 서까래 방향 - rafter_direction */}
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit red-f">垂木の方向</div> <div className="data-input-form-tit red-f">垂木の方向</div>
@ -232,29 +231,29 @@ export default function RoofInfoForm() {
<div className="radio-form-box"> <div className="radio-form-box">
<input <input
type="radio" type="radio"
name="RAFTER_DIRECTION" name="rafter_direction"
id="RAFTER_DIRECTION_1" id="rafter_direction_1"
value={1} value={1}
onChange={(e) => handleNumberInput('RAFTER_DIRECTION', Number(e.target.value))} onChange={(e) => handleNumberInput('rafter_direction', Number(e.target.value))}
checked={detailInfoData.RAFTER_DIRECTION === '1'} checked={detailInfoData.rafter_direction === 1}
/> />
<label htmlFor="RAFTER_DIRECTION_1">垂直垂木</label> <label htmlFor="rafter_direction_1">垂直垂木</label>
</div> </div>
<div className="radio-form-box"> <div className="radio-form-box">
<input <input
type="radio" type="radio"
name="RAFTER_DIRECTION" name="rafter_direction"
id="RAFTER_DIRECTION_2" id="rafter_direction_2"
value={2} value={2}
onChange={(e) => handleNumberInput('RAFTER_DIRECTION', Number(e.target.value))} onChange={(e) => handleNumberInput('rafter_direction', Number(e.target.value))}
checked={detailInfoData.RAFTER_DIRECTION === '2'} checked={detailInfoData.rafter_direction === 2}
/> />
<label htmlFor="RAFTER_DIRECTION_2">水平垂木</label> <label htmlFor="rafter_direction_2">水平垂木</label>
</div> </div>
</div> </div>
</div> </div>
{/* 노지판 종류 - open_field_plate_kind */} {/* 노지판 종류 - open_field_plate_kind */}
<SelectBoxEtc column={'OPEN_FIELD_PLATE_KIND'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} /> <SelectBoxEtc column={'open_field_plate_kind'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
{/* 노지판 두께 - open_field_plate_thickness */} {/* 노지판 두께 - open_field_plate_thickness */}
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit"> <div className="data-input-form-tit">
@ -266,8 +265,8 @@ export default function RoofInfoForm() {
step={0.1} step={0.1}
inputMode="decimal" inputMode="decimal"
className="input-frame" className="input-frame"
value={detailInfoData.OPEN_FIELD_PLATE_THICKNESS ?? ''} value={detailInfoData.open_field_plate_thickness ?? ''}
onChange={(e) => handleNumberInput('OPEN_FIELD_PLATE_THICKNESS', e.target.value)} onChange={(e) => handleNumberInput('open_field_plate_thickness', e.target.value)}
/> />
<span>mm</span> <span>mm</span>
</div> </div>
@ -279,33 +278,33 @@ export default function RoofInfoForm() {
<div className="radio-form-box"> <div className="radio-form-box">
<input <input
type="radio" type="radio"
name="LEAK_TRACE" name="leak_trace"
id="LEAK_TRACE_1" id="leak_trace_1"
checked={detailInfoData.LEAK_TRACE === true} checked={detailInfoData.leak_trace === true}
onChange={(e) => handleBooleanInput('LEAK_TRACE', true)} onChange={(e) => handleBooleanInput('leak_trace', true)}
/> />
<label htmlFor="LEAK_TRACE_1">あり</label> <label htmlFor="leak_trace_1">あり</label>
</div> </div>
<div className="radio-form-box"> <div className="radio-form-box">
<input <input
type="radio" type="radio"
name="LEAK_TRACE" name="leak_trace"
id="LEAK_TRACE_2" id="leak_trace_2"
checked={detailInfoData.LEAK_TRACE === false} checked={detailInfoData.leak_trace === false}
onChange={(e) => handleBooleanInput('LEAK_TRACE', false)} onChange={(e) => handleBooleanInput('leak_trace', false)}
/> />
<label htmlFor="LEAK_TRACE_2">なし</label> <label htmlFor="leak_trace_2">なし</label>
</div> </div>
</div> </div>
</div> </div>
{/* 방수재 종류 - waterproof_material */} {/* 방수재 종류 - waterproof_material */}
<RadioEtc column={'WATERPROOF_MATERIAL'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} /> <RadioEtc column={'waterproof_material'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
{/* 단열재 유무 - insulation_presence */} {/* 단열재 유무 - insulation_presence */}
<RadioEtc column={'INSULATION_PRESENCE'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} /> <RadioEtc column={'insulation_presence'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
{/* 노지판 종류 - open_field_plate_kind */} {/* 노지판 종류 - open_field_plate_kind */}
<SelectBoxEtc column={'STRUCTURE_ORDER'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} /> <SelectBoxEtc column={'structure_order'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
{/* 설치 가능 여부 - installation_availability */} {/* 설치 가능 여부 - installation_availability */}
<SelectBoxEtc column={'INSTALLATION_AVAILABILITY'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} /> <SelectBoxEtc column={'installation_availability'} setDetailInfoData={setDetailInfoData} detailInfoData={detailInfoData} />
{/* 메모 - memo */} {/* 메모 - memo */}
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className="data-input-form-tit">メモ</div> <div className="data-input-form-tit">メモ</div>
@ -321,10 +320,10 @@ export default function RoofInfoForm() {
<div className="data-input"> <div className="data-input">
<textarea <textarea
className="textarea-form" className="textarea-form"
name="MEMO" name="memo"
id="MEMO" id="memo"
value={detailInfoData.MEMO ?? ''} value={detailInfoData.memo ?? ''}
onChange={(e) => handleTextInput('MEMO', e.target.value)} onChange={(e) => handleTextInput('memo', e.target.value)}
placeholder="例: 漏れの兆候があるため、正確な点検が必要です." placeholder="例: 漏れの兆候があるため、正確な点検が必要です."
></textarea> ></textarea>
</div> </div>

121
src/components/survey-sale/detail/form/etcProcess/SelectBoxEtc.tsx → src/components/survey-sale/detail/form/SelectBoxEtc.tsx
View File

@ -2,39 +2,39 @@ import type { SurveyDetailRequest } from '@/types/Survey'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
export type SelectBoxKeys = export type SelectBoxKeys =
| 'INSTALLATION_SYSTEM' | 'installation_system'
| 'CONSTRUCTION_YEAR' | 'construction_year'
| 'ROOF_SHAPE' | 'roof_shape'
| 'RAFTER_PITCH' | 'rafter_pitch'
| 'RAFTER_SIZE' | 'rafter_size'
| 'OPEN_FIELD_PLATE_KIND' | 'open_field_plate_kind'
| 'STRUCTURE_ORDER' | 'structure_order'
| 'INSTALLATION_AVAILABILITY' | 'installation_availability'
const font: Record<SelectBoxKeys, string> = { const font: Record<SelectBoxKeys, string> = {
INSTALLATION_SYSTEM: 'data-input-form-tit red-f', installation_system: 'data-input-form-tit red-f',
CONSTRUCTION_YEAR: 'data-input-form-tit red-f', construction_year: 'data-input-form-tit red-f',
ROOF_SHAPE: 'data-input-form-tit', roof_shape: 'data-input-form-tit',
RAFTER_PITCH: 'data-input-form-tit red-f', rafter_pitch: 'data-input-form-tit red-f',
RAFTER_SIZE: 'data-input-form-tit red-f', rafter_size: 'data-input-form-tit red-f',
OPEN_FIELD_PLATE_KIND: 'data-input-form-tit', open_field_plate_kind: 'data-input-form-tit',
STRUCTURE_ORDER: 'data-input-form-tit red-f', structure_order: 'data-input-form-tit red-f',
INSTALLATION_AVAILABILITY: 'data-input-form-tit', installation_availability: 'data-input-form-tit',
} }
const translateJapanese: Record<SelectBoxKeys, string> = { const translateJapanese: Record<SelectBoxKeys, string> = {
INSTALLATION_SYSTEM: '設置希望システム', installation_system: '設置希望システム',
CONSTRUCTION_YEAR: '建築年数', construction_year: '建築年数',
ROOF_SHAPE: '屋根の形状', roof_shape: '屋根の形状',
RAFTER_PITCH: '垂木傾斜', rafter_pitch: '垂木傾斜',
RAFTER_SIZE: '垂木サイズ', rafter_size: '垂木サイズ',
OPEN_FIELD_PLATE_KIND: '路地板の種類', open_field_plate_kind: '路地板の種類',
STRUCTURE_ORDER: '屋根構造の順序', structure_order: '屋根構造の順序',
INSTALLATION_AVAILABILITY: '屋根製品名 設置可否確認', installation_availability: '屋根製品名 設置可否確認',
} }
export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string }[]> = { export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string }[]> = {
INSTALLATION_SYSTEM: [ installation_system: [
{ {
id: 1, id: 1,
name: '太陽光発電', //태양광발전 name: '太陽光発電', //태양광발전
@ -48,7 +48,7 @@ export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string
name: '蓄電池システム', //축전지시스템 name: '蓄電池システム', //축전지시스템
}, },
], ],
CONSTRUCTION_YEAR: [ construction_year: [
{ {
id: 1, id: 1,
name: '新築', //신축 name: '新築', //신축
@ -58,7 +58,7 @@ export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string
name: '既築', //기존 name: '既築', //기존
}, },
], ],
ROOF_SHAPE: [ roof_shape: [
{ {
id: 1, id: 1,
name: '切妻', //박공지붕 name: '切妻', //박공지붕
@ -72,7 +72,7 @@ export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string
name: '片流れ', //한쪽흐름 name: '片流れ', //한쪽흐름
}, },
], ],
RAFTER_SIZE: [ rafter_size: [
{ {
id: 1, id: 1,
name: '幅35mm以上×高さ48mm以上', name: '幅35mm以上×高さ48mm以上',
@ -90,7 +90,7 @@ export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string
name: '幅38mm以上×高さ40mm以上', name: '幅38mm以上×高さ40mm以上',
}, },
], ],
RAFTER_PITCH: [ rafter_pitch: [
{ {
id: 1, id: 1,
name: '(455mm以下', name: '(455mm以下',
@ -104,7 +104,7 @@ export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string
name: '606mm以下', name: '606mm以下',
}, },
], ],
OPEN_FIELD_PLATE_KIND: [ open_field_plate_kind: [
{ {
id: 1, id: 1,
name: '構造用合板', //구조용합판 name: '構造用合板', //구조용합판
@ -122,7 +122,7 @@ export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string
name: '小幅板', //소판 name: '小幅板', //소판
}, },
], ],
STRUCTURE_ORDER: [ structure_order: [
{ {
id: 1, id: 1,
name: '屋根材', //지붕재 name: '屋根材', //지붕재
@ -140,7 +140,7 @@ export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string
name: '垂木', //서까래 name: '垂木', //서까래
}, },
], ],
INSTALLATION_AVAILABILITY: [ installation_availability: [
{ {
id: 1, id: 1,
name: '確認済み', //확인완료 name: '確認済み', //확인완료
@ -165,32 +165,35 @@ export default function SelectBoxForm({
const [etcValue, setEtcValue] = useState('') const [etcValue, setEtcValue] = useState('')
useEffect(() => { useEffect(() => {
if (detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest]) { if (detailInfoData[`${column}_etc` as keyof SurveyDetailRequest]) {
setIsEtcSelected(true) setIsEtcSelected(true)
setEtcValue(detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest] as string) setEtcValue(detailInfoData[`${column}_etc` as keyof SurveyDetailRequest] as string)
} }
}, [detailInfoData]) }, [detailInfoData])
const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => { const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
const value = e.target.value const value = e.target.value
const isSpecialCase = column === 'CONSTRUCTION_YEAR' || column === 'INSTALLATION_AVAILABILITY' if (column === 'installation_availability' || column === 'construction_year') {
const isEtc = value === 'etc' setIsEtcSelected(value === '2') // 건축 연수 & 설치 가능 여부 컬럼 2번 선택 시 input 활성화
const isSpecialEtc = isSpecialCase && value === '2' setDetailInfoData({
...detailInfoData,
const updatedData: typeof detailInfoData = { [column]: Number(value),
...detailInfoData, })
[column]: isEtc ? null : value, } else if (value === 'etc') {
[`${column}_ETC`]: isEtc ? '' : null, setIsEtcSelected(true) // 기타 선택 시 input 활성화
setDetailInfoData({
...detailInfoData,
[column]: null,
})
} else {
setIsEtcSelected(false) // 기타 선택 해제 시 input 비활성화
setEtcValue('')
setDetailInfoData({
...detailInfoData,
[`${column}_etc`]: null,
[column]: Number(value),
})
} }
// 건축연수 + 설치가능여부는 2번 선택 시 input 활성화
if (isSpecialEtc) {
updatedData[column] = value
}
setIsEtcSelected(isEtc || isSpecialEtc)
if (!isEtc) setEtcValue('')
setDetailInfoData(updatedData)
} }
const handleEtcInputChange = (e: React.ChangeEvent<HTMLInputElement>) => { const handleEtcInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@ -198,31 +201,31 @@ export default function SelectBoxForm({
setEtcValue(value) setEtcValue(value)
setDetailInfoData({ setDetailInfoData({
...detailInfoData, ...detailInfoData,
[`${column}_ETC`]: value, [`${column}_etc`]: value,
}) })
} }
return ( return (
<> <>
<div className="data-input-form-bx"> <div className="data-input-form-bx">
<div className={font[column as keyof typeof font]}>{translateJapanese[column as keyof typeof translateJapanese]}</div> <div className={font[column]}>{translateJapanese[column]}</div>
<div className="data-input mb5"> <div className="data-input mb5">
<select <select
className="select-form" className="select-form"
name={column} name={column}
id={column} id={column}
onChange={handleSelectChange} onChange={handleSelectChange}
value={detailInfoData[column] ? detailInfoData[column] : detailInfoData[`${column}_ETC`] ? 'etc' : isEtcSelected ? 'etc' : ''} value={detailInfoData[column] ? detailInfoData[column] : detailInfoData[`${column}_etc`] ? 'etc' : ''}
> >
<option value="" hidden> <option value="" hidden>
選択してください 選択してください
</option> </option>
{selectBoxOptions[column as keyof typeof selectBoxOptions].map((option) => ( {selectBoxOptions[column].map((option) => (
<option key={option.id} value={option.id}> <option key={option.id} value={option.id}>
{option.name} {option.name}
</option> </option>
))} ))}
{column !== 'INSTALLATION_AVAILABILITY' && column !== 'CONSTRUCTION_YEAR' && <option value="etc">その他 (直接入力)</option>} {column !== 'installation_availability' && column !== 'construction_year' && <option value="etc">その他 (直接入力)</option>}
</select> </select>
</div> </div>
<div className="data-input"> <div className="data-input">
@ -232,10 +235,10 @@ export default function SelectBoxForm({
value={etcValue ?? ''} value={etcValue ?? ''}
onChange={handleEtcInputChange} onChange={handleEtcInputChange}
disabled={ disabled={
column === 'INSTALLATION_AVAILABILITY' column === 'installation_availability'
? !Boolean(detailInfoData[column]) ? !Boolean(detailInfoData[column])
: column === 'CONSTRUCTION_YEAR' : column === 'construction_year'
? detailInfoData[column] !== '2' // 既築(2)가 아닐 때 비활성화 ? detailInfoData[column] !== 2 // 既築(2)가 아닐 때 비활성화
: !isEtcSelected : !isEtcSelected
} }
/> />

25
src/components/survey-sale/list/ListTable.tsx
View File

@ -6,7 +6,7 @@ import { useEffect, useState } from 'react'
import { useRouter } from 'next/navigation' import { useRouter } from 'next/navigation'
import SearchForm from './SearchForm' import SearchForm from './SearchForm'
import { useSurveyFilterStore } from '@/store/surveyFilterStore' import { useSurveyFilterStore } from '@/store/surveyFilterStore'
import { useSessionStore } from '@/store/session' import { UserType } from '@/hooks/useUserType'
export default function ListTable() { export default function ListTable() {
const router = useRouter() const router = useRouter()
@ -15,8 +15,7 @@ export default function ListTable() {
const [heldSurveyList, setHeldSurveyList] = useState<typeof surveyList>([]) const [heldSurveyList, setHeldSurveyList] = useState<typeof surveyList>([])
const [hasMore, setHasMore] = useState(false) const [hasMore, setHasMore] = useState(false)
const [memberType, setMemberType] = useState<UserType>('hwj')
const { session } = useSessionStore()
useEffect(() => { useEffect(() => {
if (surveyList && surveyList.length > 0) { if (surveyList && surveyList.length > 0) {
@ -30,7 +29,9 @@ export default function ListTable() {
} }
setHasMore(surveyListCount > offset + 10) setHasMore(surveyListCount > offset + 10)
} }
}, [surveyList, surveyListCount, offset, session?.role]) // 회원 유형 설정 이후 변경
setMemberType('hwj')
}, [surveyList, surveyListCount, offset])
const handleDetailClick = (id: number) => { const handleDetailClick = (id: number) => {
router.push(`/survey-sale/${id}`) router.push(`/survey-sale/${id}`)
@ -44,22 +45,22 @@ export default function ListTable() {
return ( return (
<> <>
<SearchForm onItemsInit={handleItemsInit} memberRole={session?.role ?? ''} userId={session?.userId ?? ''} /> <SearchForm onItemsInit={handleItemsInit} memberType={memberType} />
{heldSurveyList.length > 0 ? ( {heldSurveyList.length > 0 ? (
<div className="sale-frame"> <div className="sale-frame">
<ul className="sale-list-wrap"> <ul className="sale-list-wrap">
{heldSurveyList.map((survey) => ( {heldSurveyList.map((survey) => (
<li className="sale-list-item cursor-pointer" key={survey.ID} onClick={() => handleDetailClick(survey.ID)}> <li className="sale-list-item cursor-pointer" key={survey.id} onClick={() => handleDetailClick(survey.id)}>
<div className="sale-item-bx"> <div className="sale-item-bx">
<div className="sale-item-date-bx"> <div className="sale-item-date-bx">
<div className="sale-item-num">{survey.ID}</div> <div className="sale-item-num">{survey.id}</div>
<div className="sale-item-date">{survey.INVESTIGATION_DATE}</div> <div className="sale-item-date">{survey.investigation_date}</div>
</div> </div>
<div className="sale-item-tit">{survey.BUILDING_NAME}</div> <div className="sale-item-tit">{survey.building_name}</div>
<div className="sale-item-customer">{survey.CUSTOMER_NAME}</div> <div className="sale-item-customer">{survey.customer_name}</div>
<div className="sale-item-update-bx"> <div className="sale-item-update-bx">
<div className="sale-item-name">{survey.REPRESENTATIVE}</div> <div className="sale-item-name">{survey.representative}</div>
<div className="sale-item-update">{new Date(survey.UPT_DT).toLocaleString()}</div> <div className="sale-item-update">{new Date(survey.updated_at).toLocaleString()}</div>
</div> </div>
</div> </div>
</li> </li>

35
src/components/survey-sale/list/SearchForm.tsx
View File

@ -1,30 +1,31 @@
'use client' 'use client'
import { SEARCH_OPTIONS, SEARCH_OPTIONS_ENUM, SEARCH_OPTIONS_PARTNERS, useSurveyFilterStore } from '@/store/surveyFilterStore' import { SEARCH_OPTIONS, SEARCH_OPTIONS_ENUM, SEARCH_OPTIONS_PARTNERS, useSurveyFilterStore } from '@/store/surveyFilterStore'
import { UserType } from '@/hooks/useUserType'
import { useRouter } from 'next/navigation' import { useRouter } from 'next/navigation'
import { useState } from 'react' import { useState } from 'react'
export default function SearchForm({ onItemsInit, memberRole, userId }: { onItemsInit: () => void; memberRole: string; userId: string }) { export default function SearchForm({ onItemsInit, memberType }: { onItemsInit: () => void; memberType: UserType }) {
const router = useRouter() const router = useRouter()
const { setSearchOption, setSort, setIsMySurvey, setKeyword, isMySurvey, keyword, searchOption, sort } = useSurveyFilterStore() const { setSearchOption, setSort, setIsMySurvey, setKeyword, isMySurvey, keyword, searchOption, sort } = useSurveyFilterStore()
const [searchKeyword, setSearchKeyword] = useState(keyword) const [searchKeyword, setSearchKeyword] = useState(keyword)
const [option, setOption] = useState(searchOption)
const username = 'test'
const handleSearch = () => { const handleSearch = () => {
if (option !== 'id' && searchKeyword.trim().length < 2) { if (searchKeyword.trim().length < 2) {
alert('2文字以上入力してください') alert('2文字以上入力してください')
return return
} }
setKeyword(searchKeyword) setKeyword(searchKeyword)
setSearchOption(option)
onItemsInit() onItemsInit()
} }
const searchOptions = memberRole === 'Partner' ? SEARCH_OPTIONS_PARTNERS : SEARCH_OPTIONS const searchOptions = memberType === 'partner' ? SEARCH_OPTIONS_PARTNERS : SEARCH_OPTIONS
return ( return (
<div className="sale-frame"> <div className="sale-frame">
<div className="sale-form-bx"> <div className="sale-form-bx">
<button className="btn-frame n-blue icon" onClick={() => router.push('/survey-sale/regist')}> <button className="btn-frame n-blue icon" onClick={() => router.push('/survey-sale/basic-info')}>
新規売買登録<i className="btn-arr"></i> 新規売買登録<i className="btn-arr"></i>
</button> </button>
</div> </div>
@ -33,18 +34,8 @@ export default function SearchForm({ onItemsInit, memberRole, userId }: { onItem
className="select-form" className="select-form"
name="search-option" name="search-option"
id="search-option" id="search-option"
value={option} value={searchOption}
onChange={(e) => { onChange={(e) => setSearchOption(e.target.value as SEARCH_OPTIONS_ENUM)}
if (e.target.value === 'all') {
setKeyword('')
setSearchKeyword('')
onItemsInit()
setSearchOption('all')
setOption('all')
} else {
setOption(e.target.value as SEARCH_OPTIONS_ENUM)
}
}}
> >
{searchOptions.map((option) => ( {searchOptions.map((option) => (
<option key={option.id} value={option.id}> <option key={option.id} value={option.id}>
@ -60,9 +51,7 @@ export default function SearchForm({ onItemsInit, memberRole, userId }: { onItem
className="search-frame" className="search-frame"
value={searchKeyword} value={searchKeyword}
placeholder="タイトルを入力してください. (2文字以上)" placeholder="タイトルを入力してください. (2文字以上)"
onChange={(e) => { onChange={(e) => setSearchKeyword(e.target.value)}
setSearchKeyword(e.target.value)
}}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
handleSearch() handleSearch()
@ -77,9 +66,9 @@ export default function SearchForm({ onItemsInit, memberRole, userId }: { onItem
<input <input
type="checkbox" type="checkbox"
id="ch01" id="ch01"
checked={isMySurvey === userId} checked={isMySurvey === username}
onChange={() => { onChange={() => {
setIsMySurvey(isMySurvey === userId ? null : userId) setIsMySurvey(isMySurvey === username ? null : username)
onItemsInit() onItemsInit()
}} }}
/> />

156
src/components/survey-sale/temp/basicRegist.tsx
View File

@ -1,156 +0,0 @@
'use client'
import { SurveyBasicRequest, SurveyRegistRequest } from '@/types/Survey'
import { useEffect } from 'react'
import { usePopupController } from '@/store/popupController'
import { useAddressStore } from '@/store/addressStore'
import { useSessionStore } from '@/store/session'
export default function BasicRegist({
basicInfoData,
setBasicInfoData,
}: {
basicInfoData: SurveyBasicRequest
setBasicInfoData: (data: SurveyBasicRequest) => void
}) {
const { addressData } = useAddressStore()
const { session } = useSessionStore()
const popupController = usePopupController()
useEffect(() => {
if (addressData) {
setBasicInfoData({
...basicInfoData,
POST_CODE: addressData.post_code,
ADDRESS: addressData.address,
ADDRESS_DETAIL: addressData.address_detail,
})
}
}, [addressData])
const handleChange = (key: keyof SurveyRegistRequest, value: string) => {
setBasicInfoData({ ...basicInfoData, [key]: value })
}
return (
<>
<div className="sale-frame" id="basic-form-section">
<div className="data-form-wrap">
<div className="data-input-form-bx">
<div className="data-input-form-tit">担当者名</div>
<input
type="text"
className="input-frame"
id="representative"
value={session?.userNm ? session?.userNm : basicInfoData.REPRESENTATIVE}
disabled
/>
</div>
{(session?.role === 'Builder' || session?.role?.includes('Admin')) && (
<>
<div className="data-input-form-bx">
<div className="data-input-form-tit">販売店</div>
<input
type="text"
className="input-frame"
id="store"
value={session?.storeNm ? session?.storeNm : basicInfoData.STORE ?? ''}
disabled
/>
</div>
</>
)}
{(session?.role === 'Partner' || session?.role === 'Builder') && (
<div className="data-input-form-bx">
<div className="data-input-form-tit">施工店</div>
<input
type="text"
className="input-frame"
id="construction_point"
value={session?.builderNo ? session?.builderNo : basicInfoData.CONSTRUCTION_POINT ?? ''}
disabled
/>
</div>
)}
</div>
</div>
<div className="sale-frame">
<div className="data-form-wrap">
<div className="data-input-form-bx">
<div className="data-input-form-tit">現地調査日</div>
<div className="date-input">
<button className="date-btn">
<i className="date-icon"></i>
</button>
<input
type="date"
className="date-frame"
id="INVESTIGATION_DATE"
value={basicInfoData.INVESTIGATION_DATE ?? ''}
onChange={(e) => handleChange('INVESTIGATION_DATE', e.target.value)}
/>
</div>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">建物名</div>
<input
type="text"
className="input-frame"
id="BUILDING_NAME"
value={basicInfoData.BUILDING_NAME ?? ''}
onChange={(e) => handleChange('BUILDING_NAME', e.target.value)}
/>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">顧客名</div>
<input
type="text"
className="input-frame"
id="CUSTOMER_NAME"
value={basicInfoData.CUSTOMER_NAME ?? ''}
onChange={(e) => handleChange('CUSTOMER_NAME', e.target.value)}
/>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">建物の住所</div>
<div className="form-flex">
<div className="form-bx">
<input type="text" className="input-frame" id="POST_CODE" placeholder="郵便番号" value={basicInfoData.POST_CODE ?? ''} readOnly />
</div>
<div className="form-bx">
<input
className="input-frame"
name="address"
id="ADDRESS"
placeholder="都道府県"
value={basicInfoData.ADDRESS ?? ''}
onChange={(e) => handleChange('ADDRESS', e.target.value)}
readOnly
/>
</div>
</div>
<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">
<div className="data-input-form-tit">市区町村名, 以後の住所</div>
<input
type="text"
className="input-frame"
id="ADDRESS_DETAIL"
value={basicInfoData.ADDRESS_DETAIL ?? ''}
onChange={(e) => handleChange('ADDRESS_DETAIL', e.target.value)}
/>
</div>
</div>
</div>
</>
)
}

92
src/components/survey-sale/temp/formButton.tsx
View File

@ -1,92 +0,0 @@
'use client'
import { SurveyBasicRequest, SurveyRegistRequest } from '@/types/Survey'
import { SurveyDetailRequest } from '@/types/Survey'
import { useRouter } from 'next/navigation'
import { useServey } from '@/hooks/useSurvey'
export default function FormButton({
surveyData,
idParam,
}: {
surveyData: { basic: SurveyBasicRequest; roof: SurveyDetailRequest }
idParam: string | null
}) {
const router = useRouter()
const { validateSurveyDetail, createSurvey, updateSurvey } = useServey(Number(idParam))
const saveData = {
...surveyData.basic,
DETAIL_INFO: surveyData.roof,
}
const focusInput = (input: keyof SurveyRegistRequest) => {
const inputElement = document.getElementById(input)
if (inputElement) {
inputElement.focus()
}
}
const handleSave = (isTemporary: boolean) => {
const emptyField = validateSurveyDetail(saveData.DETAIL_INFO)
if (!isTemporary) {
saveProcess(emptyField)
} else {
temporarySaveProcess()
}
}
const saveProcess = async (emptyField: string) => {
if (emptyField.trim() === '') {
if (idParam) {
// 매물 수정 (저장)
updateSurvey(saveData)
router.push(`/survey-sale/${idParam}`)
} else {
// 매물 생성 (저장)
const id = await createSurvey(saveData)
router.push(`/survey-sale/${id}`)
}
alert('保存されました。')
} else {
alert(emptyField + ' 項目が空です。')
focusInput(emptyField as keyof SurveyRegistRequest)
}
}
const temporarySaveProcess = async () => {
if (idParam) {
// 매물 수정 (임시저장)
updateSurvey(saveData)
router.push(`/survey-sale/${idParam}?isTemporary=true`)
} else {
// 매물 생성 (임시저장)
const id = await createSurvey(saveData)
router.push(`/survey-sale/${id}?isTemporary=true`)
}
alert('一時保存されました。')
}
return (
<>
<div className="sale-frame">
<div className="btn-flex-wrap">
<div className="btn-bx">
<button className="btn-frame n-blue icon" onClick={() => handleSave(true)}>
一時保存<i className="btn-arr"></i>
</button>
</div>
<div className="btn-bx">
<button className="btn-frame red icon" onClick={() => handleSave(false)}>
保存<i className="btn-arr"></i>
</button>
</div>
<div className="btn-bx">
<button className="btn-frame n-blue icon" onClick={() => router.push('/survey-sale')}>
リスト<i className="btn-arr"></i>
</button>
</div>
</div>
</div>
</>
)
}

105
src/components/survey-sale/temp/registForm.tsx
View File

@ -1,105 +0,0 @@
'use client'
import { SurveyBasicRequest, SurveyDetailRequest, SurveyRegistRequest } from '@/types/Survey'
import FormButton from './formButton'
import { useEffect, useState } from 'react'
import BasicRegist from './basicRegist'
import RoofRegist from './roofRegist'
import { useSessionStore } from '@/store/session'
import { useSearchParams } from 'next/navigation'
import { useServey } from '@/hooks/useSurvey'
const roofInfoForm: SurveyDetailRequest = {
CONTRACT_CAPACITY: null,
RETAIL_COMPANY: null,
SUPPLEMENTARY_FACILITIES: null,
SUPPLEMENTARY_FACILITIES_ETC: null,
INSTALLATION_SYSTEM: null,
INSTALLATION_SYSTEM_ETC: null,
CONSTRUCTION_YEAR: null,
CONSTRUCTION_YEAR_ETC: null,
ROOF_MATERIAL: null,
ROOF_MATERIAL_ETC: null,
ROOF_SHAPE: null,
ROOF_SHAPE_ETC: null,
ROOF_SLOPE: null,
HOUSE_STRUCTURE: '1',
HOUSE_STRUCTURE_ETC: null,
RAFTER_MATERIAL: '1',
RAFTER_MATERIAL_ETC: null,
RAFTER_SIZE: null,
RAFTER_SIZE_ETC: null,
RAFTER_PITCH: null,
RAFTER_PITCH_ETC: null,
RAFTER_DIRECTION: '1',
OPEN_FIELD_PLATE_KIND: null,
OPEN_FIELD_PLATE_KIND_ETC: null,
OPEN_FIELD_PLATE_THICKNESS: null,
LEAK_TRACE: false,
WATERPROOF_MATERIAL: null,
WATERPROOF_MATERIAL_ETC: null,
INSULATION_PRESENCE: '1',
INSULATION_PRESENCE_ETC: null,
STRUCTURE_ORDER: null,
STRUCTURE_ORDER_ETC: null,
INSTALLATION_AVAILABILITY: null,
INSTALLATION_AVAILABILITY_ETC: null,
MEMO: null,
}
const basicInfoForm: SurveyBasicRequest = {
REPRESENTATIVE: '',
STORE: null,
CONSTRUCTION_POINT: null,
INVESTIGATION_DATE: new Date().toLocaleDateString('en-CA'),
BUILDING_NAME: null,
CUSTOMER_NAME: null,
POST_CODE: null,
ADDRESS: null,
ADDRESS_DETAIL: null,
SUBMISSION_STATUS: false,
SUBMISSION_DATE: null,
}
export default function RegistForm() {
const searchParams = useSearchParams()
const id = searchParams.get('id')
const { session } = useSessionStore()
const { surveyDetail } = useServey(Number(id))
const [basicInfoData, setBasicInfoData] = useState<SurveyBasicRequest>(basicInfoForm)
const [roofInfoData, setRoofInfoData] = useState<SurveyDetailRequest>(roofInfoForm)
useEffect(() => {
if (session) {
setBasicInfoData({
...basicInfoForm,
REPRESENTATIVE: session.userNm ?? '',
STORE: session.role === 'T01' ? '' : session.storeNm ?? '',
CONSTRUCTION_POINT: session.builderNo ?? '',
})
}
if (id && surveyDetail) {
const { ID, UPT_DT, REG_DT, DETAIL_INFO, ...rest } = surveyDetail
setBasicInfoData(rest)
if (surveyDetail?.DETAIL_INFO) {
const { ID, UPT_DT, REG_DT, BASIC_INFO_ID, ...rest } = surveyDetail.DETAIL_INFO
setRoofInfoData(rest)
}
}
}, [session, surveyDetail])
const surveyData = {
basic: basicInfoData,
roof: roofInfoData,
}
return (
<>
<BasicRegist basicInfoData={basicInfoData} setBasicInfoData={setBasicInfoData} />
<RoofRegist roofInfoData={roofInfoData} setRoofInfoData={setRoofInfoData} />
<FormButton surveyData={surveyData} idParam={id} />
</>
)
}

284
src/components/survey-sale/temp/roofRegist.tsx
View File

@ -1,284 +0,0 @@
'use client'
import { useSurveySaleTabState } from '@/store/surveySaleTabState'
import { SurveyBasicInfo, SurveyDetailRequest } from '@/types/Survey'
import { useEffect } from 'react'
import MultiCheckEtc from '../detail/form/etcProcess/MultiCheckEtc'
import SelectBoxEtc from '../detail/form/etcProcess/SelectBoxEtc'
import RadioEtc from '../detail/form/etcProcess/RadioEtc'
export default function RoofRegist({
roofInfoData,
setRoofInfoData,
}: {
roofInfoData: SurveyDetailRequest
setRoofInfoData: (data: SurveyDetailRequest) => void
}) {
const { setRoofInfoSelected } = useSurveySaleTabState()
useEffect(() => {
setRoofInfoSelected()
}, [])
const handleNumberInput = (key: keyof SurveyDetailRequest, value: number | string) => {
if (key === 'ROOF_SLOPE' || key === 'OPEN_FIELD_PLATE_THICKNESS') {
const stringValue = value.toString()
if (stringValue.length > 5) {
alert('保存できるサイズを超えました。')
return
}
if (stringValue.includes('.')) {
const decimalPlaces = stringValue.split('.')[1].length
if (decimalPlaces > 1) {
alert('小数点以下1桁までしか許されません。')
return
}
}
}
setRoofInfoData({ ...roofInfoData, [key]: value.toString() })
}
const handleTextInput = (key: keyof SurveyDetailRequest, value: string) => {
setRoofInfoData({ ...roofInfoData, [key]: value || null })
}
const handleBooleanInput = (key: keyof SurveyDetailRequest, value: boolean) => {
setRoofInfoData({ ...roofInfoData, [key]: value })
}
const handleUnitInput = (value: string) => {
const numericValue = roofInfoData.CONTRACT_CAPACITY?.replace(/[^0-9.]/g, '') || ''
setRoofInfoData({
...roofInfoData,
CONTRACT_CAPACITY: numericValue ? `${numericValue} ${value}` : value,
})
}
// const handleSave = async () => {
// if (id) {
// const emptyField = validateSurveyDetail(roofInfoData)
// if (emptyField.trim() === '') {
// const updatedBasicInfoData = {
// DETAIL_INFO: roofInfoData,
// }
// try {
// createSurveyDetail({
// surveyId: Number(id),
// surveyDetail: updatedBasicInfoData,
// })
// alert('調査物件を保存しました。')
// } catch (error) {
// alert(error)
// throw new Error('failed to create survey detail: ' + error)
// }
// router.push(`/survey-sale`)
// } else {
// alert(emptyField + ' は必須項目です。')
// focusOnInput(emptyField)
// }
// } else {
// alert('基本情報を作成した後、屋根情報を作成することができます。')
// }
// }
// const focusOnInput = (field: string) => {
// const input = document.getElementById(field)
// if (input) {
// input.focus()
// }
// }
return (
<>
<div className="sale-frame" id="roof-form-section">
<div className="sale-roof-title">電気関係</div>
<div className="data-form-wrap">
<div className="data-input-form-bx">
{/* 전기계약 용량 - contract_capacity */}
<div className="data-input-form-tit">電気契約容量</div>
<div className="data-input mb5">
<input
type="number"
inputMode="decimal"
className="input-frame"
value={roofInfoData.CONTRACT_CAPACITY?.split(' ')[0] ?? ''}
onChange={(e) => handleNumberInput('CONTRACT_CAPACITY', e.target.value)}
/>
</div>
<div className="data-input">
<select
className="select-form"
name="CONTRACT_CAPACITY_UNIT"
id="CONTRACT_CAPACITY_UNIT"
onChange={(e) => handleUnitInput(e.target.value)}
value={roofInfoData.CONTRACT_CAPACITY?.split(' ')[1] ?? ''}
>
<option value="" hidden>
選択してください
</option>
<option value="kVA">kVA</option>
<option value="A">A</option>
</select>
</div>
</div>
{/* 전기 소매 회사 - retail_company */}
<div className="data-input-form-bx">
<div className="data-input-form-tit">電気小売会社</div>
<input
type="text"
className="input-frame"
value={roofInfoData.RETAIL_COMPANY ?? ''}
onChange={(e) => handleTextInput('RETAIL_COMPANY', e.target.value)}
/>
</div>
{/* 전기 부대 설비 - supplementary_facilities */}
<div className="data-input-form-bx">
<MultiCheckEtc column={'SUPPLEMENTARY_FACILITIES'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
</div>
{/* 설치 희망 시스템 - installation_system */}
<SelectBoxEtc column={'INSTALLATION_SYSTEM'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
</div>
</div>
<div className="sale-frame">
<div className="sale-roof-title">屋根関係</div>
<div className="data-form-wrap">
{/* 건축 연수 - construction_year */}
<SelectBoxEtc column={'CONSTRUCTION_YEAR'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
{/* 지붕재 - roof_material */}
<div className="data-input-form-bx">
<MultiCheckEtc column={'ROOF_MATERIAL'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
</div>
{/* 지붕 모양 - roof_shape */}
<SelectBoxEtc column={'ROOF_SHAPE'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
{/* 지붕 경사도 - roof_slope */}
<div className="data-input-form-bx">
<div className="data-input-form-tit">屋根の斜面</div>
<div className="data-input flex">
<input
type="number"
step={0.1}
inputMode="decimal"
className="input-frame"
value={roofInfoData.ROOF_SLOPE ?? ''}
onChange={(e) => handleNumberInput('ROOF_SLOPE', e.target.value)}
/>
<span>寸</span>
</div>
</div>
{/* 주택 구조 - house_structure */}
<RadioEtc column={'HOUSE_STRUCTURE'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
{/* 서까래 재질 - rafter_material */}
<RadioEtc column={'RAFTER_MATERIAL'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
{/* 서까래 크기 - rafter_size */}
<SelectBoxEtc column={'RAFTER_SIZE'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
{/* 서까래 피치 - rafter_pitch */}
<SelectBoxEtc column={'RAFTER_PITCH'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
{/* 서까래 방향 - rafter_direction */}
<div className="data-input-form-bx">
<div className="data-input-form-tit red-f">垂木の方向</div>
<div className="data-check-wrap mb0" id="rafter_direction">
<div className="radio-form-box">
<input
type="radio"
name="RAFTER_DIRECTION"
id="RAFTER_DIRECTION_1"
value={1}
onChange={(e) => handleNumberInput('RAFTER_DIRECTION', Number(e.target.value))}
checked={roofInfoData.RAFTER_DIRECTION === '1'}
/>
<label htmlFor="RAFTER_DIRECTION_1">垂直垂木</label>
</div>
<div className="radio-form-box">
<input
type="radio"
name="RAFTER_DIRECTION"
id="RAFTER_DIRECTION_2"
value={2}
onChange={(e) => handleNumberInput('RAFTER_DIRECTION', Number(e.target.value))}
checked={roofInfoData.RAFTER_DIRECTION === '2'}
/>
<label htmlFor="RAFTER_DIRECTION_2">水平垂木</label>
</div>
</div>
</div>
{/* 노지판 종류 - open_field_plate_kind */}
<SelectBoxEtc column={'OPEN_FIELD_PLATE_KIND'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
{/* 노지판 두께 - open_field_plate_thickness */}
<div className="data-input-form-bx">
<div className="data-input-form-tit">
路地板厚<span>※小幅板を選択した場合, 厚さ. 小幅板間の間隔寸法を記載</span>
</div>
<div className="data-input flex">
<input
type="number"
step={0.1}
inputMode="decimal"
className="input-frame"
value={roofInfoData.OPEN_FIELD_PLATE_THICKNESS ?? ''}
onChange={(e) => handleNumberInput('OPEN_FIELD_PLATE_THICKNESS', e.target.value)}
/>
<span>mm</span>
</div>
</div>
{/* 누수 흔적 - leak_trace */}
<div className="data-input-form-bx">
<div className="data-input-form-tit ">水漏れの痕跡</div>
<div className="data-check-wrap mb0">
<div className="radio-form-box">
<input
type="radio"
name="LEAK_TRACE"
id="LEAK_TRACE_1"
checked={roofInfoData.LEAK_TRACE === true}
onChange={(e) => handleBooleanInput('LEAK_TRACE', true)}
/>
<label htmlFor="LEAK_TRACE_1">あり</label>
</div>
<div className="radio-form-box">
<input
type="radio"
name="LEAK_TRACE"
id="LEAK_TRACE_2"
checked={roofInfoData.LEAK_TRACE === false}
onChange={(e) => handleBooleanInput('LEAK_TRACE', false)}
/>
<label htmlFor="LEAK_TRACE_2">なし</label>
</div>
</div>
</div>
{/* 방수재 종류 - waterproof_material */}
<RadioEtc column={'WATERPROOF_MATERIAL'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
{/* 단열재 유무 - insulation_presence */}
<RadioEtc column={'INSULATION_PRESENCE'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
{/* 노지판 종류 - open_field_plate_kind */}
<SelectBoxEtc column={'STRUCTURE_ORDER'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
{/* 설치 가능 여부 - installation_availability */}
<SelectBoxEtc column={'INSTALLATION_AVAILABILITY'} setDetailInfoData={setRoofInfoData} detailInfoData={roofInfoData} />
{/* 메모 - memo */}
<div className="data-input-form-bx">
<div className="data-input-form-tit">メモ</div>
<div className="data-input mb5">
<select className="select-form" name="" id="">
<option value="">確認済み</option>
<option value="">確認済み</option>
<option value="">確認済み</option>
<option value="">確認済み</option>
<option value="">確認済み</option>
</select>
</div>
<div className="data-input">
<textarea
className="textarea-form"
name="MEMO"
id="MEMO"
value={roofInfoData.MEMO ?? ''}
onChange={(e) => handleTextInput('MEMO', e.target.value)}
placeholder="例: 漏れの兆候があるため、正確な点検が必要です."
></textarea>
</div>
</div>
</div>
</div>
</>
)
}

9
src/components/ui/common/FloatBtn.tsx
View File

@ -5,16 +5,9 @@ import { usePathname } from 'next/navigation'
export default function FloatBtn() { export default function FloatBtn() {
const pathname = usePathname() const pathname = usePathname()
const scrollToTop = () => {
window.scrollTo({
top: 0,
behavior: 'smooth',
})
}
if (pathname === '/login' || pathname === '/') { if (pathname === '/login' || pathname === '/') {
return null return null
} }
return <button className="top-btn" onClick={scrollToTop}></button> return <button className="top-btn"></button>
} }

15
src/hooks/useInquiry.ts
View File

@ -12,10 +12,10 @@ export function useInquiry(
inquiryDetail: Inquiry | null inquiryDetail: Inquiry | null
isLoadingInquiryDetail: boolean isLoadingInquiryDetail: boolean
isSavingInquiry: boolean isSavingInquiry: boolean
saveInquiry: (formData: FormData) => Promise<InquirySaveResponse> saveInquiry: (params: { inquiryRequest: InquiryRequest; files: File[] }) => Promise<InquirySaveResponse>
downloadFile: (encodeFileNo: number) => Promise<File> downloadFile: (encodeFileNo: number) => Promise<File>
} { } {
// const { session } = useSessionStore() const { session } = useSessionStore()
const queryClient = useQueryClient() const queryClient = useQueryClient()
const { inquiryListRequest } = useInquiryFilterStore() const { inquiryListRequest } = useInquiryFilterStore()
@ -41,7 +41,6 @@ export function useInquiry(
const resp = await axiosInstance(null).get<{ data: Inquiry }>(`/api/qna/detail`, { const resp = await axiosInstance(null).get<{ data: Inquiry }>(`/api/qna/detail`, {
params: { qnoNo, compCd, langCd: 'JA', loginId: 'x112' }, params: { qnoNo, compCd, langCd: 'JA', loginId: 'x112' },
}) })
console.log('resp.data.data:: ', resp.data.data)
return resp.data.data return resp.data.data
} catch (error: any) { } catch (error: any) {
console.error(error.response) console.error(error.response)
@ -52,7 +51,15 @@ export function useInquiry(
}) })
const { mutateAsync: saveInquiry, isPending: isSavingInquiry } = useMutation({ const { mutateAsync: saveInquiry, isPending: isSavingInquiry } = useMutation({
mutationFn: async (formData: FormData) => { mutationFn: async ({ inquiryRequest, files }: { inquiryRequest: InquiryRequest; files: File[] }) => {
const formData = new FormData()
Object.entries(inquiryRequest).forEach(([key, value]) => {
formData.append(key, value ?? '')
})
files.forEach((file) => {
formData.append('files', file)
})
const resp = await axiosInstance(null).post<{ data: InquirySaveResponse }>('/api/qna/save', formData) const resp = await axiosInstance(null).post<{ data: InquirySaveResponse }>('/api/qna/save', formData)
return resp.data.data return resp.data.data
}, },

110
src/hooks/useSurvey.ts
View File

@ -1,46 +1,8 @@
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query' import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import type { import type { SurveyBasicInfo, SurveyBasicRequest, SurveyDetailInfo, SurveyDetailRequest, SurveyDetailCoverRequest } from '@/types/Survey'
SurveyBasicInfo,
SurveyDetailInfo,
SurveyDetailRequest,
SurveyDetailCoverRequest,
SurveyRegistRequest,
} from '@/types/Survey'
import { axiosInstance } from '@/libs/axios' import { axiosInstance } from '@/libs/axios'
import { useSurveyFilterStore } from '@/store/surveyFilterStore' import { useSurveyFilterStore } from '@/store/surveyFilterStore'
import { queryStringFormatter } from '@/utils/common-utils' import { queryStringFormatter } from '@/utils/common-utils'
import { useSessionStore } from '@/store/session'
const requiredFields = [
{
field: 'INSTALLATION_SYSTEM',
name: '設置希望システム',
},
{
field: 'CONSTRUCTION_YEAR',
name: '建築年数',
},
{
field: 'RAFTER_SIZE',
name: '垂木サイズ',
},
{
field: 'RAFTER_PITCH',
name: '垂木傾斜',
},
{
field: 'WATERPROOF_MATERIAL',
name: '防水材',
},
{
field: 'INSULATION_PRESENCE',
name: '断熱材有無',
},
{
field: 'STRUCTURE_ORDER',
name: '屋根構造の順序',
},
]
interface ZipCodeResponse { interface ZipCodeResponse {
status: number status: number
@ -58,6 +20,7 @@ type ZipCode = {
kana2: string kana2: string
kana3: string kana3: string
} }
import { useUserType } from './useUserType'
export function useServey(id?: number): { export function useServey(id?: number): {
surveyList: SurveyBasicInfo[] | [] surveyList: SurveyBasicInfo[] | []
@ -68,9 +31,9 @@ export function useServey(id?: number): {
isCreatingSurvey: boolean isCreatingSurvey: boolean
isUpdatingSurvey: boolean isUpdatingSurvey: boolean
isDeletingSurvey: boolean isDeletingSurvey: boolean
createSurvey: (survey: SurveyRegistRequest) => Promise<number> createSurvey: (survey: SurveyBasicRequest) => Promise<number>
createSurveyDetail: (params: { surveyId: number; surveyDetail: SurveyDetailCoverRequest }) => void createSurveyDetail: (params: { surveyId: number; surveyDetail: SurveyDetailCoverRequest }) => void
updateSurvey: (survey: SurveyRegistRequest) => void updateSurvey: (survey: SurveyBasicRequest) => void
deleteSurvey: () => Promise<boolean> deleteSurvey: () => Promise<boolean>
submitSurvey: () => void submitSurvey: () => void
validateSurveyDetail: (surveyDetail: SurveyDetailRequest) => string validateSurveyDetail: (surveyDetail: SurveyDetailRequest) => string
@ -78,22 +41,13 @@ export function useServey(id?: number): {
} { } {
const queryClient = useQueryClient() const queryClient = useQueryClient()
const { keyword, searchOption, isMySurvey, sort, offset } = useSurveyFilterStore() const { keyword, searchOption, isMySurvey, sort, offset } = useSurveyFilterStore()
const { session } = useSessionStore() const { store, construction_point } = useUserType()
const { data: surveyList, isLoading: isLoadingSurveyList } = useQuery({ const { data: surveyList, isLoading: isLoadingSurveyList } = useQuery({
queryKey: ['survey', 'list', keyword, searchOption, isMySurvey, sort, offset, session?.storeNm, session?.builderNo, session?.role], queryKey: ['survey', 'list', keyword, searchOption, isMySurvey, sort, offset, store, construction_point],
queryFn: async () => { queryFn: async () => {
const resp = await axiosInstance(null).get<SurveyBasicInfo[]>('/api/survey-sales', { const resp = await axiosInstance(null).get<SurveyBasicInfo[]>('/api/survey-sales', {
params: { params: { keyword, searchOption, isMySurvey, sort, offset, store, construction_point },
keyword,
searchOption,
isMySurvey,
sort,
offset,
store: session?.storeNm,
builderNo: session?.builderNo,
role: session?.role,
},
}) })
return resp.data return resp.data
}, },
@ -111,27 +65,19 @@ export function useServey(id?: number): {
}) })
const { data: surveyListCount } = useQuery({ const { data: surveyListCount } = useQuery({
queryKey: ['survey', 'list', keyword, searchOption, isMySurvey, sort, session?.builderNo, session?.storeNm, session?.role], queryKey: ['survey', 'list', keyword, searchOption, isMySurvey, sort],
queryFn: async () => { queryFn: async () => {
const resp = await axiosInstance(null).get<number>('/api/survey-sales', { const resp = await axiosInstance(null).get<number>('/api/survey-sales', {
params: { params: { keyword, searchOption, isMySurvey, sort },
keyword,
searchOption,
isMySurvey,
sort,
builderNo: session?.builderNo,
store: session?.storeNm,
role: session?.role,
},
}) })
return resp.data return resp.data
}, },
}) })
const { mutateAsync: createSurvey, isPending: isCreatingSurvey } = useMutation({ const { mutateAsync: createSurvey, isPending: isCreatingSurvey } = useMutation({
mutationFn: async (survey: SurveyRegistRequest) => { mutationFn: async (survey: SurveyBasicRequest) => {
const resp = await axiosInstance(null).post<SurveyBasicInfo>('/api/survey-sales', survey) const resp = await axiosInstance(null).post<SurveyBasicInfo>('/api/survey-sales', survey)
return resp.data.ID ?? 0 return resp.data.id ?? 0
}, },
onSuccess: (data) => { onSuccess: (data) => {
queryClient.invalidateQueries({ queryKey: ['survey', 'list'] }) queryClient.invalidateQueries({ queryKey: ['survey', 'list'] })
@ -141,9 +87,10 @@ export function useServey(id?: number): {
}) })
const { mutate: updateSurvey, isPending: isUpdatingSurvey } = useMutation({ const { mutate: updateSurvey, isPending: isUpdatingSurvey } = useMutation({
mutationFn: async (survey: SurveyRegistRequest) => { mutationFn: async (survey: SurveyBasicRequest) => {
console.log('updateSurvey:: ', survey)
if (id === undefined) throw new Error('id is required') if (id === undefined) throw new Error('id is required')
const resp = await axiosInstance(null).put<SurveyRegistRequest>(`/api/survey-sales/${id}`, survey) const resp = await axiosInstance(null).put<SurveyBasicInfo>(`/api/survey-sales/${id}`, survey)
return resp.data return resp.data
}, },
onSuccess: () => { onSuccess: () => {
@ -190,24 +137,32 @@ export function useServey(id?: number): {
}) })
const validateSurveyDetail = (surveyDetail: SurveyDetailRequest) => { const validateSurveyDetail = (surveyDetail: SurveyDetailRequest) => {
const etcFields = ['INSTALLATION_SYSTEM', 'CONSTRUCTION_YEAR', 'RAFTER_SIZE', 'RAFTER_PITCH', 'WATERPROOF_MATERIAL', 'STRUCTURE_ORDER'] as const const requiredFields = [
'installation_system',
'construction_year',
'rafter_size',
'rafter_pitch',
'rafter_direction',
'waterproof_material',
'insulation_presence',
'structure_order',
] as const
const etcFields = ['installation_system', 'construction_year', 'rafter_size', 'rafter_pitch', 'waterproof_material', 'structure_order'] as const
const emptyField = requiredFields.find((field) => { const emptyField = requiredFields.find((field) => {
if (etcFields.includes(field.field as (typeof etcFields)[number])) { if (etcFields.includes(field as (typeof etcFields)[number])) {
return ( return surveyDetail[field as keyof SurveyDetailRequest] === null && surveyDetail[`${field}_etc` as keyof SurveyDetailRequest] === null
surveyDetail[field.field as keyof SurveyDetailRequest] === null && surveyDetail[`${field.field}_ETC` as keyof SurveyDetailRequest] === ''
)
} else {
return surveyDetail[field.field as keyof SurveyDetailRequest] === null
} }
return surveyDetail[field as keyof SurveyDetailRequest] === null
}) })
const contractCapacity = surveyDetail.CONTRACT_CAPACITY const contractCapacity = surveyDetail.contract_capacity
if (contractCapacity && contractCapacity.trim() !== '' && contractCapacity.split(' ')?.length === 1) { if (contractCapacity && contractCapacity.trim() !== '' && contractCapacity.split(' ')?.length === 1) {
return 'CONTRACT_CAPACITY_UNIT' return 'contract_capacity_unit'
} }
return emptyField?.name || '' return emptyField || ''
} }
const getZipCode = async (zipCode: string): Promise<ZipCode[] | null> => { const getZipCode = async (zipCode: string): Promise<ZipCode[] | null> => {
@ -215,6 +170,7 @@ export function useServey(id?: number): {
const { data } = await axiosInstance(null).get<ZipCodeResponse>( const { data } = await axiosInstance(null).get<ZipCodeResponse>(
`https://zipcloud.ibsnet.co.jp/api/search?${queryStringFormatter({ zipcode: zipCode.trim() })}`, `https://zipcloud.ibsnet.co.jp/api/search?${queryStringFormatter({ zipcode: zipCode.trim() })}`,
) )
return data.results return data.results
} catch (e) { } catch (e) {
console.error('Failed to fetch zipcode data:', e) console.error('Failed to fetch zipcode data:', e)

24
src/hooks/useUserType.ts Normal file
View File

@ -0,0 +1,24 @@
import { useSessionStore } from '@/store/session'
import { useEffect, useState } from 'react'
export type UserType = 'hwj' | 'order' | 'musubi' | 'musubi_con' | 'partner'
// 로그인 된 회원 유형에 따라 조사 매물 목록 변경됨
export function useUserType() {
const { session } = useSessionStore()
const [userType, setUserType] = useState<UserType | null>(null)
const [store, setStore] = useState<string | null>(null)
const [construction_point, setConstructionPoint] = useState<string | null>(null)
// TODO: 회원 유형 설정
useEffect(() => {
if (!session?.isLoggedIn) return
setUserType('musubi_con')
}, [session])
return {
userType,
store,
construction_point,
}
}

6
src/store/surveyFilterStore.ts
View File

@ -1,5 +1,11 @@
import { create } from 'zustand' import { create } from 'zustand'
// export type SEARCH_OPTIONS_ENUM = 'all' | 'id' | 'building_name' | 'representative' | 'store' | 'construction_point'
// | 'store_id' | 'construction_id'
// export type SEARCH_OPTIONS_PARTNERS_ENUM = 'all' | 'id' | 'building_name' | 'representative'
// export type SORT_OPTIONS_ENUM = 'created' | 'updated'
export const SEARCH_OPTIONS = [ export const SEARCH_OPTIONS = [
{ {
id: 'all', id: 'all',

3
src/styles/base/_check-radio.scss
View File

@ -85,9 +85,6 @@
input[type="checkbox"]:disabled + label::after{ input[type="checkbox"]:disabled + label::after{
cursor: default; cursor: default;
} }
input[type="checkbox"]:disabled:checked + label::before{
background-color: #A8B6C7;
}
&.ch-bld{ &.ch-bld{
input[type="checkbox"]:checked + label{ input[type="checkbox"]:checked + label{
font-weight: 500; font-weight: 500;

106
src/styles/components/_sub.scss
View File

@ -77,11 +77,36 @@
} }
} }
} }
.sale-form-btn-wrap{ .sale-detail-tab-relative{
padding: 20px 20px 0 ; height: 40px;
background-color: #fff; margin-bottom: 10px;
.btn-flex-wrap{ }
margin-top: 0; .sale-detail-tab-wrap{
position: fixed;
top: 66px;
left: 0;
width: 100%;
height: 40px;
background-color: $white-fff;
z-index: 98000;
.sale-detail-tab-inner{
position: relative;
@include flex(0px);
align-items: center;
height: 100%;
.sale-detail-tab{
flex: 1;
height: 100%;
background-color: #fff;
border-top: 1px solid #DDDFE2;
border-bottom: 1px solid #DDDFE2;
@include defaultFont($font-s-13, $font-w-500, $font-c);
&.act{
color: $white-fff;
background-color: #5F738E;
border-color: #5F738E;
}
}
} }
} }
@ -177,11 +202,6 @@
} }
// 매물 상세 // 매물 상세
.sale-data-table-wrap{
padding: 24px;
background-color: #fff;
border-top: 1px solid #ECECEC;
}
.sale-data-table{ .sale-data-table{
width: 100%; width: 100%;
table-layout: fixed; table-layout: fixed;
@ -222,63 +242,6 @@
} }
} }
.sale-detail-toggle-wrap{
border-top: 1px solid #ECECEC;
}
.sale-detail-toggle-bx{
border-bottom: 1px solid #ECECEC;
}
.sale-detail-toggle-head{
@include flex(5px);
padding: 14px 18px;
background-color: $white-fff;
cursor: pointer;
.sale-detail-toggle-name{
@include defaultFont($font-s-13, $font-w-500, $font-c);
}
.sale-detail-toggle-btn-wrap{
margin-left: auto;
.sale-detail-toggle-btn{
display: block;
width: 22px;
height: 22px;
background: url(/assets/images/sub/sale_toggle_btn.svg)no-repeat center;
background-size: cover
}
}
}
.sale-detail-toggle-cont{
display: none;
.sale-frame{
padding: 24px 20px;
&:first-child{
padding-top: 24px;
}
&:last-child{
padding-bottom: 24px;
}
}
}
.sale-detail-toggle-bx{
&.act{
.sale-detail-toggle-head{
background-color: #5F738E;
.sale-detail-toggle-name{
color: #fff
}
.sale-detail-toggle-btn-wrap{
.sale-detail-toggle-btn{
background: url(/assets/images/sub/sale_toggle_btn_white.svg)no-repeat center;
}
}
}
.sale-detail-toggle-cont{
display: block;
}
}
}
// 매물 기본정보 // 매물 기본정보
.form-flex{ .form-flex{
@include flex(5px); @include flex(5px);
@ -651,14 +614,7 @@
@include flex(0px); @include flex(0px);
align-items: center; align-items: center;
} }
.float-btn-wrap{
position: sticky;
bottom: 10px;
left: 0;
width: 100%;
background-color: #fff;
z-index: 9;
}
@media screen and (max-width: 360px){ @media screen and (max-width: 360px){
.btn-flex-wrap{ .btn-flex-wrap{
flex-direction: column; flex-direction: column;

2
src/styles/layout/_layout.scss
View File

@ -6,7 +6,7 @@
flex-direction: column; flex-direction: column;
width: 100%; width: 100%;
min-height: 100vh; min-height: 100vh;
// overflow-x: hidden; overflow-x: hidden;
.container{ .container{
flex: 1 1 auto; flex: 1 1 auto;
} }

5
src/types/Inquiry.ts
View File

@ -75,12 +75,11 @@ export type InquiryRequest = {
qnaClsMidCd: string //qna CLS Mid Code qnaClsMidCd: string //qna CLS Mid Code
qnaClsSmlCd: string | null //qna CLS Small Code qnaClsSmlCd: string | null //qna CLS Small Code
title: string //title title: string //title
contents: string //contents contents: string | null //contents
regId: string //registration Userid regId: string //registration Userid
storeId: string //store id storeId: string | null //store id
regUserNm: string //registration User name regUserNm: string //registration User name
regUserTelNo: string | null //registration User tel number regUserTelNo: string | null //registration User tel number
qstMail: string //mail
} }
export type InquirySaveResponse = { export type InquirySaveResponse = {

2
src/types/Survey.ts
View File

@ -1,3 +1,5 @@
import { SEARCH_OPTIONS_ENUM, SEARCH_OPTIONS_PARTNERS_ENUM, SORT_OPTIONS_ENUM } from '@/store/surveyFilterStore'
export type SurveyBasicInfo = { export type SurveyBasicInfo = {
ID: number ID: number
REPRESENTATIVE: string REPRESENTATIVE: string