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

src/App.tsx

@@ -4,7 +4,7 @@ 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';
+import { ToastProvider } from './components/common/Toast/ToastProvider';
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
@@ -16,13 +16,14 @@ const queryClient = new QueryClient({
 });
 
 function App() {
-  const { isSignal, getSendAlarm } = useNotification();
   return (
     <ThemeProvider theme={defaultTheme}>
       <SearchFilteringProvider>
         <GlobalStyle />
         <QueryClientProvider client={queryClient}>
-          <AppRoutes />
+          <ToastProvider>
+            <AppRoutes />
+          </ToastProvider>
         </QueryClientProvider>
       </SearchFilteringProvider>
     </ThemeProvider>

src/api/alarm.api.ts

@@ -32,3 +32,15 @@ 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.log(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/commentComponent/CommentComponentLayout.tsx

@@ -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`

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`

src/components/comment/replyComponent/ReplyComponent.tsx

@@ -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,34 @@
+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: rgba(50, 50, 50, 0.9);
+  color: ${({ theme }) => theme.color.white};
+  padding: 12px 20px;
+  border-radius: 8px;
+  font-size: 0.95rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  animation: ${fadeInUp} 0.3s ease-out,
+    ${({ $exiting }) => $exiting && fadeOut} 0.3s ease-in forwards;
+`;

src/components/common/Toast/ToastContainer.tsx

@@ -0,0 +1,26 @@
+import { createPortal } from 'react-dom';
+import { ToastMessage } from './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}
+          onDone={() => onRemove(toast.id)}
+        />
+      ))}
+    </S.Container>,
+    document.body
+  );
+};
+
+export default ToastContainer;

src/components/common/Toast/ToastContext.tsx

@@ -0,0 +1,17 @@
+import { createContext } from 'react';
+
+export interface ToastMessage {
+  id: string;
+  content: string;
+  duration: number;
+}
+
+export interface ToastContextProps {
+  addToast: (content: string, duration?: number) => void;
+  removeToast: (id: string) => void;
+}
+
+export const ToastContext = createContext<ToastContextProps>({
+  addToast: () => {},
+  removeToast: () => {},
+});

src/components/common/Toast/ToastItem.tsx

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+import * as S from './Toast.styled';
+
+interface ToastItemProps {
+  id: string;
+  content: string;
+  duration: number;
+  onDone: () => void;
+}
+
+const ToastItem = ({ content, duration, onDone }: ToastItemProps) => {
+  const [exiting, setExiting] = useState(false);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setExiting(true), duration);
+    return () => clearTimeout(timer);
+  }, [duration]);
+
+  const handleAnimationEnd = () => {
+    if (exiting) onDone();
+  };
+
+  return (
+    <S.Item $exiting={exiting} onAnimationEnd={handleAnimationEnd}>
+      {content}
+    </S.Item>
+  );
+};
+
+export default ToastItem;

src/components/common/Toast/ToastProvider.tsx

@@ -0,0 +1,30 @@
+import { PropsWithChildren, useCallback, useEffect, useState } from 'react';
+import { ToastContext, ToastMessage } from './ToastContext';
+import ToastContainer from './ToastContainer';
+
+export const ToastProvider = ({ children }: PropsWithChildren) => {
+  const [toasts, setToasts] = useState<ToastMessage[]>([]);
+
+  const addToast = useCallback((content: string, duration = 4000) => {
+    const id = Date.now().toString() + Math.random();
+    setToasts((prev) => [...prev, { id, content, duration }]);
+  }, []);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  useEffect(() => {
+    if (toasts.length >= 4) {
+      const oldestId = toasts[0].id;
+      removeToast(oldestId);
+    }
+  }, [toasts, removeToast]);
+
+  return (
+    <ToastContext.Provider value={{ addToast, removeToast }}>
+      {children}
+      <ToastContainer toasts={toasts} onRemove={removeToast} />
+    </ToastContext.Provider>
+  );
+};

src/components/common/Toast/ToastTestButton.tsx

@@ -0,0 +1,28 @@
+import styled from 'styled-components';
+import { useToast } from '../../../hooks/useToast';
+
+const TestButton = styled.button`
+  margin-left: 16px;
+  padding: 8px 12px;
+  background-color: ${({ theme }) => theme.color.primary};
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  font-size: 0.9rem;
+  cursor: pointer;
+  &:hover {
+    opacity: 0.9;
+  }
+`;
+
+const ToastTestButton = () => {
+  const { showToast } = useToast();
+
+  const handleClick = () => {
+    showToast('🛎️ 이건 테스트 토스트 메시지입니다!', 4000);
+  };
+
+  return <TestButton onClick={handleClick}>토스트 확인</TestButton>;
+};
+
+export default ToastTestButton;