diff --git a/source/Search.js b/source/Search.js index 16b49f9..edd2500 100644 --- a/source/Search.js +++ b/source/Search.js @@ -3,8 +3,9 @@ import {Text, Box, useInput} from 'ink'; import TextInput from 'ink-text-input'; import data from './examples/location.js'; import theme from './Theme.js'; +import {getSinglePlaceCheck, getReviewCheck} from './api/remote.js'; -const Search = ({setlist, setStation, setId, setStoreName}) => { +const Search = ({setlist, setStation, setId, setStoreName, setSingleShop}) => { const [search, setSearch] = useState(''); const [isHelpOn, setIsHelpOn] = useState(false); const [previousCommand, setPreviousCommand] = useState(''); @@ -73,7 +74,13 @@ const Search = ({setlist, setStation, setId, setStoreName}) => { if (search.startsWith('vi ')) { let storeId = search.slice(3, search.length); setlist(list => [...list, [[], search]]); - setId(storeId); // 지금은 임시로 Id값을 저장하지만, 나중에 서버 구축이 되면, 여기서 api call 해서 가게 상세정보를 state값에 저장한다. + getSinglePlaceCheck(storeId).then(res => { + setSingleShop(res.data.body); + getReviewCheck(storeId).then(res => { + setSingleShop(data => ({...data, reviews: res.data.body})); + setId(storeId); + }); + }); setSearch(''); return; } diff --git a/source/SearchContainer.js b/source/SearchContainer.js index 8dfe7ec..7c76187 100644 --- a/source/SearchContainer.js +++ b/source/SearchContainer.js @@ -13,6 +13,8 @@ const SearchContainer = ({userId}) => { const [id, setId] = useState(0); const [storeName, setStoreName] = useState(''); const [type, setType] = useState(''); + const [shops, setShops] = useState([]); + const [singleShop, setSingleShop] = useState({}); return ( @@ -28,13 +30,19 @@ const SearchContainer = ({userId}) => { ) : type ? ( - + ) : id ? ( - + ) : storeName ? ( ) : ( @@ -43,6 +51,7 @@ const SearchContainer = ({userId}) => { setStation={setStation} setId={setId} setStoreName={setStoreName} + setSingleShop={setSingleShop} /> )} diff --git a/source/StationDetailType.js b/source/StationDetailType.js index 3a4c920..1ebbecd 100644 --- a/source/StationDetailType.js +++ b/source/StationDetailType.js @@ -2,8 +2,15 @@ import React, {useState} from 'react'; import {Text, Box, useInput, Newline} from 'ink'; import shoplist from './examples/shoplist.js'; import theme from './Theme.js'; +import {getAllPlaceCheck} from './api/remote.js'; -const StationDetailType = ({setType, station, setlist, setStation}) => { +const StationDetailType = ({ + setType, + station, + setShops, + setlist, + setStation, +}) => { const [num, setNum] = useState(1); useInput((input, key) => { @@ -23,20 +30,20 @@ const StationDetailType = ({setType, station, setlist, setStation}) => { if (num === 1) { setType('맛집'); setlist(list => [...list, [[], `${station} 맛집`]]); - setStation(''); } else if (num === 2) { setType('카페'); setlist(list => [...list, [[], `${station} 카페`]]); - setStation(''); } else if (num === 3) { setType('액티비티'); setlist(list => [...list, [[], `${station} 액티비티`]]); - setStation(''); } else if (num === 4) { setType('술집'); setlist(list => [...list, [[], `${station} 술집`]]); - setStation(''); } + getAllPlaceCheck(1, station).then(res => { + setShops(res.data.body); // shoplist.slice(first, last) + }); + setStation(''); } }); return ( diff --git a/source/api/remote.js b/source/api/remote.js new file mode 100644 index 0000000..298fc04 --- /dev/null +++ b/source/api/remote.js @@ -0,0 +1,15 @@ +import axios from 'axios'; + +const UpdateAxios = axios.create({ + baseURL: 'https://3v0x65nkk8.execute-api.ap-northeast-2.amazonaws.com', +}); + +const getAllPlaceCheck = (page, station) => + UpdateAxios.get(`/place?page=${page}&order=STAR&store=&station=${station}`); + +const getSinglePlaceCheck = placeId => UpdateAxios.get(`/place/${placeId}`); + +const getReviewCheck = placeId => + UpdateAxios.get(`/review/place/${placeId}?page=1`); + +export {getAllPlaceCheck, getSinglePlaceCheck, getReviewCheck}; diff --git a/source/component/EachShop.js b/source/component/EachShop.js index 8af790c..b4e6371 100644 --- a/source/component/EachShop.js +++ b/source/component/EachShop.js @@ -12,7 +12,7 @@ const EachShop = ({data, key, isEnd}) => { - "title" : "{data.title}", + "name" : "{data.name}", @@ -20,16 +20,16 @@ const EachShop = ({data, key, isEnd}) => { - "nearStation" : "{data.nearStation}", + "storeUrl" : "{data.url}", "menu" : {'['} {data.menu.map((item, index, array) => ( - + {' '} - {'{'} "{item.name}" : {item.price} {'}'} + {'{'} "{item.menuName}" : {item.menuPrice} {'}'} {index !== array.length - 1 ? ',' : ''} @@ -37,7 +37,11 @@ const EachShop = ({data, key, isEnd}) => { {']'}, - "starRate" : {data.starRate} + + + "starRate" : "{data.averageStar}", + + {isEnd ? '}' : '},'} diff --git a/source/component/ListShop.js b/source/component/ListShop.js index 4c2cd1b..5d34f3f 100644 --- a/source/component/ListShop.js +++ b/source/component/ListShop.js @@ -1,19 +1,17 @@ -import React, {useState} from 'react'; +import React, {useEffect, useState} from 'react'; import {Text, Box, Newline, Spacer} from 'ink'; import theme from '../Theme.js'; import TextInput from 'ink-text-input'; import EachShop from './EachShop.js'; -import shoplist from '../examples/shoplist.js'; -const ListShop = ({setType}) => { +const ListShop = ({shops, setShops, setType}) => { let first = 0; let last = 3; const [confirmCommand, setConfirmCommand] = useState(''); - const [shops, setShops] = useState(shoplist.slice(first, last)); - const loadMore = () => { setShops([...shops, ...shoplist.slice(first + 3, last + 3)]); }; + return ( {'['} diff --git a/source/component/ShopDetail.js b/source/component/ShopDetail.js index 3562689..25e8b7f 100644 --- a/source/component/ShopDetail.js +++ b/source/component/ShopDetail.js @@ -1,30 +1,10 @@ import React, {useState} from 'react'; -import {Text, Newline, Box, useInput, Spacer} from 'ink'; +import {Text, Newline, Box, Spacer, useInput} from 'ink'; import TextInput from 'ink-text-input'; import theme from '../Theme.js'; +import SingleShop from './SingleShop.js'; -/** - * - * @param {Object} data - * @description - * data = { - * id: '1', - * title: 'The 5th Wave', - * location: '서울시 동작구 상도로 369', - * nearStation: '상도역', - * openTime: '09:00', - * closeTime: '22:00', - * menu: [ - * { - * name: '카페라떼', - * price: 4000, - * }, - * ], - * starRate: 4.5, - * reviews: [], - * } - */ -const ShopDetail = ({id, setId, userId}) => { +const ShopDetail = ({id, setId, userId, singleShop}) => { const initialData = { id: '1', title: 'The 5th Wave', @@ -45,7 +25,7 @@ const ShopDetail = ({id, setId, userId}) => { ], }; - const [data, setData] = useState(initialData); + const [data, setData] = useState(singleShop); const [command, setCommand] = useState(''); @@ -156,7 +136,7 @@ const ShopDetail = ({id, setId, userId}) => { }; const ShopView = ({data}) => { - const starRateString = '⭐'.repeat(Math.round(data.starRate)); + const starRateString = '⭐'.repeat(Math.round(data.averageStar)); return ( <> @@ -166,17 +146,17 @@ const ShopView = ({data}) => { "id" : "{data.id}", - "title" : "{data.title}", + "name" : "{data.name}", "location" : "{data.location}", - "nearStation" : "{data.nearStation}", + "nearStation" : "{data.station}", - "openTime" : "{data.openTime}" - "{data.closeTime}", + "openTime" : "{data.open_time}" - "{data.end_time}", @@ -186,7 +166,7 @@ const ShopView = ({data}) => { {data.menu.map((item, index, array) => ( {' '} - {'{'} "{item.name}" : {item.price} {'}'} + {'{'} "{item.menuName}" : {item.menuPrice} {'}'} {index !== array.length - 1 ? ',' : ''} @@ -196,7 +176,7 @@ const ShopView = ({data}) => { - "starRate" : "{starRateString}({data.starRate})", + "starRate" : "{starRateString}({data.averageStar})", {data.reviews.length > 0 ? ( @@ -207,9 +187,9 @@ const ShopView = ({data}) => { {data.reviews.map((item, index) => ( ))}