Skip to content

Commit

Permalink
Merge branch 'main' of https://github.com/CSID-DGU/2024-2-OSSProj-Oso…
Browse files Browse the repository at this point in the history 
…ri-FE-01 into feature/CSID-DGU#6
  • Loading branch information
@Minn-Choi
Minn-Choi committed Dec 2, 2024
2 parents 4a67ce1 + 2660fcc commit 2ce4f08
Showing 1 changed file with 131 additions and 129 deletions.
260 changes: 131 additions & 129 deletions src/views/login/login/LoginView.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
<template>
<div class="login-page page-container">
<div class="mobile-container">
<div
class="mobile-container"
style="font-family: 'NanumSquareRound', sans-serif"
>
<!-- 로고 로딩 화면 -->
<LogoLoading
v-if="showLoading"
Expand All @@ -20,7 +23,9 @@
</header>

<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">
<label for="email">이메일</label>
Expand Down Expand Up @@ -91,151 +96,148 @@ export default {
<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;
}
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #fff9f2;
}
/* 모바일 컨테이너 */
.mobile-container {
width: 395px;
min-width: 340px;
background-color: #fae8da;
min-height: 100vh;
display: flex;
flex-direction: column;
position: relative;
}
/* 모바일 컨테이너 */
.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 {
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;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
height: 3rem;
}
.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 {
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);
}
.signup-button:hover {
background-color: rgba(246, 184, 122, 0.1);
}
/* 메인 컨텐츠 */
.main-content {
margin-top: 160px;
flex-grow: 1;
padding: 4rem 3rem 2rem;
}
/* 메인 컨텐츠 */
.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;
font-family: 'Nanum Square Round', sans-serif;
}
.title {
margin-bottom: 1rem;
font-size: 1.5rem;
font-weight: bold;
text-align: center;
font-family: 'Nanum Square Round', sans-serif;
}
/* 폼 */
.form {
margin: 2rem 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
/* 폼 */
.form {
margin: 2rem 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.form-group label {
font-size: 0.875rem;
font-weight: 500;
color: #4a4a4a;
}
.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 {
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:focus {
border-color: transparent;
box-shadow: 0 0 0 2px #f6b87a;
}
.form-group input.invalid {
border-color: #ff6b6b;
}
.form-group input.invalid {
border-color: #ff6b6b;
}
.error-message {
margin-top: 0.25rem;
font-size: 0.75rem;
color: #ff6b6b;
}
.error-message {
margin-top: 0.25rem;
font-size: 0.75rem;
color: #ff6b6b;
}
.form-actions {
margin-top: 20px;
display: flex;
justify-content: center;
}
.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 {
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:hover {
background-color: #e5a769;
}
.submit-button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
.submit-button:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
</style>

0 comments on commit 2ce4f08

Please sign in to comment.