diff --git a/README.md b/README.md
index 9771f63..390bc2f 100644
--- a/README.md
+++ b/README.md
@@ -54,7 +54,37 @@
 ## 🏗 설계 및 구현
 
 - ### 📂 프로젝트 구조
-  - 프로젝트의 주요 디렉토리 구조와 설명을 포함합니다.
+
+```
+📦 프로젝트 루트
+ ┣ 📂src              
+ ┃ ┣ 📂assets         
+ ┃ ┃ ┣ 📂data        
+ ┃ ┃ ┣ 📂fonts       
+ ┃ ┃ ┣ 📂Icons        
+ ┃ ┃ ┃ ┗ 📂akoming   
+ ┃ ┃ ┣ 📂images       
+ ┃ ┃ ┗ 📂styles       
+ ┃ ┣ 📂components     # 공용 컴포넌트 
+ ┃ ┃ ┣ 📂common       
+ ┃ ┃ ┗ 📂layout       
+ ┃ ┣ 📂router         # Vue Router
+ ┃ ┣ 📂store          # Vuex 
+ ┃ ┣ 📂views          
+ ┃ ┃ ┣ 📂akopolio     # 아코폴리오 관련 페이지
+ ┃ ┃ ┣ 📂calendar     # 학사 일정 캘린더 관련 페이지
+ ┃ ┃ ┣ 📂feed         # 피드 관련 페이지
+ ┃ ┃ ┣ 📂login        # 로그인, 회원가입, 마이페이지 관련 페이지
+ ┃ ┃ ┣ 📂mainpage     # 메인 페이지 관련 파일
+ ┃ ┃ ┗ 📜NotFound.vue # 404 에러 페이지
+ ┣ 📂public          
+ ┣ 📂docs             # 보고서 등 문서 폴더
+ ┃ ┗ 📜README.md     
+ ┣ 📜App.vue          
+ ┣ 📜main.js              
+```
+
+ 
 
 - ### 🧩 다이어그램
    아키텍처 다이어그램, 서비스 흐름, 데이터 흐름 등을 그림으로 표현합니다.
