신고하기 구현 및 토스트 구현 (issue #254, issue #253, issue #236)

src/App.tsx

@@ -4,7 +4,6 @@ import { GlobalStyle } from './style/global';
 import { defaultTheme } from './style/theme';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { SearchFilteringProvider } from './context/SearchFilteringContext';
-import useNotification from './hooks/useNotification';
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -16,7 +15,6 @@ const queryClient = new QueryClient({
 });
 
 function App() {
-  const { isSignal, getSendAlarm } = useNotification();
   return (
     <ThemeProvider theme={defaultTheme}>
       <SearchFilteringProvider>

src/api/alarm.api.ts

@@ -32,3 +32,16 @@ export const patchAlarm = async (id: number) => {
     console.log(e);
   }
 };
+
+export const testLiveAlarm = async () => {
+  try {
+    const response = await httpClient.get<ApiAlarmList>(
+      `/user/send-alarm?alarmFilter=0`
+    );
+
+    return response;
+  } catch (e) {
+    console.error(e);
+    throw e;
+  }
+};

src/api/projectLists.api.ts

@@ -11,7 +11,7 @@ export const getProjectLists = async (params: SearchFilters) => {
       params,
       paramsSerializer: { indexes: null },
     });
-    
+
     return response.data.data;
   } catch (e) {
     console.log('getProjectLists', e);

src/api/reply.api.ts

@@ -21,7 +21,6 @@ export const postReply = async (
   commentId: number,
   content: string
 ) => {
-  console.log(content);
   try {
     const response = await httpClient.post(
       `/project/${projectId}/comment/${commentId}/recomment`,

src/api/report.api.ts

@@ -0,0 +1,15 @@
+import { ApiPostContent } from '../models/report';
+import { httpClient } from './http.api';
+
+export const postReport = async (formData: ApiPostContent) => {
+  try {
+    const response = await httpClient.post(`/report`, formData);
+    if (response.status !== 200) {
+      throw new Error(`${response.status}`);
+    }
+    return response.status;
+  } catch (error) {
+    console.error(error);
+    throw error;
+  }
+};

src/components/comment/CommentLayout.styled.ts

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
 
-export const Container = styled.div``;
+export const Container = styled.div`
+  padding-bottom: 100px;
+`;
 
 export const CommentCountsContainer = styled.div`
   margin-bottom: 20px;
@@ -27,3 +29,7 @@ export const ReplyContainer = styled.div`
   padding-left: 100px;
   margin-top: 20px;
 `;
+
+export const ErrorMessage = styled.p`
+  color: #333;
+`;

src/components/comment/CommentLayout.tsx

@@ -18,19 +18,33 @@ const CommentLayout = ({
   const { getCommentList, isLoading, isFetching, isError } =
     useGetComment(projectId);
 
+  if (!getCommentList) {
+    return (
+      <S.Container>
+        <S.CommentCountsContainer>
+          <S.Count>댓글 없음</S.Count>
+        </S.CommentCountsContainer>
+      </S.Container>
+    );
+  }
+
   if (isLoading || isFetching) {
     return <LoadingSpinner />;
   }
 
   if (isError) {
     console.error(isError);
-    return '댓글을 불러오는 중 오류가 발생했습니다. 다시 시도해 주세요.';
+    return (
+      <S.ErrorMessage>
+        댓글을 불러오는 중 오류가 발생했습니다. 다시 시도해 주세요.
+      </S.ErrorMessage>
+    );
   }
 
   return (
     <S.Container>
       <S.CommentCountsContainer>
-        <S.Count>댓글 {getCommentList?.length || 0}개</S.Count>
+        <S.Count>댓글 {getCommentList.length}개</S.Count>
       </S.CommentCountsContainer>
 
       <S.CommentInput>

src/components/comment/DropDownItem.tsx

@@ -0,0 +1,70 @@
+import useDeleteComment from '../../hooks/CommentHooks/useDeleteComment';
+import useDeleteReply from '../../hooks/CommentHooks/useDeleteReply';
+import { useModal } from '../../hooks/useModal';
+import ReportModal from '../reportComponent/ReportModal';
+import * as S from './DropDownItem.styled';
+
+interface DropdownProps {
+  projectId: number;
+  activateEditMode?: number | null;
+  commentId: number;
+  recommentId?: number;
+  loginUserId?: number;
+  commentUserId: number;
+  reportTitle: { userImg: string; userName: string } | string;
+  reply?: boolean;
+  onEdit?: () => void;
+}
+
+const DropDownItem = ({
+  projectId,
+  onEdit,
+  activateEditMode,
+  commentId,
+  recommentId,
+  commentUserId,
+  loginUserId,
+  reply,
+  reportTitle,
+}: DropdownProps) => {
+  const { removeComment } = useDeleteComment(projectId);
+  const { removeReply } = useDeleteReply(commentId, projectId);
+  const { isOpen, handleOpenReportModal, handleCloseReportModal } = useModal();
+
+  const onDelete = (commentId: number, recommentId?: number) => {
+    if (reply && recommentId) {
+      if (confirm('답글을 완성히 삭제할까요?')) removeReply(recommentId);
+    } else {
+      if (confirm('댓글을 완성히 삭제할까요?')) removeComment(commentId);
+    }
+  };
+
+  return (
+    <>
+      <S.Container>
+        <S.Item onClick={handleOpenReportModal}>신고하기</S.Item>
+
+        {loginUserId === commentUserId && (
+          <>
+            <S.Item onClick={onEdit}>
+              {activateEditMode === commentId ? '수정 취소하기' : '수정하기'}
+            </S.Item>
+            <S.Item onClick={() => onDelete(commentId, recommentId)}>
+              삭제하기
+            </S.Item>{' '}
+          </>
+        )}
+      </S.Container>
+      {isOpen && (
+        <ReportModal
+          reportTitle={reportTitle}
+          targetId={recommentId ? recommentId : commentId}
+          type={recommentId ? 'recomment' : 'comment'}
+          onClose={handleCloseReportModal}
+        />
+      )}
+    </>
+  );
+};
+
+export default DropDownItem;

src/components/comment/commentComponent/CommentComponentLayout.tsx

@@ -1,6 +1,6 @@
 import * as S from './CommentComponentLayout.styled';
 import DropDown from '../../common/dropDown/DropDown';
-import DropDownItem from '../../common/dropDown/DropDownItem';
+import DropDownItem from '../DropDownItem';
 import { CommentType } from '../../../models/comment';
 import dropdownButton from '../../../assets/dropdownButton.svg';
 import useComment from '../../../hooks/CommentHooks/useComment';
@@ -11,7 +11,7 @@ import CommentComponent from './commentComponent/CommentComponent';
 
 interface CommentLayoutProps {
   projectId: number;
-  getCommentList: CommentType[] | undefined;
+  getCommentList: CommentType[];
   createrId?: number;
   loginUserId?: number | undefined;
 }
@@ -62,6 +62,7 @@ const CommentComponentLayout = ({
                 onEdit={() => onEdit(item.id)}
                 loginUserId={loginUserId}
                 commentUserId={item.user.id}
+                reportTitle={item.content}
                 activateEditMode={activateEditMode}
               />
             </DropDown>

src/components/comment/commentComponent/commentComponent/CommentComponent.styled.ts

@@ -21,7 +21,11 @@ export const NickName = styled.p`
 `;
 
 export const Comment = styled.span`
-  margin-left: 11px;
+  display: inline-block;
+  max-width: calc(100% - 12px);
+  word-break: break-word;
+  white-space: pre-wrap;
+  margin-left: 12px;
 `;
 
 export const ReplyInputButton = styled.div`
@@ -49,8 +53,3 @@ export const ErrorMessage = styled.div`
   margin-left: 15px;
   margin-bottom: 10px;
 `;
-
-export const Message = styled.p`
-  color: ${({ theme }) => theme.color.red};
-  font-size: 10px;
-`;

src/components/comment/replyComponent/ReplyComponent.styled.ts

@@ -24,7 +24,11 @@ export const NickName = styled.p`
 `;
 
 export const Comment = styled.span`
-  margin-left: 11px;
+  display: inline-block;
+  max-width: calc(100% - 12px);
+  word-break: break-word;
+  white-space: pre-wrap;
+  margin-left: 12px;
 `;
 
 export const ReplyContainer = styled.div`
@@ -60,8 +64,3 @@ export const ErrorMessage = styled.div`
   padding-left: 15px;
   margin-bottom: 10px;
 `;
-
-export const Message = styled.p`
-  color: ${({ theme }) => theme.color.red};
-  font-size: 10px;
-`;

src/components/comment/replyComponent/ReplyComponent.tsx

@@ -3,7 +3,7 @@ import * as S from './ReplyComponent.styled';
 import DefaultImg from '../../../assets/defaultImg.png';
 import useComment from '../../../hooks/CommentHooks/useComment';
 import DropDown from '../../common/dropDown/DropDown';
-import DropDownItem from '../../common/dropDown/DropDownItem';
+import DropDownItem from '../DropDownItem';
 import dropdownButton from '../../../assets/dropdownButton.svg';
 import CommentInput from '../commentInput/CommentInput';
 import useGetReply from '../../../hooks/CommentHooks/useGetReply';
@@ -84,6 +84,7 @@ const ReplyComponent = ({
           onEdit={() => onEdit(item.id)}
           loginUserId={loginUserId}
           commentUserId={item.user.id}
+          reportTitle={item.content}
           activateEditMode={activateEditMode}
           reply={true}
         />

src/components/common/Toast/Toast.styled.ts

@@ -0,0 +1,45 @@
+import styled, { keyframes } from 'styled-components';
+
+const fadeInUp = keyframes`
+  from { opacity: 0; transform: translateY(20px); }
+  to   { opacity: 1; transform: translateY(0); }
+`;
+const fadeOut = keyframes`
+  from { opacity: 1; }
+  to   { opacity: 0; }
+`;
+
+export const Container = styled.div`
+  position: fixed;
+  width: 330px;
+  bottom: 30px;
+  right: 30px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  z-index: 1000;
+`;
+
+export const Item = styled.div<{ $exiting: boolean }>`
+  background-color: ${({ theme }) => theme.buttonScheme.grey.color};
+  padding: 12px 20px;
+  border-radius: ${({ theme }) => theme.borderRadius.small};
+  animation: ${fadeInUp} 0.3s ease-out,
+    ${({ $exiting }) => $exiting && fadeOut} 0.3s ease-in forwards;
+`;
+
+export const LiveMessage = styled.p`
+  color: ${({ theme }) => theme.color.white};
+  font-size: 0.95rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+export const LiveDate = styled.p`
+  color: ${({ theme }) => theme.color.white};
+  font-size: 0.95rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;

src/components/common/Toast/ToastContainer.tsx

@@ -0,0 +1,26 @@
+import { createPortal } from 'react-dom';
+import { ToastMessage } from '../../../context/ToastContext';
+import ToastItem from './ToastItem';
+import * as S from './Toast.styled';
+
+interface ToastContainerProps {
+  toasts: ToastMessage[];
+  onRemove: (id: string) => void;
+}
+
+const ToastContainer = ({ toasts, onRemove }: ToastContainerProps) => {
+  return createPortal(
+    <S.Container>
+      {toasts.map((toast) => (
+        <ToastItem
+          key={toast.id}
+          {...toast}
+          onRemove={() => onRemove(toast.id)}
+        />
+      ))}
+    </S.Container>,
+    document.body
+  );
+};
+
+export default ToastContainer;

src/components/common/Toast/ToastItem.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+import * as S from './Toast.styled';
+import { AlarmLive } from '../../../models/alarm';
+import { Link } from 'react-router-dom';
+import { routeSelector } from '../../../util/routeSelector';
+
+interface ToastItemProps {
+  id: string;
+  content: AlarmLive;
+  duration: number;
+  onRemove: () => void;
+}
+
+const ToastItem = ({ content, duration, onRemove }: ToastItemProps) => {
+  const [exiting, setExiting] = useState(false);
+  const route = routeSelector(content.routingId, content.alarmFilterId);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setExiting(true), duration);
+    return () => clearTimeout(timer);
+  }, [duration]);
+
+  const handleAnimationEnd = () => {
+    if (exiting) onRemove();
+  };
+
+  return (
+    <Link to={route}>
+      <S.Item $exiting={exiting} onAnimationEnd={handleAnimationEnd}>
+        <S.LiveMessage>{content.message}</S.LiveMessage>
+        <S.LiveDate>{content.createAt}</S.LiveDate>
+      </S.Item>
+    </Link>
+  );
+};
+
+export default ToastItem;