From a7f9d3f13d674bb63e80fc1f4e6bc0d22581c20f Mon Sep 17 00:00:00 2001
From: soyun-git121 <soyunbag066@gmail.com>
Date: Tue, 5 Aug 2025 09:31:21 +0900
Subject: [PATCH 1/6] =?UTF-8?q?=ED=94=84=EB=A1=9C=ED=95=84=20api=20?=
 =?UTF-8?q?=EC=97=B0=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/profile/profile.api.ts           | 14 ++++
 src/api/user/userEdit.api.ts             |  9 +++
 src/hooks/queries/useUserProfileQuery.ts | 22 ++++++
 src/pages/my/CinemaChoice.tsx            | 13 +++-
 src/pages/my/ProfileEdit.tsx             | 94 +++++++++++++++++-------
 src/pages/my/SelectGenre.tsx             | 17 +++--
 src/types/user.ts                        |  9 ++-
 src/types/userEdit.ts                    | 13 ++++
 8 files changed, 155 insertions(+), 36 deletions(-)
 create mode 100644 src/api/profile/profile.api.ts
 create mode 100644 src/api/user/userEdit.api.ts
 create mode 100644 src/hooks/queries/useUserProfileQuery.ts
 create mode 100644 src/types/userEdit.ts

diff --git a/src/api/profile/profile.api.ts b/src/api/profile/profile.api.ts
new file mode 100644
index 0000000..24bb4b5
--- /dev/null
+++ b/src/api/profile/profile.api.ts
@@ -0,0 +1,14 @@
+import api from '@/api/api';
+import type { UserProfile } from '@/types/user';
+import type { ApiError } from '@/types/api-response';
+
+export const getUserProfile = async (): Promise<UserProfile> => {
+  try {
+    const response = await api.get<UserProfile>('/profile');
+    return response.data;
+  } catch (err) {
+    const apiError = err as ApiError;
+    console.error('프로필 로딩 에러:', apiError);
+    throw apiError;
+  }
+};
\ No newline at end of file
diff --git a/src/api/user/userEdit.api.ts b/src/api/user/userEdit.api.ts
new file mode 100644
index 0000000..0334765
--- /dev/null
+++ b/src/api/user/userEdit.api.ts
@@ -0,0 +1,9 @@
+import api from '@/api/api';
+import type { UpdateUserProfileRequest, UserProfileResponse } from '@/types/userEdit';
+
+export const updateUserProfile = async (
+  data: UpdateUserProfileRequest
+): Promise<UserProfileResponse> => {
+  const res = await api.put('/api/v1/profile', data);
+  return res.data.data;
+};
\ No newline at end of file
diff --git a/src/hooks/queries/useUserProfileQuery.ts b/src/hooks/queries/useUserProfileQuery.ts
new file mode 100644
index 0000000..930ed24
--- /dev/null
+++ b/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('/api/v1/user/profile');
+  return res.data.data;
+};
+
+export const useUserProfileQuery = () => {
+  return useQuery<UserProfile>({
+    queryKey: ['userProfile'],
+    queryFn: fetchUserProfile,
+    staleTime: 1000 * 60 * 5, // 5분 캐시
+  });
+};
\ No newline at end of file
diff --git a/src/pages/my/CinemaChoice.tsx b/src/pages/my/CinemaChoice.tsx
index cbb5f40..de56cf9 100644
--- a/src/pages/my/CinemaChoice.tsx
+++ b/src/pages/my/CinemaChoice.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import { Button, Header, ToggleTab } from '@/components';
 import type { CinemaFormat, CinemaType } from '@/types/onboarding';
 
