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

Merge branch 'dev' of https://git.hanasys.jp/qcast3/onsitesurvey into feature/inquiry

Browse Source
This commit is contained in:
Dayoung 2025-05-22 09:38:18 +09:00
commit a013cea464
74 changed files with 4816 additions and 2952 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.env.development
View File

@ -13,8 +13,8 @@ NEXT_PUBLIC_INQUIRY_API_URL=http://172.30.1.93:8120
#QPARTNER 로그인 api
DB_HOST=asdf
DB_USER=asdf
DB_PASSWORD=asdf
DB_DATABASE=asdf
DB_HOST=202.218.61.226
DB_USER=readonly
DB_PASSWORD=aAjmFW12iHKW84l1
DB_DATABASE=qpartners
DB_PORT=3306

8
.env.production
View File

@ -10,8 +10,8 @@ NEXT_PUBLIC_INQUIRY_API_URL=http://172.23.4.129:8110
#QPARTNER 로그인 api
DB_HOST=asdf
DB_USER=asdf
DB_PASSWORD=asdf
DB_DATABASE=asdf
DB_HOST=202.218.61.226
DB_USER=readonly
DB_PASSWORD=aAjmFW12iHKW84l1
DB_DATABASE=qpartners
DB_PORT=3306

18
README.md
View File

@ -54,7 +54,25 @@ session에 있는 role 키로 구분한다
session.role === 'Admin_Sub'
- constA03_01 / 1234 -> 시공사\
session.role === 'Builder'
- teshg44 / 1234 -> 시공사\
session.role === 'Builder'
- partners -> Q.Partners 계정\
session.role === 'Partner'
- 이외의 경우 -> 굳이 체크할 필요 없어보임\
session.role === 'User'
# 지붕재 적합성 TODO
```
const suitableCheck = (value: string) => {
if (value === '×') {
return <i className="compliance-icon x" />
} else if (value === 'ー') {
return <i className="compliance-icon quest" />
} else {
return <i className="compliance-icon check" />
}
}
```
- 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요

804
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
package.json
View File

