From a294d77af9e8d1d1ee54cdc47d75047e260e8108 Mon Sep 17 00:00:00 2001
From: study2895 <144806675+study2895@users.noreply.github.com>
Date: Mon, 2 Dec 2024 12:00:42 +0900
Subject: [PATCH] =?UTF-8?q?[Feat]=20=EB=A1=9C=EA=B7=B8=EC=95=84=EC=9B=83?=
 =?UTF-8?q?=20=ED=95=A8=EC=88=98=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/calendar/CalendarMainStyled.js | 129 +++++++++++
 src/views/calendar/CalendarMainView.vue  | 263 +++++++---------------
 src/views/login/login/LoginView.vue      | 262 +++++++++++++++-------
 src/views/login/mypage/MypageScript.js   |   2 +-
 src/views/login/signup/SignupStyled.js   | 158 +++++++++++++
 src/views/login/signup/SignupView.vue    | 270 ++++++++++++++++-------
 src/views/mainpage/MainpageStyled.js     | 132 +++++++++++
 src/views/mainpage/MainpageView.vue      | 106 +++------
 8 files changed, 907 insertions(+), 415 deletions(-)
 create mode 100644 src/views/calendar/CalendarMainStyled.js
 create mode 100644 src/views/login/signup/SignupStyled.js
 create mode 100644 src/views/mainpage/MainpageStyled.js

