[Design] 깨지는 오류 수정

Minn-Choi · Dec 2, 2024 · 42d4696 · 42d4696
1 parent 0cca499
commit 42d4696
Show file tree

Hide file tree

Showing 5 changed files with 213 additions and 224 deletions.
diff --git a/src/views/calendar/CalendarMainStyled.js → src/views/calendar/CalendarMainStyled.css b/src/views/calendar/CalendarMainStyled.js → src/views/calendar/CalendarMainStyled.css
@@ -1,77 +1,75 @@
-import styled from 'vue-styled-components'
-
-// 전체 컨테이너
-export const PageContainer = styled.div`
+/* 전체 컨테이너 */
+.page-container {
   min-height: 100vh;
   background-color: #fff9f2;
   font-family: 'NanumSquareRound', sans-serif;
   display: flex;
   justify-content: center;
   position: relative;
-`
+}
 
-export const InnerContainer = styled.div`
+.inner-container {
   width: 395px;
   min-width: 340px;
   background-color: #fae8da;
   min-height: 100vh;
   position: relative;
   overflow-y: auto;
-`
+}
 
-// 메인 컨텐츠
-export const MainContent = styled.main`
+/* 메인 컨텐츠 */
+.main-content {
   display: flex;
   flex-direction: column;
   padding: 20px 1.5rem 6rem;
   margin-top: 30px;
-`
+}
 
-export const SectionTitle = styled.h2`
+.section-title {
   font-size: 1.25rem;
   font-weight: 500;
   color: #4a4a4a;
   margin-bottom: 0.5rem;
-`
+}
 
-export const MonthTitle = styled.h3`
+.month-title {
   font-size: 1.5rem;
   font-weight: bold;
   color: #4a4a4a;
-`
+}
 
-// 캘린더 관련 스타일
-export const CalendarContainer = styled.div`
+/* 캘린더 관련 스타일 */
+.calendar-container {
   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`
+.calendar-grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 1rem;
   text-align: center;
   margin-bottom: 1rem;
-`
+}
 
-export const CalendarDay = styled.span`
+.calendar-day {
   font-size: 0.875rem;
   color: #b3b3b3;
-`
+}
 
-export const CalendarWeek = styled.div`
+.calendar-week {
   display: flex;
   width: 100%;
   justify-content: space-between;
   margin-bottom: 0.25rem;
-`
+}
 
-export const DayButton = styled.button`
+.day-button {
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -81,18 +79,22 @@ export const DayButton = styled.button`
   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'};
-`
+  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;
+}
 
-// 학사 일정 팝업
-export const SchedulePopup = styled.div`
+/* 학사 일정 팝업 */
+.schedule-popup {
   position: fixed;
   bottom: 0;
   left: 0;
@@ -104,9 +106,10 @@ export const SchedulePopup = styled.div`
   max-height: 60vh;
   width: 395px;
   margin: 0 auto;
-`
+}
 
-export const LinkButton = styled.a`
+/* 링크 버튼 */
+.link-button {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -122,8 +125,8 @@ export const LinkButton = styled.a`
   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;
-  }
-`
+.link-button:hover {
+  background-color: #f1cdb1;
+}
diff --git a/src/views/calendar/CalendarMainView.vue b/src/views/calendar/CalendarMainView.vue
@@ -1,19 +1,4 @@
 <script setup>
-import {
-  PageContainer,
-  InnerContainer,
-  MainContent,
-  SectionTitle,
-  MonthTitle,
-  CalendarContainer,
-  CalendarGrid,
-  CalendarDay,
-  CalendarWeek,
-  DayButton,
-  SchedulePopup,
-  LinkButton
-} from './CalendarMainStyled.js'
-
 import { ref, onMounted } from 'vue'
 import {
   DAY_LIST,
@@ -37,6 +22,7 @@ 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()

diff --git a/src/views/mainpage/MainpageStyled.css b/src/views/mainpage/MainpageStyled.css
@@ -0,0 +1,130 @@
+/* 외부 컨테이너 */
+.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;
+}