Merge remote-tracking branch 'upstream/feat/#69'

kanguk01 · Nov 14, 2024 · bf56bd0 · bf56bd0
2 parents 4880274 + 6e98931
commit bf56bd0
Show file tree

Hide file tree

Showing 16 changed files with 923 additions and 195 deletions.
diff --git a/index.html b/index.html
@@ -11,7 +11,8 @@
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:[email protected]&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap" rel="stylesheet">
-  </head>
+  <link rel="icon" href="/src/assets/favicon.ico">
+</head>
   <body>
     <div id="root"></div>
     <script type="module" src="/src/main.tsx"></script>

diff --git a/src/assets/icon.png → src/assets/favicon.ico b/src/assets/icon.png → src/assets/favicon.ico
diff --git a/src/components/common/Button/StyledButton.styles.ts b/src/components/common/Button/StyledButton.styles.ts
@@ -9,16 +9,14 @@ const StyledButton = styled.button<Pick<Props, "theme" | "size">>`
   align-items: center;
   border-radius: 10px;
   border: none;
-  font-weight: 500;
+  font-weight: 510;
   cursor: pointer;
   transition:
     background-color 0.2s ease,
     color 0.2s ease;
   padding: 8px 16px; /* py-2 px-4 */
   outline: none;
-  font-size: 16px;
-  min-width: 120px;
-  height: 40px;
+
   &:focus {
     outline: none;
     box-shadow: 0 0 0 2px rgba(33, 150, 243, 0.5); /* focus:ring-2 focus:ring-offset-2 */
@@ -73,25 +71,34 @@ const StyledButton = styled.button<Pick<Props, "theme" | "size">>`
         return `
           height: 36px;
           font-size: 14px;
+          width: 100px;
+          min-width: 95px;
         `;
       case "large":
         return `
-          height: 48px;
-          font-size: 18px;
+          height: 38px;
+          font-size: 16px;
+          width: 110px;
+          min-width: 103px;
         `;
       case "long":
         return `
-          width: 100%;
+          width: 150px;
+          min-width: 150px;
           height: 40px;
-          font-size: 16px;
+          font-size: 14px;
         `;
-      default:
+      default: // 반응형
         return `
-          @media (max-width: ${breakpoints.sm}px) {
+            height: 38px;
+          font-size: 16px;
+          width: 110px;
+          min-width: 103px;
+          ${breakpoints.mobile} {
             height: 36px;
             font-size: 14px;
-            min-width: 100px;
-          }
+            width: 100px;
+          }    
         `;
     }
   }}

diff --git a/src/components/features/CustomCalendar/CustomCalendar.styles.ts b/src/components/features/CustomCalendar/CustomCalendar.styles.ts
@@ -1,7 +1,6 @@
 import { css } from "@emotion/react";
 
 export const appContainerStyles = css`
-  max-width: 960px;
   margin: 0 auto;
   padding-bottom: 0.4rem;
 `;
@@ -12,7 +11,6 @@ export const appTitleStyles = css`
   margin-bottom: 0.8rem;
 `;
 
