feat: implement Survey Sale CRUD function
- Survey-sale Create with base information and electronic, roof information - Survey-sale Update - Survey-sale Read by filtering
This commit is contained in:
parent
08d99fb4e7
commit
818ecb724b
@ -3,7 +3,7 @@ generator client {
|
||||
}
|
||||
|
||||
datasource db {
|
||||
provider = "sqlserver"
|
||||
provider = "mysql"
|
||||
url = env("DATABASE_URL")
|
||||
}
|
||||
|
||||
|
||||
@ -1,66 +0,0 @@
|
||||
import { axiosInstance } from '@/libs/axios'
|
||||
|
||||
export interface Survey {
|
||||
id: number
|
||||
title: string
|
||||
content: string
|
||||
created_at: string
|
||||
updated_at: string
|
||||
checked: string[]
|
||||
otherText: string
|
||||
}
|
||||
|
||||
export const surveyApi = {
|
||||
create: async (data: Survey): Promise<Survey> => {
|
||||
try {
|
||||
const response = await axiosInstance.post<Survey>('/api/survey', data)
|
||||
return response.data
|
||||
} catch (error) {
|
||||
console.error('Error creating survey:', error)
|
||||
throw error
|
||||
}
|
||||
},
|
||||
|
||||
getList: async (): Promise<Survey[]> => {
|
||||
try {
|
||||
const response = await axiosInstance.get<Survey[]>('/api/survey')
|
||||
return response.data
|
||||
} catch (error) {
|
||||
console.error('Error fetching survey list:', error)
|
||||
return []
|
||||
}
|
||||
},
|
||||
|
||||
getDetail: async (id?: number): Promise<Survey> => {
|
||||
try {
|
||||
if (id) {
|
||||
const response = await axiosInstance.get<Survey>(`/api/survey/${id}`)
|
||||
return response.data
|
||||
} else {
|
||||
return {} as Survey
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching survey detail:', error)
|
||||
throw error
|
||||
}
|
||||
},
|
||||
|
||||
update: async (id: number, data: Survey): Promise<Survey> => {
|
||||
try {
|
||||
const response = await axiosInstance.put<Survey>(`/api/survey/${id}`, data)
|
||||
return response.data
|
||||
} catch (error) {
|
||||
console.error('Error updating survey:', error)
|
||||
throw error
|
||||
}
|
||||
},
|
||||
|
||||
delete: async (id: number): Promise<void> => {
|
||||
try {
|
||||
await axiosInstance.delete(`/api/survey/${id}`)
|
||||
} catch (error) {
|
||||
console.error('Error deleting survey:', error)
|
||||
throw error
|
||||
}
|
||||
},
|
||||
}
|
||||
@ -2,66 +2,122 @@ import { axiosInstance } from '@/libs/axios'
|
||||
|
||||
export interface SurveySalesBasicInfo {
|
||||
id?: number
|
||||
representative: String
|
||||
store: String | null
|
||||
construction_point: String | null
|
||||
investigation_date: String | null
|
||||
building_name: String | null
|
||||
customer_name: String | null
|
||||
post_code: String | null
|
||||
address: String | null
|
||||
address_detail: String | null
|
||||
submission_status: Boolean
|
||||
submission_date?: String | null
|
||||
representative: string
|
||||
store: string | null
|
||||
construction_point: string | null
|
||||
investigation_date: string | null
|
||||
building_name: string | null
|
||||
customer_name: string | null
|
||||
post_code: string | null
|
||||
address: string | null
|
||||
address_detail: string | null
|
||||
submission_status: boolean
|
||||
submission_date?: string | null
|
||||
detail_info?: SurveySalesDetailInfo | null
|
||||
}
|
||||
|
||||
export interface SurveySalesDetailInfo {
|
||||
id?: number
|
||||
contract_capacity: String | null
|
||||
retail_company: String | null
|
||||
supplementary_facilities: Number | null
|
||||
supplementary_facilities_etc: String | null
|
||||
installation_system: Number | null
|
||||
installation_system_etc: String | null
|
||||
construction_year: Number | null
|
||||
construction_year_etc: String | null
|
||||
roof_material: Number | null
|
||||
roof_material_etc: String | null
|
||||
roof_shape: Number | null
|
||||
roof_shape_etc: String | null
|
||||
roof_slope: String | null
|
||||
house_structure: Number | null
|
||||
house_structure_etc: String | null
|
||||
rafter_material: Number | null
|
||||
rafter_material_etc: String | null
|
||||
rafter_size: Number | null
|
||||
rafter_size_etc: String | null
|
||||
rafter_pitch: Number | null
|
||||
rafter_pitch_etc: String | null
|
||||
rafter_direction: Number | null
|
||||
open_field_plate_kind: Number | null
|
||||
open_field_plate_kind_etc: String | null
|
||||
open_field_plate_thickness: String | null
|
||||
leak_trace: Boolean | null
|
||||
waterproof_material: Number | null
|
||||
waterproof_material_etc: String | null
|
||||
insulation_presence: Number | null
|
||||
insulation_presence_etc: String | null
|
||||
structure_order: Number | null
|
||||
structure_order_etc: String | null
|
||||
installation_availability: Number | null
|
||||
installation_availability_etc: String | null
|
||||
memo: String | null
|
||||
contract_capacity: string | null
|
||||
retail_company: string | null
|
||||
supplementary_facilities: number | null
|
||||
supplementary_facilities_etc: string | null
|
||||
installation_system: number | null
|
||||
installation_system_etc: string | null
|
||||
construction_year: number | null
|
||||
construction_year_etc: string | null
|
||||
roof_material: number | null
|
||||
roof_material_etc: string | null
|
||||
roof_shape: number | null
|
||||
roof_shape_etc: string | null
|
||||
roof_slope: string | null
|
||||
house_structure: number | null
|
||||
house_structure_etc: string | null
|
||||
rafter_material: number | null
|
||||
rafter_material_etc: string | null
|
||||
rafter_size: number | null
|
||||
rafter_size_etc: string | null
|
||||
rafter_pitch: number | null
|
||||
rafter_pitch_etc: string | null
|
||||
rafter_direction: number | null
|
||||
open_field_plate_kind: number | null
|
||||
open_field_plate_kind_etc: string | null
|
||||
open_field_plate_thickness: string | null
|
||||
leak_trace: boolean | null
|
||||
waterproof_material: number | null
|
||||
waterproof_material_etc: string | null
|
||||
insulation_presence: number | null
|
||||
insulation_presence_etc: string | null
|
||||
structure_order: number | null
|
||||
structure_order_etc: string | null
|
||||
installation_availability: number | null
|
||||
installation_availability_etc: string | null
|
||||
memo: string | null
|
||||
}
|
||||
|
||||
export const surveySalesApi = {
|
||||
create: async (data: SurveySalesBasicInfo): Promise<SurveySalesBasicInfo> => {
|
||||
const response = await axiosInstance.post<SurveySalesBasicInfo>('/api/survey-sales', data)
|
||||
return response.data
|
||||
create: async (data: SurveySalesBasicInfo): Promise<number> => {
|
||||
try {
|
||||
const response = await axiosInstance.post<SurveySalesBasicInfo>('/api/survey-sales', data)
|
||||
return response.data.id ?? 0
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
return 0
|
||||
}
|
||||
},
|
||||
getList: async (): Promise<SurveySalesBasicInfo[]> => {
|
||||
const response = await axiosInstance.get<SurveySalesBasicInfo[]>('/api/survey-sales')
|
||||
return response.data
|
||||
getList: async (): Promise<SurveySalesBasicInfo[] | []> => {
|
||||
try {
|
||||
const response = await axiosInstance.get<SurveySalesBasicInfo[]>('/api/survey-sales')
|
||||
return response.data
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
return []
|
||||
}
|
||||
},
|
||||
getDetail: async (id: number): Promise<SurveySalesBasicInfo | null> => {
|
||||
try {
|
||||
const response = await axiosInstance.get<SurveySalesBasicInfo>(`/api/survey-sales/${id}`)
|
||||
return response.data
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
return null
|
||||
}
|
||||
},
|
||||
update: async (id: number, data: SurveySalesBasicInfo): Promise<SurveySalesBasicInfo | null> => {
|
||||
try {
|
||||
const response = await axiosInstance.put<SurveySalesBasicInfo>(`/api/survey-sales/${id}`, data)
|
||||
return response.data
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
return null
|
||||
}
|
||||
},
|
||||
delete: async (id: number, isDetail: boolean = false): Promise<boolean> => {
|
||||
try {
|
||||
await axiosInstance.delete(`/api/survey-sales/${id}`, {
|
||||
params: {
|
||||
detail_id: isDetail ? id : undefined,
|
||||
},
|
||||
})
|
||||
return true
|
||||
} catch (error) {
|
||||
throw error
|
||||
}
|
||||
},
|
||||
createDetail: async (surveyId: number, data: SurveySalesDetailInfo): Promise<boolean> => {
|
||||
try {
|
||||
await axiosInstance.post<SurveySalesDetailInfo>(`/api/survey-sales/${surveyId}`, data)
|
||||
return true
|
||||
} catch (error) {
|
||||
throw error
|
||||
}
|
||||
},
|
||||
confirm: async (id: number): Promise<boolean> => {
|
||||
try {
|
||||
await axiosInstance.patch<SurveySalesBasicInfo>(`/api/survey-sales/${id}`)
|
||||
return true
|
||||
} catch (error) {
|
||||
throw error
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
72
src/app/api/survey-sales/[id]/route.ts
Normal file
72
src/app/api/survey-sales/[id]/route.ts
Normal file
@ -0,0 +1,72 @@
|
||||
import { NextResponse } from 'next/server'
|
||||
|
||||
export async function POST(request: Request, context: { params: { id: string } }) {
|
||||
const body = await request.json()
|
||||
const { id } = await context.params
|
||||
|
||||
// @ts-ignore
|
||||
const survey = await prisma.SD_SERVEY_SALES_BASIC_INFO.update({
|
||||
where: { id: Number(id) },
|
||||
data: {
|
||||
detail_info: {
|
||||
create: body,
|
||||
},
|
||||
},
|
||||
})
|
||||
return NextResponse.json({ message: 'Survey detail created successfully' })
|
||||
}
|
||||
export async function GET(request: Request, context: { params: { id: string } }) {
|
||||
const { id } = await context.params
|
||||
// @ts-ignore
|
||||
const survey = await prisma.SD_SERVEY_SALES_BASIC_INFO.findUnique({
|
||||
where: { id: Number(id) },
|
||||
include: {
|
||||
detail_info: true,
|
||||
},
|
||||
})
|
||||
return NextResponse.json(survey)
|
||||
}
|
||||
|
||||
export async function PUT(request: Request, context: { params: { id: string } }) {
|
||||
const { id } = await context.params
|
||||
const body = await request.json()
|
||||
// @ts-ignore
|
||||
const survey = await prisma.SD_SERVEY_SALES_BASIC_INFO.update({
|
||||
where: { id: Number(id) },
|
||||
data: {
|
||||
...body,
|
||||
detail_info: {
|
||||
update: body.detail_info,
|
||||
},
|
||||
},
|
||||
})
|
||||
return NextResponse.json(survey)
|
||||
}
|
||||
|
||||
export async function DELETE(request: Request, context: { params: { id: string; detail_id: string } }) {
|
||||
const { id, detail_id } = await context.params
|
||||
if (detail_id) {
|
||||
// @ts-ignore
|
||||
const survey = await prisma.SD_SERVEY_SALES_DETAIL_INFO.delete({
|
||||
where: { id: Number(detail_id) },
|
||||
})
|
||||
} else {
|
||||
// @ts-ignore
|
||||
const survey = await prisma.SD_SERVEY_SALES_BASIC_INFO.delete({
|
||||
where: { id: Number(id) },
|
||||
})
|
||||
}
|
||||
return NextResponse.json({ message: 'Survey deleted successfully' })
|
||||
}
|
||||
|
||||
export async function PATCH(request: Request, context: { params: { id: string } }) {
|
||||
const { id } = await context.params
|
||||
// @ts-ignore
|
||||
const survey = await prisma.SD_SERVEY_SALES_BASIC_INFO.update({
|
||||
where: { id: Number(id) },
|
||||
data: {
|
||||
submission_status: true,
|
||||
},
|
||||
})
|
||||
return NextResponse.json({ message: 'Survey confirmed successfully' })
|
||||
}
|
||||
@ -3,11 +3,19 @@ import { prisma } from '@/libs/prisma'
|
||||
|
||||
export async function POST(request: Request) {
|
||||
const body = await request.json()
|
||||
|
||||
// @ts-ignore
|
||||
const res = await prisma.SD_SERVEY_SALES_BASIC_INFO.create({
|
||||
data: body,
|
||||
})
|
||||
|
||||
return NextResponse.json({ message: 'Survey sales created successfully' })
|
||||
return NextResponse.json(res)
|
||||
}
|
||||
|
||||
export async function GET() {
|
||||
try {
|
||||
// @ts-ignore
|
||||
const res = await prisma.SD_SERVEY_SALES_BASIC_INFO.findMany()
|
||||
return NextResponse.json(res)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,28 +0,0 @@
|
||||
import { NextResponse } from 'next/server'
|
||||
|
||||
export async function GET(request: Request, { params }: { params: { id: string } }) {
|
||||
const { id } = params
|
||||
// @ts-ignore
|
||||
const survey = await prisma.SD_SERVEY_SALES.findUnique({
|
||||
where: { id: parseInt(id) },
|
||||
})
|
||||
return NextResponse.json(survey)
|
||||
}
|
||||
|
||||
export async function PUT(request: Request, { params }: { params: { id: string } }) {
|
||||
const { id } = params
|
||||
const body = await request.json()
|
||||
// @ts-ignore
|
||||
const survey = await prisma.SD_SERVEY_SALES.update({
|
||||
where: { id: parseInt(id) },
|
||||
data: body,
|
||||
})
|
||||
return NextResponse.json(survey)
|
||||
}
|
||||
|
||||
export async function DELETE(request: Request, { params }: { params: { id: string } }) {
|
||||
const { id } = params
|
||||
// @ts-ignore
|
||||
await prisma.SD_SERVEY_SALES.delete({ where: { id: parseInt(id) } })
|
||||
return NextResponse.json({ message: 'Survey deleted successfully' })
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
import { NextResponse } from 'next/server'
|
||||
|
||||
export async function GET() {
|
||||
// @ts-ignore
|
||||
const surveys = await prisma.SD_SERVEY_SALES.findMany()
|
||||
return NextResponse.json(surveys)
|
||||
}
|
||||
|
||||
export async function POST(request: Request) {
|
||||
const body = await request.json()
|
||||
// @ts-ignore
|
||||
const survey = await prisma.SD_SERVEY_SALES.create({
|
||||
data: body,
|
||||
})
|
||||
return NextResponse.json(survey)
|
||||
}
|
||||
6
src/app/survey-sales/[id]/page.tsx
Normal file
6
src/app/survey-sales/[id]/page.tsx
Normal file
@ -0,0 +1,6 @@
|
||||
import SurveyDetail from '@/components/survey-sales/SurveyDetail'
|
||||
|
||||
export default function SurveySalesDetailPage() {
|
||||
return <SurveyDetail />
|
||||
}
|
||||
|
||||
@ -1,10 +1,12 @@
|
||||
import SurveySales from '@/components/SurveySales'
|
||||
import SurveySaleList from '@/components/survey-sales/SurveySaleList'
|
||||
|
||||
export default function page() {
|
||||
return (
|
||||
<>
|
||||
<h1 className="text-2xl font-bold my-4 flex justify-center">조사 매물 정보</h1>
|
||||
<SurveySales />
|
||||
{/* <SurveySales /> */}
|
||||
<SurveySaleList />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
9
src/app/survey-sales/write/page.tsx
Normal file
9
src/app/survey-sales/write/page.tsx
Normal file
@ -0,0 +1,9 @@
|
||||
import MainSurveyForm from '@/components/survey-sales/write-survey-sales/MainSurveyForm'
|
||||
|
||||
export default function SurveyWritePage() {
|
||||
return (
|
||||
<div>
|
||||
<MainSurveyForm />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
import SurveySaleDetail from '@/components/survey/SurveySaleDetail'
|
||||
|
||||
export default function SurveyDetailPage() {
|
||||
return (
|
||||
<div>
|
||||
<SurveySaleDetail />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
import SurveySaleList from '@/components/survey/SurveySaleList'
|
||||
|
||||
export default function SurveyPage() {
|
||||
return (
|
||||
<div>
|
||||
<SurveySaleList />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
import SurveySaleWriteForm from '@/components/survey/SurveySaleWriteForm'
|
||||
|
||||
export default function SurveyWritePage() {
|
||||
return (
|
||||
<div>
|
||||
<SurveySaleWriteForm />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
68
src/components/survey-sales/EtcCheckbox.tsx
Normal file
68
src/components/survey-sales/EtcCheckbox.tsx
Normal file
@ -0,0 +1,68 @@
|
||||
'use client'
|
||||
import { useState } from "react"
|
||||
import { SurveySalesDetailInfo } from "@/api/surveySales"
|
||||
|
||||
interface EtcCheckboxProps {
|
||||
formName: keyof SurveySalesDetailInfo
|
||||
label: string
|
||||
detailInfoForm: SurveySalesDetailInfo
|
||||
setDetailInfoForm: (form: SurveySalesDetailInfo) => void
|
||||
}
|
||||
|
||||
export default function EtcCheckbox({ formName, label, detailInfoForm, setDetailInfoForm }: EtcCheckboxProps) {
|
||||
const [showEtcInput, setShowEtcInput] = useState(false)
|
||||
const etcFieldName = `${formName}_etc` as keyof SurveySalesDetailInfo
|
||||
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
61
src/components/survey-sales/SurveyDetail.tsx
Normal file
61
src/components/survey-sales/SurveyDetail.tsx
Normal file
@ -0,0 +1,61 @@
|
||||
'use client'
|
||||
|
||||
import { useServey } from '@/hooks/useSurvey'
|
||||
import { SurveySalesBasicInfo } from '@/api/surveySales'
|
||||
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>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -5,7 +5,7 @@ export default function SurveyFilter({ handleSearch, handleMyPosts }: { handleSe
|
||||
const router = useRouter()
|
||||
return (
|
||||
<div>
|
||||
<button onClick={() => router.push('/survey/write')}>write survey {'>'}</button>
|
||||
<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>
|
||||
@ -13,7 +13,9 @@ export default function SurveyFilter({ handleSearch, handleMyPosts }: { handleSe
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button onClick={handleMyPosts}>my posts</button>
|
||||
<button onClick={handleMyPosts} className="cursor-pointer">
|
||||
my posts
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
90
src/components/survey-sales/SurveySaleList.tsx
Normal file
90
src/components/survey-sales/SurveySaleList.tsx
Normal file
@ -0,0 +1,90 @@
|
||||
'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>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,86 @@
|
||||
'use client'
|
||||
|
||||
import { SurveySalesBasicInfo } from '@/api/surveySales'
|
||||
|
||||
export default function BasicWriteForm({
|
||||
basicInfoData,
|
||||
setBasicInfoData,
|
||||
}: {
|
||||
basicInfoData: SurveySalesBasicInfo
|
||||
setBasicInfoData: (basicInfoData: SurveySalesBasicInfo) => void
|
||||
}) {
|
||||
const handleChange = (key: keyof SurveySalesBasicInfo, 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>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,157 @@
|
||||
'use client'
|
||||
import React from 'react'
|
||||
import EtcCheckbox from '../EtcCheckbox'
|
||||
import { SurveySalesDetailInfo } from '@/api/surveySales'
|
||||
|
||||
interface DetailWriteFormProps {
|
||||
detailInfoForm: SurveySalesDetailInfo
|
||||
setDetailInfoForm: (form: SurveySalesDetailInfo) => void
|
||||
}
|
||||
|
||||
export default function DetailWriteForm({ detailInfoForm, setDetailInfoForm }: DetailWriteFormProps) {
|
||||
const handleNumberInput = (field: keyof SurveySalesDetailInfo, value: string) => {
|
||||
const numberValue = value === '' ? null : Number(value)
|
||||
setDetailInfoForm({ ...detailInfoForm, [field]: numberValue })
|
||||
}
|
||||
|
||||
const handleTextInput = (field: keyof SurveySalesDetailInfo, value: string) => {
|
||||
setDetailInfoForm({ ...detailInfoForm, [field]: value || null })
|
||||
}
|
||||
|
||||
const handleBooleanInput = (field: keyof SurveySalesDetailInfo, 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>
|
||||
)
|
||||
}
|
||||
@ -0,0 +1,165 @@
|
||||
'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'
|
||||
|
||||
type TabType = 'basic' | 'detail'
|
||||
|
||||
const defaultDetailInfoForm: SurveySalesDetailInfo = {
|
||||
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: SurveySalesBasicInfo = {
|
||||
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,
|
||||
}
|
||||
|
||||
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<SurveySalesDetailInfo>(defaultDetailInfoForm)
|
||||
const [basicInfoData, setBasicInfoData] = useState<SurveySalesBasicInfo>(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,
|
||||
detail_info: detailInfoForm,
|
||||
submission_status: isSubmit,
|
||||
})
|
||||
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>
|
||||
)
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
export default function SurveySaleDetail() {
|
||||
return <div>SurveySaleDetail</div>
|
||||
}
|
||||
|
||||
@ -1,54 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { useServey } from '@/hooks/useSurvey'
|
||||
import LoadMoreButton from '@/components/LoadMoreButton'
|
||||
import { useState } from 'react'
|
||||
import SurveyFilter from './SurveyFilter'
|
||||
|
||||
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 surveyData = () => {
|
||||
if (search.trim().length > 0) {
|
||||
return surveyList.filter((survey) => survey.title.includes(search))
|
||||
}
|
||||
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)
|
||||
}
|
||||
|
||||
if (isLoadingSurveyList) {
|
||||
return <div>Loading...</div>
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<SurveyFilter handleSearch={handleSearch} handleMyPosts={() => setIsMyPostsOnly(!isMyPostsOnly)} />
|
||||
{surveyList.slice(0, visibleItems).map((survey) => (
|
||||
<div key={survey.id}>
|
||||
<h2>{survey.title}</h2>
|
||||
<p>{survey.content}</p>
|
||||
<p>{survey.created_at}</p>
|
||||
<p>{survey.updated_at}</p>
|
||||
</div>
|
||||
))}
|
||||
<LoadMoreButton hasMore={hasMore} onLoadMore={handleLoadMore} onScrollToTop={handleScrollToTop} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,97 +0,0 @@
|
||||
'use client'
|
||||
|
||||
import { Survey } from '@/api/survey'
|
||||
import { useState } from 'react'
|
||||
import { useServey } from '@/hooks/useSurvey'
|
||||
import { useRouter } from 'next/navigation'
|
||||
|
||||
export default function SurveySaleWriteForm() {
|
||||
const router = useRouter()
|
||||
const { createSurvey, isCreatingSurvey } = useServey()
|
||||
|
||||
const [formData, setFormData] = useState<Survey>({
|
||||
id: 0,
|
||||
title: '',
|
||||
content: '',
|
||||
created_at: '',
|
||||
updated_at: '',
|
||||
checked: [],
|
||||
otherText: '',
|
||||
})
|
||||
|
||||
const checkboxOptions = ['A', 'B', 'C', 'D', '기타']
|
||||
|
||||
const handleSubmit = () => {
|
||||
console.log('form:: ', formData)
|
||||
// createSurvey(formData)
|
||||
// router.push('/survey')
|
||||
}
|
||||
|
||||
const handleCheckboxChange = (option: string) => {
|
||||
if (formData.checked.includes(option)) {
|
||||
setFormData({
|
||||
...formData,
|
||||
checked: formData.checked.filter((item) => item !== option),
|
||||
...(option === '기타' ? { otherText: '' } : {}),
|
||||
})
|
||||
} else {
|
||||
setFormData({
|
||||
...formData,
|
||||
checked: [...formData.checked, option],
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const handleOtherTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setFormData({
|
||||
...formData,
|
||||
otherText: e.target.value,
|
||||
checked: formData.checked.includes('기타') ? formData.checked : [...formData.checked, '기타'],
|
||||
})
|
||||
}
|
||||
|
||||
if (isCreatingSurvey) {
|
||||
return <div>Loading...</div>
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<label htmlFor="title">title</label>
|
||||
<input type="text" id="title" value={formData.title} onChange={(e) => setFormData({ ...formData, title: e.target.value })} />
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="content">content</label>
|
||||
<textarea id="content" value={formData.content} onChange={(e) => setFormData({ ...formData, content: e.target.value })} />
|
||||
</div>
|
||||
<div>
|
||||
{checkboxOptions.map((option) => (
|
||||
<div key={option}>
|
||||
<input
|
||||
type="checkbox"
|
||||
id={option}
|
||||
checked={formData.checked.includes(option)}
|
||||
onChange={() => handleCheckboxChange(option)}
|
||||
tabIndex={0}
|
||||
aria-label={option}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') handleCheckboxChange(option)
|
||||
}}
|
||||
/>
|
||||
<label htmlFor={option} className="cursor-pointer">
|
||||
{option}
|
||||
</label>
|
||||
{option === '기타' && formData.checked.includes('기타') && (
|
||||
<input type="text" value={formData.otherText || ''} onChange={handleOtherTextChange} placeholder="기타 입력" aria-label="기타 입력" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div>
|
||||
<button onClick={handleSubmit} className="cursor-pointer">
|
||||
save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -1,44 +1,88 @@
|
||||
import { Survey, surveyApi } from '@/api/survey'
|
||||
import { SurveySalesBasicInfo, surveySalesApi, SurveySalesDetailInfo } from '@/api/surveySales'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
|
||||
export function useServey(id?: number) {
|
||||
export function useServey(id?: number): {
|
||||
surveyList: SurveySalesBasicInfo[] | []
|
||||
surveyDetail: SurveySalesBasicInfo | null
|
||||
isLoadingSurveyList: boolean
|
||||
isLoadingSurveyDetail: boolean
|
||||
isCreatingSurvey: boolean
|
||||
isUpdatingSurvey: boolean
|
||||
isDeletingSurvey: boolean
|
||||
createSurvey: (survey: SurveySalesBasicInfo) => Promise<number>
|
||||
createSurveyDetail: (params: { surveyId: number; surveyDetail: SurveySalesDetailInfo }) => void
|
||||
updateSurvey: (survey: SurveySalesBasicInfo) => void
|
||||
deleteSurvey: (params: { id: number; isDetail: boolean }) => void
|
||||
confirmSurvey: (id: number) => void
|
||||
} {
|
||||
const queryClient = useQueryClient()
|
||||
|
||||
const { data: surveyList, isLoading: isLoadingSurveyList } = useQuery({
|
||||
queryKey: ['survey', 'list'],
|
||||
queryFn: () => surveyApi.getList(),
|
||||
queryFn: () => surveySalesApi.getList(),
|
||||
})
|
||||
|
||||
const { data: surveyDetail, isLoading: isLoadingSurveyDetail } = useQuery({
|
||||
queryKey: ['survey', id],
|
||||
queryFn: () => surveyApi.getDetail(id),
|
||||
enabled: !!id,
|
||||
queryFn: () => {
|
||||
if (id === undefined) throw new Error('id is required')
|
||||
if (id === null) return null
|
||||
return surveySalesApi.getDetail(id)
|
||||
},
|
||||
enabled: id !== undefined,
|
||||
})
|
||||
|
||||
const { mutate: createSurvey, isPending: isCreatingSurvey } = useMutation({
|
||||
mutationFn: (survey: Survey) => surveyApi.create(survey),
|
||||
onSuccess: () => {
|
||||
const { mutateAsync: createSurvey, isPending: isCreatingSurvey } = useMutation({
|
||||
mutationFn: (survey: SurveySalesBasicInfo) => surveySalesApi.create(survey),
|
||||
onSuccess: (data) => {
|
||||
queryClient.invalidateQueries({ queryKey: ['survey', 'list'] })
|
||||
return data
|
||||
},
|
||||
})
|
||||
|
||||
const { mutate: updateSurvey, isPending: isUpdatingSurvey } = useMutation({
|
||||
mutationFn: (survey: Survey) => surveyApi.update(survey.id, survey),
|
||||
mutationFn: (survey: SurveySalesBasicInfo) => {
|
||||
if (id === undefined) throw new Error('id is required')
|
||||
return surveySalesApi.update(id, survey)
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['survey', id] })
|
||||
queryClient.invalidateQueries({ queryKey: ['survey', 'list'] })
|
||||
},
|
||||
})
|
||||
|
||||
const { mutateAsync: deleteSurvey, isPending: isDeletingSurvey } = useMutation({
|
||||
mutationFn: ({ id, isDetail }: { id: number; isDetail: boolean }) => {
|
||||
if (id === undefined) throw new Error('id is required')
|
||||
return surveySalesApi.delete(id, isDetail)
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['survey', 'list'] })
|
||||
},
|
||||
})
|
||||
|
||||
const { mutate: deleteSurvey, isPending: isDeletingSurvey } = useMutation({
|
||||
mutationFn: (id: number) => surveyApi.delete(id),
|
||||
const { mutate: createSurveyDetail } = useMutation({
|
||||
mutationFn: ({ surveyId, surveyDetail }: { surveyId: number; surveyDetail: SurveySalesDetailInfo }) =>
|
||||
surveySalesApi.createDetail(surveyId, surveyDetail),
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['survey', 'list'] })
|
||||
},
|
||||
})
|
||||
|
||||
const { mutate: confirmSurvey, isPending: isConfirmingSurvey } = useMutation({
|
||||
mutationFn: (id: number) => {
|
||||
if (id === undefined) throw new Error('id is required')
|
||||
return surveySalesApi.confirm(id)
|
||||
},
|
||||
onSuccess: () => {
|
||||
queryClient.invalidateQueries({ queryKey: ['survey', 'list'] })
|
||||
queryClient.invalidateQueries({ queryKey: ['survey', id] })
|
||||
},
|
||||
})
|
||||
|
||||
return {
|
||||
surveyList: surveyList ?? [],
|
||||
surveyDetail: surveyDetail ?? {},
|
||||
surveyList: surveyList || [],
|
||||
surveyDetail: surveyDetail || null,
|
||||
isLoadingSurveyList,
|
||||
isLoadingSurveyDetail,
|
||||
isCreatingSurvey,
|
||||
@ -47,5 +91,7 @@ export function useServey(id?: number) {
|
||||
createSurvey,
|
||||
updateSurvey,
|
||||
deleteSurvey,
|
||||
createSurveyDetail,
|
||||
confirmSurvey,
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user