feat(client): split screen

handong-app · Nov 5, 2024 · e46ad0c · e46ad0c
1 parent 0850833
commit e46ad0c
Showing 1 changed file with 30 additions and 3 deletions.
diff --git a/src/main/front/src/components/modals/HistoryModal.jsx b/src/main/front/src/components/modals/HistoryModal.jsx
@@ -11,6 +11,7 @@ import {
   Typography,
   Collapse,
   Box,
+  useMediaQuery,
 } from "@mui/material";
 
 import DiffViewer from "react-diff-viewer-continued";
@@ -30,8 +31,11 @@ const getColor = (diffChange) => {
 const HistoryModal = ({ openState, item }) => {
   const [open, setOpen] = openState;
 
+  const isSmUp = useMediaQuery((theme) => theme.breakpoints.up("sm"));
+
   const [openRevisionId, setOpenRevisionId] = useState(null);
   const [historyData, setHistoryData] = useState(null);
+  const [splitView, setSplitView] = useState(isSmUp);
 
   const handleToggle = (id) => {
     setOpenRevisionId(openRevisionId === id ? null : id);
@@ -71,9 +75,32 @@ const HistoryModal = ({ openState, item }) => {
   };
   return (
     <>
-      <Dialog fullWidth open={open} onClose={handleClose}>
+      <Dialog fullWidth maxWidth={"md"} open={open} onClose={handleClose}>
         <DialogTitle>
-          기록보기
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              cursor: "pointer",
+              gap: 1,
+            }}
+            onClick={() => setSplitView((prev) => !prev)}
+          >
+            <Box>기록보기</Box>
+            <Typography
+              variant="button"
+              sx={{
+                // fontWeight: "bold",
+                color: "primary.main",
+                cursor: "pointer",
+                // "&:hover": {
+                //   textDecoration: "underline",
+                // },
+              }}
+            >
+              [ {splitView ? "분할보기" : "통합보기"} ]
+            </Typography>
+          </Box>
           <Typography variant="body2" color="textSecondary">
             (11월 6일 이전에 작성된 동일 메세지는 별도로 표시되지 않습니다.)
           </Typography>
@@ -132,7 +159,7 @@ const HistoryModal = ({ openState, item }) => {
                       <DiffViewer
                         oldValue={revision.diff.oldValue}
                         newValue={revision.diff.newValue}
-                        splitView={false}
+                        splitView={splitView}
                         hideLineNumbers
                       />
                     </Box>