Skip to content

Commit

Permalink
#244 refactor: 엔드포인트 api 연동 달별 보기
Browse files Browse the repository at this point in the history
  • Loading branch information
@pillow12360
pillow12360 committed Jan 5, 2025
1 parent 3831025 commit e68f548
Show file tree
Hide file tree
Showing 2 changed files with 11 additions and 179 deletions.
68 changes: 9 additions & 59 deletions frontend/src/pages/SeminarRoom/Reservation.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
import { useState } from 'react';
import {
Container,
HeaderContainer,
Navigation,
NavButton,
NavButtonGroup,
RoomContainer,
RoomInfo,
RoomName,
Expand All @@ -20,61 +16,35 @@ import styled from 'styled-components';
import { ReservationModal } from './ReservationModal';
import { ReservationData } from './types/reservation.types';

const seminarRooms: string[] = ['세미나실1', '세미나실2'];

// 더미 데이터
const dummyReservations: ReservationData[] = [
{
id: 1,
roomId: '세미나실1',
date: '2024-12-02',
roomId: '세미나실',
date: '2025-01-04',
startTime: '09:00',
endTime: '11:00',
userName: '김철수',
purpose: '세미나',
contact: '010-1234-5678',
department: '컴퓨터공학과',
},
{
id: 2,
roomId: '세미나실1',
date: '2024-12-02',
startTime: '11:00',
endTime: '12:00',
userName: '이영희',
purpose: '스터디',
contact: '010-2345-6789',
},
{
id: 3,
roomId: '세미나실1',
date: '2024-12-02',
startTime: '13:00',
endTime: '15:00',
userName: '박지민',
purpose: '미팅',
contact: '010-3456-7890',
},
// ... other dummy data with updated roomId
];

function Reservation() {
const { openModal, closeModal } = useModal();
const [selectedRoom, setSelectedRoom] = useState('세미나실1');
const [selectedDate, setSelectedDate] = useState(
moment(new Date()).format('YYYY-MM-DD'),
);

const handleRoomChange = (room: string) => {
setSelectedRoom(room);
};

const handleReservationClick = () => {
openModal(
<ReservationModal
isOpen={true}
onClose={closeModal}
selectedDate={selectedDate}
selectedRoom={selectedRoom}
selectedRoom="세미나실"
existingReservations={dummyReservations}
/>,
);
Expand All @@ -86,10 +56,9 @@ function Reservation() {

const List = styled.p<{ className?: string }>`
margin: 0 0 8px 0;
padding-left: 12px;
padding: 8px 12px;
color: white;
border-radius: 4px;
padding: 8px 12px;
background-color: ${({ className }) =>
className === '세미나'
Expand All @@ -104,9 +73,7 @@ function Reservation() {
const tileContent = ({ date }: { date: Date }) => {
const formattedDate = moment(date).format('YYYY-MM-DD');
const reservationsForDate = dummyReservations.filter(
(reservation) =>
reservation.date === formattedDate &&
reservation.roomId === selectedRoom,
(reservation) => reservation.date === formattedDate,
);

if (reservationsForDate.length === 0) return null;
Expand Down Expand Up @@ -193,36 +160,19 @@ function Reservation() {
const tileClassName = ({ date }: { date: Date }) => {
const formattedDate = moment(date).format('YYYY-MM-DD');
const hasReservations = dummyReservations.some(
(reservation) =>
reservation.date === formattedDate &&
reservation.roomId === selectedRoom,
(reservation) => reservation.date === formattedDate,
);
return hasReservations ? 'has-reservation' : '';
};

return (
<Container>
<HeaderContainer>
<Navigation>
<NavButtonGroup>
{seminarRooms.map((room) => (
<NavButton
key={room}
isActive={selectedRoom === room}
onClick={() => handleRoomChange(room)}
>
{room}
</NavButton>
))}
</NavButtonGroup>
</Navigation>
</HeaderContainer>
<RoomContainer>
<RoomInfo>
<RoomName>{selectedRoom}</RoomName>
<RoomName>세미나실</RoomName>
<div style={{ display: 'flex', gap: '20px' }}>
<div>
<RoomImg src="/seminarRoom1.jpg" alt={selectedRoom} />
<RoomImg src="/seminarRoom1.jpg" alt="세미나실" />
</div>
<div>
<Capacity>수용인원</Capacity>
Expand Down
122 changes: 2 additions & 120 deletions frontend/src/pages/SeminarRoom/ReservationStyle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,6 @@ import Calendar from 'react-calendar';
import 'react-calendar/dist/Calendar.css';
import { MomentInput } from 'moment';

interface StyledButtonProps {
isActive?: boolean;
}

interface StyledCalendarProps {
onChange: (date: MomentInput) => void;
}
Expand Down Expand Up @@ -36,58 +32,7 @@ export const Container = styled.div`
}
`;

export const HeaderContainer = styled.div`
margin-bottom: 30px;
`;

export const Navigation = styled.nav`
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid ${colors.primary};
`;

export const NavButtonGroup = styled.div`
display: flex;
`;

export const NavButton = styled.button<StyledButtonProps>`
padding: 12px 32px;
font-size: 1.1rem;
border: none;
background: ${(props) => (props.isActive ? colors.primary : 'transparent')};
color: ${(props) => (props.isActive ? 'white' : '#333')};
cursor: pointer;
transition: all 0.2s ease-in-out;
position: relative;
&:hover {
background-color: ${(props) =>
props.isActive ? colors.primaryDark : colors.hover};
color: ${(props) => (props.isActive ? 'white' : colors.primary)};
}
${(props) =>
props.isActive &&
`
&::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background-color: ${colors.primary};
}
`}
${media.mobile} {
padding: 10px 20px;
font-size: 1rem;
}
`;

export const RoomContainer = styled.div`
export const RoomContainer = styled.div`ㅌ
display: flex;
flex-direction: column;
gap: 20px;
Expand Down Expand Up @@ -201,6 +146,7 @@ export const StyledCalendar = styled(Calendar)<StyledCalendarProps>`
background: ${colors.primaryDark};
}
}
.react-calendar__tile {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -294,67 +240,3 @@ export const StyledCalendar = styled(Calendar)<StyledCalendarProps>`
}
}
`;

// Modal 관련 스타일 추가
export const ModalForm = styled.form`
display: flex;
flex-direction: column;
gap: 1rem;
`;

export const FormGroup = styled.div`
display: flex;
flex-direction: column;
gap: 0.5rem;
`;

export const Label = styled.label`
font-weight: 500;
color: #333;
`;

export const Input = styled.input`
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
&:focus {
outline: none;
border-color: ${colors.primary};
}
&:disabled {
background-color: ${colors.hover};
}
`;

export const Select = styled.select`
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
background-color: white;
&:focus {
outline: none;
border-color: ${colors.primary};
}
`;

export const TimeContainer = styled.div`
display: flex;
align-items: center;
gap: 1rem;
${media.mobile} {
flex-direction: column;
align-items: stretch;
}
`;

export const ErrorMessage = styled.p`
color: ${colors.primary};
font-size: 0.875rem;
margin-top: 0.25rem;
`;

0 comments on commit e68f548

Please sign in to comment.