24.02.17-2

src/component/Alert.js

@@ -1,7 +1,7 @@
 import styled, {css} from "styled-components";
-import {useEffect, useState} from "react";
+import React, {useEffect, useRef, useState} from "react";
 import {UI_ACTION_TYPE, useUiDispatch} from "../context/UiReducer";
-import {GoX} from "react-icons/go";
+import {GoX, GoArchive} from "react-icons/go";
 import {IconButton} from "./IconButton";
 import {CSSTransition, TransitionGroup} from "react-transition-group";
 
@@ -71,34 +71,51 @@ const AlertMessageStyle = styled.li`
 
 const AlertMessage = ({state, message, timeout}) => {
   const uiDispatch = useUiDispatch()
+  let removeTimeOut = useRef()
 
   const removeMessage = (id) => {
     uiDispatch({type: UI_ACTION_TYPE.alert_message_remove, id})
   }
 
   useEffect(() => {
-    const remove = setTimeout(() => {
+    removeTimeOut.current = setTimeout(() => {
       removeMessage(message.id)
     }, 5000)
+    console.log(removeTimeOut.current)
+
+    return () => {
+      console.log("unmount alert")
+    }
   }, [])
 
   return (
     <AlertMessageStyle state={state} timeout={timeout} color={message.color}>
       <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 className="icon-wrap">
+          <IconButton
+            width={24}
+            size={20}
+            className={"close-icon"}
+            onClick={() => {
+              clearTimeout(removeTimeOut.current)
+            }}
+          ><GoArchive/></IconButton>
+          {/*todo : 압정 아이콘으로 변경*/}
+          <IconButton
+            width={24}
+            size={20}
+            className={"close-icon"}
+            onClick={() => removeMessage(message.id)}
+          ><GoX/></IconButton>
+        </div>
       </div>
       <p>{message.message}</p>
     </AlertMessageStyle>
   )
 }
 
-export const Alert = ({alertMessage}) => {
+const Alert = ({alertMessage}) => {
   return (
     <AlertStyle>
       <TransitionGroup>
@@ -112,4 +129,6 @@ export const Alert = ({alertMessage}) => {
       </TransitionGroup>
     </AlertStyle>
   )
-}
+}
+
+export default React.memo(Alert)

src/data/ProfileData.js

@@ -35,6 +35,11 @@ export const profileData = [
     ),
     icon: Pin,
   },
+  {
+    title: "2023 선린 장학생",
+    date: "2023.09", //todo : 날자가 언제였지
+    icon: Pin,
+  },
   {
     title: "제 8회 선린 해커톤 동상 수상",
     date: "2022.07",
@@ -76,14 +81,9 @@ export const profileData = [
         대회 전체적인 디자인과 포스터 현수막, 티셔츠 등을 디자인했습니다.
         <br/><br/>
         자세한 내용은 <a href={"#"} target={'_blank'}>대회 진행 후기</a>와 <a href="#" target={"_blank"}>디자인 결과물</a>을 참고해주세요
-        //Todo : url 추가
+        {/*Todo : url 추가*/}
       </>
     ),
     icon: Pin,  //Todo : 디자인은 아이콘 변경
   },
-  {
-    title: "2023 선린 장학생",
-    date: "2023.09", //todo : 날자가 언제였지
-    icon: Pin,
-  }
 ]

src/section/UiSection.js

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 import Modal from "../component/Modal";
 import {useUiState} from "../context/UiReducer";
-import {Alert} from "../component/Alert";
+import Alert from "../component/Alert";
 
 const UiSectionStyle = styled.section`
   width: 100%;

src/style/GlobalStyle.js

@@ -7,7 +7,7 @@ export const GlobalStyle = createGlobalStyle`
   ${FontStyle}
 
   *, *::before, *::after {
-    font-family: SUIT, serif;
+    font-family: 'SUIT Variable', sans-serif;
   }
 
   body {