From c89c89ae7ef21d68281ee453ec418d89246f745d Mon Sep 17 00:00:00 2001
From: ocahs9 <piorag99@gmail.com>
Date: Fri, 11 Oct 2024 01:42:37 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=88=B4=ED=8C=81=20=EC=A7=81=EC=A0=91?=
 =?UTF-8?q?=20=EA=B5=AC=ED=98=84(+=20cursor=20=EB=AA=A8=EC=96=91=EC=9C=BC?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B0=94=EB=80=8C=EB=8F=84=EB=A1=9D=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD,=20hover=EC=8B=9C=20=ED=88=B4=ED=8C=81=20=EB=9C=A8?=
 =?UTF-8?q?=EA=B3=A0=20=EC=82=AC=EB=9D=BC=EC=A7=80=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/assets/svg/bubble_point.svg         |  5 ++
 src/components/form/Presentation/index.tsx | 69 ++++++++++++++++++----
 2 files changed, 62 insertions(+), 12 deletions(-)
 create mode 100644 public/assets/svg/bubble_point.svg

diff --git a/public/assets/svg/bubble_point.svg b/public/assets/svg/bubble_point.svg
new file mode 100644
index 00000000..3d5c0706
--- /dev/null
+++ b/public/assets/svg/bubble_point.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="14" viewBox="0 0 16 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bubble point">
+<path id="Vector 133" d="M7.61889 0.666999L0 14.0001H16L8.38111 0.666998C8.20848 0.364907 7.79152 0.364907 7.61889 0.666999Z" fill="#3F3F47"/>
+</g>
+</svg>
diff --git a/src/components/form/Presentation/index.tsx b/src/components/form/Presentation/index.tsx
index 22a66f68..91609c67 100644
--- a/src/components/form/Presentation/index.tsx
+++ b/src/components/form/Presentation/index.tsx
@@ -25,6 +25,7 @@ import JoinablePartsField from '@components/form/Presentation/JoinablePartsField
 import { IconAlertCircle } from '@sopt-makers/icons';
 import { useDialog } from '@sopt-makers/ui';
 import sopt_schedule_tooltip from 'public/assets/images/sopt_schedule_tooltip.png';
+import BubblePointIcon from 'public/assets/svg/bubble_point.svg';
 
 interface PresentationProps {
   submitButtonLabel: React.ReactNode;
@@ -86,8 +87,8 @@ function Presentation({
     type: 'default',
   };
 
-  const handleSoptScheduleOpen = () => {
-    window.innerWidth <= 768 ? open(soptScheduledialogOption) : setIsSoptScheduleOpen(true);
+  const handleSoptScheduleOpen = (isOpen: boolean) => {
+    window.innerWidth <= 768 ? open(soptScheduledialogOption) : setIsSoptScheduleOpen(isOpen);
   };
 
   useEffect(() => {
@@ -286,21 +287,27 @@ function Presentation({
               <div
                 ref={soptScheduleRef}
                 style={{ display: 'flex', gap: '4px', position: 'relative' }}
-                onClick={handleSoptScheduleOpen}
+                onMouseEnter={() => handleSoptScheduleOpen(true)}
+                onMouseLeave={() => handleSoptScheduleOpen(false)}
               >
                 <div style={{ display: 'flex', gap: '4px', marginRight: '16px' }}>
                   <SoptNotice>SOPT 공식 일정 확인하기</SoptNotice>
-                  <IconAlertCircle style={{ width: '16px', height: '16px', color: 'gray' }} />
+                  <IconAlertCircle style={{ width: '16px', height: '16px', color: 'gray', cursor: 'pointer' }} />
                 </div>
                 {isSoptScheduleOpen && (
-                  <SoptScheduleDiv>
-                    <div>• 1~8차 세미나: 2024.10.05 ~ 2024.12.28</div>
-                    <div>• 1차 행사: 2024.11.09</div>
-                    <div>• 솝커톤: 2024.11.23 ~2024.11.24</div>
-                    <div>• 기획 경선: 2024.12.14</div>
-                    <div>• 2차 행사: 2024.12.12</div>
-                    <div>• 앱잼: 2024.12.21 ~ 2025.01.25</div>
-                  </SoptScheduleDiv>
+                  <ToolTipDiv>
+                    <Pointdiv>
+                      <BubblePoint />
+                    </Pointdiv>
+                    <TextDiv>
+                      <div>• 1~8차 세미나: 2024.10.05 ~ 2024.12.28</div>
+                      <div>• 1차 행사: 2024.11.09</div>
+                      <div>• 솝커톤: 2024.11.23 ~2024.11.24</div>
+                      <div>• 기획 경선: 2024.12.14</div>
+                      <div>• 2차 행사: 2024.12.12</div>
+                      <div>• 앱잼: 2024.12.21 ~ 2025.01.25</div>
+                    </TextDiv>
+                  </ToolTipDiv>
                 )}
               </div>
               {/* TODO: SOPT 공식 일정 확인하기 TooTip 추가 */}
@@ -708,12 +715,50 @@ const ImageHelpMessage = styled('div', {
 });
 
 const SoptNotice = styled('span', {
+  cursor: 'pointer',
   display: 'inline-block',
   minWidth: '$125',
   ...fontsObject.LABEL_4_12_SB,
   color: '$gray300',
 });
 
+const ToolTipDiv = styled('div', {
+  width: '252px',
+  height: '162px',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-end',
+
+  position: 'absolute',
+  top: '$20',
+  right: '$0',
+  isolate: 'isolation',
+});
+
+const Pointdiv = styled('div', {
+  display: 'inline-flex',
+  paddingRight: '16px',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+});
+
+const BubblePoint = styled(BubblePointIcon);
+
+const TextDiv = styled('div', {
+  display: 'inline-flex',
+  padding: '16px',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'flex-start',
+  gap: '4px',
+
+  borderRadius: '10px',
+  backgroundColor: '$gray600',
+
+  color: '$gray50',
+  ...fontsObject.LABEL_4_12_SB,
+});
+
 const SoptScheduleDiv = styled('div', {
   position: 'absolute',
   top: '$20',