From 42b22a34329fb3d8853e872bdf0f2da2bfc9fb0a Mon Sep 17 00:00:00 2001
From: wnsgur393 <2021301022@skuniv.ac.kr>
Date: Sat, 23 Aug 2025 16:05:09 +0900
Subject: [PATCH 1/6] =?UTF-8?q?=E2=9C=A8=20Feat:=20=EA=B3=B5=EB=8F=99=20?=
 =?UTF-8?q?=EC=A0=84=EC=8B=9C=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/exhibition/ExhibitionList.jsx  |   2 +-
 .../exhibition/exhibitionList.module.css      |  14 +-
 .../components/museum/InvitationSection.jsx   |  33 ++
 .../museum/invitationSection.module.css       |  42 ++
 .../museum/pages/ExhibitionInvitationPage.jsx | 137 +++++
 .../pages/ExhibitionParticipantPage.jsx       | 237 ++++----
 .../museum/pages/ExhibitionUploadPage.jsx     |  25 +-
 .../museum/pages/SharedLibraryEntryPage.jsx   | 283 ++++++++++
 .../pages/SharedLibrarySelectionPage.jsx      |  99 ++++
 .../pages/exhibitionInvitationPage.module.css | 166 ++++++
 .../exhibitionParticipantPage.module.css      | 223 +++++---
 .../pages/exhibitionUploadPage.module.css     | 107 +++-
 .../pages/sharedLibraryEntryPage.module.css   | 531 ++++++++++++++++++
 .../sharedLibrarySelectionPage.module.css     | 120 ++++
 src/pages/MuseumPage.jsx                      |  12 +-
 src/routers/index.jsx                         |   6 +
 src/stores/userStore.js                       |  17 +-
 17 files changed, 1825 insertions(+), 229 deletions(-)
 create mode 100644 src/components/museum/components/museum/InvitationSection.jsx
 create mode 100644 src/components/museum/components/museum/invitationSection.module.css
 create mode 100644 src/components/museum/pages/ExhibitionInvitationPage.jsx
 create mode 100644 src/components/museum/pages/SharedLibraryEntryPage.jsx
 create mode 100644 src/components/museum/pages/SharedLibrarySelectionPage.jsx
 create mode 100644 src/components/museum/pages/exhibitionInvitationPage.module.css
 create mode 100644 src/components/museum/pages/sharedLibraryEntryPage.module.css
 create mode 100644 src/components/museum/pages/sharedLibrarySelectionPage.module.css

diff --git a/src/components/museum/components/exhibition/ExhibitionList.jsx b/src/components/museum/components/exhibition/ExhibitionList.jsx
index c194c03..5271389 100644
--- a/src/components/museum/components/exhibition/ExhibitionList.jsx
+++ b/src/components/museum/components/exhibition/ExhibitionList.jsx
@@ -99,7 +99,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}>
diff --git a/src/components/museum/components/exhibition/exhibitionList.module.css b/src/components/museum/components/exhibition/exhibitionList.module.css
index 83bfecd..02c0832 100644
--- a/src/components/museum/components/exhibition/exhibitionList.module.css
+++ b/src/components/museum/components/exhibition/exhibitionList.module.css
@@ -1,12 +1,22 @@
 .container {
-  min-height: 100vh;
   background-color: #f6f1eb;
-  padding: 0 32px 100px;
+  padding: 0 32px;
   position: relative;
   max-width: 430px;
   margin: 0 auto;
 }
 
+/* 빈 상태가 아닐 때만 최소 높이 적용 */
+.container:not(.emptyContainer) {
+  min-height: 100vh;
+}
+
+/* 빈 상태일 때는 최소 높이 제거 */
+.emptyContainer {
+  min-height: auto;
+  height: auto;
+}
+
 /* 헤더 */
 .header {
   padding: 10px 0 20px;
diff --git a/src/components/museum/components/museum/InvitationSection.jsx b/src/components/museum/components/museum/InvitationSection.jsx
new file mode 100644
index 0000000..78a503e
--- /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/invitationSection.module.css b/src/components/museum/components/museum/invitationSection.module.css
new file mode 100644
index 0000000..6f3ea15
--- /dev/null
+++ b/src/components/museum/components/museum/invitationSection.module.css
@@ -0,0 +1,42 @@
+.invitationSection {
+  margin-bottom: 20px;
+}
+
+.invitationAlert {
+  height: 48px;
+  width: 360px;
+  border: 2px solid #F37021;
+  background: #CEDDE4;
+  border-right: none;
+  display: flex;
+  align-items: center;
+  padding: 0 40px;
+  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;
+}
+
+.sharedLibraryAlert {
+  height: 48px;
+  width: 360px;
+  border: 2px solid #F37021;
+  background: #CEDDE4;
+  border-right: none;
+  margin: 12px 0 0 70px;
+  display: flex;
+  align-items: center;
+  padding: 0 40px;
+  font-family: 'Pretendard', sans-serif;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 19px;
+  letter-spacing: -0.4px;
+  cursor: pointer;
+}
diff --git a/src/components/museum/pages/ExhibitionInvitationPage.jsx b/src/components/museum/pages/ExhibitionInvitationPage.jsx
new file mode 100644
index 0000000..a462333
--- /dev/null
+++ b/src/components/museum/pages/ExhibitionInvitationPage.jsx
@@ -0,0 +1,137 @@
+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';
+import useUserStore from '@/stores/userStore';
+
+export default function ExhibitionInvitationPage() {
+  const navigate = useNavigate();
+  const { updateInvitation } = useUserStore();
+  
+  // 상태 관리
+  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..13fc8fa 100644
--- a/src/components/museum/pages/ExhibitionParticipantPage.jsx
+++ b/src/components/museum/pages/ExhibitionParticipantPage.jsx
@@ -1,6 +1,5 @@
 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 styles from './exhibitionParticipantPage.module.css';
@@ -8,86 +7,77 @@ 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]);
+  const exhibitionData = location.state?.exhibitionData || {};
 
-  // 전시 정보가 없으면 전시 등록 페이지로 리다이렉트
-  useEffect(() => {
-    if (!location.state?.exhibitionData) {
-      navigate('/exhibition/upload');
-    }
-  }, [location.state, navigate]);
-
-  const handleBack = () => {
-    navigate('/exhibition/upload', {
-      state: {
-        exhibitionData: location.state?.exhibitionData
-      }
-    });
-  };
+  // 더미 사용자 데이터 (실제로는 API에서 가져올 예정)
+  const dummyUsers = [
+    { id: 1, username: 'kimdangdeng', displayName: '김땡땡', profileImage: null },
+    { id: 2, username: 'simonkim', displayName: '정땡땡', profileImage: null },
+    { id: 3, username: 'kimchiman', displayName: 'kimman', profileImage: null },
+  ];
 
-  const handleSearchChange = (e) => {
-    const query = e.target.value;
-    setSearchQuery(query);
-    
+  useEffect(() => {
     // 검색어가 있을 때만 검색 결과 표시
-    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())
+    if (searchQuery.trim()) {
+      const filtered = dummyUsers.filter(user => 
+        user.username.toLowerCase().includes(searchQuery.toLowerCase()) ||
+        user.displayName.toLowerCase().includes(searchQuery.toLowerCase())
       );
-      setSearchResults(dummyResults);
+      setSearchResults(filtered);
+      setIsSearching(true);
     } else {
       setSearchResults([]);
+      setIsSearching(false);
     }
+  }, [searchQuery]);
+
+  const handleBack = () => {
+    navigate('/museum');
   };
 
