Merge pull request #509 from ytaek/main

fix(view): revert scss module usage due to rendering error

packages/view/src/App.tsx

@@ -2,7 +2,6 @@ import "reflect-metadata";
 import { container } from "tsyringe";
 import { useEffect, useRef } from "react";
 import BounceLoader from "react-spinners/BounceLoader";
-import classNames from "classnames/bind";
 
 import {
   BranchSelector,
@@ -12,15 +11,13 @@ import {
   VerticalClusterList,
   FilteredAuthors,
 } from "components";
+import "./App.scss";
 import type IDEPort from "ide/IDEPort";
 import { useGlobalData } from "hooks";
 import { RefreshButton } from "components/RefreshButton";
 import type { IDESentEvents } from "types/IDESentEvents";
 
-import styles from "./App.module.scss";
-
 const App = () => {
-  const cx = classNames.bind(styles);
   const initRef = useRef<boolean>(false);
 
   const { filteredData, handleChangeAnalyzedData, handleChangeBranchList, loading, setLoading } = useGlobalData();
@@ -59,18 +56,18 @@ const App = () => {
 
   return (
     <>
-      <div className={cx("header-container")}>
+      <div className="header-container">
         <BranchSelector />
-        <div className={cx("header-buttons")}>
+        <div className="header-buttons">
           <ThemeSelector />
           <RefreshButton />
         </div>
       </div>
-      <div className={cx("top-container")}>
+      <div className="top-container">
         <TemporalFilter />
         <FilteredAuthors />
       </div>
-      <div className={cx("middle-container")}>
+      <div className="middle-container">
         {filteredData.length !== 0 ? (
           <>
             <VerticalClusterList />

packages/view/src/components/@common/Author/Author.tsx

@@ -1,14 +1,10 @@
-import classNames from "classnames/bind";
-
 import type { AuthorInfo } from "types";
-
-import styles from "./Author.module.scss";
+import "./Author.scss";
 
 const Author = ({ name, src }: AuthorInfo) => {
-  const cx = classNames.bind(styles);
   return (
     <div
-      className={cx("author")}
+      className="author"
       data-tooltip-text={name}
     >
       <img

packages/view/src/components/BranchSelector/BranchSelector.tsx

@@ -1,25 +1,23 @@
 import { type ChangeEventHandler } from "react";
-import classNames from "classnames/bind";
+import "./BranchSelector.scss";
 
 import { useGlobalData } from "hooks";
 import { sendFetchAnalyzedDataCommand } from "services";
 
-import styles from "./BranchSelector.module.scss";
-
 const BranchSelector = () => {
   const { branchList, selectedBranch, setSelectedBranch, setLoading } = useGlobalData();
-  const cx = classNames.bind(styles);
+
   const handleChangeSelect: ChangeEventHandler<HTMLSelectElement> = (e) => {
     setSelectedBranch(e.target.value);
     setLoading(true);
     sendFetchAnalyzedDataCommand(e.target.value);
   };
 
   return (
-    <section className={cx("branch-selector")}>
+    <section className="branch-selector">
       <span>Branches:</span>
       <select
-        className={cx("select-box")}
+        className="select-box"
         onChange={handleChangeSelect}
         value={selectedBranch}
       >

packages/view/src/components/Detail/Detail.tsx

@@ -1,5 +1,4 @@
 import dayjs from "dayjs";
-import classNames from "classnames/bind";
 
 import AuthorIcon from "assets/author.svg";
 import ChangedFileIcon from "assets/changed-file.svg";
@@ -12,10 +11,10 @@ import { useCommitListHide } from "./Detail.hook";
 import { getCommitListDetail } from "./Detail.util";
 import { FIRST_SHOW_NUM } from "./Detail.const";
 import type { DetailProps, DetailSummaryProps, DetailSummaryItem } from "./Detail.type";
-import styles from "./Detail.module.scss";
+
+import "./Detail.scss";
 
 const DetailSummary = ({ commitNodeListInCluster }: DetailSummaryProps) => {
-  const cx = classNames.bind(styles);
   const { authorLength, fileLength, commitLength, insertions, deletions } = getCommitListDetail({
     commitNodeListInCluster,
   });
@@ -29,25 +28,24 @@ const DetailSummary = ({ commitNodeListInCluster }: DetailSummaryProps) => {
   ];
 
   return (
-    <div className={cx("detail__summary__container")}>
-      <div className={cx("divider")} />
-      <div className={cx("detail__summary")}>
+    <div className="detail__summary__container">
+      <div className="divider" />
+      <div className="detail__summary">
         {summaryItems.map(({ name, count, icon }) => (
           <span
             key={name}
-            className={cx("detail__summary__item")}
+            className="detail__summary__item"
           >
             {icon}
-            <strong className={cx({ name })}>{count.toLocaleString("en")} </strong>
-            <span className={cx("detail__summary__item__name")}>{count <= 1 ? name.slice(0, -1) : name}</span>
+            <strong className={name}>{count.toLocaleString("en")} </strong>
+            <span className="detail__summary__item__name">{count <= 1 ? name.slice(0, -1) : name}</span>
           </span>
         ))}
       </div>
     </div>
   );
 };
 const Detail = ({ selectedData, clusterId, authSrcMap }: DetailProps) => {
-  const cx = classNames.bind(styles);
   const commitNodeListInCluster =
     selectedData?.filter((selected) => selected.commitNodeList[0].clusterId === clusterId)[0].commitNodeList ?? [];
   const { commitNodeList, toggle, handleToggle } = useCommitListHide(commitNodeListInCluster);
@@ -61,39 +59,39 @@ const Detail = ({ selectedData, clusterId, authSrcMap }: DetailProps) => {
   return (
     <>
       <DetailSummary commitNodeListInCluster={commitNodeListInCluster} />
-      <ul className={cx("detail__commit-list__container")}>
+      <ul className="detail__commit-list__container">
         {commitNodeList.map(({ commit }) => {
           const { id, message, author, commitDate } = commit;
           return (
             <li
               key={id}
-              className={cx("commit-item")}
+              className="commit-item"
             >
-              <div className={cx("commit-detail")}>
-                <div className={cx("avatar-message")}>
+              <div className="commit-detail">
+                <div className="avatar-message">
                   {authSrcMap && (
                     <Author
                       name={author.names.toString()}
                       src={authSrcMap[author.names.toString()]}
                     />
                   )}
-                  <div className={cx("message-container")}>
-                    <span className={cx("message")}>{message}</span>
+                  <div className="message-container">
+                    <span className="message">{message}</span>
                   </div>
                 </div>
-                <span className={cx("author-date")}>
+                <span className="author-date">
                   {author.names[0]}, {dayjs(commitDate).format("YY. M. DD. a h:mm")}
                 </span>
               </div>
-              <div className={cx("commit-id")}>
+              <div className="commit-id">
                 <span
                   onClick={handleCommitIdCopy(id)}
                   role="button"
                   tabIndex={0}
                   onKeyDown={handleCommitIdCopy(id)}
                 >
                   {id.slice(0, 6)}
-                  <span className={cx("commit-id__tooltip")}>{id}</span>
+                  <span className="commit-id__tooltip">{id}</span>
                 </span>
               </div>
             </li>
@@ -103,7 +101,7 @@ const Detail = ({ selectedData, clusterId, authSrcMap }: DetailProps) => {
       {isShow && (
         <button
           type="button"
-          className={cx("toggle-button")}
+          className="toggle-button"
           onClick={handleToggle}
         >
           {toggle ? "Hide ..." : "Read More ..."}

packages/view/src/components/FilteredAuthors/FilteredAuthors.tsx

@@ -1,20 +1,17 @@
-import classNames from "classnames/bind";
-
 import { Author } from "components/@common/Author";
 import { usePreLoadAuthorImg } from "components/VerticalClusterList/Summary/Summary.hook";
 import { getInitData } from "components/VerticalClusterList/Summary/Summary.util";
 import { useGlobalData } from "hooks";
 
-import styles from "./FilteredAuthors.module.scss";
+import "./FilteredAuthors.scss";
 
 const FilteredAuthors = () => {
-  const cx = classNames.bind(styles);
   const { selectedData } = useGlobalData();
   const authSrcMap = usePreLoadAuthorImg();
   const selectedClusters = getInitData(selectedData);
 
   return (
-    <div className={cx("selected-container")}>
+    <div className="selected-container">
       {authSrcMap &&
         selectedClusters.map((selectedCluster) => {
           return selectedCluster.summary.authorNames.map((authorArray: string[]) => {

packages/view/src/components/RefreshButton/RefreshButton.tsx

@@ -1,16 +1,14 @@
 import "reflect-metadata";
 import cn from "classnames";
 import { FiRefreshCcw } from "react-icons/fi";
-import classNames from "classnames/bind";
 
 import { throttle } from "utils";
 import { useGlobalData } from "hooks";
-import { sendRefreshDataCommand } from "services";
 
-import styles from "./RefreshButton.module.scss";
+import "./RefreshButton.scss";
+import { sendRefreshDataCommand } from "services";
 
 const RefreshButton = () => {
-  const cx = classNames.bind(styles);
   const { loading, setLoading, selectedBranch } = useGlobalData();
 
   const refreshHandler = throttle(() => {
@@ -21,11 +19,11 @@ const RefreshButton = () => {
   return (
     <button
       type="button"
-      className={cn(cx("refresh-button"))}
+      className={cn("refresh-button")}
       onClick={refreshHandler}
     >
       <FiRefreshCcw
-        className={cn(cx("refresh-button-icon"), { "refresh-button-icon--loading": loading })}
+        className={cn("refresh-button-icon", { "refresh-button-icon--loading": loading })}
         stroke="white"
       />
     </button>

packages/view/src/components/Statistics/AuthorBarChart/AuthorBarChart.tsx

@@ -1,7 +1,6 @@
 import type { ChangeEvent, MouseEvent } from "react";
 import { useRef, useEffect, useState } from "react";
 import * as d3 from "d3";
-import classNames from "classnames/bind";
 
 import type { ClusterNode, AuthorInfo } from "types";
 import { useGlobalData } from "hooks";
@@ -12,10 +11,10 @@ import { useGetSelectedData } from "../Statistics.hook";
 import type { AuthorDataType, MetricType } from "./AuthorBarChart.type";
 import { convertNumberFormat, getDataByAuthor, sortDataByAuthor, sortDataByName } from "./AuthorBarChart.util";
 import { DIMENSIONS, METRIC_TYPE } from "./AuthorBarChart.const";
-import styles from "./AuthorBarChart.module.scss";
+
+import "./AuthorBarChart.scss";
 
 const AuthorBarChart = () => {
-  const cx = classNames.bind(styles);
   const { data: totalData, filteredData, setSelectedData, setFilteredData } = useGlobalData();
   const rawData = useGetSelectedData();
 
@@ -46,10 +45,10 @@ const AuthorBarChart = () => {
 
     const xAxisGroup = svg
       .append("g")
-      .attr("class", cx("axis x-axis"))
+      .attr("class", "axis x-axis")
       .style("transform", `translateY(${DIMENSIONS.height}px)`);
-    const yAxisGroup = svg.append("g").attr("class", cx("axis y-axis"));
-    const barGroup = svg.append("g").attr("class", cx("bars"));
+    const yAxisGroup = svg.append("g").attr("class", "axis y-axis");
+    const barGroup = svg.append("g").attr("class", "bars");
 
     // Scales
     const xScale = d3
@@ -74,7 +73,7 @@ const AuthorBarChart = () => {
 
     xAxisGroup
       .append("text")
-      .attr("class", cx("x-axis-label"))
+      .attr("class", "x-axis-label")
       .style("transform", `translate(${DIMENSIONS.width / 2}px, ${DIMENSIONS.margins - 10}px)`)
       .text(`${metric} # / Total ${metric} # (%)`);
 
@@ -87,9 +86,9 @@ const AuthorBarChart = () => {
         .style("left", `${e.pageX - 70}px`)
         .style("top", `${e.pageY - 70}px`)
         .html(
-          `<p class=cx("name")>${d.name}</p>
+          `<p class="name">${d.name}</p>
               <p>${metric}: 
-                <span class=cx("selected")>
+                <span class="selected">
                   ${d[metric].toLocaleString()}
                 </span> 
                 / ${totalMetricValues.toLocaleString()} 
@@ -123,7 +122,7 @@ const AuthorBarChart = () => {
         (enter) =>
           enter
             .append("g")
-            .attr("class", cx("bar"))
+            .attr("class", "bar")
             .append("rect")
             .attr("width", xScale.bandwidth())
             .attr("height", 0)
@@ -152,24 +151,24 @@ const AuthorBarChart = () => {
       const profileImgSrc: string = await getAuthorProfileImgSrc(data[i].name).then((res: AuthorInfo) => res.src);
       bar
         .append("image")
-        .attr("class", cx("profile-image"))
+        .attr("class", "profile-image")
         .attr("xlink:href", profileImgSrc ?? "")
         .attr("x", (d: AuthorDataType) => (xScale(d.name) ?? 0) + xScale.bandwidth() / 2 - 7)
         .attr("y", 204)
         .attr("width", 14)
         .attr("height", 14);
     });
-  }, [data, filteredData, metric, prevData, rawData, setFilteredData, setSelectedData, totalData, cx]);
+  }, [data, filteredData, metric, prevData, rawData, setFilteredData, setSelectedData, totalData]);
 
   const handleChangeMetric = (e: ChangeEvent<HTMLSelectElement>): void => {
     setMetric(e.target.value as MetricType);
   };
 
   return (
-    <div className={cx("author-bar-chart__container")}>
-      <div className={cx("author-bar-chart__header")}>
+    <div className="author-bar-chart__container">
+      <div className="author-bar-chart__header">
         <select
-          className={cx("select-box")}
+          className="select-box"
           onChange={handleChangeMetric}
         >
           {METRIC_TYPE.map((option) => (
@@ -183,11 +182,11 @@ const AuthorBarChart = () => {
         </select>
       </div>
       <svg
-        className={cx("author-bar-chart")}
+        className="author-bar-chart"
         ref={svgRef}
       />
       <div
-        className={cx("author-bar-chart__tooltip")}
+        className="author-bar-chart__tooltip"
         ref={tooltipRef}
       />
     </div>