diff --git a/src/apis/museum/artwork.js b/src/apis/museum/artwork.js
new file mode 100644
index 0000000..ca42cee
--- /dev/null
+++ b/src/apis/museum/artwork.js
@@ -0,0 +1,320 @@
+import { APIService } from '../axios.js';
+import { useState, useEffect, useCallback } from 'react';
+
+/**
+ * 내 작품 리스트 조회 API
+ * @param {Object} params - 쿼리 파라미터
+ * @param {boolean} params.applicated - 등록 신청 여부
+ * @param {number} params.pageNum - 페이지 번호 (기본값: 1)
+ * @param {number} params.pageSize - 페이지 크기 (기본값: 10)
+ * @returns {Promise} API 응답 데이터
+ */
+export const getMyPieces = async (params = {}) => {
+  try {
+    const { applicated = true, pageNum = 1, pageSize = 3 } = params;
+    
+    const response = await APIService.private.get('/api/pieces/my-page', {
+      params: {
+        applicated,
+        pageNum,
+        pageSize
+      }
+    });
+    
+    return response;
+  } catch (error) {
+    console.error('내 작품 조회 실패:', error);
+    throw error;
+  }
+};
+
+/**
+ * 내 작품 상세 정보 조회 API
+ * @param {string} pieceId - 작품 ID
+ * @returns {Promise} API 응답 데이터
+ */
+export const getMyPieceDetail = async (pieceId) => {
+  try {
+    const response = await APIService.private.get(`/api/pieces/${pieceId}`);
+    return response;
+  } catch (error) {
+    console.error('내 작품 상세 조회 실패:', error);
+    throw error;
+  }
+};
+
+/**
+ * 작품 등록 API
+ * @param {Object} formData - 작품 등록 데이터
+ * @param {string} formData.title - 작품명
+ * @param {string} formData.description - 작품 소개
+ * @param {File} formData.mainImage - 메인 이미지 파일
+ * @param {File[]} formData.detailImages - 디테일 이미지 파일들
+ * @param {string} saveStatus - 저장 상태 (DRAFT 또는 APPLICATION)
+ * @returns {Promise} API 응답 데이터
+ */
+export const createPiece = async (formData, saveStatus = 'APPLICATION') => {
+  try {
+    const data = new FormData();
+    
+    // 작품 정보를 JSON으로 변환하여 data 필드에 추가
+    const pieceData = {
+      title: formData.title,
+      description: formData.description,
+      isPurchasable: true // 사용자 요구사항: 항상 true로 설정
+    };
+    
+    data.append('data', JSON.stringify(pieceData));
+    
+    // 메인 이미지 추가
+    if (formData.mainImage) {
+      data.append('mainImage', formData.mainImage);
+    }
+    
+    // 디테일 이미지들 추가
+    if (formData.detailImages && formData.detailImages.length > 0) {
+      formData.detailImages.forEach((image, index) => {
+        if (image) {
+          data.append('detailImages', image);
+        } 
+      });
+    }
+    
+    const response = await APIService.private.post('/api/pieces', data, {
+      params: { saveStatus },
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    });
+    
+    return response;
+  } catch (error) {
+    console.error('작품 등록 실패:', error);
+    throw error;
+  }
+};
+
+/**
+ * 작품 임시저장 API
+ * @param {Object} formData - 작품 임시저장 데이터
+ * @returns {Promise} API 응답 데이터
+ */
+export const saveDraftPiece = async (formData) => {
+  try {
+    const response = await createPiece(formData, 'DRAFT');
+    return response;
+  } catch (error) {
+    console.error('작품 임시저장 실패:', error);
+    throw error;
+  }
+};
+
+/**
+ * 여러 작품 삭제 API
+ * @param {number[]} pieceIds - 삭제할 작품 ID 배열
+ * @returns {Promise} API 응답 데이터
+ */
+export const deletePieces = async (pieceIds) => {
+  try {
+    const response = await APIService.private.delete('/api/pieces', {
+      params: {
+        pieceIds: pieceIds.join(',')
+      }
+    });
+    return response;
+  } catch (error) {
+    console.error('작품들 삭제 실패:', error);
+    throw error;
+  }
+};
+
+/**
+ * 임시저장된 작품 개수 조회 API
+ * @returns {Promise} API 응답 데이터
+ */
+export const getPieceDraftCount = async () => {
+  try {
+    const response = await APIService.private.get('/api/pieces/draft-count');
+    return response;
+  } catch (error) {
+    console.error('임시저장 작품 개수 조회 실패:', error);
+    throw error;
+  }
+};
+
+
+
+/**
+ * 무한스크롤을 위한 작품 목록 관리 훅
+ * @param {Object} params - 쿼리 파라미터
+ * @param {boolean} params.applicated - 등록 신청 여부 (기본값: true)
+ * @param {number} params.pageSize - 페이지 크기 (기본값: 3)
+ * @returns {object} 작품 데이터와 상태 관리 함수들
+ */
+export const useInfinitePieces = (params = {}) => {
+  const { applicated = true, pageSize = 3 } = params;
+  
+  const [pieces, setPieces] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [hasMore, setHasMore] = useState(true);
+  const [error, setError] = useState(null);
+  const [currentPage, setCurrentPage] = useState(1); // 1부터 시작
+  const [totalElements, setTotalElements] = useState(0);
+
+  // 작품 목록 초기화
+  const resetPieces = useCallback(() => {
+    setPieces([]);
+    setCurrentPage(1); // 1부터 시작
+    setHasMore(true);
+    setError(null);
+    setTotalElements(0);
+  }, []);
+
+  // applicated 변경 시 초기화
+  useEffect(() => {
+    resetPieces();
+  }, [applicated, resetPieces]);
+
+  // 첫 페이지 자동 로드
+  useEffect(() => {
+    // applicated가 변경되거나 pieces가 비어있을 때만 실행
+    if (pieces.length === 0 && !loading) {
+      const loadFirstPage = async () => {
+        if (loading || !hasMore) return;
+
+        setLoading(true);
+        setError(null);
+
+        try {
+          // 첫 페이지(1)로 API 호출
+          const response = await getMyPieces({
+            applicated,
+            pageNum: 1,
+            pageSize
+          });
+
+          // API 응답 구조: { content: [], last: boolean, totalElements: number }
+          const apiResponse = response.data || response;
+          const newPieces = apiResponse.content || [];
+          const isLastPage = apiResponse.last; // last가 true면 마지막 페이지
+          const totalElements = apiResponse.totalElements || 0;
+
+          setPieces(newPieces);
+          setHasMore(!isLastPage); // last가 true면 더 이상 로드하지 않음
+          setTotalElements(totalElements);
+          setCurrentPage(2); // 다음 페이지는 2
+        } catch (err) {
+          setError(err);
+          console.error('작품 로드 실패:', err);
+        } finally {
+          setLoading(false);
+        }
+      };
+
+      loadFirstPage();
+    }
+  }, [applicated, pieces.length, loading, hasMore, pageSize]);
+
+  // 다음 페이지 작품 로드
+  const loadMorePieces = useCallback(async () => {
+    if (loading || !hasMore) return;
+
+    setLoading(true);
+    setError(null);
+
+    try {
+      // 현재 페이지 번호로 API 호출
+      const response = await getMyPieces({
+        applicated,
+        pageNum: currentPage,
+        pageSize
+      });
+
+      // API 응답 구조: { content: [], last: boolean, totalElements: number }
+      const apiResponse = response.data || response;
+      const newPieces = apiResponse.content || [];
+      const isLastPage = apiResponse.last; // last가 true면 마지막 페이지
+      const totalElements = apiResponse.totalElements || 0;
+
+      setPieces(prev => [...prev, ...newPieces]);
+      setHasMore(!isLastPage); // last가 true면 더 이상 로드하지 않음
+      setTotalElements(totalElements);
+      
+      // 다음 페이지 번호로 업데이트 (현재 페이지 로드 완료 후)
+      setCurrentPage(prev => prev + 1);
+    } catch (err) {
+      setError(err);
+      console.error('작품 로드 실패:', err);
+    } finally {
+      setLoading(false);
+    }
+  }, [applicated, pageSize, currentPage, loading, hasMore]);
+
+  return {
+    pieces,
+    loading,
+    hasMore,
+    error,
+    loadMorePieces,
+    resetPieces,
+    totalElements,
+    currentPage
+  };
+};
+
+/**
+ * 작품 이미지 URL을 여러 가능한 필드에서 찾는 유틸리티 함수
+ * @param {Object} artwork - 작품 객체
+ * @returns {string|null} 이미지 URL 또는 null
+ */
+export const getImageUrl = (artwork) => {
+  if (!artwork) return null;
+  
+  // API에서 받아오는 imageUrl 필드를 우선적으로 확인
+  const imageUrl = artwork.imageUrl || 
+                  artwork.mainImageUrl || 
+                  artwork.thumbnailUrl || 
+                  artwork.image || 
+                  artwork.mainImage;
+  
+  return imageUrl;
+};
+
+/**
+ * 작품 상태에 따른 스타일 클래스명을 반환하는 유틸리티 함수
+ * @param {string} status - 작품 상태
+ * @returns {string} CSS 클래스명
+ */
+export const getStatusStyle = (status) => {
+  switch (status) {
+    case '전시 중':
+      return 'statusExhibiting';
+    case '미승인':
+      return 'statusRejected';
+    case '승인 대기':
+      return 'statusPending';
+    default:
+      return 'statusDefault';
+  }
+};
+
+/**
+ * 작품 제목을 안전하게 표시하는 유틸리티 함수
+ * @param {string} title - 작품 제목
+ * @param {string} fallback - 기본값
+ * @returns {string} 표시할 제목
+ */
+export const getArtworkTitle = (title, fallback = '제목 없음') => {
+  return title && title.trim() ? title.trim() : fallback;
+};
+
+/**
+ * 작품 설명을 안전하게 표시하는 유틸리티 함수
+ * @param {string} description - 작품 설명
+ * @param {string} fallback - 기본값
+ * @returns {string} 표시할 설명
+ */
+export const getArtworkDescription = (description, fallback = '설명 없음') => {
+  return description && description.trim() ? description.trim() : fallback;
+};
+
diff --git a/src/apis/exhibition/exhibition.js b/src/apis/museum/museum-exhibition.js
similarity index 83%
rename from src/apis/exhibition/exhibition.js
rename to src/apis/museum/museum-exhibition.js
index 5ca331a..0a77c7a 100644
--- a/src/apis/exhibition/exhibition.js
+++ b/src/apis/museum/museum-exhibition.js
@@ -1,6 +1,36 @@
 import { useState, useEffect, useCallback } from 'react';
 import APIService from '../axios';
 
+/**
+ * 전시 등록 API (multipart/form-data)
+ * @param {Object} exhibitionData - DTO 그대로 JSON으로 보낼 데이터 (Swagger의 request object와 동일)
+ * @param {File=} imageFile - 썸네일 파일(선택). 없으면 생략 가능
+ * @returns {Promise}
+ */
+export const createExhibition = async (exhibitionData, imageFile) => {
+  try {
+    const formData = new FormData();
+
+    // ✅ 서버가 기대하는 "request" 파트에 JSON 통째로 담기
+    formData.append(
+      "request",
+      new Blob([JSON.stringify(exhibitionData)], { type: "application/json" })
+    );
+
+    // ✅ 이미지 파일 파트명은 Swagger의 "image"와 동일해야 함
+    if (imageFile) {
+      formData.append("image", imageFile);
+    }
+
+    // axios는 boundary 자동 설정
+    const res = await APIService.private.post("/api/exhibitions", formData);
+    return res;
+  } catch (err) {
+    console.error("전시 등록 실패:", err);
+    throw err;
+  }
+};
+
 /**
  * 전시 상세 정보 조회 API
  * @param {number} exhibitionId - 전시 ID
@@ -90,6 +120,24 @@ export const getExhibitionReviewsPreview = async (exhibitionId) => {
   }
 };
 
+/**
+ * 내 전시 목록 조회 API
+ * @param {Object} params - 페이지네이션 파라미터
+ * @param {number} params.pageNum - 페이지 번호
+ * @param {number} params.pageSize - 페이지 크기
+ * @param {boolean} params.fillAll - 모든 정보 채우기 여부
+ * @returns {Promise} 내 전시 목록
+ */
+export const getMyExhibitions = async (params = { pageNum: 1, pageSize: 3, fillAll: true }) => {
+  try {
+    const response = await APIService.private.get('/api/exhibitions/my-page', { params });
+    return response;
+  } catch (error) {
+    console.error('내 전시 목록 조회 실패:', error);
+    throw error;
+  }
+};
+
 /**
  * 전시 상세 정보를 위한 커스텀 훅
  * @param {number} exhibitionId - 전시 ID
diff --git a/src/apis/user/user.js b/src/apis/user/user.js
new file mode 100644
index 0000000..b8e8bb5
--- /dev/null
+++ b/src/apis/user/user.js
@@ -0,0 +1,178 @@
+import { APIService } from '../axios.js';
+
+/**
+ * 현재 로그인한 사용자 정보 조회 API
+ * @returns {Promise} API 응답 데이터
+ */
+export const getCurrentUser = async () => {
+  try {
+    const response = await APIService.private.get('/api/users');
+    return response;
+  } catch (error) {
+    console.error('사용자 정보 조회 실패:', error);
+    throw error;
+  }
+};
+
+/**
+ * 특정 사용자 정보 조회 API
+ * @param {string} userId - 사용자 ID
+ * @returns {Promise} API 응답 데이터
+ */
+export const getUserById = async (userId) => {
+  try {
+    const response = await APIService.private.get(`/api/users/${userId}/creator`);
+    return response;
+  } catch (error) {
+    console.error('사용자 정보 조회 실패:', error);
+    throw error;
+  }
+};
+
+/**
+ * 사용자 프로필 수정 API
+ * @param {Object} userData - 수정할 사용자 데이터
+ * @param {string} userData.nickname - 닉네임
+ * @param {string} userData.introduction - 자기소개
+ * @param {string} userData.code - 코드
+ * @returns {Promise} API 응답 데이터
+ */
+export const updateUserProfile = async (userData) => {
+  try {
+    // FormData 객체 생성
+    const formData = new FormData();
+    
+    // request라는 이름으로 JSON 데이터를 추가
+    const requestData = {
+      nickname: userData.nickname,
+      code: userData.code,
+      introduction: userData.introduction
+    };
+    
+    formData.append('request', new Blob([JSON.stringify(requestData)], {
+      type: 'application/json'
+    }));
+    
+    const response = await APIService.private.put('/api/users', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    });
+    return response;
+  } catch (error) {
+    console.error('사용자 프로필 수정 실패:', error);
+    throw error;
+  }
+};
+
+/**
+ * 사용자 프로필 이미지 수정 API
+ * @param {File} profileImage - 프로필 이미지 파일
+ * @returns {Promise} API 응답 데이터
+ */
+export const updateUserProfileImage = async (profileImage) => {
+  try {
+    const formData = new FormData();
+    formData.append('profileImage', profileImage);  // profileImageUrl -> profileImage로 변경
+    
+    const response = await APIService.private.put('/api/users/profile-image', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    });
+    return response;
+  } catch (error) {
+    console.error('프로필 이미지 수정 실패:', error);
+    throw error;
+  }
+};
+
+/**
+ * 사용자 계정 삭제 API
+ * @returns {Promise} API 응답 데이터
+ */
+export const deleteUserAccount = async () => {
+  try {
+    const response = await APIService.private.delete('/api/users');
+    return response;
+  } catch (error) {
+    console.error('사용자 계정 삭제 실패:', error);
+    throw error;
+  }
+};
+
+/**
+ * 사용자 코드로 프로필 조회 API
+ * @param {string} userCode - 사용자 코드 (예: @username)
+ * @returns {Promise} API 응답 데이터
+ */
+export const getUserProfilesByCode = async (userCode) => {
+  try {
+    const response = await APIService.private.get(`/api/users/profile?code=${userCode}`);
+    return response;
+  } catch (error) {
+    console.error('사용자 프로필 조회 실패:', error);
+    throw error;
+  }
+};
+
+/**
+ * 연락 정보 등록 상태 조회 API
+ * @returns {Promise} API 응답 데이터
+ */
+export const getContactStatus = async () => {
+  try {
+    const response = await APIService.private.get('/api/users/contact/status');
+    return response;
+  } catch (error) {
+    console.error('연락 정보 상태 조회 실패:', error);
+    throw error;
+  }
+};
+
+/**
+ * 연락 정보 수정 API
+ * @param {Object} contactData - 수정할 연락 정보 데이터
+ * @param {string} contactData.email
+ * @param {string} contactData.instagram
+ * @returns {Promise} API 응답 데이터
+ */
+export const updateContact = async (contactData) => {
+  try {
+    const response = await APIService.private.put('/api/users/contact', contactData);
+    return response;
+  } catch (error) {
+    console.error('연락 정보 수정 실패:', error);
+    throw error;
+  }
+};
+
+/**
+ * 사용자 연락 정보 조회 API
+ * @param {string} userId - 사용자 ID
+ * @returns {Promise} API 응답 데이터
+ */
+export const getUserContact = async (userId) => {
+  try {
+    const response = await APIService.private.get(`/api/users/${userId}/contact`);
+    return response;
+  } catch (error) {
+    console.error('사용자 연락 정보 조회 실패:', error);
+    throw error;
+  }
+};
+
+/**
+ * 사용자 코드 중복 확인 API
+ * @param {string} code - 확인할 사용자 코드
+ * @returns {Promise} API 응답 데이터
+ */
+export const checkUserCode = async (code) => {
+  try {
+    const response = await APIService.private.get(`/api/users/check-code?code=${code}`);
+    return response;
+  } catch (error) {
+    console.error('사용자 코드 중복 확인 실패:', error);
+    throw error;
+  }
+};
\ No newline at end of file
diff --git a/src/components/CameraController.jsx b/src/components/CameraController.jsx
index f68c195..4d3a3b1 100644
--- a/src/components/CameraController.jsx
+++ b/src/components/CameraController.jsx
@@ -1,6 +1,6 @@
 import { useRef, useEffect } from "react";
 import { useFrame, useThree } from "@react-three/fiber";
-import { Vector3, Euler } from "three";
+import { Vector3, Euler, MathUtils } from "three";
 
 function CameraController({ isModalOpen }) {
   const { camera, gl } = useThree();
@@ -17,6 +17,22 @@ function CameraController({ isModalOpen }) {
     lastY: 0,
   });
 
+  // 터치 관련 상태 추가
+  const touchRef = useRef({
+    isTouching: false,
+    startX: 0,
+    startY: 0,
+    lastX: 0,
+    lastY: 0,
+    startTime: 0,
+    isMoving: false,
+    moveThreshold: 3, // 픽셀 단위 이동 임계값 (낮춰서 더 민감하게 반응)
+    // 핀치 줌을 위한 상태 추가
+    isPinching: false,
+    startDistance: 0,
+    lastDistance: 0,
+  });
+
   const cameraRotation = useRef({
     yaw: 0, // 좌우 회전만 사용
     pitch: 0, // 고정값으로 유지
@@ -29,8 +45,14 @@ function CameraController({ isModalOpen }) {
     zoomLevel: 1.0, // FOV 조정용 줌 레벨
   });
 
+  // 초기 위치와 회전값 저장
+  const initialPosition = new Vector3(0, 2, 0);
+  const initialRotation = { yaw: 0, pitch: 0 };
+  const initialZoom = 1.0;
+
   const moveSpeed = 0.1;
   const mouseSensitivity = 0.002;
+  const touchSensitivity = 0.015; // 터치 감도를 적당히 조정하여 적절한 회전 속도 제공
   const minZoom = 0.8; // 최대 확대 (FOV: 93.75도)
   const maxZoom = 1.3; // 최대 축소 (FOV: 57.7도)
   const fixedHeight = 2; // 고정된 카메라 높이
@@ -43,6 +65,41 @@ function CameraController({ isModalOpen }) {
     maxZ: 7, // 앞쪽 벽에서 1미터 떨어진 거리
   };
 
+  // 부드러운 회전을 위한 보간 변수 추가
+  const smoothRotation = useRef({
+    targetYaw: 0,
+    currentYaw: 0,
+    lerpFactor: 0.12, // 보간 계수 (적당히 조정하여 반응성과 부드러움의 균형)
+  });
+
+  // 초기 위치로 리셋하는 함수
+  const resetToInitialPosition = () => {
+    // 위치 리셋
+    cameraState.current.position.copy(initialPosition);
+    
+    // 회전 리셋
+    cameraRotation.current.yaw = initialRotation.yaw;
+    cameraRotation.current.pitch = initialRotation.pitch;
+    
+    // 줌 리셋
+    cameraState.current.zoomLevel = initialZoom;
+    camera.fov = cameraState.current.baseFOV / initialZoom;
+    camera.updateProjectionMatrix();
+    
+    // 부드러운 회전 값도 리셋
+    smoothRotation.current.targetYaw = initialRotation.yaw;
+    smoothRotation.current.currentYaw = initialRotation.yaw;
+  };
+
+  // 전역으로 리셋 함수 노출
+  useEffect(() => {
+    window.resetCameraToInitialPosition = resetToInitialPosition;
+    
+    return () => {
+      delete window.resetCameraToInitialPosition;
+    };
+  }, []);
+
   // 모달 상태에 따른 포인터 락 관리
   useEffect(() => {
     if (isModalOpen) {
@@ -51,6 +108,10 @@ function CameraController({ isModalOpen }) {
         document.exitPointerLock();
       }
     }
+    
+    // 초기화 시 smoothRotation 값 설정
+    smoothRotation.current.targetYaw = cameraRotation.current.yaw;
+    smoothRotation.current.currentYaw = cameraRotation.current.yaw;
   }, [isModalOpen]);
 
   useEffect(() => {
@@ -59,6 +120,11 @@ function CameraController({ isModalOpen }) {
       if (key in keysPressed.current) {
         keysPressed.current[key] = true;
       }
+      
+      // R키를 누르면 초기 위치로 리셋
+      if (key === 'r') {
+        resetToInitialPosition();
+      }
     };
 
     const handleKeyUp = (event) => {
@@ -93,9 +159,9 @@ function CameraController({ isModalOpen }) {
         const deltaX = event.movementX * mouseSensitivity;
         // deltaY는 사용하지 않음 (상하 시점 변경 비활성화)
 
-        cameraRotation.current.yaw -= deltaX;
-        // pitch는 고정값으로 유지 (0도)
-        cameraRotation.current.pitch = 0;
+        // 마우스로도 부드러운 회전 적용
+        const targetYaw = cameraRotation.current.yaw - deltaX;
+        smoothRotation.current.targetYaw = targetYaw;
       }
     };
 
@@ -114,6 +180,148 @@ function CameraController({ isModalOpen }) {
         document.pointerLockElement === gl.domElement;
     };
 
+    // 터치 이벤트 핸들러 추가
+    const handleTouchStart = (event) => {
+      if (isModalOpen) return;
+      
+      if (event.touches.length === 1) {
+        // 단일 터치
+        const touch = event.touches[0];
+        touchRef.current.isTouching = true;
+        touchRef.current.isPinching = false;
+        touchRef.current.startX = touch.clientX;
+        touchRef.current.startY = touch.clientY;
+        touchRef.current.lastX = touch.clientX;
+        touchRef.current.lastY = touch.clientY;
+        touchRef.current.startTime = Date.now();
+        touchRef.current.isMoving = false;
+      } else if (event.touches.length === 2) {
+        // 핀치 제스처 시작
+        touchRef.current.isPinching = true;
+        touchRef.current.isTouching = false;
+        const touch1 = event.touches[0];
+        const touch2 = event.touches[1];
+        const distance = Math.sqrt(
+          Math.pow(touch1.clientX - touch2.clientX, 2) +
+          Math.pow(touch1.clientY - touch2.clientY, 2)
+        );
+        touchRef.current.startDistance = distance;
+        touchRef.current.lastDistance = distance;
+      }
+      
+      event.preventDefault();
+    };
+
+    const handleTouchMove = (event) => {
+      if (isModalOpen) return;
+      
+      if (event.touches.length === 1 && touchRef.current.isTouching) {
+        // 단일 터치 드래그
+        const touch = event.touches[0];
+        const deltaX = touch.clientX - touchRef.current.lastX;
+        const deltaY = touch.clientY - touchRef.current.lastY;
+        
+        // 이동 거리 계산
+        const moveDistance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+        
+        if (moveDistance > touchRef.current.moveThreshold) {
+          touchRef.current.isMoving = true;
+          
+          // 터치 드래그로 카메라 회전 (부드럽게)
+          const targetYaw = cameraRotation.current.yaw + deltaX * touchSensitivity;
+          smoothRotation.current.targetYaw = targetYaw;
+          
+          // 터치 드래그로 줌 (수직 드래그) - 더 민감하게
+          if (Math.abs(deltaY) > 5) { // 수직 이동이 충분할 때만 줌 적용
+            const zoomSpeed = 0.005; // 줌 속도 조정
+            const zoomFactor = deltaY > 0 ? (1 - zoomSpeed * Math.abs(deltaY)) : (1 + zoomSpeed * Math.abs(deltaY));
+            const newZoomLevel = cameraState.current.zoomLevel * zoomFactor;
+            
+            if (newZoomLevel >= minZoom && newZoomLevel <= maxZoom) {
+              cameraState.current.zoomLevel = newZoomLevel;
+              camera.fov = cameraState.current.baseFOV / newZoomLevel;
+              camera.updateProjectionMatrix();
+            }
+          }
+        }
+        
+        touchRef.current.lastX = touch.clientX;
+        touchRef.current.lastY = touch.clientY;
+      } else if (event.touches.length === 2 && touchRef.current.isPinching) {
+        // 핀치 줌
+        const touch1 = event.touches[0];
+        const touch2 = event.touches[1];
+        const distance = Math.sqrt(
+          Math.pow(touch1.clientX - touch2.clientX, 2) +
+          Math.pow(touch1.clientY - touch2.clientY, 2)
+        );
+        
+        const deltaDistance = distance - touchRef.current.lastDistance;
+        if (Math.abs(deltaDistance) > 5) {
+          const pinchZoomSpeed = 0.01;
+          const zoomFactor = deltaDistance > 0 ? (1 + pinchZoomSpeed) : (1 - pinchZoomSpeed);
+          const newZoomLevel = cameraState.current.zoomLevel * zoomFactor;
+          
+          if (newZoomLevel >= minZoom && newZoomLevel <= maxZoom) {
+            cameraState.current.zoomLevel = newZoomLevel;
+            camera.fov = cameraState.current.baseFOV / newZoomLevel;
+            camera.updateProjectionMatrix();
+          }
+        }
+        
+        touchRef.current.lastDistance = distance;
+      }
+      
+      event.preventDefault();
+    };
+
+    const handleTouchEnd = (event) => {
+      if (isModalOpen) return;
+      
+      if (touchRef.current.isTouching) {
+        // 단일 터치 종료
+        const touchDuration = Date.now() - touchRef.current.startTime;
+        const moveDistance = Math.sqrt(
+          Math.pow(touchRef.current.lastX - touchRef.current.startX, 2) +
+          Math.pow(touchRef.current.lastY - touchRef.current.startY, 2)
+        );
+        
+        // 짧은 터치 + 적은 이동 = 클릭으로 인식하여 이동
+        if (touchDuration < 300 && moveDistance < 20 && !touchRef.current.isMoving) {
+          // 터치 위치에 따른 이동 방향 결정
+          const centerX = gl.domElement.clientWidth / 2;
+          const centerY = gl.domElement.clientHeight / 2;
+          const touchX = touchRef.current.startX;
+          const touchY = touchRef.current.startY;
+          
+          // 기본적으로 앞으로 이동 (W키)
+          keysPressed.current.w = true;
+          setTimeout(() => { keysPressed.current.w = false; }, 300);
+          
+          // 사이드 영역 터치 시 추가로 옆으로 이동
+          if (touchX < centerX - 80) {
+            // 왼쪽 영역 - A키 (왼쪽 이동)
+            keysPressed.current.a = true;
+            setTimeout(() => { keysPressed.current.a = false; }, 200);
+          } else if (touchX > centerX + 80) {
+            // 오른쪽 영역 - D키 (오른쪽 이동)
+            keysPressed.current.d = true;
+            setTimeout(() => { keysPressed.current.d = false; }, 200);
+          }
+        }
+        
+        touchRef.current.isTouching = false;
+        touchRef.current.isMoving = false;
+      }
+      
+      if (touchRef.current.isPinching) {
+        // 핀치 제스처 종료
+        touchRef.current.isPinching = false;
+      }
+      
+      event.preventDefault();
+    };
+
     // 이벤트 리스너 등록
     window.addEventListener("keydown", handleKeyDown);
     window.addEventListener("keyup", handleKeyUp);
@@ -121,6 +329,11 @@ function CameraController({ isModalOpen }) {
     gl.domElement.addEventListener("click", handleClick);
     gl.domElement.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("pointerlockchange", handlePointerLockChange);
+    
+    // 터치 이벤트 리스너 등록
+    gl.domElement.addEventListener("touchstart", handleTouchStart, { passive: false });
+    gl.domElement.addEventListener("touchmove", handleTouchMove, { passive: false });
+    gl.domElement.addEventListener("touchend", handleTouchEnd, { passive: false });
 
     // 정리 함수
     return () => {
@@ -129,10 +342,12 @@ function CameraController({ isModalOpen }) {
       gl.domElement.removeEventListener("wheel", handleWheel);
       gl.domElement.removeEventListener("click", handleClick);
       gl.domElement.removeEventListener("mousemove", handleMouseMove);
-      document.removeEventListener(
-        "pointerlockchange",
-        handlePointerLockChange
-      );
+      document.removeEventListener("pointerlockchange", handlePointerLockChange);
+      
+      // 터치 이벤트 리스너 제거
+      gl.domElement.removeEventListener("touchstart", handleTouchStart);
+      gl.domElement.removeEventListener("touchmove", handleTouchMove);
+      gl.domElement.removeEventListener("touchend", handleTouchEnd);
     };
   }, [
     camera,
@@ -140,6 +355,7 @@ function CameraController({ isModalOpen }) {
     minZoom,
     maxZoom,
     mouseSensitivity,
+    touchSensitivity,
     fixedHeight,
     isModalOpen,
   ]);
@@ -148,6 +364,17 @@ function CameraController({ isModalOpen }) {
     // 모달이 열려있으면 카메라 조작 중단
     if (isModalOpen) return;
 
+    // 부드러운 회전 적용
+    smoothRotation.current.currentYaw = MathUtils.lerp(
+      smoothRotation.current.currentYaw,
+      smoothRotation.current.targetYaw,
+      smoothRotation.current.lerpFactor
+    );
+    cameraRotation.current.yaw = smoothRotation.current.currentYaw;
+    
+    // pitch는 고정값으로 유지 (0도)
+    cameraRotation.current.pitch = 0;
+
     // 카메라 회전 적용 (Y축 회전만, pitch는 0으로 고정)
     camera.rotation.set(
       0, // pitch 고정 (상하 시점 변경 없음)
@@ -214,6 +441,7 @@ function CameraController({ isModalOpen }) {
     camera.position.copy(cameraState.current.position);
   });
 
+  // 초기 위치로 돌아가기 버튼 렌더링
   return null;
 }
 
diff --git a/src/components/ControlsGuideModal.jsx b/src/components/ControlsGuideModal.jsx
new file mode 100644
index 0000000..f718a78
--- /dev/null
+++ b/src/components/ControlsGuideModal.jsx
@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from 'react';
+
+function ControlsGuideModal() {
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    // 2초 후 자동으로 숨김
+    const timer = setTimeout(() => {
+      setIsVisible(false);
+    }, 2000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (!isVisible) return null;
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        zIndex: 2000,
+        background: 'rgba(0, 0, 0, 0.9)',
+        color: 'white',
+        padding: '30px',
+        borderRadius: '15px',
+        textAlign: 'center',
+        maxWidth: '400px',
+        fontFamily: 'Arial, sans-serif',
+        boxShadow: '0 10px 30px rgba(0, 0, 0, 0.5)',
+        animation: 'fadeIn 0.5s ease-in-out',
+      }}
+    >
+      <h2 style={{ margin: '0 0 20px 0', fontSize: '20px', color: '#ffd700' }}>
+        🎮 전시장 조작법
+      </h2>
+      
+      <div style={{ lineHeight: '1.6', fontSize: '14px' }}>
+        <div style={{ marginBottom: '15px' }}>
+          <strong>🖱️ 마우스:</strong> 드래그로 시점 회전
+        </div>
+        
+        <div style={{ marginBottom: '15px' }}>
+          <strong>⌨️ 키보드:</strong> WASD로 이동
+        </div>
+        
+        <div style={{ marginBottom: '15px' }}>
+          <strong>📱 터치:</strong> 슬라이드로 시점 회전, 핀치로 줌
+        </div>
+        
+        <div style={{ marginBottom: '15px' }}>
+          <strong>🖱️ 휠:</strong> 줌 인/아웃
+        </div>
+        
+        <div style={{ marginBottom: '15px' }}>
+          <strong>🏠 R키:</strong> 처음 위치로 돌아가기
+        </div>
+        
+        <div style={{ marginBottom: '15px' }}>
+          <strong>👆 클릭:</strong> 작품 정보 보기
+        </div>
+      </div>
+      
+      <div style={{ 
+        fontSize: '12px', 
+        color: '#ccc', 
+        marginTop: '20px',
+        padding: '10px',
+        background: 'rgba(255, 255, 255, 0.1)',
+        borderRadius: '8px'
+      }}>
+        ⏱️ 2초 후 자동으로 사라집니다
+      </div>
+    </div>
+  );
+}
+
+export default ControlsGuideModal;
diff --git a/src/components/ControlsInfoModal.jsx b/src/components/ControlsInfoModal.jsx
new file mode 100644
index 0000000..5221230
--- /dev/null
+++ b/src/components/ControlsInfoModal.jsx
@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from 'react';
+
+function ControlsInfoModal() {
+  const [isVisible, setIsVisible] = useState(true);
+
+  useEffect(() => {
+    // 3초 후 자동으로 숨김
+    const timer = setTimeout(() => {
+      setIsVisible(false);
+    }, 3000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (!isVisible) return null;
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        zIndex: 1500,
+        background: 'rgba(0, 0, 0, 0.8)',
+        color: 'white',
+        padding: '25px',
+        borderRadius: '12px',
+        textAlign: 'left',
+        maxWidth: '350px',
+        fontFamily: 'Arial, sans-serif',
+        boxShadow: '0 8px 25px rgba(0, 0, 0, 0.6)',
+        animation: 'slideInUp 0.6s ease-out',
+        backdropFilter: 'blur(10px)',
+      }}
+    >
+      <h3 style={{ 
+        margin: '0 0 20px 0', 
+        fontSize: '18px', 
+        color: '#ffd700',
+        fontWeight: '600',
+        textAlign: 'center'
+      }}>
+        🎮 조작법
+      </h3>
+      
+      <div style={{ 
+        lineHeight: '1.5', 
+        fontSize: '14px',
+        marginBottom: '20px'
+      }}>
+        <div style={{ marginBottom: '12px' }}>
+          <strong>📱 터치:</strong> 앞으로 이동
+        </div>
+        
+        <div style={{ marginBottom: '12px' }}>
+          <strong>↔️ 슬라이드:</strong> 화면 회전
+        </div>
+        
+        <div style={{ marginBottom: '12px' }}>
+          <strong>👆 핀치:</strong> 확대 / 축소
+        </div>
+      </div>
+      
+      <div style={{ 
+        fontSize: '11px', 
+        color: '#aaa', 
+        padding: '8px',
+        background: 'rgba(255, 255, 255, 0.1)',
+        borderRadius: '6px',
+        border: '1px solid rgba(255, 255, 255, 0.2)',
+        textAlign: 'center'
+      }}>
+        ⏱️ 3초 후 자동으로<br/>사라집니다
+      </div>
+    </div>
+  );
+}
+
+export default ControlsInfoModal;
diff --git a/src/components/Gallery3D.css b/src/components/Gallery3D.css
index 9d52c2f..f8e162d 100644
--- a/src/components/Gallery3D.css
+++ b/src/components/Gallery3D.css
@@ -20,20 +20,23 @@
   z-index: 10;
   color: white;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
+  max-width: calc(100vw - 200px); /* 오른쪽 버튼 공간 확보 */
 }
 
 .gallery-header h1 {
-  font-size: 2.5rem;
+  font-size: 2rem; /* 크기 줄임 */
   margin: 0;
   font-weight: 700;
   letter-spacing: -0.02em;
+  line-height: 1.2;
 }
 
 .gallery-header p {
-  font-size: 1.1rem;
+  font-size: 1rem; /* 크기 줄임 */
   margin: 5px 0 0 0;
   opacity: 0.9;
   font-weight: 300;
+  line-height: 1.3;
 }
 
 .canvas-container {
@@ -80,6 +83,63 @@
   }
 }
 
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -50%) scale(0.9);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%) scale(1);
+  }
+}
+
+@keyframes slideInUp {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -30%);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%);
+  }
+}
+
+/* 반응형 디자인 */
+@media (max-width: 768px) {
+  .gallery-header {
+    margin-top: 10px;
+    max-width: calc(100vw - 180px);
+    top: 15px;
+    left: 15px;
+  }
+
+  .gallery-header h1 {
+    font-size: 1.6rem;
+  }
+
+  .gallery-header p {
+    font-size: 0.9rem;
+  }
+}
+
+@media (max-width: 480px) {
+  .gallery-header {
+    margin-top: 10px;
+    max-width: calc(100vw - 160px);
+    top: 10px;
+    left: 10px;
+  }
+
+  .gallery-header h1 {
+    font-size: 1.3rem;
+  }
+
+  .gallery-header p {
+    font-size: 0.8rem;
+  }
+}
+
 .gallery-footer {
   position: absolute;
   bottom: 20px;
@@ -244,15 +304,6 @@
   margin-top: auto;
 }
 
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-
 @keyframes modalSlideIn {
   from {
     opacity: 0;
@@ -263,81 +314,3 @@
     transform: scale(1) translateY(0);
   }
 }
