fix: fix css for calendar expand

src/components/BottomNavbar/styles.ts

@@ -49,6 +49,7 @@ export const MobileNavbar = {
     font-family: var(--font-바른히피);
     font-size: ${(props: ActiveNav) => (props.active ? '2.3vh' : '2vh')};
     opacity: ${(props: ActiveNav) => (props.active ? '1' : '.9')};
+    background-color: ${(props: ActiveNav) => (props.active ? 'rgba(25, 118, 210, 0.04)' : 'none')};
     font-weight: 600;
     min-width: 32px;
     width: 100%;

src/components/PaperBox/styles.ts

@@ -14,7 +14,7 @@ type Group = {
 const styles = {
   Icon: styled.span``,
   Group: styled(Paper)`
-    padding: 0.2em 0.5em 0 0.5em;
+    padding: 0.2em 0.5em;
     margin: 1vh 0;
     background-color: ${(props: Group) => props.color || '#e0e0e0'};
     border-radius: 0.3em;

src/components/PaperList/AlertList/styles.ts

@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import { Content as _Content } from '../styles';
+import { Button } from '@mui/material';
 
 type GroupProps = {
   backgroundColor?: boolean;
@@ -26,8 +27,9 @@ export const Time = styled.span`
   margin-right: 1rem;
 `;
 
-export const AlertFullArrow = styled.div`
+export const AlertFullArrow = styled(Button)`
   display: flex;
   justify-content: center;
-  margin-bottom: 0.6rem;
+  padding: 1vh 0;
+  width: 100%;
 `;

src/main.tsx

@@ -17,7 +17,6 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
         </LocalStorageProvider>
       </BrowserRouter>
     </QueryClientProvider>
-    ,
   </React.StrictMode>
 );
 

src/pages/MainPage/Calendar/Calendar.css

@@ -5,6 +5,7 @@
   background: white;
   font-family: Arial, Helvetica, sans-serif;
   line-height: 1.125em;
+  overflow: hidden;
 }
 
 /* 요일 칸에 abbr태그의 기본 속성인 밑줄 제거 */

src/pages/MainPage/Calendar/index.tsx

@@ -5,7 +5,7 @@ import { TileArgs } from 'react-calendar/dist/cjs/shared/types';
 import EventDetail from '../CalendarEventDetail';
 import { CalendarStick, StickWrapper } from '../styles';
 import './Calendar.css';
-// import { Image } from './styles';
+import s from './styles';
 
 const RCalendar = memo(({ state }: { state: string }) => {
   const [currentDate, setCurrentMonth] = useState(new Date());
@@ -83,7 +83,7 @@ const RCalendar = memo(({ state }: { state: string }) => {
 
   /** TODO: 투명도 적용한 image로 교체, css에서 .react-calendar__month-view의 backImg로 설정 */
   return (
-    <div>
+    <s.Wrapper isExpand={isExpand}>
       {/* <BackgroundImage month={currentDate?.getMonth()} calendarRef={calRef.current} /> */}
       <Calendar
         inputRef={calRef}
@@ -107,7 +107,7 @@ const RCalendar = memo(({ state }: { state: string }) => {
           setFullScreen={setFullScreen}
         />
       )}
-    </div>
+    </s.Wrapper>
   );
 });
 

src/pages/MainPage/Calendar/styles.ts

@@ -5,4 +5,9 @@ const Image = styled.img`
   opacity: 0.2; //투명도 28%
   pointer-events: none; // 마우스 이벤트 통과
 `;
-export default Image;
+
+const Wrapper = styled.div`
+  overflow: hidden;
+  height: ${(props: {isExpand: boolean}) => props.isExpand ? '100%' : 'auto'};
+`
+export default { Image, Wrapper };

src/pages/MainPage/CalendarEventDetail/styles.ts

@@ -45,7 +45,6 @@ const EventDetail = {
         overflow-y: auto;
         overflow-x: hidden;
         height: 100%;
-        width: 100%;
         padding-left: 5px;
     `,
   Content: styled.div`

src/pages/MainPage/index.tsx

@@ -20,11 +20,10 @@ function MainPage() {
       <AlertBanner isAlertsPending={isAlertsPending} alerts={alerts} />
 
       {calendarState === 'expand' && (
-        <AlertFullArrow>
+        <AlertFullArrow onClick={() => setCalendarState('normal')}>
           <FontAwesomeIcon
             icon={faChevronDown}
             cursor="pointer"
-            onClick={() => setCalendarState('normal')}
           />
         </AlertFullArrow>
       )}
@@ -40,11 +39,10 @@ function MainPage() {
       <RCalendar state={calendarState} />
 
       {calendarState === 'normal' && (
-        <AlertFullArrow>
+        <AlertFullArrow onClick={() => setCalendarState('expand')}>
           <FontAwesomeIcon
             icon={faChevronUp}
             cursor="pointer"
-            onClick={() => setCalendarState('expand')}
           />
         </AlertFullArrow>
       )}

src/pages/MainPage/styles.ts

@@ -100,7 +100,6 @@ export const AlertList = styled.div`
 const AlertCard = {
   // 전체 카드
   Group: styled.div`
-    margin-bottom: 5px;
     background-color: #e0e0e0;
     height: 5%;
   `,

src/pages/NoticePage/index.tsx

@@ -75,8 +75,8 @@ function NoticePage() {
                   {alerts?.map((data) => <AlertList key={data.id} alert={data} />)}
                   {alerts.length !== 1
                     && (
-                    <AlertFullArrow>
-                      <FontAwesomeIcon icon={faChevronUp} cursor="pointer" onClick={handleAlertArrowClick} />
+                    <AlertFullArrow onClick={handleAlertArrowClick}>
+                      <FontAwesomeIcon icon={faChevronUp} cursor="pointer" />
                     </AlertFullArrow>
                     )}
                 </>
@@ -85,8 +85,8 @@ function NoticePage() {
                   <AlertList key={alerts[curAlertIdx]?.id} alert={alerts[curAlertIdx]} />
                   {alerts.length !== 1
                     && (
-                    <AlertFullArrow>
-                      <FontAwesomeIcon icon={faChevronDown} cursor="pointer" onClick={handleAlertArrowClick} />
+                    <AlertFullArrow onClick={handleAlertArrowClick}>
+                      <FontAwesomeIcon icon={faChevronDown} cursor="pointer" />
                     </AlertFullArrow>
                     )}
                 </>