fix: 오류 핫픽스

src/api/instance.ts

@@ -1,9 +1,4 @@
-import axios, {
-  Axios,
-  InternalAxiosRequestConfig,
-  AxiosError,
-  AxiosResponse
-} from 'axios';
+import axios, { InternalAxiosRequestConfig, AxiosError, AxiosResponse } from 'axios';
 
 import { getCookie, removeCookie, setCookie } from '@utils/cookies';
 import logOnDev from '@utils/logOnDev';
@@ -12,7 +7,7 @@ import { updateRefresh } from './refresh/tokenRefresh.api';
 
 // import { UseRouter } from '@/hook/UseRouter';
 
-export const instance: Axios = axios.create({
+export const instance = axios.create({
   baseURL: process.env.NEXT_PUBLIC_BASE_URL,
   withCredentials: true,
   headers: {

src/components/home/SelectOfficeMap.tsx

@@ -18,7 +18,7 @@ const SelectOfficeMap: React.FC<SelectOfficeMapProps> = ({ branch, onClose }) =>
 
   const handleOfficeAvailable = async (branch: Branch) => {
     try {
-      const data = await getOfficeAvailable(branch.branchName); 
+      const data = await getOfficeAvailable(branch.branchName);
       if (data.data) {
         SetBranchCount(data.data.branchTotalMeetingRoomCount);
         SetCanBranchCount(data.data.branchActiveMeetingRoomCount);
@@ -30,77 +30,91 @@ const SelectOfficeMap: React.FC<SelectOfficeMapProps> = ({ branch, onClose }) =>
   };
 
   const handleBranchSelection = () => {
-    setSelectedBranch(branch, Date.now())
+    setSelectedBranch(branch, Date.now());
     onClose();
   };
 
   useEffect(() => {
-    handleOfficeAvailable(branch); 
+    handleOfficeAvailable(branch);
   }, []);
 
   useEffect(() => {
-    const { naver } = window;
+    const { naver } = window as any;
     if (naver && branch) {
       const mapOptions = {
         center: new naver.maps.LatLng(branch.branchLatitude, branch.branchLongitude),
-        zoom: 16,
+        zoom: 16
       };
       const map = new naver.maps.Map(mapRef.current!, mapOptions);
 
-      new naver.maps.Marker({
+      const markerOptions = {
         position: new naver.maps.LatLng(branch.branchLatitude, branch.branchLongitude),
         map,
         icon: {
           url: '/map/OfficeActive.svg',
           size: new naver.maps.Size(48, 48),
           scaledSize: new naver.maps.Size(48, 48),
           origin: new naver.maps.Point(0, 0),
-          anchor: new naver.maps.Point(24, 24),
-        },
-      });
+          anchor: new naver.maps.Point(24, 24)
+        }
+      };
+      /* eslint-disable  */
+      const marker = new naver.maps.Marker(markerOptions);
     }
   }, [branch]);
 
-  useEffect(() => {
-    console.log('branch', branch);
-  }, [branch]);
-
   return (
-    <div className="fixed inset-0 bg-white z-50 flex items-center justify-center z-[9999]">
-      <div ref={mapRef} className="w-[393px] mx-auto h-full">
-      </div>
+    <div className="fixed inset-0 bg-white flex items-center justify-center z-[9999]">
+      <div ref={mapRef} className="w-[393px] mx-auto h-full"></div>
       <div className="absolute top-4 right-4">
         <aside className="w-[350px] mx-auto fixed bottom-[110px] left-0 right-0 z-50">
           <div className="bg-white px-4 py-6 rounded-lg shadow-lg">
-            <div className='flex'>
+            <div className="flex">
               <div className="flex-shrink-0 w-[88px] h-[88px] bg-gray-300 rounded-md">
-                <Image 
-                  src="/map/OfficeDefaultImg.png" 
-                  alt="Office" 
+                <Image
+                  src="/map/OfficeDefaultImg.png"
+                  alt="Office"
                   width={88}
                   height={88}
                   className="object-cover rounded-md w-full h-full"
                 />
               </div>
-              <div className='ml-4 flex-1'>
-                <h2 className="text-black/opacity-20 text-lg font-bold font-['Pretendard'] leading-[27px]">{branch.branchName}</h2>
-                {branch.branchAddress && branch.branchLatitude && branch.branchLongitude && (
-                  <div className="flex items-start mt-[12px]">
-                    <Image src="/map/OfficeLocationSmall1.svg" alt="Location" width={12} height={16} className="mt-[2px] mr-2" />
-                    <p className="text-xs break-words">{branch.branchAddress}</p>
-                  </div>
-                )}
+              <div className="ml-4 flex-1">
+                <h2 className="text-black/opacity-20 text-lg font-bold font-['Pretendard'] leading-[27px]">
+                  {branch.branchName}
+                </h2>
+                {branch.branchAddress &&
+                  branch.branchLatitude &&
+                  branch.branchLongitude && (
+                    <div className="flex items-start mt-[12px]">
+                      <Image
+                        src="/map/OfficeLocationSmall1.svg"
+                        alt="Location"
+                        width={12}
+                        height={16}
+                        className="mt-[2px] mr-2"
+                      />
+                      <p className="text-xs break-words">{branch.branchAddress}</p>
+                    </div>
+                  )}
                 <div className="flex">
-                  <Image src="/map/OfficeInfo.svg" alt="Location" width={12} height={12} className="mr-2" />
-                  <p className="text-xs break-words">회의실 {branchCount}개 중 현재 {canBranchCount}개 사용중</p>
+                  <Image
+                    src="/map/OfficeInfo.svg"
+                    alt="Location"
+                    width={12}
+                    height={12}
+                    className="mr-2"
+                  />
+                  <p className="text-xs break-words">
+                    회의실 {branchCount}개 중 현재 {canBranchCount}개 사용중
+                  </p>
                 </div>
               </div>
             </div>
             <div className="flex w-full pt-[25px]">
-              <button 
+              <button
                 className="flex w-[326px] h-[36px] mx-auto bg-[#EDEBF8] text-[#3B268C] px-4 py-[6px] rounded-md justify-center items-center gap-2"
-                onClick={handleBranchSelection}
-              >
+                onClick={handleBranchSelection}>
                 지점 설정
               </button>
             </div>

src/components/notification/NotificationLayout.tsx

@@ -2,18 +2,20 @@ import { NotificationType } from '@/api/types/notification';
 import { useReservationStore } from '@/store/reservationModal.store';
 import CalculateTime from '@/utils/calculateTime';
 import Link from 'next/link';
+import { useCallback, useMemo } from 'react';
 
 export const NotificationLayout = ({ notice }: { notice: NotificationType }) => {
   const { setOpen, setReservationId, setIsMeeting } = useReservationStore();
 
+  const handleClick = useCallback(() => {
+    setOpen(true);
+    setIsMeeting(true);
+    setReservationId(notice?.targetId as any);
+  }, [notice?.targetId, setOpen, setIsMeeting, setReservationId]);
+
+  const calculatedTime = useMemo(() => CalculateTime(notice?.date), [notice?.date]);
   return (
-    <Link
-      href={`/reservation/myreservationlist`}
-      onClick={() => {
-        setOpen(true);
-        setIsMeeting(true);
-        setReservationId(notice?.targetId as any);
-      }}>
+    <Link href={`/reservation/myreservationlist`} onClick={handleClick}>
       <div
         key={notice?.notificationId}
         className="flex flex-row  justify-start items-center mt-[16px] mb-[36px] relative">
@@ -29,7 +31,7 @@ export const NotificationLayout = ({ notice }: { notice: NotificationType }) =>
           className="min-w-[60px] w-auto  pl-[20px] pb-[35px] text-xs  font-light text-neutral-400 absolute
          top-0 right-2
       ">
-          {CalculateTime(notice?.date)}
+          {calculatedTime}
         </div>
       </div>
     </Link>

src/pages/mypage/changeprofile/index.tsx

@@ -1,57 +1,42 @@
-import React, { useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import Link from 'next/link';
 import { useMember } from '@/store/user';
 import { getTitleFromDescription, jobPosition } from '@/constant/jobPosition';
 import { memberimage } from '@/api/auth/auth.patch.api';
 import useUpdateMember from '@/hook/useUpdateMember';
 import { BackArrow } from '@/components/sign/backarrow/BackArrow';
 import SEO from '@/components/shared/SEO';
-// import { useQuery } from 'react-query'; // Uncomment when useQuery is available
 
 export default function Profile() {
   const [selectedFile, setSelectedFile] = useState<File | null>(null);
-
-  //api나오면 zustand 로직으로 수정
   /* eslint-disable */
   const [fileUrl, setFileUrl] = useState<string | null>(null);
-
   const member = useMember();
-  const job = getTitleFromDescription(jobPosition, member.memberJob);
-
-  //백엔드에게 파일 보내는 로직
-
-  // const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-  //   if (event.target.files && event.target.files.length > 0) {
-  //     setSelectedFile(event.target.files[0]);
-  //   }
-  //   const formData = new FormData();
-  //   if (selectedFile) {
-  //     formData.append('file', selectedFile);
-  //   }
-  //
-
-  // };
+  const job = useMemo(
+    () => getTitleFromDescription(jobPosition, member.memberJob),
+    [member.memberJob]
+  );
 
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
     if (event.target.files && event.target.files.length > 0) {
       const file = event.target.files[0];
       const formData = new FormData();
       formData.append('image', file);
 
       memberimage(formData);
 
-      setSelectedFile(event.target.files[0]);
+      setSelectedFile(file);
       const reader = new FileReader();
       reader.onload = function (e) {
         if (e.target && e.target.result) {
-          setFileUrl(e.target.result.toString()); // 파일의 데이터 URL을 저장합니다.
+          setFileUrl(e.target.result.toString());
         }
       };
-      reader.readAsDataURL(event.target.files[0]); // 파일을 데이터 URL로 읽습니다.
+      reader.readAsDataURL(file);
     }
     alert('프로필 사진이 변경되었습니다.');
     window.location.reload();
-  };
+  }, []);
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
     event.preventDefault();

src/pages/mypage/index.tsx

@@ -3,7 +3,7 @@ import { jobPosition, getTitleFromDescription } from '@/constant/jobPosition';
 import { useMember } from '@/store/user';
 import Link from 'next/link';
 import LogoutModal from '@/components/modal/logoutModal';
-import { useState } from 'react';
+import { useCallback, useState } from 'react';
 import useLoggedOut from '@/hook/useLoggedOut';
 import SuccessModal from '@/components/modal/successModal';
 import useUpdateMember from '@/hook/useUpdateMember';
@@ -16,14 +16,14 @@ const MyPage = () => {
   const [isModalVisible, setModalVisible] = useState(false);
   const [successModal, setSuccessModal] = useState(false);
   const logout = useLoggedOut();
-  const handleLogout = () => {
+  const handleLogout = useCallback(() => {
     setModalVisible(false);
     setSuccessModal(true);
 
     setTimeout(() => {
       logout();
     }, 2000);
-  };
+  }, [logout]);
 
   useUpdateMember();
   const handleCancel = () => {

src/providers/QueryProvider.tsx

@@ -3,7 +3,6 @@
 import { useState } from 'react';
 
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-// import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 const CONFIGURATION_TIME = 3 * 60 * 1000;
 
@@ -18,12 +17,7 @@ function QueryProvider({ children }: { children: React.ReactNode }) {
     });
   });
 
-  return (
-    <QueryClientProvider client={client}>
-      {children}
-      {/* <ReactQueryDevtools initialIsOpen={false} /> */}
-    </QueryClientProvider>
-  );
+  return <QueryClientProvider client={client}>{children}</QueryClientProvider>;
 }
 
 export default QueryProvider;

src/types/naver-maps.d.ts

@@ -1,31 +1,55 @@
 /* eslint-disable no-unused-vars */
 declare namespace naver.maps {
-    class Map {
-      panTo: any;
-      constructor(element: HTMLElement | string, options: MapOptions);
-      setCenter(latlng: LatLng): void;
-      setZoom(zoom: number): void;
-    }
-
-    class LatLng {
-      constructor(lat: number, lng: number);
-    }
-
-    class Marker {
-      setIcon: any;
-      constructor(options: MarkerOptions);
-      setMap(map: Map | null): void;
-      setPosition(latlng: LatLng): void;
-    }
-
-    interface MapOptions {
-      center: LatLng;
-      zoom: number;
-    }
-
-    interface MarkerOptions {
-      position: LatLng;
-      map: Map;
-    }
-  }
-
+  class Map {
+    constructor(element: HTMLElement | string, options: MapOptions);
+    setCenter(latlng: LatLng): void;
+    setZoom(zoom: number): void;
+    panTo(latlng: LatLng): void; // panTo 메서드 추가
+  }
+
+  class LatLng {
+    constructor(lat: number, lng: number);
+  }
+
+  class Marker {
+    setIcon: any;
+    constructor(options: MarkerOptions);
+    setMap(map: Map | null): void;
+    setPosition(latlng: LatLng): void;
+  }
+
+  interface MapOptions {
+    center: LatLng;
+    zoom: number;
+  }
+
+  interface MarkerOptions {
+    position: LatLng;
+    map: Map;
+    icon?: Icon;
+  }
+
+  interface Icon {
+    url: string;
+    size: Size;
+    scaledSize: Size;
+    origin: Point;
+    anchor: Point;
+  }
+
+  class Event {
+    static addListener(
+      instance: any,
+      eventName: string,
+      listener: (event: any) => void
+    ): void;
+  }
+
+  class Size {
+    constructor(width: number, height: number);
+  }
+
+  class Point {
+    constructor(x: number, y: number);
+  }
+}