From d1830638bd974bb213bb98ef7d3dcb13c77c82ab Mon Sep 17 00:00:00 2001
From: study2895 <144806675+study2895@users.noreply.github.com>
Date: Mon, 2 Dec 2024 16:32:03 +0900
Subject: [PATCH] =?UTF-8?q?[Fix]=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EB=B0=8F?=
 =?UTF-8?q?=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=97=B4=EB=A6=AC=EC=A7=80=20?=
 =?UTF-8?q?=EC=95=8A=EB=8A=94=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/index.html                         |   4 +
 src/views/calendar/CalendarMainStyled.css | 132 ---------
 src/views/calendar/CalendarMainView.vue   | 207 ++++++++++++--
 src/views/login/login/LoginScript.js      |   2 +-
 src/views/login/login/LoginView.vue       | 314 +++++++++++-----------
 src/views/login/mypage/MyAkoGoals.vue     |  65 +++--
 src/views/login/mypage/MypageScript.js    |  16 +-
 src/views/login/mypage/MypageView.vue     |  11 +-
 src/views/login/signup/SignupStyled.js    | 158 -----------
 src/views/login/signup/SignupView.vue     |  22 +-
 src/views/mainpage/MainpageView.vue       |   8 +-
 11 files changed, 431 insertions(+), 508 deletions(-)
 delete mode 100644 src/views/calendar/CalendarMainStyled.css
 delete mode 100644 src/views/login/signup/SignupStyled.js
diff --git a/public/index.html b/public/index.html
index 5f1393c..ab0ea5c 100644
--- a/public/index.html
+++ b/public/index.html
@@ -6,6 +6,10 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
     <title><%= htmlWebpackPlugin.options.title %></title>
