fix(view): 각 content title 수정

packages/view/src/App.scss

@@ -35,5 +35,6 @@ body {
   display: grid;
   grid-template-columns: 4fr 1fr;
   height: calc(100vh - 200px);
-  margin-top: 20px;
+
+  padding: 20px;
 }

packages/view/src/App.tsx

@@ -3,14 +3,7 @@ import { container } from "tsyringe";
 import { useEffect, useRef } from "react";
 import BounceLoader from "react-spinners/BounceLoader";
 
-import {
-  BranchSelector,
-  Statistics,
-  TemporalFilter,
-  ThemeSelector,
-  VerticalClusterList,
-  FilteredAuthors,
-} from "components";
+import { BranchSelector, Statistics, TemporalFilter, ThemeSelector, VerticalClusterList } from "components";
 import "./App.scss";
 import type IDEPort from "ide/IDEPort";
 import { useGlobalData } from "hooks";
@@ -65,7 +58,6 @@ const App = () => {
       </div>
       <div className="top-container">
         <TemporalFilter />
-        <FilteredAuthors />
       </div>
       <div className="middle-container">
         {filteredData.length !== 0 ? (

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

@@ -1,9 +1,12 @@
 .selected-container {
-  position: relative;
-  top: 30px;
   display: flex;
-  flex-wrap: wrap;
+  align-items: center;
+  gap: 15px;
   width: 100%;
-  padding: 4px 6px;
+}
+
+.selected-content {
+  display: flex;
+  flex-wrap: wrap;
   box-sizing: border-box;
 }

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

@@ -12,18 +12,21 @@ const FilteredAuthors = () => {
 
   return (
     <div className="selected-container">
-      {authSrcMap &&
-        selectedClusters.map((selectedCluster) => {
-          return selectedCluster.summary.authorNames.map((authorArray: string[]) => {
-            return authorArray.map((authorName: string) => (
-              <Author
-                key={authorName}
-                name={authorName}
-                src={authSrcMap[authorName]}
-              />
-            ));
-          });
-        })}
+      {selectedClusters.length > 0 && <p>Authors:</p>}
+      <div className="selected-content">
+        {authSrcMap &&
+          selectedClusters.map((selectedCluster) => {
+            return selectedCluster.summary.authorNames.map((authorArray: string[]) => {
+              return authorArray.map((authorName: string) => (
+                <Author
+                  key={authorName}
+                  name={authorName}
+                  src={authSrcMap[authorName]}
+                />
+              ));
+            });
+          })}
+      </div>
     </div>
   );
 };

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

@@ -137,7 +137,7 @@ const FileIcicleSummary = () => {
 
   return (
     <div className="file-icicle-summary">
-      <p>File Icicle Summary</p>
+      <p>File Summary</p>
       <svg ref={$summary} />
     </div>
   );

packages/view/src/components/Statistics/Statistics.scss

@@ -3,7 +3,6 @@
   flex-direction: column;
   align-items: center;
   gap: 5vh;
-  padding: 20px;
   width: 350px;
   overflow-y: scroll;
 }

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

@@ -1,6 +1,10 @@
 .vertical-cluster-list {
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
+}
+
+.vertical-cluster-list__content {
+  display: flex;
   height: 100%;
   overflow-x: hidden;
   overflow-y: scroll;

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

@@ -1,13 +1,18 @@
 import "./VerticalClusterList.scss";
 
+import { FilteredAuthors } from "components/FilteredAuthors";
+
 import { ClusterGraph } from "./ClusterGraph";
 import { Summary } from "./Summary";
 
 const VerticalClusterList = () => {
   return (
     <div className="vertical-cluster-list">
-      <ClusterGraph />
-      <Summary />
+      <FilteredAuthors />
+      <div className="vertical-cluster-list__content">
+        <ClusterGraph />
+        <Summary />
+      </div>
     </div>
   );
 };