diff --git a/src/views/calendar/CalendarMainStyled.js b/src/views/calendar/CalendarMainStyled.js
new file mode 100644
index 0000000..fe48de2
--- /dev/null
+++ b/src/views/calendar/CalendarMainStyled.js
@@ -0,0 +1,129 @@
+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;
+  position: relative;
+`
+
+export const InnerContainer = styled.div`
+  width: 395px;
+  min-width: 340px;
+  background-color: #fae8da;
+  min-height: 100vh;
+  position: relative;
+  overflow-y: auto;
+`
+
+// 메인 컨텐츠
+export const MainContent = styled.main`
+  display: flex;
+  flex-direction: column;
+  padding: 20px 1.5rem 6rem;
+  margin-top: 30px;
+`
+
+export const SectionTitle = styled.h2`
+  font-size: 1.25rem;
+  font-weight: 500;
+  color: #4a4a4a;
+  margin-bottom: 0.5rem;
+`
+
+export const MonthTitle = styled.h3`
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #4a4a4a;
+`
+
+// 캘린더 관련 스타일
+export const CalendarContainer = styled.div`
+  background-color: #fae8da;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`
+
+export const CalendarGrid = styled.div`
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 1rem;
+  text-align: center;
+  margin-bottom: 1rem;
+`
+
+export const CalendarDay = styled.span`
+  font-size: 0.875rem;
+  color: #b3b3b3;
+`
+
+export const CalendarWeek = styled.div`
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  margin-bottom: 0.25rem;
+`
+
+export const DayButton = styled.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: ${(props) =>
+    props.isSelected ? '#FF7F00' : 'transparent'};
+  color: ${(props) =>
+    props.isSundayOrSaturday
+      ? '#17A1FA'
+      : props.isSelected
+      ? 'white'
+      : '#B3B3B3'};
+`
+
+// 학사 일정 팝업
+export const SchedulePopup = styled.div`
+  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;
+`
+
+export const LinkButton = styled.a`
+  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;
+
+  &:hover {
+    background-color: #f1cdb1;
+  }
+`
diff --git a/src/views/calendar/CalendarMainView.vue b/src/views/calendar/CalendarMainView.vue
index aee097f..b327703 100644
--- a/src/views/calendar/CalendarMainView.vue
+++ b/src/views/calendar/CalendarMainView.vue
@@ -1,150 +1,20 @@
-<template>
-  <div
-    class="min-h-screen bg-[#FFF9F2] font-nanum-square-round flex justify-center relative"
-  >
-    <div
-      class="w-[395px] min-w-[340px] bg-[#FAE8DA] min-h-screen relative overflow-y-auto"
-    >
-      <!-- 상단바 -->
-      <MainHeader />
-
-      <!-- 본문 내용 -->
-      <main class="flex flex-col px-6 pt-20 pb-24" style="margin-top: 30px">
-        <div class="mb-4 mx-4">
-          <h2
-            class="text-xl font-middle text-gray-800 font-nanum-square-round mb-2"
-          >
-            {{ currentYear }} at 동국대학교
-          </h2>
-          <div class="flex items-center justify-between">
-            <h3
-              class="text-2xl font-bold text-gray-800 font-nanum-square-round"
-            >
-              {{ currentMonth }}월
-            </h3>
-            <div class="flex space-x-6">
-              <!-- 화살표 버튼 -->
-              <button @click="goToPrevMonth" class="text-2xl no-hover">
-                <img
-                  :src="require('@/assets/Icons/akoming/arrowright.svg')"
-                  alt="arrow right"
-                  class="transform scale-x-[-1]"
-                />
-              </button>
-              <button @click="goToNextMonth" class="text-2xl no-hover">
-                <img
-                  :src="require('@/assets/Icons/akoming/arrowright.svg')"
-                  alt="arrow right"
-                  style="margin-right: 10px"
-                />
-              </button>
-            </div>
-          </div>
-        </div>
-
-        <!-- 캘린더 -->
-        <div
-          class="bg-[#FAE8DA] rounded-lg p-4 mb-4 flex flex-col items-center calendar-container mx-auto"
-        >
-          <div class="grid grid-cols-7 gap-4 text-center mb-4">
-            <span
-              v-for="day in DAY_LIST"
-              :key="day"
-              class="text-gray-500 text-sm"
-              style="margin-right: 7px"
-              >{{ day }}</span
-            >
-          </div>
-          <div
-            v-for="week in weekCalendarList"
-            :key="week.toString()"
-            class="flex w-full justify-between mb-1"
-          >
-            <button
-              v-for="day in week"
-              :key="day"
-              class="flex flex-col items-center w-full h-8 justify-center rounded-lg"
-              :class="{
-                'text-[#17A1FA]': isSundayOrSaturday(day),
-                'text-[#B3B3B3]': !isSundayOrSaturday(day) && day !== 0,
-                'bg-[#FF7F00] text-white': day === selectedDay,
-                invisible: day === 0
-              }"
-              style="font-size: 0.75rem; width: 2rem; height: 2rem; margin: 2px"
-              @click="selectDay(day)"
-            >
-              <span>{{ day !== 0 ? day : '' }}</span>
-              <span
-                v-if="hasEvent(day)"
-                class="bg-[#B3B3B3] w-1 h-1 rounded-full mt-1"
-              ></span>
-            </button>
-          </div>
-        </div>
-
-        <!-- 학사 일정 목록 팝업 -->
-        <div
-          v-if="isScheduleOpen && selectedEvents.length > 0"
-          class="schedule-popup fixed bottom-0 left-0 right-0 bg-white rounded-t-3xl p-6 overflow-y-auto max-h-[60vh] w-[395px] mx-auto"
-        >
-          <div class="flex justify-between items-center mb-6">
-            <h2 class="text-lg font-bold font-nanum-square-round">학사 일정</h2>
-            <button @click="closeSchedule" class="text-gray-500 text-lg">
-              ✕
-            </button>
-          </div>
-          <div
-            v-for="(event, index) in selectedEvents"
-            :key="index"
-            class="mb-4 border-b border-gray-200 pb-4"
-          >
-            <div class="flex items-start">
-              <div
-                class="w-8 h-8 bg-[#FF7F00] rounded text-white flex items-center justify-center font-bold text-sm mr-4"
-              >
-                {{ selectedDay }}
-              </div>
-              <div>
-                <p class="text-gray-700 font-nanum-square-round">
-                  {{ event.title }}
-                </p>
-                <p class="text-sm text-gray-500 font-nanum-square-round">
-                  {{ formatDateRange(event.startDate, event.endDate) }}
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <!-- 링크 섹션 -->
-        <div class="space-y-2">
-          <a
-            v-for="(link, index) in links"
-            :key="index"
-            :href="link.url"
-            class="flex items-center justify-between text-left pl-4 py-2 bg-[#FFD9BB] text-black text-sm font-medium rounded-lg hover:bg-[#f1cdb1] transition-colors duration-300 no-underline font-nanum-square-round inner-shadow"
-            target="_blank"
-            style="max-width: 80%; margin: 0 auto; margin-bottom: 10px"
-          >
-            {{ link.text }}
-            <img
-              :src="require('@/assets/Icons/akoming/arrowright.svg')"
-              alt="arrow right"
-              class="w-4 h-4 ml-2 mr-4"
-            />
-          </a>
-        </div>
-      </main>
-
-      <!-- 하단바 -->
-      <MainFooter />
-    </div>
-  </div>
-</template>
-
 <script setup>
-import { ref, onMounted } from 'vue'
+import {
+  PageContainer,
+  InnerContainer,
+  MainContent,
+  SectionTitle,
+  MonthTitle,
+  CalendarContainer,
+  CalendarGrid,
+  CalendarDay,
+  CalendarWeek,
+  DayButton,
+  SchedulePopup,
+  LinkButton
+} from './CalendarMainStyled.js'
 
+import { ref, onMounted } from 'vue'
 import {
   DAY_LIST,
   currentDate,
@@ -167,9 +37,7 @@ import {
 } from './CalendarMainScript.js'
 import MainHeader from '@/components/layout/Header.vue'
 import MainFooter from '@/components/layout/Footer.vue'
-import ArrowRightIcon from '@/assets/Icons/akoming/arrowright.svg'
 
-// 페이지 로드 시 이번 달로 초기화
 onMounted(() => {
   currentDate.value = new Date()
   selectedDay.value = new Date().getDate()
@@ -177,41 +45,72 @@ onMounted(() => {
 })
 </script>
 
-<style scoped>
-.calendar-container {
-  width: 100%;
-}
-
-.font-nanum-square-round {
-  font-family: 'NanumSquareRound', sans-serif;
-}
-
-.schedule-popup {
-  max-height: 60vh;
-  background-color: #ffffff;
-  border-radius: 1.5rem 1.5rem 0 0;
-  padding: 1.5rem;
-  width: 395px;
-}
-
-.highlighted-date {
-  background-color: #ff7f00 !important;
-  color: white !important;
-  width: 1.5rem;
-  height: 1.5rem;
-  border-radius: 4px;
-}
+<template>
+  <PageContainer>
+    <InnerContainer>
+      <MainHeader />
+      <MainContent>
+        <div>
+          <SectionTitle>{{ currentYear }} at 동국대학교</SectionTitle>
+          <div class="flex items-center justify-between">
+            <MonthTitle>{{ currentMonth }}월</MonthTitle>
+            <div class="flex space-x-6">
+              <button @click="goToPrevMonth">
+                <img
+                  src="@/assets/Icons/akoming/arrowright.svg"
+                  alt="arrow left"
+                  class="transform scale-x-[-1]"
+                />
+              </button>
+              <button @click="goToNextMonth">
+                <img
+                  src="@/assets/Icons/akoming/arrowright.svg"
+                  alt="arrow right"
+                />
+              </button>
+            </div>
+          </div>
+        </div>
 
-.inner-shadow {
-  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
-}
+        <CalendarContainer>
+          <CalendarGrid>
+            <CalendarDay v-for="day in DAY_LIST" :key="day">{{
+              day
+            }}</CalendarDay>
+          </CalendarGrid>
+          <CalendarWeek v-for="week in weekCalendarList" :key="week.toString()">
+            <DayButton
+              v-for="day in week"
+              :key="day"
+              :isSelected="day === selectedDay"
+              :isSundayOrSaturday="isSundayOrSaturday(day)"
+              @click="selectDay(day)"
+            >
+              {{ day !== 0 ? day : '' }}
+            </DayButton>
+          </CalendarWeek>
+        </CalendarContainer>
 
-.no-hover {
-  transition: none;
-  color: inherit;
-}
+        <SchedulePopup v-if="isScheduleOpen && selectedEvents.length > 0">
+          <!-- 일정 내용 -->
+        </SchedulePopup>
 
-.no-hover:hover {
-  color: inherit;
-}
-</style>
+        <div>
+          <LinkButton
+            v-for="(link, index) in links"
+            :key="index"
+            :href="link.url"
+            target="_blank"
+          >
+            {{ link.text }}
+            <img
+              src="@/assets/Icons/akoming/arrowright.svg"
+              alt="arrow right"
+            />
+          </LinkButton>
+        </div>
+      </MainContent>
+      <MainFooter />
+    </InnerContainer>
+  </PageContainer>
+</template>
diff --git a/src/views/login/login/LoginView.vue b/src/views/login/login/LoginView.vue
index e117c61..8ffd087 100644
--- a/src/views/login/login/LoginView.vue
+++ b/src/views/login/login/LoginView.vue
@@ -1,11 +1,35 @@
+<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="min-h-screen bg-[#FFF9F2] font-nanum-square-round flex justify-center"
-  >
-    <!-- 모바일 영역 -->
-    <div
-      class="w-[395px] min-w-[340px] bg-[#FAE8DA] min-h-screen flex flex-col relative"
-    >
+  <div class="page-container">
+    <div class="mobile-container">
       <!-- 로고 로딩 화면 -->
       <LogoLoading
         v-if="showLoading"
@@ -15,76 +39,47 @@
 
       <!-- 로그인 페이지 -->
       <div v-else>
-        <!-- 상단바 -->
-        <header
-          class="bg-white py-2 px-4 fixed top-0 left-1/2 transform -translate-x-1/2 w-[395px] min-w-[340px] z-10"
-        >
-          <div class="flex items-center justify-between">
-            <img src="@/assets/images/Akoming.svg" alt="로고" class="h-12" />
-            <button
-              @click="$router.push('/auth/signup')"
-              class="text-[#F6B87A] hover:bg-[#F6B87A] hover:bg-opacity-10 px-2 py-1 rounded-full transition-colors duration-300 text-sm font-nanum-square-round"
-            >
+        <header class="header">
+          <div class="header-content">
+            <img src="@/assets/images/Akoming.svg" alt="로고" class="logo" />
+            <button @click="$router.push('/auth/signup')" class="signup-button">
               회원가입
             </button>
           </div>
         </header>
 
-        <!-- 본문 내용 -->
-        <main
-          style="margin-top: 160px"
-          class="flex flex-col justify-center flex-grow px-12 pt-16 pb-8 font-nanum-square-round"
-        >
-          <h1 class="mb-2 text-2xl font-bold text-center font-nanum">로그인</h1>
-          <form @submit.prevent="onSubmit" class="my-8 space-y-4">
-            <!-- 이메일 입력란 -->
-            <div class="space-y-1">
-              <label for="email" class="block text-sm font-medium text-gray-700"
-                >이메일</label
-              >
+        <main class="main-content">
+          <h1 class="title">로그인</h1>
+          <form @submit.prevent="onSubmit" class="form">
+            <div class="form-group">
+              <label for="email">이메일</label>
               <input
                 type="email"
                 id="email"
                 v-model="email"
                 placeholder="이메일 입력"
                 @input="validateEmail"
-                :class="{ 'border-red-500': !isEmailValid && email !== '' }"
+                :class="{ invalid: !isEmailValid && email !== '' }"
                 required
-                class="w-full px-3 py-2 bg-[#DDD7D3] border border-gray-200 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-[#F6B87A] focus:border-transparent transition duration-200"
               />
-              <p
-                v-if="!isEmailValid && email !== ''"
-                class="mt-1 text-xs text-red-500"
-              >
+              <p v-if="!isEmailValid && email !== ''" class="error-message">
                 반드시 @dgu.ac.kr 이메일을 사용해야 합니다.
               </p>
             </div>
 
-            <!-- 비밀번호 입력란 -->
-            <div class="space-y-1">
-              <label
-                for="password"
-                class="block text-sm font-medium text-gray-700"
-                >비밀번호</label
-              >
+            <div class="form-group">
+              <label for="password">비밀번호</label>
               <input
                 type="password"
                 id="password"
                 v-model="password"
                 placeholder="비밀번호 입력"
                 required
-                class="w-full px-3 py-2 bg-[#DDD7D3] border border-gray-200 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-[#F6B87A] focus:border-transparent transition duration-200"
               />
             </div>
 
-            <!-- 로그인 버튼 -->
-            <div class="flex justify-center pt-4">
-              <button
-                type="submit"
-                class="w-full max-w-xs px-4 h-10 bg-[#F6B87A] text-white text-sm font-medium rounded-full hover:bg-[#e5a769] transition-colors duration-300 disabled:bg-gray-300 disabled:cursor-not-allowed"
-              >
-                로그인
-              </button>
+            <div class="form-actions">
+              <button type="submit" class="submit-button">로그인</button>
             </div>
           </form>
         </main>
@@ -93,39 +88,144 @@
   </div>
 </template>
 
-<script>
-import LogoLoading from '@/components/LogoLoading.vue'
-import LoginScript from './LoginScript.js' // LoginScript.js 불러오기
+<style scoped>
+/* 외부 컨테이너 */
+.page-container {
+  min-height: 100vh;
+  background-color: #fff9f2;
+  font-family: 'NanumSquareRound', sans-serif;
+  display: flex;
+  justify-content: center;
+}
 
-export default {
-  components: {
-    LogoLoading
-  },
-  data() {
-    return {
-      showLoading: true,
-      email: '',
-      password: '',
-      isEmailValid: true
-    }
-  },
-  methods: {
-    ...LoginScript.methods, // LoginScript.js의 methods 불러오기
-    validateEmail() {
-      this.isEmailValid = this.email.endsWith('@dgu.ac.kr')
-    },
-    onSubmit() {
-      this.validateEmail() // 이메일 유효성 검사
-      LoginScript.methods.onSubmit.call(this) // LoginScript.js의 onSubmit 호출
-    }
-  }
+/* 모바일 컨테이너 */
+.mobile-container {
+  width: 395px;
+  min-width: 340px;
+  background-color: #fae8da;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  position: relative;
 }
-</script>
 
-<style>
-@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff');
+/* 헤더 */
+.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;
+}
 
-.font-nanum-square-round {
-  font-family: 'NanumSquareRound', sans-serif;
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo {
+  height: 3rem;
+}
+
+.signup-button {
+  color: #f6b87a;
+  background-color: transparent;
+  padding: 0.25rem 0.5rem;
+  border-radius: 9999px;
+  transition: background-color 0.3s ease;
+}
+
+.signup-button:hover {
+  background-color: rgba(246, 184, 122, 0.1);
+}
+
+/* 메인 컨텐츠 */
+.main-content {
+  margin-top: 160px;
+  flex-grow: 1;
+  padding: 4rem 3rem 2rem;
+}
+
+.title {
+  margin-bottom: 1rem;
+  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;
+}
+
+.form-group label {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #4a4a4a;
+}
+
+.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 input:focus {
+  border-color: transparent;
+  box-shadow: 0 0 0 2px #f6b87a;
+}
+
+.form-group input.invalid {
+  border-color: #ff6b6b;
+}
+
+.error-message {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  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;
+}
+
+.submit-button:hover {
+  background-color: #e5a769;
+}
+
+.submit-button:disabled {
+  background-color: #cccccc;
+  cursor: not-allowed;
 }
 </style>
diff --git a/src/views/login/mypage/MypageScript.js b/src/views/login/mypage/MypageScript.js
index 52f520d..ba37c4b 100644
--- a/src/views/login/mypage/MypageScript.js
+++ b/src/views/login/mypage/MypageScript.js
@@ -43,7 +43,7 @@ export async function handleLogout() {
   } catch (error) {
     alert('로그아웃 오류.')
     console.error('로그아웃 오류:', error)
-    this.$router.push('/auth/signup')
+    this.$router.push('/auth/login')
   }
 }
 
diff --git a/src/views/login/signup/SignupStyled.js b/src/views/login/signup/SignupStyled.js
new file mode 100644
index 0000000..f8a1db8
--- /dev/null
+++ b/src/views/login/signup/SignupStyled.js
@@ -0,0 +1,158 @@
+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 8ba86ab..4917f6f 100644
--- a/src/views/login/signup/SignupView.vue
+++ b/src/views/login/signup/SignupView.vue
@@ -1,78 +1,51 @@
 <template>
-  <div
-    class="min-h-screen bg-[#FFF9F2] font-nanum-square-round flex justify-center"
-  >
+  <div class="page-container">
     <!-- 모바일 영역 -->
-    <div
-      class="w-[395px] min-w-[340px] bg-[#FAE8DA] min-h-screen flex flex-col relative"
-    >
+    <div class="mobile-container">
       <!-- 상단바 -->
-      <header
-        class="bg-white py-2 px-4 fixed top-0 left-1/2 transform -translate-x-1/2 w-[395px] min-w-[340px] z-10"
-      >
-        <div class="flex items-center justify-between">
-          <img src="@/assets/images/Akoming.svg" alt="로고" class="h-12" />
-          <button
-            @click="$router.push('/auth/login')"
-            class="text-[#F6B87A] hover:bg-[#F6B87A] hover:bg-opacity-10 px-2 py-1 rounded-full transition-colors duration-300 text-sm font-nanum-square-round"
-          >
+      <header class="header">
+        <div class="header-content">
+          <img src="@/assets/images/Akoming.svg" alt="로고" class="logo" />
+          <button @click="$router.push('/auth/login')" class="back-button">
             뒤로가기
           </button>
         </div>
       </header>
 
       <!-- 본문 내용 -->
-      <main
-        class="flex flex-col justify-center flex-grow px-12 pt-16 pb-8 font-nanum-square-round"
-      >
-        <h1 class="mb-2 text-2xl font-bold text-center font-nanum-square-round">
-          회원가입
-        </h1>
-        <form @submit.prevent="onSubmit" class="my-8 space-y-4">
+      <main class="main-content">
+        <h1 class="title">회원가입</h1>
+        <form @submit.prevent="onSubmit" class="form">
           <!-- 이메일 입력란 및 인증하기 버튼 -->
-          <div class="space-y-1">
-            <label
-              for="email"
-              class="block text-sm font-medium text-gray-700 font-nanum-square-round"
-              >이메일</label
-            >
-            <div class="flex space-x-2">
+          <div class="form-group">
+            <label for="email">이메일</label>
+            <div class="form-inline">
               <input
                 type="email"
                 id="email"
-                style="height: 37.6px"
                 v-model="email"
                 placeholder="이메일 입력"
                 @input="validateEmail"
-                :class="{ 'border-red-500': !isEmailValid && email !== '' }"
+                :class="{ invalid: !isEmailValid && email !== '' }"
                 required
-                class="flex-grow px-3 py-2 bg-[#DDD7D3] border border-gray-200 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-[#F6B87A] focus:border-transparent transition duration-200 font-nanum-square-round"
               />
               <button
                 type="button"
-                style="height: 37.6px"
                 @click="sendVerificationEmail"
                 :disabled="!isEmailValid"
-                class="px-3 py-2 bg-[#F6B87A] text-white text-sm rounded-full hover:bg-[#e5a769] transition-colors duration-300 disabled:bg-gray-300 disabled:cursor-not-allowed font-nanum-square-round"
+                class="verification-button"
               >
                 인증하기
               </button>
             </div>
-            <p
-              v-if="!isEmailValid && email !== ''"
-              class="mt-1 text-xs text-red-500 font-nanum-square-round"
-            >
+            <p v-if="!isEmailValid && email !== ''" class="error-message">
               반드시 @dgu.ac.kr 이메일을 사용해야 합니다.
             </p>
           </div>
 
           <!-- 인증번호 입력란 -->
-          <div v-if="emailSent" class="space-y-1">
-            <label
-              for="authCode"
-              class="block text-sm font-medium text-gray-700 font-nanum-square-round"
-              >인증번호</label
-            >
+          <div v-if="emailSent" class="form-group">
+            <label for="authCode">인증번호</label>
             <input
               type="text"
               id="authCode"
@@ -81,17 +54,12 @@
               placeholder="인증번호 입력"
               maxlength="6"
               required
-              class="w-full px-3 py-2 bg-[#DDD7D3] border border-gray-200 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-[#F6B87A] focus:border-transparent transition duration-200 font-nanum-square-round"
             />
           </div>
 
           <!-- 비밀번호 입력란 -->
-          <div class="space-y-1">
-            <label
-              for="password"
-              class="block text-sm font-medium text-gray-700 font-nanum-square-round"
-              >비밀번호</label
-            >
+          <div class="form-group">
+            <label for="password">비밀번호</label>
             <input
               type="password"
               id="password"
@@ -99,23 +67,15 @@
               placeholder="비밀번호 입력"
               @input="validatePassword"
               required
-              class="w-full px-3 py-2 bg-[#DDD7D3] border border-gray-200 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-[#F6B87A] focus:border-transparent transition duration-200 font-nanum-square-round"
             />
-            <p
-              v-if="!isPasswordValid && password !== ''"
-              class="mt-1 text-xs text-red-500 font-nanum-square-round"
-            >
+            <p v-if="!isPasswordValid && password !== ''" class="error-message">
               최소 8자, 영문, 숫자, 특수문자 중 2종류 이상 조합이어야 합니다.
             </p>
           </div>
 
           <!-- 비밀번호 확인 입력란 -->
-          <div class="space-y-1">
-            <label
-              for="confirmPassword"
-              class="block text-sm font-medium text-gray-700 font-nanum-square-round"
-              >비밀번호 확인</label
-            >
+          <div class="form-group">
+            <label for="confirmPassword">비밀번호 확인</label>
             <input
               type="password"
               id="confirmPassword"
@@ -123,23 +83,18 @@
               placeholder="비밀번호 확인"
               @input="updateSubmitStatus"
               required
-              class="w-full px-3 py-2 bg-[#DDD7D3] border border-gray-200 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-[#F6B87A] focus:border-transparent transition duration-200 font-nanum-square-round"
             />
             <p
               v-if="password !== confirmPassword && confirmPassword !== ''"
-              class="mt-1 text-xs text-red-500 font-nanum-square-round"
+              class="error-message"
             >
               비밀번호가 일치하지 않습니다.
             </p>
           </div>
 
           <!-- 닉네임 입력란 -->
-          <div class="space-y-1">
-            <label
-              for="nickname"
-              class="block text-sm font-medium text-gray-700 font-nanum-square-round"
-              >닉네임 (10자까지)</label
-            >
+          <div class="form-group">
+            <label for="nickname">닉네임 (10자까지)</label>
             <input
               type="text"
               id="nickname"
@@ -147,17 +102,12 @@
               placeholder="닉네임 입력"
               maxlength="10"
               required
-              class="w-full px-3 py-2 bg-[#DDD7D3] border border-gray-200 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-[#F6B87A] focus:border-transparent transition duration-200 font-nanum-square-round"
             />
           </div>
 
           <!-- 가입하기 버튼 -->
-          <div class="flex justify-center pt-4">
-            <button
-              type="submit"
-              :disabled="!canSubmit"
-              class="w-full max-w-xs px-4 h-10 bg-[#F6B87A] text-white text-sm font-medium rounded-full hover:bg-[#e5a769] transition-colors duration-300 disabled:bg-gray-300 disabled:cursor-not-allowed font-nanum-square-round"
-            >
+          <div class="form-actions">
+            <button type="submit" :disabled="!canSubmit" class="submit-button">
               가입하기
             </button>
           </div>
@@ -169,10 +119,168 @@
 
 <script src="./SignupScript.js"></script>
 
-<style>
-@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff');
-
-.font-nanum-square-round {
+<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;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+}
+
+.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;
+}
+
+.header-content {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.logo {
+  height: 3rem;
+}
+
+.back-button {
+  color: #f6b87a;
+  background-color: transparent;
+  padding: 0.25rem 0.5rem;
+  border-radius: 9999px;
+  transition: background-color 0.3s ease;
+}
+
+.back-button:hover {
+  background-color: rgba(246, 184, 122, 0.1);
+}
+
+.main-content {
+  margin-top: 160px;
+  flex-grow: 1;
+  padding: 4rem 3rem 2rem;
+}
+
+.title {
+  margin-bottom: 1rem;
+  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;
+}
+
+.form-inline {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.form-group 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;
+}
+
+input:focus {
+  border-color: transparent;
+  box-shadow: 0 0 0 2px #f6b87a;
+}
+
+input.invalid {
+  border-color: #ff6b6b;
+}
+
+.verification-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;
+}
+
+.verification-button:hover {
+  background-color: #e5a769;
+}
+
+.verification-button:disabled {
+  background-color: #cccccc;
+  cursor: not-allowed;
+}
+
+.error-message {
+  margin-top: 0.25rem;
+  font-size: 0.75rem;
+  color: #ff6b6b;
+}
+
+.form-actions {
+  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:hover {
+  background-color: #e5a769;
+}
+
+.submit-button:disabled {
+  background-color: #cccccc;
+  cursor: not-allowed;
 }
 </style>
diff --git a/src/views/mainpage/MainpageStyled.js b/src/views/mainpage/MainpageStyled.js
new file mode 100644
index 0000000..47b09da
--- /dev/null
+++ b/src/views/mainpage/MainpageStyled.js
@@ -0,0 +1,132 @@
+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;
+  position: relative;
+  overflow-y: auto;
+`
+
+// 메인 컨텐츠
+export const MainContent = styled.main`
+  display: flex;
+  flex-direction: column;
+  padding: 6rem 1.5rem 6rem;
+  font-family: 'NanumSquareRound', sans-serif;
+
+  .title {
+    margin-bottom: 70px;
+    font-size: 1.25rem;
+    font-weight: 500;
+    text-align: center;
+    color: #4a4a4a;
+    font-family: 'UhBeeSehyun', sans-serif;
+  }
+`
+
+// 스탬프 영역
+export const StampContainer = styled.div`
+  position: relative;
+  width: 390px;
+  height: 520px;
+  margin: 0 auto;
+
+  .stamp {
+    position: absolute;
+    width: 95px;
+    height: 95px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+`
+
+// 할 일 표시 영역
+export const TaskContainer = styled.div`
+  margin-top: -80px;
+  margin-bottom: 3rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+
+  .task-row {
+    display: flex;
+    gap: 0.75rem;
+    width: 100%;
+    max-width: 290px;
+
+    .task {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex: 1;
+      height: 40px;
+      padding: 0 1rem;
+      background-color: white;
+      border-radius: 17px;
+
+      span {
+        font-size: 0.875rem;
+        font-family: 'NanumSquareRound', sans-serif;
+        color: ${(props) => (props.completed ? '#FF7F00' : '#B3B3B3')};
+      }
+
+      img {
+        width: 20px;
+        height: 20px;
+        filter: ${(props) => (props.completed ? 'none' : 'grayscale(100%)')};
+      }
+    }
+  }
+`
+
+// 아코 이미지 영역
+export const AkoImageContainer = styled.div`
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 2.5rem;
+
+  .ako-status {
+    display: flex;
+    align-items: center;
+    margin-bottom: 0.5rem;
+
+    img {
+      width: 32px;
+      height: 32px;
+      margin-right: 0.5rem;
+    }
+
+    p {
+      font-size: 0.875rem;
+      color: #757575;
+      font-family: 'NanumSquareRound', sans-serif;
+    }
+  }
+
+  .ako-image {
+    width: 256px;
+    height: 256px;
+    margin: 0 auto;
+  }
+`
diff --git a/src/views/mainpage/MainpageView.vue b/src/views/mainpage/MainpageView.vue
index 75a9fae..3a29fc1 100644
--- a/src/views/mainpage/MainpageView.vue
+++ b/src/views/mainpage/MainpageView.vue
@@ -1,25 +1,15 @@
 <template>
