diff --git a/package.json b/package.json
index 0cad666..ceaaf77 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,8 @@
},
"dependencies": {
"@tanstack/react-query": "^4.32.6",
+ "axios": "^1.4.0",
+ "html2canvas": "^1.4.1",
"jotai": "^2.3.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
diff --git a/src/features/app/Router.tsx b/src/features/app/Router.tsx
index 36d1da1..4c35447 100644
--- a/src/features/app/Router.tsx
+++ b/src/features/app/Router.tsx
@@ -11,6 +11,7 @@ import LoginContainer from '../login/Container';
import SettingContainer from '../setting/Container';
import ErrorContainer from '../shared/error/Container';
import NotFound from '../shared/error/notfound/NotFound';
+import PreviewContainer from '../preview/Container';
const router = createRoutesFromElements(
} />
} />
} />
+ } />
} />
,
);
diff --git a/src/features/preview/Container.tsx b/src/features/preview/Container.tsx
new file mode 100644
index 0000000..5d78e6c
--- /dev/null
+++ b/src/features/preview/Container.tsx
@@ -0,0 +1,7 @@
+import LabelSender from './components/LabelSender';
+
+const PreviewContainer = () => {
+ return JUST 핀란드 가즈아;
+};
+
+export default PreviewContainer;
diff --git a/src/features/preview/components/LabelSender.tsx b/src/features/preview/components/LabelSender.tsx
new file mode 100644
index 0000000..aab38df
--- /dev/null
+++ b/src/features/preview/components/LabelSender.tsx
@@ -0,0 +1,17 @@
+import { height, width } from '../constants';
+import useSender from '../queries/useSender';
+
+const LabelSender = ({ children }: { children: React.ReactNode }) => {
+ const { domRef, handleSendEslClick } = useSender();
+
+ return (
+ <>
+
+ {children}
+
+
+ >
+ );
+};
+
+export default LabelSender;
diff --git a/src/features/preview/constants.ts b/src/features/preview/constants.ts
new file mode 100644
index 0000000..a29c04e
--- /dev/null
+++ b/src/features/preview/constants.ts
@@ -0,0 +1,38 @@
+export const esls = [
+ {
+ labelId: '085C1B1FE1D7',
+ productId: 'JC000001',
+ productName: 'test_product_1',
+ },
+ {
+ labelId: '085C1B25E1DE',
+ productId: 'JC000002',
+ productName: 'test_product_2',
+ },
+ {
+ labelId: '085C1B45E1D8',
+ productId: 'JC000003',
+ productName: 'test_product_3',
+ },
+ {
+ labelId: '085C1B47E1DA',
+ productId: 'JC000004',
+ productName: 'test_product_4',
+ },
+ {
+ labelId: '085C1B46E1DB',
+ productId: 'JC000005',
+ productName: 'test_product_5',
+ },
+];
+
+export const labelsImagePushPath =
+ 'https://stage00.common.solumesl.com/common/api/v2/common/labels/image?company=JC01&store=1111';
+
+export const token =
+ 'eyJhbGciOiJSUzI1NiIsImtpZCI6Ilg1ZVhrNHh5b2pORnVtMWtsMll0djhkbE5QNC1jNTdkTzZRR1RWQndhTmsiLCJ0eXAiOiJKV1QifQ.eyJpZHAiOiJMb2NhbEFjY291bnQiLCJvaWQiOiI3ZjViOTAxNy04ZDU0LTQ4OTYtYTZhNi03ZDQxMGM1MmJiMzAiLCJzdWIiOiI3ZjViOTAxNy04ZDU0LTQ4OTYtYTZhNi03ZDQxMGM1MmJiMzAiLCJuYW1lIjoiMTNwZnQxMyIsIm5ld1VzZXIiOmZhbHNlLCJleHRlbnNpb25fQWRtaW5BcHByb3ZlZCI6dHJ1ZSwiZXh0ZW5zaW9uX0N1c3RvbWVyQ29kZSI6IkpDMDEiLCJleHRlbnNpb25fQ3VzdG9tZXJMZXZlbCI6IjEiLCJlbWFpbHMiOlsiMTNwZnQxM0BnbWFpbC5jb20iXSwidGZwIjoiQjJDXzFfUk9QQ19BdXRoIiwiYXpwIjoiZTA4ZTU0ZmYtNWJiMS00YWU3LWFmZGUtYjljZGM4ZmEyM2FlIiwidmVyIjoiMS4wIiwiaWF0IjoxNjkyNDI0NTg5LCJhdWQiOiJlMDhlNTRmZi01YmIxLTRhZTctYWZkZS1iOWNkYzhmYTIzYWUiLCJleHAiOjE2OTI1MTA5ODksImlzcyI6Imh0dHBzOi8vc29sdW1iMmMuYjJjbG9naW4uY29tL2IwYzhlM2Q5LTA4ZmEtNDg3YS1hZmYxLTg1YmFlMTFmYzZjNS92Mi4wLyIsIm5iZiI6MTY5MjQyNDU4OX0.Zd_GeM7C8p03XKMH8gpo3QjeADeY6CW7t3ZLUA3V9NeF6sgHuf_nZGuT46L_9eca1JcbmrIZK1KbCyfVScSaRXhgQ71r627bC05NcJcxNHnsUGSBtihngLvegSNiyC_i7uARyIyEumYasMIUAyuHzVg5PrAyokgb_nY6WfkL2_6yyK5yHf1uNmEZkY-Kq_C4qhn_uplc3KWhXyLwKC_9dDT6ZF0_kBPowok87tAThH4VZNniWcxcTABHEMD9aNeIsCr9axUwU_J9yuMgF9OtKkTWZkWrvLcc8sEKYbGfyvxhtQ2AzyOHKg8re32S5YEVgvTcXVyFng5gIo-_WUm6Zg';
+
+export const dummyEsl = esls[2];
+
+export const width = 250;
+export const height = 122;
diff --git a/src/features/preview/queries/useSender.tsx b/src/features/preview/queries/useSender.tsx
new file mode 100644
index 0000000..1990b56
--- /dev/null
+++ b/src/features/preview/queries/useSender.tsx
@@ -0,0 +1,65 @@
+import { useMutation } from '@tanstack/react-query';
+import html2canvas from 'html2canvas';
+import axios from 'axios';
+import { useRef } from 'react';
+
+import {
+ dummyEsl,
+ height,
+ labelsImagePushPath,
+ token,
+ width,
+} from '../constants';
+
+const useSender = () => {
+ const domRef = useRef(null);
+
+ const mutation = useMutation({
+ mutationFn: async ({ img }: { img: string }) => {
+ axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
+ const res = await axios.post(
+ labelsImagePushPath,
+ {
+ labelCode: dummyEsl.labelId,
+ page: 1,
+ frontPage: 1,
+ image: img.split(',')[1],
+ articleList: [
+ {
+ articleId: dummyEsl.productId,
+ articleName: dummyEsl.productName,
+ nfcUrl: 'http://www.solumesl.com',
+ data: {
+ ARTICLE_ID: dummyEsl.productId,
+ ARTICLE_NAME: dummyEsl.productName,
+ NFC_URL: 'http://www.solum.com/p/JC000001',
+ SALE_PRICE: '$100',
+ DISCOUNT_PRICE: '$90',
+ },
+ },
+ ],
+ },
+ {
+ headers: {
+ 'Content-Type': `application/json; charset=utf-8 `,
+ },
+ },
+ );
+ console.log(res);
+ },
+ });
+
+ const handleSendEslClick = async () => {
+ if (domRef.current) {
+ const canvas = await html2canvas(domRef.current, {
+ width,
+ height,
+ scale: 1,
+ });
+ mutation.mutate({ img: canvas.toDataURL() });
+ }
+ };
+ return { domRef, handleSendEslClick };
+};
+
+export default useSender;
diff --git a/yarn.lock b/yarn.lock
index f1b95a8..a477b89 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -700,16 +700,35 @@ arraybuffer.prototype.slice@^1.0.1:
is-array-buffer "^3.0.2"
is-shared-array-buffer "^1.0.2"
+asynckit@^0.4.0:
+ version "0.4.0"
+ resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
+ integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
available-typed-arrays@^1.0.5:
version "1.0.5"
resolved "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz"
integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==
+axios@^1.4.0:
+ version "1.4.0"
+ resolved "https://registry.yarnpkg.com/axios/-/axios-1.4.0.tgz#38a7bf1224cd308de271146038b551d725f0be1f"
+ integrity sha512-S4XCWMEmzvo64T9GfvQDOXgYRDJ/wsSZc7Jvdgx5u1sd0JwsuPLqb3SYmusag+edF6ziyMensPVqLTSc1PiSEA==
+ dependencies:
+ follow-redirects "^1.15.0"
+ form-data "^4.0.0"
+ proxy-from-env "^1.1.0"
+
balanced-match@^1.0.0:
version "1.0.2"
resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+base64-arraybuffer@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#1c37589a7c4b0746e34bd1feb951da2df01c1bdc"
+ integrity sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==
+
binary-extensions@^2.0.0:
version "2.2.0"
resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz"
@@ -814,6 +833,13 @@ color-name@~1.1.4:
resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+combined-stream@^1.0.8:
+ version "1.0.8"
+ resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
+ integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+ dependencies:
+ delayed-stream "~1.0.0"
+
concat-map@0.0.1:
version "0.0.1"
resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
@@ -844,6 +870,13 @@ cross-spawn@^7.0.2:
shebang-command "^2.0.0"
which "^2.0.1"
+css-line-break@^2.1.0:
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/css-line-break/-/css-line-break-2.1.0.tgz#bfef660dfa6f5397ea54116bb3cb4873edbc4fa0"
+ integrity sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==
+ dependencies:
+ utrie "^1.0.2"
+
csstype@^3.0.2:
version "3.1.2"
resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz"
@@ -876,6 +909,11 @@ define-properties@^1.1.3, define-properties@^1.1.4, define-properties@^1.2.0:
has-property-descriptors "^1.0.0"
object-keys "^1.1.1"
+delayed-stream@~1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
+ integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
dir-glob@^3.0.1:
version "3.0.1"
resolved "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz"
@@ -1229,6 +1267,11 @@ flatted@^3.1.0:
resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz"
integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
+follow-redirects@^1.15.0:
+ version "1.15.2"
+ resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.2.tgz#b460864144ba63f2681096f274c4e57026da2c13"
+ integrity sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==
+
for-each@^0.3.3:
version "0.3.3"
resolved "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz"
@@ -1236,6 +1279,15 @@ for-each@^0.3.3:
dependencies:
is-callable "^1.1.3"
+form-data@^4.0.0:
+ version "4.0.0"
+ resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452"
+ integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+ dependencies:
+ asynckit "^0.4.0"
+ combined-stream "^1.0.8"
+ mime-types "^2.1.12"
+
fs.realpath@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
@@ -1414,6 +1466,14 @@ hosted-git-info@^2.1.4:
resolved "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz"
integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
+html2canvas@^1.4.1:
+ version "1.4.1"
+ resolved "https://registry.yarnpkg.com/html2canvas/-/html2canvas-1.4.1.tgz#7cef1888311b5011d507794a066041b14669a543"
+ integrity sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==
+ dependencies:
+ css-line-break "^2.1.0"
+ text-segmentation "^1.0.3"
+
husky@^8.0.3:
version "8.0.3"
resolved "https://registry.npmjs.org/husky/-/husky-8.0.3.tgz"
@@ -1724,6 +1784,18 @@ micromatch@^4.0.4:
braces "^3.0.2"
picomatch "^2.3.1"
+mime-db@1.52.0:
+ version "1.52.0"
+ resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+ integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12:
+ version "2.1.35"
+ resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+ integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+ dependencies:
+ mime-db "1.52.0"
+
minimatch@^3.0.4, minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
version "3.1.2"
resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
@@ -1968,6 +2040,11 @@ prettier@^3.0.2:
resolved "https://registry.npmjs.org/prettier/-/prettier-3.0.2.tgz"
integrity sha512-o2YR9qtniXvwEZlOKbveKfDQVyqxbEIWn48Z8m3ZJjBjcCmUy3xZGIv+7AkaeuaTr6yPXJjwv07ZWlsWbEy1rQ==
+proxy-from-env@^1.1.0:
+ version "1.1.0"
+ resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2"
+ integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
punycode@^2.1.0:
version "2.3.0"
resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz"
@@ -2281,6 +2358,13 @@ supports-preserve-symlinks-flag@^1.0.0:
resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+text-segmentation@^1.0.3:
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/text-segmentation/-/text-segmentation-1.0.3.tgz#52a388159efffe746b24a63ba311b6ac9f2d7943"
+ integrity sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==
+ dependencies:
+ utrie "^1.0.2"
+
text-table@^0.2.0:
version "0.2.0"
resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
@@ -2399,6 +2483,13 @@ use-sync-external-store@^1.2.0:
resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"
integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+utrie@^1.0.2:
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/utrie/-/utrie-1.0.2.tgz#d42fe44de9bc0119c25de7f564a6ed1b2c87a645"
+ integrity sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==
+ dependencies:
+ base64-arraybuffer "^1.0.2"
+
validate-npm-package-license@^3.0.1:
version "3.0.4"
resolved "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz"