Skip to content

Commit

Permalink
Merge branch 'fix/hojin' into develop
Browse files Browse the repository at this point in the history
  • Loading branch information
banhogu committed Jun 11, 2024
2 parents 74c3757 + 7afe8e9 commit 71bdb75
Show file tree
Hide file tree
Showing 9 changed files with 239 additions and 161 deletions.
142 changes: 7 additions & 135 deletions src/components/home/weekSchedule/WeekSchedule.tsx
Original file line number Diff line number Diff line change
@@ -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: () => <div className="w-[361px] h-[121px] " />
});

const WeekSchedule = () => {
const router = useRouter();
Expand All @@ -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 <div className="h-[348px]" />;
}

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 (
<div className="flex -space-x-3 rtl:space-x-reverse">
{images.map((userImg: string, i) => (
<Image
width={40}
height={40}
key={i}
className="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800"
src={userImg}
alt="userimg"
/>
))}
</div>
);
} else {
return (
<div className="flex -space-x-3 rtl:space-x-reverse">
{images.slice(0, 3).map((userImg: string, i) => (
<Image
key={i}
width={40}
height={40}
className="w-10 h-10 border-2 border-white rounded-full"
src={userImg}
alt="userimg"
/>
))}
<div className="relative">
<Image
width={40}
height={40}
className=" w-10 h-10 border-2 border-white rounded-full brightness-50 opacity-80 "
src={images[3]}
alt="userimg"
/>
<div className="absolute z-[100] left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-white font-bold">
{' '}
+{images.length - 3}
</div>
</div>
</div>
);
}
};

