Merge pull request #17 from 2022-Winter-Bootcamp-Team-D/feature/#16-M…

…ap_API Feature/#16 map api
2022-Winter-Bootcamp-Team-D · Jan 31, 2023 · 22ca916 · 22ca916
2 parents bde707e + 63cdf4a
commit 22ca916
Show file tree

Hide file tree

Showing 17 changed files with 712 additions and 188 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@actbase/react-daum-postcode": "^1.0.4",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@material-ui/core": "^4.12.4",
@@ -17,15 +18,18 @@
     "@types/node": "^16.18.11",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
-    "axios": "^1.2.2",
+    "axios": "^1.2.5",
     "classnames": "^2.3.2",
     "dayjs": "^1.11.7",
+    "http-proxy-middleware": "^2.0.6",
     "include-media": "^1.4.10",
     "open-color": "^1.9.1",
     "react": "^18.2.0",
     "react-datepicker": "^4.8.0",
     "react-dom": "^18.2.0",
+    "react-geocode": "^0.2.3",
     "react-icons": "^4.7.1",
+    "react-naver-maps": "^0.0.13",
     "react-router-dom": "^6.6.1",
     "react-scripts": "5.0.1",
     "react-table": "^7.8.0",
@@ -34,6 +38,7 @@
     "typescript": "^4.9.4",
     "web-vitals": "^2.1.4"
   },
+  "proxy": "https://naveropenapi.apigw.ntruss.com",
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",

diff --git a/public/index.html b/public/index.html
@@ -24,6 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=pg98qmcln0&submodules=panorama"></script>
     <title>React App</title>
   </head>
   <body>

diff --git a/src/components/CustomerRegister/RegisterInput.tsx b/src/components/CustomerRegister/RegisterInput.tsx
@@ -19,16 +19,6 @@ export default function RegisterInput() {
     console.log(token)
   }
 
-  // 
-//   const customerRegister =()=>{
-//     //axios.post(url : post가 연결되어야 할 api주소, data : 백엔드에서 정의한 request body).then(앞 코드가 정상작동하면 실행되는 다음 행위)
-//     axios.post('http://localhost:8000/api/v1/waitings/',{
-//       store_id: localStorage.getItem('store_id'),
-//       people: people,
-//       token: 'token'})
-//       .then((res) => console.log(res)) //(setItem) 로컬스토리지에 res.data.store_id를 "id"로 저장하는 코드,
-//                                        // res는 사용자 마음대로 정의, res.data.store_id는 백엔드에서 받아온 response body
-// }
 
   return (
     <div>

diff --git a/src/components/StoreRegister/StoreRegisterInput.scss b/src/components/StoreRegister/StoreRegisterInput.scss
@@ -22,4 +22,34 @@
     color: black;
     border-radius: 10px;
 
+}
+
+/* 모달창을 화면 중앙. 최상단에 노출 */
+.container {
+    /* 모달창 크기 */
+    width: 300px;
+    height: 200px;
+
+    /* 최상단 위치 */
+    z-index: 999;
+
+    /* 중앙 배치 */
+    /* top, bottom, left, right 는 브라우저 기준으로 작동한다. */
+    /* translate는 본인의 크기 기준으로 작동한다. */
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+
+    /* 모달창 디자인 */
+    background-color: gray;
+    border: 1px solid black;
+    border-radius: 8px;
+ }
+
+  /* 모달창 내부 X버튼 */
+  .close {
+    position: absolute;
+    right: 10px;
+    top: 10px;
 }
diff --git a/src/components/StoreRegister/StoreRegisterInput.tsx b/src/components/StoreRegister/StoreRegisterInput.tsx
@@ -1,37 +1,54 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import Box from '@mui/material/Box';
 import TextField from '@mui/material/TextField';
 import './StoreRegisterInput.scss';
-import {
-  Link, useNavigate
-} from "react-router-dom"; 
+import {Link, useNavigate} from "react-router-dom"; 
+// import StoreLocation from "./StoreLocation";
 import axios from 'axios';
 
