From 11beb0fba5b7f6c722d13252ed85109a7b5b7fe1 Mon Sep 17 00:00:00 2001
From: CBWDG <zaratole@naver.com>
Date: Thu, 4 Apr 2024 15:15:32 +0900
Subject: [PATCH] =?UTF-8?q?fix(#246):=20=EA=B8=B4=EA=B8=89=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/globalStyled/styled.ts  |  1 +
 .../chat-space-header/ChatSpaceHeader.tsx     | 51 +++++++++++--------
 2 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/src/components/common/globalStyled/styled.ts b/src/components/common/globalStyled/styled.ts
index fc57260..d174431 100644
--- a/src/components/common/globalStyled/styled.ts
+++ b/src/components/common/globalStyled/styled.ts
@@ -275,6 +275,7 @@ export const Tooltip = styled.div`
   width: 5vw;
   text-decoration: none;
   color: #fff;
+  z-index: 9999;
   &::after {
     content: '';
     position: absolute;
diff --git a/src/components/molecules/chat-space-elements/chat-space-header/ChatSpaceHeader.tsx b/src/components/molecules/chat-space-elements/chat-space-header/ChatSpaceHeader.tsx
index 40adaae..de2ece2 100644
--- a/src/components/molecules/chat-space-elements/chat-space-header/ChatSpaceHeader.tsx
+++ b/src/components/molecules/chat-space-elements/chat-space-header/ChatSpaceHeader.tsx
@@ -103,27 +103,36 @@ const ChatSpaceHeader = (props: {
           <span>{chatPartners?.name || ''}</span>
         </S.ChatSpaceHeaderLeft>
         <S.ChatSpaceHeaderRight>
-          <Image
-            src="https://menbosha-s3.s3.ap-northeast-2.amazonaws.com/public/chat/ChatToolTip.svg"
-            alt="Info"
-            width="28"
-            height="28"
-            onClick={handleInfoModal}
-          />
-          <Image
-            src="https://menbosha-s3.s3.ap-northeast-2.amazonaws.com/public/chat/ChatReport.svg"
-            alt="Report"
-            width="28"
-            height="28"
-            onClick={handleReportModal}
-          />
-          <Image
-            onClick={handleModal}
-            src="https://menbosha-s3.s3.ap-northeast-2.amazonaws.com/public/chat/review.svg"
-            alt="Review"
-            width="28"
-            height="28"
-          />
+          <ToolTipContainer hoverBox="image">
+            <TooltipImage
+              src="https://menbosha-s3.s3.ap-northeast-2.amazonaws.com/public/chat/ChatToolTip.svg"
+              alt="Info"
+              width="28"
+              height="28"
+              onClick={handleInfoModal}
+            />
+            <Tooltip>도움말</Tooltip>
+          </ToolTipContainer>
+          <ToolTipContainer hoverBox="image">
+            <TooltipImage
+              src="https://menbosha-s3.s3.ap-northeast-2.amazonaws.com/public/chat/ChatReport.svg"
+              alt="Report"
+              width="28"
+              height="28"
+              onClick={handleReportModal}
+            />
+            <Tooltip>신고</Tooltip>
+          </ToolTipContainer>
+          <ToolTipContainer hoverBox="image">
+            <TooltipImage
+              src="https://menbosha-s3.s3.ap-northeast-2.amazonaws.com/public/chat/review.svg"
+              alt="Review"
+              width="28"
+              height="28"
+              onClick={handleModal}
+            />
+            <Tooltip>리뷰</Tooltip>
+          </ToolTipContainer>
           {isOpenInfo && (
             <ChatInfoModal show={isOpenInfo} hide={handleInfoModal} />
           )}