Skip to content

Commit

Permalink
Merge pull request #77 from 7-lin/feature/hyeonju
Browse files Browse the repository at this point in the history
Feat: 챗봇 상태관리 로직 수정
  • Loading branch information
Hyeeeein authored Apr 8, 2023
2 parents ad304ab + b1a581b commit 00d0215
Show file tree
Hide file tree
Showing 10 changed files with 441 additions and 147 deletions.
Binary file added public/me.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions src/@types/data.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,14 @@ export interface ResultPackageType {
image: string;
desc: string;
category: string;
backgroundImg: string;
}

export interface lastAnswersType {
golf: string;
trekking: string;
ocean: string;
culture: string;
}

export interface TestResultProductType {
Expand Down
78 changes: 78 additions & 0 deletions src/commons/Chatbot/ChatList.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import React, { useState } from "react";
import styled from "styled-components";
import { TimeFormatEnum, currentTime } from "../../utils/CurrentTime";
import { useRecoilState } from "recoil";
import { chatListState } from "../../store/chatbotAtom";

type ChatPropsType = {
startTime: string;
};

const ChatList = ({ startTime }: ChatPropsType) => {
const [chatList, setChatList] = useRecoilState(chatListState);

return (
<ChatListContainer>
<div className="start-time">{"오늘 " + startTime}</div>
<div>sdfdsfsd</div>
<div>sdfdsfsd</div>
<div>sdfdsfsd</div>
<div>sdfdsfsd</div>
<div>sdfdsfsd</div>
<div>sdfdsfsd</div>
<div>sdfdsfsd</div>
<div>sdfdsfsd</div>
<div>sdfdsfsd</div>
<div>sdfdsfsd</div>
<div>sdfdsfsd</div>
<div>sdfdsfsd</div>
<div>sdfdsfsd</div>
<div>sdfdsfsd</div>
<div>sdfdsfsd</div>
<div>sdfdsfsd</div>
<div>sdfdsfsd</div>
<div>sdfdsfsd</div>
<div>sdfdsfsd</div>
<div>sdfdsfsd</div>
<div>sdfdsfsd</div>
<div>sdfdsfsd</div>
<div>sdfdsfsd</div>
<div>sdfdsfsd</div>
<div>sdfdsfsd</div>
<div>sdfdsfsd</div>
</ChatListContainer>
);
};

const ChatListContainer = styled.div`
height: 430px;
overflow: auto;
padding: 0 10px;
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-thumb {
height: 30%;
background: var(--color-blue);
border-radius: 8px;
}
::-webkit-scrollbar-track {
background: rgba(126, 126, 126, 0.432);
border-radius: 8px;
}
.start-time {
text-align: center;
margin-bottom: 15px;
color: var(--color-blue);
}
@media (max-width: 850px) {
height: 300px;
}
`;

export default ChatList;
91 changes: 69 additions & 22 deletions src/commons/Chatbot/FloatingInput.tsx
Original file line number Diff line number Diff line change
@@ -1,42 +1,53 @@
import { useState } from "react";
import styled from "styled-components";
import { IoIosPaperPlane } from "react-icons/io";
import { useMediaQuery } from "react-responsive";
import { answers } from "./questionsAndAnswers";
import { chatListState, chatbotStepState } from "../../store/chatbotAtom";
import { useRecoilState } from "recoil";

type PropsType = {
setMyMessage: any;
type FloatingInputPropsType = {
orderNumber: number;
setOrderNumber: any;
answer: string[];
setAnswer: any;
};

const FloatingInput = ({ setMyMessage, orderNumber }: PropsType) => {
const isMobile: boolean = useMediaQuery({
query: "(max-width:850px)",
});
// 질문 3번째부터는 text input 대신 button형식으로 변경하기

const [text, setText] = useState("");

const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
console.log(text);
setMyMessage(text);
setText("");
const FloatingInput = ({
orderNumber,
setOrderNumber,
answer,
setAnswer,
}: FloatingInputPropsType) => {
const [chatbotStep, setChatbotStep] = useRecoilState(chatbotStepState);
const [chatList, setChatList] = useRecoilState(chatListState);
const [selectedButton, setSelectedButton] = useState([]);

const onSubmit = (aaa: string[]) => {
console.log(aaa);
setChatList({ chatList: [] });
// setAnswer("");

if (orderNumber === 7) {
// api연결코드 작성
setChatbotStep({ step: 3 });
}
};

return (
<InputSection>
{orderNumber < 2 ? (
{orderNumber > 2 ? ( //<
<TextForm
onSubmit={(e) => {
e.preventDefault();
onSubmit(e);
let aaa: string[] = [];
onSubmit(aaa);
}}
>
<input
type="text"
placeholder="여기에 메시지 입력"
value={text}
onChange={(e) => setText(e.target.value)}
value={answer}
onChange={(e) => setAnswer(e.target.value)}
/>
<button type="submit">
<IoIosPaperPlane className="send" />
Expand All @@ -46,13 +57,17 @@ const FloatingInput = ({ setMyMessage, orderNumber }: PropsType) => {
<ButtonsForm
onSubmit={(e) => {
e.preventDefault();
// console.log(e);
const formData = new FormData(e.currentTarget);
let entries = formData.entries();
let aaa: string[] = [];
for (const pair of entries) {
console.log(String(pair[0]));
setText(String(pair[0]));
aaa.push(String(pair[0]));
// setAnswer((prev: any) => [...prev, String(pair[0])]);
}
onSubmit(e);

onSubmit(aaa);
}}
>
<div className="formInner">
Expand Down Expand Up @@ -108,7 +123,7 @@ const ButtonsForm = styled.form`
.formInner {
.innerSection {
width: 380px;
width: 370px;
align-items: center;
gap: 10px;
flex-wrap: wrap;
Expand Down Expand Up @@ -165,6 +180,38 @@ const ButtonsForm = styled.form`
}
@media (max-width: 850px) {
width: 350px;
height: 130px;
font-size: 15px;
display: flex;
flex-direction: column;
justify-content: center;
.formInner {
.innerSection {
width: 300px;
gap: 8px;
}
}
label {
padding: 8px 10px;
}
button {
width: 40px;
height: 40px;
top: 0px;
right: 0px;
.send {
width: 18px;
height: 18px;
}
}
}
@media (max-width: 600px) {
width: 250px;
height: 130px;
font-size: 12px;
Expand Down
Loading

0 comments on commit 00d0215

Please sign in to comment.