feat(settings): send esl depending on chosen mood

src/features/preview/Container.tsx

@@ -6,7 +6,6 @@ import { bottomBtnAtom, titleAtom } from '../shared/layout/atom';
 import './style/index.scss';
 
 import BottomText from './components/BottomText';
-import LabelSender from './components/LabelSender';
 import ChooseType from './components/ChooseType';
 import PreviewImage from './components/PreviewImage';
 
@@ -28,7 +27,6 @@ const Container = () => {
       <ChooseType />
       <PreviewImage />
       <BottomText />
-      <LabelSender>.</LabelSender>
     </div>
   );
 };

src/features/setting/components/SubmitForm/DailySticker.tsx

@@ -18,7 +18,7 @@ const DailySticker: FunctionComponent<DailyStickerProps> = ({ control }) => {
     <div className="setting-sticker-container">
       <span className="setting-sticker-title">{wordStickerText}</span>
       <Controller
-        name="mude"
+        name="mood"
         control={control}
         rules={{ required: true }}
         render={({ field }) => (

src/features/setting/constants.ts

@@ -1,9 +1,48 @@
 export const colorset = ['red', 'yellow', 'green'];
 export const stickerList = ['mood_BAD', 'mood_GOOD'];
 
-export const previewTitleText = 'What is the Active Setting?';
+export const previewTitleText = 'What is the Active Mood?';
 export const previewSubText =
-  'Congratulations on winning! Press the button to get a giftCongratulations on winning! Press the button to get a giftCongratulations on winning!';
+  'Express yourself on your employee ID card with your day that changes every day! You can write down what you want to say in words and choose a sticker that expresses your day and combine it!';
 
-export const wordTitleText = 'Word of the day';
-export const wordStickerText = 'Word of the Sticker';
+export const wordTitleText = 'I feel like';
+export const wordStickerText = 'Today’s mood is';
+
+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[1];
+
+export const width = 250;
+export const height = 122;

src/features/setting/hooks/useSetting.ts

@@ -1,23 +1,85 @@
 import { useForm, SubmitHandler } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
+import axios from 'axios';
+import { useMutation } from '@tanstack/react-query';
 
 import { Inputs } from '../types';
 import { URL } from '../../shared/constants/url';
 
+import goodMood from '/png/badge_good.png';
+import badMood from '/png/badge_bad.png';
+
+import { dummyEsl, labelsImagePushPath, token } from '../constants';
+
 const useSetting = () => {
   const { register, handleSubmit, control } = useForm<Inputs>({
     defaultValues: {
-      mude: '',
+      mood: '',
       comment: '',
     },
   });
   const navigate = useNavigate();
-  const onSubmit: SubmitHandler<Inputs> = (data) => console.log(data);
+  const onSubmit: SubmitHandler<Inputs> = async (data) => {
+    const imgEl = document.createElement('img');
+    imgEl.src = data.mood === 'mood_GOOD' ? goodMood : badMood; //TODO 이래도 될까
+
+    fetch(imgEl.src)
+      .then((res) => {
+        console.log('res', res);
+        return res.blob();
+      })
+      .then((blob) => {
+        console.log('blob', blob);
+        const reader = new FileReader();
+        reader.readAsDataURL(blob);
+        reader.onloadend = async () => {
+          if (typeof reader.result === 'string') {
+            mutation.mutate({ img: reader.result });
+          }
+        };
+      });
+  };
 
   const handlePreviewClick = () => {
     navigate(URL.preview);
   };
 
+  const mutation = useMutation({
+    mutationFn: async ({ img }: { img: string }) => {
+      console.log('mutate img', img);
+      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);
+    },
+  });
+
   return {
     register,
     handleSubmit,

src/features/setting/types.ts

@@ -1,4 +1,4 @@
 export type Inputs = {
-  mude: string;
+  mood: string;
   comment: string;
 };