diff --git a/src/api/reservation/getBranchesByDistance.ts b/src/api/reservation/getBranchesByDistance.ts index 9237d36..6bf2506 100644 --- a/src/api/reservation/getBranchesByDistance.ts +++ b/src/api/reservation/getBranchesByDistance.ts @@ -1,12 +1,8 @@ import { BranchDistanceResponse } from "../types/branch"; -export const getBranchesByDistance = async (latitude: number, longitude: number): Promise => { +export const getBranchesByDistance = async (branchId: number): Promise => { const backendUrl = process.env.NEXT_PUBLIC_BASE_URL; - const url = new URL(`${backendUrl}branches/distance`); - - // Add latitude and longitude as query parameters - url.searchParams.append('latitude', String(latitude)); - url.searchParams.append('longitude', String(longitude)); + const url = new URL(`${backendUrl}branches/${branchId}/near`); const token = document.cookie.replace(/(?:(?:^|.*;\s*)token\s*=\s*([^;]*).*$)|^.*$/, "$1"); @@ -34,4 +30,4 @@ export const getBranchesByDistance = async (latitude: number, longitude: number) } return data.data; -}; +}; \ No newline at end of file diff --git a/src/api/types/branch.ts b/src/api/types/branch.ts index 82bdca5..8166737 100644 --- a/src/api/types/branch.ts +++ b/src/api/types/branch.ts @@ -4,7 +4,7 @@ export interface Branch { branchAddress: string; branchLatitude: number; branchLongitude: number; - branchId?: number; + branchId: number; } export interface ModalProps { diff --git a/src/components/home/AvailableRoom.tsx b/src/components/home/AvailableRoom.tsx index b0e9329..af78a4e 100644 --- a/src/components/home/AvailableRoom.tsx +++ b/src/components/home/AvailableRoom.tsx @@ -1,9 +1,27 @@ 'use client'; +import { useBranchStore } from '@/store/branch.store'; import { format } from 'date-fns'; import React, { useEffect, useState } from 'react'; +import { useQuery, useQueryClient } from 'react-query'; +import { getAllAvailableCount } from './remote/mainReservation'; +import { useRouter } from 'next/router'; +import { getSelectedOfficeInfo } from '@/api/map/getSelectedOffice'; +import { useBranchStore2 } from '@/store/reserve.store'; const AvailableRoom = () => { + const router = useRouter(); + const queryClient = useQueryClient(); const [currentTime, setCurrentTime] = useState(format(new Date(), 'HH:mm')); + const selectedBranch = useBranchStore((state) => state.selectedBranch); + const { setReservedBranch } = useBranchStore2(); + + const { data } = useQuery( + ['AllAvailableCount', selectedBranch?.branchId], + () => getAllAvailableCount(selectedBranch?.branchId as number), + { + enabled: !!selectedBranch?.branchId + } + ); useEffect(() => { const handleVisibilityChange = () => { @@ -17,6 +35,24 @@ const AvailableRoom = () => { }; }, []); + const handleGoToReservation = async () => { + try { + const data = await getSelectedOfficeInfo(selectedBranch!.branchName); + if (data.data) { + setReservedBranch(data?.data, Date.now()); + router.push({ + pathname: '/reservation', + }); + } + } catch (error) { + console.error('Error updating selected branch:', error); + } + }; + + if (!data) { + return null; + } + return (
{/* 상단 */} @@ -26,7 +62,13 @@ const AvailableRoom = () => {
{currentTime} 기준
setCurrentTime(format(new Date(), 'HH:mm'))}> + onClick={() => { + queryClient.invalidateQueries([ + 'AllAvailableCount', + selectedBranch?.branchId + ]); + setCurrentTime(format(new Date(), 'HH:mm')); + }}>
@@ -41,12 +83,16 @@ const AvailableRoom = () => {
미팅룸
- 1 + + {data?.availableMeetingRoomCount} +
-
30
+
+ {data?.totalMeetingRoomCount} +
@@ -57,12 +103,16 @@ const AvailableRoom = () => {
리차징룸
- 1 + + {data?.availableRechargingRoomCount} +
-
30
+
+ {data?.totalRechargingRoomCount} +
@@ -73,18 +123,23 @@ const AvailableRoom = () => {
포커스존
- 1 + + {data?.availableFocusDeskCount} +
-
30
+
+ {data?.totalFocusDeskCount} +
{/* 하단 */} -
+
예약하기
diff --git a/src/components/home/CurrentOffice.tsx b/src/components/home/CurrentOffice.tsx index 24de693..d32c570 100644 --- a/src/components/home/CurrentOffice.tsx +++ b/src/components/home/CurrentOffice.tsx @@ -13,7 +13,6 @@ const CurrentOffice = () => { const setSelectedBranch = useBranchStore((state) => state.setSelectedBranch); const [isHydrated, setIsHydrated] = useState(false); const { isCurrent } = useIsCurrentBranch(); - console.log(!isCurrent); const initialBranch: Branch = { branchId: 27, @@ -31,10 +30,6 @@ const CurrentOffice = () => { } }, [selectedBranch, setSelectedBranch]); - useEffect(() => { - console.log('Current selectedBranch:', selectedBranch); - }, [selectedBranch]); - const handleBranchSelect = (branch: Branch) => { setSelectedBranch(branch, Date.now()); setShowSearchModal(false); @@ -70,10 +65,10 @@ const CurrentOffice = () => { {!isCurrent ? (
-
+
-
+
이 지점이 맞나요?
diff --git a/src/components/home/MainPageIndex.tsx b/src/components/home/MainPageIndex.tsx index 468c479..9be3455 100644 --- a/src/components/home/MainPageIndex.tsx +++ b/src/components/home/MainPageIndex.tsx @@ -8,8 +8,11 @@ import UserInfo from './UserInfo'; import OfficeInfo from './OfficeInfo'; import WeekSchedule from './weekSchedule/WeekSchedule'; import AvailableRoom from './AvailableRoom'; +import { useReservationStore } from '@/store/reservationModal.store'; +import OfficeDeleteModal from './officeInfo/OfficeDeleteModal'; const MainPageIndex = () => { + const { deleteOpen, deleteDeskId } = useReservationStore(); return (
@@ -24,6 +27,7 @@ const MainPageIndex = () => {
+ {deleteOpen && deleteDeskId !== null && }
); }; diff --git a/src/components/home/OfficeInfo.tsx b/src/components/home/OfficeInfo.tsx index 4a94950..e45e7a3 100644 --- a/src/components/home/OfficeInfo.tsx +++ b/src/components/home/OfficeInfo.tsx @@ -26,6 +26,9 @@ const OfficeInfo = () => { setIsCurrent(true); } } + if (data?.length == 0) { + setIsCurrent(true); + } }, [selectedBranch, setIsCurrent, data]); if (!data) { diff --git a/src/components/home/OfficeNotice.tsx b/src/components/home/OfficeNotice.tsx index 10f0710..4d806f2 100644 --- a/src/components/home/OfficeNotice.tsx +++ b/src/components/home/OfficeNotice.tsx @@ -1,18 +1,39 @@ -import React, { useState } from 'react'; +import React from 'react'; import { useNotices } from '@/hook/useNotices'; +import { getSelectedOfficeInfo } from '@/api/map/getSelectedOffice'; +import { useBranchStore } from '@/store/branch.store'; +import { useRouter } from 'next/router'; const OfficeNotice: React.FC = () => { const { urgentNoticeTitle, urgentNoticeContent } = useNotices(); - const [isModalOpen, setIsModalOpen] = useState(false); + const selectedBranch = useBranchStore((state) => state.selectedBranch); - const handleModalOpen = () => { - setIsModalOpen(true); - }; + const router = useRouter(); - const handleModalClose = () => { - setIsModalOpen(false); + const handleOfficeInfo = async () => { + try { + const data = await getSelectedOfficeInfo(selectedBranch!.branchName); + const officeInfo = data.data; + console.log(officeInfo); + router.push({ + pathname: `/branches/${encodeURIComponent(selectedBranch!.branchName)}`, + query: { + name: selectedBranch!.branchName, + urgentNoticeTitle, + urgentNoticeContent, + address: officeInfo.branchAddress, + branchPhoneNumber: officeInfo.branchPhoneNumber, + roadFromStation: officeInfo.roadFromStation, + stationToBranch: officeInfo.stationToBranch.join(','), + branchId: officeInfo.branchId as number, + scrollToOffice: true + } + }, `/branches/${encodeURIComponent(selectedBranch!.branchName)}`); + } catch (error) { + console.error('Error fetching office info:', error); + } }; - + return ( <>
@@ -25,30 +46,12 @@ const OfficeNotice: React.FC = () => { {urgentNoticeTitle ? urgentNoticeTitle : '긴급 공지가 없습니다.'}
{urgentNoticeContent && ( -
+
)}
- {isModalOpen && ( -
-
-
-

긴급 공지

-

{urgentNoticeContent}

-
- -
-
-
- )} ); }; diff --git a/src/components/home/model/mainReservation.ts b/src/components/home/model/mainReservation.ts new file mode 100644 index 0000000..aa36ec9 --- /dev/null +++ b/src/components/home/model/mainReservation.ts @@ -0,0 +1,12 @@ +import { ICommon } from '@/api/types/common'; + +export interface AllAvailableCountData { + totalMeetingRoomCount: number; + availableMeetingRoomCount: number; + totalRechargingRoomCount: number; + availableRechargingRoomCount: number; + totalFocusDeskCount: number; + availableFocusDeskCount: number; +} + +export type AllAvailableCountType = ICommon; diff --git a/src/components/home/officeInfo/OfficeDeleteModal.tsx b/src/components/home/officeInfo/OfficeDeleteModal.tsx new file mode 100644 index 0000000..aa919be --- /dev/null +++ b/src/components/home/officeInfo/OfficeDeleteModal.tsx @@ -0,0 +1,101 @@ +import useOnClickOutside from '@/components/community/hooks/useOnClickOutside'; +import { + deleteFocuszone, + deleteMeetingRoom, + deleteRechargingRoom +} from '@/components/reservation/remote/myreservation'; +import { useBranchStore } from '@/store/branch.store'; +import { useReservationStore } from '@/store/reservationModal.store'; +import React, { useRef } from 'react'; +import { useMutation, useQueryClient } from 'react-query'; + +const OfficeDeleteModal = () => { + const { deleteDeskId, setDeleteOpen, isMeeting, isLeader, roomType } = + useReservationStore(); + const queryClient = useQueryClient(); + const selectedBranch = useBranchStore((state) => state.selectedBranch); + + const { mutateAsync } = useMutation( + (deskId: number) => { + if (roomType === 'FOCUS') { + return deleteFocuszone(deskId); + } else if (roomType === 'RECHARGING') { + return deleteRechargingRoom(deskId); + } else { + return deleteMeetingRoom(deskId); + } + }, + { + onSuccess: () => { + queryClient.invalidateQueries(['todayReservationList']); + queryClient.invalidateQueries(['AllAvailableCount', selectedBranch?.branchId]); + setDeleteOpen(false); + } + } + ); + + const ref = useRef(null); + useOnClickOutside(ref, () => setDeleteOpen(false)); + + const renderTitle = () => { + if (isMeeting && isLeader && roomType === 'MEETING') { + return ( +
+ 예약을 취소하시겠어요? +
+ ); + } else if (isMeeting && !isLeader && roomType === 'MEETING') { + return ( +
+ 참여를 취소하시겠어요? +
+ ); + } else if (roomType === 'RECHARGING') { + return ( +
+ 예약을 취소하시겠어요? +
+ ); + } else { + return ( +
+ 이용을 종료하시겠어요? +
+ ); + } + }; + + return ( +
+
+ {/* 공통부분 */} + {renderTitle()} + {isMeeting && isLeader && ( +
+ 예약을 취소하시면, 등록된 참석자 모두의 일정에 반영됩니다. 삭제하시겠어요? +
+ )} +
+
setDeleteOpen(false)} + className="cursor-pointer flex-1 flex items-center justify-center py-[12.5px] rounded-lg border border-space-purple text-base text-space-purple font-semibold"> + 취소 +
+
{ + if (deleteDeskId) { + mutateAsync(deleteDeskId); + } + }} + className=" cursor-pointer flex-1 flex items-center justify-center py-[12.5px] rounded-lg text-white bg-space-purple font-semibold text-base"> + 확인 +
+
+
+
+ ); +}; + +export default OfficeDeleteModal; diff --git a/src/components/home/officeInfo/OfficeInfoFocus.tsx b/src/components/home/officeInfo/OfficeInfoFocus.tsx index be569e6..13eaaf5 100644 --- a/src/components/home/officeInfo/OfficeInfoFocus.tsx +++ b/src/components/home/officeInfo/OfficeInfoFocus.tsx @@ -1,18 +1,18 @@ import { todayListData } from '@/components/reservation/model/myreservation'; -import { - deleteFocuszone, - getReservationDetail -} from '@/components/reservation/remote/myreservation'; +import { getReservationDetail } from '@/components/reservation/remote/myreservation'; +import { useReservationStore } from '@/store/reservationModal.store'; import { format, parse } from 'date-fns'; import React from 'react'; -import { useMutation, useQuery, useQueryClient } from 'react-query'; +import { useQuery } from 'react-query'; interface OfficeInfoFocusType { data: todayListData; } const OfficeInfoFocus = ({ data }: OfficeInfoFocusType) => { - const queryClient = useQueryClient(); + const { setDeleteOpen, setDeleteDeskId, setRoomType, setIsLeader, setIsMeeting } = + useReservationStore(); + const { data: focusData } = useQuery( ['reservationDetail', data?.reservationId], () => getReservationDetail(data?.reservationId), @@ -20,11 +20,6 @@ const OfficeInfoFocus = ({ data }: OfficeInfoFocusType) => { enabled: data?.reservationId != null } ); - const { mutateAsync } = useMutation((deskId: number) => deleteFocuszone(deskId), { - onSuccess: () => { - queryClient.invalidateQueries(['todayReservationList']); - } - }); const date = parse(data?.startAt, 'yyyy-MM-dd HH:mm', new Date()); const formattedTime = format(date, 'HH:mm'); @@ -45,7 +40,13 @@ const OfficeInfoFocus = ({ data }: OfficeInfoFocusType) => {
mutateAsync(focusData?.spaceId)} + onClick={() => { + setRoomType('FOCUS'); + setIsMeeting(false); + setIsLeader(false); + setDeleteDeskId(focusData?.spaceId); + setDeleteOpen(true); + }} className="cursor-pointer w-[107px] h-9 text-red-700 flex items-center justify-center border-2 border-red-700 font-medium rounded-md"> 이용 종료
diff --git a/src/components/home/officeInfo/OfficeInfoMeeting.tsx b/src/components/home/officeInfo/OfficeInfoMeeting.tsx index 82724e4..947ed5b 100644 --- a/src/components/home/officeInfo/OfficeInfoMeeting.tsx +++ b/src/components/home/officeInfo/OfficeInfoMeeting.tsx @@ -1,18 +1,17 @@ import { todayListData } from '@/components/reservation/model/myreservation'; -import { - deleteMeetingRoom, - getReservationDetail -} from '@/components/reservation/remote/myreservation'; +import { getReservationDetail } from '@/components/reservation/remote/myreservation'; +import { useReservationStore } from '@/store/reservationModal.store'; import { format, isBefore, parse } from 'date-fns'; import React from 'react'; -import { useMutation, useQuery, useQueryClient } from 'react-query'; +import { useQuery } from 'react-query'; interface OfficeInfoMeetingType { data: todayListData; } const OfficeInfoMeeting = ({ data }: OfficeInfoMeetingType) => { - const queryClient = useQueryClient(); + const { setDeleteOpen, setDeleteDeskId, setIsLeader, setRoomType, setIsMeeting } = + useReservationStore(); const { data: meetingData } = useQuery( ['reservationDetail', data?.reservationId], @@ -21,14 +20,6 @@ const OfficeInfoMeeting = ({ data }: OfficeInfoMeetingType) => { enabled: data?.reservationId != null } ); - const { mutateAsync } = useMutation( - (reservationId: number) => deleteMeetingRoom(reservationId), - { - onSuccess: () => { - queryClient.invalidateQueries(['todayReservationList']); - } - } - ); const startDate = parse(data?.startAt, 'yyyy-MM-dd HH:mm', new Date()); const endDate = parse(data?.endAt, 'yyyy-MM-dd HH:mm', new Date()); @@ -40,7 +31,13 @@ const OfficeInfoMeeting = ({ data }: OfficeInfoMeetingType) => { if (!result && meetingData?.myMemberType == 'REPRESENTATIVE') { return (
mutateAsync(data?.reservationId)} + onClick={() => { + setRoomType('MEETING'); + setDeleteDeskId(data?.reservationId); + setIsMeeting(true); + setIsLeader(true); + setDeleteOpen(true); + }} className="cursor-pointer w-[107px] h-9 text-space-purple flex items-center justify-center border-2 border-space-purple font-medium rounded-md"> 예약 취소
@@ -48,7 +45,13 @@ const OfficeInfoMeeting = ({ data }: OfficeInfoMeetingType) => { } else if (!result && meetingData?.myMemberType == 'PARTICIPANT') { return (
mutateAsync(data?.reservationId)} + onClick={() => { + setRoomType('MEETING'); + setIsLeader(false); + setDeleteDeskId(data?.reservationId); + setIsMeeting(true); + setDeleteOpen(true); + }} className="cursor-pointer w-[107px] h-9 text-space-purple flex items-center justify-center border-2 border-space-purple font-medium rounded-md"> 참여 취소
diff --git a/src/components/home/officeInfo/OfficeInfoRecharging.tsx b/src/components/home/officeInfo/OfficeInfoRecharging.tsx index 81bea6f..8aafd33 100644 --- a/src/components/home/officeInfo/OfficeInfoRecharging.tsx +++ b/src/components/home/officeInfo/OfficeInfoRecharging.tsx @@ -1,23 +1,15 @@ import { todayListData } from '@/components/reservation/model/myreservation'; -import { deleteRechargingRoom } from '@/components/reservation/remote/myreservation'; +import { useReservationStore } from '@/store/reservationModal.store'; import { format, isBefore, parse } from 'date-fns'; import React from 'react'; -import { useMutation, useQueryClient } from 'react-query'; interface OfficeInfoRechargingType { data: todayListData; } const OfficeInfoRecharging = ({ data }: OfficeInfoRechargingType) => { - const queryClient = useQueryClient(); - const { mutateAsync } = useMutation( - (reservationId: number) => deleteRechargingRoom(reservationId), - { - onSuccess: () => { - queryClient.invalidateQueries(['todayReservationList']); - } - } - ); + const { setDeleteOpen, setDeleteDeskId, setIsLeader, setRoomType, setIsMeeting } = + useReservationStore(); const startDate = parse(data?.startAt, 'yyyy-MM-dd HH:mm', new Date()); const endDate = parse(data?.endAt, 'yyyy-MM-dd HH:mm', new Date()); @@ -46,7 +38,13 @@ const OfficeInfoRecharging = ({ data }: OfficeInfoRechargingType) => { ) : (
mutateAsync(data?.reservationId)} + onClick={() => { + setRoomType('RECHARGING'); + setIsLeader(false); + setIsMeeting(false); + setDeleteDeskId(data?.reservationId); + setDeleteOpen(true); + }} className="cursor-pointer w-[107px] h-9 text-space-purple flex items-center justify-center border-2 border-space-purple font-medium rounded-md"> 예약 취소
diff --git a/src/components/home/remote/mainReservation.ts b/src/components/home/remote/mainReservation.ts new file mode 100644 index 0000000..b96bb33 --- /dev/null +++ b/src/components/home/remote/mainReservation.ts @@ -0,0 +1,25 @@ +import { getRequest } from '@/api/request'; +import { AllAvailableCountType } from '../model/mainReservation'; +import { TodayList } from '@/components/reservation/model/myreservation'; + +export const getAllAvailableCount = async (branchId: number) => { + try { + const { data } = await getRequest( + `branches/${branchId}/available-count` + ); + return data; + } catch (error: any) { + return error.response.data; + } +}; + +export const getDayReservationList = async (localDate: string) => { + try { + const { data } = await getRequest( + `reservations/week?localDate=${localDate}` + ); + return data; + } catch (error: any) { + return error.response.data; + } +}; diff --git a/src/components/home/weekSchedule/WeekSchedule.tsx b/src/components/home/weekSchedule/WeekSchedule.tsx index e5e1d9a..8d6c210 100644 --- a/src/components/home/weekSchedule/WeekSchedule.tsx +++ b/src/components/home/weekSchedule/WeekSchedule.tsx @@ -1,24 +1,98 @@ 'use client'; import React, { useState } from 'react'; -import { format, startOfWeek, addDays, isSaturday, isSunday, isSameDay } from 'date-fns'; +import { + format, + startOfWeek, + addDays, + isSaturday, + isSunday, + isSameDay, + parse +} from 'date-fns'; import { ko } from 'date-fns/locale'; import { useRouter } from 'next/router'; +import { useQuery } from 'react-query'; +import { getDayReservationList } from '../remote/mainReservation'; +import { todayListData } from '@/components/reservation/model/myreservation'; +import Image from 'next/image'; const WeekSchedule = () => { const router = useRouter(); - const [selectedDate, setSelectedDate] = useState(new Date()); - const today: Date = new Date(); - const startDate: Date = startOfWeek(today, { weekStartsOn: 1 }); - const daysOfWeek: Date[] = []; - for (let i = 0; i < 7; i++) { const day: Date = addDays(startDate, i); daysOfWeek.push(day); } + const formattedSelectedDate = selectedDate ? format(selectedDate, 'yyyy-MM-dd') : ''; + + const { data } = useQuery( + ['getDayReservation', formattedSelectedDate], + () => getDayReservationList(formattedSelectedDate), + { + enabled: !!formattedSelectedDate + } + ); + + if (!data) { + return
; + } + + const renderTime = (dateString: string) => { + const parsedDate = parse(dateString, 'yyyy-MM-dd HH:mm', new Date()); + const formattedTime = format(parsedDate, 'HH:mm'); + + return formattedTime; + }; + + const renderUserImg = (images: string[]) => { + if (images.length <= 3) { + return ( +
+ {images.map((userImg: string, i) => ( + userimg + ))} +
+ ); + } else { + return ( +
+ {images.slice(0, 3).map((userImg: string, i) => ( + userimg + ))} +
+ userimg +
+ {' '} + +{images.length - 3} +
+
+
+ ); + } + }; return (
@@ -43,19 +117,72 @@ const WeekSchedule = () => { ${selectedDate && isSameDay(day, selectedDate) ? 'bg-space-purple text-white rounded-[30px]' : ''} items-center justify-center`} key={i} - onClick={() => setSelectedDate(day)}> + onClick={() => { + setSelectedDate(day); + }}>
{format(day, 'EEEE', { locale: ko }).slice(0, 1)}
{format(day, 'dd')}
))}
+ {/* 예약 리스트 */} {/* 예약 일정이 없을 때 */} -
-
- 예약된 일정이 없습니다. + {data.length === 0 ? ( +
+
+ 예약된 일정이 없습니다. +
-
+ ) : ( + <> + {data.slice(0, 3).map((item: todayListData, index: number) => { + if (item.spaceType == 'MEETINGROOM') { + return ( +
+
+
+
+ {item.reservationName} +
+
+ {renderTime(item.startAt)} - {renderTime(item.endAt)} |{' '} + {item.spaceName} +
+
+ {renderUserImg(item.memberImageUrls)} +
+ ); + } else if (item.spaceType == 'FOCUSDESK') { + return ( +
+
+ 개인 좌석 +
+
+ {renderTime(item.startAt)} ~ |{' '} + {item.spaceName} +
+
+ ); + } else { + return ( +
+
+ 개인 휴식 +
+
+ {renderTime(item.startAt)} - {renderTime(item.endAt)} |{' '} + {item.spaceName} +
+
+ ); + } + })} + + )}
); }; diff --git a/src/components/map/BranchInfo.tsx b/src/components/map/BranchInfo.tsx index 5ba9794..417445f 100644 --- a/src/components/map/BranchInfo.tsx +++ b/src/components/map/BranchInfo.tsx @@ -1,5 +1,5 @@ /* eslint-disable react-hooks/exhaustive-deps */ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import Image from 'next/image'; import { useRouter } from 'next/router'; import { Swiper, SwiperSlide } from 'swiper/react'; @@ -32,6 +32,20 @@ const BranchInfo: React.FC = () => { const stationToBranch = router.query.stationToBranch as string; const branchId = router.query.branchId; + const { urgentNoticeTitle, urgentNoticeContent } = router.query; + + + const branchOfficeRef = useRef(null); + + useEffect(() => { + const { scrollToOffice } = router.query; + if (scrollToOffice && branchOfficeRef.current) { + setTimeout(() => { + branchOfficeRef.current!.scrollIntoView({ behavior: 'smooth' }); + }, 300); // 300ms 정도의 딜레이를 줍니다. + } + }, [router.query]); + const imagePairs = [ ['branch1-1.png', 'branch1-2.png'], ['branch2-1.png', 'branch2-2.png'], @@ -171,6 +185,7 @@ const BranchInfo: React.FC = () => { width={500} height={246} className="h-[246px] object-cover" + loading="lazy" />
{currentSlide} / {totalSlides} @@ -183,6 +198,7 @@ const BranchInfo: React.FC = () => { width={500} height={246} className="h-[246px] object-cover" + loading="lazy" />
{currentSlide} / {totalSlides} @@ -351,7 +367,9 @@ const BranchInfo: React.FC = () => {
공지사항
- +
+ +