Merge branch 'dev' of https://git.hanasys.jp/qcast3/onsitesurvey into feature/inquiry
This commit is contained in:
commit
8c36446de7
@ -1,6 +1,6 @@
|
||||
NEXT_PUBLIC_RUN_MODE=production
|
||||
#route handler
|
||||
NEXT_PUBLIC_API_URL=http://1.248.227.176:3000
|
||||
NEXT_PUBLIC_API_URL=http://localhost:3000
|
||||
|
||||
#qsp 로그인 api
|
||||
# NEXT_PUBLIC_QSP_API_URL=http://1.248.227.176:8120
|
||||
|
||||
24
README.md
24
README.md
@ -64,15 +64,21 @@ session에 있는 role 키로 구분한다
|
||||
# 지붕재 적합성 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" />
|
||||
}
|
||||
const suitableCheckIcon = (value: string): string => {
|
||||
const iconMap: Record<string, string> = {
|
||||
'×': '/assets/images/sub/compliance_x_icon.svg',
|
||||
'ー': '/assets/images/sub/compliance_quest_icon.svg',
|
||||
default: '/assets/images/sub/compliance_check_icon.svg',
|
||||
}
|
||||
return iconMap[value] || iconMap.default
|
||||
}
|
||||
const suitableCheckMemo = (value: string): string => {
|
||||
if (value === '○') return '設置可'
|
||||
if (value === '×') return '設置不可'
|
||||
if (value === 'ー') return 'お問い合わせください'
|
||||
return `${value}で設置可`
|
||||
}
|
||||
```
|
||||
|
||||
- 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요
|
||||
- src/hooks/useSuitable.ts > suitableCheckIcon(), suitableCheckMemo()
|
||||
- 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요
|
||||
|
||||
88
diagram/Login.md
Normal file
88
diagram/Login.md
Normal file
@ -0,0 +1,88 @@
|
||||
# Login Component Structure
|
||||
|
||||
## Component Diagram
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
A[Login Component] --> B[State Management]
|
||||
B --> B1[useState Hooks]
|
||||
B1 --> B1a[pwShow: 비밀번호 표시 여부]
|
||||
B1 --> B1b[idSave: ID 저장 여부]
|
||||
B1 --> B1c[isPartners: Q.PARTNERS 여부]
|
||||
B1 --> B1d[isLogin: 로그인 상태]
|
||||
|
||||
A --> C[Account Management]
|
||||
C --> C1[useReducer]
|
||||
C1 --> C1a[loginId]
|
||||
C1 --> C1b[pwd]
|
||||
|
||||
A --> D[External Hooks]
|
||||
D --> D1[useRouter]
|
||||
D --> D2[useLocalStorage]
|
||||
D --> D3[useSessionStore]
|
||||
D --> D4[useAxios]
|
||||
D --> D5[useQuery]
|
||||
|
||||
A --> E[Event Handlers]
|
||||
E --> E1[handleLogin]
|
||||
E --> E2[handleKeyDown]
|
||||
E --> E3[validateLogin]
|
||||
|
||||
A --> F[Effects]
|
||||
F --> F1[Login Success Effect]
|
||||
F1 --> F1a[세션 저장]
|
||||
F1 --> F1b[라우팅]
|
||||
F --> F2[Email Validation Effect]
|
||||
F2 --> F2a[Partners 모드 전환]
|
||||
|
||||
A --> G[UI Components]
|
||||
G --> G1[Login Form]
|
||||
G1 --> G1a[ID Input]
|
||||
G1 --> G1b[Password Input]
|
||||
G1 --> G1c[Checkboxes]
|
||||
G1 --> G1d[Login Button]
|
||||
```
|
||||
|
||||
## 주요 특징과 동작 방식
|
||||
|
||||
### 1. 상태 관리
|
||||
|
||||
- `useState`를 사용하여 UI 상태 관리 (비밀번호 표시, ID 저장, Partners 모드)
|
||||
- `useReducer`를 사용하여 계정 정보(loginId, pwd) 관리
|
||||
|
||||
### 2. 외부 훅 통합
|
||||
|
||||
- `useRouter`: 페이지 라우팅
|
||||
- `useLocalStorage`: 로컬 스토리지 데이터 관리
|
||||
- `useSessionStore`: 세션 상태 관리
|
||||
- `useAxios`: API 통신
|
||||
- `useQuery`: 로그인 API 호출 및 상태 관리
|
||||
|
||||
### 3. 이벤트 처리
|
||||
|
||||
- `handleLogin`: 로그인 시도
|
||||
- `handleKeyDown`: Enter 키 입력 처리
|
||||
- `validateLogin`: 입력값 유효성 검사
|
||||
|
||||
### 4. 효과 처리
|
||||
|
||||
- 로그인 성공 시 세션 저장 및 라우팅
|
||||
- 이메일 형식에 따른 Partners 모드 자동 전환
|
||||
|
||||
### 5. UI 구성
|
||||
|
||||
- ID/PW 입력 필드
|
||||
- 비밀번호 표시/숨김 토글
|
||||
- ID 저장 체크박스
|
||||
- Q.PARTNERS 토글
|
||||
- 로그인 버튼
|
||||
|
||||
### 6. 보안 및 유효성 검사
|
||||
|
||||
- 이메일 형식 검증
|
||||
- 필수 입력값 검증
|
||||
- API 응답 코드에 따른 처리 (200: 성공, 400: 실패)
|
||||
|
||||
## 특징
|
||||
|
||||
이 컴포넌트는 클라이언트 사이드에서 동작하며('use client'), 사용자 인증과 관련된 모든 로직을 포함하고 있습니다. 특히 Q.PARTNERS 모드와 일반 모드를 구분하여 다른 API 엔드포인트를 사용하는 특징이 있습니다.
|
||||
98
diagram/mermaid.md
Normal file
98
diagram/mermaid.md
Normal file
@ -0,0 +1,98 @@
|
||||
# Project Structure Documentation
|
||||
|
||||
## Component Relationship Diagram
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
subgraph Root
|
||||
A[RootLayout] --> B[ReactQueryProviders]
|
||||
B --> C[EdgeProvider]
|
||||
C --> D[HTML Structure]
|
||||
end
|
||||
|
||||
subgraph Layout Components
|
||||
D --> E[Header]
|
||||
D --> F[Main Content]
|
||||
D --> G[Footer]
|
||||
D --> H[Float Button]
|
||||
D --> I[PopupController]
|
||||
end
|
||||
|
||||
subgraph Pages
|
||||
F --> J[Login]
|
||||
F --> K[Survey Sale]
|
||||
F --> L[Suitable]
|
||||
F --> M[Inquiry]
|
||||
F --> N[Password Reset]
|
||||
F --> O[PDF]
|
||||
end
|
||||
|
||||
subgraph Providers
|
||||
P1[ReactQueryProvider]
|
||||
P2[EdgeProvider]
|
||||
end
|
||||
|
||||
subgraph Components
|
||||
C1[UI Components]
|
||||
C2[Popup Components]
|
||||
C3[PDF Components]
|
||||
C4[Survey Components]
|
||||
C5[Inquiry Components]
|
||||
end
|
||||
|
||||
subgraph Utils
|
||||
U1[Session Management]
|
||||
U2[Mailer]
|
||||
U3[API Routes]
|
||||
end
|
||||
|
||||
%% Relationships
|
||||
A --> P1
|
||||
A --> P2
|
||||
J --> U1
|
||||
K --> C4
|
||||
L --> C4
|
||||
M --> C5
|
||||
N --> U2
|
||||
O --> C3
|
||||
```
|
||||
|
||||
## Structure Explanation
|
||||
|
||||
### 1. Root Layout
|
||||
|
||||
- `RootLayout`이 전체 애플리케이션의 기본 구조를 정의
|
||||
- `ReactQueryProviders`와 `EdgeProvider`로 감싸져 있음
|
||||
|
||||
### 2. Layout Components
|
||||
|
||||
- Header, Footer, Float Button 등 공통 레이아웃 컴포넌트
|
||||
- `PopupController`로 팝업 관리
|
||||
|
||||
### 3. Pages
|
||||
|
||||
- Next.js App Router 기반의 페이지 구조
|
||||
- Login, Survey Sale, Suitable, Inquiry 등 주요 페이지들
|
||||
|
||||
### 4. Providers
|
||||
|
||||
- `ReactQueryProvider`: 데이터 페칭 관리
|
||||
- `EdgeProvider`: 세션 및 상태 관리
|
||||
|
||||
### 5. Components
|
||||
|
||||
- UI Components: 공통 UI 요소
|
||||
- Popup Components: 팝업 관련 컴포넌트
|
||||
- PDF Components: PDF 생성/관리 컴포넌트
|
||||
- Survey Components: 설문 관련 컴포넌트
|
||||
- Inquiry Components: 문의 관련 컴포넌트
|
||||
|
||||
### 6. Utils
|
||||
|
||||
- Session Management: 세션 관리
|
||||
- Mailer: 이메일 발송 기능
|
||||
- API Routes: 백엔드 API 엔드포인트
|
||||
|
||||
## Architecture Overview
|
||||
|
||||
이 구조는 Next.js의 App Router를 기반으로 하며, 컴포넌트 기반 아키텍처를 따르고 있습니다. 각 기능별로 모듈화가 잘 되어있고, 공통 컴포넌트와 유틸리티를 효율적으로 재사용할 수 있도록 구성되어 있습니다.
|
||||
125
diagram/mermaid2.md
Normal file
125
diagram/mermaid2.md
Normal file
@ -0,0 +1,125 @@
|
||||
# Login Process Documentation
|
||||
|
||||
## Login Sequence Diagram
|
||||
|
||||
```mermaid
|
||||
sequenceDiagram
|
||||
actor User
|
||||
participant Login as Login Component
|
||||
participant API as Auth API
|
||||
participant QSP as QSP API
|
||||
participant Session as Session Store
|
||||
participant Router as Next Router
|
||||
|
||||
User->>Login: Enter credentials
|
||||
Login->>Login: Validate input
|
||||
alt Invalid Input
|
||||
Login->>User: Show error message
|
||||
else Valid Input
|
||||
Login->>API: POST /api/auth
|
||||
API->>QSP: POST /api/user/login
|
||||
QSP-->>API: Return user data
|
||||
|
||||
alt Login Success
|
||||
API->>Session: Create session
|
||||
Session->>Session: Set user data
|
||||
Session->>Session: Set role
|
||||
API-->>Login: Return success response
|
||||
Login->>Router: Redirect to home
|
||||
Router->>User: Show home page
|
||||
else Login Failed
|
||||
API-->>Login: Return error response
|
||||
Login->>User: Show error message
|
||||
end
|
||||
end
|
||||
```
|
||||
|
||||
## Login Process Flow
|
||||
|
||||
1. **User Input**
|
||||
|
||||
- User enters login credentials (ID and password)
|
||||
- Optional: User can toggle Q.PARTNERS mode
|
||||
- Optional: User can save ID
|
||||
|
||||
2. **Input Validation**
|
||||
|
||||
- Checks if ID and password are not empty
|
||||
- Validates email format for Q.PARTNERS mode
|
||||
|
||||
3. **Authentication Request**
|
||||
|
||||
- Sends credentials to Auth API
|
||||
- Auth API forwards request to QSP API
|
||||
- QSP API validates credentials
|
||||
|
||||
4. **Session Management**
|
||||
|
||||
- On successful login:
|
||||
- Creates new session
|
||||
- Stores user data
|
||||
- Sets user role based on permissions
|
||||
- Saves session to cookies
|
||||
|
||||
5. **Response Handling**
|
||||
- Success: Redirects to home page
|
||||
- Failure: Shows error message
|
||||
|
||||
## Role Assignment Logic
|
||||
|
||||
The system assigns roles based on the following rules:
|
||||
|
||||
- `T01`: If userId is 'T01'
|
||||
- `Admin`: If groupId is '60000'
|
||||
- `Admin_Sub`: If groupId is '70000' and builderNo is null
|
||||
- `Builder`: If groupId is '70000' and builderNo is not null
|
||||
- `User`: Default role for all other cases
|
||||
|
||||
```mermaid
|
||||
graph TD
|
||||
subgraph Root
|
||||
A[RootLayout] --> B[ReactQueryProviders]
|
||||
B --> C[EdgeProvider]
|
||||
C --> D[HTML Structure]
|
||||
end
|
||||
subgraph Layout Components
|
||||
D --> E[Header]
|
||||
D --> F[Main Content]
|
||||
D --> G[Footer]
|
||||
D --> H[Float Button]
|
||||
D --> I[PopupController]
|
||||
end
|
||||
subgraph Pages
|
||||
F --> J[Login]
|
||||
F --> K[Survey Sale]
|
||||
F --> L[Suitable]
|
||||
F --> M[Inquiry]
|
||||
F --> N[Password Reset]
|
||||
F --> O[PDF]
|
||||
end
|
||||
subgraph Providers
|
||||
P1[ReactQueryProvider]
|
||||
P2[EdgeProvider]
|
||||
end
|
||||
subgraph Components
|
||||
C1[UI Components]
|
||||
C2[Popup Components]
|
||||
C3[PDF Components]
|
||||
C4[Survey Components]
|
||||
C5[Inquiry Components]
|
||||
end
|
||||
subgraph Utils
|
||||
U1[Session Management]
|
||||
U2[Mailer]
|
||||
U3[API Routes]
|
||||
end
|
||||
%% Relationships
|
||||
A --> P1
|
||||
A --> P2
|
||||
J --> U1
|
||||
K --> C4
|
||||
L --> C4
|
||||
M --> C5
|
||||
N --> U2
|
||||
O --> C3
|
||||
```
|
||||
157
diagram/mermaid3.md
Normal file
157
diagram/mermaid3.md
Normal file
@ -0,0 +1,157 @@
|
||||
# Pages and Components Class Diagram
|
||||
|
||||
## Class Diagram
|
||||
|
||||
```mermaid
|
||||
classDiagram
|
||||
class RootLayout {
|
||||
+ReactNode children
|
||||
+ReactNode header
|
||||
+ReactNode footer
|
||||
+ReactNode floatBtn
|
||||
+ReactQueryProviders
|
||||
+EdgeProvider
|
||||
+PopupController
|
||||
}
|
||||
|
||||
class Page {
|
||||
<<interface>>
|
||||
+ReactNode render()
|
||||
}
|
||||
|
||||
class LoginPage {
|
||||
+Login component
|
||||
+handleLogin()
|
||||
+validateInput()
|
||||
}
|
||||
|
||||
class SurveySalePage {
|
||||
+SurveySaleList
|
||||
+SurveySaleDetail
|
||||
+handleSurveySubmit()
|
||||
}
|
||||
|
||||
class SuitablePage {
|
||||
+SuitableList
|
||||
+SuitableDetail
|
||||
+handleSuitableSubmit()
|
||||
}
|
||||
|
||||
class InquiryPage {
|
||||
+InquiryList
|
||||
+InquiryDetail
|
||||
+handleInquirySubmit()
|
||||
}
|
||||
|
||||
class PasswordResetPage {
|
||||
+PasswordResetForm
|
||||
+handlePasswordReset()
|
||||
}
|
||||
|
||||
class PDFPage {
|
||||
+PDFViewer
|
||||
+PDFGenerator
|
||||
+handlePDFGeneration()
|
||||
}
|
||||
|
||||
class BaseComponent {
|
||||
<<interface>>
|
||||
+ReactNode render()
|
||||
}
|
||||
|
||||
class UIComponent {
|
||||
+Button
|
||||
+Input
|
||||
+Select
|
||||
+Modal
|
||||
}
|
||||
|
||||
class PopupComponent {
|
||||
+PopupController
|
||||
+PopupContent
|
||||
+handlePopup()
|
||||
}
|
||||
|
||||
class PDFComponent {
|
||||
+PDFViewer
|
||||
+PDFGenerator
|
||||
+handlePDF()
|
||||
}
|
||||
|
||||
class SurveyComponent {
|
||||
+SurveyForm
|
||||
+SurveyList
|
||||
+handleSurvey()
|
||||
}
|
||||
|
||||
class InquiryComponent {
|
||||
+InquiryForm
|
||||
+InquiryList
|
||||
+handleInquiry()
|
||||
}
|
||||
|
||||
%% Relationships
|
||||
RootLayout --> Page
|
||||
Page <|-- LoginPage
|
||||
Page <|-- SurveySalePage
|
||||
Page <|-- SuitablePage
|
||||
Page <|-- InquiryPage
|
||||
Page <|-- PasswordResetPage
|
||||
Page <|-- PDFPage
|
||||
|
||||
BaseComponent <|-- UIComponent
|
||||
BaseComponent <|-- PopupComponent
|
||||
BaseComponent <|-- PDFComponent
|
||||
BaseComponent <|-- SurveyComponent
|
||||
BaseComponent <|-- InquiryComponent
|
||||
|
||||
LoginPage --> BaseComponent
|
||||
SurveySalePage --> SurveyComponent
|
||||
SuitablePage --> SurveyComponent
|
||||
InquiryPage --> InquiryComponent
|
||||
PasswordResetPage --> UIComponent
|
||||
PDFPage --> PDFComponent
|
||||
|
||||
RootLayout --> PopupComponent
|
||||
```
|
||||
|
||||
## Component Hierarchy
|
||||
|
||||
1. **Root Layout**
|
||||
|
||||
- 최상위 레이아웃 컴포넌트
|
||||
- ReactQuery와 Edge Provider를 포함
|
||||
- 공통 레이아웃 요소 관리
|
||||
|
||||
2. **Pages**
|
||||
|
||||
- LoginPage: 로그인 기능
|
||||
- SurveySalePage: 설문 판매 관리
|
||||
- SuitablePage: 적합성 관리
|
||||
- InquiryPage: 문의 관리
|
||||
- PasswordResetPage: 비밀번호 재설정
|
||||
- PDFPage: PDF 생성 및 관리
|
||||
|
||||
3. **Base Components**
|
||||
- UIComponent: 기본 UI 요소
|
||||
- PopupComponent: 팝업 관리
|
||||
- PDFComponent: PDF 관련 기능
|
||||
- SurveyComponent: 설문 관련 기능
|
||||
- InquiryComponent: 문의 관련 기능
|
||||
|
||||
## Component Relationships
|
||||
|
||||
1. **Page-Component Relationship**
|
||||
|
||||
- 각 페이지는 필요한 컴포넌트들을 조합하여 구성
|
||||
- 페이지별로 특화된 컴포넌트 사용
|
||||
|
||||
2. **Component Inheritance**
|
||||
|
||||
- 모든 컴포넌트는 BaseComponent 인터페이스 구현
|
||||
- 각 컴포넌트 타입별로 특화된 기능 제공
|
||||
|
||||
3. **Layout Integration**
|
||||
- RootLayout이 전체 페이지 구조 관리
|
||||
- PopupComponent를 통한 모달 관리
|
||||
- 공통 UI 요소의 일관성 유지
|
||||
10
package-lock.json
generated
10
package-lock.json
generated
@ -11,6 +11,7 @@
|
||||
"@prisma/client": "^6.7.0",
|
||||
"@tanstack/react-query": "^5.71.0",
|
||||
"@tanstack/react-query-devtools": "^5.71.0",
|
||||
"@types/nodemailer": "^6.4.17",
|
||||
"axios": "^1.8.4",
|
||||
"env-cmd": "^10.1.0",
|
||||
"iron-session": "^8.0.4",
|
||||
@ -1964,6 +1965,15 @@
|
||||
"undici-types": "~6.19.2"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/nodemailer": {
|
||||
"version": "6.4.17",
|
||||
"resolved": "https://registry.npmjs.org/@types/nodemailer/-/nodemailer-6.4.17.tgz",
|
||||
"integrity": "sha512-I9CCaIp6DTldEg7vyUTZi8+9Vo0hi1/T8gv3C89yk1rSAAzoKQ8H8ki/jBYJSFoH/BisgLP8tkZMlQ91CIquww==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/raf": {
|
||||
"version": "3.4.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz",
|
||||
|
||||
@ -2,12 +2,15 @@ import { NextRequest, NextResponse } from 'next/server'
|
||||
import { prisma } from '@/libs/prisma'
|
||||
import { Suitable } from '@/types/Suitable'
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const searchParams = request.nextUrl.searchParams
|
||||
const body: Record<string, string> = await request.json()
|
||||
const ids = body.ids
|
||||
const detailIds = body.detailIds
|
||||
|
||||
const ids = searchParams.get('ids')
|
||||
const detailIds = searchParams.get('subIds')
|
||||
if (ids === '' || detailIds === '') {
|
||||
return NextResponse.json({ error: '필수 파라미터가 누락되었습니다' }, { status: 400 })
|
||||
}
|
||||
|
||||
let query = `
|
||||
SELECT
|
||||
@ -29,28 +32,22 @@ export async function GET(request: NextRequest) {
|
||||
, msd_json.memo
|
||||
FROM ms_suitable_detail msd_json
|
||||
WHERE msd.main_id = msd_json.main_id
|
||||
AND msd_json.id IN (:detailIds)
|
||||
FOR JSON PATH
|
||||
) AS detail
|
||||
FROM ms_suitable_detail msd
|
||||
GROUP BY msd.main_id
|
||||
) AS details
|
||||
ON msm.id = details.main_id
|
||||
--ids AND details.main_id IN (:mainIds)
|
||||
--detailIds AND details.id IN (:detailIds)
|
||||
WHERE 1=1
|
||||
--ids AND msm.id IN (:mainIds)
|
||||
AND details.main_id IN (:mainIds)
|
||||
WHERE
|
||||
msm.id IN (:mainIds)
|
||||
ORDER BY msm.product_name;
|
||||
`
|
||||
|
||||
// 검색 조건 설정
|
||||
if (ids) {
|
||||
query = query.replaceAll('--ids ', '')
|
||||
query = query.replaceAll(':mainIds', ids)
|
||||
if (detailIds) {
|
||||
query = query.replaceAll('--detailIds ', '')
|
||||
query = query.replaceAll(':detailIds', detailIds)
|
||||
}
|
||||
}
|
||||
query = query.replaceAll(':mainIds', ids)
|
||||
query = query.replaceAll(':detailIds', detailIds)
|
||||
|
||||
const suitable: Suitable[] = await prisma.$queryRawUnsafe(query)
|
||||
|
||||
@ -60,4 +57,3 @@ export async function GET(request: NextRequest) {
|
||||
return NextResponse.json({ error: '데이터 조회 중 오류가 발생했습니다' }, { status: 500 })
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -3,15 +3,13 @@
|
||||
import Image from 'next/image'
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { usePopupController } from '@/store/popupController'
|
||||
import { useSuitableStore } from '@/store/useSuitableStore'
|
||||
import SuitableDetailPopupButton from './SuitableDetailPopupButton'
|
||||
import { useSuitable } from '@/hooks/useSuitable'
|
||||
import { Suitable } from '@/types/Suitable'
|
||||
import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'
|
||||
|
||||
export default function SuitableDetailPopup() {
|
||||
const popupController = usePopupController()
|
||||
const { getSuitableDetails, serializeSelectedItems } = useSuitable()
|
||||
const { selectedItems } = useSuitableStore()
|
||||
const { getSelectedItemsData, toCodeName, toSuitableDetail, suitableCheckIcon, suitableCheckMemo } = useSuitable()
|
||||
|
||||
const [openItems, setOpenItems] = useState<Set<number>>(new Set())
|
||||
const [suitableDetails, setSuitableDetails] = useState<Suitable[]>([])
|
||||
@ -25,14 +23,9 @@ export default function SuitableDetailPopup() {
|
||||
})
|
||||
}, [])
|
||||
|
||||
// 선택된 아이템 상세 데이터 가져오기
|
||||
const getSelectedItemsData = async () => {
|
||||
const serialized: Map<string, string> = serializeSelectedItems()
|
||||
setSuitableDetails(await getSuitableDetails(serialized.get('ids') ?? '', serialized.get('detailIds') ?? ''))
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
getSelectedItemsData()
|
||||
// TODO: 로딩 처리 필요
|
||||
getSelectedItemsData().then((data) => setSuitableDetails(data))
|
||||
}, [])
|
||||
|
||||
return (
|
||||
@ -52,98 +45,56 @@ export default function SuitableDetailPopup() {
|
||||
</div>
|
||||
<div className="modal-body">
|
||||
<div className="compliance-check-pop-wrap">
|
||||
<div className={`compliance-check-bx ${openItems.has(1) ? 'act' : ''}`}>
|
||||
<div className="check-name-wrap">
|
||||
<div className="check-name">アースティ４０</div>
|
||||
<div className="check-name-btn">
|
||||
<button className="bx-btn" onClick={() => toggleItemOpen(1)}></button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="compliance-check-pop-contents">
|
||||
<div className="check-pop-data-wrap">
|
||||
<div className="check-pop-data-tit">屋根技研 支持瓦</div>
|
||||
<div className="check-pop-data-txt">㈱ダイトー</div>
|
||||
</div>
|
||||
<div className="check-pop-data-wrap">
|
||||
<div className="check-pop-data-tit">屋根材</div>
|
||||
<div className="check-pop-data-txt">瓦</div>
|
||||
</div>
|
||||
<div className="check-pop-data-wrap">
|
||||
<div className="check-pop-data-tit">金具タイプ</div>
|
||||
<div className="check-pop-data-txt">木ねじ打ち込み式</div>
|
||||
</div>
|
||||
<div className="check-pop-data-table-wrap">
|
||||
<div className="check-pop-data-table">
|
||||
<div className="pop-data-table-head">
|
||||
<div className="pop-data-table-head-name">屋根技研 支持瓦</div>
|
||||
<div className="pop-data-table-head-icon">
|
||||
<div className="compliance-icon">
|
||||
<Image src={'/assets/images/sub/compliance_check_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>
|
||||
<div className="pop-data-table-body">Ｄで設置可</div>
|
||||
<div className="pop-data-table-footer">
|
||||
<div className="pop-data-table-footer-unit">備考</div>
|
||||
<div className="pop-data-table-footer-data">
|
||||
桟木なしの場合は支持金具平ー１で設置可能。その場合水返しが高い為、レベルプレート使用。桟木ありの場合は支持金具平ー２で設置可能
|
||||
</div>
|
||||
</div>
|
||||
{suitableDetails.map((item: Suitable) => (
|
||||
<div className={`compliance-check-bx ${openItems.has(item.id) ? 'act' : ''}`} key={item.id}>
|
||||
<div className="check-name-wrap">
|
||||
<div className="check-name">{item.productName}</div>
|
||||
<div className="check-name-btn">
|
||||
<button className="bx-btn" onClick={() => toggleItemOpen(item.id)}></button>
|
||||
</div>
|
||||
<div className="check-pop-data-table">
|
||||
<div className="pop-data-table-head">
|
||||
<div className="pop-data-table-head-name">屋根技研支持金具</div>
|
||||
<div className="pop-data-table-head-icon">
|
||||
<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>
|
||||
<div className="pop-data-table-body">設置不可</div>
|
||||
<div className="pop-data-table-footer">
|
||||
<div className="pop-data-table-footer-unit">備考</div>
|
||||
<div className="pop-data-table-footer-data">入手困難</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="compliance-check-pop-contents">
|
||||
<div className="check-pop-data-wrap">
|
||||
<div className="check-pop-data-tit">屋根技研 支持瓦</div>
|
||||
<div className="check-pop-data-txt">{toCodeName(SUITABLE_HEAD_CODE.MANU_FT_CD, item.manuFtCd)}</div>
|
||||
</div>
|
||||
<div className="check-pop-data-table">
|
||||
<div className="pop-data-table-head">
|
||||
<div className="pop-data-table-head-name">屋根技研YGアンカー</div>
|
||||
<div className="pop-data-table-head-icon">
|
||||
<div className="compliance-icon">
|
||||
<Image src={'/assets/images/sub/compliance_quest_icon.svg'} width={22} height={22} alt=""></Image>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="pop-data-table-body">お問い合わせください</div>
|
||||
<div className="pop-data-table-footer">
|
||||
<div className="pop-data-table-footer-unit">備考</div>
|
||||
<div className="pop-data-table-footer-data">入手困難</div>
|
||||
</div>
|
||||
<div className="check-pop-data-wrap">
|
||||
<div className="check-pop-data-tit">屋根材</div>
|
||||
<div className="check-pop-data-txt">{toCodeName(SUITABLE_HEAD_CODE.ROOF_MT_CD, item.roofMtCd)}</div>
|
||||
</div>
|
||||
<div className="check-pop-data-table">
|
||||
<div className="pop-data-table-head">
|
||||
<div className="pop-data-table-head-name">ダイドーハント支持瓦Ⅱ</div>
|
||||
<div className="pop-data-table-head-icon">
|
||||
<div className="compliance-icon">
|
||||
<Image src={'/assets/images/sub/compliance_check_icon.svg'} width={22} height={22} alt=""></Image>
|
||||
<div className="check-pop-data-wrap">
|
||||
<div className="check-pop-data-tit">金具タイプ</div>
|
||||
<div className="check-pop-data-txt">{toCodeName(SUITABLE_HEAD_CODE.ROOF_SH_CD, item.roofShCd)}</div>
|
||||
</div>
|
||||
<div className="check-pop-data-table-wrap">
|
||||
{toSuitableDetail(item.detail).map((subItem: SuitableDetail) => (
|
||||
<div className="check-pop-data-table" key={subItem.id}>
|
||||
<div className="pop-data-table-head">
|
||||
<div className="pop-data-table-head-name">{toCodeName(SUITABLE_HEAD_CODE.TRESTLE_MFPC_CD, subItem.trestleMfpcCd)}</div>
|
||||
<div className="pop-data-table-head-icon">
|
||||
<div className="compliance-icon">
|
||||
<Image src={suitableCheckIcon(subItem.trestleManufacturerProductName)} width={22} height={22} alt="" />
|
||||
</div>
|
||||
{subItem.memo && (
|
||||
<div className="compliance-icon">
|
||||
<Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="pop-data-table-body">{suitableCheckMemo(subItem.trestleManufacturerProductName)}</div>
|
||||
{subItem.memo && (
|
||||
<div className="pop-data-table-footer">
|
||||
<div className="pop-data-table-footer-unit">備考</div>
|
||||
<div className="pop-data-table-footer-data">{subItem.memo}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="pop-data-table-body">Ⅳ (Ｄ) で設置可</div>
|
||||
<div className="pop-data-table-footer">
|
||||
<div className="pop-data-table-footer-unit">備考</div>
|
||||
<div className="pop-data-table-footer-data">入手困難</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<SuitableDetailPopupButton />
|
||||
</div>
|
||||
|
||||
@ -1,10 +1,16 @@
|
||||
'use client'
|
||||
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { usePopupController } from '@/store/popupController'
|
||||
|
||||
export default function SuitableDetailPopupButton() {
|
||||
const popupController = usePopupController()
|
||||
const router = useRouter()
|
||||
|
||||
return (
|
||||
<div className="btn-flex-wrap com">
|
||||
<div className="btn-bx">
|
||||
<button className="btn-frame n-blue icon">
|
||||
<button className="btn-frame n-blue icon" onClick={() => popupController.setSuitableDetailPopup(false)}>
|
||||
閉じる<i className="btn-arr"></i>
|
||||
</button>
|
||||
</div>
|
||||
@ -14,7 +20,13 @@ export default function SuitableDetailPopupButton() {
|
||||
</button>
|
||||
</div>
|
||||
<div className="btn-bx">
|
||||
<button className="btn-frame n-blue icon">
|
||||
<button
|
||||
className="btn-frame n-blue icon"
|
||||
onClick={async () => {
|
||||
await popupController.setSuitableDetailPopup(false)
|
||||
router.push('/inquiry/regist')
|
||||
}}
|
||||
>
|
||||
1：1お問い合わせ<i className="btn-arr"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -9,7 +9,17 @@ import { useSuitableStore } from '@/store/useSuitableStore'
|
||||
import { SUITABLE_HEAD_CODE, type Suitable, type SuitableDetail } from '@/types/Suitable'
|
||||
|
||||
export default function SuitableList() {
|
||||
const { toCodeName, toSuitableDetail, toSuitableDetailIds, suitables, fetchNextPage, hasNextPage, isFetchingNextPage, isLoading } = useSuitable()
|
||||
const {
|
||||
toCodeName,
|
||||
toSuitableDetail,
|
||||
toSuitableDetailIds,
|
||||
suitables,
|
||||
fetchNextPage,
|
||||
hasNextPage,
|
||||
isFetchingNextPage,
|
||||
isLoading,
|
||||
suitableCheckIcon,
|
||||
} = useSuitable()
|
||||
const { selectedItems, addSelectedItem, removeSelectedItem } = useSuitableStore()
|
||||
const [openItems, setOpenItems] = useState<Set<number>>(new Set())
|
||||
const observerTarget = useRef<HTMLDivElement>(null)
|
||||
@ -52,20 +62,6 @@ export default function SuitableList() {
|
||||
})
|
||||
}, [])
|
||||
|
||||
// TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요
|
||||
const suitableCheck = useCallback((value: string) => {
|
||||
const iconMap: Record<string, string> = {
|
||||
'×': '/assets/images/sub/compliance_x_icon.svg',
|
||||
ー: '/assets/images/sub/compliance_quest_icon.svg',
|
||||
default: '/assets/images/sub/compliance_check_icon.svg',
|
||||
}
|
||||
return (
|
||||
<div className="compliance-icon">
|
||||
<Image src={iconMap[value] || iconMap.default} width={22} height={22} alt="" />
|
||||
</div>
|
||||
)
|
||||
}, [])
|
||||
|
||||
// 아이템 렌더링
|
||||
const renderItem = useCallback(
|
||||
(item: Suitable) => {
|
||||
@ -99,7 +95,9 @@ export default function SuitableList() {
|
||||
<label htmlFor={`ch${subItem.id}`}>{toCodeName(SUITABLE_HEAD_CODE.TRESTLE_MFPC_CD, subItem.trestleMfpcCd)}</label>
|
||||
</div>
|
||||
<div className="compliance-icon-wrap">
|
||||
{suitableCheck(subItem.trestleManufacturerProductName)}
|
||||
<div className="compliance-icon">
|
||||
<Image src={suitableCheckIcon(subItem.trestleManufacturerProductName)} width={22} height={22} alt="" />
|
||||
</div>
|
||||
{subItem.memo && (
|
||||
<div className="compliance-icon">
|
||||
<Image src={'/assets/images/sub/compliance_tip_icon.svg'} width={22} height={22} alt=""></Image>
|
||||
@ -113,7 +111,7 @@ export default function SuitableList() {
|
||||
</div>
|
||||
)
|
||||
},
|
||||
[isItemSelected, openItems, handleItemClick, toggleItemOpen, suitableCheck, toCodeName, toSuitableDetail],
|
||||
[isItemSelected, openItems, handleItemClick, toggleItemOpen, toCodeName, toSuitableDetail],
|
||||
)
|
||||
|
||||
// 아이템 리스트
|
||||
|
||||
@ -62,7 +62,7 @@ export function useSuitable() {
|
||||
try {
|
||||
const params: Record<string, string> = { ids: ids }
|
||||
if (detailIds) params.detailIds = detailIds
|
||||
const response = await axiosInstance(null).get<Suitable[]>('/api/suitable', { params })
|
||||
const response = await axiosInstance(null).post<Suitable[]>('/api/suitable', params)
|
||||
return response.data
|
||||
} catch (error) {
|
||||
console.error('지붕재 상세 데이터 로드 실패:', error)
|
||||
@ -134,17 +134,19 @@ export function useSuitable() {
|
||||
enabled: selectedCategory !== '' || searchKeyword !== '',
|
||||
})
|
||||
|
||||
const serializeSelectedItems = (): Map<string, string> => {
|
||||
const serializeSelectedItems = (): { ids: string; detailIds: string } => {
|
||||
const ids: string[] = []
|
||||
const detailIds: string[] = []
|
||||
for (const [key, value] of selectedItems) {
|
||||
ids.push(String(key))
|
||||
for (const id of value) detailIds.push(String(id))
|
||||
}
|
||||
return new Map<string, string>([
|
||||
['ids', ids.join(',')],
|
||||
['detailIds', detailIds.join(',')],
|
||||
])
|
||||
return { ids: ids.join(','), detailIds: detailIds.length > 0 ? detailIds.join(',') : '' }
|
||||
}
|
||||
|
||||
const getSelectedItemsData = async (): Promise<Suitable[]> => {
|
||||
const { ids, detailIds } = serializeSelectedItems()
|
||||
return await getSuitableDetails(ids, detailIds)
|
||||
}
|
||||
|
||||
const clearSuitableSearch = ({ items = false, category = false, keyword = false }: { items?: boolean; category?: boolean; keyword?: boolean }) => {
|
||||
@ -153,6 +155,24 @@ export function useSuitable() {
|
||||
if (keyword) clearSearchKeyword()
|
||||
}
|
||||
|
||||
// TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ×, ー 데이터 관리 필요
|
||||
const suitableCheckIcon = (value: string): string => {
|
||||
const iconMap: Record<string, string> = {
|
||||
'×': '/assets/images/sub/compliance_x_icon.svg',
|
||||
'ー': '/assets/images/sub/compliance_quest_icon.svg',
|
||||
default: '/assets/images/sub/compliance_check_icon.svg',
|
||||
}
|
||||
return iconMap[value] || iconMap.default
|
||||
}
|
||||
|
||||
// TODO: 추후 지붕재 적합성 데이터 CUD 구현 시 ○, ×, ー 데이터 관리 필요
|
||||
const suitableCheckMemo = (value: string): string => {
|
||||
if (value === '○') return '設置可'
|
||||
if (value === '×') return '設置不可'
|
||||
if (value === 'ー') return 'お問い合わせください'
|
||||
return `${value}で設置可`
|
||||
}
|
||||
|
||||
return {
|
||||
getSuitables,
|
||||
getSuitableIds,
|
||||
@ -166,7 +186,9 @@ export function useSuitable() {
|
||||
hasNextPage,
|
||||
isFetchingNextPage,
|
||||
isLoading,
|
||||
serializeSelectedItems,
|
||||
getSelectedItemsData,
|
||||
clearSuitableSearch,
|
||||
suitableCheckIcon,
|
||||
suitableCheckMemo,
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
@use "../abstracts" as *;
|
||||
|
||||
// 조사매물
|
||||
.pdf-contents{
|
||||
padding: 0 20px;
|
||||
border-top: 1px solid #ececec;
|
||||
@ -55,3 +56,83 @@
|
||||
border: 1px solid $black-1010;
|
||||
min-height: 150px;
|
||||
}
|
||||
|
||||
// 지붕재 적합성
|
||||
.pdf-intro-page{
|
||||
height: 1080px;
|
||||
padding: 80px 40px ;
|
||||
background-color: #fff;
|
||||
}
|
||||
.pdf-intro-tit-wrap{
|
||||
text-align: center;
|
||||
.pdf-intro-tit{
|
||||
@include defaultFont($font-s-24, $font-w-500, #101010);
|
||||
}
|
||||
.pdf-intro-date{
|
||||
@include defaultFont($font-s-22, $font-w-400, #101010);
|
||||
}
|
||||
}
|
||||
.pdf-intro-cont-wrap{
|
||||
margin-top: 70px;
|
||||
p{
|
||||
@include defaultFont($font-s-18, $font-w-400, #101010);
|
||||
}
|
||||
}
|
||||
|
||||
.pdf-table-content{
|
||||
padding: 20px;
|
||||
}
|
||||
.pdf-table-grid-wrap{
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 10px 20px;
|
||||
}
|
||||
.pdf-table-card{
|
||||
.pdf-table-tit-wrap{
|
||||
margin-bottom: 5px;
|
||||
span{
|
||||
position: relative;
|
||||
@include defaultFont($font-s-13, $font-w-500, #101010);
|
||||
padding: 0 10px;
|
||||
&:first-child{
|
||||
padding-left: 0;
|
||||
}
|
||||
&:last-child{
|
||||
padding-right: 0;
|
||||
&::before{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&::before{
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
transform: translateY(-50%);
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background-color: #101010;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.pdf-roof-table{
|
||||
table{
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
border-collapse: collapse;
|
||||
th{
|
||||
padding: 0px 5px;
|
||||
text-align: center;
|
||||
@include defaultFont($font-s-11, $font-w-500, #fff);
|
||||
background-color: #18B490;
|
||||
border: 1px solid #18B490;
|
||||
}
|
||||
td{
|
||||
padding: 0px 5px;
|
||||
@include defaultFont($font-s-11, $font-w-300, #101010);
|
||||
border: 1px solid #CBCBCB;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -113,3 +113,12 @@
|
||||
@include defaultFont($font-s-13, $font-w-400, $font-c);
|
||||
}
|
||||
}
|
||||
|
||||
// 제출팝업
|
||||
.submit-content{
|
||||
padding: 15px 10px;
|
||||
border: 1px solid #D5DEE8;
|
||||
border-radius: 4px;
|
||||
background-color: #f5f6fa;
|
||||
cursor: default;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user