header alarm 구현완료

src/@type/index.d.ts

@@ -200,6 +200,7 @@ declare module ModalType {
         | "report"
         | "articleMenu"
         | "shareWith"
+        | "alarmUnfollowing"
         | null;
 
     interface ModalPositionProps {
@@ -460,3 +461,39 @@ declare module EditType {
 
     type modalType = "image" | "gender" | null;
 }
+
+declare module AlarmType {
+    interface AlarmItem {
+        content: AlarmContent[];
+        totalPages: number;
+        currentPage: number;
+    }
+
+    type AlarmContent = PostAlarm | FollowAlarm;
+
+    interface CommonAlarm {
+        id: number;
+        type: "COMMENT" | "LIKE_POST" | "MENTION_POST";
+        message: string;
+        agent: {
+            id: number;
+            username: string;
+            name: string;
+            image: CommonType.ImageInfo;
+            hasStory: false;
+        };
+        createdDate: string;
+    }
+    interface PostAlarm extends CommonAlarm {
+        postId: number;
+        postImageUrl: string;
+        content: string;
+        mentionsOfContent: string[];
+        hashtagsOfContent: string[];
+    }
+
+    interface FollowAlarm extends CommonAlarm {
+        type: "FOLLOW";
+        following: boolean;
+    }
+}

src/app/store/ducks/alarm/alarmSlice.ts

@@ -0,0 +1,16 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+export interface AlarmStateProps {}
+
+const initialState: AlarmStateProps = {};
+
+const alarmSlice = createSlice({
+    name: " alarm",
+    initialState,
+    reducers: {},
+    extraReducers: (build) => {},
+});
+
+export const alarmAction = alarmSlice.actions;
+
+export const alarmReducer = alarmSlice.reducer;

src/app/store/ducks/alarm/alarmThunk.ts

@@ -0,0 +1,22 @@
+import { authorizedCustomAxios } from "customAxios";
+import { createAsyncThunk } from "@reduxjs/toolkit";
+
+export const loadAlarmList = createAsyncThunk<
+    AlarmType.AlarmItem,
+    { page: number }
+>("alarm/loadList", async (payload, ThunkOptions) => {
+    try {
+        const config = {
+            params: {
+                page: payload.page,
+                size: 10,
+            },
+        };
+        const {
+            data: { data },
+        } = await authorizedCustomAxios.get(`/alarms`, config);
+        return { ...data, currentPage: payload.page };
+    } catch (error) {
+        ThunkOptions.rejectWithValue(error);
+    }
+});

src/app/store/ducks/modal/modalSlice.ts

@@ -16,6 +16,13 @@ const modalSlice = createSlice({
     name: "modal",
     initialState,
     reducers: {
+        setModalUsernameAndImageUrl: (
+            state,
+            action: PayloadAction<{ nickname: string; imageUrl: string }>,
+        ) => {
+            state.memberNickname = action.payload.nickname;
+            state.memberImageUrl = action.payload.imageUrl;
+        },
         startModal: (
             state,
             action: PayloadAction<ModalType.ModalStateProps>,

src/app/store/store.ts

@@ -1,3 +1,4 @@
+import { alarmReducer } from "./ducks/alarm/alarmSlice";
 import { configureStore } from "@reduxjs/toolkit";
 import { authReducer } from "app/store/ducks/auth/authSlice";
 import { homeReducer } from "app/store/ducks/home/homeSlice";
@@ -18,6 +19,7 @@ export const store = configureStore({
         profile: profileReducer,
         edit: editReducer,
         common: commonReducer,
+        alarm: alarmReducer,
     },
     middleware: (getDefaultMiddleware) =>
         getDefaultMiddleware({

src/components/Common/Header/NavItems.tsx

@@ -8,20 +8,19 @@ import { ReactComponent as DirectActive } from "assets/Svgs/direct-active.svg";
 import { ReactComponent as NewArticle } from "assets/Svgs/new-article.svg";
 import { ReactComponent as NewArticleActive } from "assets/Svgs/new-article-active.svg";
 
-import { ReactComponent as Map } from "assets/Svgs/map.svg";
-import { ReactComponent as MapActive } from "assets/Svgs/map-active.svg";
-
 import { ReactComponent as Heart } from "assets/Svgs/heart.svg";
 import { ReactComponent as HeartActive } from "assets/Svgs/heart-active.svg";
 
-import { NavLink, Link } from "react-router-dom";
+import { NavLink } from "react-router-dom";
 import { useAppDispatch, useAppSelector } from "app/store/Hooks";
 import { selectView } from "app/store/ducks/direct/DirectSlice";
 import { uploadActions } from "app/store/ducks/upload/uploadSlice";
 import Upload from "components/Common/Header/Upload";
 import SubNav from "./SubNav";
+
 import { useRef, useState } from "react";
 import useOutsideClick from "hooks/useOutsideClick";
+import Alarm from "components/Common/Header/alarm";
 
 const Container = styled.div`
     flex: 1 0 0%;
@@ -71,14 +70,22 @@ const AvatarWrapper = styled(NavItemWrapper)<{ isSubnavModalOn: boolean }>`
 
 const NavItems = () => {
     const [isSubnavModalOn, setIsSubnavMoalOn] = useState(false);
+    const [isAlarmOn, setIsAlarmOn] = useState(false);
+
     const dispatch = useAppDispatch();
     const isUploading = useAppSelector(({ upload }) => upload.isUploading);
     const userInfo = useAppSelector((state) => state.auth.userInfo);
 
+    // setting
     const navContainerRef = useRef<HTMLDivElement | null>(null);
-    const subModalControllerRef = useRef<HTMLDivElement | null>(null);
+    const subModalControllerRef = useRef<HTMLImageElement | null>(null);
     useOutsideClick(navContainerRef, setIsSubnavMoalOn, subModalControllerRef);
 
+    // alarm
+    const alarmContainerRef = useRef<HTMLDivElement | null>(null);
+    const alarmModalControllerRef = useRef<HTMLSpanElement | null>(null);
+    useOutsideClick(alarmContainerRef, setIsAlarmOn, alarmModalControllerRef);
+
     const navItems = [
         {
             id: "홈",
@@ -127,8 +134,19 @@ const NavItems = () => {
         {
             id: "피드 활동",
             path: "/",
-            component: <Heart />,
-            activeComponent: <HeartActive />,
+            component: (
+                <span ref={alarmModalControllerRef}>
+                    <Heart onClick={() => setIsAlarmOn(!isAlarmOn)} />
+                </span>
+            ),
+            activeComponent: (
+                <span ref={alarmModalControllerRef} style={{ width: `22px` }}>
+                    <HeartActive onClick={() => setIsAlarmOn(!isAlarmOn)} />
+                    {isAlarmOn && (
+                        <Alarm alarmContainerRef={alarmContainerRef} />
+                    )}
+                </span>
+            ),
         },
     ];
 
@@ -144,6 +162,12 @@ const NavItems = () => {
                                     ? navItem.activeComponent
                                     : navItem.component}
                             </div>
+                        ) : navItem.id === "피드 활동" ? (
+                            <div>
+                                {isAlarmOn
+                                    ? navItem.activeComponent
+                                    : navItem.component}
+                            </div>
                         ) : (
                             <NavLink to={navItem.path}>
                                 {navItem.component}
@@ -154,7 +178,6 @@ const NavItems = () => {
 
                 <AvatarWrapper isSubnavModalOn={isSubnavModalOn}>
                     <div
-                        ref={subModalControllerRef}
                         onClick={() => {
                             setIsSubnavMoalOn(!isSubnavModalOn);
                         }}
@@ -166,6 +189,7 @@ const NavItems = () => {
                                 data-testid="user-avatar"
                                 draggable="false"
                                 src={userInfo?.memberImageUrl}
+                                ref={subModalControllerRef}
                             />
                         </div>
                         {isSubnavModalOn && (

src/components/Common/Header/alarm/AlarmList.tsx

@@ -0,0 +1,49 @@
+import AlarmItem from "components/Common/Header/alarm/alarmType/AlarmItem";
+import FollowAlarm from "components/Common/Header/alarm/alarmType/FollowAlarm";
+import useOnView from "hooks/useOnView";
+import { useEffect, useRef } from "react";
+import styled from "styled-components";
+
+const Container = styled.ul`
+    display: flex;
+    flex-direction: column;
+
+    .alarm-item {
+        padding: 12px 16px;
+    }
+`;
+
+export default function AlarmList({
+    alarmList,
+    onLoadExtraAlarm,
+}: {
+    alarmList: AlarmType.AlarmContent[];
+    onLoadExtraAlarm: () => void;
+}) {
+    const lastAlarmItemRef = useRef<HTMLLIElement>(null);
+    const isVisible = useOnView(lastAlarmItemRef);
+
+    useEffect(() => {
+        isVisible && onLoadExtraAlarm();
+    }, [isVisible]);
+
+    return (
+        <Container>
+            {alarmList.map((alarm, index) => (
+                <li
+                    className="alarm-item"
+                    key={alarm.id}
+                    ref={
+                        index === alarmList.length - 4 ? lastAlarmItemRef : null
+                    }
+                >
+                    {alarm.type === "FOLLOW" ? (
+                        <FollowAlarm alarm={alarm} />
+                    ) : (
+                        <AlarmItem alarm={alarm} />
+                    )}
+                </li>
+            ))}
+        </Container>
+    );
+}

src/components/Common/Header/alarm/AlarmProfile.tsx

@@ -0,0 +1,25 @@
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+
+const Container = styled.div`
+    img {
+        height: 44px;
+        width: 44px;
+        border-radius: 50%;
+    }
+`;
+
+export default function AlarmProfile({
+    agent,
+}: Pick<AlarmType.AlarmContent, "agent">) {
+    return (
+        <Container>
+            <Link to={`/profile/${agent.username}`}>
+                <img
+                    src={agent.image.imageUrl}
+                    alt={`${agent.username}님의 이미지`}
+                ></img>
+            </Link>
+        </Container>
+    );
+}

src/components/Common/Header/alarm/alarmType/AlarmItem.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import styled from "styled-components";
+import AlarmProfile from "components/Common/Header/alarm/AlarmProfile";
+import { Link } from "react-router-dom";
+import useGapText from "hooks/useGapText";
+import { removeRefer } from "components/Common/Header/alarm/utils";
+import StringFragmentWithMentionOrHashtagLink from "components/Common/StringFragmentWithMentionOrHashtagLink";
+
+const Container = styled.div`
+    display: flex;
+    flex: 1;
+
+    .alarm {
+        margin: 0 12px;
+        flex: 1;
+
+        a {
+            text-decoration: none;
+
+            .username {
+                font-weight: 700;
+            }
+        }
+
+        .create-date {
+            color: ${(props) => props.theme.font.gray};
+        }
+    }
+
+    .relative-image {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        img {
+            height: 40px;
+            width: 40px;
+        }
+    }
+`;
+
+export default function AlarmItem({ alarm }: { alarm: AlarmType.PostAlarm }) {
+    const alarmMessage = removeRefer(alarm.message);
+    // 무한스크롤
+    // 컴포넌트 언마운트 -> alarm창 닫도록
+
+    return (
+        <Container>
+            <AlarmProfile agent={alarm.agent} />
+            <div className="alarm">
+                <Link to={`/profile/${alarm.agent.username}`}>
+                    <span className="username">{alarm.agent.username}</span>
+                </Link>
+                {alarmMessage}
+                <StringFragmentWithMentionOrHashtagLink
+                    str={alarm.content}
+                    mentions={alarm.mentionsOfContent}
+                    hashtags={alarm.hashtagsOfContent}
+                />{" "}
+                <span className="create-date">
+                    {useGapText(alarm.createdDate)}
+                </span>
+            </div>
+            <div className="relative-image">
+                <Link to={`/p/${alarm.postId}`}>
+                    <img src={alarm.postImageUrl} alt={"이미지 썸네일"}></img>
+                </Link>
+            </div>
+        </Container>
+    );
+}