Alert Color Ui

kichan05 · Feb 16, 2024 · 38c7d68 · 38c7d68
1 parent ff218fe
commit 38c7d68
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 6 deletions.
diff --git a/src/component/Alert.js b/src/component/Alert.js
@@ -20,7 +20,12 @@ const AlertMessageStyle = styled.li`
 
   background-color: ${p => p.theme.color.Gray1};
   border: 1px solid ${p => p.theme.color.Gray4};
-  border-left: 5px solid ${p => p.theme.color.Blue5};
+  border-left: 5px solid ${p => {
+    if(p.color)
+      return p.color
+    else
+      return p.theme.color.Blue5
+  }};
   border-radius: 0.25em;
   padding: 12px;
   margin-bottom: 8px;
@@ -72,13 +77,13 @@ const AlertMessage = ({state, message, timeout}) => {
   }
 
   useEffect(() => {
-    // const remove = setTimeout(() => {
-    //   removeMessage(message.id)
-    // }, 5000)
+    const remove = setTimeout(() => {
+      removeMessage(message.id)
+    }, 5000)
   }, [])
 
   return (
-    <AlertMessageStyle state={state} timeout={timeout}>
+    <AlertMessageStyle state={state} timeout={timeout} color={message.color}>
       <div className="title-wrap">
         <div className="title">{message.title}</div>
         <IconButton

diff --git a/src/component/BusunessCard.js b/src/component/BusunessCard.js
@@ -4,6 +4,7 @@ import edcanTypo from "./../assets/edcan_typo.svg"
 import {SCoreDream} from "../style/Font";
 import {UI_ACTION_TYPE, useUiDispatch} from "../context/UiReducer";
 import {v4} from "uuid";
+import {color} from "../style/theme";
 
 const BusinessCardStyle = styled.div`
   width: 300px;
@@ -181,7 +182,8 @@ export const BusinessCard = ({onMouseMove, onMouseOut, cardState}) => {
         message: {
           id: v4(),
           title: "메일 주소 복사 완료",
-          message: "메일 주소를 복사했어요"
+          message: "메일 주소를 복사했어요",
+          color: color.Blue5,
         }
       })
     })