close 버튼 공통화

src/shared/ui/assets/css/calendar.css

@@ -19,10 +19,6 @@
   padding: 0;
 }
 
-.calendar-style .react-calendar .react-calendar__navigation {
-  /* background-color: white;*/
-}
-
 .calendar-style .react-calendar .react-calendar__navigation button {
   color: #2D3436;
   padding: 0;
@@ -101,6 +97,11 @@ abbr[title] {
 .tile-sunday{
   color: #FF0000 !important; 
 }
+.filter-calendar-close{
+  position: absolute;
+  right: 0.4rem;
+  top: 0.6rem;
+}
 
 
 @media (max-width: 768px) { 

src/shared/ui/calendar/nice-calendar-month.tsx

@@ -6,6 +6,7 @@ import 'react-calendar/dist/Calendar.css';
 import { useEffect } from 'react';
 import { CalendarType } from '@/entities/common/model/types';
 import { useTranslation } from 'react-i18next';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 
 interface NiceCalendarProps {
   calendarOpen: boolean;
@@ -131,6 +132,10 @@ const NiceCalendarMonth = ({
         <>
         <div className="bg-dim"></div>
         <CalendarWrapper onClick={ () => onClickToClose() }>
+          <FullMenuClose
+            addClass='filter-calendar-close'
+            onClickToCallback={ onClickToClose }
+          ></FullMenuClose>
           <Calendar
             locale={currentLocale}
             minDate={ minMonth }

src/shared/ui/calendar/nice-calendar.tsx

@@ -6,6 +6,8 @@ import 'react-calendar/dist/Calendar.css';
 import { useEffect } from 'react';
 import { CalendarType } from '@/entities/common/model/types';
 import { useTranslation } from 'react-i18next';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 
 interface NiceCalendarProps {
   calendarOpen: boolean;
@@ -36,7 +38,7 @@ const NiceCalendar = ({
   minDate: propMinDate,
   maxDate: propMaxDate
 }: NiceCalendarProps) => {
-  const { i18n } = useTranslation();
+  const { i18n, t } = useTranslation();
   const currentLocale = i18n.language || 'en';
 
   const [valueDate, setValueDate] = useState<Date | undefined>();
@@ -48,7 +50,7 @@ const NiceCalendar = ({
   };
     
   const onClickToClose = () => {
-    // setCalendarOpen(false);
+    setCalendarOpen(false);
   };
   const setMinMaxValueDate = () => {
     if(calendarType === CalendarType.Start){
@@ -136,10 +138,11 @@ const NiceCalendar = ({
       { (calendarOpen) && 
         <>
         <div className="bg-dim"></div>
-        <CalendarWrapper 
-          className="calendar-container calendar-style"
-          onClick={ () => onClickToClose() }
-        >
+        <CalendarWrapper className="calendar-container calendar-style">
+          <FullMenuClose
+            addClass='filter-calendar-close'
+            onClickToCallback={ onClickToClose }
+          ></FullMenuClose>
           <Calendar
             locale={currentLocale}
             minDate={ minDate }

src/shared/ui/menu/index.tsx

@@ -12,6 +12,7 @@ import { setHomeReloadKey } from '@/pages/home/home-page';
 import { useShortcutSaveMutation } from '@/entities/user/api/use-shortcut-save-mutation';
 import { ShortcutSaveParams, ShortcutSaveResponse } from '@/entities/user/model/types';
 import { useTranslation } from 'react-i18next';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
 
 // 상수 정의
 const SCROLL_ANIMATION_DURATION = 800;
@@ -281,15 +282,10 @@ export const Menu = ({
                   />
                 </button>
               }
-              <button 
-                className="full-menu-close"
-                onClick={ () => onClickToMenuClose() }
-              >
-                <img 
-                  src={ IMAGE_ROOT + '/ico_close.svg' } 
-                  alt="닫기"
-                />
-              </button>
+              <FullMenuClose
+                addClass='full-menu-close'
+                onClickToCallback={ onClickToMenuClose }
+              ></FullMenuClose>
             </div>
           </div>