feat: 조회 모달 브랜치 최신화 (#88)

* style: 필터 디자인 수정 * chore: 파일 경로 업데이트 * feat: 필터 생성 모달 추가 * style: 모달 css 추가 * style: 필터추가모달 스타일 수정 * feat: 필터 생성 모달 추가 * chore: 컴포넌트 이름 변경 * feat: 그룹 필터 컴포넌트 내부에 베이직 모달 추가 * chore: 컴포넌트 이름 변경 후 파일 경로 수정 * feat: 그룹 모달 추가 * chore: 필터 색상 선택 컴포넌트 분리 * chore: 경로변경 * style: 제목입력칸 css 수정 * chore: 컴포넌트 분리에 따른 경로 변경 * feat: 그룹내 유저 추가 모달 추가 * feat: 상태값에 따른 모달 내용 변경 * feat: 상위 컴포넌트에서 받은 상태값에 따른 렌더링 * feat: 필터 색상 추가 * feat: 특정 캘린더에 따라 프롭스 다르게 보내주는 코드 수정 * stylde: 스타일드 컴포넌트에 <Styled 접두사 추가 * feat: 필터 제목 및 색상 상태 추가 * feat: 필터 제목 및 색상 선택 시 filterList 함수에 추가 * feat: 필터 색상 선택시 반영되게끔 로직 추가 * feat: 색상 및 제목 필터 리스트에 나열 기능 추가 * feat: 필터 색상 및 색상 선택기능 추가 * chore: 폴더 변경 및 경로 재설정 * feat: 필터리스트 상태 상위컴포넌트로 이동 * feat: 생성 모달 필터 선택 기능 추가 (#63) * feat: cors 설정 추가 * feat: 1차 스프린트 기능 개발 캘린더 기능 개발, 일정 리스트, 수정, 생성, 삭제 기능 개발 * feat: 프로필 선택 페이지 마크업 (#61) * style: 로그인 페이지 CSS 수정 * feat: 프로필 선택 페이지 마크업 * fix: 중복 파일 제거 * chore: .env테스트 * feat: .gitignore 경로 추가 * chore: .gitignore 경로 수정 * chore: 캐시 삭제 * feat: 버튼 컴포넌트 생성 * feat: 생성 모달 필터 선택 영역 추가 * style: 생성 모달 CSS 수정 * style: 버튼 컴포넌트 내부 토글 아이콘 추가 * feat: 생성 모달 필터 선택 드롭다운 기능 추가 * feat: 선택된 필터 백엔드 전송 부분 추가 --------- Co-authored-by: capDoYeonLee <[email protected]> Co-authored-by: LimSumi <[email protected]> Co-authored-by: LimSoomi <[email protected]> Co-authored-by: kanghaeun <[email protected]> * feat: 그룹,개인 필터 리스트 분리 기능 추가 * style: 필터 기준 margin값 변경 * style: 필터 삭제 및 편집 아이콘 마우스 호버기능 추가 * feat: 체크 모양 아이콘 변경 (#66) * feat: cors 설정 추가 * feat: 1차 스프린트 기능 개발 캘린더 기능 개발, 일정 리스트, 수정, 생성, 삭제 기능 개발 * feat: 프로필 선택 페이지 마크업 (#61) * style: 로그인 페이지 CSS 수정 * feat: 프로필 선택 페이지 마크업 * fix: 중복 파일 제거 * chore: .env테스트 * feat: .gitignore 경로 추가 * chore: .gitignore 경로 수정 * chore: 캐시 삭제 * style: 체크 모양 아이콘 svg 이미지 변경 --------- Co-authored-by: capDoYeonLee <[email protected]> Co-authored-by: LimSumi <[email protected]> Co-authored-by: LimSoomi <[email protected]> Co-authored-by: kanghaeun <[email protected]> * feat: 필터 접기 기능 추가 * style: 필터 접기 up and down 아이콘 추가 * style: 필터 삭제 및 더보기 아이콘 배치 수정 * style: 모달 수정 * feat: 필터 사이드바 보완 (#67) * style: 필터 디자인 수정 * chore: 파일 경로 업데이트 * feat: 필터 생성 모달 추가 * style: 모달 css 추가 * style: 필터추가모달 스타일 수정 * feat: 필터 생성 모달 추가 * chore: 컴포넌트 이름 변경 * feat: 그룹 필터 컴포넌트 내부에 베이직 모달 추가 * chore: 컴포넌트 이름 변경 후 파일 경로 수정 * feat: 그룹 모달 추가 * chore: 필터 색상 선택 컴포넌트 분리 * chore: 경로변경 * style: 제목입력칸 css 수정 * chore: 컴포넌트 분리에 따른 경로 변경 * feat: 그룹내 유저 추가 모달 추가 * feat: 상태값에 따른 모달 내용 변경 * feat: 상위 컴포넌트에서 받은 상태값에 따른 렌더링 * feat: 필터 색상 추가 * feat: 특정 캘린더에 따라 프롭스 다르게 보내주는 코드 수정 * stylde: 스타일드 컴포넌트에 <Styled 접두사 추가 * feat: 필터 제목 및 색상 상태 추가 * feat: 필터 제목 및 색상 선택 시 filterList 함수에 추가 * feat: 필터 색상 선택시 반영되게끔 로직 추가 * feat: 색상 및 제목 필터 리스트에 나열 기능 추가 * feat: 필터 색상 및 색상 선택기능 추가 * chore: 폴더 변경 및 경로 재설정 * feat: 필터리스트 상태 상위컴포넌트로 이동 * feat: 그룹,개인 필터 리스트 분리 기능 추가 * style: 필터 기준 margin값 변경 * style: 필터 삭제 및 편집 아이콘 마우스 호버기능 추가 * feat: 필터 접기 기능 추가 * style: 필터 접기 up and down 아이콘 추가 * style: 필터 삭제 및 더보기 아이콘 배치 수정 * style: 필터 저장 폰트 굵기 수정 * feat: 슬랙 로그인 기능 (#77) * feat: 로그인 버튼 구현 * feat: code를 추출하고 서버로 보내는 로직 구현 * feat: 로그인 버튼 클릭시 slack으로 이동하는 로직 추가 * feat: 슬랙 리다이렉션 코드 생성 기능 추가 * feat: 슬랙로그인 기능 추가 * feat: 슬랙 로그인 코드 추출 후 백엔드 전송 및 메인 페이지로 이동 (#79) * feat: 로그인 버튼 구현 * feat: code를 추출하고 서버로 보내는 로직 구현 * feat: 로그인 버튼 클릭시 slack으로 이동하는 로직 추가 * feat: 슬랙 리다이렉션 코드 생성 기능 추가 * feat: 슬랙로그인 기능 추가 * feat: 슬랙 로그인 코드 추출후 백엔드로 전송 * feat: 로그인 api 주소 변경 (#81) * feat: 로그인 버튼 구현 * feat: code를 추출하고 서버로 보내는 로직 구현 * feat: 로그인 버튼 클릭시 slack으로 이동하는 로직 추가 * feat: 슬랙 리다이렉션 코드 생성 기능 추가 * feat: 슬랙로그인 기능 추가 * feat: 슬랙 로그인 코드 추출후 백엔드로 전송 * feat: 로그인 api 주소 변경 * feat: 색상 추가에 따른 조회 모달 리팩토링 (#87) * style: 이벤트 높이 및 타이틀 사이즈 수정 * style: 이벤트 높이 수정에 따른 타이틀 배치 * style: 조회 모달 크기 수정 * feat: 전체 일정 조회 API 수정 * feat: 조회컴포넌트를 Details와 Actions 컴포넌트로 분리 * style: 이벤트 높이 수정 * chore: 불필요한 문서 삭제 * style: 조회 모달 수정 * feat: 필터색상 추가에 따른 모달 내용 수정 --------- Co-authored-by: mlnwns <[email protected]> Co-authored-by: capDoYeonLee <[email protected]> Co-authored-by: LimSumi <[email protected]> Co-authored-by: LimSoomi <[email protected]>
JNU-econovation · Jul 20, 2024 · 25d2485 · 25d2485
1 parent 8d44cf0
commit 25d2485
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 40 deletions.
diff --git a/FE/error/src/components/DeleteEvent.jsx b/FE/error/src/components/DeleteEvent.jsx
@@ -23,7 +23,7 @@ const DeleteEvent = ({
   return (
     <>
       <button onClick={calendarDelete}>
-        <RiDeleteBinLine size="1.2rem" />
+        <RiDeleteBinLine size="1.6rem" color="rgb(95, 99, 104)" />
       </button>
     </>
   );

diff --git a/FE/error/src/components/EconoCalendar.jsx b/FE/error/src/components/EconoCalendar.jsx
@@ -42,14 +42,14 @@ const EconoCalendar = () => {
 
   useEffect(() => {
     axios
-      .get("/api/calendar/all/2024-04-05")
+      .get("/api/calendar/all")
       .then((res) => {
         const fetchedEvents = res.data.data.map((event) => ({
           title: event.eventName,
           id: event.eventId,
           start: event.eventStartDate.split("T")[0],
           end: event.eventEndDate.split("T")[0],
-          color: "#ffc5bf",
+          color: "#FFC0CB",
         }));
         setEvents(fetchedEvents);
       })
@@ -256,4 +256,11 @@ const CalendarContainer = styled.div`
     color: #595959;
     margin-right: 0.7rem;
   }
+  .fc-event-title-container {
+    height: 1.3rem;
+    display: flex;
+    align-items: center;
+    font-size: 0.95rem;
+    margin-left: 0.3rem;
+  }
 `;
diff --git a/FE/error/src/components/scheduleCheck/CheckCalendar.css b/FE/error/src/components/scheduleCheck/CheckCalendar.css
@@ -5,7 +5,7 @@
   transform: translate(-50%, -50%);
   background-color: white;
   z-index: 100;
-  width: auto;
+  width: 37rem;
   height: auto;
   border-radius: 4px;
   box-shadow: 2px 2px 20px 2px rgba(0, 0, 0, 0.3);

diff --git a/FE/error/src/components/scheduleCheck/CheckCalendar.jsx b/FE/error/src/components/scheduleCheck/CheckCalendar.jsx
@@ -2,7 +2,9 @@ import { useEffect, useState, useRef } from "react";
 import { GoPencil } from "react-icons/go";
 import { IoClose } from "react-icons/io5";
 import { MdOutlineLocationOn } from "react-icons/md";
-import { MdOutlineAutoAwesomeMotion } 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";
@@ -20,13 +22,15 @@ const CheckCalendar = ({
 }) => {
   const [event, setEvent] = useState({});
 
-  function createDate(title, startDate, endDate, place, info) {
+  function createDate(title, startDate, endDate, place, info, type, color) {
     const specificEvent = {
       title: title,
       startDate: startDate,
       endDate: endDate,
       place: place,
       info: info,
+      type: type,
+      color: color,
     };
     setEvent(specificEvent);
   }
@@ -44,7 +48,9 @@ const CheckCalendar = ({
         res.data.data.eventStartDate,
         res.data.data.eventEndDate,
         res.data.data.eventPlace,
-        res.data.data.eventInfo
+        res.data.data.eventInfo,
+        res.data.data.eventType,
+        res.data.data.filterColor
       );
     });
   }, [selectID]);
@@ -73,13 +79,15 @@ const CheckCalendar = ({
     >
       <ModalBar>
         <button onClick={onRequestClose}>
-          <IoClose size="1.2rem" />
+          <IoClose size="2rem" color="rgb(95, 99, 104)" />
         </button>
-        <Link to="/ModifyPage" state={{ selectID: selectID }}>
-          <button>
-            <GoPencil size="1.2rem" />
-          </button>
-        </Link>
+        <StyledModifyIcon>
+          <Link to="/ModifyPage" state={{ selectID: selectID }}>
+            <button>
+              <GoPencil size="1.55rem" color="rgb(95, 99, 104)" />
+            </button>
+          </Link>
+        </StyledModifyIcon>
         <DeleteEvent
           events={events}
           selectID={selectID}
@@ -90,22 +98,40 @@ const CheckCalendar = ({
       </ModalBar>
 
       <ModalContent>
-        <Title>
+        <Title color={event.color}>
           <span></span>
           <div>{event.title}</div>
         </Title>
         <Date>{date(event.startDate, event.endDate)}</Date>
         {event.place && (
-          <p>
-            <MdOutlineLocationOn style={{ marginRight: "0.5rem" }} />
-            {event.place}
-          </p>
+          <StyledDetailIcon>
+            <MdOutlineLocationOn
+              size="1.6rem"
+              color="rgb(95, 99, 104)"
+              style={{ marginRight: "1.5rem" }}
+            />
+            <div>{event.place}</div>
+          </StyledDetailIcon>
         )}
         {event.info && (
-          <p>
-            <MdOutlineAutoAwesomeMotion style={{ marginRight: "0.5rem" }} />
-            {event.info}
-          </p>
+          <StyledDetailIcon>
+            <AiOutlineBars
+              size="1.6rem"
+              color="rgb(95, 99, 104)"
+              style={{ marginRight: "1.5rem" }}
+            />
+            <div> {event.info}</div>
+          </StyledDetailIcon>
+        )}
+        {event.type && (
+          <StyledDetailIcon>
+            <FaRegCalendar
+              size="1.5rem"
+              color="rgb(95, 99, 104)"
+              style={{ marginRight: "1.5rem" }}
+            />
+            <div> {event.type}</div>
+          </StyledDetailIcon>
         )}
       </ModalContent>
     </Modal>
@@ -114,9 +140,14 @@ const CheckCalendar = ({
 
 export default CheckCalendar;
 
+const StyledModifyIcon = styled.div`
+  margin-top: 0.22rem;
+  margin-left: 0.4rem;
+`;
 const ModalBar = styled.div`
-  margin-top: 0.5rem;
-  width: 25rem;
+  padding-top: 0.5rem;
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
   display: flex;
   flex-direction: row-reverse;
   outline: none;
@@ -132,18 +163,9 @@ const ModalBar = styled.div`
 `;
 
 const ModalContent = styled.div`
-  padding: 2rem;
-  display: flex;
-  flex-direction: column;
-  span {
-    width: 1rem;
-    height: 1rem;
-    background-color: #beb9ff;
-    margin-right: 0.5rem;
-  }
-  div {
-    font-weight: bold;
-  }
+  padding-right: 1.75rem;
+  padding-left: 1.75rem;
+  padding-bottom: 1rem;
   p {
     margin-top: 0.6rem;
     margin-right: 0.6rem;
@@ -152,9 +174,31 @@ const ModalContent = styled.div`
 
 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: 1.55rem;
-  font-size: small;
+  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/error/src/components/scheduleCreate/CreateModal.css b/FE/error/src/components/scheduleCreate/CreateModal.css
@@ -5,7 +5,7 @@
   transform: translate(-50%, -50%);
   background-color: white;
   z-index: 1000;
-  width: 50rem; /* 원하는 너비 설정 */
+  width: 40rem; /* 원하는 너비 설정 */
   max-width: 90%; /* 화면이 작은 경우 최대 너비 설정 */
   border-radius: 6px;
   box-shadow: 2px 2px 20px 2px rgba(0, 0, 0, 0.3);

diff --git a/FE/error/src/utils/filterUtils/FilterColorSelect.jsx b/FE/error/src/utils/filterUtils/FilterColorSelect.jsx
@@ -13,7 +13,7 @@ const FilterColorSelect = ({ setFilterColor }) => {
       "#FED7C3",
       "#789BDE",
       "#55CBCD",
-      "#FF968A",
+      "#FFC0CB",
       "#FF968A",
       "#7367F0",
       "#FFC8A2",