-//가게등록
 
 export default function RegisterInput() {
-
   const [name, setName] = useState('')
   const [phone_num, setPhone_num] = useState('')
-  const [posts, setPosts] = useState(0) //가게 주소
+  const [posts, setPosts] = useState('') //가게 주소
   const [email, setEmail] = useState('')
   const [password, setPassword] = useState('')
-
   const navigate = useNavigate();
+  const [latitude, setlatitude] = useState(0);
+  const [longitude, setLogitude] = useState(0);
+
+
+  const storeSearch =()=>{
+    axios.get(`map-geocode/v2/geocode?query=${posts}`,
+    {
+      headers: {
+        "X-NCP-APIGW-API-KEY-ID": "pg98qmcln0",
+        "X-NCP-APIGW-API-KEY": "ELFgrKAgPdLsxeQDxHBhqv1jQvrpZuVfDJ4Jcmrf"
+      }  
+    })
+      .then((response) => {
+        setlatitude(response.data.addresses[0].y)
+        setLogitude(response.data.addresses[0].x)
+    })
+  }
 
   const storeRegister =()=>{
-      //axios.post(url : post가 연결되어야 할 api주소, data : 백엔드에서 정의한 request body).then(앞 코드가 정상작동하면 실행되는 다음 행위)
-      axios.post('http://localhost:8000/api/v1/stores/signin/',{
+      axios.post('http://15.164.28.246:8000/api/v1/stores/signup/',{
         name: name,
         phone_num: phone_num,
-        latitude: 0,
-        longitude: 0,
+        latitude: latitude,
+        longitude: longitude,
         email : email,
         password: password})
-        .then((res) =>localStorage.setItem("token", res.data.token) )
-        navigate("/WaitingList") // .then에 넣어야 할듯..!
+        .then((response) => {
+          var str1 = 'Bearer '
+          var token = str1.concat(response.data.access)
+          localStorage.setItem('accessToken', token);
+          console.log(response.data.latitude)
+          console.log(response.data.longitude)
+          navigate("/WaitingList")
+      })
   }
-  //console.log(localStorage.getItem("id")) 로컬스토리지에서 저장되어있는 값을 꺼내와서 console.log에 출력해서 확인하는 코드(getItem)
 
   return (
     <div>
@@ -45,12 +62,12 @@ export default function RegisterInput() {
         >
           <TextField onChange={(e)=>{setName(e.target.value)}} id="standard-basic" label="가게명 / 업소명" variant="standard" />
           <TextField  onChange={(e)=>{setPhone_num(e.target.value)}}id="standard-basic" label="가게 번호" variant="standard" />
-          <TextField onChange={(e)=>{setPosts(Number(e.target.value))}}id="standard-basic" label="가게 주소" variant="standard" />
+          <TextField onChange={(e)=>{setPosts((e.target.value))}}id="standard-basic" label="가게 주소" variant="standard" />
           <TextField onChange={(e)=>{setEmail(e.target.value)}}id="standard-basic" label="이메일 주소" variant="standard" />
-          <TextField onChange={(e)=>{setPassword(e.target.value)}}id="standard-basic" label="비밀번호" variant="standard" />
+          <TextField type="password" onChange={(e)=>{setPassword(e.target.value)}}id="standard-basic" label="비밀번호" variant="standard" />
         </Box>
+
         <button onClick={storeRegister} className="ButtonStyle" >가게 등록</button>
     </div>
-
   );
 }
diff --git a/src/components/WaitingList/ListTable.tsx b/src/components/WaitingList/ListTable.tsx
@@ -14,8 +14,10 @@ import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import CancelIcon from '@mui/icons-material/Cancel';
 import axios from 'axios';
 import {waitings, res} from './Waiting';
+import {useEffect,useState} from "react";
 
 import { Console } from 'console';
+import { tokenToString } from 'typescript';
 
 interface Column {
   id: 'waiting_id' | 'name' | 'people' | 'phone_num';
@@ -25,15 +27,18 @@ interface Column {
   format?: (value: number) => string;
 }
 
+
 const columns: readonly Column[] = [
-  { id: 'waiting_id', label: '순번', minWidth: 30 },
-  { id: 'name', label: '예약자', minWidth: 30 },
+
+  { id: 'waiting_id', label: '순번', minWidth: 30, align: 'center', }, //(count++).toString()
+  { id: 'name', label: '예약자', minWidth: 30, align: 'center' },
   {
     id: 'people',
     label: '인원 수',
     minWidth: 30,
     align: 'center',
   },
+
   {
     id: 'phone_num',
     label: '휴대폰 번호',
@@ -42,46 +47,78 @@ const columns: readonly Column[] = [
   },
 ];
 
-export default function ListTable({waiting}:{waiting:waitings[]}) {
+export default function ListTable({waiting ,setTemp}:{waiting:waitings[]|undefined; setTemp:React.Dispatch<React.SetStateAction<res | undefined>>}) { 
+    let abc: number;
     const [page, setPage] = React.useState(0);
-    const [rowsPerPage, setRowsPerPage] = React.useState(100);
-    const [rows, setRows] = React.useState<waitings[]>(waiting);
+    const [rowsPerPage, setRowsPerPage] = React.useState(5);
+
     const handleChangePage = (event: unknown, newPage: number) => {
         setPage(newPage)
-        console.log(rows)
+        console.log(waiting)
     };
 
-    function setrowData() {
-      setRows(rows)
-    }
-
     const handleChangeRowsPerPage = (event: React.ChangeEvent<HTMLInputElement>) => {
         setRowsPerPage(+event.target.value);
         setPage(0);
     };
-
+
+    //대기목록 MUI 안에 있는 호출 버튼
+    const Call =(index: number)=>{
+      if(waiting !== undefined) {
+      axios.post('http://15.164.28.246:8000/api/v1/stores/notifications/',{
+        waiting_id: waiting[index].waiting_id
+    }, 
+    {
+      headers : {Authorization: localStorage.getItem('accessToken')}
+    })
+        .then((response) => {
+          console.log('성공')
+      }) 
+        .catch((error) => { 
+          console.log('호출 실패');
+        });
+  }}
+
     //대기목록 MUI 안에 있는 입장완료 버튼
     const Start = (index: number) => {
-      axios.patch('http://localhost:8000/api/v1/stores/waitings/',{
-        waiting_id: rows[index].waiting_id
-      })    
-      .then((res) =>setRows(res.data.waiting))  //55행 이용, res로 넘어온 정보저장 해야대, 그렇기에 setRows가   
-      .catch((error) => { 
-        console.log('Error!');
-      });
-    }
-
-    //대기목록 MUI 안에 있는 대기취소 버튼
-      const waitingCancel = (index: number) => {
-        axios.patch<res>('http://localhost:8000/api/v1//stores/cancellations/',{
-          waiting_id: rows[index].waiting_id
-        })
-        .then((res) =>setRows(res.data.waiting))
+      if(waiting !== undefined) {
+        axios.patch('http://15.164.28.246:8000/api/v1/stores/waitings/',{
+          waiting_id: waiting[index].waiting_id
+        },
+        {
+          headers : {Authorization: localStorage.getItem('accessToken')}
+        }
+        )
+        .then((response) => {
+          console.log('[입장완료]' + localStorage.getItem('accessToken'))
+        }) 
         .catch((error) => { 
           console.log('Error!');
         });
-      }
-
+    }}
+
+    //대기목록 MUI 안에 있는 대기취소 버튼
+      const waitingCancel = (index: number) => {
+        if(waiting != undefined) {
+         axios.patch<res>('http://15.164.28.246:8000/api/v1/stores/cancellations/',{
+            waiting_id: waiting[index].waiting_id   
+          },
+          {
+            headers : {Authorization: localStorage.getItem('accessToken')}
+          }
+          )
+          .then((response) => {
+            //민아) 행 삭제 시도
+            // setTemp(pre => ({...pre,waiting:[...response.data.waiting]}));
+            console.log('[대기강제취소]' + localStorage.getItem('accessToken'))
+          })
+          .catch((error) => { 
+            console.log('Error!');
+          });
+        }}
+
+
+
   return (
     <Paper className='tableStyle'>
       <TableContainer sx={{ maxHeight: 500 }}>
@@ -104,26 +141,33 @@ export default function ListTable({waiting}:{waiting:waitings[]}) {
           </TableHead>
           <TableBody>
 
-            {rows
-              .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
-              .map((row:any) => {
+
+            {waiting?.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
+              .map((row:any, index:number) => {
+
+                if(waiting != undefined) {
+                   abc = waiting.length
+                }
+
                 return (
                   <TableRow hover role="checkbox" tabIndex={-1} key={row.waiting_id}>
-                    {columns.map((column:any) => {
-                      console.log(rows)
+                    {columns.map((column:any, i:number) => {
+                      //console.log(waiting)
                       const value = row[column.id];
-                     
+
                       return (
                         <TableCell key={column.id} align={column.align}>
-                          {column.format && typeof value === 'number'
-                            ? column.format(value)
-                            : value}
+
+                           {column?.id === 'waiting_id'
+                            ? (page*rowsPerPage)+(index+1)  : value} 
+
+
                         </TableCell>
                       );
                     })}
-                    <TableCell align="center"><IconButton><NotificationsActiveIcon color="warning"/></IconButton></TableCell>
-                    <TableCell  onClick={() => Start(row.waiting_id)} align="center"><IconButton><CheckCircleIcon color="success"/></IconButton></TableCell>
-                    <TableCell onClick={() => waitingCancel(row.waiting_id)} align="center"><IconButton><CancelIcon color="error"/></IconButton></TableCell>
+                    <TableCell onClick={() => Call(index)} align="center"><IconButton><NotificationsActiveIcon color="warning"/></IconButton></TableCell>
+                    <TableCell  onClick={() => Start(index)} align="center"><IconButton><CheckCircleIcon color="success"/></IconButton></TableCell>
+                    <TableCell onClick={() => waitingCancel(index)} align="center"><IconButton><CancelIcon color="error"/></IconButton></TableCell>
                   </TableRow>
                 );
               })}
@@ -134,12 +178,17 @@ export default function ListTable({waiting}:{waiting:waitings[]}) {
       <TablePagination
         rowsPerPageOptions={[5, 10, 25]}
         component="div"
-        count={rows.length}
+        count= {waiting?.length as number}
         rowsPerPage={rowsPerPage}
         page={page}
         onPageChange={handleChangePage}
         onRowsPerPageChange={handleChangeRowsPerPage}
       />
     </Paper>
   );
-}
+}
+
+ListTable.defaultProps = {
+ waiting:[]
+}
+