@ -16,6 +16,7 @@
"iron-session": "^8.0.4",
"lucide": "^0.503.0",
"mssql": "^11.0.1",
"mysql2": "^3.14.1",
"next": "15.2.4",
"react": "^19.0.0",
"react-dom": "^19.0.0",
@ -27,6 +28,7 @@
},
"devDependencies": {
"@tailwindcss/postcss": "^4",
"@types/mysql": "^2.15.27",
"@types/node": "^20",
"@types/react": "^19",
"@types/react-dom": "^19",

89
pnpm-lock.yaml generated
View File

@ -29,6 +29,9 @@ importers:
mssql:
specifier: ^11.0.1
version: 11.0.1
mysql2:
specifier: ^3.14.1
version: 3.14.1
next:
specifier: 15.2.4
version: 15.2.4(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(sass@1.87.0)
@ -57,6 +60,9 @@ importers:
'@tailwindcss/postcss':
specifier: ^4
version: 4.0.17
'@types/mysql':
specifier: ^2.15.27
version: 2.15.27
'@types/node':
specifier: ^20
version: 20.17.28
@ -676,6 +682,9 @@ packages:
'@tediousjs/connection-string@0.5.0':
resolution: {integrity: sha512-7qSgZbincDDDFyRweCIEvZULFAw5iz/DeunhvuxpL31nfntX3P4Yd4HkHBRg9H8CdqY1e5WFN1PZIz/REL9MVQ==}
'@types/mysql@2.15.27':
resolution: {integrity: sha512-YfWiV16IY0OeBfBCk8+hXKmdTKrKlwKN1MNKAPBu5JYxLwBEZl7QzeEpGnlZb3VMGJrrGmB84gXiH+ofs/TezA==}
'@types/node@20.17.28':
resolution: {integrity: sha512-DHlH/fNL6Mho38jTy7/JT7sn2wnXI+wULR6PV4gy4VHLVvnrV/d3pHAMQHhc4gjdLmK2ZiPoMxzp6B3yRajLSQ==}
@ -712,6 +721,10 @@ packages:
engines: {node: '>= 4.5.0'}
hasBin: true
aws-ssl-profiles@1.1.2:
resolution: {integrity: sha512-NZKeq9AfyQvEeNlN0zSYAaWrmBffJh3IELMZfRpJVWgrpEbtEpnjvzqBPf+mxoI287JohRDoa+/nsfqqiZmF6g==}
engines: {node: '>= 6.0.0'}
axios@1.8.4:
resolution: {integrity: sha512-eBSYY4Y68NNlHbHBMdeDmKNtDgXWhQsJcGqzO3iLUM0GraQFSS9cVgPX5I9b3lbdFKyYoAEGAZF1DwhTaljNAw==}
@ -826,6 +839,10 @@ packages:
resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==}
engines: {node: '>=0.4.0'}
denque@2.1.0:
resolution: {integrity: sha512-HVQE3AAb/pxF8fQAoiqpvg9i3evqug3hoiwakOyZAwJm+6vZehbkYXZ0l4JxS+I3QxM97v5aaRNhj8v5oBhekw==}
engines: {node: '>=0.10'}
detect-libc@1.0.3:
resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
engines: {node: '>=0.10'}
@ -911,6 +928,9 @@ packages:
function-bind@1.1.2:
resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
generate-function@2.3.1:
resolution: {integrity: sha512-eeB5GfMNeevm/GRYq20ShmsaGcmI81kIX2K9XQx5miC8KdHaC6Jm0qQ8ZNeGOi7wYB8OsdxKs+Y2oVuTFuVwKQ==}
get-intrinsic@1.3.0:
resolution: {integrity: sha512-9fSjSaos/fRIVIp+xSJlE6lfwhES7LNtKaCBIamHsjr2na1BiABJPo0mOjjz8GJDURarmCPGqaiVg5mfjb98CQ==}
engines: {node: '>= 0.4'}
@ -994,6 +1014,9 @@ packages:
resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
engines: {node: '>=0.12.0'}
is-property@1.0.2:
resolution: {integrity: sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g==}
is-wsl@3.1.0:
resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==}
engines: {node: '>=16'}
@ -1112,6 +1135,17 @@ packages:
lodash.once@4.1.1:
resolution: {integrity: sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==}
long@5.3.2:
resolution: {integrity: sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==}
lru-cache@7.18.3:
resolution: {integrity: sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==}
engines: {node: '>=12'}
lru.min@1.1.2:
resolution: {integrity: sha512-Nv9KddBcQSlQopmBHXSsZVY5xsdlZkdH/Iey0BlcBYggMd4two7cZnKOK9vmy3nY0O5RGH99z1PCeTpPqszUYg==}
engines: {bun: '>=1.0.0', deno: '>=1.30.0', node: '>=8.0.0'}
lucide@0.503.0:
resolution: {integrity: sha512-ZAVlxBU4dbSUAVidb2eT0fH3bTtKCj7M2aZNAVsFOrcnazvYJFu6I8OxFE+Fmx5XNf22Cw4Ln3NBHfBxNfoFOw==}
@ -1139,6 +1173,14 @@ packages:
engines: {node: '>=18'}
hasBin: true
mysql2@3.14.1:
resolution: {integrity: sha512-7ytuPQJjQB8TNAYX/H2yhL+iQOnIBjAMam361R7UAL0lOVXWjtdrmoL9HYKqKoLp/8UUTRcvo1QPvK9KL7wA8w==}
engines: {node: '>= 8.0'}
named-placeholders@1.1.3:
resolution: {integrity: sha512-eLoBxg6wE/rZkJPhU/xRX1WTpkFEwDJEN96oxFrTsqBdbT5ec295Q+CoHrL9IT0DipqKhmGcaZmwOt8OON5x1w==}
engines: {node: '>=12.0.0'}
nanoid@3.3.11:
resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@ -1275,6 +1317,9 @@ packages:
engines: {node: '>=10'}
hasBin: true
seq-queue@0.0.5:
resolution: {integrity: sha512-hr3Wtp/GZIc/6DAGPDcV4/9WoZhjrkXsi5B/07QgX8tsdc6ilr7BFM6PM6rbdAX1kFSDYeZGLipIZZKyQP0O5Q==}
sharp@0.33.5:
resolution: {integrity: sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==}
engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
@ -1289,6 +1334,10 @@ packages:
sprintf-js@1.1.3:
resolution: {integrity: sha512-Oo+0REFV59/rz3gfJNKQiBlwfHaSESl1pcGyABQsnnIfWOFt6JNj5gCog2U6MLZ//IGYD+nA8nI+mTShREReaA==}
sqlstring@2.3.3:
resolution: {integrity: sha512-qC9iz2FlN7DQl3+wjwn3802RTyjCx7sDvfQEXchwa6CWOx07/WVfh91gBmQ9fahw8snwGEWU3xGzOt4tFyHLxg==}
engines: {node: '>= 0.6'}
stackblur-canvas@2.7.0:
resolution: {integrity: sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==}
engines: {node: '>=0.1.14'}
@ -1890,6 +1939,10 @@ snapshots:
'@tediousjs/connection-string@0.5.0': {}
'@types/mysql@2.15.27':
dependencies:
'@types/node': 20.17.28
'@types/node@20.17.28':
dependencies:
undici-types: 6.19.8
@ -1923,6 +1976,8 @@ snapshots:
atob@2.1.2: {}
aws-ssl-profiles@1.1.2: {}
axios@1.8.4:
dependencies:
follow-redirects: 1.15.9
@ -2041,6 +2096,8 @@ snapshots:
delayed-stream@1.0.0: {}
denque@2.1.0: {}
detect-libc@1.0.3:
optional: true
@ -2141,6 +2198,10 @@ snapshots:
function-bind@1.1.2: {}
generate-function@2.3.1:
dependencies:
is-property: 1.0.2
get-intrinsic@1.3.0:
dependencies:
call-bind-apply-helpers: 1.0.2
@ -2230,6 +2291,8 @@ snapshots:
is-number@7.0.0:
optional: true
is-property@1.0.2: {}
is-wsl@3.1.0:
dependencies:
is-inside-container: 1.0.0
@ -2346,6 +2409,12 @@ snapshots:
lodash.once@4.1.1: {}
long@5.3.2: {}
lru-cache@7.18.3: {}
lru.min@1.1.2: {}
lucide@0.503.0: {}
math-intrinsics@1.1.0: {}
@ -2375,6 +2444,22 @@ snapshots:
transitivePeerDependencies:
- supports-color
mysql2@3.14.1:
dependencies:
aws-ssl-profiles: 1.1.2
denque: 2.1.0
generate-function: 2.3.1
iconv-lite: 0.6.3
long: 5.3.2
lru.min: 1.1.2
named-placeholders: 1.1.3
seq-queue: 0.0.5
sqlstring: 2.3.3
named-placeholders@1.1.3:
dependencies:
lru-cache: 7.18.3
nanoid@3.3.11: {}
native-duplexpair@1.0.0: {}
@ -2508,6 +2593,8 @@ snapshots:
semver@7.7.1: {}
seq-queue@0.0.5: {}
sharp@0.33.5:
dependencies:
color: 4.2.3
@ -2544,6 +2631,8 @@ snapshots:
sprintf-js@1.1.3: {}
sqlstring@2.3.3: {}
stackblur-canvas@2.7.0:
optional: true

71
prisma/schema.prisma
View File

@ -7,18 +7,6 @@ datasource db {
url = env("DATABASE_URL")
}
model User {
id Int @id @default(autoincrement())
username String @unique
phone String?
email String?
password String?
kakao_id String?
avatar String?
created_at DateTime @default(now())
updated_at DateTime @updatedAt
}
model MS_SUITABLE {
id Int @id @default(autoincrement())
product_name String @db.VarChar(200)
@ -59,6 +47,7 @@ model MS_SUITABLE {
model SD_SURVEY_SALES_BASIC_INFO {
ID Int @id @default(autoincrement())
SRL_NO String @db.VarChar(20)
REPRESENTATIVE String @db.VarChar(200)
STORE String? @db.VarChar(200)
CONSTRUCTION_POINT String? @db.VarChar(200)
@ -70,6 +59,7 @@ model SD_SURVEY_SALES_BASIC_INFO {
ADDRESS_DETAIL String? @db.VarChar(300)
SUBMISSION_STATUS Boolean @default(false)
SUBMISSION_DATE DateTime? @db.Date
SUBMISSION_TARGET_ID String? @db.VarChar(200)
REG_DT DateTime @default(now())
UPT_DT DateTime @updatedAt
DETAIL_INFO SD_SURVEY_SALES_DETAIL_INFO?
@ -120,28 +110,28 @@ model SD_SURVEY_SALES_DETAIL_INFO {
model BC_COMM_H {
HEAD_CD String @id(map: "PK_BC_COMM_H") @db.NVarChar(6)
HEAD_ID String @db.NVarChar(100)
HEAD_NM String @db.NVarChar(100)
HEAD_JP String @db.NVarChar(100)
HEAD_4TH String @db.NVarChar(100)
REF_CHR1 String @db.NVarChar(100)
REF_CHR2 String @db.NVarChar(100)
REF_CHR3 String @db.NVarChar(100)
REF_CHR4 String @db.NVarChar(100)
REF_CHR5 String @db.NVarChar(100)
REF_NUM1 String @db.NVarChar(100)
REF_NUM2 String @db.NVarChar(100)
REF_NUM3 String @db.NVarChar(100)
REF_NUM4 String @db.NVarChar(100)
REF_NUM5 String @db.NVarChar(100)
REMARKS String @db.NVarChar(200)
SAP_YN String @db.NVarChar(1)
STAT_CD String @db.NVarChar(1)
DEL_YN String @db.NVarChar(1)
HEAD_ID String? @db.NVarChar(100)
HEAD_NM String? @db.NVarChar(100)
HEAD_JP String? @db.NVarChar(100)
HEAD_4TH String? @db.NVarChar(100)
REF_CHR1 String? @db.NVarChar(100)
REF_CHR2 String? @db.NVarChar(100)
REF_CHR3 String? @db.NVarChar(100)
REF_CHR4 String? @db.NVarChar(100)
REF_CHR5 String? @db.NVarChar(100)
REF_NUM1 String? @db.NVarChar(100)
REF_NUM2 String? @db.NVarChar(100)
REF_NUM3 String? @db.NVarChar(100)
REF_NUM4 String? @db.NVarChar(100)
REF_NUM5 String? @db.NVarChar(100)
REMARKS String? @db.NVarChar(200)
SAP_YN String? @db.NVarChar(1)
STAT_CD String? @db.NVarChar(1)
DEL_YN String? @db.NVarChar(1)
REG_DT DateTime? @db.DateTime
REG_ID String @db.NVarChar(50)
REG_ID String? @db.NVarChar(50)
UPT_DT DateTime? @db.DateTime
UPT_ID String @db.NVarChar(50)
UPT_ID String? @db.NVarChar(50)
QC_COMM_YN String? @default("N", map: "DF__BC_COMM_H__QC_CO__48CFD27E") @db.NVarChar(1)
BC_COMM_L BC_COMM_L[]
@ -183,7 +173,7 @@ model MS_SUITABLE_ROOF_MATERIAL_GROUP {
ROOF_MATERIAL_GROUP String @db.VarChar(200)
ROOF_MT_CD String @db.VarChar(200)
REG_DT DateTime @default(now(), map: "DF__MS_SUITAB__creat__4F7CD00D")
UPT_DT DateTime
UPT_DT DateTime?
}
model MS_SUITABLE_DETAIL {
@ -195,6 +185,8 @@ model MS_SUITABLE_DETAIL {
REG_DT DateTime @default(now(), map: "DF__MS_SUITAB__creat__571DF1D5")
UPT_DT DateTime?
MS_SUITABLE_MAIN MS_SUITABLE_MAIN @relation(fields: [MAIN_ID], references: [ID], onUpdate: NoAction, map: "MS_SUITABLE_DETAIL_MS_SUITABLE_MAIN_FK")
@@index([MAIN_ID, TRESTLE_MANUFACTURER_PRODUCT_NAME], map: "MS_SUITABLE_DETAIL_MAIN_ID_IDX")
}
model MS_SUITABLE_MAIN {
@ -206,4 +198,17 @@ model MS_SUITABLE_MAIN {
REG_DT DateTime @default(now(), map: "DF__MS_SUITAB__creat__5441852A")
UPT_DT DateTime?
MS_SUITABLE_DETAIL MS_SUITABLE_DETAIL[]
@@index([PRODUCT_NAME], map: "MS_SUITABLE_MAIN_PRODUCT_NAME_IDX")
@@index([ROOF_MT_CD, PRODUCT_NAME], map: "MS_SUITABLE_MAIN_ROOF_MT_CD_IDX")
}
/// The underlying table does not contain a valid unique identifier and can therefore currently not be handled by Prisma Client.
model MS_USR_TRK {
ID Int @id @default(autoincrement())
OWNER String @db.VarChar(100)
TYPE String @db.VarChar(50)
URL String? @db.VarChar(200)
REG_DT DateTime @default(now())
DATA String? @db.VarChar(200)
}

1
src/app/api/auth/chg-pwd/route.ts
View File

@ -1,5 +1,4 @@
import { NextResponse } from 'next/server'
import { axiosInstance } from '@/libs/axios'
export async function POST(req: Request) {

13
src/app/api/auth/logout/route.ts
View File

@ -1,13 +1,20 @@
import { sessionOptions } from '@/libs/session'
import { SessionData } from '@/types/Auth'
import { getIronSession } from 'iron-session'
import type { SessionData } from '@/types/Auth'
import { cookies } from 'next/headers'
import { NextResponse } from 'next/server'
import { getIronSession } from 'iron-session'
import { sessionOptions } from '@/libs/session'
import { tracking } from '@/libs/tracking'
export async function GET(request: Request) {
const cookieStore = await cookies()
const session = await getIronSession<SessionData>(cookieStore, sessionOptions)
tracking({
url: '/api/auth/logout',
data: JSON.stringify({
userId: session.userId,
}),
})
session.destroy()
// return redirect('/login')

63
src/app/api/auth/route.ts
View File

@ -1,11 +1,10 @@
import type { SessionData } from '@/types/Auth'
import { cookies } from 'next/headers'
import { NextResponse } from 'next/server'
import { getIronSession } from 'iron-session'
import { axiosInstance } from '@/libs/axios'
import { sessionOptions } from '@/libs/session'
import type { SessionData } from '@/types/Auth'
import { tracking } from '@/libs/tracking'
export async function POST(request: Request) {
const { loginId, pwd } = await request.json()
@ -14,9 +13,16 @@ export async function POST(request: Request) {
loginId,
pwd,
})
// console.log('🚀 ~ result ~ result:', result)
console.log('🚀 ~ result ~ result:', result.data)
if (result.data.result.code === 200) {
tracking({
url: `/api/auth/login`,
data: JSON.stringify({
loginId,
pwd,
}),
})
const cookieStore = await cookies()
const session = await getIronSession<SessionData>(cookieStore, sessionOptions)
@ -59,8 +65,6 @@ export async function POST(request: Request) {
session.role = 'Admin_Sub'
} else if (result.data.data.groupId === '70000' && result.data.data.builderNo !== null) {
session.role = 'Builder'
} else if (result.data.data.groupId === '90000' && result.data.data.builderNo !== null) {
session.role = 'Partner'
} else {
session.role = 'User'
}
@ -70,5 +74,50 @@ export async function POST(request: Request) {
await session.save()
}
return NextResponse.json({ code: 200, message: 'Login is Succecss!!', result: result.data.data })
const resultForSession = {
LANG_CD: result.data.data.langCd,
CURR_PAGE: result.data.data.currPage,
ROW_COUNT: result.data.data.rowCount,
START_ROW: result.data.data.startRow,
END_ROW: result.data.data.endRow,
COMP_CD: result.data.data.compCd,
AGENCY_STORE_ID: result.data.data.agencyStoreId,
STORE_ID: result.data.data.storeId,
STORE_NM: result.data.data.storeNm,
USER_ID: result.data.data.userId,
CATEGORY: result.data.data.category,
USER_NM: result.data.data.userNm,
USER_NM_KANA: result.data.data.userNmKana,
TEL_NO: result.data.data.telNo,
FAX: result.data.data.fax,
EMAIL: result.data.data.email,
LAST_EDIT_USER: result.data.data.lastEditUser,
STORE_GUBUN: result.data.data.storeGubun,
PW_CURR: result.data.data.pwCurr,
PWD_INIT_YN: result.data.data.pwdInitYn,
APPR_STAT_CD: result.data.data.apprStatCd,
LOGIN_FAIL_CNT: result.data.data.loginFailCnt,
LOGIN_FAIL_MIN_YN: result.data.data.loginFailMinYn,
PRICE_VIEW_STAT_CD: result.data.data.priceViewStatCd,
GROUP_ID: result.data.data.groupId,
STORE_LVL: result.data.data.storeLvl,
CUST_CD: result.data.data.custCd,
BUILDER_NO: result.data.data.builderNo,
IS_LOGGED_IN: true,
ROLE: '',
}
if (result.data.data.userId === 'T01') {
resultForSession.ROLE = 'T01'
} else if (result.data.data.groupId === '60000') {
resultForSession.ROLE = 'Admin'
} else if (result.data.data.groupId === '70000' && result.data.data.builderNo === null) {
resultForSession.ROLE = 'Admin_Sub'
} else if (result.data.data.groupId === '70000' && result.data.data.builderNo !== null) {
resultForSession.ROLE = 'Builder'
} else {
resultForSession.ROLE = 'User'
}
return NextResponse.json({ code: 200, message: 'Login is Succecss!!', result: resultForSession })
}

44
src/app/api/comm-code/route.ts Normal file
View File

@ -0,0 +1,44 @@
import { NextRequest, NextResponse } from 'next/server'
import { prisma } from '@/libs/prisma'
import type { CommCode } from '@/types/CommCode'
export async function GET(request: NextRequest) {
try {
const searchParams = request.nextUrl.searchParams
const headCode = searchParams.get('headCode')
// @ts-ignore
const headCd = await prisma.BC_COMM_H.findFirst({
where: {
HEAD_ID: headCode,
},
select: {
HEAD_CD: true,
},
})
if (!headCd) {
return NextResponse.json({ error: `${headCode}를 찾을 수 없습니다` }, { status: 404 })
}
// @ts-ignore
const roofMaterials: CommCode[] = await prisma.BC_COMM_L.findMany({
where: {
HEAD_CD: headCd.HEAD_CD,
},
select: {
HEAD_CD: true,
CODE: true,
CODE_JP: true,
},
orderBy: {
CODE: 'asc',
},
})
return NextResponse.json(roofMaterials)
} catch (error) {
console.error('❌ 데이터 조회 중 오류가 발생했습니다:', error)
return NextResponse.json({ error: '데이터 조회 중 오류가 발생했습니다' }, { status: 500 })
}
}

131
src/app/api/partner/route.ts Normal file
View File

@ -0,0 +1,131 @@
import type { SessionData } from '@/types/Auth'
import { NextResponse } from 'next/server'
import { cookies } from 'next/headers'
import { getIronSession } from 'iron-session'
import executeQuery from '@/libs/partner'
import { sessionOptions } from '@/libs/session'
export async function POST(request: Request) {
const cookieStore = await cookies()
const session = await getIronSession<SessionData>(cookieStore, sessionOptions)
const { loginId, pwd } = await request.json()
const sql = `
SELECT
r.data_id,
u.id AS user_id,
u.login_id AS user_login_id,
u.password AS user_password,
u.user_name AS user_name,
u.user_name_kana AS user_name_kana,
u.sei AS user_sei,
u.mei AS user_mei,
u.sei_kana AS user_sei_kana,
u.mei_kana AS user_mei_kana,
u.user_tel AS user_tel,
u.user_fax AS user_fax,
u.status AS user_status,
u.seko_id AS user_seko_id,
u.seko_limit AS user_seko_limit,
s.id AS supplier_id,
s.code AS supplier_code,
s.name AS supplier_name,
s.name_kana AS supplier_name_kana,
s.kind AS supplier_kind
FROM
R_DATA r
JOIN
M_USER u ON r.data_id = u.id
JOIN
M_SUPPLIER s ON r.relation_id = s.id
WHERE
u.status = '1'
AND
u.seko_id is not null
AND
u.seko_limit > now()
AND
s.kind = '4'
AND
u.login_id = ?
AND
u.password = ?
`
// const sql = 'SELECT * FROM M_USER'
const data = (await executeQuery(sql, [loginId, pwd])) as any[]
console.log('🚀 ~ POST ~ data:', data)
if (data.length > 0) {
console.log('start session edit!')
session.langCd = null
session.currPage = null
session.rowCount = null
session.startRow = null
session.endRow = null
session.compCd = null
session.agencyStoreId = null
session.storeId = data[0].supplier_code
session.storeNm = data[0].supplier_name
session.userId = data[0].user_login_id
session.category = data[0].supplier_name
session.userNm = `${data[0].user_sei} ${data[0].user_mei}`
session.userNmKana = `${data[0].user_sei_kana} ${data[0].user_mei_kana}`
session.telNo = data[0].tel
session.fax = data[0].fax
session.email = data[0].user_login_id
session.lastEditUser = null
session.storeGubun = null
session.pwCurr = null
session.pwdInitYn = null
session.apprStatCd = null
session.loginFailCnt = null
session.loginFailMinYn = null
session.priceViewStatCd = null
session.groupId = null
session.storeLvl = null
session.custCd = null
session.builderNo = data[0].user_seko_id
session.isLoggedIn = true
session.role = 'Partner'
console.log('end session edit!')
await session.save()
}
// qsp 유저 데이터 모양과 맞춰서 변환
const result = {
LANG_CD: null,
CURR_PAGE: null,
ROW_COUNT: null,
START_ROW: null,
END_ROW: null,
COMP_CD: null,
AGENCY_STORE_ID: null,
STORE_ID: data[0].supplier_code,
STORE_NM: data[0].supplier_name,
USER_ID: data[0].user_login_id,
CATEGORY: data[0].supplier_name,
USER_NM: `${data[0].user_sei} ${data[0].user_mei}`,
USER_NM_KANA: `${data[0].user_sei_kana} ${data[0].user_mei_kana}`,
TEL_NO: data[0].tel,
FAX: data[0].fax,
EMAIL: data[0].user_login_id,
LAST_EDIT_USER: null,
STORE_GUBUN: null,
PW_CURR: null,
PWD_INIT_YN: null,
APPR_STAT_CD: null,
LOGIN_FAIL_CNT: null,
LOGIN_FAIL_MIN_YN: null,
PRICE_VIEW_STAT_CD: null,
GROUP_ID: null,
STORE_LVL: null,
CUST_CD: null,
BUILDER_NO: data[0].user_seko_id,
IS_LOGGED_IN: true,
ROLE: 'Partner',
}
return NextResponse.json({ code: 200, message: 'Partner Login is Succecss!!', result })
}

16
src/app/api/suitable/category/route.ts
View File

@ -1,16 +0,0 @@
import { NextResponse } from 'next/server'
import { prisma } from '@/libs/prisma'
export async function GET() {
// @ts-ignore
const roofMaterialCategory = await prisma.MS_SUITABLE.findMany({
select: {
roof_material: true,
},
distinct: ['roof_material'],
orderBy: {
roof_material: 'asc',
},
})
return NextResponse.json(roofMaterialCategory)
}

17
src/app/api/suitable/detail/route.ts
View File

@ -1,17 +0,0 @@
import { NextResponse } from 'next/server'
import { prisma } from '@/libs/prisma'
export async function GET(request: Request) {
const { searchParams } = new URL(request.url)
const roofMaterial = searchParams.get('roof-material')
console.log('🚀 ~ GET ~ roof-material:', roofMaterial)
// @ts-ignore
const suitables = await prisma.MS_SUITABLE.findMany({
where: {
roof_material: roofMaterial,
},
})
return NextResponse.json(suitables)
}

66
src/app/api/suitable/list/route.ts
View File

@ -1,5 +1,6 @@
import { NextRequest, NextResponse } from 'next/server'
import { prisma } from '@/libs/prisma'
import { SUITABLE_HEAD_CODE, type SuitableMain } from '@/types/Suitable'
export async function GET(request: NextRequest) {
try {
@ -7,26 +8,75 @@ export async function GET(request: NextRequest) {
const category = searchParams.get('category')
const keyword = searchParams.get('keyword')
let whereCondition: any = {}
let MainWhereCondition: any = {}
const whereCondition: string[] = []
const params: string[] = []
if (category) {
whereCondition['roof_material'] = category
whereCondition.push(`${SUITABLE_HEAD_CODE.ROOF_MT_CD} = @P1`)
params.push(category)
MainWhereCondition[SUITABLE_HEAD_CODE.ROOF_MT_CD] = category
}
if (keyword) {
whereCondition['product_name'] = {
whereCondition.push('PRODUCT_NAME LIKE @P2')
params.push(`%${keyword}%`)
MainWhereCondition['PRODUCT_NAME'] = {
contains: keyword,
}
}
console.log('🚀 ~ /api/suitable/list: ~ prisma where condition:', whereCondition)
const startTime = performance.now()
console.log(`쿼리 (main table) 시작 시간: ${startTime}ms`)
// @ts-ignore
const suitables = await prisma.MS_SUITABLE.findMany({
where: whereCondition,
const suitable = await prisma.MS_SUITABLE_MAIN.findMany({
select: {
ID: true,
PRODUCT_NAME: true,
ROOF_MT_CD: true,
},
where: MainWhereCondition,
orderBy: {
product_name: 'asc',
PRODUCT_NAME: 'asc',
},
})
return NextResponse.json(suitables)
const endTime = performance.now()
console.log(`쿼리 (main table) 종료 시간: ${endTime - startTime}ms`)
const mainIds: number[] = suitable.map((item: SuitableMain) => item.id)
const startTime2 = performance.now()
console.log(`쿼리 (detail table) 시작 시간: ${startTime2}ms`)
let detailQuery = `
SELECT
msd.main_id
, (
SELECT
msd_json.id
, msd_json.trestle_mfpc_cd
, msd_json.trestle_manufacturer_product_name
, msd_json.memo
FROM ms_suitable_detail msd_json
WHERE msd.main_id = msd_json.main_id
FOR JSON PATH
) AS detail
FROM ms_suitable_detail msd
-- WHERE 1=1
GROUP BY msd.main_id
`
if (whereCondition.length > 0) {
detailQuery = detailQuery.replace('-- WHERE 1=1', `WHERE msd.main_id IN @P1`)
}
// @ts-ignore
const detail = await prisma.$queryRawUnsafe(detailQuery, ...mainIds)
const endTime2 = performance.now()
console.log(`쿼리 (detail table) 종료 시간: ${endTime2 - startTime2}ms`)
const endTime3 = performance.now()
console.log(`쿼리 총 실행 시간: ${endTime3 - startTime}ms`)
return NextResponse.json({ suitable, detail })
} catch (error) {
console.error('❌ 데이터 조회 중 오류가 발생했습니다:', error)
return NextResponse.json({ error: '데이터 조회 중 오류가 발생했습니다' }, { status: 500 })

71
src/app/api/suitable/list/test/route.ts Normal file
View File

@ -0,0 +1,71 @@
import { NextRequest, NextResponse } from 'next/server'
import { prisma } from '@/libs/prisma'
import { SUITABLE_HEAD_CODE, type Suitable } from '@/types/Suitable'
export async function GET(request: NextRequest) {
try {
const searchParams = request.nextUrl.searchParams
const category = searchParams.get('category')
const keyword = searchParams.get('keyword')
const whereCondition: string[] = []
const params: string[] = []
if (category) {
whereCondition.push(`${SUITABLE_HEAD_CODE.ROOF_MT_CD} = @P1`)
params.push(category)
}
if (keyword) {
whereCondition.push('PRODUCT_NAME LIKE @P2')
params.push(`%${keyword}%`)
}
const startTime = performance.now()
console.log(`쿼리 시작 시간: ${startTime}ms`)
let query = `
SELECT
msm.id
, msm.product_name
, msm.manu_ft_cd
, msm.roof_mt_cd
, msm.roof_sh_cd
, details.detail
FROM ms_suitable_main msm
LEFT JOIN (
SELECT
msd.main_id
, (
SELECT
msd_json.id
, msd_json.trestle_mfpc_cd
, msd_json.trestle_manufacturer_product_name
, msd_json.memo
FROM ms_suitable_detail msd_json
WHERE msd.main_id = msd_json.main_id
FOR JSON PATH
) AS detail
FROM ms_suitable_detail msd
GROUP BY msd.main_id
) AS details
ON msm.id = details.main_id
-- AND details.main_id IN (#mainIds)
-- WHERE 1=1
ORDER BY msm.product_name`
// 검색 조건 추가
if (whereCondition.length > 0) {
query = query.replace('-- WHERE 1=1', `WHERE ${whereCondition.join(' AND ')}`)
}
// @ts-ignore
const suitable: Suitable[] = await prisma.$queryRawUnsafe(query, ...params)
const endTime = performance.now()
console.log(`쿼리 실행 시간: ${endTime - startTime}ms`)
return NextResponse.json(suitable)
} catch (error) {
console.error('❌ 데이터 조회 중 오류가 발생했습니다:', error)
return NextResponse.json({ error: '데이터 조회 중 오류가 발생했습니다' }, { status: 500 })
}
}

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

@ -1,9 +1,10 @@
import { NextResponse } from 'next/server'
import { NextRequest, NextResponse } from 'next/server'
import { prisma } from '@/libs/prisma'
import { convertToSnakeCase } from '@/utils/common-utils'
export async function GET(request: Request, context: { params: { id: string } }) {
export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
try {
const { id } = await context.params
const { id } = await params
// @ts-ignore
const survey = await prisma.SD_SURVEY_SALES_BASIC_INFO.findUnique({
where: { ID: Number(id) },
@ -18,34 +19,34 @@ export async function GET(request: Request, context: { params: { id: string } })
}
}
export async function PUT(request: Request, context: { params: { id: string } }) {
export async function PUT(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
try {
const { id } = await context.params
const { id } = await params
const body = await request.json()
console.log('body:: ', body)
// DETAIL_INFO를 분리
const { DETAIL_INFO, ...basicInfo } = body
console.log('body:: ', body)
// @ts-ignore
const survey = await prisma.SD_SURVEY_SALES_BASIC_INFO.update({
where: { ID: Number(id) },
data: {
...basicInfo,
...convertToSnakeCase(basicInfo),
UPT_DT: new Date(),
DETAIL_INFO: DETAIL_INFO
? {
DETAIL_INFO: DETAIL_INFO ? {
upsert: {
create: DETAIL_INFO,
update: DETAIL_INFO,
},
create: convertToSnakeCase(DETAIL_INFO),
update: convertToSnakeCase(DETAIL_INFO),
where: {
BASIC_INFO_ID: Number(id)
}
: undefined,
}
} : undefined
},
include: {
DETAIL_INFO: true,
},
DETAIL_INFO: true
}
})
console.log('survey:: ', survey)
return NextResponse.json(survey)
} catch (error) {
console.error('Error updating survey:', error)
@ -53,9 +54,9 @@ export async function PUT(request: Request, context: { params: { id: string } })
}
}
export async function DELETE(request: Request, context: { params: { id: string } }) {
export async function DELETE(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
try {
const { id } = await context.params
const { id } = await params
await prisma.$transaction(async (tx) => {
// @ts-ignore
@ -86,9 +87,9 @@ export async function DELETE(request: Request, context: { params: { id: string }
}
}
export async function PATCH(request: Request, context: { params: { id: string } }) {
export async function PATCH(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
try {
const { id } = await context.params
const { id } = await params
const body = await request.json()
if (body.submit) {
@ -98,40 +99,42 @@ export async function PATCH(request: Request, context: { params: { id: string }
data: {
SUBMISSION_STATUS: true,
SUBMISSION_DATE: new Date(),
UPT_DT: new Date(),
},
})
return NextResponse.json({ message: 'Survey confirmed successfully' })
} else {
// @ts-ignore
const hasDetails = await prisma.SD_SURVEY_SALES_DETAIL_INFO.findUnique({
where: { BASIC_INFO_ID: Number(id) },
})
}
// } else {
// // @ts-ignore
// const hasDetails = await prisma.SD_SURVEY_SALES_DETAIL_INFO.findUnique({
// where: { BASIC_INFO_ID: Number(id) },
// })
if (hasDetails) {
//@ts-ignore
const result = await prisma.SD_SURVEY_SALES_BASIC_INFO.update({
where: { ID: Number(id) },
data: {
UPT_DT: new Date(),
DETAIL_INFO: {
update: body.DETAIL_INFO,
},
},
})
return NextResponse.json(result)
} else {
// @ts-ignore
const survey = await prisma.SD_SURVEY_SALES_BASIC_INFO.update({
where: { ID: Number(id) },
data: {
DETAIL_INFO: {
create: body.DETAIL_INFO,
},
},
})
return NextResponse.json({ message: 'Survey detail created successfully' })
}
}
// if (hasDetails) {
// //@ts-ignore
// const result = await prisma.SD_SURVEY_SALES_BASIC_INFO.update({
// where: { ID: Number(id) },
// data: {
// UPT_DT: new Date(),
// DETAIL_INFO: {
// update: convertToSnakeCase(body.DETAIL_INFO),
// },
// },
// })
// return NextResponse.json(result)
// } else {
// // @ts-ignore
// const survey = await prisma.SD_SURVEY_SALES_BASIC_INFO.update({
// where: { ID: Number(id) },
// data: {
// DETAIL_INFO: {
// create: convertToSnakeCase(body.DETAIL_INFO),
// },
// },
// })
// return NextResponse.json({ message: 'Survey detail created successfully' })
// }
// }
} catch (error) {
console.error('Error updating survey:', error)
return NextResponse.json({ error: 'Failed to update survey' }, { status: 500 })

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

@ -1,6 +1,6 @@
import { NextResponse } from 'next/server'
import { prisma } from '@/libs/prisma'
import { convertToSnakeCase } from '@/utils/common-utils'
/**
* 검색 파라미터
*/
@ -16,7 +16,7 @@ type SearchParams = {
}
type WhereCondition = {
AND?: any[]
AND: any[]
OR?: any[]
[key: string]: any
}
@ -43,7 +43,7 @@ const ITEMS_PER_PAGE = 10
* @returns 검색 조건 객체
*/
const createKeywordSearchCondition = (keyword: string, searchOption: string): WhereCondition => {
const where: WhereCondition = {}
const where: WhereCondition = { AND: [] }
if (searchOption === 'all') {
// 모든 필드 검색 시 OR 조건 사용
@ -74,7 +74,6 @@ const createKeywordSearchCondition = (keyword: string, searchOption: string): Wh
where.ID = { equals: null }
}
}
return where
}
@ -105,21 +104,18 @@ const createMemberRoleCondition = (params: SearchParams): WhereCondition => {
AND: [
{ STORE: { equals: params.store } },
{
OR: [
{ CONSTRUCTION_POINT: { equals: null } },
{ CONSTRUCTION_POINT: { equals: '' } }
]
}
]
OR: [{ CONSTRUCTION_POINT: { equals: null } }, { CONSTRUCTION_POINT: { equals: '' } }],
},
],
},
{
AND: [
{ STORE: { equals: params.store } },
{ CONSTRUCTION_POINT: { not: null } },
{ CONSTRUCTION_POINT: { not: '' } },
{ SUBMISSION_STATUS: { equals: true } }
]
}
{ SUBMISSION_STATUS: { equals: true } },
],
},
]
break
@ -159,23 +155,24 @@ export async function GET(request: Request) {
}
// 검색 조건 구성
const where: WhereCondition = {}
const where: WhereCondition = { AND: [] }
// 내가 작성한 매물 조건 적용
if (params.isMySurvey) {
where.REPRESENTATIVE = params.isMySurvey
where.AND.push({ REPRESENTATIVE: params.isMySurvey })
}
// 키워드 검색 조건 적용
if (params.keyword && params.searchOption) {
Object.assign(where, createKeywordSearchCondition(params.keyword, params.searchOption))
where.AND.push(createKeywordSearchCondition(params.keyword, params.searchOption))
}
// 회원 유형 조건 적용
Object.assign(where, createMemberRoleCondition(params))
const roleCondition = createMemberRoleCondition(params)
if (Object.keys(roleCondition).length > 0) {
where.AND.push(roleCondition)
}
// 데이터 조회 또는 카운트
if (params.offset) {
// 페이지네이션 데이터 조회
//@ts-ignore
const surveys = await prisma.SD_SURVEY_SALES_BASIC_INFO.findMany({
@ -184,13 +181,10 @@ export async function GET(request: Request) {
skip: Number(params.offset),
take: ITEMS_PER_PAGE,
})
return NextResponse.json(surveys)
} else {
// 전체 개수만 조회
//@ts-ignore
const count = await prisma.SD_SURVEY_SALES_BASIC_INFO.count({ where })
return NextResponse.json(count)
}
return NextResponse.json({ data: { data: surveys, count: count } })
} catch (error) {
console.error(error)
return NextResponse.json({ error: 'Fail Read Survey' }, { status: 500 })
@ -228,16 +222,19 @@ export async function PUT(request: Request) {
export async function POST(request: Request) {
try {
const body = await request.json()
const { DETAIL_INFO, ...basicInfo } = body
console.log('body:: ', body)
const { detailInfo, ...basicInfo } = body
// 기본 정보 생성
//@ts-ignore
const result = await prisma.SD_SURVEY_SALES_BASIC_INFO.create({
data: {
...basicInfo,
...convertToSnakeCase(basicInfo),
DETAIL_INFO: {
create: DETAIL_INFO,
},
},
create: convertToSnakeCase(detailInfo)
}
}
})
return NextResponse.json(result)
} catch (error) {

41
src/app/api/tracking/route.ts Normal file
View File

@ -0,0 +1,41 @@
import type { SessionData } from '@/types/Auth'
import { NextResponse } from 'next/server'
import { cookies } from 'next/headers'
import { prisma } from '@/libs/prisma'
import { getIronSession } from 'iron-session'
import { sessionOptions } from '@/libs/session'
export async function POST(request: Request) {
const { url, data } = await request.json()
const cookieStore = await cookies()
const session = await getIronSession<SessionData>(cookieStore, sessionOptions)
let owner = ''
if (url === '/api/auth/login') {
owner = 'Login'
} else if (url === '/api/auth/logout') {
owner = 'Logout'
} else {
owner = session.userId ?? 'Direct'
}
let type = ''
if (url.includes('api')) {
type = 'api'
} else {
type = 'page'
}
// @ts-ignore
const result = await prisma.MS_USR_TRK.create({
data: {
OWNER: owner,
TYPE: type,
URL: url,
DATA: JSON.stringify(data),
},
})
return NextResponse.json({ message: 'Tracking data received', result })
}

23
src/app/api/user/create/route.ts
View File

@ -1,23 +0,0 @@
import { NextResponse } from 'next/server'
import { prisma } from '@/libs/prisma'
export async function POST(request: Request) {
try {
const body = await request.json()
const { username, email, password } = body
const user = await prisma.user.create({
data: {
username,
email,
password,
updated_at: new Date(),
},
})
return NextResponse.json(user)
} catch (error) {
console.error('Error creating user:', error)
return NextResponse.json({ error: 'Error creating user' }, { status: 500 })
}
}

7
src/app/api/user/list/route.ts
View File

@ -1,7 +0,0 @@
import { NextResponse } from 'next/server'
import { prisma } from '@/libs/prisma'
export const GET = async () => {
const users = await prisma.user.findMany()
return NextResponse.json(users)
}

38
src/app/api/user/route.ts
View File

@ -1,38 +0,0 @@
import { NextResponse } from 'next/server'
import { prisma } from '@/libs/prisma'
import { getIronSession } from 'iron-session'
import { cookies } from 'next/headers'
import { sessionOptions } from '@/libs/session'
import type { SessionData } from '@/types/Auth'
export async function POST(request: Request) {
const { username, password } = await request.json()
console.log('🚀 ~ POST ~ username:', username)
console.log('🚀 ~ POST ~ password:', password)
const user = await prisma.user.findFirst({
where: {
username: username,
password: password,
},
})
console.log('🚀 ~ POST ~ user:', user)
if (!user) {
return NextResponse.json({ error: 'User not found' }, { status: 404 })
}
const cookieStore = await cookies()
const session = await getIronSession<SessionData>(cookieStore, sessionOptions)
console.log('start session edit!')
// session.username = user.username!
// session.email = user.email!
session.isLoggedIn = true
console.log('end session edit!')
await session.save()
console.log('🚀 ~ POST ~ session:', session)
// return NextResponse.redirect(new URL(process.env.NEXT_PUBLIC_URL!, request.url))
return NextResponse.json(user)
}

2
src/app/layout.tsx
View File

@ -22,7 +22,7 @@ interface RootLayoutProps {
header: ReactNode
footer: ReactNode
floatBtn: ReactNode
}6
}
export default async function RootLayout({ children, header, footer, floatBtn }: RootLayoutProps): Promise<ReactNode> {
const cookieStore = await cookies()

9
src/app/pdf/page.tsx Normal file
View File

@ -0,0 +1,9 @@
import DownloadPdf from '@/components/DownloadPDF'
export default function page() {
return (
<>
<DownloadPdf />
</>
)
}

24
src/app/suitable-test/layout.tsx Normal file
View File

@ -0,0 +1,24 @@
import type { ReactNode } from 'react'
interface SuitableLayoutProps {
children: ReactNode
}
export default function layout({ children }: SuitableLayoutProps) {
return (
<>
<div className="container">
<div className="sale-contents">
<div className="border-frame">
<div className="pw-guide">
<div className="pw-guide-txt">この適合表は参考資料として使用してください.</div>
<div className="pw-guide-txt">詳細やお問い合わせは1：1お問い合わせをご利用ください.</div>
<div className="pw-guide-txt">屋根材の選択or屋根材名を直接入力してください.</div>
</div>
</div>
{children}
</div>
</div>
</>
)
}

9
src/app/suitable-test/page.tsx Normal file
View File

@ -0,0 +1,9 @@
import SuitableRaw from '@/components/suitable/SuitableRaw'
export default function page() {
return (
<>
<SuitableRaw />
</>
)
}

1
src/app/survey-sale/[id]/page.tsx
View File

@ -1,5 +1,4 @@
import DataTable from '@/components/survey-sale/detail/DataTable'
import DetailForm from '@/components/survey-sale/detail/DetailForm'
export default function page() {
return (

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

@ -1,9 +0,0 @@
import BasicForm from '@/components/survey-sale/detail/form/BasicForm'
export default function page() {
return (
<>
<BasicForm />
</>
)
}

5
src/app/survey-sale/layout.tsx
View File

@ -9,10 +9,7 @@ export default function layout({ children, navTab }: SurveySaleLayoutProps) {
return (
<>
<div className="container">
<div className="sale-contents">
{navTab}
{children}
</div>
<div className="sale-contents">{children}</div>
</div>
</>
)

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

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

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

@ -1,9 +0,0 @@
import RoofInfoForm from '@/components/survey-sale/detail/form/RoofInfoForm'
export default function page() {
return (
<>
<RoofInfoForm />
</>
)
}

748
src/components/DownloadPDF.tsx Normal file
View File

@ -0,0 +1,748 @@
'use client'
import { useRef } from 'react'
import generatePDF, { Margin, Resolution } from 'react-to-pdf'
export default function DownloadPdf() {
const targetRef = useRef<HTMLDivElement>(null)
const handleDownPdf = () => {
const options = {
method: 'open' as const,
resolution: Resolution.HIGH,
page: {
margin: Margin.SMALL,
format: 'A4',
orientation: 'portrait' as const,
},
canvas: {
mimeType: 'image/png' as const,
qualityRatio: 1,
},
overrides: {
pdf: {
compress: true,
},
canvas: {
useCORS: true,
},
},
}
generatePDF(targetRef, options)
// generatePDF(targetRef, { filename: 'page.pdf' })
}
return (
<>
<button onClick={handleDownPdf}>down</button>
<div ref={targetRef} style={{ boxSizing: 'border-box' }}>
<div style={{ margin: '0 auto', padding: 0, maxWidth: '800px', minWidth: '800px' }}>
<div style={{ padding: '20px 20px 50px', borderBottom: '2px solid #2E3A59' }}>
<div style={{ float: 'left', verticalAlign: 'middle', fontSize: '18px', color: '#101010', fontWeight: 600, fontFamily: 'M-Gothic' }}>
HWJ 現地調査シート1/2
</div>
<div style={{ float: 'right', overflow: 'hidden' }}>
<div style={{ float: 'left', marginRight: '20px' }}>
<p style={{ margin: 0, padding: 0, fontSize: '13px', color: '#101010', fontWeight: 500, fontFamily: 'M-Gothic', textAlign: 'right' }}>
現地明登施工店名
</p>
<p style={{ margin: 0, padding: 0, fontSize: '13px', color: '#FF5656', fontWeight: 400, fontFamily: 'M-Gothic' }}>
Sheet2 No.4Sheet2
</p>
</div>
<div style={{ float: 'right' }}>
<p style={{ margin: 0, padding: 0, fontSize: '13px', color: '#101010', fontWeight: 500, fontFamily: 'M-Gothic' }}>現地阴買日</p>
<p style={{ margin: 0, padding: 0, fontSize: '13px', color: '#FF5656', fontWeight: 400, fontFamily: 'M-Gothic' }}>2025.05.09</p>
</div>
</div>
</div>
<div style={{ padding: '24px 20px 12px' }}>
<table
style={{ width: '100%', tableLayout: 'fixed', borderCollapse: 'collapse', fontFamily: 'M-Gothic', WebkitPrintColorAdjust: 'exact' }}
>
<tbody>
<tr>
<th
style={{
padding: '10px',
width: '73px',
border: '1px solid #2E3A59',
backgroundColor: '#F5F6FA',
fontSize: '13px',
fontWeight: 500,
color: '#101010',
textAlign: 'left',
boxSizing: 'border-box',
}}
>
お客様名
</th>
<td
style={{
padding: '10px',
border: '1px solid #2E3A59',
fontSize: '13px',
fontWeight: 500,
color: '#FF5656',
boxSizing: 'border-box',
}}
>
Sheet2No.1
</td>
</tr>
<tr>
<th
style={{
padding: '10px',
width: '73px',
border: '1px solid #2E3A59',
backgroundColor: '#F5F6FA',
fontSize: '13px',
fontWeight: 500,
color: '#101010',
textAlign: 'left',
boxSizing: 'border-box',
}}
>
ご住所
</th>
<td
style={{
padding: '10px',
border: '1px solid #2E3A59',
fontSize: '13px',
fontWeight: 500,
color: '#FF5656',
boxSizing: 'border-box',
}}
>
Sheet2No.2
</td>
</tr>
</tbody>
</table>
</div>
<div style={{ padding: '12px 20px 12px' }}>
<div style={{ fontSize: '14px', fontFamily: 'M-Gothic', color: '#101010', fontWeight: 500, marginBottom: '10px' }}>も気開係</div>
<table
style={{ width: '100%', tableLayout: 'fixed', borderCollapse: 'collapse', fontFamily: 'M-Gothic', WebkitPrintColorAdjust: 'exact' }}
>
<tbody>
<tr>
<th
style={{
padding: '10px',
width: '126px',
border: '1px solid #2E3A59',
backgroundColor: '#F5F6FA',
fontSize: '13px',
fontWeight: 500,
color: '#101010',
textAlign: 'left',
boxSizing: 'border-box',
}}
>
雨気契约容国
</th>
<td
style={{
padding: '10px',
border: '1px solid #2E3A59',
fontSize: '13px',
fontWeight: 500,
color: '#FF5656',
boxSizing: 'border-box',
}}
>
Sheet2No.1
</td>
<th
style={{
padding: '10px',
width: '126px',
border: '1px solid #2E3A59',
backgroundColor: '#F5F6FA',
fontSize: '13px',
fontWeight: 500,
color: '#101010',
textAlign: 'left',
boxSizing: 'border-box',
}}
>
電気契約会社
</th>
<td
style={{
padding: '10px',
border: '1px solid #2E3A59',
fontSize: '13px',
fontWeight: 500,
color: '#FF5656',
boxSizing: 'border-box',
}}
>
Sheet2No.1
</td>
</tr>
<tr>
<th
style={{
padding: '10px',
width: '126px',
border: '1px solid #2E3A59',
backgroundColor: '#F5F6FA',
fontSize: '13px',
fontWeight: 500,
color: '#101010',
textAlign: 'left',
boxSizing: 'border-box',
}}
>
電気付带設備
</th>
<td
colSpan={3}
style={{
padding: '10px',
border: '1px solid #2E3A59',
fontSize: '13px',
fontWeight: 500,
color: '#FF5656',
boxSizing: 'border-box',
}}
>
Sheet2No.7 選式回答表示/自由入力回答表示
</td>
</tr>
<tr>
<th
style={{
padding: '10px',
width: '126px',
border: '1px solid #2E3A59',
backgroundColor: '#F5F6FA',
fontSize: '13px',
fontWeight: 500,
color: '#101010',
textAlign: 'left',
boxSizing: 'border-box',
}}
>
設置希望システム
</th>
<td
colSpan={3}
style={{
padding: '10px',
border: '1px solid #2E3A59',
fontSize: '13px',
fontWeight: 500,
color: '#FF5656',
boxSizing: 'border-box',
}}
>
Sheet2No.8 選択式回表示/自由入力回表
</td>
</tr>
</tbody>
</table>
</div>
<div style={{ padding: '12px 20px 12px' }}>
<div style={{ fontSize: '14px', fontFamily: 'M-Gothic', color: '#101010', fontWeight: 500, marginBottom: '10px' }}>屋根眀係</div>
<table
style={{ width: '100%', tableLayout: 'fixed', borderCollapse: 'collapse', fontFamily: 'M-Gothic', WebkitPrintColorAdjust: 'exact' }}
>
<tbody>
<tr>
<th
style={{
padding: '10px',
width: '126px',
border: '1px solid #2E3A59',
backgroundColor: '#F5F6FA',
fontSize: '13px',
fontWeight: 500,
color: '#101010',
textAlign: 'left',
boxSizing: 'border-box',
}}
>
築年数
</th>
<td
style={{
padding: '10px',
border: '1px solid #2E3A59',
fontSize: '13px',
fontWeight: 500,
color: '#FF5656',
boxSizing: 'border-box',
}}
>
No.9
</td>
<th
style={{
padding: '10px',
width: '126px',
border: '1px solid #2E3A59',
backgroundColor: '#F5F6FA',
fontSize: '13px',
fontWeight: 500,
color: '#101010',
textAlign: 'left',
boxSizing: 'border-box',
}}
>
至根材
</th>
<td
style={{
padding: '10px',
border: '1px solid #2E3A59',
fontSize: '13px',
fontWeight: 500,
color: '#FF5656',
boxSizing: 'border-box',
}}
>
No.10
</td>
<th
style={{
padding: '10px',
width: '126px',
border: '1px solid #2E3A59',
backgroundColor: '#F5F6FA',
fontSize: '13px',
fontWeight: 500,
color: '#101010',
textAlign: 'left',
boxSizing: 'border-box',
}}
>
座根形状
</th>
<td
style={{
padding: '10px',
border: '1px solid #2E3A59',
fontSize: '13px',
fontWeight: 500,
color: '#FF5656',
boxSizing: 'border-box',
}}
>
No.11
</td>
</tr>
<tr>
<th
style={{
padding: '10px',
width: '126px',
border: '1px solid #2E3A59',
backgroundColor: '#F5F6FA',
fontSize: '13px',
fontWeight: 500,
color: '#101010',
textAlign: 'left',
boxSizing: 'border-box',
}}
>
座根勾配
</th>
<td
style={{
padding: '10px',
border: '1px solid #2E3A59',
fontSize: '13px',
fontWeight: 500,
color: '#FF5656',
boxSizing: 'border-box',
}}
>
No.12
</td>
<th
style={{
padding: '10px',
width: '126px',
border: '1px solid #2E3A59',
backgroundColor: '#F5F6FA',
fontSize: '13px',
fontWeight: 500,
color: '#101010',
textAlign: 'left',
boxSizing: 'border-box',
}}
>
住宅樠造
</th>
<td
colSpan={3}
style={{
padding: '10px',
border: '1px solid #2E3A59',
fontSize: '13px',
fontWeight: 500,
color: '#FF5656',
boxSizing: 'border-box',
}}
>
No.13
</td>
</tr>
<tr>
<th
style={{
padding: '10px',
width: '126px',
border: '1px solid #2E3A59',
backgroundColor: '#F5F6FA',
fontSize: '13px',
fontWeight: 500,
color: '#101010',
textAlign: 'left',
boxSizing: 'border-box',
}}
>
並木材質
</th>
<td
style={{
padding: '10px',
border: '1px solid #2E3A59',
fontSize: '13px',
fontWeight: 500,
color: '#FF5656',
boxSizing: 'border-box',
}}
>
No.14
</td>
<th
style={{
padding: '10px',
width: '126px',
border: '1px solid #2E3A59',
backgroundColor: '#F5F6FA',
fontSize: '13px',
fontWeight: 500,
color: '#101010',
textAlign: 'left',
boxSizing: 'border-box',
}}
>
垂木サイズ
</th>
<td
colSpan={3}
style={{
padding: '10px',
border: '1px solid #2E3A59',
fontSize: '13px',
fontWeight: 500,
color: '#FF5656',
boxSizing: 'border-box',
}}
>
No.15
</td>
</tr>
<tr>
<th
style={{
padding: '10px',
width: '126px',
border: '1px solid #2E3A59',
backgroundColor: '#F5F6FA',
fontSize: '13px',
fontWeight: 500,
color: '#101010',
textAlign: 'left',
boxSizing: 'border-box',
}}
>
垂木ビッチ
</th>
<td
style={{
padding: '10px',
border: '1px solid #2E3A59',
fontSize: '13px',
fontWeight: 500,
color: '#FF5656',
boxSizing: 'border-box',
}}
>
No.16
</td>
<th
style={{
padding: '10px',
width: '126px',
border: '1px solid #2E3A59',
backgroundColor: '#F5F6FA',
fontSize: '13px',
fontWeight: 500,
color: '#101010',
textAlign: 'left',
boxSizing: 'border-box',
}}
>
垂木方向
</th>
<td
colSpan={3}
style={{
padding: '10px',
border: '1px solid #2E3A59',
fontSize: '13px',
fontWeight: 500,
color: '#FF5656',
boxSizing: 'border-box',
}}
>
No.17
</td>
</tr>
<tr>
<th
style={{
padding: '10px',
width: '126px',
border: '1px solid #2E3A59',
backgroundColor: '#F5F6FA',
fontSize: '13px',
fontWeight: 500,
color: '#101010',
textAlign: 'left',
boxSizing: 'border-box',
}}
>
野地板種類
</th>
<td
style={{
padding: '10px',
border: '1px solid #2E3A59',
fontSize: '13px',
fontWeight: 500,
color: '#FF5656',
boxSizing: 'border-box',
}}
>
No.18
</td>
<th
style={{
padding: '10px',
width: '126px',
border: '1px solid #2E3A59',
backgroundColor: '#F5F6FA',
fontSize: '13px',
fontWeight: 500,
color: '#101010',
textAlign: 'left',
boxSizing: 'border-box',
}}
>
野地板厚さ
</th>
<td
colSpan={3}
style={{
padding: '10px',
border: '1px solid #2E3A59',
fontSize: '13px',
fontWeight: 500,
color: '#FF5656',
boxSizing: 'border-box',
}}
>
No.19
</td>
</tr>
<tr>
<th
style={{
padding: '10px',
width: '126px',
border: '1px solid #2E3A59',
backgroundColor: '#F5F6FA',
fontSize: '13px',
fontWeight: 500,
color: '#101010',
textAlign: 'left',
boxSizing: 'border-box',
}}
>
兩漏の形跡
</th>
<td
colSpan={5}
style={{
padding: '10px',
border: '1px solid #2E3A59',
fontSize: '13px',
fontWeight: 500,
color: '#FF5656',
boxSizing: 'border-box',
}}
>
No.20
</td>
</tr>
<tr>
<th
style={{
padding: '10px',
width: '126px',
border: '1px solid #2E3A59',
backgroundColor: '#F5F6FA',
fontSize: '13px',
fontWeight: 500,
color: '#101010',
textAlign: 'left',
boxSizing: 'border-box',
}}
>
ルーフィング種類
</th>
<td
colSpan={5}
style={{
padding: '10px',
border: '1px solid #2E3A59',
fontSize: '13px',
fontWeight: 500,
color: '#FF5656',
boxSizing: 'border-box',
}}
>
No.21
</td>
</tr>
<tr>
<th
style={{
padding: '10px',
width: '126px',
border: '1px solid #2E3A59',
backgroundColor: '#F5F6FA',
fontSize: '13px',
fontWeight: 500,
color: '#101010',
textAlign: 'left',
boxSizing: 'border-box',
}}
>
断熱材の有無
</th>
<td
colSpan={5}
style={{
padding: '10px',
border: '1px solid #2E3A59',
fontSize: '13px',
fontWeight: 500,
color: '#FF5656',
boxSizing: 'border-box',
}}
>
No.22
</td>
</tr>
<tr>
<th
style={{
padding: '10px',
width: '126px',
border: '1px solid #2E3A59',
backgroundColor: '#F5F6FA',
fontSize: '13px',
fontWeight: 500,
color: '#101010',
textAlign: 'left',
boxSizing: 'border-box',
}}
>
屋根構造の順番
</th>
<td
colSpan={5}
style={{
padding: '10px',
border: '1px solid #2E3A59',
fontSize: '13px',
fontWeight: 500,
color: '#FF5656',
boxSizing: 'border-box',
}}
>
No.23
</td>
</tr>
</tbody>
</table>
</div>
<div style={{ padding: '12px 20px' }}>
<table
style={{ width: '100%', tableLayout: 'fixed', borderCollapse: 'collapse', fontFamily: 'M-Gothic', WebkitPrintColorAdjust: 'exact' }}
>
<tbody>
<tr>
<th
style={{
padding: '10px',
width: '160px',
border: '1px solid #2E3A59',
backgroundColor: '#F5F6FA',
fontSize: '13px',
fontWeight: 500,
color: '#101010',
textAlign: 'left',
boxSizing: 'border-box',
}}
>
区根製品名設置可否確認
</th>
<td
colSpan={5}
style={{
padding: '10px',
border: '1px solid #2E3A59',
fontSize: '13px',
fontWeight: 500,
color: '#FF5656',
boxSizing: 'border-box',
}}
>
No.23
</td>
</tr>
</tbody>
</table>
</div>
<div style={{ padding: '12px 20px 12px' }}>
<div style={{ fontSize: '14px', fontFamily: 'M-Gothic', color: '#101010', fontWeight: 500, marginBottom: '10px' }}>メモ</div>
<div
style={{
boxSizing: 'border-box',
padding: '10px',
fontSize: '13px',
fontWeight: 400,
fontFamily: 'M-Gothic',
color: '#FF5656',
border: '1px solid #2E3A59',
height: '150px',
}}
>
No.25
</div>
</div>
</div>
</div>
</>
)
}

27
src/components/Login.tsx
View File

@ -3,10 +3,8 @@
import type { SessionData } from '@/types/Auth'
import { useEffect, useReducer, useState } from 'react'
import { useRouter } from 'next/navigation'
import { useLocalStorage } from 'usehooks-ts'
import { useQuery } from '@tanstack/react-query'
import { axiosInstance } from '@/libs/axios'
import { useSessionStore } from '@/store/session'
@ -35,6 +33,11 @@ export default function Login() {
pwd: '',
})
const isValidEmail = (email: string) => {
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
return emailRegex.test(email)
}
interface LoginData {
code: number
message: string | null
@ -48,7 +51,14 @@ export default function Login() {
} = useQuery<LoginData, Error>({
queryKey: ['login', 'account'],
queryFn: async () => {
const { data } = await axiosInstance('').post<LoginData>(`/api/auth`, {
let url = ''
if (!isPartners) {
url = '/api/auth'
} else {
url = '/api/partner'
}
const { data } = await axiosInstance('').post<LoginData>(`${url}`, {
loginId: account.loginId,
pwd: account.pwd,
})
@ -68,6 +78,7 @@ export default function Login() {
indivisualData: account.pwd,
})
// 세션 정보 저장
console.log('🚀 ~ Login ~ loginData:', loginData)
setSession({
...session,
...loginData?.result,
@ -76,6 +87,14 @@ export default function Login() {
}
}, [loginData])
useEffect(() => {
if (isValidEmail(account.loginId)) {
setIsPartners(true)
} else {
setIsPartners(false)
}
}, [account.loginId])
return (
<>
<div className="login-form-wrap">
@ -88,7 +107,7 @@ export default function Login() {
value={account.loginId}
onChange={(e) => setAccount({ loginId: e.target.value })}
/>
<button className="login-icon">
<button className="login-icon" onClick={() => setAccount({ loginId: '' })}>
<i className="del-icon"></i>
</button>
</div>

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

@ -57,9 +57,11 @@ export default function MemberInformationPopup() {
<input type="text" className="input-frame" defaultValue={session.builderNo ?? ''} disabled />
</div>
</div>
{session.role !== 'Partner' && (
<button className="btn-frame n-blue icon" onClick={handlePwReset}>
パスワードリセット<i className="btn-arr"></i>
</button>
)}
</div>
</div>
</div>

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

@ -1,28 +1,70 @@
'use client'
import { useState } from 'react'
import SuitableCheckData from './SuitableCheckData'
import SuitableNoData from './SuitableNoData'
import Image from 'next/image'
import { useEffect, useState } from 'react'
import SuitableList from './SuitableList'
import { useSuitable } from '@/hooks/useSuitable'
import { useSuitableStore } from '@/store/useSuitableStore'
import type { CommCode } from '@/types/CommCode'
import { SUITABLE_HEAD_CODE } from '@/types/Suitable'
export default function Suitable() {
const [reference, setReference] = useState(false)
const [reference, setReference] = useState(true)
const { getSuitableCommCode, refetchBySearch } = useSuitable()
const { suitableCommCode, selectedCategory, setSelectedCategory, searchValue, setSearchValue, setIsSearch, clearSelectedItems } = useSuitableStore()
const handleInputSearch = async () => {
if (!searchValue.trim()) {
alert('屋根材の製品名を入力してください。')
return
}
setIsSearch(true)
refetchBySearch()
}
const handleInputClear = () => {
setSearchValue('')
setIsSearch(false)
refetchBySearch()
}
useEffect(() => {
refetchBySearch()
}, [selectedCategory])
useEffect(() => {
getSuitableCommCode()
return () => {
setSelectedCategory('')
setSearchValue('')
clearSelectedItems()
}
}, [])
return (
<div className="border-frame">
<div className="sale-form-bx">
<select className="select-form" name="" id="">
<option value="">屋根材を選択してください.</option>
<option value="">屋根材を選択してください.</option>
<option value="">屋根材を選択してください.</option>
<option value="">屋根材を選択してください.</option>
<select className="select-form" name="" id="" value={selectedCategory || ''} onChange={(e) => setSelectedCategory(e.target.value)}>
<option value="">屋根材を選択してください.</option>
{suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MT_CD)?.map((category: CommCode, index: number) => (
<option key={index} value={category.code}>
{category.codeJp}
</option>
))}
</select>
</div>
<div className="sale-form-bx">
<div className="search-input">
<input type="text" className="search-frame" placeholder="屋根材 製品名を入力してください." />
<button className="search-icon"></button>
<input
type="text"
className="search-frame"
placeholder="屋根材 製品名を入力してください."
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
/>
{searchValue && <button className="del-icon" onClick={handleInputClear} />}
<button className="search-icon" onClick={handleInputSearch} />
</div>
</div>
<div className="compliance-check-wrap">
@ -68,37 +110,8 @@ export default function Suitable() {
</li>
</ul>
</div>
{/* checkData */}
{/* 데이터 없을경우 버튼 영역 안보여야함 */}
<SuitableCheckData />
<SuitableCheckData />
<SuitableCheckData />
<SuitableCheckData />
{/* 데이터 없을경우 버튼 영역 안보여야함 */}
<div className="float-btn-wrap">
<div className="btn-flex-wrap com">
<div className="btn-bx">
<button className="btn-frame n-blue icon">
全選択<i className="btn-arr"></i>
</button>
<SuitableList />
</div>
<div className="btn-bx">
<button className="btn-frame red icon">
詳細を見る<i className="btn-arr"></i>
</button>
</div>
<div className="btn-bx">
<button className="btn-frame n-blue icon">
選択ダウンロード<i className="btn-arr"></i>
</button>
</div>
</div>
</div>
</div>
{/* 검색기록 없을떄 위에 두 영역 안보이고 이 부분만 보여야 함*/}
{/* <SuitableNoData /> */}
</div>
)
}

25
src/components/suitable/SuitableButton.tsx Normal file
View File

@ -0,0 +1,25 @@
'use client'
export default function SuitableButton() {
return (
<div className="float-btn-wrap">
<div className="btn-flex-wrap com">
<div className="btn-bx">
<button className="btn-frame n-blue icon">
全選択<i className="btn-arr"></i>
</button>
</div>
<div className="btn-bx">
<button className="btn-frame red icon">
詳細を見る<i className="btn-arr"></i>
</button>
</div>
<div className="btn-bx">
<button className="btn-frame n-blue icon">
選択ダウンロード<i className="btn-arr"></i>
</button>
</div>
</div>
</div>
)
}

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

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

174
src/components/suitable/SuitableList.tsx Normal file
View File

@ -0,0 +1,174 @@
'use client'
import Image from 'next/image'
import { useState, useEffect, useRef, useCallback, useMemo } from 'react'
import SuitableButton from './SuitableButton'
import SuitableNoData from './SuitableNoData'
import { useSuitable } from '@/hooks/useSuitable'
import { useSuitableStore } from '@/store/useSuitableStore'
import { SUITABLE_HEAD_CODE, type SuitableMain, type SuitableDetail } from '@/types/Suitable'
// 한 번에 로드할 아이템 수
const ITEMS_PER_PAGE = 100
export default function SuitableList() {
const { toCodeName, suitableSearchResults, isSearchLoading, toSuitableDetail } = useSuitable()
const { selectedItems, addSelectedItem, removeSelectedItem } = useSuitableStore()
const [openItems, setOpenItems] = useState<Set<number>>(new Set())
const [visibleItems, setVisibleItems] = useState<SuitableMain[]>([])
const [page, setPage] = useState(1)
const [isLoadingMore, setIsLoadingMore] = useState(false)
const observerTarget = useRef<HTMLDivElement>(null)
// 선택된 아이템 확인 함수 메모이제이션
const isItemSelected = useCallback(
(itemId: number) => {
return selectedItems.some((selected) => selected === itemId)
},
[selectedItems],
)
// 초기 데이터 로드
useEffect(() => {
if (suitableSearchResults) {
const initialItems = suitableSearchResults.suitable.slice(0, ITEMS_PER_PAGE)
setVisibleItems(initialItems)
setPage(1)
}
}, [suitableSearchResults])
// Intersection Observer 설정
useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting && suitableSearchResults && !isLoadingMore) {
const nextPage = page + 1
const startIndex = (nextPage - 1) * ITEMS_PER_PAGE
const endIndex = startIndex + ITEMS_PER_PAGE
const nextItems = suitableSearchResults.suitable.slice(startIndex, endIndex)
if (nextItems.length > 0) {
setIsLoadingMore(true)
setVisibleItems((prev) => [...prev, ...nextItems])
setPage(nextPage)
setIsLoadingMore(false)
}
}
},
{
threshold: 0.2,
},
)
if (observerTarget.current) {
observer.observe(observerTarget.current)
}
return () => observer.disconnect()
}, [page, suitableSearchResults, isLoadingMore])
const handleItemClick = useCallback(
(itemId: number) => {
isItemSelected(itemId) ? removeSelectedItem(itemId) : addSelectedItem(itemId)
},
[isItemSelected, addSelectedItem, removeSelectedItem],
)
const toggleItemOpen = useCallback((itemId: number) => {
setOpenItems((prev) => {
const newOpenItems = new Set(prev)
newOpenItems.has(itemId) ? newOpenItems.delete(itemId) : newOpenItems.add(itemId)
return newOpenItems
})
}, [])
// TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요
const suitableCheck = useCallback((value: string) => {
if (value === '×') {
return (
<div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
</div>
)
} else if (value === 'ー') {
return (
<div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
</div>
)
} else {
return (
<div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
</div>
)
}
}, [])
// 메모이제이션된 아이템 렌더링
const renderItem = useCallback(
(item: SuitableMain) => {
const isSelected = isItemSelected(item.id)
const isOpen = openItems.has(item.id)
return (
<div className={`compliance-check-bx ${isOpen ? 'act' : ''}`} key={item.id}>
<div className="check-name-wrap">
<div className="check-form-box ">
<input type="checkbox" id={`ch${item.id}`} checked={isSelected} onChange={() => handleItemClick(item.id)} />
<label htmlFor={`ch${item.id}`}>{item.productName}</label>
</div>
<div className="check-name-btn">
<button className="bx-btn" onClick={() => toggleItemOpen(item.id)}></button>
</div>
</div>
<ul className="reference-list check">
{toSuitableDetail(item.id).map((subItem: SuitableDetail) => (
<li className="reference-item" key={subItem.id}>
<div className="check-item-wrap">
<div className="check-form-box light">
<input type="checkbox" id={`ch${subItem.id}`} />
<label htmlFor={`ch${subItem.id}`}>{toCodeName(SUITABLE_HEAD_CODE.TRESTLE_MFPC_CD, subItem.trestleMfpcCd)}</label>
</div>
<div className="compliance-icon-wrap">
{suitableCheck(subItem.trestleManufacturerProductName)}
{subItem.memo && (
<div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
</div>
)}
</div>
</div>
</li>
))}
</ul>
</div>
)
},
[isItemSelected, openItems, handleItemClick, toggleItemOpen, suitableCheck, toCodeName, toSuitableDetail],
)
// 메모이제이션된 아이템 리스트
const renderedItems = useMemo(() => {
return visibleItems.map(renderItem)
}, [visibleItems, renderItem])
if (isSearchLoading) {
return <div>Loading...</div>
}
if (!suitableSearchResults?.suitable.length) {
return <SuitableNoData />
}
return (
<>
{renderedItems}
<div ref={observerTarget} className="loading-indicator">
{isLoadingMore && <div className="loading-more">데이터를 불러오는 중...</div>}
</div>
<SuitableButton />
</>
)
}

173
src/components/suitable/SuitableListRaw.tsx Normal file
View File

@ -0,0 +1,173 @@
'use client'
import Image from 'next/image'
import { useState, useEffect, useRef, useCallback, useMemo } from 'react'
import SuitableButton from './SuitableButton'
import SuitableNoData from './SuitableNoData'
import { useSuitableRaw, type Suitable } from '@/hooks/useSuitableRaw'
import { useSuitableStore } from '@/store/useSuitableStore'
import { SUITABLE_HEAD_CODE, type SuitableDetail } from '@/types/Suitable'
// 한 번에 로드할 아이템 수
const ITEMS_PER_PAGE = 100
export default function SuitableListRaw() {
const { toCodeName, suitableSearchResults, isSearchLoading, toSuitableDetail } = useSuitableRaw()
const { selectedItems, addSelectedItem, removeSelectedItem } = useSuitableStore()
const [openItems, setOpenItems] = useState<Set<number>>(new Set())
const [visibleItems, setVisibleItems] = useState<Suitable[]>([])
const [page, setPage] = useState(1)
const [isLoadingMore, setIsLoadingMore] = useState(false)
const observerTarget = useRef<HTMLDivElement>(null)
// 선택된 아이템 확인 함수 메모이제이션
const isItemSelected = useCallback(
(itemId: number) => {
return selectedItems.some((selected) => selected === itemId)
},
[selectedItems],
)
// 초기 데이터 로드
useEffect(() => {
if (suitableSearchResults) {
const initialItems = suitableSearchResults.slice(0, ITEMS_PER_PAGE)
setVisibleItems(initialItems)
setPage(1)
}
}, [suitableSearchResults])
// Intersection Observer 설정
useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
if (entries[0].isIntersecting && suitableSearchResults && !isLoadingMore) {
const nextPage = page + 1
const startIndex = (nextPage - 1) * ITEMS_PER_PAGE
const endIndex = startIndex + ITEMS_PER_PAGE
const nextItems = suitableSearchResults.slice(startIndex, endIndex)
if (nextItems.length > 0) {
setIsLoadingMore(true)
setVisibleItems((prev) => [...prev, ...nextItems])
setPage(nextPage)
setIsLoadingMore(false)
}
}
},
{
threshold: 0.2,
},
)
if (observerTarget.current) {
observer.observe(observerTarget.current)
}
return () => observer.disconnect()
}, [page, suitableSearchResults, isLoadingMore])
const handleItemClick = useCallback(
(itemId: number) => {
isItemSelected(itemId) ? removeSelectedItem(itemId) : addSelectedItem(itemId)
},
[isItemSelected, addSelectedItem, removeSelectedItem],
)
const toggleItemOpen = useCallback((itemId: number) => {
setOpenItems((prev) => {
const newOpenItems = new Set(prev)
newOpenItems.has(itemId) ? newOpenItems.delete(itemId) : newOpenItems.add(itemId)
return newOpenItems
})
}, [])
// TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요
const suitableCheck = useCallback((value: string) => {
if (value === '×') {
return (
<div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
</div>
)
} else if (value === 'ー') {
return (
<div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
</div>
)
} else {
return (
<div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
</div>
)
}
}, [])
// 메모이제이션된 아이템 렌더링
const renderItem = useCallback(
(item: Suitable) => {
const isSelected = isItemSelected(item.id)
const isOpen = openItems.has(item.id)
return (
<div className={`compliance-check-bx ${isOpen ? 'act' : ''}`} key={item.id}>
<div className="check-name-wrap">
<div className="check-form-box ">
<input type="checkbox" id={`ch${item.id}`} checked={isSelected} onChange={() => handleItemClick(item.id)} />
<label htmlFor={`ch${item.id}`}>{item.productName}</label>
</div>
<div className="check-name-btn">
<button className="bx-btn" onClick={() => toggleItemOpen(item.id)}></button>
</div>
</div>
<ul className="reference-list check">
{toSuitableDetail(item.detail).map((subItem: SuitableDetail) => (
<li className="reference-item" key={subItem.id}>
<div className="check-item-wrap">
<div className="check-form-box light">
<input type="checkbox" id={`ch${subItem.id}`} />
<label htmlFor={`ch${subItem.id}`}>{toCodeName(SUITABLE_HEAD_CODE.TRESTLE_MFPC_CD, subItem.trestleMfpcCd)}</label>
</div>
<div className="compliance-icon-wrap">
{suitableCheck(subItem.trestleManufacturerProductName)}
{subItem.memo && (
<div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
</div>
)}
</div>
</div>
</li>
))}
</ul>
</div>
)
},
[isItemSelected, openItems, handleItemClick, toggleItemOpen, suitableCheck, toCodeName, toSuitableDetail],
)
// 메모이제이션된 아이템 리스트
const renderedItems = useMemo(() => {
return visibleItems.map(renderItem)
}, [visibleItems, renderItem])
if (isSearchLoading) {
return <div>Loading...</div>
}
if (!suitableSearchResults?.length) {
return <SuitableNoData />
}
return (
<>
{renderedItems}
<div ref={observerTarget} className="loading-indicator">
{isLoadingMore && <div className="loading-more">데이터를 불러오는 중...</div>}
</div>
<SuitableButton />
</>
)
}

118
src/components/suitable/SuitableRaw.tsx Normal file
View File

@ -0,0 +1,118 @@
'use client'
import Image from 'next/image'
import { useEffect, useState } from 'react'
import SuitableListRaw from './SuitableListRaw'
import { useSuitableRaw } from '@/hooks/useSuitableRaw'
import { useSuitableStore } from '@/store/useSuitableStore'
import type { CommCode } from '@/types/CommCode'
import { SUITABLE_HEAD_CODE } from '@/types/Suitable'
export default function SuitableRaw() {
const [reference, setReference] = useState(true)
const { getSuitableCommCode, refetchBySearch } = useSuitableRaw()
const { suitableCommCode, selectedCategory, setSelectedCategory, searchValue, setSearchValue, setIsSearch, clearSelectedItems } = useSuitableStore()
const handleInputSearch = async () => {
if (!searchValue.trim()) {
alert('屋根材の製品名を入力してください。')
return
}
setIsSearch(true)
refetchBySearch()
}
const handleInputClear = () => {
setSearchValue('')
setIsSearch(false)
refetchBySearch()
}
useEffect(() => {
refetchBySearch()
}, [selectedCategory])
useEffect(() => {
getSuitableCommCode()
return () => {
setSelectedCategory('')
setSearchValue('')
clearSelectedItems()
}
}, [])
return (
<div className="border-frame">
<span>테스트1 페이지</span>
<div className="sale-form-bx">
<select className="select-form" name="" id="" value={selectedCategory || ''} onChange={(e) => setSelectedCategory(e.target.value)}>
<option value="">屋根材を選択してください.</option>
{suitableCommCode.get(SUITABLE_HEAD_CODE.ROOF_MT_CD)?.map((category: CommCode, index: number) => (
<option key={index} value={category.code}>
{category.codeJp}
</option>
))}
</select>
</div>
<div className="sale-form-bx">
<div className="search-input">
<input
type="text"
className="search-frame"
placeholder="屋根材 製品名を入力してください."
value={searchValue}
onChange={(e) => setSearchValue(e.target.value)}
/>
{searchValue && <button className="del-icon" onClick={handleInputClear} />}
<button className="search-icon" onClick={handleInputSearch} />
</div>
</div>
<div className="compliance-check-wrap">
<div className={`compliance-check-bx ${reference ? 'act' : ''}`}>
<div className="check-name-wrap">
<div className="check-name">凡例</div>
<div className="check-name-btn">
<button className="bx-btn" onClick={() => setReference(!reference)}></button>
</div>
</div>
<ul className="reference-list">
<li className="reference-item">
<div className="reference-item-bx">
<div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
</div>
<span>設置可能</span>
</div>
</li>
<li className="reference-item">
<div className="reference-item-bx">
<div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_x_icon.svg'} width={22} height={22} alt=""></Image>
</div>
<span>設置不可</span>
</div>
</li>
<li className="reference-item">
<div className="reference-item-bx">
<div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
</div>
<span>お問い合わせ</span>
</div>
</li>
<li className="reference-item">
<div className="reference-item-bx">
<div className="compliance-icon">
<Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
</div>
<span>備考</span>
</div>
</li>
</ul>
</div>
<SuitableListRaw />
</div>
</div>
)
}

165
src/components/survey-sale/detail/BasicForm.tsx Normal file
View File

@ -0,0 +1,165 @@
'use client'
import { useEffect, useState } from 'react'
import { useSurveySaleTabState } from '@/store/surveySaleTabState'
import type { SurveyBasicRequest } from '@/types/Survey'
import type { Mode } from 'fs'
import { useSessionStore } from '@/store/session'
import { usePopupController } from '@/store/popupController'
import { useAddressStore } from '@/store/addressStore'
export default function BasicForm(props: { basicInfo: SurveyBasicRequest; setBasicInfo: (basicInfo: SurveyBasicRequest) => void; mode: Mode }) {
const { basicInfo, setBasicInfo, mode } = props
const { setBasicInfoSelected } = useSurveySaleTabState()
const [isFlip, setIsFlip] = useState<boolean>(true)
const { session } = useSessionStore()
const { addressData } = useAddressStore()
useEffect(() => {
setBasicInfoSelected()
}, [])
useEffect(() => {
if (session?.isLoggedIn) {
setBasicInfo({
...basicInfo,
representative: session.userNm ?? '',
store: session.storeNm ?? null,
constructionPoint: session.builderNo ?? null,
})
}
if (addressData) {
setBasicInfo({
...basicInfo,
postCode: addressData.post_code,
address: addressData.address,
addressDetail: addressData.address_detail,
})
}
}, [session, addressData])
const popupController = usePopupController()
return (
<>
<div className={`sale-detail-toggle-bx ${isFlip ? 'act' : ''}`}>
<div className="sale-detail-toggle-head" onClick={() => setIsFlip(!isFlip)}>
<div className="sale-detail-toggle-name">基本情報</div>
<div className="sale-detail-toggle-btn-wrap">
<button className="sale-detail-toggle-btn"></button>
</div>
</div>
<div className="sale-detail-toggle-cont">
<div className="sale-frame">
<div className="data-form-wrap">
<div className="data-input-form-bx">
<div className="data-input-form-tit">担当者名</div>
<input
type="text"
className="input-frame"
readOnly
value={basicInfo?.representative ?? ''}
onChange={(e) => setBasicInfo({ ...basicInfo, representative: e.target.value })}
/>
</div>
{(session?.role === 'Builder' || session?.role?.includes('Admin')) && (
<div className="data-input-form-bx">
<div className="data-input-form-tit">販売店</div>
<input
type="text"
className="input-frame"
readOnly
value={basicInfo?.store ?? ''}
onChange={(e) => setBasicInfo({ ...basicInfo, store: e.target.value })}
/>
</div>
)}
{(session?.role === 'Builder' || session?.role === 'Partner') && (
<div className="data-input-form-bx">
<div className="data-input-form-tit">施工店</div>
<input
type="text"
className="input-frame"
readOnly
value={basicInfo?.constructionPoint ?? ''}
onChange={(e) => setBasicInfo({ ...basicInfo, constructionPoint: e.target.value })}
/>
</div>
)}
</div>
</div>
<div className="sale-frame">
<div className="data-form-wrap">
<div className="data-input-form-bx">
<div className="data-input-form-tit">現地調査日</div>
{['CREATE', 'EDIT'].includes(mode as 'CREATE' | 'EDIT') ? (
<div className="date-input">
<button className="date-btn">
<i className="date-icon"></i>
</button>
<input
id="investigationDate"
type="date"
className="date-frame"
defaultValue={basicInfo?.investigationDate?.toString()}
onChange={(e) => setBasicInfo({ ...basicInfo, investigationDate: e.target.value })}
/>
</div>
) : (
<input type="date" className="input-frame" disabled defaultValue={basicInfo?.investigationDate?.toString()} />
)}
</div>
<div className="data-input-form-bx">
{/* 건물명 */}
<div className="data-input-form-tit">建物名</div>
<input
type="text"
className="input-frame"
readOnly={mode === 'READ'}
defaultValue={basicInfo?.buildingName ?? ''}
onChange={(e) => setBasicInfo({ ...basicInfo, buildingName: e.target.value })}
/>
</div>
<div className="data-input-form-bx">
{/* 고객명 */}
<div className="data-input-form-tit">お客様名</div>
<input
type="text"
className="input-frame"
readOnly={mode === 'READ'}
defaultValue={basicInfo?.customerName ?? ''}
onChange={(e) => setBasicInfo({ ...basicInfo, customerName: e.target.value })}
/>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">郵便番号/都道府県</div>
<div className="form-flex">
{/* 우편번호 */}
<div className="form-bx">
<input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={basicInfo?.postCode ?? ''} disabled />
</div>
{/* 도도부현 */}
<div className="form-bx">
<input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={basicInfo?.address ?? ''} />
</div>
</div>
{/* 주소 */}
<div className="form-btn">
<button className="btn-frame n-blue icon" onClick={() => popupController.setZipCodePopup(true)}>
郵便番号<i className="btn-arr"></i>
</button>
</div>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">市区町村名, 以後の住所</div>
<input type="text" className="input-frame" defaultValue={basicInfo?.addressDetail ?? ''} readOnly={mode === 'READ'} />
</div>
</div>
</div>
</div>
</div>
</>
)
}

267
src/components/survey-sale/detail/ButtonForm.tsx Normal file
View File

@ -0,0 +1,267 @@
'use client'
import type { Mode, SurveyBasicRequest, SurveyDetailInfo, SurveyDetailRequest } from '@/types/Survey'
import { useSessionStore } from '@/store/session'
import { useEffect, useState } from 'react'
import { useParams, useRouter, useSearchParams } from 'next/navigation'
import { requiredFields, useServey } from '@/hooks/useSurvey'
export default function ButtonForm(props: {
mode: Mode
setMode: (mode: Mode) => void
data: { basic: SurveyBasicRequest; roof: SurveyDetailRequest }
}) {
// 라우터
const router = useRouter()
const { mode, setMode } = props
const { session } = useSessionStore()
const searchParams = useSearchParams()
const idParam = searchParams.get('id')
const params = useParams()
const routeId = params.id
const [isSubmitProcess, setIsSubmitProcess] = useState(false)
// ------------------------------------------------------------
// 권한
// 제출권한 ㅇ
const [isSubmiter, setIsSubmiter] = useState(false)
// 작성자
const [isWriter, setIsWriter] = useState(false)
const isSubmit = props.data.basic.submissionStatus
useEffect(() => {
if (session?.isLoggedIn) {
setIsSubmiter(session.storeNm === props.data.basic.store && session.builderNo === props.data.basic.constructionPoint)
setIsWriter(session.userNm === props.data.basic.representative)
}
}, [session, props.data])
// ------------------------------------------------------------
// 저장/임시저장/수정
const id = routeId ? Number(routeId) : Number(idParam)
const { deleteSurvey, submitSurvey, updateSurvey } = useServey(Number(id))
const { validateSurveyDetail, createSurvey } = useServey()
let saveData = {
...props.data.basic,
detailInfo: props.data.roof,
}
const handleSave = (isTemporary: boolean) => {
const emptyField = validateSurveyDetail(props.data.roof)
console.log('handleSave, emptyField:: ', emptyField)
if (isTemporary) {
tempSaveProcess()
} else {
saveProcess(emptyField)
}
}
const tempSaveProcess = async () => {
if (idParam) {
await updateSurvey(saveData)
router.push(`/survey-sale/detail?id=${idParam}&isTemporary=true`)
} else {
const id = await createSurvey(saveData)
router.push(`/survey-sale/detail?id=${id}&isTemporary=true`)
}
alert('一時保存されました。')
}
const focusInput = (field: keyof SurveyDetailInfo) => {
const input = document.getElementById(field)
if (input) {
input.focus()
}
}
const saveProcess = async (emptyField: string) => {
if (emptyField.trim() === '') {
if (idParam) {
// 수정 페이지에서 작성 후 제출
if (isSubmitProcess) {
saveData = {
...saveData,
submissionStatus: true,
submissionDate: new Date().toISOString(),
}
}
await updateSurvey(saveData)
router.push(`/survey-sale/${idParam}`)
} else {
const id = await createSurvey(saveData)
if (isSubmitProcess) {
submitProcess(id)
return
}
router.push(`/survey-sale/${id}`)
}
alert('保存されました。')
} else {
if (emptyField.includes('Unit')) {
alert('電気契約容量の単位を入力してください。')
focusInput(emptyField as keyof SurveyDetailInfo)
} else {
alert(requiredFields.find((field) => field.field === emptyField)?.name + ' 項目が空です。')
focusInput(emptyField as keyof SurveyDetailInfo)
}
}
}
// ------------------------------------------------------------
// 삭제/제출
const handleDelete = async () => {
if (routeId) {
window.neoConfirm('削除しますか？', async () => {
await deleteSurvey()
router.push('/survey-sale')
})
}
}
const handleSubmit = async () => {
window.neoConfirm('提出しますか？', async () => {
setIsSubmitProcess(true)
if (routeId) {
submitProcess()
} else {
handleSave(false)
}
})
}
const submitProcess = async (saveId?: number) => {
await submitSurvey(saveId)
alert('提出されました。')
router.push('/survey-sale')
}
// ------------------------------------------------------------
if (mode === 'READ' && isSubmit && isSubmiter) {
return (
<>
<div className="sale-form-btn-wrap">
<div className="btn-flex-wrap">
<ListButton />
</div>
</div>
</>
)
}
return (
<>
{mode === 'READ' && (
<div className="sale-form-btn-wrap">
<div className="btn-flex-wrap">
<ListButton />
<EditButton setMode={setMode} id={id.toString()} mode={mode} />
{(isWriter || !isSubmiter) && <DeleteButton handleDelete={handleDelete} />}
{!isSubmit && isSubmiter && <SubmitButton handleSubmit={handleSubmit} />}
</div>
</div>
)}
{(mode === 'CREATE' || mode === 'EDIT') && (
<div className="sale-form-btn-wrap">
<div className="btn-flex-wrap">
<ListButton />
<TempButton setMode={setMode} handleSave={handleSave} />
<SaveButton handleSave={handleSave} />
<SubmitButton handleSubmit={handleSubmit} />
</div>
</div>
)}
</>
)
}
// 목록 버튼
function ListButton() {
const router = useRouter()
return (
<div className="btn-bx">
{/* 목록 */}
<button className="btn-frame n-blue icon" onClick={() => router.push('/survey-sale')}>
リスト<i className="btn-arr"></i>
</button>
</div>
)
}
function EditButton(props: { setMode: (mode: Mode) => void; id: string; mode: Mode }) {
const { setMode, id, mode } = props
const router = useRouter()
return (
<div className="btn-bx">
{/* 수정 */}
<button
className="btn-frame n-blue icon"
onClick={() => {
router.push(`/survey-sale/regist?id=${id}`)
setMode('EDIT')
}}
>
修正<i className="btn-arr"></i>
</button>
</div>
)
}
function SubmitButton(props: { handleSubmit: () => void }) {
const { handleSubmit } = props
return (
<div className="btn-bx">
{/* 제출 */}
<button className="btn-frame red icon" onClick={handleSubmit}>
提出<i className="btn-arr"></i>
</button>
</div>
)
}
function DeleteButton(props: { handleDelete: () => void }) {
const { handleDelete } = props
return (
<div className="btn-bx">
{/* 삭제 */}
<button className="btn-frame n-blue icon" onClick={handleDelete}>
削除<i className="btn-arr"></i>
</button>
</div>
)
}
function SaveButton(props: { handleSave: (isTemporary: boolean) => void }) {
const { handleSave } = props
return (
<div className="btn-bx">
{/* 저장 */}
<button className="btn-frame n-blue icon" onClick={() => handleSave(false)}>
保存<i className="btn-arr"></i>
</button>
</div>
)
}
function TempButton(props: { setMode: (mode: Mode) => void; handleSave: (isTemporary: boolean) => void }) {
const { setMode, handleSave } = props
const router = useRouter()
return (
<div className="btn-bx">
{/* 임시저장 */}
<button
className="btn-frame n-blue icon"
onClick={() => {
setMode('TEMP')
handleSave(true)
}}
>
一時保存<i className="btn-arr"></i>
</button>
</div>
)
}

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

@ -4,14 +4,13 @@ import { useServey } from '@/hooks/useSurvey'
import { useParams, useSearchParams } from 'next/navigation'
import { useEffect, useState } from 'react'
import DetailForm from './DetailForm'
import RoofDetailForm from './RoofDetailForm'
import type { SurveyBasicInfo } from '@/types/Survey'
export default function DataTable() {
const params = useParams()
const id = params.id
const searchParams = useSearchParams()
const tab = searchParams.get('tab')
const isTemp = searchParams.get('isTemporary')
const { surveyDetail, isLoadingSurveyDetail } = useServey(Number(id))
@ -20,8 +19,8 @@ export default function DataTable() {
const { validateSurveyDetail } = useServey(Number(id))
useEffect(() => {
if (surveyDetail?.DETAIL_INFO) {
const validate = validateSurveyDetail(surveyDetail.DETAIL_INFO)
if (surveyDetail?.detailInfo) {
const validate = validateSurveyDetail(surveyDetail.detailInfo)
if (validate.trim() !== '') {
setIsTemporary(false)
}
@ -34,7 +33,7 @@ export default function DataTable() {
return (
<>
<div className="sale-frame">
<div className="sale-data-table-wrap">
<table className="sale-data-table">
<colgroup>
<col style={{ width: '80px' }} />
@ -48,25 +47,25 @@ export default function DataTable() {
<span className="text-red-500">仮保存</span>
</td>
) : (
<td>{surveyDetail?.ID}</td>
<td>{surveyDetail?.id}</td>
)}
</tr>
<tr>
<th>登録日</th>
<td>{surveyDetail?.REG_DT ? new Date(surveyDetail?.REG_DT).toLocaleString() : ''}</td>
<td>{surveyDetail?.regDt ? new Date(surveyDetail.regDt).toLocaleString() : ''}</td>
</tr>
<tr>
<th>更新日時</th>
<td>{surveyDetail?.UPT_DT ? new Date(surveyDetail?.UPT_DT).toLocaleString() : ''}</td>
<td>{surveyDetail?.uptDt ? new Date(surveyDetail.uptDt).toLocaleString() : ''}</td>
</tr>
<tr>
<th>提出可否</th>
<td>
{surveyDetail?.SUBMISSION_STATUS && surveyDetail?.SUBMISSION_DATE ? (
{surveyDetail?.submissionStatus && surveyDetail?.submissionDate ? (
<>
{/* TODO: 제출한 판매점 ID 추가 필요 */}
<div>{new Date(surveyDetail.SUBMISSION_DATE).toLocaleString()}</div>
<div>{surveyDetail.STORE}</div>
<div>{new Date(surveyDetail.submissionDate).toLocaleString()}</div>
<div>{surveyDetail.store}</div>
</>
) : (
'-'
@ -84,11 +83,7 @@ export default function DataTable() {
</tbody>
</table>
</div>
{tab === 'roof-info' ? (
<RoofDetailForm surveyDetail={surveyDetail} isLoadingSurveyDetail={isLoadingSurveyDetail} />
) : (
<DetailForm surveyDetail={surveyDetail} isLoadingSurveyDetail={isLoadingSurveyDetail} />
)}
<DetailForm />
</>
)
}

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

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

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

@ -1,53 +1,107 @@
'use client'
import DetailButton from './DetailButton'
import { SurveyBasicInfo } from '@/types/Survey'
import type { Mode, SurveyBasicInfo, SurveyBasicRequest, SurveyDetailRequest } from '@/types/Survey'
import { useEffect, useState } from 'react'
import ButtonForm from './ButtonForm'
import BasicForm from './BasicForm'
import RoofForm from './RoofForm'
import { useParams, useSearchParams } from 'next/navigation'
import { useServey } from '@/hooks/useSurvey'
export default function DetailForm({
surveyDetail,
isLoadingSurveyDetail,
}: {
surveyDetail: SurveyBasicInfo | null
isLoadingSurveyDetail: boolean
}) {
if (isLoadingSurveyDetail) {
return <div>Loading...</div>
const roofInfoForm: SurveyDetailRequest = {
contractCapacity: null,
retailCompany: null,
supplementaryFacilities: null,
supplementaryFacilitiesEtc: null,
installationSystem: null,
installationSystemEtc: null,
constructionYear: null,
constructionYearEtc: null,
roofMaterial: null,
roofMaterialEtc: null,
roofShape: null,
roofShapeEtc: null,
roofSlope: null,
houseStructure: '1',
houseStructureEtc: null,
rafterMaterial: '1',
rafterMaterialEtc: null,
rafterSize: null,
rafterSizeEtc: null,
rafterPitch: null,
rafterPitchEtc: null,
rafterDirection: '1',
openFieldPlateKind: null,
openFieldPlateKindEtc: null,
openFieldPlateThickness: null,
leakTrace: false,
waterproofMaterial: null,
waterproofMaterialEtc: null,
insulationPresence: '1',
insulationPresenceEtc: null,
structureOrder: null,
structureOrderEtc: null,
installationAvailability: null,
installationAvailabilityEtc: null,
memo: null,
}
const basicInfoForm: SurveyBasicRequest = {
representative: '',
store: null,
constructionPoint: null,
investigationDate: new Date().toLocaleDateString('en-CA'),
buildingName: null,
customerName: null,
postCode: null,
address: null,
addressDetail: null,
submissionStatus: false,
submissionDate: null,
}
export default function DetailForm() {
const idParam = useSearchParams().get('id')
const routeId = useParams().id
const id = idParam ?? routeId
const { surveyDetail } = useServey(Number(id))
const [mode, setMode] = useState<Mode>(idParam ? 'EDIT' : routeId ? 'READ' : 'CREATE')
const [basicInfoData, setBasicInfoData] = useState<SurveyBasicRequest>(basicInfoForm)
const [roofInfoData, setRoofInfoData] = useState<SurveyDetailRequest>(roofInfoForm)
useEffect(() => {
if (surveyDetail && (mode === 'EDIT' || mode === 'READ')) {
const { id, uptDt, regDt, detailInfo, ...rest } = surveyDetail
setBasicInfoData(rest)
if (detailInfo) {
const { id, uptDt, regDt, basicInfoId, ...rest } = detailInfo
setRoofInfoData(rest)
}
}
}, [surveyDetail, mode])
// console.log('mode:: ', mode)
// console.log('surveyDetail:: ', surveyDetail)
// console.log('roofInfoData:: ', roofInfoData)
const data = {
basic: basicInfoData,
roof: roofInfoData,
}
const buttonFormProps = { mode, setMode, data }
return (
<>
<div className="sale-frame">
<div className="data-form-wrap">
<div className="data-input-form-bx">
<div className="data-input-form-tit">担当者名</div>
<input type="text" className="input-frame" disabled defaultValue={surveyDetail?.REPRESENTATIVE} />
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">販売店</div>
<input type="text" className="input-frame" disabled defaultValue={surveyDetail?.STORE ?? ''} />
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">施工店</div>
<input type="text" className="input-frame" disabled defaultValue={surveyDetail?.CONSTRUCTION_POINT ?? ''} />
</div>
</div>
</div>
<div className="sale-frame">
<div className="data-form-wrap">
<div className="data-input-form-bx">
<div className="data-input-form-tit">現地調査日</div>
<input type="text" className="input-frame" disabled defaultValue={surveyDetail?.INVESTIGATION_DATE ?? ''} />
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">建物名</div>
<input type="text" className="input-frame" disabled defaultValue={surveyDetail?.BUILDING_NAME ?? ''} />
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">顧客名</div>
<input type="text" className="input-frame" disabled defaultValue={surveyDetail?.CUSTOMER_NAME ?? ''} />
</div>
</div>
<DetailButton surveyDetail={surveyDetail ?? null} />
<div className="sale-detail-toggle-wrap">
{/* 기본정보 */}
<BasicForm basicInfo={basicInfoData} setBasicInfo={setBasicInfoData} mode={mode} />
{/* 전기/지붕정보 */}
<RoofForm roofInfo={roofInfoData} setRoofInfo={setRoofInfoData} mode={mode} />
<ButtonForm {...buttonFormProps} />
</div>
</>
)

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

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

743
src/components/survey-sale/detail/RoofForm.tsx Normal file
View File

@ -0,0 +1,743 @@
import { useState } from 'react'
import type { Mode, SurveyDetailInfo, SurveyDetailRequest } from '@/types/Survey'
type RadioEtcKeys = 'houseStructure' | 'rafterMaterial' | 'waterproofMaterial' | 'insulationPresence' | 'rafterDirection' | 'leakTrace'
type SelectBoxKeys =
| 'installationSystem'
| 'constructionYear'
| 'roofShape'
| 'rafterPitch'
| 'rafterSize'
| 'openFieldPlateKind'
| 'structureOrder'
| 'installationAvailability'
export const supplementaryFacilities = [
{ id: 1, name: 'エコキュート' }, //에코큐트
{ id: 2, name: 'エネパーム' }, //에네팜
{ id: 3, name: '蓄電池システム' }, //축전지시스템
{ id: 4, name: '太陽光発電' }, //태양광발전
]
export const roofMaterial = [
{ id: 1, name: 'スレート' }, //슬레이트
{ id: 2, name: 'アスファルトシングル' }, //아스팔트 싱글
{ id: 3, name: '瓦' }, //기와
{ id: 4, name: '金属屋根' }, //금속지붕
]
export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string }[]> = {
installationSystem: [
{
id: 1,
name: '太陽光発電', //태양광발전
},
{
id: 2,
name: 'ハイブリッド蓄電システム', //하이브리드축전지시스템
},
{
id: 3,
name: '蓄電池システム', //축전지시스템
},
],
constructionYear: [
{
id: 1,
name: '新築', //신축
},
{
id: 2,
name: '既築', //기존
},
],
roofShape: [
{
id: 1,
name: '切妻', //박공지붕
},
{
id: 2,
name: '寄棟', //기동
},
{
id: 3,
name: '片流れ', //한쪽흐름
},
],
rafterSize: [
{
id: 1,
name: '幅35mm以上×高さ48mm以上',
},
{
id: 2,
name: '幅36mm以上×高さ46mm以上',
},
{
id: 3,
name: '幅37mm以上×高さ43mm以上',
},
{
id: 4,
name: '幅38mm以上×高さ40mm以上',
},
],
rafterPitch: [
{
id: 1,
name: '455mm以下',
},
{
id: 2,
name: '500mm以下',
},
{
id: 3,
name: '606mm以下',
},
],
openFieldPlateKind: [
{
id: 1,
name: '構造用合板', //구조용합판
},
{
id: 2,
name: 'OSB', //OSB
},
{
id: 3,
name: 'パーティクルボード', //파티클보드
},
{
id: 4,
name: '小幅板', //소판
},
],
structureOrder: [
{
id: 1,
name: '屋根材', //지붕재
},
{
id: 2,
name: '防水材', //방수재
},
{
id: 3,
name: '屋根の基礎', //지붕의기초
},
{
id: 4,
name: '垂木', //서까래
},
],
installationAvailability: [
{
id: 1,
name: '確認済み', //확인완료
},
{
id: 2,
name: '未確認', //미확인
},
],
}
export const radioEtcData: Record<RadioEtcKeys, { id: number; label: string }[]> = {
houseStructure: [
{
id: 1,
label: '木製',
},
],
rafterMaterial: [
{
id: 1,
label: '木製',
},
{
id: 2,
label: '強制',
},
],
waterproofMaterial: [
{
id: 1,
label: 'アスファルト屋根940（22kg以上）',
},
],
insulationPresence: [
{
id: 1,
label: 'なし',
},
{
id: 2,
label: 'あり',
},
],
rafterDirection: [
{
id: 1,
label: '垂直垂木',
},
{
id: 2,
label: '水平垂木',
},
],
leakTrace: [
{
id: 1,
label: 'あり',
},
{
id: 2,
label: 'なし',
},
],
}
const makeNumArr = (value: string) => {
return value
.split(',')
.map((v) => v.trim())
.filter((v) => v.length > 0)
}
export default function RoofForm(props: {
roofInfo: SurveyDetailRequest | SurveyDetailInfo
setRoofInfo: (roofInfo: SurveyDetailRequest) => void
mode: Mode
}) {
const { roofInfo, setRoofInfo, mode } = props
const [isFlip, setIsFlip] = useState<boolean>(true)
const handleNumberInput = (key: keyof SurveyDetailRequest, value: number | string) => {
if (key === 'roofSlope' || key === 'openFieldPlateThickness') {
const stringValue = value.toString()
if (stringValue.length > 5) {
alert('保存できるサイズを超えました。')
return
}
if (stringValue.includes('.')) {
const decimalPlaces = stringValue.split('.')[1].length
if (decimalPlaces > 1) {
alert('小数点以下1桁までしか許されません。')
return
}
}
}
setRoofInfo({ ...roofInfo, [key]: value.toString() })
}
const handleUnitInput = (value: string) => {
const numericValue = roofInfo.contractCapacity?.replace(/[^0-9.]/g, '') || ''
setRoofInfo({
...roofInfo,
contractCapacity: numericValue ? `${numericValue} ${value}` : value,
})
}
return (
<div className={`sale-detail-toggle-bx ${isFlip ? 'act' : ''}`}>
<div className="sale-detail-toggle-head" onClick={() => setIsFlip(!isFlip)}>
<div className="sale-detail-toggle-name">電気 / 屋根情報</div>
<div className="sale-detail-toggle-btn-wrap">
<button className="sale-detail-toggle-btn"></button>
</div>
</div>
<div className="sale-detail-toggle-cont">
<div className="sale-frame">
{/* 전기 관계 */}
<div className="sale-roof-title">電気関係</div>
<div className="data-form-wrap">
<div className="data-input-form-bx">
{/* 전기 계약 용량 */}
<div className="data-input-form-tit">電気契約容量</div>
{mode === 'READ' && <input type="text" className="input-frame" value={roofInfo?.contractCapacity ?? ''} disabled={mode === 'READ'} />}
{mode !== 'READ' && (
<div className="data-input mb5">
<input
type="text"
id="contractCapacity"
className="input-frame"
value={roofInfo?.contractCapacity?.split(' ')[0] ?? ''}
onChange={(e) => handleNumberInput('contractCapacity', e.target.value)}
/>
<div className="data-input">
<select
className="select-form"
name="contractCapacityUnit"
id="contractCapacityUnit"
value={roofInfo?.contractCapacity?.split(' ')[1] ?? ''}
onChange={(e) => handleUnitInput(e.target.value)}
>
<option value="" hidden>
단위
</option>
<option value="A">A</option>
<option value="kVA">kVA</option>
</select>
</div>
</div>
)}
</div>
<div className="data-input-form-bx">
{/* 전기 소매 회사사 */}
<div className="data-input-form-tit">電気小売会社</div>
<input
type="text"
className="input-frame"
value={roofInfo?.retailCompany ?? ''}
disabled={mode === 'READ'}
onChange={(e) => setRoofInfo({ ...roofInfo, retailCompany: e.target.value })}
/>
</div>
<div className="data-input-form-bx">
{/* 전기 부대 설비 */}
<div className="data-input-form-tit">
電気袋設備<span>※複数選択可能</span>
</div>
<MultiCheck mode={mode} column="supplementaryFacilities" roofInfo={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit red-f">設置希望システム</div>
<SelectedBox mode={mode} column="installationSystem" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
</div>
</div>
</div>
<div className="sale-frame">
{/* 지붕 관계 */}
<div className="sale-roof-title">屋根関係</div>
<div className="data-form-wrap">
<div className="data-input-form-bx">
{/* 건축 연수 */}
<div className="data-input-form-tit red-f">建築研修</div>
<div className="data-input mb5">
<SelectedBox mode={mode} column="constructionYear" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
</div>
</div>
<div className="data-input-form-bx">
{/* 지붕재 */}
<div className="data-input-form-tit">
屋根材<span>※最大2個まで選択可能</span>
</div>
<MultiCheck mode={mode} column="roofMaterial" roofInfo={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
</div>
<div className="data-input-form-bx">
{/* 지붕 모양 */}
<div className="data-input-form-tit">屋根の形状</div>
<div className="data-input mb5">
<SelectedBox mode={mode} column="roofShape" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
</div>
</div>
<div className="data-input-form-bx">
{/* 지붕 경사도도 */}
<div className="data-input-form-tit">屋根の斜面</div>
<div className="data-input flex">
<input
type="number"
className="input-frame"
value={roofInfo?.roofSlope ?? ''}
disabled={mode === 'READ'}
onChange={(e) => handleNumberInput('roofSlope', e.target.value)}
/>
<span>寸</span>
</div>
</div>
<div className="data-input-form-bx">
{/* 주택구조조 */}
<div className="data-input-form-tit">住宅構造</div>
<RadioSelected mode={mode} column="houseStructure" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
</div>
<div className="data-input-form-bx">
{/* 서까래 재질 */}
<div className="data-input-form-tit">垂木材質</div>
<RadioSelected mode={mode} column="rafterMaterial" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
</div>
<div className="data-input-form-bx">
{/* 서까래 크기 */}
<div className="data-input-form-tit red-f">垂木サイズ</div>
<div className="data-input mb5">
<SelectedBox mode={mode} column="rafterSize" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
</div>
</div>
<div className="data-input-form-bx">
{/* 서까래 피치 */}
<div className="data-input-form-tit red-f">垂木サイズ</div>
<div className="data-input mb5">
<SelectedBox mode={mode} column="rafterPitch" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
</div>
</div>
<div className="data-input-form-bx">
{/* 서까래 방향 */}
<div className="data-input-form-tit red-f">垂木の方向</div>
<div className="data-check-wrap mb0">
<RadioSelected mode={mode} column="rafterDirection" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
</div>
</div>
<div className="data-input-form-bx">
{/* 노지판 종류류 */}
<div className="data-input-form-tit">路地板の種類</div>
<div className="data-input mb5">
<SelectedBox mode={mode} column="openFieldPlateKind" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
</div>
</div>
<div className="data-input-form-bx">
{/* 노지판 두께 */}
<div className="data-input-form-tit">
路地板厚<span>※小幅板を選択した場合, 厚さ. 小幅板間の間隔寸法を記載</span>
</div>
<div className="data-input flex">
<input
type="text"
className="input-frame"
value={roofInfo?.openFieldPlateThickness ?? ''}
disabled={mode === 'READ'}
onChange={(e) => handleNumberInput('openFieldPlateThickness', e.target.value)}
/>
<span>mm</span>
</div>
</div>
<div className="data-input-form-bx">
{/* 누수 흔적 */}
<div className="data-input-form-tit ">水漏れの痕跡</div>
<div className="data-check-wrap mb0">
<RadioSelected mode={mode} column="leakTrace" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
</div>
</div>
<div className="data-input-form-bx">
{/* 방수재 종류 */}
<div className="data-input-form-tit red-f">防水材の種類</div>
<RadioSelected mode={mode} column="waterproofMaterial" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
</div>
<div className="data-input-form-bx">
{/* 단열재 유무 */}
<div className="data-input-form-tit red-f">断熱材の有無</div>
<RadioSelected mode={mode} column="insulationPresence" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
</div>
<div className="data-input-form-bx">
{/* 지붕 구조의 순서 */}
<div className="data-input-form-tit red-f">屋根構造の順序</div>
<SelectedBox mode={mode} column="structureOrder" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
</div>
<div className="data-input-form-bx">
{/* 지붕 제품명 설치 가능 여부 확인 */}
<div className="data-input-form-tit">屋根製品名 設置可否確認</div>
<SelectedBox mode={mode} column="installationAvailability" detailInfoData={roofInfo as SurveyDetailInfo} setRoofInfo={setRoofInfo} />
</div>
<div className="data-input-form-bx">
{/* 메모 */}
<div className="data-input-form-tit">メモ</div>
<div className="data-input">
<textarea
className="textarea-form"
name="memo"
id="memo"
placeholder="TextArea Filed"
value={roofInfo?.memo ?? ''}
disabled={mode === 'READ'}
onChange={(e) => setRoofInfo({ ...roofInfo, memo: e.target.value })}
></textarea>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
const SelectedBox = ({
mode,
column,
detailInfoData,
setRoofInfo,
}: {
mode: Mode
column: string
detailInfoData: SurveyDetailInfo
setRoofInfo: (roofInfo: SurveyDetailRequest) => void
}) => {
const selectedId = detailInfoData?.[column as keyof SurveyDetailInfo]
const etcValue = detailInfoData?.[`${column}Etc` as keyof SurveyDetailInfo]
const [isEtcSelected, setIsEtcSelected] = useState<boolean>(etcValue !== null && etcValue !== undefined && etcValue !== '')
const [etcVal, setEtcVal] = useState<string>(etcValue?.toString() ?? '')
const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
const value = e.target.value
const isSpecialCase = column === 'constructionYear' || column === 'installationAvailability'
const isEtc = value === 'etc'
const isSpecialEtc = isSpecialCase && value === '2'
const updatedData: typeof detailInfoData = {
...detailInfoData,
[column]: isEtc ? null : value,
[`${column}Etc`]: isEtc ? '' : null,
}
if (isSpecialEtc) {
updatedData[column] = value
}
setIsEtcSelected(isEtc || isSpecialEtc)
if (!isEtc) setEtcVal('')
setRoofInfo(updatedData)
}
const handleEtcInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value
setEtcVal(value)
setRoofInfo({ ...detailInfoData, [`${column}Etc`]: value })
}
return (
<>
<select
className="select-form mb10"
name={column}
id={column}
disabled={mode === 'READ'}
value={selectedId ? Number(selectedId) : etcValue !== null ? 'etc' : ''}
onChange={handleSelectChange}
>
{selectBoxOptions[column as keyof typeof selectBoxOptions].map((item) => (
<option key={item.id} value={item.id}>
{item.name}
</option>
))}
{column !== 'installationAvailability' && column !== 'constructionYear' && (
<option key="etc" value="etc">
その他 (直接入力)
</option>
)}
<option key="" value="" hidden>
選択してください
</option>
</select>
<div className="data-input">
<input
type="text"
className="input-frame"
placeholder="-"
value={etcVal}
onChange={handleEtcInputChange}
disabled={
mode === 'READ'
? true
: column === 'installationAvailability'
? false
: column === 'constructionYear'
? detailInfoData.constructionYear === '1' || detailInfoData.constructionYear === null
: !isEtcSelected
}
/>
</div>
</>
)
}
const RadioSelected = ({
mode,
column,
detailInfoData,
setRoofInfo,
}: {
mode: Mode
column: string
detailInfoData: SurveyDetailInfo
setRoofInfo: (roofInfo: SurveyDetailRequest) => void
}) => {
let selectedId = detailInfoData?.[column as keyof SurveyDetailInfo]
if (column === 'leakTrace') {
selectedId = Number(selectedId)
if (!selectedId) selectedId = 2
}
let etcValue = null
if (column !== 'rafterDirection') {
etcValue = detailInfoData?.[`${column}Etc` as keyof SurveyDetailInfo]
}
const [etcChecked, setEtcChecked] = useState<boolean>(etcValue !== null && etcValue !== undefined && etcValue !== '')
const [etcVal, setEtcVal] = useState<string>(etcValue?.toString() ?? '')
const handleRadioChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value
if (column === 'leakTrace') {
handleBooleanRadioChange(value)
}
if (value === 'etc') {
setEtcChecked(true)
setRoofInfo({ ...detailInfoData, [column]: null, [`${column}Etc`]: '' })
} else {
if (column === 'insulationPresence' && value === '2') {
setEtcChecked(true)
} else {
setEtcChecked(false)
}
setRoofInfo({ ...detailInfoData, [column]: value, [`${column}Etc`]: null })
}
}
const handleBooleanRadioChange = (value: string) => {
if (value === '1') {
setRoofInfo({ ...detailInfoData, leakTrace: true })
} else {
setRoofInfo({ ...detailInfoData, leakTrace: false })
}
}
const handleEtcInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value
setEtcVal(value)
setRoofInfo({ ...detailInfoData, [`${column}Etc`]: value })
}
return (
<>
{radioEtcData[column as keyof typeof radioEtcData].map((item) => (
<div className="radio-form-box mb10" key={item.id}>
<input
type="radio"
name={column}
id={`${column}_${item.id}`}
disabled={mode === 'READ'}
checked={Number(selectedId) === item.id}
onChange={handleRadioChange}
value={item.id}
/>
<label htmlFor={`${column}_${item.id}`}>{item.label}</label>
</div>
))}
{column !== 'rafterDirection' && column !== 'leakTrace' && column !== 'insulationPresence' && (
<div className="radio-form-box mb10">
<input
type="radio"
name={column}
id={`${column}Etc`}
value="etc"
disabled={mode === 'READ'}
checked={etcChecked}
onChange={handleRadioChange}
/>
<label htmlFor={`${column}Etc`}>その他 (直接入力)</label>
</div>
)}
{column !== 'leakTrace' && column !== 'rafterDirection' && (
<div className="data-input">
<input
type="text"
className="input-frame"
placeholder="-"
value={etcVal}
onChange={handleEtcInputChange}
disabled={mode === 'READ' || !etcChecked}
/>
</div>
)}
</>
)
}
const MultiCheck = ({
mode,
column,
roofInfo,
setRoofInfo,
}: {
mode: Mode
column: string
roofInfo: SurveyDetailInfo
setRoofInfo: (roofInfo: SurveyDetailRequest) => void
}) => {
const multiCheckData = column === 'supplementaryFacilities' ? supplementaryFacilities : roofMaterial
const [isOtherCheck, setIsOtherCheck] = useState<boolean>(false)
const [otherValue, setOtherValue] = useState<string>(roofInfo?.[`${column}Etc` as keyof SurveyDetailInfo]?.toString() ?? '')
const handleCheckbox = (id: number) => {
const value = makeNumArr(String(roofInfo[column as keyof SurveyDetailInfo] ?? ''))
const isOtherSelected = roofInfo?.[`${column}Etc` as keyof SurveyDetailInfo] !== null
let newValue: string[]
if (value.includes(String(id))) {
newValue = value.filter((v) => v !== String(id))
} else {
if (column === 'roofMaterial') {
const totalSelected = value.length + (isOtherSelected ? 1 : 0)
if (totalSelected >= 2) {
alert('屋根材は最大2個まで選択できます。')
return
}
}
newValue = [...value, String(id)]
}
setRoofInfo({ ...roofInfo, [column]: newValue.join(',') })
}
const handleOtherCheckbox = () => {
if (column === 'roofMaterial') {
const value = makeNumArr(String(roofInfo[column as keyof SurveyDetailInfo] ?? ''))
const currentSelected = value.length
if (!isOtherCheck && currentSelected >= 2) {
alert('屋根材は最大2個まで選択できます。')
return
}
}
const newIsOtherCheck = !isOtherCheck
setIsOtherCheck(newIsOtherCheck)
setOtherValue('')
setRoofInfo({ ...roofInfo, [`${column}Etc`]: newIsOtherCheck ? '' : null })
}
const handleOtherInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value
setOtherValue(value)
setRoofInfo({ ...roofInfo, [`${column}Etc`]: value })
}
return (
<>
<div className="data-check-wrap">
{multiCheckData.map((item) => (
<div className="check-form-box" key={item.id}>
<input
type="checkbox"
id={`${column}_${item.id}`}
checked={makeNumArr(String(roofInfo[column as keyof SurveyDetailInfo] ?? '')).includes(String(item.id))}
disabled={mode === 'READ'}
onChange={() => handleCheckbox(item.id)}
/>
<label htmlFor={`${column}_${item.id}`}>{item.name}</label>
</div>
))}
<div className="check-form-box">
<input
type="checkbox"
id={`${column}Etc`}
checked={roofInfo?.[`${column}Etc` as keyof SurveyDetailInfo] !== null}
disabled={mode === 'READ'}
onChange={handleOtherCheckbox}
/>
<label htmlFor={`${column}Etc`}>その他 (直接入力)</label>
</div>
</div>
<div className="data-input">
<input
type="text"
className="input-frame"
placeholder="-"
value={otherValue}
onChange={handleOtherInputChange}
disabled={mode === 'READ' || !isOtherCheck}
/>
</div>
</>
)
}

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

@ -1,244 +0,0 @@
'use client'
import { useServey } from '@/hooks/useSurvey'
import { SurveyBasicRequest } from '@/types/Survey'
import { useRouter, useSearchParams } from 'next/navigation'
import { useState, useEffect } from 'react'
import { useSurveySaleTabState } from '@/store/surveySaleTabState'
import { usePopupController } from '@/store/popupController'
import { useAddressStore } from '@/store/addressStore'
import { useSessionStore } from '@/store/session'
// import { useUserType } from '@/hooks/useUserType'
const defaultBasicInfoForm: SurveyBasicRequest = {
REPRESENTATIVE: '',
STORE: null,
CONSTRUCTION_POINT: null,
INVESTIGATION_DATE: new Date().toLocaleDateString('en-CA'),
BUILDING_NAME: null,
CUSTOMER_NAME: null,
POST_CODE: null,
ADDRESS: null,
ADDRESS_DETAIL: null,
SUBMISSION_STATUS: false,
SUBMISSION_DATE: null,
}
const REQUIRED_FIELDS: (keyof SurveyBasicRequest)[] = ['REPRESENTATIVE', 'BUILDING_NAME', 'CUSTOMER_NAME']
export default function BasicForm() {
const searchParams = useSearchParams()
const id = searchParams.get('id')
const router = useRouter()
const { setBasicInfoSelected } = useSurveySaleTabState()
const { surveyDetail, createSurvey, isCreatingSurvey, updateSurvey, isUpdatingSurvey } = useServey(Number(id))
const [basicInfoData, setBasicInfoData] = useState<SurveyBasicRequest>(defaultBasicInfoForm)
const { addressData } = useAddressStore()
const { session } = useSessionStore()
const popupController = usePopupController()
useEffect(() => {
if (surveyDetail) {
const { ID, UPT_DT, REG_DT, DETAIL_INFO, ...rest } = surveyDetail
setBasicInfoData(rest)
}
if (addressData) {
setBasicInfoData({
...basicInfoData,
POST_CODE: addressData.post_code,
ADDRESS: addressData.address,
ADDRESS_DETAIL: addressData.address_detail,
})
}
if (session?.isLoggedIn) {
setBasicInfoData((prev) => ({
...prev,
REPRESENTATIVE: session?.userId ?? '',
STORE: session?.storeNm ?? '',
CONSTRUCTION_POINT: session?.builderNo ?? '',
}))
}
setBasicInfoSelected()
}, [surveyDetail, addressData, session?.isLoggedIn, session?.userId, session?.storeNm, session?.builderNo])
const focusInput = (input: keyof SurveyBasicRequest) => {
const inputElement = document.getElementById(input)
if (inputElement) {
inputElement.focus()
}
}
const validateSurvey = (basicInfoData: SurveyBasicRequest) => {
const emptyField = REQUIRED_FIELDS.find((field) => !basicInfoData[field])
if (emptyField) {
focusInput(emptyField)
return false
}
return true
}
const handleChange = (key: keyof SurveyBasicRequest, value: string) => {
setBasicInfoData({ ...basicInfoData, [key]: value })
}
const handleSave = async (isTemporary: boolean) => {
if (id) {
// updateSurvey(basicInfoData)
alert('保存しました。')
// router.push(`/survey-sale/${id}?tab=basic-info`)
}
if (isTemporary) {
// const saveId = await createSurvey(basicInfoData)
alert('一時保存されました。')
// router.push(`/survey-sale/${saveId}?tab=basic-info`)
} else {
if (validateSurvey(basicInfoData)) {
// const saveId = await createSurvey(basicInfoData)
alert('保存しました。')
// router.push(`/survey-sale/${saveId}?tab=basic-info`)
}
}
}
if (isCreatingSurvey || isUpdatingSurvey) {
return <div>Loading...</div>
}
return (
<>
<div className="sale-frame">
<div className="data-form-wrap">
<div className="data-input-form-bx">
<div className="data-input-form-tit">担当者名</div>
<input
type="text"
className="input-frame"
id="representative"
value={session?.userId ? session?.userId : basicInfoData.REPRESENTATIVE}
onChange={(e) => handleChange('REPRESENTATIVE', e.target.value)}
/>
</div>
{(session?.role === 'Builder' || session?.role?.includes('Admin')) && (
<>
<div className="data-input-form-bx">
<div className="data-input-form-tit">販売店</div>
<input
type="text"
className="input-frame"
id="store"
value={session?.storeNm ? session?.storeNm : basicInfoData.STORE ?? ''}
onChange={(e) => handleChange('STORE', e.target.value)}
/>
</div>
</>
)}
{(session?.role === 'Partner' || session?.role === 'Builder') && (
<div className="data-input-form-bx">
<div className="data-input-form-tit">施工店</div>
<input
type="text"
className="input-frame"
id="construction_point"
value={session?.builderNo ? session?.builderNo : basicInfoData.CONSTRUCTION_POINT ?? ''}
onChange={(e) => handleChange('CONSTRUCTION_POINT', e.target.value)}
/>
</div>
)}
</div>
</div>
<div className="sale-frame">
<div className="data-form-wrap">
<div className="data-input-form-bx">
<div className="data-input-form-tit">現地調査日</div>
<div className="date-input">
<button className="date-btn">
<i className="date-icon"></i>
</button>
<input
type="date"
className="date-frame"
id="INVESTIGATION_DATE"
value={basicInfoData.INVESTIGATION_DATE ?? ''}
onChange={(e) => handleChange('INVESTIGATION_DATE', e.target.value)}
/>
</div>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">建物名</div>
<input
type="text"
className="input-frame"
id="BUILDING_NAME"
value={basicInfoData.BUILDING_NAME ?? ''}
onChange={(e) => handleChange('BUILDING_NAME', e.target.value)}
/>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">顧客名</div>
<input
type="text"
className="input-frame"
id="CUSTOMER_NAME"
value={basicInfoData.CUSTOMER_NAME ?? ''}
onChange={(e) => handleChange('CUSTOMER_NAME', e.target.value)}
/>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">建物の住所</div>
<div className="form-flex">
<div className="form-bx">
<input type="text" className="input-frame" id="POST_CODE" value={basicInfoData.POST_CODE ?? ''} readOnly />
</div>
<div className="form-bx">
<input
type="text"
className="input-frame"
name="address"
id="ADDRESS"
value={basicInfoData.ADDRESS ?? ''}
/>
</div>
</div>
<div className="form-btn">
<button className="btn-frame n-blue icon" onClick={() => popupController.setZipCodePopup(true)}>
郵便番号<i className="btn-arr"></i>
</button>
</div>
</div>
<div className="data-input-form-bx">
<div className="data-input-form-tit">市区町村名, 以後の住所</div>
<input
type="text"
className="input-frame"
id="ADDRESS_DETAIL"
value={basicInfoData.ADDRESS_DETAIL ?? ''}
onChange={(e) => handleChange('ADDRESS_DETAIL', e.target.value)}
/>
</div>
</div>
<div className="btn-flex-wrap">
<div className="btn-bx">
<button className="btn-frame n-blue icon" onClick={() => handleSave(true)}>
一時保存<i className="btn-arr"></i>
</button>
</div>
<div className="btn-bx">
<button className="btn-frame red icon" onClick={() => handleSave(false)}>
保存<i className="btn-arr"></i>
</button>
</div>
<div className="btn-bx">
<button className="btn-frame n-blue icon" onClick={() => router.push('/survey-sale')}>
リスト<i className="btn-arr"></i>
</button>
</div>
</div>
</div>
</>
)
}

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

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

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

@ -1,141 +0,0 @@
import { SurveyDetailRequest } from '@/types/Survey'
import { useEffect, useState } from 'react'
export const supplementary_facilities = [
{ id: 1, name: 'エコキュート' }, //에코큐트
{ id: 2, name: 'エネパーム' }, //에네팜
{ id: 3, name: '蓄電池システム' }, //축전지시스템
{ id: 4, name: '太陽光発電' }, //태양광발전
]
export const roof_material = [
{ id: 1, name: 'スレート' }, //슬레이트
{ id: 2, name: 'アスファルトシングル' }, //아스팔트 싱글
{ id: 3, name: '瓦' }, //기와
{ id: 4, name: '金属屋根' }, //금속지붕
]
export default function MultiCheckbox({
column,
setDetailInfoData,
detailInfoData,
}: {
column: string
setDetailInfoData: (data: any) => void
detailInfoData: SurveyDetailRequest
}) {
const selectList = column === 'SUPPLEMENTARY_FACILITIES' ? supplementary_facilities : roof_material
const [isOtherChecked, setIsOtherChecked] = useState(false)
const [otherValue, setOtherValue] = useState('')
const makeNumArr = (value: string) => {
return value
.split(',')
.map((v) => v.trim())
.filter((v) => v.length > 0)
}
useEffect(() => {
if (detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest]) {
setIsOtherChecked(true)
setOtherValue(detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest] as string)
}
}, [detailInfoData])
const handleCheckbox = (dataIndex: number) => {
const value = makeNumArr(String(detailInfoData[column as keyof SurveyDetailRequest] ?? ''))
let newValue: string[]
if (value.includes(String(dataIndex))) {
// 체크 해제
newValue = value.filter((v) => v !== String(dataIndex))
} else {
// 체크
if (column === 'ROOF_MATERIAL') {
// 기타가 체크되어 있는지 확인
const isOtherSelected = isOtherChecked
// 현재 선택된 항목 수 + 기타 선택 여부
const totalSelected = value.length + (isOtherSelected ? 1 : 0)
if (totalSelected >= 2) {
alert('屋根材は最大2個まで選択可能です。')
return
}
}
newValue = [...value, String(dataIndex)]
}
setDetailInfoData({
...detailInfoData,
[column]: newValue.join(', '),
})
}
const handleOtherCheckbox = () => {
if (column === 'ROOF_MATERIAL') {
const value = makeNumArr(String(detailInfoData[column as keyof SurveyDetailRequest] ?? ''))
const currentSelected = value.length
if (!isOtherChecked && currentSelected >= 2) {
alert('Up to two roofing materials can be selected.')
return
}
}
const newIsOtherChecked = !isOtherChecked
setIsOtherChecked(newIsOtherChecked)
setOtherValue('')
setDetailInfoData({
...detailInfoData,
[`${column}_ETC`]: newIsOtherChecked ? '' : null,
})
}
const handleOtherInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value
setOtherValue(value)
setDetailInfoData({
...detailInfoData,
[`${column}_ETC`]: value,
})
}
return (
<>
{column === 'SUPPLEMENTARY_FACILITIES' ? (
<>
<div className="data-input-form-tit">
電気袋設備<span>※複数選択可能</span>
</div>
</>
) : (
<>
<div className="data-input-form-tit">
屋根材<span>※最大2個まで選択可能</span>
</div>
</>
)}
<div className="data-check-wrap">
{selectList.map((item) => (
<div className="check-form-box" key={item.id}>
<input
type="checkbox"
id={`${column}_ch${item.id}`}
checked={makeNumArr(String(detailInfoData[column as keyof SurveyDetailRequest] ?? '')).includes(String(item.id))}
onChange={() => handleCheckbox(item.id)}
/>
<label htmlFor={`${column}_ch${item.id}`}>{item.name}</label>
</div>
))}
<div className="check-form-box">
<input type="checkbox" id={`${column}_ch05`} checked={isOtherChecked} onChange={handleOtherCheckbox} />
<label htmlFor={`${column}_ch05`}>その他 (直接入力)</label>
</div>
</div>
<div className="data-input">
<input type="text" className="input-frame" disabled={!isOtherChecked} value={otherValue} onChange={handleOtherInputChange} />
</div>
</>
)
}

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

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

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

@ -1,246 +0,0 @@
import type { SurveyDetailRequest } from '@/types/Survey'
import { useEffect, useState } from 'react'
export type SelectBoxKeys =
| 'INSTALLATION_SYSTEM'
| 'CONSTRUCTION_YEAR'
| 'ROOF_SHAPE'
| 'RAFTER_PITCH'
| 'RAFTER_SIZE'
| 'OPEN_FIELD_PLATE_KIND'
| 'STRUCTURE_ORDER'
| 'INSTALLATION_AVAILABILITY'
const font: Record<SelectBoxKeys, string> = {
INSTALLATION_SYSTEM: 'data-input-form-tit red-f',
CONSTRUCTION_YEAR: 'data-input-form-tit red-f',
ROOF_SHAPE: 'data-input-form-tit',
RAFTER_PITCH: 'data-input-form-tit red-f',
RAFTER_SIZE: 'data-input-form-tit red-f',
OPEN_FIELD_PLATE_KIND: 'data-input-form-tit',
STRUCTURE_ORDER: 'data-input-form-tit red-f',
INSTALLATION_AVAILABILITY: 'data-input-form-tit',
}
const translateJapanese: Record<SelectBoxKeys, string> = {
INSTALLATION_SYSTEM: '設置希望システム',
CONSTRUCTION_YEAR: '建築年数',
ROOF_SHAPE: '屋根の形状',
RAFTER_PITCH: '垂木傾斜',
RAFTER_SIZE: '垂木サイズ',
OPEN_FIELD_PLATE_KIND: '路地板の種類',
STRUCTURE_ORDER: '屋根構造の順序',
INSTALLATION_AVAILABILITY: '屋根製品名 設置可否確認',
}
export const selectBoxOptions: Record<SelectBoxKeys, { id: number; name: string }[]> = {
INSTALLATION_SYSTEM: [
{
id: 1,
name: '太陽光発電', //태양광발전
},
{
id: 2,
name: 'ハイブリッド蓄電システム', //하이브리드축전지시스템
},
{
id: 3,
name: '蓄電池システム', //축전지시스템
},
],
CONSTRUCTION_YEAR: [
{
id: 1,
name: '新築', //신축
},
{
id: 2,
name: '既築', //기존
},
],
ROOF_SHAPE: [
{
id: 1,
name: '切妻', //박공지붕
},
{
id: 2,
name: '寄棟', //기동
},
{
id: 3,
name: '片流れ', //한쪽흐름
},
],
RAFTER_SIZE: [
{
id: 1,
name: '幅35mm以上×高さ48mm以上',
},
{
id: 2,
name: '幅36mm以上×高さ46mm以上',
},
{
id: 3,
name: '幅37mm以上×高さ43mm以上',
},
{
id: 4,
name: '幅38mm以上×高さ40mm以上',
},
],
RAFTER_PITCH: [
{
id: 1,
name: '(455mm以下',
},
{
id: 2,
name: '500mm以下',
},
{
id: 3,
name: '606mm以下',
},
],
OPEN_FIELD_PLATE_KIND: [
{
id: 1,
name: '構造用合板', //구조용합판
},
{
id: 2,
name: 'OSB', //OSB
},
{
id: 3,
name: 'パーティクルボード', //파티클보드
},
{
id: 4,
name: '小幅板', //소판
},
],
STRUCTURE_ORDER: [
{
id: 1,
name: '屋根材', //지붕재
},
{
id: 2,
name: '防水材', //방수재
},
{
id: 3,
name: '屋根の基礎', //지붕의기초
},
{
id: 4,
name: '垂木', //서까래
},
],
INSTALLATION_AVAILABILITY: [
{
id: 1,
name: '確認済み', //확인완료
},
{
id: 2,
name: '未確認', //미확인
},
],
}
export default function SelectBoxForm({
column,
setDetailInfoData,
detailInfoData,
}: {
column: SelectBoxKeys
setDetailInfoData: (data: any) => void
detailInfoData: SurveyDetailRequest
}) {
const [isEtcSelected, setIsEtcSelected] = useState(false)
const [etcValue, setEtcValue] = useState('')
useEffect(() => {
if (detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest]) {
setIsEtcSelected(true)
setEtcValue(detailInfoData[`${column}_ETC` as keyof SurveyDetailRequest] as string)
}
}, [detailInfoData])
const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
const value = e.target.value
const isSpecialCase = column === 'CONSTRUCTION_YEAR' || column === 'INSTALLATION_AVAILABILITY'
const isEtc = value === 'etc'
const isSpecialEtc = isSpecialCase && value === '2'
const updatedData: typeof detailInfoData = {
...detailInfoData,
[column]: isEtc ? null : value,
[`${column}_ETC`]: isEtc ? '' : null,
}
// 건축연수 + 설치가능여부는 2번 선택 시 input 활성화
if (isSpecialEtc) {
updatedData[column] = value
}
setIsEtcSelected(isEtc || isSpecialEtc)
if (!isEtc) setEtcValue('')
setDetailInfoData(updatedData)
}
const handleEtcInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const value = e.target.value
setEtcValue(value)
setDetailInfoData({
...detailInfoData,
[`${column}_ETC`]: value,
})
}
return (
<>
<div className="data-input-form-bx">
<div className={font[column as keyof typeof font]}>{translateJapanese[column as keyof typeof translateJapanese]}</div>
<div className="data-input mb5">
<select
className="select-form"
name={column}
id={column}
onChange={handleSelectChange}
value={detailInfoData[column] ? detailInfoData[column] : detailInfoData[`${column}_ETC`] ? 'etc' : isEtcSelected ? 'etc' : ''}
>
<option value="" hidden>
選択してください
</option>
{selectBoxOptions[column as keyof typeof selectBoxOptions].map((option) => (
<option key={option.id} value={option.id}>
{option.name}
</option>
))}
{column !== 'INSTALLATION_AVAILABILITY' && column !== 'CONSTRUCTION_YEAR' && <option value="etc">その他 (直接入力)</option>}
</select>
</div>
<div className="data-input">
<input
type="text"
className="input-frame"
value={etcValue ?? ''}
onChange={handleEtcInputChange}
disabled={
column === 'INSTALLATION_AVAILABILITY'
? !Boolean(detailInfoData[column])
: column === 'CONSTRUCTION_YEAR'
? detailInfoData[column] !== '2' // 既築(2)가 아닐 때 비활성화
: !isEtcSelected
}
/>
</div>
</div>
</>
)
}

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

@ -7,34 +7,37 @@ import { useRouter } from 'next/navigation'
import SearchForm from './SearchForm'
import { useSurveyFilterStore } from '@/store/surveyFilterStore'
import { useSessionStore } from '@/store/session'
import type { SurveyBasicInfo } from '@/types/Survey'
export default function ListTable() {
const router = useRouter()
const { surveyList, isLoadingSurveyList, surveyListCount } = useServey()
const { surveyList, isLoadingSurveyList } = useServey()
const { offset, setOffset } = useSurveyFilterStore()
const [heldSurveyList, setHeldSurveyList] = useState<typeof surveyList>([])
const [heldSurveyList, setHeldSurveyList] = useState<SurveyBasicInfo[]>([])
const [hasMore, setHasMore] = useState(false)
const { session } = useSessionStore()
useEffect(() => {
if (surveyList && surveyList.length > 0) {
if (offset === 0) {
setHeldSurveyList(surveyList)
if (!session.isLoggedIn || !('data' in surveyList)) return
if ('count' in surveyList && surveyList.count > 0) {
if (offset > 0) {
setHeldSurveyList((prev) => [...prev, ...surveyList.data])
} else {
const remainingList = heldSurveyList.slice(offset, offset + 10)
if (JSON.stringify(remainingList) !== JSON.stringify(surveyList)) {
setHeldSurveyList((prev) => [...prev, ...surveyList])
setHeldSurveyList(surveyList.data)
}
setHasMore(surveyList.count > offset + 10)
} else {
setHeldSurveyList([])
setHasMore(false)
}
setHasMore(surveyListCount > offset + 10)
}
}, [surveyList, surveyListCount, offset, session?.role])
}, [surveyList, offset, session])
const handleDetailClick = (id: number) => {
router.push(`/survey-sale/${id}`)
}
const handleItemsInit = () => {
setHeldSurveyList([])
setOffset(0)
@ -44,22 +47,22 @@ export default function ListTable() {
return (
<>
<SearchForm onItemsInit={handleItemsInit} memberRole={session?.role ?? ''} userId={session?.userId ?? ''} />
<SearchForm memberRole={session?.role ?? ''} userId={session?.userId ?? ''} />
{heldSurveyList.length > 0 ? (
<div className="sale-frame">
<ul className="sale-list-wrap">
{heldSurveyList.map((survey) => (
<li className="sale-list-item cursor-pointer" key={survey.ID} onClick={() => handleDetailClick(survey.ID)}>
<li className="sale-list-item cursor-pointer" key={survey.id} onClick={() => handleDetailClick(survey.id)}>
<div className="sale-item-bx">
<div className="sale-item-date-bx">
<div className="sale-item-num">{survey.ID}</div>
<div className="sale-item-date">{survey.INVESTIGATION_DATE}</div>
<div className="sale-item-num">{survey.id}</div>
<div className="sale-item-date">{survey.investigationDate}</div>
</div>
<div className="sale-item-tit">{survey.BUILDING_NAME}</div>
<div className="sale-item-customer">{survey.CUSTOMER_NAME}</div>
<div className="sale-item-tit">{survey.buildingName}</div>
<div className="sale-item-customer">{survey.customerName}</div>
<div className="sale-item-update-bx">
<div className="sale-item-name">{survey.REPRESENTATIVE}</div>
<div className="sale-item-update">{new Date(survey.UPT_DT).toLocaleString()}</div>
<div className="sale-item-name">{survey.representative}</div>
<div className="sale-item-update">{new Date(survey.uptDt).toLocaleString()}</div>
</div>
</div>
</li>

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

@ -4,7 +4,7 @@ import { SEARCH_OPTIONS, SEARCH_OPTIONS_ENUM, SEARCH_OPTIONS_PARTNERS, useSurvey
import { useRouter } from 'next/navigation'
import { useState } from 'react'
export default function SearchForm({ onItemsInit, memberRole, userId }: { onItemsInit: () => void; memberRole: string; userId: string }) {
export default function SearchForm({ memberRole, userId }: { memberRole: string; userId: string }) {
const router = useRouter()
const { setSearchOption, setSort, setIsMySurvey, setKeyword, isMySurvey, keyword, searchOption, sort } = useSurveyFilterStore()
const [searchKeyword, setSearchKeyword] = useState(keyword)
@ -17,7 +17,6 @@ export default function SearchForm({ onItemsInit, memberRole, userId }: { onItem
}
setKeyword(searchKeyword)
setSearchOption(option)
onItemsInit()
}
const searchOptions = memberRole === 'Partner' ? SEARCH_OPTIONS_PARTNERS : SEARCH_OPTIONS
@ -38,7 +37,6 @@ export default function SearchForm({ onItemsInit, memberRole, userId }: { onItem
if (e.target.value === 'all') {
setKeyword('')
setSearchKeyword('')
onItemsInit()
setSearchOption('all')
setOption('all')
} else {
@ -80,7 +78,6 @@ export default function SearchForm({ onItemsInit, memberRole, userId }: { onItem
checked={isMySurvey === userId}
onChange={() => {
setIsMySurvey(isMySurvey === userId ? null : userId)
onItemsInit()
}}
/>
<label htmlFor="ch01">私が書いた物件</label>
@ -94,7 +91,6 @@ export default function SearchForm({ onItemsInit, memberRole, userId }: { onItem
value={sort}
onChange={(e) => {
setSort(e.target.value as 'created' | 'updated')
onItemsInit()
}}
>
<option value="created">最近の登録日</option>

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

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

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

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

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

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

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

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

11
src/components/ui/common/Footer.tsx
View File

@ -1,8 +1,17 @@
'use client'
import Link from 'next/link'
export default function Footer() {
return (
<>
<footer>
<div className="footer-inner">COPYRIGHT©2025 Hanwha Japan All Rights Reserved</div>
<div className="footer-inner">
COPYRIGHT©2025 Hanwha Japan All Rights Reserved{' '}
<span>
<Link href="/pdf">PDF</Link>
</span>
</div>
</footer>
</>
)

4
src/components/ui/common/Header.tsx
View File

@ -71,7 +71,7 @@ export default function Header() {
</div>
<div className="profile-group">
<div className="profile-name">{session.userNm}</div>
<div className="profile-company">{session.category}</div>
<div className="profile-company">{session.storeNm}</div>
</div>
</div>
<div className="side-close-wrap">
@ -114,9 +114,11 @@ export default function Header() {
<li className="side-nav-item">
<button onClick={() => router.push('/inquiry/regist')}>1:1お問い合わせ登録</button>
</li>
{session.role !== 'Partner' && (
<li className="side-nav-item">
<button onClick={() => router.push('/pw-reset')}>パスワードリセット</button>
</li>
)}
</ul>
</nav>
<div className="side-nav-footer">

18
src/hooks/useCommCode.ts Normal file
View File

@ -0,0 +1,18 @@
import { axiosInstance } from '@/libs/axios'
import type { CommCode } from '@/types/CommCode'
export function useCommCode() {
const getCommCode = async (headCode: string): Promise<CommCode[]> => {
try {
const response = await axiosInstance(null).get<CommCode[]>('/api/comm-code', { params: { headCode: headCode } })
return response.data
} catch (error) {
console.error(`common code (${headCode}) load failed:`, error)
return []
}
}
return {
getCommCode,
}
}

113
src/hooks/useSuitable.ts
View File

@ -1,30 +1,107 @@
import { suitableApi } from '@/api/suitable'
import { useQuery } from '@tanstack/react-query'
import { axiosInstance, transformObjectKeys } from '@/libs/axios'
import { useSuitableStore } from '@/store/useSuitableStore'
import { useCommCode } from './useCommCode'
import { SUITABLE_HEAD_CODE, type SuitableDetailGroup, type SuitableMain, type Suitable, type SuitableDetail } from '@/types/Suitable'
export function useSuitable() {
const getCategories = async () => {
const { getCommCode } = useCommCode()
const { selectedCategory, searchValue, suitableCommCode, setSuitableCommCode, isSearch } = useSuitableStore()
const getSuitables = async (): Promise<Suitable> => {
try {
// return await suitableApi.getCategory()
const response = await axiosInstance(null).get<Suitable>('/api/suitable/list')
return response.data
} catch (error) {
console.error('카테고리 데이터 로드 실패:', error)
console.error('지붕재 데이터 로드 실패:', error)
return { suitable: [], detail: [] }
}
}
// const updateSearchResults = async (selectedCategory: string | undefined, searchValue: string | undefined): Promise<SuitableData[]> => {
// try {
// const response = await axiosInstance(null).get<SuitableData[]>('/api/suitable/list', { params: { selectedCategory, searchValue } })
// return response.data
// } catch (error) {
// console.error('지붕재 데이터 검색 실패:', error)
// return []
// }
// }
const getSuitableCommCode = () => {
const headCodes = Object.values(SUITABLE_HEAD_CODE) as SUITABLE_HEAD_CODE[]
for (const code of headCodes) {
getCommCode(code).then((res) => {
setSuitableCommCode(code, res)
})
}
}
const toCodeName = (headCode: string, code: string): string => {
const commCode = suitableCommCode.get(headCode)
return commCode?.find((item) => item.code === code)?.codeJp || ''
}
const toSuitableDetail = (mainId: number): SuitableDetail[] => {
try {
const suitableDetailString = suitableList?.detail.find((item) => item.mainId === mainId)?.detail
if (!suitableDetailString) {
return []
}
const suitableDetailArray = transformObjectKeys(JSON.parse(suitableDetailString)) as SuitableDetail[]
if (!Array.isArray(suitableDetailArray)) {
throw new Error('suitableDetailArray is not an array')
}
return suitableDetailArray
} catch (error) {
console.error('지붕재 데이터 파싱 실패:', error)
return []
}
}
const getSuitables = async () => {
try {
// return await suitableApi.getList()
} catch (error) {
console.error('지붕재 데이터 로드 실패:', error)
}
}
const { data: suitableList, isLoading: isInitialLoading } = useQuery<Suitable>({
queryKey: ['suitables', 'list'],
queryFn: async () => await getSuitables(),
staleTime: 1000 * 60 * 10, // 10분
gcTime: 1000 * 60 * 10, // 10분
})
const updateSearchResults = async (selectedCategory: string | undefined, searchValue: string | undefined) => {
try {
// return await suitableApi.getList(selectedCategory, searchValue)
} catch (error) {
console.error('지붕재 데이터 검색 실패:', error)
}
const {
data: suitableSearchResults,
refetch: refetchBySearch,
isLoading: isSearchLoading,
} = useQuery<Suitable>({
queryKey: ['suitables', 'search', selectedCategory, isSearch],
queryFn: async () => {
if (!isSearch && !selectedCategory) {
// 검색 상태가 아니면 초기 데이터 반환 임시처리
return isInitialLoading ? await getSuitables() : suitableList ?? { suitable: [], detail: [] }
} else {
const filteredSuitable = suitableList?.suitable.filter((item: SuitableMain) => {
const categoryMatch = !selectedCategory || item.roofMtCd === selectedCategory
const searchMatch = !searchValue || item.productName.includes(searchValue)
return categoryMatch && searchMatch
}) ?? []
const mainIds = filteredSuitable.map((item: SuitableMain) => item.id)
const filteredDetail = suitableList?.detail.filter((item: SuitableDetailGroup) => {
return mainIds.includes(item.mainId)
}) ?? []
return { suitable: filteredSuitable, detail: filteredDetail }
}
},
staleTime: 1000 * 60 * 10,
gcTime: 1000 * 60 * 10,
enabled: true,
})
return { getCategories, getSuitables, updateSearchResults }
return {
getSuitables,
getSuitableCommCode,
toCodeName,
toSuitableDetail,
suitableList,
suitableSearchResults,
refetchBySearch,
isSearchLoading,
}
}

109
src/hooks/useSuitableRaw.ts Normal file
View File

@ -0,0 +1,109 @@
import { useQuery } from '@tanstack/react-query'
import { axiosInstance, transformObjectKeys } from '@/libs/axios'
import { useSuitableStore } from '@/store/useSuitableStore'
import { useCommCode } from './useCommCode'
import { SUITABLE_HEAD_CODE, type SuitableDetail } from '@/types/Suitable'
export type Suitable = {
id: number
productName: string
manuFtCd: string
roofMtCd: string
roofShCd: string
detail: string
}
export function useSuitableRaw() {
const { getCommCode } = useCommCode()
const { selectedCategory, searchValue, suitableCommCode, setSuitableCommCode, isSearch } = useSuitableStore()
const getSuitables = async (): Promise<Suitable[]> => {
try {
const response = await axiosInstance(null).get<Suitable[]>('/api/suitable/list/test')
return response.data
} catch (error) {
console.error('지붕재 데이터 로드 실패:', error)
return []
}
}
// const updateSearchResults = async (selectedCategory: string | undefined, searchValue: string | undefined): Promise<SuitableData[]> => {
// try {
// const response = await axiosInstance(null).get<SuitableData[]>('/api/suitable/list', { params: { selectedCategory, searchValue } })
// return response.data
// } catch (error) {
// console.error('지붕재 데이터 검색 실패:', error)
// return []
// }
// }
const getSuitableCommCode = () => {
const headCodes = Object.values(SUITABLE_HEAD_CODE) as SUITABLE_HEAD_CODE[]
for (const code of headCodes) {
getCommCode(code).then((res) => {
setSuitableCommCode(code, res)
})
}
}
const toCodeName = (headCode: string, code: string): string => {
const commCode = suitableCommCode.get(headCode)
return commCode?.find((item) => item.code === code)?.codeJp || ''
}
const toSuitableDetail = (suitableDetailString: string): SuitableDetail[] => {
try {
const suitableDetailArray = transformObjectKeys(JSON.parse(suitableDetailString)) as SuitableDetail[]
if (!Array.isArray(suitableDetailArray)) {
throw new Error('suitableDetailArray is not an array')
}
return suitableDetailArray
} catch (error) {
console.error('지붕재 데이터 파싱 실패:', error)
return []
}
}
const { data: suitableList, isLoading: isInitialLoading } = useQuery<Suitable[]>({
queryKey: ['suitables', 'list'],
queryFn: async () => await getSuitables(),
staleTime: 1000 * 60 * 10, // 10분
gcTime: 1000 * 60 * 10, // 10분
})
const {
data: suitableSearchResults,
refetch: refetchBySearch,
isLoading: isSearchLoading,
// } = useQuery<SuitableData>({
} = useQuery<Suitable[]>({
queryKey: ['suitables', 'search', selectedCategory, isSearch],
queryFn: async () => {
if (!isSearch && !selectedCategory) {
return isInitialLoading ? await getSuitables() : suitableList ?? [] // 검색 상태가 아니면 초기 데이터 반환 임시처리
} else {
return (
suitableList?.filter((item: Suitable) => {
const categoryMatch = !selectedCategory || item.roofMtCd === selectedCategory
const searchMatch = !searchValue || item.productName.includes(searchValue)
return categoryMatch && searchMatch
}) ?? []
)
}
},
staleTime: 1000 * 60 * 10,
gcTime: 1000 * 60 * 10,
enabled: true,
})
return {
getSuitables,
getSuitableCommCode,
toCodeName,
toSuitableDetail,
suitableList,
suitableSearchResults,
refetchBySearch,
isSearchLoading,
}
}

103
src/hooks/useSurvey.ts
View File

@ -1,43 +1,39 @@
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import type {
SurveyBasicInfo,
SurveyDetailInfo,
SurveyDetailRequest,
SurveyDetailCoverRequest,
SurveyRegistRequest,
} from '@/types/Survey'
import type { SurveyBasicInfo, SurveyDetailInfo, SurveyDetailRequest, SurveyDetailCoverRequest, SurveyRegistRequest } from '@/types/Survey'
import { axiosInstance } from '@/libs/axios'
import { useSurveyFilterStore } from '@/store/surveyFilterStore'
import { queryStringFormatter } from '@/utils/common-utils'
import { useSessionStore } from '@/store/session'
import { useMemo } from 'react'
import { AxiosResponse } from 'axios'
const requiredFields = [
export const requiredFields = [
{
field: 'INSTALLATION_SYSTEM',
field: 'installationSystem',
name: '設置希望システム',
},
{
field: 'CONSTRUCTION_YEAR',
field: 'constructionYear',
name: '建築年数',
},
{
field: 'RAFTER_SIZE',
field: 'rafterSize',
name: '垂木サイズ',
},
{
field: 'RAFTER_PITCH',
field: 'rafterPitch',
name: '垂木傾斜',
},
{
field: 'WATERPROOF_MATERIAL',
field: 'waterproofMaterial',
name: '防水材',
},
{
field: 'INSULATION_PRESENCE',
field: 'insulationPresence',
name: '断熱材有無',
},
{
field: 'STRUCTURE_ORDER',
field: 'structureOrder',
name: '屋根構造の順序',
},
]
@ -60,9 +56,8 @@ type ZipCode = {
}
export function useServey(id?: number): {
surveyList: SurveyBasicInfo[] | []
surveyList: { data: SurveyBasicInfo[]; count: number } | {}
surveyDetail: SurveyBasicInfo | null
surveyListCount: number
isLoadingSurveyList: boolean
isLoadingSurveyDetail: boolean
isCreatingSurvey: boolean
@ -72,18 +67,23 @@ export function useServey(id?: number): {
createSurveyDetail: (params: { surveyId: number; surveyDetail: SurveyDetailCoverRequest }) => void
updateSurvey: (survey: SurveyRegistRequest) => void
deleteSurvey: () => Promise<boolean>
submitSurvey: () => void
submitSurvey: (saveId?: number) => void
validateSurveyDetail: (surveyDetail: SurveyDetailRequest) => string
getZipCode: (zipCode: string) => Promise<ZipCode[] | null>
refetchSurveyList: () => void
} {
const queryClient = useQueryClient()
const { keyword, searchOption, isMySurvey, sort, offset } = useSurveyFilterStore()
const { session } = useSessionStore()
const { data: surveyList, isLoading: isLoadingSurveyList } = useQuery({
const {
data: surveyListData,
isLoading: isLoadingSurveyList,
refetch: refetchSurveyList,
} = useQuery({
queryKey: ['survey', 'list', keyword, searchOption, isMySurvey, sort, offset, session?.storeNm, session?.builderNo, session?.role],
queryFn: async () => {
const resp = await axiosInstance(null).get<SurveyBasicInfo[]>('/api/survey-sales', {
const resp = await axiosInstance(null).get<{ data: SurveyBasicInfo[]; count: number }>('/api/survey-sales', {
params: {
keyword,
searchOption,
@ -97,41 +97,30 @@ export function useServey(id?: number): {
})
return resp.data
},
enabled: session?.isLoggedIn,
})
const surveyData = useMemo(() => {
if (!surveyListData) return { count: 0, data: [] }
return {
...surveyListData,
}
}, [surveyListData])
const { data: surveyDetail, isLoading: isLoadingSurveyDetail } = useQuery({
queryKey: ['survey', id],
queryFn: async () => {
if (id === undefined) throw new Error('id is required')
if (id === null) return null
if (id === null || isNaN(id)) return null
const resp = await axiosInstance(null).get<SurveyBasicInfo>(`/api/survey-sales/${id}`)
return resp.data
},
enabled: id !== undefined,
})
const { data: surveyListCount } = useQuery({
queryKey: ['survey', 'list', keyword, searchOption, isMySurvey, sort, session?.builderNo, session?.storeNm, session?.role],
queryFn: async () => {
const resp = await axiosInstance(null).get<number>('/api/survey-sales', {
params: {
keyword,
searchOption,
isMySurvey,
sort,
builderNo: session?.builderNo,
store: session?.storeNm,
role: session?.role,
},
})
return resp.data
},
})
const { mutateAsync: createSurvey, isPending: isCreatingSurvey } = useMutation({
mutationFn: async (survey: SurveyRegistRequest) => {
const resp = await axiosInstance(null).post<SurveyBasicInfo>('/api/survey-sales', survey)
return resp.data.ID ?? 0
return resp.data.id ?? 0
},
onSuccess: (data) => {
queryClient.invalidateQueries({ queryKey: ['survey', 'list'] })
@ -142,6 +131,7 @@ export function useServey(id?: number): {
const { mutate: updateSurvey, isPending: isUpdatingSurvey } = useMutation({
mutationFn: async (survey: SurveyRegistRequest) => {
console.log('updateSurvey, survey:: ', survey)
if (id === undefined) throw new Error('id is required')
const resp = await axiosInstance(null).put<SurveyRegistRequest>(`/api/survey-sales/${id}`, survey)
return resp.data
@ -176,9 +166,10 @@ export function useServey(id?: number): {
})
const { mutateAsync: submitSurvey } = useMutation({
mutationFn: async () => {
if (id === undefined) throw new Error('id is required')
const resp = await axiosInstance(null).patch<boolean>(`/api/survey-sales/${id}`, {
mutationFn: async (saveId?: number) => {
const submitId = saveId ?? id
if (!submitId) throw new Error('id is required')
const resp = await axiosInstance(null).patch<boolean>(`/api/survey-sales/${submitId}`, {
submit: true,
})
return resp.data
@ -190,24 +181,34 @@ export function useServey(id?: number): {
})
const validateSurveyDetail = (surveyDetail: SurveyDetailRequest) => {
const etcFields = ['INSTALLATION_SYSTEM', 'CONSTRUCTION_YEAR', 'RAFTER_SIZE', 'RAFTER_PITCH', 'WATERPROOF_MATERIAL', 'STRUCTURE_ORDER'] as const
const etcFields = [
'installationSystem',
'constructionYear',
'rafterSize',
'rafterPitch',
'waterproofMaterial',
'structureOrder',
'insulationPresence',
] as const
const emptyField = requiredFields.find((field) => {
if (etcFields.includes(field.field as (typeof etcFields)[number])) {
return (
surveyDetail[field.field as keyof SurveyDetailRequest] === null && surveyDetail[`${field.field}_ETC` as keyof SurveyDetailRequest] === ''
surveyDetail[field.field as keyof SurveyDetailRequest] === null &&
(surveyDetail[`${field.field}Etc` as keyof SurveyDetailRequest] === null ||
surveyDetail[`${field.field}Etc` as keyof SurveyDetailRequest]?.toString().trim() === '')
)
} else {
return surveyDetail[field.field as keyof SurveyDetailRequest] === null
}
})
const contractCapacity = surveyDetail.CONTRACT_CAPACITY
const contractCapacity = surveyDetail.contractCapacity
if (contractCapacity && contractCapacity.trim() !== '' && contractCapacity.split(' ')?.length === 1) {
return 'CONTRACT_CAPACITY_UNIT'
return 'contractCapacityUnit'
}
return emptyField?.name || ''
return emptyField?.field || ''
}
const getZipCode = async (zipCode: string): Promise<ZipCode[] | null> => {
@ -223,9 +224,8 @@ export function useServey(id?: number): {
}
return {
surveyList: surveyList || [],
surveyDetail: surveyDetail || null,
surveyListCount: surveyListCount || 0,
surveyList: surveyData.data,
surveyDetail: surveyDetail as SurveyBasicInfo | null,
isLoadingSurveyList,
isLoadingSurveyDetail,
isCreatingSurvey,
@ -238,5 +238,6 @@ export function useServey(id?: number): {
submitSurvey,
validateSurveyDetail,
getZipCode,
refetchSurveyList,
}
}

68
src/libs/axios.ts
View File

@ -2,37 +2,59 @@ import axios from 'axios'
export const axiosInstance = (url: string | null | undefined) => {
const baseURL = url || process.env.NEXT_PUBLIC_API_URL
return axios.create({
const instance = axios.create({
baseURL,
headers: {
Accept: 'application/json',
},
})
}
// Request interceptor
axios.interceptors.request.use(
instance.interceptors.request.use(
(config) => {
// 여기에 토큰 추가 등의 공통 로직을 넣을 수 있습니다
// console.log('🚀 ~ config:', config)
return config
},
(error) => {
return Promise.reject(error)
},
)
)
// Response interceptor
axios.interceptors.response.use(
(response) => transferResponse(response),
instance.interceptors.response.use(
(response) => {
response.data = transferResponse(response)
return response
},
(error) => {
// 에러 처리 로직
return Promise.reject(error)
},
)
)
return instance
}
// Request interceptor
// axios.interceptors.request.use(
// (config) => {
// // 여기에 토큰 추가 등의 공통 로직을 넣을 수 있습니다
// return config
// },
// (error) => {
// return Promise.reject(error)
// },
// )
// Response interceptor
// axios.interceptors.response.use(
// (response) => transferResponse(response),
// (error) => {
// // 에러 처리 로직
// return Promise.reject(error)
// },
// )
// response데이터가 array, object에 따라 분기하여 키 변환
const transferResponse = (response: any) => {
export const transferResponse = (response: any) => {
if (!response.data) return response.data
// 배열인 경우 각 객체의 키를 변환
@ -45,22 +67,34 @@ const transferResponse = (response: any) => {
}
// camel case object 반환
const transformObjectKeys = (obj: any): any => {
export const transformObjectKeys = (obj: any): any => {
if (Array.isArray(obj)) {
return obj.map(transformObjectKeys)
}
if (obj !== null && typeof obj === 'object') {
return Object.keys(obj).reduce((acc: any, key: string) => {
const camelKey = snakeToCamel(key)
acc[camelKey] = transformObjectKeys(obj[key])
let transformedKey = key
// Handle uppercase snake_case (e.g., USER_NAME -> userName)
// Handle lowercase snake_case (e.g., user_name -> userName)
if (/^[A-Z_]+$/.test(key) || /^[a-z_]+$/.test(key)) {
transformedKey = snakeToCamel(key)
}
// Handle single uppercase word (e.g., ROLE -> role)
else if (/^[A-Z]+$/.test(key)) {
transformedKey = key.toLowerCase()
}
// Preserve existing camelCase
acc[transformedKey] = transformObjectKeys(obj[key])
return acc
}, {})
}
return obj
}
// snake case to camel case
const snakeToCamel = (str: string): string => {
return str.replace(/([-_][a-z])/g, (group) => group.toUpperCase().replace('-', '').replace('_', ''))
return str.toLowerCase().replace(/([-_][a-z])/g, (group) => group.toUpperCase().replace('-', '').replace('_', ''))
}

38
src/libs/partner.ts Normal file
View File

@ -0,0 +1,38 @@
import { createPool } from 'mysql2'
const pool = createPool({
host: process.env.DB_HOST as string,
user: process.env.DB_USER as string,
password: process.env.DB_PASSWORD as string,
database: process.env.DB_DATABASE as string,
port: Number(process.env.DB_PORT),
waitForConnections: true,
connectionLimit: 10,
queueLimit: 0,
})
pool.getConnection((err, conn) => {
if (err) console.log('Error connecting to db...')
else console.log('Connected to db...!')
conn.release()
})
const executeQuery = (query: string, arrParams: any[]) => {
return new Promise((resolve, reject) => {
try {
pool.query(query, arrParams, (err, data) => {
if (err) {
console.log('🚀 ~ pool.query ~ err:', err)
reject(err)
}
console.log('🚀 ~ pool.query ~ data:', data)
resolve(data)
})
} catch (err) {
console.log('🚀 ~ returnnewPromise ~ err:', err)
reject(err)
}
})
}
export default executeQuery

9
src/libs/tracking.ts Normal file
View File

@ -0,0 +1,9 @@
import { axiosInstance } from './axios'
export const tracking = async (params: { url: string; data: string }) => {
const { url, data } = params
const result = await axiosInstance(null).post('/api/tracking', {
url,
data,
})
}

6
src/middleware.ts
View File

@ -10,9 +10,9 @@ export async function middleware(request: NextRequest) {
const session = await getIronSession<SessionData>(cookieStore, sessionOptions)
// todo: 로그인 기능 추가 시 주석 해제
// if (!session.isLoggedIn) {
// return NextResponse.redirect(new URL('/login', request.url))
// }
if (!session.isLoggedIn) {
return NextResponse.redirect(new URL('/login', request.url))
}
return NextResponse.next()
}

23
src/providers/EdgeProvider.tsx
View File

@ -1,12 +1,13 @@
'use client'
import { useEffect } from 'react'
import { usePathname } from 'next/navigation'
import { usePathname, useRouter } from 'next/navigation'
import { useHeaderStore } from '@/store/header'
import { usePopupController } from '@/store/popupController'
import { useSideNavState } from '@/store/sideNavState'
import { useSessionStore } from '@/store/session'
import { tracking } from '@/libs/tracking'
declare global {
interface Window {
@ -21,12 +22,30 @@ interface EdgeProviderProps {
}
export default function EdgeProvider({ children, sessionData }: EdgeProviderProps) {
const router = useRouter()
const pathname = usePathname()
const { setBackBtn } = useHeaderStore()
const { reset } = useSideNavState()
const { setAlertMsg, setAlertBtn, setAlert, setAlert2, setAlert2BtnYes, setAlert2BtnNo } = usePopupController()
const { session, setSession } = useSessionStore()
if (pathname === '/login') {
if (session?.isLoggedIn) {
router.push('/')
}
}
/**
* 사용자 이벤트 트래킹 처리
*
*/
const handlePageEvent = (path: string) => {
tracking({
url: path,
data: '',
})
}
/**
* alert 함수 - window.alert 함수 대체
* @param msg
@ -88,6 +107,8 @@ export default function EdgeProvider({ children, sessionData }: EdgeProviderProp
}
//사이드바 초기화
reset()
// 페이지 이벤트 트래킹
handlePageEvent(pathname)
}, [pathname])
return <>{children}</>

103
src/store/useSuitableStore.ts
View File

@ -1,68 +1,71 @@
import { create } from 'zustand'
import { Suitable, suitableApi } from '@/api/suitable'
import type { CommCode } from '@/types/CommCode'
interface SuitableState {
// // 검색 결과 리스트
// searchResults: Suitable[]
// // 초기 데이터 로드
// fetchInitializeData: () => Promise<void>
// // 검색 결과 설정
// setSearchResults: (results: Suitable[]) => void
// // 검색 결과 초기화
// resetSearchResults: () => void
/* 공통코드 */
suitableCommCode: Map<string, CommCode[]>
/* 공통코드 설정 */
setSuitableCommCode: (headCode: string, commCode: CommCode[]) => void
// 선택된 아이템 리스트
selectedItems: Suitable[]
// 선택된 아이템 추가
addSelectedItem: (item: Suitable) => void
// 선택된 아이템 제거
/* 검색 상태 */
isSearch: boolean
/* 검색 상태 설정 */
setIsSearch: (isSearch: boolean) => void
/* 선택된 카테고리 */
selectedCategory: string
/* 선택된 카테고리 설정 */
setSelectedCategory: (category: string) => void
/* 검색 값 */
searchValue: string
/* 검색 값 설정 */
setSearchValue: (value: string) => void
/* 선택된 아이템 리스트 */
selectedItems: number[]
/* 선택된 아이템 추가 */
addSelectedItem: (itemId: number) => void
/* 선택된 아이템 제거 */
removeSelectedItem: (itemId: number) => void
// 선택된 아이템 모두 제거
/* 선택된 아이템 모두 제거 */
clearSelectedItems: () => void
}
export const useSuitableStore = create<SuitableState>((set) => ({
// // 초기 상태
// searchResults: [],
suitableCommCode: new Map() as Map<string, CommCode[]>,
isSearch: false as boolean,
selectedCategory: '' as string,
searchValue: '' as string,
selectedItems: [] as number[],
// // 초기 데이터 로드
// fetchInitializeData: async () => {
// const suitables = await fetchInitialSuitablee()
// set({ searchResults: suitables })
// },
// // 검색 결과 설정
// setSearchResults: (results) => set({ searchResults: results }),
// // 검색 결과 초기화
// resetSearchResults: () => set({ searchResults: [] }),
// 초기 상태
selectedItems: [],
// 선택된 아이템 추가 (중복 방지)
addSelectedItem: (item) =>
/* 공통코드 설정 */
setSuitableCommCode: (headCode: string, commCode: CommCode[]) =>
set((state) => ({
selectedItems: state.selectedItems.some((i) => i.id === item.id) ? state.selectedItems : [...state.selectedItems, item],
suitableCommCode: new Map(state.suitableCommCode).set(headCode, commCode),
})),
// 선택된 아이템 제거
removeSelectedItem: (itemId) =>
/* 검색 상태 설정 */
setIsSearch: (isSearch: boolean) => set({ isSearch }),
/* 선택된 카테고리 설정 */
setSelectedCategory: (category: string) => set({ selectedCategory: category }),
/* 검색 값 설정 */
setSearchValue: (value: string) => set({ searchValue: value }),
/* 선택된 아이템 추가 */
addSelectedItem: (itemId: number) =>
set((state) => ({
selectedItems: state.selectedItems.filter((item) => item.id !== itemId),
selectedItems: state.selectedItems.some((i) => i === itemId) ? state.selectedItems : [...state.selectedItems, itemId],
})),
// 선택된 아이템 모두 제거
/* 선택된 아이템 제거 */
removeSelectedItem: (itemId: number) =>
set((state) => ({
selectedItems: state.selectedItems.filter((i) => i !== itemId),
})),
/* 선택된 아이템 모두 제거 */
clearSelectedItems: () => set({ selectedItems: [] }),
}))
// // 전체 데이터 초기화 함수
// async function fetchInitialSuitablee() {
// try {
// const suitable = await suitableApi.getList()
// return suitable
// } catch (error) {
// console.error('초기 데이터 로드 실패:', error)
// return []
// }
// }

5
src/types/CommCode.ts Normal file
View File

@ -0,0 +1,5 @@
export type CommCode = {
headCd: string
code: string
codeJp: string
}

44
src/types/Suitable.ts Normal file
View File

@ -0,0 +1,44 @@
export enum SUITABLE_HEAD_CODE {
/* 지붕재 제조사명 */
MANU_FT_CD = 'MANU_FT_CD',
/* 지붕재 종류 */
ROOF_MT_CD = 'ROOF_MT_CD',
/* 마운팅 브래킷 종류 */
ROOF_SH_CD = 'ROOF_SH_CD',
/* 마운팅 브래킷 제조사명 및 제품코드드 */
TRESTLE_MFPC_CD = 'TRESTLE_MFPC_CD',
}
export type SuitableMain = {
id: number
productName: string
manuFtCd: string
roofMtCd: string
roofShCd: string
}
export type SuitableDetail = {
id: number
mainId: number
trestleMfpcCd: string
trestleManufacturerProductName: string
memo: string
}
// export type Suitable = {
// id: number
// productName: string
// manuFtCd: string
// roofMtCd: string
// roofShCd: string
// detail: string
// }
export type SuitableDetailGroup = {
mainId: number
detail: string
}
export type Suitable = {
suitable: SuitableMain[]
detail: SuitableDetailGroup[]
}

228
src/types/Survey.ts
View File

@ -1,130 +1,132 @@
export type SurveyBasicInfo = {
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
DETAIL_INFO: SurveyDetailInfo | null
REG_DT: Date
UPT_DT: Date
id: number
representative: string
store: string | null
constructionPoint: string | null
investigationDate: string | null
buildingName: string | null
customerName: string | null
postCode: string | null
address: string | null
addressDetail: string | null
submissionStatus: boolean
submissionDate: string | null
detailInfo: SurveyDetailInfo | null
regDt: Date
uptDt: Date
}
export type SurveyDetailInfo = {
ID: number
BASIC_INFO_ID: number
CONTRACT_CAPACITY: string | null
RETAIL_COMPANY: string | null
SUPPLEMENTARY_FACILITIES: string | null // number 배열
SUPPLEMENTARY_FACILITIES_ETC: string | null
INSTALLATION_SYSTEM: string | null
INSTALLATION_SYSTEM_ETC: string | null
CONSTRUCTION_YEAR: string | null
CONSTRUCTION_YEAR_ETC: string | null
ROOF_MATERIAL: string | null // number 배열
ROOF_MATERIAL_ETC: string | null
ROOF_SHAPE: string | null
ROOF_SHAPE_ETC: string | null
ROOF_SLOPE: string | null
HOUSE_STRUCTURE: string | null
HOUSE_STRUCTURE_ETC: string | null
RAFTER_MATERIAL: string | null
RAFTER_MATERIAL_ETC: string | null
RAFTER_SIZE: string | null
RAFTER_SIZE_ETC: string | null
RAFTER_PITCH: string | null
RAFTER_PITCH_ETC: string | null
RAFTER_DIRECTION: string | null
OPEN_FIELD_PLATE_KIND: string | null
OPEN_FIELD_PLATE_KIND_ETC: string | null
OPEN_FIELD_PLATE_THICKNESS: string | null
LEAK_TRACE: boolean | null
WATERPROOF_MATERIAL: string | null
WATERPROOF_MATERIAL_ETC: string | null
INSULATION_PRESENCE: string | null
INSULATION_PRESENCE_ETC: string | null
STRUCTURE_ORDER: string | null
STRUCTURE_ORDER_ETC: string | null
INSTALLATION_AVAILABILITY: string | null
INSTALLATION_AVAILABILITY_ETC: string | null
MEMO: string | null
REG_DT: Date
UPT_DT: Date
id: number
basicInfoId: number
contractCapacity: string | null
retailCompany: string | null
supplementaryFacilities: string | null // number 배열
supplementaryFacilitiesEtc: string | null
installationSystem: string | null
installationSystemEtc: string | null
constructionYear: string | null
constructionYearEtc: string | null
roofMaterial: string | null // number 배열
roofMaterialEtc: string | null
roofShape: string | null
roofShapeEtc: string | null
roofSlope: string | null
houseStructure: string | null
houseStructureEtc: string | null
rafterMaterial: string | null
rafterMaterialEtc: string | null
rafterSize: string | null
rafterSizeEtc: string | null
rafterPitch: string | null
rafterPitchEtc: string | null
rafterDirection: string | null
openFieldPlateKind: string | null
openFieldPlateKindEtc: string | null
openFieldPlateThickness: string | null
leakTrace: boolean | null
waterproofMaterial: string | null
waterproofMaterialEtc: string | null
insulationPresence: string | null
insulationPresenceEtc: string | null
structureOrder: string | null
structureOrderEtc: string | null
installationAvailability: string | null
installationAvailabilityEtc: string | null
memo: string | null
regDt: Date
uptDt: Date
}
export type SurveyBasicRequest = {
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
constructionPoint: string | null
investigationDate: string | null
buildingName: string | null
customerName: string | null
postCode: string | null
address: string | null
addressDetail: string | null
submissionStatus: boolean
submissionDate: string | null
}
export type SurveyDetailRequest = {
CONTRACT_CAPACITY: string | null
RETAIL_COMPANY: string | null
SUPPLEMENTARY_FACILITIES: string | null // number 배열
SUPPLEMENTARY_FACILITIES_ETC: string | null
INSTALLATION_SYSTEM: string | null
INSTALLATION_SYSTEM_ETC: string | null
CONSTRUCTION_YEAR: string | null
CONSTRUCTION_YEAR_ETC: string | null
ROOF_MATERIAL: string | null // number 배열
ROOF_MATERIAL_ETC: string | null
ROOF_SHAPE: string | null
ROOF_SHAPE_ETC: string | null
ROOF_SLOPE: string | null
HOUSE_STRUCTURE: string | null
HOUSE_STRUCTURE_ETC: string | null
RAFTER_MATERIAL: string | null
RAFTER_MATERIAL_ETC: string | null
RAFTER_SIZE: string | null
RAFTER_SIZE_ETC: string | null
RAFTER_PITCH: string | null
RAFTER_PITCH_ETC: string | null
RAFTER_DIRECTION: string | null
OPEN_FIELD_PLATE_KIND: string | null
OPEN_FIELD_PLATE_KIND_ETC: string | null
OPEN_FIELD_PLATE_THICKNESS: string | null
LEAK_TRACE: boolean | null
WATERPROOF_MATERIAL: string | null
WATERPROOF_MATERIAL_ETC: string | null
INSULATION_PRESENCE: string | null
INSULATION_PRESENCE_ETC: string | null
STRUCTURE_ORDER: string | null
STRUCTURE_ORDER_ETC: string | null
INSTALLATION_AVAILABILITY: string | null
INSTALLATION_AVAILABILITY_ETC: string | null
MEMO: string | null
contractCapacity: string | null
retailCompany: string | null
supplementaryFacilities: string | null // number 배열
supplementaryFacilitiesEtc: string | null
installationSystem: string | null
installationSystemEtc: string | null
constructionYear: string | null
constructionYearEtc: string | null
roofMaterial: string | null // number 배열
roofMaterialEtc: string | null
roofShape: string | null
roofShapeEtc: string | null
roofSlope: string | null
houseStructure: string | null
houseStructureEtc: string | null
rafterMaterial: string | null
rafterMaterialEtc: string | null
rafterSize: string | null
rafterSizeEtc: string | null
rafterPitch: string | null
rafterPitchEtc: string | null
rafterDirection: string | null
openFieldPlateKind: string | null
openFieldPlateKindEtc: string | null
openFieldPlateThickness: string | null
leakTrace: boolean | null
waterproofMaterial: string | null
waterproofMaterialEtc: string | null
insulationPresence: string | null
insulationPresenceEtc: string | null
structureOrder: string | null
structureOrderEtc: string | null
installationAvailability: string | null
installationAvailabilityEtc: string | null
memo: string | null
}
export type SurveyDetailCoverRequest = {
DETAIL_INFO: SurveyDetailRequest
detailInfo: SurveyDetailRequest
}
export type SurveyRegistRequest = {
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: SurveyDetailRequest | null
representative: string
store: string | null
constructionPoint: string | null
investigationDate: string | null
buildingName: string | null
customerName: string | null
postCode: string | null
address: string | null
addressDetail: string | null
submissionStatus: boolean
submissionDate: string | null
detailInfo: SurveyDetailRequest | null
}
export type Mode = 'CREATE' | 'EDIT' | 'READ' | 'TEMP' // 등록 | 수정 | 상세 | 임시저장

25
src/utils/common-utils.js
View File

@ -185,3 +185,28 @@ export const isEqualObjects = (obj1, obj2) => {
function isObject(value) {
return value !== null && typeof value === 'object'
}
// 카멜케이스를 스네이크케이스로 변환하는 함수
export const toSnakeCase = (str) => {
return str.replace(/[A-Z]/g, letter => `_${letter.toLowerCase()}`);
}
// 객체의 키를 스네이크케이스로 변환하는 함수
export const convertToSnakeCase = (obj) => {
if (obj === null || obj === undefined) return obj;
if (Array.isArray(obj)) {
return obj.map((item) => convertToSnakeCase(item))
}
if (typeof obj === 'object') {
return Object.keys(obj).reduce((acc, key) => {
const snakeKey = toSnakeCase(key).toUpperCase();
acc[snakeKey] = convertToSnakeCase(obj[key]);
return acc;
}, {});
}
return obj;
}