AlertMessage 추가

package.json

@@ -16,6 +16,7 @@
     "react-scripts": "5.0.1",
     "react-transition-group": "^4.4.5",
     "styled-components": "^6.1.8",
+    "uuid": "^9.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/component/Alert.js

@@ -0,0 +1,49 @@
+import styled from "styled-components";
+import {useState} from "react";
+import { v4 } from "uuid";
+import {useUiState} from "../context/UiReducer";
+
+const AlertStyle = styled.ul`
+  display: inline-block;
+  
+  position: fixed;
+  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;
+    }
+  }
+`
+
+export const Alert = ({alertMessage}) => {
+  // const [alertMessage, setAlertMessage] = useState([
+  //   {id: v4(), title: "대충 제목", message: "대충 내용 대충 내용 대충 내용 대충 내용 대충 내용 대충 내용 대충 내용"},
+  //   {id: v4(), title: "대충 제목", message: "대충 내용 대충 내용 대충 내용 대충 내용 대충 내용 대충 내용 대충 내용"},
+  //   {id: v4(), title: "대충 제목", message: "대충 내용 대충 내용 대충 내용 대충 내용 대충 내용 대충 내용 대충 내용"},
+  // ])
+
+  return (
+    <AlertStyle>
+      {alertMessage.map(message => (
+        <li key={message.id}>
+          <div className="title">{message.title}</div>
+          <p>{message.message}</p>
+        </li>
+      ))}
+    </AlertStyle>
+  )
+}

src/context/UiReducer.js

@@ -1,13 +1,18 @@
 import React, {useContext, useReducer} from "react";
+import { v4 } from "uuid";
 
 export const UI_ACTION_TYPE = {
   modal_show: "MODAL_SHOW",
   modal_hide: "MODAL_HIDE",
   modal_toggle: "MODAL_TOGGLE",
+
+  alert_message_add : "ALERT_MESSAGE_ADD",
+  alert_message_remove: "ALERT_MESSAGE_REMOVE",
 }
 
 const uiState = {
   isModalShow: false,
+  alertMessage: []
 }
 
 function reducer(state, action) {
@@ -27,6 +32,16 @@ function reducer(state, action) {
         ...state,
         isModalShow: !state.isModalShow
       }
+    case UI_ACTION_TYPE.alert_message_add:
+      return {
+        ...state,
+        alertMessage: [...state.alertMessage, action.message]
+      }
+    case UI_ACTION_TYPE.alert_message_remove:
+      return {
+        ...state,
+        alertMessage: state.alertMessage.filter(m => m.id !== action.id)
+      }
     default:
       throw "Undefined ui reducer action type"
   }

src/section/FirstSection.js

@@ -2,6 +2,8 @@ import styled from "styled-components";
 import {downUp, showLeft, animation, showRight} from "../style/animation";
 import {GoChevronDown} from "react-icons/go";
 import {UI_ACTION_TYPE, useUiDispatch} from "../context/UiReducer";
+import Button from "../component/Button";
+import {v4} from "uuid";
 
 const FirstSectionStyle = styled.section`
   width: 100%;
@@ -117,6 +119,17 @@ export const FirstSection = () => {
     })
   }
 
+  const add = () => {
+    dispatch({
+      type: UI_ACTION_TYPE.alert_message_add,
+      message: {
+        id: v4(),
+        title: "ㅎㅇ",
+        message: "어 그래"
+      }
+    })
+  }
+
   return (
     <FirstSectionStyle>
       <div className="title-wrap">
@@ -155,6 +168,8 @@ export const FirstSection = () => {
         </div>
       </div>
 
+      <Button onClick={add}>추가</Button>
+
       <GoChevronDown className={"go-down"} onClick={scrollDown}/>
     </FirstSectionStyle>
   )

src/section/UiSection.js

@@ -1,6 +1,7 @@
 import styled from "styled-components";
 import Modal from "../component/Modal";
 import {useUiState} from "../context/UiReducer";
+import {Alert} from "../component/Alert";
 
 const UiSectionStyle = styled.section`
   width: 100%;
@@ -19,6 +20,7 @@ const UiSection = () => {
   return (
     <UiSectionStyle>
       <Modal isShow={uiState.isModalShow}/>
+      <Alert alertMessage={uiState.alertMessage}/>
     </UiSectionStyle>
   )
 }