-  <div class="min-h-screen bg-[#FFF9F2] font-nanum flex justify-center">
-    <div
-      class="w-[395px] min-w-[340px] bg-[#FAE8DA] min-h-screen relative overflow-y-auto"
-    >
+  <PageContainer>
+    <MobileContainer>
       <MainHeader />
+
       <!-- 본문 내용 -->
-      <main class="flex flex-col px-6 pt-24 pb-24">
-        <!-- 제목 -->
-        <h1
-          class="mb-10 text-xl font-medium text-center text-gray-800 font-uhbeesehyun"
-          style="margin-bottom: 70px"
-        >
-          오늘도 우리 아코는 한 걸음씩!
-        </h1>
+      <MainContent>
+        <h1 class="title">오늘도 우리 아코는 한 걸음씩!</h1>
 
         <!-- 스탬프 영역 -->
-        <div class="relative w-[390px] h-[520px] mx-auto">
-          <svg
-            class="absolute top-0 left-0 z-0 w-full h-full"
-            viewBox="0 0 390 520"
-          >
+        <StampContainer>
+          <svg viewBox="0 0 390 520" class="path">
             <path
               d="M 60 25 L 195 25 Q 330 25, 330 107.5 Q 330 190, 195 190 L 60 190 A 75 75 0 0 0 60 340 L 270 340"
               stroke="#BBB4B4"
