[Feat] 홈페이지 외 챗봇 기능 미구현 표시

Likelion-YeungNam-Univ · Aug 17, 2023 · 45b8a5b · 45b8a5b
1 parent d01762a
commit 45b8a5b
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 22 deletions.
diff --git a/src/components/home/Chatbot.js b/src/components/home/Chatbot.js
@@ -1,5 +1,5 @@
 import { useCallback, useEffect } from 'react';
-import { useToggle } from 'react-use';
+import { useLocation, useToggle } from 'react-use';
 import { useSelector } from 'react-redux';
 
 import chatbotIcon from '@assets/util/chatbot.png';
@@ -20,6 +20,7 @@ import {
 } from '@utils/chatbot';
 
 const Chatbot = () => {
+  const { pathname } = useLocation();
   const { message, isOverlay, isSelect, isEnd, isMore } = useSelector(
     (state) => state.chatbot,
   );
@@ -37,27 +38,31 @@ const Chatbot = () => {
     }
   }, [setIsShowMessage, message]);
 
-  const detectMousePosition = useCallback((e) => {
-    // 전체 크기 구하기
-    const maxWidth = document.body.offsetWidth;
+  const detectMousePosition = useCallback(
+    (e) => {
+      // 전체 크기 구하기
+      const maxWidth = document.body.offsetWidth;
 
-    // 클릭한 요소의 상대 위치 구하기
-    const rect = e.target.getBoundingClientRect();
-    const relativeX = e.clientX - rect.left;
-    const relativeY = e.clientY - rect.top;
+      // 클릭한 요소의 상대 위치 구하기
+      const rect = e.target.getBoundingClientRect();
+      const relativeX = e.clientX - rect.left;
+      const relativeY = e.clientY - rect.top;
 
-    // 클릭한 요소의 섹션 구하기
-    const section = getSection(relativeX, maxWidth);
+      // 클릭한 요소의 섹션 구하기
+      const section = getSection(relativeX, maxWidth);
 
-    // 클릭한 요소의 요소 구하기
-    let explanation = '';
-    if (section === 1) explanation = getMessageForSectionOne(relativeY);
-    if (section === 2) explanation = getMessageForSectionTwo(relativeY);
-    if (section === 3) explanation = getMessageForSectionThree(relativeY);
+      // 클릭한 요소의 요소 구하기
+      let explanation = '';
+      if (section === 1) explanation = getMessageForSectionOne(relativeY);
+      if (section === 2)
+        explanation = getMessageForSectionTwo(relativeY, pathname);
+      if (section === 3) explanation = getMessageForSectionThree(relativeY);
 
-    // 요소에 대한 설명 출력하기
-    store.dispatch(setChatbot({ message: explanation }));
-  }, []);
+      // 요소에 대한 설명 출력하기
+      store.dispatch(setChatbot({ message: explanation }));
+    },
+    [pathname],
+  );
 
   return (
     <>

diff --git a/src/store/chatbot.js b/src/store/chatbot.js
@@ -2,7 +2,8 @@ import { createSlice } from '@reduxjs/toolkit';
 
 const START_MESSAGE = '화면 안내가 필요하신가요?';
 export const SELECT_MESSAGE = '화면에서 설명이 필요한 부분을 선택해주세요.';
-export const END_MESSAGE = '이용해주셔서 감사합니다.';
+export const END_MESSAGE =
+  'Echo Bot을 이용해주셔서 감사합니다. 궁금한 점이 있으면 언제든 이용해주세요.';
 
 const chatbotSlice = createSlice({
   name: 'chatbot',

diff --git a/src/utils/chatbot.js b/src/utils/chatbot.js
@@ -38,16 +38,20 @@ export const getMessageForSectionOne = (clickedY) => {
   return '아무것도 존재하지 않는 여백의 미 입니다. 저희 Echo SNS를 이용해 주셔서 감사합니다!';
 };
 
-export const getMessageForSectionTwo = (clickedY) => {
-  // eslint-disable-next-line no-console
-  console.log(clickedY);
+export const getMessageForSectionTwo = (clickedY, location) => {
+  if (location !== '/') {
+    return '죄송합니다. 아직까지 홈페이지 외에 정보가 부족합니다. 더 도움이 될 수 있는 Echo Bot이 되도록 노력하겠습니다.';
+  }
+
   if (clickedY >= 63 && clickedY <= 118) {
     return '게시물을 작성할 수 있는 곳으로, 클릭한 후에 간편하게 게시물을 작성할 수 있습니다.';
   }
 
   if (clickedY >= 129) {
     return '사용자가 올린 게시물입니다. 게시물의 내용부분을 클릭하면 사용자의 게시물을 자세하게 볼 수 있으며, 다른 사람들이 작성한 댓글 또한 볼 수 있습니다.';
   }
+
+  return '아무것도 존재하지 않는 여백의 미 입니다. 저희 Echo SNS를 이용해 주셔서 감사합니다!';
 };
 
 export const getMessageForSectionThree = (clickedY) => {