-  const handleParticipantToggle = (participant) => {
-    setSelectedParticipants(prev => {
-      const isSelected = prev.find(p => p.id === participant.id);
-      if (isSelected) {
-        return prev.filter(p => p.id !== participant.id);
-      } else {
-        return [...prev, participant];
-      }
-    });
+  const handleSearchChange = (e) => {
+    setSearchQuery(e.target.value);
   };
 
-  const handleCompleteRegistration = () => {
-    if (selectedParticipants.length === 0) {
-      alert('참여자를 선택해주세요.');
-      return;
+  const handleUserSelect = (user) => {
+    const isSelected = selectedParticipants.some(p => p.id === user.id);
+    
+    if (isSelected) {
+      // 이미 선택된 사용자라면 제거
+      setSelectedParticipants(prev => prev.filter(p => p.id !== user.id));
+    } else {
+      // 새로운 사용자라면 추가
+      setSelectedParticipants(prev => [...prev, user]);
     }
+  };
 
-    // 전시 등록 페이지로 돌아가면서 참여자 정보 전달
-    navigate('/exhibition/upload', {
-      state: {
-        exhibitionData: location.state?.exhibitionData,
-        participants: selectedParticipants
-      }
-    });
+  const handleComplete = () => {
+    // 성공 모달 표시
+    setShowSuccessModal(true);
+    
+    // 2초 후 화면 전환
+    setTimeout(() => {
+      // 전시 업로드 페이지로 돌아가면서 선택된 참여자 정보 전달
+      navigate('/exhibition/upload', {
+        state: {
+          participants: selectedParticipants,
+          exhibitionData
+        }
+      });
+    }, 2000);
   };
 
-  const isParticipantSelected = (participantId) => {
-    return selectedParticipants.find(p => p.id === participantId);
+  const isUserSelected = (userId) => {
+    return selectedParticipants.some(p => p.id === userId);
   };
 
   return (
@@ -96,83 +86,110 @@ 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)}
-              >
+      {/* 안내 메시지 */}
+      {isSearching && searchResults.length > 0 && (
+        <p className={styles.infoText}>
+          {selectedParticipants.length === 0 
+            ? '프로필을 누르면 등록이 완료됩니다'
+            : `프로필을 누르면 등록이 취소됩니다 (${selectedParticipants.length})`
+          }
+        </p>
+      )}
+
+      {/* 검색 결과 목록 */}
+      {isSearching && searchResults.length > 0 && (
+        <div className={styles.userList}>
+          {searchResults.map((user) => (
+            <div
+              key={user.id}
+              className={`${styles.userCard} ${isUserSelected(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.profileImage ? (
+                    <img src={user.profileImage} 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.displayName}</span>
+                  <span className={styles.username}>@{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.id}
+              className={`${styles.userCard} ${styles.selected}`}
+              onClick={() => handleUserSelect(user)}
+            >
+              <div className={styles.userInfo}>
+                <div className={styles.profileImage}>
+                  {user.profileImage ? (
+                    <img src={user.profileImage} alt="프로필" />
+                  ) : (
+                    <div className={styles.defaultProfile} />
+                  )}
+                </div>
+                <div className={styles.userDetails}>
+                  <span className={styles.displayName}>{user.displayName}</span>
+                  <span className={styles.username}>@{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..9cb13e5 100644
--- a/src/components/museum/pages/ExhibitionUploadPage.jsx
+++ b/src/components/museum/pages/ExhibitionUploadPage.jsx
@@ -212,20 +212,21 @@ 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.form}>
           {/* 전시 썸네일 및 작품 등록 */}
           <div className={styles.artworkSection}>
             <h2 className={styles.sectionTitle}>전시 작품 등록</h2>
-            <div className={styles.artworkGrid}>
+            <div className={styles.artworkSlideContainer}>
               {/* 전시 썸네일 */}
-              <div className={styles.thumbnailSlide}>
+              <div className={styles.artworkSlide}>
                 <div className={styles.artworkImageContainer}>
                   {thumbnail ? (
                     <div className={styles.artworkImageWrapper}>
@@ -335,16 +336,10 @@ export default function ExhibitionUploadPage() {
                 }
               })}
             >
-              전시 참여자 등록하기
-              {location.state?.participants && (
-                <span className={styles.completedText}>
-                  ✓ {location.state.participants.length}명 등록됨
-                </span>
-              )}
+              {location.state?.participants ? '전시 참여자 등록됨' : '전시 참여자 등록하기'}
             </button>
           </div>
         </div>
-      </div>
 
       {/* 전시 작품 등록 모달 */}
       <ExhibitionArtworkModal
diff --git a/src/components/museum/pages/SharedLibraryEntryPage.jsx b/src/components/museum/pages/SharedLibraryEntryPage.jsx
new file mode 100644
index 0000000..36679b3
--- /dev/null
+++ b/src/components/museum/pages/SharedLibraryEntryPage.jsx
@@ -0,0 +1,283 @@
+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 styles from './sharedLibraryEntryPage.module.css';
+
+export default function SharedLibraryEntryPage() {
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { user } = useUserStore();
+  
+  // 선택된 공유 라이브러리 정보
+  const { selectedLibrary } = location.state || {};
+  
+  // Zustand store 사용
+  const { 
+    thumbnail, 
+    artworks, 
+    setThumbnail, 
+    addArtwork, 
+    updateArtwork, 
+    removeArtwork: removeArtworkFromStore 
+  } = useExhibitionPhotoStore();
+  
+  // 로컬 상태로 관리 (공유 라이브러리 작품 정보)
+  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 handleBack = () => {
+    navigate('/exhibition/shared-library-selection');
+  };
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setSharedLibraryData(prev => ({
+      ...prev,
+      [name]: value
+    }));
+  };
+
+  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 handleLoadFromLibrary = () => {
+    // 작품 라이브러리 페이지로 이동
+    navigate('/artwork/library', {
+      state: {
+        fromSharedLibrary: true,
+        currentArtworkIndex,
+        isChangeMode
+      }
+    });
+  };
+
+  // 작품 제거 처리
+  const removeArtwork = (index) => {
+    removeArtworkFromStore(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={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>
+            ) : (
+              <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={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' }}
+                  >
+                    <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={handleNewArtwork}
+        onLoadFromLibrary={handleLoadFromLibrary}
+        isThumbnail={currentArtworkIndex === -1}
+        isChangeMode={isChangeMode}
+      />
+    </div>
+  );
+}
diff --git a/src/components/museum/pages/SharedLibrarySelectionPage.jsx b/src/components/museum/pages/SharedLibrarySelectionPage.jsx
new file mode 100644
index 0000000..e9e8e96
--- /dev/null
+++ b/src/components/museum/pages/SharedLibrarySelectionPage.jsx
@@ -0,0 +1,99 @@
+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';
+import useUserStore from '@/stores/userStore';
+
+export default function SharedLibrarySelectionPage() {
+  const navigate = useNavigate();
+  const { updateInvitation } = useUserStore();
+  
+  // 상태 관리
+  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 호출로 라이브러리 입장 처리
+    
+    // userStore 상태 업데이트 - 작품 등록 단계로
+    updateInvitation({
+      hasSharedLibraryRequest: false, // 공유 라이브러리 선택 안내 숨김
+      // 다음 단계는 작품 등록이므로 별도 상태 필요
+    });
+    
+    // 공유 라이브러리 입장 페이지로 이동
+    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/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..448c92b 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%;
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/pages/MuseumPage.jsx b/src/pages/MuseumPage.jsx
index f87846f..1e43d5b 100644
--- a/src/pages/MuseumPage.jsx
+++ b/src/pages/MuseumPage.jsx
@@ -4,6 +4,7 @@ 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";
@@ -20,7 +21,7 @@ import exhibition2 from "@/assets/museum/큰사진2.png";
 
 export default function MuseumPage() {
   // Zustand에서 사용자 정보 가져오기
-  const { user, subscription } = useUserStore();
+  const { user, subscription, invitation } = useUserStore();
   
   // 스크롤 상태 관리
   const [isScrolled, setIsScrolled] = useState(false);
@@ -103,6 +104,15 @@ export default function MuseumPage() {
       <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} />
diff --git a/src/routers/index.jsx b/src/routers/index.jsx
index d05413b..c5bdc1d 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";
@@ -39,6 +42,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 53149de..9b00a83 100644
--- a/src/stores/userStore.js
+++ b/src/stores/userStore.js
@@ -35,6 +35,13 @@ const useUserStore = create(
         bankName: '국민은행',
       },
 
+      // 공동 전시 초대 관련 상태
+      invitation: {
+        hasInvitation: true, // 공동 전시 참여 요청 여부
+        hasSharedLibraryRequest: false, // 작품 공유 라이브러리 등록 필요 여부
+        invitationCount: 2, // 참여 요청 개수
+      },
+
       // 구독 상태 업데이트 (테스트용)
       updateSubscription: (subscriptionData) => {
         set(state => ({
@@ -54,6 +61,13 @@ const useUserStore = create(
         set(state => ({
           user: { ...state.user, ...userData }
         }))
+      },
+
+      // 공동 전시 초대 상태 업데이트
+      updateInvitation: (invitationData) => {
+        set(state => ({
+          invitation: { ...state.invitation, ...invitationData }
+        }))
       }
     }),
     {
@@ -62,7 +76,8 @@ const useUserStore = create(
         user: state.user,
         isLoggedIn: state.isLoggedIn,
         subscription: state.subscription,
-        contactInfo: state.contactInfo
+        contactInfo: state.contactInfo,
+        invitation: state.invitation
       })
     }
   )

From cd44eda82129c1381fd89aac8a17cd03f62b4c5f Mon Sep 17 00:00:00 2001
From: wnsgur393 <2021301022@skuniv.ac.kr>
Date: Sat, 23 Aug 2025 18:50:11 +0900
Subject: [PATCH 2/6] =?UTF-8?q?API=20=EC=97=B0=EB=8F=99=20=EC=A0=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/artwork/ArtworkFilter.jsx      |  22 +-
 .../museum/components/artwork/ArtworkList.jsx |  51 ++-
 .../artwork/artworkFilter.module.css          |  33 ++
 .../components/museum/InvitationSection.jsx   |   2 +-
 .../museum/pages/ExhibitionUploadPage.jsx     |  15 +
 src/components/museum/pages/MyArtworkPage.jsx |   7 +
 .../museum/pages/myArtworkPage.module.css     |  58 ++-
 src/components/museum/services/artworkApi.js  | 194 ++++-----
 .../museum/services/artworkStore.js           | 389 +++++-------------
 src/pages/MuseumPage.jsx                      |   2 +-
 src/pages/MyPage.jsx                          |   2 +-
 src/routers/index.jsx                         |   1 +
 src/stores/userStore.js                       |  26 +-
 13 files changed, 371 insertions(+), 431 deletions(-)

diff --git a/src/components/museum/components/artwork/ArtworkFilter.jsx b/src/components/museum/components/artwork/ArtworkFilter.jsx
index 9734a9b..e53002a 100644
--- a/src/components/museum/components/artwork/ArtworkFilter.jsx
+++ b/src/components/museum/components/artwork/ArtworkFilter.jsx
@@ -6,7 +6,9 @@ export default function ArtworkFilter({
   layoutMode, 
   onLayoutChange, 
   searchKeyword, 
-  onSearchChange
+  onSearchChange,
+  applicated,
+  onApplicatedChange
 }) {
   const [isSearchFocused, setIsSearchFocused] = useState(false);
   const [localSearchKeyword, setLocalSearchKeyword] = useState(searchKeyword || '');
@@ -35,8 +37,26 @@ export default function ArtworkFilter({
     setLocalSearchKeyword(e.target.value);
   };
 
+  const handleApplicatedToggle = () => {
+    if (onApplicatedChange) {
+      onApplicatedChange();
+    }
+  };
+
   return (
     <div className={styles.filterContainer}>
+      {/* 등록 상태 토글 */}
+      {onApplicatedChange && (
+        <div className={styles.applicatedToggle}>
+          <button
+            className={`${styles.toggleButton} ${applicated ? styles.toggleButtonActive : ''}`}
+            onClick={handleApplicatedToggle}
+          >
+            {applicated ? '등록 신청한 작품' : '임시 저장된 작품'}
+          </button>
+        </div>
+      )}
+
       {/* 검색바 */}
       <div className={styles.searchContainer}>
         <form onSubmit={handleSearchSubmit} className={styles.searchForm}>
diff --git a/src/components/museum/components/artwork/ArtworkList.jsx b/src/components/museum/components/artwork/ArtworkList.jsx
index 260d6d1..1cf1c37 100644
--- a/src/components/museum/components/artwork/ArtworkList.jsx
+++ b/src/components/museum/components/artwork/ArtworkList.jsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useCallback, useRef } from 'react';
 import ArtworkCard from './ArtworkCard';
 import ArtworkFilter from './ArtworkFilter';
 import useArtworkStore from '@museum/services/artworkStore';
+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';
@@ -25,12 +26,14 @@ export default function ArtworkList({
     layoutMode,
     searchKeyword,
     isLoadingMore,
+    applicated,
     setLayoutMode,
     setSearchKeyword,
     loadMoreArtworks,
     hasMore,
     getFilteredArtworks,
-    deleteArtwork
+    deleteArtwork,
+    toggleApplicated
   } = useArtworkStore();
 
   const [isEditMode, setIsEditMode] = useState(false);
@@ -92,6 +95,10 @@ export default function ArtworkList({
     setSearchKeyword(keyword);
   };
 
+  const handleApplicatedChange = async () => {
+    await toggleApplicated();
+  };
+
   const handleArtworkSelection = (artwork) => {
     const newSelected = new Set(selectedArtworks);
     if (newSelected.has(artwork.id)) {
@@ -102,27 +109,45 @@ export default function ArtworkList({
     setSelectedArtworks(newSelected);
   };
 
-  const handleDeleteSelected = () => {
+  const handleDeleteSelected = async () => {
     if (selectedArtworks.size === 0) return;
     
     const count = selectedArtworks.size;
     if (confirm(`선택한 ${count}개 작품을 정말 삭제하시겠습니까?`)) {
       // 선택된 작품들을 실제로 삭제
-      Array.from(selectedArtworks).forEach(artworkId => {
-        deleteArtwork(artworkId);
-      });
+      const deletePromises = Array.from(selectedArtworks).map(artworkId => 
+        deleteArtwork(artworkId)
+      );
       
-      console.log('선택된 작품들 삭제 완료:', Array.from(selectedArtworks));
-      setSelectedArtworks(new Set());
+      try {
+        const results = await Promise.all(deletePromises);
+        const successCount = results.filter(result => result === true).length;
+        
+        if (successCount === selectedArtworks.size) {
+          console.log('선택된 작품들 삭제 완료:', Array.from(selectedArtworks));
+        } else {
+          console.warn('일부 작품 삭제에 실패했습니다.');
+        }
+        
+        setSelectedArtworks(new Set());
+      } catch (error) {
+        console.error('작품 삭제 중 오류 발생:', error);
+      }
     }
   };
 
-  const handleDeleteArtwork = (artwork) => {
+  const handleDeleteArtwork = async (artwork) => {
     if (confirm(`"${artwork.title}" 작품을 정말 삭제하시겠습니까?`)) {
-      // 여기서 실제 삭제 로직을 구현할 수 있습니다.
-      console.log('작품 삭제:', artwork);
-      // 예시: artworkStore에 deleteArtwork 함수가 있다면
-      deleteArtwork(artwork.id);
+      try {
+        const success = await deleteArtwork(artwork.id);
+        if (success) {
+          console.log('작품 삭제 완료:', artwork);
+        } else {
+          console.error('작품 삭제 실패:', artwork);
+        }
+      } catch (error) {
+        console.error('작품 삭제 중 오류 발생:', error);
+      }
     }
   };
 
@@ -220,6 +245,8 @@ export default function ArtworkList({
         onLayoutChange={handleLayoutChange}
         searchKeyword={searchKeyword}
         onSearchChange={handleSearchChange}
+        applicated={applicated}
+        onApplicatedChange={handleApplicatedChange}
       />
 
       {/* 작품 목록 */}
diff --git a/src/components/museum/components/artwork/artworkFilter.module.css b/src/components/museum/components/artwork/artworkFilter.module.css
index 9e22646..9819e61 100644
--- a/src/components/museum/components/artwork/artworkFilter.module.css
+++ b/src/components/museum/components/artwork/artworkFilter.module.css
@@ -2,6 +2,39 @@
   margin-bottom: 24px;
 }
 
+/* 등록 상태 토글 */
+.applicatedToggle {
+  margin-bottom: 16px;
+  display: flex;
+  justify-content: center;
+}
+
+.toggleButton {
+  padding: 8px 16px;
+  border: 1px solid #f37021;
+  background-color: white;
+  color: #f37021;
+  border-radius: 20px;
+  font-family: 'Pretendard', sans-serif;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.toggleButton:hover {
+  background-color: #fef7f3;
+}
+
+.toggleButtonActive {
+  background-color: #f37021;
+  color: white;
+}
+
+.toggleButtonActive:hover {
+  background-color: #e05a1a;
+}
+
 .searchContainer {
   margin-bottom: 16px;
 }
diff --git a/src/components/museum/components/museum/InvitationSection.jsx b/src/components/museum/components/museum/InvitationSection.jsx
index 78a503e..6e0070c 100644
--- a/src/components/museum/components/museum/InvitationSection.jsx
+++ b/src/components/museum/components/museum/InvitationSection.jsx
@@ -28,6 +28,6 @@ export default function InvitationSection({ hasInvitation, hasSharedLibraryReque
           <span>작품을 공유 라이브러리에 등록해주세요</span>
         </div>
       )}
-    </section>
+    </section>  
   );
 }
diff --git a/src/components/museum/pages/ExhibitionUploadPage.jsx b/src/components/museum/pages/ExhibitionUploadPage.jsx
index 9cb13e5..3d1dd18 100644
--- a/src/components/museum/pages/ExhibitionUploadPage.jsx
+++ b/src/components/museum/pages/ExhibitionUploadPage.jsx
@@ -341,6 +341,21 @@ export default function ExhibitionUploadPage() {
           </div>
         </div>
 
+        {/* 하단 고정 전시 등록하기 버튼 */}
+        <div className={styles.submitButtonContainer}>
+          <button 
+            type="submit" 
+            className={styles.submitButton}
+            onClick={() => {
+              // TODO: 전시 등록 로직 구현
+              console.log('전시 등록:', exhibitionData);
+              alert('전시 등록 기능은 아직 구현되지 않았습니다.');
+            }}
+          >
+            전시 등록하기
+          </button>
+        </div>
+
       {/* 전시 작품 등록 모달 */}
       <ExhibitionArtworkModal
         isOpen={isArtworkModalOpen}
diff --git a/src/components/museum/pages/MyArtworkPage.jsx b/src/components/museum/pages/MyArtworkPage.jsx
index 45b22a1..e4542c1 100644
--- a/src/components/museum/pages/MyArtworkPage.jsx
+++ b/src/components/museum/pages/MyArtworkPage.jsx
@@ -2,15 +2,22 @@ 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 useArtworkStore from '@museum/services/artworkStore';
 import styles from './myArtworkPage.module.css';
 
 export default function MyArtworkPage() {
   const navigate = useNavigate();
   const { hasDraft } = useArtworkDraftStore();
+  const { loadArtworks } = useArtworkStore();
   
   // 스크롤 상태 관리 (기존 뮤지엄 페이지와 동일)
   const [isScrolled, setIsScrolled] = useState(false);
 
+  // 컴포넌트 마운트 시 작품 목록 로드
+  useEffect(() => {
+    loadArtworks(true, 3);
+  }, [loadArtworks]);
+
   // 스크롤 이벤트 처리
   useEffect(() => {
     const handleScroll = () => {
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/services/artworkApi.js b/src/components/museum/services/artworkApi.js
index b84f318..e3ee6ee 100644
--- a/src/components/museum/services/artworkApi.js
+++ b/src/components/museum/services/artworkApi.js
@@ -1,134 +1,84 @@
-const API_BASE_URL = process.env.REACT_APP_API_BASE_URL || 'http://localhost:8080';
+import useUserStore from '@/stores/userStore'; // 네가 보여준 store 경로에 맞게 수정
 
-// 상태 매핑 함수들
-const mapProgressStatus = (progressStatus) => {
-  switch (progressStatus) {
-    case 'REGISTERED':
-      return '등록 완료';
-    case 'ON_DISPLAY':
-      return '전시 중';
-    case 'WAITING':
-      return '등록 대기 중';
-    case 'UNREGISTERED':
-      return '등록 거절';
-    default:
-      return '알 수 없음';
-  }
-};
+const API_BASE_URL = 'https://api.artium.life/api';
 
-const mapProgressStatusToUIStatus = (progressStatus) => {
-  switch (progressStatus) {
-    case 'REGISTERED':
-      return '전시 중'; // UI에서는 등록 완료도 전시 중으로 표시
-    case 'ON_DISPLAY':
-      return '전시 중';
-    case 'WAITING':
-      return '승인 대기';
-    case 'UNREGISTERED':
-      return '미승인';
-    default:
-      return '알 수 없음';
-  }
-};
+// 상태 텍스트 변환
+const getStatusText = (progressStatus) => ({
+  REGISTERED: '등록 완료',
+  ON_DISPLAY: '전시 중',
+  WAITING: '등록 대기 중',
+  UNREGISTERED: '등록 거절',
+}[progressStatus] || '알 수 없음');
 
-// 토큰 가져오기 (userStore에서 가져와야 함)
-const getAuthToken = () => {
-  // 추후 userStore에서 토큰을 가져오도록 수정
-  return localStorage.getItem('accessToken') || '';
-};
+// 날짜 포맷
+const formatDate = (date) =>
+  date.toLocaleDateString('ko-KR', { year: '2-digit', month: '2-digit', day: '2-digit' })
+    .replace(/\. /g, '.').replace('.', '');
 
-// 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,
-  };
+// API → 프론트 포맷 변환
+const transformArtworkData = (a) => ({
+  id: a.pieceId,
+  title: a.title,
+  description: a.description,
+  image: a.imageUrl,
+  status: getStatusText(a.progressStatus),
+  createdAt: formatDate(new Date()),
+  isExhibiting: a.progressStatus === 'ON_DISPLAY',
+  saveStatus: a.saveStatus,
+  progressStatus: a.progressStatus,
+  isPurchasable: a.isPurchasable,
+  userId: a.userId,
+});
 
-  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;
-  }
-};
+// 공통 fetch 헬퍼 (Bearer 붙이기)
+async function authFetch(url, options = {}) {
+  const token = useUserStore.getState().accessToken;
+  if (!token) throw new Error('401: 로그인 정보가 없습니다.');
 
-// 내 작품 목록 가져오기
-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
-    }
+  const headers = {
+    Accept: 'application/json',
+    ...(options.headers || {}),
+    Authorization: `Bearer ${token}`, // Bearer 붙이기
   };
-};
 
-// 작품 등록 (임시 저장)
-export const saveDraftArtwork = async (artworkData) => {
-  // 임시 저장 API (추후 구현)
-  throw new Error('임시 저장 API가 아직 구현되지 않았습니다.');
-};
+  const res = await fetch(url, { ...options, headers });
+  const text = await res.text();
+  let json = null;
+  try { json = JSON.parse(text); } catch { /* ignore */ }
 
-// 작품 등록 신청
-export const submitArtworkApplication = async (artworkData) => {
-  // 등록 신청 API (추후 구현)
-  throw new Error('등록 신청 API가 아직 구현되지 않았습니다.');
-};
+  if (!res.ok) {
+    const msg = json?.message || text || `HTTP ${res.status}`;
+    throw new Error(msg);
+  }
+  return json ?? {};
+}
+
+// 내 작품 목록 조회
+export async function fetchMyArtworks(applicated = true, pageNum = 0, pageSize = 3) {
+  const qs = new URLSearchParams({
+    applicated: String(applicated),
+    pageNum: String(pageNum),
+    pageSize: String(pageSize),
+  });
+  const data = await authFetch(`${API_BASE_URL}/pieces/my-page?${qs.toString()}`, { method: 'GET' });
+
+  if (data?.success === false) throw new Error(data.message || '작품 조회에 실패했습니다.');
 
-// 작품 수정
-export const updateArtwork = async (pieceId, artworkData) => {
-  // 작품 수정 API (추후 구현)
-  throw new Error('작품 수정 API가 아직 구현되지 않았습니다.');
-};
+  const d = data.data || {};
+  return {
+    content: (d.content || []).map(transformArtworkData),
+    totalElements: d.totalElements,
+    totalPages: d.totalPages,
+    pageNum: d.pageNum,
+    pageSize: d.pageSize,
+    first: d.first,
+    last: d.last,
+  };
+}
 
 // 작품 삭제
-export const deleteArtwork = async (pieceId) => {
-  // 작품 삭제 API (추후 구현)
-  throw new Error('작품 삭제 API가 아직 구현되지 않았습니다.');
-};
+export async function deleteArtwork(pieceId) {
+  const data = await authFetch(`${API_BASE_URL}/pieces/${pieceId}`, { method: 'DELETE' });
+  if (data?.success === false) throw new Error(data.message || '작품 삭제에 실패했습니다.');
+  return data;
+}
diff --git a/src/components/museum/services/artworkStore.js b/src/components/museum/services/artworkStore.js
index 4f646a5..8523959 100644
--- a/src/components/museum/services/artworkStore.js
+++ b/src/components/museum/services/artworkStore.js
@@ -1,329 +1,142 @@
 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
-  }
-];
+import { fetchMyArtworks, deleteArtwork as deleteArtworkApi } from './artworkApi';
 
 const useArtworkStore = create((set, get) => ({
-  // 상태
-  artworks: DUMMY_ARTWORKS.slice(0, 3), // 처음에는 3개만
-  layoutMode: 'vertical', // 'vertical' | 'grid'
+  artworks: [],
+  layoutMode: 'vertical',
   isLoading: false,
   isLoadingMore: false,
   searchKeyword: '',
-  applicated: true, // true: 등록 신청한 작품, false: 임시 저장된 작품
-  
-  // 페이지네이션 상태 (더미용)
+  applicated: true,
+
   pagination: {
     pageNum: 0,
     pageSize: 3,
-    totalElements: DUMMY_ARTWORKS.length,
-    totalPages: Math.ceil(DUMMY_ARTWORKS.length / 3),
+    totalElements: 0,
+    totalPages: 0,
     first: true,
-    last: false
+    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);
+    set({ isLoading: reset, isLoadingMore: !reset, error: null });
+    try {
+      const { applicated } = get();
+      const pageNum = reset ? 0 : get().pagination.pageNum + 1;
+      const data = await fetchMyArtworks(applicated, pageNum, initialCount);
+
+      const nextState = {
+        artworks: reset ? data.content : [...get().artworks, ...data.content],
+        pagination: {
+          pageNum: data.pageNum,
+          pageSize: data.pageSize,
+          totalElements: data.totalElements,
+          totalPages: data.totalPages,
+          first: data.first,
+          last: data.last,
+        },
+        isLoading: false,
+        isLoadingMore: false,
+      };
+      set(nextState);
+    } catch (error) {
+      const msg = String(error?.message || '');
+      set({
+        error: msg.includes('401') ? '인증이 만료되었습니다. 다시 로그인해주세요.' : (msg || '작품을 불러오는데 실패했습니다.'),
+        isLoading: false,
+        isLoadingMore: false,
+      });
+    }
   },
-  
-  // 더 많은 작품 로드 (무한 스크롤 시뮬레이션)
+
   loadMoreArtworks: async () => {
-    const { artworks, isLoadingMore, isLoading } = get();
-    
-    if (isLoading || isLoadingMore || artworks.length >= DUMMY_ARTWORKS.length) {
-      return;
-    }
-    
+    const { isLoadingMore, isLoading, pagination, applicated } = get();
+    if (isLoading || isLoadingMore || pagination.last) return;
+
     set({ isLoadingMore: true });
-    
-    // 로딩 시뮬레이션
-    setTimeout(() => {
-      const currentLength = get().artworks.length;
-      const nextBatch = DUMMY_ARTWORKS.slice(currentLength, currentLength + 3);
-      
+    try {
+      const nextPage = pagination.pageNum + 1;
+      const data = await fetchMyArtworks(applicated, nextPage, pagination.pageSize);
       set((state) => ({
-        artworks: [...state.artworks, ...nextBatch],
-        isLoadingMore: false
+        artworks: [...state.artworks, ...data.content],
+        pagination: {
+          pageNum: data.pageNum,
+          pageSize: data.pageSize,
+          totalElements: data.totalElements,
+          totalPages: data.totalPages,
+          first: data.first,
+          last: data.last,
+        },
+        isLoadingMore: false,
       }));
-    }, 1000);
-  },
-  
-  // 작품 목록 새로고침 (더미 데이터용)
-  refreshArtworks: async () => {
-    await get().loadArtworks(true);
+    } catch (error) {
+      const msg = String(error?.message || '');
+      set({
+        error: msg.includes('401') ? '인증이 만료되었습니다. 다시 로그인해주세요.' : (msg || '추가 작품을 불러오는데 실패했습니다.'),
+        isLoadingMore: false,
+      });
+    }
   },
-  
-  // 등록 상태 변경 (더미 데이터용)
+
+  refreshArtworks: async () => get().loadArtworks(true, 3),
+
   toggleApplicated: async () => {
-    const { applicated } = get();
-    set({ applicated: !applicated });
-    // 더미 데이터에서는 실제 다른 데이터 로드 안함
+    set({ applicated: !get().applicated });
+    await get().loadArtworks(true, 3);
   },
-  
-  // 필터된 작품 가져오기
+
   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())
+    const q = searchKeyword.toLowerCase();
+    return artworks.filter((a) =>
+      (a.title || '').toLowerCase().includes(q) ||
+      (a.description || '').toLowerCase().includes(q)
     );
   },
-  
-  // 작품 개수
-  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)
-      }
-    }));
+  getArtworkCount: () => get().pagination.totalElements,
+  getExhibitingArtworks: () => get().artworks.filter((a) => a.isExhibiting),
+  hasMore: () => !get().pagination.last,
 
-    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)
-        }
-      };
-    });
+  deleteArtwork: async (artworkId) => {
+    try {
+      await deleteArtworkApi(artworkId);
+      set((state) => {
+        const filtered = state.artworks.filter((a) => a.id !== artworkId);
+        return {
+          artworks: filtered,
+          pagination: {
+            ...state.pagination,
+            totalElements: state.pagination.totalElements - 1,
+            totalPages: Math.ceil((state.pagination.totalElements - 1) / state.pagination.pageSize),
+          },
+        };
+      });
+      return true;
+    } catch (error) {
+      set({ error: error.message || '작품 삭제에 실패했습니다.' });
+      return false;
+    }
   },
 
-  // 작품 상태 변경 (승인/거절 등)
   updateArtworkStatus: (artworkId, newStatus) => {
     set((state) => ({
-      artworks: state.artworks.map(artwork => 
-        artwork.id === artworkId 
-          ? { 
-              ...artwork, 
-              status: newStatus,
-              isExhibiting: newStatus === "전시 중"
-            }
-          : artwork
-      )
+      artworks: state.artworks.map((a) =>
+        a.id === artworkId
+          ? { ...a, status: newStatus, isExhibiting: newStatus === '전시 중' }
+          : a
+      ),
     }));
-  }
+  },
 }));
 
 export default useArtworkStore;
diff --git a/src/pages/MuseumPage.jsx b/src/pages/MuseumPage.jsx
index 1e43d5b..5f90d63 100644
--- a/src/pages/MuseumPage.jsx
+++ b/src/pages/MuseumPage.jsx
@@ -98,7 +98,7 @@ export default function MuseumPage() {
 
   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} />
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 d4a808d..b8334f3 100644
--- a/src/routers/index.jsx
+++ b/src/routers/index.jsx
@@ -2,6 +2,7 @@ import { createBrowserRouter } from "react-router-dom";
 import FeedPage from "../pages/FeedPage";
 import MuseumPage from "../pages/MuseumPage";
 import MyPage from "../pages/MyPage";
+import MyTypePage from "../pages/MyTypePage";
 import UserProfileDetailPage from "@/components/user/UserProfileDetailPage";
 import UserEditPage from "@/components/user/UserEditPage";
 import ContactEditPage from "@/components/user/ContactEditPage";
diff --git a/src/stores/userStore.js b/src/stores/userStore.js
index 8643af0..ad34bf3 100644
--- a/src/stores/userStore.js
+++ b/src/stores/userStore.js
@@ -30,6 +30,9 @@ const useUserStore = create(
       // 로그인 상태
       isLoggedIn: true,
       
+      // 액세스 토큰 (API 호출용)
+      accessToken: 'your-access-token-here', // 실제 토큰으로 교체 필요
+      
       // 구독 정보
       subscription: {
         isPremium: false, // 구독 상태별 조건부 렌더링 확인
@@ -49,7 +52,7 @@ const useUserStore = create(
       invitation: {
         hasInvitation: true, // 공동 전시 참여 요청 여부
         hasSharedLibraryRequest: false, // 작품 공유 라이브러리 등록 필요 여부
-        invitationCount: 2, // 참여 요청 개수
+        invitationCount: 1, // 참여 요청 개수
       },
 
       // 구독 상태 업데이트 (테스트용)
@@ -79,6 +82,25 @@ const useUserStore = create(
         set(state => ({
           invitation: { ...state.invitation, ...invitationData }
         }))
+      },
+
+      // 액세스 토큰 업데이트
+      setAccessToken: (token) => {
+        set({ accessToken: token })
+      },
+
+      // 전시 선호도 업데이트
+      updateExhibitionPreferences: (exhibitions) => {
+        set(state => ({
+          preferences: { ...state.preferences, exhibitions }
+        }))
+      },
+
+      // 작품 분위기 선호도 업데이트
+      updateArtworkMoodPreferences: (artworkMoods) => {
+        set(state => ({
+          preferences: { ...state.preferences, artworkMoods }
+        }))
       }
     }),
     {
@@ -86,6 +108,8 @@ const useUserStore = create(
       partialize: (state) => ({
         user: state.user,
         isLoggedIn: state.isLoggedIn,
+        accessToken: state.accessToken,
+        preferences: state.preferences,
         subscription: state.subscription,
         contactInfo: state.contactInfo,
         invitation: state.invitation

From 5d021fac1a30ae329c0f76b9a58f9d660842f711 Mon Sep 17 00:00:00 2001
From: wnsgur393 <2021301022@skuniv.ac.kr>
Date: Sat, 23 Aug 2025 21:41:29 +0900
Subject: [PATCH 3/6] =?UTF-8?q?feat:=20=EA=B0=A4=EB=9F=AC=EB=A6=AC=20?=
 =?UTF-8?q?=EC=BB=A8=ED=8A=B8=EB=A1=A4=20=EA=B0=80=EC=9D=B4=EB=93=9C=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CameraController.jsx           | 244 +++++++++++++++++-
 src/components/ControlsGuideModal.jsx         |  80 ++++++
 src/components/ControlsInfoModal.jsx          |  80 ++++++
 src/components/Gallery3D.css                  | 151 +++++------
 src/components/Gallery3D.jsx                  |  16 +-
 src/components/ResetCameraButton.jsx          |  41 +++
 .../components/museum/ArtworkSection.jsx      |   1 +
 .../museum/invitationSection.module.css       |  22 +-
 .../components/museum/premiumBar.module.css   |  10 +-
 .../museum/pages/artworkUploadPage.module.css |  11 +-
 .../pages/exhibitionUploadPage.module.css     |   9 +-
 src/components/museum/services/artworkApi.js  |  85 +++---
 .../museum/services/artworkStore.js           |   2 +-
 src/components/user/UserEditModal.jsx         |   6 +-
 src/components/user/UserProfileModal.jsx      |   4 +-
 src/components/user/userEdit.module.css       |  10 +-
 src/dummy.js                                  |  18 +-
 src/pages/MuseumPage.jsx                      |  48 ++--
 src/routers/index.jsx                         |   1 -
 19 files changed, 626 insertions(+), 213 deletions(-)
 create mode 100644 src/components/ControlsGuideModal.jsx
 create mode 100644 src/components/ControlsInfoModal.jsx
 create mode 100644 src/components/ResetCameraButton.jsx

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..5afd992 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 "./common/ResetCameraButton";
+import ControlsInfoModal from "./common/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/museum/ArtworkSection.jsx b/src/components/museum/components/museum/ArtworkSection.jsx
index 38e8d21..8f1b5da 100644
--- a/src/components/museum/components/museum/ArtworkSection.jsx
+++ b/src/components/museum/components/museum/ArtworkSection.jsx
@@ -33,6 +33,7 @@ export default function ArtworkSection({ artworks = [] }) {
             style={{
               backgroundImage: artwork.image ? `url(${artwork.image})` : 'none'
             }}
+            title={artwork.title || `작품 ${index + 1}`}
           />
         ))}
         
diff --git a/src/components/museum/components/museum/invitationSection.module.css b/src/components/museum/components/museum/invitationSection.module.css
index 6f3ea15..1780f32 100644
--- a/src/components/museum/components/museum/invitationSection.module.css
+++ b/src/components/museum/components/museum/invitationSection.module.css
@@ -1,16 +1,19 @@
 .invitationSection {
   margin-bottom: 20px;
+  width: 100%;
+  overflow: hidden;
 }
 
 .invitationAlert {
   height: 48px;
-  width: 360px;
+  width: calc(100% - 70px);
+  max-width: 100%;
   border: 2px solid #F37021;
   background: #CEDDE4;
   border-right: none;
   display: flex;
   align-items: center;
-  padding: 0 40px;
+  padding: 0 20px;
   margin-top: 12px;
   margin-bottom: 12px;
   margin-left: 70px;
@@ -21,22 +24,31 @@
   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: 360px;
+  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 40px;
+  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/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/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/exhibitionUploadPage.module.css b/src/components/museum/pages/exhibitionUploadPage.module.css
index 448c92b..ba7d348 100644
--- a/src/components/museum/pages/exhibitionUploadPage.module.css
+++ b/src/components/museum/pages/exhibitionUploadPage.module.css
@@ -452,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/services/artworkApi.js b/src/components/museum/services/artworkApi.js
index e3ee6ee..41bc149 100644
--- a/src/components/museum/services/artworkApi.js
+++ b/src/components/museum/services/artworkApi.js
@@ -1,6 +1,4 @@
-import useUserStore from '@/stores/userStore'; // 네가 보여준 store 경로에 맞게 수정
-
-const API_BASE_URL = 'https://api.artium.life/api';
+import { fetchMyArtworks as fetchMyArtworksApi, deleteArtwork as deleteArtworkApi, updateArtworkStatus as updateArtworkStatusApi } from '@/apis/artwork';
 
 // 상태 텍스트 변환
 const getStatusText = (progressStatus) => ({
@@ -30,55 +28,46 @@ const transformArtworkData = (a) => ({
   userId: a.userId,
 });
 
-// 공통 fetch 헬퍼 (Bearer 붙이기)
-async function authFetch(url, options = {}) {
-  const token = useUserStore.getState().accessToken;
-  if (!token) throw new Error('401: 로그인 정보가 없습니다.');
-
-  const headers = {
-    Accept: 'application/json',
-    ...(options.headers || {}),
-    Authorization: `Bearer ${token}`, // Bearer 붙이기
-  };
-
-  const res = await fetch(url, { ...options, headers });
-  const text = await res.text();
-  let json = null;
-  try { json = JSON.parse(text); } catch { /* ignore */ }
-
-  if (!res.ok) {
-    const msg = json?.message || text || `HTTP ${res.status}`;
-    throw new Error(msg);
-  }
-  return json ?? {};
-}
-
 // 내 작품 목록 조회
 export async function fetchMyArtworks(applicated = true, pageNum = 0, pageSize = 3) {
-  const qs = new URLSearchParams({
-    applicated: String(applicated),
-    pageNum: String(pageNum),
-    pageSize: String(pageSize),
-  });
-  const data = await authFetch(`${API_BASE_URL}/pieces/my-page?${qs.toString()}`, { method: 'GET' });
-
-  if (data?.success === false) throw new Error(data.message || '작품 조회에 실패했습니다.');
-
-  const d = data.data || {};
-  return {
-    content: (d.content || []).map(transformArtworkData),
-    totalElements: d.totalElements,
-    totalPages: d.totalPages,
-    pageNum: d.pageNum,
-    pageSize: d.pageSize,
-    first: d.first,
-    last: d.last,
-  };
+  try {
+    const data = await fetchMyArtworksApi(applicated, pageNum, pageSize);
+    
+    // API 응답 구조에 따라 데이터 처리
+    const d = data.data || data;
+    return {
+      content: (d.content || []).map(transformArtworkData),
+      totalElements: d.totalElements,
+      totalPages: d.totalPages,
+      pageNum: d.pageNum,
+      pageSize: d.pageSize,
+      first: d.first,
+      last: d.last,
+    };
+  } catch (error) {
+    console.error('내 작품 조회 오류:', error);
+    throw error;
+  }
 }
 
 // 작품 삭제
 export async function deleteArtwork(pieceId) {
-  const data = await authFetch(`${API_BASE_URL}/pieces/${pieceId}`, { method: 'DELETE' });
-  if (data?.success === false) throw new Error(data.message || '작품 삭제에 실패했습니다.');
-  return data;
+  try {
+    const data = await deleteArtworkApi(pieceId);
+    return data;
+  } catch (error) {
+    console.error('작품 삭제 오류:', error);
+    throw error;
+  }
+}
+
+// 작품 상태 업데이트
+export async function updateArtworkStatus(pieceId, status) {
+  try {
+    const data = await updateArtworkStatusApi(pieceId, status);
+    return data;
+  } catch (error) {
+    console.error('작품 상태 업데이트 오류:', error);
+    throw error;
+  }
 }
diff --git a/src/components/museum/services/artworkStore.js b/src/components/museum/services/artworkStore.js
index 8523959..085f77f 100644
--- a/src/components/museum/services/artworkStore.js
+++ b/src/components/museum/services/artworkStore.js
@@ -10,7 +10,7 @@ const useArtworkStore = create((set, get) => ({
   applicated: true,
 
   pagination: {
-    pageNum: 0,
+    pageNum: 1,
     pageSize: 3,
     totalElements: 0,
     totalPages: 0,
diff --git a/src/components/user/UserEditModal.jsx b/src/components/user/UserEditModal.jsx
index 1f71072..1e06870 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,7 +51,7 @@ 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" 
@@ -60,7 +60,7 @@ export default function UserEditModal({ isOpen, onClose }) {
             />
           </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" 
diff --git a/src/components/user/UserProfileModal.jsx b/src/components/user/UserProfileModal.jsx
index 60da060..d3ee338 100644
--- a/src/components/user/UserProfileModal.jsx
+++ b/src/components/user/UserProfileModal.jsx
@@ -43,11 +43,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..f133a56 100644
--- a/src/components/user/userEdit.module.css
+++ b/src/components/user/userEdit.module.css
@@ -237,10 +237,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 +256,8 @@
   line-height: 22px;
   box-sizing: border-box;
   flex: 1;
-  min-width: 80px;
+  min-width: 60px;
+  max-width: 110px;
   outline: none;
 }
 
@@ -272,6 +273,7 @@
   letter-spacing: -0.35px;
   line-height: 22px;
   padding: 0 4px;
+  flex-shrink: 0;
 }
 
 .emailDomainSelect {
@@ -288,6 +290,7 @@
   box-sizing: border-box;
   flex: 1;
   min-width: 90px;
+  max-width: 150px;
   cursor: pointer;
 }
 
@@ -305,6 +308,7 @@
   box-sizing: border-box;
   flex: 1;
   min-width: 90px;
+  max-width: 150px;
   outline: none;
 }
 
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/MuseumPage.jsx b/src/pages/MuseumPage.jsx
index 5f90d63..fe9eab9 100644
--- a/src/pages/MuseumPage.jsx
+++ b/src/pages/MuseumPage.jsx
@@ -8,24 +8,44 @@ 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 { fetchMyArtworks } from "@/apis/artwork";
 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, invitation } = useUserStore();
   
+  // 작품 데이터 상태
+  const [artworks, setArtworks] = useState([]);
+  
   // 스크롤 상태 관리
   const [isScrolled, setIsScrolled] = useState(false);
 
+  // 작품 데이터 로드
+  useEffect(() => {
+    const loadArtworks = async () => {
+      try {
+        console.log('작품 데이터 로드 시작...');
+        const response = await fetchMyArtworks(true, 0, 10); // 등록 완료된 작품 10개
+        console.log('API 응답:', response);
+        console.log('응답 데이터:', response.data);
+        console.log('작품 목록:', response.content);
+        
+        setArtworks(response.content || []);
+        console.log('설정된 작품 목록:', response.content || []);
+      } catch (error) {
+        console.error('작품 로드 오류:', error);
+      }
+    };
+
+    loadArtworks();
+  }, []);
+
   // 스크롤 이벤트 처리
   useEffect(() => {
     const handleScroll = () => {
@@ -37,26 +57,6 @@ 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,
diff --git a/src/routers/index.jsx b/src/routers/index.jsx
index aa9f7b7..eb41022 100644
--- a/src/routers/index.jsx
+++ b/src/routers/index.jsx
@@ -2,7 +2,6 @@ import { createBrowserRouter } from "react-router-dom";
 import FeedPage from "../pages/FeedPage";
 import MuseumPage from "../pages/MuseumPage";
 import MyPage from "../pages/MyPage";
-import MyTypePage from "../pages/MyTypePage";
 import UserProfileDetailPage from "@/components/user/UserProfileDetailPage";
 import UserEditPage from "@/components/user/UserEditPage";
 import ContactEditPage from "@/components/user/ContactEditPage";

From a604b3bca119a7d43a4561bf4252ae48dd135974 Mon Sep 17 00:00:00 2001
From: wnsgur393 <2021301022@skuniv.ac.kr>
Date: Sun, 24 Aug 2025 23:07:49 +0900
Subject: [PATCH 4/6] =?UTF-8?q?Feat:=20jhpart=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/museum/artwork.js                    | 320 ++++++++
 src/apis/{exhibition => museum}/exhibition.js |  42 +
 src/apis/user/user.js                         | 178 ++++
 src/components/Gallery3D.jsx                  |   4 +-
 .../museum/components/artwork/ArtworkCard.jsx |  70 +-
 .../components/artwork/ArtworkFilter.jsx      |  22 +-
 .../museum/components/artwork/ArtworkList.jsx | 115 +--
 .../components/artwork/DraftArtworkList.jsx   |  48 +-
 .../components/artwork/artworkCard.module.css |  24 +
 .../artwork/artworkFilter.module.css          |  33 -
 .../exhibition/ExhibitionArtworkModal.jsx     |  33 +-
 .../components/exhibition/ExhibitionCard.jsx  |  27 +-
 .../exhibition/ExhibitionDatePicker.jsx       | 131 +--
 .../components/exhibition/ExhibitionList.jsx  |  25 +-
 .../exhibition/exhibitionCard.module.css      | 151 ++--
 .../exhibition/exhibitionFilter.module.css    |  93 +--
 .../exhibition/exhibitionList.module.css      |  40 +-
 .../components/museum/ArtworkSection.jsx      |  40 +-
 .../components/museum/ExhibitionSection.jsx   |  41 +-
 .../components/museum/MuseumProfile.jsx       |   6 +-
 .../museum/museumProfile.module.css           |   1 +
 .../museum/pages/ArtworkLibraryPage.jsx       |  96 ++-
 .../museum/pages/ArtworkUploadPage.jsx        | 362 ++++++---
 .../museum/pages/DraftArtworkPage.jsx         |  55 +-
 .../museum/pages/ExhibitionInvitationPage.jsx |   3 -
 .../pages/ExhibitionParticipantPage.jsx       |  84 +-
 .../museum/pages/ExhibitionUploadPage.jsx     | 762 +++++++++++++-----
 src/components/museum/pages/MyArtworkPage.jsx |  59 +-
 .../museum/pages/MyExhibitionPage.jsx         |   2 +-
 .../museum/pages/OfflineLocationPage.jsx      | 452 ++---------
 .../museum/pages/SharedLibraryEntryPage.jsx   |  12 -
 .../pages/SharedLibrarySelectionPage.jsx      |   8 -
 .../pages/offlineLocationPage.module.css      |  13 +-
 src/components/museum/services/artworkApi.js  |  73 --
 .../museum/services/artworkDraftStore.js      | 110 ---
 .../museum/services/artworkStore.js           | 142 ----
 .../museum/services/exhibitionPhotoStore.js   |  63 --
 src/components/user/ContactEditPage.jsx       | 144 +++-
 src/components/user/UserEditModal.jsx         |   4 +-
 src/components/user/UserEditPage.jsx          | 235 +++++-
 src/components/user/UserProfileDetailPage.jsx |  77 +-
 src/components/user/UserProfileHeader.jsx     |  38 +-
 src/components/user/UserProfileModal.jsx      |  20 +-
 src/components/user/userEdit.module.css       |  45 ++
 .../user/userProfileDetail.module.css         |   5 +-
 src/pages/ExhibitionDetailPage.jsx            |   2 +-
 src/pages/MuseumPage.jsx                      | 115 ++-
 src/stores/userStore.js                       |  83 +-
 vite.config.js                                |   4 +-
 49 files changed, 2682 insertions(+), 1830 deletions(-)
 create mode 100644 src/apis/museum/artwork.js
 rename src/apis/{exhibition => museum}/exhibition.js (83%)
 create mode 100644 src/apis/user/user.js
 delete mode 100644 src/components/museum/services/artworkApi.js
 delete mode 100644 src/components/museum/services/artworkDraftStore.js
 delete mode 100644 src/components/museum/services/artworkStore.js
 delete mode 100644 src/components/museum/services/exhibitionPhotoStore.js

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/exhibition.js
similarity index 83%
rename from src/apis/exhibition/exhibition.js
rename to src/apis/museum/exhibition.js
index 5ca331a..88bb5a3 100644
--- a/src/apis/exhibition/exhibition.js
+++ b/src/apis/museum/exhibition.js
@@ -1,6 +1,30 @@
 import { useState, useEffect, useCallback } from 'react';
 import APIService from '../axios';
 
+/**
+ * 전시 등록 API
+ * @param {Object} exhibitionData - 전시 등록 데이터
+ * @param {number[]} exhibitionData.pieceIdList - 작품 ID 목록
+ * @param {string} exhibitionData.endDate - 종료일 (YYYY-MM-DD)
+ * @param {number[]} exhibitionData.participantIdList - 참여자 ID 목록
+ * @param {string} exhibitionData.startDate - 시작일 (YYYY-MM-DD)
+ * @param {string} exhibitionData.address - 주소
+ * @param {string} exhibitionData.title - 전시 제목
+ * @param {string} exhibitionData.offlineDescription - 오프라인 전시 설명
+ * @param {string} exhibitionData.description - 전시 설명
+ * @param {string} exhibitionData.addressName - 주소명
+ * @returns {Promise} 전시 등록 결과
+ */
+export const createExhibition = async (exhibitionData) => {
+  try {
+    const response = await APIService.private.post('/api/exhibitions', exhibitionData);
+    return response;
+  } catch (error) {
+    console.error('전시 등록 실패:', error);
+    throw error;
+  }
+};
+
 /**
  * 전시 상세 정보 조회 API
  * @param {number} exhibitionId - 전시 ID
@@ -90,6 +114,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..b3b6dd2
--- /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/search?keyword=${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/Gallery3D.jsx b/src/components/Gallery3D.jsx
index 5afd992..1ae6c53 100644
--- a/src/components/Gallery3D.jsx
+++ b/src/components/Gallery3D.jsx
@@ -3,8 +3,8 @@ import { Environment } from "@react-three/drei";
 import { Suspense, useState } from "react";
 import Exhibition from "./Exhibition";
 import CameraController from "./CameraController";
-import ResetCameraButton from "./common/ResetCameraButton";
-import ControlsInfoModal from "./common/ControlsInfoModal";
+import ResetCameraButton from "./ResetCameraButton";
+import ControlsInfoModal from "./ControlsInfoModal";
 import "./Gallery3D.css";
 
 function LoadingFallback() {
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/ArtworkFilter.jsx b/src/components/museum/components/artwork/ArtworkFilter.jsx
index e53002a..9734a9b 100644
--- a/src/components/museum/components/artwork/ArtworkFilter.jsx
+++ b/src/components/museum/components/artwork/ArtworkFilter.jsx
@@ -6,9 +6,7 @@ export default function ArtworkFilter({
   layoutMode, 
   onLayoutChange, 
   searchKeyword, 
-  onSearchChange,
-  applicated,
-  onApplicatedChange
+  onSearchChange
 }) {
   const [isSearchFocused, setIsSearchFocused] = useState(false);
   const [localSearchKeyword, setLocalSearchKeyword] = useState(searchKeyword || '');
@@ -37,26 +35,8 @@ export default function ArtworkFilter({
     setLocalSearchKeyword(e.target.value);
   };
 
-  const handleApplicatedToggle = () => {
-    if (onApplicatedChange) {
-      onApplicatedChange();
-    }
-  };
-
   return (
     <div className={styles.filterContainer}>
-      {/* 등록 상태 토글 */}
-      {onApplicatedChange && (
-        <div className={styles.applicatedToggle}>
-          <button
-            className={`${styles.toggleButton} ${applicated ? styles.toggleButtonActive : ''}`}
-            onClick={handleApplicatedToggle}
-          >
-            {applicated ? '등록 신청한 작품' : '임시 저장된 작품'}
-          </button>
-        </div>
-      )}
-
       {/* 검색바 */}
       <div className={styles.searchContainer}>
         <form onSubmit={handleSearchSubmit} className={styles.searchForm}>
diff --git a/src/components/museum/components/artwork/ArtworkList.jsx b/src/components/museum/components/artwork/ArtworkList.jsx
index 1cf1c37..440b74f 100644
--- a/src/components/museum/components/artwork/ArtworkList.jsx
+++ b/src/components/museum/components/artwork/ArtworkList.jsx
@@ -1,7 +1,7 @@
 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';
@@ -18,33 +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,
-    applicated,
-    setLayoutMode,
-    setSearchKeyword,
-    loadMoreArtworks,
-    hasMore,
-    getFilteredArtworks,
-    deleteArtwork,
-    toggleApplicated
-  } = 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(() => {
@@ -61,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);
@@ -95,53 +94,65 @@ export default function ArtworkList({
     setSearchKeyword(keyword);
   };
 
-  const handleApplicatedChange = async () => {
-    await toggleApplicated();
-  };
-
   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 = async () => {
-    if (selectedArtworks.size === 0) return;
+    if (selectedArtworks.size === 0 || isDeleting) return;
     
     const count = selectedArtworks.size;
     if (confirm(`선택한 ${count}개 작품을 정말 삭제하시겠습니까?`)) {
-      // 선택된 작품들을 실제로 삭제
-      const deletePromises = Array.from(selectedArtworks).map(artworkId => 
-        deleteArtwork(artworkId)
-      );
+      setIsDeleting(true);
       
       try {
-        const results = await Promise.all(deletePromises);
-        const successCount = results.filter(result => result === true).length;
+        // 선택된 작품들을 한 번에 삭제
+        const pieceIds = Array.from(selectedArtworks);
+        const response = await deletePieces(pieceIds);
         
-        if (successCount === selectedArtworks.size) {
-          console.log('선택된 작품들 삭제 완료:', Array.from(selectedArtworks));
+        if (response?.status === 200) {
+          console.log('선택된 작품들 삭제 완료:', pieceIds);
+          // 부모 컴포넌트에 삭제 완료 알림
+          if (onArtworkDeleted) {
+            onArtworkDeleted(pieceIds);
+          }
         } else {
-          console.warn('일부 작품 삭제에 실패했습니다.');
+          console.warn('작품들 삭제에 실패했습니다.');
         }
         
         setSelectedArtworks(new Set());
       } catch (error) {
         console.error('작품 삭제 중 오류 발생:', error);
+      } finally {
+        setIsDeleting(false);
       }
     }
   };
 
   const handleDeleteArtwork = async (artwork) => {
-    if (confirm(`"${artwork.title}" 작품을 정말 삭제하시겠습니까?`)) {
+    const safeTitle = getArtworkTitle(artwork.title, '이 작품');
+    if (confirm(`"${safeTitle}" 작품을 정말 삭제하시겠습니까?`)) {
       try {
-        const success = await deleteArtwork(artwork.id);
-        if (success) {
+        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);
         }
@@ -205,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 && (
@@ -234,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>
       )}
@@ -245,8 +256,6 @@ export default function ArtworkList({
         onLayoutChange={handleLayoutChange}
         searchKeyword={searchKeyword}
         onSearchChange={handleSearchChange}
-        applicated={applicated}
-        onApplicatedChange={handleApplicatedChange}
       />
 
       {/* 작품 목록 */}
@@ -269,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
@@ -281,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>
@@ -291,7 +300,7 @@ export default function ArtworkList({
       )}
 
       {/* 더 로딩 중 표시 */}
-      {isLoadingMore && (
+      {loading && (
         <div className={styles.loadingMore}>
           <div className={styles.spinner}></div>
           <p>더 많은 작품을 불러오는 중...</p>
@@ -305,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/artwork/artworkFilter.module.css b/src/components/museum/components/artwork/artworkFilter.module.css
index 9819e61..9e22646 100644
--- a/src/components/museum/components/artwork/artworkFilter.module.css
+++ b/src/components/museum/components/artwork/artworkFilter.module.css
@@ -2,39 +2,6 @@
   margin-bottom: 24px;
 }
 
-/* 등록 상태 토글 */
-.applicatedToggle {
-  margin-bottom: 16px;
-  display: flex;
-  justify-content: center;
-}
-
-.toggleButton {
-  padding: 8px 16px;
-  border: 1px solid #f37021;
-  background-color: white;
-  color: #f37021;
-  border-radius: 20px;
-  font-family: 'Pretendard', sans-serif;
-  font-size: 14px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.toggleButton:hover {
-  background-color: #fef7f3;
-}
-
-.toggleButtonActive {
-  background-color: #f37021;
-  color: white;
-}
-
-.toggleButtonActive:hover {
-  background-color: #e05a1a;
-}
-
 .searchContainer {
   margin-bottom: 16px;
 }
diff --git a/src/components/museum/components/exhibition/ExhibitionArtworkModal.jsx b/src/components/museum/components/exhibition/ExhibitionArtworkModal.jsx
index 4185d56..557f7b9 100644
--- a/src/components/museum/components/exhibition/ExhibitionArtworkModal.jsx
+++ b/src/components/museum/components/exhibition/ExhibitionArtworkModal.jsx
@@ -1,3 +1,4 @@
+import { useNavigate } from 'react-router-dom';
 import styles from './exhibitionArtworkModal.module.css';
 
 export default function ExhibitionArtworkModal({ 
@@ -8,6 +9,8 @@ export default function ExhibitionArtworkModal({
   isThumbnail = false,
   isChangeMode = false
 }) {
+  const navigate = useNavigate();
+
   if (!isOpen) return null;
 
   const handleOverlayClick = (e) => {
@@ -17,18 +20,15 @@ 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);
-    }
+    // 새 작품 등록 페이지로 이동
+    navigate('/artwork/upload', {
+      state: {
+        fromExhibition: true,
+        currentArtworkIndex: isThumbnail ? -1 : 0,
+        isChangeMode,
+        returnTo: 'exhibition-upload'
+      }
+    });
     onClose();
   };
 
@@ -103,15 +103,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..2c08b68 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,72 @@ 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()
+      };
+      
+      console.log('ExhibitionDatePicker - 날짜 데이터가 포함된 draft:', updatedDraft);
+      console.log('변환된 날짜:', { startDate: startDateString, endDate: endDateString });
+      
+      // 업로드 페이지로 돌아가면서 선택된 날짜 + 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 +269,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 5271389..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()) ||
@@ -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 02c0832..f537f31 100644
--- a/src/components/museum/components/exhibition/exhibitionList.module.css
+++ b/src/components/museum/components/exhibition/exhibitionList.module.css
@@ -1,14 +1,8 @@
 .container {
-  background-color: #f6f1eb;
-  padding: 0 32px;
-  position: relative;
-  max-width: 430px;
-  margin: 0 auto;
-}
-
-/* 빈 상태가 아닐 때만 최소 높이 적용 */
-.container:not(.emptyContainer) {
   min-height: 100vh;
+  background-color: #f2eee9;
+  padding: 0 32px 40px;
+  position: relative;
 }
 
 /* 빈 상태일 때는 최소 높이 제거 */
@@ -17,6 +11,22 @@
   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;
+}
+
 /* 헤더 */
 .header {
   padding: 10px 0 20px;
@@ -102,8 +112,6 @@
   display: flex;
   align-items: center;
   gap: 16px;
-  max-width: 430px;
-  margin: 0 auto;
 }
 
 .scrollBackButton {
@@ -186,7 +194,6 @@
   height: 56px;
   background-color: #f37021;
   border: 1px solid #000;
-  border-radius: 0;
   margin-bottom: 32px;
   display: flex;
   align-items: center;
@@ -245,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;
@@ -261,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 8f1b5da..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,27 +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'
-            }}
-            title={artwork.title || `작품 ${index + 1}`}
-          />
-        ))}
+        {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/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/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/pages/ArtworkLibraryPage.jsx b/src/components/museum/pages/ArtworkLibraryPage.jsx
index f270bea..004a707 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';
 
@@ -12,14 +12,14 @@ export default function ArtworkLibraryPage() {
   // 전시 등록 페이지에서 전달받은 정보
   const { fromExhibition, artworkIndex, isThumbnail, isChangeMode } = 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,29 +27,29 @@ 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) {
@@ -67,16 +67,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,7 +96,7 @@ export default function ArtworkLibraryPage() {
     
     // 선택된 작품들 가져오기
     const selectedArtworkList = filteredArtworks.filter(artwork => 
-      selectedArtworks.has(artwork.id)
+      selectedArtworks.has(artwork.pieceId || artwork.id)
     );
     
     if (fromExhibition && selectedArtworkList.length > 0) {
@@ -103,6 +112,18 @@ export default function ArtworkLibraryPage() {
     }
   };
 
+  const handleArtworkClick = (artwork) => {
+    // 작품 클릭 시에는 아무 동작하지 않음 (체크박스만 동작)
+    // 필요시 작품 상세 페이지로 이동하는 로직 추가 가능
+    console.log('작품 클릭:', artwork);
+  };
+
+  // 작품 삭제 완료 시 작품 목록 새로고침
+  const handleArtworkDeleted = (deletedIds) => {
+    console.log('삭제된 작품 ID들:', deletedIds);
+    // 작품 목록을 새로고침
+    resetPieces();
+  };
 
 
   return (
@@ -128,26 +149,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..e0b850e 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 { 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,7 @@ import styles from './artworkUploadPage.module.css';
 
 export default function ArtworkUploadPage() {
   const navigate = useNavigate();
-  const { saveDraft } = useArtworkDraftStore();
-  const { addArtwork } = useArtworkStore();
-  const { user } = useUserStore();
-  
+  const [user, setUser] = useState(null);
   const [formData, setFormData] = useState({
     title: '',
     description: '',
@@ -29,6 +25,132 @@ 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 = () => {
     // 작성 중인 내용이 있으면 취소 모달 표시
@@ -85,38 +207,11 @@ export default function ArtworkUploadPage() {
   const handleSubmit = (e) => {
     e.preventDefault();
     
-    let hasError = false;
-    
-    // 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);
+    // 즉시 검증 실행하고 에러 여부 확인
+    const hasError = validateForm();
     
-    // 에러가 있으면 에러 메시지 표시
+    // 에러가 있으면 제출 중단
     if (hasError) {
-      // 에러 메시지를 3초 후에 자동으로 숨기기
-      setTimeout(() => {
-        setShowErrors(false);
-        setErrorMessage('');
-      }, 3000);
       return;
     }
     
@@ -124,26 +219,36 @@ 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 = () => {
@@ -169,19 +274,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 +347,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 +380,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 +450,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
index a462333..13c5dd4 100644
--- a/src/components/museum/pages/ExhibitionInvitationPage.jsx
+++ b/src/components/museum/pages/ExhibitionInvitationPage.jsx
@@ -3,12 +3,9 @@ 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';
-import useUserStore from '@/stores/userStore';
 
 export default function ExhibitionInvitationPage() {
   const navigate = useNavigate();
-  const { updateInvitation } = useUserStore();
-  
   // 상태 관리
   const [invitations, setInvitations] = useState([]);
   const [selectedInvitations, setSelectedInvitations] = useState([]);
diff --git a/src/components/museum/pages/ExhibitionParticipantPage.jsx b/src/components/museum/pages/ExhibitionParticipantPage.jsx
index 13fc8fa..7738182 100644
--- a/src/components/museum/pages/ExhibitionParticipantPage.jsx
+++ b/src/components/museum/pages/ExhibitionParticipantPage.jsx
@@ -2,6 +2,7 @@ import { useState, useEffect } 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 { getUserProfilesByCode } from '@/apis/user/user.js';
 import styles from './exhibitionParticipantPage.module.css';
 
 export default function ExhibitionParticipantPage() {
@@ -18,26 +19,48 @@ export default function ExhibitionParticipantPage() {
   // URL state에서 전시 정보 받아오기
   const exhibitionData = location.state?.exhibitionData || {};
 
-  // 더미 사용자 데이터 (실제로는 API에서 가져올 예정)
-  const dummyUsers = [
-    { id: 1, username: 'kimdangdeng', displayName: '김땡땡', profileImage: null },
-    { id: 2, username: 'simonkim', displayName: '정땡땡', profileImage: null },
-    { id: 3, username: 'kimchiman', displayName: 'kimman', profileImage: null },
-  ];
+  // 사용자 검색 함수
+  const searchUsers = async (query) => {
+    if (!query.trim()) {
+      setSearchResults([]);
+      setIsSearching(false);
+      return;
+    }
 
-  useEffect(() => {
-    // 검색어가 있을 때만 검색 결과 표시
-    if (searchQuery.trim()) {
-      const filtered = dummyUsers.filter(user => 
-        user.username.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        user.displayName.toLowerCase().includes(searchQuery.toLowerCase())
-      );
-      setSearchResults(filtered);
-      setIsSearching(true);
-    } else {
+    setIsSearching(true);
+    try {
+      // @를 앞에 붙여서 API 요청
+      const userCode = `@${query.trim()}`;
+      console.log('사용자 검색 요청:', userCode);
+      
+      const response = await getUserProfilesByCode(userCode);
+      console.log('사용자 검색 응답:', response);
+      
+      if (response && response.data && Array.isArray(response.data)) {
+        setSearchResults(response.data);
+      } else {
+        setSearchResults([]);
+      }
+    } catch (error) {
+      console.error('사용자 검색 실패:', error);
       setSearchResults([]);
+    } finally {
       setIsSearching(false);
     }
+  };
+
+  // 검색어 변경 시 디바운스 처리
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (searchQuery.trim()) {
+        searchUsers(searchQuery);
+      } else {
+        setSearchResults([]);
+        setIsSearching(false);
+      }
+    }, 500); // 500ms 디바운스
+
+    return () => clearTimeout(timer);
   }, [searchQuery]);
 
   const handleBack = () => {
@@ -49,11 +72,12 @@ export default function ExhibitionParticipantPage() {
   };
 
   const handleUserSelect = (user) => {
-    const isSelected = selectedParticipants.some(p => p.id === user.id);
+    const userId = user.userId || user.id;
+    const isSelected = selectedParticipants.some(p => (p.userId || p.id) === userId);
     
     if (isSelected) {
       // 이미 선택된 사용자라면 제거
-      setSelectedParticipants(prev => prev.filter(p => p.id !== user.id));
+      setSelectedParticipants(prev => prev.filter(p => (p.userId || p.id) !== userId));
     } else {
       // 새로운 사용자라면 추가
       setSelectedParticipants(prev => [...prev, user]);
@@ -77,7 +101,7 @@ export default function ExhibitionParticipantPage() {
   };
 
   const isUserSelected = (userId) => {
-    return selectedParticipants.some(p => p.id === userId);
+    return selectedParticipants.some(p => (p.userId || p.id) === userId);
   };
 
   return (
@@ -125,21 +149,21 @@ export default function ExhibitionParticipantPage() {
         <div className={styles.userList}>
           {searchResults.map((user) => (
             <div
-              key={user.id}
-              className={`${styles.userCard} ${isUserSelected(user.id) ? styles.selected : ''}`}
+              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}>
-                  {user.profileImage ? (
-                    <img src={user.profileImage} alt="프로필" />
+                  {user.profileImageUrl ? (
+                    <img src={user.profileImageUrl} alt="프로필" />
                   ) : (
                     <div className={styles.defaultProfile} />
                   )}
                 </div>
                 <div className={styles.userDetails}>
-                  <span className={styles.displayName}>{user.displayName}</span>
-                  <span className={styles.username}>@{user.username}</span>
+                  <span className={styles.displayName}>{user.nickname || user.displayName}</span>
+                  <span className={styles.username}>@{user.code || user.username}</span>
                 </div>
               </div>
             </div>
@@ -153,21 +177,21 @@ export default function ExhibitionParticipantPage() {
           <h3 className={styles.selectedTitle}>선택된 참여자</h3>
           {selectedParticipants.map((user) => (
             <div
-              key={user.id}
+              key={user.userId || user.id}
               className={`${styles.userCard} ${styles.selected}`}
               onClick={() => handleUserSelect(user)}
             >
               <div className={styles.userInfo}>
                 <div className={styles.profileImage}>
-                  {user.profileImage ? (
-                    <img src={user.profileImage} alt="프로필" />
+                  {user.profileImageUrl ? (
+                    <img src={user.profileImageUrl} alt="프로필" />
                   ) : (
                     <div className={styles.defaultProfile} />
                   )}
                 </div>
                 <div className={styles.userDetails}>
-                  <span className={styles.displayName}>{user.displayName}</span>
-                  <span className={styles.username}>@{user.username}</span>
+                  <span className={styles.displayName}>{user.nickname || user.displayName}</span>
+                  <span className={styles.username}>@{user.code || user.username}</span>
                 </div>
               </div>
             </div>
diff --git a/src/components/museum/pages/ExhibitionUploadPage.jsx b/src/components/museum/pages/ExhibitionUploadPage.jsx
index 3d1dd18..78aa68b 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,226 @@ 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([]);
+
+  // 기간 설정 완료 상태 확인 함수
+  const isDateRangeSet = () => {
+    const { startDate, endDate } = exhibitionData;
+    
+    console.log('isDateRangeSet 호출됨:', {
+      startDate,
+      endDate,
+      startDateType: typeof startDate,
+      endDateType: typeof endDate,
+      startDateIsDate: startDate instanceof Date,
+      endDateIsDate: endDate instanceof Date
+    });
+    
+    // Date 객체인 경우
+    if (startDate instanceof Date && endDate instanceof Date) {
+      const result = !isNaN(startDate.getTime()) && !isNaN(endDate.getTime());
+      console.log('Date 객체 처리 결과:', result);
+      return result;
+    }
+    
+    // 문자열인 경우 (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}$/;
+      const startValid = startPattern.test(startDate);
+      const endValid = endPattern.test(endDate);
+      const result = startValid && endValid;
+      
+      console.log('문자열 처리 결과:', {
+        startValid,
+        endValid,
+        startPattern: startPattern.test(startDate),
+        endPattern: endPattern.test(endDate),
+        result
+      });
+      
+      return result;
+    }
+    
+    console.log('조건에 맞지 않음, false 반환');
+    return false;
+  };
+
+  // 오프라인 장소 등록 완료 상태 확인 함수
+  const isOfflineLocationSet = () => {
+    const { address, addressName, offlineDescription } = offlineLocation;
+    
+    console.log('isOfflineLocationSet 호출됨:', {
+      address,
+      addressName,
+      offlineDescription,
+      addressType: typeof address,
+      addressNameType: typeof addressName,
+      offlineDescriptionType: typeof offlineDescription,
+      addressValid: address && address.trim().length > 0,
+      addressNameValid: addressName && addressName.trim().length > 0,
+      offlineDescriptionValid: offlineDescription && offlineDescription.trim().length > 0
+    });
+    
+    const result = address && address.trim().length > 0;
+    console.log('오프라인 장소 설정 결과:', result);
+    return result;
+  };
 
-  // URL state에서 선택된 날짜 받아오기
+  // 현재 입력 상태를 하나로 묶어 라우팅 state로 넘길 draft
+  const buildDraft = () => {
+    const draft = {
+      exhibitionData,
+      thumbnail,
+      artworks,
+      offlineLocation,
+      participants,
+      contactRegistered: contactInfo.isRegistered,
+      // API 요청 형식에 맞춰 날짜 데이터 저장 (이미 YYYY-MM-DD 형식)
+      startDate: exhibitionData.startDate || null,
+      endDate: exhibitionData.endDate || null,
+      totalDays: exhibitionData.totalDays
+    };
+    
+    console.log('buildDraft 호출됨:', draft);
+    console.log('날짜 형식 확인 - startDate:', draft.startDate, 'endDate:', draft.endDate);
+    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
-      }));
+    console.log('useEffect 실행 - location.state:', location.state);
+    
+    // location.state가 실제로 유효한 데이터를 가지고 있을 때만 처리
+    if (location.state && (location.state.selectedDates || location.state.draft)) {
+      const { selectedDates, draft } = location.state;
+      
+      console.log('데이터 복원 시작:', { selectedDates, draft });
+      
+      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) {
+            console.log('draft에서 날짜 데이터 복원:', {
+              startDate: draft.startDate,
+              endDate: draft.endDate,
+              totalDays: draft.totalDays
+            });
+            
+            newData = {
+              ...newData,
+              startDate: draft.startDate,
+              endDate: draft.endDate,
+              totalDays: draft.totalDays || 0
+            };
+          }
+          
+          // draft.exhibitionData에서도 날짜 데이터 확인 및 복원
+          if (draft.exhibitionData && draft.exhibitionData.startDate && draft.exhibitionData.endDate) {
+            console.log('draft.exhibitionData에서 날짜 데이터 복원:', {
+              startDate: draft.exhibitionData.startDate,
+              endDate: draft.exhibitionData.endDate,
+              totalDays: draft.exhibitionData.totalDays
+            });
+            
+            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) {
+          console.log('오프라인 장소 데이터 복원:', draft.offlineLocation);
+          setOfflineLocation(draft.offlineLocation);
+        }
+        if (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 +248,175 @@ 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?.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 } = location.state;
+      
+      console.log('라이브러리에서 선택된 작품들:', selectedArtworks);
+      
+      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]);
+
+  // 전시 등록 처리
+  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 {
+      // 실제 pieceIdList 사용
+      const pieceIdList = artworks.map(artwork => artwork.pieceId);
+      const participantIdList = participants.map(p => p.userId);
+
+      // draft에서 날짜 데이터 사용 (이미 YYYY-MM-DD 형식)
+      const startDate = exhibitionData.startDate ? exhibitionData.startDate.toISOString().split('T')[0] : null;
+      const endDate = exhibitionData.endDate ? exhibitionData.endDate.toISOString().split('T')[0] : null;
+      
+      const exhibitionPayload = {
+        pieceIdList,
+        endDate,
+        participantIdList,
+        startDate,
+        address: offlineLocation.address || '주소 미입력',
+        title: exhibitionData.title.trim(),
+        offlineDescription: offlineLocation.offlineDescription || '오프라인 전시 설명 미입력',
+        description: exhibitionData.description.trim(),
+        addressName: offlineLocation.addressName || '장소명 미입력'
+      };
+      
+      console.log('전시 등록 요청 데이터:', exhibitionPayload);
+      const response = await createExhibition(exhibitionPayload);
+      console.log('전시 등록 성공:', response);
+      
+      alert('전시가 성공적으로 등록되었습니다!');
+      navigate('/museum');
+    } catch (error) {
+      console.error('전시 등록 실패:', error);
+      alert('전시 등록에 실패했습니다. 다시 시도해주세요.');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
   const handleBack = () => {
     navigate('/museum');
   };
@@ -72,9 +431,7 @@ export default function ExhibitionUploadPage() {
 
   const handleThumbnailChange = (e) => {
     const file = e.target.files[0];
-    if (file) {
-      setThumbnail(file);
-    }
+    if (file) setThumbnail(file);
   };
 
   // 전시 작품 등록 모달 열기 (새로 추가)
@@ -94,15 +451,11 @@ export default function ExhibitionUploadPage() {
   // 새 작품 등록 처리
   const handleNewArtwork = (file) => {
     if (currentArtworkIndex === -1) {
-      // 썸네일인 경우
       setThumbnail(file);
     } else {
-      // 작품인 경우
       if (isChangeMode) {
-        // 변경 모드: 해당 인덱스의 작품만 수정
         updateArtwork(currentArtworkIndex, file);
       } else {
-        // 새로 추가 모드: 작품 추가
         addArtwork(file);
       }
     }
@@ -110,81 +463,81 @@ export default function ExhibitionUploadPage() {
 
   // 작품 라이브러리에서 가져오기 처리
   const handleLoadFromLibrary = () => {
-    // 작품 라이브러리 페이지로 이동
     navigate('/artwork/library', {
       state: {
         fromExhibition: true,
         currentArtworkIndex,
-        isChangeMode
+        isChangeMode,
+        isThumbnail: currentArtworkIndex === -1
       }
     });
   };
 
-  // 작품 제거 처리
+  // 작품 추가/수정/삭제 (객체 기반)
+  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 +557,6 @@ export default function ExhibitionUploadPage() {
         </div>
       );
     }
-    
     return slides;
   };
 
@@ -221,140 +573,160 @@ export default function ExhibitionUploadPage() {
       </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={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.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={URL.createObjectURL(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 ? '전시 참여자 등록됨' : '전시 참여자 등록하기'}
-            </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.submitButtonContainer}>
+        {/* 추가 기능 버튼들 */}
+        <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: {
+                exhibitionData: {
+                  title: exhibitionData.title,
+                  description: exhibitionData.description,
+                  startDate: exhibitionData.startDate,
+                  endDate: exhibitionData.endDate,
+                  totalDays: exhibitionData.totalDays
+                },
+                thumbnail,
+                artworks
+              }
+            })}
+          >
+            {contactInfo.isRegistered ? '연락 정보 등록됨' : '연락 정보 등록하기'}
+          </button>
+
           <button 
-            type="submit" 
-            className={styles.submitButton}
-            onClick={() => {
-              // TODO: 전시 등록 로직 구현
-              console.log('전시 등록:', exhibitionData);
-              alert('전시 등록 기능은 아직 구현되지 않았습니다.');
-            }}
+            type="button" 
+            className={`${styles.featureButton} ${isOfflineLocationSet() ? styles.completed : ''}`}
+            onClick={() => navigate('/exhibition/offline-location', {
+              state: {
+                offlineLocation,
+                returnTo: 'exhibition-upload',
+                exhibitionData: {
+                  title: exhibitionData.title,
+                  description: exhibitionData.description,
+                  startDate: exhibitionData.startDate,
+                  endDate: exhibitionData.endDate,
+                  totalDays: exhibitionData.totalDays
+                },
+                thumbnail,
+                artworks
+              }
+            })}
           >
-            전시 등록하기
+            {isOfflineLocationSet() ? '오프라인 장소 등록됨' : '오프라인 장소 등록하기'}
+          </button>
+
+          <button 
+            type="button" 
+            className={`${styles.featureButton} ${participants.length > 0 ? styles.completed : ''}`}
+            onClick={() => navigate('/exhibition/participants', {
+              state: {
+                participants,
+                returnTo: 'exhibition-upload',
+                exhibitionData: {
+                  title: exhibitionData.title,
+                  description: exhibitionData.description,
+                  startDate: exhibitionData.startDate,
+                  endDate: exhibitionData.endDate,
+                  totalDays: exhibitionData.totalDays
+                },
+                thumbnail,
+                artworks
+              }
+            })}
+          >
+            {participants.length > 0 ? '전시 참여자 등록됨' : '전시 참여자 등록하기'}
           </button>
         </div>
+      </div>
+
+      {/* 하단 고정 전시 등록하기 버튼 */}
+      <div className={styles.submitButtonContainer}>
+        <button 
+          type="button" 
+          className={styles.submitButton}
+          onClick={handleSubmitExhibition}
+          disabled={isSubmitting}
+        >
+          {isSubmitting ? '등록 중...' : '전시 등록하기'}
+        </button>
+      </div>
 
       {/* 전시 작품 등록 모달 */}
       <ExhibitionArtworkModal
diff --git a/src/components/museum/pages/MyArtworkPage.jsx b/src/components/museum/pages/MyArtworkPage.jsx
index e4542c1..cf6cb07 100644
--- a/src/components/museum/pages/MyArtworkPage.jsx
+++ b/src/components/museum/pages/MyArtworkPage.jsx
@@ -1,22 +1,51 @@
 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 useArtworkStore from '@museum/services/artworkStore';
+import { useInfinitePieces, getPieceDraftCount } from '@apis/museum/artwork';
 import styles from './myArtworkPage.module.css';
 
 export default function MyArtworkPage() {
   const navigate = useNavigate();
-  const { hasDraft } = useArtworkDraftStore();
-  const { loadArtworks } = useArtworkStore();
+  
+  // 임시저장 작품 개수 상태
+  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(() => {
-    loadArtworks(true, 3);
-  }, [loadArtworks]);
+    resetPieces();
+    fetchDraftCount();
+  }, [resetPieces]);
 
   // 스크롤 이벤트 처리
   useEffect(() => {
@@ -46,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 공간 */}
@@ -57,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..d5ccae1 100644
--- a/src/components/museum/pages/OfflineLocationPage.jsx
+++ b/src/components/museum/pages/OfflineLocationPage.jsx
@@ -1,394 +1,87 @@
-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';
+import SearchBar from '@/components/feed/SearchBar';
 
 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 location = useLocation();
+  const [address, setAddress] = useState('');
   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;
-        }
-        
-        // 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 {
-        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);
+    // 전시 데이터를 포함하여 뒤로 가기
+    const exhibitionData = location.state?.exhibitionData || {};
     
-    // API 상태 확인
-    if (!isApiReady) {
-      console.error('=== API 상태 확인 실패 ===');
-      console.trace('API 상태 확인 실패 위치');
-      console.error('isApiReady:', isApiReady);
-      alert('카카오맵 API가 아직 로드되지 않았습니다. 잠시만 기다려주세요.');
-      return;
-    }
-    
-    console.log('API 상태 확인 완료, 검색 시작');
-    setIsLoading(true);
+    // Date 객체를 YYYY-MM-DD 문자열로 변환
+    const safeExhibitionData = {
+      ...exhibitionData,
+      startDate: exhibitionData.startDate instanceof Date 
+        ? exhibitionData.startDate.toISOString().split('T')[0] 
+        : exhibitionData.startDate,
+      endDate: exhibitionData.endDate instanceof Date 
+        ? exhibitionData.endDate.toISOString().split('T')[0] 
+        : exhibitionData.endDate
+    };
     
-    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);
+    console.log('뒤로 가기 시 전달할 데이터:', {
+      original: exhibitionData,
+      converted: safeExhibitionData
+    });
     
-    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;
+    navigate('/exhibition/upload', {
+      state: {
+        draft: {
+          exhibitionData: safeExhibitionData,
+          thumbnail: location.state?.thumbnail || null,
+          artworks: location.state?.artworks || [],
+          offlineLocation: location.state?.offlineLocation || null,
+          participants: location.state?.participants || [],
+          contactRegistered: location.state?.contactRegistered || false
         }
-        
-        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})`));
-          }
-        });
-      } 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
+      address
+    });
+    
+    // 전시 등록 페이지로 돌아가면서 오프라인 장소 데이터 전달
+    const exhibitionData = location.state?.exhibitionData || {};
+    
+    navigate('/exhibition/upload', {
+      state: {
+        draft: {
+          exhibitionData,
+          thumbnail: location.state?.thumbnail || null,
+          artworks: location.state?.artworks || [],
+          offlineLocation: {
+            address,
+            addressName: address,
+            offlineDescription: address
+          },
+          participants: location.state?.participants || [],
+          contactRegistered: location.state?.contactRegistered || false
+        }
+      }
     });
-    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>
-          </>
-        )}
-      </div>
-      
-      <div className={styles.descriptionInput}>
+  const renderAddressInput = () => (
+    <div className={styles.addressSection}>
+      <div className={styles.addressInput}>
         <textarea
-          placeholder="오프라인 전시에 대한 소개를 작성해보세요&#10;(최대 500자)"
-          value={exhibitionDescription}
-          onChange={(e) => setExhibitionDescription(e.target.value)}
-          maxLength={500}
-          className={styles.descriptionField}
+          placeholder="주소를 입력해주세요."
+          value={address}
+          onChange={(e) => setAddress(e.target.value)}
+          maxLength={100}
+          className={styles.addressField}
         />
       </div>
     </div>
@@ -410,23 +103,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()}
+         >
+          등록 완료하기
+        </button>
+      </div>
     </div>
   );
 }
