From 5c5d09a65176603562f08bee9686d1bdad9b57d2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EB=B0=94=ED=82=A4=EC=B0=AC?= <ckstmznf@naver.com>
Date: Wed, 14 Feb 2024 16:37:08 +0900
Subject: [PATCH] =?UTF-8?q?AlertMessage=20=EC=82=AD=EC=A0=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/component/Alert.js      | 90 +++++++++++++++++++++++++------------
 src/component/IconButton.js | 11 ++---
 2 files changed, 68 insertions(+), 33 deletions(-)

diff --git a/src/component/Alert.js b/src/component/Alert.js
index f6a89ed..1ab92da 100644
--- 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
index 7e4f543..7952630 100644
--- 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,7 +15,7 @@ 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};
@@ -23,15 +23,16 @@ const IconButtonStyle = styled.button`
   }
 `
 
-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