diff --git a/public/css/custom.css b/public/css/custom.css index e57b64f..1e22a80 100644 --- a/public/css/custom.css +++ b/public/css/custom.css @@ -157,7 +157,7 @@ .fc-toolbar-title { cursor: pointer; } -/* 클릭 가능한 날짜 (오늘 + 미래) */ +/* 클릭 가능한 날짜 */ .fc-daygrid-day.clickable { cursor: pointer; transition: background-color 0.2s ease-in-out; @@ -362,6 +362,28 @@ background-color: #0b5ed7 !important; color: white; } +/* 풀 연차 버튼 스타일 */ +.vac-btn-primary { + color: #fff; + background-color: #28a745; /* 녹색 */ + border-color: #28a745; + box-shadow: 0 0.125rem 0.25rem 0 rgba(40, 167, 69, 0.4); + font-size: 28px; + transition: all 0.2s ease-in-out; +} +/* 풀 연차 버튼 활성화 스타일 */ +.vac-btn-primary.active { + background-color: #218838 !important; + color: #fff; + border: 3px solid #91d091 !important; + box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3); + transform: scale(1.1); +} +/* 풀 연차 버튼이 눌렸을 때 효과 */ +.vac-btn-primary:active { + transform: scale(0.9); + box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); +} /* 버튼 기본 */ .vac-btn-success { transition: all 0.2s ease-in-out; diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue index 906d5cf..1d4a85c 100644 --- a/src/components/board/BoardComment.vue +++ b/src/components/board/BoardComment.vue @@ -4,7 +4,7 @@ :unknown="comment.author === '익명'" :isCommentAuthor="isCommentAuthor" :boardId="comment.boardId" - :profileName="comment.author" + :profileName="comment.nickname ? comment.nickname : comment.author" :date="comment.createdAt" :comment="comment" :profileImg="comment.profileImg" @@ -17,7 +17,7 @@ @updateReaction="handleUpdateReaction" /> -
+
- - -
{{ commentAlert }} - {{ textAlert }} + {{ textAlert }}
-
-
-
- -
- - -
+
+ +
+ + +
- - + +
+ +
+ + +
+ {{ nicknameAlert }} +
-
-
-
- {{ passwordAlert }} - {{ passwordAlert2 }} + + +
+ + +
+ {{ passwordAlert2 }}
- -
+ +
@@ -108,37 +110,54 @@ const password = ref(''); const isCheck = ref(false); const textAlert = ref(''); + const nicknameAlert = ref(''); const passwordAlert2 = ref(''); + const nickname = ref(''); const emit = defineEmits(['submitComment']); - const alertTextHandler = () => { - textAlert.value = ''; - }; - - const passwordAlertTextHandler = event => { - event.target.value = event.target.value.replace(/\s/g, ''); - passwordAlert2.value = ''; + // 입력 필드별 경고 메시지 초기화 + const clearAlert = field => { + if (field === 'comment') textAlert.value = ''; + if (field === 'nickname') nicknameAlert.value = ''; + if (field === 'password') passwordAlert2.value = ''; }; const handleCommentSubmit = () => { + let isValid = true; + + // 댓글 공백 체크 if (!$common.isNotEmpty(comment.value)) { - textAlert.value = '댓글을 입력하세요'; - return false; + textAlert.value = '댓글을 입력해주세요.'; + isValid = false; } else { textAlert.value = ''; } - if (isCheck.value && !$common.isNotEmpty(password.value)) { - passwordAlert2.value = '비밀번호를 입력하세요'; - return false; - } else { - passwordAlert2.value = ''; + // 익명 선택 시 닉네임 & 비밀번호 체크 + if (isCheck.value) { + if (!$common.isNotEmpty(nickname.value)) { + nicknameAlert.value = '닉네임을 입력해주세요.'; + isValid = false; + } else { + nicknameAlert.value = ''; + } + + if (!$common.isNotEmpty(password.value)) { + passwordAlert2.value = '비밀번호를 입력해주세요.'; + isValid = false; + } else { + passwordAlert2.value = ''; + } } + // 모든 입력값이 유효할 경우만 제출 + if (!isValid) return; + // 댓글 제출 emit('submitComment', { comment: comment.value, + nickname: isCheck.value ? nickname.value : '', password: isCheck.value ? password.value : '', isCheck: isCheck.value, LOCBRDTYP: isCheck.value ? '300102' : null, // 익명일 경우 '300102' 설정 @@ -148,15 +167,19 @@ resetCommentForm(); }; - // 비밀번호 경고 초기화 + // 비밀번호 & 닉네임 경고 초기화 const pwd2AlertHandler = () => { - if (isCheck.value === false) passwordAlert2.value = ''; + if (!isCheck.value) { + passwordAlert2.value = ''; + nicknameAlert.value = ''; + } }; // 입력 필드 리셋 함수 추가 const resetCommentForm = () => { comment.value = ''; password.value = ''; + nickname.value = ''; isCheck.value = false; }; diff --git a/src/components/button/HalfDayButtons.vue b/src/components/button/HalfDayButtons.vue index b706a2a..90d48e8 100644 --- a/src/components/button/HalfDayButtons.vue +++ b/src/components/button/HalfDayButtons.vue @@ -1,67 +1,72 @@ - diff --git a/src/components/category/CategoryBtn.vue b/src/components/category/CategoryBtn.vue index 8ed7d8d..0f741fe 100644 --- a/src/components/category/CategoryBtn.vue +++ b/src/components/category/CategoryBtn.vue @@ -5,35 +5,33 @@ type="button" class="btn" :class="{ - 'btn-outline-primary': selectedCategory !== 'all', - 'btn-primary': selectedCategory === 'all' + 'btn-outline-primary': selectedCategory !== 'all', + 'btn-primary': selectedCategory === 'all' }" @click="selectCategory('all')" > - All + All
  • - + @click="selectCategory(category.value)" + > + {{ category.label }} +
  • - diff --git a/src/components/modal/VacationModal.vue b/src/components/modal/VacationModal.vue index b8f3439..1db1647 100644 --- a/src/components/modal/VacationModal.vue +++ b/src/components/modal/VacationModal.vue @@ -1,7 +1,7 @@