diff --git a/src/components/home/weekSchedule/WeekSchedule.tsx b/src/components/home/weekSchedule/WeekSchedule.tsx index 8d6c210..c1bd052 100644 --- a/src/components/home/weekSchedule/WeekSchedule.tsx +++ b/src/components/home/weekSchedule/WeekSchedule.tsx @@ -1,20 +1,13 @@ 'use client'; import React, { useState } from 'react'; -import { - format, - startOfWeek, - addDays, - isSaturday, - isSunday, - isSameDay, - parse -} from 'date-fns'; +import { format, startOfWeek, addDays, isSaturday, isSunday, isSameDay } 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'; +import dynamic from 'next/dynamic'; + +const WeekScheduleItem = dynamic(() => import('./WeekScheduleItem'), { + loading: () =>
+}); const WeekSchedule = () => { const router = useRouter(); @@ -28,72 +21,6 @@ const WeekSchedule = () => { } 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 (
{/* 이번주일정 */} @@ -127,62 +54,7 @@ const WeekSchedule = () => {
{/* 예약 리스트 */} - {/* 예약 일정이 없을 때 */} - {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/home/weekSchedule/WeekScheduleItem.tsx b/src/components/home/weekSchedule/WeekScheduleItem.tsx new file mode 100644 index 0000000..19e2689 --- /dev/null +++ b/src/components/home/weekSchedule/WeekScheduleItem.tsx @@ -0,0 +1,160 @@ +import React from 'react'; +import { useQuery } from 'react-query'; +import { getDayReservationList } from '../remote/mainReservation'; +import { format, parse } from 'date-fns'; +import Image from 'next/image'; +import { todayListData } from '@/components/reservation/model/myreservation'; + +const WeekScheduleItem = ({ + formattedSelectedDate +}: { + formattedSelectedDate: string; +}) => { + 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 ( +
+ {data.length === 0 ? ( +
+
+ 예약된 일정이 없습니다. +
+
+ ) : ( + <> + {data.slice(0, 3).map((item: todayListData, index: number) => { + if (item.spaceType == 'MEETINGROOM') { + return ( +
+
+ {/* 고정 */} +
+
+
+
+ {item?.reservationName} +
+
+
+ {item?.branchName} {item?.spaceName} ({item?.spaceFloor}층) +
+
+ {format(item?.startAt, 'HH:mm')} -{' '} + {format(item?.endAt, 'HH:mm')} +
+
+
+
+
+
+ {item?.memberType == 'REPRESENTATIVE' ? ( +
+ 호스트 +
+ ) : ( +
+ 참석자 +
+ )} +
+ {renderUserImg(item.memberImageUrls)} +
+
+
+ ); + } else if (item.spaceType == 'FOCUSDESK') { + return ( +
+
+ 개인 좌석 +
+
+ {renderTime(item.startAt)} ~ |{' '} + {item.spaceName} +
+
+ ); + } else { + return ( +
+
+ 개인 휴식 +
+
+ {renderTime(item.startAt)} - {renderTime(item.endAt)} |{' '} + {item.spaceName} +
+
+ ); + } + })} + + )} +
+ ); +}; + +export default WeekScheduleItem; diff --git a/src/components/reservation/focuszone/FocusInfo.tsx b/src/components/reservation/focuszone/FocusInfo.tsx index 7f64360..ede4548 100644 --- a/src/components/reservation/focuszone/FocusInfo.tsx +++ b/src/components/reservation/focuszone/FocusInfo.tsx @@ -108,10 +108,17 @@ const FocusInfo = () => {
· 뒷정리 후 종료버튼을 눌러주세요.
-
+
포커스존은 이용 예약 후 사용이 가능하며, 다음 이용자를 위해 뒷정리 후 이용 종료 버튼을 꼭 눌러주세요.
+
+ · 좌석은 당일만 사용 가능해요. +
+
+ 예약된 좌석은 예약일 자정까지 유효합니다. 계속 이용하시려면 자정 이후에는 + 추가 예약이 필요합니다. +
diff --git a/src/components/reservation/myReservationList/TodayReservation.tsx b/src/components/reservation/myReservationList/TodayReservation.tsx index 8ee094b..2b146cd 100644 --- a/src/components/reservation/myReservationList/TodayReservation.tsx +++ b/src/components/reservation/myReservationList/TodayReservation.tsx @@ -65,6 +65,10 @@ const TodayReservation = () => { // return () => clearTimeout(timer); // }, [setReservationId, setOpen]); + if (!data) { + return null; + } + if (data?.length == 0) { return (
@@ -74,30 +78,33 @@ const TodayReservation = () => { ); } + console.log(data); + return (
    - {data?.map((item: todayListData, i: number) => ( - - {item.spaceType === 'MEETINGROOM' ? ( - - ) : item.spaceType === 'FOCUSDESK' ? ( - - ) : ( - - )} - - ))} + {data && + data?.map((item: todayListData, i: number) => ( + + {item.spaceType === 'MEETINGROOM' ? ( + + ) : item.spaceType === 'FOCUSDESK' ? ( + + ) : ( + + )} + + ))}
); }; diff --git a/src/components/reservation/myReservationList/modal/MeetingDetailModal.tsx b/src/components/reservation/myReservationList/modal/MeetingDetailModal.tsx index 2b06a15..b2e0af7 100644 --- a/src/components/reservation/myReservationList/modal/MeetingDetailModal.tsx +++ b/src/components/reservation/myReservationList/modal/MeetingDetailModal.tsx @@ -131,7 +131,7 @@ const MeetingDetailModal = () => {
- {data?.branchName} {data?.spaceName} + {data?.branchName} {data?.spaceName} ({data?.spaceFloor}층)
{data?.branchAddress} diff --git a/src/components/reservation/myReservationList/roomTypeItem/MeetingRoomItem.tsx b/src/components/reservation/myReservationList/roomTypeItem/MeetingRoomItem.tsx index 4d7402a..35d358a 100644 --- a/src/components/reservation/myReservationList/roomTypeItem/MeetingRoomItem.tsx +++ b/src/components/reservation/myReservationList/roomTypeItem/MeetingRoomItem.tsx @@ -81,7 +81,7 @@ const MeetingRoomItem = ({ roomData }: MeetingRoomItemType) => {
{/* 변경 필요 */}
- {roomData?.branchName} {roomData?.spaceName} + {roomData?.branchName} {roomData?.spaceName} ({roomData?.spaceFloor}층)
{format(roomData?.startAt, 'HH:mm')} - {format(roomData?.endAt, 'HH:mm')} diff --git a/src/components/shared/LoadingSpinner.tsx b/src/components/shared/LoadingSpinner.tsx new file mode 100644 index 0000000..1384f35 --- /dev/null +++ b/src/components/shared/LoadingSpinner.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +const LoadingSpinner: React.FC = () => { + return ( +
+
+
+ ); +}; + +export default LoadingSpinner; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 56f2cee..bb1dd98 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,15 +1,35 @@ +import LoadingSpinner from '@/components/shared/LoadingSpinner'; import { AuthorizationProvider } from '@/providers/Authentication'; import MockProvider from '@/providers/MockProvider'; import QueryProvider from '@/providers/QueryProvider'; import '@/styles/globals.css'; import type { AppProps } from 'next/app'; +import { useRouter } from 'next/router'; import Script from 'next/script'; +import { useEffect, useState } from 'react'; import { Hydrate, QueryClient, QueryClientProvider } from 'react-query'; import { ReactQueryDevtools } from 'react-query/devtools'; const queryClient = new QueryClient(); export default function App({ Component, pageProps }: AppProps) { + const router = useRouter(); + const [loading, setLoading] = useState(false); + + useEffect(() => { + const handleStart = () => setLoading(true); + const handleComplete = () => setLoading(false); + + router.events.on('routeChangeStart', handleStart); + router.events.on('routeChangeComplete', handleComplete); + router.events.on('routeChangeError', handleComplete); + + return () => { + router.events.off('routeChangeStart', handleStart); + router.events.off('routeChangeComplete', handleComplete); + router.events.off('routeChangeError', handleComplete); + }; + }, [router]); return ( @@ -19,6 +39,7 @@ export default function App({ Component, pageProps }: AppProps) { + {loading && } diff --git a/src/pages/community/[id]/index.tsx b/src/pages/community/[id]/index.tsx index ff5dfb6..d346147 100644 --- a/src/pages/community/[id]/index.tsx +++ b/src/pages/community/[id]/index.tsx @@ -26,7 +26,7 @@ export async function getServerSideProps(context: GetServerSidePropsContext) { const client = new QueryClient(); try { await client.prefetchQuery(['post', postId], async () => { - const { data } = await axios.get(`https://joo-api.store/posts/${postId}`, { + const { data } = await axios.get(`https://www.4bujak.site/${postId}`, { headers: { Authorization: `Bearer ${token}` }