diff --git a/src/components/user/mypage/ContentTab.tsx b/src/components/user/mypage/ContentTab.tsx index 9f11a91d..86d60aa7 100644 --- a/src/components/user/mypage/ContentTab.tsx +++ b/src/components/user/mypage/ContentTab.tsx @@ -57,7 +57,6 @@ export default function ContentTab({ filter, $justifyContent }: ContentProps) { to={filter.url} onClick={() => handleChangeId(filter.id as number)} > - {' '} {filter.title} diff --git a/src/components/user/mypage/activityLog/inquiries/Inquiries.styled.ts b/src/components/user/mypage/activityLog/inquiries/Inquiries.styled.ts index 4bb756a6..d7c915fb 100644 --- a/src/components/user/mypage/activityLog/inquiries/Inquiries.styled.ts +++ b/src/components/user/mypage/activityLog/inquiries/Inquiries.styled.ts @@ -16,12 +16,13 @@ export const InquiriesTableHeadContainer = styled.div` padding-top: 1rem; top: 0; background: ${({ theme }) => theme.color.lightgrey}; + z-index: 10000; `; export const InquiriesTableHeadWrapper = styled.div` width: 100%; display: grid; - grid-template-columns: 8% 15% 65% 17%; + grid-template-columns: 8% 15% 65% 12%; font-size: 1.3rem; font-weight: 600; margin-bottom: 0.5rem; @@ -51,4 +52,8 @@ export const InquiriesWrapper = styled.div` gap: 1.5rem; `; +export const MyInquiriesWrapper = styled.div` + scroll-margin-top: 65px; +`; + export const WrapperNoContentAppliedProjects = styled(WrapperNoContent)``; diff --git a/src/components/user/mypage/activityLog/inquiries/Inquiries.tsx b/src/components/user/mypage/activityLog/inquiries/Inquiries.tsx index a9c573e8..97b43cd1 100644 --- a/src/components/user/mypage/activityLog/inquiries/Inquiries.tsx +++ b/src/components/user/mypage/activityLog/inquiries/Inquiries.tsx @@ -1,4 +1,4 @@ -import { useParams } from 'react-router-dom'; +import { useLocation, useParams } from 'react-router-dom'; import useGetUserActivity from '../../../../../hooks/admin/useGetAllUserActivity'; import ContentBorder from '../../../../common/contentBorder/ContentBorder'; import NoContent from '../../../../common/noContent/NoContent'; @@ -6,13 +6,27 @@ import Spinner from '../../Spinner'; import * as S from './Inquiries.styled'; import Inquiry from './inquiry/Inquiry'; import type { MyInquiries } from '../../../../../models/activityLog'; +import { useLayoutEffect, useRef } from 'react'; export default function Inquiries() { const { userId } = useParams(); + const { state } = useLocation(); + const { id } = state || {}; const { userActivityData, isLoading } = useGetUserActivity( Number(userId), 'inquiries' ); + const inquiriesRef = useRef<(HTMLDivElement | null)[]>([]); + + useLayoutEffect(() => { + if (!id || !userActivityData) return; + const idx = userActivityData?.findIndex((item) => item.id == id); + const targetRef = + idx !== undefined && idx >= 0 ? inquiriesRef.current[idx] : null; + if (inquiriesRef?.current && targetRef) { + targetRef.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + }, [userActivityData, id]); if (isLoading) { return ( @@ -49,11 +63,12 @@ export default function Inquiries() { {myInquiriesData.map((list, index) => ( - (inquiriesRef.current[index] = el)} key={`${index}-${list.title}`} - list={list} - no={myInquiriesData.length - index} - /> + > + + ))} diff --git a/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts b/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts index 4c1273c2..90e2784c 100644 --- a/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts +++ b/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts @@ -9,7 +9,7 @@ export const InquiryTitleWrapper = styled.button` text-align: start; font-size: 1.1rem; display: grid; - grid-template-columns: 8% 15% 65% 17%; + grid-template-columns: 8% 15% 65% 12%; cursor: pointer; `; @@ -34,8 +34,8 @@ export const InquiryStateSpan = styled.span<{ $isCompletedAnswer: boolean }>` $isCompletedAnswer && css` background: ${({ theme }) => theme.color.navy}; - border-radius: ${({ theme }) => theme.borderRadius.small}; - padding: 0.2rem; + border-radius: ${({ theme }) => theme.borderRadius.large}; + padding: 0.2rem 0.5rem; `} `; diff --git a/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx b/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx index 21881354..45c3ce4d 100644 --- a/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx +++ b/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx @@ -1,9 +1,10 @@ -import { useRef, useState } from 'react'; +import { useEffect, useRef, useState } from 'react'; import type { MyInquiries } from '../../../../../../models/activityLog'; import * as S from './Inquiry.styled'; import { My_INQUIRIES_MESSAGE } from '../../../../../../constants/user/customerService'; import ContentBorder from '../../../../../common/contentBorder/ContentBorder'; import { ChevronRightIcon } from '@heroicons/react/24/outline'; +import { useLocation } from 'react-router-dom'; interface InquiryProps { list: MyInquiries; @@ -16,26 +17,28 @@ interface IsImageOpen { } export default function Inquiry({ list, no }: InquiryProps) { + const { state } = useLocation(); + const { id } = state || {}; const [isOpen, setIsOpen] = useState(false); const [isImageOpen, setIsImageOpen] = useState({ isImageOpen: false, url: '', }); const answer = list.answer || ''; - const answerRef = useRef(null); + const divRef = useRef(null); - const handleChangeAnswerRef = () => { - if (answerRef && answerRef.current) { - answerRef.current.style.height = 'auto'; - answerRef.current.style.height = `${answerRef.current.scrollHeight}px`; + useEffect(() => { + if (list.id === id) { + setIsOpen(true); } - }; + }, [list.id, id]); return ( - + setIsOpen((prev) => !prev)} + data-id={list.id} > {no} {`[${list.category}]`} diff --git a/src/components/user/mypage/notifications/all/All.tsx b/src/components/user/mypage/notifications/all/All.tsx index 2855a368..f40fe33f 100644 --- a/src/components/user/mypage/notifications/all/All.tsx +++ b/src/components/user/mypage/notifications/all/All.tsx @@ -6,6 +6,7 @@ import { useAlarmDelete } from '../../../../../hooks/user/useAlarmDelete'; import { useAlarmPatch } from '../../../../../hooks/user/useAlarmPatch'; import useAlarmList from '../../../../../hooks/user/useAlarmList'; import NoContent from '../../../../common/noContent/NoContent'; +import { ROUTES } from '../../../../../constants/routes'; export default function All() { const { alarmListData, isLoading } = useAlarmList(); @@ -13,18 +14,15 @@ export default function All() { const { mutate: deleteAlarm } = useAlarmDelete(); const { mutate: patchAlarm } = useAlarmPatch(); - const linkUrl = (id: number, filter: number, replier = 0) => { - // 문의, 신고 답변시 추후 수정 + const linkUrl = (id: number, filter: number) => { if (filter === 1 || filter === 3) { - if (replier === 3) { - return `/activity-log/inquiries`; - } else { - return `/project-detail/${id}`; - } + return `${ROUTES.projectDetail}/${id}`; } else if (filter === 2) { - return `/manage/${id}`; + return `${ROUTES.manageProjectsRoot}/${id}`; + } else if (filter === 4) { + return `${ROUTES.mypage}/${ROUTES.myPageActivityLog}/${ROUTES.activityInquiries}`; } else { - return `/mypage/notification`; + return `${ROUTES.mypage}/${ROUTES.myPageNotifications}`; } }; @@ -45,7 +43,7 @@ export default function All() { return false; }).length; - if (!alarmListData || alarmListData.length === 0 || filterLength === 0) { + if (!alarmListData?.length || filterLength === 0) { return ( @@ -60,6 +58,8 @@ export default function All() { .filter((list) => { if (filterId === 0) { return true; + } else if (filterId === 3 && list.alarmFilterId === 4) { + return true; } else if (list.alarmFilterId === filterId) { return true; } @@ -70,7 +70,8 @@ export default function All() { {/* 신고하기 알림 구별 */} {list.alarmFilterId !== 5 ? ( patchAlarm(list.id)} >