header alarm 구현완료

src/@type/index.d.ts

@@ -459,3 +459,56 @@ declare module EditType {
 
     type modalType = "image" | "gender" | null;
 }
+
+declare module Alarm {
+    type AlarmItem = {
+        content: AlarmContent[];
+        totalPages: number;
+        currentPage: number;
+    };
+
+    type AlarmContent = CommonAlarm | FollowAlarm;
+    interface CommonAlarm {
+        id: number;
+        type: "COMMENT" | "LIKE_POST" | "MENTION_POST";
+        message: string;
+        agent: {
+            id: number;
+            username: string;
+            name: string;
+            image: {
+                imageUrl: string;
+                imageType: string;
+                imageName: string;
+                imageUUID: string;
+            };
+            hasStory: false;
+        };
+        createdDate: string;
+        postId: number;
+        postImageUrl: string;
+        content: string;
+        mentionsOfContent: string[];
+        hashtagsOfContent: string[];
+    }
+
+    interface FollowAlarm {
+        id: number;
+        type: "FOLLOW";
+        message: string;
+        agent: {
+            id: number;
+            username: string;
+            name: string;
+            image: {
+                imageUrl: string;
+                imageType: string;
+                imageName: string;
+                imageUUID: string;
+            };
+            hasStory: false;
+        };
+        createdDate: string;
+        following: boolean;
+    }
+}

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

@@ -0,0 +1,37 @@
+import { createSlice } from "@reduxjs/toolkit";
+import { loadAlarmList } from "app/store/ducks/alarm/alarmThunk";
+
+export interface AlarmStateProps {
+    alarmList: Alarm.AlarmContent[] | null;
+    totalPage: number;
+}
+
+const initialState: AlarmStateProps = {
+    alarmList: null,
+    totalPage: 0,
+};
+
+const alarmSlice = createSlice({
+    name: " alarm",
+    initialState,
+    reducers: {
+        clearAlarmList: (state) => {
+            state.alarmList = null;
+        },
+    },
+    extraReducers: (build) => {
+        build //
+            .addCase(loadAlarmList.fulfilled, (state, action) => {
+                if (action.payload.currentPage === 1) {
+                    state.alarmList = action.payload.content;
+                    state.totalPage = action.payload.totalPages;
+                } else {
+                    state.alarmList?.push(...action.payload.content);
+                }
+            });
+    },
+});
+
+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<
+    Alarm.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/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

@@ -20,8 +20,10 @@ 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 +73,26 @@ const AvatarWrapper = styled(NavItemWrapper)<{ isSubnavModalOn: boolean }>`
 
 const NavItems = () => {
     const [isSubnavModalOn, setIsSubnavMoalOn] = useState(false);
+    const [isClickAlarm, setIsClickAlarm] = 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,
+        setIsClickAlarm,
+        alarmModalControllerRef,
+    );
+
     const navItems = [
         {
             id: "홈",
@@ -127,8 +141,21 @@ const NavItems = () => {
         {
             id: "피드 활동",
             path: "/",
-            component: <Heart />,
-            activeComponent: <HeartActive />,
+            component: (
+                <span ref={alarmModalControllerRef}>
+                    <Heart onClick={() => setIsClickAlarm(!isClickAlarm)} />
+                </span>
+            ),
+            activeComponent: (
+                <span ref={alarmModalControllerRef} style={{ width: `22px` }}>
+                    <HeartActive
+                        onClick={() => setIsClickAlarm(!isClickAlarm)}
+                    />
+                    {isClickAlarm && (
+                        <Alarm alarmContainerRef={alarmContainerRef} />
+                    )}
+                </span>
+            ),
         },
     ];
 
@@ -144,6 +171,12 @@ const NavItems = () => {
                                     ? navItem.activeComponent
                                     : navItem.component}
                             </div>
+                        ) : navItem.id === "피드 활동" ? (
+                            <>
+                                {isClickAlarm
+                                    ? navItem.activeComponent
+                                    : navItem.component}
+                            </>
                         ) : (
                             <NavLink to={navItem.path}>
                                 {navItem.component}
@@ -154,7 +187,6 @@ const NavItems = () => {
 
                 <AvatarWrapper isSubnavModalOn={isSubnavModalOn}>
                     <div
-                        ref={subModalControllerRef}
                         onClick={() => {
                             setIsSubnavMoalOn(!isSubnavModalOn);
                         }}
@@ -166,6 +198,7 @@ const NavItems = () => {
                                 data-testid="user-avatar"
                                 draggable="false"
                                 src={userInfo?.memberImageUrl}
+                                ref={subModalControllerRef}
                             />
                         </div>
                         {isSubnavModalOn && (

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

@@ -0,0 +1,71 @@
+import React from "react";
+import styled from "styled-components";
+import AlarmProfile from "components/Common/Header/alarm/alarm_profile";
+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: Alarm.CommonAlarm }) {
+    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>
+    );
+}

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

@@ -0,0 +1,51 @@
+import AlarmProfile from "components/Common/Header/alarm/alarm_profile";
+import { removeRefer } from "components/Common/Header/alarm/utils";
+import FollowingModal from "components/Home/Modals/FollowingModal";
+import useGapText from "hooks/useGapText";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+
+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};
+        }
+    }
+`;
+
+export default function FollowAlarm({ alarm }: { alarm: Alarm.FollowAlarm }) {
+    const alarmMessage = removeRefer(alarm.message);
+
+    return (
+        <Container>
+            <AlarmProfile agent={alarm.agent} />
+            <div className="alarm">
+                <Link to={`/profile/${alarm.agent.username}`}>
+                    <span className="username">{alarm.agent.username}</span>
+                </Link>
+                {alarmMessage}{" "}
+                <span className="create-date">
+                    {useGapText(alarm.createdDate)}
+                </span>
+            </div>
+            {/* <button> */}
+            {alarm.following ? "팔로잉" : "팔로우"}
+            {/* {alarm.following ? <FollowingModal /> : <button>hi</button>} */}
+            {/* </button> */}
+        </Container>
+    );
+}

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

@@ -0,0 +1,49 @@
+import AlarmItem from "components/Common/Header/alarm/alarmType/alarm_item";
+import FollowAlarm from "components/Common/Header/alarm/alarmType/follow_alarm";
+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: Alarm.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>
+    );
+}