Add CloseIntelligenceModal

frontend/src/components/editor/YorkieIntelligenceFeature.tsx

@@ -60,7 +60,6 @@ function YorkieIntelligenceFeature(props: YorkieIntelligenceFeatureProps) {
 	);
 	const data = useMemo(() => followUpData || featureData, [featureData, followUpData]);
 	const { enqueueSnackbar } = useSnackbar();
-	const featureCardRef = useRef<HTMLDivElement>(null);
 	const markdownPreviewRef = useRef<HTMLElement>(null);
 	const formContext = useForm<{ content: string }>();
 	const { reset, formState } = formContext;
@@ -82,16 +81,11 @@ function YorkieIntelligenceFeature(props: YorkieIntelligenceFeatureProps) {
 	}, [content, mutateIntelligenceFeature]);
 
 	useEffect(() => {
-		if (data && markdownPreviewRef.current && featureCardRef.current) {
+		if (data && markdownPreviewRef.current) {
 			markdownPreviewRef.current.scrollTo({
 				behavior: "smooth",
 				top: markdownPreviewRef.current.scrollHeight,
 			});
-			featureCardRef.current.scrollIntoView({
-				block: "nearest",
-				inline: "nearest",
-				behavior: "smooth",
-			});
 		}
 	}, [data]);
 
@@ -144,7 +138,7 @@ function YorkieIntelligenceFeature(props: YorkieIntelligenceFeatureProps) {
 	};
 
 	return (
-		<Stack gap={4} ref={featureCardRef}>
+		<Stack gap={4}>
 			<Box bgcolor={theme.palette.grey[200]} p={1} borderRadius={2}>
 				<Typography>{title}</Typography>
 			</Box>

frontend/src/components/editor/YorkieIntelligenceFooter.tsx

@@ -1,10 +1,11 @@
-import { Box, Card, Fade, Popover, useTheme } from "@mui/material";
+import { Box, Card, Popover, useTheme } from "@mui/material";
 import YorkieIntelligenceFeatureList from "./YorkieIntelligenceFeatureList";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { IntelligenceFeature } from "../../constants/intelligence";
 import YorkieIntelligenceFeature from "./YorkieIntelligenceFeature";
 import { useSelector } from "react-redux";
 import { selectEditor } from "../../store/editorSlice";
+import CloseIntelligenceModal from "../modals/CloseIntelligenceModal";
 
 interface YorkieIntelligenceFooterProps {
 	onClose: () => void;
@@ -18,15 +19,13 @@ function YorkieIntelligenceFooter(props: YorkieIntelligenceFooterProps) {
 	const [selectedTitle, setSelectedTitle] = useState<string | null>(null);
 	const [selectedFeature, setSelectedFeature] = useState<IntelligenceFeature | null>(null);
 	const [anchorEl, setAnchorEl] = useState<HTMLSpanElement>();
-	const handleSelectFeature = (feature: IntelligenceFeature, title: string) => {
-		setSelectedFeature(feature);
-		setSelectedTitle(title);
-	};
+	const [closeModalOpen, setCloseModalOpen] = useState(false);
+	const cardRef = useRef<HTMLDivElement>(null);
+
 	const width = useMemo(
 		() => editorStore.cmView!.contentDOM.getBoundingClientRect().width - 12,
 		[editorStore.cmView]
 	);
-	console.log(width);
 
 	useEffect(() => {
 		if (!anchorRef.current) return;
@@ -38,6 +37,15 @@ function YorkieIntelligenceFooter(props: YorkieIntelligenceFooterProps) {
 		};
 	}, [anchorRef.current]);
 
+	const handleSelectFeature = (feature: IntelligenceFeature, title: string) => {
+		setSelectedFeature(feature);
+		setSelectedTitle(title);
+	};
+
+	const handleCloseModalOpen = () => {
+		setCloseModalOpen((prev) => !prev);
+	};
+
 	return (
 		<Box
 			sx={{
@@ -62,8 +70,12 @@ function YorkieIntelligenceFooter(props: YorkieIntelligenceFooterProps) {
 					vertical: "top",
 					horizontal: "left",
 				}}
+				onClose={handleCloseModalOpen}
+				disableScrollLock
+				disablePortal
 			>
 				<Card
+					ref={cardRef}
 					sx={{
 						boxShadow: theme.shadows[11],
 						borderRadius: 2,
@@ -82,6 +94,11 @@ function YorkieIntelligenceFooter(props: YorkieIntelligenceFooterProps) {
 					)}
 				</Card>
 			</Popover>
+			<CloseIntelligenceModal
+				open={closeModalOpen}
+				onCloseIntelligence={onClose}
+				onClose={handleCloseModalOpen}
+			/>
 		</Box>
 	);
 }

frontend/src/components/modals/CloseIntelligenceModal.tsx

@@ -0,0 +1,53 @@
+import { Button, Modal, ModalProps, Paper, Stack, Typography } from "@mui/material";
+
+interface CloseIntelligenceModalProps extends Omit<ModalProps, "children"> {
+	onCloseIntelligence: () => void;
+}
+
+function CloseIntelligenceModal(props: CloseIntelligenceModalProps) {
+	const { onCloseIntelligence, ...modalProps } = props;
+
+	const handleCloseModal = () => {
+		modalProps?.onClose?.(new Event("Close Modal"), "escapeKeyDown");
+	};
+
+	const handleDiscard = () => {
+		onCloseIntelligence();
+		handleCloseModal();
+	};
+
+	return (
+		<Modal disableAutoFocus {...modalProps}>
+			<Paper
+				sx={{
+					position: "absolute",
+					top: "50%",
+					left: "50%",
+					transform: "translate(-50%, -50%)",
+					p: 4,
+				}}
+			>
+				<Stack gap={4}>
+					<Stack alignItems="center" gap={1}>
+						<img src="/yorkie.png" alt="yorkie" width={60} />
+						<Typography variant="h6" align="center">
+							Do you want to discard
+							<br />
+							the Yorkie response?
+						</Typography>
+					</Stack>
+					<Stack direction="row" gap={1} justifyContent="center">
+						<Button variant="outlined" onClick={handleDiscard}>
+							Discard
+						</Button>
+						<Button variant="contained" onClick={handleCloseModal}>
+							Cancel
+						</Button>
+					</Stack>
+				</Stack>
+			</Paper>
+		</Modal>
+	);
+}
+
+export default CloseIntelligenceModal;