From c8659d3b355b9ac21047eac038ab75b990c72e8c Mon Sep 17 00:00:00 2001 From: HyeonJin Date: Mon, 30 Sep 2024 18:22:13 +0900 Subject: [PATCH] =?UTF-8?q?:sparkles:=20Add=20PDF=20download=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #271 지원서 PDF 다운 기능 추가 --- gongjakso/package-lock.json | 419 ++++++++++++++++++ gongjakso/package.json | 3 + gongjakso/src/assets/images/bottomImg.svg | 30 ++ .../ProfileRecruit/PdfUserApplication.jsx | 386 ++++++++-------- .../PdfUserApplicationStyled.jsx | 20 + gongjakso/src/service/portfolio_service.js | 2 +- 6 files changed, 684 insertions(+), 176 deletions(-) create mode 100644 gongjakso/src/assets/images/bottomImg.svg diff --git a/gongjakso/package-lock.json b/gongjakso/package-lock.json index 36e9b8c..a30bb25 100644 --- a/gongjakso/package-lock.json +++ b/gongjakso/package-lock.json @@ -21,7 +21,10 @@ "date-fns": "^3.3.1", "eslint-plugin-jsx-a11y": "^6.8.0", "framer-motion": "^11.0.20", + "html2canvas": "^1.4.1", + "html2pdf.js": "^0.9.3", "http-proxy-middleware": "^2.0.6", + "jspdf": "^2.5.2", "moment": "^2.30.1", "node-sass": "^9.0.0", "react": "^18.2.0", @@ -4543,6 +4546,12 @@ "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.12.tgz", "integrity": "sha512-bZcOkJ6uWrL0Qb2NAWKa7TBU+mJHPzhx9jjLL1KHF+XpzEcR7EXHvjbHlGtR/IsP1vyPrehuS6XqkmaePy//mg==" }, + "node_modules/@types/raf": { + "version": "3.4.3", + "resolved": "https://registry.npmjs.org/@types/raf/-/raf-3.4.3.tgz", + "integrity": "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw==", + "optional": true + }, "node_modules/@types/range-parser": { "version": "1.2.7", "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz", @@ -6642,6 +6651,14 @@ "node": ">=0.10.0" } }, + "node_modules/base64-arraybuffer": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz", + "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==", + "engines": { + "node": ">= 0.6.0" + } + }, "node_modules/base64-js": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", @@ -7103,6 +7120,17 @@ "node-int64": "^0.4.0" } }, + "node_modules/btoa": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz", + "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g==", + "bin": { + "btoa": "bin/btoa.js" + }, + "engines": { + "node": ">= 0.4.0" + } + }, "node_modules/buffer": { "version": "4.9.2", "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz", @@ -7430,6 +7458,31 @@ } ] }, + "node_modules/canvg": { + "version": "3.0.10", + "resolved": "https://registry.npmjs.org/canvg/-/canvg-3.0.10.tgz", + "integrity": "sha512-qwR2FRNO9NlzTeKIPIKpnTY6fqwuYSequ8Ru8c0YkYU7U0oW+hLUvWadLvAu1Rl72OMNiFhoLu4f8eUjQ7l/+Q==", + "optional": true, + "dependencies": { + "@babel/runtime": "^7.12.5", + "@types/raf": "^3.4.0", + "core-js": "^3.8.3", + "raf": "^3.4.1", + "regenerator-runtime": "^0.13.7", + "rgbcolor": "^1.0.1", + "stackblur-canvas": "^2.0.0", + "svg-pathdata": "^6.0.3" + }, + "engines": { + "node": ">=10.0.0" + } + }, + "node_modules/canvg/node_modules/regenerator-runtime": { + "version": "0.13.11", + "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz", + "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==", + "optional": true + }, "node_modules/capture-exit": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/capture-exit/-/capture-exit-2.0.0.tgz", @@ -7462,6 +7515,11 @@ "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz", "integrity": "sha512-4tYFyifaFfGacoiObjJegolkwSU4xQNGbVgUiNYVUxbQ2x2lUsFvY4hVgVzGiIe6WLOPqycWXA40l+PWsxthUw==" }, + "node_modules/cf-blob.js": { + "version": "0.0.1", + "resolved": "https://registry.npmjs.org/cf-blob.js/-/cf-blob.js-0.0.1.tgz", + "integrity": "sha512-KkUmNT/rgVK+KehG7cSvbLwMb+OS5Qby6ADB4LP12jtx6rfVvHCdyqFUjAeQnDpGpQNNwvpi0R/tluT2J6P99Q==" + }, "node_modules/chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -8298,6 +8356,14 @@ "postcss": "^8.4" } }, + "node_modules/css-line-break": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz", + "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==", + "dependencies": { + "utrie": "^1.0.2" + } + }, "node_modules/css-loader": { "version": "6.10.0", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.10.0.tgz", @@ -9237,6 +9303,12 @@ "url": "https://github.com/fb55/domhandler?sponsor=1" } }, + "node_modules/dompurify": { + "version": "2.5.7", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-2.5.7.tgz", + "integrity": "sha512-2q4bEI+coQM8f5ez7kt2xclg1XsecaV9ASJk/54vwlfRRNQfDqJz2pzQ8t0Ix/ToBpXlVjrRIx7pFC/o8itG2Q==", + "optional": true + }, "node_modules/domutils": { "version": "2.8.0", "resolved": "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz", @@ -9686,6 +9758,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/es6-promise": { + "version": "4.2.8", + "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz", + "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w==" + }, "node_modules/escalade": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz", @@ -10747,6 +10824,11 @@ "asap": "~2.0.3" } }, + "node_modules/fflate": { + "version": "0.8.2", + "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz", + "integrity": "sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==" + }, "node_modules/figgy-pudding": { "version": "3.5.2", "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz", @@ -10802,6 +10884,11 @@ "webpack": "^4.0.0 || ^5.0.0" } }, + "node_modules/file-saver": { + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-1.3.8.tgz", + "integrity": "sha512-spKHSBQIxxS81N/O21WmuXA2F6wppUCsutpzenOeZzOCCJ5gEfcbqJP983IrpLXzYmXnMUa6J03SubcNPdKrlg==" + }, "node_modules/file-uri-to-path": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", @@ -12167,6 +12254,255 @@ } } }, + "node_modules/html2canvas": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz", + "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==", + "dependencies": { + "css-line-break": "^2.1.0", + "text-segmentation": "^1.0.3" + }, + "engines": { + "node": ">=8.0.0" + } + }, + "node_modules/html2pdf.js": { + "version": "0.9.3", + "resolved": "https://registry.npmjs.org/html2pdf.js/-/html2pdf.js-0.9.3.tgz", + "integrity": "sha512-M254g3Z+ZsjtQFDxJlU6E8Zgb8xOpCBQQM1lFPn4Lq+myAdWoYtMFnwlVo/eOI9R1cG75+YmMSDQofkugwOV/Q==", + "dependencies": { + "es6-promise": "^4.2.5", + "html2canvas": "^1.0.0-alpha.12", + "jspdf": "1.4.1" + } + }, + "node_modules/html2pdf.js/node_modules/abab": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/abab/-/abab-1.0.4.tgz", + "integrity": "sha512-I+Wi+qiE2kUXyrRhNsWv6XsjUTBJjSoVSctKNBfLG5zG/Xe7Rjbxf13+vqYHNTwHaFU+FtSlVxOCTiMEVtPv0A==", + "deprecated": "Use your platform's native atob() and btoa() methods instead" + }, + "node_modules/html2pdf.js/node_modules/acorn": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/acorn/-/acorn-2.7.0.tgz", + "integrity": "sha512-pXK8ez/pVjqFdAgBkF1YPVRacuLQ9EXBKaKWaeh58WNfMkCmZhOZzu+NtKSPD5PHmCCHheQ5cD29qM1K4QTxIg==", + "bin": { + "acorn": "bin/acorn" + }, + "engines": { + "node": ">=0.4.0" + } + }, + "node_modules/html2pdf.js/node_modules/acorn-globals": { + "version": "1.0.9", + "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-1.0.9.tgz", + "integrity": "sha512-j3/4pkfih8W4NK22gxVSXcEonTpAHOHh0hu5BoZrKcOsW/4oBPxTi4Yk3SAj+FhC1f3+bRTkXdm4019gw1vg9g==", + "dependencies": { + "acorn": "^2.1.0" + } + }, + "node_modules/html2pdf.js/node_modules/canvg": { + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/canvg/-/canvg-1.5.3.tgz", + "integrity": "sha512-7Gn2IuQzvUQWPIuZuFHrzsTM0gkPz2RRT9OcbdmA03jeKk8kltrD8gqUzNX15ghY/4PV5bbe5lmD6yDLDY6Ybg==", + "dependencies": { + "jsdom": "^8.1.0", + "rgbcolor": "^1.0.1", + "stackblur-canvas": "^1.4.1", + "xmldom": "^0.1.22" + } + }, + "node_modules/html2pdf.js/node_modules/cssom": { + "version": "0.3.8", + "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.8.tgz", + "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==" + }, + "node_modules/html2pdf.js/node_modules/cssstyle": { + "version": "0.2.37", + "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-0.2.37.tgz", + "integrity": "sha512-FUpKc+1FNBsHUr9IsfSGCovr8VuGOiiuzlgCyppKBjJi2jYTOFLN3oiiNRMIvYqbFzF38mqKj4BgcevzU5/kIA==", + "dependencies": { + "cssom": "0.3.x" + } + }, + "node_modules/html2pdf.js/node_modules/escodegen": { + "version": "1.14.3", + "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.3.tgz", + "integrity": "sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==", + "dependencies": { + "esprima": "^4.0.1", + "estraverse": "^4.2.0", + "esutils": "^2.0.2", + "optionator": "^0.8.1" + }, + "bin": { + "escodegen": "bin/escodegen.js", + "esgenerate": "bin/esgenerate.js" + }, + "engines": { + "node": ">=4.0" + }, + "optionalDependencies": { + "source-map": "~0.6.1" + } + }, + "node_modules/html2pdf.js/node_modules/estraverse": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz", + "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==", + "engines": { + "node": ">=4.0" + } + }, + "node_modules/html2pdf.js/node_modules/iconv-lite": { + "version": "0.4.24", + "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz", + "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==", + "dependencies": { + "safer-buffer": ">= 2.1.2 < 3" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/html2pdf.js/node_modules/jsdom": { + "version": "8.5.0", + "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-8.5.0.tgz", + "integrity": "sha512-rvWfcn2O8SrXPaX5fTYIfPVwvnbU8DnZkjAXK305wfP67csyaJBhgg0F2aU6imqJ+lZmj9EmrBAXy6rWHf2/9Q==", + "dependencies": { + "abab": "^1.0.0", + "acorn": "^2.4.0", + "acorn-globals": "^1.0.4", + "array-equal": "^1.0.0", + "cssom": ">= 0.3.0 < 0.4.0", + "cssstyle": ">= 0.2.34 < 0.3.0", + "escodegen": "^1.6.1", + "iconv-lite": "^0.4.13", + "nwmatcher": ">= 1.3.7 < 2.0.0", + "parse5": "^1.5.1", + "request": "^2.55.0", + "sax": "^1.1.4", + "symbol-tree": ">= 3.1.0 < 4.0.0", + "tough-cookie": "^2.2.0", + "webidl-conversions": "^3.0.1", + "whatwg-url": "^2.0.1", + "xml-name-validator": ">= 2.0.1 < 3.0.0" + } + }, + "node_modules/html2pdf.js/node_modules/jspdf": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-1.4.1.tgz", + "integrity": "sha512-2vYVdrvrQUdKKPyWHw81t1jEYYAJ6uFJ/HtTcGbI4qXIQEdl18dLEuL2wTeSv2GzeQLSgUvEvwsXsszuHK+PTw==", + "dependencies": { + "canvg": "^1.0", + "cf-blob.js": "0.0.1", + "file-saver": "1.3.8", + "omggif": "1.0.7", + "stackblur": "^1.0.0" + } + }, + "node_modules/html2pdf.js/node_modules/levn": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz", + "integrity": "sha512-0OO4y2iOHix2W6ujICbKIaEQXvFQHue65vUG3pb5EUomzPI90z9hsA1VsO/dbIIpC53J8gxM9Q4Oho0jrCM/yA==", + "dependencies": { + "prelude-ls": "~1.1.2", + "type-check": "~0.3.2" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/html2pdf.js/node_modules/optionator": { + "version": "0.8.3", + "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz", + "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==", + "dependencies": { + "deep-is": "~0.1.3", + "fast-levenshtein": "~2.0.6", + "levn": "~0.3.0", + "prelude-ls": "~1.1.2", + "type-check": "~0.3.2", + "word-wrap": "~1.2.3" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/html2pdf.js/node_modules/parse5": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/parse5/-/parse5-1.5.1.tgz", + "integrity": "sha512-w2jx/0tJzvgKwZa58sj2vAYq/S/K1QJfIB3cWYea/Iu1scFPDQQ3IQiVZTHWtRBwAjv2Yd7S/xeZf3XqLDb3bA==" + }, + "node_modules/html2pdf.js/node_modules/prelude-ls": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", + "integrity": "sha512-ESF23V4SKG6lVSGZgYNpbsiaAkdab6ZgOxe52p7+Kid3W3u3bxR4Vfd/o21dmN7jSt0IwgZ4v5MUd26FEtXE9w==", + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/html2pdf.js/node_modules/source-map": { + "version": "0.6.1", + "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", + "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", + "optional": true, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/html2pdf.js/node_modules/stackblur-canvas": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-1.4.1.tgz", + "integrity": "sha512-TfbTympL5C1K+F/RizDkMBqH18EkUKU8V+4PphIXR+fWhZwwRi3bekP04gy2TOwOT3R6rJQJXAXFrbcZde7wow==" + }, + "node_modules/html2pdf.js/node_modules/tough-cookie": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz", + "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==", + "dependencies": { + "psl": "^1.1.28", + "punycode": "^2.1.1" + }, + "engines": { + "node": ">=0.8" + } + }, + "node_modules/html2pdf.js/node_modules/tr46": { + "version": "0.0.3", + "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz", + "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==" + }, + "node_modules/html2pdf.js/node_modules/type-check": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz", + "integrity": "sha512-ZCmOJdvOWDBYJlzAoFkC+Q0+bUyEOS1ltgp1MGU03fqHG+dbi9tBFU2Rd9QKiDZFAYrhPh2JUf7rZRIuHRKtOg==", + "dependencies": { + "prelude-ls": "~1.1.2" + }, + "engines": { + "node": ">= 0.8.0" + } + }, + "node_modules/html2pdf.js/node_modules/webidl-conversions": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz", + "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==" + }, + "node_modules/html2pdf.js/node_modules/whatwg-url": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-2.0.1.tgz", + "integrity": "sha512-sX+FT4N6iR0ZiqGqyDEKklyfMGR99zvxZD+LQ8IGae5uVGswQ7DOeLPB5KgJY8FzkwSzwqOXLQeVQvtOTSQU9Q==", + "dependencies": { + "tr46": "~0.0.3", + "webidl-conversions": "^3.0.0" + } + }, + "node_modules/html2pdf.js/node_modules/xml-name-validator": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-2.0.1.tgz", + "integrity": "sha512-jRKe/iQYMyVJpzPH+3HL97Lgu5HrCfii+qSo+TfjKHtOnvbnvdVfMYrn9Q34YV81M2e5sviJlI6Ko9y+nByzvA==" + }, "node_modules/htmlparser2": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz", @@ -15675,6 +16011,23 @@ "semver": "bin/semver" } }, + "node_modules/jspdf": { + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/jspdf/-/jspdf-2.5.2.tgz", + "integrity": "sha512-myeX9c+p7znDWPk0eTrujCzNjT+CXdXyk7YmJq5nD5V7uLLKmSXnlQ/Jn/kuo3X09Op70Apm0rQSnFWyGK8uEQ==", + "dependencies": { + "@babel/runtime": "^7.23.2", + "atob": "^2.1.2", + "btoa": "^1.2.1", + "fflate": "^0.8.1" + }, + "optionalDependencies": { + "canvg": "^3.0.6", + "core-js": "^3.6.0", + "dompurify": "^2.5.4", + "html2canvas": "^1.0.0-rc.5" + } + }, "node_modules/jsprim": { "version": "1.4.2", "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.2.tgz", @@ -17256,6 +17609,11 @@ "url": "https://github.com/fb55/nth-check?sponsor=1" } }, + "node_modules/nwmatcher": { + "version": "1.4.4", + "resolved": "https://registry.npmjs.org/nwmatcher/-/nwmatcher-1.4.4.tgz", + "integrity": "sha512-3iuY4N5dhgMpCUrOVnuAdGrgxVqV2cJpM+XNccjR2DKOB1RUP0aA+wGXEiNziG/UKboFyGBIoKOaNlJxx8bciQ==" + }, "node_modules/nwsapi": { "version": "2.2.7", "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.7.tgz", @@ -17494,6 +17852,11 @@ "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz", "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==" }, + "node_modules/omggif": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/omggif/-/omggif-1.0.7.tgz", + "integrity": "sha512-KVVUF85EHKUB9kxxT2D8CksGgfayZKxWtH/+i34zbyDdxFHvsqQs+O756usW7uri2YBD8jE/8GgAsA6wVA1tjg==" + }, "node_modules/on-finished": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz", @@ -21167,6 +21530,14 @@ "node": ">=0.10.0" } }, + "node_modules/rgbcolor": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/rgbcolor/-/rgbcolor-1.0.1.tgz", + "integrity": "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw==", + "engines": { + "node": ">= 0.8.15" + } + }, "node_modules/rimraf": { "version": "3.0.2", "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", @@ -22605,6 +22976,20 @@ "node": ">=8" } }, + "node_modules/stackblur": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/stackblur/-/stackblur-1.0.0.tgz", + "integrity": "sha512-K92JX8alrs0pTox5U2arVBqB8tJmak9dh9i4Xausy94TnnGMdLfTn7P2Dp/NOzlmxvEs7lDzeryo8YqOy0BHRQ==" + }, + "node_modules/stackblur-canvas": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/stackblur-canvas/-/stackblur-canvas-2.7.0.tgz", + "integrity": "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ==", + "optional": true, + "engines": { + "node": ">=0.1.14" + } + }, "node_modules/stackframe": { "version": "1.3.4", "resolved": "https://registry.npmjs.org/stackframe/-/stackframe-1.3.4.tgz", @@ -23344,6 +23729,15 @@ "resolved": "https://registry.npmjs.org/svg-parser/-/svg-parser-2.0.4.tgz", "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==" }, + "node_modules/svg-pathdata": { + "version": "6.0.3", + "resolved": "https://registry.npmjs.org/svg-pathdata/-/svg-pathdata-6.0.3.tgz", + "integrity": "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw==", + "optional": true, + "engines": { + "node": ">=12.0.0" + } + }, "node_modules/svgo": { "version": "1.3.2", "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.3.2.tgz", @@ -23911,6 +24305,14 @@ "node": ">=8" } }, + "node_modules/text-segmentation": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz", + "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==", + "dependencies": { + "utrie": "^1.0.2" + } + }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -24768,6 +25170,14 @@ "node": ">= 0.4.0" } }, + "node_modules/utrie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz", + "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==", + "dependencies": { + "base64-arraybuffer": "^1.0.2" + } + }, "node_modules/uuid": { "version": "10.0.0", "resolved": "https://registry.npmjs.org/uuid/-/uuid-10.0.0.tgz", @@ -26130,6 +26540,15 @@ "resolved": "https://registry.npmjs.org/xmlchars/-/xmlchars-2.2.0.tgz", "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==" }, + "node_modules/xmldom": { + "version": "0.1.31", + "resolved": "https://registry.npmjs.org/xmldom/-/xmldom-0.1.31.tgz", + "integrity": "sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ==", + "deprecated": "Deprecated due to CVE-2021-21366 resolved in 0.5.0", + "engines": { + "node": ">=0.1" + } + }, "node_modules/xtend": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", diff --git a/gongjakso/package.json b/gongjakso/package.json index 10ec56c..d719a9b 100644 --- a/gongjakso/package.json +++ b/gongjakso/package.json @@ -16,7 +16,10 @@ "date-fns": "^3.3.1", "eslint-plugin-jsx-a11y": "^6.8.0", "framer-motion": "^11.0.20", + "html2canvas": "^1.4.1", + "html2pdf.js": "^0.9.3", "http-proxy-middleware": "^2.0.6", + "jspdf": "^2.5.2", "moment": "^2.30.1", "node-sass": "^9.0.0", "react": "^18.2.0", diff --git a/gongjakso/src/assets/images/bottomImg.svg b/gongjakso/src/assets/images/bottomImg.svg new file mode 100644 index 0000000..60c80cc --- /dev/null +++ b/gongjakso/src/assets/images/bottomImg.svg @@ -0,0 +1,30 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/gongjakso/src/pages/ProfileRecruit/PdfUserApplication.jsx b/gongjakso/src/pages/ProfileRecruit/PdfUserApplication.jsx index 2aae115..2b8740c 100644 --- a/gongjakso/src/pages/ProfileRecruit/PdfUserApplication.jsx +++ b/gongjakso/src/pages/ProfileRecruit/PdfUserApplication.jsx @@ -1,4 +1,4 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import * as S from './PdfUserApplicationStyled'; import * as T from '../../features/modal/ApplyModal.styled'; import * as U from '../Portfolio/Portfolio.Styled'; @@ -6,6 +6,8 @@ import { useParams } from 'react-router-dom'; import Logo from '../../assets/images/applicationLogo.svg'; import { getMyApplication } from '../../service/apply_service'; import { getPortfolio } from '../../service/portfolio_service'; +import bottomLogo from '../../assets/images/bottomImg.svg'; +import html2pdf from 'html2pdf.js'; const PdfUserApplication = () => { const { id } = useParams(); @@ -31,190 +33,224 @@ const PdfUserApplication = () => { } }, [portId]); + const downloadPDF = () => { + const element = document.getElementById('pdf-download'); // PDF로 변환할 요소 선택 + html2pdf(element, { + filename: `${myApp?.applicant_name}.pdf`, // default : file.pdf + html2canvas: { scale: 5 }, // 캡처한 이미지의 크기를 조절, 값이 클수록 더 선명하다. + jsPDF: { + format: 'A2', // 종이 크기 형식 + orientation: 'portrait', // or landscape : 가로 + }, + // callback: () => { + // console.log('PDF 다운로드 완료'); + // }, + }); + }; + return ( <> - - title-logo - {myApp?.applicant_name} 님의 포트폴리오 - {myApp?.applicant_major} - {myApp?.applicant_phone} - - - - - 지원분야 -
- {myApp?.recruit_part?.map((item, i) => ( - - {item.position} - - ))} -
- - - 지원이유 - {myApp?.body} - - - {!myApp?.is_private && ( -
- - 학력 - {portfolio?.data?.educationList?.map( - (education, index) => ( - - - - {education.school || - '학교 정보 없음'} - - - {education.grade || - '학년 정보 없음'} - - - {education.state || - '상태 정보 없음'} - - - - ), - )} - - - - 경력사항 - {portfolio?.data?.workList?.map((work, index) => ( - - - - (회사명){' '} - {work.company || '정보 없음'} - - - (부서명/직책) {work.partition || ''} - - - - - - 입사일 - - {work.enteredAt || '정보 없음'} - - - - 퇴사일 - - {work.exitedAt || '미정'} - - - - {work.isActive ? '재직 중' : '퇴사'} - - - - - - {work.detail} - - - +
+ + title-logo + {myApp?.applicant_name} 님의 포트폴리오 + {myApp?.applicant_major} + {myApp?.applicant_phone} + + + + + 지원분야 +
+ {myApp?.recruit_part?.map((item, i) => ( + + {item.position} + ))} - +
+ + + 지원이유 + {myApp?.body} + - - 대외활동 - {portfolio?.data?.educationList?.map( - (education, index) => ( - - - - {education.school || - '학교 정보 없음'} - - - {education.grade || - '학년 정보 없음'} - - - - ), - )} - - - - 수상경력 - {portfolio?.data?.educationList?.map( - (education, index) => ( - - - - {education.school || - '학교 정보 없음'} - - - {education.grade || - '학년 정보 없음'} - - - {education.state || - '상태 정보 없음'} - - - - ), - )} - - - - 자격증 - {portfolio?.data?.educationList?.map( - (education, index) => ( - - - - {education.school || - '학교 정보 없음'} - - - {education.grade || - '학년 정보 없음'} - - - {education.state || - '상태 정보 없음'} - - - - ), - )} - - - - SNS - {portfolio?.data?.educationList?.map( - (education, index) => ( + {!myApp?.is_private && ( +
+ + 학력 + {portfolio?.data?.educationList?.map( + (education, index) => ( + + + + {education.school || + '학교 정보 없음'} + + + {education.grade || + '학년 정보 없음'} + + + {education.state || + '상태 정보 없음'} + + + + ), + )} + + + + 경력사항 + {portfolio?.data?.workList?.map( + (work, index) => ( + + + + (회사명){' '} + {work.company || + '정보 없음'} + + + (부서명/직책){' '} + {work.partition || ''} + + + + + + 입사일 + + {work.enteredAt || + '정보 없음'} + + + + 퇴사일 + + {work.exitedAt || + '미정'} + + + + {work.isActive + ? '재직 중' + : '퇴사'} + + + + + + {work.detail || '없음'} + + + + ), + )} + + + + 대외활동 + {portfolio?.data?.activityList?.map( + (activity, index) => ( + + + + {activity.name || + '대외활동 없음'} + + + {activity.isActive + ? '활동중' + : '활동 종료' || + '상태 정보 없음'} + + + + ), + )} + + + + 수상경력 + {portfolio?.data?.awardList?.map( + (award, index) => ( + + + + {award.contestName || + '수상경력 없음'} + + + {award.awardName || + '상태 정보 없음'} + + + {award.awardDate || + '상태 정보 없음'} + + + + ), + )} + + + + 자격증 + {portfolio?.data?.certificateList?.map( + (certificate, index) => ( + + + + {certificate.name || + '자격 정보 없음'} + + + {certificate.rating || + '상태 정보 없음'} + + + {certificate.certificationDate || + '상태 정보 없음'} + + + + ), + )} + + + + SNS + {portfolio?.data?.snsList?.map((sns, index) => ( - {education.school || - '학교 정보 없음'} + {sns.snsLink || 'SNS 링크 없음'} - ), - )} - -
- )} - + ))} + +
+ )} + + + footer logo + + + + pdf다운 + ); }; diff --git a/gongjakso/src/pages/ProfileRecruit/PdfUserApplicationStyled.jsx b/gongjakso/src/pages/ProfileRecruit/PdfUserApplicationStyled.jsx index 8c3ac23..74ed257 100644 --- a/gongjakso/src/pages/ProfileRecruit/PdfUserApplicationStyled.jsx +++ b/gongjakso/src/pages/ProfileRecruit/PdfUserApplicationStyled.jsx @@ -8,6 +8,7 @@ export const TopBox = styled.div` flex-direction: column; justify-content: center; align-items: center; + position: relative; /* 상대적 위치를 위한 설정 */ img { width: 72px; @@ -59,6 +60,7 @@ export const BoxDetail = styled.div` flex-direction: column; width: 100%; margin-top: -0.5rem; + margin-bottom: 1.5rem; `; export const InputContainer = styled.div` @@ -97,3 +99,21 @@ export const WorkContent = styled.div` border-radius: 9px; color: #828293; `; + +export const BottomBox = styled.div` + width: 100%; + display: flex; + justify-content: center; + align-items: center; + margin: 1rem 0 2rem 0; +`; + +export const PdfButton = styled.button` + width: 100px; + height: 50px; + border-radius: 15px; + background-color: ${({ theme }) => theme.Main2}; + position: absolute; /* 절대 위치 설정 */ + top: 100px; /* 상단 여백 */ + right: 100px; /* 오른쪽 여백 */ +`; diff --git a/gongjakso/src/service/portfolio_service.js b/gongjakso/src/service/portfolio_service.js index 9422c9d..503fe1e 100644 --- a/gongjakso/src/service/portfolio_service.js +++ b/gongjakso/src/service/portfolio_service.js @@ -50,7 +50,7 @@ export const getPortfolio = async id => { return response; } catch (error) { console.log(error); - return error.response.data.code; + return error.response?.data.code; } };