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

refactor : Toastify 컴포넌트 리팩터링
Team-INSERT · Apr 11, 2024 · bd44c51 · bd44c51
2 parents 1b207ce + bb49d5b
commit bd44c51
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 29 deletions.
diff --git 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
@@ -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
@@ -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",
-});