@@ -30,8 +20,8 @@
           <div
             v-for="(stamp, index) in stamps"
             :key="index"
+            class="stamp"
             :style="stamp.position"
-            class="absolute w-[95px] h-[95px] flex justify-center items-center"
           >
             <img
               :src="
@@ -40,85 +30,61 @@
                   : getGrayStampIcon(stamp.label)
               "
               alt="stamp"
-              class="w-full h-full"
             />
           </div>
-        </div>
+        </StampContainer>
 
         <!-- 할 일 표시 -->
-        <div
-          class="mb-12 flex flex-col items-center space-y-3"
-          style="margin-top: -80px"
-        >
-          <div class="flex space-x-3 w-full max-w-[290px]">
+        <TaskContainer>
+          <div class="task-row">
             <div
               v-for="(task, index) in tasks.slice(0, 2)"
               :key="index"
-              class="flex items-center justify-between flex-1 h-[40px] px-3 bg-white rounded-[17px]"
+              class="task"
             >
-              <span
-                class="text-sm font-nanum-square-round"
-                :class="{
-                  'text-[#FF7F00]': task.completed,
-                  'text-[#B3B3B3]': !task.completed
-                }"
-              >
-                {{ task.name }}
-              </span>
-              <img
-                :src="getTaskIcon(task.name)"
-                :class="task.completed ? 'text-[#FF7F00]' : 'text-[#B3B3B3]'"
-                class="w-5 h-5"
-                :style="{ filter: task.completed ? '' : 'grayscale(100%)' }"
-              />
+              <span>{{ task.name }}</span>
+              <img :src="getTaskIcon(task.name)" />
             </div>
           </div>
