From bb49d5b920b25a6335ce02c9d32527be3076afdb Mon Sep 17 00:00:00 2001
From: Ubinquitous <ubinquitous1@gmail.com>
Date: Wed, 10 Apr 2024 21:46:14 +0900
Subject: [PATCH] =?UTF-8?q?refactor(toastify):=20Toastify=20=EC=BB=B4?=
 =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=A6=AC=ED=8C=A9=ED=84=B0?=
 =?UTF-8?q?=EB=A7=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/globals.css                  |  6 ++----
 components/Toastify/index.tsx    | 11 ++++-------
 components/Toastify/style.css.ts | 20 ++------------------
 3 files changed, 8 insertions(+), 29 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index 39b13cd5..5311f393 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -143,13 +143,11 @@ button {
 
 /* toastify */
 
-.toastify {
-  margin-top: 30px;
-}
-
 .toastify .Toastify__toast {
   background-color: white;
+  top: 40px;
   right: 80px;
   width: 400px;
   color: #274168;
+  border-radius: 0px;
 }
diff --git a/components/Toastify/index.tsx b/components/Toastify/index.tsx
index 26950134..7964dd24 100644
--- a/components/Toastify/index.tsx
+++ b/components/Toastify/index.tsx
@@ -3,13 +3,10 @@ import * as styles from "./style.css";
 
 const Toastify = ({ content }: { content: string }) => {
   return (
-    <div className={styles.container}>
-      <div className={styles.contentBox}>
-        <Image width={999} height={999} className={styles.icon} src="/assets/info.png" alt="INFO" />
-        <div className={styles.content}>{content}</div>
-      </div>
-      <div className={styles.sideBar} />
-    </div>
+    <figure className={styles.container}>
+      <Image width={24} height={24} src="/assets/info.png" alt="INFO" />
+      <figcaption className={styles.content}>{content}</figcaption>
+    </figure>
   );
 };
 
diff --git a/components/Toastify/style.css.ts b/components/Toastify/style.css.ts
index 0672d96d..5bffe8c7 100644
--- a/components/Toastify/style.css.ts
+++ b/components/Toastify/style.css.ts
@@ -8,29 +8,13 @@ export const container = style({
   position: "absolute",
   top: "0",
   left: "0",
-  ...flex.FLEX,
-});
-
-export const contentBox = style({
-  width: "100%",
+  borderRight: `8px solid ${theme.primary}`,
   gap: "5%",
   padding: "5%",
   ...flex.VERTICAL,
 });
 
 export const content = style({
-  ...font.p1,
-  fontWeight: "700",
+  ...font.H5,
   ...flex.BETWEEN,
 });
-
-export const sideBar = style({
-  width: "4%",
-  height: "100%",
-  backgroundColor: theme.primary,
-});
-
-export const icon = style({
-  width: "23px",
-  height: "23px",
-});