diff --git a/src/components/museum/pages/SharedLibraryEntryPage.jsx b/src/components/museum/pages/SharedLibraryEntryPage.jsx
index 36679b3..222d067 100644
--- a/src/components/museum/pages/SharedLibraryEntryPage.jsx
+++ b/src/components/museum/pages/SharedLibraryEntryPage.jsx
@@ -1,7 +1,5 @@
 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';
@@ -11,20 +9,10 @@ import styles from './sharedLibraryEntryPage.module.css';
 export default function SharedLibraryEntryPage() {
   const navigate = useNavigate();
   const location = useLocation();
-  const { user } = useUserStore();
   
   // 선택된 공유 라이브러리 정보
   const { selectedLibrary } = location.state || {};
   
-  // Zustand store 사용
-  const { 
-    thumbnail, 
-    artworks, 
-    setThumbnail, 
-    addArtwork, 
-    updateArtwork, 
-    removeArtwork: removeArtworkFromStore 
-  } = useExhibitionPhotoStore();
   
   // 로컬 상태로 관리 (공유 라이브러리 작품 정보)
   const [sharedLibraryData, setSharedLibraryData] = useState({
diff --git a/src/components/museum/pages/SharedLibrarySelectionPage.jsx b/src/components/museum/pages/SharedLibrarySelectionPage.jsx
index e9e8e96..6f42ac8 100644
--- a/src/components/museum/pages/SharedLibrarySelectionPage.jsx
+++ b/src/components/museum/pages/SharedLibrarySelectionPage.jsx
@@ -2,11 +2,9 @@ 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';
-import useUserStore from '@/stores/userStore';
 
 export default function SharedLibrarySelectionPage() {
   const navigate = useNavigate();
-  const { updateInvitation } = useUserStore();
   
   // 상태 관리
   const [sharedLibraries, setSharedLibraries] = useState([]);
@@ -42,12 +40,6 @@ export default function SharedLibrarySelectionPage() {
     
     // TODO: API 호출로 라이브러리 입장 처리
     
-    // userStore 상태 업데이트 - 작품 등록 단계로
-    updateInvitation({
-      hasSharedLibraryRequest: false, // 공유 라이브러리 선택 안내 숨김
-      // 다음 단계는 작품 등록이므로 별도 상태 필요
-    });
-    
     // 공유 라이브러리 입장 페이지로 이동
     navigate('/exhibition/shared-library-entry', {
       state: { selectedLibrary: library }
diff --git a/src/components/museum/pages/offlineLocationPage.module.css b/src/components/museum/pages/offlineLocationPage.module.css
index 2584b5e..5c87cab 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,14 @@
 .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;
+}
\ No newline at end of file
diff --git a/src/components/museum/services/artworkApi.js b/src/components/museum/services/artworkApi.js
deleted file mode 100644
index 41bc149..0000000
--- a/src/components/museum/services/artworkApi.js
+++ /dev/null
@@ -1,73 +0,0 @@
-import { fetchMyArtworks as fetchMyArtworksApi, deleteArtwork as deleteArtworkApi, updateArtworkStatus as updateArtworkStatusApi } from '@/apis/artwork';
-
-// 상태 텍스트 변환
-const getStatusText = (progressStatus) => ({
-  REGISTERED: '등록 완료',
-  ON_DISPLAY: '전시 중',
-  WAITING: '등록 대기 중',
-  UNREGISTERED: '등록 거절',
-}[progressStatus] || '알 수 없음');
-
-// 날짜 포맷
-const formatDate = (date) =>
-  date.toLocaleDateString('ko-KR', { year: '2-digit', month: '2-digit', day: '2-digit' })
-    .replace(/\. /g, '.').replace('.', '');
-
-// API → 프론트 포맷 변환
-const transformArtworkData = (a) => ({
-  id: a.pieceId,
-  title: a.title,
-  description: a.description,
-  image: a.imageUrl,
-  status: getStatusText(a.progressStatus),
-  createdAt: formatDate(new Date()),
-  isExhibiting: a.progressStatus === 'ON_DISPLAY',
-  saveStatus: a.saveStatus,
-  progressStatus: a.progressStatus,
-  isPurchasable: a.isPurchasable,
-  userId: a.userId,
-});
-
-// 내 작품 목록 조회
-export async function fetchMyArtworks(applicated = true, pageNum = 0, pageSize = 3) {
-  try {
-    const data = await fetchMyArtworksApi(applicated, pageNum, pageSize);
-    
-    // API 응답 구조에 따라 데이터 처리
-    const d = data.data || data;
-    return {
-      content: (d.content || []).map(transformArtworkData),
-      totalElements: d.totalElements,
-      totalPages: d.totalPages,
-      pageNum: d.pageNum,
-      pageSize: d.pageSize,
-      first: d.first,
-      last: d.last,
-    };
-  } catch (error) {
-    console.error('내 작품 조회 오류:', error);
-    throw error;
-  }
-}
-
-// 작품 삭제
-export async function deleteArtwork(pieceId) {
-  try {
-    const data = await deleteArtworkApi(pieceId);
-    return data;
-  } catch (error) {
-    console.error('작품 삭제 오류:', error);
-    throw error;
-  }
-}
-
-// 작품 상태 업데이트
-export async function updateArtworkStatus(pieceId, status) {
-  try {
-    const data = await updateArtworkStatusApi(pieceId, status);
-    return data;
-  } catch (error) {
-    console.error('작품 상태 업데이트 오류:', error);
-    throw error;
-  }
-}
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 085f77f..0000000
--- a/src/components/museum/services/artworkStore.js
+++ /dev/null
@@ -1,142 +0,0 @@
-import { create } from 'zustand';
-import { fetchMyArtworks, deleteArtwork as deleteArtworkApi } from './artworkApi';
-
-const useArtworkStore = create((set, get) => ({
-  artworks: [],
-  layoutMode: 'vertical',
-  isLoading: false,
-  isLoadingMore: false,
-  searchKeyword: '',
-  applicated: true,
-
-  pagination: {
-    pageNum: 1,
-    pageSize: 3,
-    totalElements: 0,
-    totalPages: 0,
-    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 });
-    try {
-      const { applicated } = get();
-      const pageNum = reset ? 0 : get().pagination.pageNum + 1;
-      const data = await fetchMyArtworks(applicated, pageNum, initialCount);
-
-      const nextState = {
-        artworks: reset ? data.content : [...get().artworks, ...data.content],
-        pagination: {
-          pageNum: data.pageNum,
-          pageSize: data.pageSize,
-          totalElements: data.totalElements,
-          totalPages: data.totalPages,
-          first: data.first,
-          last: data.last,
-        },
-        isLoading: false,
-        isLoadingMore: false,
-      };
-      set(nextState);
-    } catch (error) {
-      const msg = String(error?.message || '');
-      set({
-        error: msg.includes('401') ? '인증이 만료되었습니다. 다시 로그인해주세요.' : (msg || '작품을 불러오는데 실패했습니다.'),
-        isLoading: false,
-        isLoadingMore: false,
-      });
-    }
-  },
-
-  loadMoreArtworks: async () => {
-    const { isLoadingMore, isLoading, pagination, applicated } = get();
-    if (isLoading || isLoadingMore || pagination.last) return;
-
-    set({ isLoadingMore: true });
-    try {
-      const nextPage = pagination.pageNum + 1;
-      const data = await fetchMyArtworks(applicated, nextPage, pagination.pageSize);
-      set((state) => ({
-        artworks: [...state.artworks, ...data.content],
-        pagination: {
-          pageNum: data.pageNum,
-          pageSize: data.pageSize,
-          totalElements: data.totalElements,
-          totalPages: data.totalPages,
-          first: data.first,
-          last: data.last,
-        },
-        isLoadingMore: false,
-      }));
-    } catch (error) {
-      const msg = String(error?.message || '');
-      set({
-        error: msg.includes('401') ? '인증이 만료되었습니다. 다시 로그인해주세요.' : (msg || '추가 작품을 불러오는데 실패했습니다.'),
-        isLoadingMore: false,
-      });
-    }
-  },
-
-  refreshArtworks: async () => get().loadArtworks(true, 3),
-
-  toggleApplicated: async () => {
-    set({ applicated: !get().applicated });
-    await get().loadArtworks(true, 3);
-  },
-
-  getFilteredArtworks: () => {
-    const { artworks, searchKeyword } = get();
-    if (!searchKeyword) return artworks;
-    const q = searchKeyword.toLowerCase();
-    return artworks.filter((a) =>
-      (a.title || '').toLowerCase().includes(q) ||
-      (a.description || '').toLowerCase().includes(q)
-    );
-  },
-
-  getArtworkCount: () => get().pagination.totalElements,
-  getExhibitingArtworks: () => get().artworks.filter((a) => a.isExhibiting),
-  hasMore: () => !get().pagination.last,
-
-  deleteArtwork: async (artworkId) => {
-    try {
-      await deleteArtworkApi(artworkId);
-      set((state) => {
-        const filtered = state.artworks.filter((a) => a.id !== artworkId);
-        return {
-          artworks: filtered,
-          pagination: {
-            ...state.pagination,
-            totalElements: state.pagination.totalElements - 1,
-            totalPages: Math.ceil((state.pagination.totalElements - 1) / state.pagination.pageSize),
-          },
-        };
-      });
-      return true;
-    } catch (error) {
-      set({ error: error.message || '작품 삭제에 실패했습니다.' });
-      return false;
-    }
-  },
-
-  updateArtworkStatus: (artworkId, newStatus) => {
-    set((state) => ({
-      artworks: state.artworks.map((a) =>
-        a.id === artworkId
-          ? { ...a, status: newStatus, isExhibiting: newStatus === '전시 중' }
-          : a
-      ),
-    }));
-  },
-}));
-
-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..a07b47f 100644
--- a/src/components/user/ContactEditPage.jsx
+++ b/src/components/user/ContactEditPage.jsx
@@ -1,14 +1,18 @@
 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 [formData, setFormData] = useState({
     emailUsername: "",
@@ -17,54 +21,108 @@ 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}`;
+    const fetchData = async () => {
+      try {
+        // 전시 정보가 있는지 확인 (전시 업로드 페이지에서 넘어온 경우)
+        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);
+          console.log('연락 정보 API 응답:', contactResponse);
+          
+          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]);
 
-    console.log('저장할 연락정보:', {
-      email: finalEmail,
-      instagram: formData.instagram
-    });
+  const handleCompleteClick = async () => {
+    try {
+      // 이메일 주소 조합
+      const finalEmail = showCustomDomain 
+        ? `${formData.emailUsername}@${formData.customDomain}`
+        : `${formData.emailUsername}@${formData.emailDomain}`;
 
-    // userStore 업데이트
-    updateUser({
-      email: finalEmail,
-      instagram: formData.instagram
-    });
+      console.log('저장할 연락정보:', {
+        email: finalEmail,
+        instagram: formData.instagram
+      });
 
-    // 연락정보 등록 상태 업데이트
-    updateContactInfo({
-      isRegistered: true
-    });
+      // API로 연락 정보 전송
+      const response = await updateContact({
+        email: finalEmail,
+        instagram: formData.instagram
+      });
 
-    console.log('연락정보가 userStore에 저장되었습니다.');
+      console.log('연락 정보 등록 성공:', response);
 
-    // 편집 완료 후 프로필 상세 페이지로 이동
-    navigate('/user/profile');
+      // 편집 완료 후 전시 정보가 있으면 전시 업로드 페이지로, 없으면 프로필 페이지로 이동
+      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 (location.state?.exhibitionData) {
+      navigate('/exhibition/upload', {
+        state: { 
+          exhibitionData: location.state.exhibitionData,
+          contactUpdated: false // 뒤로가기이므로 contactUpdated는 false
+        }
+      });
+    } else {
+      navigate('/user/profile');
+    }
   };
 
   // 입력 필드 변경 핸들러
@@ -101,7 +159,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 1e06870..5022db5 100644
--- a/src/components/user/UserEditModal.jsx
+++ b/src/components/user/UserEditModal.jsx
@@ -56,7 +56,7 @@ export default function UserEditModal({ isOpen, onClose }) {
             <input 
               type="email" 
               className={styles.editContactInput}
-              defaultValue="asd123@naver.com"
+              defaultValue=""
             />
           </div>
           <div className={styles.editContactItem}>
@@ -65,7 +65,7 @@ export default function UserEditModal({ isOpen, onClose }) {
             <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 d3ee338..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;
 
diff --git a/src/components/user/userEdit.module.css b/src/components/user/userEdit.module.css
index f133a56..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 {
@@ -346,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/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 fe9eab9..4b3fd18 100644
--- a/src/pages/MuseumPage.jsx
+++ b/src/pages/MuseumPage.jsx
@@ -7,43 +7,74 @@ 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 { fetchMyArtworks } from "@/apis/artwork";
+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 exhibition1 from "@/assets/museum/큰사진1.png";
-import exhibition2 from "@/assets/museum/큰사진2.png";
 
 export default function MuseumPage() {
-  // Zustand에서 사용자 정보 가져오기
-  const { user, subscription, invitation } = 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 loadArtworks = async () => {
+    const loadData = async () => {
       try {
-        console.log('작품 데이터 로드 시작...');
-        const response = await fetchMyArtworks(true, 0, 10); // 등록 완료된 작품 10개
-        console.log('API 응답:', response);
-        console.log('응답 데이터:', response.data);
-        console.log('작품 목록:', response.content);
+        // 사용자 정보 로드
+        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 });
+        }
         
-        setArtworks(response.content || []);
-        console.log('설정된 작품 목록:', response.content || []);
       } catch (error) {
-        console.error('작품 로드 오류:', error);
+        console.error('데이터 로드 오류:', error);
       }
     };
 
-    loadArtworks();
+    loadData();
   }, []);
 
   // 스크롤 이벤트 처리
@@ -57,51 +88,13 @@ export default function MuseumPage() {
     return () => window.removeEventListener('scroll', handleScroll);
   }, []);
 
-  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: '10px'}}></div>
       <div className={`${styles.topShadow} ${isScrolled ? styles.topShadowVisible : ''}`} />
       
-      <MuseumProfile user={user} />
+      {user && <MuseumProfile user={user} />}
       <PremiumBar />
       
       {/* 공동 전시 초대가 온 사용자에게만 보여주는 섹션 */}
@@ -114,10 +107,12 @@ export default function MuseumPage() {
       )}
       
       <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/stores/userStore.js b/src/stores/userStore.js
index ad34bf3..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,68 +13,6 @@ const useUserStore = create(
         nickname: '',
         userId: '',
       },
-      
-      // 로그인 상태
-      isLoggedIn: true,
-      
-      // 액세스 토큰 (API 호출용)
-      accessToken: 'your-access-token-here', // 실제 토큰으로 교체 필요
-      
-      // 구독 정보
-      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: '국민은행',
-      },
-
-      // 공동 전시 초대 관련 상태
-      invitation: {
-        hasInvitation: true, // 공동 전시 참여 요청 여부
-        hasSharedLibraryRequest: false, // 작품 공유 라이브러리 등록 필요 여부
-        invitationCount: 1, // 참여 요청 개수
-      },
-
-      // 구독 상태 업데이트 (테스트용)
-      updateSubscription: (subscriptionData) => {
-        set(state => ({
-          subscription: { ...state.subscription, ...subscriptionData }
-        }))
-      },
-
-      // 연락 정보 업데이트
-      updateContactInfo: (contactData) => {
-        set(state => ({
-          contactInfo: { ...state.contactInfo, ...contactData }
-        }))
-      },
-
-      // 사용자 정보 업데이트
-      updateUser: (userData) => {
-        set(state => ({
-          user: { ...state.user, ...userData }
-
-        }))
-      },
-
-      // 공동 전시 초대 상태 업데이트
-      updateInvitation: (invitationData) => {
-        set(state => ({
-          invitation: { ...state.invitation, ...invitationData }
-        }))
-      },
-
-      // 액세스 토큰 업데이트
-      setAccessToken: (token) => {
-        set({ accessToken: token })
-      },
 
       // 전시 선호도 업데이트
       updateExhibitionPreferences: (exhibitions) => {
@@ -106,13 +31,7 @@ const useUserStore = create(
     {
       name: 'artium-user-storage',
       partialize: (state) => ({
-        user: state.user,
-        isLoggedIn: state.isLoggedIn,
-        accessToken: state.accessToken,
-        preferences: state.preferences,
-        subscription: state.subscription,
-        contactInfo: state.contactInfo,
-        invitation: state.invitation
+        preferences: state.preferences
       })
     }
   )
diff --git a/vite.config.js b/vite.config.js
index 1534215..23af6a8 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' },
@@ -18,6 +18,8 @@ export default defineConfig({
     ],
   },
   server: {
+    host: '0.0.0.0',
+    port: 5173,
     proxy: {
       '/api': {
         target: 'https://api.artium.life',

From 26d93ae98f8346d82af488cc34d56395576802ef Mon Sep 17 00:00:00 2001
From: wnsgur393 <2021301022@skuniv.ac.kr>
Date: Mon, 25 Aug 2025 03:00:47 +0900
Subject: [PATCH 5/6] =?UTF-8?q?api=20=EC=97=B0=EB=8F=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/museum/exhibition.js                 |  42 +--
 src/apis/user/user.js                         |   2 +-
 .../exhibition/ExhibitionArtworkModal.jsx     |  26 +-
 .../exhibition/ExhibitionDatePicker.jsx       |   3 +-
 .../museum/pages/ArtworkLibraryPage.jsx       |  44 ++-
 .../museum/pages/ArtworkUploadPage.jsx        |  30 ++-
 .../pages/ExhibitionParticipantPage.jsx       |  26 +-
 .../museum/pages/ExhibitionUploadPage.jsx     | 253 ++++++++++--------
 .../museum/pages/OfflineLocationPage.jsx      | 138 +++++-----
 .../museum/pages/SharedLibraryEntryPage.jsx   | 154 ++++++++++-
 .../pages/offlineLocationPage.module.css      |  15 +-
 src/components/user/ContactEditPage.jsx       |  33 ++-
 vite.config.js                                |  13 +-
 13 files changed, 519 insertions(+), 260 deletions(-)

diff --git a/src/apis/museum/exhibition.js b/src/apis/museum/exhibition.js
index 88bb5a3..0a77c7a 100644
--- a/src/apis/museum/exhibition.js
+++ b/src/apis/museum/exhibition.js
@@ -2,26 +2,32 @@ import { useState, useEffect, useCallback } from 'react';
 import APIService from '../axios';
 
 /**
- * 전시 등록 API
- * @param {Object} exhibitionData - 전시 등록 데이터
- * @param {number[]} exhibitionData.pieceIdList - 작품 ID 목록
- * @param {string} exhibitionData.endDate - 종료일 (YYYY-MM-DD)
- * @param {number[]} exhibitionData.participantIdList - 참여자 ID 목록
- * @param {string} exhibitionData.startDate - 시작일 (YYYY-MM-DD)
- * @param {string} exhibitionData.address - 주소
- * @param {string} exhibitionData.title - 전시 제목
- * @param {string} exhibitionData.offlineDescription - 오프라인 전시 설명
- * @param {string} exhibitionData.description - 전시 설명
- * @param {string} exhibitionData.addressName - 주소명
- * @returns {Promise} 전시 등록 결과
+ * 전시 등록 API (multipart/form-data)
+ * @param {Object} exhibitionData - DTO 그대로 JSON으로 보낼 데이터 (Swagger의 request object와 동일)
+ * @param {File=} imageFile - 썸네일 파일(선택). 없으면 생략 가능
+ * @returns {Promise}
  */
-export const createExhibition = async (exhibitionData) => {
+export const createExhibition = async (exhibitionData, imageFile) => {
   try {
-    const response = await APIService.private.post('/api/exhibitions', exhibitionData);
-    return response;
-  } catch (error) {
-    console.error('전시 등록 실패:', error);
-    throw error;
+    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;
   }
 };
 
diff --git a/src/apis/user/user.js b/src/apis/user/user.js
index b3b6dd2..b8e8bb5 100644
--- a/src/apis/user/user.js
+++ b/src/apis/user/user.js
@@ -108,7 +108,7 @@ export const deleteUserAccount = async () => {
  */
 export const getUserProfilesByCode = async (userCode) => {
   try {
-    const response = await APIService.private.get(`/api/users/search?keyword=${userCode}`);
+    const response = await APIService.private.get(`/api/users/profile?code=${userCode}`);
     return response;
   } catch (error) {
     console.error('사용자 프로필 조회 실패:', error);
diff --git a/src/components/museum/components/exhibition/ExhibitionArtworkModal.jsx b/src/components/museum/components/exhibition/ExhibitionArtworkModal.jsx
index 557f7b9..d67cac7 100644
--- a/src/components/museum/components/exhibition/ExhibitionArtworkModal.jsx
+++ b/src/components/museum/components/exhibition/ExhibitionArtworkModal.jsx
@@ -4,10 +4,10 @@ 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();
 
@@ -20,22 +20,30 @@ export default function ExhibitionArtworkModal({
   };
 
   const handleNewArtwork = () => {
-    // 새 작품 등록 페이지로 이동
+    // 새 작품 등록 페이지로 이동하면서 draft 데이터 전달
     navigate('/artwork/upload', {
       state: {
         fromExhibition: true,
-        currentArtworkIndex: isThumbnail ? -1 : 0,
+        isThumbnail,
         isChangeMode,
-        returnTo: 'exhibition-upload'
+        returnTo,
+        draft: currentDraft
       }
     });
     onClose();
   };
 
   const handleLoadFromLibrary = () => {
-    if (onLoadFromLibrary) {
-      onLoadFromLibrary();
-    }
+    // 작품 라이브러리 페이지로 이동하면서 draft 데이터 전달
+    navigate('/artwork/library', {
+      state: {
+        fromExhibition: true,
+        isThumbnail,
+        isChangeMode,
+        returnTo,
+        draft: currentDraft
+      }
+    });
     onClose();
   };
 
diff --git a/src/components/museum/components/exhibition/ExhibitionDatePicker.jsx b/src/components/museum/components/exhibition/ExhibitionDatePicker.jsx
index 2c08b68..a8f57c6 100644
--- a/src/components/museum/components/exhibition/ExhibitionDatePicker.jsx
+++ b/src/components/museum/components/exhibition/ExhibitionDatePicker.jsx
@@ -177,8 +177,7 @@ export default function ExhibitionDatePicker() {
         totalDays: getTotalDays()
       };
       
-      console.log('ExhibitionDatePicker - 날짜 데이터가 포함된 draft:', updatedDraft);
-      console.log('변환된 날짜:', { startDate: startDateString, endDate: endDateString });
+
       
       // 업로드 페이지로 돌아가면서 선택된 날짜 + draft 같이 전달
       // 업로드 페이지에서 location.state.selectedDates & .draft를 사용해 복원
diff --git a/src/components/museum/pages/ArtworkLibraryPage.jsx b/src/components/museum/pages/ArtworkLibraryPage.jsx
index 004a707..07916b1 100644
--- a/src/components/museum/pages/ArtworkLibraryPage.jsx
+++ b/src/components/museum/pages/ArtworkLibraryPage.jsx
@@ -10,7 +10,7 @@ export default function ArtworkLibraryPage() {
   const location = useLocation();
   
   // 전시 등록 페이지에서 전달받은 정보
-  const { fromExhibition, artworkIndex, isThumbnail, isChangeMode } = location.state || {};
+  const { fromExhibition, artworkIndex, isThumbnail, isChangeMode, draft, returnTo } = location.state || {};
   
   // API를 사용한 작품 목록 관리
   const {
@@ -52,8 +52,15 @@ export default function ArtworkLibraryPage() {
   }, [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,
@@ -100,15 +107,28 @@ export default function ArtworkLibraryPage() {
     );
     
     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
+          } 
+        });
+      }
     }
   };
 
diff --git a/src/components/museum/pages/ArtworkUploadPage.jsx b/src/components/museum/pages/ArtworkUploadPage.jsx
index e0b850e..dd19cf2 100644
--- a/src/components/museum/pages/ArtworkUploadPage.jsx
+++ b/src/components/museum/pages/ArtworkUploadPage.jsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
+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';
@@ -10,6 +10,14 @@ import styles from './artworkUploadPage.module.css';
 
 export default function ArtworkUploadPage() {
   const navigate = useNavigate();
+  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: '',
@@ -157,7 +165,14 @@ export default function ArtworkUploadPage() {
     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');
+      }
     }
   };
 
@@ -255,8 +270,15 @@ export default function ArtworkUploadPage() {
     // 등록 완료시 모달 닫고 페이지 이동
     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 = () => {
diff --git a/src/components/museum/pages/ExhibitionParticipantPage.jsx b/src/components/museum/pages/ExhibitionParticipantPage.jsx
index 7738182..79ad2f5 100644
--- a/src/components/museum/pages/ExhibitionParticipantPage.jsx
+++ b/src/components/museum/pages/ExhibitionParticipantPage.jsx
@@ -16,8 +16,9 @@ export default function ExhibitionParticipantPage() {
   const [isSearching, setIsSearching] = useState(false);
   const [showSuccessModal, setShowSuccessModal] = useState(false);
 
-  // URL state에서 전시 정보 받아오기
-  const exhibitionData = location.state?.exhibitionData || {};
+  // URL state에서 draft 정보 받아오기
+  const draft = location.state?.draft || {};
+  const exhibitionData = draft.exhibitionData || {};
 
   // 사용자 검색 함수
   const searchUsers = async (query) => {
@@ -29,12 +30,10 @@ export default function ExhibitionParticipantPage() {
 
     setIsSearching(true);
     try {
-      // @를 앞에 붙여서 API 요청
-      const userCode = `@${query.trim()}`;
-      console.log('사용자 검색 요청:', userCode);
+      // 검색어를 그대로 사용
+      const keyword = query.trim();
       
-      const response = await getUserProfilesByCode(userCode);
-      console.log('사용자 검색 응답:', response);
+      const response = await getUserProfilesByCode(keyword);
       
       if (response && response.data && Array.isArray(response.data)) {
         setSearchResults(response.data);
@@ -90,11 +89,13 @@ export default function ExhibitionParticipantPage() {
     
     // 2초 후 화면 전환
     setTimeout(() => {
-      // 전시 업로드 페이지로 돌아가면서 선택된 참여자 정보 전달
+      // 전시 업로드 페이지로 돌아가면서 전체 draft 정보 전달
       navigate('/exhibition/upload', {
         state: {
-          participants: selectedParticipants,
-          exhibitionData
+          draft: {
+            ...draft,  // 기존 draft 데이터 모두 포함
+            participants: selectedParticipants  // 참여자 정보 추가/업데이트
+          }
         }
       });
     }, 2000);
@@ -135,7 +136,7 @@ export default function ExhibitionParticipantPage() {
       </div>
 
       {/* 안내 메시지 */}
-      {isSearching && searchResults.length > 0 && (
+      {searchResults.length > 0 && (
         <p className={styles.infoText}>
           {selectedParticipants.length === 0 
             ? '프로필을 누르면 등록이 완료됩니다'
@@ -145,7 +146,8 @@ export default function ExhibitionParticipantPage() {
       )}
 
       {/* 검색 결과 목록 */}
-      {isSearching && searchResults.length > 0 && (
+      {console.log('렌더링 조건 확인:', { isSearching, searchResultsLength: searchResults.length, searchResults })}
+      {searchResults.length > 0 && (
         <div className={styles.userList}>
           {searchResults.map((user) => (
             <div
diff --git a/src/components/museum/pages/ExhibitionUploadPage.jsx b/src/components/museum/pages/ExhibitionUploadPage.jsx
index 78aa68b..f710b07 100644
--- a/src/components/museum/pages/ExhibitionUploadPage.jsx
+++ b/src/components/museum/pages/ExhibitionUploadPage.jsx
@@ -49,72 +49,37 @@ export default function ExhibitionUploadPage() {
   const isDateRangeSet = () => {
     const { startDate, endDate } = exhibitionData;
     
-    console.log('isDateRangeSet 호출됨:', {
-      startDate,
-      endDate,
-      startDateType: typeof startDate,
-      endDateType: typeof endDate,
-      startDateIsDate: startDate instanceof Date,
-      endDateIsDate: endDate instanceof Date
-    });
-    
     // Date 객체인 경우
     if (startDate instanceof Date && endDate instanceof Date) {
-      const result = !isNaN(startDate.getTime()) && !isNaN(endDate.getTime());
-      console.log('Date 객체 처리 결과:', result);
-      return result;
+      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}$/;
-      const startValid = startPattern.test(startDate);
-      const endValid = endPattern.test(endDate);
-      const result = startValid && endValid;
-      
-      console.log('문자열 처리 결과:', {
-        startValid,
-        endValid,
-        startPattern: startPattern.test(startDate),
-        endPattern: endPattern.test(endDate),
-        result
-      });
-      
-      return result;
+      return startPattern.test(startDate) && endPattern.test(endDate);
     }
     
-    console.log('조건에 맞지 않음, false 반환');
     return false;
   };
 
   // 오프라인 장소 등록 완료 상태 확인 함수
   const isOfflineLocationSet = () => {
-    const { address, addressName, offlineDescription } = offlineLocation;
-    
-    console.log('isOfflineLocationSet 호출됨:', {
-      address,
-      addressName,
-      offlineDescription,
-      addressType: typeof address,
-      addressNameType: typeof addressName,
-      offlineDescriptionType: typeof offlineDescription,
-      addressValid: address && address.trim().length > 0,
-      addressNameValid: addressName && addressName.trim().length > 0,
-      offlineDescriptionValid: offlineDescription && offlineDescription.trim().length > 0
-    });
-    
-    const result = address && address.trim().length > 0;
-    console.log('오프라인 장소 설정 결과:', result);
-    return result;
+    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,
@@ -124,21 +89,15 @@ export default function ExhibitionUploadPage() {
       totalDays: exhibitionData.totalDays
     };
     
-    console.log('buildDraft 호출됨:', draft);
-    console.log('날짜 형식 확인 - startDate:', draft.startDate, 'endDate:', draft.endDate);
     return draft;
   };
 
     // 기간 설정 페이지에서 돌아왔을 때 데이터 복원 (통합)
   useEffect(() => {
-    console.log('useEffect 실행 - location.state:', location.state);
-    
     // location.state가 실제로 유효한 데이터를 가지고 있을 때만 처리
     if (location.state && (location.state.selectedDates || location.state.draft)) {
       const { selectedDates, draft } = location.state;
       
-      console.log('데이터 복원 시작:', { selectedDates, draft });
-      
       setExhibitionData(prev => {
         let newData = { ...prev };
         
@@ -175,12 +134,6 @@ export default function ExhibitionUploadPage() {
         if (!selectedDates && draft) {
           // draft에서 직접 날짜 데이터 복원
           if (draft.startDate && draft.endDate) {
-            console.log('draft에서 날짜 데이터 복원:', {
-              startDate: draft.startDate,
-              endDate: draft.endDate,
-              totalDays: draft.totalDays
-            });
-            
             newData = {
               ...newData,
               startDate: draft.startDate,
@@ -191,12 +144,6 @@ export default function ExhibitionUploadPage() {
           
           // draft.exhibitionData에서도 날짜 데이터 확인 및 복원
           if (draft.exhibitionData && draft.exhibitionData.startDate && draft.exhibitionData.endDate) {
-            console.log('draft.exhibitionData에서 날짜 데이터 복원:', {
-              startDate: draft.exhibitionData.startDate,
-              endDate: draft.exhibitionData.endDate,
-              totalDays: draft.exhibitionData.totalDays
-            });
-            
             newData = {
               ...newData,
               startDate: draft.exhibitionData.startDate,
@@ -214,10 +161,11 @@ export default function ExhibitionUploadPage() {
         if (draft.thumbnail) setThumbnail(draft.thumbnail);
         if (draft.artworks) setArtworks(draft.artworks);
         if (draft.offlineLocation) {
-          console.log('오프라인 장소 데이터 복원:', draft.offlineLocation);
           setOfflineLocation(draft.offlineLocation);
         }
-        if (draft.participants) setParticipants(draft.participants);
+        if (draft.participants && Array.isArray(draft.participants)) {
+          setParticipants(draft.participants);
+        }
         if (typeof draft.contactRegistered === 'boolean') {
           setContactInfo(prev => ({ ...prev, isRegistered: draft.contactRegistered }));
         }
@@ -276,7 +224,26 @@ export default function ExhibitionUploadPage() {
 
   // 연락 정보 등록 페이지에서 돌아왔을 때 전시 정보 복원
   useEffect(() => {
-    if (location.state?.contactUpdated && location.state?.exhibitionData) {
+    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('연락 정보 등록 후 복원 데이터:', {
@@ -322,10 +289,29 @@ export default function ExhibitionUploadPage() {
   // 작품 라이브러리에서 돌아왔을 때 선택된 작품들 처리
   useEffect(() => {
     if (location.state?.returnFromLibrary && location.state?.selectedArtworks) {
-      const { selectedArtworks, artworkIndex, isThumbnail } = location.state;
+      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) {
@@ -357,6 +343,64 @@ export default function ExhibitionUploadPage() {
     }
   }, [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 () => {
     // 필수 입력 검증
@@ -383,13 +427,20 @@ export default function ExhibitionUploadPage() {
     
     setIsSubmitting(true);
     try {
-      // 실제 pieceIdList 사용
-      const pieceIdList = artworks.map(artwork => artwork.pieceId);
-      const participantIdList = participants.map(p => p.userId);
+      // 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 ? exhibitionData.startDate.toISOString().split('T')[0] : null;
-      const endDate = exhibitionData.endDate ? exhibitionData.endDate.toISOString().split('T')[0] : null;
+      const startDate = exhibitionData.startDate;
+      const endDate = exhibitionData.endDate;
+      
+      // thumbnailImageUrl 설정 (썸네일 작품의 이미지 URL)
+      let thumbnailImageUrl = null;
+      if (thumbnail) {
+        thumbnailImageUrl = thumbnail.imageUrl || thumbnail.url || thumbnail;
+      }
       
       const exhibitionPayload = {
         pieceIdList,
@@ -400,12 +451,14 @@ export default function ExhibitionUploadPage() {
         title: exhibitionData.title.trim(),
         offlineDescription: offlineLocation.offlineDescription || '오프라인 전시 설명 미입력',
         description: exhibitionData.description.trim(),
-        addressName: offlineLocation.addressName || '장소명 미입력'
+        addressName: offlineLocation.addressName || '장소명 미입력',
+        thumbnailImageUrl // 썸네일 이미지 URL 추가
       };
       
-      console.log('전시 등록 요청 데이터:', exhibitionPayload);
       const response = await createExhibition(exhibitionPayload);
-      console.log('전시 등록 성공:', response);
+      
+      // Draft 초기화
+      resetDraft();
       
       alert('전시가 성공적으로 등록되었습니다!');
       navigate('/museum');
@@ -461,17 +514,9 @@ export default function ExhibitionUploadPage() {
     }
   };
 
-  // 작품 라이브러리에서 가져오기 처리
-  const handleLoadFromLibrary = () => {
-    navigate('/artwork/library', {
-      state: {
-        fromExhibition: true,
-        currentArtworkIndex,
-        isChangeMode,
-        isThumbnail: currentArtworkIndex === -1
-      }
-    });
-  };
+
+
+
 
   // 작품 추가/수정/삭제 (객체 기반)
   const addArtwork = (artwork) => setArtworks(prev => [...prev, artwork]);
@@ -583,7 +628,7 @@ export default function ExhibitionUploadPage() {
                 {thumbnail ? (
                   <div className={styles.artworkImageWrapper}>
                     <img 
-                      src={URL.createObjectURL(thumbnail)} 
+                      src={thumbnail instanceof File ? URL.createObjectURL(thumbnail) : (thumbnail.imageUrl || thumbnail)} 
                       alt="전시 썸네일" 
                       className={styles.artworkImage}
                     />
@@ -655,15 +700,7 @@ export default function ExhibitionUploadPage() {
             className={`${styles.featureButton} ${contactInfo.isRegistered ? styles.contactRegistered : ''}`}
             onClick={() => navigate('/user/contact', {
               state: {
-                exhibitionData: {
-                  title: exhibitionData.title,
-                  description: exhibitionData.description,
-                  startDate: exhibitionData.startDate,
-                  endDate: exhibitionData.endDate,
-                  totalDays: exhibitionData.totalDays
-                },
-                thumbnail,
-                artworks
+                draft: buildDraft()
               }
             })}
           >
@@ -675,17 +712,7 @@ export default function ExhibitionUploadPage() {
             className={`${styles.featureButton} ${isOfflineLocationSet() ? styles.completed : ''}`}
             onClick={() => navigate('/exhibition/offline-location', {
               state: {
-                offlineLocation,
-                returnTo: 'exhibition-upload',
-                exhibitionData: {
-                  title: exhibitionData.title,
-                  description: exhibitionData.description,
-                  startDate: exhibitionData.startDate,
-                  endDate: exhibitionData.endDate,
-                  totalDays: exhibitionData.totalDays
-                },
-                thumbnail,
-                artworks
+                draft: buildDraft()
               }
             })}
           >
@@ -697,17 +724,7 @@ export default function ExhibitionUploadPage() {
             className={`${styles.featureButton} ${participants.length > 0 ? styles.completed : ''}`}
             onClick={() => navigate('/exhibition/participants', {
               state: {
-                participants,
-                returnTo: 'exhibition-upload',
-                exhibitionData: {
-                  title: exhibitionData.title,
-                  description: exhibitionData.description,
-                  startDate: exhibitionData.startDate,
-                  endDate: exhibitionData.endDate,
-                  totalDays: exhibitionData.totalDays
-                },
-                thumbnail,
-                artworks
+                draft: buildDraft()
               }
             })}
           >
@@ -732,10 +749,10 @@ export default function ExhibitionUploadPage() {
       <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/OfflineLocationPage.jsx b/src/components/museum/pages/OfflineLocationPage.jsx
index d5ccae1..be9fbbd 100644
--- a/src/components/museum/pages/OfflineLocationPage.jsx
+++ b/src/components/museum/pages/OfflineLocationPage.jsx
@@ -2,88 +2,106 @@ import { useState } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import chevronLeft from '@/assets/museum/chevron-left.png';
 import styles from './offlineLocationPage.module.css';
-import SearchBar from '@/components/feed/SearchBar';
 
 export default function OfflineLocationPage() {
   const navigate = useNavigate();
   const location = useLocation();
   const [address, setAddress] = useState('');
-  const [exhibitionDescription, setExhibitionDescription] = useState('');
+  const [addressName, setAddressName] = useState('');
+  
+  // URL state에서 draft 정보 받아오기
+  const draft = location.state?.draft || {};
+  const exhibitionData = draft.exhibitionData || {};
+  
 
-
-
-  const handleBack = () => {
-    // 전시 데이터를 포함하여 뒤로 가기
-    const exhibitionData = location.state?.exhibitionData || {};
-    
-    // Date 객체를 YYYY-MM-DD 문자열로 변환
-    const safeExhibitionData = {
-      ...exhibitionData,
-      startDate: exhibitionData.startDate instanceof Date 
-        ? exhibitionData.startDate.toISOString().split('T')[0] 
-        : exhibitionData.startDate,
-      endDate: exhibitionData.endDate instanceof Date 
-        ? exhibitionData.endDate.toISOString().split('T')[0] 
-        : exhibitionData.endDate
-    };
-    
-    console.log('뒤로 가기 시 전달할 데이터:', {
-      original: exhibitionData,
-      converted: safeExhibitionData
-    });
-    
-    navigate('/exhibition/upload', {
-      state: {
-        draft: {
-          exhibitionData: safeExhibitionData,
-          thumbnail: location.state?.thumbnail || null,
-          artworks: location.state?.artworks || [],
-          offlineLocation: location.state?.offlineLocation || null,
-          participants: location.state?.participants || [],
-          contactRegistered: location.state?.contactRegistered || false
+    const handleBack = () => {
+    // draft 데이터가 있으면 그대로 전달, 없으면 기존 방식 사용
+    if (draft && Object.keys(draft).length > 0) {
+      navigate('/exhibition/upload', {
+        state: {
+          draft: draft
+        }
+      });
+    } 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
+          }
         }
-      }
-    });
+      });
+    }
   };
 
   const handleComplete = () => {
-    // 오프라인 장소 등록 완료
-    console.log('오프라인 장소 등록 완료:', {
-      address
-    });
-    
-    // 전시 등록 페이지로 돌아가면서 오프라인 장소 데이터 전달
-    const exhibitionData = location.state?.exhibitionData || {};
-    
-    navigate('/exhibition/upload', {
-      state: {
-        draft: {
-          exhibitionData,
-          thumbnail: location.state?.thumbnail || null,
-          artworks: location.state?.artworks || [],
-          offlineLocation: {
-            address,
-            addressName: address,
-            offlineDescription: address
-          },
-          participants: location.state?.participants || [],
-          contactRegistered: location.state?.contactRegistered || false
+    // draft 데이터가 있으면 기존 데이터에 오프라인 장소만 추가, 없으면 새로 생성
+    if (draft && Object.keys(draft).length > 0) {
+      const updatedDraft = {
+        ...draft,
+        offlineLocation: {
+          address,
+          addressName,
+          offlineDescription: address // 주소를 설명으로도 사용
         }
-      }
-    });
+      };
+      
+      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
+          }
+        }
+      });
+    }
   };
 
   const renderAddressInput = () => (
     <div className={styles.addressSection}>
       <div className={styles.addressInput}>
+        <label className={styles.inputLabel}>주소</label>
         <textarea
-          placeholder="주소를 입력해주세요."
+          placeholder="도로명, 건물명, 지번을 입력해주세요."
           value={address}
           onChange={(e) => setAddress(e.target.value)}
           maxLength={100}
           className={styles.addressField}
         />
       </div>
+      <div className={styles.addressInput}>
+        <label className={styles.inputLabel}>건물명</label>
+        <textarea
+          placeholder="건물명을 입력해주세요."
+          value={addressName}
+          onChange={(e) => setAddressName(e.target.value)}
+          maxLength={50}
+          className={styles.addressField}
+        />
+      </div>
     </div>
   );
 
@@ -112,7 +130,7 @@ export default function OfflineLocationPage() {
                  <button 
            className={styles.completeButton}
            onClick={handleComplete}
-           disabled={!address.trim()}
+           disabled={!address.trim() || !addressName.trim()}
          >
           등록 완료하기
         </button>
diff --git a/src/components/museum/pages/SharedLibraryEntryPage.jsx b/src/components/museum/pages/SharedLibraryEntryPage.jsx
index 222d067..6d0c59b 100644
--- a/src/components/museum/pages/SharedLibraryEntryPage.jsx
+++ b/src/components/museum/pages/SharedLibraryEntryPage.jsx
@@ -27,6 +27,10 @@ export default function SharedLibraryEntryPage() {
   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');
@@ -40,6 +44,105 @@ export default function SharedLibraryEntryPage() {
     }));
   };
 
+  // 작품 라이브러리에서 돌아왔을 때 선택된 작품들 처리
+  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) {
@@ -78,6 +181,34 @@ export default function SharedLibraryEntryPage() {
     }
   };
 
+  // 새 작품 등록 페이지로 이동
+  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 = () => {
     // 작품 라이브러리 페이지로 이동
@@ -85,14 +216,25 @@ export default function SharedLibraryEntryPage() {
       state: {
         fromSharedLibrary: true,
         currentArtworkIndex,
-        isChangeMode
+        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) => {
-    removeArtworkFromStore(index);
+    setArtworks(prev => prev.filter((_, i) => i !== index));
   };
 
   // 공유 라이브러리 작품 슬라이드 렌더링
@@ -107,7 +249,7 @@ export default function SharedLibraryEntryPage() {
             {artwork ? (
               <div className={styles.artworkImageWrapper}>
                 <img 
-                  src={URL.createObjectURL(artwork)} 
+                  src={artwork.imageUrl || artwork} 
                   alt={`작품 ${index + 1}`} 
                   className={styles.artworkImage}
                 />
@@ -189,7 +331,7 @@ export default function SharedLibraryEntryPage() {
                 {thumbnail ? (
                   <div className={styles.artworkImageWrapper}>
                     <img 
-                      src={URL.createObjectURL(thumbnail)} 
+                      src={thumbnail instanceof File ? URL.createObjectURL(thumbnail) : (thumbnail.imageUrl || thumbnail)} 
                       alt="공유 라이브러리 썸네일" 
                       className={styles.artworkImage}
                     />
@@ -261,10 +403,12 @@ export default function SharedLibraryEntryPage() {
       <ExhibitionArtworkModal
         isOpen={isArtworkModalOpen}
         onClose={() => setIsArtworkModalOpen(false)}
-        onNewArtwork={handleNewArtwork}
+        onNewArtwork={handleNewArtworkPage}
         onLoadFromLibrary={handleLoadFromLibrary}
         isThumbnail={currentArtworkIndex === -1}
         isChangeMode={isChangeMode}
+        currentDraft={buildDraft()} // 현재 상태를 모달에 전달
+        returnTo="shared-library-entry" // 돌아올 페이지 지정
       />
     </div>
   );
diff --git a/src/components/museum/pages/offlineLocationPage.module.css b/src/components/museum/pages/offlineLocationPage.module.css
index 5c87cab..924f0ee 100644
--- a/src/components/museum/pages/offlineLocationPage.module.css
+++ b/src/components/museum/pages/offlineLocationPage.module.css
@@ -300,4 +300,17 @@
   background: var(--color-main);
   border: 1px solid #000;
   padding: 12px 20px;
-}
\ No newline at end of file
+}
+
+.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/user/ContactEditPage.jsx b/src/components/user/ContactEditPage.jsx
index a07b47f..7ee706f 100644
--- a/src/components/user/ContactEditPage.jsx
+++ b/src/components/user/ContactEditPage.jsx
@@ -12,6 +12,7 @@ export default function ContactEditPage() {
   
   // 전시 정보 상태 (전시 업로드 페이지에서 넘어온 경우)
   const [exhibitionData, setExhibitionData] = useState(null);
+  const [draft, setDraft] = useState(null);
   
   // 폼 상태 관리
   const [formData, setFormData] = useState({
@@ -26,7 +27,11 @@ export default function ContactEditPage() {
     const fetchData = async () => {
       try {
         // 전시 정보가 있는지 확인 (전시 업로드 페이지에서 넘어온 경우)
-        if (location.state?.exhibitionData) {
+        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);
         }
@@ -39,7 +44,6 @@ export default function ContactEditPage() {
           
           // 연락 정보 조회
           const contactResponse = await getUserContact(userId);
-          console.log('연락 정보 API 응답:', contactResponse);
           
           if (contactResponse && contactResponse.data) {
             const contactData = contactResponse.data;
@@ -79,21 +83,21 @@ export default function ContactEditPage() {
         ? `${formData.emailUsername}@${formData.customDomain}`
         : `${formData.emailUsername}@${formData.emailDomain}`;
 
-      console.log('저장할 연락정보:', {
-        email: finalEmail,
-        instagram: formData.instagram
-      });
-
       // API로 연락 정보 전송
       const response = await updateContact({
         email: finalEmail,
         instagram: formData.instagram
       });
 
-      console.log('연락 정보 등록 성공:', response);
-
       // 편집 완료 후 전시 정보가 있으면 전시 업로드 페이지로, 없으면 프로필 페이지로 이동
-      if (location.state?.exhibitionData) {
+      if (draft) {
+        navigate('/exhibition/upload', {
+          state: { 
+            draft: draft,
+            contactUpdated: true 
+          }
+        });
+      } else if (location.state?.exhibitionData) {
         navigate('/exhibition/upload', {
           state: { 
             exhibitionData: location.state.exhibitionData,
@@ -113,7 +117,14 @@ export default function ContactEditPage() {
 
   const handleBackClick = () => {
     // 전시 등록 페이지에서 이동한 경우 전시 업로드 페이지로, 아니면 프로필 페이지로 이동
-    if (location.state?.exhibitionData) {
+    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,
diff --git a/vite.config.js b/vite.config.js
index 23af6a8..09bb4a1 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -18,13 +18,12 @@ export default defineConfig({
     ],
   },
   server: {
-    host: '0.0.0.0',
-    port: 5173,
     proxy: {
+      // "/api"로 들어오는 요청을 백엔드로 프록시
       '/api': {
-        target: 'https://api.artium.life',
-        changeOrigin: true,
-      }
-    }
-  }
+        target: 'https://api.artium.life', // 백엔드 서버
+        changeOrigin: true,              // 호스트 헤더를 target으로 변경
+      },
+    },
+  },
 });
\ No newline at end of file

From d2a95cff04d1766e0111f51935d9e14ff6fc083f Mon Sep 17 00:00:00 2001
From: wnsgur393 <2021301022@skuniv.ac.kr>
Date: Mon, 25 Aug 2025 03:38:13 +0900
Subject: [PATCH 6/6] =?UTF-8?q?merge=EB=A5=BC=20=EC=9C=84=ED=95=9C=20?=
 =?UTF-8?q?=EC=9D=B4=EB=A6=84=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/museum/{exhibition.js => museum-exhibition.js} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/apis/museum/{exhibition.js => museum-exhibition.js} (100%)

diff --git a/src/apis/museum/exhibition.js b/src/apis/museum/museum-exhibition.js
similarity index 100%
rename from src/apis/museum/exhibition.js
rename to src/apis/museum/museum-exhibition.js