From 63126d01008884dd6d8645a52fd1dea4f07e6f4f Mon Sep 17 00:00:00 2001 From: YouD0313 <102004480+YouD0313@users.noreply.github.com> Date: Thu, 3 Jul 2025 15:37:34 +0900 Subject: [PATCH 1/7] =?UTF-8?q?refactor:=20=EB=A7=81=ED=81=AC=20URL?= =?UTF-8?q?=EC=9D=84=20=EC=83=81=EC=88=98=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= =?UTF-8?q?=ED=95=98=EC=97=AC=20=EC=BD=94=EB=93=9C=20=EC=9D=BC=EA=B4=80?= =?UTF-8?q?=EC=84=B1=20=ED=96=A5=EC=83=81,=20=ED=99=9C=EB=8F=99=EA=B8=B0?= =?UTF-8?q?=EB=A1=9D=20=EB=82=B4=20=EB=AC=B8=EC=9D=98=EA=B8=80=20list=20it?= =?UTF-8?q?em=EC=9D=B4=20head=20=EB=84=98=EC=B9=98=EB=8A=94=20css=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/user/mypage/ContentTab.tsx | 1 - .../mypage/activityLog/inquiries/Inquiries.styled.ts | 2 +- .../activityLog/inquiries/inquiry/Inquiry.styled.ts | 2 +- src/components/user/mypage/notifications/all/All.tsx | 11 +++++++---- src/constants/user/myPageFilter.ts | 6 +++--- 5 files changed, 12 insertions(+), 10 deletions(-) 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..0588af4c 100644 --- a/src/components/user/mypage/activityLog/inquiries/Inquiries.styled.ts +++ b/src/components/user/mypage/activityLog/inquiries/Inquiries.styled.ts @@ -21,7 +21,7 @@ export const InquiriesTableHeadContainer = styled.div` 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; 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..34adc855 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; `; diff --git a/src/components/user/mypage/notifications/all/All.tsx b/src/components/user/mypage/notifications/all/All.tsx index 2855a368..43f0f3ee 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(); @@ -17,14 +18,16 @@ export default function All() { // 문의, 신고 답변시 추후 수정 if (filter === 1 || filter === 3) { if (replier === 3) { - return `/activity-log/inquiries`; + return `/${ROUTES.myPageActivityLog}/${ROUTES.activityInquiries}`; } 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 ``; } else { - return `/mypage/notification`; + return `${ROUTES.mypage}/${ROUTES.myPageNotifications}`; } }; diff --git a/src/constants/user/myPageFilter.ts b/src/constants/user/myPageFilter.ts index be89a4ba..45c9bd3b 100644 --- a/src/constants/user/myPageFilter.ts +++ b/src/constants/user/myPageFilter.ts @@ -6,19 +6,19 @@ export const NOTIFICATION_FILTER = [ title: '지원한 프로젝트', url: ROUTES.notificationsAppliedProjects, id: 1, - linkUrl: `/project-detail`, + linkUrl: ROUTES.projectDetail, }, { title: '지원자 확인', url: ROUTES.notificationsCheckedApplicants, id: 2, - linkUrl: `/project-detail`, + linkUrl: ROUTES.projectDetail, }, { title: '댓글&답변', url: ROUTES.comments, id: 3, - linkUrl: `/project-detail`, + linkUrl: ROUTES.projectDetail, }, ] as const; From ebba77f82ef3562baf72797eae22e5ec2459606f Mon Sep 17 00:00:00 2001 From: YouD0313 <102004480+YouD0313@users.noreply.github.com> Date: Thu, 10 Jul 2025 18:02:57 +0900 Subject: [PATCH 2/7] =?UTF-8?q?fix:=20linkUrl=20=ED=95=A8=EC=88=98?= =?UTF-8?q?=EC=9D=98=20=EB=B0=98=ED=99=98=EA=B0=92=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EB=B0=8F=20=ED=95=84=ED=84=B0=20=EC=A1=B0=EA=B1=B4=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/user/mypage/notifications/all/All.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/user/mypage/notifications/all/All.tsx b/src/components/user/mypage/notifications/all/All.tsx index 43f0f3ee..322a3cf4 100644 --- a/src/components/user/mypage/notifications/all/All.tsx +++ b/src/components/user/mypage/notifications/all/All.tsx @@ -13,8 +13,9 @@ export default function All() { const { filterId }: { filterId: number } = useOutletContext(); const { mutate: deleteAlarm } = useAlarmDelete(); const { mutate: patchAlarm } = useAlarmPatch(); + console.log(alarmListData); - const linkUrl = (id: number, filter: number, replier = 0) => { + const linkUrl = (id: number, filter: number, replier: number = 0) => { // 문의, 신고 답변시 추후 수정 if (filter === 1 || filter === 3) { if (replier === 3) { @@ -25,7 +26,7 @@ export default function All() { } else if (filter === 2) { return `${ROUTES.manageProjectsRoot}/${id}`; } else if (filter === 4) { - return ``; + return `${ROUTES.mypage}/${ROUTES.myPageActivityLog}/${ROUTES.activityInquiries}`; } else { return `${ROUTES.mypage}/${ROUTES.myPageNotifications}`; } @@ -63,6 +64,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; } From 0af16c52731baae8f191943f650b37a4d4643b05 Mon Sep 17 00:00:00 2001 From: YouD0313 <102004480+YouD0313@users.noreply.github.com> Date: Thu, 10 Jul 2025 18:33:41 +0900 Subject: [PATCH 3/7] =?UTF-8?q?refactor:=20linkUrl=20=ED=95=A8=EC=88=98?= =?UTF-8?q?=EC=97=90=EC=84=9C=20replier=20=EB=A7=A4=EA=B0=9C=EB=B3=80?= =?UTF-8?q?=EC=88=98=20=EC=A0=9C=EA=B1=B0=20=EB=B0=8F=20=EB=B6=88=ED=95=84?= =?UTF-8?q?=EC=9A=94=ED=95=9C=20console.log=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../user/mypage/notifications/all/All.tsx | 13 ++++--------- 1 file changed, 4 insertions(+), 9 deletions(-) diff --git a/src/components/user/mypage/notifications/all/All.tsx b/src/components/user/mypage/notifications/all/All.tsx index 322a3cf4..0694f56f 100644 --- a/src/components/user/mypage/notifications/all/All.tsx +++ b/src/components/user/mypage/notifications/all/All.tsx @@ -13,16 +13,11 @@ export default function All() { const { filterId }: { filterId: number } = useOutletContext(); const { mutate: deleteAlarm } = useAlarmDelete(); const { mutate: patchAlarm } = useAlarmPatch(); - console.log(alarmListData); - const linkUrl = (id: number, filter: number, replier: number = 0) => { + const linkUrl = (id: number, filter: number) => { // 문의, 신고 답변시 추후 수정 if (filter === 1 || filter === 3) { - if (replier === 3) { - return `/${ROUTES.myPageActivityLog}/${ROUTES.activityInquiries}`; - } else { - return `${ROUTES.projectDetail}/${id}`; - } + return `${ROUTES.projectDetail}/${id}`; } else if (filter === 2) { return `${ROUTES.manageProjectsRoot}/${id}`; } else if (filter === 4) { @@ -49,7 +44,7 @@ export default function All() { return false; }).length; - if (!alarmListData || alarmListData.length === 0 || filterLength === 0) { + if (!alarmListData?.length || filterLength === 0) { return ( @@ -76,7 +71,7 @@ export default function All() { {/* 신고하기 알림 구별 */} {list.alarmFilterId !== 5 ? ( patchAlarm(list.id)} > Date: Thu, 10 Jul 2025 18:34:15 +0900 Subject: [PATCH 4/7] =?UTF-8?q?refactor:=20linkUrl=20=ED=95=A8=EC=88=98?= =?UTF-8?q?=EC=97=90=EC=84=9C=20=EC=A3=BC=EC=84=9D=20=EC=A0=9C=EA=B1=B0?= =?UTF-8?q?=ED=95=98=EC=97=AC=20=EC=BD=94=EB=93=9C=20=EA=B0=80=EB=8F=85?= =?UTF-8?q?=EC=84=B1=20=ED=96=A5=EC=83=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/user/mypage/notifications/all/All.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/user/mypage/notifications/all/All.tsx b/src/components/user/mypage/notifications/all/All.tsx index 0694f56f..cb585ef3 100644 --- a/src/components/user/mypage/notifications/all/All.tsx +++ b/src/components/user/mypage/notifications/all/All.tsx @@ -15,7 +15,6 @@ export default function All() { const { mutate: patchAlarm } = useAlarmPatch(); const linkUrl = (id: number, filter: number) => { - // 문의, 신고 답변시 추후 수정 if (filter === 1 || filter === 3) { return `${ROUTES.projectDetail}/${id}`; } else if (filter === 2) { From cf96e56c998a4759806edf465352b0336f73dcf8 Mon Sep 17 00:00:00 2001 From: YouD0313 <102004480+YouD0313@users.noreply.github.com> Date: Tue, 15 Jul 2025 18:24:27 +0900 Subject: [PATCH 5/7] =?UTF-8?q?feat:=20MyInquiriesWrapper=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EA=B5=AC=ED=98=84,=20Inquiry=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../activityLog/inquiries/Inquiries.styled.ts | 4 +++ .../activityLog/inquiries/Inquiries.tsx | 31 +++++++++++++++---- .../inquiries/inquiry/Inquiry.styled.ts | 4 +-- .../activityLog/inquiries/inquiry/Inquiry.tsx | 19 +++++++----- .../user/mypage/notifications/all/All.tsx | 1 + 5 files changed, 43 insertions(+), 16 deletions(-) diff --git a/src/components/user/mypage/activityLog/inquiries/Inquiries.styled.ts b/src/components/user/mypage/activityLog/inquiries/Inquiries.styled.ts index 0588af4c..93dcff3b 100644 --- a/src/components/user/mypage/activityLog/inquiries/Inquiries.styled.ts +++ b/src/components/user/mypage/activityLog/inquiries/Inquiries.styled.ts @@ -44,6 +44,10 @@ export const InquiriesTableHeaderState = styled.div` text-align: center; `; +export const MyInquiriesWrapper = styled.div<{ $headHeight: number }>` + scroll-margin-top: ${({ $headHeight }) => $headHeight + 10}px; +`; + export const InquiriesWrapper = styled.div` margin-top: 1rem; display: flex; diff --git a/src/components/user/mypage/activityLog/inquiries/Inquiries.tsx b/src/components/user/mypage/activityLog/inquiries/Inquiries.tsx index a9c573e8..255db926 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,30 @@ import Spinner from '../../Spinner'; import * as S from './Inquiries.styled'; import Inquiry from './inquiry/Inquiry'; import type { MyInquiries } from '../../../../../models/activityLog'; +import { useLayoutEffect, useRef, useState } from 'react'; export default function Inquiries() { const { userId } = useParams(); + const { state } = useLocation(); + const { id } = state || {}; const { userActivityData, isLoading } = useGetUserActivity( Number(userId), 'inquiries' ); + const headRef = useRef(null); + const inquiriesRef = useRef<(HTMLDivElement | null)[]>([]); + const [headHeight, setHeadHeight] = useState(0); + + useLayoutEffect(() => { + if (!id || !headRef?.current) return; + const height = headRef.current.offsetHeight; + setHeadHeight(height); + const idx = userActivityData?.findIndex((item) => item.id == id); + const targetRef = typeof idx === 'number' ? inquiriesRef.current[idx] : ''; + if (inquiriesRef?.current && targetRef) { + targetRef.scrollIntoView({ behavior: 'smooth', block: 'start' }); + } + }, [userActivityData, id, headHeight]); if (isLoading) { return ( @@ -36,7 +53,7 @@ export default function Inquiries() { return ( - + No @@ -49,11 +66,13 @@ export default function Inquiries() { {myInquiriesData.map((list, index) => ( - (inquiriesRef.current[index] = el)} key={`${index}-${list.title}`} - list={list} - no={myInquiriesData.length - index} - /> + $headHeight={headHeight} + > + + ))} 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 34adc855..90e2784c 100644 --- a/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts +++ b/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.styled.ts @@ -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..8ec5909a 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, setIsOpen]); 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 cb585ef3..f40fe33f 100644 --- a/src/components/user/mypage/notifications/all/All.tsx +++ b/src/components/user/mypage/notifications/all/All.tsx @@ -71,6 +71,7 @@ export default function All() { {list.alarmFilterId !== 5 ? ( patchAlarm(list.id)} > Date: Tue, 15 Jul 2025 19:31:36 +0900 Subject: [PATCH 6/7] =?UTF-8?q?fix:=20Inquiries=20=EB=B0=8F=20Inquiry=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=97=90=EC=84=9C=20?= =?UTF-8?q?=EC=83=81=ED=83=9C=20=EA=B4=80=EB=A6=AC=20=EC=B5=9C=EC=A0=81?= =?UTF-8?q?=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../user/mypage/activityLog/inquiries/Inquiries.tsx | 4 ++-- .../user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/user/mypage/activityLog/inquiries/Inquiries.tsx b/src/components/user/mypage/activityLog/inquiries/Inquiries.tsx index 255db926..526ce146 100644 --- a/src/components/user/mypage/activityLog/inquiries/Inquiries.tsx +++ b/src/components/user/mypage/activityLog/inquiries/Inquiries.tsx @@ -25,11 +25,11 @@ export default function Inquiries() { const height = headRef.current.offsetHeight; setHeadHeight(height); const idx = userActivityData?.findIndex((item) => item.id == id); - const targetRef = typeof idx === 'number' ? inquiriesRef.current[idx] : ''; + const targetRef = idx !== undefined ? inquiriesRef.current[idx] : null; if (inquiriesRef?.current && targetRef) { targetRef.scrollIntoView({ behavior: 'smooth', block: 'start' }); } - }, [userActivityData, id, headHeight]); + }, [userActivityData, id]); if (isLoading) { return ( diff --git a/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx b/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx index 8ec5909a..45c3ce4d 100644 --- a/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx +++ b/src/components/user/mypage/activityLog/inquiries/inquiry/Inquiry.tsx @@ -31,7 +31,7 @@ export default function Inquiry({ list, no }: InquiryProps) { if (list.id === id) { setIsOpen(true); } - }, [list, id, setIsOpen]); + }, [list.id, id]); return ( From af47d71f65ff041cb4bf32313d482956596d1b88 Mon Sep 17 00:00:00 2001 From: YouD0313 <102004480+YouD0313@users.noreply.github.com> Date: Tue, 15 Jul 2025 23:51:28 +0900 Subject: [PATCH 7/7] =?UTF-8?q?refactor:=20Inquiries=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=97=90=EC=84=9C=20=EB=B6=88=ED=95=84?= =?UTF-8?q?=EC=9A=94=ED=95=9C=20=EC=83=81=ED=83=9C=20=EC=A0=9C=EA=B1=B0=20?= =?UTF-8?q?=EB=B0=8F=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../activityLog/inquiries/Inquiries.styled.ts | 9 +++++---- .../mypage/activityLog/inquiries/Inquiries.tsx | 14 +++++--------- 2 files changed, 10 insertions(+), 13 deletions(-) diff --git a/src/components/user/mypage/activityLog/inquiries/Inquiries.styled.ts b/src/components/user/mypage/activityLog/inquiries/Inquiries.styled.ts index 93dcff3b..d7c915fb 100644 --- a/src/components/user/mypage/activityLog/inquiries/Inquiries.styled.ts +++ b/src/components/user/mypage/activityLog/inquiries/Inquiries.styled.ts @@ -16,6 +16,7 @@ export const InquiriesTableHeadContainer = styled.div` padding-top: 1rem; top: 0; background: ${({ theme }) => theme.color.lightgrey}; + z-index: 10000; `; export const InquiriesTableHeadWrapper = styled.div` @@ -44,10 +45,6 @@ export const InquiriesTableHeaderState = styled.div` text-align: center; `; -export const MyInquiriesWrapper = styled.div<{ $headHeight: number }>` - scroll-margin-top: ${({ $headHeight }) => $headHeight + 10}px; -`; - export const InquiriesWrapper = styled.div` margin-top: 1rem; display: flex; @@ -55,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 526ce146..97b43cd1 100644 --- a/src/components/user/mypage/activityLog/inquiries/Inquiries.tsx +++ b/src/components/user/mypage/activityLog/inquiries/Inquiries.tsx @@ -6,7 +6,7 @@ import Spinner from '../../Spinner'; import * as S from './Inquiries.styled'; import Inquiry from './inquiry/Inquiry'; import type { MyInquiries } from '../../../../../models/activityLog'; -import { useLayoutEffect, useRef, useState } from 'react'; +import { useLayoutEffect, useRef } from 'react'; export default function Inquiries() { const { userId } = useParams(); @@ -16,16 +16,13 @@ export default function Inquiries() { Number(userId), 'inquiries' ); - const headRef = useRef(null); const inquiriesRef = useRef<(HTMLDivElement | null)[]>([]); - const [headHeight, setHeadHeight] = useState(0); useLayoutEffect(() => { - if (!id || !headRef?.current) return; - const height = headRef.current.offsetHeight; - setHeadHeight(height); + if (!id || !userActivityData) return; const idx = userActivityData?.findIndex((item) => item.id == id); - const targetRef = idx !== undefined ? inquiriesRef.current[idx] : null; + const targetRef = + idx !== undefined && idx >= 0 ? inquiriesRef.current[idx] : null; if (inquiriesRef?.current && targetRef) { targetRef.scrollIntoView({ behavior: 'smooth', block: 'start' }); } @@ -53,7 +50,7 @@ export default function Inquiries() { return ( - + No @@ -69,7 +66,6 @@ export default function Inquiries() { (inquiriesRef.current[index] = el)} key={`${index}-${list.title}`} - $headHeight={headHeight} >