Merge remote-tracking branch 'origin/feat/70-UI-refactor' into feat/#69

kakao-tech-campus-2nd-step3 · Nov 13, 2024 · 00d0216 · 00d0216
2 parents 8a1a888 + 5e1573d
commit 00d0216
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 24 deletions.
diff --git a/src/components/features/CustomCalendar/CustomCalendar.styles.ts b/src/components/features/CustomCalendar/CustomCalendar.styles.ts
@@ -1,7 +1,7 @@
 import { css } from "@emotion/react";
 
 export const appContainerStyles = css`
-  max-width: 960px;
+  max-width: 1280px;
   margin: 0 auto;
   padding-bottom: 0.4rem;
 `;
@@ -52,9 +52,15 @@ export const calendarStyles = css`
     flex-basis: calc(100% / 3) !important; /* 3개의 열 */
   }
 
+  .fc-toolbar-title {
+      font-size: 5rem !important;
+   }
+
   .fc-timegrid-slot {
+    height: 2rem
     border-bottom: 1px solid rgba(229, 231, 235, 0.5);
   }
+  }
 
   /* 데스크탑 스타일 적용 (1280px 이상) */
   @media (min-width: 1280px) {
@@ -72,6 +78,15 @@ export const calendarStyles = css`
     .fc-timegrid-col {
       flex-basis: calc(100% / 7); /* 7개의 열 */
     }
