refactor(view): Refactor code due to githru#63 comment and change plan

packages/view/src/components/VerticalClusterList/Summary/Summary.scss

@@ -1,9 +1,116 @@
+@import "../../../styles/pallete";
+
+@mixin animation {
+    -webkit-transition: bottom .3s ease-in-out, opacity .3s ease-in-out;
+    -moz-transition: bottom .3s ease-in-out, opacity .3s ease-in-out;
+    transition: bottom .3s ease-in-out, opacity .3s ease-in-out;
+}
+
+@mixin shadow {
+    -webkit-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
+    -moz-box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
+    box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4);
+}
+
+@mixin border($border--radius) {
+    -webkit-border-radius: $border--radius;
+    -moz-border-radius: $border--radius;
+    border-radius: $border--radius;
+}
+
 body {
-    background-color: #222222;
-    color: #ffffff
+    background-color: #fff;
+    color: #222
 }
 
-.box {
-    display: block;
+.entire {
+    width: 85%;
     margin-left: 20px;
 }
+
+.cluster {
+    align-items: center;
+    width: 85%;
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.commit {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+}
+
+.nameBox {
+    display: flex;
+}
+
+.name {
+    @include border(50px);
+
+    display: flex;
+    width: 30px;
+    height: 30px;
+    font-weight: bold;
+    background-color: $blue-light-A700;
+    color: white;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    font-size: 15pt;
+    margin-bottom: 10px;
+
+    &::after {
+        @include animation()
+    }
+
+    &:hover {
+        background-color: $blue-light-A200;
+    }
+}
+
+[data-tooltip-text] {
+    &:hover {
+        position: relative;
+    }
+
+    &::after {
+        @include animation();
+
+        @include shadow();
+
+        @include border(5px);
+
+        content: attr(data-tooltip-text);
+
+        position: absolute;
+        top: 90%;
+        left: -9999px;
+
+        color: #FFFFFF;
+        font-size: 12px;
+        margin-bottom: 10px;
+        padding: 7px 12px;
+        position: absolute;
+        width: auto;
+        min-width: max-content;
+        word-wrap: break-word;
+
+        opacity: 0;
+        z-index: 9999;
+    }
+
+    &:hover::after {
+        left: 90%;
+        background-color: rgba(0, 119, 170, 0.8);
+        opacity: 1;
+    }
+}
+
+.message {
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    margin-left: 15px;
+}

packages/view/src/components/VerticalClusterList/Summary/Summary.tsx

@@ -1,21 +1,42 @@
-import type { GlobalProps } from "types/global";
-
 import "./Summary.scss";
-import { Content } from "./Content";
+import type { GlobalProps } from "types/global";
 
-import {
-  information,
-  getCommitAuthorNames,
-  getCommitIds,
-  getCommitMessages,
-} from ".";
+import type { Commit, Author, Cluster } from ".";
+import { getInitData } from ".";
 
 const Summary = ({ data }: GlobalProps) => {
-  information.ids = getCommitIds({ data });
-  information.names = getCommitAuthorNames({ data });
-  information.messages = getCommitMessages({ data });
+  const info = getInitData({ data });
 
-  return <Content info={information} />;
+  return (
+    <div className="entire">
+      {info.map((cluster: Cluster) => {
+        return (
+          <div className="cluster" key={cluster.id}>
+            {cluster.commits.map((commit: Commit) => {
+              return (
+                <p className="commit" key={commit.commitId}>
+                  <span className="nameBox">
+                    {commit.authorNames.map((authorName: Author) => {
+                      return (
+                        <span
+                          key={authorName.id}
+                          className="name"
+                          data-tooltip-text={authorName.name}
+                        >
+                          {authorName.name.slice(0, 1)}
+                        </span>
+                      );
+                    })}
+                  </span>
+                  <span className="message">{commit.message}</span>
+                </p>
+              );
+            })}
+          </div>
+        );
+      })}
+    </div>
+  );
 };
 
 export default Summary;

packages/view/src/components/VerticalClusterList/Summary/Summary.type.ts

@@ -1,9 +1,15 @@
-export interface Info {
-  ids: Array<Array<string>>;
-  names: Array<Array<string>>;
-  messages: Array<string>;
-}
+export type Author = {
+  id: string;
+  name: string;
+};
 
-export interface IInfo {
-  info: Info;
-}
+export type Commit = {
+  commitId: string;
+  authorNames: Array<Author>;
+  message: string;
+};
+
+export type Cluster = {
+  id: string;
+  commits: Commit[];
+};