chatbot2 [react-chatbot-kit] 챗봇 구현하기 - 3 이전 글 : 2022.06.09 - [react-chatbot-kit] 챗봇 구현하기 - 2 챗봇 스타일링하기 🌮 기본 구조 파악하기 초기 상태의 챗봇은 요렇게 생겼다. 스타일해줄 부분을 정리해보면 다음과 같다. 챗봇 화면 자체 위치 헤더 챗봇 프로필 아이콘 챗봇 메세지 사용자 프로필 아이콘 사용자 메세지 메세지 입력 창 보내기 버튼 처음부터 뜯어보면서 차근차근 스타일링해보자! 🌮 챗봇 화면 자체 위치 조정 챗봇 화면 위치의 경우 거의 화면 오른쪽 하단에 고정된 것을 많이 볼 수 있다. 나도 그렇게 해 줄 예정이다! 공식문서의 Customizing CSS 파트를 참고하면 스타일링할 클래스들의 이름을 쉽게 찾을 수 있다. styles 폴더에 chatbot.css 파일을 추가해 복사 붙여 넣기 해주자. /*.. 2022. 6. 9. [react-chatbot-kit] 챗봇 구현하기 - 2 이전 글 : 2022.06.07 - [react-chatbot-kit] 챗봇 구현하기 - 1 챗봇 테스트해보기 🥪 react-chatbot-kit 라이브러리 설치하기 npm install react-chatbot-kit 🥪 필요한 파일들 생성하기 챗봇을 사용하기 위해 필요한 파일 세 개를 만들어보자! 먼저 루트 디렉토리에 bot 폴더를 만들어 하위에 필요한 파일들을 만들어줄 것이다. 왼쪽과 같이 ActionProvider.js, config.js, MessageParser.js 파일을 생성해준다. 공식 문서를 참고해 파일들의 기본적인 내용을 채워준다.(MessageParser.js 파일의 경우 공식 문서에서 export default 부분이 누락되어있다.) // bot/ActionProvider.js c.. 2022. 6. 9. 이전 1 다음