-          <div class="flex space-x-3 w-full max-w-[290px]">
+          <div class="task-row">
             <div
               v-for="(task, index) in tasks.slice(2)"
               :key="index"
-              class="flex items-center justify-between flex-1 h-[40px] px-3 bg-white rounded-[17px]"
+              class="task"
             >
-              <span
-                class="text-sm font-nanum-square-round"
-                :class="{
-                  'text-[#FF7F00]': task.completed,
-                  'text-[#B3B3B3]': !task.completed
-                }"
-              >
-                {{ task.name }}
-              </span>
-              <img
-                :src="getTaskIcon(task.name)"
-                :class="task.completed ? 'text-[#FF7F00]' : 'text-[#B3B3B3]'"
-                class="w-5 h-5"
-                :style="{ filter: task.completed ? '' : 'grayscale(100%)' }"
-              />
+              <span>{{ task.name }}</span>
+              <img :src="getTaskIcon(task.name)" />
             </div>
           </div>
-        </div>
+        </TaskContainer>
 
         <!-- 아코 이미지 -->
-        <div class="text-center flex flex-col items-center mt-10">
-          <div class="flex items-center mb-2">
+        <AkoImageContainer>
+          <div class="ako-status">
             <img
               src="@/assets/Icons/akoming/mainpage/minielephanticon.svg"
               alt="미니 아코 이미지"
-              class="w-8 h-8 mr-2"
             />
-            <p class="text-sm text-gray-600 font-nanum-square-round">
-              토실토실 아코가 자라는 중
-            </p>
+            <p>토실토실 아코가 자라는 중</p>
           </div>
-          <img :src="akoImage" alt="아코 이미지" class="w-64 h-64 mx-auto" />
-        </div>
-      </main>
+          <img :src="akoImage" alt="아코 이미지" class="ako-image" />
+        </AkoImageContainer>
+      </MainContent>
+
       <MainFooter />
-    </div>
-  </div>
+    </MobileContainer>
+  </PageContainer>
 </template>
 
 <script setup>
+import {
+  PageContainer,
+  MobileContainer,
+  MainContent,
+  StampContainer,
+  TaskContainer,
+  AkoImageContainer
+} from './MainpageStyled.js'
 import { ref, onMounted } from 'vue'
 import axios from 'axios'
 import MainHeader from '@/components/layout/Header.vue'