Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

툴팁 디자인 QA 반영 #920

Merged
merged 3 commits into from
Oct 11, 2024
Merged

툴팁 디자인 QA 반영 #920

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c89c89a
feat: 툴팁 직접 구현(+ cursor 모양으로 바뀌도록 변경, hover시 툴팁 뜨고 사라지도록 구현)
ocahs9 Oct 10, 2024
96e6ad1
sopt-makers 패키지(ui,colors) 업데이트
ocahs9 Oct 10, 2024
167fc00
feat: backgroundDimmed 정상 반영 - @sopt-makers/ui 최신화 반영
ocahs9 Oct 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified .yarn/install-state.gz
View file
Open in desktop
Binary file not shown.
4 changes: 2 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
5 changes: 5 additions & 0 deletions public/assets/svg/bubble_point.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
69 changes: 57 additions & 12 deletions src/components/form/Presentation/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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(() => {
Expand Down Expand Up @@ -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 추가 */}
Expand Down Expand Up @@ -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',
Expand Down
22 changes: 11 additions & 11 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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"
Expand All @@ -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

Expand Down Expand Up @@ -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"
Expand Down
Loading