@@ -69,8 +99,9 @@
   ![osori](https://github.com/user-attachments/assets/d90a2ae9-aac0-4ba0-92bf-fd08abee8d4b)
 
 
-- ### 📑 API 명세서
-  - 각 API의 설명, 요청 및 응답 예시를 포함합니다.
+- ### 📑 API 명세서 일부
+     ![1](https://github.com/user-attachments/assets/21191f05-1f77-4c98-878c-f3b5ddaa6f99)
+
 
 <br>
 
@@ -105,9 +136,15 @@
 
 ## ▶ 실행 방법
 
-1. **환경 설정**: 프로젝트 실행을 위한 필수 환경 변수 및 설정 정보를 포함합니다.
-2. **의존성 설치**: 프로젝트의 종속성을 설치하는 단계입니다.
+1. **환경 설정**: Node.js, npm, vue-cli를 설치합니다.
+     ```bash
+     npm install -g @vue/cli
+2. **의존성 설치**:<br>
+   ```bash
+   npm install 
 3. **프로젝트 실행**: 실행 명령어로 프로젝트를 시작합니다.
+   ```bash
+   npm run dev
 
 <br>
 
diff --git "a/docs/\355\232\214\354\235\230\353\241\235.md" "b/docs/\355\232\214\354\235\230\353\241\235.md"
index 7d5556e..c66493a 100644
--- "a/docs/\355\232\214\354\235\230\353\241\235.md"
+++ "b/docs/\355\232\214\354\235\230\353\241\235.md"
@@ -15,11 +15,12 @@
 | 8차   | 2024년 10월 16일 | 정기 회의 | 이소은, 최민, 정지원, 정예빈 | 이소은 | https://www.notion.so/8-12db4ba0516b81178342cc75df07750b        |
 | 9차   | 2024년 10월 21일 | 정기 회의 | 이소은, 최민, 정지원, 정예빈 | 정지원 | https://www.notion.so/9-12db4ba0516b8164b602fd248747296b        |
 | 10차  | 2024년 10월 23일 | 정기 회의 | 이소은, 최민, 정지원, 정예빈 | 최민   | https://www.notion.so/10-12db4ba0516b81d9a131f2c52ae5ee89       |
-| 11차  | 2024년 10월 28일 | 정기 회의 | 이소은, 최민, 정지원, 정예빈 | 정예빈 | https://www.notion.so/11-12db4ba0516b8071b0f8fcce55a7a442?pvs=4 |
-| 12차  | 2024년 10월 30일 | 정기 회의 | 이소은, 최민, 정지원, 정예빈 | 이소은 | https://www.notion.so/12-bf84f851b63442adba1b69159a772725?pvs=4 |
-| 13차  | 2024년 11월  4일 | 정기 회의 | 이소은, 최민, 정지원, 정예빈 | 정지원 | https://www.notion.so/13-a6297b09e7bd45fa904862463bca54c4?pvs=4 |
-| 14차  | 2024년 11월  6일 | 정기 회의 | 이소은, 최민, 정지원, 정예빈 | 최민 | https://www.notion.so/14-416a0ab074c54e1f945a72cd3c3acb18?pvs=4 |
-| 15차  | 2024년 11월  11일 | 정기 회의 | 이소은, 최민, 정지원, 정예빈 | 정예빈 | https://www.notion.so/15-29633aca525242d983483ebc20b8871d?pvs=4 |
-| 16차  | 2024년 11월  18일 | 정기 회의 | 이소은, 최민, 정지원, 정예빈 | 이소은 | https://www.notion.so/16-dce780571dbe4f9a84e4bb58be834e66?pvs=4 |
-| 17차  | 2024년 11월  20일 | 정기 회의 | 이소은, 최민, 정지원, 정예빈 | 정지원 | https://www.notion.so/17-476981be247b4d339ff70ae25a91d80e?pvs=4 |
-
+| 11차  | 2024년 10월 28일 | 정기 회의 | 이소은, 최민, 정지원, 정예빈 | 정예빈 | https://www.notion.so/11-12db4ba0516b8071b0f8fcce55a7a442 |
+| 12차  | 2024년 10월 30일 | 정기 회의 | 이소은, 최민, 정지원, 정예빈 | 이소은 | https://www.notion.so/12-bf84f851b63442adba1b69159a772725 |
+| 13차  | 2024년 11월  4일 | 정기 회의 | 이소은, 최민, 정지원, 정예빈 | 정지원 | https://www.notion.so/13-a6297b09e7bd45fa904862463bca54c4 |
+| 14차  | 2024년 11월  6일 | 정기 회의 | 이소은, 최민, 정지원, 정예빈 | 최민 | https://www.notion.so/14-416a0ab074c54e1f945a72cd3c3acb18 |
+| 15차  | 2024년 11월  11일 | 정기 회의 | 이소은, 최민, 정지원, 정예빈 | 정예빈 | https://www.notion.so/15-29633aca525242d983483ebc20b8871d |
+| 16차  | 2024년 11월  18일 | 정기 회의 | 이소은, 최민, 정지원, 정예빈 | 이소은 | https://www.notion.so/16-dce780571dbe4f9a84e4bb58be834e66 |
+| 17차  | 2024년 11월  20일 | 정기 회의 | 이소은, 최민, 정지원, 정예빈 | 정지원 | https://www.notion.so/17-476981be247b4d339ff70ae25a91d80e |
+| 18차  | 2024년 11월  27일 | 정기 회의 | 이소은, 최민, 정지원, 정예빈 | 최민 | https://www.notion.so/17-476981be247b4d339ff70ae25a91d80e |
+| 19차  | 2024년 12월  4일 | 정기 회의 | 이소은, 최민, 정지원, 정예빈 | 정예빈 | https://www.notion.so/17-476981be247b4d339ff70ae25a91d80e |
diff --git a/src/router/index.js b/src/router/index.js
index 739e8c0..f35e74f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,6 @@ import FeedLayout from '@/components/layout/FeedLayout.vue'
 import akopolioCreate from '@/views/akopolio/create/akopolioCreate.vue'
 import akopolioMain from '@/views/akopolio/main/akopolioMain.vue'
 
-
 // 자동 임포트 함수 (src/views 내의 모든 .vue 파일을 임포트)
 function importAllViews() {
   const viewFiles = require.context('@/views', true, /\.vue$/)
@@ -81,8 +80,7 @@ const routes = [
         path: 'edit/:id',
         name: 'akopolioEdit',
         component: importedViews['akopolioEdit'] // 자동 임포트 적용
-      },
-
+      }
     ]
   },
   {
@@ -138,6 +136,40 @@ const router = createRouter({
   routes
 })
 
-//라우터 가드 설정(세션 기반 쿠기, 나중에 수정 필요)
-// meta: { requiresAuth: true } // 인증이 필요한 페이지
+//라우터 가드 설정
+// 글로벌 가드 추가
+router.beforeEach(async (to, from, next) => {
+  const isAuthPage = to.matched.some((record) =>
+    record.path.startsWith('/auth')
+  )
+
+  try {
+    // 세션 상태 확인 API 호출
+    const response = await fetch(
+      `${process.env.VUE_APP_BE_API_URL}/api/quests/status`,
+      {
+        method: 'GET',
+        credentials: 'include' // 세션 쿠키 포함
+      }
+    )
+
+    if (response.ok) {
+      if (isAuthPage) {
+        next('/main') // 이미 인증된 상태라면 메인 페이지로 이동
+      } else {
+        next() // 정상적으로 페이지 이동
+      }
+    } else {
+      if (isAuthPage) {
+        next() // 인증 경로로는 접근 가능
+      } else {
+        next('/auth/login') // 인증되지 않았으면 로그인 페이지로 이동
+      }
+    }
+  } catch (error) {
+    console.error('Error during authentication check:', error)
+    next('/auth/login') // 오류 발생 시 로그인 페이지로 이동
+  }
+})
+
 export default router
diff --git a/src/store/index.js b/src/store/index.js
index f605fac..ca3228e 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -1,60 +1,61 @@
-import { createStore } from 'vuex';
-import auth from '../views/test/auth.js'; // auth 모듈 import
-import login from './modules/login.js'; // 로그인 모듈 import
-import { v4 as uuidv4 } from 'uuid'; // UUID를 사용하여 고유 ID 생성
+import { createStore } from 'vuex'
+import login from './modules/login.js' // 로그인 모듈 import
+import { v4 as uuidv4 } from 'uuid' // UUID를 사용하여 고유 ID 생성
 
 // 로컬 스토리지에서 포트폴리오 가져오기
 const getStoredPortfolios = () => {
-  const storedPortfolios = localStorage.getItem('portfolios');
-  return storedPortfolios ? JSON.parse(storedPortfolios) : [];
-};
+  const storedPortfolios = localStorage.getItem('portfolios')
+  return storedPortfolios ? JSON.parse(storedPortfolios) : []
+}
 
 const store = createStore({
   state: {
-    portfolios: getStoredPortfolios(), // 로컬 스토리지에서 포트폴리오 초기화
+    portfolios: getStoredPortfolios() // 로컬 스토리지에서 포트폴리오 초기화
   },
   mutations: {
     ADD_PORTFOLIO(state, portfolio) {
-      const newPortfolio = { ...portfolio, id: uuidv4() }; // 고유 ID 추가
-      state.portfolios.push(newPortfolio); // 포트폴리오 추가
-      localStorage.setItem('portfolios', JSON.stringify(state.portfolios)); // 로컬 스토리지에 저장
+      const newPortfolio = { ...portfolio, id: uuidv4() } // 고유 ID 추가
+      state.portfolios.push(newPortfolio) // 포트폴리오 추가
+      localStorage.setItem('portfolios', JSON.stringify(state.portfolios)) // 로컬 스토리지에 저장
     },
     DELETE_PORTFOLIO(state, portfolioId) {
-      state.portfolios = state.portfolios.filter(portfolio => portfolio.id !== portfolioId);
-      localStorage.setItem('portfolios', JSON.stringify(state.portfolios)); // 로컬 스토리지에 삭제 후 저장
+      state.portfolios = state.portfolios.filter(
+        (portfolio) => portfolio.id !== portfolioId
+      )
+      localStorage.setItem('portfolios', JSON.stringify(state.portfolios)) // 로컬 스토리지에 삭제 후 저장
     },
-     // 수정 기능을 위한 UPDATE_PORTFOLIO 뮤테이션 추가
-     UPDATE_PORTFOLIO(state, updatedPortfolio) {
-      const index = state.portfolios.findIndex(portfolio => portfolio.id === updatedPortfolio.id);
+    // 수정 기능을 위한 UPDATE_PORTFOLIO 뮤테이션 추가
+    UPDATE_PORTFOLIO(state, updatedPortfolio) {
+      const index = state.portfolios.findIndex(
+        (portfolio) => portfolio.id === updatedPortfolio.id
+      )
       if (index !== -1) {
-        state.portfolios.splice(index, 1, updatedPortfolio); // 기존 항목을 업데이트된 항목으로 교체
-        localStorage.setItem('portfolios', JSON.stringify(state.portfolios)); // 로컬 스토리지에 업데이트 후 저장
+        state.portfolios.splice(index, 1, updatedPortfolio) // 기존 항목을 업데이트된 항목으로 교체
+        localStorage.setItem('portfolios', JSON.stringify(state.portfolios)) // 로컬 스토리지에 업데이트 후 저장
       }
-    },
+    }
   },
   actions: {
     addPortfolio({ commit }, portfolio) {
-      commit('ADD_PORTFOLIO', portfolio); // mutation 호출
+      commit('ADD_PORTFOLIO', portfolio) // mutation 호출
     },
     deletePortfolio({ commit }, portfolioId) {
-      commit('DELETE_PORTFOLIO', portfolioId);
-    },
-     // 수정 기능을 위한 updatePortfolio 액션 추가
-     updatePortfolio({ commit }, updatedPortfolio) {
-      commit('UPDATE_PORTFOLIO', updatedPortfolio); // UPDATE_PORTFOLIO 뮤테이션 호출
+      commit('DELETE_PORTFOLIO', portfolioId)
     },
+    // 수정 기능을 위한 updatePortfolio 액션 추가
+    updatePortfolio({ commit }, updatedPortfolio) {
+      commit('UPDATE_PORTFOLIO', updatedPortfolio) // UPDATE_PORTFOLIO 뮤테이션 호출
+    }
   },
   getters: {
     getPortfolios(state) {
-      return state.portfolios; // 포트폴리오 목록 반환
-    },
+      return state.portfolios // 포트폴리오 목록 반환
+    }
   },
   modules: {
-    login, // 로그인 모듈
-    auth,  // auth 모듈
-  },
-});
-
-export default store;
-
+    login // 로그인 모듈
+    // auth 모듈
+  }
+})
 
+export default store
diff --git a/src/views/akopolio/Edit/akopolioEdit.vue b/src/views/akopolio/Edit/akopolioEdit.vue
index 3bbea85..58bbe6f 100644
--- a/src/views/akopolio/Edit/akopolioEdit.vue
+++ b/src/views/akopolio/Edit/akopolioEdit.vue
@@ -29,14 +29,14 @@
         </label>
 
         <div v-show="isDropdownOpen" class="tag-container">
-          <button
-            v-for="tag in tags"
-            :key="tag"
-            @click="toggleTag(tag)"
-            :class="{ active: selectedTags.includes(tag) }"
-          >
-            {{ tag }}
-          </button>
+          <div 
+              v-for="tag in tags" 
+              :key="tag" 
+              @click="toggleTag(tag)" 
+              :class="{ active: selectedTags.includes(tag), 'tag-div': true }"
+            >
+              {{ tag }}
+            </div>
         </div>
       </div>
     </div>
@@ -75,16 +75,21 @@
       <div class="image-preview-container" v-if="images.length">
         <div class="image-card" v-for="(image, index) in images" :key="index">
           <div class="image-preview-card">
-            <img :src="image.previewUrl" :alt="`Uploaded Image ${index + 1}`" class="image-preview" />
-            <button @click="removeImage(index)" class="delete-image-btn">X</button>
+            <img 
+              v-if="image.previewUrl" 
+              :src="image.previewUrl" 
+              :alt="`Uploaded Image ${index + 1}`" 
+              class="image-preview"
+            />
+            <div @click="removeImage(index)" class="delete-image-btn">X</div>
           </div>
         </div>
       </div>
     </div>
 
     <div class="button-container">
-        <button @click="saveData" class="save-button">저장하기</button>
-      </div>
+      <div @click="saveData" class="save-button">저장하기</div>
+    </div>
       <MainFooter />
    </div> 
 </template>
@@ -155,7 +160,7 @@ textarea {
   font-size: 12px;
 }
 
-button {
+.tag-div {
   display: inline-block;
   margin: 3px;
   padding: 5px 10px;
@@ -165,8 +170,13 @@ button {
   border: 1px solid #eec092;
 }
 
-button.active {
-  background-color: #f6b87a;
+.tag-div.active {
+  background-color: #f7c088;
+}
+
+.tag-div:hover {
+  background-color: #f7c088;
+  cursor: pointer;
 }
 
 /* 분야 설정 박스 */
@@ -208,12 +218,14 @@ button.active {
   font-size: 0.875rem;  
   font-weight: 500;  
   border-radius: 9999px; 
+  text-align: center;
   transition: background-color 0.3s ease;
   margin-bottom: 20px;
 }
 
 .save-button:hover {
   background-color: #e5a769;
+  cursor: pointer;
 }
 
 .experience-container h3,
@@ -269,16 +281,15 @@ label {
   top: 5px;
   right: 5px;
   color: black;
-  border: none;
-  background: none; /* 배경색 제거 */
-  font-size: 16px; /* X 아이콘이 더 잘 보이도록 크기 조정 */
+  background: none; 
+  font-size: 15px; 
   cursor: pointer;
-  transition: color 0.3s; /* 색상 전환 애니메이션 추가 */
+  transition: color 0.3s;
 }
 
 
 .delete-image-btn:hover {
-  color: white; 
+  color:#d9d9d9;  
 }
 
 
@@ -302,12 +313,10 @@ label {
   object-fit: contain; /* 이미지가 컨테이너 내에서 비율을 유지하면서 크기 조정 */
 }
 
-/* 기본 input[type="file"] 숨기기 */
 input[type="file"] {
   display: none;
 }
 
-/* 커스텀 버튼 스타일 */
 .custom-file-upload {
   background-color: #faf5f0; 
   color: #f3ab62;
diff --git a/src/views/akopolio/Edit/edit.js b/src/views/akopolio/Edit/edit.js
index 3a5437b..6f6b641 100644
--- a/src/views/akopolio/Edit/edit.js
+++ b/src/views/akopolio/Edit/edit.js
@@ -84,13 +84,17 @@ export default {
       textarea.style.height = `${textarea.scrollHeight}px`;
     };
 
-    const fetchPortfolioById = async (id) => {
+    // 포트폴리오 데이터 가져오기
+    const fetchPortfolioById = async (portfolioId) => {
       try {
-        const apiUrl = `${process.env.VUE_APP_BE_API_URL}/api/portfolios/${id}`;
-        console.log('Fetching portfolio from URL:', apiUrl);
+        const apiUrl = `${process.env.VUE_APP_BE_API_URL}/api/portfolios/${portfolioId}`;
+        console.log('Fetching portfolio from URL:', apiUrl); // API URL 출력
 
-        const response = await fetch(apiUrl);
-        console.log('Response status:', response.status);
+        const response = await fetch(apiUrl, {
+          method: 'GET',
+          credentials: 'include',
+        });
+        console.log('Response status:', response.status); // 상태 코드 확인
 
         if (!response.ok) {
           console.error(`Response status: ${response.status}, ${response.statusText}`);
@@ -100,6 +104,7 @@ export default {
         const data = await response.json();
         console.log('Received portfolio data:', data);
 
+        // 포트폴리오 데이터 할당
         portfolio.value = {
           baseInfo: data.baseInfo || {},
           experience: data.experience || { situation: '', task: '', action: '', result: '' },
@@ -107,7 +112,22 @@ export default {
           photoUrls: data.photoUrls || [],
         };
 
-        images.value = portfolio.value.photoUrls || [];
+        // 각 변수에 포트폴리오 데이터 할당
+        activityName.value = portfolio.value.baseInfo.name || ''; // 활동명
+        activityDate.value = portfolio.value.baseInfo.startDate || ''; // 활동일 (startDate로 변경)
+        star.value = portfolio.value.experience || { situation: '', task: '', action: '', result: '' }; // STAR 모델
+        pmi.value = portfolio.value.pmi || { plus: '', minus: '', interesting: '' }; // PMI 모델
+        images.value = portfolio.value.photoUrls.map((imageUrl) => {
+          return {
+            previewUrl: imageUrl, // 서버에서 제공하는 URL을 미리보기 URL로 사용
+            name: imageUrl.split('/').pop(), // 파일 이름을 추출
+            size: 0, // 기존 이미지는 파일 크기 필요 없음
+            containerWidth: '300px', // 기본 크기 설정
+            containerHeight: '300px', // 기본 크기 설정
+          };
+        });
+        selectedTags.value = portfolio.value.baseInfo.tags || [];
+        
       } catch (error) {
         console.error('Error fetching portfolio:', error);
         alert('포트폴리오를 가져오는 중 오류가 발생했습니다.');
@@ -124,7 +144,7 @@ export default {
       }
 
       const newImagesPromises = selectedFiles.map((file) => {
-        const previewUrl = URL.createObjectURL(file);
+        const previewUrl = URL.createObjectURL(file);  // 새로 추가된 이미지는 미리보기 URL 생성
         const imageElement = new Image();
         imageElement.src = previewUrl;
 
@@ -171,7 +191,9 @@ export default {
     };
 
     const removeImage = (index) => {
-      URL.revokeObjectURL(images.value[index].previewUrl);
+      if (images.value[index].previewUrl) {
+        URL.revokeObjectURL(images.value[index].previewUrl);  // 생성한 URL을 해제
+      }
       images.value.splice(index, 1);
     };
 
@@ -219,6 +241,7 @@ export default {
         return;
       }
 
+
       try {
         const response = await axios.put(
           `${process.env.VUE_APP_BE_API_URL}/api/portfolios/${id}`,
@@ -237,7 +260,7 @@ export default {
               minus: pmi.value.minus,
               interesting: pmi.value.interesting,
             },
-            photoUrls: images.value.map(image => image.name),
+            photoUrls: images.value.map(image => image.url),
           },
           {
             headers: {
@@ -273,6 +296,7 @@ export default {
       selectedTags.value = [];
       await fetchUserData();
       await fetchPortfolioById(portfolioId);
+
     });
 
     return {
diff --git a/src/views/akopolio/create/akopolioCreate.vue b/src/views/akopolio/create/akopolioCreate.vue
index 29ddaee..5cca151 100644
--- a/src/views/akopolio/create/akopolioCreate.vue
+++ b/src/views/akopolio/create/akopolioCreate.vue
@@ -29,14 +29,15 @@
         </label>
 
         <div v-show="isDropdownOpen" class="tag-container">
-          <button
-            v-for="tag in tags"
-            :key="tag"
-            @click="toggleTag(tag)"
-            :class="{ active: selectedTags.includes(tag) }"
-          >
-            {{ tag }}
-          </button>
+          <div
+              v-for="tag in tags"
+              :key="tag"
+              @click="toggleTag(tag)"
+              :class="{ active: selectedTags.includes(tag) }"
+              class="tag-item"
+            >
+              {{ tag }}
+            </div>
         </div>
       </div>
     </div>
@@ -105,14 +106,14 @@
         <div class="image-card" v-for="(image, index) in images" :key="index">
           <div class="image-preview-card">
             <img :src="image.previewUrl" :alt="image.name" class="image-preview" />
-            <button @click="removeImage(index)" class="delete-image-btn">X</button>
+            <div @click="removeImage(index)" class="delete-image-btn">X</div>
           </div>
         </div>
       </div>
     </div>  
     
     <div class="button-container">
-        <button @click="saveData" class="save-button">저장하기</button>
+      <div @click="saveData" class="save-button">저장하기</div>
       </div>
       <MainFooter />
    </div> 
@@ -183,7 +184,7 @@ textarea {
   font-size: 12px;
 }
 
-button {
+.tag-item {
   display: inline-block;
   margin: 3px;
   padding: 5px 10px;
@@ -191,12 +192,18 @@ button {
   background-color: white;
   transition: background-color 0.3s;
   border: 1px solid #eec092;
+  cursor: pointer;
 }
 
-button.active {
+.tag-item.active {
   background-color: #f6b87a;
 }
 
+.tag-item:hover {
+  background-color: #f6b87a; 
+  cursor: pointer;
+}
+
 /* 분야 설정 박스 */
 .category-box {
   background-color: white;
@@ -236,12 +243,14 @@ button.active {
   font-size: 0.875rem;  
   font-weight: 500;  
   border-radius: 9999px; 
+  text-align: center;
   transition: background-color 0.3s ease;
   margin-bottom: 20px;
 }
 
 .save-button:hover {
   background-color: #e5a769;
+  cursor: pointer;
 }
 
 h3 {
diff --git a/src/views/akopolio/detail/akopolioDetail.vue b/src/views/akopolio/detail/akopolioDetail.vue
index e53ee7d..3720fc6 100644
--- a/src/views/akopolio/detail/akopolioDetail.vue
+++ b/src/views/akopolio/detail/akopolioDetail.vue
@@ -4,11 +4,11 @@
     <div class="detail-header">
       <div class="header-content">
         <div class="action-buttons">
-          <button class="edit-button" @click="editPortfolio">수정하기</button>
-          <button class="delete-button" @click="handleDeletePortfolio">
+          <div class="edit-button" @click="editPortfolio">수정하기</div>
+          <div class="delete-button" @click="handleDeletePortfolio">
             삭제하기
             <img src="@/assets/images/trash.svg" alt="Delete File" class="delete-file-icon" />
-          </button>
+          </div>
         </div>
       </div>
     </div>
@@ -17,11 +17,11 @@
     <div class="activity-info">
       <div class="row activity-box">
         <h2>활동명</h2>
-        <p>{{ portfolio ? portfolio.title : '' }}</p>
+        <p>{{ portfolio ? portfolio.name : '' }}</p>
       </div>
     <div class="row activity-box activity-date">
       <h2>활동일</h2>
-      <p>{{ portfolio ? portfolio.createdDate : '' }}</p>
+      <p>{{ portfolio ? portfolio.startDate : '' }}</p>
     </div>
       <div class="row activity-box">
         <h2>분야 설정</h2>
@@ -36,22 +36,22 @@
     <!-- STAR 모델 정보 표시 -->
     <div class="experience-container">
       <h2>경험 (STAR)</h2>
-      <div v-if="portfolio && portfolio.star">
+      <div v-if="portfolio && portfolio.experience">
         <div class="star-section">
           <h3>Situation</h3>
-          <p>{{ portfolio.star.situation || '상황 정보가 없습니다.' }}</p>
+          <p>{{ portfolio.experience.situation || '상황 정보가 없습니다.' }}</p>
         </div>
         <div class="star-section">
           <h3>Task</h3>
-          <p>{{ portfolio.star.task || '내용이 없습니다.' }}</p>
+          <p>{{ portfolio.experience.task || '내용이 없습니다.' }}</p>
         </div>
         <div class="star-section">
           <h3>Action</h3>
-          <p>{{ portfolio.star.action || '내용이 없습니다.' }}</p>
+          <p>{{ portfolio.experience.action || '내용이 없습니다.' }}</p>
         </div>
         <div class="star-section">
           <h3>Result</h3>
-          <p>{{ portfolio.star.result || '내용이 없습니다.' }}</p>
+          <p>{{ portfolio.experience.result || '내용이 없습니다.' }}</p>
         </div>
       </div>
       <div v-else>
@@ -122,24 +122,29 @@
 .edit-button,
 .delete-button {
   display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 5px 10px;
   border-radius: 10px;
-  border: none;
   cursor: pointer;
   font-size: 10px;
   gap: 4px;
+  background-color: white; 
 }
 
 .edit-button {
-  background-color: white;
   color: black;
 }
 
 .delete-button {
-  background-color: white;
   color: red;
 }
 
+.edit-button:hover,
+.delete-button:hover {
+  background-color: #f2eeee;
+}
+
 .image-upload-container,
 .experience-container,
 .pmi-container {
diff --git a/src/views/akopolio/detail/detail.js b/src/views/akopolio/detail/detail.js
index f916125..e77ef83 100644
--- a/src/views/akopolio/detail/detail.js
+++ b/src/views/akopolio/detail/detail.js
@@ -51,16 +51,19 @@ export default {
 
     console.log("Portfolio ID:", portfolioId);
 
-    // 포트폴리오 데이터 가져오기
-    const fetchPortfolioById = async (portfolioId) => {
-      try {
-        const apiUrl = `${process.env.VUE_APP_BE_API_URL}/api/portfolios/${portfolioId}`;
-        console.log('Fetching portfolio from URL:', apiUrl); // API URL 출력
-
-        // Fetch 요청
-        const response = await fetch(apiUrl);
-        console.log('Response status:', response.status); // 상태 코드 확인
-
+        // 포트폴리오 데이터 가져오기
+        const fetchPortfolioById = async (portfolioId) => {
+          try {
+            const apiUrl = `${process.env.VUE_APP_BE_API_URL}/api/portfolios/${portfolioId}`
+            console.log('Fetching portfolio from URL:', apiUrl) // API URL 출력
+
+            // Fetch 요청
+            const response = await fetch(apiUrl, {
+              method: 'GET',
+              credentials: 'include'
+            })
+            console.log('Response status:', response.status) // 상태 코드 확인
+            
         if (!response.ok) {
           console.error(`Response status: ${response.status}, ${response.statusText}`);
           // 예외 처리를 통해 사용자에게 상세한 에러 메시지 제공
@@ -78,21 +81,20 @@ export default {
         // 응답 데이터 확인
         console.log('Received portfolio data:', data);
 
-        // 포트폴리오 데이터를 구조에 맞게 저장
         portfolio.value = {
-          baseInfo: data.baseInfo || {}, // 기본 정보 저장
-          experience: data.experience || {}, // 경험 정보 저장
-          pmi: data.pmi || {}, // PMI 정보 저장
-          photoUrls: data.photoUrls || [], // 사진 URL 배열 저장
+          name: data.baseInfo.name,          // 활동명
+          startDate: data.baseInfo.startDate, // 활동일
+          tags: data.baseInfo.tags || [],     // 태그 
+          experience: data.experience || { situation: '', task: '', action: '', result: '' }, 
+          pmi: data.pmi || { plus: '', minus: '', interesting: '' },
+          photoUrls: data.photoUrls || [],    // 이미지 
         };
 
-        // 이미지 데이터 따로 저장
-        images.value = portfolio.value.photoUrls;
-
+        images.value = data.photoUrls || [];
       } catch (error) {
         console.error('Error fetching portfolio:', error);
         alert('포트폴리오를 가져오는 중 오류가 발생했습니다.');
-        portfolio.value = null; // 오류 발생 시 초기화
+        portfolio.value = null;
         images.value = [];
       }
     };
@@ -109,8 +111,11 @@ export default {
           // 백엔드 API 연동
           const response = await fetch(
             `${process.env.VUE_APP_BE_API_URL}/api/portfolios/${portfolioId}`,
-            { method: 'DELETE' }
-          );
+            {
+              method: 'DELETE',
+              credentials: 'include'
+            }
+          )
 
           if (!response.ok) {
             throw new Error(`Failed to delete portfolio: ${response.statusText}`);
@@ -139,4 +144,4 @@ export default {
       handleDeletePortfolio,
     };
   },
-};
+};
\ No newline at end of file
diff --git a/src/views/akopolio/main/akopolioMain.vue b/src/views/akopolio/main/akopolioMain.vue
index 8f6d145..74b2264 100644
--- a/src/views/akopolio/main/akopolioMain.vue
+++ b/src/views/akopolio/main/akopolioMain.vue
@@ -10,7 +10,7 @@
             @input="applyFilters" 
             placeholder="활동명을 입력하세요 (두 글자 이상)"
           />
-          <button class="reset-btn" @click="resetFilters">초기화</button>
+          <div class="reset-btn" @click="resetFilters">초기화</div>
         </div>
         <div class="date-picker">
           <input type="date" v-model="startDate" @input="applyFilters" />
@@ -33,14 +33,14 @@
         </label>
 
         <div v-show="isDropdownOpen" class="tag-container">
-          <button
+          <div
             v-for="tag in tags"
             :key="tag"
             @click="toggleTag(tag)"
             :class="{ active: selectedTags.includes(tag) }"
           >
             {{ tag }}
-          </button>
+          </div>
         </div>
       </div>
     </div>
@@ -75,13 +75,13 @@
       @change-page="handlePageChanged"
     />
 
-    <button class="floating-btn" @click="goToCreatePage">
+    <div class="floating-btn" @click="goToCreatePage">
       <img
         class="logo"
         :src="require('@/assets/images/AddFile.svg')"
         alt="Akoming Logo"
       />
-    </button>
+    </div>
 
 
     <MainFooter />
@@ -153,7 +153,7 @@ input[type='date'] {
   font-size: 12px;
 }
 
-button {
+.tag-container div {
   display: inline-block;
   margin: 3px;
   padding: 5px 10px;
@@ -161,12 +161,18 @@ button {
   background-color: white;
   transition: background-color 0.3s;
   border: 1px solid #eec092;
+  cursor: pointer;
 }
 
-button.active {
+.tag-container div.active {
   background-color: #f6b87a;
 }
 
+.tag-container div:hover {
+  background-color: #f6b87a; 
+  cursor: pointer;
+}
+
 .filter-container {
   background-color: white;
   padding: 15px;
@@ -284,12 +290,11 @@ button.active {
   margin-left: 10px; /* 오른쪽 여백 */
   background-color: #f4b28c;
   color: black;
-  border: none;
   padding: 6px 11px;
   border-radius: 5px;
   cursor: pointer;
   font-size: 13px;
-  border-radius: 8px;
+  text-align: center;
 }
 
 .reset-btn:hover {
diff --git a/src/views/akopolio/main/main.js b/src/views/akopolio/main/main.js
index 6c6a72b..cbecde1 100644
--- a/src/views/akopolio/main/main.js
+++ b/src/views/akopolio/main/main.js
@@ -45,6 +45,7 @@ export default {
     };
   },
   computed: {
+
     filteredPortfolioList() {
       let filteredList = this.portfolioList;
 
diff --git a/src/views/akopolio/paginationNav.vue b/src/views/akopolio/paginationNav.vue
index 8b3cdc3..8730f06 100644
--- a/src/views/akopolio/paginationNav.vue
+++ b/src/views/akopolio/paginationNav.vue
@@ -1,21 +1,27 @@
 <template>
   <div class="pagination">
-    <button @click="changePage(currentPage - 1)" :disabled="currentPage === 1">
+    <div 
+      class="page-item" 
+      @click="changePage(currentPage - 1)" 
+      :class="{ disabled: currentPage === 1 }">
       &lt;
-    </button>
+    </div>
 
-    <!-- 페이지 번호 표시 -->
-    <button 
+    <div 
+      class="page-item" 
       v-for="page in visiblePages" 
       :key="page" 
-      @click="changePage(page)"
-      :class="{ 'active': page === currentPage }">
+      @click="changePage(page)" 
+      :class="{ active: page === currentPage }">
       {{ page }}
-    </button>
+    </div>
 
-    <button @click="changePage(currentPage + 1)" :disabled="currentPage === totalPages">
+    <div 
+      class="page-item" 
+      @click="changePage(currentPage + 1)" 
+      :class="{ disabled: currentPage === totalPages }">
       &gt;
-    </button>
+    </div>
   </div>
 </template>
 
@@ -28,11 +34,10 @@ export default {
   computed: {
     visiblePages() {
       const pages = [];
-      const maxVisible = 5; // 최대 표시할 페이지 수
+      const maxVisible = 5; 
       let startPage = Math.max(1, this.currentPage - Math.floor(maxVisible / 2));
       let endPage = Math.min(this.totalPages, startPage + maxVisible - 1);
 
-      // 끝 페이지가 부족할 때 시작 페이지 조정
       if (endPage - startPage < maxVisible - 1) {
         startPage = Math.max(1, endPage - maxVisible + 1);
       }
@@ -60,21 +65,25 @@ export default {
   margin-top: 20px;
 }
 
-button {
+.page-item {
   margin: 0 5px;
   padding: 5px;
-  cursor: pointer;
-  background: none;
-  border: none;
   font-size: 16px;
+  cursor: pointer;
+  user-select: none;
 }
 
-button.active{
+.page-item.active {
   font-weight: bold;
 }
 
-button:disabled {
+.page-item.disabled {
   cursor: not-allowed;
   opacity: 0.5;
 }
-</style>
\ No newline at end of file
+
+.page-item:not(.disabled):hover {
+  background-color: none;
+}
+
+</style>
diff --git a/src/views/calendar/CalendarMainScript.js b/src/views/calendar/CalendarMainScript.js
index bf3958e..27eb27a 100644
--- a/src/views/calendar/CalendarMainScript.js
+++ b/src/views/calendar/CalendarMainScript.js
@@ -1,4 +1,4 @@
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed } from 'vue'
 import axios from 'axios'
 import {
   format,
@@ -20,41 +20,32 @@ export const isScheduleOpen = ref(false)
 export const currentYear = computed(() => format(currentDate.value, 'yyyy'))
 export const currentMonth = computed(() => format(currentDate.value, 'M'))
 
-// 임시 학사 일정 데이터
-const temporaryEvents = [
-  { title: '개강일', startDate: '2024-03-01', endDate: '2024-03-01' },
-  { title: '종강일', startDate: '2024-06-30', endDate: '2024-06-30' },
-  { title: '중간고사', startDate: '2024-04-15', endDate: '2024-04-19' },
-  { title: '기말고사', startDate: '2024-06-15', endDate: '2024-06-19' },
-  { title: '중간고사', startDate: '2024-10-21', endDate: '2024-10-25' }
-]
-
 // 학사 일정 데이터 저장소
 export const academicEvents = ref([])
 
 // 백엔드에서 학사 일정 가져오기
 export const fetchAcademicEvents = async () => {
   try {
-    console.log(
-      'API 요청 URL:',
-      `${process.env.VUE_APP_BE_API_URL}/api/calendar`
-    )
-    const response = await axios.get(
-      `${process.env.VUE_APP_BE_API_URL}/api/calendar`,
-      {
-        params: {
-          year: currentYear.value,
-          month: currentMonth.value
-        }
-      }
-    )
-    academicEvents.value = response.data || []
+    const apiUrl = `${process.env.VUE_APP_BE_API_URL}/api/academic-events/${currentYear.value}/${currentMonth.value}`
+    console.log('API 요청 URL:', apiUrl)
+
+    const response = await axios.get(apiUrl)
+
+    if (response.status === 200 && response.data) {
+      academicEvents.value = response.data.map((event) => ({
+        title: event.eventTitle,
+        department: event.department,
+        startDate: event.startDate,
+        endDate: event.endDate
+      }))
+      console.log('학사 일정 데이터:', academicEvents.value)
+    } else {
+      console.warn('학사 일정 데이터를 가져오는 데 실패했습니다.')
+      academicEvents.value = []
+    }
   } catch (error) {
-    console.log(
-      '서버에 연결할 수 없어 임시 데이터를 사용합니다:',
-      error.message
-    )
-    academicEvents.value = [...temporaryEvents]
+    console.error('학사 일정 데이터 가져오기 오류:', error.message)
+    academicEvents.value = []
   }
 }
 
@@ -106,12 +97,15 @@ export const hasEvent = (day) => {
   const selectedDateStr = `${currentYear.value}-${String(
     currentMonth.value
   ).padStart(2, '0')}-${String(day).padStart(2, '0')}`
-  return academicEvents.value.some((event) =>
+
+  const result = academicEvents.value.some((event) =>
     isWithinInterval(parseISO(selectedDateStr), {
       start: parseISO(event.startDate),
       end: parseISO(event.endDate)
     })
   )
+
+  return result
 }
 
 export const selectedEvents = computed(() => {
diff --git a/src/views/calendar/CalendarMainView.vue b/src/views/calendar/CalendarMainView.vue
index bf39f61..2f3c6ca 100644
--- a/src/views/calendar/CalendarMainView.vue
+++ b/src/views/calendar/CalendarMainView.vue
@@ -85,7 +85,8 @@ onMounted(() => {
               class="day-button"
               :class="{
                 selected: day === selectedDay,
-                'sunday-saturday': isSundayOrSaturday(day)
+                'sunday-saturday': isSundayOrSaturday(day),
+                'has-event': hasEvent(day)
               }"
               v-for="day in week"
               :key="day"
@@ -100,7 +101,16 @@ onMounted(() => {
           class="schedule-popup"
           v-if="isScheduleOpen && selectedEvents.length > 0"
         >
-          <!-- 학사 일정 내용 -->
+          <div class="popup-header">
+            <h2>학사 일정</h2>
+            <button class="close-button" @click="closeSchedule">×</button>
+          </div>
+          <div class="popup-content">
+            <div v-for="event in selectedEvents" :key="event.title">
+              <p>{{ event.title }}</p>
+              <p>{{ formatDateRange(event.startDate, event.endDate) }}</p>
+            </div>
+          </div>
         </div>
 
         <div>
@@ -219,7 +229,7 @@ onMounted(() => {
 
 .schedule-popup {
   position: fixed;
-  bottom: 0;
+  bottom: -100%; /* 시작 위치: 화면 아래 */
   left: 0;
   right: 0;
   background-color: #ffffff;
@@ -229,6 +239,9 @@ onMounted(() => {
   max-height: 60vh;
   width: 395px;
   margin: 0 auto;
+  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
+  animation: slide-up 0.3s ease-out forwards; /* 부드러운 위로 이동 애니메이션 */
+  z-index: 1000;
 }
 
 .link-button {
@@ -252,4 +265,56 @@ onMounted(() => {
 .link-button:hover {
   background-color: #f1cdb1;
 }
+.day-button.has-event::after {
+  content: '';
+  display: block;
+  width: 6px;
+  height: 6px;
+  background-color: #b3b3b3;
+  border-radius: 50%;
+  margin: 0 auto;
+  margin-top: 4px;
+}
+
+@keyframes slide-up {
+  from {
+    bottom: -100%; /* 초기 상태 */
+  }
+  to {
+    bottom: 0; /* 최종 상태 */
+  }
+}
+
+.popup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+}
+
+.popup-header h2 {
+  font-size: 1.25rem;
+  font-weight: bold;
+  color: #4a4a4a;
+}
+
+.close-button {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #b3b3b3;
+  cursor: pointer;
+  transition: color 0.3s;
+}
+
+.close-button:hover {
+  color: #ff7f00;
+}
+
+.popup-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
 </style>
diff --git a/src/views/mainpage/MainpageStyled.css b/src/views/mainpage/MainpageStyled.css
deleted file mode 100644
index 26690ee..0000000
--- a/src/views/mainpage/MainpageStyled.css
+++ /dev/null
@@ -1,130 +0,0 @@
-/* 외부 컨테이너 */
-.page-container {
-  min-height: 100vh;
-  background-color: #fff9f2;
-  font-family: 'NanumSquareRound', sans-serif;
-  display: flex;
-  justify-content: center;
-}
-
-/* 모바일 컨테이너 */
-.mobile-container {
-  width: 395px;
-  min-width: 340px;
-  background-color: #fae8da;
-  min-height: 100vh;
-  position: relative;
-  overflow-y: auto;
-}
-
-/* 메인 컨텐츠 */
-.main-content {
-  display: flex;
-  flex-direction: column;
-  padding: 6rem 1.5rem 6rem;
-  font-family: 'NanumSquareRound', sans-serif;
-}
-
-.main-content .title {
-  margin-bottom: 70px;
-  font-size: 1.25rem;
-  font-weight: 500;
-  text-align: center;
-  color: #4a4a4a;
-  font-family: 'UhBeeSehyun', sans-serif;
-}
-
-/* 스탬프 영역 */
-.stamp-container {
-  position: relative;
-  width: 390px;
-  height: 520px;
-  margin: 0 auto;
-}
-
-.stamp-container .stamp {
-  position: absolute;
-  width: 95px;
-  height: 95px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.stamp-container .stamp img {
-  width: 100%;
-  height: 100%;
-}
-
-/* 할 일 표시 영역 */
-.task-container {
-  margin-top: -80px;
-  margin-bottom: 3rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 0.75rem;
-}
-
-.task-container .task-row {
-  display: flex;
-  gap: 0.75rem;
-  width: 100%;
-  max-width: 290px;
-}
-
-.task-container .task-row .task {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex: 1;
-  height: 40px;
-  padding: 0 1rem;
-  background-color: white;
-  border-radius: 17px;
-}
-
-.task-container .task-row .task span {
-  font-size: 0.875rem;
-  font-family: 'NanumSquareRound', sans-serif;
-  color: var(--task-color, #b3b3b3);
-}
-
-.task-container .task-row .task img {
-  width: 20px;
-  height: 20px;
-  filter: var(--task-filter, grayscale(100%));
-}
-
-/* 아코 이미지 영역 */
-.ako-image-container {
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  margin-top: 2.5rem;
-}
-
-.ako-image-container .ako-status {
-  display: flex;
-  align-items: center;
-  margin-bottom: 0.5rem;
-}
-
-.ako-image-container .ako-status img {
-  width: 32px;
-  height: 32px;
-  margin-right: 0.5rem;
-}
-
-.ako-image-container .ako-status p {
-  font-size: 0.875rem;
-  color: #757575;
-  font-family: 'NanumSquareRound', sans-serif;
-}
-
-.ako-image-container .ako-image {
-  width: 256px;
-  height: 256px;
-  margin: 0 auto;
-}
diff --git a/src/views/mainpage/MainpageView.vue b/src/views/mainpage/MainpageView.vue
index eab74ce..86f1d7a 100644
--- a/src/views/mainpage/MainpageView.vue
+++ b/src/views/mainpage/MainpageView.vue
@@ -49,7 +49,12 @@
               }"
             >
               <span>{{ task.name }}</span>
-              <img :src="getTaskIcon(task.name)" />
+              <img
+                :src="getTaskIcon(task.name)"
+                :style="{
+                  filter: task.completed ? 'none' : 'grayscale(100%)'
+                }"
+              />
             </div>
           </div>
           <div class="task-row">
@@ -63,7 +68,12 @@
               }"
             >
               <span>{{ task.name }}</span>
-              <img :src="getTaskIcon(task.name)" />
+              <img
+                :src="getTaskIcon(task.name)"
+                :style="{
+                  filter: task.completed ? 'none' : 'grayscale(100%)'
+                }"
+              />
             </div>
           </div>
         </div>
@@ -88,7 +98,6 @@
 
 <script setup>
 import { ref, onMounted } from 'vue'
-import axios from 'axios'
 import MainHeader from '@/components/layout/Header.vue'
 import MainFooter from '@/components/layout/Footer.vue'
 import attendanceIcon from '@/assets/Icons/akoming/todo/attendance.svg'
@@ -104,22 +113,6 @@ const tasks = ref([
   { name: '아코폴리오', completed: false }
 ])
 
-// 각 퀘스트의 상태를 받아와서 tasks에 업데이트하는 함수
-const fetchQuestStatus = async () => {
-  try {
-    const userId = 'user-id'
-    const response = await axios.get(`/api/quests/${userId}`)
-    const { quest1, quest2, quest3, quest4 } = response.data
-
-    tasks.value[0].completed = quest1
-    tasks.value[1].completed = quest2
-    tasks.value[2].completed = quest3
-    tasks.value[3].completed = quest4
-  } catch (error) {
-    console.error('퀘스트 상태를 가져오는 중 오류 발생:', error)
-  }
-}
-
 // 스탬프 상태 정의
 const stamps = ref([
   { label: 'A', completed: false, position: { top: '-18px', left: '12px' } },
@@ -131,52 +124,39 @@ const stamps = ref([
   { label: 'G', completed: false, position: { top: '297px', left: '237px' } }
 ])
 
-// 각 스탬프의 상태를 받아와서 stamps에 업데이트하는 함수
-const fetchStampsStatus = async () => {
+// 기본 아코 이미지 설정
+const akoImage = ref(require('@/assets/Icons/akoming/mainpage/ako-01.svg'))
+
+// 퀘스트와 스탬프 상태를 업데이트하는 함수
+const fetchQuestStatus = async () => {
   try {
-    const userId = 'user-id'
-    const response = await axios.get(`/api/quests/${userId}`)
-    const { stamp1, stamp2, stamp3, stamp4, stamp5, stamp6, stamp7 } =
-      response.data
-
-    stamps.value[0].completed = stamp1
-    stamps.value[1].completed = stamp2
-    stamps.value[2].completed = stamp3
-    stamps.value[3].completed = stamp4
-    stamps.value[4].completed = stamp5
-    stamps.value[5].completed = stamp6
-    stamps.value[6].completed = stamp7
-  } catch (error) {
-    console.error('스탬프 상태를 가져오는 중 오류 발생:', error)
-  }
-}
+    const response = await fetch(
+      `${process.env.VUE_APP_BE_API_URL}/api/quests/status`,
+      {
+        method: 'GET',
+        credentials: 'include',
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      }
+    )
+    if (!response.ok) throw new Error('Failed to fetch quest status')
 
-// 아코 이미지 경로 저장할 변수
-const elephantIcons = [
-  '@/assets/Icons/akoming/mainpage/ako-01.svg',
-  '@/assets/Icons/akoming/mainpage/ako-02.svg',
-  '@/assets/Icons/akoming/mainpage/ako-03.svg',
-  '@/assets/Icons/akoming/mainpage/ako-04.svg',
-  '@/assets/Icons/akoming/mainpage/ako-05.svg',
-  '@/assets/Icons/akoming/mainpage/ako-06.svg'
-]
-const akoImage = ref(elephantIcons[0])
+    const { questStatus, stampCount } = await response.json()
 
-// Level에 따른 아코 이미지 설정 함수
-const setElephantIconByLevel = async () => {
-  try {
-    const response = await axios.get('/api/goals')
-    const level = response.data.level
-
-    if (level >= 1 && level <= 6) {
-      akoImage.value = elephantIcons[level - 1]
-    } else {
-      console.warn('유효한 level 값이 아닙니다:', level)
-      akoImage.value = elephantIcons[0]
-    }
+    // 퀘스트 상태 업데이트
+    tasks.value[0].completed = questStatus.attended
+    tasks.value[1].completed = questStatus.goalWritten
+    tasks.value[2].completed = questStatus.commentedOnFriendGoal
+    tasks.value[3].completed = questStatus.portfolioWritten
+    console.log('Updated tasks:', tasks.value) // 확인용 로그
+
+    // 스탬프 상태 업데이트
+    stamps.value.forEach((stamp, index) => {
+      stamp.completed = index < stampCount
+    })
   } catch (error) {
-    console.error('아코 이미지를 가져오는 중 오류 발생:', error)
-    akoImage.value = elephantIcons[0]
+    console.error('퀘스트 상태를 가져오는 중 오류 발생:', error)
   }
 }
 
@@ -207,9 +187,138 @@ const getTaskIcon = (taskName) => {
 // onMounted에서 호출하여 초기 데이터 로드
 onMounted(() => {
   fetchQuestStatus()
-  fetchStampsStatus()
-  setElephantIconByLevel()
 })
 </script>
 
-<style scoped src="./MainpageStyled.css"></style>
+<style scoped>
+/* 외부 컨테이너 */
+.page-container {
+  min-height: 100vh;
+  background-color: #fff9f2;
+  font-family: 'NanumSquareRound', sans-serif;
+  display: flex;
+  justify-content: center;
+}
+
+/* 모바일 컨테이너 */
+.mobile-container {
+  width: 395px;
+  min-width: 340px;
+  background-color: #fae8da;
+  min-height: 100vh;
+  position: relative;
+  overflow-y: auto;
+}
+
+/* 메인 컨텐츠 */
+.main-content {
+  display: flex;
+  flex-direction: column;
+  padding: 6rem 1.5rem 6rem;
+  font-family: 'NanumSquareRound', sans-serif;
+}
+
+.main-content .title {
+  margin-bottom: 70px;
+  font-size: 1.25rem;
+  font-weight: 500;
+  text-align: center;
+  color: #4a4a4a;
+  font-family: 'UhBeeSehyun', sans-serif;
+}
+
+/* 스탬프 영역 */
+.stamp-container {
+  position: relative;
+  width: 390px;
+  height: 520px;
+  margin: 0 auto;
+}
+
+.stamp-container .stamp {
+  position: absolute;
+  width: 95px;
+  height: 95px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.stamp-container .stamp img {
+  width: 100%;
+  height: 100%;
+}
+
+/* 할 일 표시 영역 */
+.task-container {
+  margin-top: -80px;
+  margin-bottom: 3rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.task-container .task-row {
+  display: flex;
+  gap: 0.75rem;
+  width: 100%;
+  max-width: 290px;
+}
+
+.task-container .task-row .task {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+  height: 40px;
+  padding: 0 1rem;
+  background-color: white;
+  border-radius: 17px;
+}
+
+.task-container .task-row .task span {
+  font-size: 0.875rem;
+  font-family: 'NanumSquareRound', sans-serif;
+  color: var(--task-color, #b3b3b3);
+}
+
+.task-container .task-row .task img {
+  width: 20px;
+  height: 20px;
+  filter: var(--task-filter, grayscale(100%));
+}
+
+/* 아코 이미지 영역 */
+.ako-image-container {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 2.5rem;
+}
+
+.ako-image-container .ako-status {
+  display: flex;
+  align-items: center;
+  margin-bottom: 0.5rem;
+}
+
+.ako-image-container .ako-status img {
+  width: 32px;
+  height: 32px;
+  margin-right: 0.5rem;
+}
+
+.ako-image-container .ako-status p {
+  font-size: 0.875rem;
+  color: #757575;
+  font-family: 'NanumSquareRound', sans-serif;
+}
+
+.ako-image-container .ako-image {
+  width: 256px;
+  height: 256px;
+  margin: 0 auto;
+}
+</style>
diff --git a/src/views/test/AboutView.vue b/src/views/test/AboutView.vue
deleted file mode 100644
index 3fa2807..0000000
--- a/src/views/test/AboutView.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
diff --git a/src/views/test/ErrorMessage.vue b/src/views/test/ErrorMessage.vue
deleted file mode 100644
index 95385a2..0000000
--- a/src/views/test/ErrorMessage.vue
+++ /dev/null
@@ -1,30 +0,0 @@
-<!-- src/components/ErrorMessage.vue -->
-<template>
-  <transition
-    enter-active-class="transition ease-out duration-300"
-    enter-from-class="opacity-0 -translate-y-2"
-    enter-to-class="opacity-100 translate-y-0"
-    leave-active-class="transition ease-in duration-200"
-    leave-from-class="opacity-100 translate-y-0"
-    leave-to-class="opacity-0 -translate-y-2"
-  >
-    <p v-if="errorMessage" class="mt-2 text-sm text-red-600 font-medium">
-      {{ errorMessage }}
-    </p>
-  </transition>
-</template>
-
-<script>
-export default {
-  props: {
-    errorMessage: {
-      type: String,
-      default: ''
-    }
-  }
-}
-</script>
-
-<style scoped>
-/* 컴포넌트 스타일을 여기서 정의할 수 있습니다 */
-</style>
diff --git a/src/views/test/HelloWorld.vue b/src/views/test/HelloWorld.vue
deleted file mode 100644
index 75cbd09..0000000
--- a/src/views/test/HelloWorld.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br />
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
-        >vue-cli documentation</a
-      >.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel"
-          target="_blank"
-          rel="noopener"
-          >babel</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa"
-          target="_blank"
-          rel="noopener"
-          >pwa</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
-          target="_blank"
-          rel="noopener"
-          >router</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-vuex"
-          target="_blank"
-          rel="noopener"
-          >vuex</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
-          target="_blank"
-          rel="noopener"
-          >eslint</a
-        >
-      </li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li>
-        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
-      </li>
-      <li>
-        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
-          >Forum</a
-        >
-      </li>
-      <li>
-        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
-          >Community Chat</a
-        >
-      </li>
-      <li>
-        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
-          >Twitter</a
-        >
-      </li>
-      <li>
-        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
-      </li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li>
-        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
-          >vue-router</a
-        >
-      </li>
-      <li>
-        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/vue-devtools#vue-devtools"
-          target="_blank"
-          rel="noopener"
-          >vue-devtools</a
-        >
-      </li>
-      <li>
-        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
-          >vue-loader</a
-        >
-      </li>
-      <li>
-        <a
-          href="https://github.com/vuejs/awesome-vue"
-          target="_blank"
-          rel="noopener"
-          >awesome-vue</a
-        >
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
diff --git a/src/views/test/HomeView.vue b/src/views/test/HomeView.vue
deleted file mode 100644
index 270fa07..0000000
--- a/src/views/test/HomeView.vue
+++ /dev/null
@@ -1,18 +0,0 @@
-<template>
-  <div class="home">
-    <!-- <img alt="Vue logo" src="../assets/logo.png" /> -->
-    <HelloWorld msg="Welcome to Your Vue.js App" />
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-import HelloWorld from '@/views/test/HelloWorld.vue'
-
-export default {
-  name: 'HomeView',
-  components: {
-    HelloWorld
-  }
-}
-</script>
diff --git a/src/views/test/NotFound2.vue b/src/views/test/NotFound2.vue
deleted file mode 100644
index c971c97..0000000
--- a/src/views/test/NotFound2.vue
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- src/views/NotFound.vue -->
-<template>
-  <div class="min-h-screen flex items-center justify-center bg-gray-100">
-    <div class="text-center">
-      <h1 class="text-6xl font-bold text-gray-800 mb-4">404</h1>
-      <p class="text-xl text-gray-600 mb-8">페이지를 찾을 수 없습니다</p>
-      <router-link
-        to="/auth/signin"
-        class="px-6 py-3 bg-gray-800 text-white rounded-md hover:bg-gray-700 transition duration-300 ease-in-out"
-      >
-        홈으로 돌아가기
-      </router-link>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'NotFound'
-}
-</script>
-
-<style>
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap');
-
-body {
-  font-family: 'Noto Sans KR', sans-serif;
-}
-</style>
diff --git a/src/views/test/PortfolioByTag.vue b/src/views/test/PortfolioByTag.vue
deleted file mode 100644
index e9cd24a..0000000
--- a/src/views/test/PortfolioByTag.vue
+++ /dev/null
@@ -1,165 +0,0 @@
-<template>
-  <div
-    class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-6 flex flex-col justify-center sm:py-12 font-sans"
-  >
-    <div class="relative py-3 sm:max-w-xl sm:mx-auto w-full px-4 sm:px-0">
-      <div
-        class="absolute inset-0 bg-gradient-to-r from-gray-600 to-black shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"
-      ></div>
-      <div
-        class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20"
-      >
-        <h2 class="text-3xl font-bold text-center text-gray-900 mb-8">
-          태그로 검색
-        </h2>
-
-        <div class="mb-6">
-          <label
-            for="searchTag"
-            class="block text-sm font-medium text-gray-700 mb-2"
-            >검색할 태그</label
-          >
-          <div class="mt-1 flex rounded-md shadow-sm">
-            <input
-              id="searchTag"
-              v-model="searchTag"
-              type="text"
-              placeholder="검색할 태그를 입력하세요"
-              class="flex-1 min-w-0 block w-full px-3 py-2 rounded-l-md focus:outline-none focus:ring-black focus:border-black sm:text-sm border border-gray-300 text-gray-900"
-            />
-            <button
-              @click="searchPortfolios"
-              class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-r-md shadow-sm text-white bg-black hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black transition duration-150 ease-in-out"
-            >
-              검색
-            </button>
-          </div>
-        </div>
-
-        <div v-if="filteredPortfolios.length > 0" class="space-y-6">
-          <h3 class="text-xl font-semibold text-gray-900">검색 결과</h3>
-          <ul class="space-y-4">
-            <li
-              v-for="portfolio in filteredPortfolios"
-              :key="portfolio.id"
-              class="bg-gray-50 rounded-lg p-4 shadow-sm"
-            >
-              <h4 class="text-lg font-medium text-gray-900 mb-2">
-                {{ portfolio.title }}
-              </h4>
-              <p class="text-gray-600 mb-2">{{ portfolio.content }}</p>
-              <div class="flex flex-wrap gap-2">
-                <span
-                  v-for="(tag, index) in portfolio.tags"
-                  :key="index"
-                  :style="{
-                    backgroundColor: pastelColors[index % pastelColors.length],
-                    color: getContrastColor(
-                      pastelColors[index % pastelColors.length]
-                    )
-                  }"
-                  class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium"
-                >
-                  {{ tag }}
-                </span>
-              </div>
-            </li>
-          </ul>
-        </div>
-        <div v-else-if="searchPerformed" class="text-center text-gray-600 mt-6">
-          <p>해당 태그로 작성된 포트폴리오가 없습니다.</p>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive } from 'vue'
-
-const searchTag = ref('')
-const portfolios = reactive([
-  {
-    id: 1,
-    title: '포트폴리오 1',
-    content:
-      '이것은 첫 번째 포트폴리오의 내용입니다. JavaScript와 Vue.js를 사용한 프로젝트에 대한 설명이 포함되어 있습니다.',
-    tags: ['JavaScript', 'Vue']
-  },
-  {
-    id: 2,
-    title: '포트폴리오 2',
-    content:
-      '두 번째 포트폴리오는 HTML과 CSS를 사용한 반응형 웹 디자인 프로젝트에 관한 것입니다.',
-    tags: ['HTML', 'CSS']
-  },
-  {
-    id: 3,
-    title: '포트폴리오 3',
-    content:
-      '세 번째 포트폴리오는 Node.js와 Express를 사용한 백엔드 프로젝트를 소개합니다.',
-    tags: ['Node.js', 'Express', 'JavaScript']
-  }
-])
-const filteredPortfolios = ref([])
-const searchPerformed = ref(false)
-
-const pastelColors = [
-  '#FFB3BA',
-  '#FFDFBA',
-  '#FFFFBA',
-  '#BAFFC9',
-  '#BAE1FF',
-  '#FFC6FF',
-  '#FFADAD',
-  '#FFC6A5',
-  '#FDFFB6',
-  '#CAFFBF'
-]
-
-const searchPortfolios = () => {
-  searchPerformed.value = true
-  if (searchTag.value) {
-    filteredPortfolios.value = portfolios.filter((portfolio) =>
-      portfolio.tags.some((tag) =>
-        tag.toLowerCase().includes(searchTag.value.toLowerCase())
-      )
-    )
-  } else {
-    filteredPortfolios.value = []
-  }
-}
-
-const getContrastColor = (hexcolor) => {
-  const r = parseInt(hexcolor.substr(1, 2), 16)
-  const g = parseInt(hexcolor.substr(3, 2), 16)
-  const b = parseInt(hexcolor.substr(5, 2), 16)
-  const yiq = (r * 299 + g * 587 + b * 114) / 1000
-  return yiq >= 128 ? 'black' : 'white'
-}
-</script>
-
-<style>
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
-
-body {
-  font-family: 'Noto Sans KR', sans-serif;
-}
-
-.font-sans {
-  font-family: 'Noto Sans KR', sans-serif;
-}
-
-input,
-textarea,
-button {
-  font-family: 'Noto Sans KR', sans-serif;
-}
-
-h2,
-h3,
-h4 {
-  font-family: 'Noto Sans KR', sans-serif;
-  letter-spacing: -0.025em;
-}
-</style>
diff --git a/src/views/test/PortfolioCreate.vue b/src/views/test/PortfolioCreate.vue
deleted file mode 100644
index 3a39f9a..0000000
--- a/src/views/test/PortfolioCreate.vue
+++ /dev/null
@@ -1,202 +0,0 @@
-<template>
-  <div
-    class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-6 flex flex-col justify-center sm:py-12 font-sans"
-  >
-    <div class="relative py-3 sm:max-w-xl sm:mx-auto w-full px-4 sm:px-0">
-      <div
-        class="absolute inset-0 bg-gradient-to-r from-gray-600 to-black shadow-lg transform -skew-y-6 sm:skew-y-0 sm:-rotate-6 sm:rounded-3xl"
-      ></div>
-      <div
-        class="relative px-4 py-10 bg-white shadow-lg sm:rounded-3xl sm:p-20"
-      >
-        <h2 class="text-3xl font-bold text-center text-gray-900 mb-8">
-          포트폴리오 작성
-        </h2>
-
-        <form @submit.prevent="savePortfolio" class="space-y-6">
-          <div>
-            <label for="title" class="block text-sm font-medium text-gray-700"
-              >제목</label
-            >
-            <input
-              id="title"
-              v-model="title"
-              type="text"
-              placeholder="제목을 입력하세요"
-              required
-              class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-black focus:border-black text-gray-900"
-            />
-          </div>
-
-          <div>
-            <label for="content" class="block text-sm font-medium text-gray-700"
-              >내용</label
-            >
-            <textarea
-              id="content"
-              v-model="content"
-              placeholder="내용을 입력하세요"
-              rows="4"
-              required
-              class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-black focus:border-black text-gray-900"
-            ></textarea>
-          </div>
-
-          <div>
-            <label for="newTag" class="block text-sm font-medium text-gray-700"
-              >태그</label
-            >
-            <div class="mt-1 flex rounded-md shadow-sm">
-              <input
-                id="newTag"
-                v-model="newTag"
-                @keyup.enter="addTag"
-                type="text"
-                placeholder="태그를 입력 후 엔터를 눌러 추가하세요"
-                class="flex-1 min-w-0 block w-full px-3 py-2 rounded-l-md focus:outline-none focus:ring-black focus:border-black sm:text-sm border border-gray-300 text-gray-900"
-              />
-              <button
-                type="button"
-                @click="addTag"
-                class="inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 bg-gray-50 text-gray-500 sm:text-sm hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black"
-              >
-                추가
-              </button>
-            </div>
-          </div>
-
-          <div v-if="tags.length > 0" class="flex flex-wrap gap-2">
-            <span
-              v-for="(tag, index) in tags"
-              :key="index"
-              :style="{
-                backgroundColor: pastelColors[index % pastelColors.length],
-                color: getContrastColor(
-                  pastelColors[index % pastelColors.length]
-                )
-              }"
-              class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium"
-            >
-              {{ tag }}
-              <button
-                type="button"
-                @click="removeTag(index)"
-                class="ml-1 inline-flex items-center justify-center w-4 h-4 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black"
-              >
-                <span class="sr-only">태그 제거</span>
-                <svg
-                  class="h-3 w-3"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="2"
-                    d="M6 18L18 6M6 6l12 12"
-                  />
-                </svg>
-              </button>
-            </span>
-          </div>
-
-          <div class="flex items-center justify-end">
-            <button
-              type="submit"
-              class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-black hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black transition duration-150 ease-in-out"
-            >
-              저장
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive } from 'vue'
-
-const title = ref('')
-const content = ref('')
-const newTag = ref('')
-const tags = reactive([])
-
-const pastelColors = [
-  '#FFB3BA',
-  '#FFDFBA',
-  '#FFFFBA',
-  '#BAFFC9',
-  '#BAE1FF',
-  '#FFC6FF',
-  '#FFADAD',
-  '#FFC6A5',
-  '#FDFFB6',
-  '#CAFFBF'
-]
-
-const addTag = () => {
-  if (newTag.value && !tags.includes(newTag.value)) {
-    tags.push(newTag.value)
-    newTag.value = ''
-  }
-}
-
-const removeTag = (index) => {
-  tags.splice(index, 1)
-}
-
-const savePortfolio = () => {
-  if (title.value && content.value) {
-    const newPortfolio = {
-      id: Date.now(),
-      title: title.value,
-      content: content.value,
-      tags: [...tags]
-    }
-    console.log('포트폴리오 저장:', newPortfolio)
-    title.value = ''
-    content.value = ''
-    tags.splice(0, tags.length)
-  } else {
-    alert('제목과 내용을 입력하세요.')
-  }
-}
-
-const getContrastColor = (hexcolor) => {
-  // Convert hex to RGB
-  const r = parseInt(hexcolor.substr(1, 2), 16)
-  const g = parseInt(hexcolor.substr(3, 2), 16)
-  const b = parseInt(hexcolor.substr(5, 2), 16)
-
-  // Calculate luminance
-  const yiq = (r * 299 + g * 587 + b * 114) / 1000
-
-  // Return black or white depending on luminance
-  return yiq >= 128 ? 'black' : 'white'
-}
-</script>
-
-<style>
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
-
-body {
-  font-family: 'Noto Sans KR', sans-serif;
-}
-
-.font-sans {
-  font-family: 'Noto Sans KR', sans-serif;
-}
-
-input,
-textarea,
-button {
-  font-family: 'Noto Sans KR', sans-serif;
-}
-
-h2 {
-  font-family: 'Noto Sans KR', sans-serif;
-  letter-spacing: -0.025em;
-}
-</style>
diff --git a/src/views/test/PortfolioTest.vue b/src/views/test/PortfolioTest.vue
deleted file mode 100644
index c32f984..0000000
--- a/src/views/test/PortfolioTest.vue
+++ /dev/null
@@ -1,280 +0,0 @@
-<template>
-  <div
-    class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 py-12 px-4 sm:px-6 lg:px-8"
-  >
-    <div
-      class="max-w-3xl mx-auto space-y-12 bg-white p-8 sm:p-12 rounded-2xl shadow-sm"
-    >
-      <!-- 포트폴리오 작성 섹션 -->
-      <div>
-        <h2 class="text-3xl font-bold text-gray-900 mb-8">포트폴리오 작성</h2>
-        <div class="space-y-6">
-          <div>
-            <label
-              for="title"
-              class="block text-sm font-medium text-gray-700 mb-1"
-              >제목</label
-            >
-            <input
-              v-model="title"
-              id="title"
-              type="text"
-              placeholder="제목을 입력하세요"
-              class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-black focus:border-black sm:text-sm"
-            />
-          </div>
-          <div>
-            <label
-              for="content"
-              class="block text-sm font-medium text-gray-700 mb-1"
-              >내용</label
-            >
-            <textarea
-              v-model="content"
-              id="content"
-              rows="4"
-              placeholder="내용을 입력하세요"
-              class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-black focus:border-black sm:text-sm"
-            ></textarea>
-          </div>
-          <div>
-            <label
-              for="newTag"
-              class="block text-sm font-medium text-gray-700 mb-1"
-              >태그</label
-            >
-            <div class="flex rounded-md shadow-sm">
-              <input
-                v-model="newTag"
-                id="newTag"
-                type="text"
-                @keyup.enter="addTag"
-                placeholder="태그 입력 후 Enter"
-                class="flex-grow px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-black focus:border-black sm:text-sm"
-              />
-              <button
-                @click="addTag"
-                class="inline-flex items-center px-4 py-2 border border-l-0 border-gray-300 rounded-r-md bg-gray-50 text-gray-700 sm:text-sm hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-black focus:border-black transition-colors duration-200"
-              >
-                추가
-              </button>
-            </div>
-          </div>
-          <div class="flex flex-wrap gap-2">
-            <span
-              v-for="(tag, index) in tags"
-              :key="index"
-              class="inline-flex items-center px-2.5 py-0.5 rounded-full text-sm font-medium bg-gray-100 text-gray-800"
-            >
-              {{ tag }}
-              <button
-                @click="removeTag(index)"
-                class="ml-1 inline-flex items-center justify-center w-4 h-4 text-gray-400 hover:text-gray-500 focus:outline-none"
-              >
-                <span class="sr-only">태그 삭제</span>
-                <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
-                  <path
-                    fill-rule="evenodd"
-                    d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
-                    clip-rule="evenodd"
-                  />
-                </svg>
-              </button>
-            </span>
-          </div>
-        </div>
-        <button
-          @click="savePortfolio"
-          class="mt-8 w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-black hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black transition-colors duration-200"
-        >
-          포트폴리오 저장
-        </button>
-      </div>
-
-      <!-- 태그로 검색 섹션 -->
-      <div class="pt-12 border-t border-gray-200">
-        <h2 class="text-3xl font-bold text-gray-900 mb-8">태그로 검색</h2>
-        <div class="flex rounded-md shadow-sm">
-          <input
-            v-model="searchTag"
-            type="text"
-            placeholder="검색할 태그를 입력하세요"
-            class="flex-grow px-3 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-black focus:border-black sm:text-sm"
-          />
-          <button
-            @click="searchPortfolios"
-            class="inline-flex items-center px-4 py-2 border border-l-0 border-gray-300 rounded-r-md bg-gray-50 text-gray-700 sm:text-sm hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-black focus:border-black transition-colors duration-200"
-          >
-            검색
-          </button>
-        </div>
-
-        <div v-if="filteredPortfolios.length > 0" class="mt-8">
-          <h3 class="text-xl font-semibold text-gray-900 mb-4">검색 결과</h3>
-          <ul class="space-y-4">
-            <li
-              v-for="portfolio in filteredPortfolios"
-              :key="portfolio.id"
-              class="bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition-shadow duration-200"
-            >
-              <h4 class="text-lg font-medium text-gray-900 mb-2">
-                {{ portfolio.title }}
-              </h4>
-              <p class="text-sm text-gray-600 mb-4">{{ portfolio.content }}</p>
-              <div class="flex flex-wrap gap-2">
-                <span
-                  v-for="tag in portfolio.tags"
-                  :key="tag"
-                  class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800"
-                >
-                  {{ tag }}
-                </span>
-              </div>
-            </li>
-          </ul>
-        </div>
-        <div
-          v-else-if="searchTag"
-          class="mt-8 text-center text-sm text-gray-500"
-        >
-          해당 태그로 작성된 포트폴리오가 없습니다.
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { ref, onMounted } from 'vue'
-
-export default {
-  setup() {
-    const title = ref('')
-    const content = ref('')
-    const newTag = ref('')
-    const tags = ref([])
-    const portfolios = ref([])
-    const searchTag = ref('')
-    const filteredPortfolios = ref([])
-
-    const addTag = () => {
-      if (newTag.value && !tags.value.includes(newTag.value)) {
-        tags.value.push(newTag.value)
-        newTag.value = ''
-      }
-    }
-
-    const removeTag = (index) => {
-      tags.value.splice(index, 1)
-    }
-
-    const savePortfolio = () => {
-      if (title.value && content.value) {
-        const newPortfolio = {
-          id: Date.now(),
-          title: title.value,
-          content: content.value,
-          tags: [...tags.value]
-        }
-        portfolios.value.push(newPortfolio)
-        localStorage.setItem('portfolios', JSON.stringify(portfolios.value))
-        console.log('포트폴리오 저장됨:', newPortfolio)
-
-        title.value = ''
-        content.value = ''
-        tags.value = []
-      } else {
-        alert('제목과 내용을 입력하세요.')
-      }
-    }
-
-    const searchPortfolios = () => {
-      if (searchTag.value) {
-        filteredPortfolios.value = portfolios.value.filter((portfolio) =>
-          portfolio.tags.includes(searchTag.value)
-        )
-      } else {
-        filteredPortfolios.value = []
-      }
-    }
-
-    onMounted(() => {
-      const storedPortfolios =
-        JSON.parse(localStorage.getItem('portfolios')) || []
-      portfolios.value = storedPortfolios
-    })
-
-    return {
-      title,
-      content,
-      newTag,
-      tags,
-      portfolios,
-      searchTag,
-      filteredPortfolios,
-      addTag,
-      removeTag,
-      savePortfolio,
-      searchPortfolios
-    }
-  }
-}
-</script>
-
-<style>
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
-
-body {
-  font-family: 'Noto Sans KR', sans-serif;
-}
-</style>
-
-<!-- <template>
-  <div>
-    <h2>포트폴리오 작성</h2>
-    <input v-model="title" placeholder="제목을 입력하세요" />
-    <textarea v-model="content" placeholder="내용을 입력하세요"></textarea>
-    <input v-model="newTag" @keyup.enter="addTag" placeholder="태그 입력" />
-    <ul>
-      <li v-for="(tag, index) in tags" :key="index">
-        {{ tag }} <button @click="removeTag(index)">삭제</button>
-      </li>
-    </ul>
-    <button @click="savePortfolio">포트폴리오 저장</button>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      title: '',
-      content: '',
-      newTag: '',
-      tags: []
-    };
-  },
-  methods: {
-    addTag() {
-      if (this.newTag && !this.tags.includes(this.newTag)) {
-        this.tags.push(this.newTag);
-        this.newTag = '';
-      }
-    },
-    removeTag(index) {
-      this.tags.splice(index, 1);
-    },
-    savePortfolio() {
-      const portfolio = {
-        id: Date.now(),
-        title: this.title,
-        content: this.content,
-        tags: this.tags
-      };
-      // 로컬 스토리지나 서버에 포트폴리오를 저장하는 로직
-      console.log("포트폴리오 저장됨:", portfolio);
-      // 이후 로직은 서버에 전송하거나 Vuex로 관리 가능
-    }
-  }
-};
-</script> -->
diff --git a/src/views/test/Profile.vue b/src/views/test/Profile.vue
deleted file mode 100644
index 5a8f5da..0000000
--- a/src/views/test/Profile.vue
+++ /dev/null
@@ -1,143 +0,0 @@
-<template>
-  <div
-    class="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-100 to-gray-200 py-12 px-4 sm:px-6 lg:px-8"
-  >
-    <div
-      class="max-w-md w-full space-y-8 bg-white p-10 rounded-2xl shadow-2xl transform transition-all duration-300 hover:scale-105"
-    >
-      <div>
-        <h2
-          class="mt-6 text-center text-4xl font-extrabold text-gray-900 tracking-tight"
-        >
-          프로필
-        </h2>
-      </div>
-
-      <div v-if="profile" class="mt-8 space-y-6">
-        <div class="flex justify-center">
-          <div
-            class="w-32 h-32 rounded-full bg-gray-300 flex items-center justify-center text-4xl font-bold text-white"
-          >
-            {{ profile.name ? profile.name[0].toUpperCase() : '?' }}
-          </div>
-        </div>
-        <div class="bg-gray-50 rounded-lg p-6 shadow-sm">
-          <p class="text-sm text-gray-500 mb-1">이름</p>
-          <p class="text-lg font-medium text-gray-900">{{ profile.name }}</p>
-        </div>
-        <div class="bg-gray-50 rounded-lg p-6 shadow-sm">
-          <p class="text-sm text-gray-500 mb-1">이메일</p>
-          <p class="text-lg font-medium text-gray-900">{{ profile.email }}</p>
-        </div>
-      </div>
-
-      <div
-        v-if="message"
-        class="mt-2 text-sm text-center p-2 rounded-md"
-        :class="messageClass"
-        role="alert"
-      >
-        <p class="font-medium">{{ message }}</p>
-      </div>
-
-      <div class="mt-6">
-        <button
-          @click="logout"
-          class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-semibold rounded-lg text-white bg-black hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:shadow-lg"
-        >
-          <span class="absolute left-0 inset-y-0 flex items-center pl-3">
-            <svg
-              class="h-5 w-5 text-gray-300 group-hover:text-white transition-colors duration-200"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-              aria-hidden="true"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z"
-                clip-rule="evenodd"
-              />
-            </svg>
-          </span>
-          로그아웃
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { ref, onMounted, computed } from 'vue'
-import { useRouter } from 'vue-router'
-import axios from 'axios'
-
-export default {
-  setup() {
-    const router = useRouter()
-    const profile = ref(null)
-    const message = ref('')
-    const messageType = ref('')
-
-    const messageClass = computed(() => {
-      return {
-        'bg-green-100 text-green-700 border border-green-400':
-          messageType.value === 'success',
-        'bg-red-100 text-red-700 border border-red-400':
-          messageType.value === 'error'
-      }
-    })
-
-    const fetchProfile = async () => {
-      try {
-        const response = await axios.get(
-          'http://localhost:8080/api/users/profile',
-          { withCredentials: true }
-        )
-        profile.value = response.data
-      } catch (error) {
-        setMessage('프로필 조회 실패: ' + error.response.data, 'error')
-      }
-    }
-
-    const logout = async () => {
-      try {
-        await axios.post(
-          'http://localhost:8080/api/users/logout',
-          {},
-          { withCredentials: true }
-        )
-        router.push('/login')
-      } catch (error) {
-        setMessage('로그아웃 실패: ' + error.response.data, 'error')
-      }
-    }
-
-    const setMessage = (msg, type) => {
-      message.value = msg
-      messageType.value = type
-      setTimeout(() => {
-        message.value = ''
-        messageType.value = ''
-      }, 5000)
-    }
-
-    onMounted(fetchProfile)
-
-    return {
-      profile,
-      message,
-      messageClass,
-      logout
-    }
-  }
-}
-</script>
-
-<style>
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
-
-body {
-  font-family: 'Noto Sans KR', sans-serif;
-}
-</style>
diff --git a/src/views/test/SignIn.vue b/src/views/test/SignIn.vue
deleted file mode 100644
index bb86d7b..0000000
--- a/src/views/test/SignIn.vue
+++ /dev/null
@@ -1,226 +0,0 @@
-<template>
-  <div
-    class="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-100 to-gray-200 py-12 px-4 sm:px-6 lg:px-8"
-  >
-    <div
-      class="max-w-md w-full space-y-8 bg-white p-10 rounded-2xl shadow-2xl transform transition-all duration-300 hover:scale-105"
-    >
-      <div>
-        <h2
-          class="mt-6 text-center text-4xl font-extrabold text-gray-900 tracking-tight"
-        >
-          로그인
-        </h2>
-        <p class="mt-2 text-center text-sm text-gray-600">
-          또는
-          <router-link
-            to="/auth/verifyemail"
-            class="font-medium text-black hover:text-gray-800 transition-colors duration-200"
-          >
-            새 계정 만들기
-          </router-link>
-        </p>
-      </div>
-      <form class="mt-8 space-y-6" @submit.prevent="handleLogin">
-        <div class="rounded-md space-y-4">
-          <div>
-            <label
-              for="email"
-              class="block text-sm font-medium text-gray-700 mb-1"
-              >이메일</label
-            >
-            <input
-              v-model="email"
-              id="email"
-              name="email"
-              type="email"
-              required
-              class="appearance-none rounded-lg relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-2 focus:ring-black focus:border-black focus:z-10 sm:text-sm transition-all duration-200"
-              placeholder="이메일을 입력하세요"
-              @input="validateEmail"
-            />
-            <!-- 간단하고 세련된 이메일 오류 메시지 -->
-            <transition
-              enter-active-class="transition ease-out duration-300"
-              enter-from-class="opacity-0 -translate-y-2"
-              enter-to-class="opacity-100 translate-y-0"
-              leave-active-class="transition ease-in duration-200"
-              leave-from-class="opacity-100 translate-y-0"
-              leave-to-class="opacity-0 -translate-y-2"
-            >
-              <p
-                v-if="emailError"
-                class="mt-2 text-sm text-red-600 font-medium"
-              >
-                {{ emailError }}
-              </p>
-            </transition>
-          </div>
-          <div>
-            <label
-              for="password"
-              class="block text-sm font-medium text-gray-700 mb-1"
-              >비밀번호</label
-            >
-            <input
-              v-model="password"
-              id="password"
-              name="password"
-              type="password"
-              required
-              class="appearance-none rounded-lg relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-2 focus:ring-black focus:border-black focus:z-10 sm:text-sm transition-all duration-200"
-              placeholder="비밀번호를 입력하세요"
-            />
-          </div>
-        </div>
-
-        <div class="flex items-center justify-between">
-          <div class="flex items-center">
-            <input
-              id="remember-me"
-              name="remember-me"
-              type="checkbox"
-              v-model="rememberMe"
-              class="h-4 w-4 text-black focus:ring-black border-gray-300 rounded"
-            />
-            <label for="remember-me" class="ml-2 block text-sm text-gray-900">
-              로그인 상태 유지
-            </label>
-          </div>
-
-          <div class="text-sm">
-            <a
-              href="#"
-              @click.prevent="forgotPassword"
-              class="font-medium text-black hover:text-gray-800 transition-colors duration-200"
-            >
-              비밀번호를 잊으셨나요?
-            </a>
-          </div>
-        </div>
-
-        <div>
-          <button
-            type="submit"
-            class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-semibold rounded-lg text-white bg-black hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:shadow-lg"
-          >
-            <span class="absolute left-0 inset-y-0 flex items-center pl-3">
-              <svg
-                class="h-5 w-5 text-gray-300 group-hover:text-white transition-colors duration-200"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-                aria-hidden="true"
-              >
-                <path
-                  fill-rule="evenodd"
-                  d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
-                  clip-rule="evenodd"
-                />
-              </svg>
-            </span>
-            로그인
-          </button>
-        </div>
-
-        <!-- 향상된 에러 메시지 출력 -->
-        <transition
-          enter-active-class="transition ease-out duration-300"
-          enter-from-class="transform opacity-0 scale-95"
-          enter-to-class="transform opacity-100 scale-100"
-          leave-active-class="transition ease-in duration-200"
-          leave-from-class="transform opacity-100 scale-100"
-          leave-to-class="transform opacity-0 scale-95"
-        >
-          <div
-            v-if="message"
-            class="mt-2 bg-red-50 border-l-4 border-red-400 p-4 rounded-md"
-          >
-            <div class="flex">
-              <div class="flex-shrink-0">
-                <svg
-                  class="h-5 w-5 text-red-400"
-                  xmlns="http://www.w3.org/2000/svg"
-                  viewBox="0 0 20 20"
-                  fill="currentColor"
-                  aria-hidden="true"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z"
-                    clip-rule="evenodd"
-                  />
-                </svg>
-              </div>
-              <div class="ml-3">
-                <p class="text-sm text-red-700">
-                  {{ message }}
-                </p>
-              </div>
-            </div>
-          </div>
-        </transition>
-      </form>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapActions } from 'vuex'
-
-export default {
-  data() {
-    return {
-      email: '',
-      password: '',
-      message: '', // 에러 메시지 변수
-      emailError: '', // 이메일 오류 메시지
-      rememberMe: false // 로그인 상태 유지 체크박스
-    }
-  },
-  methods: {
-    ...mapActions(['login']), // Vuex 액션을 맵핑
-
-    async handleLogin() {
-      if (this.emailError) {
-        return // 이메일 오류가 있을 경우 로그인 진행 안 함
-      }
-      const result = await this.login({
-        email: this.email,
-        password: this.password,
-        rememberMe: this.rememberMe
-      }) // Vuex 액션 호출
-      if (!result.success) {
-        console.log(result)
-        this.message = result.message // 에러 메시지 설정
-      } else {
-        this.message = '' // 로그인 성공 시 메시지 초기화
-        this.$router.push('/profile') // 로그인 후 프로필 페이지로 이동
-      }
-    },
-    validateEmail() {
-      // 이메일 형식 검증
-      const regex = /^[a-zA-Z0-9._%+-]+@dgu\.ac\.kr$/ // @dgu.ac.kr 도메인 검증
-      if (!regex.test(this.email)) {
-        this.emailError = '이메일은 @dgu.ac.kr 도메인을 사용해야 합니다.'
-      } else {
-        this.emailError = '' // 오류가 없을 경우 초기화
-      }
-    },
-    forgotPassword() {
-      // 비밀번호 찾기 로직 구현
-      console.log('비밀번호 찾기 기능 실행')
-      // 여기에 비밀번호 찾기 로직을 추가하세요.
-      // 예: this.$router.push('/forgot-password')
-    }
-  }
-}
-</script>
-
-<style>
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
-
-body {
-  font-family: 'Noto Sans KR', sans-serif;
-}
-</style>
diff --git a/src/views/test/SignUpForm.vue b/src/views/test/SignUpForm.vue
deleted file mode 100644
index bcb6b3f..0000000
--- a/src/views/test/SignUpForm.vue
+++ /dev/null
@@ -1,195 +0,0 @@
-<template>
-  <div
-    class="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-100 to-gray-200 py-12 px-4 sm:px-6 lg:px-8"
-  >
-    <div
-      class="max-w-md w-full space-y-8 bg-white p-10 rounded-2xl shadow-2xl transform transition-all duration-300 hover:scale-105"
-    >
-      <div>
-        <h2
-          class="mt-6 text-center text-4xl font-extrabold text-gray-900 tracking-tight"
-        >
-          회원가입
-        </h2>
-        <div class="mt-4 bg-gray-50 rounded-lg p-4 border border-gray-200">
-          <p class="text-center text-sm text-gray-600">
-            이메일: <span class="font-medium text-black">{{ email }}</span>
-          </p>
-        </div>
-        <p class="mt-4 text-center text-sm text-gray-600">
-          추가 정보를 입력하여 회원가입을 완료하세요.
-        </p>
-      </div>
-
-      <form class="mt-8 space-y-6" @submit.prevent="completeSignup">
-        <!-- 실명 입력 -->
-        <div class="space-y-1">
-          <label for="realName" class="block text-sm font-medium text-gray-700">
-            실명
-          </label>
-          <input
-            v-model="realName"
-            id="realName"
-            name="realName"
-            type="text"
-            required
-            class="appearance-none rounded-lg relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-2 focus:ring-black focus:border-black focus:z-10 sm:text-sm transition-all duration-200"
-            placeholder="실명을 입력하세요"
-          />
-        </div>
-        <!-- 닉네임 입력 -->
-        <div class="space-y-1">
-          <label for="nickname" class="block text-sm font-medium text-gray-700">
-            닉네임
-          </label>
-          <input
-            v-model="nickname"
-            id="nickname"
-            name="nickname"
-            type="text"
-            required
-            class="appearance-none rounded-lg relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-2 focus:ring-black focus:border-black focus:z-10 sm:text-sm transition-all duration-200"
-            placeholder="닉네임을 입력하세요"
-          />
-        </div>
-
-        <!-- 비밀번호 입력 -->
-        <div class="space-y-1">
-          <label for="password" class="block text-sm font-medium text-gray-700">
-            비밀번호
-          </label>
-          <input
-            v-model="password"
-            id="password"
-            name="password"
-            type="password"
-            required
-            class="appearance-none rounded-lg relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-2 focus:ring-black focus:border-black focus:z-10 sm:text-sm transition-all duration-200"
-            placeholder="비밀번호를 입력하세요"
-          />
-        </div>
-
-        <!-- 비밀번호 확인 -->
-        <div class="space-y-1">
-          <label
-            for="confirmPassword"
-            class="block text-sm font-medium text-gray-700"
-          >
-            비밀번호 확인
-          </label>
-          <input
-            v-model="confirmPassword"
-            id="confirmPassword"
-            name="confirmPassword"
-            type="password"
-            required
-            class="appearance-none rounded-lg relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-2 focus:ring-black focus:border-black focus:z-10 sm:text-sm transition-all duration-200"
-            placeholder="비밀번호를 다시 입력하세요"
-          />
-        </div>
-
-        <!-- 회원가입 완료 버튼 -->
-        <div>
-          <button
-            type="submit"
-            class="group relative w-full flex justify-center py-3 px-4 border border-transparent text-sm font-semibold rounded-lg text-white bg-black hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:shadow-lg"
-          >
-            <span class="absolute left-0 inset-y-0 flex items-center pl-3">
-              <svg
-                class="h-5 w-5 text-gray-300 group-hover:text-white transition-colors duration-200"
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 20 20"
-                fill="currentColor"
-                aria-hidden="true"
-              >
-                <path
-                  fill-rule="evenodd"
-                  d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
-                  clip-rule="evenodd"
-                />
-              </svg>
-            </span>
-            회원가입 완료
-          </button>
-        </div>
-      </form>
-
-      <!-- 메시지 표시 -->
-      <div
-        v-if="message"
-        class="mt-2 text-sm text-center p-3 rounded-md transition-all duration-300"
-        :class="messageClass"
-        role="alert"
-      >
-        <p class="font-medium">{{ message }}</p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { ref, computed } from 'vue'
-import { useRouter } from 'vue-router'
-import axios from 'axios'
-
-export default {
-  setup() {
-    const router = useRouter()
-    const email = ref(localStorage.getItem('email') || '')
-    const nickname = ref('')
-    const password = ref('')
-    const confirmPassword = ref('')
-    const message = ref('')
-
-    const messageClass = computed(() => {
-      return message.value.includes('완료')
-        ? 'bg-green-100 text-green-700 border border-green-400'
-        : 'bg-red-100 text-red-700 border border-red-400'
-    })
-
-    const completeSignup = async () => {
-      if (password.value !== confirmPassword.value) {
-        message.value = '비밀번호가 일치하지 않습니다.'
-        return
-      }
-
-      try {
-        const response = await axios.post(
-          'http://localhost:8080/api/users/signup',
-          {
-            email: email.value,
-            nickname: nickname.value,
-            password: password.value,
-            authCode: localStorage.getItem('authCode')
-          }
-        )
-        message.value = '회원가입이 완료되었습니다!'
-        setTimeout(() => {
-          router.push('/login')
-        }, 2000)
-      } catch (error) {
-        message.value =
-          '회원가입 실패: ' + (error.response?.data || error.message)
-      }
-    }
-
-    return {
-      email,
-      nickname,
-      password,
-      confirmPassword,
-      message,
-      messageClass,
-      completeSignup
-    }
-  }
-}
-</script>
-
-<style>
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
-
-body {
-  font-family: 'Noto Sans KR', sans-serif;
-}
-</style>
diff --git a/src/views/test/SignUpForm2.vue b/src/views/test/SignUpForm2.vue
deleted file mode 100644
index ba563f6..0000000
--- a/src/views/test/SignUpForm2.vue
+++ /dev/null
@@ -1,287 +0,0 @@
-<template>
-  <div
-    class="min-h-screen bg-[#333333] flex items-center justify-center font-nanumSquareRound"
-  >
-    <div class="w-full max-w-md h-[844px] relative overflow-hidden">
-      <!-- Mobile frame -->
-      <div class="absolute inset-0 bg-[#FAE8DA] overflow-hidden">
-        <!-- Top white area with logo -->
-        <div class="flex items-center h-16 px-4 bg-white">
-          <img
-            src="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/Ako%20ming-5vJmEg5PbbIv4TIaUPDPQX1osOxkc0.svg"
-            alt="Ako ming"
-            class="h-12"
-          />
-        </div>
-
-        <!-- Main content area -->
-        <div class="h-[calc(100%-8rem)] overflow-y-auto px-6 py-8">
-          <div class="mb-8 text-center">
-            <h1 class="text-3xl font-bold text-black">회원가입</h1>
-          </div>
-
-          <form
-            @submit.prevent="completeSignup"
-            class="max-w-xs mx-auto space-y-6"
-          >
-            <div class="space-y-2">
-              <label
-                for="realName"
-                class="block text-sm font-medium text-[#7C7C7C]"
-                >실명</label
-              >
-              <input
-                v-model="realName"
-                id="realName"
-                type="text"
-                required
-                class="w-full px-3 py-2 bg-[#DDD7D3] rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-[#F6B87A]"
-                placeholder="실명을 입력하세요"
-              />
-            </div>
-
-            <div class="space-y-2">
-              <label
-                for="email"
-                class="block text-sm font-medium text-[#7C7C7C]"
-                >이메일</label
-              >
-              <div class="flex space-x-2">
-                <input
-                  v-model="email"
-                  id="email"
-                  type="email"
-                  required
-                  class="flex-grow px-3 py-2 bg-[#DDD7D3] rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-[#F6B87A]"
-                  placeholder="이메일을 입력하세요"
-                />
-                <button
-                  type="button"
-                  @click="sendVerificationCode"
-                  class="px-3 py-2 bg-[#F6B87A] text-white rounded-full text-sm font-semibold hover:bg-[#E5A769] transition duration-300"
-                >
-                  인증하기
-                </button>
-              </div>
-            </div>
-
-            <div v-if="showVerificationField" class="space-y-2">
-              <label
-                for="verificationCode"
-                class="block text-sm font-medium text-[#7C7C7C]"
-                >인증번호</label
-              >
-              <div class="flex space-x-2">
-                <input
-                  v-model="verificationCode"
-                  id="verificationCode"
-                  type="text"
-                  class="flex-grow px-3 py-2 bg-[#DDD7D3] rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-[#F6B87A]"
-                  placeholder="인증번호를 입력하세요"
-                />
-                <button
-                  type="button"
-                  @click="verifyCode"
-                  class="px-3 py-2 bg-[#F6B87A] text-white rounded-full text-sm font-semibold hover:bg-[#E5A769] transition duration-300"
-                >
-                  인증확인
-                </button>
-              </div>
-            </div>
-
-            <transition name="fade">
-              <p
-                v-if="verificationSuccess"
-                class="text-[#F49C44] text-sm mt-1 bg-[#FFF5E6] p-2 rounded-md shadow-md"
-              >
-                인증이 완료되었습니다!
-              </p>
-            </transition>
-
-            <div class="space-y-2">
-              <label
-                for="password"
-                class="block text-sm font-medium text-[#7C7C7C]"
-                >비밀번호</label
-              >
-              <input
-                v-model="password"
-                id="password"
-                type="password"
-                required
-                class="w-full px-3 py-2 bg-[#DDD7D3] rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-[#F6B87A]"
-                placeholder="비밀번호를 입력하세요"
-              />
-            </div>
-
-            <div class="space-y-2">
-              <label
-                for="confirmPassword"
-                class="block text-sm font-medium text-[#7C7C7C]"
-                >비밀번호 확인</label
-              >
-              <input
-                v-model="confirmPassword"
-                id="confirmPassword"
-                type="password"
-                required
-                class="w-full px-3 py-2 bg-[#DDD7D3] rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-[#F6B87A]"
-                placeholder="비밀번호를 다시 입력하세요"
-              />
-              <transition name="fade">
-                <p
-                  v-if="passwordMismatch"
-                  class="text-[#C83838] text-sm mt-1 bg-[#FFE5E5] p-2 rounded-md shadow-md"
-                >
-                  비밀번호가 동일하지 않습니다!
-                </p>
-              </transition>
-            </div>
-
-            <div class="space-y-2">
-              <label
-                for="nickname"
-                class="block text-sm font-medium text-[#7C7C7C]"
-                >닉네임</label
-              >
-              <input
-                v-model="nickname"
-                id="nickname"
-                type="text"
-                required
-                class="w-full px-3 py-2 bg-[#DDD7D3] rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-[#F6B87A]"
-                placeholder="닉네임을 입력하세요"
-              />
-            </div>
-
-            <button
-              type="submit"
-              class="w-full py-2 px-4 bg-[#F6B87A] text-white rounded-full text-sm font-semibold hover:bg-[#E5A769] transition duration-300"
-            >
-              가입하기
-            </button>
-          </form>
-
-          <div
-            v-if="message"
-            class="max-w-xs p-3 mx-auto mt-4 text-sm text-center rounded-lg"
-            :class="messageClass"
-          >
-            {{ message }}
-          </div>
-        </div>
-
-        <!-- Bottom navigation bar -->
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, watch } from 'vue'
-import { useRouter } from 'vue-router'
-import axios from 'axios'
-
-const router = useRouter()
-const realName = ref('')
-const email = ref('')
-const password = ref('')
-const confirmPassword = ref('')
-const nickname = ref('')
-const message = ref('')
-const passwordMismatch = ref(false)
-const showVerificationField = ref(false)
-const verificationCode = ref('')
-const verificationSuccess = ref(false)
-
-const messageClass = computed(() => {
-  return message.value.includes('완료')
-    ? 'bg-green-100 text-green-700'
-    : 'bg-red-100 text-red-700'
-})
-
-watch([password, confirmPassword], ([newPassword, newConfirmPassword]) => {
-  passwordMismatch.value =
-    newPassword !== newConfirmPassword && newConfirmPassword !== ''
-})
-
-const sendVerificationCode = async () => {
-  // Implement the logic to send verification code
-  showVerificationField.value = true
-}
-
-const verifyCode = async () => {
-  // Implement the logic to verify the code
-  verificationSuccess.value = true
-  setTimeout(() => {
-    verificationSuccess.value = false
-  }, 3000)
-}
-
-const completeSignup = async () => {
-  if (password.value !== confirmPassword.value) {
-    passwordMismatch.value = true
-    return
-  }
-
-  try {
-    const response = await axios.post(
-      'http://localhost:8080/api/users/signup',
-      {
-        realName: realName.value,
-        email: email.value,
-        password: password.value,
-        nickname: nickname.value
-      }
-    )
-    message.value = '회원가입이 완료되었습니다!'
-    setTimeout(() => {
-      router.push('/login')
-    }, 2000)
-  } catch (error) {
-    message.value = '회원가입 실패: ' + (error.response?.data || error.message)
-  }
-}
-</script>
-
-<style>
-@import url('https://cdn.jsdelivr.net/npm/nanum-square-round@1.0.0/nanumsquareround.css');
-
-:root {
-  font-family: 'NanumSquareRound', sans-serif;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-}
-
-/* Hide scrollbar for Chrome, Safari and Opera */
-.overflow-y-auto::-webkit-scrollbar {
-  display: none;
-}
-
-/* Hide scrollbar for IE, Edge and Firefox */
-.overflow-y-auto {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}
-
-input::placeholder {
-  color: #5f5454;
-}
-
-.font-nanumSquareRound {
-  font-family: 'NanumSquareRound', sans-serif;
-}
-
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.5s ease;
-}
-
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-</style>
diff --git a/src/views/test/TaliwindResopon.vue b/src/views/test/TaliwindResopon.vue
deleted file mode 100644
index aeaa5b8..0000000
--- a/src/views/test/TaliwindResopon.vue
+++ /dev/null
@@ -1,114 +0,0 @@
-<!-- Tailwind 로 반응형 테스트 및 연습 -->
-
-<template>
-  <div class="min-h-screen bg-gray-50 py-12 px-4 sm:px-6 lg:px-8 font-sans">
-    <div class="max-w-7xl mx-auto">
-      <h1 class="text-3xl font-extrabold text-center mb-12 text-gray-900">
-        미니멀 카드 갤러리
-      </h1>
-
-      <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
-        <div
-          v-for="card in cards"
-          :key="card.id"
-          class="bg-white rounded-lg shadow-sm overflow-hidden transition-all duration-300 hover:shadow-md"
-        >
-          <img
-            :src="card.image"
-            :alt="card.title"
-            class="w-full h-48 object-cover"
-          />
-          <div class="p-6">
-            <h2 class="text-xl font-semibold text-gray-900 mb-2">
-              {{ card.title }}
-            </h2>
-            <p class="text-gray-600 text-sm mb-4">{{ card.description }}</p>
-            <div class="flex justify-between items-center">
-              <span class="text-xs text-gray-500">{{ card.date }}</span>
-              <button
-                class="px-4 py-2 bg-gray-900 text-white text-sm font-medium rounded-md hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2 transition-colors duration-300"
-              >
-                자세히 보기
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-const cards = ref([
-  {
-    id: 1,
-    title: '아름다운 풍경',
-    description:
-      '자연의 경이로움을 담은 풍경 사진입니다. 산과 호수가 어우러진 모습이 인상적입니다.',
-    image:
-      'https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80',
-    date: '2024년 3월 15일'
-  },
-  {
-    id: 2,
-    title: '도시의 야경',
-    description:
-      '밤에 빛나는 도시의 모습입니다. 고층 빌딩들의 불빛이 아름답게 펼쳐져 있습니다.',
-    image:
-      'https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80',
-    date: '2024년 3월 14일'
-  },
-  {
-    id: 3,
-    title: '해변의 일몰',
-    description:
-      '황금빛 물결이 펼쳐진 해변의 일몰 장면입니다. 평화로운 분위기가 느껴집니다.',
-    image:
-      'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80',
-    date: '2024년 3월 13일'
-  },
-  {
-    id: 4,
-    title: '숲속의 오솔길',
-    description:
-      '울창한 숲속을 가로지르는 오솔길입니다. 신선한 공기와 자연의 소리를 상상해보세요.',
-    image:
-      'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80',
-    date: '2024년 3월 12일'
-  },
-  {
-    id: 5,
-    title: '도심 속 공원',
-    description:
-      '번잡한 도시 한가운데 있는 평화로운 공원의 모습입니다. 도시인들의 휴식처입니다.',
-    image:
-      'https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80',
-    date: '2024년 3월 11일'
-  },
-  {
-    id: 6,
-    title: '산정상의 뷰',
-    description:
-      '높은 산 정상에서 바라본 장관입니다. 구름 위로 펼쳐진 풍경이 압도적입니다.',
-    image:
-      'https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80',
-    date: '2024년 3월 10일'
-  }
-])
-</script>
-
-<style>
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&family=Poppins:wght@300;400;500;600;700&display=swap');
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
-
-body,
-h1,
-h2,
-p,
-span,
-button {
-  font-family: 'Noto Sans KR', sans-serif;
-}
-</style>
diff --git a/src/views/test/VerifyEmail.vue b/src/views/test/VerifyEmail.vue
deleted file mode 100644
index 7efdd32..0000000
--- a/src/views/test/VerifyEmail.vue
+++ /dev/null
@@ -1,208 +0,0 @@
-<template>
-  <div
-    class="min-h-screen flex items-center justify-center bg-gradient-to-br from-gray-100 to-gray-200 py-12 px-4 sm:px-6 lg:px-8"
-  >
-    <div
-      class="max-w-md w-full space-y-8 bg-white p-10 rounded-2xl shadow-2xl transform transition-all duration-300 hover:scale-105"
-    >
-      <div>
-        <h2
-          class="mt-6 text-center text-4xl font-extrabold text-gray-900 tracking-tight"
-        >
-          회원가입
-        </h2>
-        <p class="mt-2 text-center text-sm text-gray-600">
-          이미 계정이 있으신가요?
-          <router-link
-            to="/auth/signin"
-            class="font-medium text-black hover:text-gray-800 transition-colors duration-200"
-            >로그인</router-link
-          >
-        </p>
-      </div>
-
-      <form class="mt-8 space-y-6" @submit.prevent="signup">
-        <!-- 이메일 입력 -->
-        <div>
-          <label
-            for="email"
-            class="block text-sm font-medium text-gray-700 mb-1"
-            >이메일 주소</label
-          >
-          <div class="flex space-x-2">
-            <input
-              v-model="email"
-              id="email"
-              name="email"
-              type="email"
-              required
-              @input="validateEmail"
-              class="appearance-none rounded-lg relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-2 focus:ring-black focus:border-black focus:z-10 sm:text-sm transition-all duration-200"
-              placeholder="이메일을 입력하세요"
-            />
-            <button
-              @click.prevent="sendEmailVerification"
-              class="flex-shrink-0 px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-black hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:shadow-md"
-            >
-              인증 코드 보내기
-            </button>
-          </div>
-          <!-- 간단하고 세련된 이메일 오류 메시지 -->
-          <transition
-            enter-active-class="transition ease-out duration-300"
-            enter-from-class="opacity-0 -translate-y-2"
-            enter-to-class="opacity-100 translate-y-0"
-            leave-active-class="transition ease-in duration-200"
-            leave-from-class="opacity-100 translate-y-0"
-            leave-to-class="opacity-0 -translate-y-2"
-          >
-            <p v-if="emailError" class="mt-2 text-sm text-red-600 font-medium">
-              {{ emailError }}
-            </p>
-          </transition>
-        </div>
-
-        <!-- 인증 코드 입력 -->
-        <div v-if="isEmailSent" class="space-y-2">
-          <label
-            for="verificationCode"
-            class="block text-sm font-medium text-gray-700"
-            >인증 코드</label
-          >
-          <div class="flex space-x-2">
-            <input
-              v-model="verificationCode"
-              id="verificationCode"
-              name="verificationCode"
-              type="text"
-              required
-              class="appearance-none rounded-lg relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-2 focus:ring-black focus:border-black focus:z-10 sm:text-sm transition-all duration-200"
-              placeholder="이메일로 받은 인증 코드를 입력하세요"
-            />
-            <button
-              @click.prevent="verifyCode"
-              class="flex-shrink-0 px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-black hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:shadow-md"
-            >
-              인증 확인
-            </button>
-          </div>
-        </div>
-
-        <!-- 비밀번호 입력 -->
-        <div v-if="isVerified" class="space-y-2">
-          <label for="password" class="block text-sm font-medium text-gray-700"
-            >비밀번호</label
-          >
-          <input
-            v-model="password"
-            id="password"
-            name="password"
-            type="password"
-            required
-            class="appearance-none rounded-lg relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-2 focus:ring-black focus:border-black focus:z-10 sm:text-sm transition-all duration-200"
-            placeholder="비밀번호를 입력하세요"
-          />
-        </div>
-
-        <!-- 회원가입 버튼 -->
-        <div v-if="isVerified">
-          <button
-            @click.prevent="signup"
-            class="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-semibold rounded-lg text-white bg-black hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-black transition-all duration-300 ease-in-out transform hover:-translate-y-1 hover:shadow-lg"
-          >
-            회원가입
-          </button>
-        </div>
-      </form>
-
-      <!-- 메시지 표시 -->
-      <div
-        v-if="message"
-        class="mt-2 text-sm text-center p-2 rounded-md"
-        :class="messageClass"
-        role="alert"
-      >
-        <p class="font-medium">{{ message }}</p>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-
-export default {
-  data() {
-    return {
-      email: '',
-      verificationCode: '',
-      password: '',
-      isEmailSent: false,
-      isVerified: false,
-      message: '',
-      emailError: '' // 이메일 오류 메시지
-    }
-  },
-  methods: {
-    validateEmail() {
-      const regex = /^[a-zA-Z0-9._%+-]+@dgu\.ac\.kr$/ // @dgu.ac.kr 도메인 검증
-      if (!regex.test(this.email)) {
-        this.emailError = '이메일은 @dgu.ac.kr 도메인을 사용해야 합니다.'
-      } else {
-        this.emailError = '' // 오류가 없을 경우 초기화
-      }
-    },
-    async sendEmailVerification() {
-      if (this.emailError) return // 이메일 오류가 있을 경우 전송하지 않음
-      try {
-        const response = await axios.post(
-          'http://localhost:8080/api/users/signup/send-email',
-          { email: this.email }
-        )
-        this.isEmailSent = true
-        this.message = response.data
-      } catch (error) {
-        this.message = '이메일 전송 실패: ' + error.response.data
-      }
-    },
-    async verifyCode() {
-      try {
-        const response = await axios.post(
-          'http://localhost:8080/api/users/signup/verify-code',
-          {
-            email: this.email,
-            code: this.verificationCode
-          }
-        )
-        this.isVerified = true
-        this.message = response.data
-      } catch (error) {
-        this.message = '인증 실패: ' + error.response.data
-      }
-    },
-    async signup() {
-      try {
-        const response = await axios.post(
-          'http://localhost:8080/api/users/signup',
-          {
-            email: this.email,
-            password: this.password,
-            authCode: this.verificationCode
-          }
-        )
-        this.message = response.data
-      } catch (error) {
-        this.message = '회원가입 실패: ' + error.response.data
-      }
-    }
-  }
-}
-</script>
-
-<style>
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
-
-body {
-  font-family: 'Noto Sans KR', sans-serif;
-}
-</style>
diff --git a/src/views/test/WeeklyCalenderTest.vue b/src/views/test/WeeklyCalenderTest.vue
deleted file mode 100644
index 298da47..0000000
--- a/src/views/test/WeeklyCalenderTest.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <div>
-    <v-calendar
-      view="weekly"
-      :weekdays="[1, 2, 3, 4, 5, 6, 7]"
-      :attributes="attrs"
-      :min-date="startOfWeek"
-      :max-date="endOfWeek"
-    />
-  </div>
-</template>
-
-<script>
-import { startOfWeek, endOfWeek } from 'date-fns'
-
-export default {
-  data() {
-    return {
-      startOfWeek: startOfWeek(new Date(), { weekStartsOn: 1 }), // 주간 시작일 (월요일)
-      endOfWeek: endOfWeek(new Date(), { weekStartsOn: 1 }), // 주간 종료일 (일요일)
-      attrs: [] // 이벤트나 스타일 속성 추가 가능
-    }
-  }
-}
-</script>
diff --git a/src/views/test/auth.js b/src/views/test/auth.js
deleted file mode 100644
index f570c59..0000000
--- a/src/views/test/auth.js
+++ /dev/null
@@ -1,72 +0,0 @@
-import axios from 'axios'
-
-const state = {
-  user: null,
-  isAuthenticated: false
-}
-
-const mutations = {
-  login(state, user) {
-    state.user = user
-    state.isAuthenticated = true
-  },
-  logout(state) {
-    state.user = null
-    state.isAuthenticated = false
-  }
-}
-
-const actions = {
-  async login({ commit }, { email, password, rememberMe = false }) {
-    try {
-      const response = await axios.post(
-        'http://localhost:8080/api/users/login',
-        {
-          email,
-          password
-        }
-      )
-      const user = response.data.user
-      commit('login', user)
-
-      //remeber me 로그인 상태 유지 로직
-      if (rememberMe) {
-        // 로그인 상태 유지 체크 시 로컬 스토리지에 저장
-        localStorage.setItem('user', JSON.stringify(user))
-      } else {
-        // 체크 안한 경우 세션 스토리지에 저장
-        sessionStorage.setItem('user', JSON.stringify(user))
-      }
-
-      //localStorage.setItem('user', JSON.stringify(user))
-      return { success: true } // 로그인 성공 시
-    } catch (error) {
-      console.log(error.response)
-      const errorMessage = error.response?.data?.message || '로그인 실패'
-      return { success: false, message: errorMessage } // 에러 발생 시 에러 메시지 반환
-    }
-  },
-  logout({ commit }) {
-    commit('logout')
-    localStorage.removeItem('user')
-    sessionStorage.removeItem('user') // 세션 스토리지에서도 삭제
-  },
-  initializeStore({ commit }) {
-    const user = JSON.parse(localStorage.getItem('user'))
-    if (user) {
-      commit('login', user)
-    }
-  }
-}
-
-const getters = {
-  isAuthenticated: (state) => state.isAuthenticated,
-  user: (state) => state.user
-}
-
-export default {
-  state,
-  mutations,
-  actions,
-  getters
-}
diff --git a/src/views/test/posts.js b/src/views/test/posts.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/views/test/tags.js b/src/views/test/tags.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/views/test/testrouter.js b/src/views/test/testrouter.js
deleted file mode 100644
index 22e8e46..0000000
--- a/src/views/test/testrouter.js
+++ /dev/null
@@ -1,126 +0,0 @@
-/* eslint-disable */
-import { createRouter, createWebHashHistory } from 'vue-router'
-import AuthLayout from '@/components/layout/AuthLayout.vue' // 중첩 라우팅의 부모 레이아웃
-import PortfolioLayout from '@/components/layout/PortfolioLayout.vue' // 중첩 라우팅의 부모 레이아웃
-
-// 자동 임포트 함수 (src/views 내의 모든 .vue 파일을 임포트)
-function importAllViews() {
-  const viewFiles = require.context('@/views', true, /\.vue$/)
-  const views = {}
-
-  // 각 파일을 순회하면서 임포트
-  viewFiles.keys().forEach((filePath) => {
-    const viewName = filePath
-      .split('/')
-      .pop() // 파일 이름만 추출
-      .replace('.vue', '') // .vue 확장자 제거
-
-    // 컴포넌트 이름과 해당 컴포넌트를 맵핑
-    views[viewName] = viewFiles(filePath).default
-  })
-
-  return views
-}
-
-// 자동으로 임포트된 모든 Vue 컴포넌트 객체
-const importedViews = importAllViews()
-
-const routes = [
-  {
-    path: '/',
-    name: 'home',
-    component: importedViews['HomeView'] // 자동 임포트 적용
-  },
-  {
-    path: '/about',
-    name: 'about',
-    component: importedViews['AboutView'] // 자동 임포트 적용
-  },
-  {
-    path: '/auth',
-    component: AuthLayout, // 부모 레이아웃
-    children: [
-      {
-        path: 'signin',
-        name: 'signin',
-        component: importedViews['SignIn'] // 자동 임포트 적용
-      },
-      {
-        path: 'signupform',
-        name: 'signupform',
-        component: importedViews['SignUpForm'] // 자동 임포트 적용
-      },
-      {
-        path: 'verifyemail',
-        name: 'verifyemail',
-        component: importedViews['VerifyEmail'] // 자동 임포트 적용
-      },
-      {
-        path: 'signupform2',
-        name: 'SignUpForm2',
-        component: importedViews['SignUpForm2'] // 자동 임포트 적용
-      },
-      {
-        path: 'signup',
-        name: 'SignupView',
-        component: importedViews['SignupView'] // 자동 임포트 적용
-      },
-      {
-        path: 'login',
-        name: 'LoginView',
-        component: importedViews['LoginView'] // 자동 임포트 적용
-      }
-    ]
-  },
-  {
-    path: '/profile',
-    name: 'profile',
-    component: importedViews['Profile'], // 자동 임포트 적용
-    meta: { requiresAuth: true } // 인증이 필요한 페이지
-  },
-  {
-    path: '/portfolios',
-    component: PortfolioLayout, // 공통 레이아웃 컴포넌트
-    children: [
-      {
-        path: 'new',
-        name: 'CreatePortfolio',
-        component: importedViews['PortfolioCreate'] // 자동 임포트 적용
-      },
-      {
-        path: 'tag',
-        name: 'SearchByTag',
-        component: importedViews['PortfolioByTag'] // 자동 임포트 적용
-      },
-      {
-        path: 'test',
-        name: 'Test',
-        component: importedViews['PortfolioTest'] // 자동 임포트 적용
-      }
-    ]
-  },
-  {
-    path: '/responsivetest',
-    name: 'TaliwindResopon',
-    component: importedViews['TaliwindResopon'] // 자동 임포트 적용
-  },
-  {
-    path: '/weeklycalendertest',
-    name: 'WeeklyCalenderTest',
-    component: importedViews['WeeklyCalenderTest'] // 자동 임포트 적용
-  },
-  {
-    path: '/:catchAll(.*)',
-    name: 'NotFound',
-    component: importedViews['NotFound'] // 자동 임포트 적용
-  }
-]
-
-const router = createRouter({
-  history: createWebHashHistory('/akoming/'), // Hash 모드를 사용
-  routes
-})
-
-//라우터 가드 설정(세션 기반 쿠기, 나중에 수정 필요)
-
-export default router