Merge pull request #35 from gdsc-ssu/feat/#34

[FEAT] 가게 조회 API

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;
 			}

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 (
 		<Box marginY={1} flexDirection="column">
@@ -28,13 +30,19 @@ const SearchContainer = ({userId}) => {
 				<StationDetailType
 					setType={setType}
 					station={station}
+					setShops={setShops}
 					setlist={setlist}
 					setStation={setStation}
 				/>
 			) : type ? (
-				<ListShop setType={setType} />
+				<ListShop shops={shops} setShops={setShops} setType={setType} />
 			) : id ? (
-				<ShopDetail id={id} setId={setId} userId={userId} />
+				<ShopDetail
+					id={id}
+					setId={setId}
+					userId={userId}
+					singleShop={singleShop}
+				/>
 			) : storeName ? (
 				<ShopPost setStoreName={setStoreName} />
 			) : (
@@ -43,6 +51,7 @@ const SearchContainer = ({userId}) => {
 					setStation={setStation}
 					setId={setId}
 					setStoreName={setStoreName}
+					setSingleShop={setSingleShop}
 				/>
 			)}
 		</Box>

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 (

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};

source/component/EachShop.js

@@ -12,32 +12,36 @@ const EachShop = ({data, key, isEnd}) => {
 						<Newline />
 					</Text>
 					<Text>
-						"title" : "{data.title}",
+						"name" : "{data.name}",
 						<Newline />
 					</Text>
 					<Text marginLeft={2}>
 						"location" : "{data.location}",
 						<Newline />
 					</Text>
 					<Text>
-						"nearStation" : "{data.nearStation}",
+						"storeUrl" : "{data.url}",
 						<Newline />
 					</Text>
 					<Text>
 						"menu" : {'['}
 						<Newline />
 						{data.menu.map((item, index, array) => (
-							<Text key={item.name}>
+							<Text key={index}>
 								{' '}
-								{'{'} "{item.name}" : {item.price} {'}'}
+								{'{'} "{item.menuName}" : {item.menuPrice} {'}'}
 								{index !== array.length - 1 ? ',' : ''}
 								<Newline />
 							</Text>
 						))}
 						{']'},
 						<Newline />
 					</Text>
-					<Text>"starRate" : {data.starRate}</Text>
+
+					<Text>
+						"starRate" : "{data.averageStar}",
+						<Newline />
+					</Text>
 				</Text>
 			</Box>
 			<Text>{isEnd ? '}' : '},'}</Text>

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 (
 		<Box marginY={1} flexDirection="column">
 			<Text>{'['}</Text>

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}) => {
 					<Text>"id" : "{data.id}",</Text>
 				</Box>
 				<Box>
-					<Text>"title" : "{data.title}",</Text>
+					<Text>"name" : "{data.name}",</Text>
 				</Box>
 				<Box>
 					<Text marginLeft={2}>"location" : "{data.location}",</Text>
 				</Box>
 				<Box>
-					<Text>"nearStation" : "{data.nearStation}",</Text>
+					<Text>"nearStation" : "{data.station}",</Text>
 				</Box>
 				<Box>
 					<Text>
-						"openTime" : "{data.openTime}" - "{data.closeTime}",
+						"openTime" : "{data.open_time}" - "{data.end_time}",
 					</Text>
 				</Box>
 				<Box>
@@ -186,7 +166,7 @@ const ShopView = ({data}) => {
 						{data.menu.map((item, index, array) => (
 							<Text>
 								{' '}
-								{'{'} "{item.name}" : {item.price} {'}'}
+								{'{'} "{item.menuName}" : {item.menuPrice} {'}'}
 								{index !== array.length - 1 ? ',' : ''}
 								<Newline />
 							</Text>
@@ -196,7 +176,7 @@ const ShopView = ({data}) => {
 				</Box>
 				<Box>
 					<Text>
-						"starRate" : "{starRateString}({data.starRate})",
+						"starRate" : "{starRateString}({data.averageStar})",
 					</Text>
 				</Box>
 				{data.reviews.length > 0 ? (
@@ -207,9 +187,9 @@ const ShopView = ({data}) => {
 						<Box flexDirection="column">
 							{data.reviews.map((item, index) => (
 								<ReviewView
-									writer={item.writer}
+									writer={item.userId}
 									content={item.content}
-									starRate={item.starRate}
+									starRate={item.star}
 									isEnd={index !== data.reviews.length - 1}
 								/>
 							))}