🐛 fix: 고용주 프로필 API 수정 Team-inglo#73

src/components/Employer/Profile/EmployerProfileMenu.tsx

@@ -0,0 +1,85 @@
+import { useEffect, useState } from 'react';
+import { IconType } from '@/constants/profile';
+import ProfileIcon from '@/assets/icons/Profile/ProfileIcon.svg?react';
+import NotificationIcon from '@/assets/icons/Profile/NotificationIcon.svg?react';
+import LogoutIcon from '@/assets/icons/Profile/LogoutIcon.svg?react';
+import ToggleBar from '@/assets/icons/Profile/ToggleBar.svg?react';
+import ToggleButton from '@/assets/icons/Profile/ToggleButton.svg?react';
+import { usePatchNotificationAllowed } from '@/hooks/api/useSetting';
+import { usegetOwnerSummaries } from '@/hooks/api/useProfile';
+
+type EmployerProfileMenuProps = {
+  title: string;
+  iconType: IconType;
+  onClick?: () => void;
+  isToggle?: boolean;
+};
+
+const EmployerProfileMenu = ({
+  title,
+  iconType,
+  onClick,
+  isToggle,
+}: EmployerProfileMenuProps) => {
+  const { mutate: patchNotificationAllowed } = usePatchNotificationAllowed();
+  const { data: notificaionAllowed } = usegetOwnerSummaries();
+
+  const [toggleOn, setToggleOn] = useState<boolean>(false);
+
+  useEffect(() => {
+    // 알림 설정 상태 불러오기
+    if (isToggle && notificaionAllowed) {
+      setToggleOn(notificaionAllowed.data.is_notification_allowed);
+    }
+  }, []);
+
+  const handleToggleChange = () => {
+    // 알림 설정 변경
+    patchNotificationAllowed(!toggleOn, {
+      onSuccess: () => {
+        setToggleOn(!toggleOn);
+      },
+    });
+  };
+
+  const iconMapping = (iconType: IconType) => {
+    switch (iconType) {
+      case IconType.PROFILE:
+        return <ProfileIcon />;
+      case IconType.NOTIFICATION:
+        return <NotificationIcon />;
+      case IconType.LOGOUT:
+        return <LogoutIcon />;
+      default:
+        return null;
+    }
+  };
+
+  const Icon = iconMapping(iconType);
+
+  return (
+    <div
+      onClick={onClick}
+      className="flex items-center justify-between cursor-pointer p-6 rounded-[1.375rem] bg-EmployerProfileMenuGradient  bg-cover bg-no-repeat bg-center"
+    >
+      <div className="flex justify-center items-center gap-4">
+        {Icon}
+        <div className="body-2 text-[#1E1926]">{title}</div>
+      </div>
+      {isToggle && (
+        <div className="relative flex items-center">
+          <ToggleBar fill="#00D1A033" />
+          <ToggleButton
+            fill={toggleOn ? '#00D1A0' : '#DCDCDC'}
+            className={`absolute transform transition-transform duration-300 ease-in-out ${
+              toggleOn ? 'translate-x-4' : 'translate-x-0'
+            }`}
+            onClick={handleToggleChange}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default EmployerProfileMenu;

src/components/Employer/Profile/EmployerProfileMenuList.tsx

@@ -1,6 +1,6 @@
-import ProfileMenu from '@/components/Profile/ProfileMenu';
 import { IconType } from '@/constants/profile';
 import { useNavigate } from 'react-router-dom';
+import EmployerProfileMenu from './EmployerProfileMenu';
 
 type EmployerProfileMenuListProps = {
   handleBottomSheetOpen: () => void;
@@ -17,17 +17,17 @@ const EmployerProfileMenuList = ({
 
   return (
     <div className="flex flex-col gap-9 pt-9">
-      <ProfileMenu
+      <EmployerProfileMenu
         title="회사/점포 정보 수정"
         iconType={IconType.PROFILE}
         onClick={handleEditProfileClick}
       />
-      <ProfileMenu
+      <EmployerProfileMenu
         title="알림 수신"
         iconType={IconType.NOTIFICATION}
         isToggle={true}
       />
-      <ProfileMenu
+      <EmployerProfileMenu
         title="로그아웃"
         iconType={IconType.LOGOUT}
         onClick={handleBottomSheetOpen}

src/components/ManageResume/ProfilePicture.tsx

@@ -15,7 +15,7 @@ const ProfilePicture = ({ name, profileImg }: ProfilePictureProps) => {
           />
         </div>
         <span className="py-2 px-3 head-3 text-[#1E1926] text-center">
-          {name}
+          {name.replace('-', ' ')}
         </span>
       </div>
     </div>

src/hooks/api/useProfile.ts

@@ -58,7 +58,7 @@ export const usePatchUserProfile = () => {
   });
 };
 
-// 3.5 (유학생) 프로필 수정
+// 3.6 (고용주) 회사 정보 수정하기
 export const usePatchOwnerProfile = () => {
   const navigate = useNavigate();
   return useMutation({

src/pages/Employer/EditProfile/EmployerEditProfilePage.tsx

@@ -31,13 +31,13 @@ const EmployerEditProfilePage = () => {
   const { mutate } = usePatchOwnerProfile();
 
   useEffect(() => {
-    if (data && data.success) {
+    if (data) {
       setOriginalData(data.data); // 수정 전 데이터
 
       // get 타입에서 patch 타입으로 변환
       setNewEmployData(transformToEmployerProfileRequest(data.data)); // 수정 데이터
     }
-  }, []);
+  }, [data]);
 
   useEffect(() => {
     setIsValid(isValidEmployerProfile(newEmployData));
@@ -52,12 +52,20 @@ const EmployerEditProfilePage = () => {
         setNewEmployData({ ...newEmployData, is_icon_img_changed: true });
       }
       // patch 훅 호출
-      mutate({
-        image: logoFile,
-        body: {
-          ...newEmployData,
-        },
-      });
+
+      const formData = new FormData();
+      // 이미지가 있을 경우 FormData에 추가
+      if (logoFile) {
+        formData.append('image', logoFile);
+      }
+      // JSON 데이터를 Blob으로 변환 후 FormData에 추가
+      formData.append(
+        'body',
+        new Blob([JSON.stringify(newEmployData)], {
+          type: 'application/json',
+        }),
+      );
+      mutate(formData);
     }
   };