-
-/* 반응형 디자인 */
-@media (max-width: 768px) {
-  .gallery-header h1 {
-    font-size: 1.8rem;
-  }
-
-  .gallery-header p {
-    font-size: 1rem;
-  }
-
-  .controls-info {
-    padding: 8px 16px;
-    font-size: 0.8rem;
-  }
-
-  .artwork-modal {
-    width: 95vw;
-    max-height: 90vh;
-  }
-
-  .artwork-modal-content {
-    flex-direction: column;
-  }
-
-  .artwork-image {
-    max-width: none;
-    max-height: 250px;
-  }
-
-  .artwork-info {
-    padding: 20px;
-  }
-
-  .artwork-modal-header {
-    padding: 15px 20px;
-  }
-
-  .artwork-modal-header h2 {
-    font-size: 1.3rem;
-  }
-}
-
-@media (max-width: 480px) {
-  .gallery-header {
-    top: 10px;
-    left: 10px;
-  }
-
-  .gallery-header h1 {
-    font-size: 1.5rem;
-  }
-
-  .gallery-header p {
-    font-size: 0.9rem;
-  }
-
-  .gallery-footer {
-    bottom: 10px;
-  }
-
-  .controls-info {
-    padding: 6px 12px;
-    font-size: 0.7rem;
-  }
-
-  .artwork-modal-header h2 {
-    font-size: 1.2rem;
-  }
-
-  .artwork-info {
-    padding: 15px;
-  }
-
-  .artist-info h3 {
-    font-size: 1.1rem;
-  }
-}
diff --git a/src/components/Gallery3D.jsx b/src/components/Gallery3D.jsx
index 4f56aaf..1ae6c53 100644
--- a/src/components/Gallery3D.jsx
+++ b/src/components/Gallery3D.jsx
@@ -3,6 +3,8 @@ import { Environment } from "@react-three/drei";
 import { Suspense, useState } from "react";
 import Exhibition from "./Exhibition";
 import CameraController from "./CameraController";
+import ResetCameraButton from "./ResetCameraButton";
+import ControlsInfoModal from "./ControlsInfoModal";
 import "./Gallery3D.css";
 
 function LoadingFallback() {
@@ -32,6 +34,12 @@ function Gallery3D() {
         <p>현대 미술의 새로운 시선</p>
       </div>
 
+      {/* 초기 위치로 돌아가기 버튼 */}
+      <ResetCameraButton />
+
+      {/* 조작법 정보 모달 */}
+      <ControlsInfoModal />
+
       <div className="canvas-container">
         <Suspense fallback={<LoadingFallback />}>
           <Canvas
@@ -95,14 +103,6 @@ function Gallery3D() {
         </div>
       )}
 
-      <div className="gallery-footer">
-        <div className="controls-info">
-          <p>
-            🖱️ 클릭해서 시점 조작 활성화 | ⌨️ WASD로 이동 | 🔍 휠로 확대/축소 |
-            ✋ 작품 클릭으로 정보 보기
-          </p>
-        </div>
-      </div>
     </div>
   );
 }
diff --git a/src/components/ResetCameraButton.jsx b/src/components/ResetCameraButton.jsx
new file mode 100644
index 0000000..2ce49ad
--- /dev/null
+++ b/src/components/ResetCameraButton.jsx
@@ -0,0 +1,41 @@
+import React from 'react';
+
+function ResetCameraButton() {
+  const handleReset = () => {
+    if (window.resetCameraToInitialPosition) {
+      window.resetCameraToInitialPosition();
+    }
+  };
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        top: '20px',
+        right: '20px',
+        zIndex: 1000,
+        background: 'rgba(0, 0, 0, 0.7)',
+        color: 'white',
+        padding: '10px 15px',
+        borderRadius: '8px',
+        cursor: 'pointer',
+        fontSize: '14px',
+        fontFamily: 'Arial, sans-serif',
+        userSelect: 'none',
+        transition: 'background 0.2s ease',
+      }}
+      onMouseEnter={(e) => {
+        e.target.style.background = 'rgba(0, 0, 0, 0.9)';
+      }}
+      onMouseLeave={(e) => {
+        e.target.style.background = 'rgba(0, 0, 0, 0.7)';
+      }}
+      onClick={handleReset}
+      title="R키를 눌러도 초기 위치로 돌아갑니다"
+    >
+      🏠 처음위치로
+    </div>
+  );
+}
+
+export default ResetCameraButton;
diff --git a/src/components/museum/components/artwork/ArtworkCard.jsx b/src/components/museum/components/artwork/ArtworkCard.jsx
index 2ccf324..d7b9133 100644
--- a/src/components/museum/components/artwork/ArtworkCard.jsx
+++ b/src/components/museum/components/artwork/ArtworkCard.jsx
@@ -1,3 +1,5 @@
+import { useState } from 'react';
+import { getImageUrl, getStatusStyle } from '@apis/museum/artwork';
 import styles from './artworkCard.module.css';
 import checkIcon from '@/assets/museum/check.png';
 
