feat: 프로필 이미지 s3 업로드 및 프로필 이미지 변경 api 연동

src/apis/fetch.ts

@@ -58,6 +58,26 @@ class Fetch {
     return data as TData;
   }
 
+  async put<TData>({ path, headers, body }: { path: string; headers?: HeadersInit; body: object }) {
+    const response = await fetch(`${this.baseURL}${path}`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json;charset=UTF-8',
+        ...(this.accessToken && { Authorization: `Bearer ${this.accessToken}` }),
+        ...headers,
+      },
+      body: JSON.stringify(body),
+    });
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      throw new ResponseError(data);
+    }
+
+    return data as TData;
+  }
+
   async delete<T>(path: string, body?: object): Promise<T> {
     const response = await fetch(`${this.baseURL}${path}`, {
       method: 'DELETE',

src/apis/profile/useProfile.ts

@@ -0,0 +1,46 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { PresignedURLResponse, ProfileResponse } from '@interfaces/api/profile';
+
+import client from '@apis/fetch';
+
+// export interface profileRequestDTO {
+//   status?: 'VOTING' | 'CLOSED';
+//   keyword_id?: number;
+//   page?: number;
+//   size?: number;
+//   sort?: string;
+//   side?: 'TOPIC_A' | 'TOPIC_B';
+// }
+
+const getProfile = () => {
+  return client.get<ProfileResponse>('/members/profile');
+};
+
+const getPresignedURL = (fileName: string) => {
+  return client.post<PresignedURLResponse>({
+    path: `/images/profile`,
+    body: {
+      fileName: fileName,
+    },
+  });
+};
+
+const updateProfileImgURL = (profileImgURL: string) => {
+  return client.put({
+    path: `/members/profile/image`,
+    body: {
+      imageUrl: profileImgURL,
+    },
+  });
+};
+
+const useGetPresignedURL = (fileName: string) => {
+  return useMutation({ mutationFn: () => getPresignedURL(fileName) });
+};
+
+const useUpdateProfileImgURL = (profileImgURL: string) => {
+  return useMutation({ mutationFn: () => updateProfileImgURL(profileImgURL) });
+};
+
+export { getProfile, useGetPresignedURL, useUpdateProfileImgURL };

src/constants/topic.ts

@@ -11,14 +11,3 @@ export const TOPIC_DEADLINES: TopicDeadline[] = Array.from({ length: 24 }, (_, i
     value: i + 1,
   };
 });
-
-// export const TOPIC_DEADLINES: TopicDeadline[] = Array.from({ length: 24 }, (_, i) => {
-//     const hoursToAdd = i + 1;
-//     const date = new Date();
-//     date.setHours(date.getHours() + hoursToAdd);
-
-//     return {
-//       label: `${hoursToAdd}시간`,
-//       value: Math.floor(date.getTime() / 1000),
-//     };
-//   });

src/interfaces/api/profile.ts

@@ -0,0 +1,13 @@
+interface ProfileResponse {
+  profileImageUrl: string;
+  nickname: string;
+  birth: string;
+  gender: string;
+  job: string;
+}
+
+interface PresignedURLResponse {
+  presignedUrl: string;
+}
+
+export type { ProfileResponse, PresignedURLResponse };

src/routes/MyPage/MyPage.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
+import { getProfile, useGetPresignedURL, useUpdateProfileImgURL } from '@apis/profile/useProfile';
 import { Col, Row } from '@components/commons/Flex/Flex';
 import Layout from '@components/commons/Layout/Layout';
 import ActionModalButton from '@components/commons/Modal/ActionModalButton';
@@ -28,25 +29,69 @@ const MyPage = () => {
 
   const profileImageInputRef = useRef<HTMLInputElement>(null);
 
-  const [profileImgUrl, setProfileImgUrl] = useState<string | null>(null);
+  const [profileImg, setProfileImgUrl] = useState<string | null>(null);
+  const [nickName, setNickName] = useState<string>('');
+  const [fileName, setFileName] = useState<string>('');
+  const [file, setFile] = useState<File>();
+  const [presignedURL, setpresignedURL] = useState<string>('');
+
+  const updateProfileImgMutation = useGetPresignedURL('.' + fileName);
+  const updateProfileImgURLMutation = useUpdateProfileImgURL(presignedURL);
 
   const { Modal, toggleModal } = useModal('action');
 
-  const handleSelectFromAlbum = () => {
-    if (profileImageInputRef.current) {
-      profileImageInputRef.current.click();
+  const removeQueryString = (url: string): string => {
+    const urlObj = new URL(url);
+    return `${urlObj.origin}${urlObj.pathname}`;
+  };
+
+  const uploadFile = async () => {
+    if (!fileName || !file) {
+      return;
+    }
+    try {
+      const presignedURLResponse = await updateProfileImgMutation.mutateAsync();
+      const imageUrl = removeQueryString(presignedURLResponse.presignedUrl);
+
+      console.log(imageUrl);
+      setpresignedURL(imageUrl);
+
+      const result = await fetch(presignedURLResponse.presignedUrl, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'image/' + fileName,
+        },
+        body: file,
+      });
+
+      if (result.ok) {
+        console.log('Upload successful');
+        const res = await updateProfileImgURLMutation.mutateAsync();
+        console.log('result', res);
+      } else {
+        console.error('Upload failed');
+      }
+    } catch (error) {
+      // 오류 처리 로직
     }
   };
 
+  const handleSelectFromAlbum = () => {
+    profileImageInputRef.current?.click();
+  };
+
   const handleProfileImgFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const fileObj = event.target.files && event.target.files[0];
+    const fileObj = event.target.files?.[0];
     if (!fileObj) {
       return;
     }
 
     const reader = new FileReader();
     reader.onloadend = () => {
       setProfileImgUrl(reader.result as string);
+      const type = fileObj.name.split('.');
+      setFileName(type[type.length - 1].toLowerCase());
+      setFile(fileObj);
     };
     reader.readAsDataURL(fileObj);
     toggleModal();
@@ -58,6 +103,28 @@ const MyPage = () => {
     toggleModal();
   };
 
+  useEffect(() => {
+    const fetchProfile = async () => {
+      try {
+        const response = await getProfile();
+        if (response.profileImageUrl) {
+          setProfileImgUrl(response.profileImageUrl);
+        }
+        setNickName(response.nickname);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+
+    fetchProfile();
+  }, []);
+
+  useEffect(() => {
+    if (fileName && file) {
+      uploadFile();
+    }
+  }, [fileName, file]);
+
   return (
     <Layout
       hasBottomNavigation={true}
@@ -76,13 +143,13 @@ const MyPage = () => {
         <Col gap={100} alignItems="center">
           <Col gap={30} alignItems="center">
             <ProfileImgContainer>
-              <ProfileImg url={profileImgUrl} size={102} rounded={true}></ProfileImg>
+              <ProfileImg url={profileImg} size={102} rounded={true}></ProfileImg>
               <PhotoButton onClick={handleOnClickPhotoButton}>
                 <CameraIcon />
               </PhotoButton>
             </ProfileImgContainer>
             <Text size={22} weight={600} color={colors.white}>
-              사용자 이름
+              {nickName}
             </Text>
           </Col>
           <Col gap={32} alignItems="flex-start">