#712 작업 브랜치에 main 브랜치 내용 적용

packages/analysis-engine/package.json

@@ -12,6 +12,7 @@
   },
   "scripts": {
     "build": "rollup -c && tsc -d --emitDeclarationOnly --noEmit false --declarationDir dist",
+    "watch": "rollup -c -w",
     "start": "sh -c 'node -e \"require(\\\"./dist/index.js\\\").getMockData(\\\"$0\\\")\"'",
     "lint": "eslint src --ext ts",
     "lint:fix": "eslint src --ext ts --fix",

packages/view/src/App.scss

@@ -19,8 +19,7 @@ body {
 }
 
 .middle-container {
-  display: grid;
-  grid-template-columns: 4fr 2fr;
+  display: flex;
   height: calc(100vh - 200px);
   padding: 20px;
 }

packages/view/src/components/BranchSelector/BranchSelector.const.ts

@@ -0,0 +1 @@
+export const SLICE_LENGTH = 15;

packages/view/src/components/BranchSelector/BranchSelector.scss

@@ -7,7 +7,7 @@
   align-items: center;
   font-weight: $font-weight-semibold;
 
-  .select-box {
+  & &__select-box {
     border: 1px solid $color-white;
     color: $color-white;
     height: 30px;

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

@@ -8,6 +8,8 @@ import { sendFetchAnalyzedDataCommand } from "services";
 import "./BranchSelector.scss";
 import { useLoadingStore } from "store";
 
+import { SLICE_LENGTH } from "./BranchSelector.const";
+
 const BranchSelector = () => {
   const { branchList, selectedBranch, setSelectedBranch } = useGlobalData();
   const { setLoading } = useLoadingStore((state) => state);
@@ -28,7 +30,7 @@ const BranchSelector = () => {
         <Select
           value={selectedBranch}
           onChange={handleChangeSelect}
-          className="select-box"
+          className="branch-selector__select-box"
           inputProps={{ "aria-label": "Without label" }}
           MenuProps={{
             PaperProps: {
@@ -53,8 +55,9 @@ const BranchSelector = () => {
             <MenuItem
               key={option}
               value={option}
+              title={option}
             >
-              {option}
+              {option.length <= SLICE_LENGTH ? option : `${option.slice(0, SLICE_LENGTH)}...`}
             </MenuItem>
           ))}
         </Select>

packages/view/src/components/Detail/Detail.scss

@@ -1,23 +1,23 @@
 @import "styles/app";
 
-.detail__summary__container {
+.detail__summary {
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: $font-size-caption;
 
-  .divider {
+  .detail__summary-divider {
     margin-right: 1rem;
     flex-grow: 10;
     height: 0;
     border: 1px solid $color-white;
   }
 
-  .detail__summary {
+  .detail__summary-list {
     flex-grow: 0.1;
     text-align: right;
 
-    .detail__summary__item {
+    .detail__summary-item {
       position: relative;
       margin-right: 10px;
       display: inline-flex;
@@ -40,45 +40,45 @@
 }
 
 @media (max-width: 1080px) {
-  .detail__summary__item__name {
+  .detail__summary-item-name {
     display: none;
   }
 }
 
-.detail__commit-list__container {
+.detail__commit-list {
   display: flex;
   flex-direction: column;
   row-gap: 7px;
   padding: 20px;
   font-size: $font-size-body;
 
-  .commit-item {
+  .detail__commit-item {
     width: 100%;
     display: flex;
     justify-content: space-between;
     color: $color-medium-gray;
 
-    .commit-detail {
+    .commit-item__detail {
       color: $color-white;
       display: flex;
       justify-content: space-between;
       align-items: center;
       width: 100%;
       padding-left: 5px;
 
-      .avatar-message {
+      .commit-item__avatar-message {
         display: flex;
         align-items: center;
         width: 100%;
 
-        .message-container {
+        .commit-item__message-container {
           position: relative;
           overflow: visible;
           flex-grow: 1;
           padding-right: 50px;
           width: auto;
 
-          .message {
+          .commit-item__message {
             display: -webkit-box;
             -webkit-box-orient: vertical;
             -webkit-line-clamp: 1;
@@ -100,25 +100,28 @@
         }
       }
 
-      .commit-date {
+      .commit-item__author-date {
         display: block;
         position: relative;
         white-space: nowrap;
       }
     }
-    .commit-id {
+
+    .commit-item__commit-id {
       display: flex;
       justify-content: center;
       align-items: center;
       width: 6em;
       position: relative;
 
-      a {
+      .commit-id__link {
         text-decoration: none;
         color: $color-light-gray;
+
         &:visited {
           color: $color-light-gray;
         }
+
         &:hover {
           color: var(--color-primary);
         }
@@ -127,7 +130,7 @@
   }
 }
 
-.toggle-button {
+.detail__toggle-button {
   display: flex;
   margin: 0 auto;
   border: none;

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

@@ -34,23 +34,24 @@ const DetailSummary = ({ commitNodeListInCluster }: DetailSummaryProps) => {
   ];
 
   return (
-    <div className="detail__summary__container">
-      <div className="divider" />
-      <div className="detail__summary">
+    <div className="detail__summary">
+      <div className="detail__summary-divider" />
+      <div className="detail__summary-list">
         {summaryItems.map(({ name, count, icon }) => (
           <span
             key={name}
-            className="detail__summary__item"
+            className="detail__summary-item"
           >
             {icon}
             <strong className={name}>{count.toLocaleString("en")} </strong>
-            <span className="detail__summary__item__name">{count <= 1 ? name.slice(0, -1) : name}</span>
+            <span className="detail__summary-item-name">{count <= 1 ? name.slice(0, -1) : name}</span>
           </span>
         ))}
       </div>
     </div>
   );
 };
+
 const Detail = ({ selectedData, clusterId, authSrcMap }: DetailProps) => {
   const commitNodeListInCluster =
     selectedData?.filter((selected) => selected.commitNodeList[0].clusterId === clusterId)[0].commitNodeList ?? [];
@@ -65,54 +66,57 @@ const Detail = ({ selectedData, clusterId, authSrcMap }: DetailProps) => {
   return (
     <>
       <DetailSummary commitNodeListInCluster={commitNodeListInCluster} />
-      <ul className="detail__commit-list__container">
+      <ul className="detail__commit-list">
         {commitNodeList.map(({ commit }) => {
           const { id, message, author, commitDate } = commit;
           return (
             <li
               key={id}
-              className="commit-item"
+              className="detail__commit-item"
             >
-              <div className="commit-detail">
-                <div className="avatar-message">
+              <div className="commit-item__detail">
+                <div className="commit-item__avatar-message">
                   {authSrcMap && (
                     <Author
                       name={author.names.toString()}
                       src={authSrcMap[author.names.toString()]}
                     />
                   )}
-                  <div className="message-container">
-                    <span className="message">{message}</span>
+                  <div className="commit-item__message-container">
+                    <span className="commit-item__message">{message}</span>
                   </div>
                 </div>
-                <span className="commit-date">
+                <span className="commit-item__author-date">
                   {author.names[0]}, {dayjs(commitDate).format("YY. M. DD. a h:mm")}
                 </span>
               </div>
-              <div className="commit-id">
+              <div className="commit-item__commit-id">
                 <a
                   href={`https://github.com/${owner}/${repo}/commit/${id}`}
                   onClick={handleCommitIdCopy(id)}
                   tabIndex={0}
                   onKeyDown={handleCommitIdCopy(id)}
+                  className="commit-id__link"
                 >
                   <Tooltip
+                    className="commit-id__tooltip"
                     placement="right"
                     title={id}
                     PopperProps={{ sx: { ".MuiTooltip-tooltip": { bgcolor: "#3c4048" } } }}
                   >
-                    <p>{`${id.slice(0, 6)}...`}</p>
+                    <p>{`${id.slice(0, 6)}`}</p>
                   </Tooltip>
                 </a>
               </div>
             </li>
           );
         })}
       </ul>
+
       {isShow && (
         <button
           type="button"
-          className="toggle-button"
+          className="detail__toggle-button"
           onClick={handleToggle}
         >
           {toggle ? <ExpandLessRounded /> : <ExpandMoreRounded />}

packages/view/src/components/FilteredAuthors/FilteredAuthors.scss

@@ -1,8 +1,19 @@
 @import "styles/app";
 
-.selected__author {
+.filtered-authors {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
-  gap: 5px;
+  column-gap: 10px;
+
+  .filtered-authors__label {
+    font-size: $font-size-title;
+    font-weight: $font-weight-semibold;
+  }
+
+  .filtered-authors__author {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 5px;
+  }
 }

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

@@ -14,9 +14,9 @@ const FilteredAuthors = () => {
   const addedAuthors = new Set();
 
   return (
-    <div className="selected__content">
-      <p>Authors:</p>
-      <div className="selected__author">
+    <div className="filtered-authors">
+      <p className="filtered-authors__label">Authors:</p>
+      <div className="filtered-authors__author">
         {authSrcMap &&
           selectedClusters.map((selectedCluster) => {
             return selectedCluster.summary.authorNames.map((authorArray: string[]) => {

packages/view/src/components/RefreshButton/RefreshButton.scss

@@ -3,7 +3,7 @@
   height: 30px;
 }
 
-.refresh-button-icon {
+.refresh-button__icon {
   &--loading {
     animation: rotate 2s infinite;
   }

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

@@ -26,7 +26,7 @@ const RefreshButton = () => {
       sx={{ color: "white" }}
     >
       <ReplayCircleFilledRoundedIcon
-        className={cn("refresh-button-icon", { "refresh-button-icon--loading": loading })}
+        className={cn("refresh-button__icon", { "refresh-button__icon--loading": loading })}
       />
     </IconButton>
   );