[feat] 프로필 수정 api 연결

package.json

@@ -15,6 +15,7 @@
     "@tanstack/react-query-devtools": "^5.84.1",
     "axios": "^1.11.0",
     "clsx": "^2.1.1",
+    "lodash": "^4.17.21",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-modal": "^3.16.3",
@@ -28,6 +29,7 @@
     "@eslint/js": "^9.29.0",
     "@svgr/cli": "^8.1.0",
     "@tailwindcss/vite": "^4.1.11",
+    "@types/lodash": "^4.17.20",
     "@types/node": "^24.0.7",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",

src/api/profile/profile.api.ts

@@ -0,0 +1,15 @@
+import api from '@/api/api';
+import type { UserProfile } from '@/types/user';
+import type { ApiError, ApiResponse } from '@/types/api-response'; 
+
+
+export const getUserProfile = async (): Promise<UserProfile> => {
+  try {
+    const response = await api.get<ApiResponse<UserProfile>>('/profile');
+        return response.data.data; 
+  } catch (err) {
+    const apiError = err as ApiError;
+    console.error('프로필 로딩 에러:', apiError);
+    throw apiError;
+  }
+};

src/api/user/userEdit.api.ts

@@ -0,0 +1,10 @@
+import api from '@/api/api';
+import type { ApiResponse } from '@/types/api-response';
+import type { UpdateUserProfileRequest, UserProfileResponse } from '@/types/userEdit';
+
+export const updateUserProfile = async (
+  data: UpdateUserProfileRequest
+): Promise<UserProfileResponse> => {
+  const response = await api.patch<ApiResponse<UserProfileResponse>>('/profile', data);
+  return response.data.data;
+};

src/assets/index.tsx

@@ -86,7 +86,7 @@ export {
   SoundIcon,
   EnvironmentIcon,
   CompanionIcon,
-  TicketAlt,
   SmileIcon,
   GalleryProfileIcon,
+  TicketAlt,
 };

src/components/common/ImagePreview/ImagePreviewItem.tsx

@@ -1,50 +1,32 @@
+// src/components/common/ImagePreviewItem.tsx
+
 import { CloseIcon } from '@/assets';
 import { Image } from '@/components';
-import type { ButtonRounded } from '@/components/common/Button';
 
 interface ImagePreviewItemProps {
-  previewUrl: string;
+  image: File;
   index: number;
-  rounded?: ButtonRounded;
-  size?: number;
-  closeButton?: boolean;
-  onRemove?: (index: number) => void;
-  onClick?: () => void;
+  onRemove: (index: number) => void;
 }
 
-export default function ImagePreviewItem({
-  previewUrl,
-  index,
-  rounded = 'md',
-  size = 84,
-  onClick,
-  closeButton = true,
-  onRemove,
-}: ImagePreviewItemProps) {
-  const roundedClass = rounded === 'full' ? 'rounded-full' : 'rounded-md';
-  const cursorClass = onClick ? 'cursor-pointer' : '';
-  const dimensionClass = `w-[${size}px] h-[${size}px]`;
-
+export default function ImagePreviewItem({ image, index, onRemove }: ImagePreviewItemProps) {
   return (
-    <div
-      className={`relative shrink-0 ${roundedClass} ${cursorClass} ${dimensionClass}`}
-      onClick={onClick}
-    >
-      <Image
-        src={previewUrl}
-        alt={`preview-${index}`}
-        className="z-10 h-full w-full"
-        aspectRatio=""
-        rounded={roundedClass}
-      />
-      {closeButton && onRemove && (
-        <button
-          onClick={() => onRemove(index)}
-          className="absolute -top-1.5 -right-1.5 z-10 flex h-4 w-4 cursor-pointer items-center justify-center rounded-full bg-red-500"
-        >
-          <CloseIcon className="h-2 w-2" />
-        </button>
-      )}
+    <div className="relative h-[84px] w-[84px] shrink-0 rounded-md">
+      <div className="h-full w-full overflow-hidden">
+        <Image
+          src={URL.createObjectURL(image)}
+          alt={`preview-${index}`}
+          className="z-10 h-full w-full"
+          aspectRatio=""
+          rounded="rounded-md"
+        />
+      </div>
+      <button
+        onClick={() => onRemove(index)}
+        className="absolute -top-1.5 -right-1.5 z-10 flex h-4 w-4 items-center justify-center rounded-full bg-red-500"
+      >
+        <CloseIcon className="h-2 w-2" />
+      </button>
     </div>
   );
 }

src/components/index.tsx

@@ -30,6 +30,7 @@ import ProgressBar from '@/components/common/ProgressBar/ProgressBar';
 import TagReviewNumber from './common/TagReviewNumber/TagReviewNumber';
 import TagCardList from './common/TagReviewNumber/TagCardList';
 import TheaterList from './common/Theater/TheaterList';
+
 export { default as FilterCheckbox } from '@/components/common/ReviewFilter/FilterCheckbox';
 export { default as MyLevelCard } from './common/LevelCard/MyLevelCard';
 

src/hooks/queries/useUserProfileQuery.ts

@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query';
+import api from '@/api/api';
+
+export interface UserProfile {
+  nickname: string;
+  imageUrl: string | null;
+  genres: string[];
+  auditoriums: string[];
+}
+
+const fetchUserProfile = async (): Promise<UserProfile> => {
+  const res = await api.get('/profile');
+  return res.data.data;
+};
+
+export const useUserProfileQuery = () => {
+  return useQuery<UserProfile>({
+    queryKey: ['userProfile'],
+    queryFn: fetchUserProfile,
+    staleTime: 1000 * 60 * 5, // 5분 캐시
+  });
+};

src/hooks/useImageUpload.ts

@@ -2,53 +2,28 @@ import { useState } from 'react';
 
 export function useImgUpload(maxCount: number = 5) {
   const [images, setImages] = useState<File[]>([]);
-  const [previewUrls, setPreviewUrls] = useState<string[]>([]);
 
   const addImages = (files: FileList | null) => {
     if (!files) return;
-    const selected = Array.from(files).slice(0, maxCount);
-
-    // 기존 이미지가 1장 제한일 경우 덮어쓰기
-    if (maxCount === 1) {
-      // 기존 preview 해제
-      previewUrls.forEach((url) => URL.revokeObjectURL(url));
-
-      const newPreviewUrls = selected.map((file) => URL.createObjectURL(file));
-      setImages(selected);
-      setPreviewUrls(newPreviewUrls);
-    } else {
-      const selectableCount = maxCount - images.length;
-      const sliced = selected.slice(0, selectableCount);
-      const newPreviewUrls = sliced.map((file) => URL.createObjectURL(file));
-
-      setImages((prev) => [...prev, ...sliced]);
-      setPreviewUrls((prev) => [...prev, ...newPreviewUrls]);
-    }
+    const selected = Array.from(files).slice(0, maxCount - images.length);
+    setImages((prev) => [...prev, ...selected]);
   };
 
   const removeImage = (index: number) => {
-    // 미리보기 URL 해제
-    URL.revokeObjectURL(previewUrls[index]);
-
     setImages((prev) => prev.filter((_, i) => i !== index));
-    setPreviewUrls((prev) => prev.filter((_, i) => i !== index));
   };
 
   const resetImages = () => {
-    previewUrls.forEach((url) => URL.revokeObjectURL(url));
     setImages([]);
-    setPreviewUrls([]);
   };
 
   const isMax = images.length >= maxCount;
 
   return {
-    images, // File[]
-    previewUrls, // string[]
+    images,
     addImages,
     removeImage,
     resetImages,
     isMax,
-    selectedFiles: images,
   };
 }