Merge pull request #19 from gdsc-ssu/feat/#18

[#18] 초기 진입 화면 터미널스럽게 변경
gdsc-ssu · Aug 11, 2023 · 4d2632a · 4d2632a
2 parents c3b1821 + 6fa655a
commit 4d2632a
Show file tree

Hide file tree

Showing 11 changed files with 125 additions and 73 deletions.
diff --git a/source/Login.js b/source/Login.js
@@ -1,6 +1,7 @@
 import React, {useState} from 'react';
 import {Text, Box, useInput} from 'ink';
 import TextInput from 'ink-text-input';
+import theme from './Theme.js';
 
 const Login = ({Id, setId, setShow}) => {
 	const [nextStepInfo, setNextStepInfo] = useState(false);
@@ -28,7 +29,7 @@ const Login = ({Id, setId, setShow}) => {
 	return (
 		<Box marginY={1} flexDirection="column">
 			<Box>
-				<Text color="red">ID: </Text>
+				<Text color={theme.neonGreen}>ID: </Text>
 				{nextStepInfo ? (
 					<Text>{Id}</Text>
 				) : (
@@ -37,7 +38,7 @@ const Login = ({Id, setId, setShow}) => {
 			</Box>
 			{nextStepInfo ? (
 				<Box>
-					<Text color="red">PASSWORD: </Text>
+					<Text color={theme.neonGreen}>PASSWORD: </Text>
 					<TextInput value={Password} onChange={setPassword} />
 				</Box>
 			) : (

diff --git a/source/Output.js b/source/Output.js
@@ -0,0 +1,28 @@
+import React from 'react';
+import {Text, Box, useInput, Newline} from 'ink';
+import TextInput from 'ink-text-input';
+import theme from './Theme.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>
+					))}
+				</>
+			))}
+		</Box>
+	);
+};
+
+export default Output;
diff --git a/source/Register.js b/source/Register.js
@@ -1,6 +1,7 @@
 import React, {useState} from 'react';
 import {Text, Box, useInput} from 'ink';
 import TextInput from 'ink-text-input';
+import theme from './Theme.js';
 
 const Register = ({setIsSelected, setSpaceStep}) => {
 	const [nextStepInfo, setNextStepInfo] = useState(0);
@@ -15,7 +16,7 @@ const Register = ({setIsSelected, setSpaceStep}) => {
 		if (key.return) {
 			if (nextStepInfo === 2) {
 				setSpaceStep('login');
-				setIsSelected(false);
+				setIsSelected(true);
 			}
 			setNextStepInfo(nextStepInfo + 1);
 		}
@@ -31,7 +32,7 @@ const Register = ({setIsSelected, setSpaceStep}) => {
 	return (
 		<Box marginY={1} flexDirection="column">
 			<Box>
-				<Text color="red">NEW ID: </Text>
+				<Text color={theme.neonGreen}>NEW ID: </Text>
 				{nextStepInfo === 0 ? (
 					<TextInput value={Id} onChange={setId} />
 				) : (
@@ -41,12 +42,12 @@ const Register = ({setIsSelected, setSpaceStep}) => {
 			<Box>
 				{nextStepInfo === 1 ? (
 					<>
-						<Text color="red">NEW PASSWORD: </Text>
+						<Text color={theme.neonGreen}>NEW PASSWORD: </Text>
 						<TextInput value={Password} onChange={setPassword} />
 					</>
 				) : nextStepInfo === 2 ? (
 					<>
-						<Text color="red">NEW PASSWORD: </Text>
+						<Text color={theme.neonGreen}>NEW PASSWORD: </Text>
 						<Text> {Password}</Text>
 					</>
 				) : (
@@ -55,18 +56,18 @@ const Register = ({setIsSelected, setSpaceStep}) => {
 			</Box>
 			{nextStepInfo === 2 ? (
 				<Box>
-					<Text color="red">Do you have a girlfriend? (y/n): </Text>
+					<Text color={theme.neonGreen}>Do you have a girlfriend? (y/n): </Text>
 					<TextInput value={girlfriend} onChange={setGirlfriend} />
 				</Box>
 			) : (
 				<Text>{girlfriend}</Text>
 			)}
 			{openMessage === 'complete' ? (
-				<Text color="green">
+				<Text color={theme.red}>
 					Sign up is complete. (Please press space to login.)
 				</Text>
 			) : openMessage === 'fail' ? (
-				<Text color="red">Sign up is not possible.</Text>
+				<Text color={theme.red}>Sign up is not possible.</Text>
 			) : (
 				''
 			)}

diff --git a/source/Search.js b/source/Search.js
@@ -2,51 +2,43 @@ import React, {useState} from 'react';
 import {Text, Box, useInput, Newline} from 'ink';
 import TextInput from 'ink-text-input';
 import {TypeMoive} from './api.js';
+import data from './examples/location.js';
+import theme from './Theme.js';
 
-const Search = () => {
+const Search = ({setlist}) => {
 	const [search, setSearch] = useState('');
-	const [list, setList] = useState([]);
-	const [errorMessage, setErrorMessage] = useState(false);
 
 	useInput((input, key) => {
 		if (!key) return;
 
 		if (key.return) {
+			if (search === 'ls') {
+				setlist(list => [...list, [data.location, search]]);
+				setSearch('');
+			}
 			if (search === 'popular' || search === 'upcoming') {
-				setErrorMessage(false);
-				TypeMoive(search).then(response => {
-					setList(response.data.results.slice(0, 4));
-				}).catch(error => {
-					console.error(error);
-				});
-			} else {
-				setErrorMessage(false);
-				setErrorMessage(true);
+				TypeMoive(search)
+					.then(response => {
+						console.log(response.data.results.slice(0, 4));
+						setlist(list => [
+							...list,
+							[response.data.results.slice(0, 4), search],
+						]);
+					})
+					.catch(error => {
+						console.error(error);
+					});
+				setSearch('');
 			}
 		}
 	});
 
 	return (
 		<Box marginY={1} flexDirection="column">
 			<Box>
-				<Text color="green">search : </Text>
+				<Text color={theme.neonGreen}>$ </Text>
 				<TextInput value={search} onChange={setSearch} />
 			</Box>
-			<Newline />
-			{errorMessage ? <Text color="red">return!!</Text> : ''}
-			<Box flexDirection="column">
-				{list.map((item, key) => {
-					return (
-						<>
-							<Text bold color="red" key={key}>
-								{item.original_title}
-							</Text>
-							<Text>{item.overview}</Text>
-							<Newline />
-						</>
-					);
-				})}
-			</Box>
 		</Box>
 	);
 };

diff --git a/source/SearchContainer.js b/source/SearchContainer.js
@@ -0,0 +1,17 @@
+import React, {useState} from 'react';
+import {Text, Box, useInput, Newline} from 'ink';
+import TextInput from 'ink-text-input';
+import Search from './Search.js';
+import Output from './Output.js';
+
+const SearchContainer = () => {
+	const [list, setlist] = useState([]);
+	return (
+		<Box marginY={1} flexDirection="column">
+			<Output list={list} />
+			<Search setlist={setlist} />
+		</Box>
+	);
+};
+
+export default SearchContainer;
diff --git a/source/Theme.js b/source/Theme.js
@@ -0,0 +1,8 @@
+const theme = {
+	neonGreen: '#00FF19',
+	white: '#ffffff',
+	red: '#FF0000',
+	purple: '#AD00FF',
+};
+
+export default theme;
diff --git a/source/app.js b/source/app.js
@@ -1,10 +1,11 @@
 import React, {useState} from 'react';
-import {Box, Text} from 'ink';
+import {Box, Text, Newline} from 'ink';
 import Login from './Login.js';
-import Search from './Search.js';
 import Intro from './component/intro.js';
 import SelectUserInfo from './SelectUserInfo.js';
 import Register from './Register.js';
+import SearchContainer from './SearchContainer.js';
+import theme from './Theme.js';
 
 const App = () => {
 	const [show, setShow] = useState(false);
@@ -17,7 +18,7 @@ const App = () => {
 			<Intro />
 			<Text>press "help" to see the list of commands</Text>
 			{show ? (
-				<Text color="red">Username : {Id}</Text>
+				<Text color={theme.white}>Username : {Id}</Text>
 			) : (
 				<SelectUserInfo
 					isSelected={isSelected}
@@ -38,7 +39,9 @@ const App = () => {
 						''
 					)
 				) : (
-					<Search />
+					<Box flexDirection="column">
+						<SearchContainer />
+					</Box>
 				)}
 			</Box>
 		</>

diff --git a/source/component/intro.js b/source/component/intro.js
@@ -1,9 +1,10 @@
 import React from 'react';
 import { Text, Newline } from 'ink';
+import theme from "../Theme.js"
 
 const Intro = () => {
     return ( 
-        <Text>
+			<Text color={theme.neonGreen}>
 			<Text>   __  __                __      __          ____  ____  ____      ____________________<Newline/></Text>
 			<Text>  / / / /___        ____/ /___ _/ /____     / __ \/ __ \/ __ \    / / ____/ ____/_  __/<Newline/></Text>
 			<Text> / / / / __ \______/ __  / __ `/ __/ _ \   / /_/ / /_/ / / / /_  / / __/ / /     / /   <Newline/></Text>

diff --git a/source/examples/location.js b/source/examples/location.js
@@ -0,0 +1,14 @@
+export default {
+	location: [
+		'신촌',
+		'건대 입구',
+		'숭실대 입구',
+		'강남',
+		'홍대',
+		'신림',
+		'신도림',
+		'서울대입구',
+		'상봉',
+		'천호',
+	],
+};
diff --git a/source/examples/location.json b/source/examples/location.json
diff --git a/source/select_user_info.js b/source/select_user_info.js
@@ -1,5 +1,6 @@
 import React, {useState} from 'react';
 import {Text, Box, useInput} from 'ink';
+import theme from './Theme.js';
 
 const SelectUserInfo = ({isSelected, setIsSelected, setSpaceStep}) => {
 	useInput((input, key) => {
@@ -13,33 +14,33 @@ const SelectUserInfo = ({isSelected, setIsSelected, setSpaceStep}) => {
 
 		if (key.return) {
 			if (isSelected) {
-				// register 페이지로 이동
-				setSpaceStep('register');
-			} else {
 				// login 페이지로 이동
 				setSpaceStep('login');
+			} else {
+				// register 페이지로 이동
+				setSpaceStep('register');
 			}
 		}
 	});
 
 	return (
-		<Box width={23}>
-			<Box width="50%">
-				{isSelected ? (
-					<Text backgroundColor="red" color="white">
-						Register
-					</Text>
+		<Box flexDirection="column">
+			<Text color={theme.neonGreen}>Select Menu</Text>
+			<Newline />
+			<Box width={18}>
+				<Box width="50%">
+					{isSelected ? (
+						<Text color={theme.red}>Login</Text>
+					) : (
+						<Text color={theme.neonGreen}>Login</Text>
+					)}
+				</Box>
+				{!isSelected ? (
+					<Text color={theme.red}>Register</Text>
 				) : (
-					<Text color="red">Register</Text>
+					<Text color={theme.neonGreen}>Register</Text>
 				)}
 			</Box>
-			{!isSelected ? (
-				<Text backgroundColor="red" color="white">
-					Login
-				</Text>
-			) : (
-				<Text color="red">Login</Text>
-			)}
 		</Box>
 	);
 };