feat(view): Newviz 스토리라인 시각화

CLAUDE.md

@@ -0,0 +1,151 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+githru-vscode-ext is a VSCode extension that provides Git visualization and analytics. It's a monorepo with three main packages:
+
+- **analysis-engine**: Core Git analysis engine that parses git logs and GitHub data
+- **view**: React-based UI components for visualization (uses D3.js, Material-UI)
+- **vscode**: VSCode extension wrapper that bridges the engine and view
+
+## Development Commands
+
+### Root Level
+```bash
+# Install dependencies for all packages
+npm install
+
+# Build all packages
+npm run build:all
+
+# Test all packages
+npm run test:all
+
+# Lint all packages
+npm run lint
+npm run lint:fix
+
+# Format code
+npm run prettier
+npm run prettier:fix
+```
+
+### Package-Specific Commands
+
+#### Analysis Engine (packages/analysis-engine)
+```bash
+# Build with type declarations
+npm run build
+
+# Run specific tests
+npm run test:stem
+npm run test
+
+# Lint
+npm run lint
+```
+
+#### View (packages/view)
+```bash
+# Start development server
+npm run start
+
+# Build for production
+npm run build
+
+# Run tests
+npm run test
+
+# Run E2E tests
+npm run test:e2e
+```
+
+#### VSCode Extension (packages/vscode)
+```bash
+# Build extension (also builds view package)
+npm run build
+
+# Watch mode for development
+npm run watch
+
+# Package extension
+npm run package
+
+# Debug: F5 in VSCode or Run > Start Debugging
+```
+
+### Debugging the Extension
+1. Run `npm run build:all` from root
+2. Open the `packages/vscode` folder in VSCode
+3. Press F5 or use Run > Start Debugging
+4. In the Extension Development Host, use Command Palette > "Open Githru View"
+
+## Architecture
+
+### Data Flow
+1. **VSCode Extension** captures git repository context
+2. **Analysis Engine** processes git log and GitHub API data:
+   - Parses raw git commits (`parser.ts`)
+   - Builds commit dictionary (`commit.util.ts`)
+   - Creates stem/branch structure (`stem.ts`)
+   - Generates cluster summary map (`csm.ts`)
+3. **View** renders interactive visualizations using the processed data
+
+### Key Components
+
+#### Analysis Engine Core Classes
+- `AnalysisEngine`: Main orchestrator class
+- `PluginOctokit`: GitHub API integration with retry/throttling
+- Dependency injection using `tsyringe`
+
+#### View Architecture
+- **State Management**: Zustand stores in `src/store/`
+- **Components**: Modular React components with D3.js integration
+- **IDE Adapter Pattern**: `VSCodeIDEAdapter` bridges VSCode API
+- Component structure: `ComponentName/index.ts` exports, separate `.const.ts`, `.type.ts`, `.util.ts` files
+
+#### VSCode Extension
+- Extension activation on git repositories
+- Webview integration for React UI
+- Command palette integration
+- GitHub authentication management
+
+## Code Conventions
+
+### Commit Messages
+Follow conventional commits with these scopes:
+- `feat(engine)`: Analysis engine features
+- `feat(view)`: UI/visualization features
+- `feat(vscode)`: VSCode extension features
+- `fix(scope)`: Bug fixes
+- `refactor(scope)`: Code refactoring
+
+### Code Style
+- ESLint configuration with Prettier
+- TypeScript strict mode
+- 2-space indentation, 120 character line width
+- Single quotes disabled, trailing commas on ES5
+
+### Testing
+- Jest for unit testing
+- Playwright for E2E testing (view package)
+- Test files: `*.spec.ts` or `*.test.ts`
+
+## Development Environment Setup
+
+### Prerequisites
+- Node.js >= 16
+- npm >= 8
+- VSCode with ESLint extension
+
+### TypeScript Configuration
+In VSCode, activate workspace TypeScript:
+1. Open a TypeScript file
+2. Ctrl/Cmd + Shift + P
+3. "Select TypeScript Version"
+4. "Use Workspace Version"
+
+### Package Structure
+The project uses npm workspaces. Each package has its own dependencies and build configuration but shares root-level linting and formatting rules.

