From fd4742e0f6bea198e6f728962e1bc62d69fa24ff Mon Sep 17 00:00:00 2001
From: hoyyChoi <hoyeon8165@gmail.com>
Date: Sat, 2 Sep 2023 02:53:44 +0900
Subject: [PATCH] feat : :lm command (by cd 'station')

---
 source/component/ListShop.js | 28 +++++++++++++++++++---------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/source/component/ListShop.js b/source/component/ListShop.js
index fd7efef..b9f4cf5 100644
--- a/source/component/ListShop.js
+++ b/source/component/ListShop.js
@@ -6,17 +6,21 @@ import EachShop from './EachShop.js';
 import shoplist from '../examples/shoplist.js';
 
 const ListShop = ({shops, setShops, setType}) => {
-	let first = 0;
-	let last = 3;
 	const [confirmCommand, setConfirmCommand] = useState('');
+	const [shop, setShop] = useState(shops.slice(0, 3));
+	const [endMessage, setEndMessage] = useState(false);
 	const loadMore = () => {
-		setShops([...shops, ...shoplist.slice(first + 3, last + 3)]);
+		setShop([...shop, ...shops.slice(shop.length, shop.length + 1)]);
+
+		if (shops.length === shop.length) {
+			setEndMessage(true);
+		}
 	};
 
 	return (
 		<>
 			<Box marginY={1} flexDirection="column">
-				{shops.length === 0 ? (
+				{shop.length === 0 ? (
 					<Box flexDirection="column">
 						<Text>Status code: 404</Text>
 						<Text color={theme.red}>검색 결과가 없습니다.</Text>
@@ -25,14 +29,20 @@ const ListShop = ({shops, setShops, setType}) => {
 					<Box flexDirection="column">
 						<Text>{'['}</Text>
 						<Box marginLeft={2} flexDirection="column">
-							{shops.map((data, index) => (
-								<EachShop data={data} isEnd={index === shops.length - 1} />
-							))}
+							{shop.length !== 0 ? (
+								shop.map((data, index) => (
+									<EachShop data={data} isEnd={index === shops.length - 1} />
+								))
+							) : (
+								<Text>리스트가 없습니다.</Text>
+							)}
 						</Box>
 						<Text>{']'}</Text>
 					</Box>
 				)}
-
+				<Newline />
+				<Text>{endMessage ? '더 이상 불러올 리스트가 없습니다' : ''}</Text>
+				<Newline />
 				<Box flexDirection="column">
 					<Spacer />
 					<Text color={theme.red}>
@@ -42,7 +52,7 @@ const ListShop = ({shops, setShops, setType}) => {
 					<Box>
 						<Text color={theme.commandFirst}>:q - quit</Text>
 						<Text> / </Text>
-						<Text color={theme.commandSecond}>:lm - load more reviews</Text>
+						<Text color={theme.commandSecond}>:lm - load more store</Text>
 					</Box>
 					<TextInput
 						value={confirmCommand}