[2nd Project] 자바스크립트와 JSP로 챗봇 만들기

사람의 욕심은 끝이 없고~

 

계속 볼수록 수정사항이 생기는 CSS

 

네 마이페이지 홈이구여! 
네비바 누르면 각 탭으로 이동되게 해놨습니다. 근데 페이지가 너무 정적이라서 촌스러워가지고 

이거 어떻게 해야하나 고민하던 중 챗봇을 하면 어떨까 생각했다. 

 

숙슉 말풍선이 나오니까 꽤 동적인 요소이고, 자바스크립트로 충분히 구현이 가능하다니까 3시간 잡고 해봤다.

 

지선생님과 함께 자바스크립트 공부를 하면서 했기 때문에 더디고 조금 시간이 걸렸다.

 

아 마이페이지 닉네임이 왜 일론머스크냐고요?

일론머스크가 되고 싶어하는 ...염소의 영감을 잔뜩 받았어요(ㅋㅋㅋㅋ)

무튼 완성본 먼저

 

 

 

 

이렇게 해당 카테고리를 누르면

하위 컨텐츠가 나오고 

해당하는 질문을 클릭해서 답변을 볼 수 있다.

 

 

---

 

 

코드 리뷰를 해보겠습니다. 

 

🩰sendFAQ

function sendFAQ(question) {
    // 사용자의 질문을 대화창에 추가
    addMessage(question, "answer"); // "answer" 타입으로 사용자의 질문을 추가

    const answerText = getAnswer(question); // getAnswer 함수를 호출해 답변 텍스트 가져오기
    setTimeout(() => addMessage(answerText, "question"), 500); // 500ms 지연 후 "question" 타입으로 챗봇 답변 추가
}

addMessage(question, "answer")

사용자가 클릭한 질문을 answer 타입으로 대화창에 추가한다.

addMessage는 메세지를 화면에 출력해주는 함수로 (text, type)을 받는다.

text는 대화창에 표시될 텍스트이고 여기서는 사용자가 FAQ버튼을 통해 선택한 질문인 Question을 전달.

getAnswer(question)

getAnswer 함수에서 해당 질문에 맞는 답변을 가져옴

이 함수가 사용자가 선택한 질문을 분석하여 해당 질문에 맞는 답변을 반환하는 함수이다. 

setTimeout(() => addMessage(answerText, "question"), 500)

0.5초 지연 후 챗봇의 답변을 question 타입으로 대화창에 추가

 

() => addMessage(answerText, "question")

화살표 함수는 addMessage 함수를 호출하면서 answerText와 "question"을 인자로 전달

 

 

🩰 showSubButtons

function showSubButtons(category) {
    let messageText = "";

    // 카테고리 종류에 따라 하위 질문 버튼과 안내 메시지 표시
    if (category === 'account') {
        messageText = "계정/로그인 관련 질문을 선택해 주세요.";
        addMessage(messageText, "question");

        const buttons = [
            { text: "회원가입", action: "회원가입 하는 방법" },
            { text: "탈퇴", action: "탈퇴하는 방법" },
            { text: "로그인 유형", action: "로그인 유형" },
            { text: "아이디/비밀번호 찾기", action: "아이디/비밀번호 찾기" }
        ];
        addButtons(buttons); // 버튼 목록을 대화창에 추가
    } else if (category === 'schedule') {
        messageText = "여행일정 관련 질문을 선택해 주세요.";
        addMessage(messageText, "question");

        const buttons = [
            { text: "일정 추가 방법", action: "일정 추가 방법" },
            { text: "일정 삭제 방법", action: "일정 삭제 방법" },
            { text: "일정 공유 방법", action: "일정 공유 방법" }
        ];
        addButtons(buttons);
    } else if (category === 'community') {
        messageText = "커뮤니티 관련 질문을 선택해 주세요.";
        addMessage(messageText, "question");

        const buttons = [
            { text: "커뮤니티 이용 방법", action: "커뮤니티 이용 방법" },
            { text: "커뮤니티 매너", action: "커뮤니티 매너" }
        ];
        addButtons(buttons);
    }
}

category에 따라 하위 질문 버튼과 안내 메시지를 다르게 표시

각 카테고리마다 messageText에 안내 메시지를 설정하고 addMessage로 대화창에 추가

buttons 배열에는 하위 질문 버튼 목록이 포함되며, text와 action으로 구성

addButtons(buttons)

각 버튼을 addButtons 함수에서 생성하여 대화창에 표시

 

buttons 배열

text: 버튼에 표시될 텍스트

action: 해당 버튼이 클릭될 때 sendFAQ 함수에 전달될 질문 내용

 

 

🩰 addButtons

