diff --git a/packages/service/src/Component/Button/FloatingButton/index.tsx b/packages/service/src/Component/Button/FloatingButton/index.tsx index 29410b36..f42b8909 100644 --- 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 ( - ); diff --git a/packages/service/src/Organism/ChatApp/index.tsx b/packages/service/src/Organism/ChatApp/index.tsx index 416e1232..a0bdae3b 100644 --- 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
로그인 후 이용가능
; +}; + const ChatBot = () => { - const [isShown, setIsShow] = useState(false); + const [isChatShown, setIsChatShow] = useState(false); + const [isTooltipShown, setIsTooltipShown] = useState(false); + return ( <> - + + { - 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 index 02d3fde7..b6d29803 100644 --- 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 index 5eccbac4..11e2f68a 100644 --- 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; + onMouseOver?: MouseEventHandler; + onMouseOut?: MouseEventHandler; className?: string; } @@ -17,7 +19,7 @@ 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', @@ -25,7 +27,7 @@ export const BUTTON_THEME = { 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;