RINGUS-88 feat: 포트폴리오 업로드 api 추가

src/mentorship/api/MentorViewApi.ts

@@ -20,8 +20,8 @@ export const getMentorById = async (mentorId: number): Promise<MentorViewData> =
     mentoringField: data.mentoringField ?? [],
     hashtags: data.hashtags ?? [],
     message: data.message ?? '',
-    portfolio: data.portfolio ?? { url: '', description: '', size: 0 },
+    portfolio: data.portfolio ?? { url: '', description: '', fileSize: 0 },
     image: data.image ?? { fileName: '', filePath: '' },
-    mentoringCount: data.mentoringCount ?? 0,
+    mentoringCount: data.mentoringCount ?? '',
   };
 };

src/user/api/MentorInfoApi.ts

@@ -23,9 +23,9 @@ export const getMentorProfile = async (): Promise<MentorData> => {
     mentoringField: data.mentoringField ?? [],
     hashtags: data.hashtags ?? [],
     message: data.message ?? '',
-    portfolio: data.portfolio ?? { url: '', description: '', size: 0 },
+    portfolio: data.portfolio ?? { url: '', description: '', fileSize: 0 },
     image: data.image ?? { fileName: '', filePath: '' },
-    mentoringCount: data.mentoringCount ?? 0,
+    mentoringCount: data.mentoringCount ?? '',
   };
 };
 

src/user/api/profileApi.ts

@@ -24,6 +24,22 @@ export const uploadProfileImage = async (
   }
 };
 
+// 멘토 포트폴리오 업로드 API
+export const uploadPortfolio = async (file: File): Promise<string> => {
+  const formData = new FormData();
+  formData.append('file', file);
+
+  try {
+    const response = await axiosInstance.post(
+      '/v1/portfolio',
+      formData,
+    );
+    return response.data.message;
+  } catch (error) {
+    throw new Error('포트폴리오 업로드 실패');
+  }
+};
+
 // 멘토 프로필 등록 API
 export const createMentorProfile = async (mentorData: MentorProfileData) => {
   try {

src/user/components/ProfileEdit/EditHashtags.tsx

@@ -60,7 +60,7 @@ const EditHashtags = ({ mentorData, setMentorData }: EditHashtagsProps) => {
           >
             #{tag}
             <button onClick={() => removeHashtag(tag)} className="ml-2">
-              <X size={16} strokeWidth={1.0} />
+              <X size={16} strokeWidth={1.0} color='#E97B7B'/>
             </button>
           </div>
         ))}

src/user/components/ProfileEdit/EditPortfolio.tsx

@@ -1,4 +1,5 @@
 import { MentorData } from '@/user/types';
+import { uploadPortfolio } from '@/user/api/profileApi';
 import { X } from 'lucide-react';
 
 interface EditPortfolioProps {
@@ -19,32 +20,37 @@ const EditPortfolio = ({ mentorData, setMentorData }: EditPortfolioProps) => {
     });
   };
 
-  // 파일 업로드 (10MB 이하 파일만 허용)
-  const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+  // 파일 업로드
+  const handleFileUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.target.files && e.target.files.length > 0) {
       const file = e.target.files[0];
 
       // 10MB 초과하면 업로드 차단
       if (file.size > 10 * 1000 * 1000) {
         alert('10MB 이하의 파일만 업로드할 수 있습니다.');
-        e.target.value = ''; // 파일 선택 초기화
+        e.target.value = '';
         return;
       }
 
-      // 기존 파일이 있으면 삭제 후 새 파일 업로드
-      removeFile();
+      try {
+        const portfolioUrl = await uploadPortfolio(file);
 
-      setMentorData((prev) => {
-        if (!prev) return prev;
-        return {
-          ...prev,
-          portfolio: {
-            url: URL.createObjectURL(file),
-            description: file.name,
-            size: file.size,
-          },
-        };
-      });
+        removeFile();
+        setMentorData((prev) => {
+          if (!prev) return prev;
+          return {
+            ...prev,
+            portfolio: {
+              description: file.name,
+              url: portfolioUrl,
+              fileSize: file.size,
+            },
+          };
+        });
+      } catch (error) {
+        alert('포트폴리오 업로드 실패');
+        console.error(error);
+      }
     }
   };
 
@@ -68,7 +74,7 @@ const EditPortfolio = ({ mentorData, setMentorData }: EditPortfolioProps) => {
           <div>
             <span>{mentorData.portfolio.description}</span>
             <span className="text-[#94939B] ml-1">
-              ({(mentorData.portfolio.size / 1000000).toFixed(1)}MB)
+              ({(mentorData.portfolio.fileSize / 1000000).toFixed(1)}MB)
             </span>
           </div>
           <button
@@ -77,7 +83,7 @@ const EditPortfolio = ({ mentorData, setMentorData }: EditPortfolioProps) => {
               removeFile();
             }}
           >
-            <X size={16} strokeWidth={1.0} />
+            <X size={16} strokeWidth={1.0} color='#E97B7B' />
           </button>
         </div>
       )}

src/user/components/profileInfo/MenteeInfoBio.tsx

@@ -5,8 +5,7 @@ interface MenteeInfoBioProps {
 const MenteeInfoBio = ({ introduction }: MenteeInfoBioProps) => {
   return (
     <div className="px-4 my-2">
-      <div className="font-bold text-[16px] my-7 text-center">{introduction}</div>
-      <div className="bg-[#F2F2F6] rounded-[10px] px-5 py-4 text-[14px] whitespace-pre-line mb-10">{introduction}</div>
+      <div className="bg-[#F2F2F6] rounded-[10px] px-5 py-4 mt-6 text-[14px] whitespace-pre-line mb-10">{introduction}</div>
     </div>
   );
 };

src/user/components/profileInfo/MentorInfoPortfolio.tsx

@@ -1,5 +1,5 @@
 interface MentorInfoPortfolioProps {
-    portfolio: { url: string; description: string; size: number } | null;
+    portfolio: { url: string; description: string; fileSize: number } | null;
 }
 
 const MentorInfoPortfolio = ({ portfolio }: MentorInfoPortfolioProps) => {
@@ -20,7 +20,7 @@ const MentorInfoPortfolio = ({ portfolio }: MentorInfoPortfolioProps) => {
             >
                 <span>{portfolio.description}</span>
                 <span className="text-[#94939B] ml-1">
-                    ({(portfolio.size / 1000000).toFixed(1)}MB)
+                    ({(portfolio.fileSize / 1000000).toFixed(1)}MB)
                 </span>
             </div>
         </div>

src/user/pages/ProfileEdit/MentorProfileEdit.tsx

@@ -36,6 +36,7 @@ const MentorProfileEdit = () => {
   }
 
   const handleSave = async () => {
+    console.log("mentorData to be sent:", JSON.stringify(mentorData, null, 2));
     try {
       await updateMentorProfile(mentorData);
       navigate("/user/mentorinfo");

src/user/types.ts

@@ -26,7 +26,7 @@ export interface MentorData {
   portfolio: {
     url: string;
     description: string;
-    size: number;
+    fileSize: number;
   } | null;
   image: {
     fileName: string;
@@ -63,7 +63,7 @@ export interface MentorViewData {
   portfolio: {
     url: string;
     description: string;
-    size: number;
+    fileSize: number;
   } | null;
   image: {
     fileName: string;