From 3be93975278f72c8d45c6550eeb8ec1a38032f37 Mon Sep 17 00:00:00 2001
From: Chaewon <cw06155@gmail.com>
Date: Mon, 12 Aug 2024 22:56:31 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=92=84=20Convert=20Author=20to=20Avat?=
 =?UTF-8?q?or=20+=20tooltips=20of=20material-ui?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/@common/Author/Author.scss | 78 -------------------
 .../src/components/@common/Author/Author.tsx  | 15 ++--
 2 files changed, 8 insertions(+), 85 deletions(-)
 delete mode 100644 packages/view/src/components/@common/Author/Author.scss

diff --git a/packages/view/src/components/@common/Author/Author.scss b/packages/view/src/components/@common/Author/Author.scss
deleted file mode 100644
index 9c0bdd54..00000000
--- a/packages/view/src/components/@common/Author/Author.scss
+++ /dev/null
@@ -1,78 +0,0 @@
-@import "styles/_pallete";
-@mixin animation {
-  transition:
-    bottom 0.3s ease-in-out,
-    opacity 0.3s ease-in-out;
-}
-@mixin shadow {
-  box-shadow: 0px 0px 3px 1px rgba(100, 100, 100, 0.4);
-}
-@mixin border($border--radius) {
-  border-radius: $border--radius;
-}
-
-@mixin animate($animation, $duration, $method, $times) {
-  -webkit-animation: $animation $duration $method $times;
-  animation: $animation $duration $method $times;
-}
-
-@mixin keyframes($name) {
-  @-webkit-keyframes #{$name} {
-    @content;
-  }
-  @keyframes #{$name} {
-    @content;
-  }
-}
-
-.author {
-  border-radius: 50px;
-  background-color: $white;
-  width: 30px;
-  height: 30px;
-  margin: 0 -5px;
-
-  img {
-    width: 30px;
-    border-radius: 50px;
-  }
-
-  &:hover {
-    @include animation();
-    z-index: 9999;
-  }
-}
-
-[data-tooltip-text] {
-  &:hover {
-    position: relative;
-  }
-
-  &::after {
-    @include animation();
-    @include shadow();
-    @include border(2px);
-
-    content: attr(data-tooltip-text);
-
-    position: absolute;
-    left: 30px;
-    top: -20px;
-    color: $black;
-    font-size: 10px;
-    line-height: 1.5;
-    padding: 5px 12px;
-    min-width: -webkit-max-content;
-    min-width: -moz-max-content;
-    min-width: max-content;
-    word-wrap: break-word;
-    opacity: 0;
-    font-weight: bold;
-    z-index: 9999;
-  }
-
-  &:hover::after {
-    background-color: $white;
-    opacity: 1;
-  }
-}
diff --git a/packages/view/src/components/@common/Author/Author.tsx b/packages/view/src/components/@common/Author/Author.tsx
index 3781433d..a2543d90 100644
--- a/packages/view/src/components/@common/Author/Author.tsx
+++ b/packages/view/src/components/@common/Author/Author.tsx
@@ -1,17 +1,18 @@
+import { Tooltip, Avatar } from "@mui/material";
+
 import type { AuthorInfo } from "types";
-import "./Author.scss";
 
 const Author = ({ name, src }: AuthorInfo) => {
   return (
-    <div
-      className="author"
-      data-tooltip-text={name}
+    <Tooltip
+      title={name}
+      placement="top-start"
     >
-      <img
+      <Avatar
+        alt={name}
         src={src}
-        alt=""
       />
-    </div>
+    </Tooltip>
   );
 };
 

From c98c9e2661fb454b22e188ca1668b9422e036a27 Mon Sep 17 00:00:00 2001
From: Chaewon <cw06155@gmail.com>
Date: Mon, 12 Aug 2024 23:03:37 +0900
Subject: [PATCH 2/2] change avator sizes

---
 packages/view/src/components/@common/Author/Author.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/view/src/components/@common/Author/Author.tsx b/packages/view/src/components/@common/Author/Author.tsx
index a2543d90..71e6d36c 100644
--- a/packages/view/src/components/@common/Author/Author.tsx
+++ b/packages/view/src/components/@common/Author/Author.tsx
@@ -11,6 +11,7 @@ const Author = ({ name, src }: AuthorInfo) => {
       <Avatar
         alt={name}
         src={src}
+        sx={{ width: 30, height: 30 }}
       />
     </Tooltip>
   );