From 6232b21dfcfedefd035cdf85368cfb6443a5faac Mon Sep 17 00:00:00 2001 From: kimhyunjo Date: Fri, 15 Sep 2023 22:37:27 +0900 Subject: [PATCH 01/18] :pencil2: Fix type type --- packages/service/src/Component/Utils/DefaultSelect/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/service/src/Component/Utils/DefaultSelect/index.tsx b/packages/service/src/Component/Utils/DefaultSelect/index.tsx index c14b9395..7de6ce64 100644 --- a/packages/service/src/Component/Utils/DefaultSelect/index.tsx +++ b/packages/service/src/Component/Utils/DefaultSelect/index.tsx @@ -56,7 +56,7 @@ export const DefaultSelect = ({ }, })} defaultValue={defaultValue} - onChange={(e: MultiValue | SingleValue) => { + onChange={(e) => { onChange(e); if (isMulti) setSelectedOptions(e); }} @@ -85,7 +85,7 @@ export const DefaultSelect = ({ neutral90: themeColors.text[5], }, })} - onChange={(e: MultiValue | SingleValue) => { + onChange={(e) => { onChange(e); if (isMulti) setSelectedOptions(e); }} From 51c19f16ec1131691e145d0a802ba7ae28f50d9d Mon Sep 17 00:00:00 2001 From: kimhyunjo Date: Sun, 17 Sep 2023 22:54:15 +0900 Subject: [PATCH 02/18] :sparkles: Add chat app UI --- .../Component/Button/FloatingButton/index.tsx | 10 ++ .../Button/FloatingButton/style.css.ts | 17 ++++ .../service/src/Organism/ChatApp/index.tsx | 84 ++++++++++++++++ .../service/src/Organism/ChatApp/style.css.ts | 96 +++++++++++++++++++ .../src/Template/PageTemplate/index.tsx | 4 + 5 files changed, 211 insertions(+) create mode 100644 packages/service/src/Component/Button/FloatingButton/index.tsx create mode 100644 packages/service/src/Component/Button/FloatingButton/style.css.ts create mode 100644 packages/service/src/Organism/ChatApp/index.tsx create mode 100644 packages/service/src/Organism/ChatApp/style.css.ts diff --git a/packages/service/src/Component/Button/FloatingButton/index.tsx b/packages/service/src/Component/Button/FloatingButton/index.tsx new file mode 100644 index 00000000..5f037549 --- /dev/null +++ b/packages/service/src/Component/Button/FloatingButton/index.tsx @@ -0,0 +1,10 @@ +import { floatingButtonStyle } from './style.css'; + +const FloatingButton = () => { + return ( + + ); +}; +export default FloatingButton; diff --git a/packages/service/src/Component/Button/FloatingButton/style.css.ts b/packages/service/src/Component/Button/FloatingButton/style.css.ts new file mode 100644 index 00000000..9f3384aa --- /dev/null +++ b/packages/service/src/Component/Button/FloatingButton/style.css.ts @@ -0,0 +1,17 @@ +import { style } from '@vanilla-extract/css'; + +export const floatingButtonStyle = style({ + position: 'fixed', + display: 'flex', + alignItems: 'center', + WebkitBoxPack: 'center', + justifyContent: 'center', + width: '56px', + height: '56px', + cursor: 'pointer', + borderRadius: '24px', + transition: 'visibility 400ms ease 0s', + background: 'linear-gradient(rgb(104, 97, 236) 0%, rgb(127, 97, 236) 100%)', + boxShadow: + 'rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.1) 0px 4px 6px, rgba(0, 0, 0,0)', +}); diff --git a/packages/service/src/Organism/ChatApp/index.tsx b/packages/service/src/Organism/ChatApp/index.tsx new file mode 100644 index 00000000..cacd372e --- /dev/null +++ b/packages/service/src/Organism/ChatApp/index.tsx @@ -0,0 +1,84 @@ +import React, { FormEvent, useEffect, useRef, useState } from 'react'; +import { + chatAppStyle, + chatAppTitleStyle, + messageBotStyle, + messageFormStyle, + messageInputStyle, + messageListStyle, + messageSubmitButtonStyle, + messageUserStyle, +} from './style.css'; + +interface IMessage { + text: string; + isUser: boolean; +} + +const Message = ({ text, isUser }: IMessage) => ( +
{text}
+); + +const MessageList = ({ messages }: { messages: IMessage[] }) => { + const scrollRef = useRef(null); + + useEffect(() => { + scrollRef.current?.scrollIntoView({ behavior: 'smooth' }); + }, [messages]); + return ( +
+ {messages.map((message, index) => ( + + ))} +
+
+ ); +}; + +const MessageInput = ({ onSendMessage }: { onSendMessage: (text: string) => void }) => { + const [text, setText] = useState(''); + + const handleSubmit = (e: FormEvent) => { + e.preventDefault(); + if (text.trim() !== '') { + onSendMessage(text); + setText(''); + } + }; + + return ( +
+ setText(e.target.value)} + className={messageInputStyle} + /> + +
+ ); +}; + +const ChatApp = () => { + const [messages, setMessages] = useState([]); + + const handleSendMessage = (text: string) => { + setMessages((prev) => [...prev, { text, isUser: true }]); + setTimeout(() => { + setMessages((prev) => [...prev, { text: '안녕하세요! 저는 챗봇입니다.', isUser: false }]); + }, 3000); + }; + + return ( +
+

챗봇에게 궁금한 점을 물어보세요!

+ + +
+ ); +}; + +export default ChatApp; diff --git a/packages/service/src/Organism/ChatApp/style.css.ts b/packages/service/src/Organism/ChatApp/style.css.ts new file mode 100644 index 00000000..fbd6c194 --- /dev/null +++ b/packages/service/src/Organism/ChatApp/style.css.ts @@ -0,0 +1,96 @@ +import { style } from '@vanilla-extract/css'; +import { COLOR } from '../../constants/color'; +import { themeColors } from '../../styles/theme.css'; + +export const messageBaseStyle = style({ + position: 'relative', + margin: '0 16px 20px 16px', + maxHeight: '200px', + padding: '8px', + borderRadius: '4px', +}); + +export const messageBotStyle = style([ + messageBaseStyle, + { + backgroundColor: themeColors.background.F0, + color: themeColors.text[1], + '::before': { + content: '', + position: 'absolute', + borderTop: '9px solid transparent', + borderLeft: '9px solid transparent', + borderRight: `9px solid ${themeColors.background.F0}`, + borderBottom: '9px solid transparent', + top: '3px', + left: '-17px', + }, + }, +]); + +export const messageUserStyle = style([ + messageBaseStyle, + { + backgroundColor: themeColors.text[2], + color: themeColors.background.F0, + '::before': { + content: '', + position: 'absolute', + borderTop: '9px solid transparent', + borderLeft: `9px solid ${themeColors.text[2]}`, + borderRight: '9px solid transparent', + borderBottom: '9px solid transparent', + bottom: '3px', + right: '-17px', + }, + }, +]); + +export const messageListStyle = style({ + marginBottom: '20px', + overflowX: 'hidden', + overflowY: 'auto', + height: '190px', +}); + +export const messageFormStyle = style({ + display: 'flex', +}); + +export const messageInputStyle = style({ + flexGrow: 1, + padding: '10px', + border: '1px solid #ccc', + borderRadius: '5px', + marginRight: '10px', +}); + +export const messageSubmitButtonStyle = style({ + padding: '10px 20px', + backgroundColor: COLOR.PRIMARY, + border: 'none', + borderRadius: '5px', + color: themeColors.background.F0, + cursor: 'pointer', +}); + +export const chatAppStyle = style({ + position: 'fixed', + bottom: '80px', + right: '20px', + float: 'right', + maxWidth: '400px', + height: '300px', + marginRight: '30px', + padding: '20px', + border: '1px solid #ccc', + borderRadius: '5px', + zIndex: '10', + backgroundColor: themeColors.background.FF, +}); + +export const chatAppTitleStyle = style({ + textAlign: 'center', + marginBottom: '20px', + fontSize: '1.125rem', +}); diff --git a/packages/service/src/Template/PageTemplate/index.tsx b/packages/service/src/Template/PageTemplate/index.tsx index 47628ae1..32977f95 100644 --- a/packages/service/src/Template/PageTemplate/index.tsx +++ b/packages/service/src/Template/PageTemplate/index.tsx @@ -1,5 +1,7 @@ import { Outlet } from 'react-router-dom'; import { Header, Footer } from '../'; +import FloatingButton from '../../Component/Button/FloatingButton'; +import ChatApp from '../../Organism/ChatApp'; import { mainStyle } from './style.css'; function PageTemplate() { @@ -9,6 +11,8 @@ function PageTemplate() {
+ +