diff --git a/src/components/home/MainHeader.tsx b/src/components/home/MainHeader.tsx index 45e0fd6..e4f0ce4 100644 --- a/src/components/home/MainHeader.tsx +++ b/src/components/home/MainHeader.tsx @@ -1,23 +1,22 @@ 'use client'; -import Link from 'next/link'; +import { useRouter } from 'next/router'; import React from 'react'; const MainHeader = () => { + const router = useRouter(); return (
-
+
-
+
router.push('mypage/question')}>
- -
- -
- +
router.push('/notification')}> + +
diff --git a/src/components/home/OfficeInfo.tsx b/src/components/home/OfficeInfo.tsx index e45e7a3..7aab641 100644 --- a/src/components/home/OfficeInfo.tsx +++ b/src/components/home/OfficeInfo.tsx @@ -37,16 +37,17 @@ const OfficeInfo = () => { return (
- {data.length == 0 ? : null} - {data.map((room: todayListData, i: number) => { - if (room.spaceType == 'FOCUSDESK') { - return ; - } else if (room.spaceType == 'MEETINGROOM') { - return ; - } else { - return ; - } - })} + {data && data.length == 0 ? : null} + {data && + data.map((room: todayListData, i: number) => { + if (room.spaceType == 'FOCUSDESK') { + return ; + } else if (room.spaceType == 'MEETINGROOM') { + return ; + } else { + return ; + } + })}
); }; diff --git a/src/components/home/OfficeNotice.tsx b/src/components/home/OfficeNotice.tsx index 4d806f2..059c55e 100644 --- a/src/components/home/OfficeNotice.tsx +++ b/src/components/home/OfficeNotice.tsx @@ -36,7 +36,7 @@ const OfficeNotice: React.FC = () => { return ( <> -
+
diff --git a/src/components/layout/footer/Footer.tsx b/src/components/layout/footer/Footer.tsx index 4fdfb60..53a6f95 100644 --- a/src/components/layout/footer/Footer.tsx +++ b/src/components/layout/footer/Footer.tsx @@ -41,7 +41,7 @@ const Footer = () => { )}
- 예약/일정 + 예약
diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx index 51c4d26..f2e0623 100644 --- a/src/components/layout/header/Header.tsx +++ b/src/components/layout/header/Header.tsx @@ -9,7 +9,7 @@ const Header = () => {
-
+
router.push('mypage/question')} className="cursor-pointer">
diff --git a/src/components/reservation/meetingRoom/DatePickerModal.tsx b/src/components/reservation/meetingRoom/DatePickerModal.tsx index 68b8224..e665dcb 100644 --- a/src/components/reservation/meetingRoom/DatePickerModal.tsx +++ b/src/components/reservation/meetingRoom/DatePickerModal.tsx @@ -330,11 +330,12 @@ const DatePickerModal: React.FC = ({
)}
- +
diff --git a/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx b/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx index 4b1fc1f..a7a29f7 100644 --- a/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx +++ b/src/components/reservation/meetingRoom/MeetingRoomIndex.tsx @@ -32,14 +32,7 @@ const formatDisplayDate = (startDate: Date, endDate: Date): string => { const setInitialDateTime = (): [Date, Date, string] => { const now = new Date(); const roundedMinutes = Math.ceil(now.getMinutes() / 30) * 30; - const startAt = new Date( - now.getFullYear(), - now.getMonth(), - now.getDate(), - now.getHours(), - roundedMinutes, - 0 - ); + const startAt = new Date(now.getFullYear(), now.getMonth(), now.getDate(), now.getHours(), roundedMinutes, 0); let endAt: Date; if (startAt.getHours() === 23 && startAt.getMinutes() === 30) { @@ -53,11 +46,8 @@ const setInitialDateTime = (): [Date, Date, string] => { return [startAt, endAt, currentTime]; }; -const setInitialParams = ( - startAt: Date, - endAt: Date, - branchName: string -): GetMeetingRoomsParams => { + +const setInitialParams = (startAt: Date, endAt: Date, branchName: string): GetMeetingRoomsParams => { const formattedStartAt = formatDateToCustomString(startAt); const formattedEndAt = formatDateToCustomString(endAt); @@ -70,7 +60,7 @@ const setInitialParams = ( canVideoConference: false, isPrivate: false, sortTarget: 'roomCapacity', - sortDirection: 'ASC' + sortDirection: 'ASC', }; }; @@ -81,15 +71,12 @@ const MeetingRoomIndex: React.FC = () => { const [startTime, setStartTime] = useState(null); const [endTime, setEndTime] = useState(null); const [showModal, setShowModal] = useState(false); - const [selectedMeetingRoomTypes, setSelectedMeetingRoomTypes] = - useState('인원 수'); + const [selectedMeetingRoomTypes, setSelectedMeetingRoomTypes] = useState('인원 수'); const [selectedEquipment, setSelectedEquipment] = useState('비품'); - const [sortTarget, setSortTarget] = useState<'roomCapacity' | 'roomFloor'>( - 'roomCapacity' - ); + const [sortTarget, setSortTarget] = useState<'roomCapacity' | 'roomFloor'>('roomCapacity'); const [sortDirection, setSortDirection] = useState<'ASC' | 'DESC'>('ASC'); const [dropdownOpen, setDropdownOpen] = useState(false); - const [selectedSortOption, setSelectedSortOption] = useState('적은 인원 순'); + const [selectedSortOption, setSelectedSortOption] = useState('적은 인원 순'); const [showToast, setShowToast] = useState(false); const [toastMessage, setToastMessage] = useState(null); @@ -100,20 +87,17 @@ const MeetingRoomIndex: React.FC = () => { const [toastType, setToastType] = useState(null); const [activeTabState, setActiveTabState] = useState(''); - - const [newMeetingRoomsInfo, setNewMeetingRoomsInfo] = - useState(); - const [newMeetingRoomsInfo2, setNewMeetingRoomsInfo2] = - useState(); + + const [newMeetingRoomsInfo, setNewMeetingRoomsInfo] = useState(); + const [newMeetingRoomsInfo2, setNewMeetingRoomsInfo2] = useState(); const [newMeetingRooms, setNewMeetingRooms] = useState([]); const [newMeetingRooms2, setNewMeetingRooms2] = useState([]); + const currentBranch = - updatedTimeSelected && - updatedTimeReserved && - updatedTimeSelected > updatedTimeReserved - ? selectedBranch - : reservedBranch || selectedBranch; + updatedTimeSelected && updatedTimeReserved && updatedTimeSelected > updatedTimeReserved + ? selectedBranch + : reservedBranch || selectedBranch; useEffect(() => { if (!currentBranch) return; @@ -133,59 +117,53 @@ const MeetingRoomIndex: React.FC = () => { const response = await getMeetingRooms(params); const rooms = response.meetingRoomForListList; const toastType = response.toastType; - - rooms.sort( - (a, b) => - a.meetingRoomCapacity - b.meetingRoomCapacity || - a.meetingRoomId - b.meetingRoomId - ); - + + rooms.sort((a, b) => a.meetingRoomCapacity - b.meetingRoomCapacity || a.meetingRoomId - b.meetingRoomId); + setMeetingRooms(rooms); + console.log(rooms); + console.log(response); if (toastType == 'OVERLAPPING_MEETING_ROOM_EXISTS') { setToastMessage( -
- Reserve Alert - 해당 시간에 미팅룸 일정이 있습니다. -
- 다른 시간으로 예약해보세요. +
+ Reserve Alert + 해당 시간에 미팅룸 일정이 있습니다.
다른 시간으로 예약해보세요.
- ); - setToastType('OVERLAPPING_MEETING_ROOM_EXISTS'); + ); + setToastType('OVERLAPPING_MEETING_ROOM_EXISTS') setShowToast(true); setTimeout(() => { setShowToast(false); }, 20000); } - if (toastType === null) { - setToastType('Can Click'); + if (toastType === null ) { + setToastType('Can Click') setShowToast(false); } + } catch (error) { console.error('Error fetching meeting rooms:', error); } }; - + useEffect(() => { if (params) { fetchMeetingRooms(params); + console.log(params); } }, [params]); - useEffect(() => {}, [meetingRooms]); + useEffect(() => { + }, [meetingRooms]); + const roomTypeMap: { [key: string]: string } = { - MINI: '미니(1-4인)', - STANDARD: '스탠다드(5-8인)', - MEDIUM: '미디움(9-12인)', - STATE: '스테이트(13-15인)' + 'MINI': '미니(1-4인)', + 'STANDARD': '스탠다드(5-8인)', + 'MEDIUM': '미디움(9-12인)', + 'STATE': '스테이트(13-15인)', }; const handleConfirm = ( @@ -209,14 +187,14 @@ const MeetingRoomIndex: React.FC = () => { meetingRoomTypes: options.meetingRoomTypes, projectorExists: options.projectorExists, canVideoConference: options.canVideoConference, - isPrivate: options.isPrivate + isPrivate: options.isPrivate, }; setParams(newParams); setStartTime(startDate); setEndTime(endDate); const selectedCount = options.meetingRoomTypes.length; - + console.log(selectedCount); let displayTypes; if (selectedCount === 0) { displayTypes = '인원 수'; @@ -226,16 +204,16 @@ const MeetingRoomIndex: React.FC = () => { displayTypes = `${roomTypeMap[options.meetingRoomTypes[0]]}외 ${selectedCount - 1}`; } setSelectedMeetingRoomTypes(displayTypes); - + console.log(selectedMeetingRoomTypes); + const equipmentArray = []; if (options.projectorExists) equipmentArray.push('프로젝터'); if (options.canVideoConference) equipmentArray.push('화상 회의'); if (options.isPrivate) equipmentArray.push('프라이빗'); const selectedEquipCount = equipmentArray.length; - const displayEquipment = - selectedEquipCount > 1 - ? `${equipmentArray[0]} 외 ${selectedEquipCount - 1}` - : equipmentArray[0] || '비품'; + const displayEquipment = selectedEquipCount > 1 + ? `${equipmentArray[0]} 외 ${selectedEquipCount - 1}` + : (equipmentArray[0] || '비품'); setSelectedEquipment(displayEquipment); }; @@ -247,7 +225,7 @@ const MeetingRoomIndex: React.FC = () => { setSelectedMeetingRoomTypes('인원 수'); setSelectedEquipment('비품'); - + const initialParams = setInitialParams(startAt, endAt, currentBranch!.branchName); setParams(initialParams); }; @@ -255,43 +233,37 @@ const MeetingRoomIndex: React.FC = () => { const router = useRouter(); const handleRoomClick = (roomId: number) => { - const formattedCurrentTime = currentTime; - router.push( - { - pathname: `/reservation/${roomId}`, - query: { - startTime: formattedCurrentTime, - startedAt: params?.startAt, - endedAt: params?.endAt - } - }, - `/reservation/${roomId}` - ); + const formattedCurrentTime = currentTime; + router.push({ + pathname: `/reservation/${roomId}`, + query: { + startTime: formattedCurrentTime, + startedAt: params?.startAt, + endedAt: params?.endAt + } + }, `/reservation/${roomId}`); + console.log(formattedCurrentTime); + console.log(currentTime); + console.log(params?.startAt); + console.log(params?.endAt); }; - const handleSortToggle = ( - target: 'roomCapacity' | 'roomFloor', - direction: 'ASC' | 'DESC' - ) => { + const handleSortToggle = (target: 'roomCapacity' | 'roomFloor', direction: 'ASC' | 'DESC') => { setSortTarget(target); setSortDirection(direction); - setDropdownOpen(false); - + setDropdownOpen(false); + if (target === 'roomCapacity') { setSelectedSortOption(direction === 'ASC' ? '적은 인원 순' : '많은 인원 순'); } else { setSelectedSortOption(direction === 'ASC' ? '낮은 층 수' : '높은 층 수'); } - + const sortedRooms = [...meetingRooms].sort((a, b) => { if (target === 'roomCapacity') { - return direction === 'ASC' - ? a.meetingRoomCapacity - b.meetingRoomCapacity - : b.meetingRoomCapacity - a.meetingRoomCapacity; + return direction === 'ASC' ? a.meetingRoomCapacity - b.meetingRoomCapacity : b.meetingRoomCapacity - a.meetingRoomCapacity; } else { - return direction === 'ASC' - ? a.meetingRoomFloor - b.meetingRoomFloor - : b.meetingRoomFloor - a.meetingRoomFloor; + return direction === 'ASC' ? a.meetingRoomFloor - b.meetingRoomFloor : b.meetingRoomFloor - a.meetingRoomFloor; } }); setMeetingRooms(sortedRooms); @@ -302,195 +274,142 @@ const MeetingRoomIndex: React.FC = () => { setShowModal(true); }; - const fetchBranchesByDistance = async ( - branchId: number, - existingParams: GetMeetingRoomsParams - ) => { - try { - const branches = await getBranchesByDistance(branchId); - - if (branches && branches.length > 0) { - const nearestBranch = branches[0]; - setNewMeetingRoomsInfo([nearestBranch]); - - const newParams = { - ...existingParams, - branchName: nearestBranch.branchName - }; - const response = await getMeetingRooms(newParams); - const newRooms = response.meetingRoomForListList; - - setNewMeetingRooms(newRooms); - - const nearestBranch2 = branches[1]; - setNewMeetingRoomsInfo2([nearestBranch2]); - - const newParams2 = { - ...existingParams, - branchName: nearestBranch2.branchName - }; - const response2 = await getMeetingRooms(newParams2); - const newRooms2 = response2.meetingRoomForListList; - - setNewMeetingRooms2(newRooms2); - } - } catch (error) { - console.error('Error fetching branches or meeting rooms:', error); +const fetchBranchesByDistance = async (branchId: number, existingParams: GetMeetingRoomsParams) => { + try { + const branches = await getBranchesByDistance(branchId); + console.log('Branches by distance:', branches); + + if (branches && branches.length > 0) { + const nearestBranch = branches[0]; + setNewMeetingRoomsInfo([nearestBranch]); + console.log(newMeetingRoomsInfo); + const newParams = { + ...existingParams, + branchName: nearestBranch.branchName + }; + const response = await getMeetingRooms(newParams); + const newRooms = response.meetingRoomForListList; + console.log(response); + console.log(newRooms); + setNewMeetingRooms(newRooms); + console.log(newMeetingRooms); + + const nearestBranch2 = branches[1]; + setNewMeetingRoomsInfo2([nearestBranch2]); + console.log(newMeetingRoomsInfo2); + const newParams2 = { + ...existingParams, + branchName: nearestBranch2.branchName + }; + const response2 = await getMeetingRooms(newParams2); + const newRooms2 = response2.meetingRoomForListList; + console.log(response2); + console.log(newRooms2); + setNewMeetingRooms2(newRooms2); + console.log(newMeetingRooms2); } - }; + } catch (error) { + console.error('Error fetching branches or meeting rooms:', error); + } +}; - const handleNear1Office = async () => { - try { - if (!newMeetingRoomsInfo || newMeetingRoomsInfo.length === 0) { - console.error('newMeetingRoomsInfo is undefined or empty'); - return; - } - const data = await getSelectedOfficeInfo(newMeetingRoomsInfo[0].branchName); - - const officeInfo = data.data; - - router.push( - { - pathname: `/branches/${encodeURIComponent(newMeetingRoomsInfo[0].branchName)}`, - query: { - name: officeInfo.branchName, - address: officeInfo.branchAddress, - branchPhoneNumber: officeInfo.branchPhoneNumber, - roadFromStation: officeInfo.roadFromStation, - stationToBranch: officeInfo.stationToBranch.join(','), - branchId: officeInfo.branchId - } - }, - `/branches/${encodeURIComponent(newMeetingRoomsInfo[0].branchName)}` - ); - } catch (error) { - console.error('Error fetching office info:', error); +const handleNear1Office = async () => { + try { + if (!newMeetingRoomsInfo || newMeetingRoomsInfo.length === 0) { + console.error('newMeetingRoomsInfo is undefined or empty'); + return; } - }; - - const handleNear2Office = async () => { - try { - if (!newMeetingRoomsInfo2 || newMeetingRoomsInfo2.length === 0) { - console.error('newMeetingRoomsInfo is undefined or empty'); - return; + const data = await getSelectedOfficeInfo(newMeetingRoomsInfo[0].branchName); + console.log(data); + const officeInfo = data.data; + console.log(officeInfo); + router.push({ + pathname: `/branches/${encodeURIComponent(newMeetingRoomsInfo[0].branchName)}`, + query: { + name: officeInfo.branchName, + address: officeInfo.branchAddress, + branchPhoneNumber: officeInfo.branchPhoneNumber, + roadFromStation: officeInfo.roadFromStation, + stationToBranch: officeInfo.stationToBranch.join(','), + branchId: officeInfo.branchId } - const data = await getSelectedOfficeInfo(newMeetingRoomsInfo2[0].branchName); - - const officeInfo = data.data; - - router.push( - { - pathname: `/branches/${encodeURIComponent(newMeetingRoomsInfo2[0].branchName)}`, - query: { - name: officeInfo.branchName, - address: officeInfo.branchAddress, - branchPhoneNumber: officeInfo.branchPhoneNumber, - roadFromStation: officeInfo.roadFromStation, - stationToBranch: officeInfo.stationToBranch.join(','), - branchId: officeInfo.branchId - } - }, - `/branches/${encodeURIComponent(newMeetingRoomsInfo2[0].branchName)}` - ); - } catch (error) { - console.error('Error fetching office info:', error); + }, `/branches/${encodeURIComponent(newMeetingRoomsInfo[0].branchName)}`); + } catch (error) { + console.error('Error fetching office info:', error); + } +}; + +const handleNear2Office = async () => { + try { + if (!newMeetingRoomsInfo2 || newMeetingRoomsInfo2.length === 0) { + console.error('newMeetingRoomsInfo is undefined or empty'); + return; } - }; + const data = await getSelectedOfficeInfo(newMeetingRoomsInfo2[0].branchName); + console.log(data); + const officeInfo = data.data; + console.log(officeInfo); + router.push({ + pathname: `/branches/${encodeURIComponent(newMeetingRoomsInfo2[0].branchName)}`, + query: { + name: officeInfo.branchName, + address: officeInfo.branchAddress, + branchPhoneNumber: officeInfo.branchPhoneNumber, + roadFromStation: officeInfo.roadFromStation, + stationToBranch: officeInfo.stationToBranch.join(','), + branchId: officeInfo.branchId + } + }, `/branches/${encodeURIComponent(newMeetingRoomsInfo2[0].branchName)}`); + } catch (error) { + console.error('Error fetching office info:', error); + } +}; + useEffect(() => { if (meetingRooms.length == 0 && params) { fetchBranchesByDistance(currentBranch!.branchId, params); } - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [meetingRooms]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [meetingRooms, params]); + return (
-
- reset +
+ reset
handleModalOpen('schedule')}> - calendar -
- {currentTime} -
- bottomArrow + onClick={() => handleModalOpen('schedule')} + > + calendar +
{currentTime}
+ bottomArrow
handleModalOpen('people')}> - people -
- {selectedMeetingRoomTypes} -
- bottomArrow + onClick={() => handleModalOpen('people')} + > + people +
{selectedMeetingRoomTypes}
+ bottomArrow
-
-
handleModalOpen('equipment')}> - check -
- {selectedEquipment} -
- bottomArrow -
-
-
-
-
- 바로예약 +
+
handleModalOpen('equipment')} + > + check +
{selectedEquipment}
+ bottomArrow
-
- 가능
+
+
바로예약
가능
+
총 {meetingRooms.length}개의 공간
@@ -502,14 +421,16 @@ const MeetingRoomIndex: React.FC = () => { className={`inline-flex justify-center w-full rounded-md px-4 py-2 bg-white text-sm font-medium text-gray-700 border-none hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-100`} id="options-menu" aria-haspopup="true" - aria-expanded="true"> - {selectedSortOption} + aria-expanded="true" + > + {selectedSortOption}
@@ -560,13 +486,9 @@ const MeetingRoomIndex: React.FC = () => { 조건에 맞는 미팅룸이 없습니다.
) : ( -
+
{meetingRooms.map((room) => ( -
handleRoomClick(room.meetingRoomId)}> +
handleRoomClick(room.meetingRoomId)}>
{ {room.meetingRoomName}
- floor + floor
- {room.meetingRoomFloor < 0 - ? `B${Math.abs(room.meetingRoomFloor)}` - : `${room.meetingRoomFloor}`} - 층 -
- capacity -
- 최대 {room.meetingRoomCapacity}명 + {room.meetingRoomFloor < 0 ? `B${Math.abs(room.meetingRoomFloor)}` : `${room.meetingRoomFloor}`}층
+ capacity +
최대 {room.meetingRoomCapacity}명
@@ -611,207 +516,106 @@ const MeetingRoomIndex: React.FC = () => {
)}
- {meetingRooms.length === 0 && ( + {meetingRooms.length === 0 && (
- {newMeetingRooms?.length != 0 && newMeetingRooms2?.length != 0 && ( - <> -
-
- - 같은 조건 - - - 으로 - - - {' '} -
- - - 근처 지점 - - - 에서 찾아봤어요. - -
- + {newMeetingRooms?.length != 0 && newMeetingRooms2?.length != 0 && ( + <>
같은 조건으로
근처 지점에서 찾아봤어요.
)} {newMeetingRoomsInfo && newMeetingRooms?.length > 0 && ( - <> -
-
-
- {newMeetingRoomsInfo[0].branchName} -
-
-
- 지점 상세보기 -
- arrow -
-
-
- location -
- {currentBranch?.branchName}으로부터{' '} - {newMeetingRoomsInfo[0].distance.toFixed(2)}km -
+ <>
+
+
{newMeetingRoomsInfo[0].branchName}
+
+
지점 상세보기
+ arrow
-
+
+ location +
{currentBranch?.branchName}으로부터 {newMeetingRoomsInfo[0].distance.toFixed(2)}km
+
+
{newMeetingRooms.map((room) => (
handleRoomClick(room.meetingRoomId)} - style={{ minWidth: 160, maxWidth: 160, marginRight: 10 }}> + style={{ minWidth: 160, maxWidth: 160, marginRight: 10 }} + >
{room.meetingRoomName} + className="object-cover rounded" />
{room.meetingRoomName}
- floor + floor
- {room.meetingRoomFloor < 0 - ? `B${Math.abs(room.meetingRoomFloor)}` - : `${room.meetingRoomFloor}`} - 층 -
- capacity -
- 최대 {room.meetingRoomCapacity}명 + {room.meetingRoomFloor < 0 ? `B${Math.abs(room.meetingRoomFloor)}` : `${room.meetingRoomFloor}`}층
+ capacity +
최대 {room.meetingRoomCapacity}명
))} -
- - )} +
+ )} {newMeetingRoomsInfo2 && newMeetingRooms2?.length > 0 && ( - <> -
-
-
- {newMeetingRoomsInfo2[0].branchName} -
-
-
- 지점 상세보기 -
- arrow -
-
-
- location -
- {currentBranch?.branchName}점으로부터{' '} - {newMeetingRoomsInfo2[0].distance.toFixed(2)}km -
+ <>
+
+
{newMeetingRoomsInfo2[0].branchName}
+
+
지점 상세보기
+ arrow
-
+
+ location +
{currentBranch?.branchName}점으로부터 {newMeetingRoomsInfo2[0].distance.toFixed(2)}km
+
+
{newMeetingRooms2.map((room) => (
handleRoomClick(room.meetingRoomId)} - style={{ minWidth: 160, maxWidth: 160, marginRight: 10 }}> + style={{ minWidth: 160, maxWidth: 160, marginRight: 10 }} + >
{room.meetingRoomName} + className="object-cover rounded" />
{room.meetingRoomName}
- floor + floor
- {room.meetingRoomFloor < 0 - ? `B${Math.abs(room.meetingRoomFloor)}` - : `${room.meetingRoomFloor}`} - 층 -
- capacity -
- 최대 {room.meetingRoomCapacity}명 + {room.meetingRoomFloor < 0 ? `B${Math.abs(room.meetingRoomFloor)}` : `${room.meetingRoomFloor}`}층
+ capacity +
최대 {room.meetingRoomCapacity}명
))} -
- - )} +
+ )}
)} +
{startTime && endTime && ( @@ -831,6 +635,7 @@ const MeetingRoomIndex: React.FC = () => { )}
); -}; - -export default MeetingRoomIndex; + }; + + export default MeetingRoomIndex; + \ No newline at end of file diff --git a/src/components/reservation/meetingRoom/MeetingRoomInfo.tsx b/src/components/reservation/meetingRoom/MeetingRoomInfo.tsx index 51894a1..4fb4146 100644 --- a/src/components/reservation/meetingRoom/MeetingRoomInfo.tsx +++ b/src/components/reservation/meetingRoom/MeetingRoomInfo.tsx @@ -49,6 +49,16 @@ const MeetingRoomInfo = () => { inputRef.current?.focus(); }; + const [toastMessage, setToastMessage] = useState(''); + +const showToast = (message: React.SetStateAction) => { + setToastMessage(message); + setTimeout(() => { + setToastMessage(''); + }, 3000); +}; + + const selectedBranch = useBranchStore((state) => state.selectedBranch); const updatedTimeSelected = useBranchStore((state) => state.updatedTimeSelected); const reservedBranch = useBranchStore2((state) => state.reservedBranch); @@ -185,9 +195,15 @@ const MeetingRoomInfo = () => { }; const handleAddMember = (member: Member) => { + if (addedMembers.length >= (meetingRoom!.meetingRoomCapacity - 1)) { + showToast(`최대 ${meetingRoom!.meetingRoomCapacity - 1}명까지 초대할 수 있습니다.`); + return; + } setAddedMembers([...addedMembers, member]); setInvitedMemberIds([...invitedMemberIds, member.memberId]); - }; +}; + + const handleRemoveMember = (member: Member) => { setAddedMembers(addedMembers.filter((m) => m.memberId !== member.memberId)); @@ -210,295 +226,193 @@ const MeetingRoomInfo = () => { return
No meeting room data
; } - return ( -
-
- +
+ +
+ meetingRoomImage -
- meetingRoomImage -
-
-
- {meetingRoom.branchName} -
-
-
- 지점 상세보기 +
+
+
+ {meetingRoom.branchName} +
+
+
지점 상세보기
+ arrow +
- arrow -
-
-
-
- {meetingRoom.meetingRoomName} -
-
- floor -
- {meetingRoom.meetingRoomFloor < 0 - ? `B${Math.abs(meetingRoom.meetingRoomFloor)}` - : `${meetingRoom.meetingRoomFloor}`} - 층 +
+
{meetingRoom.meetingRoomName}
+
+ floor +
+ {meetingRoom.meetingRoomFloor < 0 ? `B${Math.abs(meetingRoom.meetingRoomFloor)}` : `${meetingRoom.meetingRoomFloor}`}층 +
+ capacity +
+ 최대 {meetingRoom.meetingRoomCapacity}명 +
+ check +
+ {meetingRoom.equipments.join(', ')} +
+
- capacity -
- 최대 {meetingRoom.meetingRoomCapacity}명 +
+
- check -
- {meetingRoom.equipments.join(', ')} +
+
console.log("Edit clicked")}> + setEventName(e.target.value)} + ref={inputRef} + className="w-full h-full outline-none bg-transparent" + placeholder="일정명을 작성하세요." + /> + edit
-
-
-
-
-
console.log('Edit clicked')}> - setEventName(e.target.value)} - ref={inputRef} - className="w-full h-full outline-none bg-transparent" - placeholder="일정명을 작성하세요." - /> - edit -
-
-
-
-
- 일정 -
-
-
- {storedGetTime ? `${storedGetTime}` : '시간을 선택해주세요'}
-
-
-
-
-
setShowSearch(!showSearch)}> -
-
- 참석 멤버 -
- {!showSearch && ( - <> - {addedMembers.length > 0 && ( -
-
- {addedMembers.length === 1 - ? addedMembers[0].memberName - : `${addedMembers[0].memberName} 외 ${addedMembers.length - 1}인`} -
+
+
+
+
+
일정
+
+
+ {storedGetTime ? ( + `${storedGetTime}` + ) : ( + '시간을 선택해주세요' + )}
- )} - - )} +
- {showSearch ? ( - arrow - ) : ( - arrow - )} -
- {showSearch && ( - <> - {addedMembers.length > 0 && ( -
-
- {addedMembers.map((member) => ( -
-
-
- {member.memberName} -
- delete user handleRemoveMember(member)} - /> +
+
+
+
+
setShowSearch(!showSearch)}> +
+
+ 참석 멤버
-
- ))} -
+ {!showSearch && ( + <> + {addedMembers.length > 0 && ( +
+
+ {addedMembers.length === 1 + ? addedMembers[0].memberName + : `${addedMembers[0].memberName} 외 ${addedMembers.length - 1}인`} +
+
+ )} + + )} +
+ {showSearch ? ( + arrow + ) : ( + arrow + )}
- )} -
- - search -
- {(inviteableMembers.length > 0 || nonInviteableMembers.length > 0) && ( -
    - {inviteableMembers.map((member) => ( -
  • -
    - member image -
    -
    - {member.memberName} - - {member.memberEmail} - -
    - {invitedMemberIds.includes(member.memberId) ? ( - invited user - ) : ( - invite user handleAddMember(member)} - /> - )} -
    • - ))} - {nonInviteableMembers.map((member) => ( -
  • - member image -
    -
    - {member.memberName} - ExclamationMark + {showSearch && ( + <> + {addedMembers.length > 0 && ( +
    +
    + {addedMembers.map(member => ( +
    +
    +
    + {member.memberName} +
    + delete user handleRemoveMember(member)} /> +
    +
    + ))} +
    - - {member.memberEmail} - -
    - invite user -
    • - ))} -
- )} - - )} -
-
- Location -

- 일정이 이미 있는 사용자는 참석 멤버로 등록할 수 없어요! 일정을 조정한 뒤 - 추가할 수 있습니다. -

-
-
- + )} +
+ + search +
+ {(inviteableMembers.length > 0 || nonInviteableMembers.length > 0) && ( +
    + {inviteableMembers.map((member) => ( +
  • +
    + member image +
    +
    + {member.memberName} + {member.memberEmail} +
    + {invitedMemberIds.includes(member.memberId) ? ( + invited user + ) : ( + invite user handleAddMember(member)} /> + )} +
    • + ))} + {nonInviteableMembers.map((member) => ( +
  • + member image +
    +
    + {member.memberName} + ExclamationMark +
    + {member.memberEmail} +
    + invite user +
    • + ))} +
+ )} + + )} +
+ {toastMessage && ( +
+ {toastMessage} +
+ )} +
+ Location +

일정이 이미 있는 사용자는 참석 멤버로 등록할 수 없어요! 일정을 조정한 뒤 추가할 수 있습니다.

+
+
+
{ +export const BackArrow = ({ width, height, name }: BackArrowProps) => { + const router = useRouter(); return ( -
- - Back - +
router.back()} + className="h-[48px] flex flex-row justify-start items-center"> + Back
{name}
diff --git a/src/components/sign/signup/EmailVerification.tsx b/src/components/sign/signup/EmailVerification.tsx index eb2cffb..9180142 100644 --- a/src/components/sign/signup/EmailVerification.tsx +++ b/src/components/sign/signup/EmailVerification.tsx @@ -109,10 +109,6 @@ const EmailVerification = ({ onNext }: EmailVerification) => { } }, [emailValid]); - useEffect(() => { - startRef.current?.focus(); - }, []); - useEffect(() => { let timeoutId: NodeJS.Timeout; if (errorMessage != '') { diff --git a/src/components/sign/signup/PasswordVerification.tsx b/src/components/sign/signup/PasswordVerification.tsx index 83b992b..adad434 100644 --- a/src/components/sign/signup/PasswordVerification.tsx +++ b/src/components/sign/signup/PasswordVerification.tsx @@ -6,6 +6,8 @@ import Terms from './Terms'; import { JobPositionType } from '@/models/jobPosition'; import { jobPosition } from '@/constant/jobPosition'; import ToBack from '@/components/shared/sign/ToBack'; +import { TermsType } from '@/models/terms'; +import { 약관목록 } from '@constant/temrs'; /* eslint-disable no-unused-vars */ const JobPosition = dynamic(() => import('./JobPosition'), { ssr: false @@ -33,6 +35,10 @@ const PasswordVerification = ({ onNext, applyValues }: PasswordVerificationProps const [isAllDataValid, setIsAllDataValid] = useState(false); // 모두동의 job선택됨 비밀번호 통과 + const [termsAgreements, setTermsAgreements] = useState(() => + setInitialValues(약관목록) + ); + useEffect(() => { if (isAllAgreeChecked && selectedJob != '' && !passwordError && password != '') { setIsAllDataValid(true); @@ -240,7 +246,12 @@ const PasswordVerification = ({ onNext, applyValues }: PasswordVerificationProps />
- +