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 {
|
datasource db {
|
||||||
provider = "sqlserver"
|
provider = "mysql"
|
||||||
url = env("DATABASE_URL")
|
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 {
|
export interface SurveySalesBasicInfo {
|
||||||
id?: number
|
id?: number
|
||||||
representative: String
|
representative: string
|
||||||
store: String | null
|
store: string | null
|
||||||
construction_point: String | null
|
construction_point: string | null
|
||||||
investigation_date: String | null
|
investigation_date: string | null
|
||||||
building_name: String | null
|
building_name: string | null
|
||||||
customer_name: String | null
|
customer_name: string | null
|
||||||
post_code: String | null
|
post_code: string | null
|
||||||
address: String | null
|
address: string | null
|
||||||
address_detail: String | null
|
address_detail: string | null
|
||||||
submission_status: Boolean
|
submission_status: boolean
|
||||||
submission_date?: String | null
|
submission_date?: string | null
|
||||||
detail_info?: SurveySalesDetailInfo | null
|
detail_info?: SurveySalesDetailInfo | null
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface SurveySalesDetailInfo {
|
export interface SurveySalesDetailInfo {
|
||||||
id?: number
|
id?: number
|
||||||
contract_capacity: String | null
|
contract_capacity: string | null
|
||||||
retail_company: String | null
|
retail_company: string | null
|
||||||
supplementary_facilities: Number | null
|
supplementary_facilities: number | null
|
||||||
supplementary_facilities_etc: String | null
|
supplementary_facilities_etc: string | null
|
||||||
installation_system: Number | null
|
installation_system: number | null
|
||||||
installation_system_etc: String | null
|
installation_system_etc: string | null
|
||||||
construction_year: Number | null
|
construction_year: number | null
|
||||||
construction_year_etc: String | null
|
construction_year_etc: string | null
|
||||||
roof_material: Number | null
|
roof_material: number | null
|
||||||
roof_material_etc: String | null
|
roof_material_etc: string | null
|
||||||
roof_shape: Number | null
|
roof_shape: number | null
|
||||||
roof_shape_etc: String | null
|
roof_shape_etc: string | null
|
||||||
roof_slope: String | null
|
roof_slope: string | null
|
||||||
house_structure: Number | null
|
house_structure: number | null
|
||||||
house_structure_etc: String | null
|
house_structure_etc: string | null
|
||||||
rafter_material: Number | null
|
rafter_material: number | null
|
||||||
rafter_material_etc: String | null
|
rafter_material_etc: string | null
|
||||||
rafter_size: Number | null
|
rafter_size: number | null
|
||||||
rafter_size_etc: String | null
|
rafter_size_etc: string | null
|
||||||
rafter_pitch: Number | null
|
rafter_pitch: number | null
|
||||||
rafter_pitch_etc: String | null
|
rafter_pitch_etc: string | null
|
||||||
rafter_direction: Number | null
|
rafter_direction: number | null
|
||||||
open_field_plate_kind: Number | null
|
open_field_plate_kind: number | null
|
||||||
open_field_plate_kind_etc: String | null
|
open_field_plate_kind_etc: string | null
|
||||||
open_field_plate_thickness: String | null
|
open_field_plate_thickness: string | null
|
||||||
leak_trace: Boolean | null
|
leak_trace: boolean | null
|
||||||
waterproof_material: Number | null
|
waterproof_material: number | null
|
||||||
waterproof_material_etc: String | null
|
waterproof_material_etc: string | null
|
||||||
insulation_presence: Number | null
|
insulation_presence: number | null
|
||||||
insulation_presence_etc: String | null
|
insulation_presence_etc: string | null
|
||||||
structure_order: Number | null
|
structure_order: number | null
|
||||||
structure_order_etc: String | null
|
structure_order_etc: string | null
|
||||||
installation_availability: Number | null
|
installation_availability: number | null
|
||||||
installation_availability_etc: String | null
|
installation_availability_etc: string | null
|
||||||
memo: String | null
|
memo: string | null
|
||||||
}
|
}
|
||||||
|
|
||||||
export const surveySalesApi = {
|
export const surveySalesApi = {
|
||||||
create: async (data: SurveySalesBasicInfo): Promise<SurveySalesBasicInfo> => {
|
create: async (data: SurveySalesBasicInfo): Promise<number> => {
|
||||||
const response = await axiosInstance.post<SurveySalesBasicInfo>('/api/survey-sales', data)
|
try {
|
||||||
return response.data
|
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[]> => {
|
getList: async (): Promise<SurveySalesBasicInfo[] | []> => {
|
||||||
const response = await axiosInstance.get<SurveySalesBasicInfo[]>('/api/survey-sales')
|
try {
|
||||||
return response.data
|
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) {
|
export async function POST(request: Request) {
|
||||||
const body = await request.json()
|
const body = await request.json()
|
||||||
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
const res = await prisma.SD_SERVEY_SALES_BASIC_INFO.create({
|
const res = await prisma.SD_SERVEY_SALES_BASIC_INFO.create({
|
||||||
data: body,
|
data: body,
|
||||||
})
|
})
|
||||||
|
return NextResponse.json(res)
|
||||||
return NextResponse.json({ message: 'Survey sales created successfully' })
|
}
|
||||||
|
|
||||||
|
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 SurveySales from '@/components/SurveySales'
|
||||||
|
import SurveySaleList from '@/components/survey-sales/SurveySaleList'
|
||||||
|
|
||||||
export default function page() {
|
export default function page() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<h1 className="text-2xl font-bold my-4 flex justify-center">조사 매물 정보</h1>
|
<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()
|
const router = useRouter()
|
||||||
return (
|
return (
|
||||||
<div>
|
<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">
|
<div className="flex items-center gap-2">
|
||||||
<input type="text" placeholder="Search" onChange={handleSearch} />
|
<input type="text" placeholder="Search" onChange={handleSearch} />
|
||||||
<button>
|
<button>
|
||||||
@ -13,7 +13,9 @@ export default function SurveyFilter({ handleSearch, handleMyPosts }: { handleSe
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<button onClick={handleMyPosts}>my posts</button>
|
<button onClick={handleMyPosts} className="cursor-pointer">
|
||||||
|
my posts
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</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'
|
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 queryClient = useQueryClient()
|
||||||
|
|
||||||
const { data: surveyList, isLoading: isLoadingSurveyList } = useQuery({
|
const { data: surveyList, isLoading: isLoadingSurveyList } = useQuery({
|
||||||
queryKey: ['survey', 'list'],
|
queryKey: ['survey', 'list'],
|
||||||
queryFn: () => surveyApi.getList(),
|
queryFn: () => surveySalesApi.getList(),
|
||||||
})
|
})
|
||||||
|
|
||||||
const { data: surveyDetail, isLoading: isLoadingSurveyDetail } = useQuery({
|
const { data: surveyDetail, isLoading: isLoadingSurveyDetail } = useQuery({
|
||||||
queryKey: ['survey', id],
|
queryKey: ['survey', id],
|
||||||
queryFn: () => surveyApi.getDetail(id),
|
queryFn: () => {
|
||||||
enabled: !!id,
|
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({
|
const { mutateAsync: createSurvey, isPending: isCreatingSurvey } = useMutation({
|
||||||
mutationFn: (survey: Survey) => surveyApi.create(survey),
|
mutationFn: (survey: SurveySalesBasicInfo) => surveySalesApi.create(survey),
|
||||||
onSuccess: () => {
|
onSuccess: (data) => {
|
||||||
queryClient.invalidateQueries({ queryKey: ['survey', 'list'] })
|
queryClient.invalidateQueries({ queryKey: ['survey', 'list'] })
|
||||||
|
return data
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
const { mutate: updateSurvey, isPending: isUpdatingSurvey } = useMutation({
|
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: () => {
|
onSuccess: () => {
|
||||||
queryClient.invalidateQueries({ queryKey: ['survey', 'list'] })
|
queryClient.invalidateQueries({ queryKey: ['survey', 'list'] })
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
const { mutate: deleteSurvey, isPending: isDeletingSurvey } = useMutation({
|
const { mutate: createSurveyDetail } = useMutation({
|
||||||
mutationFn: (id: number) => surveyApi.delete(id),
|
mutationFn: ({ surveyId, surveyDetail }: { surveyId: number; surveyDetail: SurveySalesDetailInfo }) =>
|
||||||
|
surveySalesApi.createDetail(surveyId, surveyDetail),
|
||||||
onSuccess: () => {
|
onSuccess: () => {
|
||||||
queryClient.invalidateQueries({ queryKey: ['survey', 'list'] })
|
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 {
|
return {
|
||||||
surveyList: surveyList ?? [],
|
surveyList: surveyList || [],
|
||||||
surveyDetail: surveyDetail ?? {},
|
surveyDetail: surveyDetail || null,
|
||||||
isLoadingSurveyList,
|
isLoadingSurveyList,
|
||||||
isLoadingSurveyDetail,
|
isLoadingSurveyDetail,
|
||||||
isCreatingSurvey,
|
isCreatingSurvey,
|
||||||
@ -47,5 +91,7 @@ export function useServey(id?: number) {
|
|||||||
createSurvey,
|
createSurvey,
|
||||||
updateSurvey,
|
updateSurvey,
|
||||||
deleteSurvey,
|
deleteSurvey,
|
||||||
|
createSurveyDetail,
|
||||||
|
confirmSurvey,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user