Merge pull request #142 from Team-INSERT/refactor/toastify

refactor : Toastify 컴포넌트 리팩터링

Author: Ubinquitous

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;
 }

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>
   );
 };
 

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",
-});