@@ -14,11 +16,24 @@ export default function ArtworkCard({
   onSelect,
   checkboxSize = 'normal' // 'normal' (24x24) 또는 'large' (36x36)
 }) {
+  const [imageError, setImageError] = useState(false);
+
+  const imageUrl = getImageUrl(artwork);
+
+  const handleImageError = () => {
+    setImageError(true);
+  };
+
   const handleClick = () => {
+    if (onClick) {
+      onClick(artwork);
+    }
+  };
+
+  const handleCheckboxClick = (e) => {
+    e.stopPropagation();
     if (isEditMode && onSelect) {
       onSelect(artwork);
-    } else if (!isEditMode && onClick) {
-      onClick(artwork);
     }
   };
 
@@ -29,35 +44,31 @@ export default function ArtworkCard({
     }
   };
 
-  const getStatusStyle = (status) => {
-    switch (status) {
-      case '전시 중':
-        return styles.statusExhibiting;
-      case '미승인':
-        return styles.statusRejected;
-      case '승인 대기':
-        return styles.statusPending;
-      default:
-        return styles.statusDefault;
-    }
-  };
-
   if (layoutMode === 'grid') {
     return (
       <div className={styles.gridCard} onClick={handleClick}>
         <div 
           className={styles.gridImage}
           style={{
-            backgroundImage: artwork.image ? `url(${artwork.image})` : 'none'
+            backgroundImage: imageUrl && !imageError ? `url(${imageUrl})` : 'none'
           }}
         >
-          {showStatus && artwork.status && (
-            <div className={`${styles.statusBadge} ${getStatusStyle(artwork.status)}`}>
-              {artwork.status}
+          {!imageUrl || imageError ? (
+            <div className={styles.noImagePlaceholder}>
+              <span>이미지 없음</span>
+            </div>
+          ) : null}
+          
+          {showStatus && artwork.progressStatus === 'ON_DISPLAY' && (
+            <div className={`${styles.statusBadge} ${styles.statusExhibiting}`}>
+              전시 중
             </div>
           )}
           {isEditMode && (
-            <div className={`${styles.checkbox} ${isSelected ? styles.checkboxSelected : ''} ${checkboxSize === 'large' ? styles.checkboxLarge : ''}`}>
+            <div 
+              className={`${styles.checkbox} ${isSelected ? styles.checkboxSelected : ''} ${checkboxSize === 'large' ? styles.checkboxLarge : ''}`}
+              onClick={handleCheckboxClick}
+            >
               {isSelected && (
                 <img src={checkIcon} alt="선택됨" className={`${styles.checkIcon} ${checkboxSize === 'large' ? styles.checkIconLarge : ''}`} />
               )}
@@ -75,16 +86,25 @@ export default function ArtworkCard({
           <div 
             className={styles.verticalImage}
             style={{
-              backgroundImage: artwork.image ? `url(${artwork.image})` : 'none'
+              backgroundImage: imageUrl && !imageError ? `url(${imageUrl})` : 'none'
             }}
           >
-            {showStatus && artwork.status && (
-              <div className={`${styles.statusBadge} ${getStatusStyle(artwork.status)}`}>
-                {artwork.status}
+            {!imageUrl || imageError ? (
+              <div className={styles.noImagePlaceholder}>
+                <span>이미지 없음</span>
+              </div>
+            ) : null}
+            
+            {showStatus && artwork.progressStatus === 'ON_DISPLAY' && (
+              <div className={`${styles.statusBadge} ${styles.statusExhibiting}`}>
+                전시 중
               </div>
             )}
             {isEditMode && (
-              <div className={`${styles.checkbox} ${isSelected ? styles.checkboxSelected : ''} ${checkboxSize === 'large' ? styles.checkboxLarge : ''}`}>
+              <div 
+                className={`${styles.checkbox} ${isSelected ? styles.checkboxSelected : ''} ${checkboxSize === 'large' ? styles.checkboxLarge : ''}`}
+                onClick={handleCheckboxClick}
+              >
                 {isSelected && (
                   <img src={checkIcon} alt="선택됨" className={`${styles.checkIcon} ${checkboxSize === 'large' ? styles.checkIconLarge : ''}`} />
                 )}
diff --git a/src/components/museum/components/artwork/ArtworkList.jsx b/src/components/museum/components/artwork/ArtworkList.jsx
index 260d6d1..440b74f 100644
--- a/src/components/museum/components/artwork/ArtworkList.jsx
+++ b/src/components/museum/components/artwork/ArtworkList.jsx
@@ -1,7 +1,8 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
 import ArtworkCard from './ArtworkCard';
 import ArtworkFilter from './ArtworkFilter';
-import useArtworkStore from '@museum/services/artworkStore';
+import { deletePieces, getArtworkTitle, getArtworkDescription } from '@apis/museum/artwork';
+import useUserStore from '@/stores/userStore';
 import BackToTopButton from '@/components/common/BackToTopButton';
 import chevronLeft from '@/assets/museum/chevron-left.png';
 import arrowDown from '@/assets/museum/arrow-down.svg';
@@ -17,31 +18,32 @@ export default function ArtworkList({
   showDraftButton = false,
   onDraftClick,
   isLibraryMode = false,
-  libraryTitle = "작품 목록"
+  libraryTitle = "작품 목록",
+  title, // 커스텀 제목 prop 추가
+  artworks = [],
+  loading = false,
+  hasMore = false,
+  onLoadMore,
+  onArtworkDeleted // 새로운 prop 추가
 }) {
-  // Zustand 스토어에서 상태 가져오기
-  const {
-    artworks,
-    layoutMode,
-    searchKeyword,
-    isLoadingMore,
-    setLayoutMode,
-    setSearchKeyword,
-    loadMoreArtworks,
-    hasMore,
-    getFilteredArtworks,
-    deleteArtwork
-  } = useArtworkStore();
-
+  // 로컬 상태로 관리
+  const [layoutMode, setLayoutMode] = useState('grid');
+  const [searchKeyword, setSearchKeyword] = useState('');
   const [isEditMode, setIsEditMode] = useState(false);
   const [showScrollHeader, setShowScrollHeader] = useState(false);
   const [selectedArtworks, setSelectedArtworks] = useState(new Set());
+  const [isDeleting, setIsDeleting] = useState(false);
+  
   const observerRef = useRef();
   const loadingRef = useRef();
   const headerRef = useRef();
 
-  // 필터된 작품 목록
-  const filteredArtworks = getFilteredArtworks();
+  // 검색어로 필터링된 작품 목록
+  const filteredArtworks = artworks.filter(artwork => 
+    !searchKeyword || 
+    artwork.title?.toLowerCase().includes(searchKeyword.toLowerCase()) ||
+    artwork.description?.toLowerCase().includes(searchKeyword.toLowerCase())
+  );
 
   // 스크롤 감지 로직
   useEffect(() => {
@@ -58,17 +60,17 @@ export default function ArtworkList({
 
   // 무한 스크롤 구현
   const lastArtworkElementRef = useCallback((node) => {
-    if (isLoadingMore) return;
+    if (loading || !hasMore) return;
     if (observerRef.current) observerRef.current.disconnect();
     
     observerRef.current = new IntersectionObserver(entries => {
-      if (entries[0].isIntersecting && hasMore()) {
-        loadMoreArtworks();
+      if (entries[0].isIntersecting && hasMore && onLoadMore) {
+        onLoadMore();
       }
     });
     
     if (node) observerRef.current.observe(node);
-  }, [isLoadingMore, hasMore, loadMoreArtworks]);
+  }, [loading, hasMore, onLoadMore]);
 
   const handleEditModeToggle = () => {
     setIsEditMode(!isEditMode);
@@ -93,36 +95,70 @@ export default function ArtworkList({
   };
 
   const handleArtworkSelection = (artwork) => {
+    console.log('작품 선택 시도:', artwork.pieceId, artwork.title);
+    console.log('현재 선택된 작품들:', Array.from(selectedArtworks));
+    
     const newSelected = new Set(selectedArtworks);
-    if (newSelected.has(artwork.id)) {
-      newSelected.delete(artwork.id);
+    if (newSelected.has(artwork.pieceId)) {
+      newSelected.delete(artwork.pieceId);
+      console.log('작품 선택 해제:', artwork.pieceId);
     } else {
-      newSelected.add(artwork.id);
+      newSelected.add(artwork.pieceId);
+      console.log('작품 선택 추가:', artwork.pieceId);
     }
+    
+    console.log('새로운 선택된 작품들:', Array.from(newSelected));
     setSelectedArtworks(newSelected);
   };
 
-  const handleDeleteSelected = () => {
-    if (selectedArtworks.size === 0) return;
+  const handleDeleteSelected = async () => {
+    if (selectedArtworks.size === 0 || isDeleting) return;
     
     const count = selectedArtworks.size;
     if (confirm(`선택한 ${count}개 작품을 정말 삭제하시겠습니까?`)) {
-      // 선택된 작품들을 실제로 삭제
-      Array.from(selectedArtworks).forEach(artworkId => {
-        deleteArtwork(artworkId);
-      });
+      setIsDeleting(true);
       
-      console.log('선택된 작품들 삭제 완료:', Array.from(selectedArtworks));
-      setSelectedArtworks(new Set());
+      try {
+        // 선택된 작품들을 한 번에 삭제
+        const pieceIds = Array.from(selectedArtworks);
+        const response = await deletePieces(pieceIds);
+        
+        if (response?.status === 200) {
+          console.log('선택된 작품들 삭제 완료:', pieceIds);
+          // 부모 컴포넌트에 삭제 완료 알림
+          if (onArtworkDeleted) {
+            onArtworkDeleted(pieceIds);
+          }
+        } else {
+          console.warn('작품들 삭제에 실패했습니다.');
+        }
+        
+        setSelectedArtworks(new Set());
+      } catch (error) {
+        console.error('작품 삭제 중 오류 발생:', error);
+      } finally {
+        setIsDeleting(false);
+      }
     }
   };
 
-  const handleDeleteArtwork = (artwork) => {
-    if (confirm(`"${artwork.title}" 작품을 정말 삭제하시겠습니까?`)) {
-      // 여기서 실제 삭제 로직을 구현할 수 있습니다.
-      console.log('작품 삭제:', artwork);
-      // 예시: artworkStore에 deleteArtwork 함수가 있다면
-      deleteArtwork(artwork.id);
+  const handleDeleteArtwork = async (artwork) => {
+    const safeTitle = getArtworkTitle(artwork.title, '이 작품');
+    if (confirm(`"${safeTitle}" 작품을 정말 삭제하시겠습니까?`)) {
+      try {
+        const response = await deletePieces([artwork.pieceId]);
+        if (response?.status === 200 || response?.status === 204) {
+          console.log('작품 삭제 완료:', artwork);
+          // 부모 컴포넌트에 삭제 완료 알림
+          if (onArtworkDeleted) {
+            onArtworkDeleted([artwork.pieceId]);
+          }
+        } else {
+          console.error('작품 삭제 실패:', artwork);
+        }
+      } catch (error) {
+        console.error('작품 삭제 중 오류 발생:', error);
+      }
     }
   };
 
@@ -180,7 +216,7 @@ export default function ArtworkList({
               <img src={chevronLeft} alt="back" className={styles.backIcon} />
             </button>
           )}
-          <h1 className={styles.title}>{isLibraryMode ? libraryTitle : '내 작품'}</h1>
+          <h1 className={styles.title}>{title || (isLibraryMode ? libraryTitle : '내 작품')}</h1>
         </div>
         <div className={styles.headerRight}>
           {showDraftButton && (
@@ -209,7 +245,7 @@ export default function ArtworkList({
                 <img src={arrowDown} alt="back" className={styles.scrollBackIcon} />
               </button>
             )}
-            <h1 className={styles.scrollTitle}>{isLibraryMode ? libraryTitle : '내 작품'}</h1>
+            <h1 className={styles.scrollTitle}>{title || (isLibraryMode ? libraryTitle : '내 작품')}</h1>
           </div>
         </div>
       )}
@@ -242,7 +278,7 @@ export default function ArtworkList({
             const isLast = index === filteredArtworks.length - 1;
             return (
               <div
-                key={artwork.id}
+                key={artwork.pieceId}
                 ref={isLast ? lastArtworkElementRef : null}
               >
                 <ArtworkCard
@@ -254,7 +290,7 @@ export default function ArtworkList({
                   showDescription={true}
                   isEditMode={isEditMode}
                   onDelete={handleDeleteArtwork}
-                  isSelected={selectedArtworks.has(artwork.id)}
+                  isSelected={selectedArtworks.has(artwork.pieceId)}
                   onSelect={handleArtworkSelection}
                 />
               </div>
@@ -264,7 +300,7 @@ export default function ArtworkList({
       )}
 
       {/* 더 로딩 중 표시 */}
-      {isLoadingMore && (
+      {loading && (
         <div className={styles.loadingMore}>
           <div className={styles.spinner}></div>
           <p>더 많은 작품을 불러오는 중...</p>
@@ -278,9 +314,9 @@ export default function ArtworkList({
             <button 
               className={`${styles.addButton} ${selectedArtworks.size === 0 ? styles.disabledButton : ''}`}
               onClick={handleDeleteSelected}
-              disabled={selectedArtworks.size === 0}
+              disabled={selectedArtworks.size === 0 || isDeleting}
             >
-              {selectedArtworks.size > 0 ? `${selectedArtworks.size}개 삭제하기` : '삭제하기'}
+              {isDeleting ? '삭제 중...' : selectedArtworks.size > 0 ? `${selectedArtworks.size}개 삭제하기` : '삭제하기'}
             </button>
           ) : (
             <button className={styles.addButton} onClick={handleAddClick}>
diff --git a/src/components/museum/components/artwork/DraftArtworkList.jsx b/src/components/museum/components/artwork/DraftArtworkList.jsx
index 9123387..c6a1d17 100644
--- a/src/components/museum/components/artwork/DraftArtworkList.jsx
+++ b/src/components/museum/components/artwork/DraftArtworkList.jsx
@@ -1,7 +1,6 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
 import ArtworkCard from './ArtworkCard';
 import ArtworkFilter from './ArtworkFilter';
-import useArtworkDraftStore from '@museum/services/artworkDraftStore';
 import BackToTopButton from '@/components/common/BackToTopButton';
 import chevronLeft from '@/assets/museum/chevron-left.png';
 import arrowDown from '@/assets/museum/arrow-down.svg';
@@ -15,21 +14,56 @@ export default function DraftArtworkList({
   onBack,
   onArtworkClick
 }) {
-  // Zustand 스토어에서 임시저장 데이터 가져오기
-  const {
-    drafts,
-    deleteDraft
-  } = useArtworkDraftStore();
-
+  // 로컬 상태로 draft 관리
+  const [drafts, setDrafts] = useState([]);
   const [isEditMode, setIsEditMode] = useState(false);
   const [showScrollHeader, setShowScrollHeader] = useState(false);
   const [selectedDrafts, setSelectedDrafts] = useState(new Set());
   const [layoutMode, setLayoutMode] = useState('vertical');
   const [searchKeyword, setSearchKeyword] = useState('');
+  
   const observerRef = useRef();
   const loadingRef = useRef();
   const headerRef = useRef();
 
+  // localStorage에서 draft 데이터 로드
+  useEffect(() => {
+    const loadDrafts = () => {
+      try {
+        const savedDraft = localStorage.getItem('artworkDraft');
+        if (savedDraft) {
+          const draftData = JSON.parse(savedDraft);
+          // draft 데이터를 배열 형태로 변환
+          setDrafts([{
+            id: 'draft-1',
+            title: draftData.title || '제목 없음',
+            description: draftData.description || '설명 없음',
+            image: draftData.mainImage ? URL.createObjectURL(draftData.mainImage) : null,
+            status: "임시저장",
+            createdAt: new Date().toLocaleDateString('ko-KR'),
+            isExhibiting: false
+          }]);
+        } else {
+          setDrafts([]);
+        }
+      } catch (error) {
+        console.error('Draft 로드 실패:', error);
+        setDrafts([]);
+      }
+    };
+
+    loadDrafts();
+  }, []);
+
+  // draft 삭제 함수
+  const deleteDraft = (draftId) => {
+    if (draftId === 'draft-1') {
+      // localStorage에서 draft 제거
+      localStorage.removeItem('artworkDraft');
+      setDrafts([]);
+    }
+  };
+
   // 임시저장 데이터를 ArtworkCard에서 사용할 수 있는 형태로 변환
   const convertedDrafts = drafts.map(draft => ({
     id: draft.id,
diff --git a/src/components/museum/components/artwork/artworkCard.module.css b/src/components/museum/components/artwork/artworkCard.module.css
index d63a818..e9cf68a 100644
--- a/src/components/museum/components/artwork/artworkCard.module.css
+++ b/src/components/museum/components/artwork/artworkCard.module.css
@@ -72,6 +72,11 @@
   right: 12px;
 }
 
+.gridImage .statusBadge {
+  top: 8px;
+  right: 8px;
+}
+
 .dateDisplay {
   writing-mode: vertical-rl;
   text-orientation: mixed;
@@ -218,4 +223,23 @@
   cursor: not-allowed;
 }
 
+.noImagePlaceholder {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  background-color: #f0f0f0;
+  color: #999;
+  font-family: 'Pretendard', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  text-align: center;
+  border: 1px solid #ddd;
+}
+
 
diff --git a/src/components/museum/components/exhibition/ExhibitionArtworkModal.jsx b/src/components/museum/components/exhibition/ExhibitionArtworkModal.jsx
index 4185d56..d67cac7 100644
--- a/src/components/museum/components/exhibition/ExhibitionArtworkModal.jsx
+++ b/src/components/museum/components/exhibition/ExhibitionArtworkModal.jsx
@@ -1,13 +1,16 @@
+import { useNavigate } from 'react-router-dom';
 import styles from './exhibitionArtworkModal.module.css';
 
 export default function ExhibitionArtworkModal({ 
   isOpen, 
   onClose, 
-  onNewArtwork, 
-  onLoadFromLibrary,
   isThumbnail = false,
-  isChangeMode = false
+  isChangeMode = false,
+  currentDraft = null,
+  returnTo = 'exhibition-upload'
 }) {
+  const navigate = useNavigate();
+
   if (!isOpen) return null;
 
   const handleOverlayClick = (e) => {
@@ -17,25 +20,30 @@ export default function ExhibitionArtworkModal({
   };
 
   const handleNewArtwork = () => {
-    // 숨겨진 파일 입력 요소 클릭
-    const fileInput = document.getElementById('artworkFileInput');
-    if (fileInput) {
-      fileInput.click();
-    }
-  };
-
-  const handleFileChange = (e) => {
-    const file = e.target.files[0];
-    if (file && onNewArtwork) {
-      onNewArtwork(file);
-    }
+    // 새 작품 등록 페이지로 이동하면서 draft 데이터 전달
+    navigate('/artwork/upload', {
+      state: {
+        fromExhibition: true,
+        isThumbnail,
+        isChangeMode,
+        returnTo,
+        draft: currentDraft
+      }
+    });
     onClose();
   };
 
   const handleLoadFromLibrary = () => {
-    if (onLoadFromLibrary) {
-      onLoadFromLibrary();
-    }
+    // 작품 라이브러리 페이지로 이동하면서 draft 데이터 전달
+    navigate('/artwork/library', {
+      state: {
+        fromExhibition: true,
+        isThumbnail,
+        isChangeMode,
+        returnTo,
+        draft: currentDraft
+      }
+    });
     onClose();
   };
 
@@ -103,15 +111,6 @@ export default function ExhibitionArtworkModal({
           </div>
         </div>
       </div>
-      
-      {/* 숨겨진 파일 입력 요소 */}
-      <input
-        type="file"
-        id="artworkFileInput"
-        accept="image/*"
-        onChange={handleFileChange}
-        style={{ display: 'none' }}
-      />
     </div>
   );
 }
diff --git a/src/components/museum/components/exhibition/ExhibitionCard.jsx b/src/components/museum/components/exhibition/ExhibitionCard.jsx
index 48ee8f1..31a967a 100644
--- a/src/components/museum/components/exhibition/ExhibitionCard.jsx
+++ b/src/components/museum/components/exhibition/ExhibitionCard.jsx
@@ -47,12 +47,12 @@ export default function ExhibitionCard({
         <div 
           className={styles.gridImage}
           style={{
-            backgroundImage: exhibition.thumbnail ? `url(${exhibition.thumbnail})` : 'none'
+            backgroundImage: exhibition.thumbnailImageUrl ? `url(${exhibition.thumbnailImageUrl})` : 'none'
           }}
         >
-          {showStatus && exhibition.status && (
-            <div className={`${styles.statusBadge} ${getStatusStyle(exhibition.status)}`}>
-              {exhibition.status}
+          {showStatus && exhibition.status === 'ONGOING' && (
+            <div className={`${styles.statusBadge} ${styles.statusExhibiting}`}>
+              전시 중
             </div>
           )}
           {isEditMode && (
@@ -74,12 +74,12 @@ export default function ExhibitionCard({
           <div 
             className={styles.verticalImage}
             style={{
-              backgroundImage: exhibition.thumbnail ? `url(${exhibition.thumbnail})` : 'none'
+              backgroundImage: exhibition.thumbnailImageUrl ? `url(${exhibition.thumbnailImageUrl})` : 'none'
             }}
           >
-            {showStatus && exhibition.status && (
-              <div className={`${styles.statusBadge} ${getStatusStyle(exhibition.status)}`}>
-                {exhibition.status}
+            {showStatus && exhibition.status === 'ONGOING' && (
+              <div className={`${styles.statusBadge} ${styles.statusExhibiting}`}>
+                전시 중
               </div>
             )}
             {isEditMode && (
@@ -90,17 +90,16 @@ export default function ExhibitionCard({
               </div>
             )}
           </div>
-          
-          {showDate && exhibition.createdAt && (
-            <div className={styles.dateDisplay}>
-              {exhibition.createdAt}
-            </div>
-          )}
         </div>
         
         {showDescription && (
           <div className={styles.exhibitionInfo}>
             <h3 className={styles.exhibitionTitle}>{exhibition.title}</h3>
+            {showDate && exhibition.startDate && exhibition.endDate && (
+              <p className={styles.exhibitionDate}>
+                {`${exhibition.startDate.slice(2, 4)}.${exhibition.startDate.slice(5, 7)}.${exhibition.startDate.slice(8, 10)} - ${exhibition.endDate.slice(2, 4)}.${exhibition.endDate.slice(5, 7)}.${exhibition.endDate.slice(8, 10)}`}
+              </p>
+            )}
             <p className={styles.exhibitionDescription}>{exhibition.description}</p>
           </div>
         )}
diff --git a/src/components/museum/components/exhibition/ExhibitionDatePicker.jsx b/src/components/museum/components/exhibition/ExhibitionDatePicker.jsx
index f4d4a7c..a8f57c6 100644
--- a/src/components/museum/components/exhibition/ExhibitionDatePicker.jsx
+++ b/src/components/museum/components/exhibition/ExhibitionDatePicker.jsx
@@ -7,12 +7,17 @@ import styles from './exhibitionDatePicker.module.css';
 export default function ExhibitionDatePicker() {
   const navigate = useNavigate();
   const location = useLocation();
+
+  // 업로드 페이지에서 넘어온 draft/initialDates/returnTo
+  const draft = location.state?.draft;
+  const returnTo = location.state?.returnTo || -1;
+
   const [currentDate, setCurrentDate] = useState(new Date());
   const [selectedStartDate, setSelectedStartDate] = useState(null);
   const [selectedEndDate, setSelectedEndDate] = useState(null);
   const [isSelectingEndDate, setIsSelectingEndDate] = useState(false);
 
-  // URL 파라미터나 state에서 초기 날짜 가져오기
+  // URL state에서 초기 날짜 가져오기
   useEffect(() => {
     if (location.state?.initialDates) {
       const { startDate, endDate } = location.state.initialDates;
@@ -21,22 +26,15 @@ export default function ExhibitionDatePicker() {
     }
   }, [location.state]);
 
-  // 현재 월의 첫 번째 날과 마지막 날 계산
+  // 현재 월 계산
   const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
   const lastDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
-  
-  // 현재 월의 첫 번째 요일 (0: 일요일, 1: 월요일, ...)
   const firstDayOfWeek = firstDayOfMonth.getDay();
-  
-  // 현재 월의 총 일수
   const daysInMonth = lastDayOfMonth.getDate();
 
-  // 이전 월로 이동
   const goToPreviousMonth = () => {
     setCurrentDate(prev => new Date(prev.getFullYear(), prev.getMonth() - 1, 1));
   };
-
-  // 다음 월로 이동
   const goToNextMonth = () => {
     setCurrentDate(prev => new Date(prev.getFullYear(), prev.getMonth() + 1, 1));
   };
@@ -44,22 +42,15 @@ export default function ExhibitionDatePicker() {
   // 날짜 선택 처리
   const handleDateClick = (day) => {
     const clickedDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), day);
-    
-    // 등록일 기준 7일 뒤부터 선택 가능
     const today = new Date();
-    const minDate = new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000);
-    
-    if (clickedDate < minDate) {
-      return; // 선택 불가능한 날짜
-    }
+    const minDate = new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000); // 7일 뒤부터
+    if (clickedDate < minDate) return;
 
     if (!selectedStartDate || (selectedStartDate && selectedEndDate)) {
-      // 시작일 선택 또는 재선택
       setSelectedStartDate(clickedDate);
       setSelectedEndDate(null);
       setIsSelectingEndDate(true);
     } else if (selectedStartDate && !selectedEndDate) {
-      // 종료일 선택
       if (clickedDate >= selectedStartDate) {
         setSelectedEndDate(clickedDate);
         setIsSelectingEndDate(false);
@@ -67,7 +58,6 @@ export default function ExhibitionDatePicker() {
     }
   };
 
-  // 날짜가 선택 가능한지 확인
   const isDateSelectable = (day) => {
     const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), day);
     const today = new Date();
@@ -75,38 +65,38 @@ export default function ExhibitionDatePicker() {
     return date >= minDate;
   };
 
-  // 날짜가 선택된 시작일인지 확인
   const isStartDate = (day) => {
     if (!selectedStartDate) return false;
-    return day === selectedStartDate.getDate() && 
-           currentDate.getMonth() === selectedStartDate.getMonth() &&
-           currentDate.getFullYear() === selectedStartDate.getFullYear();
+    return (
+      day === selectedStartDate.getDate() &&
+      currentDate.getMonth() === selectedStartDate.getMonth() &&
+      currentDate.getFullYear() === selectedStartDate.getFullYear()
+    );
   };
 
-  // 날짜가 선택된 종료일인지 확인
   const isEndDate = (day) => {
     if (!selectedEndDate) return false;
-    return day === selectedEndDate.getDate() && 
-           currentDate.getMonth() === selectedEndDate.getMonth() &&
-           currentDate.getFullYear() === selectedEndDate.getFullYear();
+    return (
+      day === selectedEndDate.getDate() &&
+      currentDate.getMonth() === selectedEndDate.getMonth() &&
+      currentDate.getFullYear() === selectedEndDate.getFullYear()
+    );
   };
 
-  // 날짜가 선택 범위 내에 있는지 확인
   const isInRange = (day) => {
     if (!selectedStartDate || !selectedEndDate) return false;
     const date = new Date(currentDate.getFullYear(), currentDate.getMonth(), day);
     return date > selectedStartDate && date < selectedEndDate;
   };
 
-  // 선택된 기간의 총 일수 계산
   const getTotalDays = () => {
     if (!selectedStartDate || !selectedEndDate) return 0;
     const diffTime = selectedEndDate.getTime() - selectedStartDate.getTime();
     const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
     return diffDays + 1; // 시작일과 종료일 포함
+    // (선택된 시작/종료일이 동일하면 1일)
   };
 
-  // 날짜 포맷팅
   const formatDate = (date) => {
     if (!date) return '';
     return (
@@ -127,28 +117,23 @@ export default function ExhibitionDatePicker() {
     );
   };
 
-  // 캘린더 그리드 생성
   const generateCalendarDays = () => {
     const days = [];
-    
-    // 이전 월의 마지막 날들 (빈 칸 채우기)
     for (let i = 0; i < firstDayOfWeek; i++) {
       days.push(<div key={`empty-${i}`} className={styles.emptyDay}></div>);
     }
-    
-    // 현재 월의 날짜들
     for (let day = 1; day <= daysInMonth; day++) {
       const isSelectable = isDateSelectable(day);
       const isStart = isStartDate(day);
       const isEnd = isEndDate(day);
       const inRange = isInRange(day);
-      
+
       let dayClass = styles.day;
       if (!isSelectable) dayClass += ` ${styles.disabledDay}`;
       if (isStart) dayClass += ` ${styles.startDate}`;
       if (isEnd) dayClass += ` ${styles.endDate}`;
       if (inRange) dayClass += ` ${styles.inRange}`;
-      
+
       days.push(
         <div
           key={day}
@@ -159,32 +144,71 @@ export default function ExhibitionDatePicker() {
         </div>
       );
     }
-    
     return days;
   };
 
-  // 뒤로가기 처리
   const handleBack = () => {
-    navigate(-1);
+    // 뒤로 가되, draft를 유지하고 싶으면 state로 넘겨줌
+    navigate(-1, {
+      state: {
+        draft
+      }
+    });
   };
 
-  // 완료 버튼 클릭 처리
   const handleComplete = () => {
     if (selectedStartDate && selectedEndDate) {
-      // 전시 등록 페이지로 돌아가면서 선택된 날짜 전달
-      navigate(-1, {
-        state: {
-          selectedDates: {
-            startDate: selectedStartDate,
-            endDate: selectedEndDate,
-            totalDays: getTotalDays()
+      // 로컬 시간 기준으로 YYYY-MM-DD 형식 변환 (UTC 시간대 문제 해결)
+      const formatDate = (date) => {
+        const year = date.getFullYear();
+        const month = String(date.getMonth() + 1).padStart(2, '0');
+        const day = String(date.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}`;
+      };
+      
+      const startDateString = formatDate(selectedStartDate);
+      const endDateString = formatDate(selectedEndDate);
+      
+      // draft에 날짜 데이터를 YYYY-MM-DD 형식으로 추가
+      const updatedDraft = {
+        ...draft,
+        startDate: startDateString,
+        endDate: endDateString,
+        totalDays: getTotalDays()
+      };
+      
+
+      
+      // 업로드 페이지로 돌아가면서 선택된 날짜 + draft 같이 전달
+      // 업로드 페이지에서 location.state.selectedDates & .draft를 사용해 복원
+      if (returnTo === 'exhibition-upload') {
+        navigate('/exhibition/upload', {
+          state: {
+            selectedDates: {
+              startDate: startDateString,
+              endDate: endDateString,
+              totalDays: getTotalDays()
+            },
+            draft: updatedDraft
+          }
+        });
+      } else {
+        // returnTo 정보가 없을 때는 업로드 경로를 직접 지정해도 됨
+        navigate('/exhibition/upload', {
+          replace: true,
+          state: {
+            selectedDates: {
+              startDate: startDateString,
+              endDate: endDateString,
+              totalDays: getTotalDays()
+            },
+            draft: updatedDraft
           }
-        }
-      });
+        });
+      }
     }
   };
 
-  // 완료 버튼 활성화 여부
   const isCompleteButtonActive = selectedStartDate && selectedEndDate;
 
   return (
@@ -244,9 +268,9 @@ export default function ExhibitionDatePicker() {
         </div>
 
         {/* 안내 메시지 */}
-         <div className={styles.infoMessage}>
+        <div className={styles.infoMessage}>
           전시 시작일은 등록일 기준 7일 뒤부터 설정 가능합니다
-         </div>
+        </div>
 
         {/* 선택된 기간 정보 */}
         <div className={styles.dateInfo}>
diff --git a/src/components/museum/components/exhibition/ExhibitionList.jsx b/src/components/museum/components/exhibition/ExhibitionList.jsx
index c194c03..da5f565 100644
--- a/src/components/museum/components/exhibition/ExhibitionList.jsx
+++ b/src/components/museum/components/exhibition/ExhibitionList.jsx
@@ -6,6 +6,7 @@ import chevronLeft from '@/assets/museum/chevron-left.png';
 import arrowDown from '@/assets/museum/arrow-down.svg';
 import xImage from '@/assets/museum/x.png';
 import styles from './exhibitionList.module.css';
+import { getMyExhibitions } from '@/apis/museum/exhibition';
 
 export default function ExhibitionList({ 
   showAddButton = true,
@@ -14,7 +15,7 @@ export default function ExhibitionList({
   onBack,
   onExhibitionClick
 }) {
-  // 임시 전시 데이터 (추후 store로 대체)
+  // 전시 데이터 상태
   const [exhibitions, setExhibitions] = useState([]);
   const [layoutMode, setLayoutMode] = useState('grid');
   const [searchKeyword, setSearchKeyword] = useState('');
@@ -23,6 +24,22 @@ export default function ExhibitionList({
   const [selectedExhibitions, setSelectedExhibitions] = useState(new Set());
   const headerRef = useRef();
 
+  // 전시 데이터 로드
+  useEffect(() => {
+    const loadExhibitions = async () => {
+      try {
+        const response = await getMyExhibitions({ pageNum: 1, pageSize: 20, fillAll: true });
+        if (response?.data?.data) {
+          setExhibitions(response.data.data.content || []);
+        }
+      } catch (error) {
+        console.error('전시 데이터 로드 실패:', error);
+      }
+    };
+
+    loadExhibitions();
+  }, []);
+
   // 필터된 전시 목록
   const filteredExhibitions = exhibitions.filter(exhibition => 
     exhibition.title.toLowerCase().includes(searchKeyword.toLowerCase()) ||
@@ -99,7 +116,7 @@ export default function ExhibitionList({
 
   if (isCompletelyEmpty) {
     return (
-      <div className={styles.container}>
+      <div className={`${styles.container} ${styles.emptyContainer}`}>
         {/* 헤더 */}
         <div className={styles.header}>
           <div className={styles.headerLeft}>
@@ -194,9 +211,9 @@ export default function ExhibitionList({
       ) : (
         // 정상적인 전시 목록
         <div className={`${styles.exhibitionGrid} ${layoutMode === 'grid' ? styles.exhibitionGridLayout : styles.exhibitionVerticalLayout}`}>
-          {filteredExhibitions.map((exhibition, index) => (
-            <div key={exhibition.id}>
-              <ExhibitionCard
+                     {filteredExhibitions.map((exhibition, index) => (
+             <div key={exhibition.exhibitionId || index}>
+               <ExhibitionCard
                 exhibition={exhibition}
                 layoutMode={layoutMode}
                 onClick={onExhibitionClick}
diff --git a/src/components/museum/components/exhibition/exhibitionCard.module.css b/src/components/museum/components/exhibition/exhibitionCard.module.css
index fcfe410..63e6f7b 100644
--- a/src/components/museum/components/exhibition/exhibitionCard.module.css
+++ b/src/components/museum/components/exhibition/exhibitionCard.module.css
@@ -1,91 +1,99 @@
 /* 그리드 카드 */
 .gridCard {
   cursor: pointer;
-  border-radius: 8px;
-  overflow: hidden;
-  transition: transform 0.2s ease;
-}
-
-.gridCard:hover {
-  transform: translateY(-2px);
+  width: 100%;
 }
 
 .gridImage {
   width: 100%;
-  height: 180px;
+  height: 0;
+  padding-bottom: 100%;
   background-size: cover;
   background-position: center;
-  background-repeat: no-repeat;
-  background-color: #d9d9d9;
-  position: relative;
   border: 1px solid #000;
+  position: relative;
+  background-color: #f0f0f0;
 }
 
 /* 세로 카드 */
 .verticalCard {
+  margin-bottom: 40px;
   cursor: pointer;
-  border-radius: 8px;
-  overflow: hidden;
-  transition: transform 0.2s ease;
-  background: #fff;
-  border: 1px solid #e0e0e0;
-}
-
-.verticalCard:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  width: calc(100% + 64px);
+  margin-left: -32px;
+  margin-right: -32px;
 }
 
 .mainContainer {
   display: flex;
   flex-direction: column;
+  width: 100%;
 }
 
 .imageContainer {
+  display: flex;
+  align-items: flex-start;
+  margin-left: 0;
+  gap: 0;
   position: relative;
 }
 
 .verticalImage {
-  width: 100%;
-  height: 240px;
   background-size: cover;
   background-position: center;
-  background-repeat: no-repeat;
-  background-color: #d9d9d9;
+  border: 1px solid #000;
   position: relative;
-  border-bottom: 1px solid #e0e0e0;
+  background-color: #f0f0f0;
+  flex-shrink: 0;
+  width: 390px;
+  height: 284px;
+  margin-left: 0;
 }
 
 /* 상태 배지 */
 .statusBadge {
   position: absolute;
-  top: 12px;
-  right: 12px;
-  padding: 4px 8px;
-  border-radius: 4px;
-  font-family: 'Pretendard', sans-serif;
+  width: 64px;
+  height: 32px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
   font-size: 12px;
   font-weight: 500;
-  line-height: 16px;
+  line-height: 25px;
   letter-spacing: -0.3px;
-  color: #000;
   border: 1px solid #000;
+  font-family: 'Pretendard', sans-serif;
 }
 
-.statusExhibiting {
-  background: #f37021;
+.verticalImage .statusBadge {
+  top: 12px;
+  right: 12px;
 }
 
-.statusPending {
-  background: #ffd700;
+.gridImage .statusBadge {
+  top: 8px;
+  right: 8px;
+}
+
+.statusExhibiting {
+  background-color: #f37021;
+  color: #000;
 }
 
 .statusRejected {
-  background: #ff6b6b;
+  background-color: #cfdde3;
+  color: #000;
+}
+
+.statusPending {
+  background-color: #fff;
+  color: #000;
 }
 
 .statusDefault {
-  background: #cfdde3;
+  background-color: #cfdde3;
+  color: #000;
 }
 
 /* 체크박스 */
@@ -117,45 +125,64 @@
 
 /* 날짜 표시 */
 .dateDisplay {
-  position: absolute;
-  bottom: 12px;
-  left: 12px;
-  background: rgba(0, 0, 0, 0.7);
-  color: white;
-  padding: 4px 8px;
-  border-radius: 4px;
+  writing-mode: vertical-rl;
+  text-orientation: mixed;
   font-family: 'Pretendard', sans-serif;
   font-size: 12px;
-  font-weight: 500;
-  line-height: 16px;
+  font-weight: 400;
+  line-height: 26px;
   letter-spacing: -0.3px;
+  color: #989898;
+  height: 284px;
+  display: flex;
+  align-items: flex-start;
+  padding-top: 0;
 }
 
 /* 전시 정보 */
 .exhibitionInfo {
-  padding: 16px;
+  display: flex;
+  width: 390px;
+  padding: 20px 18px 20px 22px;
+  flex-direction: column;
+  align-items: flex-start;
+  border: 1px solid #000;
+  background: #cfdde3;
+  margin-left: 40px;
+  margin-right: -32px;
+  margin-top: -40px;
+  z-index: 10;
+  position: relative;
 }
 
 .exhibitionTitle {
   font-family: 'Pretendard', sans-serif;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 600;
-  line-height: 20px;
-  letter-spacing: -0.4px;
+  line-height: 25px;
+  letter-spacing: -0.35px;
   color: #000;
-  margin: 0 0 8px 0;
+  margin: 0 0 5px 0;
+}
+
+.exhibitionDate {
+  color: #434343;
+  font-family: Pretendard;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 19px; /* 158.333% */
+  letter-spacing: -0.3px;
 }
 
 .exhibitionDescription {
   font-family: 'Pretendard', sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 18px;
-  letter-spacing: -0.35px;
-  color: #757575;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 19px;
+  letter-spacing: -0.3px;
+  color: #434343;
   margin: 0;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
+  white-space: pre-line;
 }
+
diff --git a/src/components/museum/components/exhibition/exhibitionFilter.module.css b/src/components/museum/components/exhibition/exhibitionFilter.module.css
index c2680c4..6f3e037 100644
--- a/src/components/museum/components/exhibition/exhibitionFilter.module.css
+++ b/src/components/museum/components/exhibition/exhibitionFilter.module.css
@@ -1,8 +1,5 @@
 .filterContainer {
-  background-color: #f6f1eb;
-  padding: 16px 0;
-  border-bottom: 1px solid #e0e0e0;
-  margin-bottom: 16px;
+  margin-bottom: 24px;
 }
 
 /* 검색 컨테이너 */
@@ -11,55 +8,47 @@
 }
 
 .searchForm {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+  position: relative;
+  width: 100%;
 }
 
 .searchInput {
-  flex: 1;
+  width: 100%;
   height: 48px;
-  padding: 0 16px;
-  border: 1px solid #000;
-  border-radius: 8px;
-  background: #fff;
+  padding: 12px 50px 12px 20px;
+  border: 1px solid #f37021;
+  background-color: #f2eee9;
+  border-radius: 0;
   font-family: 'Pretendard', sans-serif;
   font-size: 16px;
-  font-weight: 400;
-  line-height: 24px;
+  font-weight: 500;
   letter-spacing: -0.4px;
-  color: #000;
-  transition: border-color 0.2s ease;
+  color: #f37021;
+  outline: none;
 }
 
 .searchInput::placeholder {
-  color: #757575;
-}
-
-.searchInput:focus {
-  outline: none;
-  border-color: #f37021;
+  color: #f37021;
 }
 
 .searchInputFocused {
-  border-color: #f37021;
+  box-shadow: 0 0 0 2px rgba(243, 112, 33, 0.2);
 }
 
 .searchButton {
-  width: 48px;
-  height: 48px;
-  border: 1px solid #000;
-  border-radius: 8px;
-  background: #fff;
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
   cursor: pointer;
+  padding: 0;
+  width: 24px;
+  height: 24px;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: background-color 0.2s ease;
-}
-
-.searchButton:hover {
-  background: #f5f5f5;
 }
 
 /* 컨트롤 컨테이너 */
@@ -67,53 +56,65 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  margin-bottom: 23px;
+  min-height: 40px;
 }
 
 .sortInfo {
   font-family: 'Pretendard', sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px;
-  letter-spacing: -0.35px;
-  color: #757575;
+  font-size: 12px;
+  font-weight: 600;
+  color: #989898;
+  letter-spacing: -0.3px;
+  line-height: 40px;
+  margin: 0;
+  padding: 0;
 }
 
 .layoutControls {
   display: flex;
   align-items: center;
+  gap: 8px;
+  height: 40px;
 }
 
 .layoutToggle {
   display: flex;
-  gap: 4px;
+  gap: 8px;
 }
 
 .layoutButton {
   width: 40px;
   height: 40px;
   border: 1px solid #000;
-  background: #fff;
+  background-color: #cfdde3;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: background-color 0.2s ease;
+  transition: all 0.2s;
 }
 
 .layoutButton:hover {
-  background: #f5f5f5;
+  background-color: #bcd1d8;
 }
 
 .layoutButtonActive {
-  background: #f37021;
+  background-color: #cfdde3;
+  border-color: #000;
+  box-shadow: inset 0 0 0 0.5px #000;
 }
 
 .layoutIcon {
-  width: 20px;
-  height: 20px;
-  transition: transform 0.2s ease;
+  width: 16px;
+  height: 16px;
+  object-fit: contain;
 }
 
 .layoutIcon.rotated {
   transform: rotate(90deg);
 }
+
+.layoutButton:not(.layoutButtonActive) {
+  border-color: #757575;
+}
diff --git a/src/components/museum/components/exhibition/exhibitionList.module.css b/src/components/museum/components/exhibition/exhibitionList.module.css
index 83bfecd..f537f31 100644
--- a/src/components/museum/components/exhibition/exhibitionList.module.css
+++ b/src/components/museum/components/exhibition/exhibitionList.module.css
@@ -1,10 +1,30 @@
 .container {
   min-height: 100vh;
-  background-color: #f6f1eb;
-  padding: 0 32px 100px;
+  background-color: #f2eee9;
+  padding: 0 32px 40px;
   position: relative;
-  max-width: 430px;
-  margin: 0 auto;
+}
+
+/* 빈 상태일 때는 최소 높이 제거 */
+.emptyContainer {
+  min-height: auto;
+  height: auto;
+}
+
+/* 로딩 상태 */
+.loadingState {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 300px;
+  padding: 40px 0;
+}
+
+.loadingText {
+  font-family: 'Pretendard', sans-serif;
+  font-size: 16px;
+  color: #666;
+  text-align: center;
 }
 
 /* 헤더 */
@@ -92,8 +112,6 @@
   display: flex;
   align-items: center;
   gap: 16px;
-  max-width: 430px;
-  margin: 0 auto;
 }
 
 .scrollBackButton {
@@ -176,7 +194,6 @@
   height: 56px;
   background-color: #f37021;
   border: 1px solid #000;
-  border-radius: 0;
   margin-bottom: 32px;
   display: flex;
   align-items: center;
@@ -235,12 +252,17 @@
   letter-spacing: -0.4px;
   color: #000;
   cursor: pointer;
+  transition: background-color 0.2s;
 }
 
 .addButton:hover {
   background: #e55a00;
 }
 
+.addButton:active {
+  background: #d44a00;
+}
+
 .addButton.disabledButton {
   background: #d9d9d9;
   color: #757575;
@@ -251,6 +273,10 @@
   background: #d9d9d9;
 }
 
+.addButton.disabledButton:active {
+  background: #d9d9d9;
+}
+
 /* 로딩 */
 .loadingMore {
   display: flex;
diff --git a/src/components/museum/components/museum/ArtworkSection.jsx b/src/components/museum/components/museum/ArtworkSection.jsx
index 38e8d21..bb289fb 100644
--- a/src/components/museum/components/museum/ArtworkSection.jsx
+++ b/src/components/museum/components/museum/ArtworkSection.jsx
@@ -1,12 +1,13 @@
 import { useNavigate } from 'react-router-dom';
+import { getImageUrl } from '@apis/museum/artwork';
 import artworkStyles from './artworkSection.module.css';
 import commonStyles from './common.module.css';
 
-export default function ArtworkSection({ artworks = [] }) {
+export default function ArtworkSection({ artworks = [], totalElements = 0 }) {
   const navigate = useNavigate();
   const maxVisible = 5;
   const visibleArtworks = artworks.slice(0, maxVisible);
-  const hasMoreArtworks = artworks.length > maxVisible;
+  const hasMoreArtworks = totalElements > maxVisible;
 
   const handleShowMore = () => {
     navigate('/artwork/my'); // 내 작품 페이지로 이동
@@ -21,26 +22,38 @@ export default function ArtworkSection({ artworks = [] }) {
       <div className={commonStyles.sectionHeader}>
         <div className={commonStyles.sectionTitle}>
           <h3>내 작품</h3>
-          <span className={commonStyles.sectionCount}>_ {artworks.length}개</span>
+          <span className={commonStyles.sectionCount}>_ {totalElements}개</span>
         </div>
       </div>
       
       <div className={artworkStyles.artworkGrid}>
-        {visibleArtworks.map((artwork, index) => (
-          <div 
-            key={artwork.id || index}
-            className={artworkStyles.artworkCard}
-            style={{
-              backgroundImage: artwork.image ? `url(${artwork.image})` : 'none'
-            }}
-          />
-        ))}
+        {visibleArtworks.map((artwork, index) => {
+          const imageUrl = getImageUrl(artwork);
+          return (
+            <div 
+              key={artwork.id || index}
+              className={artworkStyles.artworkCard}
+              style={{
+                backgroundImage: imageUrl ? `url(${imageUrl})` : 'none',
+                backgroundColor: imageUrl ? 'transparent' : '#f0f0f0'
+              }}
+              title={artwork.title || `작품 ${index + 1}`}
+            />
+          );
+        })}
         
         {hasMoreArtworks && (
           <div 
             className={artworkStyles.artworkCard}
             style={{
-              backgroundImage: artworks[maxVisible] ? `url(${artworks[maxVisible].image})` : 'none'
+              backgroundImage: (() => {
+                const imageUrl = getImageUrl(artworks[maxVisible]);
+                return imageUrl ? `url(${imageUrl})` : 'none';
+              })(),
+              backgroundColor: (() => {
+                const imageUrl = getImageUrl(artworks[maxVisible]);
+                return imageUrl ? 'transparent' : '#f0f0f0';
+              })()
             }}
             onClick={handleShowMore}
           >
diff --git a/src/components/museum/components/museum/ExhibitionSection.jsx b/src/components/museum/components/museum/ExhibitionSection.jsx
index d1175aa..525d953 100644
--- a/src/components/museum/components/museum/ExhibitionSection.jsx
+++ b/src/components/museum/components/museum/ExhibitionSection.jsx
@@ -1,10 +1,22 @@
 import exhibitionStyles from './exhibitionSection.module.css';
 import commonStyles from './common.module.css';
 
-export default function ExhibitionSection({ exhibitions = [] }) {
+export default function ExhibitionSection({ exhibitions = [], totalElements = 0 }) {
+  console.log('ExhibitionSection 렌더링:', { exhibitions, totalElements, exhibitionsType: typeof exhibitions, totalElementsType: typeof totalElements });
+  
   const maxVisible = 5;
   const visibleExhibitions = exhibitions.slice(0, maxVisible);
-  const hasMoreExhibitions = exhibitions.length > maxVisible;
+  const hasMoreExhibitions = totalElements > maxVisible;
+
+  // 날짜 형식 변환 헬퍼 함수
+  const formatDate = (dateString) => {
+    if (!dateString) return '';
+    const date = new Date(dateString);
+    const year = date.getFullYear().toString().slice(2); // 24, 25
+    const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 12, 02
+    const day = date.getDate().toString().padStart(2, '0'); // 05, 19
+    return `${year}.${month}.${day}`;
+  };
 
   const handleShowMore = () => {
     console.log('전체 전시 페이지로 이동');
@@ -15,23 +27,31 @@ export default function ExhibitionSection({ exhibitions = [] }) {
       <div className={commonStyles.sectionHeader}>
         <div className={commonStyles.sectionTitle}>
           <h3>내 전시</h3>
-          <span className={commonStyles.sectionCount}>_ {exhibitions.length}개</span>
+          <span className={commonStyles.sectionCount}>_ {totalElements}개</span>
         </div>
       </div>
       
       <div className={exhibitionStyles.exhibitionGrid}>
         {visibleExhibitions.map((exhibition, index) => (
-          <div key={exhibition.id || index}>
+          <div key={exhibition.exhibitionId || index}>
             <div 
               className={`${exhibitionStyles.exhibitionCard} ${exhibitionStyles.large}`}
               style={{
-                backgroundImage: exhibition.image ? `url(${exhibition.image})` : 'none'
+                backgroundImage: exhibition.thumbnail ? `url(${exhibition.thumbnail})` : 'none',
+                backgroundColor: exhibition.thumbnail ? 'transparent' : '#f0f0f0'
               }}
             />
             <div className={exhibitionStyles.exhibitionInfo}>
-              <h4 className={exhibitionStyles.exhibitionTitle}>{exhibition.title}</h4>
-              <p className={exhibitionStyles.exhibitionDate}>{exhibition.date}</p>
-            </div>
+               <h4 className={exhibitionStyles.exhibitionTitle}>
+                 {exhibition.title || `전시 ${exhibition.exhibitionId || index + 1}`}
+               </h4>
+               <p className={exhibitionStyles.exhibitionDate}>
+                 {exhibition.startDate && exhibition.endDate ? 
+                   `${formatDate(exhibition.startDate)} - ${formatDate(exhibition.endDate)}` : 
+                   '등록 완료'
+                 }
+               </p>
+             </div>
           </div>
         ))}
         
@@ -40,7 +60,8 @@ export default function ExhibitionSection({ exhibitions = [] }) {
             <div 
               className={`${exhibitionStyles.exhibitionCard} ${exhibitionStyles.large}`}
               style={{
-                backgroundImage: exhibitions[maxVisible] ? `url(${exhibitions[maxVisible].image})` : 'none'
+                backgroundImage: exhibitions[maxVisible] ? `url(${exhibitions[maxVisible].thumbnail})` : 'none',
+                backgroundColor: exhibitions[maxVisible]?.thumbnail ? 'transparent' : '#f0f0f0'
               }}
             >
               <div className={exhibitionStyles.moreOverlay}>
@@ -51,7 +72,7 @@ export default function ExhibitionSection({ exhibitions = [] }) {
             </div>
             <div className={exhibitionStyles.exhibitionInfo}>
               <h4 className={exhibitionStyles.exhibitionTitle}>&nbsp;</h4>
-              <p className={exhibitionStyles.exhibitionDate}>&nbsp;</p>
+              <p className={exhibitionStyles.exhibitionTitle}>&nbsp;</p>
             </div>
           </div>
         )}
diff --git a/src/components/museum/components/museum/InvitationSection.jsx b/src/components/museum/components/museum/InvitationSection.jsx
new file mode 100644
index 0000000..6e0070c
--- /dev/null
+++ b/src/components/museum/components/museum/InvitationSection.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import styles from './invitationSection.module.css';
+
+export default function InvitationSection({ hasInvitation, hasSharedLibraryRequest, invitationCount = 0 }) {
+  const navigate = useNavigate();
+
+  const handleInvitationClick = () => {
+    navigate('/exhibition/invitations');
+  };
+
+  const handleSharedLibraryClick = () => {
+    navigate('/exhibition/shared-library-selection');
+  };
+
+  return (
+    <section className={styles.invitationSection}>
+      {/* 공동 전시 참여 요청 알림 */}
+      {hasInvitation && (
+        <div className={styles.invitationAlert} onClick={handleInvitationClick}>
+          <span>공동 전시 참여 요청 ({invitationCount}개)</span>
+        </div>
+      )}
+      
+      {/* 작품 공유 라이브러리 등록 안내 */}
+      {hasSharedLibraryRequest && (
+        <div className={styles.sharedLibraryAlert} onClick={handleSharedLibraryClick}>
+          <span>작품을 공유 라이브러리에 등록해주세요</span>
+        </div>
+      )}
+    </section>  
+  );
+}
diff --git a/src/components/museum/components/museum/MuseumProfile.jsx b/src/components/museum/components/museum/MuseumProfile.jsx
index 94e71cc..867ce5f 100644
--- a/src/components/museum/components/museum/MuseumProfile.jsx
+++ b/src/components/museum/components/museum/MuseumProfile.jsx
@@ -7,12 +7,12 @@ export default function MuseumProfile({ user }) {
         <div 
           className={styles.profileImage}
           style={{
-            backgroundImage: user.profileImage ? `url(${user.profileImage})` : 'none'
+            backgroundImage: user.profileImageUrl ? `url(${user.profileImageUrl})` : 'none'
           }}
         />
         <div className={styles.profileDetails}>
-          <h2>{user.name}</h2>
-          <p>{user.title}</p>
+          <h2>{user.nickname || '사용자'}</h2>
+          <p>크리에이터의 전시장</p>
         </div>
       </div>
     </div>
diff --git a/src/components/museum/components/museum/invitationSection.module.css b/src/components/museum/components/museum/invitationSection.module.css
new file mode 100644
index 0000000..1780f32
--- /dev/null
+++ b/src/components/museum/components/museum/invitationSection.module.css
@@ -0,0 +1,54 @@
+.invitationSection {
+  margin-bottom: 20px;
+  width: 100%;
+  overflow: hidden;
+}
+
+.invitationAlert {
+  height: 48px;
+  width: calc(100% - 70px);
+  max-width: 100%;
+  border: 2px solid #F37021;
+  background: #CEDDE4;
+  border-right: none;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  margin-top: 12px;
+  margin-bottom: 12px;
+  margin-left: 70px;
+  color: #000;
+  font-family: 'Pretendard', sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 19px;
+  letter-spacing: -0.4px;
+  cursor: pointer;
+  box-sizing: border-box;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.sharedLibraryAlert {
+  height: 48px;
+  width: calc(100% - 70px);
+  max-width: 100%;
+  border: 2px solid #F37021;
+  background: #CEDDE4;
+  border-right: none;
+  margin: 12px 0 0 70px;
+  display: flex;
+  align-items: center;
+  padding: 0 20px;
+  font-family: 'Pretendard', sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 19px;
+  letter-spacing: -0.4px;
+  cursor: pointer;
+  box-sizing: border-box;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
\ No newline at end of file
diff --git a/src/components/museum/components/museum/museumProfile.module.css b/src/components/museum/components/museum/museumProfile.module.css
index 522611b..fba0400 100644
--- a/src/components/museum/components/museum/museumProfile.module.css
+++ b/src/components/museum/components/museum/museumProfile.module.css
@@ -41,4 +41,5 @@
   letter-spacing: -0.35px;
   line-height: 25px;
   margin: 0;
+  margin-top: 2px;
 }
diff --git a/src/components/museum/components/museum/premiumBar.module.css b/src/components/museum/components/museum/premiumBar.module.css
index a696ada..0d4b7b4 100644
--- a/src/components/museum/components/museum/premiumBar.module.css
+++ b/src/components/museum/components/museum/premiumBar.module.css
@@ -1,10 +1,11 @@
 .premiumBar {
   height: 48px;
-  width: 360px;
+  width: fit-content;
+  min-width: 200px;
   background-color: #f37021;
   display: flex;
   align-items: center;
-  padding: 0 40px;
+  padding: 0 30px;
   border: 1px solid #000000;
   margin-left: -1px;
   margin-top: 20px;
@@ -21,13 +22,14 @@
 
 .subscriptionPrompt {
   height: 48px;
-  width: 360px;
+  width: fit-content;
+  min-width: 200px;
   background-color: #cfdde3;
   border: 1px solid #000000;
   border-left: none;
   display: flex;
   align-items: center;
-  padding: 0 40px;
+  padding: 0 30px;
   margin-left: -1px;
   margin-top: 20px;
 }
diff --git a/src/components/museum/pages/ArtworkLibraryPage.jsx b/src/components/museum/pages/ArtworkLibraryPage.jsx
index f270bea..07916b1 100644
--- a/src/components/museum/pages/ArtworkLibraryPage.jsx
+++ b/src/components/museum/pages/ArtworkLibraryPage.jsx
@@ -1,7 +1,7 @@
 import { useState, useEffect, useCallback, useRef } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import ArtworkCard from '@museum/components/artwork/ArtworkCard';
-import useArtworkStore from '@museum/services/artworkStore';
+import { useInfinitePieces } from '@apis/museum/artwork';
 import chevronLeft from '@/assets/museum/chevron-left.png';
 import styles from './artworkLibraryPage.module.css';
 
@@ -10,16 +10,16 @@ export default function ArtworkLibraryPage() {
   const location = useLocation();
   
   // 전시 등록 페이지에서 전달받은 정보
-  const { fromExhibition, artworkIndex, isThumbnail, isChangeMode } = location.state || {};
+  const { fromExhibition, artworkIndex, isThumbnail, isChangeMode, draft, returnTo } = location.state || {};
   
-  // Zustand 스토어에서 상태 가져오기
+  // API를 사용한 작품 목록 관리
   const {
-    artworks,
-    getFilteredArtworks,
-    loadArtworks,
-    loadMoreArtworks,
-    hasMore
-  } = useArtworkStore();
+    pieces: artworks,
+    loading,
+    hasMore,
+    loadMorePieces,
+    resetPieces
+  } = useInfinitePieces({ applicated: true, pageSize: 6 });
 
   // 선택된 작품들 관리
   const [selectedArtworks, setSelectedArtworks] = useState(new Set());
@@ -27,33 +27,40 @@ export default function ArtworkLibraryPage() {
 
   // 무한 스크롤을 위한 ref들
   const observerRef = useRef();
-  const loadingRef = useRef();
+  const lastArtworkRef = useRef();
 
   // 필터된 작품 목록 (검색어 없이 모든 작품)
-  const filteredArtworks = getFilteredArtworks();
+  const filteredArtworks = artworks;
 
-  // 컴포넌트 마운트 시 작품 데이터 로드 (라이브러리 페이지에서는 6개)
+  // 컴포넌트 마운트 시 작품 데이터 초기화
   useEffect(() => {
-    loadArtworks(true, 6);
-  }, [loadArtworks]);
+    resetPieces();
+  }, [resetPieces]);
 
   // 무한 스크롤 구현 (IntersectionObserver 사용)
   const lastArtworkElementRef = useCallback((node) => {
-    if (artworks.isLoadingMore) return;
+    if (loading || !hasMore) return;
     if (observerRef.current) observerRef.current.disconnect();
     
     observerRef.current = new IntersectionObserver(entries => {
-      if (entries[0].isIntersecting && hasMore()) {
-        loadMoreArtworks();
+      if (entries[0].isIntersecting && hasMore) {
+        loadMorePieces();
       }
     });
     
     if (node) observerRef.current.observe(node);
-  }, [artworks.isLoadingMore, hasMore, loadMoreArtworks]);
+  }, [loading, hasMore, loadMorePieces]);
 
   const handleBack = () => {
-    if (fromExhibition) {
-      // 전시 등록 페이지로 돌아가기
+    if (fromExhibition && returnTo === 'exhibition-upload') {
+      // 전시 등록 페이지로 돌아가면서 draft 데이터 전달
+      navigate('/exhibition/upload', { 
+        state: { 
+          draft: draft
+        } 
+      });
+    } else if (fromExhibition) {
+      // 전시 등록 페이지로 돌아가기 (기존 방식)
       navigate('/exhibition/upload', { 
         state: { 
           returnFromLibrary: true,
@@ -67,16 +74,25 @@ export default function ArtworkLibraryPage() {
   };
 
   const handleArtworkSelection = (artwork) => {
+    const artworkId = artwork.pieceId || artwork.id; // pieceId 우선, 없으면 id 사용
+    
+    console.log('작품 선택:', {
+      artwork,
+      artworkId,
+      currentSelected: Array.from(selectedArtworks),
+      isChangeMode
+    });
+    
     if (isChangeMode) {
       // 변경 모드: 한 장만 선택 가능
-      setSelectedArtworks(new Set([artwork.id]));
+      setSelectedArtworks(new Set([artworkId]));
     } else {
       // 새로 추가 모드: 여러 장 선택 가능
       const newSelected = new Set(selectedArtworks);
-      if (newSelected.has(artwork.id)) {
-        newSelected.delete(artwork.id);
+      if (newSelected.has(artworkId)) {
+        newSelected.delete(artworkId);
       } else {
-        newSelected.add(artwork.id);
+        newSelected.add(artworkId);
       }
       setSelectedArtworks(newSelected);
     }
@@ -87,22 +103,47 @@ export default function ArtworkLibraryPage() {
     
     // 선택된 작품들 가져오기
     const selectedArtworkList = filteredArtworks.filter(artwork => 
-      selectedArtworks.has(artwork.id)
+      selectedArtworks.has(artwork.pieceId || artwork.id)
     );
     
     if (fromExhibition && selectedArtworkList.length > 0) {
-      // 전시 등록 페이지로 돌아가면서 선택된 작품 정보 전달
-      navigate('/exhibition/upload', { 
-        state: { 
-          returnFromLibrary: true,
-          selectedArtworks: selectedArtworkList, // 선택된 모든 작품 배열
-          artworkIndex: artworkIndex,
-          isThumbnail: isThumbnail
-        } 
-      });
+      if (returnTo === 'exhibition-upload') {
+        // draft 데이터와 함께 선택된 작품 정보 전달
+        navigate('/exhibition/upload', { 
+          state: { 
+            draft: draft,
+            returnFromLibrary: true,
+            selectedArtworks: selectedArtworkList, // 선택된 모든 작품 배열
+            artworkIndex: artworkIndex,
+            isThumbnail: isThumbnail
+          } 
+        });
+      } else {
+        // 기존 방식 (하위 호환성)
+        navigate('/exhibition/upload', { 
+          state: { 
+            returnFromLibrary: true,
+            selectedArtworks: selectedArtworkList, // 선택된 모든 작품 배열
+            artworkIndex: artworkIndex,
+            isThumbnail: isThumbnail
+          } 
+        });
+      }
     }
   };
 
+  const handleArtworkClick = (artwork) => {
+    // 작품 클릭 시에는 아무 동작하지 않음 (체크박스만 동작)
+    // 필요시 작품 상세 페이지로 이동하는 로직 추가 가능
+    console.log('작품 클릭:', artwork);
+  };
+
+  // 작품 삭제 완료 시 작품 목록 새로고침
+  const handleArtworkDeleted = (deletedIds) => {
+    console.log('삭제된 작품 ID들:', deletedIds);
+    // 작품 목록을 새로고침
+    resetPieces();
+  };
 
 
   return (
@@ -128,26 +169,27 @@ export default function ArtworkLibraryPage() {
           // 마지막 요소에 ref 추가 (무한 스크롤용)
           const isLast = index === filteredArtworks.length - 1;
           return (
-            <div key={artwork.id} ref={isLast ? lastArtworkElementRef : null}>
-              <ArtworkCard
-                artwork={artwork}
-                layoutMode="grid"
-                onClick={() => handleArtworkSelection(artwork)}
-                showDate={true}
-                showStatus={false}
-                showDescription={true}
-                isEditMode={true}
-                isSelected={selectedArtworks.has(artwork.id)}
-                onSelect={handleArtworkSelection}
-                isLibraryMode={true}
-                checkboxSize="large"
-              />
+            <div key={artwork.pieceId || artwork.id} ref={isLast ? lastArtworkRef : null}>
+                             <ArtworkCard
+                 artwork={artwork}
+                 layoutMode="grid"
+                 onClick={handleArtworkClick}
+                 showDate={true}
+                 showStatus={false}
+                 showDescription={true}
+                 isEditMode={true}
+                 isSelected={selectedArtworks.has(artwork.pieceId || artwork.id)}
+                 onSelect={handleArtworkSelection}
+                 isLibraryMode={true}
+                 checkboxSize="large"
+                 onArtworkDeleted={handleArtworkDeleted}
+               />
             </div>
           );
         })}
         
         {/* 더 로딩 중 표시 */}
-        {artworks.isLoadingMore && (
+        {loading && (
           <div className={styles.loadingMore}>
             <div className={styles.spinner}></div>
             <p>더 많은 작품을 불러오는 중...</p>
diff --git a/src/components/museum/pages/ArtworkUploadPage.jsx b/src/components/museum/pages/ArtworkUploadPage.jsx
index 524b23e..dd19cf2 100644
--- a/src/components/museum/pages/ArtworkUploadPage.jsx
+++ b/src/components/museum/pages/ArtworkUploadPage.jsx
@@ -1,8 +1,7 @@
 import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import useArtworkDraftStore from '@museum/services/artworkDraftStore';
-import useArtworkStore from '@museum/services/artworkStore';
-import useUserStore from '@/stores/userStore';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { createPiece } from '@apis/museum/artwork';
+import { getCurrentUser } from '@apis/user/user';
 import ArtworkModal from '@museum/components/artwork/ArtworkModal';
 import chevronLeft from '@/assets/museum/chevron-left.png';
 import cameraIcon from '@/assets/user/camera.png';
@@ -11,10 +10,15 @@ import styles from './artworkUploadPage.module.css';
 
 export default function ArtworkUploadPage() {
   const navigate = useNavigate();
-  const { saveDraft } = useArtworkDraftStore();
-  const { addArtwork } = useArtworkStore();
-  const { user } = useUserStore();
+  const location = useLocation();
   
+  // 전시 등록에서 넘어온 경우 draft 데이터 받기
+  const draft = location.state?.draft;
+  const fromExhibition = location.state?.fromExhibition;
+  const isThumbnail = location.state?.isThumbnail;
+  const isChangeMode = location.state?.isChangeMode;
+  const returnTo = location.state?.returnTo;
+  const [user, setUser] = useState(null);
   const [formData, setFormData] = useState({
     title: '',
     description: '',
@@ -29,13 +33,146 @@ export default function ArtworkUploadPage() {
 
   const [errorMessage, setErrorMessage] = useState('');
   const [showErrors, setShowErrors] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [validationTimeout, setValidationTimeout] = useState(null);
+  const [mainImageUrl, setMainImageUrl] = useState('');
+  const [detailImageUrls, setDetailImageUrls] = useState([]);
+
+  // 유저 정보 가져오기
+  useEffect(() => {
+    const fetchUser = async () => {
+      try {
+        const response = await getCurrentUser();
+        setUser(response.data);
+      } catch (error) {
+        console.error('유저 정보 조회 실패:', error);
+        // 에러가 발생해도 페이지는 계속 사용할 수 있도록 함
+      }
+    };
+
+    fetchUser();
+  }, []);
+
+  // 메인 이미지 URL 생성 및 정리
+  useEffect(() => {
+    if (formData.mainImage) {
+      const url = URL.createObjectURL(formData.mainImage);
+      setMainImageUrl(url);
+      
+      // 컴포넌트 언마운트 시 URL 정리
+      return () => URL.revokeObjectURL(url);
+    } else {
+      setMainImageUrl('');
+    }
+  }, [formData.mainImage]);
+
+  // 디테일 이미지 URL 생성 및 정리
+  useEffect(() => {
+    const urls = [];
+    formData.detailImages.forEach((image, index) => {
+      if (image) {
+        const url = URL.createObjectURL(image);
+        urls[index] = url;
+      }
+    });
+    
+    setDetailImageUrls(urls);
+    
+    // 컴포넌트 언마운트 시 모든 URL 정리
+    return () => {
+      urls.forEach(url => {
+        if (url) URL.revokeObjectURL(url);
+      });
+    };
+  }, [formData.detailImages]);
+
+  // 입력 완료 후 1초 뒤에 에러 메시지만 숨기기
+  useEffect(() => {
+    if (validationTimeout) {
+      clearTimeout(validationTimeout);
+    }
+
+    const timeout = setTimeout(() => {
+      // 입력이 완료되면 에러 메시지 숨기기
+      if (showErrors) {
+        setShowErrors(false);
+        setErrorMessage('');
+      }
+    }, 1000);
+
+    setValidationTimeout(timeout);
+
+    return () => {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [formData.title, formData.description, showErrors]);
+
+  // 폼 검증 함수
+  const validateForm = () => {
+    let hasError = false;
+    let errorMsg = '';
+    
+    // 1순위: 메인 이미지 없음
+    if (!formData.mainImage) {
+      errorMsg = '메인 이미지를 등록해주세요';
+      hasError = true;
+    }
+    // 2순위: 작품 소개 500자 이상
+    else if (formData.description && formData.description.length > 500) {
+      errorMsg = '작품 소개는 최대 500자까지만 가능해요';
+      hasError = true;
+    }
+    // 3순위: 작품명 없음
+    else if (!formData.title || !formData.title.trim()) {
+      errorMsg = '작품명을 작성해주세요';
+      hasError = true;
+    }
+    // 4순위: 작품 소개 없음
+    else if (!formData.description || !formData.description.trim()) {
+      errorMsg = '작품 소개를 작성해주세요';
+      hasError = true;
+    }
+    
+    // 에러가 있을 때만 상태 업데이트
+    if (hasError) {
+      setErrorMessage(errorMsg);
+      setShowErrors(true);
+      
+      // 에러 메시지를 3초 후에 자동으로 숨기기
+      setTimeout(() => {
+        setShowErrors(false);
+        setErrorMessage('');
+      }, 3000);
+    }
+    
+    return hasError; // 에러 여부 반환
+  };
+
+  // 로컬 draft 저장소 (localStorage 사용)
+  const saveDraft = (data) => {
+    try {
+      localStorage.setItem('artworkDraft', JSON.stringify(data));
+      console.log('임시저장 완료:', data);
+    } catch (error) {
+      console.error('임시저장 실패:', error);
+    }
+  };
 
   const handleBack = () => {
     // 작성 중인 내용이 있으면 취소 모달 표시
     if (formData.title || formData.description || formData.mainImage || formData.detailImages.length > 0) {
       setModal({ isOpen: true, type: 'cancel' });
     } else {
-      navigate('/artwork/my');
+      // 전시 등록에서 넘어온 경우 draft 데이터와 함께 돌아가기
+      if (fromExhibition && returnTo === 'exhibition-upload') {
+        navigate('/exhibition/upload', {
+          state: { draft: draft }
+        });
+      } else {
+        navigate('/artwork/my');
+      }
     }
   };
 
@@ -85,38 +222,11 @@ export default function ArtworkUploadPage() {
   const handleSubmit = (e) => {
     e.preventDefault();
     
-    let hasError = false;
+    // 즉시 검증 실행하고 에러 여부 확인
+    const hasError = validateForm();
     
-    // 1순위: 메인 이미지 없음
-    if (!formData.mainImage) {
-      setErrorMessage('메인 이미지를 등록해주세요');
-      hasError = true;
-    }
-    // 2순위: 작품 소개 500자 이상
-    else if (formData.description && formData.description.length > 500) {
-      setErrorMessage('작품 소개는 최대 500자까지만 가능해요');
-      hasError = true;
-    }
-    // 3순위: 작품명 없음
-    else if (!formData.title || !formData.title.trim()) {
-      setErrorMessage('작품명을 작성해주세요');
-      hasError = true;
-    }
-    // 4순위: 작품 소개 없음
-    else if (!formData.description || !formData.description.trim()) {
-      setErrorMessage('작품 소개를 작성해주세요');
-      hasError = true;
-    }
-    
-    setShowErrors(hasError);
-    
-    // 에러가 있으면 에러 메시지 표시
+    // 에러가 있으면 제출 중단
     if (hasError) {
-      // 에러 메시지를 3초 후에 자동으로 숨기기
-      setTimeout(() => {
-        setShowErrors(false);
-        setErrorMessage('');
-      }, 3000);
       return;
     }
     
@@ -124,34 +234,51 @@ export default function ArtworkUploadPage() {
     setModal({ isOpen: true, type: 'register' });
   };
 
-  const handleRegisterConfirm = () => {
-    // 실제 작품 등록 로직
-    const newArtwork = {
-      title: formData.title,
-      description: formData.description,
-      image: formData.mainImage ? URL.createObjectURL(formData.mainImage) : null,
-      // 추가 정보들
-      artistName: user.name,
-      artistNickname: user.nickname,
-      // 이미지 파일들 (실제 구현에서는 서버에 업로드 후 URL 사용)
-      mainImage: formData.mainImage,
-      detailImages: formData.detailImages.filter(img => img !== null)
-    };
+  const handleRegisterConfirm = async () => {
+    if (isSubmitting) return;
     
-    // store에 작품 등록
-    const registeredArtwork = addArtwork(newArtwork);
-    console.log('작품 등록 완료:', registeredArtwork);
+    setIsSubmitting(true);
     
-    // 등록 완료 모달 표시
-    setModal({ isOpen: true, type: 'complete' });
+    try {
+      // API를 사용하여 작품 등록
+      const response = await createPiece(formData, 'APPLICATION');
+      
+      if (response?.success === true && (response?.code === 200 || response?.code === 201)) {
+        console.log('작품 등록 완료:', response.data);
+        
+        // 등록 완료 모달 표시
+        setModal({ isOpen: true, type: 'complete' });
+      } else {
+        throw new Error('작품 등록에 실패했습니다.');
+      }
+    } catch (error) {
+      console.error('작품 등록 실패:', error);
+      setErrorMessage('작품 등록에 실패했습니다. 다시 시도해주세요.');
+      setShowErrors(true);
+      
+      // 에러 메시지를 3초 후에 자동으로 숨기기
+      setTimeout(() => {
+        setShowErrors(false);
+        setErrorMessage('');
+      }, 3000);
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   const handleCompleteConfirm = () => {
     // 등록 완료시 모달 닫고 페이지 이동
     setModal({ isOpen: false, type: null });
     
-    // 내 작품 페이지로 바로 이동
-    navigate('/artwork/my');
+    // 전시 등록에서 넘어온 경우 draft 데이터와 함께 돌아가기
+    if (fromExhibition && returnTo === 'exhibition-upload') {
+      navigate('/exhibition/upload', {
+        state: { draft: draft }
+      });
+    } else {
+      // 내 작품 페이지로 바로 이동
+      navigate('/artwork/my');
+    }
   };
 
   const handleCancelConfirm = () => {
@@ -169,19 +296,47 @@ export default function ArtworkUploadPage() {
     setModal({ isOpen: false, type: null });
   };
 
-  const handleSave = () => {
-    // 수동 임시 저장
-    saveDraft(formData);
+  const handleSave = async () => {
+    // 임시저장 중이면 중단
+    if (isSubmitting) return;
     
-    // 임시저장 완료 메시지 표시
-    setErrorMessage('임시 저장이 완료되었어요');
-    setShowErrors(true);
+    setIsSubmitting(true);
     
-    // 메시지를 3초 후에 자동으로 숨기기
-    setTimeout(() => {
-      setShowErrors(false);
-      setErrorMessage('');
-    }, 3000);
+    try {
+      // API를 사용하여 임시저장 (DRAFT)
+      const response = await createPiece(formData, 'DRAFT');
+      
+      if (response?.success === true && (response?.code === 200 || response?.code === 201)) {
+        console.log('임시저장 완료:', response.data);
+        
+        // 로컬 draft도 업데이트
+        saveDraft(formData);
+        
+        // 임시저장 완료 메시지 표시
+        setErrorMessage('임시 저장이 완료되었어요');
+        setShowErrors(true);
+        
+        // 메시지를 3초 후에 자동으로 숨기기
+        setTimeout(() => {
+          setShowErrors(false);
+          setErrorMessage('');
+        }, 3000);
+      } else {
+        throw new Error('임시저장에 실패했습니다.');
+      }
+    } catch (error) {
+      console.error('임시저장 실패:', error);
+      setErrorMessage('임시저장에 실패했습니다. 다시 시도해주세요.');
+      setShowErrors(true);
+      
+      // 에러 메시지를 3초 후에 자동으로 숨기기
+      setTimeout(() => {
+        setShowErrors(false);
+        setErrorMessage('');
+      }, 3000);
+    } finally {
+      setIsSubmitting(false);
+    }
   };
 
   return (
@@ -214,23 +369,23 @@ export default function ArtworkUploadPage() {
               <div className={styles.imageSlide}>
                 <div className={styles.imageUploadBox}>
                   <div className={styles.imageTag}>메인 이미지</div>
-                  <label htmlFor="mainImage" className={styles.imageLabel}>
-                    {formData.mainImage ? (
-                      <img 
-                        src={URL.createObjectURL(formData.mainImage)} 
-                        alt="메인 이미지" 
-                        className={styles.previewImage}
-                      />
-                    ) : (
-                      <div className={styles.imagePlaceholder}>
-                        <img src={cameraIcon} alt="camera" className={styles.cameraIcon} />
-                        <p className={styles.placeholderText}>
-                          작품 사진을 등록해주세요<br />
-                          (필수)
-                        </p>
-                      </div>
-                    )}
-                  </label>
+                                     <label htmlFor="mainImage" className={styles.imageLabel}>
+                     {mainImageUrl ? (
+                       <img 
+                         src={mainImageUrl} 
+                         alt="메인 이미지" 
+                         className={styles.previewImage}
+                       />
+                     ) : (
+                       <div className={styles.imagePlaceholder}>
+                         <img src={cameraIcon} alt="camera" className={styles.cameraIcon} />
+                         <p className={styles.placeholderText}>
+                           작품 사진을 등록해주세요<br />
+                           (필수)
+                         </p>
+                       </div>
+                     )}
+                   </label>
                   <input
                     type="file"
                     id="mainImage"
@@ -247,35 +402,35 @@ export default function ArtworkUploadPage() {
                   <div className={styles.imageUploadBox}>
                     <div className={styles.detailTag}>디테일 컷{index + 1}</div>
                     
-                    <label htmlFor={`detailImage${index}`} className={styles.imageLabel}>
-                      {formData.detailImages[index] ? (
-                        <div className={styles.detailImagePreview}>
-                          <img 
-                            src={URL.createObjectURL(formData.detailImages[index])} 
-                            alt={`디테일 이미지 ${index + 1}`} 
-                            className={styles.previewImage}
-                          />
-                          <button 
-                            type="button"
-                            onClick={(e) => {
-                              e.preventDefault();
-                              removeDetailImage(index);
-                            }}
-                            className={styles.removeImageButton}
-                          >
-                            ×
-                          </button>
-                        </div>
-                      ) : (
-                        <div className={styles.imagePlaceholder}>
-                          <img src={plusCircleIcon} alt="plus" className={styles.plusCircleIcon} />
-                          <p className={styles.placeholderText}>
-                            디테일 컷을 추가해보세요<br />
-                            (최대 5장)
-                          </p>
-                        </div>
-                      )}
-                    </label>
+                                         <label htmlFor={`detailImage${index}`} className={styles.imageLabel}>
+                       {detailImageUrls[index] ? (
+                         <div className={styles.detailImagePreview}>
+                           <img 
+                             src={detailImageUrls[index]} 
+                             alt={`디테일 이미지 ${index + 1}`} 
+                             className={styles.previewImage}
+                           />
+                           <button 
+                             type="button"
+                             onClick={(e) => {
+                               e.preventDefault();
+                               removeDetailImage(index);
+                             }}
+                             className={styles.removeImageButton}
+                           >
+                             ×
+                           </button>
+                         </div>
+                       ) : (
+                         <div className={styles.imagePlaceholder}>
+                           <img src={plusCircleIcon} alt="plus" className={styles.plusCircleIcon} />
+                           <p className={styles.placeholderText}>
+                             디테일 컷을 추가해보세요<br />
+                             (최대 5장)
+                           </p>
+                         </div>
+                       )}
+                     </label>
                     
                     <input
                       type="file"
@@ -317,13 +472,10 @@ export default function ArtworkUploadPage() {
 
           {/* 추가 기능 버튼들 */}
           <div className={styles.additionalFeatures}>
-            <button type="button" className={styles.featureButton}>
-              VR 등록하기
-            </button>
             <button 
               type="button" 
               className={`${styles.featureButton} ${
-                user.email || user.nickname ? styles.contactRegistered : ''
+                user?.email || user?.nickname ? styles.contactRegistered : ''
               }`}
             >
               연락 정보 등록하기
diff --git a/src/components/museum/pages/DraftArtworkPage.jsx b/src/components/museum/pages/DraftArtworkPage.jsx
index 225557e..2cf2681 100644
--- a/src/components/museum/pages/DraftArtworkPage.jsx
+++ b/src/components/museum/pages/DraftArtworkPage.jsx
@@ -1,36 +1,43 @@
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import DraftArtworkList from '@museum/components/artwork/DraftArtworkList';
-import styles from './draftArtworkPage.module.css';
+import ArtworkList from '@museum/components/artwork/ArtworkList';
+import { useInfinitePieces } from '@apis/museum/artwork';
+import styles from './myArtworkPage.module.css'; // 같은 스타일 사용
 
 export default function DraftArtworkPage() {
   const navigate = useNavigate();
   
-  // 스크롤 상태 관리
-  const [isScrolled, setIsScrolled] = useState(false);
-
-  // 스크롤 이벤트 처리
-  useEffect(() => {
-    const handleScroll = () => {
-      const scrollTop = window.scrollY;
-      setIsScrolled(scrollTop > 10);
-    };
-
-    window.addEventListener('scroll', handleScroll);
-    return () => window.removeEventListener('scroll', handleScroll);
-  }, []);
+  // API를 사용한 임시저장 작품 목록 관리 (applicated: false)
+  const { 
+    pieces: draftArtworks, 
+    loading, 
+    hasMore, 
+    loadMorePieces: loadMoreDrafts, 
+    resetPieces 
+  } = useInfinitePieces({ applicated: false, pageSize: 3 });
 
   const handleBack = () => {
-    navigate('/artwork'); // 내 작품 페이지로 돌아가기
+    navigate('/artwork/my'); // 내 작품 페이지로 돌아가기
   };
 
   const handleAddArtwork = () => {
     navigate('/artwork/upload'); // 작품 등록 페이지로 이동
   };
 
-  const handleArtworkClick = (draft) => {
-    // 임시저장 작품 편집 페이지로 이동 (추후 구현)
-    console.log('임시저장 작품 클릭:', draft);
+  const handleDraftClick = () => {
+    // 이미 임시저장 페이지에 있으므로 아무것도 하지 않음
+  };
+
+  const handleArtworkClick = (artwork) => {
+    // 작품 상세 페이지로 이동 (추후 구현)
+    console.log('임시저장 작품 클릭:', artwork);
+  };
+
+  // 작품 삭제 완료 시 작품 목록 새로고침
+  const handleArtworkDeleted = (deletedIds) => {
+    console.log('삭제된 임시저장 작품 ID들:', deletedIds);
+    // 작품 목록을 새로고침
+    resetPieces();
   };
 
   return (
@@ -38,12 +45,20 @@ export default function DraftArtworkPage() {
       {/* Status Bar 공간 */}
       <div style={{height: '54px'}}></div>
       
-      <DraftArtworkList
+      <ArtworkList
         showBackButton={true}
         onBack={handleBack}
         showAddButton={true}
         onAddArtwork={handleAddArtwork}
         onArtworkClick={handleArtworkClick}
+        showDraftButton={false} // 임시저장 페이지에서는 버튼 숨김
+        onDraftClick={handleDraftClick}
+        artworks={draftArtworks}
+        loading={loading}
+        hasMore={hasMore}
+        onLoadMore={loadMoreDrafts}
+        onArtworkDeleted={handleArtworkDeleted}
+        title="임시저장 작품" // 커스텀 제목
       />
     </div>
   );
diff --git a/src/components/museum/pages/ExhibitionInvitationPage.jsx b/src/components/museum/pages/ExhibitionInvitationPage.jsx
new file mode 100644
index 0000000..13c5dd4
--- /dev/null
+++ b/src/components/museum/pages/ExhibitionInvitationPage.jsx
@@ -0,0 +1,134 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import chevronLeft from '@/assets/museum/chevron-left.png';
+import checkImage from '@/assets/museum/check.png';
+import styles from './exhibitionInvitationPage.module.css';
+
+export default function ExhibitionInvitationPage() {
+  const navigate = useNavigate();
+  // 상태 관리
+  const [invitations, setInvitations] = useState([]);
+  const [selectedInvitations, setSelectedInvitations] = useState([]);
+
+  // 더미 초대 데이터 (실제로는 API에서 가져올 예정)
+  const dummyInvitations = [
+    {
+      id: 1,
+      exhibitionTitle: '2025 성북구 작가 단체전',
+      exhibitionImage: null,
+      status: 'pending' // pending, accepted, declined
+    },
+    {
+      id: 2,
+      exhibitionTitle: '2025 성북구 작가 단체전',
+      exhibitionImage: null,
+      status: 'pending'
+    },
+    {
+      id: 3,
+      exhibitionTitle: '2025 강남구 작가 단체전',
+      exhibitionImage: null,
+      status: 'pending'
+    }
+  ];
+
+  useEffect(() => {
+    // 초대 목록 가져오기 (실제로는 API 호출)
+    setInvitations(dummyInvitations);
+  }, []);
+
+  const handleBack = () => {
+    navigate('/museum');
+  };
+
+  const handleInvitationSelect = (invitationId) => {
+    const isSelected = selectedInvitations.includes(invitationId);
+    
+    if (isSelected) {
+      setSelectedInvitations(prev => prev.filter(id => id !== invitationId));
+    } else {
+      setSelectedInvitations(prev => [...prev, invitationId]);
+    }
+  };
+
+  const handleAcceptInvitations = () => {
+    if (selectedInvitations.length > 0) {
+      // 선택된 초대들을 수락 처리
+      console.log('수락할 초대:', selectedInvitations);
+      
+      // TODO: API 호출로 초대 수락 처리
+      
+      // userStore 상태 업데이트
+      updateInvitation({
+        hasInvitation: false, // 공동 전시 참여 요청 알림 숨김
+        hasSharedLibraryRequest: true, // 작품 공유 라이브러리 등록 안내 표시
+        invitationCount: 0 // 요청 개수 0으로 설정
+      });
+      
+      // 내 전시장 페이지로 돌아가기
+      navigate('/museum');
+    } else {
+      alert('수락할 초대를 선택해주세요.');
+    }
+  };
+
+  const isInvitationSelected = (invitationId) => {
+    return selectedInvitations.includes(invitationId);
+  };
+
+  return (
+    <div className={styles.container}>
+      {/* 헤더 */}
+      <div className={styles.header}>
+        <div className={styles.headerLeft}>
+          <button className={styles.backButton} onClick={handleBack}>
+            <img src={chevronLeft} alt="뒤로가기" className={styles.backIcon} />
+          </button>
+          <h1 className={styles.title}>참여 요청 받은 전시</h1>
+        </div>
+      </div>
+
+      {/* 초대 목록 */}
+      <div className={styles.invitationList}>
+        {invitations.map((invitation) => (
+          <div
+            key={invitation.id}
+            className={`${styles.invitationCard}`}
+          >
+            <div className={styles.exhibitionInfo}>
+              <div className={styles.exhibitionImage}>
+                {invitation.exhibitionImage ? (
+                  <img src={invitation.exhibitionImage} alt="전시 이미지" />
+                ) : (
+                  <div className={styles.defaultImage} />
+                )}
+              </div>
+              <div className={styles.exhibitionDetails}>
+                <span className={styles.exhibitionTitle}>{invitation.exhibitionTitle}</span>
+              </div>
+            </div>
+            
+            {/* 커스텀 체크박스 - check.png 이미지 사용 */}
+            <div 
+              className={`${styles.customCheckbox} ${isInvitationSelected(invitation.id) ? styles.checked : ''}`}
+              onClick={() => handleInvitationSelect(invitation.id)}
+            >
+              {isInvitationSelected(invitation.id) && (
+                <img src={checkImage} alt="체크됨" className={styles.checkIcon} />
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* 수락하기 버튼 */}
+      <button 
+        className={`${styles.acceptButton} ${selectedInvitations.length === 0 ? styles.disabledButton : ''}`}
+        onClick={handleAcceptInvitations}
+        disabled={selectedInvitations.length === 0}
+      >
+        {selectedInvitations.length > 0 ? `${selectedInvitations.length}개 수락하기` : '수락하기'}
+      </button>
+    </div>
+  );
+}
diff --git a/src/components/museum/pages/ExhibitionParticipantPage.jsx b/src/components/museum/pages/ExhibitionParticipantPage.jsx
index 1524470..79ad2f5 100644
--- a/src/components/museum/pages/ExhibitionParticipantPage.jsx
+++ b/src/components/museum/pages/ExhibitionParticipantPage.jsx
@@ -1,93 +1,108 @@
 import { useState, useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
-import useUserStore from '@/stores/userStore';
 import chevronLeft from '@/assets/museum/chevron-left.png';
 import searchIcon from '@/assets/footer/search.svg';
+import { getUserProfilesByCode } from '@/apis/user/user.js';
 import styles from './exhibitionParticipantPage.module.css';
 
 export default function ExhibitionParticipantPage() {
   const navigate = useNavigate();
   const location = useLocation();
-  const { user } = useUserStore();
   
   // 상태 관리
   const [searchQuery, setSearchQuery] = useState('');
-  const [selectedParticipants, setSelectedParticipants] = useState([]);
   const [searchResults, setSearchResults] = useState([]);
-  const [showNotification, setShowNotification] = useState(false);
+  const [selectedParticipants, setSelectedParticipants] = useState([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const [showSuccessModal, setShowSuccessModal] = useState(false);
 
-  // URL state에서 전시 정보 받아오기
-  useEffect(() => {
-    if (location.state?.exhibitionData) {
-      console.log('전시 정보:', location.state.exhibitionData);
-    }
-  }, [location.state]);
+  // URL state에서 draft 정보 받아오기
+  const draft = location.state?.draft || {};
+  const exhibitionData = draft.exhibitionData || {};
 
-  // 전시 정보가 없으면 전시 등록 페이지로 리다이렉트
-  useEffect(() => {
-    if (!location.state?.exhibitionData) {
-      navigate('/exhibition/upload');
+  // 사용자 검색 함수
+  const searchUsers = async (query) => {
+    if (!query.trim()) {
+      setSearchResults([]);
+      setIsSearching(false);
+      return;
     }
-  }, [location.state, navigate]);
 
-  const handleBack = () => {
-    navigate('/exhibition/upload', {
-      state: {
-        exhibitionData: location.state?.exhibitionData
+    setIsSearching(true);
+    try {
+      // 검색어를 그대로 사용
+      const keyword = query.trim();
+      
+      const response = await getUserProfilesByCode(keyword);
+      
+      if (response && response.data && Array.isArray(response.data)) {
+        setSearchResults(response.data);
+      } else {
+        setSearchResults([]);
       }
-    });
-  };
-
-  const handleSearchChange = (e) => {
-    const query = e.target.value;
-    setSearchQuery(query);
-    
-    // 검색어가 있을 때만 검색 결과 표시
-    if (query.trim()) {
-      // 실제로는 API 호출을 통해 사용자 검색
-      // 여기서는 더미 데이터 사용
-      const dummyResults = [
-        { id: 1, name: '김땡땡', username: 'kimdangdeng', profileImage: null },
-        { id: 2, name: '정땡땡', username: 'simonkim', profileImage: null },
-        { id: 3, name: 'kimman', username: 'kimchiman', profileImage: null }
-      ].filter(user => 
-        user.name.toLowerCase().includes(query.toLowerCase()) ||
-        user.username.toLowerCase().includes(query.toLowerCase())
-      );
-      setSearchResults(dummyResults);
-    } else {
+    } catch (error) {
+      console.error('사용자 검색 실패:', error);
       setSearchResults([]);
+    } finally {
+      setIsSearching(false);
     }
   };
 
-  const handleParticipantToggle = (participant) => {
-    setSelectedParticipants(prev => {
-      const isSelected = prev.find(p => p.id === participant.id);
-      if (isSelected) {
-        return prev.filter(p => p.id !== participant.id);
+  // 검색어 변경 시 디바운스 처리
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (searchQuery.trim()) {
+        searchUsers(searchQuery);
       } else {
-        return [...prev, participant];
+        setSearchResults([]);
+        setIsSearching(false);
       }
-    });
+    }, 500); // 500ms 디바운스
+
+    return () => clearTimeout(timer);
+  }, [searchQuery]);
+
+  const handleBack = () => {
+    navigate('/museum');
   };
 
-  const handleCompleteRegistration = () => {
-    if (selectedParticipants.length === 0) {
-      alert('참여자를 선택해주세요.');
-      return;
+  const handleSearchChange = (e) => {
+    setSearchQuery(e.target.value);
+  };
+
+  const handleUserSelect = (user) => {
+    const userId = user.userId || user.id;
+    const isSelected = selectedParticipants.some(p => (p.userId || p.id) === userId);
+    
+    if (isSelected) {
+      // 이미 선택된 사용자라면 제거
+      setSelectedParticipants(prev => prev.filter(p => (p.userId || p.id) !== userId));
+    } else {
+      // 새로운 사용자라면 추가
+      setSelectedParticipants(prev => [...prev, user]);
     }
+  };
 
-    // 전시 등록 페이지로 돌아가면서 참여자 정보 전달
-    navigate('/exhibition/upload', {
-      state: {
-        exhibitionData: location.state?.exhibitionData,
-        participants: selectedParticipants
-      }
-    });
+  const handleComplete = () => {
+    // 성공 모달 표시
+    setShowSuccessModal(true);
+    
+    // 2초 후 화면 전환
+    setTimeout(() => {
+      // 전시 업로드 페이지로 돌아가면서 전체 draft 정보 전달
+      navigate('/exhibition/upload', {
+        state: {
+          draft: {
+            ...draft,  // 기존 draft 데이터 모두 포함
+            participants: selectedParticipants  // 참여자 정보 추가/업데이트
+          }
+        }
+      });
+    }, 2000);
   };
 
-  const isParticipantSelected = (participantId) => {
-    return selectedParticipants.find(p => p.id === participantId);
+  const isUserSelected = (userId) => {
+    return selectedParticipants.some(p => (p.userId || p.id) === userId);
   };
 
   return (
@@ -96,83 +111,111 @@ export default function ExhibitionParticipantPage() {
       <div className={styles.header}>
         <div className={styles.headerLeft}>
           <button className={styles.backButton} onClick={handleBack}>
-            <img src={chevronLeft} alt="back" className={styles.backIcon} />
+            <img src={chevronLeft} alt="뒤로가기" className={styles.backIcon} />
           </button>
-          <h1 className={styles.title}>전시 참여자 등록하기</h1>
+          <h1 className={styles.title}>
+            {selectedParticipants.length > 0 ? '전시 참여자 등록됨' : '전시 참여자 등록하기'}
+          </h1>
         </div>
       </div>
 
-      {/* 검색 입력창 */}
+      {/* 검색창 */}
       <div className={styles.searchContainer}>
-        <div className={styles.searchInput}>
+        <div className={styles.searchBox}>
           <input
             type="text"
-            placeholder="아이디로 사용자를 검색"
             value={searchQuery}
             onChange={handleSearchChange}
-            style={{
-              border: 'none',
-              background: 'transparent',
-              outline: 'none',
-              flex: 1,
-              fontSize: '16px',
-              fontWeight: 500,
-              color: '#f37021'
-            }}
+            placeholder="아이디로 사용자를 검색"
+            className={styles.searchInput}
           />
-          <img src={searchIcon} alt="search" className={styles.searchIcon} />
+          <div className={styles.searchIcon}>
+            <img src={searchIcon} alt="검색" />
+          </div>
         </div>
       </div>
 
-      {/* 검색 결과가 있을 때만 표시 */}
+      {/* 안내 메시지 */}
       {searchResults.length > 0 && (
-        <>
-          <p className={styles.instructionText}>
-            {selectedParticipants.length > 0 
-              ? "프로필을 누르면 등록이 취소됩니다" 
-              : "프로필을 누르면 등록이 완료됩니다"
-            }
-          </p>
-
-          {/* 참여자 목록 */}
-          <div className={styles.participantList}>
-            {searchResults.map((participant) => (
-              <div
-                key={participant.id}
-                className={`${styles.participantCard} ${isParticipantSelected(participant.id) ? styles.selected : ''}`}
-                onClick={() => handleParticipantToggle(participant)}
-              >
+        <p className={styles.infoText}>
+          {selectedParticipants.length === 0 
+            ? '프로필을 누르면 등록이 완료됩니다'
+            : `프로필을 누르면 등록이 취소됩니다 (${selectedParticipants.length})`
+          }
+        </p>
+      )}
+
+      {/* 검색 결과 목록 */}
+      {console.log('렌더링 조건 확인:', { isSearching, searchResultsLength: searchResults.length, searchResults })}
+      {searchResults.length > 0 && (
+        <div className={styles.userList}>
+          {searchResults.map((user) => (
+            <div
+              key={user.userId || user.id}
+              className={`${styles.userCard} ${isUserSelected(user.userId || user.id) ? styles.selected : ''}`}
+              onClick={() => handleUserSelect(user)}
+            >
+              <div className={styles.userInfo}>
                 <div className={styles.profileImage}>
-                  {participant.profileImage ? (
-                    <img src={participant.profileImage} alt={participant.name} />
+                  {user.profileImageUrl ? (
+                    <img src={user.profileImageUrl} alt="프로필" />
                   ) : (
-                    <div style={{ width: '100%', height: '100%', backgroundColor: '#eeeeee' }} />
+                    <div className={styles.defaultProfile} />
                   )}
                 </div>
-                <div className={styles.participantInfo}>
-                  <h3 className={styles.participantName}>
-                    {participant.name} @{participant.username}
-                  </h3>
+                <div className={styles.userDetails}>
+                  <span className={styles.displayName}>{user.nickname || user.displayName}</span>
+                  <span className={styles.username}>@{user.code || user.username}</span>
                 </div>
               </div>
-            ))}
-          </div>
-        </>
+            </div>
+          ))}
+        </div>
       )}
 
-      {/* 하단 버튼 */}
+      {/* 선택된 참여자 목록 */}
+      {selectedParticipants.length > 0 && (
+        <div className={styles.selectedList}>
+          <h3 className={styles.selectedTitle}>선택된 참여자</h3>
+          {selectedParticipants.map((user) => (
+            <div
+              key={user.userId || user.id}
+              className={`${styles.userCard} ${styles.selected}`}
+              onClick={() => handleUserSelect(user)}
+            >
+              <div className={styles.userInfo}>
+                <div className={styles.profileImage}>
+                  {user.profileImageUrl ? (
+                    <img src={user.profileImageUrl} alt="프로필" />
+                  ) : (
+                    <div className={styles.defaultProfile} />
+                  )}
+                </div>
+                <div className={styles.userDetails}>
+                  <span className={styles.displayName}>{user.nickname || user.displayName}</span>
+                  <span className={styles.username}>@{user.code || user.username}</span>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* 등록 완료 버튼 */}
       <button 
-        className={styles.bottomButton}
-        onClick={handleCompleteRegistration}
+        className={`${styles.completeButton} ${selectedParticipants.length === 0 ? styles.disabledButton : ''}`}
+        onClick={handleComplete}
         disabled={selectedParticipants.length === 0}
       >
         등록 완료하기
       </button>
 
-      {/* 알림 배너 */}
-      {showNotification && (
-        <div className={styles.notificationBanner}>
-          참여자가 등록 요청이 전송되었습니다
+      {/* 성공 모달 */}
+      {showSuccessModal && (
+        <div className={styles.successModal}>
+          <div className={styles.successMessage}>
+            참여자 등록 요청이 전송되었습니다
+          </div>
         </div>
       )}
     </div>
diff --git a/src/components/museum/pages/ExhibitionUploadPage.jsx b/src/components/museum/pages/ExhibitionUploadPage.jsx
index f0d8a0a..f710b07 100644
--- a/src/components/museum/pages/ExhibitionUploadPage.jsx
+++ b/src/components/museum/pages/ExhibitionUploadPage.jsx
@@ -1,27 +1,16 @@
 import { useState, useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
-import useUserStore from '@/stores/userStore';
-import useExhibitionPhotoStore from '@museum/services/exhibitionPhotoStore';
 import chevronLeft from '@/assets/museum/chevron-left.png';
 import cameraIcon from '@/assets/user/camera.png';
 import plusCircleIcon from '@/assets/museum/plus-circle.png';
 import ExhibitionArtworkModal from '@museum/components/exhibition/ExhibitionArtworkModal';
+import { getUserContact, getCurrentUser } from '@/apis/user/user.js';
+import { createExhibition } from '@/apis/museum/exhibition.js';
 import styles from './exhibitionUploadPage.module.css';
 
 export default function ExhibitionUploadPage() {
   const navigate = useNavigate();
   const location = useLocation();
-  const { user, contactInfo } = useUserStore();
-  
-  // Zustand store 사용
-  const { 
-    thumbnail, 
-    artworks, 
-    setThumbnail, 
-    addArtwork, 
-    updateArtwork, 
-    removeArtwork: removeArtworkFromStore 
-  } = useExhibitionPhotoStore();
   
   // 로컬 상태로 관리 (전시 정보)
   const [exhibitionData, setExhibitionData] = useState({
@@ -32,25 +21,174 @@ export default function ExhibitionUploadPage() {
     totalDays: 0
   });
 
-  // 모달 상태 추가
+
+  // 모달 상태
   const [isArtworkModalOpen, setIsArtworkModalOpen] = useState(false);
   const [currentArtworkIndex, setCurrentArtworkIndex] = useState(0);
   const [isChangeMode, setIsChangeMode] = useState(false);
+  
+  // 썸네일 및 작품 상태
+  const [thumbnail, setThumbnail] = useState(null);
+  const [artworks, setArtworks] = useState([]); // 작품 객체 배열 (ID와 imageUrl 포함)
+  
+  // 연락 정보 상태
+  const [contactInfo, setContactInfo] = useState({
+    isRegistered: false
+  });
+  
+  // 전시 등록 관련 상태
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [offlineLocation, setOfflineLocation] = useState({
+    address: '',
+    addressName: '',
+    offlineDescription: ''
+  });
+  const [participants, setParticipants] = useState([]);
 
-  // URL state에서 선택된 날짜 받아오기
+  // 기간 설정 완료 상태 확인 함수
+  const isDateRangeSet = () => {
+    const { startDate, endDate } = exhibitionData;
+    
+    // Date 객체인 경우
+    if (startDate instanceof Date && endDate instanceof Date) {
+      return !isNaN(startDate.getTime()) && !isNaN(endDate.getTime());
+    }
+    
+    // 문자열인 경우 (YYYY-MM-DD 형식)
+    if (typeof startDate === 'string' && typeof endDate === 'string') {
+      const startPattern = /^\d{4}-\d{2}-\d{2}$/;
+      const endPattern = /^\d{4}-\d{2}-\d{2}$/;
+      return startPattern.test(startDate) && endPattern.test(endDate);
+    }
+    
+    return false;
+  };
+
+  // 오프라인 장소 등록 완료 상태 확인 함수
+  const isOfflineLocationSet = () => {
+    const { address, addressName } = offlineLocation;
+    return address && address.trim().length > 0 && addressName && addressName.trim().length > 0;
+  };
+
+  // 현재 입력 상태를 하나로 묶어 라우팅 state로 넘길 draft
+  const buildDraft = () => {
+    // artworks에서 pieceId만 추출하여 리스트 구성
+    const pieceIds = artworks.map(artwork => artwork.pieceId || artwork.id).filter(Boolean);
+    
+    const draft = {
+      exhibitionData,
+      thumbnail,
+      artworks,
+      pieceIds, // pieceId 리스트 추가
+      offlineLocation,
+      participants,
+      contactRegistered: contactInfo.isRegistered,
+      // API 요청 형식에 맞춰 날짜 데이터 저장 (이미 YYYY-MM-DD 형식)
+      startDate: exhibitionData.startDate || null,
+      endDate: exhibitionData.endDate || null,
+      totalDays: exhibitionData.totalDays
+    };
+    
+    return draft;
+  };
+
+    // 기간 설정 페이지에서 돌아왔을 때 데이터 복원 (통합)
   useEffect(() => {
-    if (location.state?.selectedDates) {
-      const { startDate, endDate, totalDays } = location.state.selectedDates;
-      setExhibitionData(prev => ({
-        ...prev,
-        startDate: new Date(startDate),
-        endDate: new Date(endDate),
-        totalDays
-      }));
+    // location.state가 실제로 유효한 데이터를 가지고 있을 때만 처리
+    if (location.state && (location.state.selectedDates || location.state.draft)) {
+      const { selectedDates, draft } = location.state;
+      
+      setExhibitionData(prev => {
+        let newData = { ...prev };
+        
+        // 1단계: draft 데이터 처리 (기본 데이터 먼저)
+        if (draft) {
+          // draft.exhibitionData에서 날짜 정보는 제외하고 기본 데이터만 설정
+          if (draft.exhibitionData) {
+            // 날짜 관련 필드를 명시적으로 제외
+            const safeExhibitionData = { ...draft.exhibitionData };
+            delete safeExhibitionData.startDate;
+            delete safeExhibitionData.endDate;
+            delete safeExhibitionData.totalDays;
+            
+            newData = {
+              ...newData,
+              ...safeExhibitionData
+            };
+          }
+        }
+        
+        // 2단계: 기간 설정 데이터 처리 (최우선 - 나중에 덮어씀)
+        if (selectedDates) {
+          const { startDate, endDate, totalDays } = selectedDates;
+          
+          newData = {
+            ...newData,
+            startDate: startDate, // 이미 YYYY-MM-DD 문자열
+            endDate: endDate,     // 이미 YYYY-MM-DD 문자열
+            totalDays
+          };
+        }
+        
+        // 3단계: draft에서 날짜 데이터 복원 (selectedDates가 없을 때만)
+        if (!selectedDates && draft) {
+          // draft에서 직접 날짜 데이터 복원
+          if (draft.startDate && draft.endDate) {
+            newData = {
+              ...newData,
+              startDate: draft.startDate,
+              endDate: draft.endDate,
+              totalDays: draft.totalDays || 0
+            };
+          }
+          
+          // draft.exhibitionData에서도 날짜 데이터 확인 및 복원
+          if (draft.exhibitionData && draft.exhibitionData.startDate && draft.exhibitionData.endDate) {
+            newData = {
+              ...newData,
+              startDate: draft.exhibitionData.startDate,
+              endDate: draft.exhibitionData.endDate,
+              totalDays: draft.exhibitionData.totalDays || 0
+            };
+          }
+        }
+        
+        return newData;
+      });
+      
+      // 기타 상태 업데이트 (exhibitionData와 독립적)
+      if (draft) {
+        if (draft.thumbnail) setThumbnail(draft.thumbnail);
+        if (draft.artworks) setArtworks(draft.artworks);
+        if (draft.offlineLocation) {
+          setOfflineLocation(draft.offlineLocation);
+        }
+        if (draft.participants && Array.isArray(draft.participants)) {
+          setParticipants(draft.participants);
+        }
+        if (typeof draft.contactRegistered === 'boolean') {
+          setContactInfo(prev => ({ ...prev, isRegistered: draft.contactRegistered }));
+        }
+      }
     }
   }, [location.state]);
 
-  // URL state에서 참여자 정보 받아오기
+  // ✅ URL state에 draft가 있으면 전부 복원 (통합된 useEffect에서 처리하므로 주석 처리)
+  // useEffect(() => {
+  //   if (location.state?.draft) {
+  //     const d = location.state.draft;
+  //     if (d.exhibitionData) setExhibitionData(prev => ({ ...prev, ...d.exhibitionData }));
+  //     if (d.thumbnail) setThumbnail(d.thumbnail);
+  //     if (d.artworks) setArtworks(d.artworks);
+  //     if (d.offlineLocation) setOfflineLocation(d.offlineLocation);
+  //     if (d.participants) setParticipants(d.participants);
+  //     if (typeof d.contactRegistered === 'boolean') {
+  //       setContactInfo(prev => ({ ...prev, isRegistered: d.contactRegistered }));
+  //     }
+  //   }
+  // }, [location.state]);
+
+  // URL state에서 참여자 정보 받아오기 (필요 시 추가 처리)
   useEffect(() => {
     if (location.state?.participants) {
       console.log('참여자 정보:', location.state.participants);
@@ -58,6 +196,280 @@ export default function ExhibitionUploadPage() {
     }
   }, [location.state]);
 
+  // 사용자 연락 정보 확인
+  useEffect(() => {
+    const checkUserContact = async () => {
+      try {
+        const userResponse = await getCurrentUser();
+        if (userResponse && userResponse.data && userResponse.data.userId) {
+          const userId = userResponse.data.userId;
+          const contactResponse = await getUserContact(userId);
+          
+          if (contactResponse && contactResponse.data) {
+            const contactData = contactResponse.data;
+            if (contactData.email || contactData.instagram) {
+              setContactInfo(prev => ({
+                ...prev,
+                isRegistered: true
+              }));
+            }
+          }
+        }
+      } catch (error) {
+        console.error('연락 정보 확인 실패:', error);
+      }
+    };
+    checkUserContact();
+  }, []);
+
+  // 연락 정보 등록 페이지에서 돌아왔을 때 전시 정보 복원
+  useEffect(() => {
+    if (location.state?.contactUpdated && location.state?.draft) {
+      const { draft } = location.state;
+      
+      // draft에서 모든 상태 복원
+      if (draft.exhibitionData) {
+        setExhibitionData(prev => ({
+          ...prev,
+          ...draft.exhibitionData
+        }));
+      }
+      if (draft.thumbnail) setThumbnail(draft.thumbnail);
+      if (draft.artworks) setArtworks(draft.artworks);
+      if (draft.offlineLocation) setOfflineLocation(draft.offlineLocation);
+      if (draft.participants) setParticipants(draft.participants);
+      
+      setContactInfo(prev => ({
+        ...prev,
+        isRegistered: true
+      }));
+    } else if (location.state?.contactUpdated && location.state?.exhibitionData) {
+      const { exhibitionData: savedExhibitionData, thumbnail: savedThumbnail, artworks: savedArtworks } = location.state;
+      
+      console.log('연락 정보 등록 후 복원 데이터:', {
+        savedExhibitionData,
+        savedThumbnail,
+        savedArtworks
+      });
+      
+      setExhibitionData(prev => ({
+        ...prev,
+        ...savedExhibitionData
+      }));
+      
+      if (savedThumbnail) setThumbnail(savedThumbnail);
+      if (savedArtworks) setArtworks(savedArtworks);
+      
+      setContactInfo(prev => ({
+        ...prev,
+        isRegistered: true
+      }));
+    }
+  }, [location.state]);
+
+  // 오프라인 장소 등록 페이지에서 돌아왔을 때 정보 복원
+  useEffect(() => {
+    if (location.state?.offlineLocationData && location.state?.returnTo === 'exhibition-upload') {
+      const { address, addressName, offlineDescription } = location.state.offlineLocationData;
+      setOfflineLocation({
+        address: address || '',
+        addressName: addressName || '',
+        offlineDescription: offlineDescription || ''
+      });
+    }
+  }, [location.state]);
+
+  // 전시 참여자 등록 페이지에서 돌아왔을 때 정보 복원
+  useEffect(() => {
+    if (location.state?.participantsData && location.state?.returnTo === 'exhibition-upload') {
+      setParticipants(location.state.participantsData);
+    }
+  }, [location.state]);
+
+  // 작품 라이브러리에서 돌아왔을 때 선택된 작품들 처리
+  useEffect(() => {
+    if (location.state?.returnFromLibrary && location.state?.selectedArtworks) {
+      const { selectedArtworks, artworkIndex, isThumbnail, draft } = location.state;
+      
+      console.log('라이브러리에서 선택된 작품들:', selectedArtworks);
+      console.log('복원할 draft:', draft);
+      
+      // 먼저 draft에서 상태 복원
+      if (draft) {
+        if (draft.exhibitionData) {
+          setExhibitionData(prev => ({
+            ...prev,
+            ...draft.exhibitionData
+          }));
+        }
+        if (draft.thumbnail) setThumbnail(draft.thumbnail);
+        if (draft.artworks) setArtworks(draft.artworks);
+        if (draft.offlineLocation) setOfflineLocation(draft.offlineLocation);
+        if (draft.participants) setParticipants(draft.participants);
+        if (typeof draft.contactRegistered === 'boolean') {
+          setContactInfo(prev => ({ ...prev, isRegistered: draft.contactRegistered }));
+        }
+      }
+      
+      // 그 다음 선택된 작품 처리
+      if (isThumbnail) {
+        // 썸네일로 선택된 경우
+        if (selectedArtworks.length > 0) {
+          setThumbnail(selectedArtworks[0]);
+        }
+      } else {
+        // 전시 작품으로 선택된 경우
+        if (artworkIndex !== undefined) {
+          // 특정 인덱스에 작품 추가/교체
+          if (artworkIndex >= 0) {
+            if (artworkIndex < artworks.length) {
+              // 기존 작품 교체
+              updateArtwork(artworkIndex, selectedArtworks[0]);
+            } else {
+              // 새 작품 추가
+              addArtwork(selectedArtworks[0]);
+            }
+          } else {
+            // 새 작품 추가
+            addArtwork(selectedArtworks[0]);
+          }
+        } else {
+          // 여러 작품 추가
+          selectedArtworks.forEach(artwork => {
+            addArtwork(artwork);
+          });
+        }
+      }
+    }
+  }, [location.state]);
+
+  // 새 작품 등록 페이지에서 돌아왔을 때 처리
+  useEffect(() => {
+    if (location.state?.returnFromArtworkUpload && location.state?.draft) {
+      const { draft, newArtwork, isThumbnail } = location.state;
+      
+      console.log('새 작품 등록 후 복원 데이터:', { draft, newArtwork, isThumbnail });
+      
+      // draft에서 상태 복원
+      if (draft) {
+        if (draft.exhibitionData) {
+          setExhibitionData(prev => ({
+            ...prev,
+            ...draft.exhibitionData
+          }));
+        }
+        if (draft.thumbnail) setThumbnail(draft.thumbnail);
+        if (draft.artworks) setArtworks(draft.artworks);
+        if (draft.offlineLocation) setOfflineLocation(draft.offlineLocation);
+        if (draft.participants) setParticipants(draft.participants);
+        if (typeof draft.contactRegistered === 'boolean') {
+          setContactInfo(prev => ({ ...prev, isRegistered: draft.contactRegistered }));
+        }
+      }
+      
+      // 새로 등록된 작품 처리
+      if (newArtwork) {
+        if (isThumbnail) {
+          setThumbnail(newArtwork);
+        } else {
+          addArtwork(newArtwork);
+        }
+      }
+    }
+  }, [location.state]);
+
+  // Draft 초기화 함수
+  const resetDraft = () => {
+    setExhibitionData({
+      title: '',
+      description: '',
+      startDate: '', // YYYY-MM-DD 형식 문자열로 초기화
+      endDate: '',   // YYYY-MM-DD 형식 문자열로 초기화
+      totalDays: 0
+    });
+    setThumbnail(null);
+    setArtworks([]);
+    setOfflineLocation({
+      address: '',
+      addressName: '',
+      offlineDescription: ''
+    });
+    setParticipants([]);
+    setContactInfo({
+      isRegistered: false
+    });
+
+  };
+
+  // 전시 등록 처리
+  const handleSubmitExhibition = async () => {
+    // 필수 입력 검증
+    if (!exhibitionData.title || !exhibitionData.title.trim()) {
+      alert('전시명을 입력해주세요.');
+      return;
+    }
+    if (!exhibitionData.description || !exhibitionData.description.trim()) {
+      alert('전시 소개를 입력해주세요.');
+      return;
+    }
+    if (!exhibitionData.startDate || !exhibitionData.endDate) {
+      alert('전시 기간을 설정해주세요.');
+      return;
+    }
+    if (artworks.length < 3) {
+      alert('작품을 3개 이상 등록해주세요.');
+      return;
+    }
+    if (!contactInfo.isRegistered) {
+      alert('연락 정보를 등록해주세요.');
+      return;
+    }
+    
+    setIsSubmitting(true);
+    try {
+      // buildDraft()에서 pieceIds 사용
+      const draft = buildDraft();
+      const pieceIdList = draft.pieceIds || [];
+      const participantIdList = participants.map(p => p.userId || p.id);
+
+      // draft에서 날짜 데이터 사용 (이미 YYYY-MM-DD 형식)
+      const startDate = exhibitionData.startDate;
+      const endDate = exhibitionData.endDate;
+      
+      // thumbnailImageUrl 설정 (썸네일 작품의 이미지 URL)
+      let thumbnailImageUrl = null;
+      if (thumbnail) {
+        thumbnailImageUrl = thumbnail.imageUrl || thumbnail.url || thumbnail;
+      }
+      
+      const exhibitionPayload = {
+        pieceIdList,
+        endDate,
+        participantIdList,
+        startDate,
+        address: offlineLocation.address || '주소 미입력',
+        title: exhibitionData.title.trim(),
+        offlineDescription: offlineLocation.offlineDescription || '오프라인 전시 설명 미입력',
+        description: exhibitionData.description.trim(),
+        addressName: offlineLocation.addressName || '장소명 미입력',
+        thumbnailImageUrl // 썸네일 이미지 URL 추가
+      };
+      
+      const response = await createExhibition(exhibitionPayload);
+      
+      // Draft 초기화
+      resetDraft();
+      
+      alert('전시가 성공적으로 등록되었습니다!');
+      navigate('/museum');
+    } catch (error) {
+      console.error('전시 등록 실패:', error);
+      alert('전시 등록에 실패했습니다. 다시 시도해주세요.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
   const handleBack = () => {
     navigate('/museum');
   };
@@ -72,9 +484,7 @@ export default function ExhibitionUploadPage() {
 
   const handleThumbnailChange = (e) => {
     const file = e.target.files[0];
-    if (file) {
-      setThumbnail(file);
-    }
+    if (file) setThumbnail(file);
   };
 
   // 전시 작품 등록 모달 열기 (새로 추가)
@@ -94,97 +504,85 @@ export default function ExhibitionUploadPage() {
   // 새 작품 등록 처리
   const handleNewArtwork = (file) => {
     if (currentArtworkIndex === -1) {
-      // 썸네일인 경우
       setThumbnail(file);
     } else {
-      // 작품인 경우
       if (isChangeMode) {
-        // 변경 모드: 해당 인덱스의 작품만 수정
         updateArtwork(currentArtworkIndex, file);
       } else {
-        // 새로 추가 모드: 작품 추가
         addArtwork(file);
       }
     }
   };
 
-  // 작품 라이브러리에서 가져오기 처리
-  const handleLoadFromLibrary = () => {
-    // 작품 라이브러리 페이지로 이동
-    navigate('/artwork/library', {
-      state: {
-        fromExhibition: true,
-        currentArtworkIndex,
-        isChangeMode
-      }
+
+
+
+
+  // 작품 추가/수정/삭제 (객체 기반)
+  const addArtwork = (artwork) => setArtworks(prev => [...prev, artwork]);
+  const updateArtwork = (index, artwork) => {
+    setArtworks(prev => {
+      const next = [...prev];
+      next[index] = artwork;
+      return next;
     });
   };
-
-  // 작품 제거 처리
   const removeArtwork = (index) => {
-    removeArtworkFromStore(index);
+    setArtworks(prev => prev.filter((_, i) => i !== index));
   };
 
-  // 기간 설정 페이지로 이동
+  // 기간 설정 페이지로 이동 (초안 동봉!)
   const openDatePicker = () => {
     navigate('/exhibition/date-picker', {
       state: {
         initialDates: {
           startDate: exhibitionData.startDate,
           endDate: exhibitionData.endDate
-        }
+        },
+        draft: buildDraft(),         // ✅ 현재까지 입력한 값 모두
+        returnTo: 'exhibition-upload'
       }
     });
   };
 
-  // 전시 작품 슬라이드 렌더링
+  // 전시 작품 슬라이드 렌더링 (객체 기반)
   const renderArtworkSlides = () => {
     const slides = [];
-    
-    // 기존 작품들 렌더링
     artworks.forEach((artwork, index) => {
       slides.push(
         <div key={`artwork-${index}`} className={styles.artworkSlide}>
           <div className={styles.artworkImageContainer}>
-            {artwork ? (
-              <div className={styles.artworkImageWrapper}>
-                <img 
-                  src={URL.createObjectURL(artwork)} 
-                  alt={`작품 ${index + 1}`} 
-                  className={styles.artworkImage}
-                />
-                <button 
-                  className={styles.changeButton}
-                  onClick={() => openChangeArtworkModal(index)}
-                >
-                  변경
-                </button>
-                <button 
-                  className={styles.removeButton}
-                  onClick={() => removeArtwork(index)}
-                >
-                  삭제
-                </button>
+            <div className={styles.artworkImageWrapper}>
+              <img 
+                src={artwork.imageUrl}
+                alt={`작품 ${index + 1}`} 
+                className={styles.artworkImage}
+                onError={(e) => {
+                  e.target.style.display = 'none';
+                  e.target.nextSibling.style.display = 'block';
+                }}
+              />
+              <div className={styles.placeholderText} style={{ display: 'none' }}>
+                이미지를 불러올 수 없습니다
               </div>
-            ) : (
-              <div 
-                className={styles.imagePlaceholder}
-                onClick={() => openArtworkModal(index)}
-                style={{ cursor: 'pointer' }}
+              <button 
+                className={styles.changeButton}
+                onClick={() => openChangeArtworkModal(index)}
               >
-                <img src={plusCircleIcon} alt="plus" className={styles.plusIcon} />
-                <p className={styles.placeholderText}>
-                  전시 작품을 등록해주세요<br />
-                  (선택)
-                </p>
-              </div>
-            )}
+                변경
+              </button>
+              <button 
+                className={styles.removeButton}
+                onClick={() => removeArtwork(index)}
+              >
+                삭제
+              </button>
+            </div>
           </div>
         </div>
       );
     });
-    
-    // 새 작품 추가 버튼 (최대 10개)
+
     if (artworks.length < 10) {
       slides.push(
         <div key="add-artwork" className={styles.artworkSlide}>
@@ -204,7 +602,6 @@ export default function ExhibitionUploadPage() {
         </div>
       );
     }
-    
     return slides;
   };
 
@@ -212,148 +609,150 @@ export default function ExhibitionUploadPage() {
     <div className={styles.container}>
       {/* 헤더 */}
       <div className={styles.header}>
-        <button className={styles.backButton} onClick={handleBack}>
-          <img src={chevronLeft} alt="back" className={styles.backIcon} />
-        </button>
-        <h1 className={styles.title}>전시 등록하기</h1>
+        <div className={styles.headerLeft}>
+          <button className={styles.backButton} onClick={handleBack}>
+            <img src={chevronLeft} alt="뒤로가기" className={styles.backIcon} />
+          </button>
+          <h1 className={styles.title}>전시 등록하기</h1>
+        </div>
       </div>
 
-      <div className={styles.content}>
-        <div className={styles.form}>
-          {/* 전시 썸네일 및 작품 등록 */}
-          <div className={styles.artworkSection}>
-            <h2 className={styles.sectionTitle}>전시 작품 등록</h2>
-            <div className={styles.artworkGrid}>
-              {/* 전시 썸네일 */}
-              <div className={styles.thumbnailSlide}>
-                <div className={styles.artworkImageContainer}>
-                  {thumbnail ? (
-                    <div className={styles.artworkImageWrapper}>
-                      <img 
-                        src={URL.createObjectURL(thumbnail)} 
-                        alt="전시 썸네일" 
-                        className={styles.artworkImage}
-                      />
-                      <button 
-                        className={styles.changeButton}
-                        onClick={() => openChangeArtworkModal(-1)}
-                      >
-                        변경
-                      </button>
-                    </div>
-                  ) : (
-                    <div 
-                      className={styles.imagePlaceholder}
-                      onClick={() => openArtworkModal(-1)} // -1은 썸네일을 의미
-                      style={{ cursor: 'pointer' }}
+      <div className={styles.form}>
+        {/* 전시 썸네일 및 작품 등록 */}
+        <div className={styles.artworkSection}>
+          <h2 className={styles.sectionTitle}>전시 작품 등록</h2>
+          <div className={styles.artworkSlideContainer}>
+            {/* 전시 썸네일 */}
+            <div className={styles.artworkSlide}>
+              <div className={styles.artworkImageContainer}>
+                {thumbnail ? (
+                  <div className={styles.artworkImageWrapper}>
+                    <img 
+                      src={thumbnail instanceof File ? URL.createObjectURL(thumbnail) : (thumbnail.imageUrl || thumbnail)} 
+                      alt="전시 썸네일" 
+                      className={styles.artworkImage}
+                    />
+                    <button 
+                      className={styles.changeButton}
+                      onClick={() => openChangeArtworkModal(-1)}
                     >
-                      <img src={cameraIcon} alt="camera" className={styles.cameraIcon} />
-                      <p className={styles.placeholderText}>
-                        전시 썸네일을 등록해주세요<br />
-                        (필수)
-                      </p>
-                    </div>
-                  )}
-                </div>
+                      변경
+                    </button>
+                  </div>
+                ) : (
+                  <div 
+                    className={styles.imagePlaceholder}
+                    onClick={() => openArtworkModal(-1)} // -1은 썸네일
+                    style={{ cursor: 'pointer' }}
+                  >
+                    <img src={cameraIcon} alt="camera" className={styles.cameraIcon} />
+                    <p className={styles.placeholderText}>
+                      전시 썸네일을 등록해주세요<br />
+                      (필수)
+                    </p>
+                  </div>
+                )}
               </div>
-
-              {/* 전시 작품 슬라이드 (동적으로 생성) */}
-              {renderArtworkSlides()}
             </div>
-          </div>
 
-          {/* 전시명 입력 */}
-          <div className={styles.inputGroup}>
-            <input
-              type="text"
-              name="title"
-              value={exhibitionData.title}
-              onChange={handleInputChange}
-              placeholder="전시명을 작성하세요"
-              className={styles.titleInput}
-            />
+            {/* 전시 작품 슬라이드 */}
+            {renderArtworkSlides()}
           </div>
+        </div>
 
-          {/* 전시 소개 입력 */}
-          <div className={styles.inputGroup}>
-            <textarea
-              name="description"
-              value={exhibitionData.description}
-              onChange={handleInputChange}
-              placeholder="전시 소개를 작성하세요. (최대 500자)"
-              className={styles.descriptionInput}
-              rows={15}
-              maxLength={500}
-            />
-          </div>
+        {/* 전시명 입력 */}
+        <div className={styles.inputGroup}>
+          <input
+            type="text"
+            name="title"
+            value={exhibitionData.title}
+            onChange={handleInputChange}
+            placeholder="전시명을 작성하세요"
+            className={styles.titleInput}
+          />
+        </div>
 
-          {/* 추가 기능 버튼들 */}
-          <div className={styles.additionalFeatures}>
-            <button 
-              type="button" 
-              className={`${styles.featureButton} ${exhibitionData.startDate && exhibitionData.endDate ? styles.completed : ''}`}
-              onClick={openDatePicker}
-            >
-              기간 설정하기 (필수)
-              {exhibitionData.startDate && exhibitionData.endDate && (
-                <span className={styles.completedText}>
-                  ✓ {exhibitionData.startDate.toLocaleDateString('ko-KR')} ~ {exhibitionData.endDate.toLocaleDateString('ko-KR')}
-                </span>
-              )}
-            </button>
-            <button 
-              type="button" 
-              className={`${styles.featureButton} ${contactInfo.isRegistered ? styles.contactRegistered : ''}`}
-            >
-              {contactInfo.isRegistered ? '연락 정보 등록됨' : '연락 정보 등록하기'}
-            </button>
-            <button 
-              type="button" 
-              className={styles.featureButton}
-              onClick={() => navigate('/exhibition/offline-location')}
-            >
-              오프라인 장소 등록하기
-            </button>
-            <button 
-              type="button" 
-              className={styles.featureButton}
-            >
-              전시장 만들기
-            </button>
-            <button 
-              type="button" 
-              className={`${styles.featureButton} ${location.state?.participants ? styles.completed : ''}`}
-              onClick={() => navigate('/exhibition/participants', {
-                state: {
-                  exhibitionData: {
-                    title: exhibitionData.title,
-                    description: exhibitionData.description,
-                    startDate: exhibitionData.startDate,
-                    endDate: exhibitionData.endDate,
-                    totalDays: exhibitionData.totalDays
-                  }
-                }
-              })}
-            >
-              전시 참여자 등록하기
-              {location.state?.participants && (
-                <span className={styles.completedText}>
-                  ✓ {location.state.participants.length}명 등록됨
-                </span>
-              )}
-            </button>
-          </div>
+        {/* 전시 소개 입력 */}
+        <div className={styles.inputGroup}>
+          <textarea
+            name="description"
+            value={exhibitionData.description}
+            onChange={handleInputChange}
+            placeholder="전시 소개를 작성하세요. (최대 500자)"
+            className={styles.descriptionInput}
+            rows={15}
+            maxLength={500}
+          />
         </div>
+
+        {/* 추가 기능 버튼들 */}
+        <div className={styles.additionalFeatures}>
+          <button 
+            type="button" 
+            className={`${styles.featureButton} ${isDateRangeSet() ? styles.completed : ''}`}
+            onClick={openDatePicker}
+          >
+            {isDateRangeSet() ? '기간 설정 완료' : '기간 설정하기 (필수)'}
+          </button>
+
+          <button 
+            type="button" 
+            className={`${styles.featureButton} ${contactInfo.isRegistered ? styles.contactRegistered : ''}`}
+            onClick={() => navigate('/user/contact', {
+              state: {
+                draft: buildDraft()
+              }
+            })}
+          >
+            {contactInfo.isRegistered ? '연락 정보 등록됨' : '연락 정보 등록하기'}
+          </button>
+
+          <button 
+            type="button" 
+            className={`${styles.featureButton} ${isOfflineLocationSet() ? styles.completed : ''}`}
+            onClick={() => navigate('/exhibition/offline-location', {
+              state: {
+                draft: buildDraft()
+              }
+            })}
+          >
+            {isOfflineLocationSet() ? '오프라인 장소 등록됨' : '오프라인 장소 등록하기'}
+          </button>
+
+          <button 
+            type="button" 
+            className={`${styles.featureButton} ${participants.length > 0 ? styles.completed : ''}`}
+            onClick={() => navigate('/exhibition/participants', {
+              state: {
+                draft: buildDraft()
+              }
+            })}
+          >
+            {participants.length > 0 ? '전시 참여자 등록됨' : '전시 참여자 등록하기'}
+          </button>
+        </div>
+      </div>
+
+      {/* 하단 고정 전시 등록하기 버튼 */}
+      <div className={styles.submitButtonContainer}>
+        <button 
+          type="button" 
+          className={styles.submitButton}
+          onClick={handleSubmitExhibition}
+          disabled={isSubmitting}
+        >
+          {isSubmitting ? '등록 중...' : '전시 등록하기'}
+        </button>
       </div>
 
       {/* 전시 작품 등록 모달 */}
       <ExhibitionArtworkModal
         isOpen={isArtworkModalOpen}
         onClose={() => setIsArtworkModalOpen(false)}
-        onNewArtwork={handleNewArtwork}
-        onLoadFromLibrary={handleLoadFromLibrary}
         isThumbnail={currentArtworkIndex === -1}
         isChangeMode={isChangeMode}
+        currentDraft={buildDraft()} // 현재 상태를 모달에 전달
+        returnTo="exhibition-upload" // 돌아올 페이지 지정
       />
     </div>
   );
diff --git a/src/components/museum/pages/MyArtworkPage.jsx b/src/components/museum/pages/MyArtworkPage.jsx
index 45b22a1..cf6cb07 100644
--- a/src/components/museum/pages/MyArtworkPage.jsx
+++ b/src/components/museum/pages/MyArtworkPage.jsx
@@ -1,16 +1,52 @@
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import ArtworkList from '@museum/components/artwork/ArtworkList';
-import useArtworkDraftStore from '@museum/services/artworkDraftStore';
+import { useInfinitePieces, getPieceDraftCount } from '@apis/museum/artwork';
 import styles from './myArtworkPage.module.css';
 
 export default function MyArtworkPage() {
   const navigate = useNavigate();
-  const { hasDraft } = useArtworkDraftStore();
+  
+  // 임시저장 작품 개수 상태
+  const [draftCount, setDraftCount] = useState(0);
+  
+  // API를 사용한 작품 목록 관리
+  const { 
+    pieces: artworks, 
+    loading, 
+    hasMore, 
+    loadMorePieces, 
+    resetPieces 
+  } = useInfinitePieces({ applicated: true, pageSize: 3 });
   
   // 스크롤 상태 관리 (기존 뮤지엄 페이지와 동일)
   const [isScrolled, setIsScrolled] = useState(false);
 
+  // 임시저장 작품 개수 조회
+  const fetchDraftCount = async () => {
+    try {
+      const response = await getPieceDraftCount();
+      console.log('getPieceDraftCount 응답:', response);
+      if (response?.success === true && response?.data) {
+        const count = response.data.count || response.data;
+        console.log('설정할 draftCount:', count);
+        setDraftCount(count);
+      } else {
+        console.log('응답이 성공이 아니거나 data가 없음');
+        setDraftCount(0);
+      }
+    } catch (error) {
+      console.error('임시저장 작품 개수 조회 실패:', error);
+      setDraftCount(0);
+    }
+  };
+
+  // 컴포넌트 마운트 시 작품 목록 초기화 및 draft 개수 확인
+  useEffect(() => {
+    resetPieces();
+    fetchDraftCount();
+  }, [resetPieces]);
+
   // 스크롤 이벤트 처리
   useEffect(() => {
     const handleScroll = () => {
@@ -39,6 +75,15 @@ export default function MyArtworkPage() {
     console.log('작품 클릭:', artwork);
   };
 
+  // 작품 삭제 완료 시 작품 목록 새로고침
+  const handleArtworkDeleted = (deletedIds) => {
+    console.log('삭제된 작품 ID들:', deletedIds);
+    // 작품 목록을 새로고침
+    resetPieces();
+    // 임시저장 작품 개수도 새로고침
+    fetchDraftCount();
+  };
+
   return (
     <div className={styles.page}>
       {/* Status Bar 공간 */}
@@ -50,8 +95,13 @@ export default function MyArtworkPage() {
         showAddButton={true}
         onAddArtwork={handleAddArtwork}
         onArtworkClick={handleArtworkClick}
-        showDraftButton={hasDraft()}
+        showDraftButton={draftCount > 0}
         onDraftClick={handleDraftClick}
+        artworks={artworks}
+        loading={loading}
+        hasMore={hasMore}
+        onLoadMore={loadMorePieces}
+        onArtworkDeleted={handleArtworkDeleted}
       />
     </div>
   );
diff --git a/src/components/museum/pages/MyExhibitionPage.jsx b/src/components/museum/pages/MyExhibitionPage.jsx
index fe7b485..ec063a2 100644
--- a/src/components/museum/pages/MyExhibitionPage.jsx
+++ b/src/components/museum/pages/MyExhibitionPage.jsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import ExhibitionList from '@museum/components/exhibition/ExhibitionList';
-import styles from './myExhibitionPage.module.css';
+import styles from './myArtworkPage.module.css';
 
 export default function MyExhibitionPage() {
   const navigate = useNavigate();
diff --git a/src/components/museum/pages/OfflineLocationPage.jsx b/src/components/museum/pages/OfflineLocationPage.jsx
index 12189de..be9fbbd 100644
--- a/src/components/museum/pages/OfflineLocationPage.jsx
+++ b/src/components/museum/pages/OfflineLocationPage.jsx
@@ -1,394 +1,105 @@
-import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useState } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
 import chevronLeft from '@/assets/museum/chevron-left.png';
-import searchIcon from '@/assets/footer/search.svg';
 import styles from './offlineLocationPage.module.css';
 
 export default function OfflineLocationPage() {
   const navigate = useNavigate();
-  const [currentStep, setCurrentStep] = useState(1); // 1: 검색, 2: 결과, 3: 소개입력
-  const [searchQuery, setSearchQuery] = useState('');
-  const [selectedLocation, setSelectedLocation] = useState(null);
-  const [exhibitionDescription, setExhibitionDescription] = useState('');
-  const [searchResults, setSearchResults] = useState([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [isApiReady, setIsApiReady] = useState(false);
-  const [apiLoadingMessage, setApiLoadingMessage] = useState('카카오맵 API 로딩 중...');
-
-  // 카카오맵 API 스크립트 로드
-  useEffect(() => {
-    console.log('=== 카카오맵 API 초기화 시작 ===');
-    console.trace('useEffect 호출 스택');
-    
-    // 이미 로드되어 있는지 확인
-    if (window.kakao && window.kakao.maps && window.kakao.maps.services) {
-      console.log('카카오맵 API가 이미 로드되어 있습니다.');
-      console.log('기존 window.kakao 객체:', window.kakao);
-      return;
-    }
-
-    console.log('기존 window.kakao 상태:', {
-      'window.kakao': !!window.kakao,
-      'window.kakao.maps': !!(window.kakao && window.kakao.maps),
-      'window.kakao.maps.services': !!(window.kakao && window.kakao.maps && window.kakao.maps.services)
-    });
-
-    const script = document.createElement('script');
-    // 환경 변수에서 API 키를 가져오거나, 직접 입력
-    const apiKey = import.meta.env.VITE_KAKAO_MAP_API_KEY || '7ad52f7b94094552a3513f9f7218363c';
-    
-    if (!apiKey || apiKey === 'YOUR_KAKAO_APP_KEY') {
-      console.error('카카오맵 API 키가 설정되지 않았습니다.');
-      alert('카카오맵 API 키를 설정해주세요.');
-      return;
-    }
-    
-    console.log('=== 스크립트 생성 정보 ===');
-    console.log('API 키:', apiKey);
-    console.log('스크립트 URL:', `//dapi.kakao.com/v2/maps/sdk.js?appkey=${apiKey}&libraries=services`);
-    console.trace('스크립트 생성 위치');
-    
-    script.src = `//dapi.kakao.com/v2/maps/sdk.js?appkey=${apiKey}&libraries=services`;
-    script.async = true;
-    
-    console.log('스크립트 태그 생성 완료:', script);
-    console.log('스크립트 src:', script.src);
-    console.log('스크립트 async:', script.async);
-    console.log('스크립트 readyState:', script.readyState);
-    
-    script.onload = () => {
-      console.log('=== 스크립트 onload 이벤트 발생 ===');
-      console.trace('onload 콜백 스택');
-      console.log('카카오맵 스크립트 로드 완료');
-      
-      // 카카오맵 SDK의 공식적인 초기화 완료 감지 사용
-      if (window.kakao && window.kakao.maps) {
-        console.log('카카오맵 기본 객체 확인됨');
-        console.log('현재 readyState:', window.kakao.maps.readyState);
-        
-        // services 라이브러리가 로드되지 않은 경우 명시적으로 로드
-        if (!window.kakao.maps.services || Object.keys(window.kakao.maps.services).length === 0) {
-          console.log('services 라이브러리가 로드되지 않음, 명시적으로 로드 시도');
-          
-          // services.js 스크립트 직접 로드
-          const servicesScript = document.createElement('script');
-          servicesScript.src = '//t1.daumcdn.net/mapjsapi/js/libs/services/1.0.2/services.js';
-          servicesScript.async = true;
-          
-          servicesScript.onload = () => {
-            console.log('services.js 로드 완료');
-            // 약간의 지연 후 services 객체 확인
-            setTimeout(() => {
-              if (window.kakao.maps.services && window.kakao.maps.services.Geocoder) {
-                console.log('Geocoder 서비스 사용 가능 (명시적 로드 후)');
-                setIsApiReady(true);
-                setApiLoadingMessage('카카오맵 API 준비 완료!');
-              } else {
-                console.error('여전히 Geocoder 서비스를 찾을 수 없습니다');
-                setApiLoadingMessage('Geocoder 서비스 로드 실패');
-              }
-            }, 500);
-          };
-          
-          servicesScript.onerror = () => {
-            console.error('services.js 로드 실패');
-            setApiLoadingMessage('services 라이브러리 로드 실패');
-          };
-          
-          document.head.appendChild(servicesScript);
-          return;
+  const location = useLocation();
+  const [address, setAddress] = useState('');
+  const [addressName, setAddressName] = useState('');
+  
+  // URL state에서 draft 정보 받아오기
+  const draft = location.state?.draft || {};
+  const exhibitionData = draft.exhibitionData || {};
+  
+
+    const handleBack = () => {
+    // draft 데이터가 있으면 그대로 전달, 없으면 기존 방식 사용
+    if (draft && Object.keys(draft).length > 0) {
+      navigate('/exhibition/upload', {
+        state: {
+          draft: draft
         }
-        
-        // readyState가 2가 아니면 아직 로딩 중
-        if (window.kakao.maps.readyState !== 2) {
-          console.log('카카오맵 SDK 아직 로딩 중, load 콜백 등록');
-          
-          window.kakao.maps.load(() => {
-            console.log('=== 카카오맵 SDK 로딩 완료 ===');
-            console.log('최종 readyState:', window.kakao.maps.readyState);
-            console.log('사용 가능한 서비스들:', Object.keys(window.kakao.maps.services || {}));
-            
-            if (window.kakao.maps.services && window.kakao.maps.services.Geocoder) {
-              console.log('Geocoder 서비스 사용 가능');
-              setIsApiReady(true);
-              setApiLoadingMessage('카카오맵 API 준비 완료!');
-              console.log('API 상태 업데이트: 준비 완료');
-            } else {
-              console.error('Geocoder 서비스를 찾을 수 없습니다');
-              setApiLoadingMessage('Geocoder 서비스를 찾을 수 없습니다');
-            }
-          });
-        } else {
-          console.log('카카오맵 SDK 이미 로딩 완료됨');
-          console.log('사용 가능한 서비스들:', Object.keys(window.kakao.maps.services || {}));
-          
-          if (window.kakao.maps.services && window.kakao.maps.services.Geocoder) {
-            console.log('Geocoder 서비스 사용 가능 (이미 로딩됨)');
-            setIsApiReady(true);
-            setApiLoadingMessage('카카오맵 API 준비 완료!');
-          } else {
-            console.error('Geocoder 서비스를 찾을 수 없습니다 (이미 로딩됨)');
-            setApiLoadingMessage('Geocoder 서비스를 찾을 수 없습니다');
+      });
+    } else {
+      // 기존 방식 (하위 호환성)
+      const exhibitionData = location.state?.exhibitionData || {};
+      
+      navigate('/exhibition/upload', {
+        state: {
+          draft: {
+            exhibitionData: exhibitionData,
+            thumbnail: location.state?.thumbnail || null,
+            artworks: location.state?.artworks || [],
+            offlineLocation: location.state?.offlineLocation || null,
+            participants: location.state?.participants || [],
+            contactRegistered: location.state?.contactRegistered || false
           }
         }
-      } else {
-        console.error('카카오맵 기본 객체를 찾을 수 없습니다');
-      }
-    };
-    
-    script.onerror = (error) => {
-      console.error('=== 카카오맵 API 스크립트 로드 실패 ===');
-      console.trace('onerror 콜백 스택');
-      console.error('에러 객체:', error);
-      console.error('에러 타입:', error?.type);
-      console.error('에러 타겟:', error?.target);
-      console.error('에러 메시지:', error?.message);
-      alert('지도 API 로드에 실패했습니다. API 키와 도메인 설정을 확인해주세요.');
-    };
-    
-    console.log('=== 스크립트 DOM에 추가 ===');
-    console.trace('DOM 추가 위치');
-    document.head.appendChild(script);
-    console.log('스크립트가 DOM에 추가되었습니다.');
-    console.log('현재 head의 스크립트 태그들:', document.head.querySelectorAll('script[src*="kakao"]'));
-
-    return () => {
-      console.log('=== useEffect 정리 함수 실행 ===');
-      if (document.head.contains(script)) {
-        document.head.removeChild(script);
-        console.log('스크립트가 DOM에서 제거되었습니다.');
-      }
-    };
-  }, []);
-
-  const handleBack = () => {
-    if (currentStep > 1) {
-      setCurrentStep(currentStep - 1);
-    } else {
-      navigate('/exhibition/upload');
+      });
     }
   };
 
-  const handleSearch = async () => {
-    console.log('=== 검색 함수 호출 시작 ===');
-    console.trace('handleSearch 호출 스택');
-    
-    if (!searchQuery.trim()) {
-      console.log('검색어가 비어있습니다.');
-      return;
-    }
-    
-    console.log('검색어:', searchQuery);
-    console.log('API 준비 상태:', isApiReady);
-    
-    // API 상태 확인
-    if (!isApiReady) {
-      console.error('=== API 상태 확인 실패 ===');
-      console.trace('API 상태 확인 실패 위치');
-      console.error('isApiReady:', isApiReady);
-      alert('카카오맵 API가 아직 로드되지 않았습니다. 잠시만 기다려주세요.');
-      return;
-    }
-    
-    console.log('API 상태 확인 완료, 검색 시작');
-    setIsLoading(true);
-    
-    try {
-      // 카카오 주소 검색 API 사용
-      const results = await searchAddress(searchQuery);
-      console.log('검색 성공, 결과:', results);
-      setSearchResults(results);
-      setCurrentStep(2);
-    } catch (error) {
-      console.error('=== 주소 검색 실패 ===');
-      console.trace('주소 검색 실패 위치');
-      console.error('에러 객체:', error);
-      console.error('에러 메시지:', error.message);
-      console.error('에러 스택:', error.stack);
-      alert(error.message || '주소 검색에 실패했습니다. 잠시 후 다시 시도해주세요.');
-    } finally {
-      setIsLoading(false);
-      console.log('검색 완료, 로딩 상태 해제');
-    }
-  };
-
-  // 카카오 주소 검색 함수
-  const searchAddress = async (query) => {
-    console.log('=== searchAddress 함수 호출 ===');
-    console.trace('searchAddress 호출 스택');
-    console.log('검색 쿼리:', query);
-    
-    return new Promise((resolve, reject) => {
-      try {
-        console.log('=== Geocoder 서비스 사용 시작 ===');
-        console.log('window.kakao.maps.services.Geocoder 생성 시도');
-        
-        if (!window.kakao.maps.services.Geocoder) {
-          console.error('Geocoder 생성자 함수가 존재하지 않습니다.');
-          console.log('window.kakao.maps.services의 사용 가능한 키들:', Object.keys(window.kakao.maps.services));
-          reject(new Error('Geocoder 서비스를 사용할 수 없습니다.'));
-          return;
+  const handleComplete = () => {
+    // draft 데이터가 있으면 기존 데이터에 오프라인 장소만 추가, 없으면 새로 생성
+    if (draft && Object.keys(draft).length > 0) {
+      const updatedDraft = {
+        ...draft,
+        offlineLocation: {
+          address,
+          addressName,
+          offlineDescription: address // 주소를 설명으로도 사용
         }
-        
-        const geocoder = new window.kakao.maps.services.Geocoder();
-        console.log('Geocoder 인스턴스 생성 성공:', geocoder);
-        
-        console.log('addressSearch 메서드 호출 시작');
-        geocoder.addressSearch(query, (result, status) => {
-          console.log('=== addressSearch 콜백 실행 ===');
-          console.log('검색 결과:', result);
-          console.log('검색 상태:', status);
-          console.log('결과 타입:', typeof result);
-          console.log('결과 길이:', Array.isArray(result) ? result.length : '배열이 아님');
-          
-          if (status === window.kakao.maps.services.Status.OK) {
-            console.log('검색 성공, 결과 변환 시작');
-            const addresses = result.map((item, index) => {
-              console.log(`결과 ${index}번째 아이템:`, item);
-              return {
-                id: item.id,
-                roadName: item.road_address?.address_name || item.address_name,
-                address: item.address_name,
-                buildingName: item.road_address?.building_name || '',
-                zoneNumber: item.road_address?.zone_no || '',
-                detailAddress: item.address_name,
-                x: item.x,
-                y: item.y
-              };
-            });
-            console.log('변환된 주소:', addresses);
-            resolve(addresses);
-          } else {
-            console.error('=== 검색 실패 ===');
-            console.error('실패 상태:', status);
-            console.error('실패 상태 타입:', typeof status);
-            reject(new Error(`주소를 찾을 수 없습니다. (상태: ${status})`));
+      };
+      
+      navigate('/exhibition/upload', {
+        state: {
+          draft: updatedDraft
+        }
+      });
+    } else {
+      // 기존 방식 (하위 호환성)
+      const exhibitionData = location.state?.exhibitionData || {};
+      
+      navigate('/exhibition/upload', {
+        state: {
+          draft: {
+            exhibitionData,
+            thumbnail: location.state?.thumbnail || null,
+            artworks: location.state?.artworks || [],
+            offlineLocation: {
+              address,
+              addressName,
+            },
+            participants: location.state?.participants || [],
+            contactRegistered: location.state?.contactRegistered || false
           }
-        });
-      } catch (error) {
-        console.error('=== Geocoder 사용 중 오류 ===');
-        console.trace('Geocoder 오류 위치');
-        console.error('에러 객체:', error);
-        console.error('에러 메시지:', error.message);
-        console.error('에러 스택:', error.stack);
-        reject(new Error(`주소 검색 중 오류가 발생했습니다: ${error.message}`));
-      }
-    });
-  };
-
-  const handleLocationSelect = (location) => {
-    setSelectedLocation(location);
-    setCurrentStep(3);
-  };
-
-  const handleComplete = () => {
-    // 여기에 완료 로직 추가
-    console.log('오프라인 장소 등록 완료:', {
-      location: selectedLocation,
-      description: exhibitionDescription
-    });
-    navigate('/exhibition/upload');
+        }
+      });
+    }
   };
 
-  const renderSearchStep = () => (
-    <>
-      <div className={styles.searchSection}>
-        <div className={styles.searchInput}>
-          <input
-            type="text"
-            placeholder="도로명, 건물명, 지번 입력"
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            onKeyPress={(e) => e.key === 'Enter' && handleSearch()}
-            className={styles.searchField}
-            disabled={!isApiReady}
-          />
-          <button 
-            className={styles.searchButton} 
-            onClick={handleSearch} 
-            disabled={isLoading || !isApiReady}
-          >
-            <img src={searchIcon} alt="search" />
-          </button>
-        </div>
-        {isLoading && <div className={styles.loadingText}>검색 중...</div>}
-      </div>
-      
-      <div className={styles.exampleSection}>
-        <h3 className={styles.exampleTitle}>입력 예시</h3>
-        <div className={styles.exampleText}>
-          <p className={styles.label}>도로명+ 건물번호</p>
-          <p className={styles.value}>남대문로 9길 40</p>
-          <br />
-          <p className={styles.label}>지역명(동/리) + 번지</p>
-          <p className={styles.value}>중구 다동 155</p>
-          <br />
-          <p className={styles.label}>지역명(동/리)+ 건물명</p>
-          <p className={styles.value}>분당 주공</p>
-        </div>
-      </div>
-    </>
-  );
-
-  const renderResultStep = () => (
-    <div className={styles.resultSection}>
-      <div className={styles.locationResults}>
-        {searchResults.length > 0 ? (
-          searchResults.map((location, index) => (
-            <div 
-              key={location.id || index} 
-              className={styles.locationItem} 
-              onClick={() => handleLocationSelect(location)}
-            >
-              <div className={styles.locationLabel}>도로명</div>
-              <div className={styles.locationValue}>
-                {location.roadName || location.address}
-              </div>
-              <div className={styles.locationLabel}>지번</div>
-              <div className={styles.locationValue}>
-                {location.detailAddress}
-              </div>
-              {location.buildingName && (
-                <>
-                  <div className={styles.locationLabel}>건물명</div>
-                  <div className={styles.locationValue}>
-                    {location.buildingName}
-                  </div>
-                </>
-              )}
-            </div>
-          ))
-        ) : (
-          <div className={styles.noResults}>
-            검색 결과가 없습니다. 다른 키워드로 검색해보세요.
-          </div>
-        )}
-      </div>
-    </div>
-  );
-
-  const renderDescriptionStep = () => (
-    <div className={styles.descriptionSection}>
-      <div className={styles.selectedLocation}>
-        <div className={styles.locationLabel}>도로명</div>
-        <div className={styles.locationValue}>{selectedLocation?.roadName || selectedLocation?.address}</div>
-        <div className={styles.locationLabel}>지번</div>
-        <div className={styles.locationValue}>{selectedLocation?.detailAddress}</div>
-        {selectedLocation?.buildingName && (
-          <>
-            <div className={styles.locationLabel}>건물명</div>
-            <div className={styles.locationValue}>{selectedLocation.buildingName}</div>
-          </>
-        )}
+  const renderAddressInput = () => (
+    <div className={styles.addressSection}>
+      <div className={styles.addressInput}>
+        <label className={styles.inputLabel}>주소</label>
+        <textarea
+          placeholder="도로명, 건물명, 지번을 입력해주세요."
+          value={address}
+          onChange={(e) => setAddress(e.target.value)}
+          maxLength={100}
+          className={styles.addressField}
+        />
       </div>
-      
-      <div className={styles.descriptionInput}>
+      <div className={styles.addressInput}>
+        <label className={styles.inputLabel}>건물명</label>
         <textarea
-          placeholder="오프라인 전시에 대한 소개를 작성해보세요&#10;(최대 500자)"
-          value={exhibitionDescription}
-          onChange={(e) => setExhibitionDescription(e.target.value)}
-          maxLength={500}
-          className={styles.descriptionField}
+          placeholder="건물명을 입력해주세요."
+          value={addressName}
+          onChange={(e) => setAddressName(e.target.value)}
+          maxLength={50}
+          className={styles.addressField}
         />
       </div>
     </div>
@@ -410,23 +121,20 @@ export default function OfflineLocationPage() {
       </div>
 
       <div className={styles.content}>
-        {currentStep === 1 && renderSearchStep()}
-        {currentStep === 2 && renderResultStep()}
-        {currentStep === 3 && renderDescriptionStep()}
+        <div style={{height: '10px'}}></div>
+        {renderAddressInput()}
       </div>
 
       {/* 하단 버튼 */}
-      {currentStep === 3 && (
-        <div className={styles.bottomButton}>
-          <button 
-            className={styles.completeButton}
-            onClick={handleComplete}
-            disabled={!exhibitionDescription.trim()}
-          >
-            등록 완료하기
-          </button>
-        </div>
-      )}
+      <div className={styles.bottomButton}>
+                 <button 
+           className={styles.completeButton}
+           onClick={handleComplete}
+           disabled={!address.trim() || !addressName.trim()}
+         >
+          등록 완료하기
+        </button>
+      </div>
     </div>
   );
 }
diff --git a/src/components/museum/pages/SharedLibraryEntryPage.jsx b/src/components/museum/pages/SharedLibraryEntryPage.jsx
new file mode 100644
index 0000000..6d0c59b
--- /dev/null
+++ b/src/components/museum/pages/SharedLibraryEntryPage.jsx
@@ -0,0 +1,415 @@
+import { useState, useEffect } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import chevronLeft from '@/assets/museum/chevron-left.png';
+import cameraIcon from '@/assets/user/camera.png';
+import plusCircleIcon from '@/assets/museum/plus-circle.png';
+import ExhibitionArtworkModal from '@museum/components/exhibition/ExhibitionArtworkModal';
+import styles from './sharedLibraryEntryPage.module.css';
+
+export default function SharedLibraryEntryPage() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  
+  // 선택된 공유 라이브러리 정보
+  const { selectedLibrary } = location.state || {};
+  
+  
+  // 로컬 상태로 관리 (공유 라이브러리 작품 정보)
+  const [sharedLibraryData, setSharedLibraryData] = useState({
+    title: selectedLibrary?.name || '공유 라이브러리',
+    description: '',
+    startDate: null,
+    endDate: null,
+    totalDays: 0
+  });
+
+  // 모달 상태 추가
+  const [isArtworkModalOpen, setIsArtworkModalOpen] = useState(false);
+  const [currentArtworkIndex, setCurrentArtworkIndex] = useState(0);
+  const [isChangeMode, setIsChangeMode] = useState(false);
+  
+  // 썸네일 및 작품 상태
+  const [thumbnail, setThumbnail] = useState(null);
+  const [artworks, setArtworks] = useState([]); // 작품 객체 배열
+
+  const handleBack = () => {
+    navigate('/exhibition/shared-library-selection');
+  };
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setSharedLibraryData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  // 작품 라이브러리에서 돌아왔을 때 선택된 작품들 처리
+  useEffect(() => {
+    if (location.state?.returnFromLibrary && location.state?.selectedArtworks) {
+      const { selectedArtworks, artworkIndex, isThumbnail, draft } = location.state;
+      
+      console.log('라이브러리에서 선택된 작품들:', selectedArtworks);
+      console.log('복원할 draft:', draft);
+      
+      // 먼저 draft에서 상태 복원
+      if (draft) {
+        if (draft.sharedLibraryData) {
+          setSharedLibraryData(prev => ({
+            ...prev,
+            ...draft.sharedLibraryData
+          }));
+        }
+        if (draft.thumbnail) setThumbnail(draft.thumbnail);
+        if (draft.artworks) setArtworks(draft.artworks);
+      }
+      
+      // 그 다음 선택된 작품 처리
+      if (isThumbnail) {
+        // 썸네일로 선택된 경우
+        if (selectedArtworks.length > 0) {
+          setThumbnail(selectedArtworks[0]);
+        }
+      } else {
+        // 공유 라이브러리 작품으로 선택된 경우
+        if (artworkIndex !== undefined) {
+          // 특정 인덱스에 작품 추가/교체
+          if (artworkIndex >= 0) {
+            if (artworkIndex < artworks.length) {
+              // 기존 작품 교체
+              updateArtwork(artworkIndex, selectedArtworks[0]);
+            } else {
+              // 새 작품 추가
+              addArtwork(selectedArtworks[0]);
+            }
+          } else {
+            // 새 작품 추가
+            addArtwork(selectedArtworks[0]);
+          }
+        } else {
+          // 여러 작품 추가
+          selectedArtworks.forEach(artwork => {
+            addArtwork(artwork);
+          });
+        }
+      }
+    }
+  }, [location.state]);
+
+  // draft에서 상태 복원
+  useEffect(() => {
+    if (location.state?.draft) {
+      const draft = location.state.draft;
+      
+      if (draft.sharedLibraryData) {
+        setSharedLibraryData(prev => ({
+          ...prev,
+          ...draft.sharedLibraryData
+        }));
+      }
+      
+      if (draft.thumbnail) setThumbnail(draft.thumbnail);
+      if (draft.artworks) setArtworks(draft.artworks);
+    }
+  }, [location.state]);
+
+  // 새 작품 등록 페이지에서 돌아왔을 때 처리
+  useEffect(() => {
+    if (location.state?.returnFromArtworkUpload && location.state?.draft) {
+      const { draft, newArtwork, isThumbnail } = location.state;
+      
+      console.log('새 작품 등록 후 복원 데이터:', { draft, newArtwork, isThumbnail });
+      
+      // draft에서 상태 복원
+      if (draft) {
+        if (draft.sharedLibraryData) {
+          setSharedLibraryData(prev => ({
+            ...prev,
+            ...draft.sharedLibraryData
+          }));
+        }
+        if (draft.thumbnail) setThumbnail(draft.thumbnail);
+        if (draft.artworks) setArtworks(draft.artworks);
+      }
+      
+      // 새로 등록된 작품 처리
+      if (newArtwork) {
+        if (isThumbnail) {
+          setThumbnail(newArtwork);
+        } else {
+          addArtwork(newArtwork);
+        }
+      }
+    }
+  }, [location.state]);
+
+  const handleThumbnailChange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      setThumbnail(file);
+    }
+  };
+
+  // 공유 라이브러리 작품 등록 모달 열기
+  const openArtworkModal = (index) => {
+    setCurrentArtworkIndex(index);
+    setIsChangeMode(false);
+    setIsArtworkModalOpen(true);
+  };
+
+  // 공유 라이브러리 작품 변경 모달 열기
+  const openChangeArtworkModal = (index) => {
+    setCurrentArtworkIndex(index);
+    setIsChangeMode(true);
+    setIsArtworkModalOpen(true);
+  };
+
+  // 새 작품 등록 처리
+  const handleNewArtwork = (file) => {
+    if (currentArtworkIndex === -1) {
+      // 썸네일인 경우
+      setThumbnail(file);
+    } else {
+      // 작품인 경우
+      if (isChangeMode) {
+        // 변경 모드: 해당 인덱스의 작품만 수정
+        updateArtwork(currentArtworkIndex, file);
+      } else {
+        // 새로 추가 모드: 작품 추가
+        addArtwork(file);
+      }
+    }
+  };
+
+  // 새 작품 등록 페이지로 이동
+  const handleNewArtworkPage = () => {
+    navigate('/artwork/upload', {
+      state: {
+        fromSharedLibrary: true,
+        currentArtworkIndex: currentArtworkIndex,
+        isChangeMode,
+        returnTo: 'shared-library-entry',
+        draft: buildDraft() // 현재 상태를 draft로 전달
+      }
+    });
+  };
+
+  // 현재 입력 상태를 하나로 묶어 라우팅 state로 넘길 draft
+  const buildDraft = () => {
+    const draft = {
+      sharedLibraryData,
+      thumbnail,
+      artworks,
+      startDate: sharedLibraryData.startDate || null,
+      endDate: sharedLibraryData.endDate || null,
+      totalDays: sharedLibraryData.totalDays
+    };
+    
+    console.log('buildDraft 호출됨:', draft);
+    return draft;
+  };
+
+  // 작품 라이브러리에서 가져오기 처리
+  const handleLoadFromLibrary = () => {
+    // 작품 라이브러리 페이지로 이동
+    navigate('/artwork/library', {
+      state: {
+        fromSharedLibrary: true,
+        currentArtworkIndex,
+        isChangeMode,
+        draft: buildDraft() // 현재 상태를 draft로 전달
+      }
+    });
+  };
+
+  // 작품 추가/수정/삭제
+  const addArtwork = (artwork) => setArtworks(prev => [...prev, artwork]);
+  const updateArtwork = (index, artwork) => {
+    setArtworks(prev => {
+      const next = [...prev];
+      next[index] = artwork;
+      return next;
+    });
+  };
+  
+  // 작품 제거 처리
+  const removeArtwork = (index) => {
+    setArtworks(prev => prev.filter((_, i) => i !== index));
+  };
+
+  // 공유 라이브러리 작품 슬라이드 렌더링
+  const renderArtworkSlides = () => {
+    const slides = [];
+    
+    // 기존 작품들 렌더링
+    artworks.forEach((artwork, index) => {
+      slides.push(
+        <div key={`artwork-${index}`} className={styles.artworkSlide}>
+          <div className={styles.artworkImageContainer}>
+            {artwork ? (
+              <div className={styles.artworkImageWrapper}>
+                <img 
+                  src={artwork.imageUrl || artwork} 
+                  alt={`작품 ${index + 1}`} 
+                  className={styles.artworkImage}
+                />
+                <button 
+                  className={styles.changeButton}
+                  onClick={() => openChangeArtworkModal(index)}
+                >
+                  변경
+                </button>
+                <button 
+                  className={styles.removeButton}
+                  onClick={() => removeArtwork(index)}
+                >
+                  삭제
+                </button>
+              </div>
+            ) : (
+              <div 
+                className={styles.imagePlaceholder}
+                onClick={() => openArtworkModal(index)}
+                style={{ cursor: 'pointer' }}
+              >
+                <img src={plusCircleIcon} alt="plus" className={styles.plusIcon} />
+                <p className={styles.placeholderText}>
+                  공유 라이브러리 작품을 등록해주세요<br />
+                  (선택)
+                </p>
+              </div>
+            )}
+          </div>
+        </div>
+      );
+    });
+    
+    // 새 작품 추가 버튼 (최대 10개)
+    if (artworks.length < 10) {
+      slides.push(
+        <div key="add-artwork" className={styles.artworkSlide}>
+          <div className={styles.artworkImageContainer}>
+            <div 
+              className={styles.imagePlaceholder}
+              onClick={() => openArtworkModal(artworks.length)}
+              style={{ cursor: 'pointer' }}
+            >
+              <img src={plusCircleIcon} alt="plus" className={styles.plusIcon} />
+              <p className={styles.placeholderText}>
+                공유 라이브러리 작품을 등록해주세요<br />
+                (선택)
+              </p>
+            </div>
+          </div>
+        </div>
+      );
+    }
+    
+    return slides;
+  };
+
+  return (
+    <div className={styles.container}>
+      {/* 헤더 */}
+      <div className={styles.header}>
+        <div className={styles.headerLeft}>
+          <button className={styles.backButton} onClick={handleBack}>
+            <img src={chevronLeft} alt="뒤로가기" className={styles.backIcon} />
+          </button>
+          <h1 className={styles.title}>공유 라이브러리</h1>
+        </div>
+      </div>
+
+      <div className={styles.form}>
+        {/* 공유 라이브러리 썸네일 및 작품 등록 */}
+        <div className={styles.artworkSection}>
+          <h2 className={styles.sectionTitle}>공유 라이브러리 작품 등록</h2>
+          <div className={styles.artworkSlideContainer}>
+            {/* 공유 라이브러리 썸네일 */}
+            <div className={styles.artworkSlide}>
+              <div className={styles.artworkImageContainer}>
+                {thumbnail ? (
+                  <div className={styles.artworkImageWrapper}>
+                    <img 
+                      src={thumbnail instanceof File ? URL.createObjectURL(thumbnail) : (thumbnail.imageUrl || thumbnail)} 
+                      alt="공유 라이브러리 썸네일" 
+                      className={styles.artworkImage}
+                    />
+                    <button 
+                      className={styles.changeButton}
+                      onClick={() => openChangeArtworkModal(-1)}
+                    >
+                      변경
+                    </button>
+                  </div>
+                ) : (
+                  <div 
+                    className={styles.imagePlaceholder}
+                    onClick={() => openArtworkModal(-1)} // -1은 썸네일을 의미
+                    style={{ cursor: 'pointer' }}
+                  >
+                    <img src={cameraIcon} alt="camera" className={styles.cameraIcon} />
+                    <p className={styles.placeholderText}>
+                      공유 라이브러리 썸네일을 등록해주세요<br />
+                      (필수)
+                    </p>
+                  </div>
+                )}
+              </div>
+            </div>
+
+            {/* 공유 라이브러리 작품 슬라이드 (동적으로 생성) */}
+            {renderArtworkSlides()}
+          </div>
+        </div>
+
+        {/* 공유 라이브러리명 입력 */}
+        <div className={styles.inputGroup}>
+          <input
+            type="text"
+            name="title"
+            value={sharedLibraryData.title}
+            onChange={handleInputChange}
+            placeholder="공유 라이브러리명을 작성하세요"
+            className={styles.titleInput}
+          />
+        </div>
+
+        {/* 공유 라이브러리 소개 입력 */}
+        <div className={styles.inputGroup}>
+          <textarea
+            name="description"
+            value={sharedLibraryData.description}
+            onChange={handleInputChange}
+            placeholder="공유 라이브러리 소개를 작성하세요. (최대 500자)"
+            className={styles.descriptionInput}
+            rows={15}
+            maxLength={500}
+          />
+        </div>
+
+        {/* 하단 고정 버튼 */}
+        <div className={styles.bottomButtonContainer}>
+          <button 
+            className={styles.enterButton}
+            onClick={() => navigate('/artwork/library')}
+          >
+            작품 등록하기
+          </button>
+        </div>
+      </div>
+
+      {/* 공유 라이브러리 작품 등록 모달 */}
+      <ExhibitionArtworkModal
+        isOpen={isArtworkModalOpen}
+        onClose={() => setIsArtworkModalOpen(false)}
+        onNewArtwork={handleNewArtworkPage}
+        onLoadFromLibrary={handleLoadFromLibrary}
+        isThumbnail={currentArtworkIndex === -1}
+        isChangeMode={isChangeMode}
+        currentDraft={buildDraft()} // 현재 상태를 모달에 전달
+        returnTo="shared-library-entry" // 돌아올 페이지 지정
+      />
+    </div>
+  );
+}
diff --git a/src/components/museum/pages/SharedLibrarySelectionPage.jsx b/src/components/museum/pages/SharedLibrarySelectionPage.jsx
new file mode 100644
index 0000000..6f42ac8
--- /dev/null
+++ b/src/components/museum/pages/SharedLibrarySelectionPage.jsx
@@ -0,0 +1,91 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import chevronLeft from '@/assets/museum/chevron-left.png';
+import styles from './sharedLibrarySelectionPage.module.css';
+
+export default function SharedLibrarySelectionPage() {
+  const navigate = useNavigate();
+  
+  // 상태 관리
+  const [sharedLibraries, setSharedLibraries] = useState([]);
+
+  // 더미 공유 라이브러리 데이터 (실제로는 API에서 가져올 예정)
+  const dummyLibraries = [
+    {
+      id: 1,
+      name: '2025 성북구 작가 단체전',
+      image: null,
+      status: 'available'
+    },
+    {
+      id: 2,
+      name: '2025 성북구 작가 단체전',
+      image: null,
+      status: 'available'
+    }
+  ];
+
+  useEffect(() => {
+    // 공유 라이브러리 목록 가져오기 (실제로는 API 호출)
+    setSharedLibraries(dummyLibraries);
+  }, []);
+
+  const handleBack = () => {
+    navigate('/museum');
+  };
+
+  const handleLibrarySelect = (library) => {
+    // 선택된 공유 라이브러리로 입장
+    console.log('입장할 라이브러리:', library);
+    
+    // TODO: API 호출로 라이브러리 입장 처리
+    
+    // 공유 라이브러리 입장 페이지로 이동
+    navigate('/exhibition/shared-library-entry', {
+      state: { selectedLibrary: library }
+    });
+  };
+
+  return (
+    <div className={styles.container}>
+      {/* 헤더 */}
+      <div className={styles.header}>
+        <div className={styles.headerLeft}>
+          <button className={styles.backButton} onClick={handleBack}>
+            <img src={chevronLeft} alt="뒤로가기" className={styles.backIcon} />
+          </button>
+          <h1 className={styles.title}>공유 라이브러리 선택</h1>
+        </div>
+      </div>
+
+      {/* 안내 메시지 */}
+      <div className={styles.infoMessage}>
+        <span>입장하고 싶은 공유라이브러리를 선택해주세요</span>
+      </div>
+
+      {/* 공유 라이브러리 목록 */}
+      <div className={styles.libraryList}>
+        {sharedLibraries.map((library) => (
+          <div
+            key={library.id}
+            className={styles.libraryCard}
+            onClick={() => handleLibrarySelect(library)}
+          >
+            <div className={styles.libraryInfo}>
+              <div className={styles.libraryImage}>
+                {library.image ? (
+                  <img src={library.image} alt="라이브러리 이미지" />
+                ) : (
+                  <div className={styles.defaultImage} />
+                )}
+              </div>
+              <div className={styles.libraryDetails}>
+                <span className={styles.libraryName}>{library.name}</span>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/museum/pages/artworkUploadPage.module.css b/src/components/museum/pages/artworkUploadPage.module.css
index 93e4841..06fa326 100644
--- a/src/components/museum/pages/artworkUploadPage.module.css
+++ b/src/components/museum/pages/artworkUploadPage.module.css
@@ -99,8 +99,6 @@
   margin-bottom: 8px;
 }
 
-
-
 .imageSlideContainer {
   display: flex;
   gap: 8px;
@@ -334,13 +332,16 @@
 .submitButtonContainer {
   position: fixed;
   bottom: 20px;
-  left: 50%;
-  transform: translateX(-50%);
+  left: 0;
+  right: 0;
   z-index: 1000;
+  padding: 0 32px;
+  max-width: 430px;
+  margin: 0 auto;
 }
 
 .submitButton {
-  width: 366px;
+  width: 100%;
   height: 48px;
   background: #f37021;
   border: 1px solid #000;
diff --git a/src/components/museum/pages/exhibitionInvitationPage.module.css b/src/components/museum/pages/exhibitionInvitationPage.module.css
new file mode 100644
index 0000000..ab3f411
--- /dev/null
+++ b/src/components/museum/pages/exhibitionInvitationPage.module.css
@@ -0,0 +1,166 @@
+.container {
+  min-height: 100vh;
+  background-color: #f6f1eb;
+  padding: 0 32px 100px;
+  position: relative;
+  max-width: 430px;
+  margin: 0 auto;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 0;
+  margin-bottom: 20px;
+}
+
+.headerLeft {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.backButton {
+  background: #f37021;
+  border: none;
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.backIcon {
+  width: 44px;
+  height: 44px;
+}
+
+.title {
+  font-family: 'Pretendard', sans-serif;
+  font-weight: 600;
+  font-size: 20px;
+  color: #000000;
+  margin: 0;
+  line-height: 25px;
+  letter-spacing: -0.5px;
+}
+
+.invitationList {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 40px;
+}
+
+.invitationCard {
+  background-color: #cfdde3;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 2px solid transparent;
+}
+
+.exhibitionInfo {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex: 1;
+}
+
+.exhibitionImage {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  background-color: #eeeeee;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.defaultImage {
+  width: 100%;
+  height: 100%;
+  background-color: #cccccc;
+}
+
+.exhibitionDetails {
+  display: flex;
+  flex-direction: column;
+  flex: 1;  
+}
+
+.exhibitionTitle {
+  font-family: 'Pretendard', sans-serif;
+  font-weight: 600;
+  font-size: 16px;
+  color: #000000;
+  line-height: 26px;
+  letter-spacing: -0.4px;
+}
+
+.customCheckbox {
+  width: 32px;
+  height: 32px;
+  border: 2px solid #f37021;
+  background-color: #f6f1eb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: all 0.2s ease;
+}
+
+.customCheckbox:hover {
+  background-color: #f0e6e0;
+}
+
+.customCheckbox.checked {
+  background-color: #f37021;
+  border-color: #f37021;
+}
+
+.checkIcon {
+  width: 24px;
+  height: 24px;
+  object-fit: contain;
+}
+
+.acceptButton {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  max-width: 344px;
+  height: 48px;
+  background: #e05a1a;
+  border: none;
+  font-family: 'Pretendard', sans-serif;
+  font-weight: 500;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  letter-spacing: -0.4px;
+  line-height: 25px;
+  z-index: 1000;
+}
+
+.acceptButton:hover:not(.disabledButton) {
+  background-color: #e05a1a;
+  transform: translateX(-50%) translateY(-1px);
+}
+
+.acceptButton.disabledButton {
+  color: #000;
+  background: #F6F1EB;
+  border: 1px solid #000;
+}
diff --git a/src/components/museum/pages/exhibitionParticipantPage.module.css b/src/components/museum/pages/exhibitionParticipantPage.module.css
index 25b91f4..f9ddfe3 100644
--- a/src/components/museum/pages/exhibitionParticipantPage.module.css
+++ b/src/components/museum/pages/exhibitionParticipantPage.module.css
@@ -9,7 +9,7 @@
 
 /* 헤더 */
 .header {
-  padding: 10px 0 20px;
+  padding: 10px 0 36px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -21,11 +21,6 @@
   gap: 16px;
 }
 
-.headerRight {
-  display: flex;
-  align-items: center;
-}
-
 .backButton {
   background: none;
   border: none;
@@ -52,91 +47,104 @@
   margin: 0;
 }
 
+/* 검색창 */
 .searchContainer {
-  margin: 0 32px 32px 32px;
+  margin-bottom: 20px;
 }
 
-.searchInput {
-  width: 100%;
-  height: 48px;
+.searchBox {
+  display: flex;
+  align-items: center;
   background-color: #f6f1eb;
   border: 1px solid #f37021;
   border-radius: 0;
-  padding: 12px 20px;
+  height: 48px;
+  padding: 0 20px;
+  position: relative;
+}
+
+.searchInput {
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: #f37021;
+  font-family: 'Pretendard', sans-serif;
   font-size: 16px;
   font-weight: 500;
-  font-style: normal;
   line-height: 19px;
   letter-spacing: -0.4px;
-  color: #f37021;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+  outline: none;
 }
 
 .searchInput::placeholder {
   color: #f37021;
+  opacity: 1;
 }
 
 .searchIcon {
   width: 24px;
   height: 24px;
-  object-fit: contain;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.instructionText {
+.searchIcon img {
+  width: 24px;
+  height: 24px;
+}
+
+/* 안내 메시지 */
+.infoText {
   text-align: center;
+  color: #434343;
+  font-family: 'Pretendard', sans-serif;
   font-size: 14px;
   font-weight: 500;
-  font-style: normal;
   line-height: 25px;
   letter-spacing: -0.35px;
-  color: #434343;
-  margin: 0 32px 16px 32px;
+  margin: 16px 0 20px 0;
 }
 
-.participantList {
-  margin: 0 32px;
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
+/* 사용자 목록 */
+.userList {
+  margin-bottom: 20px;
 }
 
-.participantCard {
-  width: 100%;
-  height: 63px;
+.userCard {
   background-color: #cfdde3;
+  border: none;
   border-radius: 0;
   padding: 12px 20px;
-  display: flex;
-  align-items: center;
-  gap: 16px;
+  margin-bottom: 8px;
   cursor: pointer;
   transition: background-color 0.2s ease;
+  height: 63px;
+  display: flex;
+  align-items: center;
 }
 
-.participantCard.selected {
-  background-color: #f37021;
+.userCard:hover {
+  background-color: #b8c9d1;
 }
 
-.participantCard:hover {
-  background-color: #e0e8ed;
+.userCard.selected {
+  background-color: #f37021;
 }
 
-.participantCard.selected:hover {
-  background-color: #e65a1a;
+.userInfo {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  width: 100%;
 }
 
 .profileImage {
   width: 42px;
   height: 42px;
   border-radius: 50%;
-  background-color: #eeeeee;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   overflow: hidden;
+  flex-shrink: 0;
 }
 
 .profileImage img {
@@ -145,23 +153,74 @@
   object-fit: cover;
 }
 
-.participantInfo {
+.defaultProfile {
+  width: 100%;
+  height: 100%;
+  background-color: #eeeeee;
+}
+
+.userDetails {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
   flex: 1;
 }
 
-.participantName {
+.displayName {
+  font-family: 'Pretendard', sans-serif;
   font-size: 20px;
   font-weight: 600;
-  font-style: normal;
   line-height: 26px;
   letter-spacing: -0.5px;
   color: #000;
-  margin: 0;
 }
 
-.bottomButton {
+.username {
+  font-family: 'Pretendard', sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 19px;
+  letter-spacing: -0.4px;
+  color: #666;
+}
+
+.userCard.selected .displayName,
+.userCard.selected .username {
+  color: #000;
+}
+
+/* 선택된 참여자 목록 */
+.selectedList {
+  margin-bottom: 20px;
+}
+
+.selectedTitle {
+  font-family: 'Pretendard', sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+  color: #000;
+  margin: 0 0 12px 0;
+}
+
+.selectedList .userCard {
+  background-color: #f37021;
+}
+
+.selectedList .userCard:hover {
+  background-color: #e05a0a;
+}
+
+.selectedList .userCard .displayName,
+.selectedList .userCard .username {
+  color: #000;
+}
+
+/* 등록 완료 버튼 */
+.completeButton {
   position: fixed;
-  bottom: 32px;
+  bottom: 24px;
   left: 50%;
   transform: translateX(-50%);
   width: 344px;
@@ -169,72 +228,60 @@
   background-color: #f37021;
   border: 1px solid #000;
   border-radius: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
+  color: #000;
+  font-family: 'Pretendard', sans-serif;
   font-size: 16px;
   font-weight: 500;
-  font-style: normal;
   line-height: 25px;
   letter-spacing: -0.4px;
-  color: #000;
+  cursor: pointer;
   transition: background-color 0.2s ease;
 }
 
-.bottomButton:hover {
-  background-color: #e65a1a;
+.completeButton:hover:not(:disabled) {
+  background-color: #e05a0a;
 }
 
-.bottomButton:disabled {
-  background-color: #cccccc;
+.completeButton:disabled {
+  background-color: #f6f1eb;
   cursor: not-allowed;
+  color: #989898;
+  opacity: 0.6;
 }
 
-.notificationBanner {
+/* 성공 모달 */
+.successModal {
   position: fixed;
   bottom: 100px;
   left: 50%;
   transform: translateX(-50%);
-  width: 312px;
-  height: 32px;
+  z-index: 1000;
+  animation: slideUp 0.3s ease-out;
+}
+
+.successMessage {
   background-color: #cfdde3;
   border: 1px solid #000;
+  padding: 8px 20px;
   border-radius: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  font-family: 'Pretendard', sans-serif;
   font-size: 12px;
   font-weight: 400;
-  font-style: normal;
   line-height: 16px;
   letter-spacing: -0.3px;
   color: #000;
   text-align: center;
-  padding: 0 20px;
+  white-space: nowrap;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
 }
 
-/* 반응형 디자인 */
-@media (max-width: 480px) {
-  .header {
-    padding: 16px 24px;
-  }
-  
-  .searchContainer {
-    margin: 0 24px 24px 24px;
-  }
-  
-  .participantList {
-    margin: 0 24px;
-  }
-  
-  .bottomButton {
-    width: calc(100% - 48px);
-    max-width: 344px;
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(20px);
   }
-  
-  .notificationBanner {
-    width: calc(100% - 48px);
-    max-width: 312px;
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
   }
 }
diff --git a/src/components/museum/pages/exhibitionUploadPage.module.css b/src/components/museum/pages/exhibitionUploadPage.module.css
index 6542da9..ba7d348 100644
--- a/src/components/museum/pages/exhibitionUploadPage.module.css
+++ b/src/components/museum/pages/exhibitionUploadPage.module.css
@@ -93,6 +93,90 @@
   scroll-snap-align: start;
 }
 
+/* 전시 작품 섹션 */
+.artworkSection {
+  margin-bottom: 20px;
+}
+
+.sectionTitle {
+  font-family: 'Pretendard', sans-serif;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 23px;
+  letter-spacing: -0.45px;
+  color: #000;
+  margin: 0 0 16px 0;
+}
+
+.artworkSlideContainer {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  padding-bottom: 8px;
+}
+
+.artworkSlideContainer::-webkit-scrollbar {
+  display: none;
+}
+
+.artworkSlide {
+  flex: 0 0 auto;
+  scroll-snap-align: start;
+}
+
+.artworkImageContainer {
+  width: 224px;
+  height: 224px;
+  background-color: #d9d9d9;
+  border: 1px solid #000;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.artworkImageWrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.artworkImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.changeButton {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: #f37021;
+  border: 1px solid #000;
+  color: #000;
+  padding: 4px 8px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  z-index: 10;
+}
+
+.removeButton {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: #ff4444;
+  border: 1px solid #000;
+  color: #fff;
+  padding: 4px 8px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  z-index: 10;
+}
+
 .imageUploadBox {
   width: 224px;
   height: 224px;
@@ -141,6 +225,17 @@
   cursor: pointer;
 }
 
+.placeholderText {
+  font-family: 'Pretendard', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+  letter-spacing: -0.35px;
+  color: #434343;
+  margin: 8px 0 0 0;
+  text-align: center;
+}
+
 .imagePlaceholder {
   display: flex;
   flex-direction: column;
@@ -156,22 +251,12 @@
   margin-bottom: 8px;
 }
 
-.plusCircleIcon {
+.plusIcon {
   width: 24px;
   height: 24px;
   margin-bottom: 8px;
 }
 
-.placeholderText {
-  font-family: 'Pretendard', sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 20px;
-  letter-spacing: -0.35px;
-  color: #757575;
-  margin: 0;
-}
-
 .previewImage {
   width: 100%;
   height: 100%;
@@ -367,13 +452,16 @@
 .submitButtonContainer {
   position: fixed;
   bottom: 20px;
-  left: 50%;
-  transform: translateX(-50%);
+  left: 0;
+  right: 0;
   z-index: 1000;
+  padding: 0 32px;
+  max-width: 430px;
+  margin: 0 auto;
 }
 
 .submitButton {
-  width: 366px;
+  width: 100%;
   height: 48px;
   background: #f37021;
   border: 1px solid #000;
diff --git a/src/components/museum/pages/myArtworkPage.module.css b/src/components/museum/pages/myArtworkPage.module.css
index 4f7038b..a91ea99 100644
--- a/src/components/museum/pages/myArtworkPage.module.css
+++ b/src/components/museum/pages/myArtworkPage.module.css
@@ -1,8 +1,58 @@
 .page {
-  background: #f2eee9;
-  color: #2a2a2a;
+  min-height: 100vh;
+  background-color: #f6f1eb;
+  position: relative;
   max-width: 430px;
   margin: 0 auto;
-  position: relative;
-  min-height: 100vh;
+}
+
+.errorContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 60vh;
+  padding: 20px;
+}
+
+.errorMessage {
+  text-align: center;
+  background: white;
+  padding: 40px;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  max-width: 400px;
+  width: 100%;
+}
+
+.errorMessage h2 {
+  color: #e74c3c;
+  margin-bottom: 16px;
+  font-size: 20px;
+  font-weight: 600;
+}
+
+.errorMessage p {
+  color: #666;
+  margin-bottom: 24px;
+  line-height: 1.5;
+}
+
+.retryButton {
+  background: #007bff;
+  color: white;
+  border: none;
+  padding: 12px 24px;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.retryButton:hover {
+  background: #0056b3;
+}
+
+.retryButton:active {
+  background: #004085;
 }
diff --git a/src/components/museum/pages/offlineLocationPage.module.css b/src/components/museum/pages/offlineLocationPage.module.css
index 2584b5e..924f0ee 100644
--- a/src/components/museum/pages/offlineLocationPage.module.css
+++ b/src/components/museum/pages/offlineLocationPage.module.css
@@ -240,7 +240,7 @@
 
 .descriptionField {
   width: 100%;
-  height: 308px;
+  height: 80px;
   padding: 18px;
   border: none;
   background: none;
@@ -290,3 +290,27 @@
 .completeButton:hover:not(:disabled) {
   background: #e55a00;
 }
+
+.addressField {
+  display: grid;
+  grid-template-columns: 1fr 48px;
+  align-items: center;
+  width: 100%;
+  height: 48px;
+  background: var(--color-main);
+  border: 1px solid #000;
+  padding: 12px 20px;
+}
+
+.addressInput {
+  margin-bottom: 25px;
+}
+
+.inputLabel {
+  font-family: 'Pretendard', sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 25px;
+  letter-spacing: -0.4px;
+  color: #000;
+}
diff --git a/src/components/museum/pages/sharedLibraryEntryPage.module.css b/src/components/museum/pages/sharedLibraryEntryPage.module.css
new file mode 100644
index 0000000..f7250b2
--- /dev/null
+++ b/src/components/museum/pages/sharedLibraryEntryPage.module.css
@@ -0,0 +1,531 @@
+.container {
+  min-height: 100vh;
+  background-color: #f6f1eb;
+  padding: 0 32px 100px;
+  position: relative;
+  max-width: 430px;
+  margin: 0 auto;
+}
+/* 헤더 */
+.header {
+  padding: 10px 0 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.headerLeft {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.headerRight {
+  display: flex;
+  align-items: center;
+}
+
+.backButton {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.backIcon {
+  width: 44px;
+  height: 44px;
+  object-fit: contain;
+}
+
+.title {
+  font-family: 'Pretendard', sans-serif;
+  font-size: 20px;
+  font-weight: 600;
+  line-height: 25px;
+  letter-spacing: -0.5px;
+  color: #000;
+  margin: 0;
+}
+
+.saveButton {
+  background: #cfdde3;
+  border: 1px solid #000;
+  padding: 6px 16px;
+  font-family: 'Pretendard', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 25px;
+  letter-spacing: -0.35px;
+  color: #000;
+  cursor: pointer;
+}
+
+/* 폼 */
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+/* 이미지 섹션 */
+.imageSection {
+  margin-bottom: 8px;
+}
+
+.imageSlideContainer {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.imageSlideContainer::-webkit-scrollbar {
+  display: none;
+}
+
+.imageSlide {
+  flex: 0 0 auto;
+  scroll-snap-align: start;
+}
+
+/* 전시 작품 섹션 */
+.artworkSection {
+  margin-bottom: 20px;
+}
+
+.sectionTitle {
+  font-family: 'Pretendard', sans-serif;
+  font-size: 18px;
+  font-weight: 600;
+  line-height: 23px;
+  letter-spacing: -0.45px;
+  color: #000;
+  margin: 0 0 16px 0;
+}
+
+.artworkSlideContainer {
+  display: flex;
+  gap: 8px;
+  overflow-x: auto;
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  padding-bottom: 8px;
+}
+
+.artworkSlideContainer::-webkit-scrollbar {
+  display: none;
+}
+
+.artworkSlide {
+  flex: 0 0 auto;
+  scroll-snap-align: start;
+}
+
+.artworkImageContainer {
+  width: 224px;
+  height: 224px;
+  background-color: #d9d9d9;
+  border: 1px solid #000;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.artworkImageWrapper {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.artworkImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.changeButton {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: #f37021;
+  border: 1px solid #000;
+  color: #000;
+  padding: 4px 8px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  z-index: 10;
+}
+
+.removeButton {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: #ff4444;
+  border: 1px solid #000;
+  color: #fff;
+  padding: 4px 8px;
+  font-size: 12px;
+  font-weight: 500;
+  cursor: pointer;
+  z-index: 10;
+}
+
+.imageUploadBox {
+  width: 224px;
+  height: 224px;
+  background-color: #d9d9d9;
+  border: 1px solid #000;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.imageTag {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  background: #f37021;
+  border: 1px solid #000;
+  padding: 3.5px 8px;
+  font-family: 'Pretendard', sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 25px;
+  letter-spacing: -0.3px;
+  color: #000;
+}
+
+.detailTag {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  background: #cfdde3;
+  border: 1px solid #000;
+  padding: 3.5px 8px;
+  font-family: 'Pretendard', sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 25px;
+  letter-spacing: -0.3px;
+  color: #000;
+}
+
+.imageLabel {
+  display: block;
+  width: 100%;
+  height: 100%;
+  cursor: pointer;
+}
+
+.placeholderText {
+  font-family: 'Pretendard', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+  letter-spacing: -0.35px;
+  color: #434343;
+  margin: 8px 0 0 0;
+  text-align: center;
+}
+
+.imagePlaceholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  text-align: center;
+}
+
+.cameraIcon {
+  width: 32px;
+  height: 32px;
+  margin-bottom: 8px;
+}
+
+.plusIcon {
+  width: 24px;
+  height: 24px;
+  margin-bottom: 8px;
+}
+
+.previewImage {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.imageInput {
+  display: none;
+}
+
+.detailImagePreview {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.removeImageButton {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 24px;
+  height: 24px;
+  background: rgba(0, 0, 0, 0.7);
+  color: white;
+  border: none;
+  border-radius: 50%;
+  font-size: 16px;
+  font-weight: bold;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  line-height: 1;
+  font-family: Arial, sans-serif;
+}
+
+.removeImageButton:hover {
+  background: rgba(0, 0, 0, 0.9);
+}
+
+/* 입력 필드들 */
+.inputGroup {
+  margin-bottom: 12px;
+}
+
+.titleInput {
+  width: 100%;
+  height: 48px;
+  padding: 0 18px;
+  border: 1px solid #000;
+  background: #f6f1eb;
+  font-family: 'Pretendard', sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 25px;
+  letter-spacing: -0.4px;
+  color: #000;
+}
+
+.titleInput::placeholder {
+  color: #434343;
+}
+
+.titleInput:focus {
+  outline: none;
+  border: 1px solid #000;
+}
+
+.descriptionInput {
+  width: 100%;
+  height: 308px;
+  padding: 18px;
+  border: 1px solid #000;
+  background: #f6f1eb;
+  font-family: 'Pretendard', sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 20px;
+  letter-spacing: -0.4px;
+  color: #000;
+  resize: none;
+}
+
+.descriptionInput::placeholder {
+  color: #434343;
+}
+
+.descriptionInput:focus {
+  outline: none;
+  border: 1px solid #000;
+}
+
+/* 추가 기능 버튼들 */
+.additionalFeatures {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-bottom: 16px;
+  margin-right: -32px;
+}
+
+.featureButton {
+  width: 100%;
+  height: 48px;
+  background: #cedde4;
+  border: 1px solid #000;
+  border-right: none;
+  font-family: 'Pretendard', sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 19px;
+  letter-spacing: -0.4px;
+  color: #434343;
+  cursor: pointer;
+  text-align: left;
+  padding: 0 20px;
+}
+
+.featureButton:hover {
+  background: #b8cdd6;
+}
+
+.featureButton.completed {
+  background: #f37021;
+  color: #000;
+}
+
+/* 연락정보 등록됨 상태일 때 주황색으로 바뀌고 왼쪽 벽으로 이동 */
+.featureButton.contactRegistered {
+  background-color: #F37021;
+  color: #000000;
+  text-align: right;
+  margin-left: -32px;
+  margin-right: auto;
+  border-left: none;
+  border-right: 1px solid #000;
+}
+
+/* 오프라인 장소 등록됨 상태일 때 주황색으로 바뀌고 왼쪽 벽으로 이동 */
+.featureButton.offlineLocationRegistered {
+  background-color: #F37021;
+  color: #000000;
+  text-align: right;
+  margin-left: -32px;
+  margin-right: auto;
+  border-left: none;
+  border-right: 1px solid #000;
+}
+
+/* 전시장 등록됨 상태일 때 주황색으로 바뀌고 왼쪽 벽으로 이동 */
+.featureButton.exhibitionSpaceRegistered {
+  background-color: #F37021;
+  color: #000000;
+  text-align: right;
+  margin-left: -32px;
+  margin-right: auto;
+  border-left: none;
+  border-right: 1px solid #000;
+}
+
+/* 전시 참여자 등록됨 상태일 때 주황색으로 바뀌고 왼쪽 벽으로 이동 */
+.featureButton.participantsRegistered {
+  background-color: #F37021;
+  color: #000000;
+  text-align: right;
+  margin-left: -32px;
+  margin-right: auto;
+  border-left: none;
+  border-right: 1px solid #000;
+}
+
+/* 완료된 기능 버튼 스타일 */
+.featureButton.completed {
+  background-color: #F37021;
+  color: #000000;
+  text-align: right;
+  margin-left: -32px;
+  margin-right: auto;
+  border-left: none;
+  border-right: 1px solid #000;
+}
+
+.completedText {
+  display: block;
+  font-size: 14px;
+  font-weight: 500;
+  margin-top: 4px;
+  color: #000;
+}
+
+/* 제출 버튼 */
+.submitButtonContainer {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000;
+}
+
+.submitButton {
+  width: 366px;
+  height: 48px;
+  background: #f37021;
+  border: 1px solid #000;
+  font-family: 'Pretendard', sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 25px;
+  letter-spacing: -0.4px;
+  color: #000;
+  cursor: pointer;
+}
+
+.submitButton:hover {
+  background: #e55a00;
+}
+
+.errorContainer {
+  position: fixed;
+  bottom: 200px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 999;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 349px;
+  height: 32px;
+}
+
+/* 개별 에러 메시지 */
+.errorMessageBox {
+  background-color: #cfdde3;
+  border: 1px solid #000;
+  padding: 8px 20px;
+  font-family: 'Pretendard';
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  letter-spacing: -0.3px;
+  color: #000;
+  text-align: center;
+  box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.20);
+}
+
+/* 하단 고정 버튼 */
+.bottomButtonContainer {
+  position: fixed;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 1000;
+}
+
+.enterButton {
+  width: 366px;
+  height: 48px;
+  background: #f37021;
+  border: 1px solid #000;
+  font-family: 'Pretendard', sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 25px;
+  letter-spacing: -0.4px;
+  color: #000;
+  cursor: pointer;
+}
+
+.enterButton:hover {
+  background: #e55a00;
+}
diff --git a/src/components/museum/pages/sharedLibrarySelectionPage.module.css b/src/components/museum/pages/sharedLibrarySelectionPage.module.css
new file mode 100644
index 0000000..9035a74
--- /dev/null
+++ b/src/components/museum/pages/sharedLibrarySelectionPage.module.css
@@ -0,0 +1,120 @@
+.container {
+  min-height: 100vh;
+  background-color: #f6f1eb;
+  padding: 0 32px 32px;
+  position: relative;
+  max-width: 430px;
+  margin: 0 auto;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 0;
+  margin-bottom: 20px;
+}
+
+.headerLeft {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.backButton {
+  background: #f37021;
+  border: none;
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+}
+
+.backIcon {
+  width: 44px;
+  height: 44px;
+}
+
+.title {
+  font-family: 'Pretendard', sans-serif;
+  font-weight: 600;
+  font-size: 20px;
+  color: #000000;
+  margin: 0;
+  line-height: 25px;
+  letter-spacing: -0.5px;
+}
+
+.infoMessage {
+  color: #f37021;
+  font-family: 'Pretendard', sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 28px;
+  letter-spacing: -0.4px;
+  margin-bottom: 20px;
+}
+
+.libraryList {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.libraryCard {
+  background-color: #cfdde3;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: 2px solid transparent;
+}
+
+.libraryCard:hover {
+  background-color: #b8c8d0;
+  transform: translateY(-1px);
+}
+
+.libraryInfo {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  flex: 1;
+}
+
+.libraryImage {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  background-color: #eeeeee;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+.defaultImage {
+  width: 100%;
+  height: 100%;
+  background-color: #cccccc;
+}
+
+.libraryDetails {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.libraryName {
+  font-family: 'Pretendard', sans-serif;
+  font-weight: 600;
+  font-size: 16px;
+  color: #000000;
+  line-height: 26px;
+  letter-spacing: -0.4px;
+}
diff --git a/src/components/museum/services/artworkApi.js b/src/components/museum/services/artworkApi.js
deleted file mode 100644
index b84f318..0000000
--- a/src/components/museum/services/artworkApi.js
+++ /dev/null
@@ -1,134 +0,0 @@
-const API_BASE_URL = process.env.REACT_APP_API_BASE_URL || 'http://localhost:8080';
-
-// 상태 매핑 함수들
-const mapProgressStatus = (progressStatus) => {
-  switch (progressStatus) {
-    case 'REGISTERED':
-      return '등록 완료';
-    case 'ON_DISPLAY':
-      return '전시 중';
-    case 'WAITING':
-      return '등록 대기 중';
-    case 'UNREGISTERED':
-      return '등록 거절';
-    default:
-      return '알 수 없음';
-  }
-};
-
-const mapProgressStatusToUIStatus = (progressStatus) => {
-  switch (progressStatus) {
-    case 'REGISTERED':
-      return '전시 중'; // UI에서는 등록 완료도 전시 중으로 표시
-    case 'ON_DISPLAY':
-      return '전시 중';
-    case 'WAITING':
-      return '승인 대기';
-    case 'UNREGISTERED':
-      return '미승인';
-    default:
-      return '알 수 없음';
-  }
-};
-
-// 토큰 가져오기 (userStore에서 가져와야 함)
-const getAuthToken = () => {
-  // 추후 userStore에서 토큰을 가져오도록 수정
-  return localStorage.getItem('accessToken') || '';
-};
-
-// API 호출 헬퍼
-const apiCall = async (endpoint, options = {}) => {
-  const url = `${API_BASE_URL}${endpoint}`;
-  const token = getAuthToken();
-  
-  const config = {
-    headers: {
-      'Content-Type': 'application/json',
-      ...(token && { Authorization: `Bearer ${token}` }),
-      ...options.headers,
-    },
-    ...options,
-  };
-
-  try {
-    const response = await fetch(url, config);
-    
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-    
-    const data = await response.json();
-    
-    if (!data.success) {
-      throw new Error(data.message || 'API 호출 실패');
-    }
-    
-    return data;
-  } catch (error) {
-    console.error('API 호출 오류:', error);
-    throw error;
-  }
-};
-
-// 내 작품 목록 가져오기
-export const fetchMyArtworks = async (applicated = true, pageNum = 0, pageSize = 3) => {
-  const response = await apiCall(
-    `/api/pieces/my-page?applicated=${applicated}&pageNum=${pageNum}&pageSize=${pageSize}`
-  );
-  
-  // API 응답 데이터를 프론트엔드 형식으로 변환
-  const transformedContent = response.data.content.map(piece => ({
-    id: piece.pieceId,
-    title: piece.title,
-    description: piece.description,
-    image: piece.imageUrl,
-    status: mapProgressStatusToUIStatus(piece.progressStatus),
-    progressStatus: piece.progressStatus,
-    saveStatus: piece.saveStatus,
-    isPurchasable: piece.isPurchasable,
-    userId: piece.userId,
-    createdAt: new Date().toLocaleDateString('ko-KR', {
-      year: '2-digit',
-      month: '2-digit', 
-      day: '2-digit'
-    }).replace(/\. /g, '.').replace('.', ''), // 임시로 현재 날짜 사용
-    isExhibiting: piece.progressStatus === 'ON_DISPLAY' || piece.progressStatus === 'REGISTERED'
-  }));
-  
-  return {
-    content: transformedContent,
-    pagination: {
-      totalElements: response.data.totalElements,
-      totalPages: response.data.totalPages,
-      pageNum: response.data.pageNum,
-      pageSize: response.data.pageSize,
-      first: response.data.first,
-      last: response.data.last
-    }
-  };
-};
-
-// 작품 등록 (임시 저장)
-export const saveDraftArtwork = async (artworkData) => {
-  // 임시 저장 API (추후 구현)
-  throw new Error('임시 저장 API가 아직 구현되지 않았습니다.');
-};
-
-// 작품 등록 신청
-export const submitArtworkApplication = async (artworkData) => {
-  // 등록 신청 API (추후 구현)
-  throw new Error('등록 신청 API가 아직 구현되지 않았습니다.');
-};
-
-// 작품 수정
-export const updateArtwork = async (pieceId, artworkData) => {
-  // 작품 수정 API (추후 구현)
-  throw new Error('작품 수정 API가 아직 구현되지 않았습니다.');
-};
-
-// 작품 삭제
-export const deleteArtwork = async (pieceId) => {
-  // 작품 삭제 API (추후 구현)
-  throw new Error('작품 삭제 API가 아직 구현되지 않았습니다.');
-};
diff --git a/src/components/museum/services/artworkDraftStore.js b/src/components/museum/services/artworkDraftStore.js
deleted file mode 100644
index 7ecffee..0000000
--- a/src/components/museum/services/artworkDraftStore.js
+++ /dev/null
@@ -1,110 +0,0 @@
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-
-const useArtworkDraftStore = create(
-  persist(
-    (set, get) => ({
-      // 여러 임시저장 데이터 배열
-      drafts: [],
-      
-      // 임시저장 여부 확인
-      hasDraft: () => {
-        const { drafts } = get();
-        return drafts.length > 0;
-      },
-      
-      // 새 임시저장 추가
-      saveDraft: (formData) => {
-        const { drafts } = get();
-        
-        // 이미지 파일을 URL로 변환
-        let imageUrl = null;
-        if (formData.mainImage) {
-          imageUrl = URL.createObjectURL(formData.mainImage);
-        }
-        
-        const newDraft = {
-          id: `draft_${Date.now()}`,
-          title: formData.title || '',
-          description: formData.description || '',
-          image: imageUrl,
-          mainImage: formData.mainImage, // 원본 파일도 저장
-          detailImages: formData.detailImages || [],
-          createdAt: (() => {
-            const now = new Date();
-            const year = String(now.getFullYear()).slice(-2);
-            const month = String(now.getMonth() + 1).padStart(2, '0');
-            const day = String(now.getDate()).padStart(2, '0');
-            return `${year}.${month}.${day}`;
-          })()
-        };
-        
-        const updatedDrafts = [...drafts, newDraft];
-        set({ drafts: updatedDrafts });
-        
-        console.log('임시저장 완료:', newDraft);
-        console.log('총 임시저장 개수:', updatedDrafts.length);
-        
-        return newDraft;
-      },
-      
-      // 특정 임시저장 불러오기
-      loadDraft: (draftId) => {
-        const { drafts } = get();
-        return drafts.find(draft => draft.id === draftId);
-      },
-      
-      // 모든 임시저장 가져오기
-      getAllDrafts: () => {
-        const { drafts } = get();
-        return drafts;
-      },
-      
-      // 특정 임시저장 삭제
-      deleteDraft: (draftId) => {
-        const { drafts } = get();
-        const draftToDelete = drafts.find(draft => draft.id === draftId);
-        
-        // 이미지 URL이 있다면 메모리에서 해제
-        if (draftToDelete && draftToDelete.image && draftToDelete.image.startsWith('blob:')) {
-          URL.revokeObjectURL(draftToDelete.image);
-        }
-        
-        const updatedDrafts = drafts.filter(draft => draft.id !== draftId);
-        set({ drafts: updatedDrafts });
-        
-        console.log('임시저장 삭제됨:', draftId);
-      },
-      
-      // 모든 임시저장 삭제
-      clearAllDrafts: () => {
-        const { drafts } = get();
-        
-        // 모든 blob URL 메모리 해제
-        drafts.forEach(draft => {
-          if (draft.image && draft.image.startsWith('blob:')) {
-            URL.revokeObjectURL(draft.image);
-          }
-        });
-        
-        set({ drafts: [] });
-        console.log('모든 임시저장 삭제됨');
-      }
-    }),
-    {
-      name: 'artwork-drafts-storage', // localStorage key
-      // 파일 객체는 직렬화할 수 없으므로 제외
-      partialize: (state) => ({
-        drafts: state.drafts.map(draft => ({
-          id: draft.id,
-          title: draft.title,
-          description: draft.description,
-          image: draft.image,
-          createdAt: draft.createdAt
-        }))
-      })
-    }
-  )
-);
-
-export default useArtworkDraftStore;
diff --git a/src/components/museum/services/artworkStore.js b/src/components/museum/services/artworkStore.js
deleted file mode 100644
index 4f646a5..0000000
--- a/src/components/museum/services/artworkStore.js
+++ /dev/null
@@ -1,329 +0,0 @@
-import { create } from 'zustand';
-
-// 기존 뮤지엄 페이지 이미지 import
-import artwork1 from '@/assets/museum/큰사진3.png';
-import artwork2 from '@/assets/museum/큰사진4.png';
-import artwork3 from '@/assets/museum/큰사진5.png';
-
-// 더미 데이터 (기존 뮤지엄 페이지 데이터 활용)
-const DUMMY_ARTWORKS = [
-  {
-    id: 1,
-    title: "정원에서의 오후",
-    description: "어떤 생각을 가지고 만든 작품.\n어떤 생각을 가지면서 봐주셨으면 좋겠고 어떤 스타일로 어떻게 한 거임\n그래서 이걸 보면 눈물이 남...",
-    image: artwork1,
-    status: "전시 중",
-    createdAt: "25.01.19",
-    isExhibiting: true
-  },
-  {
-    id: 2,
-    title: "에트르타 절벽",
-    description: "어떤 생각을 가지고 만든 작품.",
-    image: artwork2,
-    status: "전시 중",
-    createdAt: "24.11.19",
-    isExhibiting: true
-  },
-  {
-    id: 3,
-    title: "바다 풍경",
-    description: "어떤 생각을 가지고 만든 작품.\n어떤 생각을 가지고 만든 작품.어떤 생각을 가지고 만든 작품.\n어떤 생각을 가지고 만든 작품.어떤 생각을 가지고 만든 작품.\n어떤 생각을 가지고 만든 작품.어떤 생각을 가지고 만든 작품.",
-    image: artwork3,
-    status: "전시 중",
-    createdAt: "24.11.18",
-    isExhibiting: true
-  },
-  {
-    id: 4,
-    title: "보르디게라의 정원",
-    description: "어떤 생각을 가지고 만든 작품.",
-    image: artwork1,
-    status: "미승인",
-    createdAt: "24.11.15",
-    isExhibiting: false
-  },
-  {
-    id: 5,
-    title: "강가의 휴식",
-    description: "어떤 생각을 가지고 만든 작품.",
-    image: artwork2,
-    status: "전시 중",
-    createdAt: "24.11.10",
-    isExhibiting: true
-  },
-  {
-    id: 6,
-    title: "모네의 정원 시리즈 1",
-    description: "어떤 생각을 가지고 만든 작품.",
-    image: artwork3,
-    status: "전시 중",
-    createdAt: "24.11.05",
-    isExhibiting: true
-  },
-  {
-    id: 7,
-    title: "바위와 바다",
-    description: "어떤 생각을 가지고 만든 작품.",
-    image: artwork1,
-    status: "승인 대기",
-    createdAt: "24.11.01",
-    isExhibiting: false
-  },
-  {
-    id: 8,
-    title: "푸른 바다",
-    description: "어떤 생각을 가지고 만든 작품.",
-    image: artwork2,
-    status: "전시 중",
-    createdAt: "24.10.28",
-    isExhibiting: true
-  },
-  {
-    id: 9,
-    title: "나무와 빛",
-    description: "어떤 생각을 가지고 만든 작품.",
-    image: artwork3,
-    status: "전시 중",
-    createdAt: "24.10.25",
-    isExhibiting: true
-  },
-  {
-    id: 10,
-    title: "물가의 평온",
-    description: "어떤 생각을 가지고 만든 작품.",
-    image: artwork1,
-    status: "전시 중",
-    createdAt: "24.10.22",
-    isExhibiting: true
-  },
-  {
-    id: 11,
-    title: "인상파 풍경 1",
-    description: "어떤 생각을 가지고 만든 작품.",
-    image: artwork2,
-    status: "전시 중",
-    createdAt: "24.10.19",
-    isExhibiting: true
-  },
-  {
-    id: 12,
-    title: "인상파 풍경 2",
-    description: "어떤 생각을 가지고 만든 작품.",
-    image: artwork3,
-    status: "전시 중",
-    createdAt: "24.10.16",
-    isExhibiting: true
-  },
-  {
-    id: 13,
-    title: "인상파 풍경 3",
-    description: "어떤 생각을 가지고 만든 작품.",
-    image: artwork1,
-    status: "미승인",
-    createdAt: "24.10.13",
-    isExhibiting: false
-  },
-  {
-    id: 14,
-    title: "인상파 풍경 4",
-    description: "어떤 생각을 가지고 만든 작품.",
-    image: artwork2,
-    status: "전시 중",
-    createdAt: "24.10.10",
-    isExhibiting: true
-  },
-  {
-    id: 15,
-    title: "인상파 풍경 5",
-    description: "어떤 생각을 가지고 만든 작품.",
-    image: artwork3,
-    status: "전시 중",
-    createdAt: "24.10.07",
-    isExhibiting: true
-  }
-];
-
-const useArtworkStore = create((set, get) => ({
-  // 상태
-  artworks: DUMMY_ARTWORKS.slice(0, 3), // 처음에는 3개만
-  layoutMode: 'vertical', // 'vertical' | 'grid'
-  isLoading: false,
-  isLoadingMore: false,
-  searchKeyword: '',
-  applicated: true, // true: 등록 신청한 작품, false: 임시 저장된 작품
-  
-  // 페이지네이션 상태 (더미용)
-  pagination: {
-    pageNum: 0,
-    pageSize: 3,
-    totalElements: DUMMY_ARTWORKS.length,
-    totalPages: Math.ceil(DUMMY_ARTWORKS.length / 3),
-    first: true,
-    last: false
-  },
-  
-  // 오류 상태
-  error: null,
-  
-  // 액션
-  setLayoutMode: (mode) => set({ layoutMode: mode }),
-  
-  setSearchKeyword: (keyword) => set({ searchKeyword: keyword }),
-  
-  setApplicated: (applicated) => set({ applicated }),
-  
-  setError: (error) => set({ error }),
-  
-  clearError: () => set({ error: null }),
-  
-  // 작품 목록 초기 로드 (더미 데이터 사용)
-  loadArtworks: async (reset = true, initialCount = 3) => {
-    // 더미용: 로딩 상태만 시뮬레이션
-    set({ 
-      isLoading: reset,
-      isLoadingMore: !reset,
-      error: null 
-    });
-    
-    // 로딩 시뮬레이션
-    setTimeout(() => {
-      if (reset) {
-        // 초기 로드 시 지정된 개수만큼 작품 로드
-        const initialArtworks = DUMMY_ARTWORKS.slice(0, initialCount);
-        set({
-          artworks: initialArtworks,
-          isLoading: false,
-          isLoadingMore: false
-        });
-      } else {
-        set({
-          isLoading: false,
-          isLoadingMore: false
-        });
-      }
-    }, 500);
-  },
-  
-  // 더 많은 작품 로드 (무한 스크롤 시뮬레이션)
-  loadMoreArtworks: async () => {
-    const { artworks, isLoadingMore, isLoading } = get();
-    
-    if (isLoading || isLoadingMore || artworks.length >= DUMMY_ARTWORKS.length) {
-      return;
-    }
-    
-    set({ isLoadingMore: true });
-    
-    // 로딩 시뮬레이션
-    setTimeout(() => {
-      const currentLength = get().artworks.length;
-      const nextBatch = DUMMY_ARTWORKS.slice(currentLength, currentLength + 3);
-      
-      set((state) => ({
-        artworks: [...state.artworks, ...nextBatch],
-        isLoadingMore: false
-      }));
-    }, 1000);
-  },
-  
-  // 작품 목록 새로고침 (더미 데이터용)
-  refreshArtworks: async () => {
-    await get().loadArtworks(true);
-  },
-  
-  // 등록 상태 변경 (더미 데이터용)
-  toggleApplicated: async () => {
-    const { applicated } = get();
-    set({ applicated: !applicated });
-    // 더미 데이터에서는 실제 다른 데이터 로드 안함
-  },
-  
-  // 필터된 작품 가져오기
-  getFilteredArtworks: () => {
-    const { artworks, searchKeyword } = get();
-    
-    if (!searchKeyword) return artworks;
-    
-    return artworks.filter(artwork =>
-      artwork.title.toLowerCase().includes(searchKeyword.toLowerCase()) ||
-      artwork.description.toLowerCase().includes(searchKeyword.toLowerCase())
-    );
-  },
-  
-  // 작품 개수
-  getArtworkCount: () => {
-    const { pagination } = get();
-    return pagination.totalElements;
-  },
-  
-  // 전시 중인 작품만 가져오기
-  getExhibitingArtworks: () => {
-    const { artworks } = get();
-    return artworks.filter(artwork => artwork.isExhibiting);
-  },
-  
-  // 더 로드할 수 있는지 확인
-  hasMore: () => {
-    const { artworks } = get();
-    return artworks.length < DUMMY_ARTWORKS.length;
-  },
-
-  // 작품 등록
-  addArtwork: (artwork) => {
-    const newArtwork = {
-      ...artwork,
-      id: Date.now(), // 고유 ID 생성
-      status: "승인 대기", // 기본 상태
-      createdAt: new Date().toLocaleDateString('ko-KR', {
-        year: '2-digit',
-        month: '2-digit',
-        day: '2-digit'
-      }).replace(/\. /g, '.').replace('.', ''),
-      isExhibiting: false // 승인 대기 중이므로 전시 중 아님
-    };
-
-    set((state) => ({
-      artworks: [newArtwork, ...state.artworks], // 최신 작품을 맨 앞에 추가
-      pagination: {
-        ...state.pagination,
-        totalElements: state.pagination.totalElements + 1,
-        totalPages: Math.ceil((state.pagination.totalElements + 1) / state.pagination.pageSize)
-      }
-    }));
-
-    return newArtwork;
-  },
-
-  // 작품 삭제
-  deleteArtwork: (artworkId) => {
-    set((state) => {
-      const filteredArtworks = state.artworks.filter(artwork => artwork.id !== artworkId);
-      return {
-        artworks: filteredArtworks,
-        pagination: {
-          ...state.pagination,
-          totalElements: state.pagination.totalElements - 1,
-          totalPages: Math.ceil((state.pagination.totalElements - 1) / state.pagination.pageSize)
-        }
-      };
-    });
-  },
-
-  // 작품 상태 변경 (승인/거절 등)
-  updateArtworkStatus: (artworkId, newStatus) => {
-    set((state) => ({
-      artworks: state.artworks.map(artwork => 
-        artwork.id === artworkId 
-          ? { 
-              ...artwork, 
-              status: newStatus,
-              isExhibiting: newStatus === "전시 중"
-            }
-          : artwork
-      )
-    }));
-  }
-}));
-
-export default useArtworkStore;
diff --git a/src/components/museum/services/exhibitionPhotoStore.js b/src/components/museum/services/exhibitionPhotoStore.js
deleted file mode 100644
index 61b8f21..0000000
--- a/src/components/museum/services/exhibitionPhotoStore.js
+++ /dev/null
@@ -1,63 +0,0 @@
-import { create } from 'zustand';
-
-const useExhibitionPhotoStore = create((set, get) => ({
-  // 전시 썸네일
-  thumbnail: null,
-  
-  // 전시 작품들 (배열로 관리)
-  artworks: [],
-  
-  // 썸네일 설정
-  setThumbnail: (file) => {
-    set({ thumbnail: file });
-  },
-  
-  // 썸네일 제거
-  removeThumbnail: () => {
-    set({ thumbnail: null });
-  },
-  
-  // 작품 추가 (새로운 인덱스에 추가)
-  addArtwork: (file) => {
-    set((state) => ({
-      artworks: [...state.artworks, file]
-    }));
-  },
-  
-  // 특정 인덱스의 작품 수정
-  updateArtwork: (index, file) => {
-    set((state) => {
-      const newArtworks = [...state.artworks];
-      newArtworks[index] = file;
-      return { artworks: newArtworks };
-    });
-  },
-  
-  // 특정 인덱스의 작품 제거
-  removeArtwork: (index) => {
-    set((state) => ({
-      artworks: state.artworks.filter((_, i) => i !== index)
-    }));
-  },
-  
-  // 모든 작품 제거
-  clearArtworks: () => {
-    set({ artworks: [] });
-  },
-  
-  // 전체 상태 초기화
-  reset: () => {
-    set({ thumbnail: null, artworks: [] });
-  },
-  
-  // 전체 상태 가져오기
-  getExhibitionData: () => {
-    const state = get();
-    return {
-      thumbnail: state.thumbnail,
-      artworks: state.artworks
-    };
-  }
-}));
-
-export default useExhibitionPhotoStore;
diff --git a/src/components/user/ContactEditPage.jsx b/src/components/user/ContactEditPage.jsx
index 39fb977..7ee706f 100644
--- a/src/components/user/ContactEditPage.jsx
+++ b/src/components/user/ContactEditPage.jsx
@@ -1,14 +1,19 @@
 import { useState, useEffect } from "react";
-import { useNavigate } from "react-router-dom";
-import useUserStore from "@/stores/userStore";
+import { useNavigate, useLocation } from "react-router-dom";
+import { updateContact, getUserContact, getCurrentUser } from "@/apis/user/user.js";
 import AppFooter from "@/components/footer/AppFooter";
 import styles from "@/components/user/userEdit.module.css";
 
 export default function ContactEditPage() {
   const navigate = useNavigate();
-  const { user, updateUser, updateContactInfo } = useUserStore();
+  const location = useLocation();
+  const [currentUserId, setCurrentUserId] = useState(null);
   const [showCustomDomain, setShowCustomDomain] = useState(false);
   
+  // 전시 정보 상태 (전시 업로드 페이지에서 넘어온 경우)
+  const [exhibitionData, setExhibitionData] = useState(null);
+  const [draft, setDraft] = useState(null);
+  
   // 폼 상태 관리
   const [formData, setFormData] = useState({
     emailUsername: "",
@@ -17,54 +22,118 @@ export default function ContactEditPage() {
     instagram: ""
   });
 
-  // 컴포넌트 마운트 시 사용자 정보로 초기화
+  // 컴포넌트 마운트 시 사용자 ID 가져오기 및 연락 정보 불러오기
   useEffect(() => {
-    if (user.email) {
-      const [username, domain] = user.email.split('@');
-      setFormData(prev => ({
-        ...prev,
-        emailUsername: username || "",
-        emailDomain: domain || "naver.com"
-      }));
-    }
-    if (user.instagram) {
-      setFormData(prev => ({
-        ...prev,
-        instagram: user.instagram
-      }));
-    }
-  }, [user]);
-
-  const handleCompleteClick = () => {
-    // 이메일 주소 조합
-    const finalEmail = showCustomDomain 
-      ? `${formData.emailUsername}@${formData.customDomain}`
-      : `${formData.emailUsername}@${formData.emailDomain}`;
-
-    console.log('저장할 연락정보:', {
-      email: finalEmail,
-      instagram: formData.instagram
-    });
+    const fetchData = async () => {
+      try {
+        // 전시 정보가 있는지 확인 (전시 업로드 페이지에서 넘어온 경우)
+        if (location.state?.draft) {
+          console.log('ContactEditPage에서 받은 draft 데이터:', location.state.draft);
+          setDraft(location.state.draft);
+          setExhibitionData(location.state.draft.exhibitionData);
+        } else if (location.state?.exhibitionData) {
+          console.log('ContactEditPage에서 받은 전시 데이터:', location.state);
+          setExhibitionData(location.state.exhibitionData);
+        }
+        
+        // 현재 사용자 정보 조회하여 ID 가져오기
+        const userResponse = await getCurrentUser();
+        if (userResponse && userResponse.data && userResponse.data.userId) {
+          const userId = userResponse.data.userId;
+          setCurrentUserId(userId);
+          
+          // 연락 정보 조회
+          const contactResponse = await getUserContact(userId);
+          
+          if (contactResponse && contactResponse.data) {
+            const contactData = contactResponse.data;
+            
+            // 이메일 정보 설정
+            if (contactData.email) {
+              const [username, domain] = contactData.email.split('@');
+              setFormData(prev => ({
+                ...prev,
+                emailUsername: username || "",
+                emailDomain: domain || "naver.com"
+              }));
+            }
+            
+            // 인스타그램 정보 설정
+            if (contactData.instagram) {
+              setFormData(prev => ({
+                ...prev,
+                instagram: contactData.instagram
+              }));
+            }
+          }
+        }
+      } catch (error) {
+        console.error('데이터 조회 실패:', error);
+        // 에러 발생 시 기본값 유지
+      }
+    };
+    
+    fetchData();
+  }, [location.state]);
 
-    // userStore 업데이트
-    updateUser({
-      email: finalEmail,
-      instagram: formData.instagram
-    });
+  const handleCompleteClick = async () => {
+    try {
+      // 이메일 주소 조합
+      const finalEmail = showCustomDomain 
+        ? `${formData.emailUsername}@${formData.customDomain}`
+        : `${formData.emailUsername}@${formData.emailDomain}`;
 
-    // 연락정보 등록 상태 업데이트
-    updateContactInfo({
-      isRegistered: true
-    });
+      // API로 연락 정보 전송
+      const response = await updateContact({
+        email: finalEmail,
+        instagram: formData.instagram
+      });
 
-    console.log('연락정보가 userStore에 저장되었습니다.');
-
-    // 편집 완료 후 프로필 상세 페이지로 이동
-    navigate('/user/profile');
+      // 편집 완료 후 전시 정보가 있으면 전시 업로드 페이지로, 없으면 프로필 페이지로 이동
+      if (draft) {
+        navigate('/exhibition/upload', {
+          state: { 
+            draft: draft,
+            contactUpdated: true 
+          }
+        });
+      } else if (location.state?.exhibitionData) {
+        navigate('/exhibition/upload', {
+          state: { 
+            exhibitionData: location.state.exhibitionData,
+            thumbnail: location.state.thumbnail,
+            artworks: location.state.artworks,
+            contactUpdated: true 
+          }
+        });
+      } else {
+        navigate('/user/profile');
+      }
+    } catch (error) {
+      console.error('연락 정보 등록 실패:', error);
+      alert('연락 정보 등록에 실패했습니다. 다시 시도해주세요.');
+    }
   };
 
   const handleBackClick = () => {
-    navigate('/user/profile');
+    // 전시 등록 페이지에서 이동한 경우 전시 업로드 페이지로, 아니면 프로필 페이지로 이동
+    if (draft) {
+      navigate('/exhibition/upload', {
+        state: { 
+          draft: draft,
+          contactUpdated: false // 뒤로가기이므로 contactUpdated는 false
+        }
+      });
+    } else if (location.state?.exhibitionData) {
+      navigate('/exhibition/upload', {
+        state: { 
+          exhibitionData: location.state.exhibitionData,
+          contactUpdated: false // 뒤로가기이므로 contactUpdated는 false
+        }
+      });
+    } else {
+      navigate('/user/profile');
+    }
   };
 
   // 입력 필드 변경 핸들러
@@ -101,7 +170,7 @@ export default function ContactEditPage() {
             <button className={styles.backButton} onClick={handleBackClick}>
               <img src="/src/assets/user/chevron-left.png" alt="back" className={styles.backIcon} />
             </button>
-            <span className={styles.headerTitle}>연락 정보 수정하기</span>
+            <span className={styles.headerTitle}>연락 정보 등록하기</span>
           </div>
           <button className={styles.completeButton} onClick={handleCompleteClick}>
             완료
diff --git a/src/components/user/UserEditModal.jsx b/src/components/user/UserEditModal.jsx
index 1f71072..5022db5 100644
--- a/src/components/user/UserEditModal.jsx
+++ b/src/components/user/UserEditModal.jsx
@@ -17,7 +17,7 @@ export default function UserEditModal({ isOpen, onClose }) {
                 backgroundImage: user.profileImage ? `url(/src/assets/user/camera.png)` : `url(/src/assets/user/camera.png)`
               }}
             />
-            <div className={styles.cameraIcon}>📷</div>
+            <img src="/src/assets/user/camera.png" alt="camera" className={styles.cameraIcon} />
           </div>
           
           <div className={styles.editFields}>
@@ -51,21 +51,21 @@ export default function UserEditModal({ isOpen, onClose }) {
 
         <div className={styles.editContactSection}>
           <div className={styles.editContactItem}>
-            <div className={styles.contactIcon}>📧</div>
+            <img src="/src/assets/user/mail2.png" alt="mail" className={styles.contactIcon} />
             <span className={styles.editContactLabel}>이메일</span>
             <input 
               type="email" 
               className={styles.editContactInput}
-              defaultValue="asd123@naver.com"
+              defaultValue=""
             />
           </div>
           <div className={styles.editContactItem}>
-            <div className={styles.contactIcon}>📷</div>
+            <img src="/src/assets/user/instagram.png" alt="instagram" className={styles.contactIcon} />
             <span className={styles.editContactLabel}>인스타그램</span>
             <input 
               type="text" 
               className={styles.editContactInput}
-              defaultValue="@simonisnextdoor"
+              defaultValue=""
             />
           </div>
         </div>
diff --git a/src/components/user/UserEditPage.jsx b/src/components/user/UserEditPage.jsx
index 149e8be..d03854e 100644
--- a/src/components/user/UserEditPage.jsx
+++ b/src/components/user/UserEditPage.jsx
@@ -1,40 +1,107 @@
-import { useState, useCallback, useEffect } from "react";
+import { useState, useCallback, useEffect, useRef } from "react";
 import { useNavigate } from "react-router-dom";
-import useUserStore from "@/stores/userStore";
+import { getCurrentUser, updateUserProfile, updateUserProfileImage, checkUserCode } from "@/apis/user/user.js";
 import AppFooter from "@/components/footer/AppFooter";
 import styles from "@/components/user/userEdit.module.css";
 
 export default function UserEditPage() {
   const navigate = useNavigate();
-  const { user, updateUser } = useUserStore();
-  const [userId, setUserId] = useState(user.nickname || "simonisnextdoor");
+  const fileInputRef = useRef(null);
+  const [user, setUser] = useState({
+    id: null,
+    name: '',
+    nickname: '',
+    introduction: '',
+    profileImageUrl: null,
+    code: null
+  });
+  const [userId, setUserId] = useState('');
   const [userIdStatus, setUserIdStatus] = useState("available");
   const [userIdMessage, setUserIdMessage] = useState("");
+  const [selectedImage, setSelectedImage] = useState(null);
+  const [previewImage, setPreviewImage] = useState(null);
   
   // 폼 상태 관리
   const [formData, setFormData] = useState({
-    name: user.name || "김땡땡",
-    nickname: user.nickname || "simonisnextdoor", 
-    bio: ""
+    name: '',
+    nickname: '', 
+    introduction: ''
   });
 
-  const handleCompleteClick = () => {
-    // userStore 업데이트
-    updateUser({
-      name: formData.name,
-      nickname: formData.nickname,
-      bio: formData.bio
-    });
+  // 이미지 선택 핸들러
+  const handleImageClick = () => {
+    fileInputRef.current?.click();
+  };
 
-    // 편집 완료 후 프로필 상세 페이지로 이동
-    navigate('/user/profile');
+  // 파일 선택 핸들러
+  const handleFileSelect = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      // 파일 유효성 검사
+      if (!file.type.startsWith('image/')) {
+        alert('이미지 파일만 선택할 수 있습니다.');
+        return;
+      }
+      
+      if (file.size > 5 * 1024 * 1024) { // 5MB 제한
+        alert('파일 크기는 5MB 이하여야 합니다.');
+        return;
+      }
+
+      setSelectedImage(file);
+      
+      // 미리보기 생성
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        setPreviewImage(e.target.result);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleCompleteClick = async () => {
+    // 아이디 유효성 검사
+    if (userIdStatus !== "available") {
+      alert('사용할 수 없는 아이디입니다. 다른 아이디를 입력해주세요.');
+      return;
+    }
+
+    try {
+      // 프로필 이미지 업데이트 (이미지가 선택된 경우)
+      if (selectedImage) {
+        try {
+          const imageResponse = await updateUserProfileImage(selectedImage);
+        } catch (error) {
+          console.error('프로필 이미지 업데이트 실패:', error);
+          console.error('에러 상세 정보:', {
+            message: error.message,
+            response: error.response?.data,
+            status: error.response?.status
+          });
+          alert(`프로필 이미지 업데이트에 실패했습니다.\n에러: ${error.message}`);
+        }
+      }
+
+      // API로 사용자 정보 업데이트
+      const response = await updateUserProfile({
+        nickname: formData.name,        // 닉네임
+        code: formData.nickname,        // 아이디 (code)
+        introduction: formData.introduction  // 자기소개
+      });
+
+      // 편집 완료 후 프로필 상세 페이지로 이동
+      navigate('/user/profile');
+    } catch (error) {
+      console.error('사용자 정보 업데이트 실패:', error);
+      alert('프로필 수정에 실패했습니다. 다시 시도해주세요.');
+    }
   };
 
   const handleBackClick = () => {
     navigate('/user/profile');
   };
 
-  // 아이디 중복 체크 함수 (실제로는 API 호출)
+  // 아이디 중복 체크 함수 (API 호출)
   const checkUserIdAvailability = useCallback(async (id) => {
     if (id.length < 3) {
       setUserIdStatus("idle");
@@ -42,34 +109,59 @@ export default function UserEditPage() {
       return;
     }
 
+    if (id.length > 15) {
+      setUserIdStatus("unavailable");
+      setUserIdMessage("3~15자 이내로 입력해주세요");
+      return;
+    }
+
+    // 특수문자 체크 (영문, 숫자, 언더스코어, 점, 하이픈 허용)
+    const codeRegex = /^[a-zA-Z0-9_.-]+$/;
+    if (!codeRegex.test(id)) {
+      setUserIdStatus("unavailable");
+      setUserIdMessage("사용할 수 없는 특수문자가 포함되어 있습니다");
+      return;
+    }
+
+    // 현재 사용자의 code와 동일한 경우 중복 체크 건너뛰기
+    if (id === user.code) {
+      setUserIdStatus("available");
+      setUserIdMessage("현재 사용 중인 아이디입니다");
+      return;
+    }
+
     setUserIdStatus("checking");
     setUserIdMessage("확인 중...");
 
-    // 실제 구현에서는 API 호출
-    setTimeout(() => {
-      // 임시 로직: 특정 아이디들을 이미 사용 중으로 설정
-      const unavailableIds = ["admin", "test", "user", "guest"];
-      
-      if (unavailableIds.includes(id.toLowerCase())) {
-        setUserIdStatus("unavailable");
-        setUserIdMessage("이미 사용 중인 아이디입니다");
-      } else {
-        setUserIdStatus("available");
-        setUserIdMessage("사용 가능한 아이디입니다");
+    try {
+      const response = await checkUserCode(id);
+      if (response && response.data !== undefined) {
+        // API 응답: data가 true면 중복, false면 사용 가능
+        if (response.data === false) {
+          setUserIdStatus("available");
+          setUserIdMessage("사용 가능한 아이디입니다");
+        } else {
+          setUserIdStatus("unavailable");
+          setUserIdMessage("이미 사용 중인 아이디입니다");
+        }
       }
-    }, 1000);
-  }, []);
+    } catch (error) {
+      console.error('아이디 중복 확인 실패:', error);
+      setUserIdStatus("error");
+      setUserIdMessage("확인 중 오류가 발생했습니다");
+    }
+  }, [user.code]);
 
   const handleUserIdChange = (e) => {
     const newUserId = e.target.value;
     setUserId(newUserId);
     setFormData(prev => ({ ...prev, nickname: newUserId }));
     
-    // 디바운싱을 위한 타이머
+    // 디바운싱을 위한 타이머 (1.3초 후 요청)
     clearTimeout(window.userIdCheckTimer);
     window.userIdCheckTimer = setTimeout(() => {
-      checkUserIdAvailability(newUserId);
-    }, 500);
+      checkUserIdAvailability(newUserId); 
+    }, 1300);
   };
 
   // 입력 필드 변경 핸들러
@@ -77,9 +169,45 @@ export default function UserEditPage() {
     setFormData(prev => ({ ...prev, [field]: value }));
   };
 
+  // 컴포넌트 마운트 시 사용자 정보 불러오기
+  useEffect(() => {
+    const fetchUserData = async () => {
+      try {
+        const userResponse = await getCurrentUser();
+        console.log('사용자 정보 API 응답:', userResponse);
+        
+        if (userResponse && userResponse.data) {
+          const userData = userResponse.data;
+          const newUser = {
+            id: userData.userId,
+            name: userData.nickname,
+            nickname: userData.code,        // code를 nickname으로 매핑
+            introduction: userData.introduction || '',
+            profileImageUrl: userData.profileImageUrl,
+            code: userData.code
+          };
+          
+          setUser(newUser);
+          setUserId(userData.code || '');   // code를 userId로 설정
+          setFormData({
+            name: userData.nickname || '',      // nickname을 name으로
+            nickname: userData.code || '',      // code를 nickname으로
+            introduction: userData.introduction || ''
+          });
+        }
+      } catch (error) {
+        console.error('사용자 정보 조회 실패:', error);
+      }
+    };
+    
+    fetchUserData();
+  }, []);
+
   useEffect(() => {
     // 초기 아이디 체크
-    checkUserIdAvailability(userId);
+    if (userId) {
+      checkUserIdAvailability(userId);
+    }
   }, [checkUserIdAvailability, userId]);
 
   return (
@@ -100,9 +228,36 @@ export default function UserEditPage() {
 
         {/* 프로필 사진 영역 */}
         <div className={styles.profileImageSection}>
-          <div className={styles.profileDetailImage}>
-            <img src="/src/assets/user/camera.png" alt="camera" className={styles.cameraIcon} />
+          <div 
+            className={styles.profileDetailImage}
+            style={{
+              backgroundImage: previewImage ? `url(${previewImage})` : (user.profileImageUrl ? `url(${user.profileImageUrl})` : 'none')
+            }}
+            onClick={handleImageClick}
+            role="button"
+            tabIndex={0}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                handleImageClick();
+              }
+            }}
+          >
+            {!previewImage && !user.profileImageUrl && (
+              <img src="/src/assets/user/camera.png" alt="camera" className={styles.cameraIcon} />
+            )}
+            <div className={styles.imageOverlay}>
+              <span className={styles.changeImageText}>사진 변경</span>
+            </div>
           </div>
+          
+          {/* 숨겨진 파일 입력 */}
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept="image/*"
+            onChange={handleFileSelect}
+            style={{ display: 'none' }}
+          />
         </div>
 
         {/* 닉네임 영역 */}
@@ -139,7 +294,9 @@ export default function UserEditPage() {
           <div className={`${styles.userIdMessage} ${
             userIdStatus === 'available' ? styles.messageAvailable : 
             userIdStatus === 'unavailable' ? styles.messageUnavailable :
-            userIdStatus === 'checking' ? styles.messageChecking : ''
+            userIdStatus === 'checking' ? styles.messageChecking :
+            userIdStatus === 'error' ? styles.messageError :
+            userIdStatus === 'idle' ? styles.messageIdle : ''
           }`}>
             {userIdMessage}
           </div>
@@ -150,8 +307,8 @@ export default function UserEditPage() {
           <textarea 
             className={styles.editBioInput}
             placeholder="자기소개를 등록하세요(최대 50자)"
-            value={formData.bio}
-            onChange={(e) => handleInputChange('bio', e.target.value)}
+            value={formData.introduction}
+            onChange={(e) => handleInputChange('introduction', e.target.value)}
           />
         </div>
       </div>
diff --git a/src/components/user/UserProfileDetailPage.jsx b/src/components/user/UserProfileDetailPage.jsx
index 4b86d43..e58da49 100644
--- a/src/components/user/UserProfileDetailPage.jsx
+++ b/src/components/user/UserProfileDetailPage.jsx
@@ -1,11 +1,54 @@
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import useUserStore from "@/stores/userStore";
+import { getCurrentUser, getContactStatus } from "@/apis/user/user.js";
 import AppFooter from "@/components/footer/AppFooter";
 import styles from "@/components/user/userProfileDetail.module.css";
 
 export default function UserProfileDetailPage() {
   const navigate = useNavigate();
-  const { user, subscription } = useUserStore();
+  const [user, setUser] = useState({
+    id: null,
+    name: '',
+    nickname: '',
+    profileImageUrl: null,
+    code: null,
+    introduction: null
+  });
+  const [contactStatus, setContactStatus] = useState(false);
+
+  useEffect(() => {
+    // 페이지 로드 시 사용자 정보와 연락 정보 상태 가져오기
+    const fetchData = async () => {
+      try {
+        // 사용자 정보 조회
+        const userResponse = await getCurrentUser();
+        console.log('사용자 API 응답:', userResponse);
+        
+        if (userResponse && userResponse.data) {
+          const userData = userResponse.data;
+          setUser({
+            id: userData.userId,
+            name: userData.nickname,
+            nickname: userData.nickname,
+            profileImageUrl: userData.profileImageUrl,
+            code: userData.code,
+            introduction: userData.introduction
+          });
+        }
+
+        // 연락 정보 상태 조회
+        const contactResponse = await getContactStatus();
+        console.log('연락 정보 API 응답:', contactResponse);
+        if (contactResponse && contactResponse.data !== undefined) {
+          setContactStatus(contactResponse.data);
+        }
+      } catch (error) {
+        console.error('데이터 조회 실패:', error);
+      }
+    };
+    
+    fetchData();
+  }, []);
 
   const handleEditClick = () => {
     navigate('/user/edit');
@@ -37,37 +80,41 @@ export default function UserProfileDetailPage() {
 
         {/* 프로필 사진 영역 */}
         <div className={styles.profileImageSection}>
-          <div className={styles.profileDetailImage}>
-            <img src="/src/assets/user/camera.png" alt="camera" className={styles.cameraIcon} />
+          {console.log('현재 사용자 상태:', user)}
+          <div 
+            className={styles.profileDetailImage}
+            style={{
+              backgroundImage: user.profileImageUrl ? `url(${user.profileImageUrl})` : 'none'
+            }}
+          >
+            {!user.profileImageUrl && (
+              <img src="/src/assets/user/camera.png" alt="camera" className={styles.cameraIcon} />
+            )}
           </div>
         </div>
 
         {/* 닉네임과 태그 영역 */}
         <div className={styles.profileNameSection}>
           <span className={styles.profileName}>{user.name}</span>
-          <span className={styles.profileTag}>@{user.nickname}</span>
+          {user.code && (
+            <span className={styles.profileTag}>@{user.code}</span>
+          )}
         </div>
 
         <div className={styles.bioSection}>
           <p className={styles.bioText}>
-            {user.bio || "안녕하세요. 아름다운 바다 그림을 통해 많은 사람들에게 행복을 주고 싶은 크리에이터입니다."}
+            {user.introduction || "자기소개를 등록해주세요."}
           </p>
         </div>
 
         <div className={styles.actionButtons}>
           <button 
-            className={`${styles.actionButton} ${styles.contactRegistered}`}
+            className={`${styles.actionButton} ${contactStatus ? styles.contactRegistered : ''}`}
             onClick={() => navigate('/user/contact')}
           >
-            연락 정보 등록하기
+            {contactStatus ? '연락 정보 등록됨' : '연락 정보 등록하기'}
           </button>
-          <button 
-            className={`${styles.actionButton} ${subscription.isPremium ? styles.premiumSubscribed : ''}`}
-            onClick={handleMembershipClick}
-          >
-            {subscription.isPremium ? '멤버십 구독 중' : '멤버십 관리'}
-          </button>
-        </div>
+        </div>  
       </div>
       
       <AppFooter />
diff --git a/src/components/user/UserProfileHeader.jsx b/src/components/user/UserProfileHeader.jsx
index b391bb3..c1b1f71 100644
--- a/src/components/user/UserProfileHeader.jsx
+++ b/src/components/user/UserProfileHeader.jsx
@@ -1,10 +1,38 @@
+import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
-import useUserStore from "../../stores/userStore";
+import { getCurrentUser } from "../../apis/user/user.js";
 import styles from './userProfileHeader.module.css';
 
 export default function UserProfileHeader() {
   const navigate = useNavigate();
-  const { user } = useUserStore();
+  const [user, setUser] = useState({
+    name: '',
+    code: '',
+    profileImageUrl: null
+  });
+  
+  useEffect(() => {
+    // 컴포넌트 마운트 시 사용자 정보 가져오기
+    const fetchUserData = async () => {
+      try {
+        const response = await getCurrentUser();
+        console.log('UserProfileHeader - 사용자 API 응답:', response);
+        
+        if (response && response.data) {
+          const userData = response.data;
+          setUser({
+            name: userData.nickname || '',
+            code: userData.code || '',
+            profileImageUrl: userData.profileImageUrl || null
+          });
+        }
+      } catch (error) {
+        console.error('사용자 정보 조회 실패:', error);
+      }
+    };
+    
+    fetchUserData();
+  }, []);
   
   const handleProfileClick = () => {
     navigate('/user/profile');
@@ -16,12 +44,12 @@ export default function UserProfileHeader() {
         <div 
           className={styles.profileImage}
           style={{
-            backgroundImage: user.profileImage ? `url(${user.profileImage})` : 'none'
+            backgroundImage: user.profileImageUrl ? `url(${user.profileImageUrl})` : 'none'
           }}
         />
         <div className={styles.profileText}>
-          <span className={styles.profileName}>{user.name} </span>
-          <span className={styles.profileId}>@{user.nickname}</span>  
+          <span className={styles.profileName}>{user.name}</span>
+          {user.code && <span className={styles.profileId}>@{user.code}</span>}
         </div>
       </div>
     </div>
diff --git a/src/components/user/UserProfileModal.jsx b/src/components/user/UserProfileModal.jsx
index 60da060..3820819 100644
--- a/src/components/user/UserProfileModal.jsx
+++ b/src/components/user/UserProfileModal.jsx
@@ -1,8 +1,26 @@
+import { useEffect } from "react";
 import useUserStore from "../../stores/userStore";
+import { getCurrentUser } from "../../apis/user/user.js";
 import styles from './userProfileModal.module.css';
 
 export default function UserProfileModal({ isOpen, onClose, onEditClick }) {
-  const { user, contactInfo, subscription } = useUserStore();
+  const { user, contactInfo, subscription, setUserFromAPI } = useUserStore();
+
+  useEffect(() => {
+    if (isOpen) {
+      // 모달이 열릴 때 사용자 정보 가져오기
+      const fetchUserData = async () => {
+        try {
+          const response = await getCurrentUser();
+          setUserFromAPI(response);
+        } catch (error) {
+          console.error('사용자 정보 조회 실패:', error);
+        }
+      };
+      
+      fetchUserData();
+    }
+  }, [isOpen, setUserFromAPI]);
 
   if (!isOpen) return null;
 
@@ -43,11 +61,11 @@ export default function UserProfileModal({ isOpen, onClose, onEditClick }) {
 
         <div className={styles.contactSection}>
           <div className={styles.contactItem}>
-            <div className={styles.contactIcon}>📧</div>
+            <img src="/src/assets/user/mail2.png" alt="mail" className={styles.contactIcon} />
             <span className={styles.contactText}>이메일 {user.email}</span>
           </div>
           <div className={styles.contactItem}>
-            <div className={styles.contactIcon}>📷</div>
+            <img src="/src/assets/user/instagram.png" alt="instagram" className={styles.contactIcon} />
             <span className={styles.contactText}>인스타그램 @{user.instagram || user.nickname}</span>
           </div>
         </div>
diff --git a/src/components/user/userEdit.module.css b/src/components/user/userEdit.module.css
index b619af7..57763b0 100644
--- a/src/components/user/userEdit.module.css
+++ b/src/components/user/userEdit.module.css
@@ -66,11 +66,48 @@
   height: 80px;
   border-radius: 50%;
   background-color: #eeeeee;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   aspect-ratio: 1/1;
+  cursor: pointer;
+  position: relative;
+  transition: all 0.2s ease;
+}
+
+.profileDetailImage:hover {
+  transform: scale(1.05);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.imageOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+}
+
+.profileDetailImage:hover .imageOverlay {
+  opacity: 1;
+}
+
+.changeImageText {
+  color: white;
+  font-size: 12px;
+  font-weight: 600;
+  text-align: center;
 }
 
 .cameraIcon {
@@ -237,10 +274,10 @@
 .emailInputContainer {
   display: flex;
   align-items: center;
-  gap: 4px;
   width: 100%;
   max-width: 100%;
-  overflow: hidden;
+  flex-wrap: nowrap;
+  min-width: 0;
 }
 
 .emailUsernameInput {
@@ -256,7 +293,8 @@
   line-height: 22px;
   box-sizing: border-box;
   flex: 1;
-  min-width: 80px;
+  min-width: 60px;
+  max-width: 110px;
   outline: none;
 }
 
@@ -272,6 +310,7 @@
   letter-spacing: -0.35px;
   line-height: 22px;
   padding: 0 4px;
+  flex-shrink: 0;
 }
 
 .emailDomainSelect {
@@ -288,6 +327,7 @@
   box-sizing: border-box;
   flex: 1;
   min-width: 90px;
+  max-width: 150px;
   cursor: pointer;
 }
 
@@ -305,6 +345,7 @@
   box-sizing: border-box;
   flex: 1;
   min-width: 90px;
+  max-width: 150px;
   outline: none;
 }
 
@@ -342,3 +383,11 @@
 .messageChecking {
   color: #434343;
 }
+
+.messageError {
+  color: #ff6b6b;
+}
+
+.messageIdle {
+  color: #757575;
+}
diff --git a/src/components/user/userProfileDetail.module.css b/src/components/user/userProfileDetail.module.css
index 62469e2..a19fa78 100644
--- a/src/components/user/userProfileDetail.module.css
+++ b/src/components/user/userProfileDetail.module.css
@@ -72,6 +72,9 @@
   height: 80px;
   border-radius: 50%;
   background-color: #eeeeee;
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -187,4 +190,4 @@
   text-align: right;
   margin-left: -30px;
   margin-right: auto;
-}
+}
\ No newline at end of file
diff --git a/src/dummy.js b/src/dummy.js
index 72e349c..6e26333 100644
--- a/src/dummy.js
+++ b/src/dummy.js
@@ -6,7 +6,7 @@ export const artworks = [
     artist: "김민수",
     year: 2023,
     description: "현대 도시 풍경을 따뜻한 색조로 표현한 작품",
-    image: "https://picsum.photos/400/300?random=1",
+    image: "/artwork1.png",
     price: "150만원",
     position: [-8, 2.5, -7.8], // 뒷벽 왼쪽
   },
@@ -16,7 +16,7 @@ export const artworks = [
     artist: "이영희",
     year: 2023,
     description: "자연 속에서 찾은 평온함을 담은 추상화",
-    image: "https://picsum.photos/400/300?random=2",
+    image: "/artwork2.png",
     price: "200만원",
     position: [0, 2.5, -7.8], // 뒷벽 중앙
   },
@@ -26,7 +26,7 @@ export const artworks = [
     artist: "박철수",
     year: 2022,
     description: "과거와 현재를 잇는 시간의 흐름을 표현",
-    image: "https://picsum.photos/400/300?random=3",
+    image: "/artwork3.png",
     price: "180만원",
     position: [8, 2.5, -7.8], // 뒷벽 오른쪽
   },
@@ -36,7 +36,7 @@ export const artworks = [
     artist: "최수진",
     year: 2023,
     description: "푸른 바다의 무한함과 꿈을 그린 작품",
-    image: "https://picsum.photos/400/300?random=4",
+    image: "/artwork1.png",
     price: "220만원",
     position: [-17.3, 2.5, -4], // 왼쪽 벽 뒤쪽
   },
@@ -46,7 +46,7 @@ export const artworks = [
     artist: "정다은",
     year: 2023,
     description: "따스한 봄날의 감성을 담은 서정적 작품",
-    image: "https://picsum.photos/400/300?random=5",
+    image: "/artwork2.png",
     price: "160만원",
     position: [17.3, 2.5, -4], // 오른쪽 벽 뒤쪽
   },
@@ -56,7 +56,7 @@ export const artworks = [
     artist: "한지민",
     year: 2022,
     description: "현대인의 고독과 소통에 대한 성찰",
-    image: "https://picsum.photos/400/300?random=6",
+    image: "/artwork3.png",
     price: "190만원",
     position: [-17.3, 2.5, 4], // 왼쪽 벽 앞쪽
   },
@@ -66,7 +66,7 @@ export const artworks = [
     artist: "조영수",
     year: 2023,
     description: "세월이 남긴 흔적들의 아름다움을 포착한 작품",
-    image: "https://picsum.photos/400/300?random=7",
+    image: "/artwork1.png",
     price: "170만원",
     position: [17.3, 2.5, 4], // 오른쪽 벽 앞쪽
   },
@@ -76,7 +76,7 @@ export const artworks = [
     artist: "이서연",
     year: 2023,
     description: "희망찬 새벽을 맞이하는 마음을 그린 작품",
-    image: "https://picsum.photos/400/300?random=8",
+    image: "/artwork2.png",
     price: "210만원",
     position: [-6, 2.5, 7.8], // 앞쪽 벽 왼쪽
   },
@@ -86,7 +86,7 @@ export const artworks = [
     artist: "김태현",
     year: 2022,
     description: "바쁜 도시 생활 속에서 발견한 고유한 리듬감",
-    image: "https://picsum.photos/400/300?random=9",
+    image: "/artwork3.png",
     price: "185만원",
     position: [6, 2.5, 7.8], // 앞쪽 벽 오른쪽
   },
diff --git a/src/pages/ExhibitionDetailPage.jsx b/src/pages/ExhibitionDetailPage.jsx
index b11433b..f2cc62d 100644
--- a/src/pages/ExhibitionDetailPage.jsx
+++ b/src/pages/ExhibitionDetailPage.jsx
@@ -10,7 +10,7 @@ import ExhibitionVenue from '../components/exhibition/ExhibitionVenue';
 import ExhibitionReviews from '../components/exhibition/ExhibitionReviews';
 import ExhibitionParticipants from '../components/exhibition/ExhibitionParticipants';
 import BackToTopButton from '../components/common/BackToTopButton';
-import { useExhibitionDetail, usePieceImages, useParticipantCreators, useExhibitionReviewsPreview } from '../apis/exhibition/exhibition';
+import { useExhibitionDetail, usePieceImages, useParticipantCreators, useExhibitionReviewsPreview } from '@apis/museum/exhibition';
 import styles from './exhibitionDetailPage.module.css';
 
 const ExhibitionDetailPage = () => {
diff --git a/src/pages/MuseumPage.jsx b/src/pages/MuseumPage.jsx
index f87846f..4b3fd18 100644
--- a/src/pages/MuseumPage.jsx
+++ b/src/pages/MuseumPage.jsx
@@ -4,27 +4,79 @@ import MuseumProfile from "@museum/components/museum/MuseumProfile";
 import ArtworkSection from "@museum/components/museum/ArtworkSection";
 import ExhibitionSection from "@museum/components/museum/ExhibitionSection";
 import InsightSection from "@museum/components/museum/InsightSection";
+import InvitationSection from "@museum/components/museum/InvitationSection";
 import BackToTopButton from "@/components/common/BackToTopButton";
 import AppFooter from "@/components/footer/AppFooter";
-import useUserStore from "@/stores/userStore";
+import { getMyPieces } from "@apis/museum/artwork";
+import { getMyExhibitions } from "@apis/museum/exhibition";
+import { getCurrentUser } from "@/apis/user/user.js";
 import styles from "@museum/components/museum/museum.module.css";
 import commonStyles from "@museum/components/museum/common.module.css";
 
-// 이미지 import
-import artwork1 from "@/assets/museum/큰사진3.png";
-import artwork2 from "@/assets/museum/큰사진4.png";
-import artwork3 from "@/assets/museum/큰사진5.png";
-import exhibition1 from "@/assets/museum/큰사진1.png";
-import exhibition2 from "@/assets/museum/큰사진2.png";
-
 
 export default function MuseumPage() {
-  // Zustand에서 사용자 정보 가져오기
-  const { user, subscription } = useUserStore();
+  // 작품 데이터 상태
+  const [artworks, setArtworks] = useState([]);
+  const [artworksTotal, setArtworksTotal] = useState(0);
+  
+  // 전시회 데이터 상태
+  const [exhibitions, setExhibitions] = useState([]);
+  const [exhibitionsTotal, setExhibitionsTotal] = useState(0);
+  
+  // 사용자 정보 상태
+  const [user, setUser] = useState(null);
+  
+  // 초대 정보 상태
+  const [invitation, setInvitation] = useState({
+    hasInvitation: false,
+    hasSharedLibraryRequest: false,
+    invitationCount: 0
+  });
   
   // 스크롤 상태 관리
   const [isScrolled, setIsScrolled] = useState(false);
 
+  // 데이터 로드
+  useEffect(() => {
+    const loadData = async () => {
+      try {
+        // 사용자 정보 로드
+        const userResponse = await getCurrentUser();
+        if (userResponse?.data) {
+          setUser(userResponse.data);
+          console.log('MuseumPage - 사용자 정보:', userResponse.data);
+        }
+        
+        // 작품 데이터 로드
+        const artworksResponse = await getMyPieces({ applicated: true, pageNum: 1, pageSize: 3 });
+        if (artworksResponse?.data) {
+          setArtworks(artworksResponse.data.content || []);
+          setArtworksTotal(artworksResponse.data.totalElements || 0);
+          console.log('설정된 작품 목록:', artworksResponse.data.content);
+          console.log('작품 총 개수:', artworksResponse.data.totalElements);
+        }
+        
+        // 전시회 데이터 로드
+        const exhibitionsResponse = await getMyExhibitions({ pageNum: 1, pageSize: 3, fillAll: true });
+        console.log('전시회 API 응답:', exhibitionsResponse);
+        if (exhibitionsResponse?.data?.data) {
+          const content = exhibitionsResponse.data.data.content || [];
+          const totalElements = exhibitionsResponse.data.data.totalElements || 0;
+          
+          setExhibitions(content);
+          setExhibitionsTotal(totalElements);
+          
+          console.log('전시회 데이터 설정:', { content, totalElements });
+        }
+        
+      } catch (error) {
+        console.error('데이터 로드 오류:', error);
+      }
+    };
+
+    loadData();
+  }, []);
+
   // 스크롤 이벤트 처리
   useEffect(() => {
     const handleScroll = () => {
@@ -36,78 +88,31 @@ export default function MuseumPage() {
     return () => window.removeEventListener('scroll', handleScroll);
   }, []);
 
-  const artworks = [
-    { id: 1, image: artwork1, title: "정원에서의 오후" },
-    { id: 2, image: artwork2, title: "에트르타 절벽" },
-    { id: 3, image: artwork3, title: "바다 풍경" },
-    { id: 4, image: artwork1, title: "보르디게라의 정원" },
-    { id: 5, image: artwork2, title: "강가의 휴식" },
-    { id: 6, image: artwork3, title: "모네의 정원 시리즈 1" },
-    { id: 7, image: artwork1, title: "바위와 바다" },
-    { id: 8, image: artwork2, title: "푸른 바다" },
-    { id: 9, image: artwork3, title: "나무와 빛" },
-    { id: 10, image: artwork1, title: "물가의 평온" },
-    { id: 11, image: artwork2, title: "인상파 풍경 1" },
-    { id: 12, image: artwork3, title: "인상파 풍경 2" },
-    { id: 13, image: artwork1, title: "인상파 풍경 3" },
-    { id: 14, image: artwork2, title: "인상파 풍경 4" },
-    { id: 15, image: artwork3, title: "인상파 풍경 5" },
-    { id: 16, image: artwork1, title: "자연의 순간 1" },
-    { id: 17, image: artwork2, title: "자연의 순간 2" },
-  ];
-
-  const exhibitions = [
-    {
-      id: 1,
-      title: "김땡땡 개인전 : 두 번째 여름",
-      date: "24.12.5 - 25.2.19",
-      image: exhibition1
-    },
-    {
-      id: 2,
-      title: "김땡땡 개인전",
-      date: "24.12.5 - 25.2.19",
-      image: exhibition2
-    },
-    {
-      id: 3,
-      title: "추상 미술의 세계",
-      date: "24.11.1 - 25.1.15",
-      image: exhibition1
-    },
-    {
-      id: 4,
-      title: "도시 풍경 전시",
-      date: "24.10.20 - 24.12.30",
-      image: exhibition2
-    },
-    {
-      id: 5,
-      title: "자연과 빛의 조화",
-      date: "24.9.15 - 24.11.30",
-      image: exhibition1
-    },
-    {
-      id: 6,
-      title: "현대 미술의 흐름",
-      date: "24.8.1 - 24.10.15",
-      image: exhibition2
-    }
-  ];
 
   return (
     <div className={styles.page}>
-      <div style={{height: '40px'}}></div>
+      <div style={{height: '10px'}}></div>
       <div className={`${styles.topShadow} ${isScrolled ? styles.topShadowVisible : ''}`} />
       
-      <MuseumProfile user={user} />
+      {user && <MuseumProfile user={user} />}
       <PremiumBar />
       
+      {/* 공동 전시 초대가 온 사용자에게만 보여주는 섹션 */}
+      {(invitation.hasInvitation || invitation.hasSharedLibraryRequest) && (
+        <InvitationSection 
+          hasInvitation={invitation.hasInvitation}
+          hasSharedLibraryRequest={invitation.hasSharedLibraryRequest}
+          invitationCount={invitation.invitationCount}
+        />
+      )}
+      
       <main className={commonStyles.main}>
-        <ArtworkSection artworks={artworks} />
-        <ExhibitionSection exhibitions={exhibitions} />
+        <ArtworkSection artworks={artworks} totalElements={artworksTotal} />
+        <ExhibitionSection exhibitions={exhibitions} totalElements={exhibitionsTotal} />
         <InsightSection />
       </main>
+      
+
 
       <BackToTopButton />
       <AppFooter />
diff --git a/src/pages/MyPage.jsx b/src/pages/MyPage.jsx
index a53f110..0c24138 100644
--- a/src/pages/MyPage.jsx
+++ b/src/pages/MyPage.jsx
@@ -6,7 +6,7 @@ import styles from "@/components/user/myPage.module.css";
 export default function MyPage() {
   return (
     <div className={styles.page}>
-      <div style={{height: '40px'}}></div>
+      <div style={{height: '10px'}}></div>
       <div className={styles.content}>
         {/* 첫 번째 화면: 기본 마이페이지 */}
         <UserProfileHeader />
diff --git a/src/routers/index.jsx b/src/routers/index.jsx
index 3c82c15..eb41022 100644
--- a/src/routers/index.jsx
+++ b/src/routers/index.jsx
@@ -10,6 +10,9 @@ import DraftArtworkPage from "@/components/museum/pages/DraftArtworkPage";
 import ArtworkUploadPage from "@/components/museum/pages/ArtworkUploadPage";
 import ExhibitionUploadPage from "@/components/museum/pages/ExhibitionUploadPage";
 import ExhibitionParticipantPage from "@/components/museum/pages/ExhibitionParticipantPage";
+import ExhibitionInvitationPage from "@/components/museum/pages/ExhibitionInvitationPage";
+import SharedLibrarySelectionPage from "@/components/museum/pages/SharedLibrarySelectionPage";
+import SharedLibraryEntryPage from "@/components/museum/pages/SharedLibraryEntryPage";
 import OfflineLocationPage from "@/components/museum/pages/OfflineLocationPage";
 import MyExhibitionPage from "@/components/museum/pages/MyExhibitionPage";
 import ArtworkLibraryPage from "@/components/museum/pages/ArtworkLibraryPage";
@@ -54,6 +57,9 @@ const router = createBrowserRouter([
   { path: "/exhibition/my", element: <MyExhibitionPage /> },
   { path: "/exhibition/upload", element: <ExhibitionUploadPage /> },
   { path: "/exhibition/participants", element: <ExhibitionParticipantPage /> },
+  { path: "/exhibition/invitations", element: <ExhibitionInvitationPage /> },
+  { path: "/exhibition/shared-library-selection", element: <SharedLibrarySelectionPage /> },
+  { path: "/exhibition/shared-library-entry", element: <SharedLibraryEntryPage /> },
   { path: "/exhibition/offline-location", element: <OfflineLocationPage /> },
   { path: "/artwork/library", element: <ArtworkLibraryPage /> },
   { path: "/exhibition/date-picker", element: <ExhibitionDatePicker /> },
diff --git a/src/stores/userStore.js b/src/stores/userStore.js
index c523774..fa24641 100644
--- a/src/stores/userStore.js
+++ b/src/stores/userStore.js
@@ -1,22 +1,9 @@
 import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
-import profileImage from '@/assets/museum/프사.png'
 
 const useUserStore = create(
   persist(
     (set) => ({
-      // 사용자 정보
-      user: {
-        id: 1,
-        name: '김땡땡',
-        nickname: 'simonisnextdoor',
-        email: 'asd123@naver.com',
-        profileImage: profileImage,
-        title: '크리에이터의 전시장',
-        bio: '',
-        instagram: 'simonisnextdoor'
-      },
-      
       // 사용자 선호도
       preferences: {
         exhibitions: [],
@@ -26,55 +13,25 @@ const useUserStore = create(
         nickname: '',
         userId: '',
       },
-      
-      // 로그인 상태
-      isLoggedIn: true,
-      
-      // 구독 정보
-      subscription: {
-        isPremium: false, // 구독 상태별 조건부 렌더링 확인
-        plan: 'premium', // 'free', 'premium', 'pro'
-        startDate: new Date().toISOString(),
-        endDate: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString(),
-      },
-
-      // 연락 정보
-      contactInfo: {
-        isRegistered: true, // 연락 정보 등록 여부
-        accountNumber: '1234567890',
-        bankName: '국민은행',
-      },
-
-      // 구독 상태 업데이트 (테스트용)
-      updateSubscription: (subscriptionData) => {
-        set(state => ({
-          subscription: { ...state.subscription, ...subscriptionData }
-        }))
-      },
 
-      // 연락 정보 업데이트
-      updateContactInfo: (contactData) => {
+      // 전시 선호도 업데이트
+      updateExhibitionPreferences: (exhibitions) => {
         set(state => ({
-          contactInfo: { ...state.contactInfo, ...contactData }
+          preferences: { ...state.preferences, exhibitions }
         }))
       },
 
-      // 사용자 정보 업데이트
-      updateUser: (userData) => {
+      // 작품 분위기 선호도 업데이트
+      updateArtworkMoodPreferences: (artworkMoods) => {
         set(state => ({
-          user: { ...state.user, ...userData }
-
+          preferences: { ...state.preferences, artworkMoods }
         }))
       }
     }),
     {
       name: 'artium-user-storage',
       partialize: (state) => ({
-        user: state.user,
-        isLoggedIn: state.isLoggedIn,
-        subscription: state.subscription,
-        contactInfo: state.contactInfo
-
+        preferences: state.preferences
       })
     }
   )
diff --git a/vite.config.js b/vite.config.js
index 1534215..09bb4a1 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -7,7 +7,7 @@ export default defineConfig({
   resolve: {
     alias: [
       { find: '@', replacement: '/src' },
-      { find: '@api', replacement: '/src/api' },
+      { find: '@apis', replacement: '/src/apis' },
       { find: '@components', replacement: '/src/components' },
       { find: '@commons', replacement: '/src/components/commons' },
       { find: '@pages', replacement: '/src/pages' },
@@ -19,10 +19,11 @@ export default defineConfig({
   },
   server: {
     proxy: {
+      // "/api"로 들어오는 요청을 백엔드로 프록시
       '/api': {
-        target: 'https://api.artium.life',
-        changeOrigin: true,
-      }
-    }
-  }
+        target: 'https://api.artium.life', // 백엔드 서버
+        changeOrigin: true,              // 호스트 헤더를 target으로 변경
+      },
+    },
+  },
 });
\ No newline at end of file