Skip to content

Commit

Permalink
feat: 스타일 코드 분리에 따른 S.방식 적용
Browse files Browse the repository at this point in the history
  • Loading branch information
@kanghaeun
kanghaeun committed Aug 14, 2024
1 parent 95a8220 commit 49b17e6
Show file tree
Hide file tree
Showing 7 changed files with 91 additions and 487 deletions.
123 changes: 3 additions & 120 deletions FE/src/components/EconoCalendar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import styled from "styled-components";
import interactionPlugin from "@fullcalendar/interaction";
import CreateModal from "./scheduleCreate/CreateModal";
import CheckCalendar from "./scheduleCheck/CheckCalendar";
import * as S from "../styles/EconoCalendar";

const EconoCalendar = ({
isLoggedIn,
Expand Down Expand Up @@ -77,7 +78,7 @@ const EconoCalendar = ({

return (
<>
<CalendarContainer>
<S.FulCalendarWrapper>
<FullCalendar
plugins={[dayGridPlugin, interactionPlugin]}
locale="ko"
Expand Down Expand Up @@ -141,7 +142,7 @@ const EconoCalendar = ({
eventClick={handleEventClick}
dateClick={handleDateClick}
/>
</CalendarContainer>
</S.FulCalendarWrapper>
<CheckCalendar
isOpen={checkModalIsOpen}
onRequestClose={() => setCheckModalIsOpen(false)}
Expand All @@ -161,121 +162,3 @@ const EconoCalendar = ({
};

export default EconoCalendar;

const CalendarContainer = styled.div`
width: 100%;
margin-top: 1rem;
.fc-toolbar-chunk {
display: flex;
.fc-toolbar-chunk > :last-child {
margin-right: 1rem;
}
}
.fc-prev-button {
background-color: unset;
color: #6c757d;
border: none;
&:hover {
background-color: unset;
color: #6c757d;
border: none;
}
}
.fc-next-button {
background-color: unset;
color: #6c757d;
border: none;
&:hover {
background-color: unset;
color: #6c757d;
border: none;
}
}
.fc-prev-button:focus,
.fc-next-button:focus {
outline: none;
box-shadow: none;
}
.fc-today-button {
background-color: unset;
color: #595959;
border: 1px solid #cbcbcb;
&:hover {
background-color: unset;
color: #595959;
border: 1px solid #cbcbcb;
}
}
.fc-today-button[disabled] {
background-color: unset;
color: #595959;
border: 1px solid #cbcbcb;
}
.fc-day-sun a {
color: red;
text-decoration: none;
}
.fc-daygrid-day-top {
width: 2rem;
margin-left: 0.3rem;
}
.fc-day-today {
background-color: #ffffff !important;
}
.fc-day-today .fc-daygrid-day-top {
background: #ff9999 !important;
border-radius: 50% !important;
color: #fff;
margin-left: 0.5rem;
width: 1.53rem;
display: flex;
justify-content: center;
}
.fc-day-today .fc-daygrid-day-frame {
margin-top: 0.2rem;
}
.fc-day-today .fc-daygrid-day-number {
margin-top: 0.1rem;
width: 2rem;
}
.fc-daygrid-day-number {
margin-top: 0.3rem;
margin-left: -0.06rem;
}
.fc-toolbar-title {
margin-top: 0.2em;
}
.fc-scrollgrid-sync-inner {
border: none;
}
.fc-col-header-cell {
border-right: none;
border-left: none;
}
.fc-createDateButton-button {
background-color: #fff;
border-color: #cbcbcb;
color: #595959;
margin-right: 1rem;
}
.fc-loginLogoutButton-button {
background-color: #fff;
border-color: #cbcbcb;
color: #595959;
margin-right: 1rem;
}
.fc-event-title-container {
height: 1.3rem;
display: flex;
align-items: center;
font-size: 0.95rem;
margin-left: 0.3rem;
}
.fc-direction-ltr .fc-toolbar > * > :not(:first-child) {
margin-left: 0.5rem;
}
`;
13 changes: 0 additions & 13 deletions FE/src/components/scheduleCheck/CheckCalendar.css
View file

This file was deleted.

106 changes: 20 additions & 86 deletions FE/src/components/scheduleCheck/CheckCalendar.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,10 @@ import { IoClose } from "react-icons/io5";
import { MdOutlineLocationOn } from "react-icons/md";
import { AiOutlineBars } from "react-icons/ai";
import { FaRegCalendar } from "react-icons/fa6";

import { Link } from "react-router-dom";
import Modal from "react-modal";
import styled from "styled-components";
import axios from "axios";
import "./CheckCalendar.css";
import DeleteEvent from "../DeleteEvent";
import * as S from "../../styles/scheduleCheck/CheckCalendar";

const CheckCalendar = ({
isOpen,
Expand Down Expand Up @@ -79,134 +76,71 @@ const CheckCalendar = ({
};

return (
<Modal
<S.ModalLayout
isOpen={isOpen}
onRequestClose={handleRequestClose}
className="CheckModal"
overlayClassName="overlay"
>
<ModalBar>
<S.HeaderContainer>
<button onClick={handleRequestClose}>
<IoClose size="2rem" color="rgb(95, 99, 104)" />
</button>
<StyledModifyIcon>
<S.ModifyIconWrapper>
<Link to="/ModifyPage" state={{ selectID: selectID }}>
<button>
<GoPencil size="1.55rem" color="rgb(95, 99, 104)" />
</button>
</Link>
</StyledModifyIcon>
</S.ModifyIconWrapper>
<DeleteEvent
events={events}
selectID={selectID}
handleDelete={handleDelete}
onRequestClose={handleRequestClose}
handleUpdateDeleteData={handleUpdateDeleteData}
/>
</ModalBar>

<ModalContent>
<Title color={event.color}>
</S.HeaderContainer>
<S.DetailedInfoContainer>
<S.TitleBox color={event.color}>
<span></span>
<div>{event.title}</div>
</Title>
<Date>{date(event.startDate, event.endDate)}</Date>
</S.TitleBox>
<S.DateParagraph>
{date(event.startDate, event.endDate)}
</S.DateParagraph>
{event.place && (
<StyledDetailIcon>
<S.DetailIconWrapper>
<MdOutlineLocationOn
size="1.6rem"
color="rgb(95, 99, 104)"
style={{ marginRight: "1.5rem" }}
/>
<div>{event.place}</div>
</StyledDetailIcon>
</S.DetailIconWrapper>
)}
{event.info && (
<StyledDetailIcon>
<S.DetailIconWrapper>
<AiOutlineBars
size="1.6rem"
color="rgb(95, 99, 104)"
style={{ marginRight: "1.5rem" }}
/>
<div> {event.info}</div>
</StyledDetailIcon>
</S.DetailIconWrapper>
)}
{event.type && (
<StyledDetailIcon>
<S.DetailIconWrapper>
<FaRegCalendar
size="1.5rem"
color="rgb(95, 99, 104)"
style={{ marginRight: "1.5rem" }}
/>
<div> {event.type}</div>
</StyledDetailIcon>
</S.DetailIconWrapper>
)}
</ModalContent>
</Modal>
</S.DetailedInfoContainer>
</S.ModalLayout>
);
};

export default CheckCalendar;

const StyledModifyIcon = styled.div`
margin-top: 0.22rem;
margin-left: 0.4rem;
`;
const ModalBar = styled.div`
padding-top: 0.5rem;
padding-left: 0.375rem;
padding-right: 0.375rem;
display: flex;
flex-direction: row-reverse;
outline: none;
button {
width: 3rem;
background-color: #fff;
border: none;
svg {
size: 5rem;
}
}
`;

const ModalContent = styled.div`
padding-right: 1.75rem;
padding-left: 1.75rem;
padding-bottom: 1rem;
p {
margin-top: 0.6rem;
margin-right: 0.6rem;
}
`;

const Title = styled.div`
display: flex;
align-items: center;
margin-left: 0.3rem;
span {
width: 1rem;
height: 1rem;
background-color: ${(props) => props.color || "#beb9ff"};
margin-right: 1.6rem;
border-radius: 0.3rem;
}
div {
font-size: 1.6rem;
}
`;

const Date = styled.p`
margin-left: 2.75rem;
margin-bottom: 1.8rem;
`;
const StyledDetailIcon = styled.div`
margin-top: 1.2rem;
margin-bottom: 1.2rem;
display: flex;
align-items: center;
div {
font-size: 1.1em;
}
`;
Loading

0 comments on commit 49b17e6

Please sign in to comment.