📝 한양 챗봇 프론트엔드 초기구성

[taeuk-gang]

[+기능] 다국어 처리 기능 구현

• i18next 모듈 추가
• src/_locales/ko.js 에서 언어 KEY : VALUE 등록 (현재는 한국어만 처리)

# 파일 예시
export default {
	APP_NAME: `한양 챗봇`,
}

• JS 사용법 : i18next.t(KEY)를 이용하여, 다국어 처리

# 예시
alert(i18next.t(`NO_IMPLEMENT`))

• HTML 사용법 : 엘리멘트에서 i18n-content라는 attribute를 사용하여 다국어 처리
• 구현 파일위치 : src/common/i18n-contents.js

# 예시
<title i18n-content="APP_NAME"></title>	

[+기능] 웹컴포넌트 사용

• 자세한 사항은 웹컴포넌트 참고1, 웹컴포넌트 참고2, 웹컴포넌트 참고3

[+기능] 채팅창 상단부분 구현

채팅창 상단	설명
	- 봇의 프로필 사진 - 봇 이름 - 대화내용 검색 - 알람 버튼 - 메뉴 버튼 총 5가지의 UI 구성

[+기능] 대화 말풍선 구현

대화 말풍선	설명
	대화내용 말풍선(상대방(봇)과 나) 구현

[+기능] 내 말풍선 표시 및 스크롤 마지막 위치부터 시작

• 새로운 대화내용(말풍선)이 표시되면, 자동으로 스크롤 끝으로 이동
• 위치: <chat-window>의 scrollToLast()

[+기능] 페이지 로딩/ 라이브 스크립트/ 상단 우측 메뉴버튼 기능 추가

페이지 로딩	설명
	- 챗봇 로딩

라이브 스크립트 적용	설명
	- 라이브 스크립트 위치

# <script src="https://unpkg.com/rivescript@latest/dist/rivescript.min.js"></script> index.html CDN 삽입

# 라이브 스크립트 객체 생성
this.bot = new RiveScript()
# 개별파일(hy-lion.rive) 호출
this.bot.loadFile(`/hanyang-chatbot/src/libs/hy-lion.rive`).then(this.loading_done.bind(this)).catch(this.loading_error)

function loading_done() {
        # 봇 이름
	const username = `hy-lion`
        # 보낼 텍스트
	const sendText = `hello`

	this.bot.sortReplies()		

        # 텍스트를 보내고, 라이브 스크립트 설정된 코드에 의해 응답받음
	this.bot.reply(username, sendText).then(reply => {
                # <chat-window-body>의 reply 임 - 봇 말풍선 띄우기
		this.reply(reply)
	})
}

function loading_error(error) {
	throw new Error(`Error when loading files: ${error}`)
}

상단 메뉴	설명
	- 상단 메뉴 클릭/호버 처리 - 메뉴가 아닌 곳 클릭시 메뉴창 닫기

[+기능] 봇 커스텀 설정창과 채팅창 서로 전환 가능(라우팅)

봇 설정 메뉴로 이동	설명
	- 채팅창 > 봇 설정 메뉴로 이동

[+기능] 봇설정 - 라이브 스크립트 읽기 추가

BEFORE	AFTER

🐛 버그 리포트

• [-/+수정] 채팅을 길게 작성시, 가로스크롤이 생기는 현상 수정
• [-/+수정] 대화창의 폭이 200px밑으로 내려가면 말풍선 폭 보기안좋은 문제 해결