[authentication] 사진인증화면 mock서버 연결

package.json

@@ -11,6 +11,7 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/react-router-dom": "^5.3.3",
+    "axios": "^1.3.3",
     "eslint-plugin-simple-import-sort": "^8.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

src/asset/icon/index.ts

@@ -1,11 +1,10 @@
 export { ReactComponent as IcAlbum } from './IcAlbum.svg';
 export { ReactComponent as IcBackBtn } from './IcBackBtn.svg';
 export { ReactComponent as IcCamera } from './IcCamera.svg';
-export { ReactComponent as IcLogo } from './IcLogo.svg';
-export { ReactComponent as IcMainDefault } from './IcMainDefault.svg';
-export { ReactComponent as IcSubDefault } from './IcSubDefault.svg';
 export { ReactComponent as IcFloggingStart } from './IcFlogging.svg';
 export { ReactComponent as IcLogo } from './IcLogo.svg';
+export { ReactComponent as IcMainDefault } from './IcMainDefault.svg';
 export { ReactComponent as IcTemporaryPause } from './IcPause.svg';
 export { ReactComponent as IcRunning } from './IcRunning.svg';
 export { ReactComponent as IcStop } from './IcStop.svg';
+export { ReactComponent as IcSubDefault } from './IcSubDefault.svg';

src/pages/Authentication.tsx

@@ -1,14 +1,19 @@
+import axios from 'axios';
 import React, { useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useRecoilState } from 'recoil';
 import styled from 'styled-components';
 
 import { IcBackBtn, IcMainDefault } from '../asset/icon';
 import subDefaultImg1 from '../asset/image/subDefaultImg1.png';
 import subDefaultImg2 from '../asset/image/subDefaultImg2.png';
 import subDefaultImg3 from '../asset/image/subDefaultImg3.png';
 import subDefaultImg4 from '../asset/image/subDefaultImg4.png';
+import { floggingInfoState } from '../recoil/atom';
 
 const Authentication = () => {
   const userFile = useRef<HTMLInputElement | null>(null);
+  const navigate = useNavigate();
   const [isUploaded, setIsUploaded] = useState<boolean>(false);
   const [images, setImages] = useState<any>();
   const [prevImage, setPrevImage] = useState<any>();
@@ -17,6 +22,11 @@ const Authentication = () => {
 
   const imageDownload = useRef<HTMLAnchorElement | null>(null);
 
+  const [floggingInfo, setFloggingInfo] = useRecoilState(floggingInfoState);
+  useEffect(() => {
+    console.log(floggingInfo);
+  }, []);
+
   const getUserFile = (e: React.ChangeEvent<HTMLInputElement>) => {
     setIsUploaded(true);
     e.target.files && setImages(e.target.files[0]);
@@ -50,12 +60,28 @@ const Authentication = () => {
     setIsPopUpOpen(false);
   };
 
+  const completeFlogging = async () => {
+    try {
+      await axios.post('https://e4a3584e-23b7-4454-8b4a-a42d2d4aa74a.mock.pstmn.io/diary', {
+        date: floggingInfo.date,
+        location: floggingInfo.location,
+        distance: floggingInfo.distance,
+        duration: floggingInfo.duration,
+        photo: floggingInfo.photo,
+      });
+
+      navigate('/');
+    } catch (e) {
+      console.log(e);
+    }
+  };
+
   return (
     <Root>
       <AuthenticationHeader>
         <BackButton />
         <Title>줍Go 인증</Title>
-        {isUploaded && <CompleteButton>완료</CompleteButton>}
+        {isUploaded && <CompleteButton onClick={completeFlogging}>완료</CompleteButton>}
       </AuthenticationHeader>
       <MainImageSection>
         {isUploaded ? (

yarn.lock

@@ -2717,6 +2717,15 @@ axe-core@^4.4.3:
   resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.5.2.tgz#823fdf491ff717ac3c58a52631d4206930c1d9f7"
   integrity sha512-u2MVsXfew5HBvjsczCv+xlwdNnB1oQR9HlAcsejZttNjKKSkeDNVwB1vMThIUIFI9GoT57Vtk8iQLwqOfAkboA==
 
+axios@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-1.3.3.tgz#e7011384ba839b885007c9c9fae1ff23dceb295b"
+  integrity sha512-eYq77dYIFS77AQlhzEL937yUBSepBfPIe8FcgEDN35vMNZKMrs81pgnyrQpwfy4NF4b4XWX1Zgx7yX+25w8QJA==
+  dependencies:
+    follow-redirects "^1.15.0"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be"
@@ -4558,7 +4567,7 @@ flatted@^3.1.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-3.2.7.tgz#609f39207cb614b89d0765b477cb2d437fbf9787"
   integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
 
-follow-redirects@^1.0.0:
+follow-redirects@^1.0.0, 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==
@@ -4598,6 +4607,15 @@ form-data@^3.0.0:
     combined-stream "^1.0.8"
     mime-types "^2.1.12"
 
+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"
+
 [email protected]:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
@@ -7440,6 +7458,11 @@ proxy-addr@~2.0.7:
     forwarded "0.2.0"
     ipaddr.js "1.9.1"
 
+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==
+
 psl@^1.1.33:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"