+    <link
+      href="https://fonts.googleapis.com/css2?family=Nanum+Square+Round:wght@400;700&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <noscript>
diff --git a/src/views/calendar/CalendarMainStyled.css b/src/views/calendar/CalendarMainStyled.css
deleted file mode 100644
index fb6468d..0000000
--- a/src/views/calendar/CalendarMainStyled.css
+++ /dev/null
@@ -1,132 +0,0 @@
-/* 전체 컨테이너 */
-.page-container {
-  min-height: 100vh;
-  background-color: #fff9f2;
-  font-family: 'NanumSquareRound', sans-serif;
-  display: flex;
-  justify-content: center;
-  position: relative;
-}
-
-.inner-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: 20px 1.5rem 6rem;
-  margin-top: 30px;
-}
-
-.section-title {
-  font-size: 1.25rem;
-  font-weight: 500;
-  color: #4a4a4a;
-  margin-bottom: 0.5rem;
-}
-
-.month-title {
-  font-size: 1.5rem;
-  font-weight: bold;
-  color: #4a4a4a;
-}
-
-/* 캘린더 관련 스타일 */
-.calendar-container {
-  background-color: #fae8da;
-  border-radius: 0.5rem;
-  padding: 1rem;
-  margin-bottom: 1rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.calendar-grid {
-  display: grid;
-  grid-template-columns: repeat(7, 1fr);
-  gap: 1rem;
-  text-align: center;
-  margin-bottom: 1rem;
-}
-
-.calendar-day {
-  font-size: 0.875rem;
-  color: #b3b3b3;
-}
-
-.calendar-week {
-  display: flex;
-  width: 100%;
-  justify-content: space-between;
-  margin-bottom: 0.25rem;
-}
-
-.day-button {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 2rem;
-  height: 2rem;
-  font-size: 0.75rem;
-  border-radius: 0.5rem;
-  margin: 0.125rem;
-  background-color: transparent;
-  color: #b3b3b3;
-  transition: background-color 0.3s, color 0.3s;
-}
-
-.day-button.selected {
-  background-color: #ff7f00;
-  color: white;
-}
-
-.day-button.sunday-saturday {
-  color: #17a1fa;
-}
-
-/* 학사 일정 팝업 */
-.schedule-popup {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background-color: #ffffff;
-  border-radius: 1.5rem 1.5rem 0 0;
-  padding: 1.5rem;
-  overflow-y: auto;
-  max-height: 60vh;
-  width: 395px;
-  margin: 0 auto;
-}
-
-/* 링크 버튼 */
-.link-button {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  text-align: left;
-  padding: 0.5rem 1rem;
-  background-color: #ffd9bb;
-  color: #000000;
-  font-size: 0.875rem;
-  font-weight: 500;
-  border-radius: 0.5rem;
-  text-decoration: none;
-  max-width: 80%;
-  margin: 0 auto 0.625rem;
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
-  transition: background-color 0.3s ease;
-}
-
-.link-button:hover {
-  background-color: #f1cdb1;
-}
diff --git a/src/views/calendar/CalendarMainView.vue b/src/views/calendar/CalendarMainView.vue
index 55bb0e6..bf39f61 100644
--- a/src/views/calendar/CalendarMainView.vue
+++ b/src/views/calendar/CalendarMainView.vue
@@ -22,7 +22,6 @@ import {
 } from './CalendarMainScript.js'
 import MainHeader from '@/components/layout/Header.vue'
 import MainFooter from '@/components/layout/Footer.vue'
-import './CalendarMainStyled.css'
 
 onMounted(() => {
   currentDate.value = new Date()
@@ -32,14 +31,27 @@ onMounted(() => {
 </script>
 
 <template>
-  <PageContainer>
-    <InnerContainer>
+  <div class="page-container">
+    <div
+      class="inner-container"
+      style="margin-top: 60px; font-family: 'NanumSquareRound', sans-serif"
+    >
       <MainHeader />
-      <MainContent>
+      <div class="main-content">
         <div>
-          <SectionTitle>{{ currentYear }} at 동국대학교</SectionTitle>
+          <h2
+            class="section-title"
+            style="font-family: 'NanumSquareRound', sans-serif"
+          >
+            {{ currentYear }} at 동국대학교
+          </h2>
           <div class="flex items-center justify-between">
-            <MonthTitle>{{ currentMonth }}월</MonthTitle>
+            <h3
+              class="month-title"
+              style="font-family: 'NanumSquareRound', sans-serif"
+            >
+              {{ currentMonth }}월
+            </h3>
             <div class="flex space-x-6">
               <button @click="goToPrevMonth">
                 <img
@@ -58,31 +70,42 @@ onMounted(() => {
           </div>
         </div>
 
-        <CalendarContainer>
-          <CalendarGrid>
-            <CalendarDay v-for="day in DAY_LIST" :key="day">{{
-              day
-            }}</CalendarDay>
-          </CalendarGrid>
-          <CalendarWeek v-for="week in weekCalendarList" :key="week.toString()">
-            <DayButton
+        <div class="calendar-container">
+          <div class="calendar-grid">
+            <div class="calendar-day" v-for="day in DAY_LIST" :key="day">
+              {{ day }}
+            </div>
+          </div>
+          <div
+            class="calendar-week"
+            v-for="week in weekCalendarList"
+            :key="week.toString()"
+          >
+            <button
+              class="day-button"
+              :class="{
+                selected: day === selectedDay,
+                'sunday-saturday': isSundayOrSaturday(day)
+              }"
               v-for="day in week"
               :key="day"
-              :isSelected="day === selectedDay"
-              :isSundayOrSaturday="isSundayOrSaturday(day)"
               @click="selectDay(day)"
             >
               {{ day !== 0 ? day : '' }}
-            </DayButton>
-          </CalendarWeek>
-        </CalendarContainer>
+            </button>
+          </div>
+        </div>
 
-        <SchedulePopup v-if="isScheduleOpen && selectedEvents.length > 0">
-          <!-- 일정 내용 -->
-        </SchedulePopup>
+        <div
+          class="schedule-popup"
+          v-if="isScheduleOpen && selectedEvents.length > 0"
+        >
+          <!-- 학사 일정 내용 -->
+        </div>
 
         <div>
-          <LinkButton
+          <a
+            class="link-button"
             v-for="(link, index) in links"
             :key="index"
             :href="link.url"
@@ -93,10 +116,140 @@ onMounted(() => {
               src="@/assets/Icons/akoming/arrowright.svg"
               alt="arrow right"
             />
-          </LinkButton>
+          </a>
         </div>
-      </MainContent>
+      </div>
       <MainFooter />
-    </InnerContainer>
-  </PageContainer>
+    </div>
+  </div>
 </template>
+
+<style scoped>
+.page-container {
+  min-height: 100vh;
+  background-color: #fff9f2;
+  font-family: 'NanumSquareRound', sans-serif;
+  display: flex;
+  justify-content: center;
+  position: relative;
+}
+
+.inner-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: 20px 1.5rem 6rem;
+  margin-top: 30px;
+}
+
+.section-title {
+  font-size: 1.25rem;
+  font-weight: 500;
+  color: #4a4a4a;
+  margin-bottom: 0.5rem;
+}
+
+.month-title {
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #4a4a4a;
+}
+
+.calendar-container {
+  background-color: #fae8da;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.calendar-grid {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 1rem;
+  text-align: center;
+  margin-bottom: 1rem;
+}
+
+.calendar-day {
+  font-size: 0.875rem;
+  color: #b3b3b3;
+}
+
+.calendar-week {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  margin-bottom: 0.25rem;
+}
+
+.day-button {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  font-size: 0.75rem;
+  border-radius: 0.5rem;
+  margin: 0.125rem;
+  background-color: transparent;
+  color: #b3b3b3;
+  transition: background-color 0.3s, color 0.3s;
+}
+
+.day-button.selected {
+  background-color: #ff7f00;
+  color: white;
+}
+
+.day-button.sunday-saturday {
+  color: #17a1fa;
+}
+
+.schedule-popup {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: #ffffff;
+  border-radius: 1.5rem 1.5rem 0 0;
+  padding: 1.5rem;
+  overflow-y: auto;
+  max-height: 60vh;
+  width: 395px;
+  margin: 0 auto;
+}
+
+.link-button {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  text-align: left;
+  padding: 0.5rem 1rem;
+  background-color: #ffd9bb;
+  color: #000000;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 0.5rem;
+  text-decoration: none;
+  max-width: 80%;
+  margin: 0 auto 0.625rem;
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: background-color 0.3s ease;
+}
+
+.link-button:hover {
+  background-color: #f1cdb1;
+}
+</style>
diff --git a/src/views/login/login/LoginScript.js b/src/views/login/login/LoginScript.js
index a8fa531..d3bd2ea 100644
--- a/src/views/login/login/LoginScript.js
+++ b/src/views/login/login/LoginScript.js
@@ -49,7 +49,7 @@ export default {
 
           alert('로그인 성공!')
           // 로그인 성공 후 MyPage로 리다이렉트
-          this.$router.push('/mypage')
+          this.$router.push('/main')
         }
       } catch (error) {
         // 로그인 실패 처리
diff --git a/src/views/login/login/LoginView.vue b/src/views/login/login/LoginView.vue
index cf94e37..6751563 100644
--- a/src/views/login/login/LoginView.vue
+++ b/src/views/login/login/LoginView.vue
@@ -1,34 +1,5 @@
-<script>
-import LogoLoading from '@/components/LogoLoading.vue'
-import LoginScript from './LoginScript.js'
-
-export default {
-  components: {
-    LogoLoading
-  },
-  data() {
-    return {
-      showLoading: true,
-      email: '',
-      password: '',
-      isEmailValid: true
-    }
-  },
-  methods: {
-    ...LoginScript.methods,
-    validateEmail() {
-      this.isEmailValid = this.email.endsWith('@dgu.ac.kr')
-    },
-    onSubmit() {
-      this.validateEmail()
-      LoginScript.methods.onSubmit.call(this)
-    }
-  }
-}
-</script>
-
 <template>
-  <div class="page-container">
+  <div class="login-page page-container">
     <div class="mobile-container">
       <!-- 로고 로딩 화면 -->
       <LogoLoading
@@ -88,150 +59,183 @@ export default {
   </div>
 </template>
 
-<style scoped>
-/* 외부 컨테이너 */
-.page-container {
-  min-height: 100vh;
-  background-color: #fff9f2;
-  font-family: 'NanumSquareRound', sans-serif;
-  display: flex;
-  justify-content: center;
-}
+<script>
+import LogoLoading from '@/components/LogoLoading.vue'
+import LoginScript from './LoginScript.js'
 
-/* 모바일 컨테이너 */
-.mobile-container {
-  width: 395px;
-  min-width: 340px;
-  background-color: #fae8da;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  position: relative;
+export default {
+  components: {
+    LogoLoading
+  },
+  data() {
+    return {
+      showLoading: true,
+      email: '',
+      password: '',
+      isEmailValid: true
+    }
+  },
+  methods: {
+    ...LoginScript.methods,
+    validateEmail() {
+      this.isEmailValid = this.email.endsWith('@dgu.ac.kr')
+    },
+    onSubmit() {
+      this.validateEmail()
+      LoginScript.methods.onSubmit.call(this)
+    }
+  }
 }
+</script>
 
-/* 헤더 */
-.header {
-  background-color: #ffffff;
-  padding: 0.5rem 1rem;
-  position: fixed;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 395px;
-  min-width: 340px;
-  z-index: 10;
-}
+<style scoped>
+/* login-page 네임스페이스로 스타일 제한 */
+.login-page {
+  /* 외부 컨테이너 */
+  .page-container {
+    min-height: 100vh;
+    background-color: #fff9f2;
+    font-family: 'Nanum Square Round', sans-serif;
+    display: flex;
+    justify-content: center;
+  }
 
-.header-content {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
+  /* 모바일 컨테이너 */
+  .mobile-container {
+    width: 395px;
+    min-width: 340px;
+    background-color: #fae8da;
+    min-height: 100vh;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+  }
 
-.logo {
-  height: 3rem;
-}
+  /* 헤더 */
+  .header {
+    background-color: #ffffff;
+    padding: 0.5rem 1rem;
+    position: fixed;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 395px;
+    min-width: 340px;
+    z-index: 10;
+  }
 
-.signup-button {
-  color: #f6b87a;
-  background-color: transparent;
-  padding: 0.25rem 0.5rem;
-  border-radius: 9999px;
-  transition: background-color 0.3s ease;
-}
+  .header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
 
-.signup-button:hover {
-  background-color: rgba(246, 184, 122, 0.1);
-}
+  .logo {
+    height: 3rem;
+  }
 
-/* 메인 컨텐츠 */
-.main-content {
-  margin-top: 160px;
-  flex-grow: 1;
-  padding: 4rem 3rem 2rem;
-}
+  .signup-button {
+    color: #f6b87a;
+    background-color: transparent;
+    padding: 0.25rem 0.5rem;
+    border-radius: 9999px;
+    transition: background-color 0.3s ease;
+  }
 
-.title {
-  margin-bottom: 1rem;
-  font-size: 1.5rem;
-  font-weight: bold;
-  text-align: center;
-}
+  .signup-button:hover {
+    background-color: rgba(246, 184, 122, 0.1);
+  }
 
-/* 폼 */
-.form {
-  margin: 2rem 0;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-}
+  /* 메인 컨텐츠 */
+  .main-content {
+    margin-top: 160px;
+    flex-grow: 1;
+    padding: 4rem 3rem 2rem;
+  }
 
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
+  .title {
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
+    font-weight: bold;
+    text-align: center;
+    font-family: 'Nanum Square Round', sans-serif;
+  }
 
-.form-group label {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: #4a4a4a;
-}
+  /* 폼 */
+  .form {
+    margin: 2rem 0;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
 
-.form-group input {
-  width: 100%;
-  padding: 0.5rem 1rem;
-  background-color: #ddd7d3;
-  border: 1px solid #e5e5e5;
-  border-radius: 9999px;
-  font-size: 0.875rem;
-  outline: none;
-  transition: border-color 0.2s ease, box-shadow 0.2s ease;
-}
+  .form-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
 
-.form-group input:focus {
-  border-color: transparent;
-  box-shadow: 0 0 0 2px #f6b87a;
-}
+  .form-group label {
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #4a4a4a;
+  }
 
-.form-group input.invalid {
-  border-color: #ff6b6b;
-}
+  .form-group input {
+    width: 100%;
+    padding: 0.5rem 1rem;
+    background-color: #ddd7d3;
+    border: 1px solid #e5e5e5;
+    border-radius: 9999px;
+    font-size: 0.875rem;
+    outline: none;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+  }
 
-.error-message {
-  margin-top: 0.25rem;
-  font-size: 0.75rem;
-  color: #ff6b6b;
-}
+  .form-group input:focus {
+    border-color: transparent;
+    box-shadow: 0 0 0 2px #f6b87a;
+  }
 
-.form-actions {
-  margin-top: 20px;
-  display: flex;
-  justify-content: center;
-}
+  .form-group input.invalid {
+    border-color: #ff6b6b;
+  }
 
-/* 버튼 */
-.submit-button {
-  width: 100%;
-  max-width: 10rem;
-  padding: 0.5rem 1rem;
-  height: 2.5rem;
-  background-color: #f6b87a;
-  color: #ffffff;
-  font-size: 0.875rem;
-  font-weight: 500;
-  border-radius: 9999px;
-  text-align: center;
-  transition: background-color 0.3s ease;
-  cursor: pointer;
-}
+  .error-message {
+    margin-top: 0.25rem;
+    font-size: 0.75rem;
+    color: #ff6b6b;
+  }
 
-.submit-button:hover {
-  background-color: #e5a769;
-}
+  .form-actions {
+    margin-top: 20px;
+    display: flex;
+    justify-content: center;
+  }
+
+  /* 버튼 */
+  .submit-button {
+    width: 100%;
+    max-width: 10rem;
+    padding: 0.5rem 1rem;
+    height: 2.5rem;
+    background-color: #f6b87a;
+    color: #ffffff;
+    font-size: 0.875rem;
+    font-weight: 500;
+    border-radius: 9999px;
+    text-align: center;
+    transition: background-color 0.3s ease;
+    cursor: pointer;
+  }
 
-.submit-button:disabled {
-  background-color: #cccccc;
-  cursor: not-allowed;
+  .submit-button:hover {
+    background-color: #e5a769;
+  }
+
+  .submit-button:disabled {
+    background-color: #cccccc;
+    cursor: not-allowed;
+  }
 }
 </style>
diff --git a/src/views/login/mypage/MyAkoGoals.vue b/src/views/login/mypage/MyAkoGoals.vue
index 791640f..cec7e80 100644
--- a/src/views/login/mypage/MyAkoGoals.vue
+++ b/src/views/login/mypage/MyAkoGoals.vue
@@ -1,24 +1,13 @@
-<!-- src/components/MyAkoGoals.vue -->
 <template>
-  <section class="mt-8">
-    <h2 class="mb-2 text-lg font-semibold font-nanum-square-round">
-      나의 아코자국들
-    </h2>
-    <ul v-if="goals.length > 0" class="space-y-3">
-      <li
-        v-for="(goal, index) in goals"
-        :key="index"
-        class="p-3 bg-white rounded-lg"
-      >
-        <p class="text-sm font-nanum-square-round">{{ goal.content }}</p>
-        <p class="text-xs text-gray-500">
-          {{ formatDate(goal.createdAt) }}
-        </p>
+  <section class="my-ako-goals">
+    <h2 class="goals-title">나의 아코자국들</h2>
+    <ul v-if="goals.length > 0" class="goals-list">
+      <li v-for="(goal, index) in goals" :key="index" class="goal-item">
+        <p class="goal-content">{{ goal.content }}</p>
+        <p class="goal-date">{{ formatDate(goal.createdAt) }}</p>
       </li>
     </ul>
-    <p v-else class="text-sm font-nanum-square-round">
-      아직 목표 기록이 없습니다.
-    </p>
+    <p v-else class="no-goals">아직 목표 기록이 없습니다.</p>
   </section>
 </template>
 
@@ -37,4 +26,42 @@ export default {
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.my-ako-goals {
+  margin-top: 2rem;
+}
+
+.goals-title {
+  margin-bottom: 0.5rem;
+  font-size: 1.125rem;
+  font-weight: 600;
+  font-family: 'NanumSquareRound', sans-serif;
+}
+
+.goals-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.goal-item {
+  padding: 0.75rem;
+  background-color: white;
+  border-radius: 0.5rem;
+}
+
+.goal-content {
+  font-size: 0.875rem;
+  font-family: 'NanumSquareRound', sans-serif;
+}
+
+.goal-date {
+  font-size: 0.75rem;
+  color: #6b7280;
+}
+
+.no-goals {
+  font-size: 0.875rem;
+  font-family: 'NanumSquareRound', sans-serif;
+}
+</style>
diff --git a/src/views/login/mypage/MypageScript.js b/src/views/login/mypage/MypageScript.js
index ba37c4b..a87d458 100644
--- a/src/views/login/mypage/MypageScript.js
+++ b/src/views/login/mypage/MypageScript.js
@@ -1,4 +1,5 @@
 import { reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
 
 // user 객체를 reactive로 설정
 export const user = reactive({
@@ -15,15 +16,13 @@ export const confirmPassword = ref('')
 export const currentPassword = ref('')
 export const passwordVerified = ref(false)
 
-// 로그아웃 함수
-export async function handleLogout() {
+export async function handleLogout(router) {
   try {
-    // 로그아웃 요청
     const response = await fetch(
       `${process.env.VUE_APP_BE_API_URL}/api/users/logout`,
       {
         method: 'POST',
-        credentials: 'include' // 세션을 포함하여 로그아웃 요청
+        credentials: 'include' // 세션 포함
       }
     )
 
@@ -34,16 +33,15 @@ export async function handleLogout() {
       document.cookie =
         'JSESSIONID=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;'
 
-      // 로그아웃 후 리디렉트
-      window.location.href = '/auth/login'
+      // 로그아웃 후 로그인 페이지로 리다이렉트
+      router.push('/auth/login')
     } else {
-      alert('로그아웃 실패.')
       console.error('로그아웃 실패:', response.status, response.statusText)
+      router.push('/auth/login') // 오류 발생 시에도 리다이렉트
     }
   } catch (error) {
-    alert('로그아웃 오류.')
     console.error('로그아웃 오류:', error)
-    this.$router.push('/auth/login')
+    router.push('/auth/login') // 오류 발생 시에도 리다이렉트
   }
 }
 
diff --git a/src/views/login/mypage/MypageView.vue b/src/views/login/mypage/MypageView.vue
index ef7d8f0..a57f314 100644
--- a/src/views/login/mypage/MypageView.vue
+++ b/src/views/login/mypage/MypageView.vue
@@ -10,7 +10,7 @@
       <!-- 로그아웃 버튼 -->
       <div class="absolute top-4 right-4">
         <button
-          @click="handleLogout"
+          @click="logout"
           class="px-4 py-2 bg-[#F6B87A] text-black text-sm font-medium rounded-full hover:bg-[#e5a769] transition-colors duration-300"
           style="margin-top: 60px"
         >
@@ -242,6 +242,7 @@
 import MainHeader from '@/components/layout/Header.vue'
 import MainFooter from '@/components/layout/Footer.vue'
 import { ref, computed, onMounted } from 'vue'
+import { useRouter } from 'vue-router' // Vue Router 가져오기
 import axios from 'axios'
 
 // MyPageScript.js에서 필요한 데이터와 함수 가져오기
@@ -251,17 +252,23 @@ import {
   confirmPassword,
   currentPassword,
   passwordVerified,
-  handleLogout,
+  handleLogout, // 로그아웃 함수
   fetchUser,
   verifyCurrentPassword,
   updatePassword,
   updateProfile
 } from './MypageScript.js'
 
+const router = useRouter() // Vue Router 인스턴스 가져오기
 const goals = ref([]) // 목표 데이터
 const isExpanded = ref(false) // 더보기 상태 관리
 const maxVisibleGoals = 3 // 기본 표시할 목표 수
 
+// 로그아웃 버튼 클릭 시 호출
+const logout = () => {
+  handleLogout(router) // router를 handleLogout 함수에 전달
+}
+
 // 목표 기록 가져오기
 const fetchGoals = async () => {
   try {
diff --git a/src/views/login/signup/SignupStyled.js b/src/views/login/signup/SignupStyled.js
deleted file mode 100644
index f8a1db8..0000000
--- a/src/views/login/signup/SignupStyled.js
+++ /dev/null
@@ -1,158 +0,0 @@
-import styled from 'vue-styled-components'
-
-// 외부 컨테이너
-export const PageContainer = styled.div`
-  min-height: 100vh;
-  background-color: #fff9f2;
-  font-family: 'NanumSquareRound', sans-serif;
-  display: flex;
-  justify-content: center;
-`
-
-// 모바일 영역
-export const MobileContainer = styled.div`
-  width: 395px;
-  min-width: 340px;
-  background-color: #fae8da;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-`
-
-// 헤더
-export const Header = styled.header`
-  background-color: #ffffff;
-  padding: 0.5rem 1rem;
-  position: fixed;
-  top: 0;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 395px;
-  min-width: 340px;
-  z-index: 10;
-
-  .logo {
-    height: 3rem;
-  }
-
-  .back-button {
-    color: #f6b87a;
-    background-color: transparent;
-    padding: 0.25rem 0.5rem;
-    border-radius: 9999px;
-    transition: background-color 0.3s ease;
-
-    &:hover {
-      background-color: rgba(246, 184, 122, 0.1);
-    }
-  }
-`
-
-// 메인 컨텐츠
-export const MainContent = styled.main`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  flex-grow: 1;
-  padding: 4rem 3rem 2rem;
-  font-family: 'NanumSquareRound', sans-serif;
-
-  .title {
-    margin-bottom: 0.5rem;
-    font-size: 1.5rem;
-    font-weight: bold;
-    text-align: center;
-  }
-
-  .form {
-    margin: 2rem 0;
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-  }
-
-  .form-group {
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-
-    label {
-      font-size: 0.875rem;
-      font-weight: 500;
-      color: #4a4a4a;
-    }
-
-    input {
-      width: 100%;
-      padding: 0.5rem 1rem;
-      background-color: #ddd7d3;
-      border: 1px solid #e5e5e5;
-      border-radius: 9999px;
-      font-size: 0.875rem;
-      outline: none;
-      transition: border-color 0.2s ease, box-shadow 0.2s ease;
-
-      &:focus {
-        border-color: transparent;
-        box-shadow: 0 0 0 2px #f6b87a;
-      }
-
-      &.invalid {
-        border-color: #ff6b6b;
-      }
-    }
-
-    .error-message {
-      margin-top: 0.25rem;
-      font-size: 0.75rem;
-      color: #ff6b6b;
-    }
-  }
-`
-
-// 인증하기 버튼
-export const VerificationButton = styled.button`
-  padding: 0.5rem 1rem;
-  background-color: #f6b87a;
-  color: #ffffff;
-  font-size: 0.875rem;
-  border-radius: 9999px;
-  text-align: center;
-  transition: background-color 0.3s ease;
-  cursor: pointer;
-
-  &:hover {
-    background-color: #e5a769;
-  }
-
-  &:disabled {
-    background-color: #cccccc;
-    cursor: not-allowed;
-  }
-`
-
-// 가입하기 버튼
-export const SubmitButton = styled.button`
-  width: 100%;
-  max-width: 10rem;
-  padding: 0.5rem 1rem;
-  height: 2.5rem;
-  background-color: #f6b87a;
-  color: #ffffff;
-  font-size: 0.875rem;
-  font-weight: 500;
-  border-radius: 9999px;
-  text-align: center;
-  transition: background-color 0.3s ease;
-  cursor: pointer;
-
-  &:hover {
-    background-color: #e5a769;
-  }
-
-  &:disabled {
-    background-color: #cccccc;
-    cursor: not-allowed;
-  }
-`
diff --git a/src/views/login/signup/SignupView.vue b/src/views/login/signup/SignupView.vue
index 4917f6f..ba7e028 100644
--- a/src/views/login/signup/SignupView.vue
+++ b/src/views/login/signup/SignupView.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="page-container">
     <!-- 모바일 영역 -->
-    <div class="mobile-container">
+    <div
+      class="mobile-container"
+      style="font-family: 'NanumSquareRound', sans-serif"
+    >
       <!-- 상단바 -->
       <header class="header">
         <div class="header-content">
@@ -14,7 +17,9 @@
 
       <!-- 본문 내용 -->
       <main class="main-content">
-        <h1 class="title">회원가입</h1>
+        <h1 class="title" style="font-family: 'NanumSquareRound', sans-serif">
+          회원가입
+        </h1>
         <form @submit.prevent="onSubmit" class="form">
           <!-- 이메일 입력란 및 인증하기 버튼 -->
           <div class="form-group">
@@ -283,4 +288,17 @@ input.invalid {
   background-color: #cccccc;
   cursor: not-allowed;
 }
+.form-inline {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center; /* 높이를 맞추기 위해 추가 */
+}
+
+input#email {
+  height: 2.5rem; /* 버튼 높이와 동일하게 설정 */
+}
+
+.verification-button {
+  height: 2.5rem; /* 입력란 높이와 동일하게 설정 */
+}
 </style>
diff --git a/src/views/mainpage/MainpageView.vue b/src/views/mainpage/MainpageView.vue
index 3a247c8..eab74ce 100644
--- a/src/views/mainpage/MainpageView.vue
+++ b/src/views/mainpage/MainpageView.vue
@@ -1,11 +1,13 @@
 <template>
   <div class="page-container">
-    <div class="mobile-container">
+    <div class="mobile-container" style="margin-top: 20px">
       <MainHeader />
 
       <!-- 본문 내용 -->
       <div class="main-content">
-        <h1 class="title">오늘도 우리 아코는 한 걸음씩!</h1>
+        <h1 class="title" style="font-family: 'UhBeeSe_hyun', sans-serif">
+          오늘도 우리 아코는 한 걸음씩!
+        </h1>
 
         <!-- 스탬프 영역 -->
         <div class="stamp-container">
@@ -210,4 +212,4 @@ onMounted(() => {
 })
 </script>
 
-<style src="./MainpageStyled.css"></style>
+<style scoped src="./MainpageStyled.css"></style>
