툴팁 디자인 QA 반영 (#920)

* feat: 툴팁 직접 구현(+ cursor 모양으로 바뀌도록 변경, hover시 툴팁 뜨고 사라지도록 구현) * sopt-makers 패키지(ui,colors) 업데이트 * feat: backgroundDimmed 정상 반영 - @sopt-makers/ui 최신화 반영
sopt-makers · Oct 11, 2024 · 9fd094e · 9fd094e
1 parent f224e59
commit 9fd094e
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 25 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/package.json b/package.json
@@ -27,11 +27,11 @@
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-popover": "^1.1.1",
     "@sentry/nextjs": "^7.51.0",
-    "@sopt-makers/colors": "^3.0.1",
+    "@sopt-makers/colors": "^3.0.2",
     "@sopt-makers/fonts": "^2.0.1",
     "@sopt-makers/icons": "^1.0.5",
     "@sopt-makers/playground-common": "^1.5.2",
-    "@sopt-makers/ui": "^2.3.1",
+    "@sopt-makers/ui": "^2.4.2",
     "@stitches/react": "^1.2.8",
     "@tanstack/react-query": "^4.10.3",
     "@types/autosize": "^4.0.3",

diff --git a/public/assets/svg/bubble_point.svg b/public/assets/svg/bubble_point.svg
diff --git 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',

diff --git a/yarn.lock b/yarn.lock
@@ -6741,10 +6741,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sopt-makers/colors@npm:^3.0.1":
-  version: 3.0.1
-  resolution: "@sopt-makers/colors@npm:3.0.1"
-  checksum: 10c0/c02d2eeb4e12d22150e65493055323cc5040ef3ed7e7b10609b3afe9a543e436e71bb0149701dfc0d8b4f027f265f993e86b7ba4e73efca940d2308e35d7834c
+"@sopt-makers/colors@npm:^3.0.2":
+  version: 3.0.2
+  resolution: "@sopt-makers/colors@npm:3.0.2"
+  checksum: 10c0/f055a3f9f1b61601b0819751f3153f77f23013d5c388156267d0f87816810c48570058c335be56bb35c6907ad6cbcbe98c882da6778b8f30a9dc59aa2d9912d5
   languageName: node
   linkType: hard
 
@@ -6781,13 +6781,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sopt-makers/ui@npm:^2.3.1":
-  version: 2.3.1
-  resolution: "@sopt-makers/ui@npm:2.3.1"
+"@sopt-makers/ui@npm:^2.4.2":
+  version: 2.4.2
+  resolution: "@sopt-makers/ui@npm:2.4.2"
   dependencies:
     "@radix-ui/react-dialog": "npm:^1.0.5"
     "@radix-ui/react-switch": "npm:^1.0.3"
-    "@sopt-makers/colors": "npm:^3.0.1"
+    "@sopt-makers/colors": "npm:^3.0.2"
     "@sopt-makers/fonts": "npm:^2.0.1"
     "@sopt-makers/icons": "npm:^1.0.5"
     "@vanilla-extract/css": "npm:^1.14.0"
@@ -6796,7 +6796,7 @@ __metadata:
   peerDependencies:
     react: ^18.2.0
     react-dom: ^18.2.0
-  checksum: 10c0/cb7c9de1f0d15e193d2c935b4e339c50a4eb7b31b2a701a0a68fc189c79dc8094498e887b61c88837a2f73c5542fadbdc5bbb41882f3faeca0c83df1f8545b32
+  checksum: 10c0/05921a1b83e3ee5828627724e42b9eb98c6f07ce65e9be436cd2cbf0e60990a19495dd249b6c4b75a02d888916d3e55ac50a16b2c28361d1a71fbb8d5b09910a
   languageName: node
   linkType: hard
 
@@ -20699,11 +20699,11 @@ __metadata:
     "@radix-ui/react-dropdown-menu": "npm:^2.1.1"
     "@radix-ui/react-popover": "npm:^1.1.1"
     "@sentry/nextjs": "npm:^7.51.0"
-    "@sopt-makers/colors": "npm:^3.0.1"
+    "@sopt-makers/colors": "npm:^3.0.2"
     "@sopt-makers/fonts": "npm:^2.0.1"
     "@sopt-makers/icons": "npm:^1.0.5"
     "@sopt-makers/playground-common": "npm:^1.5.2"
-    "@sopt-makers/ui": "npm:^2.3.1"
+    "@sopt-makers/ui": "npm:^2.4.2"
     "@stitches/react": "npm:^1.2.8"
     "@storybook/addon-essentials": "npm:^8.1.11"
     "@storybook/addon-interactions": "npm:^8.1.11"