서민정 / SEARCH-AND-CHAT

Go to a project
Toggle navigation Toggle navigation pinning
서민정
890d459e 1 parent 285f3968

update function and usage page

Inline Side-by-side
Showing 5 changed files with 48 additions and 2 deletions
...@@ -5,6 +5,7 @@ import { Route, Switch, BrowserRouter} from "react-router-dom"; ...@@ -5,6 +5,7 @@ import { Route, Switch, BrowserRouter} from "react-router-dom";
5 import chatpage from './views/chatpage'; 5 import chatpage from './views/chatpage';
6 import loginpage from './views/loginpage'; 6 import loginpage from './views/loginpage';
7 import registerpage from './views/registerpage'; 7 import registerpage from './views/registerpage';
8 +import howtouse from './views/howtouse';
8 9
9 10
10 //const { Title } = Typography; 11 //const { Title } = Typography;
...@@ -17,6 +18,7 @@ function App() { ...@@ -17,6 +18,7 @@ function App() {
17 <Route path="/chat" component={chatpage}/> 18 <Route path="/chat" component={chatpage}/>
18 <Route path="/" exact component={loginpage} /> 19 <Route path="/" exact component={loginpage} />
19 <Route path="/register" component={registerpage} /> 20 <Route path="/register" component={registerpage} />
21 + <Route path="/usage" component={howtouse} />
20 </Switch> 22 </Switch>
21 </Suspense> 23 </Suspense>
22 </BrowserRouter> 24 </BrowserRouter>
......
...@@ -8,6 +8,8 @@ import Card from "./Sections/Card"; ...@@ -8,6 +8,8 @@ import Card from "./Sections/Card";
8 import CheckString from './Check'; 8 import CheckString from './Check';
9 import { text } from 'body-parser'; 9 import { text } from 'body-parser';
10 10
11 +
12 +
11 function Chatbot(props) { 13 function Chatbot(props) {
12 14
13 console.log("실행") 15 console.log("실행")
......
...@@ -19,6 +19,11 @@ function chatpage() { ...@@ -19,6 +19,11 @@ function chatpage() {
19 autoSearch = 1; 19 autoSearch = 1;
20 } 20 }
21 21
22 + window.history.pushState(null, null, "/chat");
23 + window.onpopstate = function(event){
24 + window.history.go(1)
25 + };
26 +
22 return ( 27 return (
23 <div> 28 <div>
24 <div style={{ display: 'flex', justifyContent: 'center', marginTop: '1rem' }}> 29 <div style={{ display: 'flex', justifyContent: 'center', marginTop: '1rem' }}>
......
1 +import React from "react";
2 +import { withRouter, Link } from "react-router-dom";
3 +
4 +function howtouse() {
5 + return(
6 + <div style={{ display: 'flex', justifyContent: 'center', paddingTop: '2rem'}}>
7 + <div style={{
8 + height: 610, width: 700,
9 + border: '3px solid black', borderRadius: '7px'
10 + }}>
11 + <div style = {{display: 'flex', justifyContent: 'center', paddingTop:'2rem', fontSize: '1rem', paddingLeft:'1rem',paddingRight:'1rem'}}>
12 + 우선, SEARCH AND CHAT 웹페이지에 접속해주셔서 감사합니다. <br/>
13 + 간단한 사용 방법을 알려드리겠습니다.<br/><br/>
14 + 1. 챗봇과의 대화는 회원/비회원 모두 이용 가능합니다.<br/>
15 + 2. 회원인 경우에는, 회원 가입 시 등록한 키워드를 챗봇이 먼저 검색해주어 정보를 제공해줍니다.<br/>
16 + 3. 비회원인 경우에는, 직접 챗봇에게 검색을 요청하셔야합니다.<br/>
17 + 4. 챗봇과의 일상적인 대화는 회원/비회원 구분없이 모두 가능합니다.<br/>
18 + 5. 로그인 시, 해당 페이지로 연결을 위해 더블 클릭이 필요할 수 있습니다.<br/>
19 + 6. 챗봇에게 정보를 요청할 때에는 챗봇이 알려주는 양식에 맞추어 입력하셔야 가능합니다.<br/>
20 + 7. 아직 챗봇은 많은 경험이 부족합니다. 여러분의 모든 대화를 이해하지 못할 수 있으니 양해 부탁드립니다.<br/>
21 + 8. 회원/비회원의 구분을 위해 세션을 사용합니다. 또한 여러분께 보여지는 페이지는 단일 페이지로 구성되었습니다.<br/>
22 + 따라서 챗봇과의 대화 페이지에서는 뒤로가기나 새로고침 시 이용에 불편함이 있을 수 있어 뒤로가기는 막아두었습니다.<br/>
23 + 다시 메인 페이지로 이동하시기 위해서는, 페이지 URL로 다시 접속하시면 재 접속 가능합니다.<br/>
24 + ** 아래 메인 페이지로 돌아가기를 클릭하여, 챗봇과의 즐거운 대화 즐기시길 바랍니다. 감사합니다!
25 + </div>
26 + <div style = {{display: 'flex', justifyContent: 'center', paddingTop:'2rem',paddingLeft:'1rem',paddingRight:'1rem', fontSize: '1.5rem'}}>
27 + <Link to ='/'>메인 페이지로 돌아가기</Link>
28 + </div>
29 + </div>
30 +
31 + </div>
32 + )
33 +}
34 +
35 +export default withRouter(howtouse);
...\ No newline at end of file ...\ No newline at end of file
...@@ -45,11 +45,13 @@ async function userInfo(){ ...@@ -45,11 +45,13 @@ async function userInfo(){
45 45
46 46
47 function loginpage() { 47 function loginpage() {
48 -
49 return ( 48 return (
50 <div> 49 <div>
51 <div style={{ display: 'flex', justifyContent: 'center', marginTop: '1rem', paddingTop: '10rem' }}> 50 <div style={{ display: 'flex', justifyContent: 'center', marginTop: '1rem', paddingTop: '10rem' }}>
52 - <Title level={2}>Login Page</Title> 51 + <Title level={2}>SEARCH-AND-CHAT MAIN PAGE</Title>
52 + </div>
53 + <div style={{ display: 'flex', justifyContent: 'center'}}>
54 + 사용방법은&nbsp;<Link to ="/usage">HOW TO USE</Link>&nbsp;에서 확인하실 수 있습니다.
53 </div> 55 </div>
54 <div style={{ display: 'flex', justifyContent: 'center', marginTop: '1rem'}}> 56 <div style={{ display: 'flex', justifyContent: 'center', marginTop: '1rem'}}>
55 <form style={{ width: '350px' }} name = "loginForm"> 57 <form style={{ width: '350px' }} name = "loginForm">
......