✨ Add login state tooltip on chatbot button

SW13-Monstera · Oct 9, 2023 · 0c56965 · 0c56965
1 parent b49cb03
commit 0c56965
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 7 deletions.
diff --git a/packages/service/src/Component/Button/FloatingButton/index.tsx b/packages/service/src/Component/Button/FloatingButton/index.tsx
@@ -3,7 +3,13 @@ import { floatingButtonStyle } from './style.css';
 
 const FloatingButton = (props: IButton) => {
   return (
-    <button type='button' className={floatingButtonStyle} onClick={props.onClick}>
+    <button
+      type='button'
+      className={floatingButtonStyle}
+      onClick={props.onClick}
+      onMouseOver={props.onMouseOver}
+      onMouseOut={props.onMouseOut}
+    >
       {props.children}
     </button>
   );

diff --git a/packages/service/src/Organism/ChatApp/index.tsx b/packages/service/src/Organism/ChatApp/index.tsx
@@ -1,3 +1,4 @@
+import { getUserInfo } from 'auth/utils/userInfo';
 import { AxiosError } from 'axios';
 import React, { FormEvent, useEffect, useRef, useState } from 'react';
 import { useMutation } from 'react-query';
@@ -7,6 +8,7 @@ import { displayNoneStyle } from '../../styles/util.css';
 import {
   chatAppStyle,
   chatAppTitleStyle,
+  chatBotTooltipStyle,
   messageBotStyle,
   messageFormStyle,
   messageInputStyle,
@@ -89,14 +91,33 @@ const ChatApp = ({ isShown }: { isShown: boolean }) => {
   );
 };
 
+const ChatBotTooltip = ({ isShown }: { isShown: boolean }) => {
+  return <div className={isShown ? chatBotTooltipStyle : displayNoneStyle}>로그인 후 이용가능</div>;
+};
+
 const ChatBot = () => {
-  const [isShown, setIsShow] = useState(false);
+  const [isChatShown, setIsChatShow] = useState(false);
+  const [isTooltipShown, setIsTooltipShown] = useState(false);
+
   return (
     <>
-      <ChatApp isShown={isShown} />
+      <ChatApp isShown={isChatShown} />
+      <ChatBotTooltip isShown={isTooltipShown} />
       <FloatingButton
         onClick={() => {
-          setIsShow((prev) => !prev);
+          const userInfo = getUserInfo();
+          if (!userInfo) return;
+          setIsChatShow((prev) => !prev);
+        }}
+        onMouseOver={() => {
+          const userInfo = getUserInfo();
+          if (userInfo) return;
+          setIsTooltipShown(true);
+        }}
+        onMouseOut={() => {
+          const userInfo = getUserInfo();
+          if (userInfo) return;
+          setIsTooltipShown(false);
         }}
       >
         ?

diff --git a/packages/service/src/Organism/ChatApp/style.css.ts b/packages/service/src/Organism/ChatApp/style.css.ts
@@ -94,3 +94,28 @@ export const chatAppTitleStyle = style({
   marginBottom: '20px',
   fontSize: '1.125rem',
 });
+
+export const chatBotTooltipStyle = style({
+  position: 'fixed',
+  bottom: '90px',
+  right: '0px',
+  float: 'right',
+  marginRight: '30px',
+  padding: '8px',
+  borderRadius: '5px',
+  zIndex: '30',
+  backgroundColor: COLOR.BACKGROUND.BLUE,
+  color: COLOR.TEXT[5],
+  opacity: 0.7,
+  '::before': {
+    content: '',
+    position: 'absolute',
+    borderTop: `9px solid ${COLOR.BACKGROUND.BLUE}`,
+    borderLeft: '9px solid transparent',
+    borderRight: '9px solid transparent',
+    borderBottom: '9px solid transparent',
+    bottom: '-18px',
+    right: '0px',
+    opacity: 0.7,
+  },
+});
diff --git a/packages/service/src/types/button.ts b/packages/service/src/types/button.ts
@@ -6,6 +6,8 @@ export interface IButton {
   theme?: TButtonTheme;
   size?: TButtonSize;
   onClick?: MouseEventHandler<HTMLButtonElement>;
+  onMouseOver?: MouseEventHandler<HTMLButtonElement>;
+  onMouseOut?: MouseEventHandler<HTMLButtonElement>;
   className?: string;
 }
 
@@ -17,15 +19,15 @@ export interface IButtonDetail extends IButton {
 
 export const BUTTON_TYPE = { SUBMIT: 'submit', BUTTON: 'button', RESET: 'reset' } as const;
 
-export type TButtonType = typeof BUTTON_TYPE[keyof typeof BUTTON_TYPE];
+export type TButtonType = (typeof BUTTON_TYPE)[keyof typeof BUTTON_TYPE];
 
 export const BUTTON_THEME = {
   PRIMARY: 'primary',
   SECONDARY: 'secondary',
   TERTIARY: 'tertiary',
 } as const;
 
-export type TButtonTheme = typeof BUTTON_THEME[keyof typeof BUTTON_THEME];
+export type TButtonTheme = (typeof BUTTON_THEME)[keyof typeof BUTTON_THEME];
 
 export const BUTTON_SIZE = {
   LARGE: 'large',
@@ -34,7 +36,7 @@ export const BUTTON_SIZE = {
   SMALL: 'small',
 } as const;
 
-export type TButtonSize = typeof BUTTON_SIZE[keyof typeof BUTTON_SIZE];
+export type TButtonSize = (typeof BUTTON_SIZE)[keyof typeof BUTTON_SIZE];
 
 export interface ICustomButton {
   onClick?: MouseEventHandler<HTMLButtonElement>;