function addButtons(buttons) {
    const chatContent = document.getElementById("chatContent");

    // 버튼 컨테이너 생성
    const buttonContainer = document.createElement("div");
    buttonContainer.classList.add("message", "buttons");

    buttons.forEach(btn => {
        const button = document.createElement("button");
        button.innerText = btn.text; // 버튼 텍스트 설정
        button.onclick = () => sendFAQ(btn.action); // 클릭 시 FAQ 전송
        buttonContainer.appendChild(button); // 컨테이너에 버튼 추가
    });

    // 뒤로 가기 버튼 추가
    const backButton = document.createElement("button");
    backButton.innerText = "뒤로";
    backButton.onclick = goBackToMain;
    buttonContainer.appendChild(backButton);

    // 대화창에 버튼 메시지 추가
    chatContent.appendChild(buttonContainer);
    chatContent.scrollTop = chatContent.scrollHeight;
}

buttonContainer를 생성해 버튼들을 담을 컨테이너 역할
buttons.forEach를 통해 버튼 하나하나를 생성하고 innerText로 텍스트를 설정
button.onclick = () => sendFAQ(btn.action) 

버튼 클릭 시 sendFAQ 함수가 실행되어 질문이 전송

마지막으로 뒤로 버튼을 추가하여 클릭 시 goBackToMain 함수가 실행

 

addButtons(buttons)
이 함수는 buttons라는 매개변수를 받음

buttons는 객체 배열로, 각 객체는 하위 질문 버튼의 text와 action을 포함

 

const chatContent = document.getElementById("chatContent");

 chatContent는 대화 내용을 담고 있는 HTML 요소로, 버튼 목록을 이 요소에 추가

 

buttonContainer.appendChild(backButton); buttonContainer에 뒤로 버튼을 추가

 

🩰 goBackToMain

function goBackToMain() {
    addMessage("이전으로 돌아갑니다.", "question");

    const chatContent = document.getElementById("chatContent");

    // 버튼 컨테이너 생성
    const buttonContainer = document.createElement("div");
    buttonContainer.classList.add("message", "buttons");

    // 메인 메뉴 버튼 생성
    const accountButton = document.createElement("button");
    accountButton.innerText = "계정/로그인";
    accountButton.onclick = () => showSubButtons('account');
    buttonContainer.appendChild(accountButton);

    const scheduleButton = document.createElement("button");
    scheduleButton.innerText = "여행일정";
    scheduleButton.onclick = () => showSubButtons('schedule');
    buttonContainer.appendChild(scheduleButton);

    const communityButton = document.createElement("button");
    communityButton.innerText = "커뮤니티";
    communityButton.onclick = () => showSubButtons('community');
    buttonContainer.appendChild(communityButton);

    chatContent.appendChild(buttonContainer);
    chatContent.scrollTop = chatContent.scrollHeight;
}

addMessage("이전으로 돌아갑니다.", "question") 뒤로 이동할 때 메시지를 표시
buttonContainer를 생성하고, 계정/로그인, 여행일정, 커뮤니티 버튼을 개별적으로 추가
각 버튼의 onclick 이벤트를 통해 showSubButtons 함수를 호출해 하위 질문 버튼을 표시

 

document.createElement("button")을 사용해 새로운 <button> 요소를 생성

 

 

🩰 sendMessage

function sendMessage() {
    const userInput = document.getElementById("userInput");
    const messageText = userInput.value.trim();

    if (messageText) {
        addMessage(messageText, "answer");

        setTimeout(() => {
            const answerText = getAnswer(messageText);
            addMessage(answerText, "question");
        }, 500);

        userInput.value = ""; // 입력란 비우기
    }
}

userInput.value.trim()으로 사용자가 입력한 메시지에서 공백을 제거한 텍스트를 가져온다

 

 

🩰 handleKeyPress

function handleKeyPress(event) {
    if (event.key === "Enter") {
        sendMessage();
    }
}

event.key가 "Enter"일 경우 sendMessage 함수를 호출해 메시지를 전송

 

 

🩰 addMessage

function addMessage(text, type) {
    const chatContent = document.getElementById("chatContent");
    const message = document.createElement("div");
    message.classList.add("message", type);
    message.innerText = text;
    chatContent.appendChild(message);

    chatContent.scrollTop = chatContent.scrollHeight; // 스크롤을 맨 아래로 이동
}

 

🩰 getAnswer

function getAnswer(question) {
    if (question.includes("회원가입")) {
        return "홈페이지 화면 좌측상단에 회원가입 버튼을 통해 가능하며, 약관 동의 및 정보입력 해주시면 가입이 완료됩니다.";
    } else if (question.includes("탈퇴")) {
        return "마이페이지 > 프로필 편집 > 회원탈퇴 버튼을 통해 탈퇴가 가능합니다.";
    } // 추가 질문과 답변들
    else {
        return "죄송합니다. 해당 질문에 대한 답변을 찾을 수 없습니다.";
    }
}

사용자의 질문을 includes로 검사하여 특정 키워드를 포함할 경우 해당 키워드에 맞는 답변을 반환

 

 

 

이렇게 깜짝으로 구현한 나의 챗봇은 나의 귀한 자산이 되었다.

오늘도 알찬 토요일이었다. 데헷 

재밌다. 해햇 자바스크립트 만만세