feat: set SurveyList Filtering
- 조사 매물 목록 페이지 필터링 구현 - 기존 survey-sales 샘플 페이지 모두 삭제
This commit is contained in:
parent
fd27bfe7d0
commit
115ffb8a74
@ -2,39 +2,72 @@
|
||||
|
||||
import LoadMoreButton from '@/components/LoadMoreButton'
|
||||
import { useServey } from '@/hooks/useSurvey'
|
||||
import { useState } from 'react'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import SearchForm from './SearchForm'
|
||||
|
||||
export default function ListTable() {
|
||||
const router = useRouter()
|
||||
const { surveyList, isLoadingSurveyList } = useServey()
|
||||
|
||||
const [hasMore, setHasMore] = useState(surveyList.length > 5)
|
||||
const [visibleItems, setVisibleItems] = useState(5)
|
||||
const [search, setSearch] = useState('')
|
||||
const [isMyPostsOnly, setIsMyPostsOnly] = useState(false)
|
||||
const [hasMore, setHasMore] = useState(false)
|
||||
|
||||
// TODO: 로그인 구현 이후 USERNAME 변경
|
||||
const username = 'test'
|
||||
|
||||
const filteredSurveyList = useMemo(() => {
|
||||
let filtered = surveyList
|
||||
if (search.trim().length > 0) {
|
||||
filtered = filtered.filter((survey) => survey.building_name?.includes(search))
|
||||
}
|
||||
if (isMyPostsOnly) {
|
||||
filtered = filtered.filter((survey) => survey.representative === username)
|
||||
}
|
||||
return filtered
|
||||
}, [surveyList, search, isMyPostsOnly, username])
|
||||
|
||||
useEffect(() => {
|
||||
setHasMore(filteredSurveyList.length > visibleItems)
|
||||
}, [filteredSurveyList, visibleItems])
|
||||
|
||||
const handleLoadMore = () => {
|
||||
const newVisibleItems = Math.min(visibleItems + 5, surveyList.length)
|
||||
const newVisibleItems = Math.min(visibleItems + 5, filteredSurveyList.length)
|
||||
setVisibleItems(newVisibleItems)
|
||||
setHasMore(newVisibleItems < surveyList.length)
|
||||
setHasMore(newVisibleItems < filteredSurveyList.length)
|
||||
}
|
||||
|
||||
const handleScrollToTop = () => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
}
|
||||
|
||||
const handleDetail = (id: number) => {
|
||||
const handleDetailClick = (id: number) => {
|
||||
router.push(`/survey-sale/${id}`)
|
||||
}
|
||||
|
||||
const handleSearchChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSearch(e.target.value)
|
||||
setVisibleItems(5)
|
||||
}
|
||||
|
||||
const handleMyPostsToggle = () => {
|
||||
setIsMyPostsOnly((prev) => !prev)
|
||||
setVisibleItems(5)
|
||||
}
|
||||
|
||||
if (isLoadingSurveyList) {
|
||||
return <div>Loading...</div>
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<SearchForm handleSearch={handleSearchChange} handleMyPosts={handleMyPostsToggle} />
|
||||
<div className="sale-frame">
|
||||
<ul className="sale-list-wrap">
|
||||
{surveyList.slice(0, visibleItems).map((survey) => (
|
||||
<li className="sale-list-item cursor-pointer" key={survey.id} onClick={() => handleDetail(survey.id)}>
|
||||
{filteredSurveyList.slice(0, visibleItems).map((survey) => (
|
||||
<li className="sale-list-item cursor-pointer" key={survey.id} onClick={() => handleDetailClick(survey.id)}>
|
||||
<div className="sale-item-bx">
|
||||
<div className="sale-item-date-bx">
|
||||
<div className="sale-item-num">{survey.id}</div>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
import { useRouter } from 'next/navigation'
|
||||
|
||||
export default function SearchForm() {
|
||||
export default function SearchForm({ handleSearch, handleMyPosts }: { handleSearch: (e: React.ChangeEvent<HTMLInputElement>) => void, handleMyPosts: () => void }) {
|
||||
const router = useRouter()
|
||||
return (
|
||||
<div className="sale-frame">
|
||||
@ -22,13 +22,13 @@ export default function SearchForm() {
|
||||
</div>
|
||||
<div className="sale-form-bx">
|
||||
<div className="search-input">
|
||||
<input type="text" className="search-frame" placeholder="タイトルを入力してください. (2文字以上)" />
|
||||
<input type="text" className="search-frame" placeholder="タイトルを入力してください. (2文字以上)" onChange={handleSearch} />
|
||||
<button className="search-icon"></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="sale-form-bx">
|
||||
<div className="check-form-box">
|
||||
<input type="checkbox" id="ch01" />
|
||||
<input type="checkbox" id="ch01" onClick={handleMyPosts} />
|
||||
<label htmlFor="ch01">私が書いた物件</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,68 +0,0 @@
|
||||
'use client'
|
||||
import { useState } from "react"
|
||||
import { SurveyDetailRequest } from "@/types/Survey"
|
||||
|
||||
interface EtcCheckboxProps {
|
||||
formName: keyof SurveyDetailRequest
|
||||
label: string
|
||||
detailInfoForm: SurveyDetailRequest
|
||||
setDetailInfoForm: (form: SurveyDetailRequest) => void
|
||||
}
|
||||
|
||||
export default function EtcCheckbox({ formName, label, detailInfoForm, setDetailInfoForm }: EtcCheckboxProps) {
|
||||
const [showEtcInput, setShowEtcInput] = useState(false)
|
||||
const etcFieldName = `${formName}_etc` as keyof SurveyDetailRequest
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<label htmlFor={formName} className="block font-medium">{label}</label>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id={formName}
|
||||
checked={detailInfoForm[formName] === 1}
|
||||
onChange={(e) => setDetailInfoForm({
|
||||
...detailInfoForm,
|
||||
[formName]: e.target.checked ? 1 : 0
|
||||
})}
|
||||
/>
|
||||
<label htmlFor={formName}>있음</label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
id={`${formName}_etc_check`}
|
||||
checked={showEtcInput}
|
||||
onChange={(e) => {
|
||||
setShowEtcInput(e.target.checked)
|
||||
if (!e.target.checked) {
|
||||
setDetailInfoForm({
|
||||
...detailInfoForm,
|
||||
[etcFieldName]: ''
|
||||
})
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<label htmlFor={`${formName}_etc_check`}>기타</label>
|
||||
|
||||
{showEtcInput && (
|
||||
<input
|
||||
type="text"
|
||||
id={`${formName}_etc`}
|
||||
value={(detailInfoForm[etcFieldName] as string | null) ?? ''}
|
||||
placeholder="기타 사항을 입력하세요"
|
||||
onChange={(e) => setDetailInfoForm({
|
||||
...detailInfoForm,
|
||||
[etcFieldName]: e.target.value
|
||||
})}
|
||||
className="border rounded px-2 py-1 ml-2"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,61 +0,0 @@
|
||||
// 'use client'
|
||||
|
||||
// import { useServey } from '@/hooks/useSurvey'
|
||||
// import { useParams, useRouter } from 'next/navigation'
|
||||
|
||||
// export default function SurveyDetail() {
|
||||
// const params = useParams()
|
||||
// const id = params.id
|
||||
// const router = useRouter()
|
||||
|
||||
// const { surveyDetail, deleteSurvey, isDeletingSurvey, confirmSurvey } = useServey(Number(id))
|
||||
|
||||
// console.log('surveyDetail:: ', surveyDetail)
|
||||
|
||||
// const handleDelete = async () => {
|
||||
// if (confirm('delete?')) {
|
||||
// if (surveyDetail?.representative) {
|
||||
// if (surveyDetail.detail_info?.id) {
|
||||
// await deleteSurvey({ id: Number(surveyDetail.detail_info.id), isDetail: true })
|
||||
// }
|
||||
// await deleteSurvey({ id: Number(id), isDetail: false })
|
||||
// }
|
||||
// alert('delete success')
|
||||
// router.push('/survey-sales')
|
||||
// }
|
||||
// }
|
||||
// const handleSubmit = () => {
|
||||
// if (confirm('submit?')) {
|
||||
// confirmSurvey(Number(id))
|
||||
// }
|
||||
// alert('submit success')
|
||||
// router.push('/survey-sales')
|
||||
// }
|
||||
|
||||
// if (isDeletingSurvey) {
|
||||
// return <div>Deleting...</div>
|
||||
// }
|
||||
|
||||
// return (
|
||||
// <div>
|
||||
// <h1>SurveyDetail</h1>
|
||||
// <p>{id}</p>
|
||||
// <p>{surveyDetail?.representative}</p>
|
||||
// <div className="flex gap-3">
|
||||
// <button className="bg-blue-500 text-white px-2 py-1 rounded-md cursor-pointer" onClick={() => router.push('/survey-sales/write?id=' + id)}>
|
||||
// edit
|
||||
// </button>
|
||||
// <button className="bg-blue-500 text-white px-2 py-1 rounded-md cursor-pointer" onClick={handleSubmit}>
|
||||
// submit
|
||||
// </button>
|
||||
// <button className="bg-red-500 text-white px-2 py-1 rounded-md cursor-pointer" onClick={handleDelete}>
|
||||
// delete
|
||||
// </button>
|
||||
// <button className="bg-gray-500 text-white px-2 py-1 rounded-md cursor-pointer" onClick={() => router.back()}>
|
||||
// back
|
||||
// </button>
|
||||
// </div>
|
||||
// <input type="text" className="input-frame" disabled defaultValue={surveyDetail?.store ?? ''} />
|
||||
// </div>
|
||||
// )
|
||||
// }
|
||||
@ -1,22 +0,0 @@
|
||||
import { Search } from 'lucide-react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
|
||||
export default function SurveyFilter({ handleSearch, handleMyPosts }: { handleSearch: (e: React.ChangeEvent<HTMLInputElement>) => void, handleMyPosts: () => void }) {
|
||||
const router = useRouter()
|
||||
return (
|
||||
<div>
|
||||
<button onClick={() => router.push('/survey-sales/write')}>write survey {'>'}</button>
|
||||
<div className="flex items-center gap-2">
|
||||
<input type="text" placeholder="Search" onChange={handleSearch} />
|
||||
<button>
|
||||
<Search />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button onClick={handleMyPosts} className="cursor-pointer">
|
||||
my posts
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,90 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { useServey } from '@/hooks/useSurvey'
|
||||
import LoadMoreButton from '@/components/LoadMoreButton'
|
||||
import { useState } from 'react'
|
||||
import SurveyFilter from './SurveyFilter'
|
||||
import { useRouter } from 'next/navigation'
|
||||
|
||||
export default function SurveySaleList() {
|
||||
const { surveyList, isLoadingSurveyList } = useServey()
|
||||
const [search, setSearch] = useState('')
|
||||
const [isMyPostsOnly, setIsMyPostsOnly] = useState(false)
|
||||
const [hasMore, setHasMore] = useState(surveyList.length > 5)
|
||||
const [visibleItems, setVisibleItems] = useState(5)
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// TEMP USERNAME
|
||||
const username = 'test'
|
||||
|
||||
const surveyData = () => {
|
||||
if (search.trim().length > 0) {
|
||||
return surveyList.filter((survey) => survey.building_name?.includes(search))
|
||||
}
|
||||
if (isMyPostsOnly) {
|
||||
return surveyList.filter((survey) => survey.representative === username)
|
||||
}
|
||||
return surveyList
|
||||
}
|
||||
|
||||
const handleLoadMore = () => {
|
||||
const newVisibleItems = Math.min(visibleItems + 5, surveyData().length)
|
||||
setVisibleItems(newVisibleItems)
|
||||
setHasMore(newVisibleItems < surveyData().length)
|
||||
}
|
||||
|
||||
const handleScrollToTop = () => {
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' })
|
||||
}
|
||||
|
||||
const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setSearch(e.target.value)
|
||||
}
|
||||
|
||||
const handleDetail = (id: number | undefined) => {
|
||||
if (id === undefined) throw new Error('id is required')
|
||||
router.push(`/survey-sales/${id}`)
|
||||
}
|
||||
|
||||
if (isLoadingSurveyList) {
|
||||
return <div>Loading...</div>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="max-w-4xl mx-auto p-4">
|
||||
<SurveyFilter handleSearch={handleSearch} handleMyPosts={() => setIsMyPostsOnly(!isMyPostsOnly)} />
|
||||
|
||||
<div className="grid gap-4 mt-6">
|
||||
{surveyData().slice(0, visibleItems).map((survey) => (
|
||||
<div
|
||||
key={survey.id}
|
||||
onClick={() => handleDetail(survey.id)}
|
||||
className="bg-white rounded-lg shadow p-4 hover:shadow-md transition-shadow cursor-pointer border border-gray-200"
|
||||
>
|
||||
<div className="flex justify-between items-start">
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-lg font-semibold text-gray-900">{survey.id}</h2>
|
||||
<div className="space-y-1 text-sm text-gray-600">
|
||||
<p>담당자: {survey.representative || '-'}</p>
|
||||
<p>판매점: {survey.store || '-'}</p>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
className={`px-3 py-1 rounded-full text-sm ${
|
||||
survey.submission_status ? 'bg-green-100 text-green-800' : 'bg-yellow-100 text-yellow-800'
|
||||
}`}
|
||||
>
|
||||
{survey.submission_status ? '제출' : '미제출'}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<LoadMoreButton hasMore={hasMore} onLoadMore={handleLoadMore} onScrollToTop={handleScrollToTop} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,86 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { SurveyBasicRequest } from '@/types/Survey'
|
||||
|
||||
export default function BasicWriteForm({
|
||||
basicInfoData,
|
||||
setBasicInfoData,
|
||||
}: {
|
||||
basicInfoData: SurveyBasicRequest
|
||||
setBasicInfoData: (basicInfoData: SurveyBasicRequest) => void
|
||||
}) {
|
||||
const handleChange = (key: keyof SurveyBasicRequest, value: string) => {
|
||||
setBasicInfoData({ ...basicInfoData, [key]: value.toString() })
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<label htmlFor="representative">담당자명</label>
|
||||
<input
|
||||
type="text"
|
||||
id="representative"
|
||||
value={basicInfoData.representative}
|
||||
onChange={(e) => handleChange('representative', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="store">판매점</label>
|
||||
<input type="text" id="store" value={basicInfoData.store ?? ''} onChange={(e) => handleChange('store', e.target.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="construction_point">시공점</label>
|
||||
<input
|
||||
type="text"
|
||||
id="construction_point"
|
||||
value={basicInfoData.construction_point ?? ''}
|
||||
onChange={(e) => handleChange('construction_point', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="investigation_date">현재 조사일</label>
|
||||
<input
|
||||
type="date"
|
||||
id="investigation_date"
|
||||
value={basicInfoData.investigation_date ?? ''}
|
||||
onChange={(e) => handleChange('investigation_date', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="building_name">건물명</label>
|
||||
<input
|
||||
type="text"
|
||||
id="building_name"
|
||||
value={basicInfoData.building_name ?? ''}
|
||||
onChange={(e) => handleChange('building_name', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="customer_name">고객명</label>
|
||||
<input
|
||||
type="text"
|
||||
id="customer_name"
|
||||
value={basicInfoData.customer_name ?? ''}
|
||||
onChange={(e) => handleChange('customer_name', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="post_code">우편번호</label>
|
||||
<input type="text" id="post_code" value={basicInfoData.post_code ?? ''} onChange={(e) => handleChange('post_code', e.target.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="address">주소</label>
|
||||
<input type="text" id="address" value={basicInfoData.address ?? ''} onChange={(e) => handleChange('address', e.target.value)} />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="address_detail">상세주소</label>
|
||||
<input
|
||||
type="text"
|
||||
id="address_detail"
|
||||
value={basicInfoData.address_detail ?? ''}
|
||||
onChange={(e) => handleChange('address_detail', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,157 +0,0 @@
|
||||
'use client'
|
||||
import React from 'react'
|
||||
import EtcCheckbox from '../EtcCheckbox'
|
||||
import { SurveyDetailRequest } from '@/types/Survey'
|
||||
|
||||
interface DetailWriteFormProps {
|
||||
detailInfoForm: SurveyDetailRequest
|
||||
setDetailInfoForm: (form: SurveyDetailRequest) => void
|
||||
}
|
||||
|
||||
export default function DetailWriteForm({ detailInfoForm, setDetailInfoForm }: DetailWriteFormProps) {
|
||||
const handleNumberInput = (field: keyof SurveyDetailRequest, value: string) => {
|
||||
const numberValue = value === '' ? null : Number(value)
|
||||
setDetailInfoForm({ ...detailInfoForm, [field]: numberValue })
|
||||
}
|
||||
|
||||
const handleTextInput = (field: keyof SurveyDetailRequest, value: string) => {
|
||||
setDetailInfoForm({ ...detailInfoForm, [field]: value || null })
|
||||
}
|
||||
|
||||
const handleBooleanInput = (field: keyof SurveyDetailRequest, checked: boolean) => {
|
||||
setDetailInfoForm({ ...detailInfoForm, [field]: checked })
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="contract_capacity">계약용량</label>
|
||||
<input
|
||||
type="text"
|
||||
id="contract_capacity"
|
||||
value={detailInfoForm.contract_capacity ?? ''}
|
||||
onChange={(e) => handleTextInput('contract_capacity', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="retail_company">소매회사</label>
|
||||
<input
|
||||
type="text"
|
||||
id="retail_company"
|
||||
value={detailInfoForm.retail_company ?? ''}
|
||||
onChange={(e) => handleTextInput('retail_company', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<EtcCheckbox
|
||||
formName="supplementary_facilities"
|
||||
label="부대설비"
|
||||
detailInfoForm={detailInfoForm}
|
||||
setDetailInfoForm={setDetailInfoForm}
|
||||
/>
|
||||
|
||||
<div>
|
||||
<EtcCheckbox formName="installation_system" label="설치시스템" detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<EtcCheckbox formName="construction_year" label="건축년도" detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<EtcCheckbox formName="roof_material" label="지붕재료" detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<EtcCheckbox formName="roof_shape" label="지붕형태" detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="roof_slope">지붕 경사도</label>
|
||||
<input
|
||||
type="text"
|
||||
id="roof_slope"
|
||||
value={detailInfoForm.roof_slope ?? ''}
|
||||
onChange={(e) => handleTextInput('roof_slope', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<EtcCheckbox formName="house_structure" label="주택 구조" detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<EtcCheckbox formName="rafter_material" label="주탑재료" detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<EtcCheckbox formName="rafter_size" label="주탑 크기" detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<EtcCheckbox formName="rafter_pitch" label="주탑 경사도" detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="rafter_direction">오픈필드 판형</label>
|
||||
<input
|
||||
type="text"
|
||||
id="rafter_direction"
|
||||
value={detailInfoForm.rafter_direction ?? ''}
|
||||
onChange={(e) => handleTextInput('rafter_direction', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<EtcCheckbox formName="open_field_plate_kind" label="노지판 형태" detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="open_field_plate_thickness">노지판 두께</label>
|
||||
<input
|
||||
type="text"
|
||||
id="open_field_plate_thickness"
|
||||
value={detailInfoForm.open_field_plate_thickness ?? ''}
|
||||
onChange={(e) => handleTextInput('open_field_plate_thickness', e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="leak_trace">누수 흔적</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
id="leak_trace"
|
||||
checked={detailInfoForm.leak_trace ?? false}
|
||||
onChange={(e) => handleBooleanInput('leak_trace', e.target.checked)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<EtcCheckbox formName="waterproof_material" label="방수재료" detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<EtcCheckbox formName="insulation_presence" label="보증금 존재" detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<EtcCheckbox formName="structure_order" label="구조체계" detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<EtcCheckbox formName="installation_availability" label="설치가능" detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="memo">메모</label>
|
||||
<textarea
|
||||
id="memo"
|
||||
value={detailInfoForm.memo ?? ''}
|
||||
onChange={(e) => handleTextInput('memo', e.target.value)}
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,168 +0,0 @@
|
||||
// 'use client'
|
||||
|
||||
// import { useState, useEffect } from 'react'
|
||||
// import BasicWriteForm from './BasicWriteForm'
|
||||
// import DetailWriteForm from './DetailWriteForm'
|
||||
// import { SurveySalesBasicInfo, SurveySalesDetailInfo } from '@/api/surveySales'
|
||||
// import { useRouter, useSearchParams } from 'next/navigation'
|
||||
// import { useServey } from '@/hooks/useSurvey'
|
||||
// import { SurveyBasicRequest, SurveyDetailRequest } from '@/types/Survey'
|
||||
|
||||
// type TabType = 'basic' | 'detail'
|
||||
|
||||
// const defaultDetailInfoForm: SurveyDetailRequest = {
|
||||
// basic_info_id: 0,
|
||||
// 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: null,
|
||||
// house_structure_etc: null,
|
||||
// rafter_material: null,
|
||||
// rafter_material_etc: null,
|
||||
// rafter_size: null,
|
||||
// rafter_size_etc: null,
|
||||
// rafter_pitch: null,
|
||||
// rafter_pitch_etc: null,
|
||||
// rafter_direction: null,
|
||||
// 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,
|
||||
// structure_order: null,
|
||||
// structure_order_etc: null,
|
||||
// insulation_presence: null,
|
||||
// insulation_presence_etc: null,
|
||||
// installation_availability: null,
|
||||
// installation_availability_etc: null,
|
||||
// memo: null,
|
||||
// }
|
||||
|
||||
// const defaultBasicInfoForm: SurveyBasicRequest = {
|
||||
// representative: '',
|
||||
// store: null,
|
||||
// construction_point: null,
|
||||
// investigation_date: null,
|
||||
// building_name: null,
|
||||
// customer_name: null,
|
||||
// post_code: null,
|
||||
// address: null,
|
||||
// address_detail: null,
|
||||
// submission_status: false,
|
||||
// submission_date: null,
|
||||
// }
|
||||
|
||||
// export default function MainSurveyForm() {
|
||||
// const searchParams = useSearchParams()
|
||||
|
||||
// const id = searchParams.get('id')
|
||||
|
||||
// const [activeTab, setActiveTab] = useState<TabType>('basic')
|
||||
|
||||
// const handleTabClick = (tab: TabType) => {
|
||||
// setActiveTab(tab)
|
||||
// }
|
||||
|
||||
// const router = useRouter()
|
||||
// const { createSurvey, isCreatingSurvey, createSurveyDetail, surveyDetail, updateSurvey } = useServey(Number(id))
|
||||
|
||||
// const [detailInfoForm, setDetailInfoForm] = useState<SurveyDetailRequest>(defaultDetailInfoForm)
|
||||
// const [basicInfoData, setBasicInfoData] = useState<SurveyBasicRequest>(defaultBasicInfoForm)
|
||||
|
||||
// useEffect(() => {
|
||||
// if (surveyDetail) {
|
||||
// setBasicInfoData({
|
||||
// ...defaultBasicInfoForm,
|
||||
// ...(({ id, ...rest }) => rest)(surveyDetail),
|
||||
// })
|
||||
// setDetailInfoForm({
|
||||
// ...defaultDetailInfoForm,
|
||||
// ...(surveyDetail.detail_info ? (({ id, basic_info_id, updated_at, ...rest }) => rest)(surveyDetail.detail_info as any) : {}),
|
||||
// })
|
||||
// }
|
||||
// }, [surveyDetail])
|
||||
|
||||
// const handleSave = async (isSubmit: boolean = false) => {
|
||||
// if (id) {
|
||||
// updateSurvey({
|
||||
// ...basicInfoData,
|
||||
// submission_status: isSubmit,
|
||||
// submission_date: isSubmit ? new Date().toISOString() : null,
|
||||
// })
|
||||
// router.push('/survey-sales')
|
||||
// return
|
||||
// }
|
||||
|
||||
// const surveyId = await createSurvey(basicInfoData)
|
||||
// if (surveyId && surveyId !== 0) {
|
||||
// createSurveyDetail({
|
||||
// surveyId,
|
||||
// surveyDetail: detailInfoForm,
|
||||
// })
|
||||
// router.push('/survey-sales')
|
||||
// return
|
||||
// }
|
||||
// throw new Error('‼️Survey creation failed')
|
||||
// }
|
||||
// if (isCreatingSurvey) {
|
||||
// return <div>Loading...</div>
|
||||
// }
|
||||
|
||||
// return (
|
||||
// <div>
|
||||
// {/* TAB BUTTONS */}
|
||||
// <div>
|
||||
// <button
|
||||
// onClick={() => handleTabClick('basic')}
|
||||
// className={`flex-1 px-4 py-2 text-center focus:outline-none focus:ring-2 focus:ring-blue-500
|
||||
// ${activeTab === 'basic' ? 'border-b-2 border-blue-500 font-semibold text-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
|
||||
// aria-selected={activeTab === 'basic'}
|
||||
// role="tab"
|
||||
// >
|
||||
// Basic Info
|
||||
// </button>
|
||||
// <button
|
||||
// onClick={() => handleTabClick('detail')}
|
||||
// className={`flex-1 px-4 py-2 text-center focus:outline-none focus:ring-2 focus:ring-blue-500
|
||||
// ${activeTab === 'detail' ? 'border-b-2 border-blue-500 font-semibold text-blue-600' : 'text-gray-500 hover:text-gray-700'}`}
|
||||
// aria-selected={activeTab === 'detail'}
|
||||
// role="tab"
|
||||
// >
|
||||
// Detail Info
|
||||
// </button>
|
||||
// </div>
|
||||
|
||||
// {/* Tab Content */}
|
||||
// <div className="mt-6">
|
||||
// {activeTab === 'basic' && (
|
||||
// <div className="rounded-lg border p-4">
|
||||
// <h2 className="text-lg font-semibold">Basic Information</h2>
|
||||
// <BasicWriteForm basicInfoData={basicInfoData} setBasicInfoData={setBasicInfoData} />
|
||||
// </div>
|
||||
// )}
|
||||
// {activeTab === 'detail' && (
|
||||
// <div className="rounded-lg border p-4">
|
||||
// <h2 className="text-lg font-semibold">Detail Information</h2>
|
||||
// <DetailWriteForm detailInfoForm={detailInfoForm} setDetailInfoForm={setDetailInfoForm} />
|
||||
// </div>
|
||||
// )}
|
||||
// </div>
|
||||
// <div className="flex justify-start gap-4">
|
||||
// <button onClick={() => handleSave(false)}>save</button>
|
||||
// <button onClick={() => handleSave(true)}>submit</button>
|
||||
// <button onClick={() => router.push('/survey-sales')}>cancel</button>
|
||||
// </div>
|
||||
// </div>
|
||||
// )
|
||||
// }
|
||||
27
src/store/surveyFilterStore.ts
Normal file
27
src/store/surveyFilterStore.ts
Normal file
@ -0,0 +1,27 @@
|
||||
import { create } from 'zustand'
|
||||
|
||||
type SurveyFilterState = {
|
||||
keyword: string;
|
||||
searchOption: string;
|
||||
isMySurvey: boolean;
|
||||
sort: 'recent' | 'updated';
|
||||
setKeyword: (keyword: string) => void;
|
||||
setSearchOption: (searchOption: string) => void;
|
||||
setIsMySurvey: (isMySurvey: boolean) => void;
|
||||
setSort: (sort: 'recent' | 'updated') => void;
|
||||
reset: () => void;
|
||||
}
|
||||
|
||||
export const useSurveyFilterStore = create<SurveyFilterState>((set) => ({
|
||||
keyword: '',
|
||||
searchOption: '',
|
||||
isMySurvey: false,
|
||||
sort: 'recent',
|
||||
setKeyword: (keyword: string) => set({ keyword }),
|
||||
setSearchOption: (searchOption: string) => set({ searchOption }),
|
||||
setIsMySurvey: (isMySurvey: boolean) => set({ isMySurvey }),
|
||||
setSort: (sort: 'recent' | 'updated') => set({ sort }),
|
||||
reset: () => set({ keyword: '', searchOption: '', isMySurvey: false, sort: 'recent' }),
|
||||
}))
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user