-/* calendarStyles */
 export const calendarStyles = css`
   display: flex;
   flex-direction: column;
@@ -23,25 +21,30 @@ export const calendarStyles = css`
   font-size: 0.7rem;
 
   .fc-toolbar {
-    flex-direction: column;
+    flex-direction: row;
     align-items: center;
   }
 
   .fc-toolbar-chunk {
     margin-bottom: 0.5rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
   .fc-toolbar-title {
-    font-size: 4rem !important;
+    font-size: 1rem !important;
   }
 
   .fc-event-main {
-    padding: 0.16rem;
-    color: inherit !important;
+    padding: 0.2rem;
+    width: 100% !important;
+    color: inherit;
   }
 
   .fc-timegrid-slot {
-    height: 4rem;
+    height: 1rem;
+    border-bottom: 1px solid rgba(229, 231, 235, 0.5);
   }
 
   .fc-view-harness {
@@ -51,53 +54,13 @@ export const calendarStyles = css`
   /* 모바일: 3개의 열 */
   .fc-timegrid-col {
     flex-basis: calc(100% / 3) !important; /* 3개의 열 */
-  }
-
-  .fc-toolbar-title {
-      font-size: 5rem !important;
-   }
-
-  .fc-timegrid-slot {
-    height: 5rem
-    border-bottom: 1px solid rgba(229, 231, 235, 0.5);
-  }
-
-  /* 데스크탑 스타일 적용 (1280px 이상) */
-  @media (min-width: 1280px) {
-    font-size: 0.8rem;
-
-    .fc-toolbar-title {
-      font-size: 2rem !important;
-    }
-
-    .fc-timegrid-slot {
-      height: 5rem;
-    }
-
-    /* 데스크탑: 7개의 열 */
-    .fc-timegrid-col {
-      flex-basis: calc(100% / 7); /* 7개의 열 */
-    }
-
-    .fc-toolbar-title {
-      font-size: 10rem !important;
-      }
-
-    .fc-timegrid-slot {
-    height: 10rem
-    border-bottom: 1px solid rgba(229, 231, 235, 0.5);
-    }
+    border-right: 1px solid #e5e7eb;
   }
 
   .fc-event {
     cursor: move;
   }
 
-  .fc-event-main {
-    padding: 0.2rem;
-    width: 100% !important;
-  }
-
   .fc-event-completed {
     background-color: #e5e7eb;
     border-left: 3.2px solid #9ca3af;
@@ -130,10 +93,6 @@ export const calendarStyles = css`
     width: 2.4rem;
   }
 
-  .fc-timegrid-col {
-    border-right: 1px solid #e5e7eb;
-  }
-
   .fc-timegrid-col-frame {
     position: relative;
   }
@@ -155,38 +114,34 @@ export const calendarStyles = css`
   }
 
   .fc-col-header-cell.fc-day-today {
-    background-color: #39a7f7 !important;
+    background-color: #2196f3 !important;
     color: white;
   }
 
   .fc-button {
     border: none;
     padding: 0.4rem 0.8rem;
-    background-color: #39a7f7;
+    background-color: #2196f3;
     color: white;
     transition: background-color 0.3s ease;
+    border-radius: 4px;
   }
 
   .fc-button:hover {
     background-color: #338bd0;
   }
 
-  .fc-toolbar-chunk {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .fc-toolbar-title {
-    font-size: 1rem !important;
+  .fc-button-active {
+    background-color: #76818d !important; /* 원하는 색상으로 설정 */
   }
 `;
 
 export const eventItemStyles = (status: string, isDragging: boolean) => css`
   position: absolute;
   left: 0;
   right: 0;
-  font-size: 0.7rem;
+  padding: 0.2rem;
+  font-size: 0.8rem;
   border-left-width: 3.2px;
   box-sizing: border-box;
   opacity: ${isDragging ? 0.5 : 1};
@@ -205,7 +160,6 @@ export const eventItemStyles = (status: string, isDragging: boolean) => css`
   `
     background-color: #fee2e2;
     border-left-color: #ef4444;
-
   `}
 `;
 
@@ -220,10 +174,9 @@ export const dropdownMenuStyles = css`
   border: 1px solid #ddd;
   border-radius: 8px;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-  z-index: 1000;
   min-width: 100px;
+  max-width: 120px;
   animation: fadeIn 0.2s ease-in-out;
-
   @keyframes fadeIn {
     from {
       opacity: 0;
@@ -236,24 +189,17 @@ export const dropdownMenuStyles = css`
   }
 `;
 
-export const dropdownBlueStyles = css`
+export const dropdownItemStyles = css`
   padding: 10px 12px;
-  color: blue;
-  border-radius: 8px;
+  color: black;
   font-size: 14px;
   cursor: pointer;
   text-align: left;
   transition: background-color 0.2s;
   display: block;
-  white-space: nowrap;
-`;
-
-export const dropdownBlackStyles = css`
-  ${dropdownBlueStyles}
-  color: black;
-`;
-
-export const dropdownItemRedStyles = css`
-  ${dropdownBlueStyles}
-  color: red;
+  white-space: normal;
+  overflow: visible;
+  word-wrap: break-word;
+  white-space: normal;
+  word-break: break-word;
 `;