Merge pull request #23 from gdsc-ssu/feat/#21

source/Output.js

@@ -2,23 +2,21 @@ import React from 'react';
 import {Text, Box, useInput, Newline} from 'ink';
 import TextInput from 'ink-text-input';
 import theme from './Theme.js';
+import ListSubway from './component/ListSubway.js';
+import ListShop from './component/ListShop.js';
 //[[['신촌','강남','숭실대입구'],ls]]
+
+// [[[{},{}],'맛집']]
 const Output = ({list}) => {
 	return (
 		<Box marginY={1} flexDirection="column">
 			{list.map(item => (
 				<>
 					<Text color={theme.purple}>$ {item[1]} </Text>
 					<Newline />
-					{item[0].map((detail, key) => (
-						<React.Fragment key={key}>
-							<Text bold color={theme.neonGreen}>
-								{item[1] === 'ls' ? detail : detail.original_title}
-								{/* {detail || detail.original_title} */}
-							</Text>
-							<Newline />
-						</React.Fragment>
-					))}
+					{item[1] === 'ls'
+						? item[0].map((data, key) => <ListSubway data={data} key={key} />)
+						: item[0].map((data, key) => <ListShop data={data} key={key} />)}
 				</>
 			))}
 		</Box>

source/Search.js

@@ -5,9 +5,8 @@ import {TypeMoive} from './api.js';
 import data from './examples/location.js';
 import theme from './Theme.js';
 
-const Search = ({setlist}) => {
+const Search = ({setlist, setStation, setId}) => {
 	const [search, setSearch] = useState('');
-
 	useInput((input, key) => {
 		if (!key) return;
 
@@ -16,10 +15,19 @@ const Search = ({setlist}) => {
 				setlist(list => [...list, [data.location, search]]);
 				setSearch('');
 			}
+			if (search.includes('cd ')) {
+				let station = search.slice(3, search.length);
+				setStation(station);
+				setSearch('');
+			}
+			if (search.includes('vi ')) {
+				let storeId = search.slice(3, search.length);
+				setId(storeId); // 지금은 임시로 Id값을 저장하지만, 나중에 서버 구축이 되면, 여기서 api call 해서 가게 상세정보를 state값에 저장한다.
+				setSearch('');
+			}
 			if (search === 'popular' || search === 'upcoming') {
 				TypeMoive(search)
 					.then(response => {
-						console.log(response.data.results.slice(0, 4));
 						setlist(list => [
 							...list,
 							[response.data.results.slice(0, 4), search],

source/SearchContainer.js

@@ -3,13 +3,34 @@ import {Text, Box, useInput, Newline} from 'ink';
 import TextInput from 'ink-text-input';
 import Search from './Search.js';
 import Output from './Output.js';
+import StationDetailType from './StationDetailType.js';
+import ShopDetail from './component/shop_detail.js';
 
 const SearchContainer = () => {
 	const [list, setlist] = useState([]);
+	const [station, setStation] = useState(''); // 타이핑된 역의 이름
+	const [Id, setId] = useState('');
 	return (
 		<Box marginY={1} flexDirection="column">
-			<Output list={list} />
-			<Search setlist={setlist} />
+			{
+				Id ? (
+					''
+				) : (
+					<Output list={list} />
+				) /* vi 창 들어기서 Id 값 다시 초기화 해줘야함.!*/
+			}
+			{/* {aaa ? <ShopDetail /> : ''} */}
+			{station ? ( // 타이핑된 역의 이름이 없을 경우, 입력 창 유지, 입력했을시, 맛집, 액티비티, 선택창 나옴.
+				<StationDetailType
+					station={station}
+					setlist={setlist}
+					setStation={setStation}
+				/>
+			) : Id ? (
+				<ShopDetail Id={Id} setId={setId} /> // 여기로 ID(나중엔 상세정보) 보내고, vi 탈출할때, setId값 초기화하면, 다시 커맨드 입력 창 나옴.
+			) : (
+				<Search setlist={setlist} setStation={setStation} setId={setId} />
+			)}
 		</Box>
 	);
 };

source/StationDetailType.js

@@ -0,0 +1,59 @@
+import React, {useState} from 'react';
+import {Text, Box, useInput, Newline} from 'ink';
+import shoplist from './examples/shoplist.js';
+import theme from './Theme.js';
+
+const StationDetailType = ({station, setlist, setStation}) => {
+	const [num, setNum] = useState(1);
+	const [type, setType] = useState('');
+
+	useInput((input, key) => {
+		if (!key) return;
+
+		if (key.downArrow) {
+			if (num < 4) {
+				setNum(num + 1);
+			}
+		} else if (key.upArrow) {
+			if (num > 1) {
+				setNum(num - 1);
+			}
+		}
+
+		if (key.return) {
+			if (num === 1) {
+				setType('맛집');
+				setlist(list => [...list, [shoplist, `${station} 맛집`]]);
+				setStation('');
+			} else if (num === 2) {
+				setType('카페');
+				setlist(list => [...list, [shoplist, `${station} 카페`]]);
+				setStation('');
+			} else if (num === 3) {
+				setType('액티비티');
+				setlist(list => [...list, [shoplist, `${station} 액티비티`]]);
+				setStation('');
+			} else if (num === 4) {
+				setType('술집');
+				setlist(list => [...list, [shoplist, `${station} 술집`]]);
+				setStation('');
+			}
+		}
+	});
+	return (
+		<Box flexDirection="column">
+			<Text color="#00FF19">&#60; {station} &#62;</Text>
+			<Box marginY={1} flexDirection="column">
+				<Text color={num == 1 ? theme.purple : theme.neonGreen}>1. 맛집</Text>
+				<Text color={num == 2 ? theme.purple : theme.neonGreen}>2. 카페</Text>
+				<Text color={num == 3 ? theme.purple : theme.neonGreen}>
+					3. 액티비티
+				</Text>
+				<Text color={num == 4 ? theme.purple : theme.neonGreen}>4. 술집</Text>
+			</Box>
+			{type ? <Text color="red"> ==&#62; {type}</Text> : ''}
+		</Box>
+	);
+};
+
+export default StationDetailType;

source/component/ListShop.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import {Text, Box, Newline} from 'ink';
+import theme from '../Theme.js';
+
+const ListShop = ({data, key}) => {
+	return (
+		<React.Fragment key={key}>
+			<Text>{'{'}</Text>
+			<Box marginLeft={2}>
+				<Text>
+					<Text>
+						"id" : "{data.id}",
+						<Newline />
+					</Text>
+					<Text>
+						"title" : "{data.title}",
+						<Newline />
+					</Text>
+					<Text marginLeft={2}>
+						"location" : "{data.location}",
+						<Newline />
+					</Text>
+					<Text>
+						"nearStation" : "{data.nearStation}",
+						<Newline />
+					</Text>
+					<Text>
+						"menu" : {'['}
+						<Newline />
+						{data.menu.map((item, index, array) => (
+							<Text key={item.name}>
+								{' '}
+								{'{'} "{item.name}" : {item.price} {'}'}
+								{index !== array.length - 1 ? ',' : ''}
+								<Newline />
+							</Text>
+						))}
+						{']'},
+						<Newline />
+					</Text>
+					<Text>
+						"starRate" : "{data.starRate}",
+						<Newline />
+					</Text>
+				</Text>
+			</Box>
+			<Text>{'}'}</Text>
+		</React.Fragment>
+	);
+};
+
+export default ListShop;

source/component/ListSubway.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import {Text, Box, Newline} from 'ink';
+import theme from '../Theme.js';
+
+const ListSubway = ({data, key}) => {
+	return (
+		<React.Fragment key={key}>
+			<Text bold color={theme.neonGreen}>
+				{data}
+				{/* {data || data.original_title} */}
+			</Text>
+			<Newline />
+		</React.Fragment>
+	);
+};
+
+export default ListSubway;

source/component/shop_detail.js

@@ -22,7 +22,24 @@ import {Text, Newline, Box} from 'ink';
  * 	reviews: [],
  * }
  */
-const ShopDetail = ({data}) => {
+const ShopDetail = ({Id, setId}) => {
+	const 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 starRateRounded = Math.round(data.starRate);
 
 	const starRateString = '⭐'.repeat(starRateRounded);

source/examples/shoplist.js

@@ -0,0 +1,44 @@
+export default [
+	{
+		id: 1423,
+		title: 'The 5th Wave',
+		location: '서울시 동작구 상도로 369',
+		nearStation: '상도역',
+		menu: [
+			{
+				name: '카페라떼',
+				price: 4000,
+			},
+		],
+		starRate: 4.5,
+		recommend: 243,
+	},
+	{
+		id: 24523,
+		title: '정육면체',
+		location: '서울시 중구 1-11',
+		nearStation: '동대문역사문화공원역',
+		menu: [
+			{
+				name: '카페라떼',
+				price: 3000,
+			},
+		],
+		starRate: 3.4,
+		recommend: 111,
+	},
+	{
+		id: 625523,
+		title: '어라라라',
+		location: '서울시 용산구 5-6161',
+		nearStation: '남영역',
+		menu: [
+			{
+				name: '카페라떼',
+				price: 9000,
+			},
+		],
+		starRate: 5.0,
+		recommend: 1551,
+	},
+];