From e68f5482364b6a3828b43548ab9f48269c35feb3 Mon Sep 17 00:00:00 2001 From: pillow12360 Date: Sun, 5 Jan 2025 15:19:22 +0900 Subject: [PATCH] =?UTF-8?q?#244=20refactor:=20=EC=97=94=EB=93=9C=ED=8F=AC?= =?UTF-8?q?=EC=9D=B8=ED=8A=B8=20api=20=EC=97=B0=EB=8F=99=20=EB=8B=AC?= =?UTF-8?q?=EB=B3=84=20=EB=B3=B4=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/pages/SeminarRoom/Reservation.tsx | 68 ++-------- .../src/pages/SeminarRoom/ReservationStyle.ts | 122 +----------------- 2 files changed, 11 insertions(+), 179 deletions(-) diff --git a/frontend/src/pages/SeminarRoom/Reservation.tsx b/frontend/src/pages/SeminarRoom/Reservation.tsx index 8e3163ea..460a69d7 100644 --- a/frontend/src/pages/SeminarRoom/Reservation.tsx +++ b/frontend/src/pages/SeminarRoom/Reservation.tsx @@ -1,10 +1,6 @@ import { useState } from 'react'; import { Container, - HeaderContainer, - Navigation, - NavButton, - NavButtonGroup, RoomContainer, RoomInfo, RoomName, @@ -20,14 +16,12 @@ 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: '김철수', @@ -35,46 +29,22 @@ const dummyReservations: ReservationData[] = [ 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( , ); @@ -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 === '세미나' @@ -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; @@ -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 ( - - - - {seminarRooms.map((room) => ( - handleRoomChange(room)} - > - {room} - - ))} - - - - {selectedRoom} + 세미나실
- +
수용인원 diff --git a/frontend/src/pages/SeminarRoom/ReservationStyle.ts b/frontend/src/pages/SeminarRoom/ReservationStyle.ts index 283652b6..25085ddf 100644 --- a/frontend/src/pages/SeminarRoom/ReservationStyle.ts +++ b/frontend/src/pages/SeminarRoom/ReservationStyle.ts @@ -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; } @@ -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` - 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; @@ -201,6 +146,7 @@ export const StyledCalendar = styled(Calendar)` background: ${colors.primaryDark}; } } + .react-calendar__tile { display: flex; flex-direction: column; @@ -294,67 +240,3 @@ export const StyledCalendar = styled(Calendar)` } } `; - -// 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; -`;