@@ -15,6 +15,7 @@ const MAX_SELECTABLE_THEATERS = 2;
 
 export default function CinemaChoice() {
   const navigate = useNavigate();
+  const location = useLocation();
   const [selectedTheaters, setSelectedTheaters] = useState<CinemaType[]>([]);
   const [activeFormat, setActiveFormat] = useState<CinemaFormat>('Dolby');
 
@@ -32,8 +33,13 @@ export default function CinemaChoice() {
   };
 
   const handleConfirmSelection = () => {
-    console.log('선택된 영화관:', selectedTheaters);
-    navigate(-1);
+    navigate('/my/profile-edit', {
+      state: {
+        auditoriums: selectedTheaters,
+        nickname: location.state?.nickname,
+        genres: location.state?.genres,
+      },
+    });
   };
 
   const handleFormatSelect = (format: string) => {
@@ -67,7 +73,6 @@ export default function CinemaChoice() {
           onSelect={(selectedValue) => handleFormatSelect(selectedValue)}
         />
 
-        {/* 영화관 목록 */}
         <div className="mt-4 flex flex-col gap-y-3">
           {currentTheaters.map((theater) => (
             <Button
diff --git a/src/pages/my/ProfileEdit.tsx b/src/pages/my/ProfileEdit.tsx
index db57af2..f7c997f 100644
--- a/src/pages/my/ProfileEdit.tsx
+++ b/src/pages/my/ProfileEdit.tsx
@@ -1,24 +1,72 @@
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { useEffect, useState } from 'react';
 import { Button, Header } from '@/components';
 import { MyProfileEditIcon, PencilIcon } from '@/assets';
+import { updateUserProfile } from '@/api/user/userEdit.api';
+import { useToastStore } from '@/store';
+import { useUserProfileQuery } from '@/hooks/queries/useUserProfileQuery';
 
 export default function ProfileEdit() {
   const navigate = useNavigate();
+  const location = useLocation();
+  const { show: showToast } = useToastStore();
+  const { data: user, isLoading } = useUserProfileQuery();
+  const [nickname, setNickname] = useState('');
+  const [genres, setGenres] = useState<string[]>([]);
+  const [auditoriums, setAuditoriums] = useState<string[]>([]);
 
+  useEffect(() => {
+  if (!user) return;
+
+  // location.state가 있을 경우 우선 적용 (빈 배열도 감지)
+  const state = location.state;
+
+  setNickname(state?.nickname ?? user.nickname);
+
+  setGenres(
+    Array.isArray(state?.genres) && state.genres.length > 0
+      ? state.genres
+      : user.genres
+  );
+
+  setAuditoriums(
+    Array.isArray(state?.auditoriums) && state.auditoriums.length > 0
+      ? state.auditoriums
+      : user.auditoriums
+  );
+}, [user, location.state]);
   const handleNavigateToGenreSelect = () => {
-    navigate('/my/select-genre');
+    navigate('/my/select-genre', { state: { nickname, auditoriums } });
   };
+
   const handleNavigateToCinemaChoice = () => {
-    navigate('/my/cinema-choice');
+    navigate('/my/cinema-choice', { state: { nickname, genres } });
   };
 
+  const handleSave = async () => {
+  try {
+    const payload = {
+      nickname,
+      genres,
+      auditoriums,
+    };
+
+    console.log('🔥 update payload:', payload);
+
+    await updateUserProfile(payload);
+    showToast('프로필이 저장되었습니다.', 3000);
+    navigate('/my');
+  } catch (error) {
+    showToast('저장에 실패했습니다.', 3000);
+    console.error('❌ update error', error);
+  }
+};
+
+
   return (
     <div className="font-suit flex h-screen flex-col text-white">
-      {/* Header */}
       <Header leftSection="BACK" rightSection="KEBAB" className="bg-gray-900" />
-      {/* Main Content */}
-      <main className="flex-grow overflow-y-auto px-4 pt-[68px]">
-        {/* 프로필 정보 섹션 */}
+      <main className="flex-grow overflow-y-auto px-4 pt-[49px]">
         <section className="mt-4 flex flex-col items-center rounded-xl bg-gray-800/30 px-4 py-6">
           <button className="mb-6" aria-label="프로필 사진 변경">
             <MyProfileEditIcon className="h-20 w-20" />
@@ -30,43 +78,37 @@ export default function ProfileEdit() {
             <input
               id="nickname"
               type="text"
-              defaultValue="김씨잇"
+              value={nickname}
+              onChange={(e) => setNickname(e.target.value)}
               className="mt-2 h-[46px] w-full rounded-md border border-gray-800 bg-gray-900 px-4 py-3 text-white placeholder-gray-500 focus:outline-none"
             />
           </div>
         </section>
 
-        <div className="mx-auto mt-10 flex h-[168px] w-[330px] flex-col justify-around">
-          <button
-            onClick={handleNavigateToGenreSelect}
-            className="flex w-full items-start justify-between text-left"
-          >
+        <div className="mx-auto mt-2 flex h-[168px] w-[330px] flex-col justify-around gap-y-2">
+          <button onClick={handleNavigateToGenreSelect} className="flex w-full justify-between text-left">
             <div>
               <h2 className="text-title-3 text-white">선호 장르</h2>
-              <p className="text-caption-2 mt-2 text-red-300">호러, SF, 로맨스</p>
+              <p className="text-caption-2 mt-2 text-red-300">{genres.join(', ')}</p>
             </div>
-            <PencilIcon className="h-6 w-6 flex-shrink-0" />
+            <PencilIcon className="h-6 w-6" />
           </button>
 
-          {/* 즐겨찾는 영화관 섹션 */}
-          <button
-            onClick={handleNavigateToCinemaChoice}
-            className="flex w-full items-start justify-between text-left"
-          >
+          <button onClick={handleNavigateToCinemaChoice} className="flex w-full justify-between text-left">
             <div>
               <h2 className="text-title-3 text-white">즐겨찾는 영화관</h2>
               <div className="text-caption-2 mt-2 space-y-2 text-red-300">
-                <p>남양주현대아울렛 스페이스원</p>
-                <p>용산아이파크몰 (용아맥)</p>
+                {auditoriums.map((a: string) => (
+                  <p key={a}>{a}</p>
+                ))}
               </div>
             </div>
-            <PencilIcon className="h-6 w-6 flex-shrink-0" />
+            <PencilIcon className="h-6 w-6" />
           </button>
         </div>
       </main>
 
-      {/* Footer */}
-      <footer className="flex-shrink-0 bg-gray-900 px-4 py-3">
+      <footer className="bg-gray-900 px-4 py-3">
         <Button
           variant="primary"
           color="red"
@@ -74,6 +116,8 @@ export default function ProfileEdit() {
           rounded="lg"
           className="w-full"
           fontType="title-3"
+          onClick={handleSave}
+          disabled={isLoading}
         >
           저장하기
         </Button>
diff --git a/src/pages/my/SelectGenre.tsx b/src/pages/my/SelectGenre.tsx
index 73325c7..f2e08fb 100644
--- a/src/pages/my/SelectGenre.tsx
+++ b/src/pages/my/SelectGenre.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
 import { Header, Button } from '@/components';
 import type { GenreType } from '@/types/movieGenre';
 
@@ -8,7 +8,8 @@ const MAX_SELECTABLE_GENRES = 3;
 
 export default function SelectGenre() {
   const navigate = useNavigate();
-  const [selectedGenres, setSelectedGenres] = useState<GenreType[]>(['SF', '호러', '로맨스']);
+  const location = useLocation();
+  const [selectedGenres, setSelectedGenres] = useState<GenreType[]>([]);
 
   const handleGenreClick = (genre: GenreType) => {
     setSelectedGenres((prevSelected) => {
@@ -24,17 +25,21 @@ export default function SelectGenre() {
   };
 
   const handleConfirmSelection = () => {
-    console.log('선택된 장르:', selectedGenres);
-    navigate(-1);
+    navigate('/my/profile-edit', {
+      state: {
+        genres: selectedGenres,
+        nickname: location.state?.nickname,
+        auditoriums: location.state?.auditoriums,
+      },
+    });
   };
 
   return (
-    <div className="flex h-screen flex-col p-4">
+    <div className="flex h-screen flex-col p-4 pt-[48px]">
       <Header leftSection="BACK" rightSection="KEBAB" className="bg-gray-900" />
 
       <main className="flex-grow pt-4">
         <h2 className="text-title-2 mb-2 text-white">좋아하는 장르를 선택해주세요</h2>
-
         <p className="text-caption-2 mb-6 text-red-300">
           최대 {MAX_SELECTABLE_GENRES}개까지 선택할 수 있어요.
         </p>
diff --git a/src/types/user.ts b/src/types/user.ts
index 2de6067..f03d537 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -1,5 +1,12 @@
 export interface User {
   userId: number;
   nickname: string;
-  profileImageUrl: string;
+  profileImageUrl: string | null;
 }
+
+export interface UserProfile extends User {
+  level: number;
+  progress: number;
+  preferredGenres: string[];
+  favoriteTheaters: string[];
+}
\ No newline at end of file
diff --git a/src/types/userEdit.ts b/src/types/userEdit.ts
new file mode 100644
index 0000000..cf7c208
--- /dev/null
+++ b/src/types/userEdit.ts
@@ -0,0 +1,13 @@
+export interface UpdateUserProfileRequest {
+  nickname: string;
+  imageUrl?: string | null;
+  genres?: string[];
+  auditoriums?: string[];
+}
+
+export interface UserProfileResponse {
+  nickname: string;
+  imageUrl: string | null;
+  genres: string[];
+  auditoriums: string[];
+}
\ No newline at end of file

From 9a688ff6217de5ce9458d284fb2ea7282056aa71 Mon Sep 17 00:00:00 2001
From: soyun-git121 <soyunbag066@gmail.com>
Date: Tue, 5 Aug 2025 21:33:37 +0900
Subject: [PATCH 2/6] =?UTF-8?q?=ED=94=84=EB=A1=9C=ED=95=84=20=EC=82=AC?=
 =?UTF-8?q?=EC=A7=84=20api?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/queries/useUserProfileQuery.ts |  2 +-
 src/pages/my/ProfileEdit.tsx             | 33 ++++++++++--------------
 2 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/src/hooks/queries/useUserProfileQuery.ts b/src/hooks/queries/useUserProfileQuery.ts
index 930ed24..4bc2591 100644
--- a/src/hooks/queries/useUserProfileQuery.ts
+++ b/src/hooks/queries/useUserProfileQuery.ts
@@ -9,7 +9,7 @@ export interface UserProfile {
 }
 
 const fetchUserProfile = async (): Promise<UserProfile> => {
-  const res = await api.get('/api/v1/user/profile');
+  const res = await api.get('/user/profile');
   return res.data.data;
 };
 
diff --git a/src/pages/my/ProfileEdit.tsx b/src/pages/my/ProfileEdit.tsx
index f7c997f..a6b17f0 100644
--- a/src/pages/my/ProfileEdit.tsx
+++ b/src/pages/my/ProfileEdit.tsx
@@ -6,6 +6,7 @@ import { updateUserProfile } from '@/api/user/userEdit.api';
 import { useToastStore } from '@/store';
 import { useUserProfileQuery } from '@/hooks/queries/useUserProfileQuery';
 
+
 export default function ProfileEdit() {
   const navigate = useNavigate();
   const location = useLocation();
@@ -18,7 +19,6 @@ export default function ProfileEdit() {
   useEffect(() => {
   if (!user) return;
 
-  // location.state가 있을 경우 우선 적용 (빈 배열도 감지)
   const state = location.state;
 
   setNickname(state?.nickname ?? user.nickname);
@@ -44,24 +44,19 @@ export default function ProfileEdit() {
   };
 
   const handleSave = async () => {
-  try {
-    const payload = {
-      nickname,
-      genres,
-      auditoriums,
-    };
-
-    console.log('🔥 update payload:', payload);
-
-    await updateUserProfile(payload);
-    showToast('프로필이 저장되었습니다.', 3000);
-    navigate('/my');
-  } catch (error) {
-    showToast('저장에 실패했습니다.', 3000);
-    console.error('❌ update error', error);
-  }
-};
-
+    try {
+      await updateUserProfile({
+        nickname,
+        genres,
+        auditoriums,
+      });
+      showToast('프로필이 저장되었습니다.', 3000);
+      navigate('/my');
+    } catch (error) {
+      showToast('저장에 실패했습니다.', 3000);
+      console.error(error);
+    }
+  };
 
   return (
     <div className="font-suit flex h-screen flex-col text-white">

From 9ea73ad741e1d0a5e47294b220eef622fe251231 Mon Sep 17 00:00:00 2001
From: soyun-git121 <soyunbag066@gmail.com>
Date: Wed, 6 Aug 2025 20:51:39 +0900
Subject: [PATCH 3/6] =?UTF-8?q?=EC=9E=84=EC=8B=9C=20=EC=88=98=EC=A0=95=20?=
 =?UTF-8?q?=EC=BB=A4=EB=B0=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/assets/index.tsx b/src/assets/index.tsx
index 590db39..622320a 100644
--- a/src/assets/index.tsx
+++ b/src/assets/index.tsx
@@ -39,7 +39,6 @@ import NaverIcon from '@/assets/icons/naver_icon.svg?react';
 import SoundIcon from '@/assets/icons/sound.svg?react';
 import EnvironmentIcon from '@/assets/icons/environment.svg?react';
 import CompanionIcon from '@/assets/icons/companion.svg?react';
-
 import TicketAlt from '@/assets/gif/ticket_alt.gif';
 
 export {

From 5d49725749f94fdce77e3855d245fd706578c323 Mon Sep 17 00:00:00 2001
From: soyun-git121 <soyunbag066@gmail.com>
Date: Thu, 7 Aug 2025 03:24:56 +0900
Subject: [PATCH 4/6] =?UTF-8?q?=ED=94=84=EB=A1=9C=ED=95=84=20=EC=82=AC?=
 =?UTF-8?q?=EC=A7=84=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/image/image.api.ts                    | 39 +++++++++
 .../common/ImagePreview/ImagePreviewItem.tsx  | 62 +++++++++-----
 .../mutations/usePresignedUrlMutation.ts      | 10 +++
 src/hooks/mutations/useUploadToS3Mutation.ts  | 14 +++
 src/hooks/useImageUpload.ts                   | 33 ++++++-
 src/pages/my/ProfileEdit.tsx                  | 12 +--
 .../onboarding/OnboardingNicknamePage.tsx     | 85 +++++++++++++++----
 src/pages/review/ReviewContent.tsx            | 13 ++-
 src/store/useOnboardingStore.ts               | 12 ++-
 9 files changed, 224 insertions(+), 56 deletions(-)
 create mode 100644 src/hooks/mutations/usePresignedUrlMutation.ts
 create mode 100644 src/hooks/mutations/useUploadToS3Mutation.ts

diff --git a/src/api/image/image.api.ts b/src/api/image/image.api.ts
index e69de29..0dd8894 100644
--- a/src/api/image/image.api.ts
+++ b/src/api/image/image.api.ts
@@ -0,0 +1,39 @@
+import axios from 'axios';
+import api from '@/api/api';
+import type { ApiResponse } from '@/types/api-response';
+import type { PresignedUrlInfo } from '@/types/image';
+
+/**
+ * presigned URL 발급
+ * @param fileNames 업로드할 파일 이름 배열
+ * @returns presigned URL 문자열 배열
+ */
+const getPresignedUrls = async (fileNames: string[]): Promise<PresignedUrlInfo[]> => {
+  const res = await api.get<ApiResponse<PresignedUrlInfo[]>>('/images/upload-url', {
+    params: { file: fileNames },
+    paramsSerializer: { indexes: null },
+  });
+
+  const urls = res.data.data;
+
+  if (!urls || urls.length === 0) {
+    throw new Error('Presigned URL 발급에 실패했습니다.');
+  }
+
+  return urls;
+};
+
+/**
+ * S3에 파일 업로드
+ * @param url presigned URL
+ * @param file 업로드할 File 객체
+ */
+const uploadToS3 = async (url: string, file: File): Promise<void> => {
+  await axios.put(url, file, {
+    headers: {
+      'Content-Type': file.type,
+    },
+  });
+};
+
+export { getPresignedUrls, uploadToS3 };
\ No newline at end of file
diff --git a/src/components/common/ImagePreview/ImagePreviewItem.tsx b/src/components/common/ImagePreview/ImagePreviewItem.tsx
index e0d75a0..e02a3a3 100644
--- a/src/components/common/ImagePreview/ImagePreviewItem.tsx
+++ b/src/components/common/ImagePreview/ImagePreviewItem.tsx
@@ -1,32 +1,50 @@
-// src/components/common/ImagePreviewItem.tsx
-
 import { CloseIcon } from '@/assets';
 import { Image } from '@/components';
+import type { ButtonRounded } from '@/components/common/Button';
 
 interface ImagePreviewItemProps {
-  image: File;
+  previewUrl: string;
   index: number;
-  onRemove: (index: number) => void;
+  rounded?: ButtonRounded;
+  size?: number;
+  closeButton?: boolean;
+  onRemove?: (index: number) => void;
+  onClick?: () => void;
 }
 
-export default function ImagePreviewItem({ image, index, onRemove }: ImagePreviewItemProps) {
+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]`;
+
   return (
-    <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
+      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>
   );
-}
+}
\ No newline at end of file
diff --git a/src/hooks/mutations/usePresignedUrlMutation.ts b/src/hooks/mutations/usePresignedUrlMutation.ts
new file mode 100644
index 0000000..eb18448
--- /dev/null
+++ b/src/hooks/mutations/usePresignedUrlMutation.ts
@@ -0,0 +1,10 @@
+import { useMutation } from '@tanstack/react-query';
+import { getPresignedUrls } from '@/api/image/image.api';
+import type { ApiError } from '@/types/api-response';
+import type { PresignedUrlInfo } from '@/types/image';
+
+export const usePresignedUrlMutation = () => {
+  return useMutation<PresignedUrlInfo[], ApiError, { fileNames: string[] }>({
+    mutationFn: ({ fileNames }) => getPresignedUrls(fileNames),
+  });
+};
\ No newline at end of file
diff --git a/src/hooks/mutations/useUploadToS3Mutation.ts b/src/hooks/mutations/useUploadToS3Mutation.ts
new file mode 100644
index 0000000..f19b53c
--- /dev/null
+++ b/src/hooks/mutations/useUploadToS3Mutation.ts
@@ -0,0 +1,14 @@
+import { useMutation } from '@tanstack/react-query';
+import { uploadToS3 } from '@/api/image/image.api';
+import type { ApiError } from '@/types/api-response';
+
+interface UploadParams {
+  url: string;
+  file: File;
+}
+
+export const useUploadToS3Mutation = () => {
+  return useMutation<void, ApiError, UploadParams>({
+    mutationFn: ({ url, file }) => uploadToS3(url, file),
+  });
+};
\ No newline at end of file
diff --git a/src/hooks/useImageUpload.ts b/src/hooks/useImageUpload.ts
index 59dd616..cd35cab 100644
--- a/src/hooks/useImageUpload.ts
+++ b/src/hooks/useImageUpload.ts
@@ -2,28 +2,53 @@ 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 - images.length);
-    setImages((prev) => [...prev, ...selected]);
+    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 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,
+    images, // File[]
+    previewUrls, // string[]
     addImages,
     removeImage,
     resetImages,
     isMax,
+    selectedFiles: images,
   };
-}
+}
\ No newline at end of file
diff --git a/src/pages/my/ProfileEdit.tsx b/src/pages/my/ProfileEdit.tsx
index 5e7c4e4..e9ed16a 100644
--- a/src/pages/my/ProfileEdit.tsx
+++ b/src/pages/my/ProfileEdit.tsx
@@ -8,7 +8,7 @@ import { useUserProfileQuery } from '@/hooks/queries/useUserProfileQuery';
 import { THEATER_NAME_MAP } from '@/constants/theater';
 import ImagePreviewItem from '@/components/common/ImagePreview/ImagePreviewItem';
 import { useImgUpload } from '@/hooks/useImageUpload';
-import { useS3UploadFlow } from '@/hooks/useS3UploadFlow';
+import { useS3UploadFlow as uploadS3Flow } from '@/hooks/useS3UploadFlow';
 
 export default function ProfileEdit() {
   const navigate = useNavigate();
@@ -60,9 +60,9 @@ export default function ProfileEdit() {
     try {
       let uploadedImageUrl = imageUrl;
       if (selectedFiles.length > 0) {
-        const results = await useS3UploadFlow(selectedFiles);
-        uploadedImageUrl = results[0].url.split('?')[0]; // ?query 제거된 실제 URL
-      }
+          const results = await uploadS3Flow(selectedFiles);
+          uploadedImageUrl = results[0].url.split('?')[0];
+        }
 
       await updateUserProfile({
         nickname,
@@ -70,10 +70,10 @@ export default function ProfileEdit() {
         auditoriums,
         imageUrl: uploadedImageUrl ?? null,
       });
-      showToast('프로필이 저장되었습니다.', 3000);
+      showToast('프로필이 저장되었습니다.');
       navigate('/my');
     } catch (error) {
-      showToast('저장에 실패했습니다.', 3000);
+      showToast('저장에 실패했습니다.');
       console.error(error);
     }
   };
diff --git a/src/pages/onboarding/OnboardingNicknamePage.tsx b/src/pages/onboarding/OnboardingNicknamePage.tsx
index d16929e..4ba3d8e 100644
--- a/src/pages/onboarding/OnboardingNicknamePage.tsx
+++ b/src/pages/onboarding/OnboardingNicknamePage.tsx
@@ -1,9 +1,12 @@
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Button, Header } from '@/components';
+import { Button, Header, ImagePreviewItem } from '@/components';
 import Input from '@/components/common/Input/Input';
 import ProgressBar from '@/components/common/ProgressBar/ProgressBar';
 import { useOnboardingStore } from '@/store/useOnboardingStore';
+import { GalleryProfileIcon } from '@/assets';
+import { useImgUpload } from '@/hooks';
+import { useS3UploadFlow } from '@/hooks/useS3UploadFlow';
 
 const OnboardingNicknamePage = () => {
   const [input, setInput] = useState('');
@@ -11,10 +14,48 @@ const OnboardingNicknamePage = () => {
 
   const setNickname = useOnboardingStore((state) => state.setNickname);
 
-  const handleNext = () => {
+  const { addImages, previewUrls, selectedFiles } = useImgUpload(1);
+  const setProfileImageFileName = useOnboardingStore((state) => state.setProfileImageFilename);
+
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  const handleClickGallery = () => {
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+      fileInputRef.current.click();
+    }
+  };
+
+  const handleChangeFile = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    addImages(e.target.files);
+
+    if (files && files.length > 0) {
+      const file = files[0];
+      setProfileImageFileName(file.name);
+      console.log('저장된 이미지 파일: ', file.name);
+    }
+  };
+
+  const handleNext = async () => {
     setNickname(input);
     console.log('닉네임: ', input);
-    navigate('/onboarding/genre');
+    if (selectedFiles.length > 0) {
+      try {
+        const result = await useS3UploadFlow(selectedFiles);
+        const imageUrl = result[0]?.url;
+
+        if (imageUrl) {
+          setProfileImageFileName(imageUrl);
+          console.log('프로필 이미지 URL:', imageUrl);
+          navigate('/onboarding/genre');
+        } else {
+          console.error('이미지 업로드 실패');
+        }
+      } catch (e) {
+        console.error('이미지 업로드 중 에러 발생', e);
+      }
+    }
   };
 
   return (
@@ -29,22 +70,34 @@ const OnboardingNicknamePage = () => {
         {/* 타이틀 */}
         <h1 className="text-title-2 mb-10">프로필을 만들어주세요</h1>
 
-        {/* 프로필 이미지 (예시용 박스) */}
         <div className="mb-10 flex justify-center">
-          <div className="flex h-36 w-36 items-center justify-center rounded-full bg-gray-100 text-sm text-black">
-            갤러리 아이콘
-          </div>
+          {/* 파일 input */}
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/*"
+            className="hidden"
+            onChange={handleChangeFile}
+          />
+
+          {previewUrls.length === 0 ? (
+            <div onClick={handleClickGallery}>
+              <GalleryProfileIcon className="cursor-pointer" />
+            </div>
+          ) : (
+            <ImagePreviewItem
+              previewUrl={previewUrls[0]}
+              index={0}
+              rounded="full"
+              size={100}
+              onClick={handleClickGallery}
+            />
+          )}
         </div>
 
         {/* 닉네임 입력 */}
         <div className="mb-2">
-          <Input
-            label=""
-            value={input}
-            onChange={setInput}
-            placeholder="닉네임을 입력해주세요"
-            placeholderColorType="gray"
-          />
+          <Input label="" value={input} onChange={setInput} placeholder="닉네임을 입력해주세요" />
         </div>
 
         <p className="text-caption-3 ml-1 text-gray-500">10자 이내로 작성해주세요.</p>
@@ -68,4 +121,4 @@ const OnboardingNicknamePage = () => {
   );
 };
 
-export default OnboardingNicknamePage;
+export default OnboardingNicknamePage;
\ No newline at end of file
diff --git a/src/pages/review/ReviewContent.tsx b/src/pages/review/ReviewContent.tsx
index b483f82..e240529 100644
--- a/src/pages/review/ReviewContent.tsx
+++ b/src/pages/review/ReviewContent.tsx
@@ -16,7 +16,7 @@ const MIN_TEXT_LENGTH = 30;
 
 export default function ReviewTextForm() {
   const { text, setText, reviewTitle, setReviewTitle, isInitialized } = useReviewStore();
-  const { images, addImages, removeImage } = useImgUpload(5);
+  const { images, addImages, removeImage, previewUrls } = useImgUpload(5);
   const navigate = useNavigate();
 
   const isValid = reviewTitle.trim().length > 0 && text.trim().length >= MIN_TEXT_LENGTH;
@@ -62,8 +62,13 @@ export default function ReviewTextForm() {
               />
             </label>
             {/* 이미지 미리보기? */}
-            {images.map((image, index) => (
-              <ImagePreviewItem key={index} image={image} index={index} onRemove={removeImage} />
+            {images.map((_, index) => (
+              <ImagePreviewItem
+                key={index}
+                previewUrl={previewUrls[index]}
+                index={index}
+                onRemove={removeImage}
+              />
             ))}
           </div>
         </div>
@@ -105,4 +110,4 @@ export default function ReviewTextForm() {
       )}
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/src/store/useOnboardingStore.ts b/src/store/useOnboardingStore.ts
index c5ec1ff..f3da7e1 100644
--- a/src/store/useOnboardingStore.ts
+++ b/src/store/useOnboardingStore.ts
@@ -3,16 +3,17 @@ import { genreMap, type GenreEnType, type GenreType } from '@/types/movieGenre';
 import type { CinemaType, CinemaFormat } from '@/types/onboarding';
 
 interface OnboardingState {
+  profileImageFilename: string;
   nickname: string;
+  genre: GenreType[];
   selectedGenres: GenreEnType[];
-  // selectedCinemas: CinemaType[];
   selectedCinemas: string[];
   cinemaFormat: CinemaFormat;
   setNickname: (name: string) => void;
   toggleGenre: (genre: GenreType) => void;
   toggleCinema: (cinema: CinemaType) => void;
   setCinemaFormat: (format: CinemaFormat) => void;
-  genre: GenreType[];
+  setProfileImageFilename: (filename: string) => void;
   setGenre: (genres: GenreType[]) => void;
   setSelectedGenres: (genres: GenreEnType[]) => void;
   setSelectedCinemas: (cinemas: CinemaType[]) => void;
@@ -27,6 +28,9 @@ export const useOnboardingStore = create<OnboardingState>((set, get) => ({
   selectedCinemas: [],
   cinemaFormat: 'IMAX',
 
+  profileImageFilename: '',
+  setProfileImageFilename: (filename) => set({ profileImageFilename: filename }),
+
   setNickname: (name) => set({ nickname: name }),
 
   toggleGenre: (genre) => {
@@ -56,5 +60,5 @@ export const useOnboardingStore = create<OnboardingState>((set, get) => ({
 
   setCinemaFormat: (format) => set({ cinemaFormat: format }),
 
-  setSelectedCinemas: (cinemas) => set({ selectedCinemas: cinemas }), // ✅ 추가
-}));
+  setSelectedCinemas: (cinemas) => set({ selectedCinemas: cinemas }),
+}));
\ No newline at end of file

From ce2ee9cf2bffafb3299af9f5fb0b97c916eb3165 Mon Sep 17 00:00:00 2001
From: soyun-git121 <soyunbag066@gmail.com>
Date: Thu, 7 Aug 2025 03:46:05 +0900
Subject: [PATCH 5/6] =?UTF-8?q?=EB=B9=8C=EB=93=9C=20=EC=97=90=EB=9F=AC=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5ec082e..dad3976 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
     "@tanstack/react-query-devtools": "^5.84.1",
     "axios": "^1.11.0",
     "clsx": "^2.1.1",
-    "lodash": "^4.17.21"
+    "lodash": "^4.17.21",
     "lottie-react": "^2.4.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

From e7af5718b9035f2534c3aa30ce1e85a65a3ac525 Mon Sep 17 00:00:00 2001
From: soyun-git121 <soyunbag066@gmail.com>
Date: Thu, 7 Aug 2025 03:50:05 +0900
Subject: [PATCH 6/6] =?UTF-8?q?=EB=B9=8C=EB=93=9C=20=EC=97=90=EB=9F=AC=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/user.ts | 12 +-----------
 1 file changed, 1 insertion(+), 11 deletions(-)

diff --git a/src/types/user.ts b/src/types/user.ts
index c0447b7..601309e 100644
--- a/src/types/user.ts
+++ b/src/types/user.ts
@@ -41,19 +41,9 @@ export interface UserProfileUpdateRequest {
   genres?: string[];
   auditoriumIds?: string[];
 }
+
 export interface User {
   userId: number;
   nickname: string;
-<<<<<<< HEAD
   profileImageUrl: string | null;
 }
-
-export interface UserProfile {
-  nickname: string;
-  imageUrl: string | null;
-  genres: string[];
-  auditoriums: string[];
-=======
-  profileImageUrl: string;
->>>>>>> 682b26a74ca1c2aaaec457c7d52ecfc9d3a083ef
-}
\ No newline at end of file