+
+    .fc-toolbar-title {
+      font-size: 2rem !important;
+      }
+
+    .fc-timegrid-slot {
+    height: 10rem
+    border-bottom: 1px solid rgba(229, 231, 235, 0.5);
+    }
   }
 
   .fc-event {
@@ -86,16 +101,19 @@ export const calendarStyles = css`
   .fc-event-completed {
     background-color: #e5e7eb;
     border-left: 3.2px solid #9ca3af;
+    color: #9ca3af;
   }
 
   .fc-event-upcoming {
     background-color: #dbeafe;
     border-left: 3.2px solid #3b82f6;
+    color: #3b82f6;
   }
 
   .fc-event-incomplete {
     background-color: #fee2e2;
     border-left: 3.2px solid #ef4444;
+    color: #ef4444;
   }
 
   .fc-event-completed .fc-event-title,
@@ -169,8 +187,7 @@ export const eventItemStyles = (status: string, isDragging: boolean) => css`
   position: absolute;
   left: 0;
   right: 0;
-  padding: 0.2rem;
-  font-size: 0.8rem;
+  font-size: 0.9rem;
   border-left-width: 3.2px;
   box-sizing: border-box;
   opacity: ${isDragging ? 0.5 : 1};
@@ -189,6 +206,7 @@ export const eventItemStyles = (status: string, isDragging: boolean) => css`
   `
     background-color: #fee2e2;
     border-left-color: #ef4444;
+
   `}
 `;
 
@@ -219,7 +237,7 @@ export const dropdownMenuStyles = css`
   }
 `;
 
-export const dropdownItemStyles = css`
+export const dropdownBlueStyles = css`
   padding: 10px 12px;
   color: blue;
   border-radius: 8px;
@@ -229,16 +247,14 @@ export const dropdownItemStyles = css`
   transition: background-color 0.2s;
   display: block;
   white-space: nowrap;
+`;
 
-  &:hover {
-    padding: 7px 11px; /* hover 시 패딩을 줄여 크기 감소 */
-  }
+export const dropdownBlackStyles = css`
+  ${dropdownBlueStyles}
+  color: black;
 `;
 
 export const dropdownItemRedStyles = css`
-  ${dropdownItemStyles}
+  ${dropdownBlueStyles}
   color: red;
-  &:hover {
-    padding: 7px 11px; /* hover 시 패딩을 줄여 크기 감소 */
-  }
 `;
diff --git a/src/components/features/CustomCalendar/CustomCalendar.tsx b/src/components/features/CustomCalendar/CustomCalendar.tsx
@@ -19,7 +19,7 @@ import {
   appTitleStyles,
   calendarStyles,
   eventItemStyles,
-  dropdownItemStyles,
+  dropdownBlackStyles,
   dropdownItemRedStyles,
   dropdownMenuStyles,
 } from "./CustomCalendar.styles";
@@ -53,8 +53,8 @@ const StyledInput = styled.input`
   font-size: 1rem;
   &:focus {
     outline: none;
-    border-color: #6c63ff;
-    box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.3);
+    border-color: #39a7f7;
+    box-shadow: 0 0 0 2px #338bd0;
   }
 `;
 
@@ -88,6 +88,7 @@ interface CustomCalendarProps {
   isReadOnly?: boolean;
   onPlanChange?: (plans: CalendarEvent[]) => void;
   onDeletePlan?: (planId: string) => void;
+  onDescriptionClick?: (description: string) => void;
 }
 
 const VIEW_MODES = {
@@ -108,6 +109,7 @@ const EventContent = ({
   handleDelete,
   handleEdit,
   isReadOnly,
+  onDescriptionClick,
 }: {
   eventInfo: EventContentArg;
   handleDelete: (id: string) => void;
@@ -119,12 +121,31 @@ const EventContent = ({
     isCompleted: boolean | null,
   ) => void;
   isReadOnly: boolean;
+  onDescriptionClick?: (description: string) => void;
 }) => {
   const { event, timeText } = eventInfo;
   const description = event.extendedProps?.description || "";
   const accessibility = event.extendedProps?.accessibility || false;
   const isCompleted = event.extendedProps?.isCompleted || false;
+  const [descriptonExpanded, setIsDescriptionExpanded] = useState(false);
 
+  // 잘린 설명 또는 전체 설명을 조건에 따라 표시
+  let displayDescription;
+  if (descriptonExpanded) {
+    displayDescription = description;
+  } else if (description.length > 10) {
+    displayDescription = `${description.slice(0, 10)}...`;
+  } else {
+    displayDescription = description;
+  }
+
+  const handleDescriptionToggle = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    setIsDescriptionExpanded((prev) => !prev);
+    if (!descriptonExpanded && onDescriptionClick) {
+      onDescriptionClick(description);
+    }
+  };
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const handleEventClick = (e: React.MouseEvent) => {
     e.stopPropagation(); // 이벤트 버블링 방지
@@ -174,13 +195,27 @@ const EventContent = ({
       aria-expanded={isDropdownOpen}
       style={{ position: "relative", cursor: "pointer" }}
     >
+      <div
+        css={{ fontWeight: "bold", fontSize: "0.9rem", marginBottom: "0.2rem" }}
+      >
+        {event.title}
+      </div>
+
       <div>{timeText}</div>
-      <div>{event.title}</div>
-      <div>{description}</div>
+      <div
+        onClick={handleDescriptionToggle}
+        role="button"
+        tabIndex={0}
+        style={{ cursor: "pointer" }}
+        aria-expanded={descriptonExpanded}
+      >
+        {displayDescription}
+      </div>
+
       {!isReadOnly && isDropdownOpen && (
         <ul css={dropdownMenuStyles}>
           <li
-            css={dropdownItemStyles}
+            css={dropdownBlackStyles}
             onClick={(e) => {
               e.stopPropagation();
               handleOptionClick("edit");
@@ -216,6 +251,7 @@ const renderEventContent = (
     isCompleted: boolean | null,
   ) => void,
   isReadOnly: boolean,
+  onDescriptionClick?: (description: string) => void,
 ) => {
   if (currentView === "dayGridMonth") {
     return <div css={eventItemStyles("", false)} />;
@@ -227,6 +263,7 @@ const renderEventContent = (
       handleDelete={handleDelete}
       handleEdit={handleEdit}
       isReadOnly={isReadOnly}
+      onDescriptionClick={onDescriptionClick}
     />
   );
 };
@@ -242,6 +279,7 @@ const CustomCalendar: React.FC<CustomCalendarProps> = ({
   isReadOnly = false,
   onPlanChange,
   onDeletePlan,
+  onDescriptionClick,
 }) => {
   const [isMobile, setIsMobile] = useState(window.innerWidth <= breakpoints.sm);
   const [currentView, setCurrentView] = useState<string>("timeGridWeek");
@@ -357,8 +395,9 @@ const CustomCalendar: React.FC<CustomCalendarProps> = ({
         handleDelete,
         handleEdit,
         isReadOnly,
+        onDescriptionClick,
       ),
-    [handleDelete, handleEdit, isReadOnly],
+    [handleDelete, handleEdit, isReadOnly, onDescriptionClick],
   );
   return (
     <div css={appContainerStyles}>

diff --git a/src/components/features/DatePicker/DatePicker.tsx b/src/components/features/DatePicker/DatePicker.tsx
@@ -14,8 +14,8 @@ const StyledInput = styled.input`
   font-size: 1rem;
   &:focus {
     outline: none;
-    border-color: #6c63ff;
-    box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.3);
+    border-color: #39a7f7;
+    box-shadow: 0 0 0 2px #338bd0;
   }
 `;
 

diff --git a/src/pages/Main/MainPageModify.tsx b/src/pages/Main/MainPageModify.tsx
@@ -38,8 +38,8 @@ const StyledInput = styled.input`
   font-size: 1rem;
   &:focus {
     outline: none;
-    border-color: #6c63ff;
-    box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.3);
+    border-color: #39a7f7;
+    box-shadow: 0 0 0 2px #338bd0;
   }
 `;
 
@@ -61,6 +61,9 @@ export default function PlanModifyPage() {
   const { plans = [], teamName } = location.state || {};
   const [modifiedPlans, setModifiedPlans] = useState<CalendarEvent[]>(plans);
   const [isAddModalOpen, setIsAddModalOpen] = useState(false);
+  const [descriptionModalOpen, setIsDescriptionModalOpen] = useState(false);
+  const [selectedDescription, setSelectedDescription] = useState("");
+
   const [newPlanData, setNewPlanData] = useState({
     title: "",
     description: "",
@@ -70,7 +73,6 @@ export default function PlanModifyPage() {
     isCompleted: false,
   });
   const navigate = useNavigate();
-
   const [pendingPlans, setPendingPlans] = useState(false);
   const { mutate: createPlan } = useCreatePlan();
   const { mutate: deletePlan } = useDeletePlan();
@@ -178,14 +180,26 @@ export default function PlanModifyPage() {
       });
   };
 
+  const handelDescriptionClick = (description: string) => {
+    setSelectedDescription(description);
+    setIsDescriptionModalOpen(true);
+  };
+
   return (
     <PageContainer>
       <CustomCalendar
         calendarOwner={`${teamName} 수정`}
-        plans={modifiedPlans}
+        plans={modifiedPlans.map((plan) => ({
+          ...plan,
+          description:
+            plan.description.length > 10
+              ? `${plan.description.slice(0, 10)}...`
+              : plan.description,
+        }))}
         isReadOnly={false}
         onPlanChange={handlePlanChange}
         onDeletePlan={handleDeletePlan}
+        onDescriptionClick={handelDescriptionClick}
       />
       {pendingPlans && <p>저장 중...</p>}
       <ButtonGroup>
@@ -245,6 +259,17 @@ export default function PlanModifyPage() {
           </ModalContainer>
         </Modal>
       )}
+      {descriptionModalOpen && (
+        <Modal onClose={() => setIsDescriptionModalOpen(false)}>
+          <ModalContainer>
+            <Title>전체 설명</Title>
+            <p>{selectedDescription}</p>
+            <Button onClick={() => setIsDescriptionModalOpen(false)}>
+              닫기
+            </Button>
+          </ModalContainer>
+        </Modal>
+      )}
     </PageContainer>
   );
 }