feat(view): 스토리라인 차트 모달 개선 (#1006)

- MUI Full-screen dialog 적용
- 디자인 변경
- 모달 타이틀 변경

Author: Jxxunnn

packages/view/src/App.scss

@@ -46,36 +46,3 @@ body {
     margin: 2.5rem 0 0 0;
   }
 }
-
-.folder-activity-flow-modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  z-index: 1000;
-}
-
-.folder-activity-flow-modal-content {
-  background-color: white;
-  padding: 1.25rem;
-  border-radius: 0.5rem;
-  width: 90%;
-  height: 80%;
-  overflow: auto;
-  position: relative;
-}
-
-.folder-activity-flow-modal-close {
-  position: absolute;
-  top: 0.625rem;
-  right: 0.625rem;
-  background: none;
-  border: none;
-  font-size: 1.25rem;
-  cursor: pointer;
-}

packages/view/src/App.tsx

@@ -21,14 +21,22 @@ import { useBranchStore, useDataStore, useGithubInfo, useLoadingStore, useThemeS
 import { THEME_INFO } from "components/ThemeSelector/ThemeSelector.const";
 import { NetworkGraph } from "components/NetworkGraph";
 import { InsightsButton } from "components/InsightsButton";
+import { Dialog, dialogClasses } from "@mui/material";
+import Divider from "@mui/material/Divider";
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import IconButton from "@mui/material/IconButton";
+import Typography from "@mui/material/Typography";
+import CloseIcon from "@mui/icons-material/Close";
+import { pxToRem } from "utils";
 
 const App = () => {
   const initRef = useRef<boolean>(false);
   const [showFolderActivityFlowModal, setShowFolderActivityFlowModal] = useState(false);
   const { handleChangeAnalyzedData } = useAnalayzedData();
   const filteredData = useDataStore((state) => state.filteredData);
   const { handleChangeBranchList } = useBranchStore();
-  const { handleGithubInfo } = useGithubInfo();
+  const { handleGithubInfo, repo } = useGithubInfo();
   const { loading, setLoading } = useLoadingStore();
   const { theme } = useThemeStore();
   const ideAdapter = container.resolve<IDEPort>("IDEAdapter");
@@ -111,34 +119,43 @@ const App = () => {
 
       {/* Folder Activity Flow Modal */}
       {showFolderActivityFlowModal && (
-        <div
-          className="folder-activity-flow-modal"
-          onClick={handleCloseFolderActivityFlowModal}
-          onKeyDown={(e) => {
-            if (e.key === "Escape") {
-              handleCloseFolderActivityFlowModal();
-            }
+        <Dialog
+          fullScreen
+          open={showFolderActivityFlowModal}
+          onClose={handleCloseFolderActivityFlowModal}
+          sx={{
+            [`& .${dialogClasses.paper}`]: {
+              backgroundColor: "#222324",
+            },
           }}
-          role="button"
-          tabIndex={0}
         >
-          <div
-            className="folder-activity-flow-modal-content"
-            onClick={(e) => e.stopPropagation()}
-            onKeyDown={(e) => e.stopPropagation()}
-            role="dialog"
-            tabIndex={-1}
-          >
-            <button
-              type="button"
-              className="folder-activity-flow-modal-close"
-              onClick={handleCloseFolderActivityFlowModal}
-            >
-              ×
-            </button>
-            <FolderActivityFlow />
-          </div>
-        </div>
+          <AppBar sx={{ position: "relative", backgroundColor: "#222324", paddingY: pxToRem(20) }}>
+            <Toolbar>
+              <Typography
+                sx={{ pl: pxToRem(25), flex: 1 }}
+                variant="h4"
+                component="div"
+              >
+                {`Storyline of ${repo}`}
+              </Typography>
+              <IconButton
+                edge="end"
+                color="inherit"
+                onClick={handleCloseFolderActivityFlowModal}
+                size="large"
+                aria-label="close"
+              >
+                <CloseIcon />
+              </IconButton>
+            </Toolbar>
+          </AppBar>
+          <Divider
+            sx={{
+              backgroundColor: "#F7F7F780",
+            }}
+          />
+          <FolderActivityFlow />
+        </Dialog>
       )}
     </>
   );

packages/view/src/components/FolderActivityFlow/FolderActivityFlow.scss

@@ -21,8 +21,6 @@
 
   padding: 1rem;
   background: $color-background;
-  border-radius: 8px;
-
 
   &__head {
     margin-top: 40px;