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 (
+
+
+
{message.title}
+
removeMessage(message.id)}
+ >
+
+ {message.message}
+
+ )
+}
+
+export const Alert = ({alertMessage}) => {
return (
- {alertMessage.map(message => (
-
- {message.title}
- {message.message}
-
+ {alertMessage.map((message, index) => (
+
))}
)
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 (
-
+
{children}
)
}
IconButton.defaultProps = {
+ width: 45,
color: color.Gray8,
background: 'transparent',
size: 22