From 22d6725dbd30d472af3cf33328e8a1a326a51b95 Mon Sep 17 00:00:00 2001 From: hoyyChoi Date: Wed, 9 Aug 2023 17:24:18 +0900 Subject: [PATCH 01/12] feat : DetailType component --- source/StationDetailType.js | 47 +++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 source/StationDetailType.js diff --git a/source/StationDetailType.js b/source/StationDetailType.js new file mode 100644 index 0000000..cfe9d14 --- /dev/null +++ b/source/StationDetailType.js @@ -0,0 +1,47 @@ +import React, {useState} from 'react'; +import {Text, Box, useInput, Newline} from 'ink'; + +const StationDetailType = ({station}) => { + 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('맛집'); + } else if (num === 2) { + setType('카페'); + } else if (num === 3) { + setType('액티비티'); + } else if (num === 4) { + setType('술집'); + } + } + }); + return ( + + < {station} > + + 1. 맛집 + 2. 카페 + 3. 액티비티 + 4. 술집 + + {type ? ==> {type} : ''} + + ); +}; + +export default StationDetailType; From 087c3953a825d5d0aa676bbb986c607b2a492adc Mon Sep 17 00:00:00 2001 From: hoyyChoi Date: Wed, 9 Aug 2023 17:24:41 +0900 Subject: [PATCH 02/12] add : cd command --- source/Search.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/source/Search.js b/source/Search.js index 83de839..e6c1bfc 100644 --- a/source/Search.js +++ b/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}) => { const [search, setSearch] = useState(''); - useInput((input, key) => { if (!key) return; @@ -16,10 +15,14 @@ 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 === '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], From 6cd7141bc106a2d26a1a4860999181d43092edc9 Mon Sep 17 00:00:00 2001 From: hoyyChoi Date: Wed, 9 Aug 2023 17:25:00 +0900 Subject: [PATCH 03/12] add : detailType component --- source/SearchContainer.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/source/SearchContainer.js b/source/SearchContainer.js index e2f34ce..5c62d03 100644 --- a/source/SearchContainer.js +++ b/source/SearchContainer.js @@ -3,13 +3,19 @@ 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'; const SearchContainer = () => { const [list, setlist] = useState([]); + const [station, setStation] = useState(''); // 타이핑된 역의 이름 return ( - + {station ? ( // 타이핑된 역의 이름이 없을 경우, 입력 창 유지, 입력했을시, 맛집, 액티비티, 선택창 나옴. + + ) : ( + + )} ); }; From fd29b2bd967bd3ca651cd7fd9cb229dd856c6ce6 Mon Sep 17 00:00:00 2001 From: hoyyChoi Date: Wed, 16 Aug 2023 02:27:21 +0900 Subject: [PATCH 04/12] add : output shoplist type --- source/Output.js | 65 +++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 56 insertions(+), 9 deletions(-) diff --git a/source/Output.js b/source/Output.js index 6f0fa3b..a1dbfe4 100644 --- a/source/Output.js +++ b/source/Output.js @@ -3,6 +3,8 @@ import {Text, Box, useInput, Newline} from 'ink'; import TextInput from 'ink-text-input'; import theme from './Theme.js'; //[[['신촌','강남','숭실대입구'],ls]] + +// [[[{},{}],'맛집']] const Output = ({list}) => { return ( @@ -10,15 +12,60 @@ const Output = ({list}) => { <> $ {item[1]} - {item[0].map((detail, key) => ( - - - {item[1] === 'ls' ? detail : detail.original_title} - {/* {detail || detail.original_title} */} - - - - ))} + {item[1] === 'ls' + ? item[0].map((data, key) => ( + + + {item[1] === 'ls' ? data : data.original_title} + {/* {data || data.original_title} */} + + + + )) + : item[0].map((data, key) => ( + + {'{'} + + + + "id" : "{data.id}", + + + + "title" : "{data.title}", + + + + "location" : "{data.location}", + + + + "nearStation" : "{data.nearStation}", + + + + "menu" : {'['} + + {data.menu.map((item, index, array) => ( + + {' '} + {'{'} "{item.name}" : {item.price} {'}'} + {index !== array.length - 1 ? ',' : ''} + + + ))} + {']'}, + + + + "starRate" : "{data.starRate}", + + + + + {'}'} + + ))} ))} From 5796071526953e80cb697679b7e67ccdd4c6676a Mon Sep 17 00:00:00 2001 From: hoyyChoi Date: Wed, 16 Aug 2023 02:32:37 +0900 Subject: [PATCH 05/12] feat : vi command --- source/Search.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/source/Search.js b/source/Search.js index e6c1bfc..4e053f9 100644 --- a/source/Search.js +++ b/source/Search.js @@ -5,7 +5,7 @@ import {TypeMoive} from './api.js'; import data from './examples/location.js'; import theme from './Theme.js'; -const Search = ({setlist, setStation}) => { +const Search = ({setlist, setStation, setId}) => { const [search, setSearch] = useState(''); useInput((input, key) => { if (!key) return; @@ -20,6 +20,11 @@ const Search = ({setlist, setStation}) => { 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 => { From 9ce681868b60f71ba975557a20b7618779bc9dd4 Mon Sep 17 00:00:00 2001 From: hoyyChoi Date: Wed, 16 Aug 2023 02:35:04 +0900 Subject: [PATCH 06/12] add : dummy data --- source/StationDetailType.js | 11 +++++++++- source/examples/shoplist.js | 44 +++++++++++++++++++++++++++++++++++++ 2 files changed, 54 insertions(+), 1 deletion(-) create mode 100644 source/examples/shoplist.js diff --git a/source/StationDetailType.js b/source/StationDetailType.js index cfe9d14..d7625fe 100644 --- a/source/StationDetailType.js +++ b/source/StationDetailType.js @@ -1,7 +1,8 @@ import React, {useState} from 'react'; import {Text, Box, useInput, Newline} from 'ink'; +import shoplist from './examples/shoplist.js'; -const StationDetailType = ({station}) => { +const StationDetailType = ({station, setlist, setStation}) => { const [num, setNum] = useState(1); const [type, setType] = useState(''); @@ -21,12 +22,20 @@ const StationDetailType = ({station}) => { 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(''); } } }); diff --git a/source/examples/shoplist.js b/source/examples/shoplist.js new file mode 100644 index 0000000..abb6034 --- /dev/null +++ b/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, + }, +]; From 4be9ce9653a4a9278c7db8adee0500b443a30eee Mon Sep 17 00:00:00 2001 From: hoyyChoi Date: Wed, 16 Aug 2023 02:36:44 +0900 Subject: [PATCH 07/12] add : shopdetail component --- source/SearchContainer.js | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/source/SearchContainer.js b/source/SearchContainer.js index 5c62d03..9d99bed 100644 --- a/source/SearchContainer.js +++ b/source/SearchContainer.js @@ -4,17 +4,32 @@ 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 ( - + { + Id ? ( + '' + ) : ( + + ) /* vi 창 들어기서 Id 값 다시 초기화 해줘야함.!*/ + } + {/* {aaa ? : ''} */} {station ? ( // 타이핑된 역의 이름이 없을 경우, 입력 창 유지, 입력했을시, 맛집, 액티비티, 선택창 나옴. - + + ) : Id ? ( + // 여기로 ID(나중엔 상세정보) 보내고, vi 탈출할때, setId값 초기화하면, 다시 커맨드 입력 창 나옴. ) : ( - + )} ); From 263323339e643768cc3410fcf253974f532914c6 Mon Sep 17 00:00:00 2001 From: hoyyChoi Date: Wed, 16 Aug 2023 02:37:06 +0900 Subject: [PATCH 08/12] fix : dummy data --- source/component/shop_detail.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/source/component/shop_detail.js b/source/component/shop_detail.js index 9650a30..5c3c0f6 100644 --- a/source/component/shop_detail.js +++ b/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); From 90c5e7bfd27776de2fbca6130fed9e97a7c166ae Mon Sep 17 00:00:00 2001 From: hoyyChoi Date: Sat, 19 Aug 2023 20:20:13 +0900 Subject: [PATCH 09/12] fix : Output -> seperate component --- source/Output.js | 57 ++++-------------------------------------------- 1 file changed, 4 insertions(+), 53 deletions(-) diff --git a/source/Output.js b/source/Output.js index a1dbfe4..272add2 100644 --- a/source/Output.js +++ b/source/Output.js @@ -2,6 +2,8 @@ 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]] // [[[{},{}],'맛집']] @@ -13,59 +15,8 @@ const Output = ({list}) => { $ {item[1]} {item[1] === 'ls' - ? item[0].map((data, key) => ( - - - {item[1] === 'ls' ? data : data.original_title} - {/* {data || data.original_title} */} - - - - )) - : item[0].map((data, key) => ( - - {'{'} - - - - "id" : "{data.id}", - - - - "title" : "{data.title}", - - - - "location" : "{data.location}", - - - - "nearStation" : "{data.nearStation}", - - - - "menu" : {'['} - - {data.menu.map((item, index, array) => ( - - {' '} - {'{'} "{item.name}" : {item.price} {'}'} - {index !== array.length - 1 ? ',' : ''} - - - ))} - {']'}, - - - - "starRate" : "{data.starRate}", - - - - - {'}'} - - ))} + ? item[0].map((data, key) => ) + : item[0].map((data, key) => )} ))} From fc524dcd2ec61dd108a5bc18a14c942f04751a7f Mon Sep 17 00:00:00 2001 From: hoyyChoi Date: Sat, 19 Aug 2023 20:20:40 +0900 Subject: [PATCH 10/12] feat : ListSubway component (command : ls) --- source/component/ListSubway.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 source/component/ListSubway.js diff --git a/source/component/ListSubway.js b/source/component/ListSubway.js new file mode 100644 index 0000000..6cc7886 --- /dev/null +++ b/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 ( + + + {data} + {/* {data || data.original_title} */} + + + + ); +}; + +export default ListSubway; From f091247144571794caefce15b1770383081d5ff8 Mon Sep 17 00:00:00 2001 From: hoyyChoi Date: Sat, 19 Aug 2023 20:20:58 +0900 Subject: [PATCH 11/12] feat : ListShop component (command : cd "subway") --- source/component/ListShop.js | 52 ++++++++++++++++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 source/component/ListShop.js diff --git a/source/component/ListShop.js b/source/component/ListShop.js new file mode 100644 index 0000000..69308fc --- /dev/null +++ b/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 ( + + {'{'} + + + + "id" : "{data.id}", + + + + "title" : "{data.title}", + + + + "location" : "{data.location}", + + + + "nearStation" : "{data.nearStation}", + + + + "menu" : {'['} + + {data.menu.map((item, index, array) => ( + + {' '} + {'{'} "{item.name}" : {item.price} {'}'} + {index !== array.length - 1 ? ',' : ''} + + + ))} + {']'}, + + + + "starRate" : "{data.starRate}", + + + + + {'}'} + + ); +}; + +export default ListShop; From 77a40c66f6f6754902a1e6fbf9055e10aa73bf7a Mon Sep 17 00:00:00 2001 From: hoyyChoi Date: Sat, 19 Aug 2023 20:21:30 +0900 Subject: [PATCH 12/12] fix : color variable --- source/StationDetailType.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/source/StationDetailType.js b/source/StationDetailType.js index d7625fe..315f1bc 100644 --- a/source/StationDetailType.js +++ b/source/StationDetailType.js @@ -1,6 +1,7 @@ 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); @@ -43,10 +44,12 @@ const StationDetailType = ({station, setlist, setStation}) => { < {station} > - 1. 맛집 - 2. 카페 - 3. 액티비티 - 4. 술집 + 1. 맛집 + 2. 카페 + + 3. 액티비티 + + 4. 술집 {type ? ==> {type} : ''}