신고 알림필터 수정, 답변 replier 추가 (#issue 265)

src/components/common/header/Header.tsx

@@ -16,7 +16,7 @@ import { formatImgPath } from '../../../util/formatImgPath';
 import bell from '../../../assets/bell.svg';
 import Notification from './Notification/Notification';
 import bellLogined from '../../../assets/bellLogined.svg';
-import useNotification from '../../../hooks/useNotification';
+// import useNotification from '../../../hooks/useNotification';
 import { useEffect } from 'react';
 import { testLiveAlarm } from '../../../api/alarm.api';
 
@@ -25,7 +25,7 @@ function Header() {
   const { userLogout } = useAuth(handleModalOpen);
   const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
   const { myData, isLoading } = useMyProfileInfo();
-  const { signalData, setSignalData } = useNotification();
+  // const { signalData, setSignalData } = useNotification();
 
   useEffect(() => {
     testLiveAlarm();
@@ -51,7 +51,7 @@ function Header() {
             <S.HeaderLink>공지사항</S.HeaderLink>
           </Link>
         </S.HeaderLinkContainer>
-        <S.Alarm role='button' tabIndex={0} aria-label='알림 메세지'>
+        {/* <S.Alarm role='button' tabIndex={0} aria-label='알림 메세지'>
           {isLoggedIn ? (
             <DropDown
               toggleButton={
@@ -70,7 +70,7 @@ function Header() {
           ) : (
             <img src={bell} alt='알림' />
           )}
-        </S.Alarm>
+        </S.Alarm> */}
         <DropDown
           aria-label='프로필 드롭다운'
           toggleButton={

src/components/mypage/ContentTab.tsx

@@ -23,7 +23,6 @@ export default function ContentTab({ filter, $justifyContent }: ContentProps) {
   function handleChangeId(id: number) {
     setFilterId(id);
   }
-
   useEffect(() => {
     if (
       pathname.includes(ROUTES.notificationsAppliedProjects) ||

src/components/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts

@@ -31,19 +31,28 @@ export const InquiryContentWrapper = styled.div`
 
 export const InquiryContent = styled.div``;
 
+export const InquiryImgContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
 export const InquiryImgWrapper = styled.div`
   margin-top: 1rem;
   cursor: pointer;
-`;
-
-export const InquiryModalImgWrapper = styled.div`
+  width: fit-content;
   display: flex;
 `;
 
+export const ImgWrapper = styled.div``;
+
 export const InquiryImg = styled.img`
   width: 5rem;
 `;
 
+export const MessageWrapper = styled.div`
+  font-size: 0.8rem;
+`;
+
 export const ModalImgContainer = styled.div`
   position: fixed;
   top: 0;
@@ -57,6 +66,7 @@ export const ModalImgContainer = styled.div`
   justify-content: center;
   align-items: center;
   background: rgba(0, 0, 0, 0.7);
+  overflow: auto;
 `;
 
 export const ModalImgWrapper = styled.div`
@@ -71,7 +81,7 @@ export const ModalImgWrapper = styled.div`
   width: fit-content;
 `;
 
-export const ModalImgButtonWrapper = styled.div`
+export const ModalImgMessageWrapper = styled.div`
   width: 100%;
   color: ${({ theme }) => theme.color.white};
   font-size: 0.8rem;

src/components/mypage/activityLog/inquiries/inquiry/Inquiry.tsx

@@ -32,21 +32,26 @@ export default function Inquiry({ list, no }: InquiryProps) {
         <S.InquiryContentWrapper>
           <S.InquiryContent>{list.content}</S.InquiryContent>
           {list.imageUrls.length !== 0 && (
-            <S.InquiryModalImgWrapper>
-              {list.imageUrls.map((url) => (
-                <S.InquiryImgWrapper
-                  key={`${list.category}-${list.title}-${url}`}
-                  onClick={() =>
-                    setIsImageOpen({
-                      isImageOpen: true,
-                      url,
-                    })
-                  }
-                >
-                  <S.InquiryImg src={url} />
-                </S.InquiryImgWrapper>
-              ))}
-            </S.InquiryModalImgWrapper>
+            <S.InquiryImgContainer>
+              <S.InquiryImgWrapper>
+                {list.imageUrls.map((url) => (
+                  <S.ImgWrapper
+                    key={`${list.category}-${list.title}-${url}`}
+                    onClick={() =>
+                      setIsImageOpen({
+                        isImageOpen: true,
+                        url,
+                      })
+                    }
+                  >
+                    <S.InquiryImg src={url} />
+                  </S.ImgWrapper>
+                ))}
+              </S.InquiryImgWrapper>
+              <S.MessageWrapper>
+                {INQUIRY_MESSAGE.blowUpMessage}
+              </S.MessageWrapper>
+            </S.InquiryImgContainer>
           )}
           {isImageOpen.isImageOpen && (
             <S.ModalImgContainer>
@@ -58,9 +63,9 @@ export default function Inquiry({ list, no }: InquiryProps) {
                   })
                 }
               >
-                <S.ModalImgButtonWrapper>
+                <S.ModalImgMessageWrapper>
                   {INQUIRY_MESSAGE.isImageOpenMessage}
-                </S.ModalImgButtonWrapper>
+                </S.ModalImgMessageWrapper>
                 <S.ModalImg src={isImageOpen.url} />
               </S.ModalImgWrapper>
             </S.ModalImgContainer>

src/components/mypage/notifications/all/All.styled.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export const WrapperNoContent = styled.div`
   height: 100%;
@@ -24,21 +24,33 @@ export const WrapperNotification = styled.div<{ $enabled: boolean }>`
   color: ${({ $enabled, theme }) => $enabled && theme.color.placeholder};
 `;
 
-export const SpanNotification = styled.span<{ $enabled: boolean }>`
+export const SpanNotification = styled.span<{
+  $enabled: boolean;
+  $warn: boolean;
+}>`
   position: relative;
   width: fit-content;
+  ${({ $warn, theme }) =>
+    $warn &&
+    css`
+      color: ${theme.color.warn};
+    `}
   &::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    bottom: -2px;
-    width: 100%;
-    height: 1px;
-    background: ${({ $enabled, theme }) =>
-      $enabled ? theme.color.placeholder : '#000'};
-    transform: scaleX(0);
-    transform-origin: left;
-    transition: transform 0.2s ease-in-out 0.1s;
+    ${({ $warn }) =>
+      !$warn &&
+      css`
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: -2px;
+        width: 100%;
+        height: 1px;
+        transform: scaleX(0);
+        transform-origin: left;
+        transition: transform 0.2s ease-in-out 0.1s;
+      `}
+    background: ${({ $warn, $enabled, theme }) =>
+      !$warn && $enabled ? theme.color.placeholder : '#000'};
   }
   &:hover::after {
     transform: scaleX(1);

src/components/mypage/notifications/all/All.tsx

@@ -13,15 +13,18 @@ export default function All() {
   const { mutate: deleteAlarm } = useAlarmDelete();
   const { mutate: patchAlarm } = useAlarmPatch();
 
-  const linkUrl = (id: number, filter: number) => {
-    switch (filter) {
-      case 1:
-      case 3:
+  const linkUrl = (id: number, filter: number, replier = 0) => {
+    // 문의, 신고 답변시 추후 수정
+    if (filter === 1 || filter === 3) {
+      if (replier === 3) {
+        return `/activity-log/inquiries`;
+      } else {
         return `/project-detail/${id}`;
-      case 2:
-        return `/manage/${id}`;
-      default:
-        return `/mypage/notification`;
+      }
+    } else if (filter === 2) {
+      return `/manage/${id}`;
+    } else {
+      return `/mypage/notification`;
     }
   };
 
@@ -51,15 +54,28 @@ export default function All() {
           })
           .map((list) => (
             <S.WrapperNotification $enabled={list.enabled} key={list.id}>
-              <Link
-                to={linkUrl(list.routingId, list.alarmFilterId)}
-                onClick={() => patchAlarm(list.id)}
-              >
-                <S.SpanNotification $enabled={list.enabled}>
+              {/* 신고하기 알림 구별 */}
+              {list.alarmFilterId !== 5 ? (
+                <Link
+                  to={linkUrl(list.routingId, list.alarmFilterId, list.replier)}
+                  onClick={() => patchAlarm(list.id)}
+                >
+                  <S.SpanNotification
+                    $warn={list.alarmFilterId === 5}
+                    $enabled={list.enabled}
+                  >
+                    {list.content}
+                  </S.SpanNotification>
+                </Link>
+              ) : (
+                <S.SpanNotification
+                  $warn={list.alarmFilterId === 5}
+                  $enabled={list.enabled}
+                >
                   {list.content}
                 </S.SpanNotification>
-              </Link>
-              {list.alarmFilterId !== 4 && (
+              )}
+              {list.alarmFilterId !== 5 && (
                 <S.XButtonNotification
                   onClick={() => deleteAlarm(list.id)}
                   $enabled={list.enabled}

src/constants/customerService.ts

@@ -11,5 +11,6 @@ export const EMPTY_IMAGE =
 export const INQUIRY_MESSAGE = {
   categoryDefault: '카테고리',
   fileDefault: '선택된 파일이 없습니다.',
+  blowUpMessage: '클릭하면 이미지를 크게 볼 수 있습니다.',
   isImageOpenMessage: '이미지를 클릭하면 사라집니다.',
 };

src/models/alarm.ts

@@ -21,6 +21,8 @@ export interface Alarm {
   alarmFilterId: number;
   createdAt: string;
   enabled: boolean;
+  replier?: number;
+  reCommentUserId?: number;
 }
 
 export interface AlarmLive {

src/style/theme.ts

@@ -9,7 +9,8 @@ export type ColorKey =
   | 'red'
   | 'green'
   | 'navy'
-  | 'lightnavy';
+  | 'lightnavy'
+  | 'warn';
 
 export type HeadingSize =
   | 'large'
@@ -76,6 +77,7 @@ export const defaultTheme: Theme = {
     green: '#a2d393',
     navy: '#213555',
     lightnavy: '#92bbf0',
+    warn: '#EC1E4F',
   },
   heading: {
     large: { fontSize: '1.75rem', tabletFontSize: '1.5rem' },