From 49b17e6a9fef03c7ae58bd00befdc58d5cf3f6b9 Mon Sep 17 00:00:00 2001 From: kanghaeun Date: Thu, 15 Aug 2024 02:48:39 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=BD=94?= =?UTF-8?q?=EB=93=9C=20=EB=B6=84=EB=A6=AC=EC=97=90=20=EB=94=B0=EB=A5=B8=20?= =?UTF-8?q?S.=EB=B0=A9=EC=8B=9D=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/src/components/EconoCalendar.jsx | 123 +-------------- .../scheduleCheck/CheckCalendar.css | 13 -- .../scheduleCheck/CheckCalendar.jsx | 106 +++---------- FE/src/pages/CalendarModify.jsx | 98 +++--------- FE/src/pages/LoginPage.jsx | 95 ++---------- FE/src/pages/MainPage.jsx | 141 +++++------------- FE/src/pages/ProfilePage.jsx | 2 +- 7 files changed, 91 insertions(+), 487 deletions(-) delete mode 100644 FE/src/components/scheduleCheck/CheckCalendar.css diff --git a/FE/src/components/EconoCalendar.jsx b/FE/src/components/EconoCalendar.jsx index 01c14271..ddb7b084 100644 --- a/FE/src/components/EconoCalendar.jsx +++ b/FE/src/components/EconoCalendar.jsx @@ -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, @@ -77,7 +78,7 @@ const EconoCalendar = ({ return ( <> - + - + setCheckModalIsOpen(false)} @@ -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; - } -`; diff --git a/FE/src/components/scheduleCheck/CheckCalendar.css b/FE/src/components/scheduleCheck/CheckCalendar.css deleted file mode 100644 index 2a120509..00000000 --- a/FE/src/components/scheduleCheck/CheckCalendar.css +++ /dev/null @@ -1,13 +0,0 @@ -.CheckModal { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - background-color: white; - z-index: 100; - width: 37rem; - height: auto; - border-radius: 4px; - box-shadow: 2px 2px 20px 2px rgba(0, 0, 0, 0.3); - outline: none; -} diff --git a/FE/src/components/scheduleCheck/CheckCalendar.jsx b/FE/src/components/scheduleCheck/CheckCalendar.jsx index 0610dac0..99ae5e97 100644 --- a/FE/src/components/scheduleCheck/CheckCalendar.jsx +++ b/FE/src/components/scheduleCheck/CheckCalendar.jsx @@ -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, @@ -79,23 +76,22 @@ const CheckCalendar = ({ }; return ( - - + - + - + - - - - + </S.HeaderContainer> + <S.DetailedInfoContainer> + <S.TitleBox color={event.color}> <span></span> <div>{event.title}</div> - - {date(event.startDate, event.endDate)} + + + {date(event.startDate, event.endDate)} + {event.place && ( - +
{event.place}
-
+ )} {event.info && ( - +
{event.info}
-
+ )} {event.type && ( - +
{event.type}
-
+ )} -
-
+ + ); }; 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; - } -`; diff --git a/FE/src/pages/CalendarModify.jsx b/FE/src/pages/CalendarModify.jsx index 7f42d841..ca79fe9f 100644 --- a/FE/src/pages/CalendarModify.jsx +++ b/FE/src/pages/CalendarModify.jsx @@ -1,11 +1,10 @@ import { useState, useEffect } from "react"; import { useLocation, useNavigate } from "react-router-dom"; import { IoMdClose } from "react-icons/io"; -import styled from "styled-components"; import ReactQuill from "react-quill"; import axios from "axios"; import TimeSelect from "../components/common/TimeSelect"; - +import * as S from "../styles/pages/CalendarModify"; const CalendarModify = () => { const navigate = useNavigate(); const location = useLocation(); @@ -94,8 +93,8 @@ const CalendarModify = () => { navigate(-1); }; return ( - -
+ + - -
- - + + + { value={modifyEndDate} onChange={handleEndDateChange} /> - - + + { onTimeSelect={handleEndTimeSelect} value={modifyEndTime} /> - - + - + > + - +
- 저장 + 저장
-
-
+ + ); }; export default CalendarModify; - -const Box = styled.div` - width: 50rem; -`; -const ModifyFrame = styled.div` - margin-left: 4rem; -`; -const TitleInput = styled.input` - width: 100%; - height: 2rem; - margin-bottom: 2rem; - margin-top: 2rem; - margin-left: 0.7rem; - font-size: 1.5rem; - border: none; - border-bottom: 1px solid #495057; - outline: none; -`; -const Header = styled.div` - display: flex; - margin-left: 1rem; -`; -const SaveButton = styled.button` - width: 4rem; - height: 2rem; - border-radius: 0.25rem; - margin-top: 3rem; - border: 0.5px solid #858585; - outline: none; - cursor: pointer; - right: 0; - background-color: ${(props) => (props.disabled ? "#e0e0e0" : "white")}; - color: ${(props) => (props.disabled ? "#9e9e9e" : "#3e3e3e")}; - border: ${(props) => (props.disabled ? "none" : "0.5px solid #858585")}; - - &:disabled { - cursor: default; - } -`; - -const EditorBox = styled.div` - .ql-editor { - height: 110px; - overflow-y: auto; - } - .ql-editor::before { - font-style: normal !important; - color: #999 !important; - } -`; - -const PlaceSelect = styled.input` - border: none; - width: 100%; - outline: none; - margin: 1.1rem 0; -`; - -const DateRow = styled.div` - display: flex; - align-items: center; - gap: 0.7rem; -`; diff --git a/FE/src/pages/LoginPage.jsx b/FE/src/pages/LoginPage.jsx index 3c8cf821..baf12631 100644 --- a/FE/src/pages/LoginPage.jsx +++ b/FE/src/pages/LoginPage.jsx @@ -1,8 +1,7 @@ import { useEffect, useState } from "react"; -import styled from "styled-components"; import { useNavigate, useSearchParams } from "react-router-dom"; import axios from "axios"; - +import * as S from "../styles/pages/LoginPage"; const LoginPage = () => { const navigate = useNavigate(); const [searchParams] = useSearchParams(); @@ -50,102 +49,34 @@ const LoginPage = () => { if (isLoading) { return ( - - - + + + ); } return ( <> - +

에러 캘린더에 떨어질
준비 되셨나요?

- + 에코노베이션 회원이 아니신 경우 로그인이 불가하며
공식 일정만 조회 가능합니다. -
+ {error &&
{error}
} - - + + 슬랙으로 로그인 - -
- - + + + + ); }; export default LoginPage; - -const StyledTextArea = styled.div` - position: absolute; - top: 20%; - left: 15%; - - h2 { - font-family: "Pretendard-bold"; - font-size: 3rem; - font-weight: 900; - line-height: 3.7rem; - } - h3 { - line-height: 1.5rem; - } -`; - -const StyledSlackButton = styled.button` - position: relative; - padding: 1rem 8.5rem 1rem 10.5rem; - border-radius: 1rem; - border: none; - background-color: #e1e1e1; - font-size: 1rem; - color: #6f6f6f; - font-weight: 700; - cursor: pointer; -`; - -const StyledSlackImage = styled.img` - left: 8rem; - bottom: 0.9rem; - position: absolute; -`; - -const StyledSubTitle = styled.h3` - margin-top: 1.7rem; - margin-bottom: 10rem; -`; - -const StyledBackground = styled.img` - margin-left: 48%; - margin-top: 8%; - height: 35rem; -`; - -const StyledCharacter = styled.img` - position: absolute; - top: 25%; - left: 60%; -`; - -const LoadingContainer = styled.div` - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: flex; - justify-content: center; - align-items: center; - background-color: rgba(255, 255, 255, 0.8); -`; - -const LoadingImage = styled.img` - width: 100px; - height: auto; -`; diff --git a/FE/src/pages/MainPage.jsx b/FE/src/pages/MainPage.jsx index 3f8396c3..e0ab09f7 100644 --- a/FE/src/pages/MainPage.jsx +++ b/FE/src/pages/MainPage.jsx @@ -1,11 +1,11 @@ import { useState, useEffect, useMemo } from "react"; -import styled from "styled-components"; import EconoCalendar from "../components/EconoCalendar"; import ProfileBar from "../components/SideBar/ProfileBar"; import PublicFilter from "../components/SideBar/publicFilter/PublicFilter"; import IndividualFilter from "../components/SideBar/individualFilter/IndividualFilter"; import GroupFilter from "../components/SideBar/groupFilter/GroupFilter"; import axios from "axios"; +import * as S from "../styles/pages/MainPage"; const MainPage = () => { const [filterIndividualLists, setFilterIndividualLists] = useState([]); @@ -113,110 +113,43 @@ const MainPage = () => { }, []); return ( -
- - - ERROR - - - - - - {isLoggedIn && ( - <> - - - - )} - - - - - -
+ + + ERROR + + + + + + {isLoggedIn && ( + <> + + + + )} + + + + + ); }; export default MainPage; - -const SideBar = styled.div` - width: 15.625rem; - height: 98.1vh; - margin-top: 1rem; - display: flex; - flex-direction: column; -`; - -const CalendarPage = styled.div` - display: flex; - width: 100%; -`; - -const LineBox = styled.div` - width: 100%; - height: 1.25rem; - border: 1px solid #ddd; - border-right: none; - margin-top: 0.65rem; -`; - -const Logo = styled.div` - font-size: 2rem; - font-weight: bold; - margin-left: 1.5rem; - margin-top: 0.3rem; - color: #ff9999; - margin-bottom: 1rem; -`; - -const ScrollableContent = styled.div` - flex-grow: 1; - overflow-y: auto; - overflow-x: hidden; - - /* 기본적으로 스크롤바를 숨김 */ - scrollbar-width: thin; - scrollbar-color: transparent transparent; - - /* 호버 시 스크롤바 표시 */ - &:hover { - scrollbar-color: #c6c6c6 transparent; - } - - &::-webkit-scrollbar { - width: 8px; - } - - &::-webkit-scrollbar-track { - background: transparent; - } - - &::-webkit-scrollbar-thumb { - background-color: transparent; - border-radius: 20px; - border: 3px solid transparent; - } -`; - -const FilterFrame = styled.div` - display: flex; - flex-direction: column; - justify-content: space-between; -`; diff --git a/FE/src/pages/ProfilePage.jsx b/FE/src/pages/ProfilePage.jsx index bf9bd618..f6ab04e9 100644 --- a/FE/src/pages/ProfilePage.jsx +++ b/FE/src/pages/ProfilePage.jsx @@ -1,7 +1,7 @@ import { useState, useEffect } from "react"; import { FaRandom } from "react-icons/fa"; import { useNavigate } from "react-router-dom"; -import * as S from "../styles/ProfilePage.js"; +import * as S from "../styles/pages/ProfilePage.js"; const ProfilePage = () => { const [selectedImage, setSelectedImage] = useState(null);