packages/view/src/App.scss

@@ -14,6 +14,17 @@ body {
   padding: 0 0.75rem 0 1.25rem;
 }
 
+.header-container > :is(:first-child, :last-child) {
+  flex: 1;
+}
+
+.header-container > :last-child {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .top-container {
   height: 13.75rem;
 }

packages/view/src/App.tsx

@@ -1,28 +1,53 @@
 import "reflect-metadata";
 import { container } from "tsyringe";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import BounceLoader from "react-spinners/BounceLoader";
+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 MonoLogo from "assets/monoLogo.svg";
-import { BranchSelector, Statistics, TemporalFilter, ThemeSelector, VerticalClusterList } from "components";
+import {
+  BranchSelector,
+  Statistics,
+  TemporalFilter,
+  ThemeSelector,
+  VerticalClusterList,
+  StorylineChart,
+} from "components";
 import "./App.scss";
 import type IDEPort from "ide/IDEPort";
 import { useAnalayzedData } from "hooks";
 import { RefreshButton } from "components/RefreshButton";
 import type { IDESentEvents } from "types/IDESentEvents";
 import { useBranchStore, useDataStore, useGithubInfo, useLoadingStore, useThemeStore } from "store";
 import { THEME_INFO } from "components/ThemeSelector/ThemeSelector.const";
+import { InsightsButton } from "components/InsightsButton";
+import { pxToRem } from "utils";
 
 const App = () => {
   const initRef = useRef<boolean>(false);
+  const [showStorylineChartModal, setShowStorylineChartModal] = 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");
 
+  const handleOpenStorylineChartModal = () => {
+    setShowStorylineChartModal(true);
+  };
+
+  const handleCloseStorylineChartModal = () => {
+    setShowStorylineChartModal(false);
+  };
+
   useEffect(() => {
     if (initRef.current === false) {
       const callbacks: IDESentEvents = {
@@ -59,7 +84,18 @@ const App = () => {
       <div className="header-container">
         <ThemeSelector />
         <BranchSelector />
-        <RefreshButton />
+        <div>
+          <RefreshButton />
+          <InsightsButton
+            isNew
+            sx={{
+              width: "1.875rem",
+              height: "1.875rem",
+              color: "white",
+            }}
+            onClick={handleOpenStorylineChartModal}
+          />
+        </div>
       </div>
       <div className="top-container">
         <TemporalFilter />
@@ -78,6 +114,46 @@ const App = () => {
           </div>
         )}
       </div>
+      {/* Storyline Chart Modal */}
+      {showStorylineChartModal && (
+        <Dialog
+          fullScreen
+          open={showStorylineChartModal}
+          onClose={handleCloseStorylineChartModal}
+          sx={{
+            [`& .${dialogClasses.paper}`]: {
+              backgroundColor: "#222324",
+            },
+          }}
+        >
+          <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={handleCloseStorylineChartModal}
+                size="large"
+                aria-label="close"
+              >
+                <CloseIcon />
+              </IconButton>
+            </Toolbar>
+          </AppBar>
+          <Divider
+            sx={{
+              backgroundColor: "#F7F7F780",
+            }}
+          />
+          <StorylineChart />
+        </Dialog>
+      )}
     </>
   );
 };

packages/view/src/components/InsightsButton/InsightsButton.tsx

@@ -0,0 +1,26 @@
+import { Badge, IconButton, IconButtonProps } from "@mui/material";
+import InsightsIcon from "@mui/icons-material/Insights";
+
+type InsightsButtonProps = {
+  isNew?: boolean;
+} & IconButtonProps;
+
+const InsightsButton = ({ isNew = false, ...props }: InsightsButtonProps) => {
+  return (
+    <IconButton {...props}>
+      <Badge
+        badgeContent="NEW"
+        invisible={!isNew}
+        sx={{
+          "& .MuiBadge-badge": {
+            fontSize: "0.625rem",
+          },
+        }}
+      >
+        <InsightsIcon />
+      </Badge>
+    </IconButton>
+  );
+};
+
+export default InsightsButton;

packages/view/src/components/InsightsButton/index.ts

@@ -0,0 +1 @@
+export { default as InsightsButton } from "./InsightsButton";