AlertMessage 삭제

kichan05 · Feb 14, 2024 · 5c5d09a · 5c5d09a
1 parent a251db1
commit 5c5d09a
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 33 deletions.
diff --git a/src/component/Alert.js b/src/component/Alert.js
@@ -1,7 +1,10 @@
 import styled from "styled-components";
 import {useState} from "react";
 import { v4 } from "uuid";
-import {useUiState} from "../context/UiReducer";
+import {UI_ACTION_TYPE, useUiDispatch, useUiState} from "../context/UiReducer";
+import {logDOM} from "@testing-library/react";
+import {GoX} from "react-icons/go";
+import {IconButton} from "./IconButton";
 
 const AlertStyle = styled.ul`
   display: inline-block;
@@ -10,39 +13,70 @@ const AlertStyle = styled.ul`
   top: 8px;
   right: 12px;
   
-  li {
-    width: 350px;
-    
-    background-color: ${p => p.theme.color.Blue3};
-    border-radius: 0.25em;
-    padding: 12px;
-    margin-bottom: 8px;
-    
-    .title {
-      font-size: 1.1em;
-      font-weight: bold;
-    }
-    
-    p {
-      margin-top: 4px;
-    }
+  pointer-events: visible;
+`
+
+const AlertMessageStyle = styled.li`
+  width: 350px;
+
+  background-color: ${p => p.theme.color.Blue3};
+  border-radius: 0.25em;
+  padding: 12px;
+  margin-bottom: 8px;
+  
+  .title-wrap {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+
+  .title {
+    font-size: 1.1em;
+    font-weight: bold;
+  }
+  
+  .close-icon {
+    opacity: 0;
+    transition: 200ms;
+  }
+  
+  &:hover .close-icon {
+    opacity: 1;
+  }
+
+  p {
+    margin-top: 4px;
   }
 `
 
-export const Alert = ({alertMessage}) => {
-  // const [alertMessage, setAlertMessage] = useState([
-  //   {id: v4(), title: "대충 제목", message: "대충 내용 대충 내용 대충 내용 대충 내용 대충 내용 대충 내용 대충 내용"},
-  //   {id: v4(), title: "대충 제목", message: "대충 내용 대충 내용 대충 내용 대충 내용 대충 내용 대충 내용 대충 내용"},
-  //   {id: v4(), title: "대충 제목", message: "대충 내용 대충 내용 대충 내용 대충 내용 대충 내용 대충 내용 대충 내용"},
-  // ])
+const AlertMessage = ({message}) => {
+  const uiDispatch = useUiDispatch()
+
+  const removeMessage = (id) => {
+    uiDispatch({type: UI_ACTION_TYPE.alert_message_remove, id})
+  }
 
+  return (
+    <AlertMessageStyle>
+      <div className="title-wrap">
+        <div className="title">{message.title}</div>
+        <IconButton
+          width={24}
+          size={20}
+          className={"close-icon"}
+          onClick={() => removeMessage(message.id)}
+        ><GoX/></IconButton>
+      </div>
+      <p>{message.message}</p>
+    </AlertMessageStyle>
+  )
+}
+
+export const Alert = ({alertMessage}) => {
   return (
     <AlertStyle>
-      {alertMessage.map(message => (
-        <li key={message.id}>
-          <div className="title">{message.title}</div>
-          <p>{message.message}</p>
-        </li>
+      {alertMessage.map((message, index) => (
+        <AlertMessage key={message.id} message={message}/>
       ))}
     </AlertStyle>
   )

diff --git a/src/component/IconButton.js b/src/component/IconButton.js
@@ -3,8 +3,8 @@ import {borderColor} from "polished";
 import {color} from "../style/theme";
 
 const IconButtonStyle = styled.button`
-  width: 45px;
-  height: 45px;
+  width: ${p => p.width}px;
+  aspect-ratio: 1/1;
   
   color: ${p => p.color};
   font-size: ${p => p.size}px;
@@ -15,23 +15,24 @@ const IconButtonStyle = styled.button`
   align-items: center;
   justify-content: center;
   
-  transition: 300ms;
+  transition: background-color 300ms, transform 300ms;
   
   &:hover {
     background-color: ${p => p.theme.color.Gray2};
     transform: translateY(-3px);
   }
 `
 
-export const IconButton = ({children, color, background, size, ...rest}) => {
+export const IconButton = ({children, width, color, background, size, ...rest}) => {
   return (
-    <IconButtonStyle color={color} background={background} size={size} {...rest}>
+    <IconButtonStyle width={width} color={color} background={background} size={size} {...rest}>
       {children}
     </IconButtonStyle>
   )
 }
 
 IconButton.defaultProps = {
+  width: 45,
   color: color.Gray8,
   background: 'transparent',
   size: 22