Merge pull request #50 from handong-app/junglesub/feat/front-history

Junglesub/feat/front history
handong-app · Nov 5, 2024 · a15a677 · a15a677
2 parents 7e4a55e + e46ad0c
commit a15a677
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 9 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";
@@ -22,16 +23,19 @@ import { calculateDiffChange, formatTimestamp } from "../../tools/tools";
 const getColor = (diffChange) => {
   return diffChange === "최초" || diffChange === "일치"
     ? "lightgray"
-    : diffChange.startsWith("+")
-    ? "green"
-    : "red";
+    : diffChange.startsWith("-")
+    ? "red"
+    : "green";
 };
 
 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);
@@ -58,8 +62,7 @@ const HistoryModal = ({ openState, item }) => {
             diffChange:
               idx === arr.length - 1
                 ? "최초"
-                : calculateDiffChange(item.diff.oldValue, item.diff.newValue) ||
-                  "일치",
+                : calculateDiffChange(item.diff.oldValue, item.diff.newValue),
           }))
       );
     });
@@ -68,12 +71,36 @@ const HistoryModal = ({ openState, item }) => {
 
   const handleClose = () => {
     setOpen(false);
+    setOpenRevisionId(null);
   };
   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>

diff --git a/src/main/front/src/tools/tools.jsx b/src/main/front/src/tools/tools.jsx
@@ -116,7 +116,8 @@ export const calculateDiffChange = (oldValue, newValue) => {
   if (removed > 0) result += (result.length > 0 ? " " : "") + `-${removed}`;
 
   const diff = added - removed;
-  if (diff === 0) return 0;
+  if (added === 0 && removed === 0) return "일치";
+  if (diff === 0) return "0";
   return `${diff > 0 ? "+" : ""}${diff}`;
   // return result || "No changes";
 };