Skip to content

Commit a141521

Browse files
sikkzzsikkzz
committed
feat: 홈 이동 안내 팝업 모달 제작
1 parent 8173089 commit a141521

File tree

6 files changed

+126
-3
lines changed

6 files changed

+126
-3
lines changed

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
</head>
88
<body>
99
<div id="root"></div>
10+
<div id="modal"></div>
1011
<script type="module" src="/src/main.tsx"></script>
1112
</body>
1213
</html>

‎src/components/Home/Home.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
11
import styles from "@/components/Home/Home.module.scss";
2+
import HomeNavigateConfirmModal from "@/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal";
23
import IconButton from "@/components/ui/IconButton/IconButton";
34
import Text from "@/components/ui/Text/Text";
45

6+
import { useOverlay } from "@/hooks/common/useOverlay";
7+
58
const Home = () => {
9+
const { isOpen, handleClose, handleOpen } = useOverlay();
10+
611
return (
712
<div className={styles.Home}>
813
<div className={styles.HomeTitle}>
@@ -17,9 +22,11 @@ const Home = () => {
1722
<img src="/src/assets/img/img-graphic-logo.png" alt="mainLogo" />
1823
</div>
1924
<div className={styles.HomeBottom}>
20-
<IconButton text="갤러리" iconName="gallery" />
25+
<IconButton text="갤러리" iconName="gallery" onClick={handleOpen} />
2126
<IconButton text="카메라" iconName="camera" />
2227
</div>
28+
29+
<HomeNavigateConfirmModal isOpen={isOpen} handleClose={handleClose} />
2330
</div>
2431
);
2532
};

‎src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.module.scss‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
.Modal {
2+
padding: 1.875rem 1.25rem 1.25rem;
3+
4+
& > span {
5+
margin-top: 0.375rem;
6+
}
7+
}
8+
9+
.ButtonWrapper {
10+
display: flex;
11+
align-items: center;
12+
gap: 0.625rem;
13+
margin-top: 1.5rem;
14+
15+
& > button {
16+
width: 8.75rem;
17+
}
18+
}
19+
20+
.ShowButtonWrapper {
21+
display: flex;
22+
align-items: center;
23+
justify-content: center;
24+
gap: 0.375rem;
25+
margin-top: 0.75rem;
26+
27+
& > svg > path {
28+
fill: rgba(0, 0, 0, 0.15);
29+
}
30+
31+
&.isChecked {
32+
& > svg > path {
33+
fill: rgb(54, 54, 66);
34+
}
35+
}
36+
}

‎src/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import { useState } from "react";
2+
import { useNavigate } from "react-router-dom";
3+
4+
import classNames from "classnames";
5+
6+
import styles from "@/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal.module.scss";
7+
import Button from "@/components/ui/Button/Button";
8+
import Icon from "@/components/ui/Icon/Icon";
9+
import Modal from "@/components/ui/Modal/Modal";
10+
import Text from "@/components/ui/Text/Text";
11+
12+
interface HomeNavigateConfirmModalProps {
13+
isOpen: boolean;
14+
handleClose: () => void;
15+
}
16+
17+
const HomeNavigateConfirmModal = ({ isOpen, handleClose }: HomeNavigateConfirmModalProps) => {
18+
const navigate = useNavigate();
19+
20+
// 이후 상태 초기값 재설정
21+
const [isShowButtonChecked, setIsShowButtonChecked] = useState(false);
22+
23+
const handleShowButtonClick = () => {
24+
setIsShowButtonChecked((prev) => !prev);
25+
};
26+
27+
const handleNavigateHome = () => {
28+
handleClose();
29+
navigate("/");
30+
};
31+
32+
return (
33+
<Modal isOpen={isOpen}>
34+
<div className={styles.Modal}>
35+
<Text variant="titleSm" color="primary" align="center" as="h2">
36+
홈으로 가시겠어요?
37+
</Text>
38+
<Text variant="bodyM" color="secondary" align="center" as="p">
39+
복사하지 않은 리뷰는 삭제돼요.
40+
</Text>
41+
<div className={styles.ButtonWrapper}>
42+
<Button text="아니요" variant="tertiary" onClick={handleClose} />
43+
<Button text="네" variant="primary" onClick={handleNavigateHome} />
44+
</div>
45+
<div
46+
className={classNames(styles.ShowButtonWrapper, {
47+
[styles.isChecked]: isShowButtonChecked,
48+
})}
49+
onClick={handleShowButtonClick}
50+
>
51+
<Icon name="checkCircle" />
52+
<Text variant="bodyXsm" color={isShowButtonChecked ? "primary" : "tertiary"}>
53+
다시 안볼래요
54+
</Text>
55+
</div>
56+
</div>
57+
</Modal>
58+
);
59+
};
60+
61+
export default HomeNavigateConfirmModal;

‎src/components/ui/Modal/Modal.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
import type { PropsWithChildren } from "react";
22
import { useEffect } from "react";
33

4+
import styles from "@/components/ui/Modal/Modal.module.scss";
45
import Portal from "@/components/ui/Modal/Portal";
56

6-
import styles from "@/components/ui/Modal/Modal.module.css";
7-
87
interface ModalProps extends PropsWithChildren {
98
isOpen: boolean;
109
}

‎src/hooks/common/useOverlay.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import { useCallback, useState } from "react";
2+
3+
export const useOverlay = () => {
4+
const [isOpen, setIsOpen] = useState(false);
5+
6+
const handleOpen = useCallback(() => {
7+
setIsOpen(true);
8+
}, [setIsOpen]);
9+
10+
const handleClose = useCallback(() => {
11+
setIsOpen(false);
12+
}, [setIsOpen]);
13+
14+
const handleToggle = useCallback(() => {
15+
setIsOpen((prev) => !prev);
16+
}, []);
17+
18+
return { isOpen, handleOpen, handleClose, handleToggle };
19+
};

0 commit comments

Comments
 (0)