From a251db19bf8f672e130df7cca41465ee6b885e05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=B0=94=ED=82=A4=EC=B0=AC?= Date: Wed, 14 Feb 2024 16:14:05 +0900 Subject: [PATCH] =?UTF-8?q?AlertMessage=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 19 +++++++++++--- package.json | 1 + src/component/Alert.js | 49 +++++++++++++++++++++++++++++++++++++ src/context/UiReducer.js | 15 ++++++++++++ src/section/FirstSection.js | 15 ++++++++++++ src/section/UiSection.js | 2 ++ 6 files changed, 98 insertions(+), 3 deletions(-) create mode 100644 src/component/Alert.js diff --git a/package-lock.json b/package-lock.json index 5ff4993..27bbbbd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,6 +21,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" } }, @@ -15980,6 +15981,14 @@ "websocket-driver": "^0.7.4" } }, + "node_modules/sockjs/node_modules/uuid": { + "version": "8.3.2", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", + "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "bin": { + "uuid": "dist/bin/uuid" + } + }, "node_modules/source-list-map": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz", @@ -17368,9 +17377,13 @@ } }, "node_modules/uuid": { - "version": "8.3.2", - "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz", - "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==", + "version": "9.0.1", + "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", + "integrity": "sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==", + "funding": [ + "https://github.com/sponsors/broofa", + "https://github.com/sponsors/ctavan" + ], "bin": { "uuid": "dist/bin/uuid" } diff --git a/package.json b/package.json index b34ea0b..5ca3b4e 100644 --- a/package.json +++ b/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": { diff --git a/src/component/Alert.js b/src/component/Alert.js new file mode 100644 index 0000000..f6a89ed --- /dev/null +++ b/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 ( + + {alertMessage.map(message => ( +
  • +
    {message.title}
    +

    {message.message}

    +
    • + ))} +     + ) +} \ No newline at end of file diff --git a/src/context/UiReducer.js b/src/context/UiReducer.js index 30dd144..684136e 100644 --- a/src/context/UiReducer.js +++ b/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" } diff --git a/src/section/FirstSection.js b/src/section/FirstSection.js index 7f7c09c..a7aad44 100644 --- a/src/section/FirstSection.js +++ b/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 (
    @@ -155,6 +168,8 @@ export const FirstSection = () => {
    + +     ) diff --git a/src/section/UiSection.js b/src/section/UiSection.js index 687b766..3d95d99 100644 --- a/src/section/UiSection.js +++ b/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 ( + ) }