feature/pdf-tracking #37

Merged
swyoo merged 2 commits from feature/pdf-tracking into dev 2025-05-16 17:46:47 +09:00
8 changed files with 1646 additions and 13 deletions

804
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -207,3 +207,13 @@ model MS_SUITABLE_MAIN {
UPT_DT DateTime?
MS_SUITABLE_DETAIL MS_SUITABLE_DETAIL[]
}
/// 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)
data String? @db.VarChar(200)
REG_DT DateTime @default(now())
}

View File

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

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 />
</>
)
}

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' }}>
<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>
</>
)
}

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>
</>
)

View File

@ -1,26 +1,38 @@
import axios from 'axios'
import { tracking } from './tracking'
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)
},
)
)
return instance
}
// Request interceptor
// axios.interceptors.request.use(
// (config) => {
// // 여기에 토큰 추가 등의 공통 로직을 넣을 수 있습니다
// return config
// },
// (error) => {
// return Promise.reject(error)
// },
// )
// Response interceptor
axios.interceptors.response.use(

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

@ -0,0 +1,10 @@
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,
})
console.log('🚀 ~ result ~ result:', result)
}