return (
<div className="py-10 flex flex-col gap-4">
{/* 이번주일정 */}
Expand Down Expand Up @@ -127,62 +54,7 @@ const WeekSchedule = () => {
</div>

{/* 예약 리스트 */}
{/* 예약 일정이 없을 때 */}
{data.length === 0 ? (
<div className="py-12 border-b border-gray-200">
<div className="text-gray-500 text-base font-medium flex items-center justify-center">
예약된 일정이 없습니다.
</div>
</div>
) : (
<>
{data.slice(0, 3).map((item: todayListData, index: number) => {
if (item.spaceType == 'MEETINGROOM') {
return (
<div
key={index}
className="flex items-center gap-2 mx-4 mt-3 pb-4 border-b border-gray-300">
<div className="w-[3px] h-[44px] bg-yellow-400" />
<div className="flex-1 flex flex-col gap-[5px">
<div className="text-space-black text-base font-semibold">
{item.reservationName}
</div>
<div className="text-gray-400 text-sm font-normal">
{renderTime(item.startAt)} - {renderTime(item.endAt)} |{' '}
{item.spaceName}
</div>
</div>
{renderUserImg(item.memberImageUrls)}
</div>
);
} else if (item.spaceType == 'FOCUSDESK') {
return (
<div key={index} className="mx-4 mt-3 pb-4 border-b border-gray-300 ">
<div className="text-space-black text-base font-semibold">
개인 좌석
</div>
<div className="text-gray-400 text-sm font-normal mt-[5px]">
{renderTime(item.startAt)} ~ |{' '}
{item.spaceName}
</div>
</div>
);
} else {
return (
<div key={index} className="mx-4 mt-3 pb-4 border-b border-gray-300 ">
<div className="text-space-black text-base font-semibold">
개인 휴식
</div>
<div className="text-gray-400 text-sm font-normal mt-[5px]">
{renderTime(item.startAt)} - {renderTime(item.endAt)} |{' '}
{item.spaceName}
</div>
</div>
);
}
})}
</>
)}
<WeekScheduleItem formattedSelectedDate={formattedSelectedDate} />
</div>
);
};
Expand Down
160 changes: 160 additions & 0 deletions src/components/home/weekSchedule/WeekScheduleItem.tsx
Original file line number Diff line number Diff line change
@@ -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 <div className="w-[361px] h-[121px] " />;
}

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 (
<div className="flex -space-x-3 rtl:space-x-reverse">
{images.map((userImg: string, i) => (
<Image
width={40}
height={40}
key={i}
className="w-10 h-10 border-2 border-white rounded-full dark:border-gray-800"
src={userImg}
alt="userimg"
/>
))}
</div>
);
} else {
return (
<div className="flex -space-x-3 rtl:space-x-reverse">
{images.slice(0, 3).map((userImg: string, i) => (
<Image
key={i}
width={40}
height={40}
className="w-10 h-10 border-2 border-white rounded-full"
src={userImg}
alt="userimg"
/>
))}
<div className="relative">
<Image
width={40}
height={40}
className=" w-10 h-10 border-2 border-white rounded-full brightness-50 opacity-80 "
src={images[3]}
alt="userimg"
/>
<div className="absolute z-[100] left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-white font-bold">
{' '}
+{images.length - 3}
</div>
</div>
</div>
);
}
};
return (
<div>
{data.length === 0 ? (
<div className="py-12 border-b border-gray-200">
<div className="text-gray-500 text-base font-medium flex items-center justify-center">
예약된 일정이 없습니다.
</div>
</div>
) : (
<>
{data.slice(0, 3).map((item: todayListData, index: number) => {
if (item.spaceType == 'MEETINGROOM') {
return (
<div key={index} className="border-b border-gray-300 pb-3 ">
<div className="mx-4 flex items-center justify-between">
{/* 고정 */}
<div className="flex gap-2 items-center">
<div className="w-[3px] h-[72px] bg-yellow-400" />
<div className="flex flex-col gap-2">
<div className="text-space-black text-md font-semibold">
{item?.reservationName}
</div>
<div className="flex flex-col text-sm font-normal text-gray-500">
<div>
{item?.branchName} {item?.spaceName} ({item?.spaceFloor}층)
</div>
<div>
{format(item?.startAt, 'HH:mm')} -{' '}
{format(item?.endAt, 'HH:mm')}
</div>
</div>
</div>
</div>
<div className="flex flex-col gap-[17px]">
<div className="flex justify-end">
{item?.memberType == 'REPRESENTATIVE' ? (
<div className="flex items-center justify-center w-[46px] h-6 text-center border-2 border-space-blue rounded-[20px] text-white bg-space-blue text-[12px] font-semibold">
호스트
</div>
) : (
<div className="flex items-center justify-center w-[46px] h-6 text-center border-2 border-space-blue rounded-[20px] text-space-blue text-[12px] font-semibold">
참석자
</div>
)}
</div>
{renderUserImg(item.memberImageUrls)}
</div>
</div>
</div>
);
} else if (item.spaceType == 'FOCUSDESK') {
return (
<div key={index} className="mx-4 mt-2 pb-3 border-b border-gray-300 ">
<div className="text-space-black text-base font-semibold">
개인 좌석
</div>
<div className="text-gray-400 text-sm font-normal mt-[5px]">
{renderTime(item.startAt)} ~ |{' '}
{item.spaceName}
</div>
</div>
);
} else {
return (
<div key={index} className="mx-4 mt-2 pb-3 border-b border-gray-300 ">
<div className="text-space-black text-base font-semibold">
개인 휴식
</div>
<div className="text-gray-400 text-sm font-normal mt-[5px]">
{renderTime(item.startAt)} - {renderTime(item.endAt)} |{' '}
{item.spaceName}
</div>
</div>
);
}
})}
</>
)}
</div>
);
};

export default WeekScheduleItem;
9 changes: 8 additions & 1 deletion src/components/reservation/focuszone/FocusInfo.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -108,10 +108,17 @@ const FocusInfo = () => {
<div className="text-gray-800 text-sm font-semibold mt-[28px]">
· 뒷정리 후 종료버튼을 눌러주세요.
</div>
<div className="mt-1 text-gray-600 text-sm font-normal mx-2 pb-[29px]">
<div className="mt-1 text-gray-600 text-sm font-normal mx-2">
포커스존은 이용 예약 후 사용이 가능하며, 다음 이용자를 위해 뒷정리 후 이용
종료 버튼을 꼭 눌러주세요.
</div>
<div className="text-gray-800 text-sm font-semibold mt-[28px]">
· 좌석은 당일만 사용 가능해요.
</div>
<div className="mt-1 text-gray-600 text-sm font-normal mx-2 pb-[29px]">
예약된 좌석은 예약일 자정까지 유효합니다. 계속 이용하시려면 자정 이후에는
추가 예약이 필요합니다.
</div>
</div>
</div>
</motion.div>
Expand Down
Loading

0 comments on commit 71bdb75

Please sign in to comment.